:root,[data-theme=midnight]{--bg:#14121b;--bg2:#1d1a29;--ink:#efe9f6;--mut:#9a92ad;--accent:#a78bdb;--accent2:#f08fb0;--line:#ffffff1c;--glow:#3a2a5c}
[data-theme=paper]{--bg:#f6f2ea;--bg2:#ebe5d8;--ink:#26222e;--mut:#6d6678;--accent:#7d62b8;--accent2:#c2557d;--line:#0000001a;--glow:#d9cdf0}
[data-theme=velvet]{--bg:#0c0b0a;--bg2:#17140f;--ink:#f3ead5;--mut:#a39a82;--accent:#c9a54c;--accent2:#e8d9a8;--line:#c9a54c33;--glow:#3a2f12}
[data-theme=electric]{--bg:#0d1030;--bg2:#161b4a;--ink:#e8ecff;--mut:#8f98d4;--accent:#3db9ff;--accent2:#9a6bff;--line:#6f7cff33;--glow:#26308a}
[data-theme=forest]{--bg:#0f1e17;--bg2:#17291f;--ink:#ece8dc;--mut:#98a692;--accent:#9dbf9a;--accent2:#d6b98a;--line:#ffffff1a;--glow:#25513b}
[data-theme=mono]{--bg:#000;--bg2:#111;--ink:#fff;--mut:#999;--accent:#fff;--accent2:#bbb;--line:#ffffff2a;--glow:#222}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 75% -10%,var(--glow),transparent 70%),var(--bg);color:var(--ink);font:16px/1.6 system-ui,sans-serif;min-height:100vh}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.05;margin:.2em 0}h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.02em}h1 em{color:var(--accent2)}a{color:var(--accent)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bg2);padding:8px;z-index:9}
.top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:14px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:1.3rem Georgia,serif}.brand b{color:var(--accent2);font-weight:400}.mascot{width:34px;height:34px}
nav{display:flex;gap:20px;flex:1;flex-wrap:wrap}nav a{color:var(--mut);text-decoration:none;font-size:.95rem}nav a:hover{color:var(--ink)}
.ctl{display:flex;gap:8px}select,input{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px;font:inherit}
.btn{background:var(--accent);color:var(--bg);border:0;border-radius:6px;padding:10px 18px;font:600 .95rem system-ui;cursor:pointer;min-height:44px}.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}.btn:hover{filter:brightness(1.12)}.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,5vw,72px);align-items:center;padding:clamp(24px,6vw,80px) clamp(16px,4vw,48px)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--accent2)}.hero-t p{color:var(--mut);max-width:44ch}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:4px 28px 4px 28px;padding:clamp(16px,3vw,32px)}
.big{font:300 clamp(3rem,10vw,6rem)/1 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}.row input{width:70px}
.t{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-top:1px solid var(--line);align-items:center}.t .big{font-size:2.6rem}.t.done .big{color:var(--accent2)}.t small{color:var(--mut)}
.msg{color:var(--accent2);min-height:1.6em;font-style:italic}
.arcade{--accent:#ff7a59}.arcade h1{text-transform:uppercase;letter-spacing:.02em}
.gamelist{display:grid;gap:16px}.game{display:block;padding:24px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--bg2);border-radius:4px 28px 4px 28px;transition:transform .2s}.game:hover{transform:translateX(8px)}.game span{color:var(--accent);font:700 1rem monospace}.game p{color:var(--mut);margin:0}.g1{margin-left:40px}
#zone{height:240px;display:grid;place-items:center;border-radius:12px;cursor:pointer;user-select:none;font-size:1.4rem;text-align:center;background:var(--bg);border:1px solid var(--line)}#zone.wait{background:#7a1f2b}#zone.go{background:#1f7a46}
.prose{max-width:68ch;margin:0 auto;padding:40px 20px}.prose .game{margin-top:20px}
footer{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;padding:24px clamp(16px,4vw,48px);border-top:1px solid var(--line);color:var(--mut);font-size:.85rem}
.study .mascot,.study footer,.study .eyebrow,.study .hero-t p,.study nav a:not(:first-child){display:none}.study{background:var(--bg)}.study *{animation:none!important;transition:none!important}.study .hero{grid-template-columns:1fr}
@media(max-width:800px){.hero{grid-template-columns:1fr}.g1{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[data-theme=midnight]{--bg:#0a0809;--bg2:#15100f;--ink:#ece3d3;--mut:#9b8c80;--accent:#c4262e;--accent2:#e3c98f;--line:#e3c98f26;--glow:#3b0a10;--orb:#b8312f55;--l1:#1a0c0d;--l2:#120809;--l3:#0a0506}
[data-theme=paper]{--orb:#ffd9a066;--l1:#d8cdb6;--l2:#cbbd9f;--l3:#bfae8b}
[data-theme=velvet]{--orb:#c9a54c55;--l1:#2a1d08;--l2:#1b1305;--l3:#100b03}
[data-theme=electric]{--orb:#9a6bff77;--l1:#1b2270;--l2:#121654;--l3:#0a0d38}
[data-theme=forest]{--bg:#07140d;--glow:#1c5a3a;--orb:#bfe8b055;--l1:#0f3822;--l2:#0a2917;--l3:#051a0e}
[data-theme=mono]{--orb:#ffffff22;--l1:#1a1a1a;--l2:#101010;--l3:#080808}
body{overflow-x:hidden;perspective:1400px}main,header,footer{position:relative;z-index:2}
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.scene::before{content:"";position:absolute;width:42vmax;height:42vmax;right:8vw;top:-8vmax;border-radius:50%;background:radial-gradient(circle,var(--orb),transparent 65%);animation:fl 9s ease-in-out infinite}
.ly{position:absolute;left:-5%;width:110%;height:46vh;bottom:-4vh;transition:transform .2s}.ly:nth-child(2){height:34vh}.ly:nth-child(3){height:24vh}
[data-theme=electric] .scene::after{content:"";position:absolute;left:-50%;width:200%;height:55vh;bottom:-8vh;background:repeating-linear-gradient(90deg,#3db9ff55 0 1px,transparent 1px 60px),repeating-linear-gradient(0deg,#3db9ff55 0 1px,transparent 1px 40px);transform:rotateX(68deg);transform-origin:bottom;animation:gr 3s linear infinite}
[data-theme=forest] .scene::after{content:"";position:absolute;inset:auto 0 0;height:40vh;background:linear-gradient(transparent,#8fd4a033);animation:fl 12s ease-in-out infinite}
[data-theme=mono] .scene{filter:grayscale(1)}[data-theme=mono] .scene::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#0000002a 3px 4px)}
@keyframes fl{50%{transform:translateY(24px) scale(1.06)}}@keyframes gr{to{background-position:0 40px,0 0}}
.rv{opacity:0;transform:translateY(50px) rotateX(8deg);transition:opacity .9s,transform .9s}.rv.in{opacity:1;transform:none}
.tilt{transition:transform .15s;transform-style:preserve-3d;box-shadow:0 30px 60px #0008}
.comp{display:flex;align-items:center;gap:14px;margin-top:24px}.mw{width:130px;animation:fl 5s ease-in-out infinite;filter:drop-shadow(0 12px 18px #000a)}.mw .mascot{width:100%;height:auto}
.bubble{background:var(--bg2);border:1px solid var(--line);padding:12px 18px;border-radius:18px 18px 18px 2px;font-style:italic;color:var(--ink)!important}
.sec{padding:clamp(60px,12vw,140px) clamp(16px,6vw,96px);min-height:60vh;display:flex;flex-direction:column;justify-content:center}.sec h2{font-size:clamp(2.2rem,6vw,5rem)}.sec.dark{background:#0006}.lead{max-width:50ch;font-size:1.3rem;color:var(--mut)}
.rows a{display:flex;justify-content:space-between;gap:16px;padding:28px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:clamp(1.6rem,4vw,3rem) Georgia,serif;transition:padding .3s,color .3s}.rows a:hover{padding-left:24px;color:var(--accent2)}.rows span{font:1rem system-ui;color:var(--mut);align-self:center}
.big{text-shadow:0 0 30px var(--accent)}.panel{backdrop-filter:blur(6px)}.arcade .game{background:linear-gradient(135deg,var(--bg2),#0000)}.arcade .game:hover{box-shadow:0 0 0 1px var(--accent),0 20px 40px #0008}
#app:fullscreen{display:grid;place-content:center;background:var(--bg);text-align:center;border-radius:0}#app:fullscreen .big{font-size:20vmin}
.ring{position:fixed;inset:0;z-index:99;background:#000d;display:grid;place-content:center;text-align:center;gap:16px}.tg{position:absolute;width:56px;height:56px;border-radius:50%;background:var(--accent);box-shadow:0 0 24px var(--accent);border:0;cursor:pointer}#field{position:relative;height:320px;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dark-out{background:#000;color:#000;min-height:120px}
h1{font-size:clamp(1.9rem,4.2vw,3rem)}.sec h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}.rows a{font-size:clamp(1.1rem,2.2vw,1.6rem);padding:20px 0}.lead{font-size:1.05rem}.big{font-size:clamp(2.2rem,6vw,3.6rem)}.t .big{font-size:2rem}.sec{min-height:50vh}
.stage{perspective:900px;height:300px;margin:20px 0;display:grid;place-items:center}.r3{position:relative;width:110px;height:150px;transform-style:preserve-3d;animation:spin 22s linear infinite}.r3 i{position:absolute;inset:0;display:grid;place-items:center;font:normal 2rem Georgia,serif;color:var(--accent2);border:1px solid var(--accent);background:#0009;box-shadow:0 0 20px var(--glow)}@keyframes spin{to{transform:rotateY(360deg)}}
.cab{width:170px;float:right;margin:0 0 12px 20px;animation:fl 6s ease-in-out infinite;filter:drop-shadow(0 14px 20px #000a)}.cab .scr{animation:flick 3s steps(2) infinite}@keyframes flick{50%{opacity:.75}}
.mascot .pp{transition:transform .1s}.prose h2{font-size:1.5rem;margin-top:1.6em}.prose p{color:var(--mut)}
.hero3d{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px;align-items:center;padding:clamp(24px,5vw,70px) clamp(16px,5vw,80px);min-height:88vh;background:linear-gradient(#0000,var(--bg)),url(../img/hero.svg) center/cover}
.deck{height:480px;perspective:1100px}.dk{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .15s}.dc{position:absolute;left:8%;top:0;width:210px;padding:16px 18px;border:1px solid var(--line);background:#000b;border-radius:4px 22px 4px 22px;color:var(--ink);text-decoration:none;box-shadow:0 30px 50px #000a;animation:fl 6s ease-in-out infinite}.dc:nth-child(2){animation-delay:-2s}.dc:nth-child(3){animation-delay:-4s}.dc small{color:var(--accent2);letter-spacing:.2em;font-size:.7rem}.dc b{display:block;font:300 2.4rem ui-monospace,Consolas,monospace;text-shadow:0 0 18px var(--accent)}.dc span{color:var(--mut);font-size:.85rem}
.rings{display:flex;flex-wrap:wrap;gap:24px}.rg{position:relative;width:120px;text-align:center}.rg svg{width:120px;transform:rotate(-90deg)}.rg circle{fill:none;stroke-width:4}.rg .tr{stroke:var(--line)}.rg .pg{stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 6px var(--accent))}.rg b{position:absolute;inset:0;display:grid;place-items:center;font:300 1.8rem ui-monospace,monospace;padding-bottom:18px}.rg small{color:var(--mut);letter-spacing:.2em}
.arcade,.arc{font-family:ui-monospace,'Courier New',monospace}.crt{background:linear-gradient(#0000,var(--bg)),url(../../assets/img/arcade.svg) center/cover;grid-template-columns:1fr}.arcade h1{letter-spacing:.12em;text-shadow:0 0 18px var(--accent),3px 3px 0 #0008}.blink{animation:bl 1.2s steps(2) infinite}@keyframes bl{50%{opacity:.2}}
.sel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;margin-top:20px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;perspective:800px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:#000a;border:2px solid var(--accent);color:var(--ink);text-decoration:none;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;text-align:center;transition:transform .2s,box-shadow .2s;box-shadow:inset 0 0 0 3px #000,4px 4px 0 var(--accent)}.tile svg{width:56px;color:var(--accent2)}.tile b{color:var(--accent)}.tile:hover,.tile:focus,.tile.on{transform:translateZ(40px) rotateX(-6deg) scale(1.06);box-shadow:0 0 28px var(--accent),inset 0 0 0 3px #000;outline:none}
.det{border:2px solid var(--accent2);padding:20px;background:#000b;box-shadow:inset 0 0 0 3px #000;position:relative}.det h3{font-size:1.4rem;margin:.2em 0;text-transform:uppercase;letter-spacing:.06em}.det p{color:var(--mut)}.det .blink{color:var(--accent)}
.crt::after,.arcade::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px)}
.tool .hero{grid-template-columns:1fr;text-align:center;min-height:80vh;align-content:center}.tool .hero-t p{margin:auto}.tool .big{font-size:clamp(3.4rem,13vw,9rem)}.tool .t .big{font-size:clamp(2rem,6vw,3.4rem)}.tool .panel{background:#0007;border-radius:4px 28px 4px 28px;max-width:960px;margin:0 auto;width:100%}.tool .row{justify-content:center}.tool .t{text-align:left}
.lib{background:linear-gradient(var(--bg),#0000),url(../img/library.svg) center/cover}
@media(max-width:800px){.hero3d,.sel{grid-template-columns:1fr}.deck{height:430px;transform:scale(.8);transform-origin:top left}.dc{left:0}}
a{text-underline-offset:3px}.btn,.dc,.tile,.cc,.game,.rows a,nav a,.brand,.det a{text-decoration:none}a.btn{display:inline-flex;align-items:center;justify-content:center;color:var(--bg)}a.btn.ghost{color:var(--ink)}
.sec{min-height:0;max-width:1240px;margin-inline:auto;width:100%;padding:clamp(48px,8vw,96px) clamp(16px,5vw,64px)}.sec.dark,.lib,.arc{max-width:none}.sec .rows,.sec .sel{max-width:1120px}
.arcade,.arc{--bg:#07040f;--bg2:#120a22;--ink:#f1e8ff;--mut:#a79bc4;--line:#ffffff26;--accent:#ff7a59;--accent2:#7dffb0}.arc{background:#07040f;color:var(--ink)}
.car{perspective:1300px;height:clamp(380px,50vw,520px);display:grid;place-items:center}.tl{transform-style:preserve-3d;transition:transform .2s}.cr{position:relative;width:190px;height:230px;transform-style:preserve-3d;animation:spin 28s linear infinite}.car:hover .cr{animation-play-state:paused}
.cc{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:#000c;border-radius:4px 22px 4px 22px;color:var(--ink);box-shadow:0 0 30px var(--glow)}.cc small{color:var(--accent2);letter-spacing:.2em;font-size:.7rem}.cc b{font:300 2.2rem ui-monospace,Consolas,monospace;text-shadow:0 0 16px var(--accent)}.cc span{color:var(--mut);font-size:.85rem}
.hero3d{min-height:0;max-width:1240px;margin-inline:auto}.rings{margin:28px 0}.stage{height:260px}
.vt .grp{display:flex;justify-content:center;align-items:center;gap:clamp(2px,2vw,18px);margin:8px 0 20px}.u{display:flex;flex-direction:column;align-items:center}.u b{font:300 clamp(3.2rem,15vw,9rem)/1 ui-monospace,Consolas,monospace;text-shadow:0 0 30px var(--accent);min-width:1.2ch;text-align:center}.u small{color:var(--mut);letter-spacing:.2em;font-size:.7rem;margin-top:4px}
.ar{background:none;border:0;color:var(--mut);font-size:1.3rem;cursor:pointer;min-width:48px;min-height:44px}.ar:hover{color:var(--accent2)}.co{font:300 clamp(2.4rem,11vw,7rem) ui-monospace,monospace;color:var(--mut);font-style:normal;padding-bottom:28px}.btn.lg{min-width:130px;padding:14px 24px}.fin .u b{color:var(--accent);animation:bl .6s steps(2) infinite}
.ad{max-width:970px;min-height:120px;margin:clamp(32px,6vw,64px) auto;border:1px dashed var(--line);display:grid;place-items:center;color:var(--mut);font-size:.7rem;letter-spacing:.2em}.ad::before{content:"AD SLOT (reserved, remove in production)"}.study .ad,.arcade .ad{display:none}
main{padding-inline:clamp(0px,1vw,8px)}.tool .hero{padding-block:clamp(24px,5vw,56px)}
@media(max-width:800px){.cr{width:150px;height:190px}.cc{padding:12px}.cc b{font-size:1.6rem}.cc{transform-origin:center}.hero3d{padding-top:24px}.top{gap:10px}nav{gap:12px}}
[data-theme=midnight]{--bg:#050505;--bg2:#0e0e0e;--ink:#f2efe8;--mut:#9a948a;--accent:#d7262e;--accent2:#e9dcc0;--line:#f2efe83a;--glow:#1c0507;--orb:#a8202a30;--l1:#120607;--l2:#0b0405;--l3:#050202}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px at var(--mx,70%) var(--my,20%),#ffffff0d,transparent 70%)}
.big,.u b,.cc b,.dc b,h1{text-shadow:none}.panel,.game,.tile,.det,.cc,.dc,.bubble{border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:6px 6px 0 var(--accent)!important;background:var(--bg2)!important;backdrop-filter:none}
.btn{border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.btn:active{transform:translate(3px,3px);box-shadow:none}.btn.ghost{background:var(--bg)}[data-theme=midnight] .btn{color:#fff}[data-theme=midnight] a.btn.ghost{color:var(--ink)}
select,input{border:3px solid var(--ink);border-radius:0}.top{border-bottom:3px solid var(--ink);background:var(--bg);position:sticky;top:0;z-index:20}.rows a{border-top:3px solid var(--ink)}.ico{width:1.1em;height:1.1em;margin-right:.5em;vertical-align:-.12em;color:var(--accent)}
h1:hover{animation:gl .4s steps(2) 2}@keyframes gl{50%{text-shadow:3px 0 var(--accent),-3px 0 #3cf}}
.sec{padding:clamp(28px,4vw,56px) clamp(16px,5vw,64px)}.hero3d{padding-block:clamp(20px,3vw,40px)}.car{height:clamp(340px,42vw,430px)}.stage{height:230px;margin:8px 0}.rings{margin:18px 0}
.mq{overflow:hidden;border-block:3px solid var(--ink);background:var(--accent);color:#fff;font:700 1rem ui-monospace,monospace;letter-spacing:.15em;padding:10px 0;transform:rotate(-1deg);margin:12px 0}.mq div{display:flex;width:max-content;animation:mq 30s linear infinite}.mq span{padding:0 28px}.mq span::after{content:"  //"}@keyframes mq{to{transform:translateX(-50%)}}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1240px}.gal figure{margin:0;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--accent);transition:transform .3s;transform:rotate(-1.5deg)}.gal figure:nth-child(2){transform:rotate(1.5deg)}.gal figure:hover{transform:perspective(600px) rotateY(10deg) scale(1.03)}.gal img{display:block;width:100%;height:auto}.gal figcaption{padding:8px 12px;font:700 .8rem ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;border-top:3px solid var(--ink)}
.web{position:fixed;top:0;width:min(34vw,300px);z-index:1;pointer-events:none;opacity:.35;color:var(--ink)}.web.l{left:0}.web.r{right:0;transform:scaleX(-1)}.spider{position:fixed;right:9vw;top:0;z-index:1;pointer-events:none;animation:drop 9s ease-in-out infinite;transform-origin:top}@keyframes drop{50%{transform:translateY(90px)}}.spider svg{width:34px;display:block;margin-left:-16px}.spider i{display:block;width:1px;height:60px;background:var(--mut);margin-top:-60px}
.burger{display:none;width:48px;height:44px;background:var(--bg2);border:3px solid var(--ink);cursor:pointer;margin-left:auto;position:relative}.burger span,.burger::before,.burger::after{content:"";position:absolute;left:10px;right:10px;height:3px;background:var(--ink);top:19px;transition:.2s}.burger::before{top:10px}.burger::after{top:28px}.menu .burger span{opacity:0}.menu .burger::before{top:19px;transform:rotate(45deg)}.menu .burger::after{top:19px;transform:rotate(-45deg)}
.ft{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px;padding:40px clamp(16px,5vw,64px) 24px;border-top:3px solid var(--ink);background:var(--bg2);margin-top:20px;position:relative;z-index:2;font-size:.95rem}.ft h4{margin:0 0 10px;font:700 .75rem ui-monospace,monospace;letter-spacing:.2em;color:var(--accent2);text-transform:uppercase}.ft a{display:block;color:var(--ink);text-decoration:none;padding:3px 0}.ft a:hover{color:var(--accent)}.ft p{color:var(--mut);max-width:34ch}.fb{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;color:var(--mut);font-size:.8rem;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}.faq{max-width:820px;margin:0 auto;padding:8px clamp(16px,5vw,0px) 24px}.faq details{border:3px solid var(--ink);margin:10px 0;padding:12px 16px;background:var(--bg2)}.faq summary{cursor:pointer;font-weight:600}
@media(max-width:800px){.burger{display:block}.top nav{display:none;order:5;flex-basis:100%;flex-direction:column;gap:0;border-top:3px solid var(--ink)}.menu .top nav{display:flex}.top nav a{padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.05rem}.ctl{order:4;flex-basis:100%}.menu .ctl{display:flex}.gal,.ft{grid-template-columns:1fr}.gal figure,.gal figure:nth-child(2){transform:none}.top{position:relative}}
.hero3d{max-width:none;padding-inline:max(16px,calc((100vw - 1240px)/2 + 64px))}.web{z-index:3;opacity:.25}.spider{z-index:3}
.bc{display:grid;grid-template-columns:minmax(260px,440px) 1fr;gap:clamp(20px,5vw,64px);align-items:center;margin-top:28px}.bcs{width:100%;height:auto}.cf{fill:var(--bg2);stroke:var(--ink);stroke-width:4}.cb{fill:var(--accent)}.ct{stroke:var(--ink)}.ch{stroke:var(--ink);stroke-linecap:square}.cs{stroke:var(--accent);stroke-linecap:round}.cx{fill:var(--accent)}.cn{fill:var(--ink);font:700 11px Georgia,serif;text-anchor:middle}.bcd{font:300 clamp(2.4rem,7vw,5rem)/1 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.al{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(16px,4vw,40px);align-items:center;text-align:center}.aclk{width:100%;height:auto}.chip{min-width:48px;min-height:40px;border:3px solid var(--ink);background:var(--bg);color:var(--ink);font:700 .8rem ui-monospace,monospace;cursor:pointer;border-radius:0}.chip.on{background:var(--accent);color:#fff}
.pm{max-width:820px;margin:32px auto;padding:clamp(20px,4vw,40px);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--accent);background:var(--bg2)}.pm h2{font-size:clamp(1.8rem,5vw,3rem)}.cyc{display:flex;gap:4px;margin:20px 0}.cyc i{font:700 .8rem ui-monospace,monospace;font-style:normal;padding:14px 0;text-align:center;background:var(--accent);color:#fff;border:2px solid var(--ink)}.cyc i.b{background:var(--accent2);color:#000}.cyc i.l{background:var(--ink);color:var(--bg)}
@media(max-width:800px){.bc,.al{grid-template-columns:1fr}.web{width:90px}.hero3d{padding-inline:16px}}

.bc{perspective:900px}.bcw{transition:transform .15s;transform-style:preserve-3d}.hero3d .bc,.bc.stack{display:block;text-align:center;min-height:min(86vw,560px)}.bcs{display:block;aspect-ratio:1;width:min(100%,460px);margin:auto;filter:drop-shadow(8px 8px 0 var(--accent));animation:flk 9s infinite}.bcs .ct,.bcs .ch{stroke:#1a1410}.bcs .cn{fill:#1a1410}.bcr{margin-top:16px}.bc.stack .bcd{font-size:clamp(2rem,7vw,3.4rem)}
@keyframes flk{0%,92%,100%{opacity:1}94%{opacity:.9}96%{opacity:1}}.gl .bcs{animation:gli .5s steps(2) 1}@keyframes gli{50%{transform:translateX(4px) skewX(4deg)}}
.car.lazy .cr{animation-play-state:paused}.car.lazy.run .cr{animation-play-state:running}.ring .big{font-size:clamp(4rem,20vw,14rem)}.fsfake{position:fixed!important;inset:0;z-index:60;background:var(--bg);display:grid;place-content:center;overflow:auto}
@media(prefers-reduced-motion:reduce){.mq div{animation:none;flex-wrap:wrap;width:auto}.mq span:nth-child(n+8){display:none}.bcs{animation:none}}

html{overflow-x:hidden}.hero3d{background:radial-gradient(900px 500px at 80% 10%,var(--glow),transparent 70%)}.lib{background:radial-gradient(900px 400px at 20% 0,var(--glow),transparent 70%)}
.md{position:fixed;inset:0;z-index:90;background:#000c;display:grid;place-items:center;padding:16px;overflow:auto}.md[hidden]{display:none}.mb{width:min(440px,100%);background:var(--bg2);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--accent);padding:20px;text-align:left}.mb h2{margin:0 0 8px}.mb label{display:block;margin:12px 0;font-size:.85rem;color:var(--mut)}.mb input,.mb select{width:100%;min-height:44px;font-size:1rem}.tp{display:flex;gap:8px;align-items:center;margin:14px 0}.tp select{flex:1;width:auto;font-size:1.5rem}.apg{display:flex}.ck{display:flex;gap:8px;align-items:center}.ck input{width:auto;min-height:0}.al3{text-align:center}.al3 .bcd{font-size:clamp(2.4rem,11vw,6rem)}.mb .row select{flex:1}
.gal a.fg{display:block;color:inherit;text-decoration:none}.gal a.fg:focus-visible{outline:3px solid var(--accent2)}
@media(max-width:480px){.tool .panel{padding:14px}.bcs{width:100%}.hero3d .bc{min-height:min(96vw,420px)}}

html,body{overflow-x:clip}.top{padding:8px clamp(16px,4vw,48px);top:0}
.bcs .ct,.bcs .ch{stroke:#cbbf9f}.bcs .cn{fill:#cbbf9f}.bcs{filter:drop-shadow(8px 8px 0 #5a1418);width:min(100%,46vh,430px)}.bb:nth-child(odd){animation:bb 2.4s steps(2) infinite}.bb:nth-child(3n){animation-delay:-1.2s}@keyframes bb{50%{opacity:.3}}
.hero3d{min-height:0;padding-block:12px;align-items:center}.hero3d h1{font-size:clamp(1.8rem,3.2vw,2.8rem)}.hero3d .bc{display:flex;flex-direction:column-reverse;align-items:center;min-height:0}.hero3d .bcr{margin:0 0 8px}.hero3d .bcd{font-size:clamp(1.8rem,3.6vw,3rem)}.hero3d .bcr .btn{min-height:34px;padding:2px 12px;font-size:.8rem}.hero3d .bcr .lead{margin:2px 0 6px;font-size:.95rem}.hero3d .bcr .msg{display:none}
.tool .hero{min-height:0;padding-block:12px;gap:10px;align-content:start}.tool .eyebrow{display:none}.tool h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}.tool .hero-t p{font-size:.9rem;margin:2px auto}.tool .u b{font-size:clamp(3rem,min(13vw,19vh),7.5rem)}.tool .co{font-size:clamp(2.4rem,min(11vw,16vh),6rem)}.al3 .bcd{font-size:clamp(2.2rem,min(10vw,14vh),5rem)}.al3 .lead{margin:4px 0 12px}
@media(max-width:800px){.hero3d .bc{flex-direction:column-reverse}.bcs{width:min(100%,88vw,380px)}.top{position:sticky}}

.bcs{aspect-ratio:224/230;width:min(100%,58vh,540px);filter:drop-shadow(0 0 26px var(--glow))}.bcs .rf{fill:var(--bg);stroke:var(--accent);stroke-width:3}.bcs .ri{stroke:var(--accent);stroke-opacity:.4;stroke-width:1}.bcs .gw{fill:none;stroke:var(--accent);stroke-width:6;filter:blur(3px);animation:gp 5s ease-in-out infinite}@keyframes gp{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.12}}.bcs .hn,.bcs .dr,.bcs .cx,.bcs .sc2{fill:var(--accent)}.bcs .hd{fill:var(--ink)}.bcs .sc{stroke:var(--accent);stroke-width:2}.bcs .ct{stroke:var(--ink)}.bcs .cn{fill:var(--ink);font:700 9px Georgia,serif}.bcs .eg{fill:var(--accent);opacity:.2}.bcs .sk{fill:#000;stroke:var(--ink);stroke-opacity:.5}.bcs .dr{transform-box:fill-box;transform-origin:top;animation:dp 7s ease-in-out infinite}@keyframes dp{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.2)}}
.hero3d{position:relative;z-index:6}.hero3d .bc{margin-bottom:-70px;position:relative;z-index:6}.mq{position:relative;z-index:1}
body.study nav a:not(:first-child){display:inline}body.study nav a[href$="world-clock/"]:not(:first-child),body.study nav a[href$="games/"]:not(:first-child),body.study nav a[href$="clowns-library/"]:not(:first-child),.study .arc,.study .gal,.study .cc[href$="games/"],.study #theme{display:none}
.fool{z-index:200;padding:20px}.fool .fm .mascot{width:120px;height:auto;animation:fl 4s ease-in-out infinite}.fool h2{font-size:clamp(1.8rem,5vw,3rem)}
@media(max-width:800px){.hero3d .bc{margin-bottom:0}}
.hero3d .bc,.hero3d .bcw{width:100%}

.cc{align-items:center!important;justify-content:center!important;text-align:center}.cc .no{position:absolute;top:10px;left:12px;font:700 .8rem ui-monospace,monospace;color:var(--accent2);font-style:normal}.cc .cn2{position:absolute;bottom:10px;right:12px;font:.72rem ui-monospace,monospace;color:var(--mut);font-style:normal;text-align:right}.cc .nm{font:400 1.7rem Georgia,serif}.cc .dg{font-size:1rem!important;color:var(--accent2);margin-top:6px}
.sm{opacity:0;transition:opacity 1.2s}.smile .sm{opacity:1}.smb{fill:var(--accent)}.smt{fill:none;stroke:var(--ink);stroke-width:2}
.tc{display:flex;align-items:flex-end;gap:16px;margin:8px 0 18px}.tc .pc{width:clamp(110px,18vw,170px);height:auto;flex:none}.tc .bubble{font-size:1.2rem}
.ol{padding-left:1.2em}.prose ol,.prose ul{color:var(--mut);padding-left:1.3em}.prose li{margin:.3em 0}

@media(max-width:1180px){.burger{display:block}.top nav{display:none;order:5;flex-basis:100%;flex-direction:column;gap:0;border-top:3px solid var(--ink)}.menu .top nav{display:flex}.top nav a{padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.05rem}.ctl{display:none;order:6;flex-basis:100%;flex-wrap:wrap;padding:12px 0}.menu .ctl{display:flex}.menu .top{max-height:100vh;overflow-y:auto}body.study nav a:not(:first-child){display:block}body.study nav a[href$="world-clock/"]:not(:first-child),body.study nav a[href$="games/"]:not(:first-child),body.study nav a[href$="clowns-library/"]:not(:first-child){display:none}.hero3d{grid-template-columns:1fr}}

.mimg{position:relative;display:inline-block;line-height:0;flex:none}.mimg img{display:block;width:100%;height:auto}.mimg .pp{position:absolute;width:7%;min-width:3px;aspect-ratio:2.2/1;border-radius:50%;background:radial-gradient(#ff8a8a,#e0141e 65%);box-shadow:0 0 .5em #f22;margin:-1.6% 0 0 -3.5%}.mimg .pl{left:var(--x1);top:var(--y1)}.mimg .pr{left:var(--x2);top:var(--y2)}
.brand .mimg{width:46px;height:46px}.mw{width:clamp(140px,15vw,200px)}.mw .mimg{width:100%}.fool .fm .mimg{width:min(240px,60vw);animation:fl 4s ease-in-out infinite}.tc .pc{width:clamp(140px,22vw,240px)}.mimg.lost{width:min(280px,70vw);display:block;margin:0 auto 12px}
@media(min-width:1181px){.top{flex-wrap:nowrap;gap:12px 20px}.top nav{flex-wrap:nowrap;gap:16px}.top nav a{white-space:nowrap;font-size:.92rem}.ctl{flex:none}.brand{white-space:nowrap}}

.mimg .pp,.mimg .eye{width:var(--s,7%);margin:calc(var(--s,7%)/-4.4) 0 0 calc(var(--s,7%)/-2)}.mimg .eye{position:absolute;min-width:3px;aspect-ratio:2.2/1;border-radius:50%;background:radial-gradient(#ff8a8a,#e0141e 65%);box-shadow:0 0 .5em #f22}
@media(min-width:641px) and (max-width:1180px){.hero3d{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:20px;padding-top:20px}.hero3d .bc{align-self:start;margin-bottom:0}.hero3d .bcs{width:min(100%,44vw,400px)}.hero3d h1{font-size:clamp(1.7rem,4.6vw,2.6rem)}.hero3d .lead{font-size:1rem}.mw{width:clamp(110px,16vw,150px)}.hero3d .bcd{font-size:clamp(1.6rem,5vw,2.6rem)}}

.ah{position:relative;border-bottom:3px solid var(--ink);overflow:hidden;min-height:clamp(240px,30vw,380px);display:grid;align-items:center;background:#050505}.ah img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}.ah::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0,#050505cc 38%,#0000 75%)}.ahc{position:relative;z-index:2;max-width:min(620px,94%);padding:24px clamp(16px,5vw,64px);color:#f2efe8}.ahc h1{font-size:clamp(1.6rem,3.6vw,2.6rem);margin:.15em 0;color:#f2efe8}.ahc .eyebrow{margin:0}.bcn{font-size:.8rem;color:#b9b2a6;margin-bottom:8px}.bcn a{color:#e9dcc0}.rt{color:#b9b2a6;margin:0;font-size:.9rem}
.art{max-width:760px;padding-top:28px}.art h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:1.8em}.art h3{font-size:1.2rem;margin-top:1.4em}.art p,.art li{color:var(--ink);opacity:.92;font-size:1.05rem;line-height:1.75}.art ul,.art ol{padding-left:1.3em}.kt{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--accent);background:var(--bg2);padding:6px 22px 14px;margin:0 0 24px}.kt h2{margin:.6em 0 .3em;font-size:1.3rem}.toc{border:1px solid var(--line);padding:6px 20px 12px;margin:0 0 20px}.toc h2{font-size:1rem;margin:.6em 0;font-family:system-ui;letter-spacing:.12em;text-transform:uppercase}.toc ol{columns:2;column-gap:28px;margin:0}.toc li{font-size:.95rem;line-height:1.5;opacity:1}.toc a{text-decoration:none}
.cta{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--accent);background:var(--bg2);padding:4px 22px 14px;margin:32px 0}.rel,.src{margin-top:28px}.src ol{font-size:.88rem;word-break:break-word}.src li{font-size:.88rem;line-height:1.5}.disc{font-style:italic;color:var(--mut);margin-top:28px}
.libx{max-width:1200px;margin:0 auto;padding:36px clamp(16px,5vw,64px)}.lh{margin-top:40px;font-size:1.5rem}.lh small{font:700 .8rem ui-monospace,monospace;color:var(--accent)}.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}.lc{display:block;border:3px solid var(--ink);background:var(--bg2);color:var(--ink);text-decoration:none;box-shadow:6px 6px 0 var(--accent);transition:transform .15s}.lc:hover{transform:translate(-2px,-2px)}.lc img{display:block;width:100%;height:auto;aspect-ratio:8/3;object-fit:cover}.lc div{padding:12px 16px 16px}.lc h3{margin:0 0 6px;font-size:1.1rem;font-family:Georgia,serif;font-weight:400}.lc p{margin:0 0 8px;color:var(--mut);font-size:.9rem}.lc span{font:.75rem ui-monospace,monospace;color:var(--accent2)}
@media(max-width:640px){.toc ol{columns:1}.ah::after{background:linear-gradient(90deg,#050505ee 0,#050505aa 70%,#0005 100%)}}
/* Tablet header: keep theme, Fullscreen and Study Mode visible in the bar instead of hidden in the menu */
@media(min-width:641px) and (max-width:1180px){.top{flex-wrap:wrap;gap:10px 12px}.top .ctl,.menu .top .ctl{display:flex;order:2;flex:none;flex-basis:auto;flex-wrap:nowrap;padding:0;margin-left:auto;gap:8px}.top .ctl select,.top .ctl .btn{padding:8px 12px;font-size:.9rem;white-space:nowrap}.top .burger{order:3;margin-left:0}}
/* Laptop widths: keep the full nav and controls inside the header (1181-1440px) */
@media(min-width:1181px) and (max-width:1440px){.top{gap:12px 12px}.top nav{gap:11px}.top nav a{font-size:.84rem}.top .ctl{gap:6px}.top .ctl select,.top .ctl .btn{padding:7px 10px;font-size:.84rem;min-height:38px}.brand{font-size:1.15rem}}