:root{--bg: oklch(.16 .004 60);--bg-deep: oklch(.12 .004 60);--surface: oklch(.21 .006 60);--surface-raised: oklch(.25 .007 60);--line: oklch(.32 .006 60);--ink: oklch(.94 .006 80);--ink-soft: oklch(.78 .008 80);--ink-mute: oklch(.6 .008 80);--ink-faint: oklch(.46 .008 80);--accent: oklch(.78 .09 78);--accent-deep: oklch(.66 .09 72);--paper: oklch(.92 .018 92);--paper-ink: oklch(.26 .02 70);--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;--gap: 14px;--pad: clamp(20px, 4vw, 36px);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .15s;--dur: .26s;--dur-slow: .6s;--z-wall: 1;--z-chrome: 100;--z-composer: 200;--z-detail-backdrop: 300;--z-detail: 310;--z-toast: 400;--z-onboard: 500}@media (prefers-reduced-motion: reduce){:root{--dur-fast: 0ms;--dur: 0ms;--dur-slow: 0ms}}#detail-backdrop{position:fixed;inset:0;background:#040303b8;backdrop-filter:blur(14px) saturate(.9);z-index:var(--z-detail-backdrop);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),visibility var(--dur)}body.detail-open #detail-backdrop{opacity:1;visibility:visible}#detail{position:fixed;inset:0;z-index:var(--z-detail);display:grid;grid-template-columns:minmax(0,1fr) min(34vw,420px);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,7vh,90px) clamp(28px,6vw,90px);pointer-events:none;visibility:hidden}body.detail-open #detail{pointer-events:auto;visibility:visible}.detail-stage{justify-self:end;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}.detail-stage img,.detail-stage video{max-width:100%;max-height:80vh;object-fit:contain;border-radius:3px;box-shadow:0 40px 120px #0009;display:block}.detail-stage .note{width:min(46vw,540px);padding:clamp(34px,4vw,56px);font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.5;background:var(--paper);color:var(--paper-ink);border-radius:3px;box-shadow:0 40px 120px #0009}.detail-meta{align-self:center;max-width:420px;opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease-out) 80ms,transform var(--dur) var(--ease-out) 80ms}body.detail-open .detail-meta{opacity:1;transform:none}.detail-title{font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);line-height:1.2;color:var(--ink);background:none;border:0;outline:0;width:100%;padding:2px 0;border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease-out)}.detail-title:hover,.detail-title:focus{border-bottom-color:var(--line)}.detail-attr{margin-top:12px;font-size:13px;letter-spacing:.03em;line-height:1.6;color:var(--ink-mute)}.detail-attr a{color:var(--accent);text-decoration:none}.detail-attr a:hover{text-decoration:underline}.detail-note{margin-top:22px;width:100%;min-height:96px;resize:vertical;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);background:#1a181680;border:1px solid var(--line);border-radius:4px;padding:14px 16px;outline:0;transition:border-color var(--dur) var(--ease-out)}.detail-note::placeholder{color:var(--ink-faint)}.detail-note:focus{border-color:var(--accent)}.detail-actions{margin-top:22px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-mute)}.detail-actions time{letter-spacing:.03em}.detail-delete{font-size:12.5px;letter-spacing:.04em;color:var(--ink-mute);border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}.detail-delete:hover{color:#eb827b;border-color:#9c433f}.detail-close,.detail-nav{position:fixed;z-index:calc(var(--z-detail) + 1);width:46px;height:46px;display:grid;place-items:center;border-radius:999px;color:var(--ink-soft);background:#1a181680;backdrop-filter:blur(8px);font-size:22px;line-height:1;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}.detail-close:hover,.detail-nav:hover{background:var(--surface-raised);color:var(--ink)}.detail-close{top:24px;right:28px;font-size:18px}.detail-nav.prev{left:24px;top:50%;transform:translateY(-50%)}.detail-nav.next{right:24px;top:50%;transform:translateY(-50%)}@media (max-width: 760px){#detail{grid-template-columns:1fr;align-content:center;gap:20px}.detail-stage{justify-self:center}.detail-stage img,.detail-stage video{max-height:52vh}.detail-meta{justify-self:center}}#composer-backdrop{position:fixed;inset:0;background:#04030399;backdrop-filter:blur(8px);z-index:var(--z-composer);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),visibility var(--dur)}body.composing #composer-backdrop{opacity:1;visibility:visible}#composer{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:min(560px,92vw);z-index:calc(var(--z-composer) + 1);background:var(--paper);color:var(--paper-ink);border-radius:6px;box-shadow:0 40px 120px #0000008c;padding:28px;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility var(--dur)}body.composing #composer{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}#composer textarea{width:100%;min-height:150px;resize:vertical;font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--paper-ink);background:none;border:0;outline:0}#composer textarea::placeholder{color:#6b6157}#composer .composer-actions{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}#composer .composer-actions button{font-size:13px;font-weight:600;border-radius:999px;padding:9px 18px;transition:filter var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}#composer .cancel{color:var(--paper-ink)}#composer .cancel:hover{background:#d5d1c4}#composer .save{background:var(--paper-ink);color:var(--paper)}#composer .save:hover{filter:brightness(1.3)}#onboard{position:fixed;inset:0;z-index:var(--z-onboard);display:grid;place-items:center;background:#040303c7;backdrop-filter:blur(10px);text-align:center;transition:opacity var(--dur-slow) var(--ease-out)}#onboard.hide{opacity:0;pointer-events:none}#onboard .inner{max-width:440px;padding:0 28px}#onboard h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}#onboard p{margin-top:18px;color:var(--ink-soft);font-size:15.5px;line-height:1.75}#onboard p b{color:var(--accent);font-weight:600}#onboard button{margin-top:30px;background:var(--accent);color:var(--bg-deep);font-size:14px;font-weight:600;border-radius:999px;padding:12px 26px;transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}#onboard button:hover{filter:brightness(1.08);transform:translateY(-1px)}#toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%) translateY(10px);z-index:var(--z-toast);background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:13px;box-shadow:0 18px 50px #00000073;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility var(--dur)}#toast.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}*{margin:0;box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;inset:0}::selection{background:var(--accent);color:var(--bg-deep)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}#wall{position:fixed;inset:0;cursor:grab;touch-action:none}#wall.dragging{cursor:grabbing}.col{position:absolute;top:0;will-change:transform}.card{position:absolute;width:100%;padding:calc(var(--gap) / 2);will-change:transform,visibility}.card .frame{position:relative;width:100%;height:100%;overflow:hidden;background:var(--surface);border-radius:2px}.card img,.card video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:brightness(.78) saturate(.96);transition:transform var(--dur-slow) var(--ease-out),filter var(--dur) var(--ease-out);pointer-events:none;-webkit-user-drag:none}.card:hover img,.card:hover video{transform:scale(1.02);filter:brightness(1) saturate(1)}.card .note{width:100%;height:100%;padding:clamp(20px,2.4vw,30px);display:flex;align-items:flex-end;font-family:var(--serif);font-size:clamp(16px,1.5vw,21px);line-height:1.46;background:var(--paper);color:var(--paper-ink);overflow:hidden}.card .tag{position:absolute;left:16px;bottom:14px;right:16px;font-size:11.5px;letter-spacing:.06em;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);text-shadow:0 1px 10px oklch(0 0 0 / .8);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card:hover .tag{opacity:1;transform:none}.chrome{position:fixed;left:0;right:0;display:flex;align-items:center;gap:20px;padding:22px var(--pad);z-index:var(--z-chrome);pointer-events:none}.chrome>*{pointer-events:auto}.chrome.top{top:0;background:linear-gradient(oklch(.12 .004 60 / .82),transparent)}.chrome.bottom{bottom:0;background:linear-gradient(transparent,#070505d1);justify-content:space-between}.brand{font-size:14px;font-weight:700;letter-spacing:.24em}.brand b{color:var(--accent);font-weight:700}.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:#1a181699;border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);backdrop-filter:blur(8px)}.search:focus-within{border-color:var(--accent);background:#1a1816d9}.search svg{width:14px;height:14px;stroke:var(--ink-mute);flex:none}.search input{font:inherit;font-size:13px;color:var(--ink);background:none;border:0;outline:0;width:150px}.search input::placeholder{color:var(--ink-mute)}.counter{font-size:12.5px;letter-spacing:.04em;color:var(--ink-mute);font-variant-numeric:tabular-nums}.hint-line{font-size:12.5px;letter-spacing:.04em;color:var(--ink-mute)}.add-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-deep);font-size:13px;font-weight:600;border-radius:999px;padding:9px 17px;transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.add-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.add-btn:active{transform:translateY(0)}#drop-veil{position:fixed;inset:12px;border:1.5px dashed var(--accent);border-radius:6px;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(20px,3vw,30px);letter-spacing:.04em;color:var(--accent);background:#0705058c;backdrop-filter:blur(2px);z-index:var(--z-toast);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),visibility var(--dur)}body.dropping #drop-veil{opacity:1;visibility:visible}