:root{--brand-teal-400: #3AB0E0;--brand-teal-500: #0096D3;--brand-teal-600: #0086BD;--brand-teal-700: #01528A;--brand-teal-900: #010135;--brand-navy-800: #1F2937;--brand-navy-900: #152030;--brand-navy-950: #0B1420;--brand-brown-300: #A98862;--brand-brown-500: #6F4E37;--brand-brown-700: #4A3423;--brand-brown-900: #2B1D0E;--sand-200: #DED4BC;--sand-300: #C7BFAA;--cream-050: #FBF8F1;--cream-100: #F5EFE2;--cream-200: #EEEBC2;--cream-300: #E6E1D6;--white: #FFFFFF;--ocean-100: #4FB6D6;--ocean-300: #1E87A8;--ocean-500: #146F89;--ocean-700: #0E4A5C;--ocean-900: #0A2530;--terracotta-500: #D1603D;--terracotta-600: #B84E2E;--gold-500: #E0A63A;--gold-600: #C68E27;--moss-500: #5C9A5E;--moss-600: #4A824C;--surface-page: var(--cream-100);--surface-card: var(--white);--surface-card-alt: var(--cream-300);--surface-sunken: var(--sand-200);--surface-inverse: var(--brand-navy-950);--surface-brand: var(--brand-teal-500);--text-primary: var(--brand-brown-900);--text-secondary: #6B5A46;--text-muted: #9C8B76;--text-inverse: var(--cream-050);--text-on-brand: var(--white);--text-link: var(--brand-teal-700);--border-default: #DCD2BC;--border-strong: var(--brand-brown-300);--border-inverse: rgba(255, 255, 255, .18);--accent-primary: var(--brand-teal-500);--accent-primary-hover: var(--brand-teal-600);--accent-primary-active: var(--brand-teal-700);--accent-secondary: var(--brand-brown-500);--accent-secondary-hover: var(--brand-brown-700);--focus-ring: var(--brand-teal-500);--state-success: var(--moss-500);--state-success-bg: #E8F3E5;--state-warning: var(--gold-500);--state-warning-bg: #FBF0DC;--state-danger: var(--terracotta-500);--state-danger-bg: #FBE7DF;--state-info: var(--ocean-300);--state-info-bg: #E4F3F8}[data-theme=dark]{--surface-page: var(--brand-navy-950);--surface-card: var(--brand-navy-900);--surface-card-alt: var(--brand-navy-800);--surface-sunken: #0a1420;--surface-inverse: var(--cream-100);--text-primary: var(--cream-050);--text-secondary: #B9C2CC;--text-muted: #7C8792;--text-inverse: var(--brand-brown-900);--text-link: var(--brand-teal-400);--border-default: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .24);--border-inverse: var(--brand-brown-300);--accent-primary: var(--brand-teal-500);--accent-primary-hover: var(--brand-teal-400);--accent-primary-active: var(--brand-teal-600);--accent-secondary: var(--brand-brown-300);--accent-secondary-hover: var(--sand-200);--focus-ring: var(--brand-teal-400);--state-success-bg: rgba(92, 154, 94, .18);--state-warning-bg: rgba(224, 166, 58, .18);--state-danger-bg: rgba(209, 96, 61, .18);--state-info-bg: rgba(30, 135, 168, .18);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-brand: 0 6px 20px rgba(0, 150, 211, .35)}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fredoka-latin-CYrqKuxd.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fredoka-latin-ext-DdnsCkLr.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/nunito-latin-BzFMHfZw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/nunito-latin-ext-CXYtwYOx.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{--font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;--font-body: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;--text-xs: .8125rem;--text-sm: .9375rem;--text-base: 1.0625rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--text-4xl: 3.5rem;--text-5xl: 4.5rem;--leading-tight: 1.1;--leading-snug: 1.3;--leading-normal: 1.6;--weight-regular: 400;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--tracking-tight: -.01em;--tracking-normal: 0;--tracking-wide: .04em}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--space-10: 128px;--container-max: 1180px}:root{--radius-xs: 8px;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 26px;--radius-xl: 36px;--radius-pill: 999px}:root{--shadow-sm: 0 2px 6px rgba(43, 29, 14, .08);--shadow-md: 0 8px 20px rgba(43, 29, 14, .12);--shadow-lg: 0 20px 44px rgba(43, 29, 14, .16);--shadow-brand: 0 10px 24px rgba(0, 150, 211, .28);--shadow-inset: inset 0 2px 4px rgba(43, 29, 14, .1)}:root{--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .12s;--duration-normal: .22s;--duration-slow: .38s}:root{--surface-selected: var(--cream-200);--spinner-track: var(--sand-300);--symbol-ink: var(--brand-brown-300)}[data-theme=dark]{--surface-selected: rgba(0, 150, 211, .22);--spinner-track: rgba(255, 255, 255, .16);--symbol-ink: var(--sand-300);--shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);--state-success: #7FBF81;--state-danger: #E8836A}*{box-sizing:border-box}html,body{height:100%;margin:0}html{overflow-x:hidden}body{font-family:var(--font-body);font-size:var(--text-base);background:var(--surface-page);color:var(--text-primary);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}body.streaming{overflow:hidden}.hidden{display:none!important}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-6);gap:var(--space-5)}h1,h2{margin:0;font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary)}h1{font-size:clamp(2.25rem,9vw,var(--text-4xl))}h2{font-size:clamp(1.75rem,6vw,var(--text-2xl))}.title-line{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--text-secondary)}.tagline{margin:0;max-width:30rem;font-size:var(--text-sm);color:var(--text-muted)}.copy{max-width:32rem;margin:0;color:var(--text-secondary)}.notice{max-width:32rem;margin:0;color:var(--text-muted)}.links{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center;margin:var(--space-2) 0}.links a{color:var(--text-link);font-weight:var(--weight-bold);text-decoration:none;border-radius:var(--radius-xs);padding:2px 4px;transition:color var(--duration-fast) var(--ease-out),transform var(--duration-normal) var(--ease-bounce)}.links a:hover{color:var(--accent-primary);transform:translateY(-2px)}.symbols{display:flex;gap:var(--space-4);align-items:center;justify-content:center;color:var(--symbol-ink);opacity:.45;transition:opacity var(--duration-normal) var(--ease-out)}.symbols:hover{opacity:.75}.symbols svg{height:22px;width:auto;display:block}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--accent-primary);color:var(--text-on-brand);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:1.2;padding:var(--space-4) var(--space-6);border-radius:var(--radius-pill);box-shadow:var(--shadow-brand);cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce),background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.btn-primary:hover{background:var(--accent-primary-hover);transform:translateY(-2px);box-shadow:0 14px 30px #0096d357}.btn-primary:active{background:var(--accent-primary-active);transform:translateY(0) scale(.97);box-shadow:var(--shadow-sm)}.btn-primary:focus-visible,.links a:focus-visible,.demo-item:focus-visible{outline:none;box-shadow:0 0 0 4px #0096d373}.spinner{width:64px;height:64px;border-radius:var(--radius-pill);border:6px solid var(--spinner-track);border-top-color:var(--accent-primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);min-width:min(20rem,100%)}.stage{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:2px solid transparent;border-radius:var(--radius-md);background:var(--surface-card-alt);color:var(--text-muted);font-weight:var(--weight-bold);text-align:left;transition:background-color var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),color var(--duration-normal) var(--ease-out)}.stage:before{content:"";display:inline-block;width:1em;flex:none;text-align:center}.stage.active{background:var(--surface-selected);border-color:var(--accent-primary);color:var(--text-primary)}.stage.done{background:var(--surface-selected);color:var(--state-success)}.stage.done:before{content:"✓"}.elapsed{margin:0;color:var(--text-muted);font-variant-numeric:tabular-nums}#screen-stream{min-height:100vh;padding:0;display:block}#stream-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--ocean-700),var(--ocean-900))}#stream-wrapper video{width:100%;height:100%;object-fit:contain;left:0;top:0;background:#000}.overlay-btn{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}.overlay-btn:hover{transform:translate(-50%,-50%) translateY(-2px)}.overlay-btn:active{transform:translate(-50%,-50%) scale(.97)}.overlay{position:fixed;top:var(--space-5);left:50%;transform:translate(-50%);z-index:10;max-width:calc(100vw - 2 * var(--space-4));background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-5);color:var(--text-primary);font-weight:var(--weight-semibold)}.overlay p{margin:0}.admin-badge{position:fixed;top:var(--space-4);left:var(--space-4);z-index:25;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wide);text-transform:uppercase;background:var(--accent-primary);color:var(--text-on-brand);box-shadow:var(--shadow-brand)}.admin-badge.unverified{background:var(--surface-card-alt);border:2px solid var(--border-default);color:var(--text-muted);font-weight:var(--weight-regular);letter-spacing:var(--tracking-normal);text-transform:none;box-shadow:var(--shadow-sm)}.theme-toggle{position:fixed;top:var(--space-4);right:var(--space-4);z-index:18;width:56px;height:30px;padding:3px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--surface-card);box-shadow:var(--shadow-sm);cursor:pointer;display:flex;align-items:center}.theme-toggle-thumb{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--accent-primary);color:var(--text-on-brand);display:flex;align-items:center;justify-content:center;transform:translate(0);transition:transform var(--duration-normal) var(--ease-bounce)}[data-theme=dark] .theme-toggle-thumb{transform:translate(22px)}.theme-toggle svg{width:14px;height:14px;display:block}.theme-icon-moon,[data-theme=dark] .theme-icon-sun{display:none}[data-theme=dark] .theme-icon-moon{display:block}.theme-toggle:hover{border-color:var(--border-strong)}.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 4px #0096d373}body.streaming .theme-toggle{display:none}.demo-toggle{position:fixed;top:var(--space-4);right:var(--space-4);z-index:20;font-size:var(--text-base);padding:var(--space-3) var(--space-5)}.demo-panel{position:fixed;top:4.75rem;right:var(--space-4);z-index:15;width:min(20rem,calc(100vw - 2rem));max-height:calc(100vh - 6.5rem);overflow-y:auto;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);text-align:left}.demo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.demo-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-align:left;background:var(--surface-card-alt);border:2px solid transparent;border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-sm);padding:var(--space-3);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}.demo-item:hover:not(:disabled){background:var(--surface-selected);border-color:var(--border-strong);transform:translateY(-1px)}.demo-item:disabled{opacity:.6;cursor:default}.demo-item.active{border-color:var(--accent-primary);background:var(--surface-selected)}.demo-item .demo-name{display:block;font-weight:var(--weight-extrabold);color:var(--text-primary)}.demo-item .demo-desc{display:block;font-size:var(--text-xs);color:var(--text-secondary)}.demo-switching,#demo-requesting{color:var(--text-muted);font-size:var(--text-sm);margin:var(--space-1) 0}.demo-notice{color:var(--state-danger);font-size:var(--text-sm);font-weight:var(--weight-semibold);margin:var(--space-1) 0}#demo-unavailable p{color:var(--text-secondary);font-size:var(--text-sm);margin:0 0 var(--space-3)}#btn-demo-retry{font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}.end-mark{width:72px;height:72px;border-radius:var(--radius-pill);background:var(--state-warning-bg);display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.btn-primary:hover,.btn-primary:active,.demo-item:hover:not(:disabled),.links a:hover{transform:none}[data-theme=dark] .theme-toggle-thumb{transform:translate(22px)}.overlay-btn:hover,.overlay-btn:active{transform:translate(-50%,-50%)}.spinner{animation-duration:3s!important;animation-iteration-count:infinite!important}}
