:root{color:#eef4f8;font-synthesis:none;text-rendering:optimizelegibility;--ink:#eef4f8;--muted:#97a8b5;--line:#b2d0e121;--accent:#f4a92d;background:#0b1117;font-family:Avenir Next,Avenir,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 50% 0,#20262b,#0000 65%),#0b1117;min-width:320px;min-height:100svh;margin:0}button,select,input{font:inherit}button,select,input[type=range],summary{cursor:pointer}:where(button,select,input,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}.app-shell{width:min(1040px,100% - 48px);margin:0 auto;padding:28px 0 20px}.hero{justify-content:space-between;align-items:center;gap:24px;margin:0 4px 22px;display:flex}h1{letter-spacing:-.055em;margin:0;font-size:1.6rem;font-weight:700;line-height:1.2}.lede{color:var(--muted);margin:5px 0 0;font-size:.88rem}.demo-button{color:#f3e6cf;background:#f4a92d13;border:1px solid #f4a92d47;border-radius:999px;align-items:center;gap:9px;min-height:40px;padding:0 13px 0 10px;font-size:.75rem;font-weight:650;transition:border-color .18s,background .18s,transform .18s;display:inline-flex}.demo-button:hover{background:#f4a92d21;border-color:#f4a92d8c;transform:translateY(-1px)}.demo-play{color:#271b09;background:var(--accent);border-radius:50%;place-content:center;width:22px;height:22px;padding-left:2px;font-size:.55rem;display:grid}.demo-button small{color:#a99d89;font-size:.65rem;font-weight:500}.stage{isolation:isolate;background:#dce3eb;border:1px solid #ffffff24;border-radius:24px;position:relative;overflow:hidden;box-shadow:0 24px 80px #0003}.lamp-viewport{width:100%;height:clamp(380px,62svh,580px);position:relative}.lamp-state{z-index:1;color:#515962;letter-spacing:.02em;pointer-events:none;font-size:.78rem;position:absolute;top:22px;left:24px}.lamp-state:before{content:"";vertical-align:1px;background:#969da4;border-radius:50%;width:6px;height:6px;margin-right:8px;transition:background .5s,box-shadow .5s;display:inline-block}.stage.is-awake .lamp-state:before{background:#b77922;box-shadow:0 0 10px #f4a92d73}#lamp-canvas,#camera,.camera-cover,#face-overlay{width:100%;height:100%;position:absolute;inset:0}.lamp-canvas{display:block;transform:scaleX(-1)}.viewport{aspect-ratio:4/3;width:100%;position:relative;overflow:hidden}.camera-panel{background:#1c242c;border:1px solid #ffffff80;border-radius:14px;width:clamp(128px,17vw,172px);position:absolute;bottom:20px;right:20px;overflow:hidden;box-shadow:0 5px 24px #181f261f}.camera-viewport{background:#192129}#camera{object-fit:cover;transform:scaleX(-1)}.camera-cover{color:#b0bdc8;text-align:center;background:linear-gradient(145deg,#303b45,#1c242c);place-content:center;gap:12px;padding:10px;transition:opacity .4s;display:grid}.camera-cover.hidden{opacity:0;pointer-events:none}.camera-cover p{margin:0;font-size:.68rem}.camera-glyph{border:1.5px solid #9baab6;border-radius:5px;width:28px;height:21px;margin:auto;position:relative}.camera-glyph:before{content:"";border:1.5px solid #9baab6;border-radius:50%;position:absolute;inset:5px 8px}.camera-state{color:#c1ccd5;background:#0a10169e;border-radius:5px;padding:3px 6px;font-size:.59rem;line-height:1.2;position:absolute;bottom:7px;left:8px}.camera-state.active{color:#bdfbd4}.control-bar{text-align:center;flex-direction:column;align-items:center;padding:24px 12px 18px;display:flex}.primary-button,.secondary-button,.quiet-button{border:0;border-radius:10px;min-height:44px;padding:0 18px;font-size:.82rem;font-weight:600;transition:background .2s,box-shadow .2s,transform .2s}.primary-button{color:#261a09;background:#f6b848;border:1px solid #0000;border-radius:999px;min-width:150px;min-height:46px;font-size:.92rem;box-shadow:0 4px 20px #f4a92d21}.primary-button:hover:not(:disabled){background:#ffc865;transform:translateY(-1px);box-shadow:0 6px 24px #f4a92d33}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:disabled{cursor:wait;opacity:.65}.primary-button.stop{border-color:var(--line);color:#c1ccd5;box-shadow:none;background:#ffffff0b}.primary-button.stop:hover{box-shadow:none;background:#ffffff17}.status-message{color:#c1ccd5;min-height:1.5em;margin:12px 0 0;font-size:.85rem;line-height:1.5}.status-message.error{color:#f5b5a2}.privacy-note{color:#8193a1;margin:6px 0 0;font-size:.72rem}.animation-lab{border-top:1px solid var(--line);margin-top:4px}.animation-lab summary{color:#8e9faa;justify-content:space-between;align-items:center;min-height:44px;padding:10px 4px;font-size:.73rem;list-style:none;display:flex}.animation-lab summary::-webkit-details-marker{display:none}.animation-lab summary span{font-size:1rem;transition:transform .2s}.animation-lab[open] summary span{transform:rotate(45deg)}.lab-content{grid-template-columns:1fr 1fr;gap:24px;padding:12px 0 8px;display:grid}.diagnostics{min-width:0}.diagnostics-viewport{background:#111a22;border-radius:12px}#face-overlay{pointer-events:none}.metrics{color:var(--muted);justify-content:space-between;gap:12px;margin-top:10px;font-size:.7rem;display:flex}.metrics strong{color:var(--ink);font-variant-numeric:tabular-nums}.animation-controls{grid-template-columns:1fr 1fr;align-content:start;align-items:end;gap:16px;min-width:0;display:grid}.field{gap:8px;min-width:0;display:grid}.field label,.toggle-field{color:#b8c6d0;font-size:.75rem}select{border:1px solid var(--line);width:100%;min-height:44px;color:var(--ink);background:#192129;border-radius:8px;padding:0 10px;font-size:.8rem}.toggle-field{align-items:center;gap:8px;min-height:44px;display:flex}.toggle-field input{width:18px;height:18px;accent-color:var(--accent)}.range-label{justify-content:space-between;gap:8px;display:flex}.range-label output{color:var(--accent);font-size:.75rem}input[type=range]{width:100%;min-height:28px;accent-color:var(--accent);margin:0}.lab-actions{flex-wrap:wrap;grid-column:1/-1;gap:8px;display:flex}.secondary-button{color:#241606;background:var(--accent)}.quiet-button{color:#c3d0d8;background:#fff1}.debug-status{color:var(--muted);grid-column:1/-1;margin:0;font-size:.75rem;line-height:1.5}.demo-dialog{width:min(900px,100% - 32px);max-height:calc(100svh - 32px);color:var(--ink);background:#121b23;border:1px solid #d1e2ec2e;border-radius:22px;padding:0;overflow:auto;box-shadow:0 32px 120px #00000094}.demo-dialog::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#04080cc7}.demo-dialog-card{padding:22px}.demo-dialog-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;display:flex}.demo-eyebrow{color:var(--accent);letter-spacing:.14em;margin:0 0 5px;font-size:.62rem;font-weight:750}.demo-dialog h2{letter-spacing:-.035em;margin:0;font-size:1.35rem}.dialog-close{border:1px solid var(--line);color:#b9c7d0;background:#ffffff0e;border-radius:50%;flex:none;place-content:center;width:36px;height:36px;padding:0 0 3px;font-size:1.4rem;line-height:1;display:grid}.dialog-close:hover{color:#fff;background:#ffffff1a}.demo-video{aspect-ratio:16/9;background:#080d11;border:1px solid #ffffff1f;border-radius:14px;width:100%;display:block}.demo-steps{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px;display:grid}.demo-steps span{border:1px solid var(--line);color:#80919e;background:#ffffff06;border-radius:10px;gap:2px;min-width:0;padding:10px 12px;font-size:.68rem;display:grid}.demo-steps strong{color:#dce6ec;font-size:.72rem}.demo-dialog-footer{justify-content:space-between;align-items:center;gap:20px;margin-top:15px;display:flex}.demo-dialog-footer p{color:#7f909c;margin:0;font-size:.7rem}.demo-dialog-footer .secondary-button{flex:none}@media (max-width:600px){.app-shell{width:calc(100% - 24px);padding-top:18px}.hero{margin-bottom:16px}h1{font-size:1.4rem}.lede{font-size:.8rem}.demo-button{min-height:36px}.demo-button small{display:none}.stage{border-radius:18px}.lamp-viewport{height:clamp(320px,52svh,420px)}.lamp-state{font-size:.72rem;top:17px;left:18px}.camera-panel{border-radius:10px;width:112px;bottom:12px;right:12px}.camera-cover{gap:8px;padding-bottom:23px}.camera-cover p{font-size:.6rem}.camera-glyph{width:24px;height:18px}.camera-glyph:before{inset:4px 7px}.control-bar{padding-top:20px}.lab-content{grid-template-columns:1fr;gap:20px}.demo-dialog-card{padding:15px}.demo-dialog-header{margin-bottom:12px}.demo-steps{grid-template-columns:1fr 1fr}.demo-dialog-footer{flex-direction:column;align-items:stretch;gap:12px}.demo-dialog-footer .secondary-button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
