:root{--ink:#463B35;--bg:#E7E0D4;--paper:#FFFDF4;--a:#D07A52;--b:#A8C7B7;--c:#D8B7D7;--d:#7FA6C9;--e:#8C6F5B;--muted:#766C66;--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:#F2E9D8}.paper{position:absolute;border:5px solid var(--ink);background:var(--paper);box-shadow:6px 7px 0 var(--ink);padding:16px;font-family:Georgia,serif;font-weight:700}.p1{left:6%;top:8%;width:38%;height:38%;transform:rotate(-4deg)}.p2{right:7%;top:10%;width:38%;height:31%;transform:rotate(3deg);background:#E8F0E9}.p3{left:19%;bottom:8%;width:34%;height:34%;transform:rotate(2deg);background:#F4E1DA}.p4{right:9%;bottom:8%;width:30%;height:39%;transform:rotate(-3deg);background:#E7EAF5}.foldline{position:absolute;left:48%;top:8%;bottom:8%;border-left:5px dashed var(--a);animation:foldmove 3s ease-in-out infinite}@keyframes foldmove{50%{left:52%}}
@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}}