:root{
  --sand:#d9b880; --sand-d:#b8935c; --sky1:#7fc4e8; --sky2:#dfeef7;
  --ink:#2b2118; --panel:#160f0a; --panel2:#1f1710; --line:#3b2d20;
  --gold:#e0a63c; --dust:#c8b7a2; --bad:#c8553d; --good:#6fa96b;
}
*{box-sizing:border-box}
/* .cta and main set display:, which out-specifies the UA rule for [hidden].
   Without this, hiding an element by setting .hidden does nothing. */
[hidden]{display:none!important}
/* Nothing in this interface ever renders a scrollbar. Things still scroll. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html,body{height:100%}
body{margin:0;background:#0d0906;color:var(--dust);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
main{display:flex;height:100vh}
#stage{flex:1;display:flex;flex-direction:column;min-width:0;background:#0d0906}
#sceneWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#scene{width:100%;height:100%}

#side{width:414px;flex:none;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;padding:16px;overflow:hidden}
#side header h1{margin:0;font-size:17px;letter-spacing:.04em;color:#f0e3cf;font-weight:650}


.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.card.grow{flex:1;min-height:0;display:flex;flex-direction:column}
.cardhead{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8a7358;margin-bottom:8px}
.attempt,.score{color:var(--gold);letter-spacing:0}

.lights{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.light{text-align:center;padding:8px 2px;border-radius:6px;border:1px solid var(--line);
  background:#120c08;font-size:10px;letter-spacing:.08em;color:#5a4a3a;transition:.25s}
.light.on{background:#1e2a1a;border-color:#3f6136;color:#a9d6a0;box-shadow:0 0 12px rgba(111,169,107,.25)}
.light .dot{display:block;width:7px;height:7px;border-radius:50%;background:#3a2e22;margin:0 auto 5px}
.light.on .dot{background:var(--good);box-shadow:0 0 8px var(--good)}











.feed li:first-child{border-top:0}


#stage{position:relative}

.palettes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:20px 14px 16px;
  border-top:1px solid var(--line);background:#0a0704}
.pal{min-height:54px;border:1px dashed #2c2117;border-radius:6px;padding:6px 8px}
.pal h4{margin:0 0 4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b5842}
.pal.hidden h4{color:#3a2e22}
.chip{display:block;background:#1d2a33;border:1px solid #35566b;color:#a8d4ec;
  border-radius:4px;padding:3px 6px;font-size:11px;margin-top:3px}
.chip small{color:#6b93a9}
.pal .empty{font-size:11px;color:#4a3b2c;font-style:italic}

.banner{position:fixed;inset:0 0 auto 0;z-index:20;padding:26px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(224,166,60,.95),rgba(224,166,60,0));
  animation:drop .5s ease}
#bannerMode{font-size:30px;font-weight:800;letter-spacing:.22em;color:#241703}
#bannerNote{font-size:13px;color:#4a3208;margin-top:4px}
@keyframes drop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}

@media (max-width: 980px){
  body{overflow:auto}
  main{flex-direction:column;height:auto;min-height:100vh}
  #stage{min-height:62vh}
  #sceneWrap{min-height:44vh}
  #side{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible}
  .card.grow{max-height:40vh}
  
  .palettes{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:8px}
  .pal{padding:4px 5px}
  .pal h4{font-size:9px;letter-spacing:.04em}
  .chip{font-size:10px;padding:2px 4px}
}

/* ---- coverage legend: fills in only as each light is first earned ---- */
.legend{list-style:none;margin:8px 0 0;padding:0;font-size:11.5px}
.legend li{padding:3px 0;color:#b6a48c}
.legend li b{display:inline-block;min-width:46px;color:var(--good);letter-spacing:.06em}
.legend li.unearned{opacity:.32}
.legend li.unearned b{color:#4a3b2c}
.light.pulse{animation:pulse 1.1s ease 2}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(111,169,107,0)}50%{box-shadow:0 0 22px rgba(111,169,107,.85)}}

