:root{--navy:#070a18;--lapis:#2a4fbf;--lapis2:#1f3c9e;--moon:#ffd23f;--white:#fbf7ec;--gold:#d6b260}
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--navy);color:#e8eeff;font:17px/1.5 Fredoka,-apple-system,system-ui,sans-serif;overflow-x:hidden}
  #sky,#nova{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
  #sky{z-index:0}#nova{z-index:1}
  main{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:22px 16px 60px;text-align:center}
  .logo{width:min(720px,100%);height:auto;display:block;margin:0 auto}
  .soon{display:inline-block;margin:4px 0 6px;padding:5px 14px;border-radius:999px;background:rgba(42,79,191,.25);border:1px solid var(--lapis);color:var(--moon);font-weight:600;letter-spacing:3px;font-size:13px}
  .planet{position:fixed;z-index:0;left:-180px;bottom:-260px;width:600px;height:600px;border-radius:50%;
     background:url(/site/assets/apollo17_earth.jpg) -151px -157px/900px 900px no-repeat;box-shadow:0 0 70px 8px rgba(120,170,255,.25);opacity:.92}
  .scene{position:relative;height:560px;margin:4px auto 10px;max-width:900px}
  .table{position:absolute;left:50%;top:212px;width:min(760px,96%);height:220px;transform:translateX(-50%);border-radius:50%;
     background:radial-gradient(ellipse at 50% 40%,rgba(28,43,94,.82) 0%,rgba(11,18,48,.80) 55%,rgba(5,8,26,.84) 100%);
     box-shadow:0 0 0 3px var(--lapis),0 0 0 7px rgba(214,178,96,.35),0 26px 50px rgba(0,0,0,.8),0 0 110px rgba(90,140,255,.25),inset 0 0 70px rgba(0,0,0,.5)}
  .table.black{background:radial-gradient(ellipse at 50% 40%,rgba(21,21,28,.82) 0%,rgba(8,8,12,.80) 60%,rgba(0,0,0,.84) 100%)}
  .table.moon,.table.earth{background:none}
  .table.moon::before,.table.earth::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.8}
  .table.moon::before{background:linear-gradient(rgba(5,8,26,.38),rgba(5,8,26,.55)),url(/site/assets/apollo17_moon.jpg) center/175% auto}
  .table.earth::before{background:linear-gradient(rgba(5,8,26,.30),rgba(5,8,26,.52)),url(/site/assets/apollo17_earth.jpg) center/170% auto}
  .tables{display:flex;gap:10px;justify-content:center;margin:2px 0 4px;flex-wrap:wrap}
  .tb{display:flex;align-items:center;gap:8px;background:rgba(11,18,48,.8);border:1px solid #2a4fbf;color:#e8eeff;border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font:600 14px Fredoka,sans-serif}
  .tb i{width:26px;height:26px;border-radius:50%;display:block;background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
  .tb.on{border-color:#ffd23f;color:#ffd23f;box-shadow:0 0 14px rgba(255,210,63,.35)}
  .tb small{font-size:10px;letter-spacing:1px;opacity:.75}
  .table::after{content:"";position:absolute;left:50%;bottom:-60px;width:110px;height:60px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,210,63,.45),rgba(255,210,63,0));border-radius:0 0 40px 40px;filter:blur(2px)}
  .seat{position:absolute;display:flex;align-items:center;gap:10px;z-index:3}
  .seat.top{left:50%;top:0;transform:translateX(-50%)}.seat.bot{left:50%;bottom:0;transform:translateX(-50%)}
  .plate{background:rgba(7,10,24,.85);border:1px solid var(--lapis);border-radius:10px;padding:4px 12px;text-align:left;min-width:110px}
  .plate .nm{font-weight:700}.plate .sc{font-size:24px;font-weight:700;color:var(--moon);line-height:1}
  .bobble{position:relative;width:126px;height:150px;flex:none}
  .bobble .body{position:absolute;bottom:0;left:50%;width:96px;transform:translateX(-50%);z-index:0}
  .bobble .head{position:absolute;left:50%;top:0;width:112px;margin-left:-56px;z-index:2;transform-origin:50% 90%;animation:bob 2.8s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
  .bobble.alt .head,.bobble.alt .neck{animation-duration:3.3s;animation-delay:-1.1s}
  .bobble .neck{position:absolute;left:50%;top:78px;width:38px;height:34px;margin-left:-19px;z-index:1;transform-origin:50% 100%;border-radius:9px;
     background:repeating-linear-gradient(180deg,#d9dce4 0 4px,#9aa0ad 4px 6px,#eef0f5 6px 8px);box-shadow:0 0 0 2px #6e7380;animation:nb 2.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(2px)}}
  @keyframes nb{0%,100%{transform:rotate(-2deg) scaleY(1)}50%{transform:rotate(2deg) scaleY(.92)}}
  .bobble.score .head{animation:boing .95s cubic-bezier(.3,1.7,.5,1) 2}
  .bobble.score .neck{animation:nbo .95s cubic-bezier(.3,1.7,.5,1) 2}
  @keyframes boing{25%{transform:translateY(-22px) rotate(-9deg)}55%{transform:translateY(5px) rotate(7deg)}80%{transform:translateY(-4px)}}
  @keyframes nbo{25%{transform:scaleY(1.7) rotate(-5deg)}55%{transform:scaleY(.82)}80%{transform:scaleY(1.15)}}
  .backs{position:absolute;left:50%;top:160px;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
  .bk{width:22px;height:42px;border-radius:5px;background:radial-gradient(ellipse at 50% 0%,#1b2346,#05070f);box-shadow:inset 0 0 0 1.5px var(--lapis),0 3px 0 #000;display:grid;place-items:center;color:var(--moon);font-size:12px}
  .t{position:absolute;display:flex;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 28%),linear-gradient(160deg,#fdfaf2,#eee5d2 55%,#ddd2bb);
     box-shadow:inset 0 1.5px 0 #fff,0 2px 0 #b9ad94,0 4px 0 #a39780,0 8px 12px rgba(0,0,0,.55)}
  .t.h{width:62px;height:31px}.t.v{width:31px;height:62px;flex-direction:column}
  .half{flex:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:4px}
  .t::before{content:"";position:absolute;border-radius:2px;background:linear-gradient(var(--cd,90deg),rgba(95,80,56,.75) 0 45%,rgba(255,255,255,.9) 55%)}
  .t.h::before{left:50%;top:15%;bottom:15%;width:2px;margin-left:-1px;--cd:90deg}.t.v::before{top:50%;left:15%;right:15%;height:2px;margin-top:-1px;--cd:180deg}
  .t::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#fffbe6 0%,#ffe9a8 14%,rgba(255,233,168,0) 34%),radial-gradient(circle at 50% 55%,#e2bd62,#c79a3c 46%,#946c22 74%,#5e4312);
    box-shadow:inset 0 -1px 1px rgba(70,45,8,.6),0 0 0 .8px rgba(92,66,20,.75),0 1px 1px rgba(0,0,0,.45)}
  .p{width:6px;height:6px;border-radius:50%;place-self:center;background:radial-gradient(circle at 50% 35%,#060b1e,#0d1838 48%,#1d2f63 78%,#2b3f7a);box-shadow:inset 0 1.5px 1.5px rgba(0,0,0,.85),0 0 0 .5px rgba(60,48,30,.55),0 1px 0 rgba(255,255,255,.95)}
  .spin{box-shadow:inset 0 1.5px 0 #fff,0 2px 0 #b9ad94,0 4px 0 #a39780,0 8px 12px rgba(0,0,0,.55),0 0 0 3px var(--gold),0 0 16px rgba(227,194,109,.55)}
  .callbig{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font:700 60px/1 Fredoka,sans-serif;color:var(--moon);pointer-events:none;z-index:6;opacity:0;
     text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.9),0 0 30px rgba(255,210,63,.7)}
  .callbig.go{animation:callpop 1.3s ease-out}
  @keyframes callpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-60%)}100%{opacity:0;transform:translate(-50%,-80%)}}
  h1{font-size:clamp(24px,4.2vw,38px);line-height:1.2;margin:8px 0 10px;color:var(--white)}
  .lede{max-width:620px;margin:0 auto 26px;color:#cdd7ff}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:0 0 34px}
  .dcard{position:relative;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 28%),linear-gradient(160deg,#fdfaf2,#eee5d2 55%,#ddd2bb);
     color:#13224f;box-shadow:inset 0 2px 0 #fff,0 3px 0 #b9ad94,0 6px 0 #a39780,0 14px 22px rgba(0,0,0,.55);padding:0;text-align:center;transition:transform .2s}
  .dcard:hover{transform:translateY(-4px) rotate(-1deg)}
  .dcard .top{padding:16px 14px 12px;font-size:38px}
  .dcard .bot{padding:12px 16px 18px;box-shadow:inset 0 2px 0 rgba(120,104,78,.45),inset 0 3px 0 rgba(255,255,255,.7)}
  .dcard .bot b{display:block;font-size:18px;color:#1f3c9e}.dcard .bot span{font-size:15px;color:#3a4675}
  .dcard::after{content:"";position:absolute;left:50%;top:76px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#c9a24a 45%,#7a5d1f)}
  .flip{perspective:900px;display:inline-block;margin-top:8px}
  .flipper{position:relative;width:300px;height:96px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
  .flip:hover .flipper,.flip:focus-within .flipper{transform:rotateX(180deg)}
  .face,.backside{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;text-decoration:none}
  .face{background:linear-gradient(160deg,#fdfaf2,#ddd2bb);color:#1f3c9e;box-shadow:inset 0 2px 0 #fff,0 4px 0 #a39780,0 12px 20px rgba(0,0,0,.5)}
  .face::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffbe6 0%,#ffe9a8 14%,rgba(255,233,168,0) 34%),radial-gradient(circle at 50% 55%,#e2bd62,#c79a3c 46%,#946c22 74%,#5e4312);box-shadow:0 0 0 .8px rgba(92,66,20,.75)}
  .backside{transform:rotateX(180deg);background:radial-gradient(ellipse at 50% 0%,#1b2346,#05070f);color:var(--moon);box-shadow:inset 0 0 0 2px var(--lapis),0 4px 0 #000,0 12px 20px rgba(0,0,0,.6)}
  .join{max-width:560px;margin:0 auto}
  .join h2{margin:0 0 4px;color:var(--white);font-size:26px}.join p{margin:0 0 12px;color:#c8d3ff}
  footer{margin-top:44px;color:#8e9bd6;font-size:14px}footer a{color:#9fb6ff}
  .hint{font-size:12px;opacity:.55;margin-top:6px}
  .code{margin:16px 0 0;font-size:15px;color:#c8d3ff}.code a{color:var(--moon);font-weight:700}
  footer a{color:inherit}
  @media (max-width:560px){.scene{height:500px}.table{top:190px;height:190px}.backs{top:146px}.bobble{transform:scale(.85)}.flipper{width:260px}}
  @media (prefers-reduced-motion: reduce){.bobble .head,.bobble .neck{animation:none}.flipper{transition:none}}
  .sw-black{background:#000}.sw-moon{background-image:url(/site/assets/apollo17_moon.jpg)}.sw-earth{background-image:url(/site/assets/apollo17_earth.jpg)}