:root{--bg:#040608;--cyan:#18E2EF;--fg:#F6F6F1;--red:#FF443D;--orange:#FF9800;--muted:#9AA8AE}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body{min-width:320px}
.scanner-shell{width:100%;min-height:100svh;margin:0;padding:clamp(16px,3vw,36px) max(14px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;background:radial-gradient(circle at 50% 36%,rgba(24,226,239,.18),transparent 33%),linear-gradient(180deg,#071014 0,var(--bg) 62%);isolation:isolate}
.scan-layout{width:min(1180px,100%);display:grid;grid-template-columns:minmax(178px,1fr) minmax(320px,536px) minmax(178px,1fr);gap:clamp(16px,2.3vw,30px);align-items:center}
.data-panel{border:1px solid rgba(24,226,239,.34);background:linear-gradient(180deg,rgba(24,226,239,.09),rgba(24,226,239,.025));padding:17px 16px;min-height:148px;box-shadow:0 0 30px rgba(24,226,239,.08) inset,0 12px 44px rgba(0,0,0,.28)}
.data-panel h2{margin:0 0 15px;color:var(--cyan);font-size:13px;line-height:1;letter-spacing:.08em}
.data-panel dl{margin:0}.data-panel div{display:flex;justify-content:space-between;gap:16px;margin:11px 0;color:rgba(246,246,241,.84);font-size:12px;line-height:1.15}.data-panel dt,.data-panel dd{margin:0}.data-panel dd{color:var(--fg);font-weight:800;text-align:right}
.scan-core{text-align:center;min-width:0}.kicker{margin:0;color:var(--fg);font-size:clamp(16px,2.1vw,21px);font-weight:900;letter-spacing:.08em}.scan-core h1{margin:5px 0 14px;font-size:clamp(32px,5.2vw,58px);line-height:.93;letter-spacing:0;font-weight:900}
.scanner-window{position:relative;height:clamp(330px,36vw,430px);border:1px solid rgba(24,226,239,.56);background:linear-gradient(rgba(24,226,239,.062) 1px,transparent 1px),linear-gradient(90deg,rgba(24,226,239,.062) 1px,transparent 1px),radial-gradient(circle at 50% 48%,rgba(24,226,239,.14),transparent 61%);background-size:24px 24px,24px 24px,100% 100%;overflow:hidden;box-shadow:0 0 0 1px rgba(24,226,239,.14),0 0 34px rgba(24,226,239,.16)}
.scanner-window:before{content:"";position:absolute;left:0;right:0;top:-20%;height:18%;background:linear-gradient(180deg,transparent,rgba(24,226,239,.13),rgba(246,246,241,.42),var(--cyan),rgba(24,226,239,.16),transparent);filter:drop-shadow(0 0 14px var(--cyan));animation:scanBeam 2.35s linear infinite;z-index:4}
.target-rings{position:absolute;inset:9% 7%;background:repeating-radial-gradient(circle,rgba(24,226,239,.2) 0 1px,transparent 2px 50px);opacity:.58;animation:ringPulse 2.8s ease-in-out infinite;transform-origin:50% 50%}
.corner{position:absolute;width:34px;height:34px;border-color:var(--cyan);opacity:.86;z-index:5}.corner-tl{top:14px;left:14px;border-top:2px solid;border-left:2px solid}.corner-tr{top:14px;right:14px;border-top:2px solid;border-right:2px solid}.corner-bl{left:14px;bottom:14px;border-left:2px solid;border-bottom:2px solid}.corner-br{right:14px;bottom:14px;border-right:2px solid;border-bottom:2px solid}
.body-stage{position:absolute;inset:7% 18% 4%;perspective:760px;z-index:3}.scan-body{width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 52%;animation:bodyTurn 4s ease-in-out infinite;filter:drop-shadow(0 0 11px rgba(24,226,239,.45))}
.scan-status{display:flex;align-items:center;justify-content:center;gap:13px;margin:12px 0 5px;min-height:32px}.percent{color:var(--red);font-size:28px;line-height:1;font-weight:900}.status-text{color:var(--cyan);font-size:13px;line-height:1.2;font-weight:800;letter-spacing:.08em}
.reveal{min-height:118px}.flaw,.punch,.note{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}.flaw{margin:6px 0 0;color:var(--red);font-size:clamp(30px,4.2vw,48px);line-height:.92;font-weight:900;letter-spacing:0}.punch{margin:8px 0 0;color:var(--fg);font-size:clamp(25px,3.55vw,40px);line-height:1;font-weight:900;letter-spacing:0}.note{margin:8px 0 0;color:rgba(246,246,241,.78);font-size:15px;line-height:1.3}
.actions{display:grid;justify-items:center;gap:8px;margin-top:6px}.buy-button,.replay-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:7px;font-family:Arial,Helvetica,sans-serif;font-weight:900;transition:opacity .28s ease,visibility .28s ease,transform .24s ease,filter .24s ease;opacity:0;visibility:hidden;pointer-events:none}.buy-button{display:none;width:min(350px,100%);min-height:56px;padding:0 22px;background:var(--orange);border:1px solid rgba(255,152,0,.92);color:#120b00;font-size:15px;box-shadow:0 13px 30px rgba(255,152,0,.22)}.has-buy-link .buy-button{display:inline-flex}.replay-button{min-height:40px;padding:0 21px;background:transparent;border:1px solid rgba(246,246,241,.58);color:var(--fg);font-size:12px;cursor:pointer}.buy-button:hover{transform:translateY(-2px);filter:brightness(1.07)}.replay-button:hover{border-color:var(--cyan);color:var(--cyan)}.buy-button:focus-visible,.replay-button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.is-final .scanner-window{border-color:rgba(255,68,61,.72);box-shadow:0 0 0 1px rgba(255,68,61,.24),0 0 32px rgba(255,68,61,.16)}.is-final .scanner-window:before,.is-final .target-rings,.is-final .scan-body{animation-play-state:paused}.show-flaw .flaw,.show-punch .punch,.show-note .note{opacity:1;transform:none}.show-buy .buy-button,.show-replay .replay-button{opacity:1;visibility:visible;pointer-events:auto;animation:popIn .38s ease both}
.scan-restart .scanner-window:before,.scan-restart .target-rings,.scan-restart .scan-body{animation:none}.scan-restart .scanner-window:before{top:-20%}
@keyframes scanBeam{to{top:104%}}@keyframes ringPulse{50%{opacity:.9;transform:scale(1.035)}}@keyframes bodyTurn{0%,100%{transform:rotateY(-15deg)}25%,75%{transform:rotateY(0deg)}50%{transform:rotateY(15deg)}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@media(max-width:700px){.scanner-shell{padding:14px max(12px,env(safe-area-inset-left)) 18px;align-items:start}.scan-layout{grid-template-columns:1fr}.data-panel{display:none}.scan-core h1{margin-bottom:13px}.scanner-window{height:clamp(340px,58svh,432px)}.body-stage{inset:8% 12% 4%}.scan-status{margin-top:12px}.reveal{min-height:122px}.buy-button{min-height:54px}}
@media(prefers-reduced-motion:reduce){.scanner-window:before,.target-rings,.scan-body{animation-duration:8s}.flaw,.punch,.note,.buy-button,.replay-button{transition-duration:.01ms}}