@font-face{font-family:'Kalam';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/kalam-latin-300-normal.19f8586a22.woff2) format('woff2');}
@font-face{font-family:'Kalam';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/kalam-latin-700-normal.252063af6a.woff2) format('woff2');}
@font-face{font-family:'Kalam';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/kalam-latin-400-normal.954410601a.woff2) format('woff2');}
@font-face{font-family:'Anton';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/anton-latin-400-normal.d0fa07ff63.woff2) format('woff2');}
@font-face{font-family:'Bangers';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/bangers-latin-400-normal.04f54ff42e.woff2) format('woff2');}
@font-face{font-family:'Rubik Wet Paint';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/rubik-wet-paint-latin-400-normal.4210222083.woff2) format('woff2');}

:root{
  --ink:#1a1210; --ink-soft:#2b1f1a;
  --paper:#e9d9ad; --paper-shade:#d6c08e;
  --cap:#f7e5a3;
  --pulp:#ff8a1f; --blood:#c3231b; --sfx:#ffd23f;
  --table:#2b1913; --table-deep:#170d0a;
  --cream:#f4e8c8; --cream-dim:#bfb194;
  --blueline:#4f9bd1;
  --chrome:#1d140f; --chrome-line:#4a352b;
  --tr-h:104px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --table:#140c09; --table-deep:#0a0504; --paper:#dfcda0; --paper-shade:#cbb584; --chrome:#130d0a; }
}
:root[data-theme="dark"]{ --table:#140c09; --table-deep:#0a0504; --paper:#dfcda0; --paper-shade:#cbb584; --chrome:#130d0a; }
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:border-box; }
body{
  height:100%; margin:0; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, var(--table), var(--table-deep) 75%);
  background-color:var(--table-deep);
  color:var(--cream);
  font-family:'Kalam','Comic Neue','Segoe Print','Bradley Hand',cursive;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
button{ font:inherit; color:inherit; }
button:focus-visible, .btn:focus-within, input:focus-visible, textarea:focus-visible{ outline:3px solid var(--sfx); outline-offset:2px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

#app{ position:relative; height:100%; overflow:hidden; }
#stage{ position:absolute; inset:0; }
.view{ position:absolute; inset:0; transition:transform .55s cubic-bezier(.62,.04,.24,1); }
.view[data-pos="left"]{ transform:translateX(-106%); visibility:hidden; transition:transform .55s cubic-bezier(.62,.04,.24,1), visibility 0s .55s; }
.view[data-pos="right"]{ transform:translateX(106%); visibility:hidden; transition:transform .55s cubic-bezier(.62,.04,.24,1), visibility 0s .55s; }
.view[data-pos="center"]{ transform:none; visibility:visible; }
.rm .view{ transition:opacity .2s; }
.rm .view[data-pos="left"], .rm .view[data-pos="right"]{ transform:none; opacity:0; }

/* ---------- pages (cover + contents) ---------- */
.pagewrap{ position:absolute; inset:0; bottom:calc(var(--tr-h) + var(--ly-h, 0px)); display:grid; place-items:center; padding:10px; }
.page{
  position:relative; width:var(--pw,300px); height:var(--ph,533px);
  background-color:var(--paper);
  box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  container-type:inline-size; overflow:hidden;
}
.newsprint{
  background-color:var(--paper);
  background-image:
    radial-gradient(rgba(110,78,30,.13) .9px, transparent 1.3px),
    radial-gradient(rgba(255,250,230,.22) .9px, transparent 1.3px),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,84,30,.22) 100%);
  background-size:6px 6px, 9px 9px, 100% 100%;
  background-position:0 0, 3px 4px, 0 0;
}

/* cover */
.cv-zoom{ position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.cv-zoom > img{ position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
.cv-dark, .cv-glow{ opacity:0; }
.cv-lantern{ position:absolute; left:42%; top:56.8%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,186,90,.62) 0%, rgba(255,128,40,.22) 38%, rgba(255,110,30,0) 70%); mix-blend-mode:screen; pointer-events:none; }
.cv-fog{ position:absolute; left:0; right:0; top:36%; height:24%; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(ellipse 30% 40% at 20% 60%, rgba(160,186,196,.22), transparent 70%),
    radial-gradient(ellipse 34% 36% at 70% 45%, rgba(150,176,190,.2), transparent 70%),
    radial-gradient(ellipse 26% 30% at 45% 75%, rgba(170,190,200,.16), transparent 70%);
  background-size:160% 100%; animation:fogdrift 46s linear infinite alternate; }
@keyframes fogdrift{ from{ background-position:0% 0%, 0% 0%, 0% 0%; } to{ background-position:60% 0%, -40% 0%, 30% 0%; } }
.rm .cv-fog{ animation:none; }

.cornerbox{ position:absolute; left:3%; top:2.2%; width:15%; display:flex; flex-direction:column; align-items:center; gap:.6cqw; z-index:5; }
.cornerbox .price{ width:11.5cqw; aspect-ratio:1; border-radius:50%; background:var(--cap); border:.55cqw solid var(--ink);
  display:grid; place-items:center; font-family:'Bangers',Impact,sans-serif; font-size:5.4cqw; color:var(--ink); line-height:1; box-shadow:.4cqw .5cqw 0 var(--ink); }
.cornerbox .num{ font-family:'Bangers',Impact,sans-serif; font-size:4.6cqw; color:var(--ink); background:var(--cap); border:.45cqw solid var(--ink); padding:0 1.4cqw; line-height:1.15; letter-spacing:.04em; }
.masthead{ position:absolute; left:19%; right:2.5%; top:1.2%; z-index:5; text-align:center; pointer-events:none;
  font-family:'Rubik Wet Paint','Creepster',Impact,fantasy; line-height:.84; }
