:root{--ink: #3a2216;--cream: #fbf3e6;--paper: #fff9f0;--gold: #c8952c;--gold-hi: #f3d27a;--celadon: #3f8c84;--terracotta: #b5532c;--tea: #b25f1d;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif}html,body{background:#e6d6be;color:var(--ink);font-family:var(--sans)}.stage{background:#ecdcc2;cursor:pointer}.chip{position:absolute;top:calc(var(--safe-t) + 10px);z-index:5;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,#fffcf69e,#f0dec46b);color:var(--ink);box-shadow:0 6px 14px #140a044d,inset 0 1px #ffffffe6,inset 0 -1px #78502833;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:0;text-decoration:none;transition:transform .15s ease}.chip:active{transform:scale(.92)}.chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chip .spk{fill:currentColor}.back{left:calc(var(--safe-l) + 10px)}.mute{right:calc(var(--safe-r) + 10px)}.mute .off,.mute[aria-pressed=true] .on{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true]{color:var(--terracotta)}.title{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--safe-t) + 64px) 24px calc(var(--safe-b) + 24px);background:linear-gradient(180deg,#fffaf059,#fffaf000 45%)}.title-card{text-align:center;padding:14px 22px 18px;border-radius:28px;background:radial-gradient(closest-side,#fffbf4cc,#fffbf400);animation:rise .9s cubic-bezier(.2,.9,.3,1.2) both}.eyebrow{margin:0;font:italic 500 15px/1 var(--serif);letter-spacing:.18em;text-transform:lowercase;color:var(--terracotta)}.title-foot{position:absolute;left:0;right:0;top:var(--band-y, 60%);transform:translateY(-50%);text-align:center;animation:fade 1.2s .3s ease both}.title-foot .go{margin-top:10px}.title h1{margin:4px 0 6px;font:600 clamp(64px,22vw,104px)/.95 var(--serif);letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px 0 #fffaf2,0 8px 22px rgba(150,90,40,.28)}.title h1:after{content:"";display:block;margin:8px auto 0;width:64%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent)}.rule{display:inline-block;margin:0;padding:8px 16px;border-radius:12px;font:500 17px/1.3 var(--serif);color:var(--ink);background:#fff8ee8c;border:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.best{margin:8px 0 0;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3a2216b3}.best b{color:var(--ink);font:700 17px var(--serif);letter-spacing:0;margin-left:6px}.go{display:inline-block;margin:18px 0 0;padding:12px 26px;border-radius:999px;font:700 14px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff8ec;background:linear-gradient(180deg,#e0913f,#a9501a 55%,#8a3c10);border:1px solid rgba(255,220,170,.7);text-shadow:0 1px 1px rgba(60,20,0,.5);box-shadow:inset 0 1px #fff0d2d9,inset 0 -3px 6px #46140059,0 8px 20px #78320a66,0 0 24px #ffaa5040;animation:breathe 2.2s ease-in-out infinite}.over{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;background:#5a381e47;animation:fade .3s ease both}.card{position:relative;width:min(320px,86%);text-align:center;padding:30px 22px 24px;background:radial-gradient(120% 80% at 20% 0%,#ffffffeb,#fff8eebd 55%,#f0e0c8b3);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:22px;border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px #fff,inset 0 -2px #a06e3c2e,inset 3px 0 #ffffff80,0 0 0 1px #50321e40,0 26px 50px #14080280;animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}.card .label{display:block;margin:0;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#3a221699}.card .score{margin:6px 0 14px;font:600 76px/.9 var(--serif);color:var(--ink)}.card .cause{margin:-4px 0 14px;font:italic 500 15px/1.3 var(--serif);color:#8a4a2c;animation:fade .5s .45s ease both}.card .cause:empty{display:none}.card .row>div{animation:lift .45s cubic-bezier(.2,.9,.3,1.3) both}.card .row>div:nth-child(1){animation-delay:.35s}.card .row>div:nth-child(2){animation-delay:.45s}.card .row>div:nth-child(3){animation-delay:.55s}.card .go{animation:fade .4s .7s ease both,breathe 2.2s 1.1s ease-in-out infinite}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;animation:sheen 1.1s .5s ease-out both}.card .row{display:flex;justify-content:space-around;gap:8px;padding-top:14px;border-top:2px solid var(--gold)}.card .row b{display:block;margin-top:6px;font:600 24px/1 var(--serif)}.ribbon{position:absolute;left:50%;top:-16px;transform:translate(-50%) rotate(-3deg);margin:0;padding:7px 18px;border-radius:6px;white-space:nowrap;font:italic 700 17px/1 var(--serif);color:#4a2a08;background:linear-gradient(180deg,var(--gold-hi),var(--gold));box-shadow:0 4px 10px #78500a59;animation:shine 1.4s ease-in-out infinite alternate}.pause{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#180c0680}.pause p{margin:0;text-align:center;font:600 34px/1.1 var(--serif);color:var(--paper)}.pause span{font:600 13px var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.85}@keyframes lift{0%{opacity:0;transform:translateY(10px)}}@keyframes sheen{0%{background-position:130% 0}to{background-position:-30% 0}}@keyframes rise{0%{opacity:0;transform:translateY(-4vh)}}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(24px) scale(.9)}}@keyframes breathe{50%{transform:scale(1.05)}}@keyframes shine{to{transform:translate(-50%) rotate(-3deg) scale(1.06)}}@media(prefers-reduced-motion:reduce){.title-card,.title-foot,.card,.over,.go,.ribbon,.card .cause,.card .row>div,.card .go,.card:before{animation:none}.card:before{display:none}}@media(max-height:700px){.title-foot{position:absolute;left:0;right:0;top:var(--band-y, 60%);transform:translateY(-50%);text-align:center;animation:fade 1.2s .3s ease both}.title-foot .go{margin-top:10px}.title h1{font-size:72px}}
