/* GENERATED by dev/tools/build_tokens_scene.py from the email board's scene 1.3
   (cover-visual-tree.html, BEGIN/END:tokens-scene-css + the shared race-scene-css base).
   Do not edit: edit the board and re-run the script. */
.tokens-stage{
  --bg:#FBFAF7; --surface:#FFFFFF; --muted:#F4F2EC;
  --ink:#1A1C1E; --ink-2:#55595F; --ink-3:#8B8F96;
  --line:rgba(0,0,0,.10); --line-soft:rgba(0,0,0,.06);
  --link:#2F6FD0;
  --p1:#2B8799; --p2:#A8721C; --p3:#3C8A52; --p4:#7657BD;
  --p1-soft:rgba(43,135,153,.10); --p2-soft:rgba(168,114,28,.10);
  --p3-soft:rgba(60,138,82,.10); --p4-soft:rgba(118,87,189,.10);
  --card-shadow:0 1px 2px rgba(14,20,30,.05),0 6px 18px -8px rgba(14,20,30,.14);
  --glow:240,150,95;               /* warm (recommended). Toggle swaps it. */
  --dur:8s;
  --display:'SF Pro Display','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:'SF Pro Text','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  /* app chrome, from tour.html :root */
  --app-win:#161617; --app-side:#1b1c1f; --app-ink:#ededf0; --app-ink2:#9a9aa1;
  --app-ink3:#6d6d74; --app-fill:rgba(255,255,255,.08); --app-accent:#007AFF;
  --app-ok:#34C759; --bar:#111315;
}
.scene{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;overflow:hidden;container-type:inline-size;isolation:isolate;
  background:
    radial-gradient(70% 55% at 50% 118%,rgba(var(--glow),.16),transparent 70%),
    linear-gradient(180deg,#1A1220 0%,#1F1726 55%,#2B1F30 100%);
  color:var(--app-ink);font-family:var(--body)}
.scene.light{background:
    radial-gradient(70% 60% at 50% 115%,rgba(var(--glow),.18),transparent 70%),
    linear-gradient(180deg,#F8F5EF 0%,#EFE9DE 100%);color:#1A1C1E}
.feat .scene{border-bottom:1px solid var(--line-soft)}
.center{position:absolute;inset:0;display:grid;place-items:center}
.lit{position:relative;border:1px solid transparent;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(var(--glow),.22),transparent 60%) padding-box,
    linear-gradient(var(--lit-fill,#151218),var(--lit-fill,#151218)) padding-box,
    linear-gradient(118deg,rgba(var(--glow),1) 0%,rgba(var(--glow),.35) 38%,rgba(255,255,255,.10) 70%) border-box;
  box-shadow:-.9cqw -.7cqw 3.2cqw -.6cqw rgba(var(--glow),.55),0 0 6cqw rgba(var(--glow),.14),0 1.4cqw 3cqw rgba(0,0,0,.45)}
.scene.light .lit{box-shadow:-.9cqw -.7cqw 3.4cqw -.6cqw rgba(var(--glow),.55),0 0 5cqw rgba(var(--glow),.16),0 1.2cqw 3cqw rgba(60,40,20,.18)}
.scene.light .lit{
  background:linear-gradient(var(--lit-fill,#fff),var(--lit-fill,#fff)) padding-box,
             linear-gradient(rgba(var(--glow),.7),rgba(var(--glow),.7)) border-box;
  box-shadow:0 0 0 .15cqw rgba(var(--glow),.22),0 0 2.4cqw rgba(var(--glow),.28),0 .8cqw 2.2cqw rgba(60,40,20,.10)}
/* reduced motion: every scene rests on its informative frame */
@media (prefers-reduced-motion:reduce){
  .scene *,.scene *::before,.scene *::after{animation:none!important;transition:none!important}
  .s21 .panelwrap,.s12 .st-a{opacity:0!important}
  .s12 .st-b{opacity:1!important}
}
.clk{position:absolute;width:0;height:0;pointer-events:none;animation:clk var(--dur) linear infinite}
@keyframes clk{from{opacity:1}to{opacity:1}}
.s13 .wrap13{display:flex;flex-direction:column;align-items:center;gap:5.5cqw}
.seg2{display:flex;height:9.6cqw;padding:.9cqw;border-radius:2.4cqw;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.seg2 .sg{display:flex;align-items:center;gap:1.4cqw;padding:0 3.6cqw;border-radius:1.8cqw;font:500 3.6cqw var(--body);color:var(--app-ink2)}
.seg2 .sg.on{--lit-fill:#14111A;color:#fff}
.seg2 .sg svg{width:3.4cqw;height:3.4cqw}
.s13 .line{font:500 3.2cqw var(--body);color:#DAD5DF;display:flex;align-items:center;gap:1.2cqw;white-space:nowrap}
.tok{position:relative;display:inline-block;height:4.4cqw;border-radius:.3cqw;vertical-align:middle}
.tok .v{position:absolute;inset:0;display:grid;place-items:center;font:500 3.2cqw var(--body);color:#DAD5DF;white-space:nowrap;animation:tokv var(--dur) infinite}
.tok .t{position:absolute;inset:0;display:grid;place-items:center;background:var(--bar);font:600 2.4cqw var(--mono);color:#EDEAF1;letter-spacing:.02em;border-radius:.3cqw;box-shadow:0 0 0 1px rgba(255,255,255,.08);animation:tokt var(--dur) infinite}
.tok.b .v{animation-name:tokvB}.tok.b .t{animation-name:toktB}
@keyframes tokv{0%,30%{opacity:1}40%,100%{opacity:0}}
@keyframes tokt{0%,32%{opacity:0;transform:scaleX(.3)}42%,100%{opacity:1;transform:none}}
@keyframes tokvB{0%,38%{opacity:1}48%,100%{opacity:0}}
@keyframes toktB{0%,40%{opacity:0;transform:scaleX(.3)}50%,100%{opacity:1;transform:none}}
/* option .sw (the board's 1.3 sets none and plays exactly as before): the
   switch from Redact to Tokens, as the editor's toggle does it. Beat 1 the
   line as written; beat 2 Cover redacts it, plain black redactions, Redact on;
   beat 3 the toggle slides to Tokens and each redaction shows its label
   (grey on black, the editor's token ink). A light field: add .light. */
.s13 .knob{display:none}
.s13.sw{--dur:7.5s}
.s13.sw .seg2{position:relative}
.s13.sw .seg2 .sg{position:relative;z-index:1;width:22cqw;justify-content:center;padding:0;background:none;border-color:transparent;box-shadow:none;animation:sw13a var(--dur) infinite}
.s13.sw .seg2 .sg+.sg{animation-name:sw13b}
.s13.sw .knob{display:block;position:absolute;top:.9cqw;bottom:.9cqw;left:.9cqw;width:22cqw;border-radius:1.8cqw;background:#14111A;animation:sw13k var(--dur) infinite}
.scene.light.s13.sw .seg2{background:rgba(26,28,30,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.scene.light.s13.sw .knob{background:#fff;box-shadow:0 0 0 .15cqw rgba(var(--glow),.22),0 .5cqw 1.6cqw rgba(60,40,20,.14)}
.scene.light.s13 .line,.scene.light.s13 .tok .v{color:#1A1C1E}
.s13.sw .tok .v{animation:sw13v var(--dur) infinite}
.s13.sw .tok .t{color:rgba(184,184,184,0);animation:sw13t var(--dur) infinite}
.s13.sw .tok.b .v,.s13.sw .tok.b .t{animation-delay:.18s}
@keyframes sw13k{0%,54%{transform:none}62%,96%{transform:translateX(22cqw)}100%{transform:none}}
@keyframes sw13a{0%,54%{color:#fff}62%,96%{color:var(--app-ink2)}100%{color:#fff}}
@keyframes sw13b{0%,54%{color:var(--app-ink2)}62%,96%{color:#fff}100%{color:var(--app-ink2)}}
.scene.light.s13.sw .seg2 .sg{animation-name:sw13aL}.scene.light.s13.sw .seg2 .sg+.sg{animation-name:sw13bL}
@keyframes sw13aL{0%,54%{color:#1A1C1E}62%,96%{color:#8B8F96}100%{color:#1A1C1E}}
@keyframes sw13bL{0%,54%{color:#8B8F96}62%,96%{color:#1A1C1E}100%{color:#8B8F96}}
@keyframes sw13v{0%,18%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes sw13t{0%,20%{opacity:0;transform:scaleX(.3);color:rgba(184,184,184,0)}28%,58%{opacity:1;transform:none;color:rgba(184,184,184,0)}66%,94%{opacity:1;transform:none;color:rgba(184,184,184,1)}100%{opacity:0;transform:none;color:rgba(184,184,184,0)}}
@media (prefers-reduced-motion: reduce){
  .s13.sw .seg2 .sg,.s13.sw .knob,.s13.sw .tok .v,.s13.sw .tok .t{animation:none}
  .s13.sw .knob{transform:translateX(22cqw)} .s13.sw .tok .v{opacity:0} .s13.sw .tok .t{color:rgb(184,184,184)}
  .scene.light.s13.sw .seg2 .sg{color:#8B8F96} .scene.light.s13.sw .seg2 .sg+.sg{color:#1A1C1E}
}
/* the band's own frame (not the scene): one rounded card, the site's hairline */
.tokens-stage{max-width:760px;margin:0 auto}
.tokens-stage figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--border-subtle,rgba(0,0,0,.06))}
.tokens-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}