/* ---- the chain strip ---- */
.striphead{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5c4a37;
  padding:14px 16px 8px;background:#0a0704}
.palettes{display:flex;align-items:stretch;gap:0;padding:0 12px 10px;background:#0a0704}
.pal{flex:1;min-width:0;min-height:56px;border:1px dashed #2c2117;border-radius:6px;padding:6px 8px;transition:.3s}
.pal.done{border-style:solid;border-color:#4a6b3f;background:#141c11}
.arrow{flex:none;display:flex;align-items:center;padding:0 6px;color:#2c2117;font-size:17px;transition:.3s}
.arrow.live{color:var(--good);text-shadow:0 0 10px rgba(111,169,107,.6)}

/* ---- the card rail ---- */
.cards{display:flex;gap:8px;padding:0 16px 16px;background:#0a0704}
.card-slot{flex:1;min-width:0;border:1px solid #241a12;border-radius:8px;padding:8px 10px;
  background:#120c08;position:relative;min-height:74px}
.card-slot .num{position:absolute;top:6px;right:8px;font-size:10px;color:#3a2e22}
.card-slot b{display:block;font-size:11.5px;line-height:1.3;color:#4a3b2c}
.card-slot small{display:block;margin-top:4px;font-size:10px;line-height:1.35;color:#3a2e22}
.card-slot.earned{border-color:#6b5320;background:linear-gradient(160deg,#241a09,#171009)}
.card-slot.earned b{color:#f0d79a}
.card-slot.earned small{color:#9c8460}
.card-slot.earned .num{color:var(--gold)}
.card-slot.flip{animation:flip .7s cubic-bezier(.2,.9,.3,1)}
@keyframes flip{from{transform:rotateX(90deg) scale(.9);opacity:0}to{transform:none;opacity:1}}

/* ---- card toast ---- */
.toast{position:fixed;z-index:30;left:50%;top:70px;transform:translateX(-50%);
  min-width:340px;max-width:520px;text-align:center;padding:16px 26px;border-radius:12px;
  background:linear-gradient(160deg,#3a2a08,#1d1406);border:1px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.6);animation:rise .55s cubic-bezier(.2,.9,.3,1)}
.toastkicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#a4823c}
.toasttitle{font-size:19px;font-weight:700;color:#f7e2b2;margin-top:5px}
.toastsub{font-size:12.5px;margin-top:4px}
.toastsub{color:#b49a6f}
/* The card toast is dismissed deliberately — it is one of the six things the
   game exists to teach, and a timer was eating it before it could be read. */
.toast .primary.sm{margin-top:14px}
@keyframes rise{from{transform:translate(-50%,18px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

@media (max-width:980px){
  .cards{flex-wrap:wrap}
  .card-slot{flex:1 1 30%}
}




/* ================= the gate ================= */
.gate{position:fixed;inset:0;z-index:50;overflow:auto;
  background:radial-gradient(1200px 600px at 70% -10%,#3a2a10,#100b06 60%)}
.gatebox{max-width:640px;margin:0 auto;padding:56px 24px 64px}
.gt{margin:0;font-size:34px;letter-spacing:.03em;color:#f4e3c2;font-weight:700}
.gsub{margin:8px 0 22px;color:#9c8460;font-size:14px;line-height:1.55}
.gsub b{color:#f0d79a}

.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{flex:1;padding:9px;border-radius:7px;border:1px solid var(--line);background:#160f0a;
  color:#7d6a55;font-size:13px;cursor:pointer;font-family:inherit}
.tab.on{background:#241a09;border-color:#6b5320;color:#f0d79a}

#authForm{display:flex;flex-direction:column;gap:9px}
.gate input,.gate textarea{width:100%;padding:11px 13px;border-radius:7px;border:1px solid var(--line);
  background:#0d0906;color:#e8d8bf;font-size:14px;font-family:inherit}
.gate input:focus,.gate textarea:focus{outline:0;border-color:var(--gold)}
.gate textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;resize:vertical}
.primary{display:inline-block;text-align:center;padding:11px 18px;border-radius:7px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#e6b451,#c8912f);color:#241703;font-weight:700;font-size:14px;
  font-family:inherit;text-decoration:none}
.primary:hover{filter:brightness(1.08)}
.ghost{background:none;border:1px solid var(--line);color:#7d6a55;border-radius:6px;
  padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit}
.ghost:hover{color:#c9b593;border-color:#4d3c2b}
.err{color:#e08e78;font-size:13px;margin:4px 0 0}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:12px;background:#160f0a}
.steps h3{margin:0 0 3px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.steps p{margin:0 0 10px;font-size:13px;color:#9c8460;line-height:1.5}
.keyrow{display:flex;gap:8px;align-items:center}
.keyrow code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:10px 12px;border-radius:6px;
  background:#0d0906;border:1px solid var(--line);color:#8fd3a6;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#copyPrompt{margin-top:9px;width:100%}

.waiting{display:flex;align-items:center;gap:9px;justify-content:center;margin:20px 0 6px;
  color:#8a7358;font-size:13px}
.pip{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1.3s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.gfoot{display:flex;justify-content:center;gap:8px;margin-top:14px}

/* prompt box: scrollable, but no visible scrollbar */
#promptBox{scrollbar-width:none;-ms-overflow-style:none;resize:none}
#promptBox::-webkit-scrollbar{width:0;height:0;display:none}

/* ---- the opening instruction: big, centred, gone the moment the agent acts ---- */




@keyframes ctain{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@media (max-width:980px){}

/* ---- erase progress, top-left of the board ---- */
.boardbtns{position:absolute;top:12px;left:12px;z-index:14;display:flex;gap:7px}

/* ---- helpful prompts: names only, never the text ---- */
.promptlist{list-style:none;margin:0;padding:0}
.promptlist li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.promptlist li:first-child{border-top:0}
.promptlist .pname{flex:1;min-width:0;font-size:12px;color:#b6a48c;line-height:1.35}
.promptlist .pcopy{flex:none;padding:4px 9px;border-radius:5px;cursor:pointer;font-family:inherit;
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:rgba(20,13,7,.72);
  border:1px solid rgba(224,166,60,.28);color:#a48860;transition:.2s}
.promptlist .pcopy:hover{color:#f0d79a;border-color:rgba(224,166,60,.7);background:rgba(36,23,9,.9)}

/* ---- walkthrough: the opening centred step with the sound button ---- */
.tip.center{transform:none}
.tipsoundwrap{display:flex;justify-content:center;margin:14px 0 2px}
.tipsoundwrap .ghost{font-size:12.5px;padding:8px 16px}
.spot.hidden{opacity:0}

/* ---- step 1 diagram: look at the site, talk to the agent, it changes ---- */
.loop{display:block;width:100%;max-width:420px;margin:12px auto 2px}
.loop text{fill:#9c8460;font-size:10px;font-family:inherit;letter-spacing:.04em}
.loop text.tiny{fill:#6b5842;font-size:8.5px;font-style:italic;letter-spacing:.06em}

/* ---- the five marks lesson ---- */
.partybox.wide{max-width:620px}
.partybody.dim{color:#8a7357;font-size:12.5px}
.fivelist{list-style:none;margin:18px 0 6px;padding:0;text-align:left}
.fivelist li{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid rgba(224,166,60,.16)}
.fivelist li:first-child{border-top:0}
.fivelist b{flex:none;min-width:58px;color:var(--gold);font-size:12px;letter-spacing:.1em}
.fivelist span{color:#b49a6f;font-size:13px;line-height:1.45}
.erase{padding:7px 12px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12px;
  letter-spacing:.03em;background:rgba(20,13,7,.72);border:1px solid rgba(224,166,60,.28);
  color:#a4886088;backdrop-filter:blur(3px);transition:.2s}
.erase{color:#a48860}
.erase:hover{color:#f0d79a;border-color:rgba(224,166,60,.7);background:rgba(36,23,9,.9)}

.steps .note{margin:9px 0 0;font-size:11.5px;color:#6b5842;line-height:1.45;font-style:italic}
.steps .note a{color:var(--gold)}

/* ---- step 1: they must confirm they actually have an agent ---- */
.confirm{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 11px;
  border:1px solid var(--line);border-radius:7px;background:#120c08;cursor:pointer;
  font-size:13px;color:#9c8460;user-select:none;transition:.2s}
.confirm:hover{border-color:#4a3b2c}
.confirm input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer;flex:none;margin:0}
.confirm.on{border-color:#6b5320;background:#1a1207;color:#f0d79a}

/* A locked download reads as not-yet rather than broken. */
.primary.locked{opacity:.38;pointer-events:none;filter:grayscale(.6)}

/* RESEARCH is the beat the whole game turns on — give it the full screen. */
.banner.research{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,rgba(224,166,60,.97),rgba(120,80,14,.92) 70%,rgba(20,13,6,.9));
  animation:flare .7s cubic-bezier(.2,.9,.3,1)}
.banner.research #bannerMode{font-size:clamp(44px,11vw,132px);letter-spacing:.16em;color:#1c1102;
  text-shadow:0 6px 30px rgba(255,225,160,.55);animation:thump 1.5s ease-in-out infinite}
.banner.research #bannerNote{font-size:clamp(14px,1.9vw,21px);color:#40290a;margin-top:14px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
@keyframes flare{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}
@keyframes thump{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ---- site log: phases and milestones read as callouts, not log lines ---- */
.feed li{padding:5px 0;color:#9c8a72;line-height:1.5}
.feed li + li{margin-top:9px}
.feed li.plain,.feed li.reveal{padding:5px 2px;font-size:11.5px;color:#7d6a55}
.feed li.reveal{color:#9c8a72;font-style:italic}

.feed li.ev.mode,.feed li.ev.card,.feed li.ev.process,.feed li.ev.build{
  padding:9px 11px;border-radius:7px;border:1px solid;background:#120c08}
.evtag{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:3px;opacity:.85}
.evtext{display:block;font-size:12.5px;font-weight:600;line-height:1.4}

.feed li.mode{border-color:#7a5a1c;background:linear-gradient(160deg,#2a1d07,#150e05)}
.feed li.mode .evtag{color:#a4823c}
.feed li.mode .evtext{color:#f0d79a;letter-spacing:.06em;text-transform:uppercase}

.feed li.card{border-color:#6b5320;background:linear-gradient(160deg,#241a09,#171009)}
.feed li.card .evtag{color:#b08f4a}
.feed li.card .evtext{color:#f7e2b2}

.feed li.process{border-color:#3f6136;background:linear-gradient(160deg,#16210f,#101709)}
.feed li.process .evtag{color:#7fae74}
.feed li.process .evtext{color:#c3e0b9}

.feed li.build{border-color:#4a3a2a;background:linear-gradient(160deg,#1c1610,#14100a)}
.feed li.build .evtag{color:#8a7358}
.feed li.build .evtext{color:#d8c7ac;font-weight:500}

/* ---- the hint, living at the top of the site log ---- */



to{transform:none;opacity:1}}

/* ---- pulsing arrow that teaches them where to look ---- */

50%{transform:translateX(3px);opacity:1}}

/* ---- walkthrough ---- */
.tour{position:fixed;inset:0;z-index:60}
.spot{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(6,4,2,.8),0 0 0 2px rgba(224,166,60,.75) inset;
  transition:all .38s cubic-bezier(.2,.9,.3,1);pointer-events:none}
.tip{position:fixed;z-index:62;width:min(330px,86vw);padding:16px 18px;border-radius:11px;
  background:linear-gradient(160deg,#221709,#140d06);border:1px solid rgba(224,166,60,.55);
  box-shadow:0 22px 60px rgba(0,0,0,.65);transition:left .38s cubic-bezier(.2,.9,.3,1),top .38s cubic-bezier(.2,.9,.3,1)}
.tipstep{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a6f3c}
.tip h3{margin:5px 0 6px;font-size:16px;color:#f7e2b2;font-weight:700}
.tip p{margin:0 0 13px;font-size:12.5px;line-height:1.55;color:#b49a6f}
.tiprow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tipdots{display:flex;gap:5px}
.tipdots .dot{width:6px;height:6px;border-radius:50%;background:#4a3b2c;display:block}
.tipdots .dot.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.primary.sm{padding:8px 15px;font-size:13px}
.tip::after{content:'';position:absolute;width:12px;height:12px;transform:rotate(45deg);
  background:#1b1207;border:1px solid rgba(224,166,60,.55)}
.tip.below::after{top:-7px;left:50%;margin-left:-6px;border-right:0;border-bottom:0}
.tip.above::after{bottom:-7px;left:50%;margin-left:-6px;border-left:0;border-top:0}
.tip.left::after{right:-7px;top:34px;border-left:0;border-bottom:0}
.tip.right::after{left:-7px;top:34px;border-right:0;border-top:0}

/* ---- the hint, and the thing that makes you look at it ----
   Technique per CSS animation guidance: animate transform/opacity only (they promote
   to the compositor; box-shadow and layout properties do not). The bounce uses
   multi-stop keyframes with per-keyframe easing — ease-out on the rise, ease-in on
   the fall — so it reads as gravity rather than a sine wave. Two bounces, then a
   rest beat, which is far calmer to sit next to than a continuous pulse. */


.feed li.hint .evtext{color:#f7e2b2;font-size:13.5px;font-weight:700}

/* entrance: a touch of overshoot, then settle */
@keyframes hint-in{
  0%   {opacity:0; transform:translateY(-10px) scale(.985)}
  62%  {opacity:1; transform:translateY(2px)   scale(1.008)}
  100% {opacity:1; transform:none}
}

/* the label bounces only while the learner is still being taught where to look */


  14%  {transform:translateY(-7px); animation-timing-function:cubic-bezier(.75,0,.85,1)}
  30%  {transform:translateY(0);    animation-timing-function:cubic-bezier(.33,0,.25,1)}
  40%  {transform:translateY(-3px); animation-timing-function:cubic-bezier(.75,0,.85,1)}
  50%  {transform:translateY(0)}
  100% {transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .feed li.hint,.feed li.hint.nudge .evtag,.card-slot.flip,.toast,.banner,.light.pulse{
    animation:none!important}
  
}

.feed li.hint{margin:0 2px;padding:10px 12px;border-radius:7px;border:1px solid var(--gold);
  background:linear-gradient(160deg,#3a2a08,#1d1406);box-shadow:0 0 22px rgba(224,166,60,.18);
  transform-origin:50% 50%;
  animation:hint-in 520ms cubic-bezier(.34,1.56,.64,1) both}
.feed li.hint .evtag{color:#e6b451;font-weight:700}
/* while they are still learning where to look, the whole card breathes — one
   animation, nothing nested, and small enough that it never reaches the edges */
.feed li.hint.nudge{animation:hint-in 520ms cubic-bezier(.34,1.56,.64,1) both,
  hint-breathe 1900ms ease-in-out 520ms infinite}
@keyframes hint-breathe{
  0%,100%{transform:scale(1)}
  22%    {transform:scale(1.022)}
  46%    {transform:scale(1)}
}

/* room for the hint card to breathe without its border crossing the panel edge */
.feed{list-style:none;margin:0;padding:2px 8px;overflow:auto;flex:1;font-size:12px}

/* the ring that says "look at the thing you just made" */
.focusring{transform-box:fill-box;transform-origin:50% 50%;
  animation:ringpulse 1900ms ease-in-out infinite}
.focusring rect{stroke-linejoin:round}
@keyframes ringpulse{
  0%,100%{opacity:.55;transform:scale(1)}
  24%    {opacity:1;  transform:scale(1.035)}
  52%    {opacity:.55;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){.focusring{animation:none;opacity:.9}}

/* ---- the research party ---- */
.party{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,rgba(58,42,8,.96),rgba(10,7,3,.94));
  animation:partyin .45s cubic-bezier(.34,1.56,.64,1)}
.party.bye{animation:partyout .45s ease forwards}
@keyframes partyin{from{opacity:0}to{opacity:1}}
@keyframes partyout{to{opacity:0;transform:scale(1.04)}}

.partybox{position:relative;z-index:2;max-width:min(560px,88vw);text-align:center;padding:34px 38px;
  border-radius:16px;background:linear-gradient(160deg,#2a1d07,#150e05);
  border:1px solid rgba(224,166,60,.6);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.partykicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#a4823c}
.partytitle{margin:10px 0 14px;font-size:clamp(38px,8vw,72px);letter-spacing:.16em;color:#f7e2b2;
  font-weight:800;text-shadow:0 0 40px rgba(224,166,60,.5);
  animation:partythump 1.6s ease-in-out infinite}
@keyframes partythump{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.partybody{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:#c8ad82}
.partybody em{color:#f0d79a;font-style:italic}

.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fall{
  0%  {transform:translateY(-20px) rotate(0deg);opacity:0}
  10% {opacity:1}
  100%{transform:translateY(102vh) rotate(720deg);opacity:.9}
}
@media (prefers-reduced-motion: reduce){
  .party,.partytitle,.confetti i{animation:none!important}
  .confetti{display:none}
}

/* ---- in-app confirm ---- */
.ask{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,2,.72);animation:askin .22s ease}
@keyframes askin{from{opacity:0}to{opacity:1}}
.askbox{max-width:min(430px,88vw);padding:22px 24px;border-radius:12px;
  background:linear-gradient(160deg,#221709,#140d06);border:1px solid rgba(224,166,60,.45);
  box-shadow:0 26px 70px rgba(0,0,0,.7);animation:askpop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes askpop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.askbox h3{margin:0 0 8px;font-size:17px;color:#f7e2b2;font-weight:700}
.askbox p{margin:0 0 18px;font-size:13px;line-height:1.6;color:#b49a6f}
.askrow{display:flex;justify-content:flex-end;gap:9px}
.primary.danger{background:linear-gradient(180deg,#d9714f,#b5502f);color:#fff}

.tipbtns{display:flex;align-items:center;gap:8px}
.tipbtns .ghost{padding:7px 12px}

/* signup asks for a real first and last name; they ride together on one row */
.names{display:flex;gap:9px}
.names input{flex:1;min-width:0}

/* Whose desert this is, across the top of the page. Centred in the band above
   the work site so it never collides with the buttons at its left. */
.sitename{position:absolute;top:14px;left:0;right:0;z-index:13;pointer-events:none;
  text-align:center;font-size:26px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#f0dcb4}

/* ---- one-screen-at-a-time startup wizard ----
   Learners were skimming a three-step list and doing none of it. One screen,
   one decision, nothing else on it. */
.wiz{margin:0}
.wstep{text-align:center}
.wq{margin:0 0 34px;font-size:40px;line-height:1.15;color:#f4e3c2;font-weight:700}
.wpicks{display:flex;flex-direction:column;gap:12px}
.wpick{padding:22px 24px;border:1px solid #4a3b2c;border-radius:12px;background:#1a1207;
  color:#f4e3c2;font:inherit;font-size:21px;font-weight:600;cursor:pointer;
  transition:border-color .15s,background .15s,transform .05s}
.wpick:hover{border-color:var(--gold);background:#231806}
.wpick:active{transform:translateY(1px)}
.wlink{display:inline-block;margin-top:30px;font-size:14px;color:#9c8460;text-decoration:underline}
.wlink:hover{color:var(--gold)}
.wbody{margin:0 auto 22px;max-width:36ch;font-size:21px;line-height:1.5;color:#c9b391}
.wbody a{color:var(--gold)}
.wnote{margin:14px auto 0;max-width:40ch;font-size:13px;line-height:1.5;color:#6b5842;font-style:italic}
.wgo{display:block;width:100%;margin:12px 0 0;padding:22px 24px;border:0;border-radius:12px;
  background:var(--gold);color:#1a1207;font:inherit;font-size:21px;font-weight:700;
  text-align:center;text-decoration:none;cursor:pointer;transition:filter .15s,transform .05s}
.wgo.big{padding:30px 24px;font-size:24px}
.wgo:hover{filter:brightness(1.08)}
.wgo:active{transform:translateY(1px)}
.wstep textarea{margin:0 0 18px;font-size:13px}
.wlead{margin:0 0 36px;font-size:25px;line-height:1.4;color:#f4e3c2;font-weight:700}
.loop2{display:block;width:100%;max-width:520px;margin:0 auto 34px}
/* screen 4 is the only one with full sentences on it — give them room not to wrap */
.gatebox.wide{max-width:1120px}
.loop2 text{fill:#9c8460;font-size:11px;font-family:inherit;letter-spacing:.04em}
.loop2 text.rep{fill:#d9a441;font-size:11px;font-style:italic}
.wflash{margin:0;font-size:23px;line-height:1.45;font-weight:700;color:var(--gold);
  animation:wpulse 1.9s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.32}}
@media (prefers-reduced-motion:reduce){.wflash{animation:none}}
@media (max-width:980px){.wlead,.wflash{font-size:21px}}
@media (max-width:520px){.wq{font-size:31px}.wbody,.wlead,.wflash{font-size:18px}.wgo.big{font-size:20px}}