:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#f7fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 50% -15%,#493a78,transparent 48%),linear-gradient(140deg,#0a1732,#16234d 55%,#2d1a45)}button{font:inherit;cursor:pointer}.header{min-height:64px;padding:10px clamp(15px,4vw,50px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #bdb1ff34;background:#10172cba}.brand,.back{color:#fff;text-decoration:none;font-weight:850}.brand{font-size:23px;letter-spacing:-.05em}.brand span{color:#bba4ff}.brand small{font-size:9px;letter-spacing:.15em;border:1px solid #cab5ff79;border-radius:5px;padding:4px 6px;margin-left:9px;vertical-align:middle}.back{font-size:12px;color:#d6ccea}.page{max-width:1130px;margin:auto;padding:23px clamp(7px,3vw,30px) 48px}.intro{text-align:center;margin-bottom:17px}.intro .eyebrow{color:#bfaeff;font-size:10px;font-weight:900;letter-spacing:.24em;margin:0 0 6px}.intro h1{margin:0;font-size:clamp(42px,6vw,66px);line-height:1;letter-spacing:-.065em}.intro p:last-child{font-size:12px;color:#c5bddb;margin:10px 0 0}.layout{display:grid;grid-template-columns:minmax(0,690px) minmax(205px,1fr);gap:20px;align-items:start}.frame{padding:9px;border:1px solid #c5b8ee60;border-radius:24px;background:linear-gradient(155deg,#35427a,#1c1e43);box-shadow:0 32px 90px #0009,inset 0 1px #fff3}.hud{display:flex;justify-content:space-around;align-items:center;min-height:48px;gap:5px;font-size:10px;color:#c0b5da;letter-spacing:.11em;font-weight:900}.hud b{display:block;color:#fff;text-align:center;font-size:19px;letter-spacing:0}.hud .next b{color:#bdf8ff}.stage{position:relative;overflow:hidden;border-radius:17px;background:#10182e}.stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:pointer}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:15px;background:linear-gradient(145deg,#111631ec,#21183de8);backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay-inner{max-width:330px;text-align:center}.overlay img{width:125px;height:125px;border:1px solid #d2bbff78;border-radius:18px;box-shadow:0 14px 44px #0009}.overlay h2{font-size:clamp(27px,5vw,42px);letter-spacing:-.06em;margin:16px 0 9px}.overlay p{font-size:12px;color:#d8d0e9;line-height:1.55;margin:0 0 19px}.primary{border:0;border-radius:12px;padding:12px 24px;color:#182343;background:linear-gradient(140deg,#e9b5ff,#89e6ff);font-size:12px;font-weight:900;box-shadow:0 8px 26px #a78bfa59}.side{padding:21px;border:1px solid #c6b9ed55;border-radius:20px;background:#252a55a8}.side h2{margin:0 0 15px;font-size:18px}.side p{font-size:12px;line-height:1.65;color:#c9c5df;margin:0 0 17px}.side p b{display:block;color:#f1d4ff;font-size:11px;letter-spacing:.08em}.controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 17px}.controls button{padding:9px 12px;background:#424677;color:#fff;border:1px solid #c7b9ed69;border-radius:10px;font-size:11px;font-weight:850}.controls button:hover,.controls button:focus-visible{border-color:#fff;outline-color:#fff}.tip{font-size:10px!important;color:#b4acce!important}.sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;overflow:hidden}@media(max-width:760px){.page{padding:14px 5px 30px}.intro{margin-bottom:11px}.intro h1{font-size:40px}.intro p:last-child{font-size:10px}.layout{display:flex;flex-direction:column;gap:12px}.frame,.side{width:100%}.frame{padding:5px;border-radius:16px}.stage{border-radius:11px}.hud{min-height:38px;font-size:8px}.hud b{font-size:15px}.side{padding:15px}.side h2{margin-bottom:9px}.side p{margin-bottom:9px}.controls{margin-bottom:10px}.overlay img{width:90px;height:90px}.overlay h2{font-size:27px}.overlay p{font-size:11px}}