:root {
  color-scheme: dark;
  scrollbar-color: var(--dk-b2) transparent;
  --dk-peak: #d79a5f;
  --dk-hi: #e8b476;
  --dk-strong: #e0a76b;
  --dk-body: #bc9061;
  --dk-dim: #ae814e;
  --dk-faint: #9e754b;
  --dk-ghost: #775b3e;
  --dk-s1: #0d0804;
  --dk-s2: #140d07;
  --dk-s3: #1d1309;
  --dk-s4: #241505;
  --dk-active: #241708;
  --dk-active-2: #2e1b06;
  --dk-b1: #2b1d10;
  --dk-b2: #58432b;
  --dk-b3: #6e4a26;
  --dk-hair: #1a110a;
  --dk-red: #b0452c;
  --dk-red-b: #7a2f1f;
  --dk-green: #7a8a5e;
  --color-bg: #000;
  --color-surface: var(--dk-s1);
  --color-text: var(--dk-peak);
  --color-accent: var(--dk-hi);
  --color-accent-2: var(--dk-green);
  --color-divider: var(--dk-hair);
  --color-neutral-100: #0a0705;
  --color-neutral-200: #120c07;
  --color-neutral-300: #1a110a;
  --color-neutral-400: #2b1d10;
  --color-neutral-500: #9e754b;
  --color-neutral-600: #ae814e;
  --color-neutral-700: #b98857;
  --color-neutral-800: #bc9061;
  --color-neutral-900: #d79a5f;
  --color-accent-100: #140d07;
  --color-accent-200: #241505;
  --color-accent-300: #2b1d10;
  --color-accent-400: #58432b;
  --color-accent-500: #8f6a42;
  --color-accent-600: #b98857;
  --color-accent-700: #d79a5f;
  --color-accent-800: #e0a76b;
  --color-accent-900: #e8b476;
  --color-accent-2-100: #0e1109;
  --color-accent-2-200: #151a0f;
  --color-accent-2-300: #1e2416;
  --color-accent-2-400: #2c351f;
  --color-accent-2-500: #3f4a2d;
  --color-accent-2-600: #55643c;
  --color-accent-2-700: #667650;
  --color-accent-2-800: #7a8a5e;
  --color-accent-2-900: #8e9f70;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.8);
}
html, body { height: 100%; }
html, body { overscroll-behavior: none; }
body { background: #050403; }
* { scrollbar-width: thin; }
#stage { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.phone {
  position: relative; width: 390px; height: 812px; max-height: calc(100dvh - 56px);
  border-radius: 36px; border: 1px solid #17100a;
  box-shadow: var(--shadow-md); overflow: hidden;
  background: #000; color: var(--dk-peak); display: flex; flex-direction: column;
}
#app { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:root { --sa-t: 0px; --sa-r: 0px; --sa-b: 0px; --sa-l: 0px; }
@media (max-width: 519px) {
  #stage { padding: 0; }
  .phone {
    width: 100%; height: var(--kb-h, 100dvh); max-height: none;
    top: var(--kb-top, 0px); align-self: start;
    border-radius: 0; border: none; box-shadow: none;
  }
  :root {
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --sa-l: env(safe-area-inset-left, 0px);
  }
}
@media (min-width: 520px) and (max-height: 519px) {
  #stage { padding: 0; }
  .phone {
    width: 100%; height: var(--kb-h, 100dvh); max-height: none;
    top: var(--kb-top, 0px); align-self: start;
    border-radius: 0; border: none; box-shadow: none;
  }
  :root {
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --sa-l: env(safe-area-inset-left, 0px);
  }
  #app > .lt-scr, #app > .scr:not(.scr-reveal) {
    align-self: center; width: min(100%, calc(390px + var(--sa-l) + var(--sa-r)));
  }
}
:focus-visible { outline-color: var(--dk-dim); }
[tabindex="-1"]:focus { outline: none; }
::selection { background: rgba(214, 154, 95, 0.25); }
.ub {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
.ub, .lt-row, .beat, .btn, .dialog-backdrop {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.phone {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.phone input, .phone textarea {
  -webkit-user-select: text;
  user-select: text;
}
.scr {
  display: flex; flex-direction: column; height: 100%;
  padding: calc(26px + var(--sa-t)) calc(22px + var(--sa-r)) calc(24px + var(--sa-b)) calc(22px + var(--sa-l));
}
.scr-back {
  align-self: flex-start; font-size: calc(14px * var(--ts)); color: var(--dk-faint); padding: 6px 0;
  position: relative;
}
.scr-back::after { content: ''; position: absolute; inset: -6px; }
.arr {
  display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
  .scr-back:hover { color: var(--dk-dim); }
}
.dk-h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  letter-spacing: -0.015em; font-size: calc(25px * var(--ts)); line-height: 1.15;
  color: var(--dk-peak); margin: 8px 0 2px;
}
.tnum { font-variant-numeric: tabular-nums; }
.pips { display: inline-flex; gap: 3px; align-items: center; vertical-align: baseline; }
.pip {
  width: 4px; height: 10px; border-radius: 1px;
  border: 1px solid var(--dk-b2); background: transparent;
}
.pip.on { border-color: var(--dk-dim); background: var(--dk-dim); }
.cta {
  width: 100%; height: 96px; flex: none;
  background: var(--dk-s4); border: 1.5px solid var(--dk-b3); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(24px * var(--ts)); font-weight: 700; color: var(--dk-hi);
}
.cta:active {
  background: var(--dk-active-2);
  box-shadow: inset 0 0 0 1px var(--dk-dim);
}
.cta-sm { height: 60px; font-size: calc(18px * var(--ts)); border-width: 1px; }
.cta[disabled] { opacity: 0.45; cursor: not-allowed; }
.scr-reveal {
  padding: calc(26px + var(--sa-t)) calc(22px + var(--sa-r)) calc(32px + var(--sa-b)) calc(22px + var(--sa-l));
}
.rv-top { display: flex; align-items: center; flex: none; }
.rv-top .scr-back { align-self: auto; }
.reveal-film {
  text-align: center; font-size: calc(15px * var(--ts)); font-weight: 600; line-height: 1.25;
  color: var(--dk-dim); padding-top: 2px; flex: none;
}
h1.reveal-film { margin: 0; font-family: inherit; letter-spacing: inherit; }
.band {
  text-align: center; font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: 0.22em;
  color: var(--dk-faint); padding: 8px 0 10px; flex: none;
}
.reveal-film + .band { padding-top: 3px; }
.log-ends, .log-tip {
  font-size: calc(12px * var(--ts)); color: var(--dk-faint); line-height: 1.5;
  padding: 12px 2px 2px; text-align: center;
}
.empty-note {
  font-size: calc(17px * var(--ts)); font-weight: 650; line-height: 1.4; color: var(--dk-peak);
  padding: 2px 2px 12px; flex: none;
}
.reveal-scroll {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  padding-right: 16px; margin-right: -16px;
  overscroll-behavior: contain;
}
.beat-list { display: flex; flex-direction: column; }
.beat {
  display: grid; grid-template-columns: 15px 1fr; column-gap: 12px;
  align-items: start; position: relative;
  padding: var(--beat-row-pad) 2px; border-bottom: var(--beat-row-rule) solid var(--dk-hair);
}
.beat-list > .beat:last-child { border-bottom: 0; }
.beat.reveal-focus {
  animation: reveal-focus 900ms ease-out both;
}
@keyframes reveal-focus {
  0%, 28% { background: var(--dk-s4); }
  100% { background: transparent; }
}
:root {
  --ts: 1;
  --beat-size: calc(17.5px * var(--ts));
  --beat-row-pad: 13px;
  --beat-row-rule: 1px;
  --beat-node-centre: 0.725em;
}
.beat-rail {
  grid-column: 1; grid-row: 1 / span 2; width: 15px; align-self: stretch; position: relative;
  font-size: var(--beat-size); line-height: 1.55;
}
.beat-rail::before {
  content: ''; position: absolute; left: 50%;
  top: calc(0px - var(--beat-row-pad));
  bottom: calc(0px - var(--beat-row-pad) - var(--beat-row-rule));
  width: 1px; margin-left: -0.5px; background: var(--dk-ghost);
}
.beat-rail::after {
  content: ''; position: absolute; left: 50%; top: calc(var(--beat-node-centre) - 2.5px);
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--dk-dim);
}
.beat-list > .beat:first-child .beat-rail::before { top: var(--beat-node-centre); }
.beat-list > .beat:last-child .beat-rail::before { bottom: calc(100% - var(--beat-node-centre)); }
.beat-x { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--beat-size); line-height: 1.55; color: var(--dk-body); }
:root[data-text="large"] { --ts: calc(20.5 / 17.5); }
:root[data-text="larger"] { --ts: 1.5; }
:root[data-text="largest"] { --ts: 2; }
.beat.menu-open { background: var(--dk-s2); }
@media (hover: hover) and (pointer: fine) {
  .beat[data-a] { cursor: pointer; }
}
.beat-open {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0;
}
.beat:has(> .beat-open:focus-visible) { outline: 2px solid var(--dk-dim); outline-offset: -2px; }
.beat-menu {
  grid-column: 2 / -1; grid-row: 2; justify-self: end;
  margin-top: 8px; padding-right: 12px;
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center;
}
.beat-menu > .ub {
  font-size: calc(13px * var(--ts)); color: var(--dk-dim);
  border: 1px solid var(--dk-b1); border-radius: 10px;
  padding: 11px 14px; line-height: 1.15;
  position: relative;
}
.beat-menu > .ub::after { content: ''; position: absolute; inset: -3px 0; }
.beat-menu > .beat-menu-hide { color: var(--dk-strong); border-color: var(--dk-b2); }
.beat-menu > .ub:active { background: var(--dk-s2); }
@media (hover: hover) and (pointer: fine) {
  .beat-menu > .beat-menu-report:hover { color: var(--dk-strong); border-color: var(--dk-dim); }
  .beat-menu > .beat-menu-hide:hover { color: var(--dk-peak); border-color: var(--dk-dim); }
}
.beat-menu-said {
  font-size: calc(13px * var(--ts)); color: var(--dk-green); padding: 11px 2px; line-height: 1.15;
}
.beat-admin-menu { grid-column: 2 / -1; grid-row: 2; justify-self: end; margin-top: 4px; display: inline-flex; gap: 6px; align-items: center; }
.beat-admin-menu > .ub {
  font-size: calc(10px * var(--ts)); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dk-dim); border: 1px solid var(--dk-hair); border-radius: 4px;
  padding: 2px 6px; line-height: 1.4; transition: color 120ms ease, border-color 120ms ease;
}
.beat-admin-menu > .ub:disabled { opacity: 0.4; }
.beat-admin-menu > .beat-admin-cancel { color: var(--dk-faint); }
@media (hover: hover) and (pointer: fine) {
  .beat-admin-menu > .beat-admin-cut:hover,
  .beat-admin-menu > .beat-admin-hide:hover,
  .beat-admin-menu > .beat-admin-del:hover { color: var(--dk-strong); border-color: var(--dk-dim); }
  .beat-admin-menu > .beat-admin-cancel:hover { color: var(--dk-dim); }
}
.reveal-aux { display: flex; justify-content: center; flex: none; }
.reveal-whos {
  flex: none; align-self: center; text-align: center;
  font-size: calc(13px * var(--ts)); color: var(--dk-faint); padding: 12px 16px;
}
@media (hover: hover) and (pointer: fine) {
  .reveal-whos:hover { color: var(--dk-dim); }
}
.footer60 { display: flex; gap: 10px; margin-top: 20px; flex: none; }
.f60 {
  flex: 1; height: 60px; border-radius: 999px; text-align: center;
  background: var(--dk-s2); border: 1px solid var(--dk-b1);
  color: var(--dk-dim); font-size: calc(13px * var(--ts)); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  display: flex; align-items: center; justify-content: center;
}
.f60:not([aria-disabled="true"]):active {
  background: var(--dk-s3);
  box-shadow: inset 0 0 0 1px var(--dk-dim);
}
.f60[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.starved {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 10px 4px;
  overscroll-behavior: contain;
}
.quiet-title { font-size: calc(18px * var(--ts)); font-weight: 600; color: var(--dk-peak); }
.quiet-body { font-size: calc(14px * var(--ts)); color: var(--dk-dim); line-height: 1.55; max-width: 260px; }
.scr-lock {
  justify-content: space-between;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
.lock-mid {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.lock-plans { display: flex; flex-direction: column; gap: 12px; }
.lock-note {
  min-height: 1.5em; margin: 0; text-align: center;
  font-size: calc(13px * var(--ts)); color: var(--dk-dim);
}
.lock-small {
  margin: 0; text-align: center; font-size: calc(12px * var(--ts)); color: var(--dk-faint); line-height: 1.5;
}
.lock-small a { color: inherit; text-decoration: underline; }
.lock-restore {
  align-self: center; padding: 10px 14px;
  font-size: calc(13px * var(--ts)); color: var(--color-neutral-600);
  text-decoration: underline; text-underline-offset: 3px;
}
.lock-restore:disabled { opacity: 0.6; }
.scr-signin .reveal-film { margin-bottom: 4px; }
.scr-signin .lock-plans { gap: 14px; }
.signin-google, .signin-apple { width: 100%; min-height: 40px; display: flex; justify-content: center; }
.pos-timer {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 13px 0 10px; border-radius: 999px;
  background: var(--dk-s2); border: 1px solid var(--dk-b1);
  font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--dk-faint);
}
.pos-timer::after { content: ''; position: absolute; inset: -5px -4px; }
.pos-timer svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round;
}
.pos-timer:active { background: var(--dk-s4); box-shadow: inset 0 0 0 1px var(--dk-dim); }
.pos-timer.on {
  background: var(--dk-s4); border-color: var(--dk-dim); color: var(--dk-body);
  box-shadow: inset 0 0 0 1px var(--dk-dim);
}
.dial-note { font-size: calc(12px * var(--ts)); color: var(--dk-faint); text-align: center; margin-bottom: 10px; }
input[type="range"].dial {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type="range"].dial::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px;
  background: linear-gradient(to right, var(--dk-dim) 0%, var(--dk-dim) var(--fill, 20%), var(--dk-b1) var(--fill, 20%), var(--dk-b1) 100%);
}
input[type="range"].dial::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 40px; border-radius: 999px;
  background: var(--dk-s4); border: 2px solid var(--dk-dim); margin-top: -18px;
  box-shadow: 0 0 0 2px var(--dk-bg);
}
input[type="range"].dial::-moz-range-track { height: 4px; border-radius: 3px; background: var(--dk-b1); }
input[type="range"].dial::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--dk-dim); }
input[type="range"].dial::-moz-range-thumb {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--dk-s4); border: 2px solid var(--dk-dim);
  box-shadow: 0 0 0 2px var(--dk-bg);
}
.rv-top { justify-content: space-between; gap: 12px; }
.reveal-film-link {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: from-font; position: relative;
}
.reveal-film-link::after { content: ''; position: absolute; inset: -8px -4px; }
.band.scrub-q {
  margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: calc(22px * var(--ts)); line-height: 1.15; letter-spacing: -0.01em;
  text-transform: none; color: var(--color-text); padding: 4px 0 12px;
  text-wrap: balance;
}
.scrub-log { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scrub-num {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; pointer-events: none;
  font-size: calc(96px * min(var(--ts), 20.5 / 17.5)); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: var(--dk-peak);
  text-shadow: 0 0 18px var(--color-bg), 0 0 40px var(--color-bg), 0 0 64px var(--color-bg);
}
.scrub-num .dial-u { font-size: 0.3em; font-weight: 600; color: var(--dk-dim); letter-spacing: 0; margin: 0 0.16em 0 0.05em; }
.scrub-num .dial-u:last-child { margin-right: 0; }
.scrub-num .dial-window {
  display: inline-grid; overflow: hidden;
  padding-block: 0.2em; margin-block: -0.2em;
  mask-image: linear-gradient(to bottom, transparent, #000 14.3%, #000 85.7%, transparent);
}
.scrub-num .dial-digit { display: block; position: relative; }
.scrub-num .dial-digit::before { content: attr(data-from); position: absolute; left: 0; top: -100%; }
.scrub-num .dial-digit[data-down]::before { top: 100%; }
.beat.ghost { --beat-row-pad: 7px; --beat-node-centre: 9px; }
.beat.ghost .beat-x { height: 18px; }
.reveal-scroll .beat.ghost .beat-rail::after {
  width: 6px; height: 6px; margin-left: -3px; top: calc(var(--beat-node-centre) - 3px);
  background: var(--dk-dim);
}
.beat.seen .beat-x, .beat.seen .beat-rail { opacity: 0.4; }
.scrub-foot { flex: none; margin-top: 12px; display: flex; flex-direction: column; }
.scrub-track { position: relative; height: 44px; }
.scrub-track .dial { position: relative; z-index: 1; display: block; }
.scrub-track .dial:active::-webkit-slider-thumb { border-color: var(--dk-peak); }
.scrub-track .dial:active::-moz-range-thumb { border-color: var(--dk-peak); }
.scrub-tick {
  position: absolute; top: 15px; width: 2px; height: 14px; margin-left: -1px;
  border-radius: 1px; background: var(--dk-b2);
}
.scrub-was {
  position: absolute; top: 15px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 999px; border: 1.5px solid var(--dk-faint); background: var(--color-bg);
}
.scrub-scale {
  position: relative; height: calc(18px * var(--ts)); margin-top: 2px;
  font-size: calc(11px * var(--ts)); color: var(--dk-faint);
}
.scrub-end { position: absolute; left: 0; top: 1px; }
.scrub-end-r { left: auto; right: 0; }
:root[data-text="largest"] .scrub-scale { height: calc(36px * var(--ts)); }
:root[data-text="largest"] .scrub-end { top: calc(18px * var(--ts)); }
.scrub-mark {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: calc(14px * var(--ts)); font-weight: 700; line-height: 1.2; color: var(--dk-dim);
}
.scrub-foot .dial-note { margin: 8px 0 0; }
.scrub-go { margin-top: 10px; }
.scrub-go:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rv-grip {
  flex: none; align-self: center; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 88px; height: 34px; margin-top: 10px; color: var(--dk-faint);
  touch-action: none;
}
.rv-grip::after { content: ''; position: absolute; inset: -5px 0; }
.rv-grip svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rv-grip-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--dk-b2); }
.rv-grip > svg, .rv-grip > .rv-grip-bar {
  transform: translate3d(0, var(--grip-y, 0px), 0);
  transition: transform 360ms cubic-bezier(.2, 1.6, .35, 1);
}
.rv-grip.grip-pulled > svg, .rv-grip.grip-pulled > .rv-grip-bar { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-grip > svg, .rv-grip > .rv-grip-bar { transition: none; }
}
.rv-grip + .footer60 { margin-top: 8px; }
.rv-grip.on { margin: 0 0 6px; }
.rv-grip:active { color: var(--dk-dim); }
#app.grip-touch .rv-grip:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .rv-grip:hover { color: var(--dk-dim); }
}
@media (orientation: landscape) and (max-height: 519px) {
  .scr-reveal {
    display: grid; grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    column-gap: 16px;
    padding:
      calc(10px + var(--sa-t)) max(calc(22px + var(--sa-r)), calc((100% - 560px * var(--ts)) / 2))
      calc(10px + var(--sa-b)) max(calc(22px + var(--sa-l)), calc((100% - 560px * var(--ts)) / 2));
  }
  .scr-reveal > * { grid-column: 1 / -1; min-width: 0; }
  .scr-reveal > .rv-top { display: contents; }
  .scr-reveal .scr-back {
    grid-area: 1 / 1; align-self: center; justify-self: start;
    white-space: nowrap; line-height: 1.25; padding: 0;
  }
  .scr-reveal .scr-back::after { inset: -13px -6px; }
  .scr-reveal .pos-timer-slot { grid-area: 1 / 3; align-self: center; justify-self: end; }
  .scr-reveal > .reveal-film { grid-area: 1 / 2; }
  .scr-reveal > .band { grid-row: 2; padding-bottom: 6px; line-height: 1.3; }
  .scr-reveal > .band.scrub-q { padding: 0 0 4px; line-height: 1.15; }
  .scr-reveal > .empty-note { grid-row: 3; }
  .scr-reveal > .reveal-scroll, .scr-reveal > .starved, .scr-reveal > .scrub-log { grid-row: 4; }
  .scr-reveal > .rv-grip { grid-row: 5; justify-self: center; height: 28px; margin-top: 6px; }
  .scr-reveal > .footer60, .scr-reveal > .scrub-foot { grid-row: 6; }
  .rv-grip::after { inset: -8px 0; }
  .rv-grip.on { height: 28px; margin-bottom: 6px; }
  .f60 { height: 48px; }
  .scrub-log { container-type: size; }
  .scrub-num { font-size: min(calc(96px * min(var(--ts), 20.5 / 17.5)), 75cqh); }
  .scrub-foot { margin-top: 4px; }
  .scrub-scale, :root[data-text="largest"] .scrub-scale { height: calc(13.5px * var(--ts)); }
  :root[data-text="largest"] .scrub-end { top: 1px; }
  .scrub-foot .dial-note { margin-top: 4px; line-height: 1.3; }
}
.who { padding: 12px 2px; border-bottom: 1px solid var(--dk-hair); }
.who-n { font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--dk-peak); letter-spacing: 0.02em; }
.who-d { font-size: calc(13px * var(--ts)); color: var(--dk-dim); line-height: 1.45; margin-top: 2px; }
.who-foot { font-size: calc(12px * var(--ts)); color: var(--dk-faint); text-align: center; padding-top: 12px; line-height: 1.5; }
.card, .dialog { border: 1px solid var(--dk-b1); }
.dialog-backdrop { background: rgba(0, 0, 0, 0.72); }
.btn-primary, .btn-primary:hover, .btn-primary:active {
  background: var(--dk-s4); border-color: var(--dk-b3); color: var(--dk-hi);
}
.btn:active { box-shadow: inset 0 0 0 1px var(--dk-dim); }
.btn-primary:active { background: var(--dk-active-2); }
.btn-secondary { color: var(--dk-dim); }
.dialog {
  width: min(380px, 100%); padding: 22px; gap: 12px; border-radius: 24px;
  max-height: calc(100dvh - 36px); overflow-y: auto;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6);
}
.dialog-title { line-height: 1.2; }
.dialog-body { line-height: 1.5; overflow-wrap: anywhere; }
.dialog-actions { gap: 12px; margin-top: 12px; }
.dialog-actions .btn { flex: 1; min-width: 0; min-height: 48px; text-align: center; }
:root[data-text="larger"] .dialog-actions, :root[data-text="largest"] .dialog-actions { flex-direction: column; }
.lt-scr {
  display: flex; flex-direction: column; height: 100%;
  container-type: inline-size;
  padding: calc(26px + var(--sa-t)) calc(22px + var(--sa-r)) calc(26px + var(--sa-b)) calc(22px + var(--sa-l));
  background: var(--color-bg); overflow-y: auto; position: relative;
  overscroll-behavior: contain;
  scroll-padding-top: var(--sa-t);
  scroll-padding-bottom: calc(88px + var(--sa-b));
}
.lt-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.lt-kicker { font-size: calc(11px * var(--ts)); letter-spacing: 0.26em; color: var(--color-neutral-600); font-weight: 700; }
.lt-sign { margin: 0 0 18px; }
.lt-reel svg { display: block; width: 100%; height: auto; }
.lt-reel { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--dk-b1); }
.lt-reel-caps {
  margin: 0; padding: 7px 2.3% 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%;
  font-size: calc(11.5px * var(--ts)); line-height: 1.3; text-align: center;
  color: var(--dk-dim); text-wrap: balance;
}
.lt-reel-caps .hot { color: var(--color-text); font-weight: 700; }
.lt-back {
  align-self: flex-start; font-size: calc(13px * var(--ts)); color: var(--color-accent-700); padding: 0 0 8px;
  position: relative;
}
.lt-back::after { content: ''; position: absolute; inset: -12px 0 -4px; }
.lt-h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  letter-spacing: -0.015em; font-size: calc(27px * var(--ts)); line-height: 1.15;
  color: var(--color-text); margin: 0 0 8px;
}
.lt-reel + .lt-h1, .lt-reel + .lt-body > .lt-h1,
.lt-sign + .lt-body > .lt-h1 {
  margin-bottom: 20px;
  font-size: min(calc(25px * var(--ts)), 7.6cqi);
  white-space: nowrap;
}
.lt-sign + .lt-body > .lt-h1 { margin-top: 8px; }
.lt-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.lt-body.lt-finding { min-height: calc(100% + 26px - 14px - 76px); }
.lt-sect {
  font-size: calc(12px * var(--ts)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin: 6px 0 8px;
  font-family: inherit; line-height: inherit;
}
.lt-dock {
  position: sticky; bottom: calc(-26px - var(--sa-b));
  margin: 14px calc(-22px - var(--sa-r)) calc(-26px - var(--sa-b)) calc(-22px - var(--sa-l));
  padding: 20px calc(22px + var(--sa-r)) calc(18px + var(--sa-b)) calc(22px + var(--sa-l));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg) 20px);
}
.lt-dock > .lt-find { padding: 0; }
.lt-find-pill {
  position: relative; width: 100%; min-height: 50px; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px; padding: 0 15px;
  font-size: calc(16px * var(--ts)); color: var(--color-neutral-600);
  background: linear-gradient(180deg, #100a06, #0b0704);
  border: 1px solid var(--dk-b2); border-radius: 999px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}
.lt-find-pill svg {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; color: var(--color-neutral-500);
}
@media (hover: hover) and (pointer: fine) {
  .lt-find-pill:hover { border-color: var(--dk-b3); }
}
.lt-row {
  --tk-corner: 8px;
  --tk-notch: 6px;
  --tk-stub: calc(19px + 14px * var(--ts));
  --tk-ground: var(--color-surface);
  --tk-rim: var(--color-accent-300);
  --tk-tear: #4a3219;
  --tk-wash: rgba(174, 129, 78, 0.055);
  --tk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.71 0 0 0 0 0.46 0 0 0 0.08 -0.025'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  position: relative; isolation: isolate;
  width: 100%; margin-bottom: 8px;
  padding: 16px calc(var(--tk-stub) + 8px) 16px 17px;
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 0;
  background: none; border: 0; border-radius: 0;
}
.lt-row::before, .lt-row::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  --xl: 0px; --xn: calc(100% - var(--tk-stub)); --y0: 0px; --y1: 100%; --rr: var(--tk-notch);
  -webkit-mask:
    radial-gradient(circle at var(--xl) var(--y0), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--xl) var(--y1), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at var(--xn) var(--y0), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--xn) var(--y1), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--xl) var(--y0), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--xl) var(--y1), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at var(--xn) var(--y0), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--xn) var(--y1), #0000 var(--rr), #000 calc(var(--rr) + 0.6px)) 100% 100% / 51% 51% no-repeat;
}
.lt-row::before {
  inset: 0; border-radius: 0 var(--tk-corner) var(--tk-corner) 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tk-rim) 80%, #755330), var(--tk-rim) 42%, color-mix(in srgb, var(--tk-rim) 80%, #000));
}
.lt-row::after {
  inset: 1px; border-radius: 0 calc(var(--tk-corner) - 1px) calc(var(--tk-corner) - 1px) 0;
  --xl: -1px; --xn: calc(100% + 1px - var(--tk-stub)); --y0: -1px; --y1: calc(100% + 1px); --rr: calc(var(--tk-notch) + 1px);
  background:
    var(--tk-grain) 0 0 / 180px 180px,
    linear-gradient(90deg, #0000 var(--xn), var(--tk-wash) var(--xn)),
    linear-gradient(180deg, var(--tk-ground), color-mix(in srgb, var(--tk-ground) 75%, #000));
}
.lt-row-stub {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--tk-stub);
  display: flex; align-items: center; justify-content: center;
}
.lt-row-perf {
  position: absolute; left: -0.5px; width: 1px;
  top: calc(var(--tk-notch) + 4px); bottom: calc(var(--tk-notch) + 4px);
  background: repeating-linear-gradient(var(--tk-tear) 0 2px, #0000 2px 6px);
}
.lt-row-go { font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--color-accent-700); line-height: 1; flex: none; }
.lt-row-go .arr { display: block; stroke-width: 2.1; }
@media (hover: hover) and (pointer: fine) {
  .lt-row:hover { --tk-ground: var(--color-neutral-200); }
}
.lt-row:active { --tk-ground: var(--color-neutral-300); --tk-rim: var(--color-accent-500); }
@media (prefers-reduced-motion: no-preference) {
  button.lt-row.lt-row-pressed { transform: scale(0.98); }
  button.lt-row.lt-row-pressed .lt-row-stub { transform: translateY(2px); }
}
.lt-row-live .lt-row-title { font-size: calc(15.5px * var(--ts)); }
.lt-row-now {
  --tk-ground: var(--dk-s2); --tk-rim: var(--dk-b3); --tk-tear: var(--color-accent-500);
  filter: drop-shadow(0 0 10px rgba(215, 154, 95, 0.1));
}
@media (hover: hover) and (pointer: fine) {
  .lt-row-now:hover { --tk-ground: var(--dk-s3); }
}
.lt-row-now:active { --tk-ground: var(--dk-s3); }
.lt-row-now .lt-row-title { color: var(--dk-hi); }
.lt-row-now .lt-row-sub { color: var(--dk-body); }
.lt-row-now .lt-row-go { color: var(--dk-hi); }
.lt-row-dead { --tk-rim: var(--color-divider); --tk-tear: #1d1309; --tk-wash: #0000; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .lt-row-dead:hover { --tk-ground: var(--color-surface); }
}
.lt-row-dead:active { --tk-ground: var(--color-surface); --tk-rim: var(--color-divider); }
.lt-row-dead .lt-row-title { font-weight: 500; color: var(--color-neutral-600); }
.lt-row-dead .lt-row-sub { color: var(--color-neutral-500); }
.lt-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lt-row-title { font-size: calc(14px * var(--ts)); font-weight: 600; overflow-wrap: break-word; }
.lt-row-sub {
  display: block; font-size: calc(12px * var(--ts)); color: var(--color-neutral-600); margin-top: 1px;
  height: calc(16px * var(--ts)); line-height: calc(16px * var(--ts));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-text="larger"] .lt-row-sub, :root[data-text="largest"] .lt-row-sub { height: auto; white-space: normal; overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  .beat.reveal-focus {
    animation: none;
    background: var(--dk-s4);
  }
}
.lt-soon { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--color-divider); }
.lt-soon-title { font-size: calc(13.5px * var(--ts)); color: var(--color-neutral-700); min-width: 0; }
.lt-soon-date { font-size: calc(12px * var(--ts)); color: var(--color-neutral-600); flex: none; }
.lt-soon-link {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: from-font; position: relative;
}
.lt-soon-link::after { content: ''; position: absolute; inset: -7px -4px; }
@media (hover: hover) and (pointer: fine) {
  .lt-soon-link:hover { color: var(--color-neutral-800); }
}
.lt-find { position: relative; padding: 0 0 14px; }
.lt-find-in, .sg-in {
  width: 100%; min-height: 50px; box-sizing: border-box; padding: 13px 15px;
  font: inherit; font-size: calc(16px * var(--ts)); line-height: 1.2;
  color: var(--color-neutral-900);
  background: linear-gradient(180deg, #100a06, #0b0704);
  border: 1px solid var(--dk-b2); border-radius: 999px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(215, 154, 95, 0.018);
  -webkit-appearance: none; appearance: none;
}
.lt-find > .lt-find-in { padding-left: 46px; padding-right: 46px; }
.lt-find-clear {
  position: absolute; z-index: 1; right: 3px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--color-neutral-500);
}
.lt-find-clear svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round;
}
@media (hover: hover) and (pointer: fine) {
  .lt-find-clear:hover { color: var(--color-neutral-700); }
}
.lt-find-mark {
  position: absolute; z-index: 1; left: 15px; top: 15px;
  width: 20px; height: 20px; color: var(--color-neutral-500);
  pointer-events: none;
}
.lt-find-mark svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round;
}
.lt-find-in::placeholder, .sg-in::placeholder { color: var(--color-neutral-500); }
.lt-find-in:focus, .sg-in:focus {
  outline: none; border-color: var(--dk-b3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.72),
    0 0 0 3px rgba(110, 74, 38, 0.18);
}
.lt-none { font-size: calc(13px * var(--ts)); color: var(--color-neutral-600); text-align: center; padding: 10px 0 2px; }
.lt-all { text-align: center; padding: 10px 0 2px; }
.lt-all .ub { font-size: calc(13px * var(--ts)); color: var(--color-accent-700); padding: 15px 10px; margin: -15px -10px; }
.lt-all .lt-foot-dot { font-size: calc(13px * var(--ts)); }
.lt-scr [hidden] { display: none !important; }
.lt-foot { font-size: calc(12px * var(--ts)); color: var(--color-neutral-600); text-align: center; line-height: 1.5; margin-top: auto; padding-top: 16px; }
.lt-foot-dot { padding: 0 7px; color: var(--color-neutral-500); }
.lt-foot-links { display: block; margin-top: 6px; white-space: nowrap; }
:root[data-text="larger"] .lt-foot-links, :root[data-text="largest"] .lt-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 24px; white-space: normal;
}
:root[data-text="larger"] .lt-foot-links .lt-foot-dot, :root[data-text="largest"] .lt-foot-links .lt-foot-dot { display: none; }
.lt-foot-settings, .lt-foot-suggest, .lt-foot-share {
  color: inherit; padding: 13px 6px; margin: -13px -6px;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .lt-foot-settings:hover, .lt-foot-suggest:hover, .lt-foot-share:hover { color: var(--color-accent-700); }
}
.set-row { padding: 14px 16px; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0; }
.set-row > div { min-width: 0; }
.set-row > .tag { flex: none; }
.set-title { font-size: calc(14px * var(--ts)); font-weight: 600; }
.set-sub { font-size: calc(12px * var(--ts)); color: var(--color-neutral-700); margin-top: 2px; }
.set-seg {
  flex: 0 0 100%; display: grid; gap: 10px 8px;
  grid-template-columns: repeat(auto-fit, minmax(max(calc(50% - 4px), calc(52px * var(--ts) + 32px)), 1fr));
}
.set-text .set-head { flex: 0 0 100%; }
.set-seg-b {
  font-size: calc(12px * var(--ts)); line-height: 1; padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--color-divider); color: var(--color-neutral-600);
  position: relative; text-align: center;
}
.set-seg-b::after { content: ''; position: absolute; inset: -5px 0; }
.set-seg-b.on {
  border-color: var(--color-accent-400); color: var(--color-accent-800);
  background: var(--color-accent-100); font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .set-seg-b:hover { color: var(--color-neutral-800); }
}
.set-text { flex-wrap: wrap; }
.set-preview { flex: 0 0 100%; }
.set-note {
  margin: 8px 2px 6px; font-size: calc(12px * var(--ts)); line-height: 1.55;
  color: var(--color-neutral-600);
}
.sg-form { display: flex; flex-direction: column; gap: 14px; }
.sg-label { font-size: calc(13px * var(--ts)); color: var(--color-neutral-700); }
.sg-in { margin-top: -8px; }
.sg-send { margin-top: 2px; }
.sg-done {
  font-size: calc(20px * var(--ts)); color: var(--color-text); margin: 6px 0 0;
}
.sg-fail { font-size: calc(13px * var(--ts)); color: var(--color-accent-700); margin: 0 2px; }
.set-acct {
  align-self: center; margin-top: 10px; padding: 10px 14px;
  font-size: calc(13px * var(--ts)); color: var(--color-neutral-600);
  text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
.set-acct::after { content: ''; position: absolute; inset: -5px 0 0; }
@media (hover: hover) and (pointer: fine) {
  .set-acct:hover { color: var(--color-neutral-800); }
}
.set-links {
  align-self: center; display: flex; gap: 10px; align-items: center;
  font-size: calc(12px * var(--ts)); color: var(--color-neutral-600);
}
.set-links a {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
.set-links a::after { content: ''; position: absolute; inset: -2px -6px -12px; }
@media (hover: hover) and (pointer: fine) {
  .set-links a:hover { color: var(--color-neutral-800); }
}
.set-del {
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
.set-del::after { content: ''; position: absolute; inset: -2px -6px -24px; }
@media (hover: hover) and (pointer: fine) {
  .set-del:hover { color: var(--color-neutral-800); }
}
.social-row {
  display: flex; justify-content: center; gap: 4px; margin-top: 10px;
  color: var(--color-neutral-600);
}
.set-social { align-self: center; }
.social-row > * { display: block; padding: 13px; color: inherit; }
.social-row svg {
  display: block; width: calc(18px * var(--ts)); height: calc(18px * var(--ts));
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.social-row .dot { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .social-row a:hover { color: var(--color-neutral-800); }
}
.lt-col { display: flex; flex-direction: column; gap: 10px; }
.mo-layer {
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  pointer-events: none; contain: layout style;
}
.mo-layer > *, .mo-hold > *, .mo-spot > *, .mo-pill > *, .mo-shape > *, .mo-glint > * {
  position: absolute; margin: 0; box-sizing: border-box; pointer-events: none;
}
.mo-glow {
  background: radial-gradient(closest-side, rgba(215, 154, 95, 0.09), transparent 70%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dk-peak) 9%, transparent), transparent 70%);
}
.mo-glint { overflow: hidden; border-radius: 999px; }
.mo-glint-band {
  background: linear-gradient(90deg, transparent, rgba(215, 154, 95, 0.18), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dk-peak) 18%, transparent), transparent);
}
.mo-face { border-style: solid; }
.mo-pill > .mo-label { background: transparent; border-color: transparent; box-shadow: none; white-space: nowrap; }
.mo-ring { border-radius: 50%; border: 1.5px solid var(--dk-dim); }
input[type="range"].dial.dial-hint::-webkit-slider-thumb { opacity: 0; }
input[type="range"].dial.dial-hint::-moz-range-thumb { opacity: 0; }
.mo-dial-hint {
  border-radius: 999px; background: var(--dk-s4);
  border: 2px solid var(--dk-dim); box-shadow: 0 0 0 2px var(--dk-bg);
}
.mo-line { border-radius: 3px; background: var(--dk-b1); }
.mo-line-fill { background: var(--dk-dim); }
.mo-spine { transform-origin: 50% 0; }
.beat-rail::before { transform-origin: 50% 0; }
.mo-dot { border-radius: 50%; }
.mo-lobby, .mo-screen { display: flex; flex-direction: column; }
.mo-layer > .mo-rows { overflow: visible; padding: 0; margin: 0; }
.mo-layer > .mo-strip { overflow: hidden; padding: 0; margin: 0; }
.beat.mo-menu { background: transparent; border-bottom-color: transparent; z-index: 0; }
.beat > .mo-ground {
  position: absolute; top: 0; left: 0; right: 0; z-index: -1;
  transform-origin: 50% 0; pointer-events: none;
}
.beat > .mo-rule { position: absolute; left: 0; right: 0; pointer-events: none; }
.beat > .mo-gone {
  position: absolute; grid-column: auto; grid-row: auto; margin: 0;
  box-sizing: border-box; pointer-events: none;
}
.mo-layer > .mo-clip { overflow: hidden; }
.mo-clip > * { position: absolute; margin: 0; box-sizing: border-box; pointer-events: none; }