:root{--ink:#191E2B;--bg:#D9D3C5;--paper:#FCFAF2;--a:#9F3D50;--b:#8DB6A1;--c:#C9A85D;--d:#566D8F;--e:#343B4A;--muted:#6C6E73;--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:#272D38;color:white}.door{position:absolute;left:19%;right:19%;top:8%;bottom:8%;border:10px solid #B89C5B;background:#343B47;box-shadow:inset 0 0 0 8px #191E2B,0 15px 35px rgba(0,0,0,.45)}.safehandle{position:absolute;width:170px;height:170px;border:9px solid #C9A85D;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:turn 6s ease-in-out infinite}.safehandle:before,.safehandle:after{content:"";position:absolute;background:#C9A85D;left:50%;top:50%;transform:translate(-50%,-50%)}.safehandle:before{width:130px;height:10px}.safehandle:after{width:10px;height:130px}.strip{position:absolute;border:4px solid #C9A85D;background:#FCFAF2;color:var(--ink);padding:10px;font-weight:1000}.st1{left:5%;top:14%}.st2{right:5%;top:18%}.st3{left:6%;bottom:13%}.st4{right:5%;bottom:12%}@keyframes turn{50%{transform:translate(-50%,-50%) rotate(90deg)}}
@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}}