:root{color-scheme:dark;--accent:#f79867;--ink:#f1f8fa;--muted:#9db0bd;--line:rgba(162,215,231,.18)}
*{box-sizing:border-box}html{min-height:100%;background:#091320}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 24% 22%,#213c4b 0,transparent 36%),radial-gradient(circle at 88% 78%,#192840 0,transparent 38%),#091320;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #e8fbff;outline-offset:4px}
.ambient{position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(90deg,transparent 97%,#6fa2b3 98%),linear-gradient(0deg,transparent 97%,#6fa2b3 98%);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 65%)}
.topbar{position:relative;z-index:2;max-width:1500px;margin:auto;padding:24px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:13px;font-weight:950;font-size:22px;letter-spacing:-.06em}.brand small{display:block;margin-top:1px;font-size:9px;letter-spacing:.26em;font-weight:800;color:#8fb6c5}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;border:1px solid #5f8d9b;background:linear-gradient(135deg,#204557,#112e3d);color:#a7f9ed;font-size:24px}.text-link{font-size:12px;font-weight:800;letter-spacing:.07em;color:#b4d6e0}.text-link:hover{color:#fff}
.layout{position:relative;max-width:1500px;margin:auto;padding:10px clamp(20px,4vw,64px) 50px;display:grid;grid-template-columns:minmax(350px,1fr) minmax(445px,.94fr);gap:clamp(26px,4vw,70px);align-items:start}
.showroom{position:sticky;top:16px;min-height:min(790px,calc(100vh - 100px));border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#224253 0,#122638 43%,#0a1725 77%);box-shadow:inset 0 1px 0 #61899a50,0 28px 100px #02081088}.showroom:before{content:"";position:absolute;inset:16% 9% 11%;border-radius:50%;border:1px solid #85c4d52b;pointer-events:none}.showroom-head{position:absolute;z-index:2;inset:24px 24px auto;display:flex;justify-content:space-between;align-items:center}.eyebrow,.model-tag,.section-kicker,.roster-label{font-size:10px;letter-spacing:.23em;font-weight:900;color:#9cc7d4}.model-tag{color:var(--accent)}.canvas-wrap{position:absolute;inset:0 0 47px}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}.canvas-status{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:80%;text-align:center;font-size:12px;font-weight:900;letter-spacing:.14em;color:#d5edf2}.canvas-status[hidden]{display:none}.stage-floor{position:absolute;left:22%;right:22%;bottom:12%;height:8%;border-radius:50%;background:var(--accent);filter:blur(46px);opacity:.25;pointer-events:none}.view-controls{position:absolute;z-index:2;inset:auto 20px 14px;display:flex;align-items:center;justify-content:center;gap:16px}.view-controls span{color:#a8c1ca;font-size:10px;font-weight:800;letter-spacing:.14em}.view-controls button{border:1px solid var(--line);border-radius:11px;background:#203b4c;color:#d8f8fa;min-width:38px;height:34px;cursor:pointer}.view-controls button:hover{background:#34596b}
.details{padding:clamp(8px,2vw,24px) 0}.section-kicker{color:var(--accent);margin-bottom:13px}.details h1{font-size:clamp(45px,5vw,82px);letter-spacing:-.07em;line-height:.98;margin:0 0 16px}.hero-intro{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:#bfd0d8;max-width:610px;margin:0 0 22px;min-height:54px}.role-line{display:flex;justify-content:space-between;max-width:620px;border-top:1px solid var(--line);padding:13px 0 16px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.18em}.role-line span:last-child{color:#7f9baa}
.powers{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px}.power{display:flex;gap:12px;min-height:129px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#14293a9c}.power.super{border-color:color-mix(in srgb,var(--accent),transparent 65%);background:linear-gradient(145deg,color-mix(in srgb,var(--accent),transparent 87%),#14293ab8)}.power .key{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#0b1924;background:var(--accent);font-size:12px;font-weight:950}.power small{display:block;margin:1px 0 5px;color:#9cb9c4;font-size:9px;font-weight:850;letter-spacing:.16em}.power strong{display:block;font-size:15px;letter-spacing:-.02em}.power p{margin:5px 0 0;color:#adc0c9;font-size:12px;line-height:1.35}.charge-note{max-width:620px;margin:12px 0 18px;color:#8faab7;font-size:12px;line-height:1.5}.choose-link{max-width:620px;display:flex;align-items:center;justify-content:space-between;padding:17px 21px;border-radius:13px;color:#10212b;background:var(--accent);font-size:15px;font-weight:950;box-shadow:0 12px 34px color-mix(in srgb,var(--accent),transparent 75%)}.choose-link:hover{filter:brightness(1.12)}.choose-link span{font-size:23px;line-height:1}
.roster-label{display:flex;justify-content:space-between;gap:8px;margin:28px 0 13px}.roster-label span{color:#7897a7;font-size:9px;letter-spacing:.11em}.hero-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:620px}.hero-card{display:flex;align-items:center;gap:12px;width:100%;min-height:74px;padding:10px 13px;border:1px solid var(--line);border-radius:13px;background:#152939ba;color:#dcebf0;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.hero-card:hover{transform:translateY(-2px);border-color:var(--accent)}.hero-card.selected{border-color:var(--accent);background:linear-gradient(115deg,color-mix(in srgb,var(--accent),transparent 85%),#172e3f)}.hero-card-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--accent),transparent 82%);color:var(--accent);font-size:24px}.hero-card-copy{min-width:0}.hero-card-copy small{display:block;color:var(--accent);font-size:9px;letter-spacing:.15em;font-weight:900}.hero-card-copy strong{display:block;margin-top:2px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-card-index{margin-left:auto;align-self:flex-start;color:#607d8b;font-size:10px;font-weight:900}
@media(max-width:980px){.layout{grid-template-columns:minmax(0,1fr);gap:24px}.showroom{position:relative;top:auto;min-height:0;height:min(70vw,540px)}.details{padding:0}.hero-intro{min-height:0}.topbar{padding-bottom:14px}}@media(max-width:590px){.topbar{padding:16px}.brand{font-size:18px}.brand-mark{width:32px;height:32px}.text-link{font-size:10px}.layout{padding:4px 13px 38px;gap:18px}.showroom{height:410px;border-radius:18px}.showroom-head{inset:18px 16px auto}.details h1{font-size:44px}.hero-intro{font-size:14px;margin-bottom:15px}.powers{grid-template-columns:1fr 1fr}.power{min-height:128px;padding:11px;gap:8px}.power .key{width:25px;height:25px}.power strong{font-size:13px}.power p{font-size:11px}.roster-label span{display:none}.hero-picks{gap:7px}.hero-card{min-height:64px;gap:7px;padding:7px}.hero-card-icon{width:32px;height:38px;font-size:20px}.hero-card-copy strong{font-size:11px}.hero-card-index{display:none}.view-controls span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-card{transition:none}}