/* Supriyash Puzzles — supriyash.com
   One stylesheet, dark only. No external requests: both fonts are self-hosted
   (licences in /fonts). Accent colours echo the lit cells on the book covers.
   Every animation sits behind prefers-reduced-motion: no-preference. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* ground and surfaces: a blue-black, never pure black */
  --ground:hsl(230 18% 5%);          /* #0B0C10 */
  --surface:hsl(230 15% 9%);
  --surface-2:hsl(230 13% 13%);
  --line:hsl(230 10% 20%);
  --line-strong:hsl(230 9% 30%);
  /* text: AA on --ground and on --surface-2 */
  --ink:hsl(36 25% 95%);
  --muted:hsl(228 10% 72%);
  --faint:hsl(228 8% 62%);
  /* accents, from the covers' lit cells */
  --coral:hsl(12 100% 66%);
  --rose:hsl(332 82% 66%);
  --violet:hsl(252 100% 76%);
  --amber:hsl(40 100% 64%);
  --mint:hsl(158 64% 56%);
  --sky:hsl(196 88% 62%);
  --heat:linear-gradient(100deg,var(--amber) 0%,var(--coral) 32%,var(--rose) 66%,var(--violet) 100%);
  --focus:hsl(40 100% 64%);
  --maxw:1200px; --radius:28px; --radius-sm:16px;
  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.75rem,8vw,6.5rem)}
h2{font-size:clamp(2.1rem,5vw,3.75rem)}
h3{font-size:1.5rem;letter-spacing:-.015em;line-height:1.15}
p{margin:0}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--ink);color:var(--ground);padding:.6rem 1rem;border-radius:0 0 12px 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:5;background:hsl(230 18% 5% / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid hsl(230 10% 20% / .6)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;flex-wrap:wrap}
.brand{display:inline-flex;flex:none;border-radius:8px}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.98rem;padding:.5rem .85rem;border-radius:999px;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.nav .nav-cta{color:var(--ground);background:var(--ink);font-weight:600;margin-left:.35rem}
.nav .nav-cta:hover{color:var(--ground);background:#fff}
@media (max-width:640px){
  .site-header .container{padding-block:.6rem;gap:.35rem}
  .brand img{height:40px}
  .nav{width:100%;justify-content:space-between;gap:0}
  .nav a{padding:.45rem .6rem;font-size:.93rem}
  .nav .nav-cta{margin-left:0}
}

/* ---- buttons ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.8rem 1.6rem;border-radius:999px;font-weight:600;font-size:1.02rem;text-decoration:none;border:1px solid transparent;transition:transform .2s,background-color .2s,border-color .2s}
.btn--primary{background:var(--ink);color:var(--ground)}
.btn--primary:hover{background:#fff}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:hsl(230 13% 13% / .5)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--small{min-height:44px;padding:.55rem 1.15rem;font-size:.95rem}
.arrow{transition:transform .2s}
.btn:hover .arrow,.text-link:hover .arrow{transform:translateX(3px)}
.text-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---- type helpers ---- */
.eyebrow{font-family:var(--display);font-size:.85rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lede{font-size:clamp(1.12rem,2vw,1.35rem);color:var(--muted);max-width:40ch;margin-top:1.4rem;line-height:1.55}
.hot{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.stack>*+*{margin-top:1rem}

/* ---- hero ---- */
.hero{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3.5rem,8vw,6rem)}
.hero .container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-top:1.1rem;max-width:12ch}
.glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.glow--a{width:520px;height:520px;background:var(--coral);top:-180px;right:-120px}
.glow--b{width:440px;height:440px;background:var(--rose);bottom:-220px;right:22%;opacity:.32}
.glow--c{width:420px;height:420px;background:var(--violet);bottom:-160px;left:-180px;opacity:.36}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;padding:0;list-style:none}
.facts li{border:1px solid var(--line);background:hsl(230 15% 9% / .7);border-radius:999px;padding:.45rem 1rem;font-size:.95rem;color:var(--muted)}
.facts b{color:var(--ink);font-family:var(--display);font-weight:700;margin-right:.3rem}

