:root{--ink:#263238;--bg:#E8E2D7;--paper:#FFF9ED;--a:#D95D39;--b:#8FC8B4;--c:#D7B35D;--d:#557A95;--e:#5D5147;--muted:#6D706E;--shadow:7px 8px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}:focus-visible{outline:4px solid var(--a);outline-offset:4px}
.top{position:sticky;top:0;z-index:50;background:var(--ink);color:white;border-bottom:4px solid var(--a)}.nav{width:min(1200px,calc(100% - 24px));margin:auto;min-height:70px;display:flex;align-items:center;gap:10px}.logo{font-weight:1000;letter-spacing:.14em}.logo b{color:var(--b)}.spacer{flex:1}.nav a{padding:10px 12px;font-size:.76rem;font-weight:900}.play{background:var(--c);color:var(--ink)}
.shell{width:min(1200px,calc(100% - 24px));margin:auto;padding:34px 0 70px}.hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center}.kicker{display:inline-block;background:var(--a);color:white;border:4px solid var(--ink);padding:8px 11px;font-weight:1000;font-size:.68rem;letter-spacing:.08em;box-shadow:4px 5px 0 var(--ink)}
h1{font-size:clamp(3.1rem,7vw,6.5rem);line-height:.87;letter-spacing:-.06em;margin:14px 0}h2{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.04em}p{line-height:1.58;color:var(--muted)}.note{background:var(--paper);border:4px solid var(--ink);padding:18px;box-shadow:var(--shadow)}
.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:4px solid var(--ink);background:var(--paper);padding:12px 15px;font-weight:1000;box-shadow:4px 5px 0 var(--ink)}.btn.a{background:var(--a);color:white}.btn.b{background:var(--b)}.btn.c{background:var(--c)}.btn.d{background:var(--d);color:white}
.scene{min-height:520px;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);position:relative;overflow:hidden}
.section{margin-top:44px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:var(--paper);border:4px solid var(--ink);padding:17px;min-height:160px;box-shadow:5px 6px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between}.card:nth-child(4n+1){background:#FFF4EF}.card:nth-child(4n+2){background:#EFF9F6}.card:nth-child(4n+3){background:#FFF9D9}.card:nth-child(4n){background:#F2EFFA}.card:hover{transform:translateY(-3px)}.tag{display:inline-block;width:max-content;background:var(--b);border:3px solid var(--ink);padding:5px 8px;font-size:.61rem;font-weight:1000}.card strong{font-size:1.06rem}.card em{font-style:normal;color:var(--muted);font-size:.78rem}
.challenge{max-width:820px;margin:20px auto;background:var(--paper);border:5px solid var(--ink);padding:26px;box-shadow:var(--shadow)}.prompt{background:#FFF8DB;border:4px solid var(--ink);padding:28px;font-size:clamp(1.4rem,3vw,2.05rem);font-weight:1000}input,textarea{width:100%;border:4px solid var(--ink);padding:12px;background:white}textarea{min-height:90px}label{display:block;font-size:.68rem;font-weight:1000;margin:12px 0 6px}.hint{margin-top:14px;background:#E9F6F3;border:4px solid var(--ink);padding:14px}.success{margin-top:14px;background:var(--b);border:4px solid var(--ink);padding:16px;font-weight:1000}
.builder{margin-top:26px;background:var(--paper);border:4px solid var(--ink);padding:20px;box-shadow:5px 6px 0 var(--ink)}.route{display:grid;gap:12px}.routeitem{border:4px solid var(--ink);background:var(--paper);padding:14px;box-shadow:4px 5px 0 var(--ink)}.footer{margin-top:44px;color:var(--muted);font-size:.8rem}
.scene{background:#E4E0D3}.wire{position:absolute;left:8%;right:8%;height:8px;background:var(--ink)}.w1{top:30%}.w2{top:58%}.dial{position:absolute;width:128px;height:128px;border:6px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:1000;box-shadow:5px 6px 0 var(--ink)}.d1{left:8%;top:12%}.d2{left:39%;bottom:12%;background:#DBEEE8}.d3{right:8%;top:16%;background:#F2E0C4}.beam{position:absolute;width:46px;height:46px;border:5px solid var(--ink);border-radius:50%;background:var(--a);animation:signal 2s ease-in-out infinite}.b1{left:29%;top:25%}.b2{right:30%;bottom:25%;background:var(--b)}@keyframes signal{50%{box-shadow:0 0 0 16px rgba(217,93,57,.15)}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.nav a:not(.play){display:none}.grid{grid-template-columns:1fr}}
@media(pointer:coarse){button,a,input{min-height:48px;min-width:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}