@import"https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400&family=Montserrat:wght@100;200;300;400;500;700&family=JetBrains+Mono:wght@100;300;400;500&display=swap";:root{--color-surface: #131314;--color-surface-dim: #131314;--color-surface-bright: #3a393a;--color-surface-container-lowest: #0e0e0f;--color-surface-container-low: #1c1b1c;--color-surface-container: #201f20;--color-surface-container-high: #2a2a2b;--color-surface-container-highest: #353436;--color-surface-variant: #353436;--color-background: #131314;--color-on-surface: #e5e2e3;--color-on-surface-variant: #d0c6ab;--color-on-background: #e5e2e3;--color-inverse-surface: #e5e2e3;--color-inverse-on-surface: #313031;--color-outline: #999077;--color-outline-variant: #4d4732;--color-primary: #fff6df;--color-on-primary: #3a3000;--color-primary-container: #ffd700;--color-on-primary-container: #705e00;--color-primary-fixed: #ffe16d;--color-primary-fixed-dim: #e9c400;--color-on-primary-fixed: #221b00;--color-on-primary-fixed-variant: #544600;--color-inverse-primary: #705d00;--color-surface-tint: #e9c400;--color-secondary: #ffe2ab;--color-on-secondary: #402d00;--color-secondary-container: #ffbf00;--color-on-secondary-container: #6d5000;--color-secondary-fixed: #ffdfa0;--color-secondary-fixed-dim: #fbbc00;--color-on-secondary-fixed: #261a00;--color-on-secondary-fixed-variant:#5c4300;--color-tertiary: #fff3f4;--color-on-tertiary: #660026;--color-tertiary-container: #ffcdd4;--color-on-tertiary-container: #bd004d;--color-tertiary-fixed: #ffd9de;--color-tertiary-fixed-dim: #ffb2be;--color-on-tertiary-fixed: #3f0015;--color-on-tertiary-fixed-variant: #900039;--color-ruby-line: #e0115f;--color-error: #ffb4ab;--color-on-error: #690005;--color-error-container: #93000a;--color-on-error-container: #ffdad6;--bg: var(--color-background);--bg-panel: var(--color-surface-container);--bg-raised: var(--color-surface-container-high);--text: var(--color-on-surface);--text-muted: var(--color-on-surface-variant);--text-bright: var(--color-primary);--border: var(--color-outline-variant);--border-strong: var(--color-outline);--accent: var(--color-primary-container);--accent-soft: var(--color-primary-fixed);--warn: var(--color-secondary-container);--danger: var(--color-on-tertiary-container);--font-display: "Jost", "Montserrat", system-ui, -apple-system, sans-serif;--font-body: "Montserrat", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--type-display-lg-size: 48px;--type-display-lg-weight: 100;--type-display-lg-leading: 1.1;--type-display-lg-tracking:.2em;--type-headline-lg-size: 32px;--type-headline-lg-weight: 200;--type-headline-lg-leading: 1.2;--type-headline-lg-tracking:.15em;--type-headline-md-size: 24px;--type-headline-md-weight: 300;--type-headline-md-leading: 1.3;--type-headline-md-tracking:.1em;--type-body-lg-size: 18px;--type-body-lg-weight: 300;--type-body-lg-leading: 1.6;--type-body-lg-tracking:.02em;--type-body-md-size: 16px;--type-body-md-weight: 400;--type-body-md-leading: 1.6;--type-body-md-tracking:.01em;--type-metadata-sm-size: 12px;--type-metadata-sm-weight: 400;--type-metadata-sm-leading: 1.4;--type-metadata-sm-tracking:.05em;--type-label-caps-size: 10px;--type-label-caps-weight: 500;--type-label-caps-leading: 1;--type-label-caps-tracking:.25em;--type-display-size: 1.75rem;--type-display-tracking: .04em;--type-metadata-size: .875rem;--type-body-sm-size: 12px;--type-display-lg-size-mobile: 32px;--space-unit: 4px;--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;--layout-gutter: 24px;--layout-margin-mobile: 16px;--layout-margin-desktop: 64px;--layout-max-width: 1440px;--layout-grid-columns: 12;--radius: 0px;--chamfer: 10px;--border-hair: .5px;--border-thin: 1px;--glass-bg: rgba(19, 19, 20, .4);--glass-blur: 20px;--glass-border: rgba(153, 144, 119, .3);--bloom-gold: 0 0 10px rgba(255, 226, 171, .4);--bloom-amber: 0 0 12px rgba(255, 191, 0, .45);--bloom-ruby: 0 0 15px rgba(224, 17, 95, .5);--motion-fast: .12s cubic-bezier(.4, 0, .2, 1);--motion-smooth: .2s cubic-bezier(.4, 0, .2, 1);--motion-slow: .4s cubic-bezier(.4, 0, .2, 1);--celestial-bg: var(--color-background);--celestial-bg-alt: var(--color-surface-container-low);--celestial-surface: var(--color-surface-container);--celestial-border: var(--color-outline-variant);--celestial-primary: var(--color-primary-container);--celestial-primary-hover: var(--color-primary-fixed);--celestial-accent: var(--color-surface-tint);--celestial-text: var(--color-on-surface);--celestial-text-dim: var(--color-on-surface-variant);--celestial-text-bright: var(--color-primary);--celestial-shadow: var(--bloom-gold);--celestial-glow: var(--bloom-gold);--transition-smooth: var(--motion-smooth)}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--type-body-md-size);font-weight:var(--type-body-md-weight);line-height:var(--type-body-md-leading);letter-spacing:var(--type-body-md-tracking);-webkit-font-smoothing:antialiased}h1,h2,h3{color:var(--text-bright);font-family:var(--font-display);font-weight:var(--type-headline-lg-weight);letter-spacing:var(--type-headline-lg-tracking)}a{color:var(--accent);text-decoration:none;transition:color var(--motion-smooth)}a:hover{color:var(--accent-soft)}code,pre,kbd{font-family:var(--font-mono)}[data-theme=cyan]{--color-surface: #0a0a0c;--color-surface-dim: #0a0a0c;--color-surface-bright: #2e2e3a;--color-surface-container-lowest: #060607;--color-surface-container-low: #121216;--color-surface-container: #1a1a20;--color-surface-container-high: #22222c;--color-surface-container-highest: #2a2a35;--color-surface-variant: #2a2a35;--color-background: #0a0a0c;--color-on-surface: #e1e1e6;--color-on-surface-variant: #a1a1b0;--color-on-background: #e1e1e6;--color-inverse-surface: #e1e1e6;--color-inverse-on-surface: #1a1a20;--color-outline: #4a4a5a;--color-outline-variant: #2a2a35;--color-primary: #eef0ff;--color-on-primary: #1a1f5c;--color-primary-container: #646cff;--color-on-primary-container: #c7ccff;--color-primary-fixed: #7b84ff;--color-primary-fixed-dim: #4a52d6;--color-on-primary-fixed: #0a0d3a;--color-on-primary-fixed-variant: #2f37b0;--color-inverse-primary: #4a52d6;--color-surface-tint: #00e5ff;--color-secondary: #b8f4ff;--color-on-secondary: #00363f;--color-secondary-container: #00e5ff;--color-on-secondary-container: #007a8a;--color-secondary-fixed: #a0eeff;--color-secondary-fixed-dim: #00c4d6;--color-on-secondary-fixed: #001f24;--color-on-secondary-fixed-variant:#005661;--color-tertiary: #f3ecff;--color-on-tertiary: #2c1a5c;--color-tertiary-container: #b478ff;--color-on-tertiary-container: #5b2db0;--color-tertiary-fixed: #e6d6ff;--color-tertiary-fixed-dim: #c9a0ff;--color-on-tertiary-fixed: #1c0d44;--color-on-tertiary-fixed-variant: #6a3db8;--color-ruby-line: #00e5ff;--color-error: #ffb4ab;--color-on-error: #690005;--color-error-container: #93000a;--color-on-error-container: #ffdad6;--font-display: "Inter", system-ui, -apple-system, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--bloom-gold: 0 0 10px rgba(100, 108, 255, .4);--bloom-amber: 0 0 12px rgba(0, 229, 255, .45);--bloom-ruby: 0 0 15px rgba(180, 120, 255, .5)}[data-theme=admiral]{--bg-void: #030712;--bg-trench: #0B1324;--bg-midnight: #111827;--bg-glass: rgba(15, 23, 42, .6);--color-background: #030712;--color-surface: #030712;--color-surface-dim: #030712;--color-surface-bright: #1F2937;--color-surface-container-lowest: #020409;--color-surface-container-low: #0B1324;--color-surface-container: #111827;--color-surface-container-high: #1F2937;--color-surface-container-highest: #2A3344;--color-surface-variant: #1F2937;--color-on-surface: #E2E8F0;--color-on-surface-variant: #94A3B8;--color-on-background: #E2E8F0;--color-inverse-surface: #E2E8F0;--color-inverse-on-surface: #0B1324;--text-slate-200: #E2E8F0;--text-slate-300: #CBD5E1;--text-slate-400: #94A3B8;--text-slate-500: #64748B;--text-slate-600: #475569;--text-slate-700: #334155;--brand-cyan: #00E5FF;--brand-cyan-08: rgba(0, 229, 255, .08);--brand-cyan-10: rgba(0, 229, 255, .1);--brand-cyan-20: rgba(0, 229, 255, .2);--brand-cyan-30: rgba(0, 229, 255, .3);--brand-cyan-40: rgba(0, 229, 255, .4);--brand-cyan-soft: rgba(0, 229, 255, .05);--brand-purple: #8B5CF6;--brand-purple-20: rgba(139, 92, 246, .2);--brand-emerald: #10B981;--color-primary: var(--brand-cyan);--color-on-primary: #001417;--color-primary-container: var(--brand-cyan-20);--color-on-primary-container: #B6F4FF;--color-tertiary: var(--brand-purple);--color-error: #F87171;--color-on-error: #190001;--border-muted: rgba(255, 255, 255, .05);--border-soft: rgba(255, 255, 255, .1);--border-strong-rgba: rgba(255, 255, 255, .2);--border-bio: rgba(0, 229, 255, .2);--color-outline: rgba(255, 255, 255, .2);--color-outline-variant: rgba(255, 255, 255, .05);--white-02: rgba(255, 255, 255, .02);--white-04: rgba(255, 255, 255, .04);--white-05: rgba(255, 255, 255, .05);--white-10: rgba(255, 255, 255, .1);--status-live: var(--brand-emerald);--status-reconnect: #F59E0B;--status-error: #EF4444;--amber-300: #FCD34D;--amber-500: #F59E0B;--glow-cyan: drop-shadow(0 0 10px rgba(0, 229, 255, .4));--glow-cyan-strong: 0 0 8px #00E5FF;--glow-cyan-soft: 0 0 20px rgba(0, 229, 255, .05);--glow-purple: drop-shadow(0 0 10px rgba(139, 92, 246, .4));--glass-blur-bg: blur(24px);--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--font-display: var(--font-sans)}.glass{background:var(--bg-glass, rgba(15, 23, 42, .6));-webkit-backdrop-filter:var(--glass-blur-bg, blur(24px));backdrop-filter:var(--glass-blur-bg, blur(24px));border:1px solid var(--border-muted, rgba(255, 255, 255, .05))}.glow-cyan{filter:var(--glow-cyan, drop-shadow(0 0 10px rgba(0, 229, 255, .4)))}.glow-purple{filter:var(--glow-purple, drop-shadow(0 0 10px rgba(139, 92, 246, .4)))}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--brand-cyan-20, rgba(0, 229, 255, .2));border-radius:9999px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--brand-cyan-30, rgba(0, 229, 255, .3))}@keyframes pulse-cyan{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98);filter:drop-shadow(0 0 8px var(--brand-cyan, #00E5FF))}}#lens-root{min-height:100vh}.lens-nav-scroll,.lens-canvas,.lens-props-body{scrollbar-width:thin;scrollbar-color:var(--color-outline) transparent}.lens-nav-scroll::-webkit-scrollbar,.lens-canvas::-webkit-scrollbar,.lens-props-body::-webkit-scrollbar{width:8px;height:8px}.lens-nav-scroll::-webkit-scrollbar-track,.lens-canvas::-webkit-scrollbar-track,.lens-props-body::-webkit-scrollbar-track{background:transparent}.lens-nav-scroll::-webkit-scrollbar-thumb,.lens-canvas::-webkit-scrollbar-thumb,.lens-props-body::-webkit-scrollbar-thumb{background:var(--color-outline);border-radius:4px;border:2px solid transparent;background-clip:content-box}.lens-nav-scroll::-webkit-scrollbar-thumb:hover,.lens-canvas::-webkit-scrollbar-thumb:hover,.lens-props-body::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}lens-app{display:block}.lens{display:grid;grid-template-columns:248px 1fr;grid-template-rows:minmax(0,100vh);height:100vh}.lens.props-open{grid-template-columns:248px 1fr 340px}.lens-nav{border-right:var(--border-thin) solid var(--border);background:var(--color-surface-container-lowest);padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);height:100vh;overflow:hidden}.lens-nav-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-6);margin:0 calc(-1 * var(--space-2));padding:0 var(--space-2)}.lens-brand{display:flex;align-items:baseline;gap:var(--space-2);padding:0 var(--space-2) var(--space-2)}.lens-brand-name{font-family:var(--font-display);font-weight:200;font-size:20px;letter-spacing:.2em;color:var(--text-bright)}.lens-brand-sub{font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;color:var(--text-muted)}.lens-group-label{font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;color:var(--color-outline);padding:0 var(--space-2);margin-bottom:var(--space-2)}.lens-nav-item{display:block;width:100%;text-align:left;background:none;border:none;border-left:2px solid transparent;padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--type-metadata-sm-size);letter-spacing:var(--type-metadata-sm-tracking);color:var(--text-muted);cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast)}.lens-nav-item:hover{color:var(--text)}.lens-nav-item[data-active=true]{color:var(--accent);border-left-color:var(--accent);background:#ffd7000d}.lens-themes{display:flex;gap:var(--space-1);padding:var(--space-2);border:var(--border-thin) solid var(--border)}.lens-theme-btn{flex:1;background:none;border:var(--border-thin) solid transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;padding:var(--space-2);cursor:pointer;transition:all var(--motion-fast)}.lens-theme-btn[data-active=true]{color:var(--accent);border-color:var(--accent);box-shadow:var(--bloom-gold)}.lens-canvas{padding:var(--space-12) var(--space-16);background:var(--bg);min-height:0;min-width:0;overflow-y:auto;scrollbar-gutter:stable}.lens-story-head{margin-bottom:var(--space-10);border-bottom:var(--border-thin) solid var(--border);padding-bottom:var(--space-4)}.lens-story-title{font-family:var(--font-display);font-weight:200;font-size:var(--type-headline-lg-size);letter-spacing:var(--type-headline-lg-tracking);color:var(--text-bright);margin:0}.lens-story-blurb{font-family:var(--font-mono);font-size:var(--type-metadata-sm-size);letter-spacing:var(--type-metadata-sm-tracking);color:var(--text-muted);margin-top:var(--space-3)}.lens-props{border-left:var(--border-thin) solid var(--border);background:var(--color-surface-container-lowest);height:100vh;overflow:hidden;display:flex;flex-direction:column}.lens-props-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-5) var(--space-4);border-bottom:var(--border-thin) solid var(--border)}.lens-props-title{font-family:var(--font-display);font-weight:200;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-bright)}.lens-props-actions{display:flex;align-items:center;gap:var(--space-2)}.lens-props-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-5) var(--space-4);scrollbar-gutter:stable}.lens-props-reset,.lens-props-save{background:none;border:var(--border-thin) solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;padding:var(--space-1) var(--space-2);cursor:pointer;white-space:nowrap;transition:color var(--motion-fast),border-color var(--motion-fast)}.lens-props-reset:hover,.lens-props-save{color:var(--accent);border-color:var(--accent)}.lens-props-save:hover{color:var(--text-bright);box-shadow:var(--bloom-gold)}.lens-props-close{flex-shrink:0;width:24px;height:24px;line-height:1;font-size:16px;background:none;border:var(--border-thin) solid var(--border);color:var(--text-muted);cursor:pointer;transition:color var(--motion-fast),border-color var(--motion-fast)}.lens-props-close:hover{color:var(--text-bright);border-color:var(--border-strong)}.lens-props-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-6)}.lens-props-empty{font-family:var(--font-mono);font-size:var(--type-metadata-sm-size);color:var(--text-muted);margin:0}.lens-props-group{display:flex;flex-direction:column;gap:var(--space-3)}.lens-props-group-label{font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;color:var(--color-outline);padding-bottom:var(--space-1);border-bottom:var(--border-thin) solid var(--border)}.lens-token{display:flex;flex-direction:column;gap:var(--space-1)}.lens-token-name{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:var(--text-muted);word-break:break-all}.lens-token-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}.lens-token-ctl{display:flex;align-items:center;gap:var(--space-2)}.lens-token-swatch{width:18px;height:18px;flex-shrink:0;border:var(--border-thin) solid var(--border-strong)}.lens-token-input{flex:1;min-width:0;background:var(--bg);border:var(--border-thin) solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:var(--space-1) var(--space-2);transition:border-color var(--motion-fast)}.lens-token-input:focus{outline:none;border-color:var(--accent)}.lens-props-foot{flex-shrink:0;padding:var(--space-3) var(--space-4);border-top:var(--border-thin) solid var(--border);font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);color:var(--text-muted)}.lens-props-foot code{color:var(--accent)}.lens-props-toggle{position:fixed;top:var(--space-8);right:0;z-index:50;writing-mode:vertical-rl;background:var(--color-surface-container-lowest);border:var(--border-thin) solid var(--border);border-right:none;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--type-label-caps-size);letter-spacing:var(--type-label-caps-tracking);text-transform:uppercase;padding:var(--space-4) var(--space-2);cursor:pointer;transition:color var(--motion-fast),border-color var(--motion-fast)}.lens-props-toggle:hover{color:var(--accent);border-color:var(--accent)}.lens-nav-scroll,.lens-props-body,.lens-canvas{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.lens-nav-scroll::-webkit-scrollbar,.lens-props-body::-webkit-scrollbar,.lens-canvas::-webkit-scrollbar{width:8px}.lens-nav-scroll::-webkit-scrollbar-thumb,.lens-props-body::-webkit-scrollbar-thumb,.lens-canvas::-webkit-scrollbar-thumb{background:var(--border-strong);border:2px solid transparent;background-clip:padding-box}.lens-nav-scroll::-webkit-scrollbar-thumb:hover,.lens-props-body::-webkit-scrollbar-thumb:hover,.lens-canvas::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box;border:2px solid transparent}