:root{--color-paper:oklch(97% .008 90);--color-paper-2:oklch(94.5% .01 88);--color-card:oklch(99.4% .003 90);--color-ink:oklch(22% .018 70);--color-muted:oklch(62% .014 80);--color-faint:oklch(72% .012 85);--color-line:oklch(90% .01 90);--color-hover:oklch(100% 0 0/.62);--color-pill:oklch(92% .012 88);--color-focus:oklch(32% .02 70);--font-display:"Instrument Sans", "Segoe UI", sans-serif;--font-body:"Instrument Sans", "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--text-display:clamp(1.75rem, 1.4rem + 1.4vw, 2.15rem);--text-body:1.0625rem;--text-meta:.6875rem;--text-kicker:.8125rem;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:3.25rem;--space-3xl:4.5rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1.25rem;--radius-pill:999px;--shadow-card:0 1px 2px oklch(20% .01 80/.05), 0 8px 24px oklch(20% .01 80/.04);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.12s;--dur-short:.2s;--dur-long:.42s;--z-base:1;--z-raised:10;--z-sticky:200;--z-modal:400;--sidebar-w:15.5rem;--stage-w:40rem;--keyboard-inset:0px}*,:before,:after{box-sizing:border-box}html,body{overflow-x:clip}html{background:var(--color-paper);height:100%}body{min-height:100svh;color:var(--color-ink);background:var(--color-paper);font-family:var(--font-body);font-size:var(--text-body);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-style:normal;line-height:1.5}button,textarea,input{font:inherit;color:inherit}button{cursor:pointer}#app{min-height:100dvh}.app{min-height:100dvh;transition:grid-template-columns var(--dur-long) var(--ease-out);grid-template-columns:0 1fr;display:grid}.app.is-sidebar-open{grid-template-columns:var(--sidebar-w) 1fr}.sidebar{background:var(--color-paper);border-right:1px solid #0000;overflow:hidden}.app.is-sidebar-open .sidebar{border-right-color:var(--color-line)}.sidebar-inner{width:var(--sidebar-w);padding:calc(var(--space-lg) + env(safe-area-inset-top)) var(--space-md) var(--space-lg);gap:var(--space-xl);flex-direction:column;display:flex}.sidebar-brand{padding-inline:var(--space-sm);font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--color-faint);margin:0;font-weight:400}.nav-item{align-items:center;gap:var(--space-sm);border-radius:var(--radius-pill);width:100%;color:var(--color-muted);text-align:left;background:0 0;border:0;margin:0;padding:.55rem .7rem;font-size:.9375rem;font-weight:500;display:flex}.nav-item svg{flex:none;width:1rem;height:1rem}.nav-item.is-active{background:var(--color-pill);color:var(--color-ink)}.nav-item:hover,.nav-item.is-hover{background:var(--color-pill)}.nav-item:focus-visible,.nav-item.is-focus{outline:2px solid var(--color-focus);outline-offset:2px}.nav-item:active,.nav-item.is-active-press{transform:translateY(1px)}.nav-slot{display:none}.shell{min-width:0;min-height:100dvh;padding:calc(var(--space-xl) + env(safe-area-inset-top)) max(var(--space-lg), env(safe-area-inset-right)) calc(var(--space-xl) + env(safe-area-inset-bottom) + var(--keyboard-inset)) max(var(--space-lg), env(safe-area-inset-left));position:relative}.sidebar-toggle{top:max(var(--space-md), env(safe-area-inset-top));left:max(var(--space-md), env(safe-area-inset-left));z-index:var(--z-sticky);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);width:2.25rem;height:2.25rem;color:var(--color-muted);box-shadow:var(--shadow-card);transition:left var(--dur-long) var(--ease-out), background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);place-items:center;padding:0;display:grid;position:fixed}.app.is-sidebar-open .sidebar-toggle{left:calc(var(--sidebar-w) + var(--space-md))}.sidebar-toggle:hover,.sidebar-toggle.is-hover{color:var(--color-ink)}.sidebar-toggle:focus-visible,.sidebar-toggle.is-focus{outline:2px solid var(--color-focus);outline-offset:2px}.sidebar-toggle:active,.sidebar-toggle.is-active{transform:translateY(1px)}.sidebar-toggle svg{width:1.05rem;height:1.05rem}.stage{width:min(var(--stage-w), 100%);padding-top:var(--space-sm);margin-inline:auto}.meta{justify-content:space-between;align-items:baseline;gap:var(--space-md);margin-bottom:var(--space-2xl);font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--color-faint);display:flex}.composer{gap:var(--space-sm);flex-direction:column;display:flex}.day{margin:0 0 var(--space-2xs);font-size:var(--text-kicker);color:var(--color-muted);font-weight:400}.prompt{margin:0 0 var(--space-md);font-family:var(--font-display);font-size:var(--text-display);letter-spacing:-.03em;overflow-wrap:anywhere;font-style:normal;font-weight:600;line-height:1.15}.capture-card{gap:var(--space-sm);padding:var(--space-md) var(--space-md) var(--space-sm);border-radius:var(--radius-lg);background:var(--color-card);box-shadow:var(--shadow-card);border:1px solid oklch(100% 0 0/.7);flex-direction:column;display:flex}.capture-card:focus-within,.capture-card.is-focus{box-shadow:var(--shadow-card), 0 0 0 2px var(--color-focus)}.capture-card.is-disabled{opacity:.55;pointer-events:none}.capture-input,.auth-input{resize:none;width:100%;min-height:4.65em;color:var(--color-ink);background:0 0;border:0;margin:0;padding:0;line-height:1.55;display:block;overflow:hidden}.capture-input::placeholder,.auth-input::placeholder{color:var(--color-faint)}.capture-input:focus,.auth-input:focus{outline:none}.hints{font-family:var(--font-mono);letter-spacing:.02em;color:var(--color-faint);margin:0;font-size:.6875rem}.suggestion-slot{min-height:0}.auth-note{margin:var(--space-sm) 0 0;color:var(--color-muted);font-size:.9375rem}.timeline{margin-top:var(--space-xl);gap:var(--space-lg);flex-direction:column;display:flex}.day-group{gap:var(--space-xs);flex-direction:column;display:flex}.day-label{margin:0 0 var(--space-2xs);padding-inline:var(--space-sm);font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--color-faint);font-weight:400}.capture-list{gap:var(--space-2xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.capture-item{gap:var(--space-md);border-radius:var(--radius-md);text-align:left;cursor:pointer;width:100%;transition:background var(--dur-short) var(--ease-out);background:0 0;border:0;grid-template-columns:3.4rem minmax(0,1fr);align-items:baseline;padding:.85rem .9rem;display:grid}.capture-item:hover,.capture-item.is-hover{background:var(--color-hover)}.capture-item:focus-visible,.capture-item.is-focus{outline:2px solid var(--color-focus);outline-offset:2px}.capture-item:active,.capture-item.is-active{background:var(--color-pill)}.capture-item.is-pending{opacity:.7}.capture-time{font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.04em;color:var(--color-muted)}.capture-body{overflow-wrap:anywhere;min-width:0;margin:0;font-size:1.02rem;line-height:1.45}.capture-meta-slot{display:none}.capture-item.is-new{animation:capture-in var(--dur-short) var(--ease-out)}@keyframes capture-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.status{margin:var(--space-sm) 0 0;min-height:1.2em;color:var(--color-muted);font-size:.875rem}.status.is-error{color:oklch(45% .12 25)}.status.is-success{color:var(--color-muted)}@media (width<=768px){.app,.app.is-sidebar-open{grid-template-columns:1fr}.sidebar{z-index:var(--z-modal);width:min(var(--sidebar-w), 86vw);background:var(--color-paper);border-right:1px solid var(--color-line);transition:transform var(--dur-long) var(--ease-out);position:fixed;inset:0 auto 0 0;transform:translate(-105%)}.app.is-sidebar-open .sidebar{transform:translate(0)}.app.is-sidebar-open .sidebar-toggle{left:max(var(--space-md), env(safe-area-inset-left))}.shell{padding-inline:var(--space-md);padding-top:calc(var(--space-2xl) + env(safe-area-inset-top))}.meta{margin-bottom:var(--space-xl)}.timeline{margin-top:var(--space-lg)}.capture-card{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.15s!important;animation-duration:.15s!important}.capture-item.is-new{animation-name:capture-fade;transform:none}@keyframes capture-fade{0%{opacity:0}to{opacity:1}}.app,.sidebar,.sidebar-toggle{transition:none}}