.masthead span{ display:block; white-space:nowrap; font-size:13.4cqw;
  background:linear-gradient(180deg,#ffbb48 0%,#ff861e 42%,#e0331c 78%,#a8160f 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(.35cqw .45cqw 0 #120a07) drop-shadow(0 0 .18cqw #120a07); }
.masthead span + span{ margin-top:.5cqw; }
.insets{ position:absolute; left:3%; top:35.5%; width:22.5%; display:flex; flex-direction:column; gap:2.4cqw; z-index:5; }
.inset{ display:block; position:relative; background:#fffaf0; padding:1cqw; border:none; cursor:pointer; box-shadow:.5cqw .6cqw 0 rgba(18,10,7,.9); text-align:left; }
.inset img{ display:block; width:100%; aspect-ratio:1.28; object-fit:cover; border:.45cqw solid var(--ink); }
.inset span{ position:absolute; left:2.4cqw; right:-1.6cqw; bottom:-2.3cqw; background:var(--cap); border:.4cqw solid var(--ink); color:var(--ink);
  font-family:'Kalam',cursive; font-weight:700; font-size:2.65cqw; line-height:1.15; padding:.25cqw 1cqw; text-transform:uppercase; transform:rotate(-1.5deg); }
.cv-caption{ position:absolute; right:4%; top:62.5%; z-index:5; }
.banner{ position:absolute; left:3%; right:3%; top:88.6%; height:6.4%; z-index:5; display:grid; place-items:center; pointer-events:none; }
.banner::before{ content:""; position:absolute; inset:0; background:var(--blood);
  clip-path:polygon(0 0,100% 0,96.5% 50%,100% 100%,0 100%,3.5% 50%); }
.banner::after{ content:""; position:absolute; inset:.7cqw 2.2cqw; border-top:.35cqw solid rgba(26,18,16,.55); border-bottom:.35cqw solid rgba(26,18,16,.55); }
.banner b{ position:relative; font-family:'Bangers',Impact,sans-serif; font-weight:400; font-size:6.3cqw; letter-spacing:.04em; color:var(--sfx);
  -webkit-text-stroke:.38cqw var(--ink); paint-order:stroke fill; text-shadow:.35cqw .45cqw 0 var(--ink); white-space:nowrap; }
.dogear{ position:absolute; right:0; bottom:0; width:13%; aspect-ratio:1; border:none; padding:0; cursor:pointer; z-index:8;
  background:linear-gradient(135deg, transparent 50%, #f3e6c2 50%, #d9c38f 78%, #b9a06a 100%);
  filter:drop-shadow(-.6cqw -.6cqw .8cqw rgba(0,0,0,.45)); }
.dogear::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 49.5%, rgba(26,18,16,.55) 50%, transparent 52%); }

/* contents */
.toc-page{ overflow-y:auto; overscroll-behavior:contain; }
.toc-in{ padding:6cqw 6cqw 8cqw; color:var(--ink); }
.toc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:3cqw; }
.toc-mast{ font-family:'Rubik Wet Paint','Creepster',Impact,fantasy; font-size:9.6cqw; line-height:.86; color:var(--blood); filter:drop-shadow(.3cqw .4cqw 0 var(--ink)); margin:0; font-weight:400; }
.toc-sub{ font-family:'Bangers',Impact,sans-serif; font-size:5.2cqw; letter-spacing:.05em; margin:2.4cqw 0 0; }
.toc-host{ width:19cqw; flex:none; aspect-ratio:1; border:.55cqw solid var(--ink); background-size:cover; background-position:center; box-shadow:.5cqw .6cqw 0 var(--ink); transform:rotate(2deg); }
.toc-list{ list-style:none; margin:5cqw 0 0; padding:0; border-top:.6cqw solid var(--ink); }
.toc-item{ border-bottom:.35cqw solid var(--ink); }
.toc-btn{ position:relative; display:grid; grid-template-columns:9cqw 1fr; gap:0 2.6cqw; width:100%; padding:2.6cqw 0 2.8cqw; background:none; border:none; text-align:left; cursor:pointer; color:var(--ink); }
.toc-no{ font-family:'Bangers',Impact,sans-serif; font-size:7.6cqw; line-height:1; color:var(--pulp); -webkit-text-stroke:.3cqw var(--ink); paint-order:stroke fill; grid-row:span 2; }
.toc-title{ font-family:'Bangers',Impact,sans-serif; font-size:6.6cqw; line-height:1.02; letter-spacing:.02em; }
.toc-tease{ font-family:'Kalam',cursive; font-size:3.7cqw; line-height:1.25; color:#4a3a2c; }
.toc-tease i{ font-style:normal; color:var(--blood); }
.toc-item.ready .toc-title{ text-decoration:underline; text-decoration-thickness:.5cqw; text-underline-offset:1cqw; text-decoration-color:var(--pulp); }
.toc-item:not(.ready) .toc-btn{ color:rgba(26,18,16,.62); }
.stamp{ position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(-9deg); font-family:'Anton',Impact,sans-serif; font-size:3.1cqw; letter-spacing:.06em;
  color:rgba(195,35,27,.82); border:.5cqw solid rgba(195,35,27,.82); padding:.4cqw 1.4cqw; line-height:1.1; text-transform:uppercase; mix-blend-mode:multiply; pointer-events:none; }

/* ---------- the strip (a tale) ---------- */
.strip{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; outline:none; }
.strip-in{ position:relative; }
.cell{ position:relative; margin:0 auto; scroll-snap-align:center; scroll-snap-stop:always; }
.cell + .cell{ margin-top:16px; }
.panel{ position:absolute; inset:0; overflow:hidden; border:2.5px solid var(--ink); background:#0d0a08; container-type:inline-size; }
.art{ position:absolute; max-width:none; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.dimmer{ position:absolute; inset:-1px; background:#0c0806; opacity:.64; transition:opacity .5s ease; pointer-events:none; z-index:30; }
.cell.active .dimmer{ opacity:0; }
.cell.sealed .panel > :not(.dimmer){ visibility:hidden; }
.cell.sealed .panel{ background:#0d0a08; }

/* lettering */
.lt{ position:absolute; z-index:14; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.lt.on{ opacity:1; }
.cap{ background:var(--cap); color:var(--ink); border:2px solid var(--ink); box-shadow:.16em .2em 0 rgba(26,18,16,.88);
  font-family:'Kalam',cursive; font-weight:700; text-transform:uppercase; font-size:clamp(11px,4.35cqw,24px); line-height:1.08;
  padding:.3em .55em .24em; transform:rotate(-1.4deg); letter-spacing:.01em; white-space:nowrap; }
.cap.r{ transform:rotate(1.2deg); }
.sfx{ font-family:'Bangers',Impact,sans-serif; color:var(--sfx); font-size:clamp(17px,10cqw,54px); letter-spacing:.03em; line-height:1;
  -webkit-text-stroke:.07em var(--ink); paint-order:stroke fill; text-shadow:.05em .07em 0 var(--ink); transform:rotate(-9deg); white-space:nowrap; }
.quiet{ font-family:'Kalam',cursive; font-weight:700; color:rgba(240,235,222,.9); font-size:clamp(12px,5.4cqw,28px); letter-spacing:.05em; line-height:1;
  text-shadow:0 0 .35em rgba(0,0,0,.9), 0 0 .12em rgba(0,0,0,.95); transform:rotate(-4deg); white-space:nowrap; }
.btext{ position:absolute; z-index:15; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; transition:opacity .38s ease;
  font-family:'Kalam',cursive; font-weight:700; text-transform:uppercase; color:var(--ink); font-size:clamp(10px,3.55cqw,20px); line-height:1.02; pointer-events:none; }
.btext.on{ opacity:1; }
.ovl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.ovl.balloons{ z-index:13; }
.ovl.marks{ z-index:7; }
.bal{ opacity:0; transition:opacity .38s ease; }
.bal.on{ opacity:1; }
.bal path{ fill:#fffcf1; stroke:var(--ink); stroke-width:2.4px; stroke-linejoin:miter; stroke-miterlimit:6; vector-effect:non-scaling-stroke; }
.counter{ background:var(--paper); border:2px solid var(--ink); padding:1.3cqw; box-shadow:.15em .18em 0 rgba(26,18,16,.85); }
.counter .face{ display:flex; gap:.7cqw; background:#2a2722; border:1.5px solid #000; padding:.9cqw 1.1cqw; border-radius:2px; justify-content:center; }
.counter .dig{ position:relative; width:5.6cqw; height:8.4cqw; overflow:hidden; background:#0b0a09; box-shadow:inset 0 .6cqw .9cqw rgba(0,0,0,.85); }
.counter .reel{ position:absolute; left:0; right:0; top:0; font-family:'Anton',Impact,sans-serif; color:#f1e8d1; font-size:6.6cqw; line-height:8.4cqw; text-align:center; transition:transform .85s cubic-bezier(.3,.7,.2,1); }
.counter .reel div{ height:8.4cqw; }

/* effects */
.fx{ position:absolute; pointer-events:none; }
.reelcut{ border-radius:50%; overflow:hidden; z-index:3; will-change:transform;
  -webkit-mask-image:radial-gradient(circle, #000 60%, transparent 72%); mask-image:radial-gradient(circle, #000 60%, transparent 72%); }
.reelcut img{ position:absolute; max-width:none; }
.ledglow{ border-radius:50%; z-index:4; mix-blend-mode:screen; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle, rgba(255,92,60,.95) 0%, rgba(255,40,20,.42) 28%, rgba(255,20,10,0) 68%); }
.herpatch{ position:absolute; z-index:2; max-width:none; will-change:opacity; }
.lampdim{ inset:0; z-index:6; opacity:0; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 12% 46%, rgb(70,76,96), rgb(12,16,28) 62%); }
.pallor{ z-index:5; border-radius:50%; opacity:0; }
.pallor.desat{ background:radial-gradient(closest-side, rgb(128,132,134) 55%, rgba(128,132,134,0)); mix-blend-mode:saturation; }
.pallor.light{ background:radial-gradient(closest-side, rgba(225,236,240,.85) 40%, rgba(225,236,240,0)); mix-blend-mode:soft-light; }
.breath{ opacity:0; }
.breath path{ fill:none; stroke:rgba(222,238,250,.85); stroke-linecap:round; animation:wisp 5.6s ease-in-out infinite; }
.breath path:nth-child(2){ animation-delay:-1.9s; }
.breath path:nth-child(3){ animation-delay:-3.7s; }
@keyframes wisp{ 0%{ transform:translate(6px,5px); opacity:0; } 25%{ opacity:.95; } 70%{ opacity:.6; } 100%{ transform:translate(-14px,-16px); opacity:0; } }
.rm .breath path{ animation:none; opacity:.55; }

/* composed cells */
.composed{ background:var(--paper); container-type:inline-size; }
.title-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; padding:5cqw 5cqw 5.5cqw; gap:3.6cqw; }
.title-name{ margin:0; font-family:'Rubik Wet Paint','Creepster',Impact,fantasy; font-weight:400; color:var(--blood); font-size:17.5cqw; line-height:.84; text-align:center; filter:drop-shadow(.45cqw .55cqw 0 var(--ink)); }
.title-art{ position:relative; width:100%; aspect-ratio:904/399; border:2.5px solid var(--ink); overflow:hidden; background:#0d0a08; flex:none; }
.title-art img{ position:absolute; max-width:none; }
.hostline{ display:flex; align-items:center; gap:3.6cqw; margin-top:auto; }
.host-pic{ width:21cqw; flex:none; aspect-ratio:1; border:2.5px solid var(--ink); background-size:cover; background-position:center; box-shadow:.5cqw .6cqw 0 rgba(26,18,16,.9); }
.hostline .cap{ position:relative; white-space:nowrap; }
.end-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6cqw; padding:6cqw; }
.end-title{ margin:0; font-family:'Rubik Wet Paint','Creepster',Impact,fantasy; font-weight:400; color:var(--blood); font-size:19cqw; line-height:.9; filter:drop-shadow(.45cqw .55cqw 0 var(--ink)); }
.end-actions{ display:flex; gap:3cqw; flex-wrap:wrap; justify-content:center; pointer-events:auto; }
.chip{ font-family:'Kalam',cursive; font-weight:700; font-size:clamp(14px,4.4cqw,22px); color:var(--ink); background:var(--cap); border:2px solid var(--ink); padding:.3em .8em .22em; box-shadow:.14em .17em 0 var(--ink); cursor:pointer; }
.chip:active{ transform:translate(.08em,.1em); box-shadow:.06em .07em 0 var(--ink); }
.blue{ position:absolute; inset:0; background:var(--paper); }
.blue svg{ position:absolute; inset:0; width:100%; height:100%; }
.blue-note{ position:absolute; left:7cqw; right:7cqw; top:6cqw; color:var(--blueline); font-family:'Kalam',cursive; font-size:4.6cqw; line-height:1.2; }
.blue-note b{ display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; letter-spacing:.08em; font-size:5.4cqw; }

/* follow pill */
.pill{ position:absolute; left:50%; bottom:calc(var(--tr-h) + 52px); transform:translateX(-50%); z-index:40; font-family:'Kalam',cursive; font-weight:700; font-size:15px;
  color:var(--ink); background:var(--cap); border:2px solid var(--ink); padding:.35em 1em .25em; box-shadow:.14em .18em 0 var(--ink); cursor:pointer; }
.pill[hidden]{ display:none; }

/* lyric bar */
.lyricbar{ position:absolute; left:0; right:0; bottom:var(--tr-h); z-index:45; padding:8px 18px 10px; text-align:center; pointer-events:none;
  font-family:'Kalam',cursive; font-weight:700; font-size:17px; line-height:1.25; color:var(--cream);
  background:linear-gradient(to top, rgba(12,8,6,.92), rgba(12,8,6,.75) 70%, rgba(12,8,6,0)); transition:bottom .35s ease, opacity .3s; min-height:44px; }
.lyricbar[hidden]{ display:none; }
.tr-hidden .lyricbar{ bottom:0; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
.lyricbar .next{ display:block; font-weight:400; font-size:13px; color:var(--cream-dim); }

/* transport */
.transport{ position:absolute; left:0; right:0; bottom:0; z-index:50; background:var(--chrome); border-top:2px solid #000;
  box-shadow:0 -1px 0 var(--chrome-line) inset; padding:6px 14px calc(8px + env(safe-area-inset-bottom,0px)); transition:transform .35s ease; }
.tr-hidden .transport{ transform:translateY(105%); }
.t-row{ display:flex; align-items:center; gap:10px; max-width:640px; margin:0 auto; }
.t-scrub{ height:34px; }
.t-time{ font-family:'Kalam',cursive; font-weight:700; font-size:13px; color:var(--cream-dim); min-width:36px; font-variant-numeric:tabular-nums; }
.t-time:last-child{ text-align:right; }
#tScrub{ flex:1; -webkit-appearance:none; appearance:none; height:28px; background:transparent; margin:0; }
#tScrub::-webkit-slider-runnable-track{ height:4px; background:linear-gradient(to right, var(--pulp) var(--p,0%), #4b3a30 var(--p,0%)); border-radius:2px; }
#tScrub::-moz-range-track{ height:4px; background:#4b3a30; border-radius:2px; }
#tScrub::-moz-range-progress{ height:4px; background:var(--pulp); }
#tScrub::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--cap); border:2px solid #000; }
#tScrub::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--cap); border:2px solid #000; }
.t-btns{ justify-content:space-between; height:50px; }
.tb{ display:grid; place-items:center; width:42px; height:42px; border:none; background:none; border-radius:8px; cursor:pointer; color:var(--cream); }
.tb svg{ width:24px; height:24px; }
.tb[aria-pressed="true"]{ color:var(--sfx); }
.tb.play{ width:54px; height:46px; background:var(--pulp); color:var(--ink); border:2px solid #000; box-shadow:2px 3px 0 #000; border-radius:4px; }
.tb.play svg{ width:26px; height:26px; }
.tb.play:active{ transform:translate(1px,2px); box-shadow:1px 1px 0 #000; }
.seg{ display:flex; border:2px solid #000; border-radius:4px; overflow:hidden; background:#2a1e18; }
.segb{ border:none; background:none; padding:7px 13px 5px; font-family:'Kalam',cursive; font-weight:700; font-size:15px; color:var(--cream-dim); cursor:pointer; }
.segb[aria-pressed="true"]{ background:var(--cap); color:var(--ink); }
.t-note{ text-align:center; font-size:11.5px; color:#9d8d73; margin-top:2px; min-height:14px; }

/* sheets */
.sheet{ position:absolute; inset:0; z-index:80; background:rgba(8,5,4,.6); display:flex; align-items:flex-end; justify-content:center; }
.sheet[hidden]{ display:none; }
.sheet-card{ width:min(640px,100%); max-height:88%; overflow-y:auto; background:#241913; border-top:2px solid #000; color:var(--cream);
  padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 40px rgba(0,0,0,.5); border-radius:10px 10px 0 0; }
.sheet-card header{ display:flex; align-items:center; justify-content:space-between; }
.sheet-card h2{ margin:0; font-family:'Bangers',Impact,sans-serif; font-weight:400; font-size:28px; letter-spacing:.04em; color:var(--cap); }
.sheet-card h3{ margin:16px 0 6px; font-family:'Kalam',cursive; font-size:17px; color:var(--sfx); }
.sheet-card p{ margin:4px 0 10px; font-size:15px; line-height:1.35; }
.sheet-card .small{ font-size:13px; color:var(--cream-dim); }
.row{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.btn{ display:inline-flex; align-items:center; gap:6px; font-family:'Kalam',cursive; font-weight:700; font-size:15px; color:var(--ink); background:var(--cap);
  border:2px solid #000; padding:7px 13px 5px; box-shadow:2px 3px 0 #000; cursor:pointer; border-radius:3px; }
.btn.ghost{ background:transparent; color:var(--cream); border-color:#6b5546; box-shadow:none; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn input{ display:none; }
.x{ border:none; background:none; color:var(--cream-dim); font-family:'Kalam',cursive; font-size:16px; cursor:pointer; padding:6px; }
.tog{ display:flex; align-items:center; gap:10px; font-size:15px; }
.tog input{ width:20px; height:20px; accent-color:var(--pulp); }
.out{ width:100%; height:120px; margin-top:10px; background:#120c09; color:var(--cream); border:1px solid #5a4537; font:12px/1.4 ui-monospace,Menlo,Consolas,monospace; padding:8px; }
.out[hidden]{ display:none; }

/* timing tool */
.timer{ position:absolute; inset:0; z-index:90; background:#100a08; display:flex; flex-direction:column; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); }
.timer[hidden]{ display:none; }
.timer header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.timer h2{ margin:0; font-family:'Bangers',Impact,sans-serif; font-weight:400; font-size:24px; letter-spacing:.04em; color:var(--cap); }
.tm-lines{ margin:18px 0 10px; text-align:center; }
.tm-prev{ font-size:15px; color:#8f7f68; min-height:22px; }
.tm-cur{ font-family:'Kalam',cursive; font-weight:700; font-size:clamp(24px,7vw,40px); line-height:1.15; color:var(--cream); margin:10px 0; min-height:2.3em; display:flex; align-items:center; justify-content:center; }
.tm-next{ font-size:15px; color:#8f7f68; line-height:1.4; min-height:44px; }
.tm-tap{ flex:1; min-height:140px; margin:8px 0 12px; border:3px solid #000; background:var(--pulp); color:var(--ink); font-family:'Bangers',Impact,sans-serif; font-size:clamp(26px,8vw,44px); letter-spacing:.04em; box-shadow:4px 5px 0 #000; cursor:pointer; touch-action:manipulation; border-radius:6px; }
.tm-tap:active{ transform:translate(2px,3px); box-shadow:2px 2px 0 #000; }
.tm-tap[disabled]{ background:#3a2a20; color:#7d6b58; }
.tm-ctrl{ display:flex; gap:10px; justify-content:center; }
.tm-status{ display:flex; justify-content:space-between; margin-top:10px; font-size:14px; color:var(--cream-dim); font-variant-numeric:tabular-nums; }
.tm-donebox{ text-align:center; padding:10px 0; }
.tm-donebox[hidden]{ display:none; }

.toast{ position:absolute; left:50%; top:calc(14px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:100; background:var(--cap); color:var(--ink); border:2px solid #000;
  box-shadow:3px 4px 0 #000; padding:8px 14px 6px; font-family:'Kalam',cursive; font-weight:700; font-size:15px; max-width:88%; text-align:center; }
.toast[hidden]{ display:none; }

@media (min-width:760px){
  .lyricbar{ font-size:20px; }
}

[hidden]{ display:none !important; }

.btext{ display:block; width:auto; height:auto; white-space:nowrap; transform:translate(-50%,-50%); font-size:calc(clamp(10px,3.55cqw,20px) * var(--tz,1)); }
.lt.cap{ font-size:calc(clamp(11px,4.35cqw,24px) * var(--tz,1)); }
.lt.quiet{ font-size:calc(clamp(12px,5.4cqw,28px) * var(--tz,1)); }
.lt.sfx{ font-size:calc(clamp(17px,10cqw,54px) * var(--tz,1)); }
#v-page .pagewrap > .page{ grid-area:1 / 1; }
.breath.b3 path{ animation-name:wisp3; } .breath.b4 path{ animation-name:wisp4; animation-duration:4.6s; }
@keyframes wisp3{ 0%{ transform:translate(-4px,4px); opacity:0; } 30%{ opacity:.9; } 100%{ transform:translate(14px,-12px); opacity:0; } }
@keyframes wisp4{ 0%{ transform:translate(0,10px); opacity:0; } 30%{ opacity:.85; } 100%{ transform:translate(4px,-30px); opacity:0; } }
.worm{ animation:wormy 2.4s ease-in-out infinite alternate; } @keyframes wormy{ from{ transform:scaleX(1) skewX(-8deg); } to{ transform:scaleX(.82) skewX(10deg); } }
.seg{ animation:segw .5s ease-in-out infinite alternate; } @keyframes segw{ from{ transform:translateY(-1px); } to{ transform:translateY(1px); } }
.wt-shimmer{ position:absolute; left:-20%; right:-20%; height:30%; mix-blend-mode:screen; opacity:.55; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,214,150,0) 0 18px, rgba(255,214,150,.16) 22px, rgba(255,214,150,0) 30px 48px); -webkit-mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent); animation:shim 9s linear infinite; }
@keyframes shim{ from{ transform:translateX(0); } to{ transform:translateX(48px); } }
.rm .wt-shimmer, .rm .worm, .rm .seg{ animation:none; }
.lampglow{ border-radius:50%; mix-blend-mode:screen; z-index:5; opacity:0; background:radial-gradient(circle, rgba(255,200,120,.6), rgba(255,150,60,.2) 45%, rgba(255,140,50,0) 70%); }
.breath.b2 path{ animation-name:wisp2; }
.breath.flip path{ animation-name:wispR; }
@keyframes wisp2{ 0%{ transform:translate(-4px,-3px); opacity:0; } 25%{ opacity:.9; } 70%{ opacity:.55; } 100%{ transform:translate(12px,10px); opacity:0; } }
@keyframes wispR{ 0%{ transform:translate(-6px,5px); opacity:0; } 25%{ opacity:.95; } 70%{ opacity:.6; } 100%{ transform:translate(14px,-16px); opacity:0; } }
.bgi{ background-size:100% 100%; background-repeat:no-repeat; }
#v-toc .pagewrap{ bottom:0; }
.im-host{ background-image:url(art/host.cdfac77bc9.webp); }

.ec{ position:absolute; inset:0; display:flex; flex-direction:column; gap:3.4cqw; padding:5cqw 6cqw 4.5cqw; }
.ec-token{ flex:1 1 auto; min-height:0; display:grid; place-items:center; }
.ec-token svg{ width:100%; height:100%; overflow:visible; }
.ec-next{ position:relative; display:block; width:100%; text-align:left; cursor:pointer; color:var(--ink); background:var(--cap); border:.6cqw solid var(--ink); box-shadow:1cqw 1.2cqw 0 var(--ink); padding:2.8cqw 12cqw 3cqw 4cqw; }
.ec-next::after{ content:""; position:absolute; right:0; bottom:0; width:10cqw; height:10cqw; background:linear-gradient(135deg, transparent 50%, #e6d39f 50%, #c9b07a 85%); border-left:.4cqw solid var(--ink); border-top:.4cqw solid var(--ink); }
.ec-next:active{ transform:translate(.4cqw,.5cqw); box-shadow:.5cqw .6cqw 0 var(--ink); }
.ec-kick{ display:block; font-family:'Bangers',Impact,sans-serif; font-size:4.2cqw; letter-spacing:.07em; color:var(--blood); line-height:1.1; }
.ec-title{ display:block; font-family:'Bangers',Impact,sans-serif; font-size:9.4cqw; line-height:1.02; letter-spacing:.02em; white-space:nowrap; overflow:hidden; }
.ec-tease{ display:block; font-family:'Kalam',cursive; font-size:4.1cqw; line-height:1.25; color:#4a3a2c; margin-top:.6cqw; }
.ec-minor{ display:flex; justify-content:center; gap:7cqw; }
.ec-link{ background:none; border:none; padding:1cqw; cursor:pointer; font-family:'Kalam',cursive; font-weight:700; font-size:4.2cqw; color:var(--ink); text-decoration:underline; text-decoration-thickness:.3cqw; text-underline-offset:.22em; }
#v-page .endcard .card{ width:min(86%,400px); aspect-ratio:.72; max-height:92%; }
.ec svg text{ font-kerning:normal; }
.ec-bell{ transform-box:view-box; transform-origin:150px 16px; }
.ec.play .ec-bell{ animation:bellsettle 3.4s ease-out both; }
@keyframes bellsettle{ 0%{ transform:rotate(13deg); } 17%{ transform:rotate(-9deg); } 34%{ transform:rotate(6deg); } 52%{ transform:rotate(-3.5deg); } 70%{ transform:rotate(1.6deg); } 100%{ transform:rotate(0); } }
.ec-reel{ transform-box:view-box; }
.ec.play .ec-reel{ animation:reelstop 2.4s cubic-bezier(.12,.62,.25,1) both; }
@keyframes reelstop{ from{ transform:rotate(0); } to{ transform:rotate(1080deg); } }
.ec-stamp{ opacity:0; transform-box:view-box; transform-origin:150px 105px; }
.ec.play .ec-stamp{ animation:stamp .34s cubic-bezier(.2,1.5,.4,1) 2.4s both; }
@keyframes stamp{ from{ opacity:0; transform:scale(1.4); } to{ opacity:.92; transform:scale(1); } }
.ec-eyes{ opacity:0; transform-box:fill-box; transform-origin:center; }
.ec.play .ec-eyes{ animation:eyesopen 1.5s ease 1.4s both, eyesblink .34s ease 4.6s; }
@keyframes eyesopen{ from{ opacity:0; transform:scaleY(.12); } to{ opacity:1; transform:scaleY(1); } }
@keyframes eyesblink{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.1); } }
.ec-spec{ animation:bob 4.5s ease-in-out infinite alternate; transform-box:fill-box; }
@keyframes bob{ from{ transform:translateY(-2px) rotate(-2deg); } to{ transform:translateY(3px) rotate(2deg); } }
.ec-bub circle{ animation:bubup 3.4s ease-in infinite; }
.ec-bub circle:nth-child(2){ animation-delay:-1.1s; } .ec-bub circle:nth-child(3){ animation-delay:-2.3s; } .ec-bub circle:nth-child(4){ animation-delay:-.6s; }
@keyframes bubup{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.9; } 100%{ transform:translateY(-92px); opacity:0; } }
.ec-punch{ opacity:0; } .ec.play .ec-punch{ animation:fade .25s 1.1s both; } @keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.ec-chunk{ opacity:0; transform-box:fill-box; transform-origin:center; } .ec.play .ec-chunk{ animation:chunkpop 1.4s 1.05s both; }
@keyframes chunkpop{ 0%{ opacity:0; transform:scale(.75) rotate(-8deg); } 12%{ opacity:1; transform:scale(1) rotate(-8deg); } 70%{ opacity:1; } 100%{ opacity:0; transform:scale(1) rotate(-8deg); } }
.ec-tt .ec-stamp{ transform-origin:150px 170px; } .ec-tt.play .ec-stamp{ animation-delay:2s; }
.rm .ec *{ animation:none !important; } .rm .ec-stamp, .rm .ec-eyes, .rm .ec-punch{ opacity:1; }
#app{ --top-h:54px; }
#v-page .pagewrap{ top:var(--top-h); }
#v-tale .strip{ top:var(--top-h); }
.md-flicker{ position:absolute; inset:0; z-index:4; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(ellipse at 50% 34%, rgba(255,186,104,.24), rgba(255,150,60,.09) 55%, rgba(0,0,0,0) 85%); animation:mdflick 4.6s linear infinite; }
@keyframes mdflick{ 0%{opacity:.48} 13%{opacity:.82} 21%{opacity:.58} 34%{opacity:.92} 47%{opacity:.55} 58%{opacity:.8} 71%{opacity:.5} 83%{opacity:.88} 100%{opacity:.48} }
.md-flicker.frozen{ animation-play-state:paused; }
.rm .md-flicker{ animation:none; opacity:.65; }
.md-sweep{ position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:screen; background:linear-gradient(110deg, transparent 38%, rgba(255,220,170,.2) 47%, rgba(255,240,210,.32) 50%, rgba(255,220,170,.2) 53%, transparent 62%); background-size:260% 100%; animation:mdsweep 7.5s ease-in-out infinite; }
@keyframes mdsweep{ 0%{ background-position:115% 0; } 100%{ background-position:-15% 0; } }
.rm .md-sweep{ animation:none; opacity:0; }
.md-frost{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background-size:260px 260px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .96  0 0 0 0 1  0 0 0 1.7 -.78'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"), radial-gradient(ellipse at 50% 50%, rgba(220,236,248,0) 40%, rgba(220,236,248,.55) 92%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, transparent 34%, #000 80%); mask-image:radial-gradient(ellipse at 50% 50%, transparent 34%, #000 80%); }
.bal.whisper path{ stroke-dasharray:7 5; }
.btext.shout{ font-size:calc(clamp(13px,5.4cqw,30px) * var(--tz,1)); letter-spacing:.04em; }
.ec-strike{ stroke-dasharray:120; stroke-dashoffset:120; }
.ec.play .ec-strike{ animation:strike .4s ease-out both; }
@keyframes strike{ to{ stroke-dashoffset:0; } }
.rm .ec-strike{ stroke-dashoffset:0; }
.ec-dancecard.play .ec-stamp{ animation-delay:2.6s; }
.btext.whisper{ text-transform:none; font-weight:400; letter-spacing:.02em; }
.panel.frozen .md-flicker, .panel.frozen .md-sweep{ animation-play-state:paused; }
.ec-bar{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2.4cqw; }
.ec-btn{ font-family:'Bangers',Impact,sans-serif; font-size:5cqw; letter-spacing:.05em; color:var(--ink); background:var(--cap); border:.5cqw solid var(--ink); box-shadow:.7cqw .9cqw 0 var(--ink); padding:2.3cqw .8cqw 2cqw; cursor:pointer; white-space:nowrap; line-height:1; }
.ec-btn:active{ transform:translate(.3cqw,.4cqw); box-shadow:.3cqw .4cqw 0 var(--ink); }
.ec-btn:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.ec-go{ background:var(--blood); color:#fff3d6; }
.chap{ position:absolute; inset:0; z-index:60; } .chap[hidden]{ display:none; }
.chap-back{ position:absolute; inset:0; background:rgba(10,7,5,.55); opacity:0; transition:opacity .25s; }
.chap-panel{ position:absolute; left:0; top:0; bottom:0; width:min(86%,380px); overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(-103%); transition:transform .26s ease-out; padding:14px 16px 18px; border-right:3px solid var(--ink); box-shadow:6px 0 0 rgba(0,0,0,.35); }
.chap.on .chap-back{ opacity:1; } .chap.on .chap-panel{ transform:none; }
.rm .chap-panel, .rm .chap-back{ transition:none; }
.chap-head{ position:relative; padding:2px 48px 10px 2px; border-bottom:3px solid var(--ink); margin-bottom:12px; }
.chap-title{ font-family:'Bangers',Impact,sans-serif; font-size:32px; letter-spacing:.05em; color:var(--blood); margin:0; line-height:1; outline:none; }
.chap-sub{ font-family:'Kalam',cursive; font-weight:700; font-size:14px; margin:3px 0 0; color:var(--ink); }
.chap-x{ position:absolute; right:0; top:0; width:40px; height:40px; font-size:20px; line-height:1; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:2px 3px 0 var(--ink); cursor:pointer; }
.chap-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.chap-btn{ display:grid; grid-template-columns:42px 1fr; column-gap:10px; align-items:center; width:100%; text-align:left; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:8px 10px; cursor:pointer; }
.chap-btn:active{ transform:translate(1px,2px); box-shadow:1px 1px 0 var(--ink); }
.chap-no{ grid-row:1 / span 2; display:grid; place-items:center; width:42px; height:42px; font-family:'Bangers',Impact,sans-serif; font-size:22px; border:2px solid var(--ink); background:#fff7e0; }
.chap-name{ font-family:'Bangers',Impact,sans-serif; font-size:20px; letter-spacing:.03em; line-height:1.05; }
.chap-tease{ font-family:'Kalam',cursive; font-size:13px; line-height:1.25; color:#4a3a2c; }
.chap-btn.cur{ background:#f6d77e; } .chap-btn.cur .chap-no{ background:var(--blood); color:#fff3d6; }
.chap-btn:disabled{ opacity:.5; box-shadow:none; cursor:default; background:#e9dcc0; }
.t-glow{ position:absolute; z-index:3; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,200,110,.55), rgba(255,160,60,.18) 45%, rgba(0,0,0,0) 70%); mix-blend-mode:screen; pointer-events:none; animation:tflick 4.3s linear infinite; }
.t-lamp{ animation-duration:3.1s; animation-delay:-1.2s; }
@keyframes tflick{ 0%{opacity:.35} 17%{opacity:.9} 29%{opacity:.45} 41%{opacity:1} 56%{opacity:.4} 68%{opacity:.85} 83%{opacity:.38} 100%{opacity:.35} }
.t-shadow{ position:absolute; z-index:3; overflow:hidden; pointer-events:none; }
.t-band{ position:absolute; top:-10%; bottom:-10%; width:46%; left:-60%; background:linear-gradient(90deg, rgba(10,8,12,0), rgba(10,8,12,.8) 40%, rgba(10,8,12,.8) 60%, rgba(10,8,12,0)); animation:tband 8s ease-in-out 2.5s infinite; }
@keyframes tband{ 0%,62%{ left:-60%; } 80%,100%{ left:115%; } }
.rm .t-glow{ animation:none; } .rm .t-band{ display:none; }
.jah-hiss{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; mix-blend-mode:screen; background-size:180px 180px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .85  0 0 0 0 .85  0 0 0 0 .85  0 0 0 1.4 -.55'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); animation:hissjit .5s steps(4) infinite; }
@keyframes hissjit{ 0%{ background-position:0 0; } 25%{ background-position:-37px 21px; } 50%{ background-position:19px -43px; } 75%{ background-position:-11px 31px; } 100%{ background-position:0 0; } }
.rm .jah-hiss{ animation:none; }
.lt.sign{ display:flex; align-items:center; justify-content:center; text-align:center; line-height:.95; white-space:nowrap; overflow:hidden; background:none; border:none; box-shadow:none; padding:0; transform:none; }
.sign-paint{ font-family:'Rubik Wet Paint', cursive; color:#b3121b; font-size:calc(6cqw * var(--tz,1)); }
.sign-exit{ font-family:'Anton', Impact, sans-serif; color:#ffe9e0; font-size:calc(4cqw * var(--tz,1)); letter-spacing:.04em; color:#ffe2d6; text-shadow:0 0 3px #ff3a24, 0 0 8px rgba(255,42,26,.8); animation:exithum .256s ease-in-out infinite alternate; }
@keyframes exithum{ from{ opacity:.86; } to{ opacity:1; } }
.rm .sign-exit{ animation:none; }
.lt.sfx.green{ color:#a7e86f; }
.ct-bulb{ position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:screen; z-index:4; background:radial-gradient(circle, rgba(255,236,170,.95), rgba(255,200,90,.35) 45%, rgba(0,0,0,0) 72%); animation:twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.rm .ct-bulb{ animation:none; opacity:.6; }
.t-glow.g-place{ transform:none; aspect-ratio:auto; }
.t-glow.t-red{ background:radial-gradient(circle, rgba(255,70,45,.6), rgba(255,30,20,.2) 45%, rgba(0,0,0,0) 70%); }
.t-glow.ct-still{ animation:none; }
.ct-breathe{ position:absolute; border-radius:50%; pointer-events:none; z-index:4; background:radial-gradient(circle, rgba(0,0,0,.75), rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); animation:breathe 4.2s ease-in-out infinite alternate; }
@keyframes breathe{ from{ opacity:.25; transform:scale(.92); } to{ opacity:.75; transform:scale(1.08); } }
.rm .ct-breathe{ animation:none; opacity:.5; }
.ct-creep{ position:absolute; inset:0; z-index:5; pointer-events:none; --c:0; background:radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0) calc(62% - var(--c) * 40%), rgba(0,0,0,.94) calc(98% - var(--c) * 34%)); }
.t-glow.t-slow{ animation:tslow 5.2s ease-in-out infinite alternate; }
@keyframes tslow{ from{ opacity:.2; } to{ opacity:.75; } }
.rm .t-glow.t-slow{ animation:none; opacity:.5; }
body.packing::after{ content:'Turning the page…'; position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:80; padding:7px 14px; font-family:'Kalam',cursive; font-weight:700; font-size:15px; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:2px 3px 0 var(--ink); }
.t-glow.t-cool{ background:radial-gradient(circle, rgba(150,240,230,.38), rgba(120,220,210,.12) 45%, rgba(0,0,0,0) 70%); }
.mr-vig{ position:absolute; pointer-events:none; z-index:4; opacity:0; background:radial-gradient(circle at var(--hx) var(--hy), rgba(0,0,0,0) 15%, rgba(0,0,0,.92) 40%); }
.mr-pool{ position:absolute; pointer-events:none; z-index:4; opacity:0; border-radius:50%; background:radial-gradient(ellipse at center, rgba(6,3,2,.97) 0%, rgba(6,3,2,.92) 46%, rgba(6,3,2,0) 72%); }
.ms-black{ position:absolute; pointer-events:none; background:#04060a; opacity:0; z-index:5; }
.lampglow.gs-green{ background:radial-gradient(circle, rgba(140,255,150,.9), rgba(90,230,120,.4) 40%, rgba(0,0,0,0) 70%); mix-blend-mode:screen; }
.ms-redwin{ z-index:6; mix-blend-mode:screen; filter:sepia(1) saturate(7) hue-rotate(-42deg) brightness(1.05); }
.ms-flash{ position:absolute; pointer-events:none; z-index:7; opacity:0; mix-blend-mode:screen; background:radial-gradient(ellipse 90% 75% at 56% 6%, rgba(236,240,255,1), rgba(190,205,255,.7) 45%, rgba(150,170,230,.3) 100%); }
.out-flash{ position:absolute; pointer-events:none; z-index:7; opacity:0; mix-blend-mode:screen; background:radial-gradient(ellipse 46% 22% at 38% 10%, rgba(226,234,255,.95), rgba(170,190,250,.5) 55%, rgba(0,0,0,0) 100%); }
/* ---- transition pages: the recorder in the empty room ---- */
.tp{ position:relative; width:100%; aspect-ratio:2/3; margin:0 auto; container-type:inline-size; overflow:hidden; background:#120a06; }
.endcard .card{ background:none !important; padding:0 !important; border:0 !important; box-shadow:none !important; width:min(94vw, 61vh) !important; max-width:none !important; }
.tp-room{ position:absolute; inset:0; background-size:100% 100%; }
.tp-box{ position:absolute; left:6%; top:3.6%; width:88%; aspect-ratio:3/2; background:#f2ead4; padding:1.6%; border:0.55cqw solid #1a1210; box-shadow:1.2cqw 1.4cqw 0 rgba(10,6,3,.75); transform:rotate(-0.6deg); }
.tp-pic{ position:absolute; inset:1.6%; border:0.45cqw solid #1a1210; background-size:cover; background-position:center; }
.tp-cap{ position:absolute; left:50%; top:46.6%; transform:translateX(-50%) rotate(-1.2deg); white-space:nowrap; font-family:'Kalam', cursive; font-weight:700; font-size:calc(4.6cqw * var(--tz, 1)); line-height:1.15; color:#1a1210; background:#f3e09a; border:0.5cqw solid #1a1210; padding:0.9cqw 2.4cqw 0.6cqw; box-shadow:0.9cqw 1.1cqw 0 rgba(10,6,3,.8); letter-spacing:.02em; }
.tp-reel{ position:absolute; border-radius:50%; animation:tpspin 2.4s linear infinite; will-change:transform; }
.tp.play .tp-reel{ animation-duration:1.1s; }
.tp.ff .tp-reel{ animation-duration:.28s; }
.tp.rew .tp-reel{ animation-duration:.28s; animation-direction:reverse; }
@keyframes tpspin{ to{ transform:rotate(360deg); } }
.tp-led{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,90,60,.95), rgba(255,40,20,.35) 45%, rgba(255,0,0,0) 70%); mix-blend-mode:screen; animation:tpled 2.2s ease-in-out infinite; pointer-events:none; }
@keyframes tpled{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
.tp-ctr{ position:absolute; display:flex; align-items:center; justify-content:center; font-family:'Anton', Impact, sans-serif; font-size:2.3cqw; letter-spacing:.35em; padding-left:.35em; color:#f2ead4; text-shadow:0 0 .4cqw rgba(255,230,180,.5); pointer-events:none; }
.tp-key{ position:absolute; border:0; padding:0; margin:0; background:transparent; border-radius:0.8cqw; cursor:pointer; transition:background .12s, box-shadow .12s; -webkit-tap-highlight-color:transparent; }
.tp-key:focus-visible{ outline:0.5cqw solid #f3e09a; outline-offset:0.3cqw; }
.tp-key.down{ background:rgba(20,10,5,.38); box-shadow:inset 0 0.9cqw 1.1cqw rgba(0,0,0,.65); }
.tp-key:disabled{ cursor:default; background:rgba(20,10,5,.42); }
.tp-lab{ position:absolute; display:flex; align-items:center; justify-content:center; font-family:'Kalam', cursive; font-weight:700; font-size:calc(1.9cqw * var(--tz, 1)); letter-spacing:.08em; color:#f2ead4; text-shadow:0 0.2cqw 0 #000; pointer-events:none; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .tp-reel, .tp-led{ animation:none; } }
.tp-stage{ position:absolute; inset:0; transform:scale(1.28); transform-origin:50% 80%; }
.tp-key.down{ background:transparent; box-shadow:none; }
.tp-key.down::before, .tp-key:disabled::before{ content:''; position:absolute; left:4%; right:4%; top:5%; height:62%; border-radius:0.6cqw; background:rgba(20,10,5,.38); box-shadow:inset 0 0.9cqw 1.1cqw rgba(0,0,0,.65); }
.tp-key:disabled{ background:transparent; }
.tp-box, .tp-cap{ z-index:2; }
.tp-reel{ border-radius:0; background:none !important; }
.tp-reel svg{ display:block; width:100%; height:100%; }
.tp-lab{ letter-spacing:.03em; overflow:visible; }
/* the reels lie in the recorder's tilted deck: they spin flat, inside a container foreshortened to the deck's viewing angle */
.tp-reel{ animation:none !important; transform:scaleY(.74); transform-origin:50% 50%; }
.tp-reel svg{ animation:tpspin 2.4s linear infinite; transform-origin:50% 50%; will-change:transform; }
.tp.play .tp-reel svg{ animation-duration:1.1s; }
.tp.ff .tp-reel svg{ animation-duration:.28s; }
.tp.rew .tp-reel svg{ animation-duration:.28s; animation-direction:reverse; }
@media (prefers-reduced-motion: reduce){ .tp-reel svg{ animation:none; } }
.tp-glass{ position:absolute; pointer-events:none; border-radius:0.4cqw; background:linear-gradient(to bottom, rgba(10,6,3,.45), rgba(10,6,3,.12) 45%, rgba(255,236,200,.07) 78%, rgba(0,0,0,0)); }
.tp-lab{ display:block; text-align:center; line-height:1.35; font-size:calc(1.5cqw * var(--tz, 1)); letter-spacing:.02em; }
/* links out */
.corner.listen{ left:auto; right:calc(10px + env(safe-area-inset-right,0px)); text-decoration:none; }
.corner.listen::after{ display:none; }
.chap-merch{ display:block; margin:14px 4px 6px; padding:10px 12px; font-family:'Bangers', Impact, sans-serif; font-size:20px; letter-spacing:.05em; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); text-decoration:none; text-align:center; }
.tp-merch{ position:absolute; left:50%; top:53.2%; transform:translateX(-50%) rotate(1deg); z-index:3; white-space:nowrap; font-family:'Bangers', Impact, sans-serif; font-size:calc(3.6cqw * var(--tz, 1)); letter-spacing:.06em; color:#1a1210; background:#f3e09a; border:0.45cqw solid #1a1210; box-shadow:0.7cqw 0.8cqw 0 rgba(10,6,3,.8); padding:0.5cqw 2cqw 0.3cqw; text-decoration:none; }
.chap-out + .chap-out{ margin-top:8px; }



#app{ --tr-h:0px; --ly-h:0px; }
.corner{ position:absolute; left:calc(10px + env(safe-area-inset-left,0px)); top:calc(10px + env(safe-area-inset-top,0px)); z-index:60; display:flex; align-items:center; gap:7px;
  font-family:'Bangers',Impact,sans-serif; font-size:17px; letter-spacing:.05em; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:2px 3px 0 #000; padding:4px 10px 2px; cursor:pointer; }
.corner::after{ content:""; width:13px; height:10px; background:linear-gradient(var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 6px, transparent 6px 8px, var(--ink) 8px 10px); }
.progress{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:55; background:rgba(0,0,0,.5); pointer-events:none; }
.progress i{ display:block; height:100%; width:0; background:var(--pulp); transition:width .45s ease; }
.hintchip{ position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60; pointer-events:none; white-space:nowrap;
  font-family:'Kalam',cursive; font-weight:700; font-size:15px; color:var(--ink); background:var(--cap); border:2px solid var(--ink); box-shadow:2px 3px 0 #000; padding:6px 14px 4px; animation:hintin 1s .8s both; }
@keyframes hintin{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }
.spot{ position:absolute; z-index:24; pointer-events:none; opacity:0; border-radius:1px; box-shadow:0 0 0 3000px rgba(8,5,4,.6);
  transition:left .85s cubic-bezier(.65,0,.35,1), top .85s cubic-bezier(.65,0,.35,1), width .85s cubic-bezier(.65,0,.35,1), height .85s cubic-bezier(.65,0,.35,1), opacity .6s ease; }
.rm .spot{ transition:opacity .2s; }
.ring{ position:absolute; z-index:26; border-radius:50%; border:.85cqw solid rgba(255,218,100,1); box-shadow:0 0 0 .35cqw rgba(10,6,4,.55), 0 0 2.8cqw rgba(255,184,60,.75), inset 0 0 1.8cqw rgba(255,184,60,.4); transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.ring.on{ animation:ringpulse 1.9s ease-in-out infinite; }
@keyframes ringpulse{ 0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(.94); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.04); } }
.rm .ring.on{ animation:none; opacity:.85; }
.eyeglow{ position:absolute; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:screen; opacity:0; pointer-events:none; z-index:12; }
.eyeglow.green{ background:radial-gradient(circle, rgba(228,255,210,1) 0 16%, rgba(110,255,96,.9) 30%, rgba(40,210,70,.35) 52%, rgba(40,210,70,0) 72%); }
.eyeglow.amber{ background:radial-gradient(circle, rgba(255,246,210,1) 0 14%, rgba(255,186,70,.92) 30%, rgba(255,120,30,.38) 52%, rgba(255,120,30,0) 72%); }
.eyeglow.red{ background:radial-gradient(circle, rgba(255,226,200,1) 0 13%, rgba(255,70,40,.92) 30%, rgba(200,16,10,.4) 52%, rgba(200,16,10,0) 72%); }
.ms-layer{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.clip{ overflow:hidden; }
.ms-cloud{ position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(14,34,42,.8), rgba(14,34,42,.45) 55%, rgba(14,34,42,0)); animation:clouddrift 42s linear infinite; }
@keyframes clouddrift{ from{ transform:translateX(-140%); } to{ transform:translateX(150%); } }
.rm .ms-cloud{ animation:none; }
.ravens{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.raven .wing{ transform-box:fill-box; transform-origin:100% 100%; animation:flap .26s ease-in-out infinite alternate; }
@keyframes flap{ from{ transform:scaleY(1); } to{ transform:scaleY(-.5); } }
.ms-clockglow{ position:absolute; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:screen; z-index:6;
  background:radial-gradient(circle, rgba(255,214,150,.4), rgba(255,170,80,.12) 45%, rgba(255,170,80,0) 70%); }
.ms-shade{ position:absolute; pointer-events:none; mix-blend-mode:multiply; z-index:7; background:radial-gradient(ellipse at 50% 46%, rgba(3,5,9,.95) 34%, rgba(3,5,9,0) 74%); }
.ms-alleylight{ position:absolute; pointer-events:none; mix-blend-mode:screen; opacity:0; z-index:8; background:radial-gradient(ellipse at 38% 50%, rgba(255,200,130,.42), rgba(255,170,90,0) 70%); }
.ms-mist{ position:absolute; left:-12%; right:-12%; bottom:0; height:48%; mix-blend-mode:screen; opacity:.62; pointer-events:none;
  background:radial-gradient(ellipse 22% 38% at 18% 70%, rgba(180,200,210,.32), transparent 70%), radial-gradient(ellipse 26% 34% at 55% 78%, rgba(170,192,205,.28), transparent 70%), radial-gradient(ellipse 20% 30% at 86% 66%, rgba(185,205,215,.3), transparent 70%);
  background-size:150% 100%; animation:fogdrift 34s linear infinite alternate; }
.rm .ms-mist{ animation:none; }
.lt.cap.ms-cap{ display:flex; align-items:center; font-size:2.66cqw; line-height:1.1; padding:0 .55em; transform:rotate(-.6deg); box-shadow:.4cqw .5cqw 0 rgba(26,18,16,.88); z-index:16; }
.lt.sfx.ms-bong{ font-size:7.4cqw; opacity:0; transition:none; z-index:28; }
.smoke{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; z-index:9; }
.smoke path{ fill:none; stroke:rgba(214,208,196,.8); stroke-width:6; stroke-linecap:round; }
.smoke.on path{ animation:smokerise 3.2s ease-out infinite; }
.smoke path:nth-child(2){ animation-delay:-1.5s; }
@keyframes smokerise{ from{ transform:translateY(0); opacity:.95; } to{ transform:translateY(-70px); opacity:0; } }
.rm .smoke.on path{ animation:none; }
#cvZoom .lt{ z-index:14; }
.endcard{ position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:rgba(10,7,5,.6); opacity:0; pointer-events:none; transition:opacity .7s ease; }
.endcard.on{ opacity:1; pointer-events:auto; }
.endcard .card{ position:relative; width:min(88%,430px); aspect-ratio:1.08; border:2.5px solid var(--ink); box-shadow:0 14px 44px rgba(0,0,0,.6); container-type:inline-size; }