.notes-shell{position:relative;isolation:isolate;padding-bottom:84px}.notes-shell:before,.notes-shell:after{position:absolute;z-index:-1;pointer-events:none;content:""}.notes-shell:before{top:122px;right:max(-80px,calc((100vw - 1120px)/2 - 180px));width:360px;height:170px;border:3px solid color-mix(in srgb,var(--color-accent) 72%,transparent);border-radius:58% 42% 61% 39%/43% 49% 51% 57%;background:linear-gradient(104deg,transparent 0 36%,color-mix(in srgb,var(--color-accent) 26%,transparent) 36% 45%,transparent 45%),radial-gradient(circle at 30% 55%,color-mix(in srgb,var(--color-surface-strong) 38%,transparent) 0 18%,transparent 19%);transform:rotate(11deg)}.notes-shell:after{bottom:120px;left:max(-100px,calc((100vw - 1120px)/2 - 220px));width:420px;height:96px;border-radius:999px;background:radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--color-accent-2) 56%,transparent) 0 8px,transparent 9px),repeating-linear-gradient(96deg,color-mix(in srgb,var(--color-accent-3) 22%,transparent) 0 18px,transparent 19px 35px);transform:rotate(-12deg)}.notes-head{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:end;padding-top:84px}.notes-head .eyebrow{width:fit-content;margin:0 0 10px;padding:2px 12px;border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-accent-2);box-shadow:var(--shadow-doodle-small);color:#fffdf3;font-size:18px;font-weight:700;transform:rotate(-2deg)}.notes-head h1{margin:0;font-family:Gaegu,DM Sans,sans-serif;font-size:76px;font-weight:700;line-height:.95;letter-spacing:0;text-shadow:4px 4px 0 var(--color-surface-strong),-2px 2px 0 color-mix(in srgb,var(--color-accent-2) 44%,transparent)}.notes-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:18px;font-weight:700}.notes-meta span:first-child{padding:4px 10px;border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-surface-strong);box-shadow:var(--shadow-doodle-small)}.notes-intro p{position:relative;z-index:1;width:min(100%,760px);margin:18px 0 0;padding:16px 18px;border:var(--border-doodle);border-radius:26px 15px 30px 16px/16px 28px 14px 24px;background:var(--color-surface);box-shadow:var(--shadow-doodle);font-size:22px;font-weight:700;line-height:1.7;transform:rotate(-1deg)}.notes-tools{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:22px}.notes-search{display:grid;grid-template-columns:auto minmax(220px,420px);gap:10px;align-items:center;padding:10px 12px;border:var(--border-doodle);border-radius:24px 17px 28px 16px/18px 26px 14px 24px;background:color-mix(in srgb,var(--color-surface-strong) 72%,var(--color-surface));box-shadow:var(--shadow-doodle-small);font-size:20px;font-weight:700;transform:rotate(.8deg)}.notes-search input{min-width:0;width:100%;padding:8px 12px;border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-bg);color:var(--color-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-shadow) 12%,transparent);font-family:"Noto Serif SC",serif;font-size:17px;outline:none}.notes-search input:focus{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-shadow) 12%,transparent),0 0 0 4px color-mix(in srgb,var(--color-accent) 18%,transparent)}.notes-search-meta{min-height:28px;margin:0;color:var(--color-muted);font-size:18px;font-weight:700}.notes-board{position:relative;z-index:1;isolation:isolate;min-height:var(--notes-board-height, 760px);margin-top:36px;padding:28px 18px 56px;border:var(--border-doodle);border-radius:34px 22px 38px 20px/20px 34px 18px 30px;background:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--color-accent) 14%,transparent) 0 6px,transparent 7px 100%),radial-gradient(circle at 88% 74%,color-mix(in srgb,var(--color-accent-2) 12%,transparent) 0 7px,transparent 8px 100%),linear-gradient(135deg,color-mix(in srgb,var(--color-surface) 92%,var(--color-bg)),color-mix(in srgb,var(--color-surface-strong) 24%,var(--color-surface)));box-shadow:var(--shadow-doodle),inset 0 0 0 7px color-mix(in srgb,var(--color-bg) 62%,transparent);overflow:hidden}.notes-board:before,.notes-board:after{position:absolute;z-index:0;pointer-events:none;content:""}.notes-board:before{inset:20px 18px 22px;border:2px dashed color-mix(in srgb,var(--color-border) 46%,transparent);border-radius:30px 20px 36px 18px/18px 32px 16px 28px;transform:rotate(-.7deg)}.notes-board:after{right:-54px;bottom:54px;width:330px;height:132px;border:3px solid color-mix(in srgb,var(--color-accent-3) 58%,transparent);border-radius:58% 42% 47% 53%/50% 35% 65% 50%;background:radial-gradient(circle at 18% 48%,color-mix(in srgb,var(--color-accent-3) 28%,transparent) 0 12px,transparent 13px),radial-gradient(circle at 52% 40%,color-mix(in srgb,var(--color-accent) 24%,transparent) 0 8px,transparent 9px),linear-gradient(100deg,transparent 0 42%,color-mix(in srgb,var(--color-accent-2) 16%,transparent) 42% 54%,transparent 54%);transform:rotate(-10deg)}.notes-empty{position:relative;z-index:2;margin:0;padding:18px;font-size:24px;font-weight:700}.note-block{position:absolute;left:var(--note-x);top:var(--note-y);z-index:var(--note-z);width:min(var(--note-width),260px);padding:20px 14px 12px;border:3px solid var(--note-outline);border-radius:24px 18px 28px 16px/18px 24px 16px 26px;background:linear-gradient(180deg,color-mix(in srgb,var(--note-fill) 88%,var(--color-bg)) 0%,var(--note-fill) 100%),repeating-linear-gradient(0deg,transparent 0 29px,color-mix(in srgb,var(--color-border) 8%,transparent) 30px 31px);box-shadow:var(--shadow-doodle),inset -5px -7px color-mix(in srgb,var(--color-bg) 26%,transparent);transform:rotate(var(--note-rotate)) scale(var(--note-scale));transition:box-shadow .16s ease,transform .16s ease,filter .16s ease;cursor:zoom-in;touch-action:none}.note-block:before{position:absolute;top:-14px;left:22px;width:82px;height:25px;border:2px solid color-mix(in srgb,var(--color-border) 66%,transparent);border-radius:11px 8px 13px 7px/8px 12px 7px 13px;background:repeating-linear-gradient(94deg,color-mix(in srgb,var(--note-accent) 42%,var(--color-surface)) 0 10px,color-mix(in srgb,var(--color-surface) 72%,transparent) 11px 18px);box-shadow:2px 2px color-mix(in srgb,var(--color-shadow) 42%,transparent);transform:rotate(-4deg);content:""}.note-block:after{position:absolute;right:-3px;bottom:-3px;width:31px;height:31px;border-top:3px solid color-mix(in srgb,var(--color-border) 72%,transparent);border-left:3px solid color-mix(in srgb,var(--color-border) 72%,transparent);border-radius:16px 0 18px;background:color-mix(in srgb,var(--note-accent) 34%,var(--color-bg));box-shadow:-3px -3px color-mix(in srgb,var(--color-shadow) 18%,transparent);content:""}.note-block[data-state=archive]{filter:saturate(.82)}.note-block:hover{box-shadow:10px 10px 0 var(--color-shadow),inset -5px -7px color-mix(in srgb,var(--color-bg) 26%,transparent);transform:rotate(calc(var(--note-rotate) - 1deg)) scale(calc(var(--note-scale) + .03))}.note-block:focus-visible{outline:4px dashed var(--color-accent-2);outline-offset:5px}.note-block.is-dragging{z-index:80;cursor:grabbing;filter:saturate(1.08);transform:rotate(0) scale(1.05)}.note-head,.note-tail{display:flex;align-items:center;justify-content:space-between;gap:8px}.note-head{align-items:stretch}.note-drag-handle{flex:1 1 auto;min-width:54px;padding:2px 10px;border:2px solid color-mix(in srgb,var(--color-border) 70%,transparent);border-radius:13px 9px 14px 8px/9px 13px 8px 14px;background:repeating-linear-gradient(93deg,color-mix(in srgb,var(--note-accent) 44%,var(--color-surface)) 0 10px,color-mix(in srgb,var(--color-surface) 72%,transparent) 11px 18px);box-shadow:2px 2px color-mix(in srgb,var(--color-shadow) 38%,transparent);color:var(--color-text);font-size:14px;font-weight:700;cursor:grab;touch-action:none}.note-drag-handle.is-locked{cursor:zoom-in}.note-drag-handle:active{cursor:grabbing}.note-chip{display:inline-block;padding:2px 8px;border:2px solid var(--color-border);border-radius:999px;background:var(--color-surface);font-size:16px;font-weight:700}.note-state{padding:2px 7px;border:2px solid color-mix(in srgb,var(--color-border) 72%,transparent);border-radius:13px 9px 14px 8px/9px 13px 8px 14px;background:color-mix(in srgb,var(--note-accent) 34%,var(--color-surface));font-size:14px;font-weight:700;transform:rotate(2deg);white-space:nowrap}.note-block p{margin:12px 0 0;font-size:20px;font-weight:700;line-height:1.5;word-break:break-word}.note-tail{margin-top:12px}.note-trace{width:58px;height:12px;border-bottom:4px solid var(--note-accent);border-radius:0 0 70% 50%;transform:rotate(-3deg)}.note-controls{display:flex;gap:8px}.note-controls button,.primary,.ghost,.danger,.auth-badge,.captcha-chip,.compose-fab{border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-surface);box-shadow:3px 3px 0 var(--color-shadow);color:var(--color-text);font-size:16px;font-weight:700;cursor:pointer}.note-controls button,.auth-actions button,.compose-actions button,.confirm-actions button,.note-view-actions button{padding:4px 10px}.note-controls button:hover,.primary:hover,.ghost:hover,.danger:hover,.auth-badge:hover,.captcha-chip:hover,.compose-fab:hover{background:var(--color-accent);box-shadow:1px 1px 0 var(--color-shadow);color:#fffdf3;transform:translate(2px,2px) rotate(-2deg)}.danger{background:color-mix(in srgb,var(--color-accent) 78%,var(--color-surface));color:#fffdf3}.notes-auth{position:fixed;right:18px;bottom:18px;z-index:30;display:grid;gap:10px;align-items:end;justify-items:end}.auth-badge{padding:10px 16px;font-size:18px}.auth-card,.compose-card,.note-view-card,.confirm-card{position:relative;display:grid;gap:12px;width:min(92vw,340px);padding:16px;border:var(--border-doodle);border-radius:28px 18px 32px 16px/18px 30px 16px 26px;background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 94%,var(--color-accent-bg)) 0%,var(--color-surface) 100%);box-shadow:var(--shadow-doodle)}.auth-card:before,.compose-card:before,.note-view-card:before,.confirm-card:before{position:absolute;top:-12px;left:28px;width:90px;height:23px;border:2px solid color-mix(in srgb,var(--color-border) 68%,transparent);border-radius:10px 7px 12px 8px/8px 12px 7px 10px;background:color-mix(in srgb,var(--color-accent-2) 42%,var(--color-surface));box-shadow:2px 2px color-mix(in srgb,var(--color-shadow) 44%,transparent);transform:rotate(-3deg);content:""}.notes-auth:not(.is-open) .auth-card{display:none}.notes-auth:not(.is-open) .auth-badge{display:inline-flex}.notes-auth.is-open .auth-badge{display:none}.auth-card h2,.compose-card h2,.confirm-card h2{margin:0;font-family:Gaegu,DM Sans,sans-serif;font-size:28px;font-weight:700}.auth-card label,.compose-card label{display:grid;gap:6px;font-size:16px;font-weight:700}.auth-card input,.compose-card textarea{width:100%;padding:10px 12px;border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-bg);color:var(--color-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-shadow) 12%,transparent)}.captcha-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.captcha-chip{padding:10px 14px;cursor:pointer}.auth-actions,.compose-actions,.confirm-actions,.note-view-actions{display:flex;gap:10px;flex-wrap:wrap}.auth-hint{margin:0;color:var(--color-muted);font-size:14px;line-height:1.5}.compose-dialog,.note-view-dialog,.confirm-dialog{padding:0;border:0;background:transparent}.compose-dialog::backdrop,.note-view-dialog::backdrop,.confirm-dialog::backdrop{background:#00000061}.compose-dialog[open],.note-view-dialog[open],.confirm-dialog[open]{display:grid;place-items:center}.note-view-card{width:min(92vw,680px);max-height:min(82vh,720px);overflow:auto;padding:28px 24px 22px;background:radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--color-accent-2) 18%,transparent) 0 44px,transparent 45px),linear-gradient(180deg,color-mix(in srgb,var(--color-surface) 92%,var(--color-accent-bg)) 0%,var(--color-surface) 100%);transform:rotate(-.7deg)}.note-view-close{justify-self:end;padding:5px 12px;border:2px solid var(--color-border);border-radius:18px 12px 20px 13px/12px 18px 10px 16px;background:var(--color-surface);box-shadow:3px 3px 0 var(--color-shadow);color:var(--color-text);font-size:16px;font-weight:700;cursor:pointer}.note-view-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-muted);font-size:18px;font-weight:700}.note-view-meta span{padding:3px 9px;border:2px solid var(--color-border);border-radius:999px;background:color-mix(in srgb,var(--color-accent-bg) 64%,var(--color-surface))}.note-view-card p{margin:0;font-size:clamp(24px,4vw,42px);font-weight:700;line-height:1.55;word-break:break-word}.confirm-card{width:min(92vw,420px);transform:rotate(.9deg)}.confirm-card p{margin:0;color:var(--color-muted);font-size:18px;font-weight:700;line-height:1.6}.compose-card textarea{resize:vertical;min-height:180px;font-family:Cormorant Garamond,serif;font-size:20px;line-height:1.7}.compose-fab{position:fixed;right:18px;bottom:18px;z-index:28;padding:12px 18px;background:var(--color-accent-3);color:var(--color-bg);font-size:18px}.is-hidden{display:none}@media (max-width: 720px){.notes-head{padding-top:74px}.notes-head h1{font-size:52px}.notes-board{min-height:auto;padding:22px 14px 48px}.note-block{position:relative;left:auto;top:auto;width:100%;margin-bottom:14px;transform:rotate(var(--note-rotate)) scale(1);touch-action:auto}.note-block:hover{transform:rotate(var(--note-rotate)) scale(1.01)}.notes-auth{right:12px;left:12px;bottom:12px;justify-items:stretch}.notes-search{grid-template-columns:1fr;width:100%;transform:none}.note-head{flex-wrap:wrap}.note-drag-handle{flex-basis:100%;cursor:zoom-in}.auth-card,.compose-card,.note-view-card,.confirm-card{width:100%}.compose-fab{right:12px;bottom:12px}}