:root{--bg:#f3efe6;--ink:#111;--y:#ffd23f;--r:#ff5c39;--b:#3a86ff;--mute:#555}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "JetBrains Mono",monospace;
 background-image:radial-gradient(#0002 1px,transparent 1px);background-size:18px 18px}
a{color:inherit}
h1,h3,header b,.big{font-family:"Unbounded",sans-serif}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 24px;background:var(--ink);color:var(--bg)}
header b{font-size:22px;margin-right:auto;letter-spacing:-1px}header b a{text-decoration:none}header b span{color:var(--y)}
header nav{display:flex;flex-wrap:wrap;gap:6px}
header nav a{text-decoration:none;padding:2px 10px;border:1px solid #fff4}header nav a:hover{background:var(--y);color:var(--ink)}
main{max-width:920px;margin:0 auto;padding:48px 16px}
h1{font-size:clamp(30px,6vw,52px);line-height:1.05;margin:0 0 12px;letter-spacing:-2px}
.sub{display:inline-block;background:var(--y);padding:2px 10px;border:2px solid var(--ink);margin:0 0 36px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;counter-reset:n}
.card{background:#fff;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:20px;transition:.12s}
a.card{text-decoration:none;counter-increment:n}
a.card::before{content:"0" counter(n);font-weight:700;color:var(--r)}
a.card:nth-child(3n+2){background:var(--y)}a.card:nth-child(3n){background:#dbe7ff}
a.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.card h3{margin:6px 0 4px;font-size:19px}.card p{margin:0;color:var(--mute);font-size:14px}
.big{font-size:52px;font-weight:800;text-align:center;letter-spacing:-2px}.big small{font-size:16px;color:var(--mute)}
button{font:700 16px "Unbounded",sans-serif;background:var(--r);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 32px;cursor:pointer}
button:active{transform:translate(5px,5px);box-shadow:none}button:disabled{opacity:.6}
.center{text-align:center}
ol{counter-reset:s;list-style:none;padding:0;margin:0}
ol li{counter-increment:s;padding:14px 0 14px 56px;position:relative;border-bottom:2px dashed #0003}ol li:last-child{border:0}
ol li::before{content:counter(s);position:absolute;left:0;top:14px;width:38px;height:38px;display:grid;place-items:center;background:var(--ink);color:var(--y);font:700 16px "Unbounded"}
ol li b{display:block;font-family:"Unbounded";font-size:17px}ol a{color:var(--r)}
.drop{display:block;border:3px dashed var(--ink);background:#fff;padding:60px 20px;text-align:center;cursor:pointer}
.drop:hover{background:var(--y)}
footer{text-align:center;font-size:13px;padding:30px;border-top:3px solid var(--ink)}
details{background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);margin-bottom:16px}
details:nth-child(even){background:#dbe7ff}
summary{cursor:pointer;padding:16px 20px;font:700 17px "Unbounded",sans-serif;list-style:none}
summary::after{content:"+";float:right}details[open] summary::after{content:"−"}
details[open] summary{background:var(--y);border-bottom:3px solid var(--ink)}
details ul{margin:0;padding:16px 20px 16px 40px}details li{margin-bottom:6px}
code{background:var(--ink);color:var(--y);padding:1px 6px}