@font-face{font-family:Anton;src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Bangers;src:url(../fonts/bangers-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:400;src:url(../fonts/space-grotesk-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:500;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:700;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(../fonts/permanent-marker-latin-400-normal.woff2) format('woff2');font-display:swap}

:root{
  --paper:#EFE6D3; --paper2:#E6DBC4; --card:#F7F0E2; --ink:#16141A; --ink2:#4B4651;
  --red:#E2262E; --blue:#1E46C8; --yel:#F4C430; --cyan:#F3D58A;
  --ac:var(--red); --ac2:var(--blue); --line:var(--ink);
  --dot:rgba(22,20,26,.10);
  --dsp:Anton, Impact, "Arial Narrow", sans-serif; --cmx:Bangers, Impact, sans-serif;
  --body:"Space Grotesk", "Segoe UI", system-ui, sans-serif; --hand:"Permanent Marker", cursive;
  --pad:clamp(16px,5vw,72px); --ease:cubic-bezier(.2,.8,.2,1);
}
html[data-mode="armor"]{
  --paper:#0A0A0C; --paper2:#121116; --card:#141217; --ink:#F3E9D6; --ink2:#AFA595;
  --red:#8E1520; --yel:#D4A84B; --ac:#D4A84B; --ac2:#8E1520; --line:#D4A84B; --dot:rgba(212,168,75,.06);
}
html[data-mode="storm"]{
  --paper:#0A0A0C; --paper2:#121116; --card:#141217; --ink:#F3E9D6; --ink2:#AFA595;
  --red:#145A6E; --yel:#7FD4FF; --ac:#7FD4FF; --ac2:#145A6E; --line:#7FD4FF; --dot:rgba(127,212,255,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--paper);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:20px 20px;color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip;transition:background-color .6s,color .6s}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p{margin:0}
kbd{font:700 12px var(--body);border:1.5px solid currentColor;border-radius:4px;padding:0 5px}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--ac2);outline-offset:3px}
@media (hover:hover) and (pointer:fine){body.fx-cursor,body.fx-cursor *{cursor:none!important}}
html[data-mode="web"] .armor-only, html[data-mode="armor"] .web-only{display:none!important}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:300;background:#16141A;color:#EFE6D3;display:grid;place-items:center;overflow:hidden}
.ld-thread{position:absolute;left:50%;top:0;width:2px;height:0;background:#EFE6D3}
.ld-spider{position:absolute;left:50%;top:0;width:76px;height:76px;margin-left:-38px;color:#E2262E;transform:translateY(-100px)}
.ld-num{font:400 clamp(110px,22vw,240px)/1 var(--dsp);color:#EFE6D3;letter-spacing:-.02em;margin-top:120px}
.ld-txt{position:absolute;bottom:12vh;font:400 22px var(--cmx);letter-spacing:.08em;color:#F4C430}

/* ---------- suit fx ---------- */
#suitFx{position:fixed;inset:0;z-index:280;pointer-events:none;visibility:hidden}
#suitFx .plate{position:absolute;width:50%;height:50%;background:#0B0A0D;border:3px solid #D4A84B}
.p1{left:0;top:0;transform:translate(-101%,-101%)}.p2{right:0;top:0;transform:translate(101%,-101%)}.p3{left:0;bottom:0;transform:translate(-101%,101%)}.p4{right:0;bottom:0;transform:translate(101%,101%)}
#suitFx.to-web .plate{background:#E2262E;border-color:#16141A;background-image:radial-gradient(rgba(0,0,0,.25) 2px,transparent 2.5px);background-size:12px 12px}
.sfx-core{position:absolute;left:50%;top:50%}
.sfx-core i,.sfx-core b{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%) scale(0)}
.sfx-core i{width:200px;height:200px;border:7px solid #F3D58A;box-shadow:0 0 50px #F3D58A,inset 0 0 30px #F3D58A}
.sfx-core i+i{width:130px;height:130px;border-width:3px;border-style:dashed}
.sfx-core b{width:60px;height:60px;background:#FFF4D8;box-shadow:0 0 70px 24px #F3D58A}
#suitFx.to-web .sfx-core i{border-color:#F7F0E2;box-shadow:none}#suitFx.to-web .sfx-core b{background:#F7F0E2;box-shadow:none}
.sfx-log{position:absolute;left:50%;top:calc(50% + 130px);transform:translateX(-50%);margin:0;font:700 14px/1.7 var(--body);color:#F3D58A;text-align:center;white-space:pre;min-height:7em}
#suitFx.to-web .sfx-log{color:#F7F0E2}

/* ---------- fx canvas ---------- */
#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:260;pointer-events:none}

/* ---------- scroll thread ---------- */
#thread{position:fixed;right:26px;top:0;height:100vh;width:30px;z-index:50;pointer-events:none}
.th-line{position:absolute;left:50%;top:0;width:2px;height:0;background:var(--ink)}
.th-spider{position:absolute;left:50%;top:0;width:30px;height:30px;margin:-4px 0 0 -15px;color:var(--red)}
html[data-mode="armor"] .th-line{background:linear-gradient(var(--red),var(--yel))}
html[data-mode="storm"] .th-line{background:linear-gradient(var(--red),var(--yel))}
html[data-mode="armor"] .th-spider{color:var(--yel);filter:drop-shadow(0 0 6px var(--cyan))}
html[data-mode="storm"] .th-spider{color:var(--yel);filter:drop-shadow(0 0 6px var(--cyan))}

/* ---------- header ---------- */
#bar{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;gap:26px;padding:16px var(--pad);transition:transform .4s var(--ease),background .4s,padding .3s}
#bar.sc{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);padding-block:10px;border-bottom:2.5px solid var(--line)}
#bar.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--red);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.brand-mark svg{position:absolute;inset:4px;width:28px;height:28px;margin:auto}
.bm-web{color:#F7F0E2;opacity:.55}.bm-spider{color:#16141A;width:24px!important;height:24px!important;transition:transform .5s var(--ease)}
.bm-core{color:#FFF4D8;opacity:0}
.brand:hover .bm-spider{transform:rotate(360deg) scale(1.15)}
html[data-mode="armor"] .brand-mark{background:#8E1520;border-color:var(--yel);box-shadow:0 0 14px rgba(212,168,75,.5)}
html[data-mode="storm"] .brand-mark{background:#145A6E;border-color:var(--yel);box-shadow:0 0 14px rgba(127,212,255,.5)}
html[data-mode="armor"] .bm-web,html[data-mode="armor"] .bm-spider{opacity:0}
html[data-mode="storm"] .bm-web,html[data-mode="storm"] .bm-spider{opacity:0}
html[data-mode="armor"] .bm-core{opacity:1;filter:drop-shadow(0 0 4px #F3D58A)}
html[data-mode="storm"] .bm-core{opacity:1;filter:drop-shadow(0 0 4px #BFF0FF)}
.brand-txt{font:400 30px/1 var(--cmx);letter-spacing:.06em}
.brand-txt b{color:var(--red);font-weight:400}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:700 13.5px var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:3px;background:var(--red);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a.on::after{right:0}
html[data-mode="armor"] .nav a::after{background:var(--yel)}
html[data-mode="storm"] .nav a::after{background:var(--yel)}
.hire{font:700 14px var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:var(--red);color:#fff;padding:12px 20px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.hire:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
html[data-mode="armor"] .hire{box-shadow:4px 4px 0 var(--yel);border-color:var(--yel)}
html[data-mode="storm"] .hire{box-shadow:4px 4px 0 var(--yel);border-color:var(--yel)}
.burger{display:none;width:44px;height:44px;border:2.5px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:6px;background:var(--card)}
.burger i{width:20px;height:2.5px;background:var(--ink);transition:.3s}
body.nav-open .burger i:first-child{transform:translateY(4px) rotate(45deg)}body.nav-open .burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
#mnav{position:fixed;inset:0;z-index:85;background:var(--red);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);clip-path:circle(0 at calc(100% - 44px) 38px);transition:clip-path .6s var(--ease)}
body.nav-open #mnav{clip-path:circle(150% at calc(100% - 44px) 38px)}
#mnav a{font:400 58px/1.08 var(--dsp);color:#F7F0E2;text-decoration:none;text-transform:uppercase;-webkit-text-stroke:2px #16141A}
#mnav a:nth-child(even){color:#F4C430}
html[data-mode="armor"] #mnav{background:#0A0A0C}
html[data-mode="storm"] #mnav{background:#0A0A0C}

/* ---------- shared ---------- */
section{position:relative}
.h-sec{font:400 clamp(52px,7vw,104px)/.92 var(--dsp);text-transform:uppercase;letter-spacing:-.01em}
.h-sec.big{font-size:clamp(70px,12vw,190px)}
.h-sec.light{color:#F7F0E2}
.kicker{font:400 22px var(--hand);color:var(--red);margin-bottom:8px}
.sec-head{padding:0 var(--pad);margin-bottom:60px}
.sec-head.center{text-align:center}
.hand{font:400 20px/1.35 var(--hand);color:var(--red)}
html[data-mode="armor"] .hand,html[data-mode="armor"] .kicker{color:var(--yel)}
html[data-mode="storm"] .hand,html[data-mode="storm"] .kicker{color:var(--yel)}
.kit{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.kit li{font:700 12.5px var(--body);letter-spacing:.03em;padding:4px 11px;border:2px solid var(--line);background:var(--card);border-radius:30px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:400 22px/1 var(--cmx);letter-spacing:.08em;padding:14px 24px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.btn.red{background:var(--red);color:#fff}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
html[data-mode="armor"] .btn{border-color:var(--yel);box-shadow:5px 5px 0 var(--yel)}
html[data-mode="storm"] .btn{border-color:var(--yel);box-shadow:5px 5px 0 var(--yel)}
html[data-mode="armor"] .btn.red{background:var(--red)}
html[data-mode="storm"] .btn.red{background:var(--red)}
.bubble{position:absolute;z-index:4;background:#fff;color:#16141A;border:3.5px solid #16141A;border-radius:28px;padding:12px 18px;font:400 22px/1.15 var(--cmx);letter-spacing:.04em;box-shadow:5px 5px 0 #16141A;max-width:300px}
.bubble::after{content:"";position:absolute;left:34px;bottom:-22px;border:12px solid transparent;border-top:16px solid #16141A}
.bubble::before{content:"";position:absolute;left:37px;bottom:-14px;border:9px solid transparent;border-top:12px solid #fff;z-index:1}
html[data-mode="armor"] .bubble{background:#0E0D11;color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(212,168,75,.35)}
html[data-mode="storm"] .bubble{background:#0E0D11;color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(127,212,255,.35)}
html[data-mode="armor"] .bubble::after{border-top-color:var(--cyan)}
html[data-mode="storm"] .bubble::after{border-top-color:var(--cyan)}html[data-mode="armor"] .bubble::before{border-top-color:#0E0D11}
html[data-mode="storm"] .bubble::before{border-top-color:#0E0D11}

/* ---------- hero ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 90px;overflow:hidden}
.issue{display:flex;gap:12px;align-items:center;font:700 13px var(--body);letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px;position:relative;z-index:3}
.issue b{background:var(--ink);color:var(--paper);padding:5px 10px;font-weight:700}
.name{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;font:400 clamp(90px,13vw,230px)/.86 var(--dsp);text-transform:uppercase;letter-spacing:-.005em}
.nm-top{display:block;padding:0 .04em}
.nm-fill{display:inline-block;color:transparent;background:url(../assets/art/name-web.webp) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:5px var(--ink);filter:drop-shadow(7px 7px 0 var(--ink))}
html[data-mode="armor"] .nm-fill{background-image:url(../assets/art/name-armor.webp);-webkit-text-stroke-color:var(--yel);filter:drop-shadow(7px 7px 0 #8E1520) drop-shadow(0 0 20px rgba(212,168,75,.25))}
html[data-mode="storm"] .nm-fill{background-image:url(../assets/art/name-storm.webp);-webkit-text-stroke-color:var(--yel);filter:drop-shadow(7px 7px 0 #145A6E) drop-shadow(0 0 20px rgba(127,212,255,.25))}
.nm-bot{position:relative;display:inline-block;color:var(--red);-webkit-text-stroke:5px var(--ink);text-shadow:10px 10px 0 var(--ink);margin-top:-.02em}
html[data-mode="armor"] .nm-bot{color:#8E1520;-webkit-text-stroke-color:var(--yel);text-shadow:10px 10px 0 var(--yel)}
html[data-mode="storm"] .nm-bot{color:#145A6E;-webkit-text-stroke-color:var(--yel);text-shadow:10px 10px 0 var(--yel)}
.tag-line{position:relative;z-index:3;margin-top:34px;font:500 clamp(19px,1.7vw,26px)/1.35 var(--body);max-width:30ch}
.tag-sub{position:relative;z-index:3;margin-top:8px;color:var(--ink2);max-width:52ch}
.hero-hero{position:absolute;right:.5vw;bottom:0;height:min(64vh,640px);z-index:2;pointer-events:none}
.hero-hero img{height:100%;width:auto;filter:drop-shadow(10px 10px 0 rgba(22,20,26,.18))}
.hb{right:62%;top:4%;width:260px;font-size:21px;text-align:left}
.hb::after{left:auto;right:30px;transform:rotate(-30deg)}.hb::before{left:auto;right:33px;transform:rotate(-30deg)}
.sticker{position:absolute;z-index:4;font:400 22px/1.05 var(--cmx);letter-spacing:.05em}
.st1{left:6vw;top:22vh;background:var(--yel);color:#16141A;padding:12px 16px;border:3px solid #16141A;box-shadow:5px 5px 0 #16141A;transform:rotate(-9deg)}
.st2{left:8vw;bottom:20vh;width:150px;height:128px;display:grid;place-items:center;color:#fff;font-size:36px;transform:rotate(-10deg);background:var(--red);clip-path:polygon(50% 0,61% 22%,86% 8%,79% 33%,100% 42%,80% 56%,94% 80%,66% 74%,58% 100%,44% 78%,18% 94%,22% 68%,0 58%,20% 44%,6% 18%,34% 26%);-webkit-text-stroke:1.5px #16141A}
.st3{left:5vw;top:44vh;font:400 22px var(--hand);color:var(--blue);transform:rotate(-6deg)}
html[data-mode="armor"] .st1{background:#8E1520;color:#F3E9D6;border-color:var(--yel);box-shadow:5px 5px 0 var(--yel)}
html[data-mode="storm"] .st1{background:#145A6E;color:#F3E9D6;border-color:var(--yel);box-shadow:5px 5px 0 var(--yel)}
html[data-mode="armor"] .st2{background:var(--yel);color:#0A0A0C}
html[data-mode="storm"] .st2{background:var(--yel);color:#0A0A0C}
html[data-mode="armor"] .st3{color:var(--cyan)}
html[data-mode="storm"] .st3{color:var(--cyan)}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 11px var(--body);letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{width:2px;height:34px;background:var(--ink);animation:cue 1.6s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{background:var(--red);color:#F7F0E2;border-block:4px solid var(--ink);transform:rotate(-2.2deg);margin:20px -30px 0;position:relative;z-index:6;overflow:hidden}
.marquee.m2{background:var(--ink);color:var(--paper);transform:rotate(1.6deg);margin:60px -30px}
.mq{display:flex;gap:28px;width:max-content;padding:14px 0;font:400 clamp(30px,3.6vw,52px)/1 var(--cmx);letter-spacing:.06em;white-space:nowrap}
.mq b{color:var(--yel);font-weight:400}
.m2 .mq b{color:var(--red)}
html[data-mode="armor"] .marquee{background:#8E1520;border-color:var(--yel)}
html[data-mode="storm"] .marquee{background:#145A6E;border-color:var(--yel)}html[data-mode="armor"] .marquee.m2{background:var(--yel);color:#0A0A0C}
html[data-mode="storm"] .marquee.m2{background:var(--yel);color:#0A0A0C}

/* ---------- origin ---------- */
#origin{background:#16141A;margin-top:-30px;padding-top:30px}
html[data-mode="armor"] #origin{background:#050507}
html[data-mode="storm"] #origin{background:#050507}
.or-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:80px var(--pad) 26px}
.or-head{display:flex;justify-content:space-between;align-items:end;max-width:1220px;width:100%;margin:0 auto}
.or-count{font:400 44px/1 var(--cmx);color:#F7F0E2}
.or-count b{color:var(--red);font-size:1.5em;font-weight:400}
html[data-mode="armor"] .or-count b{color:var(--yel)}
html[data-mode="storm"] .or-count b{color:var(--yel)}
.comic{position:relative;width:100%;max-width:1220px;margin:0 auto;aspect-ratio:16/8.6;max-height:calc(100vh - 190px)}
.panel{position:absolute;inset:0;margin:0;border:7px solid #F7F0E2;overflow:hidden;box-shadow:16px 16px 0 var(--red);background:#fff}
html[data-mode="armor"] .panel{border-color:var(--yel);box-shadow:16px 16px 0 #8E1520,0 0 60px rgba(212,168,75,.12)}
html[data-mode="storm"] .panel{border-color:var(--yel);box-shadow:16px 16px 0 #145A6E,0 0 60px rgba(127,212,255,.12)}
.panel:not(:first-child){clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.pa-bg{position:absolute;inset:0}
.pa-sun{background:repeating-conic-gradient(from 0deg at 62% 60%,#F4C430 0 8deg,#F7D35C 8deg 16deg)}
.pa-sun::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(226,38,46,.35) 2.2px,transparent 2.6px) 0 0/12px 12px}
.pa-blue{background:#1E46C8;background-image:radial-gradient(rgba(255,255,255,.18) 2.6px,transparent 3px);background-size:14px 14px}
.pa-red{background:#E2262E;background-image:radial-gradient(rgba(0,0,0,.22) 2.4px,transparent 2.8px);background-size:12px 12px}
.pa-yellow{background:repeating-conic-gradient(from 10deg at 30% 70%,#F4C430 0 7deg,#FFE07A 7deg 14deg)}
.pa-hud{background:#06070A;background-image:linear-gradient(rgba(212,168,75,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,75,.09) 1px,transparent 1px);background-size:44px 44px}
.pa-hud::after{content:"";position:absolute;left:50%;top:58%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(rgba(212,168,75,.35),transparent 60%)}
html[data-mode="armor"] .pa-sun{background:repeating-conic-gradient(from 0deg at 62% 60%,#2A0608 0 8deg,#3A0A0E 8deg 16deg)}
html[data-mode="storm"] .pa-sun{background:repeating-conic-gradient(from 0deg at 62% 60%,#2A0608 0 8deg,#3A0A0E 8deg 16deg)}
html[data-mode="armor"] .pa-blue{background-color:#0B1A3A}
html[data-mode="storm"] .pa-blue{background-color:#0B1A3A}
html[data-mode="armor"] .pa-red{background-color:#4A070C}
html[data-mode="storm"] .pa-red{background-color:#4A070C}
html[data-mode="armor"] .pa-yellow{background:repeating-conic-gradient(from 10deg at 30% 70%,#2B2007 0 7deg,#3B2C0A 7deg 14deg)}
html[data-mode="storm"] .pa-yellow{background:repeating-conic-gradient(from 10deg at 30% 70%,#2B2007 0 7deg,#3B2C0A 7deg 14deg)}
.pa-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%}
.pa-art{position:absolute;inset:0;width:100%;height:100%}
.svg-code{font:400 54px Anton,Impact;fill:#F7F0E2}
.pa-yash{position:absolute;bottom:-2%;left:var(--x);height:var(--h);width:auto;transform:translateX(-50%);filter:drop-shadow(8px 8px 0 rgba(0,0,0,.35));z-index:2}
.pa-yash.small{filter:drop-shadow(6px 6px 0 rgba(0,0,0,.4))}
.pb{left:var(--bx);top:var(--by)}
.onom{position:absolute;z-index:3;left:var(--ox);top:var(--oy);transform:translate(-50%,-50%) rotate(var(--r));font:400 clamp(40px,5vw,78px)/1 var(--cmx);letter-spacing:.04em;color:#F4C430;-webkit-text-stroke:3px #16141A;text-shadow:5px 5px 0 #16141A;white-space:nowrap}
.onom.big{font-size:clamp(56px,7.4vw,118px);color:#F7F0E2}
html[data-mode="armor"] .onom{color:var(--yel);text-shadow:5px 5px 0 #8E1520}
html[data-mode="storm"] .onom{color:var(--yel);text-shadow:5px 5px 0 #145A6E}
.cap{position:absolute;z-index:5;left:22px;bottom:22px;max-width:min(470px,62%);background:#FFF6DC;color:#16141A;border:3.5px solid #16141A;box-shadow:6px 6px 0 #16141A;padding:14px 18px;font:500 16.5px/1.45 var(--body);transform:rotate(-1deg)}
.cap.right{left:auto;right:22px;transform:rotate(1deg)}
.cap.top{bottom:auto;top:22px}
.cap-tag{display:inline-block;background:#F4C430;border:2px solid #16141A;font:400 15px/1 var(--cmx);letter-spacing:.08em;padding:4px 8px 3px;margin-bottom:8px;margin-right:6px}
.cap-tag+span{display:block}
html[data-mode="armor"] .cap{background:#0E0D11;color:#F3E9D6;border-color:var(--yel);box-shadow:6px 6px 0 #8E1520}
html[data-mode="storm"] .cap{background:#0E0D11;color:#F3E9D6;border-color:var(--yel);box-shadow:6px 6px 0 #145A6E}
html[data-mode="armor"] .cap-tag{background:#8E1520;color:#F3E9D6;border-color:var(--yel)}
html[data-mode="storm"] .cap-tag{background:#145A6E;color:#F3E9D6;border-color:var(--yel)}

/* ---------- manifesto ---------- */
#manifesto{padding:24vh var(--pad);text-align:center}
.mf{font:400 clamp(52px,10vw,170px)/.94 var(--dsp);text-transform:uppercase}
.mf span{display:inline-block;opacity:.1}
.mf .r{color:var(--red)}.mf .b{color:var(--blue)}
html[data-mode="armor"] .mf .b{color:var(--yel)}
html[data-mode="storm"] .mf .b{color:var(--yel)}
.mf-sign{margin-top:28px;font:400 clamp(20px,2vw,28px) var(--hand);color:var(--ink2)}

/* ---------- powers ---------- */
#powers{background:var(--paper2);border-block:4px solid var(--line);overflow:hidden}
.pw-pin{height:100vh;display:flex;align-items:center;gap:6vw;padding:90px 0 40px var(--pad)}
.pw-intro{flex:0 0 auto}.pw-intro .hand{margin-top:16px}
.pw-track{display:flex;gap:46px;padding-right:4vw;will-change:transform}
.power{flex:0 0 clamp(300px,30vw,420px);background:var(--card);border:3.5px solid var(--line);box-shadow:12px 12px 0 var(--line);padding:22px 24px 26px;transform:rotate(var(--t));position:relative}
.pw-no{position:absolute;left:-14px;top:-28px;font:400 58px/1 var(--cmx);color:var(--red);-webkit-text-stroke:2.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.pw-art{border:3px solid var(--line);aspect-ratio:300/180;display:grid;place-items:center;margin-bottom:16px}
.pw-art svg{width:100%;height:100%}
.a1{background:#FFE07A}.a2{background:#BFD0FF}.a3{background:#FFB3B0}.a4{background:#C9F2C9}.a5{background:#F7F0E2}
.pw-art{background-image:radial-gradient(rgba(0,0,0,.12) 1.8px,transparent 2.2px);background-size:10px 10px}
.power h3{font:400 42px/.95 var(--dsp);text-transform:uppercase;margin-bottom:8px}
.power p{color:var(--ink2)}
html[data-mode="armor"] .power{box-shadow:12px 12px 0 #8E1520}
html[data-mode="storm"] .power{box-shadow:12px 12px 0 #145A6E}
html[data-mode="armor"] .pw-no{color:var(--yel)}
html[data-mode="storm"] .pw-no{color:var(--yel)}
html[data-mode="armor"] .pw-art{filter:sepia(.4) hue-rotate(-20deg) saturate(1.3) brightness(.85)}
html[data-mode="storm"] .pw-art{filter:sepia(.4) hue-rotate(-20deg) saturate(1.3) brightness(.85)}

/* ---------- missions ---------- */
#missions{padding:150px 0 90px}
.ms-list{display:flex;flex-direction:column;gap:130px;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.ms{display:grid;grid-template-columns:1.6fr 1fr;gap:54px;align-items:center}
.ms.flip{grid-template-columns:1fr 1.6fr}
.ms.flip .ms-shot{order:2}
.ms-shot{position:relative;border:3.5px solid var(--line);box-shadow:16px 16px 0 var(--m);background:#101014;transform:rotate(-1deg)}
.ms.flip .ms-shot{transform:rotate(1deg)}
.browser{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--card);border-bottom:3px solid var(--line)}
.browser i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--red)}
.browser i:nth-child(2){background:var(--yel)}.browser i:nth-child(3){background:#2E8B3E}
.browser span{margin-left:10px;font:700 12px var(--body);color:var(--ink2);background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:2px 12px;flex:1;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-frames{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer}
.ms-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.05);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.ms-frames img.on{opacity:1;transform:none}
.ms.phone .ms-shot{background:linear-gradient(135deg,#DFF1DF,#B9DDBE)}
.ms.phone .ms-frames{aspect-ratio:16/11}
.ms.phone .ms-frames img{inset:4% auto auto 50%;width:auto;height:92%;transform:translateX(-50%) scale(.95);border-radius:20px;border:3px solid #16141A;box-shadow:10px 10px 0 rgba(0,0,0,.2);object-fit:contain}
.ms.phone .ms-frames img.on{transform:translateX(-50%)}
.ms-thumbs{display:flex;gap:8px;padding:10px 12px;background:var(--card);border-top:3px solid var(--line)}
.ms-thumbs button{flex:1;height:46px;border:2.5px solid var(--line);background-size:cover;background-position:top left;opacity:.55;transition:opacity .2s,transform .2s}
.ms-thumbs button.on{opacity:1;transform:translateY(-3px);box-shadow:3px 3px 0 var(--m)}
.ms.phone .ms-thumbs button{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#E6F3E6}
.stamp{position:absolute;left:-22px;top:-30px;font:400 46px/1 var(--cmx);color:var(--yel);-webkit-text-stroke:2.5px var(--ink);text-shadow:4px 4px 0 var(--ink);transform:rotate(-8deg);z-index:2}
.ms-tag{font:400 22px var(--hand);color:var(--red)}
html[data-mode="armor"] .ms-tag{color:var(--yel)}
html[data-mode="storm"] .ms-tag{color:var(--yel)}
.ms-body h3{font:400 clamp(56px,6vw,96px)/.9 var(--dsp);text-transform:uppercase;margin:6px 0 14px}
.ms-body>p:not(.ms-tag):not(.quip){max-width:48ch}
.quip{margin-top:14px;font:400 19px/1.3 var(--cmx);letter-spacing:.04em;background:var(--card);border:2.5px dashed var(--line);padding:10px 14px;transform:rotate(-1deg);display:inline-block}
.ms-cta{margin-top:26px}
.soon{display:inline-block;font:400 20px var(--cmx);letter-spacing:.06em;padding:12px 18px;border:3px dashed var(--line)}

/* ---------- readout ---------- */
#readout{padding:40px var(--pad) 130px}
.ro{max-width:1260px;margin:0 auto;background:var(--card);border:4px solid var(--line);box-shadow:14px 14px 0 var(--red);padding:clamp(22px,4vw,50px)}
html[data-mode="armor"] .ro{box-shadow:14px 14px 0 #8E1520,0 0 60px rgba(212,168,75,.08) inset;border-color:var(--yel)}
html[data-mode="storm"] .ro{box-shadow:14px 14px 0 #145A6E,0 0 60px rgba(127,212,255,.08) inset;border-color:var(--yel)}
.ro-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.ro-head p{font:400 20px var(--hand);color:var(--ink2)}
.ro-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--line);border-left:3px solid var(--line)}
.ro-c{border-right:3px solid var(--line);border-bottom:3px solid var(--line);padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.ro-c.w{grid-column:span 2;background:var(--yel);color:#16141A}
html[data-mode="armor"] .ro-c.w{background:#8E1520;color:#F3E9D6}
html[data-mode="storm"] .ro-c.w{background:#145A6E;color:#F3E9D6}
.ro-c .n{font:400 clamp(44px,4.6vw,72px)/1 var(--dsp);color:var(--red);font-variant-numeric:tabular-nums}
.ro-c.w .n{color:#16141A}html[data-mode="armor"] .ro-c.w .n{color:var(--yel)}
html[data-mode="storm"] .ro-c.w .n{color:var(--yel)}
.ro-c:nth-child(3n) .n{color:var(--blue)}html[data-mode="armor"] .ro-c:nth-child(3n) .n{color:var(--cyan)}
html[data-mode="storm"] .ro-c:nth-child(3n) .n{color:var(--cyan)}
.ro-c span{font-size:15px;color:inherit;opacity:.8}

/* ---------- journey ---------- */
#journey{padding:110px 0 120px}
.tl{position:relative;max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:repeating-linear-gradient(var(--line) 0 8px,transparent 8px 14px);opacity:.4}
.tl-fill{position:absolute;inset:0 0 auto;height:0;background:var(--red);display:block}
.tl-it{position:relative;display:flex;margin-bottom:56px}.tl-it.r{justify-content:flex-end}
.tl-dot{position:absolute;left:50%;top:20px;width:58px;height:58px;margin-left:-29px;display:grid;place-items:center;font-size:26px;background:var(--yel);border:3px solid var(--line);border-radius:50%;box-shadow:3px 3px 0 var(--line);z-index:2}
.tl-card{width:calc(50% - 60px);background:var(--card);border:3.5px solid var(--line);box-shadow:9px 9px 0 var(--line);padding:22px 24px}
html[data-mode="armor"] .tl-card{box-shadow:9px 9px 0 #8E1520}
html[data-mode="storm"] .tl-card{box-shadow:9px 9px 0 #145A6E}
.tl-it.l .tl-card{text-align:right}.tl-it.l .kit{justify-content:flex-end}
.tl-when{font:700 12.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
html[data-mode="armor"] .tl-when{color:var(--yel)}
html[data-mode="storm"] .tl-when{color:var(--yel)}
.tl-card h3{font:400 36px/1 var(--dsp);text-transform:uppercase;margin:6px 0 4px}
.tl-where{font:400 18px var(--hand);color:var(--blue);margin-bottom:8px}
html[data-mode="armor"] .tl-where{color:var(--cyan)}
html[data-mode="storm"] .tl-where{color:var(--cyan)}
.tl-card>p:last-child,.tl-card>p:nth-of-type(3){color:var(--ink2)}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1260px;margin:70px auto 0;padding:0 var(--pad)}
.bd{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:20px;background:var(--card);border:3px solid var(--line);box-shadow:6px 6px 0 var(--line);transition:transform .2s,box-shadow .2s}
a.bd:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--red)}
.bd b{font:400 26px/1 var(--dsp);text-transform:uppercase;font-weight:400}
.bd-org{font:400 17px var(--cmx);letter-spacing:.06em;color:var(--red)}
.bd span:last-child{font-size:14px;color:var(--ink2)}
html[data-mode="armor"] .bd{box-shadow:6px 6px 0 #8E1520}
html[data-mode="storm"] .bd{box-shadow:6px 6px 0 #145A6E}html[data-mode="armor"] .bd-org{color:var(--yel)}
html[data-mode="storm"] .bd-org{color:var(--yel)}

/* ---------- scrapbook ---------- */
#scrapbook{padding:110px 0 60px}
.sb{position:relative;max-width:1300px;height:820px;margin:0 auto}
.pol{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;background:#FBF7EE;padding:12px 12px 16px;border:2px solid #16141A;box-shadow:8px 8px 0 rgba(22,20,26,.85);transform:rotate(var(--r));touch-action:none;user-select:none;cursor:grab}
.pol::before{content:"";position:absolute;left:50%;top:-16px;width:100px;height:28px;margin-left:-50px;background:rgba(244,196,48,.8);transform:rotate(-3deg);border:1px solid rgba(0,0,0,.12)}
.pol img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border:2px solid #16141A;pointer-events:none;background:#EFE6D3}


.pol figcaption{font:400 18px/1.25 var(--hand);color:#16141A;margin-top:10px;text-align:center}
.note{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));width:250px;padding:20px;background:#FFF6DC;border:2px solid #16141A;box-shadow:6px 6px 0 #16141A;font:400 20px/1.3 var(--hand);color:#16141A;cursor:grab;touch-action:none;user-select:none}
.note.y{background:#F4C430}
.stamp-b{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));border:5px solid var(--red);color:var(--red);font:400 26px/1.05 var(--cmx);letter-spacing:.06em;padding:12px 16px;text-align:center;border-radius:10px;cursor:grab;touch-action:none;user-select:none;background:color-mix(in srgb,var(--paper) 70%,transparent)}
html[data-mode="armor"] .stamp-b{border-color:var(--yel);color:var(--yel)}
html[data-mode="storm"] .stamp-b{border-color:var(--yel);color:var(--yel)}
.dragging{cursor:grabbing!important;z-index:20}

/* ---------- contact ---------- */
#contact{background:#16141A;color:#F7F0E2;text-align:center;padding:170px var(--pad) 120px;overflow:hidden}
html[data-mode="armor"] #contact{background:#050507;border-top:4px solid var(--yel)}
html[data-mode="storm"] #contact{background:#050507;border-top:4px solid var(--yel)}
#ctWeb{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.ct-t{position:relative;display:flex;flex-direction:column;font:400 clamp(80px,14vw,230px)/.84 var(--dsp);text-transform:uppercase}
.ct-t .o{color:transparent;-webkit-text-stroke:3px #F7F0E2}
html[data-mode="armor"] .ct-t span:first-child{color:var(--yel)}
html[data-mode="storm"] .ct-t span:first-child{color:var(--yel)}html[data-mode="armor"] .ct-t .o{-webkit-text-stroke-color:#E2262E}
html[data-mode="storm"] .ct-t .o{-webkit-text-stroke-color:#E2262E}
.btn-big{position:relative;display:inline-block;margin-top:48px;text-decoration:none;font:400 clamp(26px,3vw,40px)/1 var(--cmx);letter-spacing:.08em;background:var(--red);color:#fff;padding:20px 38px;border:3px solid #F7F0E2;box-shadow:8px 8px 0 #F7F0E2;transition:transform .2s,box-shadow .2s}
.btn-big:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #F7F0E2}
html[data-mode="armor"] .btn-big{background:var(--yel);color:#0A0A0C;border-color:var(--yel);box-shadow:8px 8px 0 #8E1520}
html[data-mode="storm"] .btn-big{background:var(--yel);color:#0A0A0C;border-color:var(--yel);box-shadow:8px 8px 0 #145A6E}
.ct-l{position:relative;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 36px;padding:0;margin:48px 0 0}
.ct-l a{text-decoration:none;font:700 14px var(--body);letter-spacing:.16em;text-transform:uppercase;border-bottom:2.5px solid var(--red);padding-bottom:3px;word-break:break-all}
.ct-l li:last-child a{text-transform:none;letter-spacing:.02em}
html[data-mode="armor"] .ct-l a{border-color:var(--yel)}
html[data-mode="storm"] .ct-l a{border-color:var(--yel)}
.ct-h{position:relative;margin-top:90px;color:var(--yel)}
.suit-btn{position:relative;margin-top:16px;display:inline-flex;align-items:center;gap:16px;padding:18px 34px 18px 22px;border-radius:60px;background:var(--yel);color:#16141A;border:3px solid #F7F0E2;box-shadow:0 8px 0 var(--red),0 0 60px rgba(244,196,48,.4);font:400 clamp(26px,3vw,40px)/1 var(--cmx);letter-spacing:.06em;transition:transform .2s,box-shadow .2s}
.suit-btn:hover{transform:translateY(-4px);box-shadow:0 12px 0 var(--red),0 0 80px rgba(244,196,48,.6)}
.suit-btn .core{width:32px;height:32px;border-radius:50%;background:radial-gradient(#FFF4D8 30%,#F3D58A 60%,#2a7d93);box-shadow:0 0 18px #F3D58A;border:2.5px solid #16141A}
html[data-mode="armor"] .suit-btn{background:#E2262E;color:#F7F0E2;box-shadow:0 8px 0 #1E46C8}
html[data-mode="storm"] .suit-btn{background:#E2262E;color:#F7F0E2;box-shadow:0 8px 0 #1E46C8}
html[data-mode="armor"] .suit-btn .core{background:#16141A;box-shadow:none}
html[data-mode="storm"] .suit-btn .core{background:#16141A;box-shadow:none}
.suit-k{position:relative;margin-top:14px;font:700 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#AFA595}
#foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:22px var(--pad) 24px max(var(--pad),300px);background:#16141A;color:#AFA595;font-size:14px;border-top:1px solid #2C2932}
html[data-mode="armor"] #foot{background:#050507}
html[data-mode="storm"] #foot{background:#050507}

/* ---------- dock ---------- */
.dock-pill{position:fixed;left:24px;bottom:24px;z-index:120;display:flex;align-items:center;gap:10px;height:54px;padding:0 22px 0 14px;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:40px;box-shadow:5px 5px 0 var(--ink);font:400 21px/1 var(--cmx);letter-spacing:.06em;transition:transform .2s}
.dock-pill:hover{transform:translateY(-3px)}
.dp-ico{width:30px;height:30px;color:#16141A;background:#F7F0E2;border-radius:50%;padding:3px}
html[data-mode="armor"] .dock-pill{background:var(--yel);color:#0A0A0C;border-color:var(--yel);box-shadow:5px 5px 0 #8E1520}
html[data-mode="storm"] .dock-pill{background:var(--yel);color:#0A0A0C;border-color:var(--yel);box-shadow:5px 5px 0 #145A6E}
.eq{display:flex;gap:2.5px;align-items:end;height:16px}.eq i{width:3.5px;height:30%;background:currentColor}
body.playing .eq i{animation:eq .7s ease-in-out infinite alternate}.eq i:nth-child(2){animation-delay:-.3s!important}.eq i:nth-child(3){animation-delay:-.5s!important}
@keyframes eq{from{height:20%}to{height:100%}}
.dock-bot{position:fixed;right:24px;bottom:24px;z-index:120;width:68px;height:68px;border-radius:50%;background:var(--red);border:3.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;place-items:center;transition:transform .25s}
.dock-bot svg{width:44px;height:44px;color:#F7F0E2}
.dock-bot:hover{transform:rotate(-12deg) scale(1.06)}
.dock-bot .ping{position:absolute;right:-2px;top:-2px;width:16px;height:16px;border-radius:50%;background:var(--yel);border:2.5px solid var(--ink)}
.dock-bot .ping::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--yel);animation:ping 1.6s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
html[data-mode="armor"] .dock-bot{background:var(--yel);border-color:var(--yel);box-shadow:0 0 24px rgba(212,168,75,.4)}
html[data-mode="storm"] .dock-bot{background:var(--yel);border-color:var(--yel);box-shadow:0 0 24px rgba(127,212,255,.4)}
html[data-mode="armor"] .dock-bot svg{color:#0A0A0C}
html[data-mode="storm"] .dock-bot svg{color:#0A0A0C}
.peek{position:fixed;right:104px;bottom:40px;z-index:120;background:#fff;color:#16141A;border:3px solid #16141A;box-shadow:5px 5px 0 #16141A;padding:10px 14px;border-radius:18px 18px 4px 18px;font:400 19px/1.2 var(--cmx);letter-spacing:.04em;max-width:240px;cursor:pointer}
html[data-mode="armor"] .peek{background:#0E0D11;color:var(--cyan);border-color:var(--cyan)}
html[data-mode="storm"] .peek{background:#0E0D11;color:var(--cyan);border-color:var(--cyan)}

/* ---------- walkman ---------- */
#walk{position:fixed;left:24px;bottom:94px;z-index:130;width:340px;max-height:calc(100svh - 120px);overflow:auto;background:#121116;color:#F3E9D6;border:3px solid #16141A;box-shadow:8px 8px 0 var(--red);display:flex;flex-direction:column}
#walk.mini{left:-9999px}
html[data-mode="armor"] #walk{border-color:var(--yel);box-shadow:8px 8px 0 #8E1520}
html[data-mode="storm"] #walk{border-color:var(--yel);box-shadow:8px 8px 0 #145A6E}
.wk-h{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#000;font:400 22px var(--cmx);letter-spacing:.06em;color:var(--yel)}
.wk-h svg{width:22px;height:22px;color:#F3E9D6}
.wk-x{margin-left:auto;font-size:26px;color:#F3E9D6;width:32px;height:32px}
.wk-screen{position:relative;margin:12px;border:3px solid var(--red);background:#000;aspect-ratio:16/10}
html[data-mode="armor"] .wk-screen{border-color:var(--yel)}
html[data-mode="storm"] .wk-screen{border-color:var(--yel)}
.wk-screen iframe,#ytPlayer{position:absolute;inset:0;width:100%;height:100%}
.wk-badge{position:absolute;right:8px;top:8px;background:var(--yel);color:#16141A;font:400 13px var(--cmx);letter-spacing:.06em;padding:2px 6px;pointer-events:none}
.wk-now{text-align:center;padding:0 14px}
.wk-now b{display:block;font:400 30px/1.05 var(--dsp);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#F3E9D6;-webkit-text-stroke:0}
.wk-now span{font-size:13.5px;color:var(--yel)}
.wk-prog{display:flex;align-items:center;gap:8px;padding:12px 14px 0;font:700 12px var(--body)}
.wk-prog input,.vol input{flex:1;accent-color:var(--red)}
.wk-ctl{display:flex;align-items:center;gap:10px;padding:12px 14px}
.wk-ctl button{width:42px;height:42px;border-radius:50%;background:#26232B;color:#F3E9D6;font-size:16px}
.wk-ctl .pp{width:54px;height:54px;background:var(--red);font-size:20px}
html[data-mode="armor"] .wk-ctl .pp{background:var(--yel);color:#0A0A0C}
html[data-mode="storm"] .wk-ctl .pp{background:var(--yel);color:#0A0A0C}
.vol{display:flex;align-items:center;gap:6px;flex:1;font-size:14px}
.wk-pl{margin:6px 14px 6px;padding-top:10px;border-top:2px dashed #3A3640;font:400 18px var(--cmx);letter-spacing:.06em;color:var(--yel)}
#wkList{list-style:none;margin:0;padding:0 10px 12px;counter-reset:t}
#wkList li{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;background:#1C1A21;border:1.5px solid #2E2A34;cursor:pointer;counter-increment:t}
#wkList li::before{content:counter(t,decimal-leading-zero);font:400 18px var(--cmx);color:var(--yel);width:22px}
#wkList li div{min-width:0;display:flex;flex-direction:column;line-height:1.25}
#wkList b{font:700 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wkList span{font-size:12px;color:#AFA595;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wkList li.on{background:var(--red);border-color:#F3E9D6}
#wkList li.on span{color:#FBE3E3}
html[data-mode="armor"] #wkList li.on{background:#8E1520;border-color:var(--yel)}
html[data-mode="storm"] #wkList li.on{background:#145A6E;border-color:var(--yel)}

/* ---------- bot ---------- */
#bot{position:fixed;right:24px;bottom:106px;z-index:130;width:380px;height:min(560px,calc(100svh - 140px));display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:3.5px solid var(--ink);box-shadow:9px 9px 0 var(--ink)}
html[data-mode="armor"] #bot{background:#0E0D11;border-color:var(--yel);box-shadow:9px 9px 0 #8E1520}
html[data-mode="storm"] #bot{background:#0E0D11;border-color:var(--yel);box-shadow:9px 9px 0 #145A6E}
.bot-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--red);color:#fff;border-bottom:3px solid var(--ink)}
.bot-h b{display:block;font:400 26px/1 var(--cmx);letter-spacing:.08em}
.bot-h span{font:700 11px var(--body);letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.bot-h button{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;font-size:22px;line-height:1;color:#fff}
html[data-mode="armor"] .bot-h{background:#8E1520;border-color:var(--yel)}
html[data-mode="storm"] .bot-h{background:#145A6E;border-color:var(--yel)}
.bot-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:16px 16px}
.msg{max-width:86%;padding:11px 14px;border:2.5px solid var(--ink);font-size:14.5px;line-height:1.45;box-shadow:4px 4px 0 var(--ink);white-space:pre-line}
.msg.b{background:#fff;color:#16141A;align-self:flex-start;border-radius:4px 16px 16px 16px}
.msg.u{background:var(--red);color:#fff;align-self:flex-end;border-radius:16px 4px 16px 16px}
html[data-mode="armor"] .msg{border-color:var(--yel);box-shadow:4px 4px 0 #8E1520}
html[data-mode="storm"] .msg{border-color:var(--yel);box-shadow:4px 4px 0 #145A6E}
html[data-mode="armor"] .msg.b{background:#18161C;color:#F3E9D6}
html[data-mode="storm"] .msg.b{background:#18161C;color:#F3E9D6}
.msg .go{display:inline-block;margin:8px 6px 0 0;font:700 12px var(--body);letter-spacing:.06em;padding:4px 10px;border:2px solid currentColor;border-radius:20px;text-decoration:none;cursor:pointer;background:none;color:inherit}
.typing{display:inline-flex;gap:5px;align-items:center}
.typing i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:bob 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-5px);opacity:.4}}
.bot-chips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;border-top:2px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
.bot-chips button{font:700 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border:2px solid var(--ink);border-radius:20px;background:var(--card)}
.bot-chips button:hover{background:var(--ink);color:var(--paper)}
html[data-mode="armor"] .bot-chips button{border-color:var(--yel)}
html[data-mode="storm"] .bot-chips button{border-color:var(--yel)}
.bot-in{display:flex;gap:8px;padding:12px;border-top:3px solid var(--ink)}
.bot-in input{flex:1;border:2.5px solid var(--ink);border-radius:30px;padding:10px 16px;font:500 14px var(--body);background:var(--paper);color:var(--ink);outline:none}
.bot-in button{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;border:2.5px solid var(--ink);font-size:17px}
html[data-mode="armor"] .bot-in{border-color:var(--yel)}
html[data-mode="storm"] .bot-in{border-color:var(--yel)}

#toast{position:fixed;left:50%;top:84px;z-index:200;transform:translate(-50%,-20px);opacity:0;background:var(--ink);color:var(--paper);font:400 20px var(--cmx);letter-spacing:.06em;padding:10px 18px;border:3px solid var(--red);transition:.35s var(--ease);pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.nav{display:none}.burger{display:flex}.badges{grid-template-columns:repeat(2,1fr)}.ro-grid{grid-template-columns:repeat(2,1fr)}.hero-hero{opacity:.35}}
@media (max-width:820px){
  body{font-size:16px}
  .hire{padding:9px 12px;font-size:12px}
  .brand-txt{font-size:26px}
  #thread{display:none}
  .hero-hero{right:-40px;height:52vh;opacity:.28}.hb{display:none}
  .st1{left:4vw;top:15vh;font-size:16px;padding:8px 10px}.st2{left:auto;right:4vw;top:14vh;bottom:auto;width:100px;height:86px;font-size:24px}.st3{display:none}
  .or-pin{height:auto;padding:80px var(--pad)}
  .comic{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;gap:40px}
  .panel{position:relative;inset:auto;clip-path:none!important;aspect-ratio:4/5;box-shadow:9px 9px 0 var(--red)}
  .cap,.cap.right{left:10px;right:10px;bottom:10px;top:auto;max-width:none;font-size:14.5px;transform:none}
  .onom{font-size:40px}.onom.big{font-size:54px}
  .bubble{font-size:17px;max-width:200px}
  .pw-pin{height:auto;flex-direction:column;align-items:stretch;padding:80px var(--pad)}
  .pw-track{flex-direction:column;padding:0;transform:none!important;gap:50px}
  .power{flex:none}
  .ms,.ms.flip{grid-template-columns:1fr;gap:34px}.ms.flip .ms-shot{order:0}
  .ms-list{gap:90px}
  .tl-line{left:36px}.tl-dot{left:36px}.tl-it,.tl-it.r{justify-content:flex-end}
  .tl-card,.tl-it.l .tl-card{width:calc(100% - 56px);text-align:left}.tl-it.l .kit{justify-content:flex-start}
  .tl{padding:0 14px}
  .sb{height:auto;display:flex;flex-direction:column;align-items:center;gap:30px;padding:0 var(--pad)}
  .pol,.note,.stamp-b{position:relative;left:auto;top:auto;width:min(92%,340px)}
  .dock-pill{left:12px;bottom:12px;height:48px;padding:0 14px 0 10px;font-size:0}.dock-pill .eq{font-size:16px}
  .dock-bot{right:12px;bottom:12px;width:58px;height:58px}
  .peek{right:80px;bottom:22px;font-size:16px}
  #walk{left:10px;right:10px;width:auto;bottom:70px}
  #bot{left:10px;right:10px;width:auto;bottom:80px}
  #foot{padding:22px var(--pad) 84px;justify-content:center;text-align:center}
}
@media (max-width:520px){.badges,.ro-grid{grid-template-columns:1fr}.ro-c.w{grid-column:span 1}.name{font-size:23vw}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
#walk[hidden],#bot[hidden],.peek[hidden]{display:none!important}
.panel{isolation:isolate}
.panel[data-i="0"]{z-index:1}.panel[data-i="1"]{z-index:2}.panel[data-i="2"]{z-index:3}.panel[data-i="3"]{z-index:4}.panel[data-i="4"]{z-index:5}

/* ---------- mascot + drone (original art) ---------- */
.mascot-svg,.drone-svg,.hh-m{display:block;aspect-ratio:300/340;width:auto;overflow:visible}
.pa-yash{filter:drop-shadow(8px 8px 0 rgba(0,0,0,.3))}
svg.pa-yash{bottom:2%}
.mascot-svg{animation:bob 2.6s ease-in-out infinite}
.mascot-svg .lg{animation:wig 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0% 0%}
.mascot-svg .r1,.mascot-svg .r3,.mascot-svg .l2,.mascot-svg .l4{animation-delay:-.6s}
.mascot-svg .m-eyes{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:center}
.drone-svg{animation:hover 2.2s ease-in-out infinite}
.drone-svg .d-core{animation:spin 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
.drone-svg .d-flame{animation:flame .18s steps(2) infinite;transform-box:fill-box;transform-origin:top}
.drone-svg .d-visor{animation:visor 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes wig{to{transform:rotate(8deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes hover{50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flame{50%{transform:scaleY(.7);opacity:.6}}
@keyframes visor{50%{opacity:.4}}
.hero-hero{display:flex;flex-direction:column;align-items:center;right:5vw;height:min(62vh,600px);transform-origin:50% 0}
html[data-mode="web"] .hero-hero{animation:swing 4s ease-in-out infinite;top:0;bottom:auto}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hh-thread{display:block;width:3px;flex:1;background:var(--ink)}
.hh-m{height:300px;flex:none;filter:drop-shadow(8px 8px 0 rgba(22,20,26,.2))}
html[data-mode="armor"] .hero-hero{top:auto;bottom:12vh;height:auto}
html[data-mode="storm"] .hero-hero{top:auto;bottom:12vh;height:auto}
html[data-mode="armor"] .hh-m{height:320px;filter:drop-shadow(0 0 30px rgba(212,168,75,.45))}
html[data-mode="storm"] .hh-m{height:320px;filter:drop-shadow(0 0 30px rgba(127,212,255,.45))}
.hb{right:auto;left:-250px;top:auto;bottom:220px}
html[data-mode="armor"] .hb{bottom:300px}
html[data-mode="storm"] .hb{bottom:300px}
.pol-art{aspect-ratio:3/4;border:2px solid #16141A;display:grid;place-items:center;background:#E2262E radial-gradient(rgba(0,0,0,.2) 2px,transparent 2.4px) 0 0/10px 10px}
.pol-art svg{width:80%;height:auto;aspect-ratio:300/340}
html[data-mode="armor"] .pol-art{background:#0A0A0C}
html[data-mode="storm"] .pol-art{background:#0A0A0C}
@media (max-width:820px){.hero-hero{opacity:.3;right:-30px}.hh-m{height:200px}}
.spider-art{aspect-ratio:1;height:260px!important;filter:drop-shadow(10px 14px 6px rgba(22,20,26,.25))}
.spider-art .sa-legs{animation:legs 1.6s ease-in-out infinite alternate;transform-origin:center}
@keyframes legs{to{transform:scaleX(1.06) scaleY(.96)}}
.hero-hero .hh-thread{width:2px;background:linear-gradient(var(--ink),rgba(22,20,26,.6))}
html[data-mode="armor"] .pa-art{filter:saturate(.9) hue-rotate(-12deg) brightness(.9)}
html[data-mode="storm"] .pa-art{filter:saturate(.9) hue-rotate(-12deg) brightness(.9)}
html[data-mode="armor"] .panel[data-i="4"] .pa-art{filter:hue-rotate(180deg) saturate(1.2) brightness(.8)}
html[data-mode="storm"] .panel[data-i="4"] .pa-art{filter:hue-rotate(180deg) saturate(1.2) brightness(.8)}
.panel .pb{max-width:330px}
/* ---- v3 tweaks ---- */
.power.thats{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--red);color:#F7F0E2;min-height:440px}
.power.thats .tt1,.power.thats .tt2{font:400 clamp(80px,8vw,130px)/.85 var(--dsp);-webkit-text-stroke:3px #16141A;text-shadow:7px 7px 0 #16141A}
.power.thats .tt2{color:var(--yel)}
.power.thats .tt3{margin-top:18px;font:400 20px/1.3 var(--hand);color:#F7F0E2}
html[data-mode="armor"] .power.thats{background:#8E1520}
html[data-mode="storm"] .power.thats{background:#145A6E}
#badges{padding:60px 0 120px}
#badges .badges{margin-top:0}
.bd{position:relative;padding-top:58px}
.bd::before{content:"★";position:absolute;left:18px;top:14px;width:34px;height:34px;display:grid;place-items:center;background:var(--yel);border:2.5px solid var(--line);border-radius:50%;font-size:18px;color:#16141A}
.pol.phone img{aspect-ratio:9/15;object-fit:cover;object-position:top}
.sb{height:900px}
.hero-hero.armor-only{display:none}
html[data-mode="armor"] .hero-hero.armor-only{display:block;right:5vw;bottom:14vh;height:auto}
html[data-mode="storm"] .hero-hero.armor-only{display:block;right:5vw;bottom:14vh;height:auto}
/* walkman: compact like a real walkman */
#walk{width:300px;max-height:none;overflow:visible}
.wk-screen{margin:10px 12px 6px;aspect-ratio:16/9}
.wk-now b{font-size:24px}
.wk-prog{padding:8px 12px 0}
.wk-ctl{padding:8px 12px;gap:8px}
.wk-ctl button{width:36px;height:36px;font-size:14px}.wk-ctl .pp{width:46px;height:46px}
.wk-pl{margin:4px 12px;padding-top:8px}
#wkList{max-height:150px;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 10px;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
#wkList li{padding:6px 8px;margin-bottom:5px}
.bot-log{overscroll-behavior:contain}

.ld-burst{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(226,38,46,.16) 0 6deg,transparent 6deg 12deg);animation:spin 30s linear infinite}
.ld-web{position:absolute;width:min(130vmin,1100px);height:min(130vmin,1100px)}
.ld-title{position:absolute;top:13vh;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ld-title span{font:700 13px var(--body);letter-spacing:.3em;background:#EFE6D3;color:#16141A;padding:4px 10px}
.ld-title b{font:400 clamp(60px,9vw,120px)/1 var(--cmx);letter-spacing:.06em;color:#E2262E;-webkit-text-stroke:3px #EFE6D3;text-shadow:6px 6px 0 #000}
.ld-title i{font:400 20px var(--hand);color:#F4C430;font-style:normal}
.ld-num{margin-top:220px}

.pw-art{background:none!important;filter:none!important;overflow:hidden}.pw-art img{width:100%;height:100%;object-fit:cover}
.panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(rgba(0,0,0,.14) 1.6px,transparent 2px) 0 0/9px 9px;mix-blend-mode:multiply}
.panel .onom,.panel .bubble,.panel .cap{z-index:6}

.pa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
html[data-mode="armor"] .pa-art{filter:none}
html[data-mode="storm"] .pa-art{filter:none}
.panel .bubble.pb{z-index:6}
/* ---- animation support ---- */
.ch{display:inline-block;will-change:transform}
.h-sec,.ct-t{perspective:800px}
.tl,.ro-grid{perspective:1200px}
.suit-flash{position:fixed;inset:0;z-index:270;pointer-events:none;background:#fff}
.suit-flash.armor{background:radial-gradient(circle,#FFF4D8 0%,#F3D58A 35%,rgba(10,10,12,.9) 80%)}
.suit-flash.web{background:radial-gradient(circle,#fff 0%,#E2262E 45%,rgba(22,20,26,.8) 85%)}
.suit-ring{position:fixed;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;z-index:271;pointer-events:none;border:10px solid #F3D58A;box-shadow:0 0 60px #F3D58A}
.suit-ring.web{border-color:#16141A;box-shadow:none;border-style:dashed}
.marquee{will-change:transform}
/* ---- Walkman v2: bigger, clearer, themed ---- */
#walk{width:min(380px,calc(100vw - 20px));bottom:92px;border-width:4px;border-radius:18px;overflow:hidden;box-shadow:10px 10px 0 var(--red),0 20px 60px rgba(0,0,0,.35);background:linear-gradient(180deg,#1A1820,#0E0D12)}
.wk-h{padding:14px 16px;font-size:24px;background:repeating-linear-gradient(-45deg,#000 0 14px,#16141A 14px 28px)}
.wk-h svg{width:26px;height:26px}
.wk-screen{margin:14px 16px 10px;border-radius:12px;overflow:hidden;border-width:4px;box-shadow:0 0 0 3px #000,0 0 30px rgba(226,38,46,.35)}
html[data-mode="armor"] .wk-screen{box-shadow:0 0 0 3px #000,0 0 30px rgba(212,168,75,.35)}
html[data-mode="storm"] .wk-screen{box-shadow:0 0 0 3px #000,0 0 30px rgba(127,212,255,.35)}
.wk-now{padding:0 16px}
.wk-now b{font-size:32px;letter-spacing:.01em}
.wk-now span{font-size:14.5px;font-weight:700}
.wk-prog{padding:12px 16px 0;font-size:13px}
.wk-prog input{height:6px}
.wk-ctl{justify-content:center;gap:14px;padding:12px 16px}
.wk-ctl button{width:44px;height:44px;font-size:16px;border:2px solid #3A3640}
.wk-ctl .pp{width:62px;height:62px;font-size:22px;border:3px solid #F7F0E2;box-shadow:0 0 0 4px rgba(226,38,46,.35)}
.vol{flex:0 1 120px}
.wk-pl{margin:6px 16px;font-size:20px}
#wkList{max-height:230px;padding:0 12px 14px}
#wkList li{padding:9px 10px;border-radius:8px;transition:transform .2s,background .2s}
#wkList li:hover{transform:translateX(4px);background:#26232B}
#wkList b{font-size:15px}#wkList span{font-size:12.5px}
#wkList li.on{box-shadow:4px 4px 0 #000}
@media (max-width:820px){#walk{left:10px;right:10px;width:auto;bottom:70px}#wkList{max-height:160px}}

/* ---- brand v2: comic emblem + slanted wordmark ---- */
.brand{gap:8px}
.brand-mark{width:46px;height:46px;border:0;box-shadow:none;background:none;border-radius:0;overflow:visible;display:block}
.brand-mark svg{position:static;width:46px;height:46px;inset:auto;margin:0;overflow:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark svg{transform:rotate(-20deg) scale(1.12)}
.bm-burst{fill:#E2262E;stroke:#16141A;stroke-width:4;stroke-linejoin:round;filter:drop-shadow(3px 3px 0 #16141A)}
.bm-webmark{fill:none;stroke:#F7F0E2;stroke-width:2.6}
.bm-webmark circle:last-child{fill:#16141A;stroke:none}
.bm-reactor{display:none}
html[data-mode="armor"] .bm-burst{fill:#D4A84B;stroke:#0A0A0C;filter:drop-shadow(0 0 8px rgba(242,182,48,.6))}
html[data-mode="storm"] .bm-burst{fill:#7FD4FF;stroke:#0A0A0C;filter:drop-shadow(0 0 8px rgba(242,182,48,.6))}
html[data-mode="armor"] .bm-webmark{display:none}
html[data-mode="storm"] .bm-webmark{display:none}
html[data-mode="armor"] .bm-reactor{display:inline;fill:none;stroke:#0A0A0C;stroke-width:3}
html[data-mode="storm"] .bm-reactor{display:inline;fill:none;stroke:#0A0A0C;stroke-width:3}
.bm-reactor .dash{stroke-dasharray:4 3;stroke:#F3D58A;stroke-width:2.5;animation:spin 3s linear infinite;transform-origin:center;transform-box:fill-box}
.bm-reactor .core{fill:#FFF4D8;stroke:#F3D58A;filter:drop-shadow(0 0 4px #F3D58A)}
.brand-txt{position:relative;font:400 31px/1 var(--cmx);letter-spacing:.07em;font-style:italic;transform:skewX(-8deg);color:var(--ink);text-shadow:3px 3px 0 var(--red)}
.brand-txt b{color:var(--red);font-weight:400;text-shadow:3px 3px 0 var(--ink)}
html[data-mode="armor"] .brand-txt{color:#D4A84B;text-shadow:3px 3px 0 #8E1520}
html[data-mode="storm"] .brand-txt{color:#7FD4FF;text-shadow:3px 3px 0 #145A6E}
html[data-mode="armor"] .brand-txt b{color:#F3D58A;text-shadow:0 0 8px #F3D58A}
html[data-mode="storm"] .brand-txt b{color:#BFF0FF;text-shadow:0 0 8px #BFF0FF}
/* ---- thinking indicator ---- */
.thinking{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--body);letter-spacing:.28em;color:var(--ink2)}
.thinking .typing i{width:8px;height:8px;background:var(--red)}
html[data-mode="armor"] .thinking{color:#F3D58A}
html[data-mode="storm"] .thinking{color:#BFF0FF}
html[data-mode="armor"] .thinking .typing i{background:#F3D58A;box-shadow:0 0 6px #F3D58A}
html[data-mode="storm"] .thinking .typing i{background:#BFF0FF;box-shadow:0 0 6px #BFF0FF}

html[data-mode="armor"] .brand-mark{background:none;border:0;box-shadow:none}
html[data-mode="storm"] .brand-mark{background:none;border:0;box-shadow:none}
#walk,#bot{z-index:265}
/* custom cursor now runs everywhere, panels included */

/* =====================================================================
   COMIC-COLLAGE LETTERING — each heading wears its own unique texture
   ===================================================================== */
.txp{color:transparent!important;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;-webkit-text-stroke:var(--txw,.032em) var(--txc,#16141A);text-shadow:none!important;paint-order:stroke fill}
.txp:not(.ch){background-size:cover;background-position:center}
[data-tx]{--txc:#16141A;--txsh:#16141A;filter:drop-shadow(.045em .045em 0 var(--txsh))}
.nm-bot[data-tx]{--txw:5px;filter:drop-shadow(10px 10px 0 var(--txsh));text-shadow:none}
#origin [data-tx],#contact [data-tx]{--txc:#F7F0E2;--txsh:#E2262E}
#origin [data-tx]{--txw:.028em}
.ct-t [data-tx]{--txw:.03em}
html[data-mode="armor"] [data-tx]{--txc:#D4A84B;--txsh:#7A0C14;--txw:.022em;filter:drop-shadow(.035em .035em 0 var(--txsh)) drop-shadow(0 0 .12em rgba(212,168,75,.18))}
html[data-mode="storm"] [data-tx]{--txc:#7FD4FF;--txsh:#124A5A;--txw:.022em;filter:drop-shadow(.035em .035em 0 var(--txsh)) drop-shadow(0 0 .12em rgba(127,212,255,.18))}
html[data-mode="armor"] .nm-bot[data-tx]{--txw:4px;filter:drop-shadow(8px 8px 0 #7A0C14) drop-shadow(0 0 22px rgba(212,168,75,.2))}
html[data-mode="storm"] .nm-bot[data-tx]{--txw:4px;filter:drop-shadow(8px 8px 0 #124A5A) drop-shadow(0 0 22px rgba(127,212,255,.2))}
html[data-mode="armor"] #origin [data-tx],html[data-mode="armor"] #contact [data-tx]{--txc:#D4A84B;--txsh:#7A0C14}
html[data-mode="storm"] #origin [data-tx],html[data-mode="storm"] #contact [data-tx]{--txc:#7FD4FF;--txsh:#124A5A}

/* =====================================================================
   ARMOR v2 — "STARK HUD": gunmetal, arc-reactor cyan, brushed gold
   one cohesive, premium, readable system (overrides the old armor rules)
   ===================================================================== */
html[data-mode="armor"]{
  --paper:#0B0708; --paper2:#100808; --card:#160A0C; --ink:#F4ECE4; --ink2:#BBA79A;
  --red:#B3121E; --yel:#D4A84B; --blue:#2C6BFF; --cyan:#F3D58A;
  --ac:#D4A84B; --ac2:#F3D58A; --line:rgba(212,168,75,.30); --dot:rgba(212,168,75,.05);
  --hand:"Space Grotesk", system-ui, sans-serif; --cmx:Anton, Impact, sans-serif;
  --gold:#D4A84B; --arc:#F3D58A; --hot:#B3121E;
  --glass:linear-gradient(180deg,rgba(44,12,16,.9),rgba(16,8,9,.94));
  --brk:linear-gradient(var(--gold),var(--gold)) 0 0/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 100% 0/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 0 100%/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 18px no-repeat;
  --hud-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-mode="storm"]{
  --paper:#041218; --paper2:#061A22; --card:#08202A; --ink:#E6F0FA; --ink2:#9FB4CC;
  --red:#2AA7C4; --yel:#7FD4FF; --blue:#2C6BFF; --cyan:#BFF0FF;
  --ac:#7FD4FF; --ac2:#BFF0FF; --line:rgba(127,212,255,.30); --dot:rgba(127,212,255,.05);
  --hand:"Space Grotesk", system-ui, sans-serif; --cmx:Anton, Impact, sans-serif;
  --gold:#7FD4FF; --arc:#BFF0FF; --hot:#2AA7C4;
  --glass:linear-gradient(180deg,rgba(10,40,52,.9),rgba(4,16,22,.94));
  --brk:linear-gradient(var(--gold),var(--gold)) 0 0/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 100% 0/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 0 100%/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/2px 18px no-repeat,
        linear-gradient(var(--gold),var(--gold)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 18px no-repeat;
  --hud-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-mode="armor"] body{background-color:#0B0708;background-image:
  radial-gradient(ellipse at 50% -10%,rgba(212,168,75,.10),transparent 55%),
  linear-gradient(rgba(212,168,75,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(212,168,75,.035) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;background-attachment:fixed,scroll,scroll}
html[data-mode="storm"] body{background-color:#041218;background-image:
  radial-gradient(ellipse at 50% -10%,rgba(127,212,255,.10),transparent 55%),
  linear-gradient(rgba(127,212,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,212,255,.035) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;background-attachment:fixed,scroll,scroll}

/* type: no marker scribbles in the suit — clean, tracked HUD labels */
html[data-mode="armor"] .hand,html[data-mode="armor"] .kicker,html[data-mode="armor"] .ms-tag,html[data-mode="armor"] .tl-where,
html[data-mode="armor"] .ro-head p,html[data-mode="armor"] .mf-sign,html[data-mode="armor"] .st3,html[data-mode="armor"] .power.thats .tt3{
  font:600 13px/1.5 var(--body)!important;letter-spacing:.22em;text-transform:uppercase;color:var(--arc)}
html[data-mode="storm"] .hand,html[data-mode="storm"] .kicker,html[data-mode="storm"] .ms-tag,html[data-mode="storm"] .tl-where,html[data-mode="storm"] .ro-head p,html[data-mode="storm"] .mf-sign,html[data-mode="storm"] .st3,html[data-mode="storm"] .power.thats .tt3{
  font:600 13px/1.5 var(--body)!important;letter-spacing:.22em;text-transform:uppercase;color:var(--arc)}
html[data-mode="armor"] .kicker::before{content:"◢ ";color:var(--gold)}
html[data-mode="storm"] .kicker::before{content:"◢ ";color:var(--gold)}
html[data-mode="armor"] .sec-head .hand{color:var(--ink2);margin-top:14px}
html[data-mode="storm"] .sec-head .hand{color:var(--ink2);margin-top:14px}
html[data-mode="armor"] .issue b{background:var(--gold);color:#0B0708}
html[data-mode="storm"] .issue b{background:var(--gold);color:#041218}

/* glass HUD panels with gold corner brackets */
html[data-mode="armor"] :is(.power,.tl-card,.bd,.ro,.cap,.note,.quip){
  background:var(--brk),var(--glass);border:1px solid rgba(212,168,75,.22);box-shadow:var(--hud-shadow);border-radius:3px;color:var(--ink)}
html[data-mode="storm"] :is(.power,.tl-card,.bd,.ro,.cap,.note,.quip){
  background:var(--brk),var(--glass);border:1px solid rgba(127,212,255,.22);box-shadow:var(--hud-shadow);border-radius:3px;color:var(--ink)}
html[data-mode="armor"] .power{transform:rotate(0)}
html[data-mode="storm"] .power{transform:rotate(0)}
html[data-mode="armor"] .power:hover,html[data-mode="armor"] a.bd:hover{border-color:rgba(212,168,75,.6);box-shadow:var(--hud-shadow),0 0 40px rgba(212,168,75,.18)}
html[data-mode="storm"] .power:hover,html[data-mode="storm"] a.bd:hover{border-color:rgba(127,212,255,.6);box-shadow:var(--hud-shadow),0 0 40px rgba(127,212,255,.18)}
html[data-mode="armor"] .pw-no{color:transparent;-webkit-text-stroke:1.5px var(--gold);text-shadow:none;font-family:Anton}
html[data-mode="storm"] .pw-no{color:transparent;-webkit-text-stroke:1.5px var(--gold);text-shadow:none;font-family:Anton}
html[data-mode="armor"] .pw-art{border:1px solid rgba(212,168,75,.3)}
html[data-mode="storm"] .pw-art{border:1px solid rgba(127,212,255,.3)}
html[data-mode="armor"] .power h3,html[data-mode="armor"] .tl-card h3,html[data-mode="armor"] .bd b{color:#FBF4EA;letter-spacing:.01em}
html[data-mode="storm"] .power h3,html[data-mode="storm"] .tl-card h3,html[data-mode="storm"] .bd b{color:#F2F8FF;letter-spacing:.01em}
html[data-mode="armor"] .power p,html[data-mode="armor"] .tl-card p{color:var(--ink2)}
html[data-mode="storm"] .power p,html[data-mode="storm"] .tl-card p{color:var(--ink2)}
html[data-mode="armor"] .kit li{background:rgba(212,168,75,.06);border:1px solid rgba(212,168,75,.28);color:#F1DDB0;border-radius:2px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
html[data-mode="storm"] .kit li{background:rgba(127,212,255,.06);border:1px solid rgba(127,212,255,.28);color:#CFE6FF;border-radius:2px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
html[data-mode="armor"] .power.thats{background:var(--brk),linear-gradient(150deg,#C41626,#6E0A12);border-color:rgba(212,168,75,.6)}
html[data-mode="storm"] .power.thats{background:var(--brk),linear-gradient(150deg,#1C7C93,#0A3340);border-color:rgba(127,212,255,.6)}
html[data-mode="armor"] .power.thats .tt1,html[data-mode="armor"] .power.thats .tt2{-webkit-text-stroke:0;text-shadow:0 0 30px rgba(0,0,0,.35)}
html[data-mode="storm"] .power.thats .tt1,html[data-mode="storm"] .power.thats .tt2{-webkit-text-stroke:0;text-shadow:0 0 30px rgba(0,0,0,.35)}
html[data-mode="armor"] .power.thats .tt1{color:#FBF4EA}
html[data-mode="storm"] .power.thats .tt1{color:#F2F8FF}html[data-mode="armor"] .power.thats .tt2{color:var(--gold)}
html[data-mode="storm"] .power.thats .tt2{color:var(--gold)}
html[data-mode="armor"] .power.thats .tt3{color:#FFE3A8}
html[data-mode="storm"] .power.thats .tt3{color:#FFE3A8}
html[data-mode="armor"] #powers{background:linear-gradient(180deg,#100808,#0B0708);border-block:1px solid rgba(212,168,75,.2)}
html[data-mode="storm"] #powers{background:linear-gradient(180deg,#061A22,#041218);border-block:1px solid rgba(127,212,255,.2)}

/* buttons: chamfered, gold-on-gunmetal */
html[data-mode="armor"] :is(.btn,.btn-big,.hire){border:1px solid var(--gold);box-shadow:none;border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:rgba(212,168,75,.08);color:var(--gold);font-family:Anton;letter-spacing:.1em;text-transform:uppercase}
html[data-mode="storm"] :is(.btn,.btn-big,.hire){border:1px solid var(--gold);box-shadow:none;border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:rgba(127,212,255,.08);color:var(--gold);font-family:Anton;letter-spacing:.1em;text-transform:uppercase}
html[data-mode="armor"] :is(.btn.red,.btn-big){background:linear-gradient(180deg,#E6CB91,#B08D4C);color:#0B0708;border-color:#E6CB91}
html[data-mode="storm"] :is(.btn.red,.btn-big){background:linear-gradient(180deg,#CFEFFF,#5BA8E0);color:#041218;border-color:#CFEFFF}
html[data-mode="armor"] :is(.btn,.btn-big,.hire):hover{transform:translateY(-3px);box-shadow:none;filter:drop-shadow(0 0 14px rgba(212,168,75,.45))}
html[data-mode="storm"] :is(.btn,.btn-big,.hire):hover{transform:translateY(-3px);box-shadow:none;filter:drop-shadow(0 0 14px rgba(127,212,255,.45))}
html[data-mode="armor"] .soon{border:1px dashed rgba(212,168,75,.5);color:var(--arc);font-family:Anton;letter-spacing:.12em}
html[data-mode="storm"] .soon{border:1px dashed rgba(127,212,255,.5);color:var(--arc);font-family:Anton;letter-spacing:.12em}

/* header / nav / dock */
html[data-mode="armor"] .nav a::after{background:var(--arc);box-shadow:0 0 8px var(--arc)}
html[data-mode="storm"] .nav a::after{background:var(--arc);box-shadow:0 0 8px var(--arc)}
html[data-mode="armor"] .brand-txt{color:#FBF4EA;text-shadow:0 0 18px rgba(212,168,75,.25)}
html[data-mode="storm"] .brand-txt{color:#F2F8FF;text-shadow:0 0 18px rgba(127,212,255,.25)}
html[data-mode="armor"] .brand-txt b{color:var(--gold);text-shadow:none}
html[data-mode="storm"] .brand-txt b{color:var(--gold);text-shadow:none}
html[data-mode="armor"] .dock-pill{background:rgba(20,8,10,.92);color:var(--gold);border:1px solid var(--gold);box-shadow:0 0 24px rgba(212,168,75,.18);border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:Anton;letter-spacing:.12em}
html[data-mode="storm"] .dock-pill{background:rgba(6,22,30,.92);color:var(--gold);border:1px solid var(--gold);box-shadow:0 0 24px rgba(127,212,255,.18);border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:Anton;letter-spacing:.12em}
html[data-mode="armor"] .dp-ico{background:var(--gold);color:#0B0708}
html[data-mode="storm"] .dp-ico{background:var(--gold);color:#041218}
html[data-mode="armor"] .dock-bot{background:radial-gradient(circle,#1C0B0E,#0B0708);border:1px solid var(--arc);box-shadow:0 0 26px rgba(212,168,75,.4)}
html[data-mode="storm"] .dock-bot{background:radial-gradient(circle,#0A2833,#041218);border:1px solid var(--arc);box-shadow:0 0 26px rgba(127,212,255,.4)}
html[data-mode="armor"] .dock-bot svg{color:var(--arc)}
html[data-mode="storm"] .dock-bot svg{color:var(--arc)}
html[data-mode="armor"] .peek{background:rgba(20,8,10,.95);color:var(--arc);border:1px solid rgba(212,168,75,.4);box-shadow:0 0 20px rgba(212,168,75,.15)}
html[data-mode="storm"] .peek{background:rgba(6,22,30,.95);color:var(--arc);border:1px solid rgba(127,212,255,.4);box-shadow:0 0 20px rgba(127,212,255,.15)}

/* hero */
html[data-mode="armor"] .st1{background:rgba(16,8,9,.94);color:var(--gold);border:1px solid var(--gold);box-shadow:0 0 24px rgba(212,168,75,.2);font-family:Anton;letter-spacing:.1em}
html[data-mode="storm"] .st1{background:rgba(4,16,22,.94);color:var(--gold);border:1px solid var(--gold);box-shadow:0 0 24px rgba(127,212,255,.2);font-family:Anton;letter-spacing:.1em}
html[data-mode="armor"] .st2{background:linear-gradient(160deg,#E6CB91,#A8834A);color:#0B0708;-webkit-text-stroke:0}
html[data-mode="storm"] .st2{background:linear-gradient(160deg,#CFEFFF,#3F86C8);color:#041218;-webkit-text-stroke:0}
html[data-mode="armor"] .bubble{background:rgba(24,8,10,.94);color:#FBE9C4;border:1px solid var(--arc);border-radius:4px;font:600 15px/1.4 var(--body);letter-spacing:.04em;box-shadow:0 0 26px rgba(212,168,75,.25)}
html[data-mode="storm"] .bubble{background:rgba(7,26,34,.94);color:#DDEFFF;border:1px solid var(--arc);border-radius:4px;font:600 15px/1.4 var(--body);letter-spacing:.04em;box-shadow:0 0 26px rgba(127,212,255,.25)}
html[data-mode="armor"] .scroll-cue i{background:var(--arc);box-shadow:0 0 8px var(--arc)}
html[data-mode="storm"] .scroll-cue i{background:var(--arc);box-shadow:0 0 8px var(--arc)}

/* marquees: hazard-gold + gunmetal bands */
html[data-mode="armor"] .marquee{background:linear-gradient(90deg,#7A0C14,#B3121E 50%,#7A0C14);color:#FBF4EA;border-block:1px solid var(--gold)}
html[data-mode="storm"] .marquee{background:linear-gradient(90deg,#124A5A,#2AA7C4 50%,#124A5A);color:#F2F8FF;border-block:1px solid var(--gold)}
html[data-mode="armor"] .marquee.m2{background:#170A0C;color:var(--gold);border-block:1px solid rgba(212,168,75,.35)}
html[data-mode="storm"] .marquee.m2{background:#08222C;color:var(--gold);border-block:1px solid rgba(127,212,255,.35)}
html[data-mode="armor"] .mq{font-family:Anton;letter-spacing:.08em}
html[data-mode="storm"] .mq{font-family:Anton;letter-spacing:.08em}
html[data-mode="armor"] .mq b{color:var(--gold)}
html[data-mode="storm"] .mq b{color:var(--gold)}html[data-mode="armor"] .m2 .mq b{color:var(--arc)}
html[data-mode="storm"] .m2 .mq b{color:var(--arc)}

/* origin comic */
html[data-mode="armor"] #origin{background:#080505}
html[data-mode="storm"] #origin{background:#030D12}
html[data-mode="armor"] .panel{border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(212,168,75,.08),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(212,168,75,.1)}
html[data-mode="storm"] .panel{border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(127,212,255,.08),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(127,212,255,.1)}
html[data-mode="armor"] .cap-tag{background:var(--gold);color:#0B0708;border:0;font-family:Anton;letter-spacing:.12em}
html[data-mode="storm"] .cap-tag{background:var(--gold);color:#041218;border:0;font-family:Anton;letter-spacing:.12em}
html[data-mode="armor"] .cap{font-size:15.5px}
html[data-mode="storm"] .cap{font-size:15.5px}
html[data-mode="armor"] .onom{color:var(--gold);-webkit-text-stroke:2px #0B0708;text-shadow:4px 4px 0 #7A0C14,0 0 30px rgba(212,168,75,.35);font-family:Anton}
html[data-mode="storm"] .onom{color:var(--gold);-webkit-text-stroke:2px #041218;text-shadow:4px 4px 0 #124A5A,0 0 30px rgba(127,212,255,.35);font-family:Anton}
html[data-mode="armor"] .or-count{color:#FBF4EA;font-family:Anton}
html[data-mode="storm"] .or-count{color:#F2F8FF;font-family:Anton}html[data-mode="armor"] .or-count b{color:var(--arc);text-shadow:0 0 14px rgba(212,168,75,.6)}
html[data-mode="storm"] .or-count b{color:var(--arc);text-shadow:0 0 14px rgba(127,212,255,.6)}

/* manifesto */
html[data-mode="armor"] .mf .r{color:var(--hot)}
html[data-mode="storm"] .mf .r{color:var(--hot)}html[data-mode="armor"] .mf .b{color:var(--gold)}
html[data-mode="storm"] .mf .b{color:var(--gold)}

/* missions */
html[data-mode="armor"] .ms-shot{border:1px solid rgba(212,168,75,.3);box-shadow:0 0 0 6px rgba(212,168,75,.05),0 30px 70px rgba(0,0,0,.6);background:#080505}
html[data-mode="storm"] .ms-shot{border:1px solid rgba(127,212,255,.3);box-shadow:0 0 0 6px rgba(127,212,255,.05),0 30px 70px rgba(0,0,0,.6);background:#030D12}
html[data-mode="armor"] .browser,html[data-mode="armor"] .ms-thumbs{background:#170A0C;border-color:rgba(212,168,75,.2)}
html[data-mode="storm"] .browser,html[data-mode="storm"] .ms-thumbs{background:#08222C;border-color:rgba(127,212,255,.2)}
html[data-mode="armor"] .browser i{border:0;background:#3A1C20}
html[data-mode="storm"] .browser i{border:0;background:#1C2C4A}html[data-mode="armor"] .browser i:first-child{background:var(--hot)}
html[data-mode="storm"] .browser i:first-child{background:var(--hot)}html[data-mode="armor"] .browser i:nth-child(2){background:var(--gold)}
html[data-mode="storm"] .browser i:nth-child(2){background:var(--gold)}
html[data-mode="armor"] .browser span{background:#0B0708;border-color:rgba(212,168,75,.2);color:var(--ink2)}
html[data-mode="storm"] .browser span{background:#041218;border-color:rgba(127,212,255,.2);color:var(--ink2)}
html[data-mode="armor"] .ms-thumbs button{border:1px solid rgba(212,168,75,.3)}
html[data-mode="storm"] .ms-thumbs button{border:1px solid rgba(127,212,255,.3)}
html[data-mode="armor"] .ms-thumbs button.on{box-shadow:0 0 0 2px var(--gold)}
html[data-mode="storm"] .ms-thumbs button.on{box-shadow:0 0 0 2px var(--gold)}
html[data-mode="armor"] .stamp{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 20px rgba(212,168,75,.5);font-family:Anton;letter-spacing:.05em}
html[data-mode="storm"] .stamp{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 20px rgba(127,212,255,.5);font-family:Anton;letter-spacing:.05em}
html[data-mode="armor"] .quip{font:500 14px/1.5 var(--body);letter-spacing:.04em;color:#F1DDB0}
html[data-mode="storm"] .quip{font:500 14px/1.5 var(--body);letter-spacing:.04em;color:#CFE6FF}

/* readout */
html[data-mode="armor"] .ro{padding:clamp(24px,4vw,52px)}
html[data-mode="storm"] .ro{padding:clamp(24px,4vw,52px)}
html[data-mode="armor"] .ro-grid{border-color:rgba(212,168,75,.18)}
html[data-mode="storm"] .ro-grid{border-color:rgba(127,212,255,.18)}
html[data-mode="armor"] .ro-c{border-color:rgba(212,168,75,.18)}
html[data-mode="storm"] .ro-c{border-color:rgba(127,212,255,.18)}
html[data-mode="armor"] .ro-c .n{color:#FBF4EA;text-shadow:0 0 22px rgba(212,168,75,.25)}
html[data-mode="storm"] .ro-c .n{color:#F2F8FF;text-shadow:0 0 22px rgba(127,212,255,.25)}
html[data-mode="armor"] .ro-c.w{background:linear-gradient(135deg,rgba(209,26,42,.9),rgba(110,10,18,.9));color:#FBF4EA}
html[data-mode="storm"] .ro-c.w{background:linear-gradient(135deg,rgba(209,26,42,.9),rgba(110,10,18,.9));color:#F2F8FF}
html[data-mode="armor"] .ro-c.w .n{color:var(--gold)}
html[data-mode="storm"] .ro-c.w .n{color:var(--gold)}
html[data-mode="armor"] .ro-c:nth-child(3n) .n{color:var(--arc)}
html[data-mode="storm"] .ro-c:nth-child(3n) .n{color:var(--arc)}
html[data-mode="armor"] .ro-c span{color:var(--ink2);opacity:1;letter-spacing:.04em}
html[data-mode="storm"] .ro-c span{color:var(--ink2);opacity:1;letter-spacing:.04em}
html[data-mode="armor"] .ro-c.w span{color:#FFD9DC}
html[data-mode="storm"] .ro-c.w span{color:#FFD9DC}

/* journey */
html[data-mode="armor"] .tl-line{background:repeating-linear-gradient(rgba(212,168,75,.6) 0 6px,transparent 6px 14px);opacity:.5}
html[data-mode="storm"] .tl-line{background:repeating-linear-gradient(rgba(127,212,255,.6) 0 6px,transparent 6px 14px);opacity:.5}
html[data-mode="armor"] .tl-fill{background:linear-gradient(var(--arc),var(--gold));box-shadow:0 0 12px var(--arc)}
html[data-mode="storm"] .tl-fill{background:linear-gradient(var(--arc),var(--gold));box-shadow:0 0 12px var(--arc)}
html[data-mode="armor"] .tl-dot{background:radial-gradient(circle,#2A0E12,#0B0708);border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(212,168,75,.12),0 0 24px rgba(212,168,75,.35)}
html[data-mode="storm"] .tl-dot{background:radial-gradient(circle,#0E3644,#041218);border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(127,212,255,.12),0 0 24px rgba(127,212,255,.35)}
html[data-mode="armor"] .tl-when{color:var(--gold)}
html[data-mode="storm"] .tl-when{color:var(--gold)}

/* credentials (badges) — verified HUD chips */
html[data-mode="armor"] .bd{padding-top:62px}
html[data-mode="storm"] .bd{padding-top:62px}
html[data-mode="armor"] .bd::before{content:"";width:36px;height:36px;background:radial-gradient(circle,#FFF4D8 0 18%,var(--arc) 19% 34%,transparent 35% 52%,var(--arc) 53% 60%,transparent 61%);border:1px solid rgba(212,168,75,.5);box-shadow:0 0 16px rgba(212,168,75,.45)}
html[data-mode="storm"] .bd::before{content:"";width:36px;height:36px;background:radial-gradient(circle,#F2FBFF 0 18%,var(--arc) 19% 34%,transparent 35% 52%,var(--arc) 53% 60%,transparent 61%);border:1px solid rgba(127,212,255,.5);box-shadow:0 0 16px rgba(127,212,255,.45)}
html[data-mode="armor"] .bd::after{content:"VERIFIED";position:absolute;right:16px;top:20px;font:700 10px var(--body);letter-spacing:.24em;color:#0B0708;background:var(--gold);padding:3px 7px}
html[data-mode="storm"] .bd::after{content:"VERIFIED";position:absolute;right:16px;top:20px;font:700 10px var(--body);letter-spacing:.24em;color:#041218;background:var(--gold);padding:3px 7px}
html[data-mode="armor"] .bd-org{font:600 12px var(--body)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--arc)!important}
html[data-mode="storm"] .bd-org{font:600 12px var(--body)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--arc)!important}
html[data-mode="armor"] .bd span:last-child{color:var(--ink2)}
html[data-mode="storm"] .bd span:last-child{color:var(--ink2)}

/* scrapbook → holo-frames */
html[data-mode="armor"] .pol{background:rgba(30,10,12,.95);border:1px solid rgba(212,168,75,.35);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(212,168,75,.08)}
html[data-mode="storm"] .pol{background:rgba(9,32,42,.95);border:1px solid rgba(127,212,255,.35);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(127,212,255,.08)}
html[data-mode="armor"] .pol::before{background:linear-gradient(90deg,transparent,rgba(212,168,75,.55),transparent);height:3px;top:-2px;border:0;transform:none;width:70%;margin-left:-35%;box-shadow:0 0 12px var(--arc)}
html[data-mode="storm"] .pol::before{background:linear-gradient(90deg,transparent,rgba(127,212,255,.55),transparent);height:3px;top:-2px;border:0;transform:none;width:70%;margin-left:-35%;box-shadow:0 0 12px var(--arc)}
html[data-mode="armor"] .pol img{border:1px solid rgba(212,168,75,.25)}
html[data-mode="storm"] .pol img{border:1px solid rgba(127,212,255,.25)}
html[data-mode="armor"] .pol figcaption{font:600 12px/1.45 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#F1DDB0}
html[data-mode="storm"] .pol figcaption{font:600 12px/1.45 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#CFE6FF}
html[data-mode="armor"] .note{font:500 14px/1.5 var(--body);letter-spacing:.06em;color:#FBE9C4}
html[data-mode="storm"] .note{font:500 14px/1.5 var(--body);letter-spacing:.06em;color:#DDEFFF}
html[data-mode="armor"] .note.y{background:var(--brk),linear-gradient(160deg,#E6CB91,#A8834A);color:#0B0708}
html[data-mode="storm"] .note.y{background:var(--brk),linear-gradient(160deg,#CFEFFF,#3F86C8);color:#041218}
html[data-mode="armor"] .stamp-b{border:2px solid var(--hot);color:var(--hot);background:rgba(12,6,7,.7);font-family:Anton;letter-spacing:.14em;border-radius:2px}
html[data-mode="storm"] .stamp-b{border:2px solid var(--hot);color:var(--hot);background:rgba(4,14,20,.7);font-family:Anton;letter-spacing:.14em;border-radius:2px}

/* contact */
html[data-mode="armor"] #contact{background:radial-gradient(ellipse at 50% 120%,rgba(212,168,75,.12),transparent 60%),#080505;border-top:1px solid rgba(212,168,75,.5)}
html[data-mode="storm"] #contact{background:radial-gradient(ellipse at 50% 120%,rgba(127,212,255,.12),transparent 60%),#030D12;border-top:1px solid rgba(127,212,255,.5)}
html[data-mode="armor"] .ct-l a{border-color:var(--gold);color:#F4ECE4}
html[data-mode="storm"] .ct-l a{border-color:var(--gold);color:#E6F0FA}
html[data-mode="armor"] .ct-h{color:var(--arc);font:600 13px var(--body);letter-spacing:.22em;text-transform:uppercase}
html[data-mode="storm"] .ct-h{color:var(--arc);font:600 13px var(--body);letter-spacing:.22em;text-transform:uppercase}
html[data-mode="armor"] .suit-btn{background:linear-gradient(180deg,#E2262E,#7A0C14);color:#F7F0E2;border:1px solid #F7F0E2;box-shadow:0 0 40px rgba(226,38,46,.35)}
html[data-mode="storm"] .suit-btn{background:linear-gradient(180deg,#E2262E,#124A5A);color:#F7F0E2;border:1px solid #F7F0E2;box-shadow:0 0 40px rgba(226,38,46,.35)}
html[data-mode="armor"] #foot{background:#080505;border-top:1px solid rgba(212,168,75,.12)}
html[data-mode="storm"] #foot{background:#030D12;border-top:1px solid rgba(127,212,255,.12)}

/* walkman + J.A.R.V.I.S. panels */
html[data-mode="armor"] #walk,html[data-mode="armor"] #bot{background:linear-gradient(180deg,#1A0A0D,#0B0708);border:1px solid rgba(212,168,75,.35);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(212,168,75,.12);border-radius:10px}
html[data-mode="storm"] #walk,html[data-mode="storm"] #bot{background:linear-gradient(180deg,#09252F,#041218);border:1px solid rgba(127,212,255,.35);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(127,212,255,.12);border-radius:10px}
html[data-mode="armor"] .wk-h,html[data-mode="armor"] .bot-h{background:linear-gradient(90deg,#170A0C,#22090D);border-bottom:1px solid rgba(212,168,75,.4);color:var(--gold);font-family:Anton;letter-spacing:.12em}
html[data-mode="storm"] .wk-h,html[data-mode="storm"] .bot-h{background:linear-gradient(90deg,#08222C,#0D3140);border-bottom:1px solid rgba(127,212,255,.4);color:var(--gold);font-family:Anton;letter-spacing:.12em}
html[data-mode="armor"] .wk-screen{border:1px solid rgba(212,168,75,.35)}
html[data-mode="storm"] .wk-screen{border:1px solid rgba(127,212,255,.35)}
html[data-mode="armor"] .wk-ctl .pp{background:linear-gradient(180deg,#E6CB91,#B08D4C);color:#0B0708;border:0;box-shadow:0 0 0 4px rgba(212,168,75,.18)}
html[data-mode="storm"] .wk-ctl .pp{background:linear-gradient(180deg,#CFEFFF,#5BA8E0);color:#041218;border:0;box-shadow:0 0 0 4px rgba(127,212,255,.18)}
html[data-mode="armor"] .wk-ctl button{border-color:rgba(212,168,75,.3)}
html[data-mode="storm"] .wk-ctl button{border-color:rgba(127,212,255,.3)}
html[data-mode="armor"] #wkList li.on{background:rgba(212,168,75,.1);border-color:var(--arc);box-shadow:inset 3px 0 0 var(--gold)}
html[data-mode="storm"] #wkList li.on{background:rgba(127,212,255,.1);border-color:var(--arc);box-shadow:inset 3px 0 0 var(--gold)}
html[data-mode="armor"] #wkList li:hover{background:rgba(212,168,75,.07)}
html[data-mode="storm"] #wkList li:hover{background:rgba(127,212,255,.07)}
html[data-mode="armor"] #wkList{scrollbar-color:var(--gold) transparent}
html[data-mode="storm"] #wkList{scrollbar-color:var(--gold) transparent}
html[data-mode="armor"] .msg{border:1px solid rgba(212,168,75,.25);box-shadow:none;border-radius:6px}
html[data-mode="storm"] .msg{border:1px solid rgba(127,212,255,.25);box-shadow:none;border-radius:6px}
html[data-mode="armor"] .msg.b{background:#1C0B0E;color:#F4ECE4}
html[data-mode="storm"] .msg.b{background:#0A2833;color:#E6F0FA}
html[data-mode="armor"] .msg.u{background:rgba(212,168,75,.14);color:#F7EBD0;border-color:rgba(212,168,75,.45)}
html[data-mode="storm"] .msg.u{background:rgba(127,212,255,.14);color:#F7EBD0;border-color:rgba(127,212,255,.45)}
html[data-mode="armor"] .bot-chips button{border:1px solid rgba(212,168,75,.35);color:#F1DDB0;border-radius:2px;box-shadow:none}
html[data-mode="storm"] .bot-chips button{border:1px solid rgba(127,212,255,.35);color:#CFE6FF;border-radius:2px;box-shadow:none}
html[data-mode="armor"] .bot-chips button:hover{background:rgba(212,168,75,.1)}
html[data-mode="storm"] .bot-chips button:hover{background:rgba(127,212,255,.1)}
html[data-mode="armor"] .bot-in{border:1px solid rgba(212,168,75,.35);border-radius:4px}
html[data-mode="storm"] .bot-in{border:1px solid rgba(127,212,255,.35);border-radius:4px}

/* suit-up transition, matching palette */
#suitFx .plate{background:linear-gradient(135deg,#121A24,#0B0708);border:1px solid #D4A84B}
.th-line{transition:background .4s}
html[data-mode="armor"] .th-line{background:linear-gradient(var(--arc),var(--gold))}
html[data-mode="storm"] .th-line{background:linear-gradient(var(--arc),var(--gold))}
.pw-intro .h-sec.big{font-size:clamp(64px,8.6vw,150px);line-height:.88}
/* GSAP owns `transform` on these — a CSS transform transition made it read mid-transition values and freeze cards half-way.
   Hover lifts now move `top/left` instead, so scroll animations always land. */
.bd,.btn-big,.suit-btn,.btn{position:relative;top:0;left:0;transition:box-shadow .2s,top .2s,left .2s,filter .2s,background .2s}
a.bd:hover,.btn:hover,.btn-big:hover{transform:none;top:-3px;left:-3px}
.btn:active{transform:none;top:3px;left:3px}
.suit-btn:hover{transform:none;top:-4px}
html[data-mode="armor"] :is(.btn,.btn-big,.hire):hover{transform:none;top:-3px;left:0}
html[data-mode="storm"] :is(.btn,.btn-big,.hire):hover{transform:none;top:-3px;left:0}
.wd{display:inline-block;white-space:nowrap}
.nm-bot{white-space:nowrap}
@media (max-width:820px){.name{font-size:clamp(56px,17vw,120px)}.nm-bot[data-tx]{--txw:3px;filter:drop-shadow(5px 5px 0 var(--txsh))}html[data-mode="armor"] .nm-bot[data-tx]{filter:drop-shadow(5px 5px 0 #7A0C14)}
html[data-mode="storm"] .nm-bot[data-tx]{filter:drop-shadow(5px 5px 0 #124A5A)}.h-sec{font-size:clamp(44px,13vw,80px)}.h-sec.big,.pw-intro .h-sec.big{font-size:clamp(52px,16vw,110px)}.ct-t{font-size:clamp(60px,19vw,140px)}}

/* ---- dock v3: animated original mascots ---- */
.wk-screen iframe{pointer-events:none}
.wk-screen{cursor:pointer}
.dp-ico2{width:38px;height:38px;display:grid;place-items:center;margin-left:-4px}
.dp-ico2 svg{width:38px;height:38px;filter:drop-shadow(2px 2px 0 rgba(22,20,26,.35))}
.dp-ico2 .spin{transform-origin:0 0;animation:spin 6s linear infinite}
body.playing .dp-ico2 .spin{animation-duration:1.6s}
.turbine .pulse{animation:orbPulse 1.6s ease-in-out infinite}
.dock-pill{height:58px;padding:0 24px 0 10px}

.dock-bot{width:78px;height:78px;background:radial-gradient(circle at 35% 30%,#FFF8EA,#EFE6D3 70%);border:3.5px solid var(--ink);box-shadow:5px 5px 0 var(--red),0 0 0 6px rgba(226,38,46,.12);overflow:visible}
.dock-bot:hover{transform:translateY(-4px) rotate(-6deg)}
.dock-bot svg{width:60px;height:64px;overflow:visible}
.bug .silk{stroke:#16141A;stroke-width:1.4;stroke-dasharray:2 2;opacity:.6}
.bug .bob{animation:bob 2.6s ease-in-out infinite;transform-origin:0 -16px}
.bug .lg{fill:none;stroke:#16141A;stroke-width:3.4;stroke-linecap:round;transform-origin:calc(var(--s) * 8px) 0;animation:leg 1.1s ease-in-out infinite alternate}
.bug .l1{animation-delay:-.3s}.bug .l2{animation-delay:-.6s}.bug .l3{animation-delay:-.9s}
.bug .abd{fill:#16141A}.bug .mark{fill:#E2262E}.bug .head{fill:#E2262E;stroke:#16141A;stroke-width:2.6}
.bug .ew{fill:#fff;stroke:#16141A;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
.bug .pupils{fill:#16141A;animation:look 6s ease-in-out infinite}
.bug .smile{fill:none;stroke:#16141A;stroke-width:1.8;stroke-linecap:round}
.dock-bot:hover .bug .lg{animation-duration:.25s}
.dock-bot:hover .bug .bob{animation:wave .5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-2px) rotate(-4deg)}50%{transform:translateY(3px) rotate(4deg)}}
@keyframes leg{from{transform:rotate(calc(var(--s) * -10deg))}to{transform:rotate(calc(var(--s) * 12deg))}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes look{0%,20%{transform:translate(0,0)}30%,45%{transform:translate(-1.6px,.6px)}55%,70%{transform:translate(1.6px,-.4px)}80%,100%{transform:translate(0,0)}}
@keyframes wave{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
html[data-mode="armor"] .dock-bot{width:78px;height:78px;background:radial-gradient(circle,#1C0B0E,#080505);border:1px solid rgba(212,168,75,.6);box-shadow:0 0 0 6px rgba(212,168,75,.06),0 0 30px rgba(212,168,75,.35)}
html[data-mode="storm"] .dock-bot{width:78px;height:78px;background:radial-gradient(circle,#0A2833,#030D12);border:1px solid rgba(127,212,255,.6);box-shadow:0 0 0 6px rgba(127,212,255,.06),0 0 30px rgba(127,212,255,.35)}
.orb{width:66px!important;height:66px!important}
.orb circle{fill:none}
.orb .o1{stroke:#D4A84B;stroke-width:1.5;stroke-dasharray:60 10 6 10;transform-origin:center;animation:spin 14s linear infinite}
.orb .o2{stroke:#F3D58A;stroke-width:2.5;stroke-dasharray:22 8;opacity:.8;animation:spin 6s linear infinite reverse}
.orb .o3{stroke:#F3D58A;stroke-width:1;opacity:.5}
.orb .o4{fill:#D4A84B;animation:spin 22s linear infinite}
.orb .oc{fill:rgba(212,168,75,.15);stroke:#F3D58A;stroke-width:2}
.orb .ocore{fill:#FFF4D8;filter:drop-shadow(0 0 4px #F3D58A);animation:orbPulse 1.8s ease-in-out infinite}
@keyframes orbPulse{50%{transform:scale(1.35);opacity:.75}}
.orb *{transform-box:view-box;transform-origin:center}
.peek{right:116px;bottom:44px}
@media (max-width:820px){.dock-bot,html[data-mode="armor"] .dock-bot{width:64px;height:64px}
html[data-mode="storm"] .dock-bot{width:64px;height:64px}.dock-bot svg{width:48px;height:52px}.orb{width:54px!important;height:54px!important}.peek{right:86px}}

/* ---- assistant v3: bigger, roomier, easier to read ---- */
#bot{width:min(460px,calc(100vw - 32px));height:min(680px,calc(100svh - 130px));bottom:116px;border-radius:16px;overflow:hidden}
.bot-log{padding:20px;gap:14px}
.msg{font-size:15.5px;line-height:1.55;max-width:88%}
.bot-h b{font-size:30px}
.bot-chips button{font-size:12.5px;padding:7px 12px}
.bot-in input,.bot-in textarea{font-size:15px}
@media (max-width:820px){#bot{left:10px;right:10px;width:auto;height:min(620px,calc(100svh - 110px));bottom:86px}}

/* ---- v4: theme-true colours, certification timeline, drone turntable ---- */
:root{--blue:#A3161D;--yel:#F1D7A6}
.mf .b{color:transparent;-webkit-text-stroke:.03em #E2262E}
html[data-mode="armor"] .mf .b{color:var(--gold);-webkit-text-stroke:0}
html[data-mode="storm"] .mf .b{color:var(--gold);-webkit-text-stroke:0}
html[data-mode="armor"]{--blue:#E07A5F;--yel:#D4A84B;--cyan:#F3D58A}
html[data-mode="storm"]{--blue:#DCE8F4;--yel:#7FD4FF;--cyan:#BFF0FF}
html[data-mode="armor"] [data-tx]{--txc:#080505;--txw:.018em;filter:drop-shadow(.03em .03em 0 #5A1016) drop-shadow(0 0 .14em rgba(212,168,75,.22))}
html[data-mode="storm"] [data-tx]{--txc:#030D12;--txw:.018em;filter:drop-shadow(.03em .03em 0 #0B3A48) drop-shadow(0 0 .14em rgba(127,212,255,.22))}
html[data-mode="armor"] .nm-bot[data-tx]{--txw:3px;filter:drop-shadow(7px 7px 0 #5A1016) drop-shadow(0 0 24px rgba(212,168,75,.25))}
html[data-mode="storm"] .nm-bot[data-tx]{--txw:3px;filter:drop-shadow(7px 7px 0 #0B3A48) drop-shadow(0 0 24px rgba(127,212,255,.25))}
html[data-mode="armor"] .nm-fill{-webkit-text-stroke-color:#080505;filter:drop-shadow(7px 7px 0 #5A1016) drop-shadow(0 0 24px rgba(212,168,75,.25))}
html[data-mode="storm"] .nm-fill{-webkit-text-stroke-color:#030D12;filter:drop-shadow(7px 7px 0 #0B3A48) drop-shadow(0 0 24px rgba(127,212,255,.25))}
html[data-mode="armor"] #origin [data-tx],html[data-mode="armor"] #contact [data-tx]{--txc:#080505}
html[data-mode="storm"] #origin [data-tx],html[data-mode="storm"] #contact [data-tx]{--txc:#030D12}
#origin [data-tx],#contact [data-tx]{--txsh:#A3161D}
.tl-cert{margin-top:10px}
.tl-link{display:inline-block;margin-top:14px;font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:2.5px solid var(--red);padding-bottom:2px}
.tl-it.l .tl-link{float:right}
html[data-mode="armor"] .tl-link{border-color:var(--gold);color:var(--gold)}
html[data-mode="storm"] .tl-link{border-color:var(--gold);color:var(--gold)}
.tl-cert .tl-dot{background:#F7F0E2}
html[data-mode="armor"] .tl-cert .tl-dot{background:radial-gradient(circle,#2A0E12,#0B0708)}
html[data-mode="storm"] .tl-cert .tl-dot{background:radial-gradient(circle,#0E3644,#041218)}
.hero-hero .spinwrap{display:block;perspective:900px}
.hero-hero .spinwrap .hh-m{animation:hover 2.2s ease-in-out infinite}
.hero-hero .spinwrap{animation:turntable 14s linear infinite;transform-style:preserve-3d}
@keyframes turntable{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-hero .spinwrap,.bug *,.orb *,.dp-ico2 .spin{animation:none!important}}
html[data-mode="armor"] .wk-prog input,html[data-mode="armor"] .vol input{accent-color:#D4A84B}
html[data-mode="storm"] .wk-prog input,html[data-mode="storm"] .vol input{accent-color:#7FD4FF}
html[data-mode="armor"] .bot-in button{background:linear-gradient(180deg,#E6CB91,#B08D4C);color:#0B0708;border:0}
html[data-mode="storm"] .bot-in button{background:linear-gradient(180deg,#CFEFFF,#5BA8E0);color:#041218;border:0}
html[data-mode="armor"] .bot-in input{background:#170A0C;color:#F4ECE4}
html[data-mode="storm"] .bot-in input{background:#08222C;color:#E6F0FA}
/* ---- v5: spinning ring badge, line icons ---- */
.ring-badge{width:150px;height:150px;left:5vw;top:40vh;transform:rotate(-8deg);font:inherit}
.ring-badge svg{width:100%;height:100%;overflow:visible}
.ring-badge text{font:400 11.5px var(--dsp);letter-spacing:.08em;fill:#16141A}
.ring-badge .rb-spin{animation:spin 16s linear infinite;transform-origin:0 0}
.ring-badge .rb-in{fill:#F7F0E2;stroke:#16141A;stroke-width:2.5}
.ring-badge .rb-star{fill:#E2262E;stroke:#16141A;stroke-width:2;stroke-linejoin:round;transform-origin:0 0;animation:rbPulse 2.4s ease-in-out infinite}
.ring-badge .rb-core{fill:#F7F0E2;stroke:#16141A;stroke-width:1.5}
@keyframes rbPulse{50%{transform:scale(1.12) rotate(12deg)}}
html[data-mode="armor"] .ring-badge text{fill:#D4A84B}
html[data-mode="storm"] .ring-badge text{fill:#7FD4FF}
html[data-mode="armor"] .ring-badge .rb-in{fill:#120A0B;stroke:#D4A84B;stroke-width:1.5}
html[data-mode="storm"] .ring-badge .rb-in{fill:#120A0B;stroke:#7FD4FF;stroke-width:1.5}
html[data-mode="armor"] .ring-badge .rb-star{fill:#B3121E;stroke:#D4A84B}
html[data-mode="storm"] .ring-badge .rb-star{fill:#2AA7C4;stroke:#7FD4FF}
html[data-mode="armor"] .ring-badge .rb-core{fill:#FFF3D6;stroke:#D4A84B;filter:drop-shadow(0 0 4px #FFD98A)}
html[data-mode="storm"] .ring-badge .rb-core{fill:#FFF3D6;stroke:#7FD4FF;filter:drop-shadow(0 0 4px #BFF0FF)}
@media (max-width:820px){.ring-badge{width:96px;height:96px;left:3vw;top:auto;bottom:16vh}}
.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tl-dot{color:#16141A}
html[data-mode="armor"] .tl-dot{color:#D4A84B}
html[data-mode="storm"] .tl-dot{color:#7FD4FF}
.vico{width:18px;height:18px;flex:none;opacity:.85}
.vol{display:flex;align-items:center;gap:6px}
.bm-webmark .bm-disc{fill:#16141A;stroke:#F7F0E2;stroke-width:2.5}
.bm-webmark .bm-y{font:400 26px Anton,Impact,sans-serif;fill:#F7F0E2;stroke:none;letter-spacing:-.5px}
.bm-webmark circle:last-child{fill:#16141A}
.brand-mark svg .bm-burst{transform-origin:0 0;animation:burstBreathe 3.2s ease-in-out infinite}
@keyframes burstBreathe{50%{transform:rotate(14deg) scale(1.05)}}
/* ---- J.A.R.V.I.S. button: unmistakably a chat ---- */
.orb .o1{stroke:#D4A84B;stroke-width:1.6;stroke-dasharray:70 10 8 10;fill:none;animation:spin 16s linear infinite}
.orb .cb{fill:#B3121E;stroke:#E8C77A;stroke-width:2.6;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(212,168,75,.45))}
.orb .cdots circle{fill:#FFF4D8;transform-box:fill-box;transform-origin:center;animation:cdot 1.2s ease-in-out infinite}
.orb .cdots circle:nth-child(2){animation-delay:.15s}.orb .cdots circle:nth-child(3){animation-delay:.3s}
@keyframes cdot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.orb .ai-tag rect{fill:#D4A84B;stroke:#120808;stroke-width:1.5}
.orb .ai-tag text{font:700 12px var(--body);fill:#120808;letter-spacing:.06em}
.orb *{transform-box:fill-box}
.orb .o1{transform-box:view-box;transform-origin:center}
html[data-mode="armor"] .dock-bot{background:radial-gradient(circle at 40% 35%,#2A0E12,#0B0708);border:1px solid rgba(212,168,75,.7);box-shadow:0 0 0 6px rgba(212,168,75,.08),0 0 28px rgba(179,18,30,.45)}
html[data-mode="storm"] .dock-bot{background:radial-gradient(circle at 40% 35%,#0E3644,#041218);border:1px solid rgba(127,212,255,.7);box-shadow:0 0 0 6px rgba(127,212,255,.08),0 0 28px rgba(42,167,196,.45)}
html[data-mode="armor"] .dock-bot .ping{background:#D4A84B;border-color:#120808}
html[data-mode="storm"] .dock-bot .ping{background:#7FD4FF;border-color:#071C24}
/* spaceship: keeps spinning and drifts side to side */
.hero-hero .spinwrap{transform:none;perspective:none;animation:shipSpin 12s linear infinite,shipDrift 6s ease-in-out infinite}
@keyframes shipSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes shipDrift{0%,100%{translate:-34px 6px}50%{translate:34px -12px}}
html[data-mode="armor"] .hh-m{filter:drop-shadow(0 0 26px rgba(212,168,75,.45))}
html[data-mode="storm"] .hh-m{filter:drop-shadow(0 0 26px rgba(127,212,255,.45))}
img[data-slot]{object-fit:cover;object-position:center}

#fx{z-index:275}
/* ---- scrapbook collage v2: photos + die-cut stickers + ticket ---- */
.sb{height:980px}
.stk,.ticket{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));z-index:6;cursor:grab;touch-action:none;user-select:none}
.stk{display:inline-block;padding:10px 18px;font:400 24px/1 var(--cmx);letter-spacing:.06em;background:#E2262E;color:#fff;border:3px solid #16141A;border-radius:12px;box-shadow:0 0 0 5px #FBF7EE,0 0 0 7.5px #16141A,8px 10px 0 7px rgba(22,20,26,.25);text-align:center}
.stk.s2{background:#16141A;color:#F1D7A6}
.stk.s3{background:#F1D7A6;color:#16141A}
.stk.s4{background:#FBF7EE;color:#E2262E;font-size:20px}
.stk.s5{background:#16141A;color:#fff;font-size:20px}
.stk.round{border-radius:50%;width:116px;height:116px;display:grid;place-items:center;padding:0;line-height:1.05}
.ticket{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 26px;background:#F1D7A6;border:3px dashed #16141A;font:700 12px var(--body);letter-spacing:.2em;color:#16141A;-webkit-mask:radial-gradient(circle at 0 50%,transparent 12px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 12px,#000 13px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 12px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 12px,#000 13px) right/51% 100% no-repeat}
.ticket b{font:400 30px/1 var(--dsp);letter-spacing:.06em}
.pol img{object-position:center}
html[data-mode="armor"] .stk{background:#1C0A0D;color:#D4A84B;border:1px solid #D4A84B;box-shadow:0 0 0 4px #0B0708,0 0 0 5px rgba(212,168,75,.6),0 0 24px rgba(212,168,75,.25);font-family:Anton;letter-spacing:.1em}
html[data-mode="storm"] .stk{background:#1C0A0D;color:#7FD4FF;border:1px solid #7FD4FF;box-shadow:0 0 0 4px #041218,0 0 0 5px rgba(127,212,255,.6),0 0 24px rgba(127,212,255,.25);font-family:Anton;letter-spacing:.1em}
html[data-mode="armor"] .stk.s1,html[data-mode="armor"] .stk.s4{background:#B3121E;color:#FFF4D8}
html[data-mode="storm"] .stk.s1,html[data-mode="storm"] .stk.s4{background:#2AA7C4;color:#F2FBFF}
html[data-mode="armor"] .ticket{background:#1C0A0D;border-color:#D4A84B;color:#D4A84B}
html[data-mode="storm"] .ticket{background:#1C0A0D;border-color:#7FD4FF;color:#7FD4FF}
@media (max-width:820px){.sb{height:auto}.stk,.ticket{position:relative;left:auto;top:auto}}

/* =====================================================================
   THREE SUITS — visibility
   ===================================================================== */
html:not([data-mode="storm"]) .storm-only{display:none!important}
html[data-mode="storm"] .web-only,html[data-mode="storm"] .armor-only{display:none!important}
html[data-mode="storm"] .hero-hero.storm-only{display:block}
html[data-mode="web"] .hero-card,html:not([data-mode]) .hero-card{display:none}
html[data-mode="web"] .stk,html[data-mode="web"] .ticket{display:none}

/* =====================================================================
   STORM SUIT — night-navy sky, electric blue, bronze runes, crackling light
   ===================================================================== */
html[data-mode="storm"]{
  --paper:#041218; --paper2:#071C24; --card:#0D1630; --ink:#E6F4FF; --ink2:#9FB4CC;
  --red:#2AA7C4; --yel:#7FD4FF; --blue:#DCE8F4; --cyan:#BFF0FF;
  --gold:#7FD4FF; --arc:#BFF0FF; --hot:#2AA7C4; --bronze:#DCE8F4;
  --ac:#7FD4FF; --ac2:#DCE8F4; --line:rgba(127,212,255,.3); --dot:rgba(127,212,255,.05);
}
html[data-mode="storm"] body{background-color:#041218;background-image:
  radial-gradient(ellipse 80% 50% at 20% -10%,rgba(63,196,224,.20),transparent 60%),
  radial-gradient(ellipse 70% 40% at 90% 0%,rgba(220,232,244,.12),transparent 60%),
  linear-gradient(180deg,#030D12 0%,#0A2A36 60%,#041218 100%);background-size:auto;background-attachment:fixed}
/* drifting storm clouds + lightning-lit sky */
html[data-mode="storm"] body::before{content:"";position:fixed;inset:-20% -20% auto;height:70vh;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(150,175,225,.16),transparent) 10% 30%/40% 60% no-repeat,radial-gradient(closest-side,rgba(130,160,215,.13),transparent) 60% 20%/50% 70% no-repeat,radial-gradient(closest-side,rgba(160,190,235,.10),transparent) 90% 40%/36% 60% no-repeat;
  filter:blur(18px);animation:clouds 60s linear infinite alternate}
@keyframes clouds{to{transform:translateX(12%)}}
html[data-mode="storm"].flash body::before{background-color:rgba(200,235,255,.06)}
html[data-mode="storm"] main{position:relative;z-index:1}
html[data-mode="storm"] #bar{z-index:90}
html[data-mode="storm"] .kicker::before{content:"ᛋ ";color:var(--bronze)}
html[data-mode="storm"] :is(.hand,.kicker,.ms-tag,.tl-where,.ro-head p,.mf-sign,.power.thats .tt3){color:#9CE7FF}
html[data-mode="storm"] :is(.power,.tl-card,.ro,.cap,.note,.quip){border-radius:16px}
html[data-mode="storm"] :is(.power,.tl-card,.ro){box-shadow:0 0 0 1px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06),0 0 30px rgba(63,196,224,.10)}
html[data-mode="storm"] :is(.power,.tl-card):hover{box-shadow:0 0 0 1px rgba(127,212,255,.6),0 0 40px rgba(127,212,255,.25)}
html[data-mode="storm"] :is(.btn,.btn-big,.hire){clip-path:none;border-radius:40px}
html[data-mode="storm"] :is(.btn.red,.btn-big){background:linear-gradient(180deg,#CFEFFF,#5BA8E0);color:#03141B;box-shadow:0 0 24px rgba(127,212,255,.45)}
html[data-mode="storm"] .dock-pill{clip-path:none;border-radius:40px}
html[data-mode="storm"] .marquee{background:linear-gradient(90deg,#0B3A48,#1C7C93 50%,#0B3A48);border-block:1px solid rgba(220,232,244,.7)}
html[data-mode="storm"] .marquee.m2{background:#071C24;color:#7FD4FF}
html[data-mode="storm"] .mq b{color:#DCE8F4}
html[data-mode="storm"] .power.thats{background:linear-gradient(150deg,#1C7C93,#0A3340);border-color:rgba(220,232,244,.7)}
html[data-mode="storm"] .tl-dot{color:#7FD4FF}
html[data-mode="storm"] .tl-fill{background:linear-gradient(#BFF0FF,#DCE8F4);box-shadow:0 0 14px #7FD4FF}
html[data-mode="storm"] .suit-btn{background:linear-gradient(180deg,#E2262E,#9E1622);color:#fff}
html[data-mode="storm"] .ring-badge text{fill:#9CE7FF}
html[data-mode="storm"] .ring-badge .rb-in{fill:#0A2A36;stroke:#7FD4FF;stroke-width:1.5}
html[data-mode="storm"] .ring-badge .rb-star{fill:#DCE8F4;stroke:#BFF0FF}
html[data-mode="storm"] .ring-badge .rb-core{fill:#F2FBFF;stroke:#7FD4FF}
html[data-mode="storm"] .stk{background:#0A2833;color:#9CE7FF;border:1px solid #7FD4FF;box-shadow:0 0 0 4px #041218,0 0 0 5px rgba(127,212,255,.6),0 0 24px rgba(127,212,255,.3);font-family:Anton;letter-spacing:.1em;border-radius:24px}
html[data-mode="storm"] .stk.s1,html[data-mode="storm"] .stk.s4{background:#DCE8F4;color:#03141B}
html[data-mode="storm"] .stk.round{border-radius:50%}
html[data-mode="storm"] .ticket{background:#0A2833;border-color:#DCE8F4;color:#DCE8F4}
html[data-mode="storm"] .th-line{background:linear-gradient(#BFF0FF,#3FC4E0);box-shadow:0 0 8px #7FD4FF}
.th-bolt path{fill:#DDF6FF;stroke:#7FD4FF;stroke-width:2}
html[data-mode="storm"] .th-spider{filter:drop-shadow(0 0 6px #7FD4FF)}
.th-core circle{fill:none;stroke:#D4A84B;stroke-width:4}.th-core circle:last-child{fill:#FFF4D8;stroke:none}
/* storm hero: the hammer floats, hums and throws sparks */
.hero-hammer{right:6vw;top:auto;bottom:12vh;height:auto;width:min(26vw,330px)}
.hero-hammer .hm-float{display:block;animation:hmFloat 4.6s ease-in-out infinite}
.hero-hammer .hm-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(63,196,224,.45));animation:hmSpin 14s ease-in-out infinite}
@keyframes hmFloat{0%,100%{translate:0 0;rotate:-8deg}50%{translate:0 -22px;rotate:6deg}}
@keyframes hmSpin{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-24deg)}90%{transform:rotate(370deg)}}
#hammer .hm-aura{animation:aura 1.8s ease-in-out infinite}
@keyframes aura{50%{opacity:.35}}
#hammer .hm-arcs path{stroke-dasharray:60;animation:arc .9s steps(3) infinite}
#hammer .hm-arcs .a2{animation-delay:.2s}#hammer .hm-arcs .a3{animation-delay:.45s}#hammer .hm-arcs .a4{animation-delay:.65s}
@keyframes arc{0%{opacity:0;stroke-dashoffset:60}30%{opacity:1;stroke-dashoffset:0}60%{opacity:.2}100%{opacity:0}}
#hammer .hm-runes{animation:runes 2.4s ease-in-out infinite}
@keyframes runes{50%{stroke:#F2FBFF;filter:drop-shadow(0 0 4px #7FD4FF)}}
.hm-ring{position:absolute;left:50%;top:30%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(127,212,255,.25);pointer-events:none}
.hm-ring.r1{animation:ringPulse 3.2s ease-out infinite}.hm-ring.r2{animation:ringPulse 3.2s ease-out 1.6s infinite}
@keyframes ringPulse{from{scale:.4;opacity:.9}to{scale:1.3;opacity:0}}
@media (max-width:820px){.hero-hammer{opacity:.35;right:-10px;width:44vw}}
/* storm dock + chat icons */
.stormdisc .spin{transform-origin:0 0;animation:spin 7s linear infinite}
.stormdisc .zap,.stormchat .zap{animation:zapFlick 1.4s steps(2) infinite}
@keyframes zapFlick{0%,70%{opacity:1}75%{opacity:.25}80%{opacity:1}88%{opacity:.4}}
.stormchat .cb{fill:#0E3644;stroke:#7FD4FF;stroke-width:2.6;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(127,212,255,.6))}
.stormchat .zap{fill:#DDF6FF;stroke:#7FD4FF;stroke-width:1}
.stormchat .o1{stroke:#DCE8F4}
.stormchat .ai-tag rect{fill:#DCE8F4;stroke:#03141B}
html[data-mode="storm"] .dock-bot{background:radial-gradient(circle at 40% 35%,#0E3644,#041218);border:1px solid rgba(127,212,255,.7);box-shadow:0 0 0 6px rgba(127,212,255,.08),0 0 28px rgba(63,196,224,.5)}
html[data-mode="storm"] #suitFx .plate,#suitFx.to-storm .plate{background:linear-gradient(135deg,#0E3644,#030D12);border-color:#7FD4FF}
#suitFx.to-storm .sfx-core i{border-color:#BFF0FF;box-shadow:0 0 50px #7FD4FF,inset 0 0 30px #7FD4FF}#suitFx.to-storm .sfx-core b{background:#F2FBFF;box-shadow:0 0 80px 30px #7FD4FF}
#suitFx.to-storm .sfx-log{color:#BFF0FF}
.suit-flash.storm{background:radial-gradient(circle,#FFFFFF 0%,#BFF0FF 30%,rgba(7,11,22,.85) 80%)}
.suit-ring.storm{border-color:#BFF0FF;box-shadow:0 0 60px #7FD4FF}

/* =====================================================================
   J.A.R.V.I.S. HUD (armour suit)
   ===================================================================== */
#hud{position:fixed;inset:0;z-index:85;pointer-events:none;font:600 11px/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;letter-spacing:.18em;color:rgba(243,213,138,.8);text-transform:uppercase}
.hud-c{position:absolute;width:46px;height:46px;border:1.5px solid rgba(212,168,75,.65)}
.hud-c.tl{left:14px;top:84px;border-right:0;border-bottom:0}.hud-c.tr{right:14px;top:84px;border-left:0;border-bottom:0}
.hud-c.bl{left:14px;bottom:14px;border-right:0;border-top:0}.hud-c.br{right:14px;bottom:14px;border-left:0;border-top:0}
.hud-top{position:absolute;left:72px;right:72px;top:92px;display:flex;justify-content:space-between;gap:20px;opacity:.85}
.hud-top b{color:#B3121E}.hud-top em{font-style:normal;color:#FFF4D8}
.hud-pwr{display:inline-block;width:46px;height:6px;border:1px solid rgba(212,168,75,.6);vertical-align:middle;margin:0 4px}
.hud-pwr i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#B3121E,#D4A84B);animation:pwr 3s ease-in-out infinite}
@keyframes pwr{50%{width:86%}}
.hud-alt{position:absolute;left:22px;top:50%;height:34vh;translate:0 -50%;width:10px;border-left:1px solid rgba(212,168,75,.45);background:repeating-linear-gradient(transparent 0 11px,rgba(212,168,75,.5) 11px 12px)}
.hud-alt i{position:absolute;left:-1px;top:0;width:3px;height:100%;background:#D4A84B;transform-origin:top;transform:scaleY(0);box-shadow:0 0 8px #D4A84B}
.hud-alt span{position:absolute;left:16px;bottom:-22px;white-space:nowrap}
.hud-console{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:9px 16px;background:rgba(12,6,7,.72);border:1px solid rgba(212,168,75,.4);text-transform:none;letter-spacing:.08em;font-size:12.5px;color:#F3D58A;max-width:min(560px,60vw);white-space:nowrap;overflow:hidden;backdrop-filter:blur(4px)}
.hc-dot{width:7px;height:7px;border-radius:50%;background:#B3121E;box-shadow:0 0 8px #B3121E;animation:blinkDot 1s steps(2) infinite;flex:none}
@keyframes blinkDot{50%{opacity:.2}}
.hud-scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.18) 3px 4px);opacity:.35}
.hud-scan::after{content:"";position:absolute;left:0;right:0;height:120px;background:linear-gradient(transparent,rgba(212,168,75,.06),transparent);animation:scanY 6s linear infinite}
@keyframes scanY{from{top:-120px}to{top:100%}}
@media (max-width:820px){.hud-top,.hud-alt{display:none}.hud-console{bottom:84px;font-size:11px;max-width:86vw}.hud-c.tl,.hud-c.tr{top:70px}}
/* armour: monospace system labels for a machine voice */
html[data-mode="armor"] :is(.kicker,.hand,.tl-when,.bd-org,.ro-c span,.ms-tag,.quip,.cap-tag,.tl-where){font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace!important}
html[data-mode="armor"] .quip::before{content:"> ";color:#B3121E}
html[data-mode="armor"] .sec-head .h-sec{position:relative}

/* =====================================================================
   HERO status card (armour + storm only — the web hero keeps its classic layout)
   ===================================================================== */
.hero-card{position:absolute;right:5vw;top:22vh;z-index:4;width:min(340px,28vw);padding:20px 22px;text-align:left}
.hc-k{display:flex;align-items:center;gap:10px;font:700 12px var(--body);letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.hc-live{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:blinkDot 1.2s steps(2) infinite}
.hc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hc-list li{display:grid;gap:2px;font-size:14.5px;line-height:1.35}
.hc-list b{font:700 11px var(--body);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.hc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px}
.hc-stats p{display:grid;gap:2px}.hc-stats b{font:400 30px/1 var(--dsp)}.hc-stats span{font-size:11px;line-height:1.25;opacity:.75}
html[data-mode="armor"] .hero-card{background:var(--brk),linear-gradient(180deg,rgba(44,12,16,.88),rgba(16,8,9,.92));border:1px solid rgba(212,168,75,.35);color:#F4ECE4;box-shadow:0 30px 70px rgba(0,0,0,.55);font-family:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace}
html[data-mode="armor"] .hero-card .hc-k{color:#D4A84B}html[data-mode="armor"] .hc-stats{border-top:1px solid rgba(212,168,75,.3)}html[data-mode="armor"] .hc-stats b{color:#D4A84B}
html[data-mode="storm"] .hero-card{background:linear-gradient(180deg,rgba(10,40,52,.85),rgba(4,16,22,.9));border:1px solid rgba(127,212,255,.35);border-radius:18px;color:#E6F0FA;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 40px rgba(63,196,224,.15);backdrop-filter:blur(6px)}
html[data-mode="storm"] .hero-card .hc-k{color:#9CE7FF}html[data-mode="storm"] .hc-stats{border-top:1px solid rgba(127,212,255,.3)}html[data-mode="storm"] .hc-stats b{color:#DCE8F4}
html[data-mode="armor"] .hero-hero.armor-only{right:8vw;bottom:8vh}
html[data-mode="storm"] .hero-hammer{right:9vw;bottom:6vh;width:min(18vw,230px)}
@media (max-width:1100px){.hero-card{display:none!important}}

/* =====================================================================
   contact: bigger, roomier links + suit hint
   ===================================================================== */
.ct-l{gap:22px 56px;margin-top:56px}
.ct-l a{font-size:clamp(17px,1.6vw,22px);letter-spacing:.14em;padding-bottom:6px;border-bottom-width:3px}
.ct-l li:last-child a{font-size:clamp(17px,1.6vw,22px)}
.suit-k{font-size:clamp(15px,1.4vw,19px);letter-spacing:.22em;margin-top:20px}
.suit-k kbd{font-size:16px;padding:2px 9px}
/* hero layout v2 (armour + storm): status card bottom-right, suit element top-right */
.hero-card{top:auto;bottom:11vh;right:3vw;width:min(310px,24vw);padding:16px 18px}
.hc-list li{font-size:13.5px}
html[data-mode="armor"] .hero-hero.armor-only{top:13vh;bottom:auto;right:6vw}
html[data-mode="armor"] .hh-m{height:250px}
html[data-mode="storm"] .hero-hammer{top:12vh;bottom:auto;right:7vw;width:min(15vw,200px)}
html[data-mode="storm"] .ro-c.w{background:linear-gradient(135deg,rgba(42,167,196,.85),rgba(10,51,64,.9))}
html[data-mode="storm"] .ro-c.w .n{color:#F2FBFF}
html[data-mode="storm"] .ro-c.w span{color:#D6F6FF}
@media (max-width:1280px){.hero-card{display:none!important}}
@media (max-width:1500px){.hero-card{display:none!important}}
/* ===== storm v2: realm backdrop, two weapons, felt power ===== */
html[data-mode="storm"] body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(../assets/art/realm-storm.webp) center/cover no-repeat;opacity:.42;mix-blend-mode:screen;animation:realmDrift 40s ease-in-out infinite alternate}
@keyframes realmDrift{to{transform:scale(1.06) translateY(-1.5%)}}
html[data-mode="storm"].flash body::after{opacity:.7}
.hero-hammer{pointer-events:auto;cursor:pointer}
.hero-hammer .hm-float{position:absolute;display:block}
.hero-hammer .hm-float.hm{position:relative;z-index:2}
.hero-hammer .hm-float.ax{width:78%;left:-48%;top:6%;z-index:1;animation:axFloat 5.4s ease-in-out infinite}
.hero-hammer .ax-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(150,210,255,.45))}
@keyframes axFloat{0%,100%{translate:0 0;rotate:24deg}50%{translate:0 -18px;rotate:16deg}}
#stormaxe .ax-runes{animation:runes 2.8s ease-in-out infinite}
#stormaxe .hm-arcs path{stroke-dasharray:60;animation:arc 1.1s steps(3) infinite}
#stormaxe .hm-arcs .a2{animation-delay:.35s}#stormaxe .hm-arcs .a3{animation-delay:.7s}
.hm-charge{position:absolute;left:30%;top:24%;width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(235,248,255,.95),rgba(150,210,255,.45) 35%,transparent 68%);opacity:0;mix-blend-mode:screen}
.hero-hammer.charging .hm-charge{animation:charge 1.2s ease-out}
.hero-hammer.charging .hm-svg,.hero-hammer.charging .ax-svg{filter:drop-shadow(0 0 40px #DCF2FF) drop-shadow(0 0 80px #9ED8FF) brightness(1.35)}
.hero-hammer.charging #hammer .hm-arcs path,.hero-hammer.charging #stormaxe .hm-arcs path{animation-duration:.25s}
@keyframes charge{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.2}100%{opacity:0;scale:2.2}}
#hero.quake{animation:quake .45s linear}
@keyframes quake{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:5px -4px}60%{translate:-4px -2px}80%{translate:3px 2px}}
html[data-mode="storm"] .hero-hammer{width:min(14vw,190px)}

/* =====================================================================
   v7 — hero machine (armour), axe-in-stone (storm), portal transitions, section FX
   ===================================================================== */
.hero-machine,.hero-stone{position:absolute;z-index:2;pointer-events:none}
.hero-machine{right:4vw;bottom:9vh;width:min(22vw,300px);aspect-ratio:1}
.hero-machine svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 22px rgba(212,168,75,.35))}
.hero-machine .mc-gear.g-a{animation:spin 14s linear infinite}
.hero-machine .mc-gear.g-b{animation:spin 6s linear infinite reverse}
.hero-machine .mc-gear.g-c{animation:spin 7.5s linear infinite reverse}
.hero-machine .mc-g1{animation:spin 30s linear infinite reverse}
.hero-machine .mc-scan{animation:spin 3.2s linear infinite}
.hero-machine .mc-core{transform-origin:center;transform-box:fill-box;animation:corePulse 1.6s ease-in-out infinite}
@keyframes corePulse{50%{transform:scale(1.18);opacity:.8}}
.hero-machine .pst{fill:#D4A84B;stroke:#120808;stroke-width:1.5;animation:piston 1.2s ease-in-out infinite}
.hero-machine .p2{animation-delay:-.6s}
@keyframes piston{50%{transform:translateX(var(--d,14px))}}
.hero-machine .p1{--d:16px}.hero-machine .p2{--d:-16px}
.hero-machine .mc-labels text,.hero-machine .mc-labels path{animation:blinkDot 2.4s steps(2) infinite}
@media (max-width:820px){.hero-machine{opacity:.3;width:46vw;right:-6vw}}
.hero-stone{left:20vw;bottom:3vh;width:min(11vw,140px)}
.hero-stone .st-axe{display:block;width:70%;margin:0 auto -18%;rotate:-8deg;transform-origin:50% 100%;animation:axeHum 3.6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(150,210,255,.5))}
.hero-stone .st-axe svg{display:block;width:100%;height:auto;overflow:visible}
.hero-stone .st-rock{display:block;width:100%;height:auto;position:relative;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.hero-stone .st-glow{position:absolute;left:50%;bottom:18%;width:120%;aspect-ratio:3/1;translate:-50% 0;border-radius:50%;background:radial-gradient(rgba(170,225,255,.5),transparent 65%);animation:aura 2.2s ease-in-out infinite;pointer-events:none}
@keyframes axeHum{0%,100%{rotate:-8deg}50%{rotate:-5deg}}
.hero-stone.struck .st-axe{animation:axeStruck .5s linear}
@keyframes axeStruck{0%,100%{rotate:-8deg;filter:drop-shadow(0 0 18px rgba(150,210,255,.5))}20%{rotate:-11deg;filter:drop-shadow(0 0 50px #EAF7FF) brightness(1.8)}60%{rotate:-6deg}}
@media (max-width:820px){.hero-stone{width:22vw;left:2vw;bottom:14vh;opacity:.6}}
/* the hammer alone, a bit smaller */
html[data-mode="storm"] .hero-hammer{width:min(11vw,160px);top:14vh;right:8vw}
/* name vortex when the hammer hits YASH */
.name-vortex{position:absolute;left:50%;top:50%;width:min(70vw,900px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:2;opacity:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(220,240,255,.0) 0 10deg,rgba(190,230,255,.28) 10deg 13deg,rgba(220,240,255,0) 13deg 26deg);
  -webkit-mask:radial-gradient(circle,transparent 8%,#000 22%,#000 48%,transparent 70%);mask:radial-gradient(circle,transparent 8%,#000 22%,#000 48%,transparent 70%)}
.name-vortex.go{animation:vortex 2.4s ease-in-out}
@keyframes vortex{0%{opacity:0;transform:rotate(0) scale(.3)}20%{opacity:1}80%{opacity:1;transform:rotate(1080deg) scale(1.05)}100%{opacity:0;transform:rotate(1300deg) scale(1.4)}}
.name.zapped{animation:nameZap .12s steps(2) 8}
@keyframes nameZap{50%{filter:brightness(2.2) drop-shadow(0 0 30px #DFF3FF);translate:3px -2px}}

/* ---------- PORTAL: entering the scrapbook ---------- */
#portal{position:fixed;inset:0;z-index:240;pointer-events:none;visibility:hidden;overflow:hidden}
.pt-web{position:absolute;inset:0;width:100%;height:100%}
.pt-web path{fill:none;stroke:#16141A;stroke-width:3;stroke-linecap:round}
.pt-web .pt-bg{fill:#F7F0E2;stroke:none}
.pt-door{position:absolute;left:0;right:0;height:50.5%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(-45deg,#1A0A0D 0 26px,#120808 26px 52px),linear-gradient(#2A0E12,#0B0708);
  font:700 15px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.32em;color:#D4A84B}
.pt-door::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,#D4A84B 0 40px,#120808 40px 80px)}
.pt-door.top{top:0;border-bottom:2px solid #D4A84B}.pt-door.top::after{bottom:0}
.pt-door.bot{bottom:0;border-top:2px solid #D4A84B}.pt-door.bot::after{top:0}
.pt-seal{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:14px 26px;border:2px solid #D4A84B;background:#0B0708;color:#FFE3A0;font:700 22px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3em;box-shadow:0 0 40px rgba(212,168,75,.5);opacity:0;white-space:nowrap}
.pt-vortex{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(20,50,70,.75),rgba(3,10,16,.97) 60%);opacity:0}
.pt-vortex i{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;translate:-50% -50%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,transparent 0 12deg,rgba(210,240,255,.55) 12deg 15deg,transparent 14deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 4%,#000 14%,#000 40%,transparent 60%);mask:radial-gradient(circle,transparent 4%,#000 14%,#000 40%,transparent 60%)}
.pt-vortex i:nth-child(2){width:110vmax;height:110vmax;background:repeating-conic-gradient(from 20deg,transparent 0 8deg,rgba(170,225,255,.5) 8deg 11deg,transparent 10deg 20deg)}
.pt-vortex i:nth-child(3){width:60vmax;height:60vmax;background:radial-gradient(circle,rgba(235,248,255,.9),rgba(150,210,255,.3) 30%,transparent 60%);-webkit-mask:none;mask:none}

/* ---------- section entrance FX layer ---------- */
.sec-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sec-fx .burst{position:absolute;left:50%;top:120px;width:120vmax;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  background:radial-gradient(rgba(226,38,46,.18) 2px,transparent 2.6px) 0 0/16px 16px;-webkit-mask:radial-gradient(circle,#000 0 30%,transparent 55%);mask:radial-gradient(circle,#000 0 30%,transparent 55%)}
.sec-fx .laser{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#FFD98A 20%,#fff 50%,#FFD98A 80%,transparent);box-shadow:0 0 18px #D4A84B,0 0 40px rgba(212,168,75,.5);opacity:0}
.sec-fx .zap{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 10%,rgba(220,240,255,.35),transparent 60%);opacity:0}
section{isolation:isolate}
.lock{position:relative}
.lock::before,.lock::after{content:"";position:absolute;width:26px;height:26px;border:2px solid #D4A84B;opacity:0;pointer-events:none;transition:none}
.lock::before{left:-14px;top:-14px;border-right:0;border-bottom:0}.lock::after{right:-14px;bottom:-14px;border-left:0;border-top:0}
html[data-mode="armor"] .lock.locked::before{animation:lockA .7s cubic-bezier(.2,.8,.2,1) forwards}
html[data-mode="armor"] .lock.locked::after{animation:lockB .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lockA{0%{opacity:0;translate:-40px -40px}60%{opacity:1}100%{opacity:1;translate:0 0}}
@keyframes lockB{0%{opacity:0;translate:40px 40px}60%{opacity:1}100%{opacity:1;translate:0 0}}
html[data-mode="storm"] .h-sec.crackle{animation:crackle .5s steps(2) 3}
@keyframes crackle{50%{filter:brightness(1.8) drop-shadow(0 0 22px #CFEFFF);translate:2px -1px}}
/* ===== loader v3: thread + spider + counter + THWIP (per suit) ===== */
#loader{background:#141217}
.ld-thread{width:2px;background:#F4ECDC;margin-left:-1px;height:0}
.ld-spider{width:56px;height:56px;margin-left:-28px;top:0;transform:translateY(-80px)}
.ld-num{position:absolute;left:50%;top:44vh;margin:0;translate:-50% 0;font:400 clamp(110px,11vw,170px)/1 var(--cmx);font-style:italic;color:#F4ECDC;letter-spacing:.01em;transform:skewX(-6deg)}
.ld-word{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;font:400 clamp(110px,14vw,230px)/1 var(--cmx);font-style:italic;color:#F2C14E;letter-spacing:.02em;
  text-shadow:10px 10px 0 #E2262E;transform:skewX(-8deg) rotate(-5deg);white-space:nowrap}
/* ===== portal v2: comic slam (web) / robotic assembly (armour) ===== */
.pt-comic,.pt-robo{position:absolute;inset:0}
.pc{position:absolute;border:6px solid #16141A;box-shadow:10px 10px 0 #16141A;opacity:0}
.pc::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.18) 2.2px,transparent 2.6px) 0 0/12px 12px}
.pc.p1{left:-2%;top:-3%;width:44%;height:52%;background:#E2262E;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.pc.p2{left:40%;top:-3%;width:64%;height:44%;background:#F1D7A6;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
.pc.p3{left:-2%;top:47%;width:36%;height:56%;background:#F7F0E2}
.pc.p4{left:32%;top:39%;width:40%;height:64%;background:#16141A;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.pc.p5{left:70%;top:39%;width:34%;height:64%;background:#E2262E;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
.pc.p2::before,.pc.p5::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0 6deg,transparent 6deg 12deg);animation:spin 20s linear infinite}
.pt-pow{position:absolute;left:50%;top:50%;width:min(64vw,760px);aspect-ratio:1.6;translate:-50% -50%;display:grid;place-items:center;opacity:0;
  background:#F4C430;clip-path:polygon(50% 0,58% 22%,80% 6%,74% 30%,100% 30%,80% 48%,98% 66%,72% 64%,78% 92%,56% 74%,46% 100%,40% 74%,16% 92%,24% 64%,0 70%,18% 48%,2% 28%,28% 30%,22% 6%,42% 22%);filter:drop-shadow(10px 10px 0 #16141A)}
.pt-pow b{font:400 clamp(70px,9vw,140px)/1 var(--cmx);color:#E2262E;-webkit-text-stroke:4px #16141A;text-shadow:7px 7px 0 #16141A;transform:rotate(-8deg)}
.pt-cap{position:absolute;left:4vw;top:8vh;padding:12px 18px;background:#FFF6DC;border:4px solid #16141A;box-shadow:6px 6px 0 #16141A;font:400 26px var(--cmx);letter-spacing:.06em;color:#16141A;opacity:0}
.pr-grid{position:absolute;inset:0;background:#0B0708 linear-gradient(rgba(212,168,75,.12) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(212,168,75,.12) 1px,transparent 1px) 0 0/40px 40px;opacity:0}
.pr-hex{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 50%,rgba(255,217,138,.0) 0 30%,rgba(11,7,8,.0) 31%),
  conic-gradient(from 30deg at 50% 50%,#1A0A0D 0 60deg,#22090D 60deg 120deg,#170A0C 120deg 180deg,#1C0B0E 180deg 240deg,#22090D 240deg 300deg,#1A0A0D 300deg);
  clip-path:circle(0% at 50% 50%);border:2px solid #D4A84B}
.pt-arm{position:absolute;bottom:-4vh;width:min(46vw,680px);height:auto;overflow:visible;opacity:0;filter:drop-shadow(0 0 14px rgba(212,168,75,.35))}
.pt-arm.l{left:-4vw}.pt-arm.r{right:-4vw;transform:scaleX(-1)}
.pt-arm rect,.pt-arm circle,.pt-arm path{fill:#2A1A10;stroke:#D4A84B;stroke-width:3}
.pt-arm .a-pipe{fill:#B3121E;stroke:none}
.pt-arm .a-tip{fill:#FFF4D8;stroke:#FFD98A}
.pr-weld{position:absolute;left:50%;top:44%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#FFF;box-shadow:0 0 30px 14px #FFD98A,0 0 80px 40px rgba(255,170,60,.6);opacity:0}
.pr-core{position:absolute;left:50%;top:44%;width:0;height:0}
.pr-core i{position:absolute;left:0;top:0;border-radius:50%;translate:-50% -50%;border:3px solid #D4A84B;opacity:0}
.pr-core i:nth-child(1){width:140px;height:140px;border-style:dashed}
.pr-core i:nth-child(2){width:220px;height:220px;border-width:1.5px}
.pr-core i:nth-child(3){width:60px;height:60px;background:radial-gradient(#FFF8E6,#FFD98A 50%,#D4A84B);border:0;box-shadow:0 0 40px #FFD98A}
.pr-log{position:absolute;left:5vw;top:12vh;margin:0;font:600 14px/1.8 ui-monospace,Menlo,Consolas,monospace;color:#F3D58A;letter-spacing:.08em;white-space:pre}
.pr-bar{position:absolute;left:50%;bottom:12vh;translate:-50% 0;width:min(46vw,520px);height:10px;border:1px solid #D4A84B;opacity:0}
.pr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B3121E,#D4A84B,#FFE3A0);box-shadow:0 0 12px #D4A84B}
.pr-bar span{position:absolute;right:0;top:-26px;font:700 13px ui-monospace,Menlo,Consolas,monospace;color:#FFE3A0;letter-spacing:.15em}
/* ===== storm: axe summons a tempest ===== */
.hero-stone{pointer-events:auto;cursor:pointer}
html.tempest body::before{background-color:rgba(2,6,10,.55);transition:background-color .6s}
html.tempest #hero{filter:brightness(.8) contrast(1.1);transition:filter .6s}
.pt-arm{width:min(58vw,860px);bottom:-10vh}.pr-weld,.pr-core{top:40%}
.ld-spider{width:72px;height:72px;margin-left:-36px}