.webcam-shell{display:flex;flex-direction:column;gap:var(--sp-4);width:100%}.webcam-stage{position:relative;width:100%;aspect-ratio:var(--cam-aspect, 1.3333);border-radius:var(--radius-lg);overflow:hidden;background:#000;border:1px solid var(--border)}.webcam-video{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#000}.webcam-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.webcam-output{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border)}.webcam-prediction-row{display:flex;gap:var(--sp-5);align-items:flex-end}.webcam-prediction-block{display:flex;flex-direction:column;gap:var(--sp-1)}.webcam-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-weight:var(--weight-medium)}.webcam-prediction-letter{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1}.webcam-confidence-block{flex:1;display:flex;flex-direction:column;gap:var(--sp-1)}.webcam-confidence-value{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1}.webcam-confidence-bar{height:4px;border-radius:var(--radius-pill);background:#ffffff14;overflow:hidden}.webcam-confidence-fill{height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width .2s var(--ease)}.webcam-status-row{display:flex;align-items:center;gap:var(--sp-2)}.webcam-status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.webcam-status-dot--active{background:var(--success);animation:pulse-dot 1.8s ease-in-out infinite}.webcam-status-text,.webcam-info{font-size:var(--text-xs);color:var(--text-muted)}.webcam-error{font-size:var(--text-xs);color:var(--error)}@media(max-width:480px){.webcam-output{padding:var(--sp-3)}.webcam-prediction-letter{font-size:var(--text-2xl)}}.alphabet-ref{display:flex;flex-direction:column}.alphabet-chart{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border)}.alphabet-chart-img{width:100%;height:auto;display:block}.header{position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;background:#0b0f14bf;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%}.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none}.brand-name{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--text-primary);letter-spacing:-.01em}.brand-sub{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-normal)}.header-icons{display:flex;align-items:center;gap:var(--sp-2)}.header-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border);background:transparent;color:var(--text-secondary);text-decoration:none;cursor:pointer;transition:color var(--duration) var(--ease),border-color var(--duration) var(--ease),background var(--duration) var(--ease),transform var(--duration) var(--ease)}.header-icon-btn:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--accent-soft);transform:translateY(-1px)}.header-icon-btn:focus-visible{outline:2px solid rgba(196,122,58,.55);outline-offset:2px}.header-icon-btn svg{flex-shrink:0}@media(max-width:640px){.brand-sub{display:none}}.footer{border-top:1px solid var(--border);background:var(--surface);padding:var(--sp-5) 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}.footer-credit{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}.footer-date{font-size:var(--text-xs);color:var(--text-muted)}@media(max-width:640px){.footer-inner{flex-direction:column;text-align:center;gap:var(--sp-2)}}.app-shell{display:flex;flex-direction:column;min-height:100vh;position:relative}.app-shell>main{flex:1}.hero{position:relative;padding-top:var(--sp-6);padding-bottom:var(--sp-6);overflow:hidden}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:3fr 2fr;gap:var(--sp-5);align-items:start}.hero-demo{display:flex;flex-direction:column}.hero-copy{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-1)}.hero-title{font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:1.1;letter-spacing:-.02em;color:var(--text-primary)}.hero-title-dim{display:block;color:var(--text-muted);font-weight:var(--weight-semi);font-size:var(--text-xl);margin-top:var(--sp-1)}.hero-subtitle{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:0}.hero-detail{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin:0}.demo-card{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);box-shadow:inset 0 1px #ffffff0a,0 4px 20px #0000004d}.demo-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}.demo-card-title{font-size:var(--text-base);font-weight:var(--weight-semi);color:var(--text-primary);margin:0}.demo-card-hint{margin:var(--sp-1) 0 0;font-size:var(--text-xs);color:var(--text-muted)}.demo-controls{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}.privacy-note{margin:0;font-size:var(--text-xs);color:var(--text-muted);text-align:center}.coldstart-note{margin:0;font-size:11px;color:var(--text-muted);text-align:center;opacity:.65}.ref-panel{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);scroll-margin-top:calc(var(--header-h) + 24px);margin-top:var(--sp-2)}.ref-panel-title{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin:0}.toggle{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle-track{display:block;width:36px;height:20px;border-radius:var(--radius-pill);position:relative;background:#ffffff1a;border:1px solid var(--border);transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease)}.toggle-track:after{content:"";position:absolute;top:50%;left:3px;width:14px;height:14px;border-radius:50%;transform:translateY(-50%);background:var(--text-secondary);transition:transform var(--duration) var(--ease),background var(--duration) var(--ease)}.toggle input:checked+.toggle-track{background:var(--accent-soft);border-color:#c47a3a66}.toggle input:checked+.toggle-track:after{transform:translate(16px,-50%);background:var(--accent)}.toggle-label{font-size:var(--text-xs);color:var(--text-secondary)}.pipeline-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}.pipeline-step{display:flex;gap:var(--sp-3);align-items:flex-start}.pipeline-num{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0f141ca6;border:1px solid rgba(196,122,58,.45);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1}.pipeline-step-title{font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-primary);margin:0 0 var(--sp-1)}.pipeline-step-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin:0}.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}.build-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5)}.build-block-title{font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-primary);margin:0 0 var(--sp-2)}.build-block-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal);margin:0}.stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}.stack-group{margin:0}.stack-label{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--sp-2)}.pill-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}@media(max-width:1024px){.pipeline-steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-4)}.hero-demo{order:-1}.hero-copy{text-align:center;align-items:center;padding-top:0}.hero-subtitle,.hero-detail{max-width:560px}.hero-title{font-size:var(--text-2xl)}.hero-title-dim{font-size:var(--text-lg)}.ref-panel{margin-top:var(--sp-3)}.build-grid{grid-template-columns:1fr}.stack-row{grid-template-columns:1fr;gap:var(--sp-4)}}@media(max-width:480px){.hero{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}.hero-title{font-size:var(--text-xl)}.hero-title-dim{font-size:var(--text-base)}.hero-subtitle{font-size:var(--text-sm)}.pipeline-steps{grid-template-columns:1fr}.demo-card{padding:var(--sp-3)}.demo-card-header{flex-direction:column;gap:var(--sp-2)}.ref-panel{padding:var(--sp-3)}}.demo-error-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6);border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border);text-align:center;color:var(--text-muted);font-size:var(--text-sm)}.demo-error-fallback p{margin:0}:root{--bg: #0B0F14;--surface: rgba(20, 26, 34, .72);--surface-hover: rgba(27, 36, 50, .78);--surface-inset: rgba(14, 20, 28, .7);--surface-2: rgba(14, 20, 28, .7);--elevated: rgba(27, 36, 50, .8);--border: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .15);--text-primary: #F2F4F8;--text-secondary: #C7D0DC;--text-muted: #8A97A8;--accent: #C47A3A;--accent-soft: rgba(196, 122, 58, .14);--success: #2FBF8F;--warning: #D6A24A;--error: #E05A63;--font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;--font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.75rem;--leading-tight: 1.1;--leading-snug: 1.3;--leading-normal: 1.6;--weight-normal: 400;--weight-medium: 500;--weight-semi: 600;--weight-bold: 700;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--shadow-card: 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 1px var(--border);--shadow-lift: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 1px var(--border-strong);--ease: cubic-bezier(.2, .8, .2, 1);--duration: .18s;--container-max: 1140px;--header-h: 64px;color-scheme:dark}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--sp-5)}.section{padding-block:var(--sp-7)}.section+.section{border-top:1px solid var(--border)}.section-title{font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--text-primary);margin:0 0 var(--sp-2)}.section-subtitle{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-normal);margin:0 0 var(--sp-6);max-width:600px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5);transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.card:hover{border-color:var(--border-strong)}@supports (backdrop-filter: blur(1px)){.card,.demo-card,.build-block,.webcam-output,.ref-panel{-webkit-backdrop-filter:blur(8px) saturate(115%);backdrop-filter:blur(8px) saturate(115%)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semi);line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),background var(--duration) var(--ease),border-color var(--duration) var(--ease)}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent);color:#0b0f14;border-color:var(--accent)}.btn-primary:hover{box-shadow:0 4px 12px #c47a3a33}.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}.btn-secondary:hover{background:var(--surface-hover);border-color:#ffffff38}.pill{display:inline-flex;align-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-medium);border:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary);transition:border-color var(--duration) var(--ease),background var(--duration) var(--ease)}.pill:hover{border-color:var(--border-strong);background:var(--surface-hover)}.pill-accent{color:var(--accent);border-color:#c47a3a33}:focus-visible{outline:2px solid rgba(196,122,58,.55);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}@keyframes liquidGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-in{animation:slideUp .5s var(--ease) both}.animate-in-delay-1{animation-delay:.1s}.animate-in-delay-2{animation-delay:.2s}.animate-in-delay-3{animation-delay:.3s}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(update:slow){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}*,*:before,*:after{box-sizing:border-box}html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}body{margin:0;min-height:100%;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background:#0b0f14;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(-45deg,#0b0f14,#111a27,#1b2432,#2a1b12);background-size:400% 400%;animation:liquidGradient 34s ease-in-out infinite}#root{min-height:100vh;display:flex;flex-direction:column}button,input,textarea,select{font-family:inherit;font-size:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--weight-bold);line-height:var(--leading-tight)}[id]{scroll-margin-top:calc(var(--header-h) + 16px)}