:root{color:#e9eeeb;font-synthesis:none;text-rendering:optimizelegibility;--accent:#74e0a2;--surface:#171d1a;--muted:#9aa69f;--radius:16px;background:#101412;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 80% -10%,#74e0a214,#0000 32rem),#101412;min-width:320px;min-height:100dvh;margin:0}button{font:inherit}.app{width:min(1120px,100% - 40px);margin:0 auto;padding:clamp(32px,6vw,72px) 0}.intro{grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);align-items:end;gap:48px;margin-bottom:28px;display:grid}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}h1{letter-spacing:-.055em;max-width:11ch;margin:0;font-size:clamp(42px,7vw,76px);font-weight:650;line-height:.98}.intro-copy{max-width:34ch;color:var(--muted);margin:0 0 5px;font-size:15px;line-height:1.65}.camera-panel{border-radius:var(--radius);background:var(--surface);border:1px solid #2a332f;overflow:hidden;box-shadow:0 28px 80px #0408064d}.camera-stage{aspect-ratio:16/9;background:#0b0e0d;position:relative;overflow:hidden}video,canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}video{z-index:0;transform:scaleX(-1)}canvas{pointer-events:none}#three-layer{z-index:1}#overlay{z-index:2}.empty-state{color:var(--muted);text-align:center;z-index:3;background:linear-gradient(135deg,#74e0a209,#0000 55%);place-content:center;justify-items:center;display:grid;position:absolute;inset:0}.empty-state[hidden]{display:none}.empty-state p{color:#dbe2de;margin:20px 0 6px;font-size:16px}.empty-state span:last-child{font-size:13px}.viewfinder{border:1px solid #47534d;border-radius:12px;width:60px;height:60px;box-shadow:inset 0 0 0 13px #0b0e0d}.pinch-indicator{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:4;background:#101412c7;border:1px solid #e9eeeb26;border-radius:12px;min-width:128px;padding:12px 14px;position:absolute;top:18px;right:18px}.pinch-label{color:var(--muted);letter-spacing:.1em;margin-bottom:4px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;display:block}.pinch-indicator strong{font-size:15px;font-weight:600}.pinch-indicator.is-pinching{color:#ffcf5c;border-color:#ffcf5c80}.interaction-status{z-index:4;color:#dbe2de;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#101412c7;border:1px solid #e9eeeb21;border-radius:12px;max-width:min(70%,360px);margin:0;padding:10px 12px;font-size:13px;position:absolute;bottom:18px;left:18px}.result-panel{z-index:5;border-radius:var(--radius);color:#e9eeeb;text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#101412f0;border:1px solid #74e0a266;width:min(330px,100% - 36px);padding:24px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 24px 64px #04080673}.result-panel[hidden]{display:none}.result-panel>span{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}.result-panel strong{color:var(--accent);letter-spacing:.08em;margin:12px 0 8px;font-size:38px;font-weight:650;display:block}.result-panel p{color:#b8c3bd;margin:0 0 20px;font-size:14px;line-height:1.6}#reset-button{color:#e9eeeb;cursor:pointer;background:#202923;border:1px solid #3c4a43;border-radius:12px;width:100%;min-height:42px}#reset-button:hover{border-color:var(--accent)}#reset-button:active{transform:translateY(1px)}#reset-button:focus-visible{outline-offset:3px;outline:3px solid #74e0a259}.controls{justify-content:space-between;align-items:center;gap:24px;padding:18px 20px;display:flex}.status-copy{gap:4px;display:grid}.status-copy span{color:#dbe2de;font-size:14px}.status-copy small{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}#camera-button{color:#0b1a11;background:var(--accent);cursor:pointer;border:0;border-radius:12px;min-width:128px;min-height:44px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .15s,background-color .15s}#camera-button:hover{background:#8be8b2}#camera-button:active{transform:translateY(1px)}#camera-button:focus-visible{outline-offset:3px;outline:3px solid #74e0a259}#camera-button:disabled{cursor:wait;opacity:.62}@media (width<=700px){.app{width:min(100% - 24px,1120px);padding:28px 0}.intro{grid-template-columns:1fr;gap:18px}h1{font-size:clamp(38px,13vw,56px)}.camera-stage{aspect-ratio:3/4}.controls{flex-direction:column;align-items:stretch}#camera-button{width:100%}}@media (prefers-reduced-transparency:reduce){.pinch-indicator,.interaction-status,.result-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:#101412}}