@charset "UTF-8";
/* eggs.css: egg-only UI (owner: eggs). Nothing here is visible at rest: every rule styles an element eggs.js creates while
   an egg runs, or a class it adds for that moment. Dynamic values (positions, opacities, weights) come from eggs.js through
   style.setProperty; the hosting CSP allows no inline styles. Kit classes used here: .ts-ui, .ts-glass, .ts-btn, .ts-rm-fade. */

/* ---------- letters: weight follows the egg frame by frame (no .4 s ease) while it drives them ---------- */
.L.ts-snap{transition:none}

/* ---------- Thunderstruck on the quiet pages: the wordmark lights letter by letter, the H1 takes a hot sweep ---------- */
.ts-wmw{display:inline}
.ts-wm{transition:color .3s ease}
.ts-wm.is-lit{color:var(--volt);transition:none}
.headline--page.ts-hot{
  background-image:linear-gradient(90deg,#f3efe6 0%,#f3efe6 33.3%,#ffe14d 42%,#fffbe6 50%,#ff1f8f 58%,#f3efe6 66.7%,#f3efe6 100%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.headline--page.ts-hot .w{color:transparent;-webkit-text-fill-color:transparent}

/* ---------- OVERCHARGED: the chip that counts the twenty seconds down (a tap or Escape ends it) ---------- */
.ts-chip{
  right:calc(var(--gutter) + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;min-height:40px;margin:0;padding:0 16px;
  font-family:var(--mono);font-weight:500;font-size:11px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--volt);
  cursor:pointer;opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),border-color .2s ease;
}
.ts-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px rgba(255,225,77,.85),0 0 2px #fffbe6}
.ts-chip.is-in{opacity:1;transform:none}
.ts-chip.is-out{opacity:0;transform:none;transition:opacity .3s ease;pointer-events:none}
.ts-chip:hover,.ts-chip:focus-visible{border-color:var(--volt);outline:none}

/* ---------- Count the Seconds: the counter beside the tap, 24 px above and to the right (left and top come from eggs.js) ---------- */
.ts-count{
  left:16px;top:76px;
  max-width:min(560px,calc(100vw - 32px));margin:0;
  font-family:var(--mono);font-weight:500;font-size:13px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;text-align:left;
  color:var(--volt);text-shadow:0 0 12px rgba(6,3,15,.9);pointer-events:none;
  opacity:0;transition:opacity .4s ease,color .3s ease;
}
.ts-count.is-in{opacity:1}
.ts-count.is-out{opacity:0;transition:opacity .3s ease}
.ts-count.is-result{color:var(--paper)}

/* ---------- the Switchboard: a glass sheet with the storm report and its commands ---------- */
.ts-sb{
  right:calc(var(--gutter) + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));
  width:min(420px,calc(100vw - 32px));padding:16px 18px 18px;
  opacity:0;transform:translateY(8px);transition:opacity .24s var(--ease-out),transform .24s var(--ease-out);
}
.ts-sb.is-in{opacity:1;transform:none}
.ts-sb.is-out{opacity:0;transform:none;transition:opacity .24s ease;pointer-events:none}
.ts-sb-title{margin:0;font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--volt)}
.ts-sb-rows{display:grid;gap:7px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--hairline)}
.ts-sb-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase}
.ts-sb-k{margin:0;color:var(--steel)}
.ts-sb-v{margin:0;color:var(--paper);text-align:right}
.ts-sb-out{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--paper)}
.ts-sb-out[hidden]{display:none}
.ts-sb-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ts-sb-btn{width:100%;padding:0 10px}
.ts-sb-btns>.ts-sb-btn:nth-last-child(2):nth-child(odd),.ts-sb-close{grid-column:1 / -1}

/* ---------- phones: the toast owns the bottom edge, so the chip moves under the masthead; the sheet spans the width ---------- */
@media(max-width:520px){
  .ts-chip{right:calc(16px + env(safe-area-inset-right));bottom:auto;top:calc(60px + env(safe-area-inset-top))}
  .ts-sb{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:auto}
}
/* narrow phones: each Switchboard row stacks its label above its value, so long values never wrap against the label */
@media(max-width:419px){
  .ts-sb-row{flex-direction:column;align-items:flex-start;gap:2px}
  .ts-sb-v{text-align:left}
}