/* The home page, comic style: a loud hero with live numbers, four worlds, a coding ladder with a coloured code window, and a directory of everything on the site.
   Scoped to body.study-home so no other page is touched. Fonts come from /play/fonts (see nav.css and comic.css). */
body.study-home{--hw-ink:#1b1340;--hw-yellow:#ffd23f;--hw-pink:#ff5d8f;--hw-sky:#3ec1ff;--hw-mint:#38d9a9;--hw-violet:#6c4de6;--hw-orange:#ff8a3d;--hw-display:"Bangers",Impact,"Arial Black",system-ui,sans-serif;--hw-ui:"Fredoka","Jakarta",system-ui,sans-serif;--hw-pop:cubic-bezier(.34,1.56,.64,1)}
@font-face{font-family:"Bangers";src:url(/play/fonts/bangers.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/play/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}

/* ---------- hero ---------- */
body.study-home .study-home-hero{background:radial-gradient(circle,rgba(27,19,64,.09) 1.5px,transparent 2px) 0 0/20px 20px,linear-gradient(160deg,#fff3c4 0%,#ffe0ec 52%,#d6f1ff 100%);border-bottom:4px solid var(--hw-ink)}
body.study-home .study-home-hero::after{display:none}
body.study-home .study-home-hero-grid{min-height:0;padding-block:46px 56px}
body.study-home .study-kicker{display:inline-block;padding:7px 14px;border:3px solid var(--hw-ink);border-radius:12px;background:var(--hw-mint);color:var(--hw-ink);font:700 13px/1 var(--hw-ui);letter-spacing:.07em;text-transform:uppercase;box-shadow:3px 3px 0 var(--hw-ink);transform:rotate(-1.4deg)}
body.study-home .study-home-copy h1{max-width:13ch;margin:18px 0 16px;font:400 clamp(52px,7.2vw,104px)/.94 var(--hw-display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:3px var(--hw-ink);paint-order:stroke fill;filter:drop-shadow(4px 4px 0 var(--hw-ink)) drop-shadow(8px 8px 0 var(--hw-pink));transform:rotate(-1.2deg);transform-origin:left bottom}
body.study-home .study-home-copy h1 em{display:inline-block;font-style:normal;font-weight:400;color:var(--hw-yellow);background:none;transform:rotate(1.4deg)}
body.study-home .study-home-lede{font:500 clamp(18px,1.6vw,21px)/1.55 var(--hw-ui);color:var(--hw-ink);max-width:36em}
body.study-home .study-home-copy .btn{border:3px solid var(--hw-ink);border-radius:16px;font:700 18px/1 var(--hw-ui);box-shadow:0 5px 0 var(--hw-ink);transition:transform .2s var(--hw-pop),box-shadow .15s}
body.study-home .study-home-copy .btn-primary{background:var(--hw-yellow);color:var(--hw-ink)}
body.study-home .study-home-copy .btn-ghost{background:#fff;color:var(--hw-ink)}
body.study-home .study-home-copy .btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 var(--hw-ink)}
body.study-home .study-home-copy .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hw-ink)}
body.study-home .study-home-note{font:600 14px var(--hw-ui);color:var(--hw-ink)}
body.study-home .study-home-stage::before{border:3px solid var(--hw-ink);border-radius:34px;background:radial-gradient(circle,rgba(255,255,255,.35) 1.5px,transparent 2px) 0 0/16px 16px,var(--hw-violet);box-shadow:8px 8px 0 var(--hw-ink);transform:rotate(2.4deg)}
body.study-home .study-quest{border:3px solid var(--hw-ink);border-radius:26px;box-shadow:6px 6px 0 var(--hw-ink);font-family:var(--hw-ui)}
body.study-home .study-quest h2{font:700 clamp(26px,3vw,34px)/1.1 var(--hw-ui)}
body.study-home .study-quest-label{border:2px solid var(--hw-ink);background:var(--hw-yellow);color:var(--hw-ink);font-family:var(--hw-ui);font-weight:700}
body.study-home .study-quest-choices button{border:3px solid var(--hw-ink);border-radius:14px;box-shadow:0 4px 0 var(--hw-ink);font:700 20px var(--hw-ui);transition:transform .18s var(--hw-pop),box-shadow .15s,background-color .15s}
body.study-home .study-quest-choices button:hover{transform:translateY(-3px);background:var(--hw-yellow);box-shadow:0 7px 0 var(--hw-ink)}
body.study-home .study-stage-note{color:#fff;font-family:var(--hw-ui);font-weight:600}body.study-home .study-stage-note a{color:var(--hw-yellow)}
.hw-burst{position:absolute;pointer-events:none;clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 33%);animation:hw-spin 30s linear infinite}
.hw-burst.a{top:-30px;right:max(-40px,calc(50% - 700px));width:210px;height:210px;background:var(--hw-yellow);opacity:.8}
.hw-burst.b{bottom:-36px;left:max(-30px,calc(50% - 760px));width:130px;height:130px;background:var(--hw-sky);opacity:.75;animation-direction:reverse}
@keyframes hw-spin{to{rotate:360deg}}

/* ---------- the numbers ---------- */
.hw-numbers{position:relative;margin-top:-26px;z-index:2}
.hw-numbers ul{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hw-numbers li{min-width:0}
.hw-numbers a{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:104px;padding:14px 12px 12px;border:3px solid var(--hw-ink);border-radius:20px;background:var(--bg,#fff);color:var(--hw-ink);text-decoration:none;box-shadow:5px 5px 0 var(--hw-ink);text-align:center;transition:transform .22s var(--hw-pop),box-shadow .18s}
.hw-numbers li:nth-child(odd) a{transform:rotate(-1.4deg)}.hw-numbers li:nth-child(even) a{transform:rotate(1.2deg)}
.hw-numbers a:hover,.hw-numbers a:focus-visible{transform:translate(-3px,-5px) rotate(0);box-shadow:9px 10px 0 var(--hw-ink)}
.hw-numbers b{display:block;font:400 clamp(34px,3.4vw,50px)/1 var(--hw-display);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.hw-numbers span{display:block;margin-top:4px;font:600 13.5px/1.2 var(--hw-ui)}

.hw-numbers li:nth-child(1) a{--bg:#ffd23f}.hw-numbers li:nth-child(2) a{--bg:#7ef0c8}.hw-numbers li:nth-child(3) a{--bg:#ffb3b0}.hw-numbers li:nth-child(4) a{--bg:#c9b8ff}.hw-numbers li:nth-child(5) a{--bg:#9fdcff}.hw-numbers li:nth-child(6) a{--bg:#ffd9a8}.hw-numbers li:nth-child(7) a{--bg:#ffc2d8}

/* ---------- section heads on this page ---------- */
body.study-home .section-head h2{font:400 clamp(34px,4.6vw,56px)/1.02 var(--hw-display);letter-spacing:.02em;color:var(--hw-ink);text-shadow:3px 3px 0 var(--hw-yellow)}
body.study-home .section-head h2 em{font-style:normal;color:var(--hw-violet);background:none}
body.study-home .section-head p{font:500 17.5px/1.55 var(--hw-ui)}
body.study-home .section-head .link{font-family:var(--hw-ui);font-weight:700}
body.study-home .eyebrow{display:inline-block;padding:6px 12px;border:3px solid var(--hw-ink);border-radius:10px;background:var(--hw-yellow);color:var(--hw-ink);font:700 12.5px/1 var(--hw-ui);letter-spacing:.07em;text-transform:uppercase;box-shadow:3px 3px 0 var(--hw-ink);transform:rotate(-1.6deg)}

/* ---------- four worlds ---------- */
.hw-worlds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:8px}
.hw-world{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;border:3px solid var(--hw-ink);border-radius:26px;background:radial-gradient(circle,rgba(255,255,255,.2) 1.4px,transparent 1.9px) 0 0/14px 14px,var(--w);color:#fff;box-shadow:7px 7px 0 var(--hw-ink);overflow:hidden;transition:transform .25s var(--hw-pop),box-shadow .2s}
.hw-world:nth-child(odd){transform:rotate(-.6deg)}.hw-world:nth-child(even){transform:rotate(.6deg)}
.hw-world:hover{transform:translate(-4px,-6px) rotate(0);box-shadow:12px 13px 0 var(--hw-ink)}
.hw-world[data-w=maths]{--w:#e0463f}.hw-world[data-w=coding]{--w:#1f9d6b}.hw-world[data-w=cube]{--w:#e07b0b}.hw-world[data-w=play]{--w:#6c4de6}
.hw-world-ico{display:grid;place-items:center;width:64px;height:64px;border:3px solid var(--hw-ink);border-radius:18px;background:#fff;font-size:34px;box-shadow:3px 3px 0 var(--hw-ink);transform:rotate(-5deg)}
.hw-world h3{margin:6px 0 0;font:400 clamp(32px,3vw,42px)/1 var(--hw-display);letter-spacing:.03em;color:#fff;-webkit-text-stroke:2px var(--hw-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--hw-ink)}
.hw-world h3 a{color:inherit;text-decoration:none}
.hw-world h3 a::after{content:"";position:absolute;inset:0}
.hw-world p{margin:0;font:500 15.5px/1.45 var(--hw-ui);color:#fff}
.hw-world ul{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 0;padding:0;list-style:none}
.hw-world li{padding:5px 10px;border:2px solid var(--hw-ink);border-radius:999px;background:#fff;color:var(--hw-ink);font:700 13px/1.1 var(--hw-ui)}
.hw-world .go{margin-top:auto;padding-top:10px;align-self:flex-start;display:inline-flex;gap:6px;padding:10px 14px;border:3px solid var(--hw-ink);border-radius:14px;background:var(--hw-yellow);color:var(--hw-ink);font:700 16px/1 var(--hw-ui);box-shadow:0 4px 0 var(--hw-ink)}

/* ---------- the coding ladder ---------- */
.hw-ladder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:10px}
.hw-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:rung}
.hw-steps a{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:3px solid var(--hw-ink);border-radius:20px;background:#fff;color:var(--hw-ink);text-decoration:none;box-shadow:5px 5px 0 var(--hw-ink);transition:transform .22s var(--hw-pop),box-shadow .18s,background-color .15s}
.hw-steps li:nth-child(1) a{margin-right:0}.hw-steps li:nth-child(2) a{margin-right:3%}.hw-steps li:nth-child(3) a{margin-right:6%}.hw-steps li:nth-child(4) a{margin-right:9%}.hw-steps li:nth-child(5) a{margin-right:12%}
.hw-steps li:nth-child(1) .n{--r:#ffd23f}.hw-steps li:nth-child(2) .n{--r:#7ef0c8}.hw-steps li:nth-child(3) .n{--r:#ffb3b0}.hw-steps li:nth-child(4) .n{--r:#9fdcff}.hw-steps li:nth-child(5) .n{--r:#c9b8ff}
.hw-steps a:hover,.hw-steps a:focus-visible{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--hw-ink);background:#fff8dc}
.hw-steps .n{display:grid;place-items:center;width:50px;height:50px;border:3px solid var(--hw-ink);border-radius:50%;background:var(--r,var(--hw-yellow));font:400 26px/1 var(--hw-display);box-shadow:2px 2px 0 var(--hw-ink);transform:rotate(-6deg)}
.hw-steps b{display:block;font:700 18px/1.2 var(--hw-ui)}
.hw-steps small{display:block;margin-top:2px;font:500 14px/1.35 var(--hw-ui);color:var(--ink-2)}
.hw-steps em{font:700 12px/1 var(--hw-ui);font-style:normal;padding:5px 8px;border:2px solid var(--hw-ink);border-radius:8px;background:var(--hw-mint);white-space:nowrap}
.hw-window{position:sticky;top:96px;border:3px solid var(--hw-ink);border-radius:20px;overflow:hidden;background:#1d2142;box-shadow:8px 8px 0 var(--hw-ink);transform:rotate(.7deg)}
.hw-window-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:3px solid var(--hw-ink);background:linear-gradient(90deg,var(--hw-violet),var(--hw-pink))}
.hw-window-bar i{width:13px;height:13px;border:2px solid var(--hw-ink);border-radius:50%;background:var(--hw-yellow)}.hw-window-bar i:nth-child(2){background:var(--hw-mint)}.hw-window-bar i:nth-child(3){background:var(--hw-sky)}
.hw-window-bar b{margin-left:8px;font:400 22px/1 var(--hw-display);letter-spacing:.05em;color:#fff;-webkit-text-stroke:1.3px var(--hw-ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--hw-ink)}
.hw-code{margin:0;padding:16px 14px 16px 0;font:500 15px/1.65 ui-monospace,Consolas,monospace;color:#edebff;overflow-x:auto;white-space:pre;tab-size:2}
.hw-code span.ln{display:inline-block;width:2.6em;margin-right:12px;text-align:right;color:#6e69a0;user-select:none}
.hw-out{margin:0;padding:12px 16px;border-top:3px solid var(--hw-ink);background:#0f1230;color:#7dffb3;font:600 14.5px/1.55 ui-monospace,Consolas,monospace;min-height:5.2em}
.hw-out::before{content:"Output";display:block;margin-bottom:4px;color:var(--hw-yellow);font:700 11px/1 var(--hw-ui);letter-spacing:.12em;text-transform:uppercase}
.hw-caret::after{content:"▍";color:var(--hw-yellow);animation:hw-blink 1s steps(1) infinite}
@keyframes hw-blink{50%{opacity:0}}
.tk-kw{color:#ff79c6;font-weight:700}.tk-str{color:#7dffb3}.tk-num{color:#ffb86c}.tk-com{color:#8a82b8;font-style:italic}.tk-fn{color:#8be9fd}.tk-def{color:#50fa7b;font-weight:700}.tk-bi{color:#ffd166}.tk-op{color:#ff9d5c}.tk-pn{color:#b9b3e6}

/* ---------- the directory ---------- */
.hw-dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:6px}
.hw-dir a{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 12px;align-items:center;padding:14px 14px;border:3px solid var(--hw-ink);border-radius:18px;background:#fff;color:var(--hw-ink);text-decoration:none;box-shadow:4px 4px 0 var(--hw-ink);transition:transform .2s var(--hw-pop),box-shadow .15s,background-color .15s}
.hw-dir a:hover,.hw-dir a:focus-visible{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:7px 7px 0 var(--hw-ink);background:var(--soft,#fff8dc)}
.hw-dir .i{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--hw-ink);border-radius:14px;background:var(--soft,#fff3bf);font-size:24px}
.hw-dir b{font:700 17px/1.15 var(--hw-ui)}.hw-dir small{font:500 13.5px/1.3 var(--hw-ui);color:var(--ink-2)}
.hw-dir a[data-c=maths]{--soft:#ffe3e0}.hw-dir a[data-c=coding]{--soft:#d4f6e6}.hw-dir a[data-c=cubing]{--soft:#ffe9cc}.hw-dir a[data-c=ai]{--soft:#e5defc}.hw-dir a[data-c=business]{--soft:#d9e6ff}

/* ---------- the rest of the page picks up the same weight ---------- */
body.study-home .study-course-card,body.study-home .study-program-card,body.study-home .study-skill-card,body.study-home .home-path,body.study-home .study-guide-card,body.study-home .study-character-card{border:3px solid var(--hw-ink);border-radius:22px;box-shadow:5px 5px 0 var(--hw-ink);transition:transform .22s var(--hw-pop),box-shadow .18s}
body.study-home .study-course-card:hover,body.study-home .study-program-card:hover,body.study-home .study-skill-card:hover,body.study-home .home-path:hover,body.study-home .study-guide-card:hover,body.study-home .study-character-card:hover{transform:translate(-3px,-4px) rotate(-.5deg);box-shadow:9px 9px 0 var(--hw-ink)}
body.study-home .study-home-cta,body.study-home .study-parent-band{border-top:4px solid var(--hw-ink)}
body.study-home h3{font-family:var(--hw-ui)}
body.study-home .home-join{border:3px solid var(--hw-ink);border-radius:22px;box-shadow:6px 6px 0 var(--hw-ink)}

@media(max-width:1180px){.hw-numbers ul{grid-template-columns:repeat(4,minmax(0,1fr))}.hw-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-dir{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.hw-ladder{grid-template-columns:minmax(0,1fr)}.hw-window{position:static}.hw-steps li a{margin-right:0!important}}
@media(max-width:700px){.hw-numbers ul{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-dir{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-dir a{grid-template-columns:minmax(0,1fr)}.hw-dir .i{grid-row:auto}}
@media(max-width:560px){.hw-worlds{grid-template-columns:minmax(0,1fr)}.hw-world:nth-child(n){transform:none}.hw-steps a{grid-template-columns:44px minmax(0,1fr)}.hw-steps em{display:none}.hw-burst.a{width:120px;height:120px}body.study-home .study-home-copy h1{-webkit-text-stroke:2px var(--hw-ink);filter:drop-shadow(3px 3px 0 var(--hw-ink)) drop-shadow(5px 5px 0 var(--hw-pink))}}
@media(prefers-reduced-motion:reduce){.hw-burst,.hw-caret::after{animation:none}.hw-numbers a,.hw-world,.hw-steps a,.hw-dir a{transition:none}.hw-numbers a:hover,.hw-world:hover{transform:none}}