@font-face{font-family:Poly;src:url('assets/fonts/PolySans-Neutral.woff')}@font-face{font-family:Poly;src:url('assets/fonts/PolySans-Median.woff');font-weight:600}@font-face{font-family:Poly;src:url('assets/fonts/PolySans-RelaxItalic.woff');font-style:italic}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08090c;color:#fff;font-family:Poly,Arial,sans-serif}body{overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #9aaaff;outline-offset:5px}button:disabled{opacity:.48;cursor:default}[hidden]{display:none!important}#app{max-width:520px;margin:auto;position:relative}.screen{position:relative;min-height:100svh;overflow:hidden}.branded{background:#101115 url('assets/kv.jpg') center top/cover no-repeat}.intro-copy{position:relative;z-index:2;text-align:center;padding:clamp(45px,10svh,92px) 24px 130px}.eyebrow{color:#a4afff;font-size:clamp(18px,5vw,25px);line-height:1.13;margin:0 0 24px}h1{font-size:clamp(76px,24.6vw,128px);font-weight:600;line-height:.92;letter-spacing:-.075em;margin:0 0 32px;padding-right:.07em}.pill{display:block;border-radius:999px;width:100%;max-width:290px;margin:0 auto;border:1.5px solid #fff;padding:15px 20px;font-size:22px;line-height:1.2;min-height:58px}.primary{background:white;color:#08090c}.secondary{background:#08090c;color:white}.trust{font-size:15px;font-style:italic;line-height:1.22;margin:22px 0 0}.status{font-size:13px;line-height:1.4;max-width:330px;margin:14px auto;min-height:18px}.decor{position:absolute;pointer-events:none;width:65%;z-index:1}.decor.blue{bottom:-20px;left:-35px;transform:rotate(-15deg)}.decor.clear{right:-80px;bottom:18%;width:49%;transform:rotate(19deg)}.camera-screen{background:#000;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:env(safe-area-inset-top)}.viewfinder{position:relative;width:100%;aspect-ratio:9/16;max-height:calc(100svh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));align-self:center;max-width:calc((100svh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16)}canvas,video{display:block;width:100%;height:100%;object-fit:contain}.close{position:absolute;top:12px;left:14px;background:#0005;border:0;border-radius:50%;width:38px;height:38px;font-size:30px;line-height:30px}.face-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:20px;background:#0007;padding:7px 12px;font-size:12px}.shutter{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:82px;height:82px;border:0;padding:0;background:none;border-radius:50%}.shutter svg{width:100%;height:100%;transform:rotate(-90deg)}.shutter circle{fill:none;stroke-width:3}.shutter .track{stroke:white}.shutter .progress{stroke:#9aaaff;stroke-dasharray:251.33;stroke-dashoffset:251.33}.shutter span{position:absolute;inset:8px;background:white;border-radius:50%;transition:inset .15s,border-radius .15s}.shutter:disabled{opacity:.4}body[data-state=recording] .shutter{opacity:1;background:#6668}body[data-state=recording] .shutter span{inset:27px;border-radius:4px}body[data-state=recording] .close,body[data-state=recording] .face-status,body[data-state=recording] footer{visibility:hidden}footer{text-align:center;padding:16px 16px calc(18px + env(safe-area-inset-bottom));min-height:104px}footer p{font-size:15px;margin:0 0 8px}footer h2{font-size:30px;font-weight:600;line-height:1.1;margin:0}em{color:#a4afff;font-weight:400}.result-screen{padding:calc(22px + env(safe-area-inset-top)) 24px 130px}.back{position:relative;z-index:3;font-size:22px;padding:5px 0;background:none;border:0;margin-bottom:22px}.result-card{position:relative;z-index:2;width:65%;max-width:270px;aspect-ratio:9/16;background:#141820;margin:0 auto 20px}.result-actions{position:relative;z-index:2;max-width:310px;margin:auto;text-align:center}.result-actions .pill+.pill{margin-top:14px}.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:10px}.result-actions progress{height:3px;display:block;width:90%;margin:14px auto 0;accent-color:#a4afff}.result-screen .decor.blue{bottom:-65px;left:-70px}.result-screen .decor.clear{bottom:15%;right:-90px}.gate{position:fixed;inset:0;z-index:20;background:#101115f8;display:flex;flex-direction:column;justify-content:center;padding:30px;gap:18px}.gate h2,.gate p{max-width:400px;margin:0 auto}.gate p{line-height:1.5}.gate .pill{margin-top:12px}#diagnostics{position:relative;background:#171b24;padding:16px;font:12px monospace}#log{white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}@media(max-height:720px){.intro-copy{padding-top:42px}.eyebrow{margin-bottom:18px}h1{font-size:min(22vw,108px);margin-bottom:24px}.result-card{width:54%}.result-screen{padding-top:16px}.back{margin-bottom:14px}.result-actions .pill{padding:12px;font-size:20px}.result-actions .pill+.pill{margin-top:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

