/* GENERATED by dev/tools/build_peel_scene.py from the email board's scene 4.1
   (cover-visual-tree.html, BEGIN/END:peel-scene-css + the shared race-scene-css base).
   Do not edit: edit the board and re-run the script. */
.peel-pair{
  --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}}
/* ---- 4.1 removed, not hidden. The peel now reads: the lifted flap
   shows the tape's LIGHT underside, lifts off the page in perspective,
   casts a shadow onto the paper, and goes back almost halfway, so the
   blank paper underneath is plain to see. Then it rips off. ---- */
.s41 .strip{--lit-fill:#FCFBF8;position:relative;padding:5cqw 6cqw;border-radius:1.4cqw;display:flex;align-items:center;gap:2.4cqw;white-space:nowrap}
.s41 .lbl{font:500 3cqw var(--body);color:#55595F}
.s41 .num{position:relative;display:inline-flex;font:600 4.6cqw var(--mono);color:#1A1C1E;letter-spacing:.02em}
.s41 .num span{display:inline-block;opacity:0;animation:fall var(--dur) infinite}
@keyframes fall{0%,18%{transform:none;opacity:1}34%,100%{transform:translateY(7cqw) rotate(var(--r,14deg));opacity:0}}
.s41 .tape{position:absolute;inset:-.9cqw -.6cqw;transform-origin:left center}
.s41 .face{position:absolute;inset:0;background:var(--bar);border-radius:.2cqw}
/* the flap: the tape's LIGHT underside, brightest where it folds, a touch
   darker toward its far edge. Only a whisper of shadow under it, and none
   on the paper where the tape used to be. */
.s41 .flapw{position:absolute;display:none;filter:drop-shadow(0 .2cqw .35cqw rgba(0,0,0,.16))}
.s41 .flap{position:absolute;inset:0;background:linear-gradient(225deg,#FFFFFF 0%,#F3EFE9 12%,#DED8CF 50%,#C7C0B6 100%)}
/* the pair's own layout (not the scene): two instances side by side, stacked on a phone */
.peel-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1040px;margin:0 auto}
.peel-pair figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--border-subtle,rgba(0,0,0,.06))}
.peel-pair figcaption{padding:10px 12px 12px;font:500 .9375rem/1.4 var(--font-body,-apple-system,sans-serif);color:var(--text-secondary,#55595F);text-align:center;background:var(--bg-surface,#fff)}
.peel-cap{max-width:40em;margin:8px auto 0;text-align:center;font:400 0.9375rem/1.5 var(--font-body,-apple-system,sans-serif);color:var(--text-secondary,#55595F)}
.peel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the verdict badge (the scene's .verdict option): the site's status tokens, small */
.peel-pair .verdict{position:absolute;left:50%;top:70%;transform:translateX(-50%);opacity:0;z-index:2;padding:.9cqw 2.6cqw;border-radius:999px;font:700 3.1cqw/1.2 var(--body);letter-spacing:.01em;white-space:nowrap;color:#fff}
.peel-pair .verdict.fail{background:var(--status-critical,#E5484D)}
.peel-pair .verdict.pass{background:var(--status-success,#2FBF71)}
@media (max-width:640px){.peel-pair{grid-template-columns:1fr;gap:14px}}
