:root{
  --banana:#F1BA27; --fur:#965417; --tongue:#E96A53; --ink:#0A0A09;
  --paper:#FFFFFF; --soft:#F7F4EC; --line:#E6E0D2; --muted:#5F584B;
  --word:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--word);font-weight:400;margin:0;line-height:1.02}
p{margin:0}
a{color:inherit}
.nowrap{white-space:nowrap}
.top{position:sticky;top:0;z-index:10;background:var(--banana);border-bottom:2.5px solid var(--ink)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--word);font-size:1.05rem;flex:none}
.brand img{width:44px;height:auto}
.top nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.top nav::-webkit-scrollbar{display:none}
.top nav a{flex:none;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:10px;border:2px solid transparent;white-space:nowrap}
.top nav a:hover,.top nav a:focus-visible{border-color:var(--ink);background:var(--paper);outline:none}
.eyebrow{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--fur);margin-bottom:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:48px 56px}
.hero h1{font-size:clamp(2.6rem,10vw,6.4rem);letter-spacing:-.01em}
.lead{margin-top:20px;font-size:1.18rem;max-width:52ch}
.stats{margin-top:22px;color:var(--muted);font-size:.98rem}
.stats b{color:var(--ink)}
.stats a{font-weight:700;text-decoration-color:var(--banana);text-decoration-thickness:3px;text-underline-offset:4px}
.master{position:relative;justify-self:center;display:block;width:min(320px,80%);padding:22px;border:2.5px solid var(--ink);border-radius:22px;background:var(--banana);box-shadow:0 7px 0 var(--ink);transform:rotate(-3deg);transition:transform .18s ease}
.master:hover{transform:rotate(0) translateY(-3px)}
.master img{display:block;width:100%;height:auto}
.master span{position:absolute;right:-10px;bottom:-14px;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;font-size:.85rem}
.sec{scroll-margin-top:72px;padding-block:56px;border-top:2px solid var(--ink)}
.sec-h{display:flex;align-items:baseline;gap:14px}
.sec h2{font-size:clamp(1.8rem,5vw,3rem);white-space:nowrap}
.count{font:400 1rem/1 var(--word);padding:6px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--banana);box-shadow:0 3px 0 var(--ink)}
.sub{margin:14px 0 30px;color:var(--muted);font-size:1.05rem;max-width:64ch}
.turn{margin:0 0 26px;border:2.5px solid var(--ink);border-radius:22px;background:var(--banana);box-shadow:0 6px 0 var(--ink);overflow:hidden}
.turn a:first-child{display:block;padding:18px 18px 6px}
.turn img{display:block;width:100%;height:auto}
.turn figcaption{background:var(--paper);border-top:2px solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
#scenes .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{margin:0;display:flex;flex-direction:column;border:2.5px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:0 5px 0 var(--ink);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.pic{display:block;aspect-ratio:1/1;overflow:hidden;padding:14px;border-bottom:2px solid var(--ink);
  background-color:var(--soft);background-image:linear-gradient(45deg,#EFEADC 25%,transparent 25%,transparent 75%,#EFEADC 75%),linear-gradient(45deg,#EFEADC 25%,transparent 25%,transparent 75%,#EFEADC 75%);background-size:22px 22px;background-position:0 0,11px 11px}
#scenes .pic{aspect-ratio:4/3}
.pic img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}
.pic:hover img{transform:scale(1.04)}
.pic:focus-visible{outline:3px solid var(--tongue);outline-offset:-5px}
figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 14px 14px;margin-top:auto}
figcaption .t{flex:1 1 100%;font-weight:700;line-height:1.25}
figcaption .meta{flex:1 1 auto;font-size:.82rem;color:var(--muted);white-space:nowrap}
.dl{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:10px;background:var(--banana);box-shadow:0 3px 0 var(--ink);font-weight:700;font-size:.85rem;text-decoration:none;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease}
.dl:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.dl:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.dl:focus-visible{outline:3px solid var(--tongue);outline-offset:3px}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.box{padding:24px;border:2.5px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:0 5px 0 var(--ink)}
.box.wide{grid-column:1/-1;background:var(--soft)}
.box h3{font-size:1.3rem;margin-bottom:14px}
.box p{max-width:60ch}
.sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.sw li{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.sw i{grid-row:span 2;width:48px;height:48px;border-radius:12px;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.sw b{font:700 .95rem/1.2 ui-monospace,Menlo,monospace}
.sw span{font-size:.88rem;color:var(--muted);line-height:1.25}
.ls{margin:0;padding-left:20px;display:grid;gap:8px}
.code{position:relative;border:2.5px solid var(--ink);border-radius:18px;background:var(--ink);color:#F7F4EC;box-shadow:0 6px 0 var(--banana)}
.code pre{margin:0;padding:24px;padding-top:64px;white-space:pre-wrap;word-break:break-word;font:14px/1.6 ui-monospace,Menlo,monospace}
.copy{position:absolute;top:14px;right:14px;min-height:40px;padding:0 14px;border:2px solid var(--paper);border-radius:10px;background:var(--banana);color:var(--ink);font:700 .9rem var(--body);cursor:pointer}
.copy:focus-visible{outline:3px solid var(--tongue);outline-offset:3px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:28px 40px;border-top:2px solid var(--ink);color:var(--muted);font-size:.92rem}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:32px 44px}
  .master{width:220px}
  .rules{grid-template-columns:1fr}
  .top nav{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #scenes .grid{grid-template-columns:1fr}
  figcaption{padding:10px}
  .dl{flex:1 1 100%;justify-content:center;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}