:root{--reveal: 1.4s;--controls-fade: 1.4s;--flash-in: 90ms;--flash-out: .26s;--ink: #05070c;--deep: #0a1428;--text: #f2f5fb;--dim: #93a1bd;--line: rgba(255, 255, 255, .14);color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--ink);color:var(--text);font:400 16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}#stage{display:grid;place-items:center;height:100%}#portrait{position:relative;aspect-ratio:9 / 16;height:100vh;max-width:100vw;overflow:hidden;background:#000}#video,#avatar{position:absolute;inset:0;width:100%;height:100%}#video{object-fit:cover;transform:scaleX(-1)}#brand{position:absolute;inset:auto 0 0;height:26%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3.2%;pointer-events:none;z-index:3}#brand:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--deep) 8%,rgba(10,20,40,.72) 45%,transparent 100%);opacity:1;transition:opacity .42s ease calc(var(--reveal) * .75)}#brand.booting:before{opacity:0;transition:none}#wordmark{position:relative;color:#fff;width:42%;max-width:340px;transition:transform var(--reveal) cubic-bezier(.22,.61,.36,1)}#brand.booting #wordmark{transform:translateY(-37vh)}#wordmark svg{width:100%;height:auto;display:block}#curtain{position:absolute;inset:0;background:var(--ink);z-index:2;opacity:1;transition:opacity var(--reveal) ease}#curtain.gone{opacity:0}#boot-steps{position:absolute;inset:auto 0 6%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#46506b}#boot-steps li{transition:color .24s ease}#boot-steps li.ok{color:#6f7c9c}#boot-steps li.fail{color:#d97a63;text-transform:none;letter-spacing:0;font-size:13px}#controls{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity var(--controls-fade) ease}#controls.shown{opacity:1}#capture{position:absolute;top:4.5%;left:50%;transform:translate(-50%);width:27%;aspect-ratio:1;display:grid;place-items:center;text-align:center}#capture .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.ring-track{fill:#060c1a80;stroke:var(--line);stroke-width:3}.ring-fill{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5}.capture-label{position:relative;font-size:clamp(11px,1.7vh,15px);line-height:1.3;letter-spacing:.02em;color:var(--text);text-shadow:0 1px 8px rgba(0,0,0,.7)}#carousel{position:absolute;inset:auto 0 12%;z-index:1}#outfit-name{text-align:center;font-size:clamp(15px,2.2vh,22px);font-weight:500;letter-spacing:.01em;margin-bottom:2.2vh;text-shadow:0 1px 10px rgba(0,0,0,.8)}#track{display:flex;align-items:center;gap:2.2vh;will-change:transform}.card{flex:0 0 auto;width:15vh;aspect-ratio:3 / 4;border-radius:12px;border:1px solid var(--line);background:#080f208c;backdrop-filter:blur(6px);display:grid;place-items:end center;padding:8px;font-size:11px;color:var(--dim);opacity:.55;transform:scale(.86);transition:opacity .18s ease,transform .18s ease,border-color .18s ease}.card .swatch{position:absolute;inset:10px 10px 28px;border-radius:8px;overflow:hidden}.card .swatch img{width:100%;height:100%;object-fit:contain;display:block}.card.active{opacity:1;transform:scale(1);border-color:#ffffff8c}.card span{position:relative}#screen{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#05070cd1;backdrop-filter:blur(3px);text-align:center;padding:6%}#screen[hidden]{display:none}#screen.clear{background:transparent;backdrop-filter:none}.screen-inner{display:flex;flex-direction:column;align-items:center;gap:2.4vh}#screen-kicker{margin:0;font-size:clamp(11px,1.6vh,14px);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}#screen-title{margin:0;font-size:clamp(24px,4.6vh,46px);font-weight:500;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.8)}#screen-title.count{font-size:clamp(90px,22vh,220px);font-weight:300;font-variant-numeric:tabular-nums;line-height:1}#screen-extra{display:flex;flex-direction:column;align-items:center;gap:2.4vh}.qr{padding:14px;background:#fff;border-radius:12px;max-width:100%;line-height:0}.qr canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.code{font:500 clamp(15px,2.4vh,22px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.34em;text-indent:.34em;color:var(--dim)}.big-button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.55);background:#ffffff14;color:var(--text);font:500 clamp(14px,2vh,19px)/1 inherit;padding:1.8vh 4vh;border-radius:999px;cursor:pointer}.big-button:focus-visible{outline:2px solid #fff;outline-offset:3px}.big-button .fill{position:absolute;inset:0 auto 0 0;width:0;background:#ffffff4d;pointer-events:none}.big-button span{position:relative}.spinner{width:34px;height:34px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}#brand,#curtain,#controls{transition-duration:1ms}}#cursor{position:absolute;top:0;left:0;z-index:6;pointer-events:none}#cursor[hidden]{display:none}#cursor i{display:block;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #00000047,0 2px 14px #00000080;transition:transform .14s ease}#cursor.dwelling i{transform:scale(1.55)}#flash{position:absolute;inset:0;z-index:7;background:#fff;opacity:0;pointer-events:none;transition:opacity var(--flash-out) ease-out}#flash.on{opacity:1;transition-duration:var(--flash-in)}#hud{position:fixed;top:12px;right:12px;width:300px;max-height:calc(100vh - 24px);overflow:auto;z-index:20;padding:12px 14px;border:1px solid #232c40;border-radius:12px;background:#090d16f0;font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}#hud[hidden]{display:none}#hud header{display:flex;align-items:center;gap:8px;margin-bottom:10px}#hud h1{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase}#hud footer{margin-top:12px;color:#5f6b85}#hud .dot{width:8px;height:8px;border-radius:50%;background:#3a4761}#hud .tag{margin-left:auto;color:#5f6b85}kbd{padding:1px 5px;border:1px solid #2a3348;border-radius:4px;background:#141b2b}