/* the hero grid: a valid filled 9x9 (see build-site.mjs), cells filling in */
.board{position:relative;aspect-ratio:1;width:100%;max-width:460px;justify-self:end;display:grid;grid-template-columns:repeat(9,1fr);background:var(--line-strong);gap:1px;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px hsl(12 100% 50% / .45),0 0 0 1px hsl(0 0% 100% / .04)}
.board span{display:grid;place-items:center;background:var(--surface);font-family:var(--display);font-weight:600;font-size:clamp(.9rem,2.6vw,1.45rem);color:var(--ink);line-height:1}
.board span.bc{border-right:2px solid var(--ink)}
.board span.br{border-bottom:2px solid var(--ink)}
.board span.f{color:var(--muted);font-weight:500}
.board span.l1{background:hsl(12 100% 66% / .22);color:var(--coral)}
.board span.l2{background:hsl(158 64% 56% / .2);color:var(--mint)}
.board span.l3{background:hsl(196 88% 62% / .2);color:var(--sky)}
.board span.l4{background:hsl(252 100% 76% / .22);color:var(--violet)}
.board span.l5{background:hsl(332 82% 66% / .22);color:var(--rose)}
@media (prefers-reduced-motion:no-preference){
  .glow--a{animation:drift 18s ease-in-out infinite alternate}
  .glow--c{animation:drift 22s ease-in-out infinite alternate-reverse}
  .board span.f{animation:fill 7s ease-in-out infinite}
  .board span.l1,.board span.l2,.board span.l3,.board span.l4,.board span.l5{animation:lit 7s ease-in-out infinite}
  .board span.d0{animation-delay:0.00s}.board span.d1{animation-delay:0.45s}.board span.d2{animation-delay:0.90s}.board span.d3{animation-delay:1.35s}.board span.d4{animation-delay:1.80s}.board span.d5{animation-delay:2.25s}.board span.d6{animation-delay:2.70s}.board span.d7{animation-delay:3.15s}.board span.d8{animation-delay:3.60s}
  .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .rise-2{animation-delay:.08s}.rise-3{animation-delay:.16s}.rise-4{animation-delay:.24s}
}
@keyframes drift{to{transform:translate(-60px,50px) scale(1.12)}}
@keyframes fill{0%,8%{color:transparent}20%,88%{color:var(--muted)}100%{color:transparent}}
@keyframes lit{0%,10%{color:transparent;background:var(--surface)}24%,86%{color:inherit}100%{color:transparent;background:var(--surface)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr}
  .board{justify-self:start;max-width:380px}
}

/* ---- sections ---- */
.section{padding:clamp(4rem,9vw,7rem) 0}
.section--tight{padding-top:0}
.sec-head{max-width:760px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-head h2{margin-top:.9rem}
.sec-head .lede{max-width:56ch}

/* offers: big cards */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.offer{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.2rem);overflow:hidden;transition:transform .3s,border-color .3s}
.offer::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;background:radial-gradient(120% 100% at 0% 0%,var(--tint) 0%,transparent 70%);opacity:.32;pointer-events:none}
.offer:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.offer--1{--tint:var(--coral)}.offer--2{--tint:var(--violet)}.offer--3{--tint:var(--mint)}
.offer .idx{position:relative;font-family:var(--display);font-size:3.2rem;font-weight:700;line-height:1;color:var(--tint)}
.offer h3{position:relative;margin-top:1.4rem;font-size:clamp(1.6rem,2.4vw,1.95rem)}
.offer p{position:relative;color:var(--muted);margin-top:.9rem}
.offer dl{position:relative;margin:1.6rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem;font-size:.96rem}
.offer dl div{display:grid;grid-template-columns:6.2rem 1fr;gap:.6rem}
.offer dt{color:var(--faint)}
.offer dd{margin:0;color:var(--ink)}
.offer .btn{margin-top:auto;align-self:flex-start}
.offer .offer-foot{margin-top:1.8rem;padding-top:0}
@media (max-width:980px){.offers{grid-template-columns:1fr}}

/* proof */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.claim{background:var(--ground);padding:clamp(1.6rem,3.5vw,2.6rem)}
.claim .tick{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--tone);font-family:var(--display);font-weight:700;font-size:1.2rem}
.claim:nth-child(1){--tone:var(--coral)}.claim:nth-child(2){--tone:var(--mint)}.claim:nth-child(3){--tone:var(--sky)}.claim:nth-child(4){--tone:var(--violet)}
.claim h3{margin-top:1.2rem}
.claim p{color:var(--muted);margin-top:.7rem;max-width:46ch}
@media (max-width:760px){.proof{grid-template-columns:1fr}}

