:root,[data-theme="light"]{
  color-scheme:light;
  --paper:oklch(97% .008 260);--surface:oklch(94% .018 260);--ink:oklch(28% .074 260);--muted:oklch(46% .035 260);--gold:oklch(82% .123 83);--gold-hover:oklch(88% .1 83);--accent:oklch(46% .086 78);--line:oklch(28% .074 260 / .17);--forest:oklch(24.5% .078 260);--cream:oklch(98% .006 85);--focus:oklch(65% .13 78);
  --font-display:'Boska',Georgia,serif;--font-body:'Satoshi',Arial,sans-serif;
  --text-xs:clamp(.75rem,.72rem + .1vw,.8125rem);--text-sm:clamp(.875rem,.82rem + .2vw,1rem);--text-base:clamp(1rem,.94rem + .22vw,1.125rem);--text-lg:clamp(1.125rem,1.03rem + .4vw,1.375rem);--text-xl:clamp(2rem,1.4rem + 1.5vw,2.65rem);--text-hero:clamp(3.6rem,2rem + 4.5vw,6.35rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--radius-sm:3px;
}
[data-theme="dark"]{color-scheme:dark;--paper:oklch(20.5% .058 260);--surface:oklch(26% .065 260);--ink:oklch(96% .009 85);--muted:oklch(77% .024 260);--accent:var(--gold);--line:oklch(82% .123 83 / .23);--focus:var(--gold)}
body{font-family:var(--font-body);font-size:var(--text-base);background:var(--paper);color:var(--ink)}
.container{width:min(1200px,calc(100% - var(--space-24)));margin-inline:auto}
.site-header{background:var(--forest);color:var(--cream);border-bottom:1px solid oklch(82% .123 83 / .35)}
.site-header .brand,.site-header .theme-toggle{color:var(--gold)}
.site-header .brand-mark{color:var(--gold)}
.site-header .button-outline{border-color:oklch(82% .123 83 / .5);color:var(--gold)}
.site-header .button-outline:hover,.site-header .theme-toggle:hover{background:oklch(33% .084 260)}
.site-header nav a::after{background:var(--gold)}
.header-inner{height:96px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.brand{display:flex;gap:var(--space-3);align-items:center;flex-shrink:0;min-height:44px}
.brand-mark{width:43px;height:43px;color:var(--accent)}
.brand-name{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;line-height:1.6}
.brand-name span{display:block;font-size:var(--text-xs);letter-spacing:.4em;font-weight:400}
nav{display:flex;gap:var(--space-8);align-items:center}
nav a,.header-actions{font-size:var(--text-sm)}
nav a{min-height:44px;display:flex;align-items:center;position:relative}
nav a::after{content:'';height:1px;background:var(--accent);position:absolute;bottom:5px;left:0;right:100%;transition:right .2s ease}
nav a:hover::after{right:0}
.header-actions{display:flex;gap:var(--space-4);align-items:center}
.theme-toggle{border:0;background:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.theme-toggle:hover{background:var(--surface)}
.lucide{width:19px;height:19px;stroke-width:1.7;flex-shrink:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:54px;padding:var(--space-4) var(--space-6);font-size:var(--text-sm);font-weight:700;border:1px solid transparent;border-radius:var(--radius-sm);transition:background .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button-small{min-height:44px;padding:var(--space-2) var(--space-5)}
.button-outline{border-color:var(--line)}
.button-outline:hover{background:var(--surface)}
.button-gold{background:var(--gold);color:var(--forest)}
.button-gold:hover{background:var(--gold-hover)}
.button-dark{background:var(--ink);color:var(--paper)}
.hero{position:relative;isolation:isolate;min-height:680px;overflow:hidden;background:var(--forest);color:var(--cream)}
.hero-art,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-art{object-fit:cover;object-position:center 53%}
.hero-shade{background:linear-gradient(90deg,rgba(3,18,47,.87) 0%,rgba(4,24,60,.61) 32%,rgba(4,24,60,.13) 64%,rgba(4,24,60,.03) 100%)}
.hero-inner{min-height:680px;position:relative;padding-top:var(--space-20);padding-bottom:var(--space-24);display:flex;align-items:center}
.hero-copy{max-width:670px}
.eyebrow{font-size:var(--text-xs);letter-spacing:.14em;line-height:1.6;font-weight:700;color:var(--accent)}
.hero-eyebrow{display:flex;align-items:center;gap:var(--space-3);color:var(--gold);margin-bottom:var(--space-6)}
.hero-eyebrow span{height:1px;width:28px;background:currentColor}
h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
h1{font-size:var(--text-hero);line-height:.98;letter-spacing:-.035em}
h1 span{color:var(--gold)}
.hero-description{max-width:440px;margin-top:var(--space-6);color:var(--cream);font-size:var(--text-base);line-height:1.8}
.hero-actions{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-8)}
.hero-secondary{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);min-height:44px}
.hero-secondary:hover{color:var(--gold)}
.hero-bottom{position:absolute;bottom:var(--space-6);left:0;right:0;display:flex;align-items:center;justify-content:space-between;color:var(--cream);font-size:var(--text-xs);letter-spacing:.15em}
.hero-bottom a{width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center}
.watch-section{padding-block:var(--space-24)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);margin-bottom:var(--space-10)}
h2{font-size:var(--text-xl);margin-top:var(--space-3)}
.text-link{display:inline-flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);font-weight:700;min-height:44px;border-bottom:1px solid var(--line)}
.text-link:hover{color:var(--accent);border-color:var(--accent)}
.featured-video{display:grid;grid-template-columns:1.45fr 1fr;background:var(--surface)}
.video-image{position:relative;display:block;overflow:hidden;background:var(--forest);aspect-ratio:16/9}
.video-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.video-image:hover img{transform:scale(1.025)}
.featured-image{aspect-ratio:auto;min-height:340px}
.featured-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.23),transparent 50%,rgba(0,0,0,.6));pointer-events:none}
.image-label{position:absolute;left:var(--space-5);top:var(--space-5);background:rgba(6,25,56,.86);padding:var(--space-2) var(--space-3);color:var(--cream);font-size:var(--text-xs);letter-spacing:.09em;z-index:1}
.play-button{width:70px;height:70px;display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--forest);background:var(--cream);border-radius:50%;z-index:1;box-shadow:0 4px 20px #151a1940;transition:background .2s}
.play-button .lucide{width:25px;height:25px;fill:currentColor;margin-left:var(--space-1)}
.video-image:hover .play-button{background:var(--gold)}
.watch-label{display:flex;align-items:center;gap:var(--space-2);position:absolute;bottom:var(--space-5);left:var(--space-5);color:var(--cream);font-size:var(--text-xs);z-index:1}
.featured-copy{align-self:center;padding:var(--space-10)}
.featured-copy h3{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.15;font-weight:500;margin-block:var(--space-4)}
.featured-copy p:not(.eyebrow){font-size:var(--text-sm);color:var(--muted)}
.featured-copy .text-link{margin-top:var(--space-5)}
.more-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--space-6);margin-top:var(--space-12);margin-bottom:var(--space-6);font-size:var(--text-xs);letter-spacing:.1em;color:var(--muted)}
.more-heading span:last-child{letter-spacing:0}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.video-card{display:flex;flex-direction:column;align-items:flex-start}
.video-card .video-image{width:100%}
.small-play{position:absolute;right:var(--space-3);bottom:var(--space-3);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--forest)}
.small-play .lucide{width:14px;height:14px;fill:currentColor}
.video-card .eyebrow{margin-top:var(--space-5);margin-bottom:var(--space-2)}
.video-card h3{font-size:var(--text-lg);line-height:1.4;font-weight:500;margin-bottom:var(--space-3)}
.video-card h3 a:hover{color:var(--accent)}
.card-link{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-xs);color:var(--muted);margin-top:auto;min-height:44px}
.card-link:hover{color:var(--accent)}
.card-link .lucide{width:16px;height:16px}
.about-section{background:var(--surface);padding-block:var(--space-20)}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:var(--space-24)}
.about-image{position:relative;height:490px;overflow:hidden}
.about-image img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.image-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(4,20,48,.95));color:var(--cream);padding:var(--space-10) var(--space-6) var(--space-6);font-size:var(--text-xs);letter-spacing:.12em}
.about-copy h2{margin-bottom:var(--space-6)}
.about-copy>p:not(.eyebrow){color:var(--muted);margin-bottom:var(--space-5);font-size:var(--text-base)}
.about-copy .text-link{margin-top:var(--space-2)}
.support-section{padding-block:var(--space-24);background:var(--forest);color:var(--cream)}
.support-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-24);align-items:center}
.support-section .eyebrow{color:var(--gold)}
.support-section h2{margin-bottom:var(--space-6)}
.support-section p{max-width:490px}
.support-section h2{color:var(--gold)}
.support-section .support-note{color:oklch(80% .024 260);margin-top:var(--space-5);font-size:var(--text-sm)}
.giving{border-left:1px solid #ffffff30;padding-left:var(--space-16)}
.giving-label{font-size:var(--text-xs);letter-spacing:.15em;color:var(--gold)}
.venmo-wordmark{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-size:var(--text-xl);font-weight:700;margin-top:var(--space-4);line-height:1.3}
.venmo-wordmark .lucide{width:28px;height:28px;color:var(--gold)}
.venmo-handle{font-size:var(--text-sm);margin-top:var(--space-2);color:oklch(80% .024 260)}
.venmo-qr{margin:var(--space-6) 0 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.venmo-qr a{display:block;background:#fff;border-radius:var(--radius-sm);width:min(248px,100%);padding:var(--space-2)}
.venmo-qr img{display:block;width:100%;height:auto;aspect-ratio:1}
.venmo-qr figcaption{font-size:var(--text-sm);color:var(--cream);text-align:center}
.giving .button{width:100%;margin-top:var(--space-8)}
.giving .giving-note{font-size:var(--text-xs);margin-top:var(--space-4);color:oklch(80% .024 260);display:flex;gap:var(--space-2);align-items:flex-start}
.giving-note .lucide{width:14px;height:14px;margin-top:var(--space-1)}
.closing{padding-block:var(--space-16);display:flex;justify-content:space-between;align-items:center;gap:var(--space-8)}
.site-footer{border-top:1px solid var(--line);color:var(--muted);font-size:var(--text-xs)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding-block:var(--space-6)}
.footer-inner>div{display:flex;gap:var(--space-6)}
.footer-inner a{min-height:44px;display:flex;gap:var(--space-1);align-items:center}
.footer-inner a .lucide{width:14px;height:14px}
@media(min-width:1600px){.hero,.hero-inner{min-height:740px}}
@media(max-width:1050px){.container{width:calc(100% - var(--space-16))}.header-inner{gap:var(--space-4)}nav{gap:var(--space-5)}.header-youtube{display:none}.featured-copy{padding:var(--space-6)}.about-grid{gap:var(--space-12)}.support-grid{gap:var(--space-12)}.giving{padding-left:var(--space-10)}.footer-inner>span{display:none}}
@media(max-width:720px){
  html{scroll-padding-top:var(--space-6)}.container{width:calc(100% - var(--space-10))}
  .header-inner{height:auto;min-height:100px;flex-wrap:wrap;gap:0;padding-top:var(--space-3);padding-bottom:var(--space-2)}.brand-mark{width:34px;height:34px}.brand{gap:var(--space-2)}.brand-name{font-size:var(--text-xs);letter-spacing:.065em}.header-actions{margin-left:auto}nav{order:3;width:100%;justify-content:center;gap:var(--space-8);border-top:1px solid var(--line);margin-top:var(--space-2)}nav a{font-size:var(--text-xs)}
  .site-header nav{border-color:oklch(82% .123 83 / .25)}
  .hero,.hero-inner{min-height:655px}.hero-inner{padding-top:var(--space-16);padding-bottom:var(--space-24)}.hero-art{object-position:62% center}.hero-shade{background:linear-gradient(90deg,rgba(3,18,47,.87),rgba(4,24,60,.48))}.hero-eyebrow{letter-spacing:.1em;font-size:var(--text-xs)}.hero-eyebrow span{width:18px}.hero-description{max-width:360px}.hero-actions{flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-6)}.hero-bottom{font-size:var(--text-xs);letter-spacing:.06em;bottom:var(--space-4)}.hero-bottom span{max-width:240px}.hero-bottom a{width:40px;height:40px}
  .watch-section{padding-block:var(--space-16)}.section-heading{align-items:flex-start;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}.featured-video{grid-template-columns:1fr}.featured-image{aspect-ratio:16/9;min-height:0}.featured-copy{padding:var(--space-6)}.featured-copy h3{font-size:var(--text-xl)}.play-button{width:56px;height:56px}
  .more-heading{margin-top:var(--space-8)}.more-heading span:last-child{display:none}.video-grid{grid-template-columns:1fr;gap:var(--space-8)}.video-card{padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}.video-card h3{max-width:95%}.video-card .eyebrow{margin-top:var(--space-4)}
  .about-section{padding-block:var(--space-12)}.about-grid{grid-template-columns:1fr;gap:var(--space-8)}.about-image{height:340px}.about-copy>p:not(.eyebrow){font-size:var(--text-base)}
  .support-section{padding-block:var(--space-16)}.support-grid{grid-template-columns:1fr;gap:var(--space-8)}.giving{border-left:0;border-top:1px solid #ffffff30;padding-left:0;padding-top:var(--space-8)}.giving .button{margin-top:var(--space-6)}.closing{flex-direction:column;align-items:flex-start;padding-block:var(--space-12);gap:var(--space-6)}.footer-inner{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
}

/* ---------- Crisp hero + scroll motion ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),oklch(90% .09 88));transform-origin:0 50%;transform:scaleX(var(--progress,0))}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;transform:translate3d(0,calc(var(--hero-p,0) * 14%),0) scale(calc(1 + var(--hero-p,0) * .16));transform-origin:62% 55%;will-change:transform}
.hero-media .hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:auto;image-rendering:auto;animation:hero-settle 2.6s cubic-bezier(.16,1,.3,1) both}
@keyframes hero-settle{from{transform:scale(1.12);filter:brightness(.75)}to{transform:scale(1);filter:none}}
[data-hero-copy]{opacity:calc(1 - var(--hero-p,0) * 1.5);transform:translate3d(0,calc(var(--hero-p,0) * -90px),0)}
.hero-copy>*{animation:rise-in 1.1s cubic-bezier(.16,1,.3,1) both}
.hero-copy>*:nth-child(2){animation-delay:.12s}.hero-copy>*:nth-child(3){animation-delay:.24s}.hero-copy>*:nth-child(4){animation-delay:.36s}.hero-copy>*:nth-child(5){animation-delay:.48s}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-bottom a{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.silver-badge{display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);border-radius:999px;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;color:#1d2433;background:linear-gradient(115deg,#f4f6f9 0%,#c9ced6 30%,#fdfdfd 48%,#aeb4be 70%,#e9ecf0 100%);background-size:220% 100%;box-shadow:0 6px 24px #0006,inset 0 1px 0 #fff;animation:rise-in 1.1s cubic-bezier(.16,1,.3,1) both,sheen 5s ease-in-out 1.4s infinite}
.silver-badge:hover{filter:brightness(1.06)}
.silver-badge-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1d2433;color:#e8ebef}
.silver-badge-icon svg{width:16px;height:16px}
.silver-badge-sep{opacity:.5}
@keyframes sheen{0%,60%,100%{background-position:100% 0}80%{background-position:0 0}}

[data-reveal]{opacity:0;transform:translate3d(0,48px,0) scale(.985);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--delay,0ms),transform 1.1s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
[data-reveal].is-visible{opacity:1;transform:none}
.no-motion [data-reveal]{opacity:1;transform:none}

.zoom-media img{transform:scale(calc(1.28 - var(--p-in,0) * .28));transition:transform .2s linear}
.featured-video .zoom-media{clip-path:inset(calc((1 - var(--p-in,1)) * 12%) calc((1 - var(--p-in,1)) * 8%) round 2px)}
.zoom-media:hover img{transform:scale(1.03)}
.video-card .video-image img{transform:scale(1.001)}
.video-card:hover .video-image img{transform:scale(1.06)}
.video-card .video-image{box-shadow:0 0 0 0 transparent;transition:box-shadow .4s ease,transform .4s ease}
.video-card:hover .video-image{transform:translateY(-4px);box-shadow:0 18px 40px -18px #081c4099}

.about-image img{height:118%;transform:translate3d(0,calc((var(--p,.5) - .5) * -14%),0) scale(1.04)}

.milestone-section{position:relative;overflow:hidden;isolation:isolate;padding-block:var(--space-24);background:radial-gradient(120% 90% at 78% 40%,oklch(31% .08 260) 0%,var(--forest) 60%);color:var(--cream)}
.milestone-glow{position:absolute;z-index:-1;width:720px;height:720px;right:-120px;top:50%;border-radius:50%;background:radial-gradient(circle,oklch(90% .02 250 / .22),transparent 65%);transform:translate3d(0,calc(-50% + (var(--p,.5) - .5) * 120px),0)}
.milestone-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-20);align-items:center}
.milestone-section .eyebrow{color:var(--gold)}
.milestone-section h2{margin-bottom:var(--space-6);background:linear-gradient(100deg,#f5f7fa 0%,#bfc5ce 35%,#ffffff 50%,#aab1bb 70%,#eef0f3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.milestone-copy>p:not(.eyebrow){max-width:520px;color:oklch(86% .02 260);margin-bottom:var(--space-4)}
.milestone-thanks{font-size:var(--text-sm)}
.milestone-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin:var(--space-10) 0 0;padding-top:var(--space-8);border-top:1px solid oklch(82% .123 83 / .3);max-width:540px}
.milestone-stats dt{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:oklch(78% .03 260)}
.milestone-stats dd{margin:var(--space-2) 0 0;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums}
.milestone-stage{perspective:1400px;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.plaque{position:relative;margin:0;width:min(380px,100%);border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -30px #000c,0 0 0 1px #ffffff26,0 0 90px -20px oklch(90% .02 250 / .35);transform:rotateX(calc((1 - var(--p-in,1)) * 22deg)) rotateY(calc((var(--p,.5) - .5) * -14deg)) scale(calc(.78 + var(--p-in,1) * .22));transform-style:preserve-3d}
.plaque img{width:100%;height:auto}
.plaque-shine{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 35%,#ffffff45 48%,transparent 60%);transform:translate3d(calc((var(--p,.5) - .5) * 140%),0,0);mix-blend-mode:screen;pointer-events:none}
.plaque-caption{text-align:center;font-size:var(--text-sm);color:var(--cream);font-weight:700}
.plaque-caption span{display:block;font-weight:400;color:oklch(78% .03 260)}

@media(max-width:1050px){.milestone-grid{gap:var(--space-12)}}
@media(max-width:720px){
  .silver-badge{font-size:.72rem;gap:var(--space-2);letter-spacing:.02em}.silver-badge-sep,.silver-badge-count{display:none}
  .milestone-section{padding-block:var(--space-16)}.milestone-grid{grid-template-columns:1fr;gap:var(--space-10)}.milestone-stats{gap:var(--space-4)}.milestone-stats dd{font-size:1.6rem}.plaque{width:min(320px,86%)}
  .hero-media{transform-origin:62% 50%}
}
@media(prefers-reduced-motion:reduce){.hero-media,[data-hero-copy],.plaque,.about-image img,.zoom-media img,.milestone-glow,.plaque-shine{transform:none!important;opacity:1!important}.featured-video .zoom-media{clip-path:none}[data-reveal]{opacity:1;transform:none}}

/* Pong */
.pong-section{background:var(--forest);color:var(--cream);padding-block:var(--space-20,6rem);position:relative;overflow:hidden}
.pong-section::before{content:"";position:absolute;inset:-20% 30% auto -10%;height:70%;background:radial-gradient(closest-side,oklch(82% .123 83 / .12),transparent);pointer-events:none}
.pong-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-12);align-items:center;position:relative}
.pong-section .eyebrow{color:var(--gold)}
.pong-head h2{color:var(--cream);font-size:var(--text-xl);margin-block:var(--space-4)}
.pong-lede{color:oklch(88% .02 260);max-width:36ch;line-height:1.65}
.pong-board{display:grid;gap:var(--space-4)}
.pong-score{display:flex;justify-content:space-between;align-items:end;padding-inline:var(--space-2)}
.pong-score span{display:grid;gap:2px}
.pong-score span:last-child{text-align:right}
.pong-score small{font-size:var(--text-xs);letter-spacing:.15em;color:oklch(80% .02 260)}
.pong-score b{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.pong-score span:last-child b{color:oklch(88% .012 260)}
.pong-stage{position:relative;border-radius:10px;overflow:hidden;border:1px solid oklch(82% .123 83 / .35);box-shadow:0 30px 80px -30px #000a,0 0 0 6px oklch(82% .123 83 / .06)}
#pong{display:block;width:100%;aspect-ratio:5/3;touch-action:none;cursor:none;outline:none}
#pong:focus-visible{box-shadow:inset 0 0 0 3px var(--gold)}
.pong-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:var(--space-3);background:oklch(18% .06 260 / .72);backdrop-filter:blur(3px);padding:var(--space-6)}
.pong-overlay[hidden]{display:none}
.pong-overlay-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--cream);margin:0}
.pong-overlay-text{color:oklch(86% .02 260);margin:0 0 var(--space-3);max-width:34ch}
.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}
@media (max-width:860px){.pong-inner{grid-template-columns:1fr;gap:var(--space-8)}.pong-section{padding-block:var(--space-16)}}