[hidden] { display: none !important; }
/* Each font a subset woff2 beside its OFL in fonts/ui/. */
@font-face { font-family: Inter; src: url(fonts/ui/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url(fonts/ui/oldstandard-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Gelasio; src: url(fonts/ui/gelasio.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Gelasio; src: url(fonts/ui/gelasio-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
:root {
--night: #1e1c1a;
--night-deep: #121110;
--white: #f7f5f2;
--cream: #f3eadb;
--seal-lit: #bf4f36;
--font-ui: Inter, system-ui, sans-serif;
--chevron: url("data:image/svg+xml,");
--check: url("data:image/svg+xml,");
}
html, body { margin: 0; height: 100%; background: var(--night-deep); color: var(--white); overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { display: flex; align-items: center; justify-content: center; font: 15px/1.4 var(--font-ui); -webkit-user-select: none; user-select: none; }
button, select { box-sizing: border-box; background: none; color: inherit; border: 0; border-radius: 999px; height: 44px; min-width: 44px; padding: 0 10px; font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
svg.i { display: block; width: 22px; height: 22px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.i .fine { stroke-width: 1.1; opacity: .8; }
/* Landscape: the largest 16:9 frame that fits, the text box over its lower part. */
#screen { position: relative; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; touch-action: manipulation; --fh: min(100dvh, 56.25vw); }
#frame { position: absolute; inset: 0; overflow: hidden; background: #000; }
.sight, .world, .view, .bgs, .behind, .fronts, .sprites, .fx, .split, .pics, .cast, .split-shade { position: absolute; inset: 0; }
.view { transform-origin: 0 0; }
.fx { pointer-events: none; }
.bgs img, .pics img, .fronts img, .behind > img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.incoming { position: absolute; inset: 0; display: none; }
.incoming img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.bgs > div, .pics > div, .fronts > div, .bgs > div > div, .pics > div > div, .fronts > div > div, .tint { position: absolute; inset: 0; }
.bgs > div, .pics > div, .fronts > div { isolation: isolate; }
.fronts > div { mask-repeat: no-repeat; }
.grain { position: absolute; mix-blend-mode: overlay; image-rendering: pixelated; pointer-events: none; }
.bgs .grain, .pics .grain, .fronts .grain, .behind > .grain { inset: auto; left: 0; top: 0; transform-origin: 0 0; }
.behind > .grain, .spr .grain, .cut-pic .grain { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.spr .grain, .cut-pic .grain { inset: 0; }
.cut-pic { isolation: isolate; }
.tint { mix-blend-mode: multiply; display: none; }
.spr { position: absolute; left: 0; bottom: 0; isolation: isolate; transform-origin: 50% 100%; }
.spr > div { position: absolute; bottom: 0; transform-origin: 50% 100%; isolation: isolate; }
.spr > div > div { position: absolute; inset: 0; isolation: isolate; }
.spr.dissolve > div, .spr > div.mix > * { mix-blend-mode: plus-lighter; }
.spr img { position: absolute; inset: 0; width: 100%; height: 100%; }
.split, .split-shade, .split-gutter { display: none; pointer-events: none; }
.split-gutter { position: absolute; left: 0; top: 0; height: 100%; background: var(--cream); transform-origin: 50% 0; }
.sparks, .flash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flash { background: radial-gradient(circle, #fffaf0 40%, rgba(255, 250, 240, .8)); opacity: 0; }
/* The title card: the chapter's number over a rule, its title under it, the rule's gap where ⏯ lands. */
.card { --gap: calc(clamp(52px, var(--fh) * .23, 96px) / 2 + var(--fh) * .03); position: absolute; inset: 0; display: none; grid-template-rows: 1fr calc(var(--gap) * 2) 1fr; justify-items: center; padding: 0 10%; text-align: center; color: #fff; background: radial-gradient(ellipse 80% 75% at 50% 50%, #2a2724, var(--night) 60%, var(--night-deep)); }
.card.on { display: grid; }
.card div:first-child { grid-row: 1; align-self: end; font: 600 calc(var(--fh) * .036)/1.2 var(--font-ui); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(247, 245, 242, .62); }
.card::before { content: ""; grid-row: 2; align-self: center; width: calc(var(--fh) * 16 / 9 * .44); height: 100%; background: linear-gradient(90deg, transparent, rgba(247, 245, 242, .32)) left center / calc(50% - var(--gap)) 1px no-repeat, linear-gradient(270deg, transparent, rgba(247, 245, 242, .32)) right center / calc(50% - var(--gap)) 1px no-repeat; }
.card::after { content: "Harry Potter and the Methods of Rationality"; position: absolute; left: 0; right: 0; bottom: 8%; color: rgba(247, 245, 242, .5); font: 400 calc(var(--fh) * .032)/1.2 var(--font-ui); letter-spacing: .04em; }
.card div:last-child { grid-row: 3; align-self: start; max-width: 15em; font: 700 calc(var(--fh) * .084)/1.08 "Old Standard", Georgia, serif; text-wrap: balance; }
/* The text box holds 2 rows; a line taller than that scrolls (stage.js). Its text is sized from 6.8% of the frame's
height, and sideways it stays in the frame's bottom quarter, under the sprites' gestures (the landscape block). */
#textbox { position: absolute; left: 0; right: 0; bottom: 0; padding: .25em .7em .35em; background: linear-gradient(rgba(30, 28, 26, .8), rgba(20, 19, 18, .86)); color: var(--cream); font: 17px/1.4 Georgia, Gelasio, serif; font-size: min(6.8dvh, 3.825vw, 48px); }
#textbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(247, 245, 242, .22) 12%, rgba(247, 245, 242, .22) 88%, transparent); pointer-events: none; }
#textbox.off { visibility: hidden; }
#textbox .name { position: absolute; bottom: 100%; left: calc(.7em / .55); white-space: nowrap; padding: .15em .75em; border-radius: 6px 6px 0 0; background: rgba(30, 28, 26, .92); box-shadow: inset 0 1px 0 rgba(247, 245, 242, .25); font: 600 .55em/1.6 var(--font-ui); letter-spacing: .01em; }
#textbox .name:empty { display: none; }
#textbox.speaking:not(.thought) .name { background: var(--speaker); color: #120c06; box-shadow: none; }
#textbox.speaking.thought .name { box-shadow: inset 0 0 0 2px var(--speaker); font-style: italic; font-weight: 500; }
@supports (color: oklch(from red max(l, .84) c h)) { #textbox.speaking .said { color: oklch(from var(--speaker) max(l, .84) c h); } }
#textbox .text { height: calc(2 * 1.4em); overflow: hidden; margin: 0 -.3em; padding: 0 .3em; text-align: center; }
/* Sideways, the page reads a pinch itself, unless the page was zoomed upright and must be zoomed out. Filled by one, the 16:9 frame is wider or taller than the
screen, centred, with the text box and controls against the screen's edges. */
@media (orientation: landscape) {
body:not(.zoomed) #screen { touch-action: none; }
body.fill #screen { width: 100vw; height: 100dvh; aspect-ratio: auto; overflow: hidden; --fh: 100dvh; }
body.fill #frame { --w: max(100vw, calc(100dvh * 16 / 9)); inset: auto; width: var(--w); height: calc(var(--w) * 9 / 16); left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) * 9 / 32); }
/* The words over a scrim, clear at its top and as dark as the box from the first row down, the name a pill (hv-i45h);
or, with Settings' box, an inset box. */
body:not(.boxed) #textbox { padding: 1.3em 1.2em .45em; font-size: calc(.8 * min(6.8dvh, 3.825vw, 48px)); background: linear-gradient(transparent, rgba(12, 11, 10, .5) .75em, rgba(12, 11, 10, .72) 1.3em, rgba(12, 11, 10, .8)); text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 4px #000, 0 0 12px rgba(0, 0, 0, .8); }
#textbox::before { display: none; }
body:not(.boxed) #textbox .name { top: calc(.2em / .64); bottom: auto; left: calc(1.2em / .64); padding: .1em .85em .12em; border-radius: 999px; font-size: .64em; line-height: 1.4; text-shadow: none; box-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
body:not(.boxed) #textbox.speaking:not(.thought) .name { box-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
body:not(.boxed) #textbox.speaking.thought .name { box-shadow: inset 0 0 0 2px var(--speaker), 0 1px 8px rgba(0, 0, 0, .55); }
body:not(.boxed) #textbox .silence { top: 1.3em; }
body.boxed #textbox { left: 6%; right: 6%; bottom: 3%; border-radius: 12px; padding: .3em .9em .4em; font-size: calc(.85 * min(6.8dvh, 3.825vw, 48px)); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
body.boxed #textbox .name { left: calc(.9em / .55); }
body.boxed #textbox .silence { top: .3em; }
}
/* Portrait: the frame at full width on top, the text panel underneath, which covers the page's black (shoot --bare
hides it, and the goldens were blessed on black). The title card's rows close in on ⏯, and on a phone the top row
and the scrub bar sit higher (below), so "CHAPTER 1" clears the scrub bar 360px wide or more. */
@media (orientation: portrait) {
body { display: block; }
#screen { width: 100vw; height: 100dvh; aspect-ratio: auto; display: flex; flex-direction: column; --fh: 56.25vw; }
#frame { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; flex: none; }
#textbox { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .4em .7em; background: linear-gradient(#22201e, var(--night) 60%); font-size: min(6vw, 32px); }
html, body { background: #000; }
#textbox .name { position: static; align-self: flex-start; margin: .25em 0 .2em; padding: .1em .7em .12em; border-radius: 6px; }
#textbox .text { flex: 1; height: auto; }
.card { --gap: calc(clamp(52px, var(--fh) * .23, 96px) / 2 + 4px); }
}
#controls { --u: clamp(16px, calc(var(--fh) * .023), 24px); position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: calc(var(--u) * .4) max(calc(var(--u) * .75), env(safe-area-inset-right)) calc(var(--u) * 1.6) max(calc(var(--u) * .75), env(safe-area-inset-left)); font-size: var(--u); background: linear-gradient(rgba(18, 17, 16, .78), rgba(18, 17, 16, .45) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.controls #controls, #controls:has(:focus-visible) { opacity: 1; }
body.controls #controls > *, #controls:has(:focus-visible) > * { pointer-events: auto; }
#controls .row { display: flex; gap: 2px; align-items: center; }
#speed:focus-visible, #open-chapters:focus-visible { outline-offset: -3px; }
#time { margin-right: auto; padding-left: .25em; font: 500 1.05em/1 var(--font-ui); letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#speed { -webkit-appearance: none; appearance: none; field-sizing: content; height: max(44px, calc(var(--u) * 2.75)); margin: 0 2px; padding: 0 1.45em 0 .8em; border: solid transparent; border-width: 5px 2px; background: rgba(255, 255, 255, .1) var(--chevron) right .6em center / .7em no-repeat padding-box; font: 500 .95em/1 var(--font-ui); color-scheme: dark; }
#speed option { background: var(--night); color: var(--white); }
#open-chapters { display: inline-flex; align-items: center; height: max(44px, calc(var(--u) * 2.75)); margin-right: 2px; padding: 0 .8em 0 .7em; border: solid transparent; border-width: 5px 2px; background: rgba(255, 255, 255, .1) padding-box; font: 500 .95em/1 var(--font-ui); white-space: nowrap; }
#controls .row button:not(#open-chapters) { width: calc(var(--u) * 2.75); height: calc(var(--u) * 2.75); padding: 0; }
#controls svg.i { width: calc(var(--u) * 1.375); height: calc(var(--u) * 1.375); }
#fs .exit, :root:fullscreen #fs .enter { display: none; }
:root:fullscreen #fs .exit { display: inline; }
@media (max-width: 480px) {
#speed { margin: 0; padding: 0 22px 0 10px; background-position: right 7px center; }
#open-chapters { margin-right: 0; padding: 0 10px; }
}
@media (max-width: 380px) {
#controls { padding-left: 8px; padding-right: 8px; }
#time { padding-left: 2px; }
#speed { padding: 0 17px 0 8px; background-position: right 5px center; }
#open-chapters { padding: 0 8px; }
}
/* The scrub bar: a thin white thread, its played part the seal's red, the thumb white. Chromium has no played-part
pseudo-element, so the thumb paints it, a 4px band from its centre 100vw to the left (border-image outset), cut at
the bar's start by the input's overflow. */
#scrub { --track: rgba(255, 255, 255, .28); --played: var(--seal-lit); --thumb: max(16px, calc(var(--u) * .8)); -webkit-appearance: none; appearance: none; display: block; width: 100%; height: calc(var(--u) * 1.6); margin: 0; background: none; overflow: hidden; cursor: pointer; }
#scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--track); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc(2px - var(--thumb) / 2); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); border-image: linear-gradient(90deg, var(--played) calc(100% - var(--thumb)), transparent 0) fill 0 / calc(50% - 2px) 0 / 0 0 0 100vw; }
#scrub::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
#scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--played); }
#scrub::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#scrub:focus-visible { outline-offset: -2px; border-radius: 6px; }
@media (pointer: coarse) { #scrub { height: 44px; margin: -6px 0 -10px; --thumb: 18px; } }
@media (orientation: portrait) and (pointer: coarse) { #controls { padding-top: 2px; } #scrub { margin-top: -10px; } }
body.limit #scrub { display: none; }
button:disabled { opacity: .35; }
/* The main volume, on a desktop only (app.js): the speaker leads the icons, and while it's hovered, held or focused by
keyboard it sits at the top of a grey capsule that drops under it, holding Settings' slider turned upright, loud at
the top, and the level. The capsule takes the pointer a moment after it fades, so a slip outside it can come back. */
#controls .vol { position: relative; display: flex; }
#mute { position: relative; z-index: 1; }
#mute .w1, #mute .w2, #mute .x { display: none; }
#mute[data-level="1"] .w1, #mute[data-level="2"] :is(.w1, .w2), #mute[data-level="0"] .x { display: inline; }
#mute:focus-visible { outline-offset: -3px; }
.vol .pop { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--u) * 10.75); border-radius: 999px; background: rgba(30, 28, 26, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 16px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .15s .1s, pointer-events 0s .25s allow-discrete; }
.vol:is(:hover, :active, :has(:focus-visible)) .pop { opacity: 1; pointer-events: auto; transition-delay: 0s; }
.vol .pop:has(:focus-visible) { outline: 2px solid var(--white); outline-offset: 2px; }
.vol .pop span { position: absolute; left: 0; right: 0; top: calc(var(--u) * 9.2); font: 500 .7em/1 var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; color: rgba(255, 255, 255, .75); }
#volume { --track: rgba(255, 255, 255, .28); --played: #fff; --thumb: max(12px, calc(var(--u) * .7)); -webkit-appearance: none; appearance: none; position: absolute; left: 50%; top: calc(var(--u) * 6.3); width: calc(var(--u) * 4.6); height: calc(var(--u) * 1.6); margin: 0; padding: 0; translate: -50% -50%; rotate: -90deg; background: none; overflow: hidden; cursor: pointer; }
#volume:focus-visible { outline: none; }
/* Back, play and forward across the middle of the picture, the skips at a fifth and four fifths of
its width, inside gestures.js's side zones, shown with the controls and sized from the height of
the frame on screen, --fh. A step shows its icon, `.on`, and its label under it, even while the rest is hidden.
A toggle of ⏯ pops its new icon in and sends a ring out, two keyframe pairs alternated by `.playing`. */
#transport { --skip: clamp(44px, calc(var(--fh) * .15), 68px); --play: clamp(52px, calc(var(--fh) * .23), 96px); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(30% - var(--play) / 2 - var(--skip) / 2); pointer-events: none; }
#transport > * { opacity: 0; transition: opacity .2s; }
body.controls #transport button, #transport:has(:focus-visible) button, #transport .on { opacity: 1; }
#transport .on { transition: none; }
body.controls #transport button, #transport:has(:focus-visible) button { pointer-events: auto; }
#transport button { --s: var(--skip); position: relative; width: var(--s); min-width: 0; height: var(--s); padding: 0; border-radius: 50%; background: rgba(30, 28, 26, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; }
#transport svg { display: block; width: 58%; height: 58%; margin: auto; fill: currentColor; }
#transport .ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#transport #play { --s: var(--play); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); transition: opacity .2s, background-color .15s, scale .12s; }
#transport #play:active { scale: .92; }
#transport #play svg { width: 44%; height: 44%; animation: play-icon-a .32s cubic-bezier(.3, 1.6, .5, 1); }
#transport #play.playing svg { animation-name: play-icon-b; }
#play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); opacity: 0; pointer-events: none; animation: play-ring-a .38s ease-out; }
#play.playing::after { animation-name: play-ring-b; }
@keyframes play-icon-a { 0% { scale: .5; opacity: .2; } 100% { scale: 1; opacity: 1; } }
@keyframes play-icon-b { 0% { scale: .5; opacity: .2; } 100% { scale: 1; opacity: 1; } }
@keyframes play-ring-a { 0% { scale: 1; opacity: .9; } 100% { scale: 1.35; opacity: 0; } }
@keyframes play-ring-b { 0% { scale: 1; opacity: .9; } 100% { scale: 1.35; opacity: 0; } }
#transport button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
#forward[aria-disabled=true] svg { opacity: .35; }
#transport .label { position: absolute; top: calc(50% + var(--skip) / 2 + 8px); translate: -50% 0; padding: .2em .75em .25em; border-radius: 999px; background: rgba(30, 28, 26, .82); font: 500 clamp(15px, calc(var(--fh) * .022), 20px)/1.2 var(--font-ui); white-space: nowrap; }
#transport .label:empty { display: none; }
#back-label { left: 20%; }
#forward-label { left: 80%; }
#play .to-pause, #play.playing .to-play { display: none; }
#play.playing .to-pause { display: inline; }
body.waiting #play { visibility: hidden; }
#spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #282624 0 19px, transparent 19.5px), conic-gradient(from 0deg, rgba(255, 255, 255, .12) 0 15%, rgba(255, 255, 255, .95)), rgba(30, 28, 26, .62); animation: spin .9s linear infinite; }
body.waiting #spinner { display: block; }
#failed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(24rem, 80%); margin: 0; padding: 1em 1.4em; border-radius: 12px; background: rgba(30, 28, 26, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 30px rgba(0, 0, 0, .5); font: 500 16px/1.5 var(--font-ui); text-align: center; display: none; }
body.failed #failed { display: block; }
@media (orientation: portrait) { #failed { padding: .6em 1em; font-size: 14px; } }
body.failed #spinner, body.failed #transport { display: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#debug { position: absolute; left: 6px; bottom: 6px; margin: 0; padding: 4px 6px; background: rgba(0, 0, 0, .7); font: 11px/1.3 ui-monospace, monospace; pointer-events: none; }
.panel { position: fixed; inset: 0; box-sizing: border-box; overflow-y: auto; padding: 0 max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left)); background: var(--night); color: var(--white); font: 17px/1.55 var(--font-ui); -webkit-user-select: text; user-select: text; color-scheme: dark; }
.panel :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.panel::before { content: ""; position: sticky; top: 0; z-index: 1; display: block; height: 64px; margin: 0 -20px -64px; background: var(--night); -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); pointer-events: none; }
.panel .close { position: sticky; top: 14px; float: right; z-index: 2; margin-top: 14px; width: 44px; padding: 0; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; }
.panel .close svg.i { width: 20px; height: 20px; }
.panel h1 { margin: 0 0 28px; padding-top: 62px; color: #fff; font: 700 1.75rem/1.1 var(--font-ui); letter-spacing: -.01em; text-align: center; }
.panel ol, .panel ul { max-width: 34rem; margin: 0 auto; padding: 0; list-style: none; }
.panel > button:not(.close) { display: flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px; height: auto; margin: 28px auto 0; padding: .55rem 1.4rem; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font: 600 1rem/1.2 var(--font-ui); }
.panel a { color: #fff; }
#chapters li + li { margin-top: 10px; }
#chapters li button { display: grid; grid-template-columns: 3.6rem 1fr; column-gap: 1rem; align-items: center; width: 100%; height: auto; min-height: 64px; padding: 8px; border-radius: 8px; color: #fff; text-align: left; font: 600 1.15rem/1.25 var(--font-ui); }
#chapters b { grid-row: 1 / 3; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); font: 600 1.4rem/1 var(--font-ui); }
#chapters li button[aria-current] { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
#chapters li button[aria-current] b { background: var(--white); color: var(--night); }
#chapters li button[aria-current]::after { content: "Playing"; grid-column: 2; margin-top: 3px; color: rgba(255, 255, 255, .68); font: 400 .9rem/1.2 var(--font-ui); }
#backlog h1 { margin-bottom: 20px; }
#backlog li { position: relative; padding: 12px 14px; border-radius: 6px; cursor: pointer; text-wrap: pretty; }
#backlog li + li { border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; }
#backlog li:first-child { padding-bottom: 18px; color: rgba(255, 255, 255, .66); font: 400 1.05rem/1.4 var(--font-ui); text-align: center; }
#backlog li:last-child { box-shadow: inset 3px 0 0 var(--white); background: rgba(255, 255, 255, .08); }
#backlog b { display: block; margin-bottom: 2px; color: rgba(255, 255, 255, .66); font: 600 .75rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
#settings > :not(.close, h1) { max-width: 30rem; margin-left: auto; margin-right: auto; }
#settings .volume { display: flex; align-items: center; gap: 16px; min-height: 52px; margin-top: 4px; margin-bottom: 4px; }
#settings label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
#settings .volume label { flex: none; width: 9.2em; min-height: 44px; }
#settings > label { align-items: flex-start; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); line-height: 1.45; }
#settings input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); cursor: pointer; }
#settings > label input[type=checkbox] { margin-top: 1px; }
#settings input[type=checkbox]:checked { background: var(--check) center / 18px no-repeat, var(--white); box-shadow: none; }
#settings input[type=range] { --track: rgba(255, 255, 255, .25); --played: var(--white); --thumb: 20px; -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: none; overflow: hidden; cursor: pointer; }
:is(#settings input[type=range], #volume)::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--track); }
:is(#settings input[type=range], #volume)::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc(2px - var(--thumb) / 2); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); border-image: linear-gradient(90deg, var(--played) calc(100% - var(--thumb)), transparent 0) fill 0 / calc(50% - 2px) 0 / 0 0 0 100vw; }
:is(#settings input[type=range], #volume)::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
:is(#settings input[type=range], #volume)::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--played); }
:is(#settings input[type=range], #volume)::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#settings .volume:has(input[type=checkbox]:not(:checked)) input[type=range] { opacity: .45; }
#listened { margin-top: 22px; color: rgba(255, 255, 255, .66); text-align: center; }
#notes-setting { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
#notes-name { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: #2a2724; color: inherit; font: inherit; }
#notes-setting p { margin: 8px 0 0; color: rgba(255, 255, 255, .66); font-size: 15px; line-height: 1.45; }
#notes-setting:not(:has(#notes-on:checked)) :is(#notes-name, p) { display: none; }
/* The bar of review mode (review.js) and of a tester's Note (app.js): outside #screen so the player's gestures never
see its taps, clear of ☰ ⚙ ⛶ at the top and ⟲ ⏯ ⟳ across the middle. Upright it sits at the foot of the text panel,
sideways at the right edge, in the side bar when the frame fits. */
#review, #note-bar { position: fixed; z-index: 15; display: flex; justify-content: center; pointer-events: none; }
:is(#review, #note-bar) .bar { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 26px; background: rgba(30, 28, 26, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: auto; }
:is(#review, #note-bar) button { min-width: 44px; height: 44px; padding: 0 14px; background: rgba(255, 255, 255, .1); font: 500 16px/1 var(--font-ui); }
@media (hover: hover) { :is(#review, #note-bar) button:hover { background: rgba(255, 255, 255, .16); } }
:is(#review, #note-bar) button:active { background: rgba(255, 255, 255, .24); }
@media (orientation: portrait) { #review, #note-bar { left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); } }
@media (orientation: landscape) {
#review, #note-bar { right: max(6px, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; }
:is(#review, #note-bar) .bar { flex-direction: column; width: 60px; border-radius: 14px; }
:is(#review, #note-bar) button { padding: 0 6px; }
#note-bar .bar { width: auto; padding: 10px; }
}
/* The Note sheet (note.js): over the text panel upright, so the frame stays in view, and at the top sideways. */
#note-sheet { position: fixed; z-index: 21; left: 0; right: 0; top: 0; display: grid; gap: 8px; padding: 10px 12px; background: var(--night); -webkit-user-select: text; user-select: text; }
#note-sheet textarea { width: 100%; box-sizing: border-box; font: 17px/1.4 var(--font-ui); background: #2a2724; color: inherit; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 6px 8px; }
#note-sheet div { display: flex; gap: 8px; align-items: center; }
#note-sheet .status { font-size: 13px; }
@media (orientation: portrait) { #note-sheet { top: 56.25vw; } }
#note-saved { position: fixed; z-index: 21; left: 50%; top: max(12px, env(safe-area-inset-top)); translate: -50% 0; margin: 0; padding: 4px 12px; border-radius: 6px; background: rgba(30, 28, 26, .82); font: 500 13px/1.3 var(--font-ui); pointer-events: none; }
#note-saved:empty { display: none; }
#credits ul { max-width: 32rem; }
#credits li { position: relative; margin: 0 0 14px; padding-left: 1.5rem; overflow-wrap: anywhere; }
#credits li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .35rem; height: .35rem; border-radius: 50%; background: rgba(255, 255, 255, .5); }
#replay { padding: .6rem 1.8rem .6rem 1.5rem; background: rgba(255, 255, 255, .14); font-size: 1.1rem; }
#replay svg { width: .75em; height: .75em; fill: currentColor; }
@media (hover: hover) {
#controls .row button:hover, #speed:hover { background-color: rgba(255, 255, 255, .14); }
#transport #play:hover { background-color: rgba(60, 56, 52, .6); }
.panel .close:hover { background: rgba(255, 255, 255, .18); }
.panel > button:not(.close):hover { background: rgba(255, 255, 255, .18); }
#chapters li button:hover { background: rgba(255, 255, 255, .06); }
#backlog li:hover { background: rgba(255, 255, 255, .06); }
#replay:hover { background: rgba(255, 255, 255, .22); }
}
#controls .row button:active, #speed:active { background-color: rgba(255, 255, 255, .24); }
.panel .close:active { background: rgba(255, 255, 255, .26); }
.panel button:active:not(.close) { background-color: rgba(255, 255, 255, .26); }
/* The effects (fx.js): each layer is placed and drawn from the state, frame-relative. */
.fx > * { position: absolute; pointer-events: none; }
.fx .wash, .spr .wash { position: absolute; inset: 0; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
#textbox .silence { position: absolute; left: 0; right: 0; top: .25em; text-align: center; letter-spacing: .3em; font-weight: 700; opacity: .75; display: none; }
#textbox .silence i { font-style: normal; }
#textbox.silent .silence { display: block; }
@media (orientation: portrait) { #textbox .silence { top: .4em; } }
/* The paper's hands, unmodified OFL fonts with their licences beside them. */
@font-face { font-family: fx-copperplate; src: url(fonts/petitformalscript/PetitFormalScript-Regular.ttf); font-display: block; }
@font-face { font-family: fx-cursive; src: url("fonts/caveat/Caveat%5Bwght%5D.ttf"); font-weight: 400 700; font-display: block; }
@font-face { font-family: fx-scrawl; src: url(fonts/nothingyoucoulddo/NothingYouCouldDo.ttf); font-display: block; }
@font-face { font-family: fx-print; src: url(fonts/patrickhand/PatrickHand-Regular.ttf); font-display: block; }
@font-face { font-family: fx-type; src: url(fonts/oldstandardtt/OldStandard-Bold.ttf); font-weight: 700; font-display: block; }
/* The page turn's old page, over the stage; the controls and panels stay above it. */
.turn { position: absolute; inset: 0; z-index: 10; pointer-events: none; isolation: isolate; }
.turn > #screen { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.turn canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#controls, #transport, #spinner, #failed { z-index: 11; }
.panel { z-index: 20; }