@layer tokens{:root{--radius-sm:2px;--radius-md:3px;--radius-lg:4px;--radius-xl:6px;--radius-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--duration-fast:.1s;--duration-normal:.2s;--duration-slow:.36s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--header-height:52px;--sidebar-width:380px;--z-header:100;--z-overlay:200;--paper:#f7f6f2;--ink:#111210;--signal:#0e7c7b;--signal-dim:#0e7c7b1a}[data-mode=light]{--bg-page:var(--paper);--bg-surface:#fff;--bg-raised:#eef0ee;--bg-input:#fff;--text-primary:var(--ink);--text-secondary:color-mix(in srgb, var(--ink) 65%, var(--paper));--text-tertiary:color-mix(in srgb, var(--ink) 40%, var(--paper));--text-on-accent:#fff;--border-subtle:color-mix(in srgb, var(--ink) 13%, var(--paper));--border-emphasis:color-mix(in srgb, var(--ink) 28%, var(--paper));--border-focus:var(--signal);--accent:var(--signal);--accent-dim:var(--signal-dim);--accent-hover:color-mix(in srgb, var(--signal) 80%, var(--ink));--shell-accent:var(--signal);--shell-accent-hover:color-mix(in srgb, var(--signal) 80%, var(--ink));--shell-accent-dim:var(--signal-dim);--font-display:"Fraunces", Georgia, serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"IBM Plex Mono", monospace;--tracking-display:-.01em;--tracking-ui:0em;--leading-body:1.7;--shadow-sm:0 1px 3px #1112100f;--shadow-md:0 4px 16px #11121014}[data-mode=dark]{--bg-page:#0a0a0c;--bg-surface:#131412;--bg-raised:#1c1e1b;--bg-input:#131412;--text-primary:#f2f1ec;--text-secondary:#a1a09e;--text-tertiary:#626261;--text-on-accent:#0a0a0c;--border-subtle:#262627;--border-emphasis:#464646;--border-focus:#1fa9a7;--accent:#1fa9a7;--accent-dim:#1fa9a724;--accent-hover:#3fb4b1;--shell-accent:#1fa9a7;--shell-accent-hover:#3fb4b1;--shell-accent-dim:#1fa9a724;--font-display:"Fraunces", Georgia, serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"IBM Plex Mono", monospace;--tracking-display:-.01em;--tracking-ui:0em;--leading-body:1.7;--shadow-sm:0 1px 3px #00000059;--shadow-md:0 4px 20px #00000073}}
@layer reset,tokens,base,layout,components,utilities;@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:100%;text-size-adjust:100%}img,video,svg{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}}@layer base{html,body{height:100%}body{font-family:var(--font-body);font-size:13px;font-weight:400;line-height:var(--leading-body);color:var(--text-primary);background-color:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out)}::selection{background:var(--accent);color:var(--bg-page)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-emphasis);border-radius:0}}@layer layout{#app-root{grid-template-rows:var(--header-height) 1fr;height:100dvh;display:grid;overflow:hidden}.app-body{grid-template-columns:var(--sidebar-width) 1fr;display:grid;overflow:hidden}@media (max-width:800px){#app-root{height:auto;min-height:100dvh;overflow:auto}.app-body{grid-template-rows:auto 1fr;grid-template-columns:1fr;height:auto;overflow:visible}}}@layer components{.type-display{font-family:var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary);font-weight:500;line-height:1.1}.type-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);font-size:11px;font-weight:500}.type-mono{font-family:var(--font-mono);letter-spacing:.04em;font-size:11px}.divider{border:none;border-top:1px solid var(--border-subtle);height:0}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-body);letter-spacing:.02em;border-radius:var(--radius-full);padding:11px var(--space-6);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-sm);border:none}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-emphasis);background:0 0}.btn-ghost:hover{border-color:var(--text-secondary);color:var(--text-primary)}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}.input-base{border:none;border-bottom:1px solid var(--border-emphasis);width:100%;font-family:var(--font-body);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out);background:0 0;border-radius:0;outline:none;padding:9px 0;font-size:14px}.input-base::placeholder{color:var(--text-tertiary)}.input-base:focus{border-color:var(--accent)}.badge{font-family:var(--font-mono);letter-spacing:.06em;border-radius:var(--radius-full);border:1px solid var(--border-emphasis);color:var(--text-secondary);white-space:nowrap;background:0 0;align-items:center;gap:4px;padding:4px 10px;font-size:10px;font-weight:500;display:inline-flex}.badge-accent{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.shimmer{background:linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-surface) 50%, var(--bg-raised) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.live-field-wrap{background:var(--bg-page);width:100%;height:100%;position:relative;overflow:hidden}.live-field-wrap canvas{width:100%;height:100%;position:absolute;inset:0}.timecode{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-tertiary);align-items:center;gap:8px;font-size:11px;line-height:1.6;display:flex}.timecode .pulse-dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:2.2s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:.25}50%{opacity:1}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}::view-transition-old(root){animation:.24s var(--ease-in-out) both vt-fade-out}::view-transition-new(root){animation:.32s var(--ease-out) both vt-fade-in}@keyframes vt-fade-out{0%{opacity:1}to{opacity:0}}@keyframes vt-fade-in{0%{opacity:0}to{opacity:1}}.brand-board{view-transition-name:brand-board}::view-transition-old(brand-board){animation:.2s var(--ease-in-out) both vt-board-out}::view-transition-new(brand-board){animation:.36s var(--ease-out) 80ms both vt-board-in}@keyframes vt-board-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@keyframes vt-board-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}