.shutter span{display:flex;align-items:center;justify-content:center;color:#111}.shutter span b{font:42px Arial,sans-serif;line-height:1}.shutter .progress{stroke:url(#captureGradient);stroke-width:5;stroke-linecap:round}.recording-cue{display:none;position:absolute;bottom:calc(6% + 102px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0009;border-radius:24px;padding:9px 14px;font-size:14px}body[data-state=recording] .recording-cue{display:block}body[data-state=recording] .shutter{width:96px;height:96px;background:transparent}body[data-state=recording] .shutter span{inset:33px;background:#fff}body[data-state=recording] .shutter span b{display:none}body[data-state=recording] .shutter .track{stroke:#ffffff55}

/* Intro-only gentle drift; each key keeps its existing base rotation. */
#intro .decor.blue{animation:intro-blue-float 4.8s ease-in-out infinite}
#intro .decor.clear{animation:intro-clear-float 6.2s ease-in-out -2.4s infinite}
@keyframes intro-blue-float{0%,100%{transform:translateY(0) rotate(-15deg)}50%{transform:translateY(-24px) rotate(-9deg)}}
@keyframes intro-clear-float{0%,100%{transform:translateY(0) rotate(19deg)}50%{transform:translateY(20px) rotate(13deg)}}
@media(prefers-reduced-motion:reduce){#intro .decor{animation:none}}

/* v0.6: dedicated intro artwork; copy and keys occupy separate layout areas. */
#intro{background-position:center -56px}
#intro .intro-copy{padding-bottom:0}
#intro .trust{position:relative;display:table;margin:22px auto 0;padding:8px 15px;background:#101115;box-shadow:0 0 18px 14px #101115;border-radius:8px}
#intro .intro-art{position:relative;height:300px;margin-top:18px}
#intro .decor.blue{width:70%;left:-35px;bottom:-45px}
#intro .decor.clear{width:53%;right:-65px;bottom:88px}
#intro .intro-art{height:240px;margin-top:10px}
#intro .decor.blue{bottom:20px}
#intro .decor.clear{bottom:72px}
/* v0.7 reference positions, expressed relative to the intro artboard. */
#intro{min-height:max(100svh,217.4vw);background-position:center top;background-size:100% 100%}
#intro .trust{padding:0;background:transparent;box-shadow:none;border-radius:0}
#intro .intro-art{position:absolute;inset:0;height:auto;margin:0;pointer-events:none}
#intro .decor.blue{width:72%;left:0;right:auto;top:69%;bottom:auto}
#intro .decor.clear{width:55%;left:auto;right:-29%;top:60%;bottom:auto}
@media(min-width:520px){#intro{min-height:max(100svh,1130px)}}

@font-face{font-family:PolyInky;src:url('assets/fonts/PolySans-Inky.woff');font-weight:400}
@font-face{font-family:PolyNeutralItalic;src:url('assets/fonts/PolySans-NeutralItalic.woff');font-style:italic}
body[data-state=intro]{height:100vh;overflow:hidden}
#intro{height:100vh;min-height:0;max-height:100vh;overflow:hidden;background-position:center -60px}
#intro .intro-copy{position:absolute;inset:0;padding:0 24px}
#intro .eyebrow{position:absolute;top:12%;left:0;width:100%;margin:0;font-size:min(5vw,2.8vh,25px)}
#intro h1{position:absolute;top:20%;left:0;width:100%;margin:0;font-family:PolyInky,Arial,sans-serif;font-weight:400;font-size:min(25vw,12vh,130px);line-height:.91;letter-spacing:-.06em}
#intro #start{position:absolute;top:55%;left:50%;transform:translateX(-50%);width:55%;max-width:290px;min-height:0;padding:clamp(10px,1.8vh,18px) 12px;font-size:min(5vw,2.7vh,22px)}
#intro .trust{position:absolute;top:64%;left:0;width:100%;margin:0;padding:0;background:none;box-shadow:none;font-family:PolyNeutralItalic,Arial,sans-serif;font-style:italic;font-size:min(3.5vw,1.9vh,15px)}
#intro #startStatus{position:absolute;top:69%;left:10%;width:80%;margin:0}
body[data-state=intro] #diagnostics{display:none}

#intro h1{letter-spacing:normal}

/* v29: supplied portrait intro, excluding native Safari controls. */
#intro .intro-logo{position:absolute;left:33%;top:11.5%;width:34%;max-width:none;height:auto}
#intro .eyebrow{top:21%;left:5%;width:90%;text-align:center;color:#9dabff;font-size:min(4.4vw,2.15vh,23px);line-height:1.2}
#intro h1{top:28%;left:4%;width:92%;text-align:center;padding:0;font-size:min(22vw,10.8vh,114px);line-height:1.06;letter-spacing:normal}
#intro #start{top:52.2%;width:54.5%;padding:1.8vh 12px;font-size:min(5vw,2.5vh,26px)}
#intro .trust{top:60%;font-size:min(3.3vw,1.7vh,17px)}
#intro #startStatus{top:64%;font-size:12px}
#intro{background-position:center top}
#intro .decor.blue{top:65%;left:-7%;width:90%;transform:rotate(-40deg)}
#intro .decor.clear{top:58%;right:-29%;width:55%}
@keyframes intro-blue-float{0%,100%{transform:translateY(0) rotate(-40deg)}50%{transform:translateY(-24px) rotate(-34deg)}}

#cameraTestInfo{position:absolute;left:8px;right:8px;top:54px;z-index:5;background:#000b;color:white;padding:8px;font:12px/1.4 monospace;pointer-events:none}body[data-state=recording] #cameraTestInfo{display:none}

.face-status{left:62px;right:10px;transform:none;white-space:normal;text-align:center;font-size:11px;max-width:calc(100% - 72px)}

.loading-screen{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#283e9c 0%,#101115 60%);text-align:center;padding:32px}.loading-screen h2{font-size:28px;font-weight:600;margin:28px 0 10px}.loading-screen p{font-size:15px;color:#a4afff;line-height:1.5}.loading-orbit{width:72px;height:72px;border:2px solid #8195ff40;border-top-color:#a4afff;border-radius:50%;animation:loading-spin 1.2s linear infinite}.loading-orbit:after{content:'';display:block;width:15px;height:15px;border-radius:5px;background:#4663ff;margin:0 0 0 50px}@keyframes loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-orbit{animation:none}}