:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f7f7;background:#050505;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;overflow:hidden;background:#050505}
button,select,textarea,a{font:inherit}
button,a{min-height:44px;border-radius:14px;border:1px solid #3b3b3b;background:rgba(20,20,20,.88);color:#fff;font-weight:800;text-align:center;text-decoration:none;padding:10px}
button:disabled{opacity:.32}
.primary{background:#f5f5f5;color:#050505;border:0}
.hidden{display:none!important}
.app{position:fixed;inset:0;overflow:hidden;background:#000}
.stage{position:absolute;inset:0;overflow:hidden;background:#000}
#camera,#preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
#preview{display:none}
.live-preview #preview{display:block}
.live-preview #camera{visibility:hidden}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 25%,transparent 60%,rgba(0,0,0,.72));pointer-events:none}
.topbar{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;z-index:30;background:linear-gradient(#000b,transparent);transition:opacity .25s}
.topbar strong{text-align:center;font-size:14px;letter-spacing:.01em}
.pill{font-size:12px;color:#fff;border:1px solid #ffffff3a;border-radius:999px;padding:7px 10px;background:#0008}
.iconButton,.utilityButton{min-width:46px;min-height:46px;border-radius:999px;font-size:20px;padding:0;background:#171717d9;backdrop-filter:blur(12px)}
.utilityButton{font-size:18px}
.status{position:absolute;top:calc(62px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;max-width:calc(100% - 28px);padding:7px 11px;border-radius:999px;background:#000a;font-size:11px;white-space:nowrap;z-index:9;overflow:hidden;text-overflow:ellipsis}
.dot{display:none;width:9px;height:9px;border-radius:50%;background:#ff3b30;flex:0 0 auto}
.recording .dot{display:block;animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.35}}
.promptWrap{position:absolute;inset:12% 7% 27%;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 82%,transparent)}
#prompt{position:absolute;left:0;right:0;top:45%;font-size:40px;line-height:1.28;font-weight:750;text-align:center;text-shadow:0 2px 12px #000;white-space:pre-wrap;will-change:transform}
.guide{position:absolute;left:5%;right:5%;top:43%;height:2px;background:#ff4d4d;opacity:.72}
.countdown{position:absolute;inset:0;display:none;place-items:center;background:#000c;font-size:96px;font-weight:900;z-index:40}
.countdown.show{display:grid}
.permissionGate{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#050505;z-index:60}
.permissionCard{width:min(100%,420px);display:grid;gap:14px;text-align:center;padding:28px 20px;border:1px solid #242424;border-radius:26px;background:#0c0c0c}
.permissionIcon{display:grid;place-items:center;width:72px;height:72px;margin:auto;border-radius:50%;border:6px solid #3b1414;background:#ff3b30;color:#ff3b30;box-shadow:0 0 0 10px #1d0d0d}
.permissionCard h1{margin:10px 0 0;font-size:28px;letter-spacing:-.04em}
.permissionCard p{margin:0;color:#aaa;line-height:1.45}
.permissionStatus{min-height:22px;font-size:13px;color:#ffb7b2!important}
.setup{position:absolute;inset:0;display:grid;align-content:start;gap:14px;padding:calc(72px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom));background:#080808f7;overflow:auto;z-index:35}
.setup h1{font-size:30px;letter-spacing:-.04em;margin:8px 0 0}
.setup p{color:#aaa;margin:0;line-height:1.45}
.setup textarea{width:100%;min-height:230px;border:1px solid #303030;border-radius:16px;background:#111;color:#fff;padding:16px;font:500 18px/1.5 inherit;resize:vertical;outline:none}
.setup textarea:focus{border-color:#777}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid label{display:grid;gap:8px;padding:12px;border:1px solid #292929;border-radius:14px;background:#111;font-size:12px;color:#aaa}
.grid output{color:#fff;font-weight:800}
.grid select,.cameraOptions select{background:#171717;color:#fff;border:1px solid #454545;border-radius:999px;padding:10px 12px}
.grid .wide{grid-column:1/-1}
.privacy{font-size:12px!important}
.orientationFallback{display:grid;gap:10px;padding:14px;border:1px solid #6a5631;border-radius:14px;background:#17130c}
.orientationFallback strong{font-size:14px}
.orientationFallback p{font-size:12px;color:#d8c69d}
.cameraOptions{position:absolute;left:50%;bottom:calc(116px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;width:min(94%,560px);z-index:25;transition:opacity .25s}
.cameraOptions select{max-width:180px;min-height:42px;font-size:12px;background:#000b;backdrop-filter:blur(12px)}
.zoomOptions{display:flex;gap:6px;padding:4px;border-radius:999px;background:#000a}
.zoomOptions button{min-width:40px;min-height:40px;border-radius:999px;padding:4px;font-size:12px}
.zoomOptions button.active{color:#ffd60a;border-color:#ffd60a;background:#3a3210}
.controls{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;justify-content:center;padding:18px 10px calc(14px + env(safe-area-inset-bottom));z-index:30;background:linear-gradient(transparent,#000 30%);transition:opacity .25s}
.recButton{display:grid;place-items:center;min-width:74px;width:74px;height:74px;border-radius:50%;padding:0;border:4px solid #ddd;background:#000;position:relative}
.recButton span{width:54px;height:54px;border-radius:50%;background:#ff3b30;transition:.2s}
.recButton b{position:absolute;bottom:-17px;font-size:10px;letter-spacing:.08em}
.recording .recButton span{width:28px;height:28px;border-radius:7px}
.stopButton{color:#ff6961}
.chrome-dim .topbar,.chrome-dim .controls,.chrome-dim .cameraOptions{opacity:.18}
.chrome-dim .controls:focus-within,.chrome-dim .topbar:focus-within{opacity:1}
.result{position:absolute;left:12px;right:12px;bottom:calc(112px + env(safe-area-inset-bottom));display:none;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border:1px solid #333;border-radius:16px;background:#050505f2;z-index:32}
.result.show{display:grid}
.result p{grid-column:1/-1;margin:0;color:#bbb;font-size:12px;line-height:1.35}
.result .diagnostic{color:#888;font-size:10px;overflow-wrap:anywhere}
@media(max-width:410px){.controls{gap:6px}.iconButton,.utilityButton{min-width:44px;width:44px}.utilityButton{display:none}.recButton{width:68px;min-width:68px;height:68px}.cameraOptions{bottom:calc(104px + env(safe-area-inset-bottom))}}
@media(min-width:760px){.app{max-width:620px;left:50%;transform:translateX(-50%);border-inline:1px solid #222}#prompt{font-size:48px}}