/* doughnut.com front door. Same look as the game at /play. */
@font-face{font-family:Space;src:url('/play/assets/fonts/space-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Space;src:url('/play/assets/fonts/space-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url('/play/assets/fonts/mono-regular.ttf') format('truetype');font-display:swap}
:root{--bg:#0f141a;--ink:#f4eef1;--muted:#b9aeb4;--pink:#ffb1c1;--hot:#ff8fbd;--line:#ffffff1a;--card:#161c23;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.55 Space,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#0f141afa 5%,#0f141ad9 45%,#0f141a73 100%),linear-gradient(0deg,#0f141a 2%,transparent 55%),url('/play/ref/stitch/layout1.webp') center right/cover;opacity:.9}
a{color:inherit}
a:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:6px}
.shell{width:min(1180px,100% - 40px);margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:26px;letter-spacing:-1px;text-decoration:none}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a{text-decoration:none;font-weight:700;font-size:14px;padding:10px 14px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover{background:#ffffff12}
.top .nav-play{background:var(--hot);color:#1b0f14}
.top .nav-play:hover{background:var(--pink)}
main{flex:1}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;padding:40px 0 56px}
.eyebrow{font:13px Mono,monospace;letter-spacing:.24em;color:var(--pink);margin:0}
h1{font-size:clamp(56px,9vw,112px);line-height:.95;letter-spacing:-.045em;margin:14px 0 18px}
h1 em{font-style:normal;color:var(--hot)}
.lede{font-size:clamp(17px,1.6vw,20px);color:#e6dce1;max-width:34em;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.play{display:inline-flex;align-items:center;gap:12px;padding:0 30px;min-height:60px;border-radius:14px;background:linear-gradient(#ffb1c1,#ff7fb0);color:#2a0f1a;font-weight:700;font-size:20px;letter-spacing:.02em;text-decoration:none;box-shadow:0 12px 34px #ff5c9a44;transition:transform .15s ease,box-shadow .15s ease}
.play:hover{transform:translateY(-2px);box-shadow:0 16px 40px #ff5c9a66}
.ghost{display:inline-flex;align-items:center;padding:0 22px;min-height:60px;border-radius:14px;border:1px solid #ffffff33;font-weight:700;text-decoration:none;background:#ffffff08}
.ghost:hover{background:#ffffff14}
.live{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 12px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff1f;font-weight:700;font-size:13px}
.live[hidden]{display:none}
.live b{color:#9dffc8}
.dot{width:8px;height:8px;border-radius:50%;background:#3ee07f;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #3ee07f99}100%{box-shadow:0 0 0 8px #3ee07f00}}
.small{color:var(--muted);font-size:14px;margin:0}
.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:460px;justify-self:center;width:100%}
.hero-art img{position:relative;width:88%;height:auto;filter:drop-shadow(0 30px 40px #000a);animation:bob 3.2s ease-in-out infinite}
.orbit{position:absolute;inset:4%;border-radius:50%;border:1px solid #ffffff1f;background:radial-gradient(circle,#ffb1c11a,transparent 65%)}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 0 56px}
.card{background:#161c23e6;border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(6px)}
.card h2{font-size:22px;letter-spacing:-.02em;margin:0}
.card p{margin:0;color:#ddd3d8}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:4px 10px;color:#ddd3d8;font-size:15px}
.steps li::before{content:counter(s);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ffb1c122;color:var(--pink);font:700 14px Mono,monospace}
.steps b{color:var(--ink)}
.leaders{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.leaders li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;font-size:15px}
.leaders .medal{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px Mono,monospace;color:#2a1a00;background:linear-gradient(135deg,#ffe07a,#e2a52a)}
.leaders li:nth-child(2) .medal{background:linear-gradient(135deg,#eef1f5,#a8b2bd);color:#2a3038}
.leaders li:nth-child(3) .medal{background:linear-gradient(135deg,#f0b27a,#b36a2c);color:#3a1d06}
.leaders .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.leaders .what{font:13px Mono,monospace;color:#ffd092}
.muted{color:var(--muted)}
.text-link{margin-top:auto;color:var(--pink);font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline}
.sponsor b{color:#9dffc8}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:22px 0 max(22px,env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot a{text-decoration:none;font-weight:700;color:#e6dce1;padding:8px 0}
.foot a:hover{color:var(--pink)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;padding:12px 0 40px;gap:8px}
  .hero-art{order:-1;max-width:260px}
  .lede{margin-inline:auto}
  .cta{justify-content:center}
  .cards{grid-template-columns:1fr}
  .foot{justify-content:center;text-align:center}
  .foot nav{justify-content:center}
}
@media (max-width:860px) and (max-height:700px) and (orientation:portrait){.hero-art{max-width:150px}h1{font-size:48px;margin:8px 0 10px}.cta{margin:18px 0 12px}.top{padding:14px 0}}
@media (max-width:420px){.top nav a:not(.nav-play){display:none}.play{width:100%;justify-content:center}.ghost{width:100%;justify-content:center}}
@media (orientation:landscape) and (max-height:500px){.hero{grid-template-columns:1.2fr .8fr;text-align:left;padding:8px 0 24px}.hero-art{order:0;max-width:220px}.cta{justify-content:flex-start}h1{font-size:52px;margin:8px 0 10px}}
@media (prefers-reduced-motion:reduce){.hero-art img,.dot{animation:none}.play{transition:none}}