/* the twelve types */
.types{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.types li{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface)}
.types li:nth-child(6n+1){border-color:hsl(12 100% 66% / .55)}
.types li:nth-child(6n+2){border-color:hsl(40 100% 64% / .55)}
.types li:nth-child(6n+3){border-color:hsl(158 64% 56% / .55)}
.types li:nth-child(6n+4){border-color:hsl(196 88% 62% / .55)}
.types li:nth-child(6n+5){border-color:hsl(252 100% 76% / .55)}
.types li:nth-child(6n+6){border-color:hsl(332 82% 66% / .55)}
.grades{display:flex;flex-wrap:wrap;gap:0;margin:2rem 0 0;padding:0;list-style:none;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.grades li{flex:1 1 0;min-width:0;text-align:center;padding:.8rem .4rem;font-weight:600;font-size:.95rem;background:var(--surface);border-right:1px solid var(--line)}
.grades li:last-child{border-right:0}
.grades li:nth-child(1){color:var(--mint)}.grades li:nth-child(2){color:var(--sky)}.grades li:nth-child(3){color:var(--amber)}.grades li:nth-child(4){color:var(--coral)}.grades li:nth-child(5){color:var(--rose)}

/* book shelf */
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem);align-items:end}
.shelf a{display:block;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -18px #000;transition:transform .3s}
.shelf a:hover{transform:translateY(-6px) rotate(-1deg)}
@media (max-width:760px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}.shelf a:nth-child(n+4){display:none}}

/* books page */
.series{margin-top:clamp(3rem,7vw,5rem)}
.series:first-of-type{margin-top:0}
.series-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem}
.series-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.series-head p{color:var(--muted);max-width:52ch}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.book{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.1rem 1.4rem;transition:border-color .3s,transform .3s}
.book:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.book img{border-radius:8px;box-shadow:0 14px 30px -14px #000;width:100%}
.book h3{font-size:1.3rem;margin-top:1.2rem}
.book .series-name{font-size:.85rem;color:var(--faint);margin-top:.35rem}
.book .sub{color:var(--muted);font-size:.97rem;margin-top:.6rem}
.book .btn{width:100%;justify-content:space-between;gap:.3rem;white-space:nowrap;padding-inline:.85rem;font-size:.88rem}
@media (max-width:560px){
  .book{display:grid;grid-template-columns:112px 1fr;column-gap:1rem;align-items:start;padding:1rem}
  .book img{grid-row:1/5}
  .book h3{margin-top:0;font-size:1.2rem}
  .book .book-foot{grid-column:1/-1;margin-top:1rem}
}
.book .book-foot{margin-top:1.3rem}

/* steps (about) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem);margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.6rem;counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;display:block;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{margin-top:1rem;font-size:1.3rem}
.steps p{color:var(--muted);margin-top:.6rem;font-size:.98rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin:0}
.rules div{padding:1.1rem 0;border-top:1px solid var(--line)}
.rules dt{font-family:var(--display);font-weight:700;font-size:1.15rem}
.rules dd{margin:.35rem 0 0;color:var(--muted);font-size:.98rem}
@media (max-width:760px){.rules{grid-template-columns:1fr}}

/* contact */
.mail-card{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.8rem,5vw,3.5rem)}
.mail-card .glow{opacity:.28}
.mail-big{display:inline-block;margin-top:1rem;font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,6vw,3.6rem);letter-spacing:-.03em;line-height:1.1;text-decoration:none;overflow-wrap:anywhere;border-radius:8px}
.mail-big:hover{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:8px;text-decoration-thickness:3px}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem);margin-top:clamp(1.5rem,4vw,2.5rem)}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:clamp(1.4rem,3vw,2rem)}
.panel h2{font-size:1.6rem}
.panel ul{margin:1rem 0 0;padding-left:1.2rem;color:var(--muted)}
.panel li+li{margin-top:.45rem}
.panel p{color:var(--muted);margin-top:.9rem}
.panel h2.panel-gap{margin-top:1.8rem}

/* closing band */
.band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);padding:clamp(2.2rem,6vw,4.5rem);background:var(--surface);border:1px solid var(--line)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 100% 0%,hsl(12 100% 66% / .35),transparent 60%),radial-gradient(60% 120% at 0% 100%,hsl(252 100% 76% / .3),transparent 60%)}
.band h2{max-width:16ch}
.band p{color:var(--muted);margin-top:1rem;max-width:52ch}

/* prose (privacy) */
.prose{max-width:68ch}
.prose h2{font-size:1.6rem;margin-top:2.6rem}
.prose p,.prose ul{color:var(--muted);margin-top:.9rem}
.prose ul{padding-left:1.2rem}
.prose li+li{margin-top:.4rem}
.prose a{color:var(--ink);text-decoration-color:var(--coral);text-underline-offset:4px}
.prose strong{color:var(--ink)}
.updated{color:var(--faint);font-size:.95rem;margin-top:1rem}

