:root{--cyan:#58e5f4;--gold:#ffd45c;--ink:#02090f;--panel:#06151e;--line:#285464}
*{box-sizing:border-box}
body{background:var(--ink);color:#edf8fb}
.visual-hero{padding:128px 0 84px;background:radial-gradient(circle at 20% 22%,#073446 0,transparent 34%),radial-gradient(circle at 86% 38%,#3b172f 0,transparent 31%),#020a10}
.visual-intro{max-width:1180px}
.visual-intro h1,.visual-close h2{max-width:940px;margin:18px 0 22px;font-size:clamp(54px,8vw,112px);line-height:.88;letter-spacing:-.065em}
.visual-intro h1 span,.visual-close h2 span{color:var(--cyan)}
.visual-intro>p:last-child{max-width:760px;color:#a8c1ca;font-size:clamp(18px,2vw,26px);line-height:1.55}
.perspective-stage{margin-top:62px}
.perspective-stage img{display:block;width:100%;height:auto;border:1px solid #32697b;border-radius:28px;background:#07121a;box-shadow:0 42px 110px #000c,0 0 80px #48dbef12}
.perspective-stage figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;color:#72a4b2;font:700 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em}
.visual-section{padding:110px 0;background-color:#031018;background-image:linear-gradient(#12303a55 1px,transparent 1px),linear-gradient(90deg,#12303a55 1px,transparent 1px);background-size:58px 58px}
.asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:54px}
.asset-card{min-width:0;padding:22px 22px 30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#071923e8,#030c12f7);box-shadow:0 26px 55px #0008}
.asset-frame{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle,#12303d 0,#051018 68%);overflow:hidden}
.asset-frame img{display:block;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 20px 16px #000a)}
.state-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.asset-card>p{margin:24px 0 7px;color:var(--cyan);font:800 12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.17em}
.asset-card h3{margin:0 0 9px;font-size:clamp(28px,3.2vw,46px);line-height:1}
.asset-card>span{display:block;color:#8fabb5;font-size:17px;line-height:1.55}
.heavy-card{--line:#765b2e}.gate-card{--line:#713855}.control-card{--line:#74622d}
.visual-close{padding:130px 0 150px;background:radial-gradient(circle at 75% 60%,#50203c 0,transparent 37%),#02090f}
.back-link{display:inline-flex;align-items:center;gap:22px;margin-top:20px;padding:20px 26px;border:1px solid #44cadd;border-radius:14px;color:#e9fbff;background:#09202a;text-decoration:none;font-weight:900;letter-spacing:.04em}
.back-link b{color:var(--cyan);font-size:22px}
@media(max-width:760px){.visual-hero{padding:96px 0 58px}.visual-intro h1,.visual-close h2{font-size:52px}.perspective-stage{margin-top:38px}.perspective-stage img{border-radius:16px}.perspective-stage figcaption{font-size:9px}.visual-section{padding:72px 0}.asset-grid{grid-template-columns:1fr;gap:16px;margin-top:34px}.asset-card{padding:14px 14px 24px;border-radius:18px}.state-pair{gap:8px}.asset-frame{border-radius:13px}.visual-close{padding:90px 0 110px}}
@media(max-width:420px){.visual-intro h1,.visual-close h2{font-size:43px}.perspective-stage{width:100%;padding:0 12px}.perspective-stage figcaption{padding:0 5px}.asset-card>span{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}