:root{--bg: #000;--fg: #f4f4f5;--fg-dim: rgba(244, 244, 245, .62);--fg-mute: rgba(244, 244, 245, .38);--glass: rgba(18, 18, 20, .55);--glass-border: rgba(255, 255, 255, .1);--glass-border-strong: rgba(255, 255, 255, .2);--accent: #7dd3fc;--accent-glow: rgba(125, 211, 252, .45);--dot-off: #6b7280;--dot-loading: #facc15;--dot-live: #4ade80;--dot-lost: #fb923c;--dot-error: #f87171;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Hiragino Sans,sans-serif;overscroll-behavior:none;-webkit-font-smoothing:antialiased}body{overflow:hidden}.viewer-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none}.viewer-root canvas{display:block}.viewer-root .hud,.viewer-root .top-right,.viewer-root .picker-wrap{transition:opacity .5s var(--ease),transform .5s var(--ease)}.viewer-root.idle{cursor:none}.viewer-root.idle .hud,.viewer-root.idle .top-right{opacity:0;transform:translateY(-6px);pointer-events:none}.viewer-root.idle .picker-wrap{opacity:0;transform:translate(-50%) translateY(10px);pointer-events:none}.hud{position:absolute;top:20px;left:20px;display:flex;gap:8px;align-items:center;z-index:10;pointer-events:auto;touch-action:auto}.pill{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 14px;background:var(--glass);color:var(--fg);border:1px solid var(--glass-border);border-radius:9999px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}.pill:hover{background:#1e1e22a6;border-color:var(--glass-border-strong)}.pill:active{transform:translateY(1px)}.pill .label{color:var(--fg)}.pill .state{color:var(--fg-mute);font-weight:400;letter-spacing:.18em;min-width:44px;text-align:right}.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--dot-off);box-shadow:0 0 0 0 transparent;transition:background .3s var(--ease),box-shadow .5s var(--ease)}.face-toggle--off .dot{background:var(--dot-off)}.face-toggle--initializing .dot{background:var(--dot-loading);box-shadow:0 0 10px #facc158c;animation:dot-pulse 1.2s ease-in-out infinite}.face-toggle--detecting .dot{background:var(--dot-live);box-shadow:0 0 10px #4ade808c;animation:dot-pulse 2s ease-in-out infinite}.face-toggle--lost .dot{background:var(--dot-lost);box-shadow:0 0 8px #fb923c80}.face-toggle--error .dot{background:var(--dot-error);box-shadow:0 0 8px #f871718c}.face-toggle--detecting{border-color:#7dd3fc40;background:#18242e99}.face-toggle--detecting .state{color:var(--accent)}.depth-toggle .dot{background:var(--dot-off)}.depth-toggle.is-on{border-color:#7dd3fc4d;background:#18242e99}.depth-toggle.is-on .dot{background:var(--accent);box-shadow:0 0 10px #7dd3fc99}.depth-toggle.is-on .state{color:var(--accent)}@keyframes dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}.picker-wrap{position:absolute;left:50%;bottom:20px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;pointer-events:auto;max-width:calc(100vw - 40px);transition:opacity .3s var(--ease),transform .3s var(--ease)}.picker-hint{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;color:var(--fg);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;background:#12161c8c;border:1px solid var(--glass-border);border-radius:9999px;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);transition:color .3s var(--ease),border-color .3s var(--ease)}.picker-hint svg{color:var(--accent);opacity:.9}.picker-wrap:hover .picker-hint{border-color:#7dd3fc4d}.image-picker{display:flex;gap:10px;padding:10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);max-width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none}.image-picker::-webkit-scrollbar{display:none}.thumb{position:relative;width:76px;height:48px;padding:0;border:0;border-radius:10px;background:#111;cursor:pointer;overflow:hidden;flex-shrink:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:inset 0 0 0 1px #ffffff0f}.thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .5s var(--ease),filter .3s var(--ease);filter:saturate(.85) brightness(.85)}.thumb:hover img{transform:scale(1.06);filter:saturate(1) brightness(1)}.thumb:hover{transform:translateY(-2px)}.thumb.selected{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 3px #7dd3fc2e,0 6px 20px -6px var(--accent-glow)}.thumb.selected img{filter:saturate(1.05) brightness(1)}.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.top-right{position:absolute;top:20px;right:20px;display:flex;gap:8px;align-items:center;z-index:10;pointer-events:auto;touch-action:auto}.fs-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--fg);background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;cursor:pointer;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)}.fs-btn:hover{background:#1e1e22a6;border-color:var(--glass-border-strong);color:var(--accent)}.fs-btn:active{transform:translateY(1px)}.fs-btn[aria-pressed=true]{color:var(--accent);border-color:#7dd3fc4d}body.pseudo-fullscreen .picker-wrap{opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;background:radial-gradient(circle at center,#7dd3fc14,#080c128c 70%);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);transition:opacity .25s var(--ease)}.drop-overlay--active{opacity:1}.drop-overlay:before,.drop-overlay:after{content:"";position:absolute;top:20px;right:20px;bottom:20px;left:20px;border-radius:22px;pointer-events:none}.drop-overlay:before{border:2px dashed rgba(125,211,252,.6);box-shadow:0 0 40px #7dd3fc26,inset 0 0 60px #7dd3fc14;animation:drop-dash 20s linear infinite}.drop-overlay:after{border:1px solid rgba(125,211,252,.18);top:14px;right:14px;bottom:14px;left:14px;border-radius:26px}@keyframes drop-dash{to{background-position:-400px 0}}.drop-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 56px;background:#12161c99;border:1px solid rgba(125,211,252,.25);border-radius:24px;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:0 20px 60px -10px #0009,0 0 0 1px #7dd3fc14;transform:translateY(8px) scale(.96);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)}.drop-overlay--active .drop-card{transform:translateY(0) scale(1);opacity:1}.drop-ring{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#7dd3fc14;border:1.5px solid rgba(125,211,252,.35);color:var(--accent);box-shadow:0 0 0 6px #7dd3fc0d,0 0 24px #7dd3fc40;animation:drop-ring-float 2.4s ease-in-out infinite}@keyframes drop-ring-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.drop-title{font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}.drop-sub{font-size:12px;color:var(--fg-mute);letter-spacing:.08em}