/* 404 */
.lost{min-height:62vh;display:grid;place-items:center;text-align:center}
.lost .code{font-family:var(--display);font-weight:700;font-size:clamp(6rem,24vw,13rem);line-height:.9;letter-spacing:-.05em}
.lost .lede{margin-inline:auto}
.lost .btn-row{justify-content:center}

/* ---- footer ---- */
.site-footer{margin-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line);padding:3rem 0 2rem;color:var(--muted);font-size:.95rem}
.site-footer .container{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.site-footer .brand img{height:52px}
.foot-brand p{margin-top:1rem;max-width:36ch}
.foot-col h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.foot-col ul{list-style:none;margin:.9rem 0 0;padding:0}
.foot-col li+li{margin-top:.35rem}
.foot-col a{text-decoration:none;color:var(--muted);display:inline-block;padding:.15rem 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;color:var(--faint);font-size:.9rem}
@media (max-width:760px){.site-footer .container{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---- author page ---- */
.author-sig{width:min(360px,100%);height:auto;margin-top:1.4rem}
.author-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.author-facts>div{background:var(--surface);padding:clamp(1.4rem,3vw,2rem)}
.author-facts .big{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:1;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.author-facts p+p{color:var(--muted);margin-top:.6rem}
@media (max-width:640px){.author-facts{grid-template-columns:1fr}}
.two-col--flush{margin-top:0}
.panel h3{font-size:1.3rem}
.shelf--all{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
@media (max-width:760px){.shelf--all{grid-template-columns:repeat(3,minmax(0,1fr))}.shelf--all a:nth-child(n+4){display:block}}

/* ---- coming next ---- */
.next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
.next-item{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.6rem}
.next-item::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone)}
.next-item--1{--tone:var(--amber)}.next-item--2{--tone:var(--sky)}.next-item--3{--tone:var(--mint)}.next-item--4{--tone:var(--rose)}
.next-item .state{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tone);border:1px solid var(--line-strong);border-radius:999px;padding:.2rem .7rem}
.next-item h3{margin-top:1rem;font-size:1.35rem}
.next-item p:last-child{color:var(--muted);margin-top:.6rem;font-size:.98rem}
@media (max-width:980px){.next{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.next{grid-template-columns:1fr}}

/* ---- hero board, 3D (HERO = "3d" in build-site.mjs) ----
   A tilted slab with a 16-layer edge, recessed wells for the cells, bevelled raised
   tiles for the givens, and taller glowing tiles for the five lit cells. The view
   (rotateX then rotateZ) shows only the bottom and left sides, so only those are drawn.
   The board is still at rest so its text stays sharp; it tilts a little on hover. */
.stage{perspective:1600px;display:grid;place-items:center;justify-self:end;width:100%;max-width:560px;padding-block:2.5rem}
.hero:has(.stage) .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero:has(.stage) h1{font-size:clamp(2.75rem,6vw,4.9rem);max-width:none}
.board3d{position:relative;width:min(440px,36vw);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(40deg) rotateZ(-10deg)}
.board3d .floor{position:absolute;inset:6%;transform:translateZ(-90px);border-radius:50%;background:radial-gradient(closest-side,hsl(12 100% 60% / .65),hsl(332 82% 60% / .3) 55%,transparent);filter:blur(30px)}
.board3d .slab{position:absolute;inset:0;border-radius:20px}
.board3d .s1{transform:translateZ(-1px);background:hsl(230 13% 24%)}.board3d .s2{transform:translateZ(-2px);background:hsl(230 13% 23%)}.board3d .s3{transform:translateZ(-3px);background:hsl(230 13% 22%)}.board3d .s4{transform:translateZ(-4px);background:hsl(230 13% 21%)}.board3d .s5{transform:translateZ(-5px);background:hsl(230 13% 20%)}.board3d .s6{transform:translateZ(-6px);background:hsl(230 13% 19%)}.board3d .s7{transform:translateZ(-7px);background:hsl(230 13% 18%)}.board3d .s8{transform:translateZ(-8px);background:hsl(230 13% 17%)}.board3d .s9{transform:translateZ(-9px);background:hsl(230 13% 16%)}.board3d .s10{transform:translateZ(-10px);background:hsl(230 13% 15%)}.board3d .s11{transform:translateZ(-11px);background:hsl(230 13% 14%)}.board3d .s12{transform:translateZ(-12px);background:hsl(230 13% 13%)}.board3d .s13{transform:translateZ(-13px);background:hsl(230 13% 12%)}.board3d .s14{transform:translateZ(-14px);background:hsl(230 13% 11%)}.board3d .s15{transform:translateZ(-15px);background:hsl(230 13% 10%)}.board3d .s16{transform:translateZ(-16px);background:hsl(230 13% 9%)}
.board3d .s16{box-shadow:0 0 0 1px hsl(12 100% 66% / .55),0 0 30px hsl(12 100% 60% / .35)}
.board3d .top{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr) 7px repeat(3,1fr) 7px repeat(3,1fr);grid-template-rows:repeat(3,1fr) 7px repeat(3,1fr) 7px repeat(3,1fr);gap:4px;padding:12px;border-radius:20px;background:linear-gradient(160deg,hsl(230 16% 15%),hsl(230 18% 8%));box-shadow:inset 0 0 0 2px hsl(36 25% 95% / .8),inset 0 2px 0 2px hsl(0 0% 100% / .08);transform-style:preserve-3d}
.board3d .r1{grid-row:1}.board3d .c1{grid-column:1}.board3d .r2{grid-row:2}.board3d .c2{grid-column:2}.board3d .r3{grid-row:3}.board3d .c3{grid-column:3}.board3d .r4{grid-row:5}.board3d .c4{grid-column:5}.board3d .r5{grid-row:6}.board3d .c5{grid-column:6}.board3d .r6{grid-row:7}.board3d .c6{grid-column:7}.board3d .r7{grid-row:9}.board3d .c7{grid-column:9}.board3d .r8{grid-row:10}.board3d .c8{grid-column:10}.board3d .r9{grid-row:11}.board3d .c9{grid-column:11}
.board3d .t{position:relative;display:grid;place-items:center;border-radius:6px;background:hsl(230 14% 11%);box-shadow:inset 0 2px 4px rgb(0 0 0 / .55),inset 0 -1px 0 hsl(0 0% 100% / .06);transform-style:preserve-3d}
.board3d .t b{font-family:var(--display);font-weight:600;font-size:clamp(.85rem,2.3vw,1.35rem);line-height:1;color:hsl(228 12% 74%)}
/* keycaps: lifted a few px within the cell, thickness drawn as a solid shadow below,
   which follows the border radius exactly. Seen on the tilted board it reads as depth. */
.board3d .t.g,.board3d .t.lit{transform:translateY(calc(-1 * var(--h)))}
.board3d .t.g{--h:4px;background:linear-gradient(180deg,hsl(36 33% 98%),hsl(36 20% 88%));box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 hsl(36 14% 80%),0 4px 0 hsl(36 12% 64%),0 6px 0 hsl(36 10% 48%),0 10px 14px -4px rgb(0 0 0 / .7)}
.board3d .t.g b,.board3d .t.lit b{color:var(--ground);font-weight:700}
.board3d .t.lit{--h:6px;background:linear-gradient(180deg,color-mix(in oklab,var(--tone) 70%,white),var(--tone));box-shadow:inset 0 1px 0 hsl(0 0% 100% / .6),0 6px 0 color-mix(in oklab,var(--tone) 62%,black),0 8px 0 color-mix(in oklab,var(--tone) 45%,black),0 12px 18px -4px rgb(0 0 0 / .7),0 0 24px -4px var(--tone)}
.board3d .l1{--tone:var(--coral)}.board3d .l2{--tone:var(--mint)}.board3d .l3{--tone:var(--sky)}.board3d .l4{--tone:var(--violet)}.board3d .l5{--tone:var(--rose)}
@media (prefers-reduced-motion:no-preference){
  .board3d{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .stage:hover .board3d{transform:rotateX(33deg) rotateZ(-5deg)}
  .board3d .t.f b{animation:fill 7s ease-in-out infinite}
  .board3d .t.lit{animation:glow 2.6s ease-in-out infinite alternate}
  .board3d .d0 b{animation-delay:0.00s}.board3d .d1 b{animation-delay:0.45s}.board3d .d2 b{animation-delay:0.90s}.board3d .d3 b{animation-delay:1.35s}.board3d .d4 b{animation-delay:1.80s}.board3d .d5 b{animation-delay:2.25s}.board3d .d6 b{animation-delay:2.70s}.board3d .d7 b{animation-delay:3.15s}.board3d .d8 b{animation-delay:3.60s}
}
@keyframes glow{to{box-shadow:inset 0 1px 0 hsl(0 0% 100% / .6),0 6px 0 color-mix(in oklab,var(--tone) 62%,black),0 8px 0 color-mix(in oklab,var(--tone) 45%,black),0 12px 18px -4px rgb(0 0 0 / .7),0 0 40px 2px var(--tone)}}
@media (max-width:900px){.stage{justify-self:center;padding-block:1rem 0}.board3d{width:min(440px,78vw)}.hero:has(.stage) .container{grid-template-columns:1fr}}