/* Page styles (split from index.html 2026-10-01). */
@font-face { font-family: 'Jost'; src: url(fonts/jost.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
/* Typed colors so a theme switch fades smoothly (canvas reads them each frame). */
@property --bg { syntax: ''; inherits: true; initial-value: #ede9e2; }
@property --ink { syntax: ''; inherits: true; initial-value: #1b1b1c; }
@property --soft { syntax: ''; inherits: true; initial-value: #6f6b63; }
/* A chapter change is a milestone: the tint settles over 1.2 s under the chapter card; browsing the level menu stays quick. */
:root { transition: --bg 1.2s ease-in-out, --ink 1.2s ease-in-out, --soft 1.2s ease-in-out; }
:root:has(#menu.show) { transition: --bg .6s ease, --ink .6s ease, --soft .6s ease; }
:root { --bg: #ede9e2; --ink: #1b1b1c; --soft: #6f6b63; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16130f; --ink: #ebe7df; --soft: #8a867d; } }
:root[data-theme="dark"] { --bg: #16130f; --ink: #ebe7df; --soft: #8a867d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
font-family: "Jost", ui-sans-serif, system-ui, sans-serif; font-weight: 300; -webkit-user-select: none; user-select: none; }
canvas { display: block; touch-action: none; }
/* Own title bar (main.js titleBarOverlay): a 48 px strip on top drags the window; env() is 0
in a browser but stays 48 px in Electron fullscreen, so html[data-full] (ui.js) zeroes --tb.
The HUD sits inside the strip (vertically centred on it), not under it: no empty band on top.
Interactive things inside it opt out with no-drag. */
:root { --tb: env(titlebar-area-height, 0px); }
:root[data-full] { --tb: 0px; }
#drag { position: fixed; left: 0; top: 0; width: 100%; height: var(--tb); -webkit-app-region: drag; z-index: 1; }
button, input { -webkit-app-region: no-drag; }
/* Right edge keeps clear of the native min / max / close buttons in a window. */
:root { --tbr: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)); }
:root[data-full] { --tbr: 0px; }
/* In a window the strip is 48 px (main.js): the HUD sits in it on one line with the native
buttons (top 14 px -> 7 px: the native glyphs sit 2 px below the strip centre; right gap 22 px -> 8 px); fullscreen (--tb 0) keeps 14 / 22. */
.hud { z-index: 2; position: fixed; top: calc(14px - var(--tb) * .1458); left: 22px; right: calc(22px - var(--tb) * .29 + var(--tbr)); display: flex; align-items: center;
justify-content: space-between; pointer-events: none; }
.hud .left { letter-spacing: .22em; font-size: 13px; }
#lvl { font-weight: 400; display: inline-block; }
#name { color: var(--soft); margin-left: 14px; display: inline-block; }
/* The level label settles in when a NEW level loads (not on a retry): number first, name a beat later. */
@keyframes labelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#lvl.tick, #name.tick { animation: labelIn .55s ease-out both; }
#name.tick { animation-delay: .12s; }
.btns { display: flex; gap: 6px; pointer-events: auto; }
.btns button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent;
color: var(--ink); cursor: pointer; opacity: .55; transition: opacity .2s; }
.btns button { opacity: .75; }
.btns button:hover, .btns button:focus-visible { opacity: 1; }
/* Keyboard focus is always visible (a thin ring), the mouse never draws it. */
button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
#grid button:focus-visible { outline: none; }
.btns svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round; }
#hint, #stuck { position: fixed; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 15px;
letter-spacing: .08em; color: var(--soft); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
#hint.show { opacity: 1; }
/* Finished game: a quiet way back to the results, under the title hint (level.js loadTitle). */
/* The demo adds "wishlist on steam" beside it (state.js STORE_URL). */
#title-links { position: fixed; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; gap: 28px; pointer-events: none; }
#title-links button { border: 0; background: none;
font: inherit; font-size: 12px; letter-spacing: .25em; color: var(--soft); cursor: pointer; padding: 6px 12px;
opacity: 0; pointer-events: none; transition: opacity 1.2s, color .2s; }
body.intro:not(.leaving) #title-links button:not([hidden]) { opacity: .8; pointer-events: auto; }
#title-links button:hover, #title-links button:focus-visible { color: var(--ink); opacity: 1; }
/* Demo teaser card: the glyphs of the chapters still to come, in a row. */
#chapter .glyph.row svg { margin: 0 10px; }
.hud { transition: opacity 1.2s; }
/* Start-up: HUD, retry and hint stay hidden with no fade until boot.js has picked title or
level (they used to show, then fade out over 1.2 s behind the title: phantom buttons). */
html.boot .hud, html.boot #restart, html.boot #hint, html.boot #stuck { opacity: 0 !important; transition: none !important; }
body.intro .hud { opacity: 0; pointer-events: none; }
/* Chapter end: the HUD (level label, buttons) leaves with the level and returns with the next chapter's card. */
body.ending .hud, body.ending #restart { opacity: 0; pointer-events: none; transition: opacity .8s; }
/* The chapter opening screen stands alone: HUD and the level hint wait until it fades. */
body.card .hud, body.card #restart, body.card #hint { opacity: 0 !important; pointer-events: none; }
body.intro #hint { color: var(--soft); letter-spacing: .2em; font-size: 12px; bottom: 60px; }
#title { position: fixed; left: 0; right: 0; top: 16vh; text-align: center; font-weight: 200;
font-size: clamp(32px, 7vw, 96px); letter-spacing: .42em; text-indent: .42em; opacity: 0; white-space: nowrap;
pointer-events: none; }
/* The name appears like a level's elements: letter by letter, rising a little; it leaves in
reverse, each letter shrinking (the same gesture as a won level). */
body.intro #title, body.coda #title { opacity: 1; transition: none; }
#title span { display: inline-block; opacity: 0; }
body.intro #title span, body.coda #title span { animation: letterIn .9s cubic-bezier(.22,1,.36,1) calc(.35s + var(--i) * 70ms) both; }
body.intro.leaving #title span, body.coda.leaving-end #title span { animation: letterOut .35s ease-in calc((8 - var(--i)) * 35ms) both; }
@keyframes letterIn { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes letterOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.6); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* Chapter tints (UX pass 2026-09-29): one hue per chapter spread round the colour wheel, the
same lightness everywhere (only --bg changes). Were so faint that II and VI, I and IV looked
the same on the dark theme. 2026-10-01 respread (II/VI/VII, III/VIII, I/X were close): I warm paper,
II sea green 160, III sand 45, IV violet 275, V green 118, VI blue 225, VII grey (no hue),
VIII rust 5, IX rose 325, X olive 75. Ink >= 13.3:1, keys >= 3.1:1, soft text >= 4.1:1. */
:root[data-chapter="1"] { --bg: #d6f0ec; }
@media (prefers-color-scheme: dark) { :root[data-chapter="1"]:not([data-theme="light"]) { --bg: #051815; } }
:root[data-theme="dark"][data-chapter="1"] { --bg: #051815; }
/* Chapter III (gold gems) a touch warmer, chapter IV (knots) a touch violet. */
:root[data-chapter="2"] { --bg: #f4e8d5; }
@media (prefers-color-scheme: dark) { :root[data-chapter="2"]:not([data-theme="light"]) { --bg: #1a1206; } }
:root[data-theme="dark"][data-chapter="2"] { --bg: #1a1206; }
:root[data-chapter="3"] { --bg: #eae6fb; }
@media (prefers-color-scheme: dark) { :root[data-chapter="3"]:not([data-theme="light"]) { --bg: #15111e; } }
:root[data-theme="dark"][data-chapter="3"] { --bg: #15111e; }
/* Chapter V (rubber) a touch green. */
:root[data-chapter="4"] { --bg: #ddefe0; }
@media (prefers-color-scheme: dark) { :root[data-chapter="4"]:not([data-theme="light"]) { --bg: #0b170e; } }
:root[data-theme="dark"][data-chapter="4"] { --bg: #0b170e; }
/* Chapter VI (hooks, rope, air) a touch sky blue, bluer than II's grey-teal. */
:root[data-chapter="5"] { --bg: #dcebfc; }
@media (prefers-color-scheme: dark) { :root[data-chapter="5"]:not([data-theme="light"]) { --bg: #0b151f; } }
:root[data-theme="dark"][data-chapter="5"] { --bg: #0b151f; }
/* Chapter VII (axles, machines) steel: neutral grey, no warmth. */
:root[data-chapter="6"] { --bg: #e7eaed; }
@media (prefers-color-scheme: dark) { :root[data-chapter="6"]:not([data-theme="light"]) { --bg: #121416; } }
:root[data-theme="dark"][data-chapter="6"] { --bg: #121416; }
:root[data-chapter="7"] { --bg: #fce3dd; }
@media (prefers-color-scheme: dark) { :root[data-chapter="7"]:not([data-theme="light"]) { --bg: #1e0f0c; } }
:root[data-theme="dark"][data-chapter="7"] { --bg: #1e0f0c; }
/* IX piston: rose. */
:root[data-chapter="8"] { --bg: #f8e2ee; }
@media (prefers-color-scheme: dark) { :root[data-chapter="8"]:not([data-theme="light"]) { --bg: #1c0f16; } }
:root[data-theme="dark"][data-chapter="8"] { --bg: #1c0f16; }
/* X final: olive (75, away from I and V). */
:root[data-chapter="9"] { --bg: #e8ecd7; }
@media (prefers-color-scheme: dark) { :root[data-chapter="9"]:not([data-theme="light"]) { --bg: #131507; } }
:root[data-theme="dark"][data-chapter="9"] { --bg: #131507; }
/* Chapter card and end card: thin type, fade in and out. */
#chapter, #end { position: fixed; left: 0; right: 0; text-align: center; pointer-events: none;
opacity: 0; transition: opacity 1s; font-weight: 200; }
/* Chapter cards (state.js chapterCard): one layout for a chapter's start, its end and the
game's end. Lines rise in one by one (420 ms decelerate, 110 ms apart), leave together
faster (260 ms accelerate, a short reverse stagger). */
#chapter { top: 50%; transform: translateY(-50%); opacity: 1; transition: none; }
#chapter > div { opacity: 0; }
#chapter.show > div { animation: cardIn .42s cubic-bezier(.2,0,0,1) calc(.15s + var(--i) * 110ms) both; }
#chapter.show.out > div { animation: cardOut .26s cubic-bezier(.3,0,1,1) calc((4 - var(--i)) * 30ms) both; }
#chapter .glyph { margin-bottom: 18px; line-height: 0; }
#chapter .glyph svg, .chtab .g svg, #grid em svg { display: inline-block; vertical-align: middle; overflow: visible; }
#chapter .num { font-size: clamp(44px, 6vw, 74px); font-weight: 200; letter-spacing: .3em; text-indent: .3em; line-height: 1; }
#chapter .name { margin-top: 18px; font-size: clamp(18px, 2.4vw, 28px); letter-spacing: .5em; text-indent: .5em; }
#chapter .line, #chapter .count { font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .3em; text-indent: .3em; color: var(--soft); }
#chapter .line { margin-top: 22px; }
#chapter .count { margin-top: 30px; }
#chapter .count:empty, #chapter .glyph:empty, #chapter .num:empty, #end .cap:empty { display: none; }
#chapter .num:empty + .name { margin-top: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 200; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #chapter > div { animation-duration: .01s !important; } }
@keyframes jointIn { to { transform: scale(1); } }
@keyframes stickIn { to { transform: scaleX(1); } }
/* Ending (ending.js, tools/ENDING.md): a results page under the name (#title): totals, one
row per chapter, the hardest level, then main menu / levels. Scrolls on a short window. */
#end { z-index: 2; top: calc(6vh + clamp(30px, 4.2vw, 56px) + 34px); bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 18px;
opacity: 1; font-weight: 300; overflow-y: auto; scrollbar-width: none; padding: 0 16px 100px; }
/* Each unit (a line, a number, a table cell) appears and leaves like a level's elements:
staggered in order on show, in reverse and a touch smaller on leave (ending.js --i / --n). */
#end .u { opacity: 0; transform: translateY(6px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.22,1,.36,1);
transition-delay: calc(var(--i, 0) * 45ms); }
#end.show .u { opacity: 1; transform: none; }
#end.show.leave .u { opacity: 0; transform: scale(.94); transition: opacity .35s ease-in, transform .35s ease-in;
transition-delay: calc((var(--n, 0) - var(--i, 0)) * 12ms); }
#end.show.leave .table { border-top-color: transparent; transition: border-color .4s; }
#end .cap, #end .line { font-size: clamp(12px, 1vw, 14px); letter-spacing: .3em; text-indent: .3em; color: var(--soft); }
#end .line:empty { display: none; }
#end .nums { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 5vw, 72px); }
#end .nums:empty, #end .table:empty { display: none; }
#end .table { transition: border-color 1s .4s; }
#end:not(.show) .table { border-top-color: transparent; transition: none; }
#end .nums div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#end .nums b { font-weight: 200; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: .06em; }
#end .nums span { font-size: 12px; letter-spacing: .3em; text-indent: .3em; color: var(--soft); }
#end .table { display: grid; grid-template-columns: 3em minmax(6em, auto) 6em 5em 2em auto auto; justify-content: center;
column-gap: clamp(12px, 2vw, 28px); font-size: clamp(12px, 1vw, 14px); letter-spacing: .12em;
border-top: 1px solid color-mix(in srgb, var(--soft) 35%, transparent); padding-top: 10px; }
#end .table > div { display: contents; }
#end .table span { padding: 4px 0; text-align: right; color: var(--ink); white-space: nowrap; }
#end .table span:nth-child(1) { text-align: left; color: var(--soft); }
#end .table span:nth-child(2) { text-align: left; }
#end .table span:nth-child(n+5) { color: var(--soft); }
#end .table span:nth-child(6) { text-align: left; }
#end .table .head span:nth-child(5) { grid-column: span 3; text-align: left; }
#end::-webkit-scrollbar { display: none; }
#end .table .head span { color: var(--soft); font-size: 11px; letter-spacing: .25em; padding-bottom: 10px; }
#end .table .todo span { color: var(--soft); }
#end .thanks { margin-top: 8px; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .3em; text-indent: .3em; font-weight: 200; }
#end .thanks .more { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .25em; color: var(--soft); font-weight: 300; }
#end .go { position: fixed; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; gap: 36px; }
#end.show .go { pointer-events: auto; }
#end.show { pointer-events: auto; }
#end .go button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px;
letter-spacing: .3em; text-indent: .3em; padding: 10px 20px; cursor: pointer; opacity: .6; transition: opacity .2s; }
#end .go button:hover, #end .go button:focus-visible { opacity: 1; outline: none; }
/* The ending: the tint walks home to chapter I slowly; the HUD stays away; the name returns. */
:root.home { transition: --bg 6s ease-in-out, --ink 6s ease-in-out, --soft 6s ease-in-out; }
body.coda .hud, body.coda #restart { opacity: 0; pointer-events: none; }
body.coda #title { top: 6vh; font-size: clamp(30px, 4.2vw, 56px); }
#menu-end { position: fixed; right: calc(22px + var(--tbr)); top: calc(14px - var(--tb) * .1458); height: 38px; padding: 0 10px;
border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .22em;
cursor: pointer; opacity: .75; }
#menu-end:hover, #menu-end:focus-visible { opacity: 1; }
#menu-end[hidden] { display: none; }
/* Hint and stuck keep clear of the retry button below (one line of air between). */
#stuck { bottom: 118px; color: var(--ink); }
#hint { bottom: 86px; }
/* Dev only (run from source): variant tag bottom left. */
#dev-var { position: fixed; left: 16px; bottom: 22px; font-size: 12px; letter-spacing: .12em; color: var(--soft); pointer-events: none; }
body.intro #dev-var { display: none; }
/* Retry sits bottom centre, near the action; pause stays top right. */
#restart { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center;
gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: transparent; color: var(--ink);
font: inherit; font-size: 12px; letter-spacing: .2em; cursor: pointer; opacity: .6; transition: opacity .4s; }
#restart:hover { opacity: 1; }
#restart svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#restart span { color: inherit; }
/* Brighter once the level is stuck: that is when the player needs it. */
#restart.lit { opacity: .9; }
body.intro #restart { opacity: 0; pointer-events: none; }
#stuck.show { opacity: .75; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .3; } }
/* Pages over the HUD (z 2) and the title bar strip (z 1). */
#menu { z-index: 3; position: fixed; inset: 0; background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
opacity: 0; pointer-events: none; transition: opacity .25s; }
#menu.show { opacity: 1; pointer-events: auto; }
#menu.instant { transition: none; z-index: 5; }
#menu .cap { height: 1.6em; line-height: 1.6em; white-space: nowrap; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .3em; color: var(--soft); }
/* Fixed 5 x 4 box: a chapter with fewer levels (X while it is built) never moves the page. */
#grid { display: grid; grid-template-columns: repeat(5, 132px); grid-template-rows: repeat(4, 96px); gap: 14px; }
#grid button { position: relative; width: 132px; height: 96px; padding: 0; border-radius: 10px;
border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent;
color: var(--soft); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; outline: none; }
#grid button canvas { position: absolute; left: 0; right: 0; bottom: 0; top: 22%; width: 100%; height: 78%; opacity: .55; transition: opacity .15s; }
#grid button em { position: absolute; left: 0; right: 0; top: 38%; font-style: normal; font-size: 20px; text-align: center; opacity: .35; }
#grid button span { position: absolute; left: 8px; top: 5px; font-size: 14px; letter-spacing: .08em; }
#grid button:not(:disabled):hover, #grid button:focus-visible { transform: scale(1.04); border-color: var(--ink); }
#grid button:not(:disabled):hover canvas, #grid button:focus-visible canvas { opacity: 1; }
#grid button.done canvas { opacity: .9; }
/* Done: a solid joint in the header row, clear of the picture (a tick got lost in it). */
#grid button.done::after { content: ''; position: absolute; right: 10px; top: 9px; width: 7px; height: 7px;
border-radius: 50%; background: var(--ink); }
#grid button.done span { color: var(--ink); }
/* Level pictures draw in one after another (menu.js --i), like a level's elements. */
#grid button { animation: cellIn .45s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 22ms) both; }
@keyframes cellIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
#grid button.cur { border: 2px solid var(--ink); animation: cellIn .45s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 22ms) both, curbreathe 2.4s ease-in-out 1s infinite; }
#grid button.cur canvas { opacity: 1; }
#grid button.cur span { color: var(--ink); }
@keyframes curbreathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 14%, transparent); } }
/* Chapter tabs (2026-10-09): the chapter's mechanic glyph (glyph.js) over its numeral, a
progress line under both. Locked = a dashed ring, no spoiler. */
#ch-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
#ch-tabs .chtab { position: relative; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px;
font: inherit; font-size: clamp(13px, 1.05vw, 15px); letter-spacing: .2em; text-indent: .2em; color: var(--soft);
background: none; border: 0; padding: 6px 0 12px; cursor: pointer; transition: color .2s; }
#ch-tabs .chtab .g { height: 30px; line-height: 0; opacity: .7; transition: opacity .2s, transform .2s; }
#ch-tabs .chtab .n { white-space: nowrap; }
#ch-tabs .chtab:not(:disabled):hover, #ch-tabs .chtab.on { color: var(--ink); }
#ch-tabs .chtab:not(:disabled):hover .g, #ch-tabs .chtab.on .g { opacity: 1; }
#ch-tabs .chtab.on .g { transform: scale(1.12); }
#ch-tabs .chtab i { position: absolute; left: 14px; right: 14px; bottom: 0; height: 1.5px;
background: linear-gradient(to right, currentColor var(--p), color-mix(in srgb, currentColor 22%, transparent) var(--p)); }
#ch-tabs .chtab:disabled i { display: none; }
#ch-tabs .chtab:disabled { opacity: .35; cursor: default; }
#menu .now { font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .2em; color: var(--ink); height: 1.6em; line-height: 1.6em; white-space: nowrap; }
#grid button:disabled { border-style: dashed; opacity: .4; cursor: default; pointer-events: none; }
/* Dev (from source): levels past the progress stay dashed but open. */
#grid button.ahead { border-style: dashed; }
/* The frozen level shows faintly behind the pause page: a pause is for thinking about it. */
#pause { z-index: 3; position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center;
justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
#pause.show { opacity: 1; pointer-events: auto; }
/* Settings are read line by line: an opaque page, the scene's lines would cross the sliders. */
#pause:has(.view[data-view="settings"].show) { background: var(--bg); backdrop-filter: none; }
#pause .view { display: none; flex-direction: column; align-items: center; gap: 6px; width: min(540px, 100% - 32px); }
#pause .view.show { display: flex; }
#pause .cap { font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .3em; color: var(--soft); margin-bottom: 30px; }
#pause #p-level { margin-top: -18px; margin-bottom: 44px; display: flex; gap: 1.4em; letter-spacing: .3em; }
#pause #p-level span:first-child { color: var(--ink); }
#pause #p-level span + span { color: var(--soft); }
#pause #p-level:empty { display: none; }
#pause button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(22px, 1.9vw, 27px);
letter-spacing: .24em; padding: 11px 22px; cursor: pointer; opacity: .6; transition: opacity .2s; }
#pause button:hover, #pause button:focus-visible { opacity: 1; }
/* Keyboard focus on the pause page: a small joint dot left of the word, not a box. */
#pause button:focus-visible { outline: none; position: relative; }
#pause .view > button:focus-visible::before { content: ''; position: absolute; left: -2px; top: 50%;
width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
#pause .keys { position: fixed; left: 0; right: 0; bottom: 34px; font-size: 12px; letter-spacing: .18em; color: var(--soft); text-align: center; }
#pause .sec { font-size: 12px; letter-spacing: .3em; color: var(--soft); text-align: left; }
/* Multi-choice settings show they step through options; on / off settings are switches. */
#pause .row button.cycle::before { content: '‹'; margin-right: .7em; opacity: .5; }
#pause .row button.cycle::after { content: '›'; margin-left: .7em; opacity: .5; }
#pause .row button.switch { display: flex; align-items: center; gap: 14px; }
#pause .row button.switch::before { content: ''; width: 34px; height: 18px; border-radius: 9px; box-sizing: border-box;
border: 1.5px solid var(--soft); background: radial-gradient(circle 6px at 9px 50%, var(--soft) 98%, transparent) no-repeat;
transition: background .2s, border-color .2s; }
#pause .row button.switch[aria-pressed="true"]::before { border-color: var(--ink);
background: radial-gradient(circle 6px at 23px 50%, var(--ink) 98%, transparent) no-repeat; }
#menu-back { position: fixed; left: 22px; top: calc(14px - var(--tb) * .1458); height: 38px; padding: 0 10px;
border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .22em;
cursor: pointer; opacity: .75; }
#menu-back:hover, #menu-back:focus-visible { opacity: 1; }
#pause .gap { height: 22px; }
/* Settings (redone 2026-10-09): two sections with a hairline head; each row = label on the
left (with a short soft note under it when the name alone does not say what it does),
the control in one aligned column, slider values as numbers on the right. Back sits low
like the key line. */
#pause .view[data-view="settings"] { width: min(640px, 100% - 32px); }
#pause .panes { display: flex; flex-direction: column; gap: 34px; width: 100%; }
#pause .pane { display: flex; flex-direction: column; gap: 4px; }
#pause .sec { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--soft) 30%, transparent); }
#pause .row { display: grid; grid-template-columns: 200px 1fr 2.5em; align-items: center; column-gap: 28px;
min-height: 48px; font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .12em; color: var(--ink); }
#pause .row .lab { display: flex; flex-direction: column; gap: 3px; opacity: .85; }
#pause .row small { font-size: 11px; letter-spacing: .12em; color: var(--soft); }
#pause .row output { font-size: 13px; letter-spacing: .1em; color: var(--ink); opacity: .7; text-align: right; font-variant-numeric: tabular-nums; }
#pause .row button { font-size: clamp(15px, 1.25vw, 18px); justify-self: start; padding: 6px 0; opacity: 1; grid-column: 2; }
#pause .row button.cycle { min-width: 9em; text-align: left; }
#pause .warn { max-width: 30em; margin: 10px 0 26px; text-align: center; line-height: 1.7;
font-size: 13px; letter-spacing: .12em; color: var(--soft); }
#pause button.danger { margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); color: var(--soft); }
#pause button.danger:hover, #pause button.danger:focus-visible { color: var(--ink); }
#pause .back { margin-top: 30px; font-size: clamp(16px, 1.3vw, 19px); }
/* Reset sits apart, small and faint: a rare, dangerous action does not line up with volume. */
#pause .quiet { margin-top: 18px; font-size: 12px; letter-spacing: .25em; color: var(--soft); opacity: .8; }
#pause .quiet:hover, #pause .quiet:focus-visible { color: var(--ink); }
/* Pages of the pause appear like a level's elements: one line after another (--i, ui.js). */
#pause .view.show .st { animation: rowIn .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * 35ms) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#pause input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px;
background: transparent; cursor: pointer; margin: 0; }
#pause input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px;
background: linear-gradient(90deg, var(--ink) var(--v, 100%), color-mix(in srgb, var(--soft) 40%, transparent) var(--v, 100%)); }
#pause input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px;
border-radius: 50%; background: var(--ink); transition: transform .15s; }
#pause input[type=range]:hover::-webkit-slider-thumb, #pause input[type=range]:focus-visible::-webkit-slider-thumb { transform: scale(1.35); }
#pause input[type=range]:focus { outline: none; }
@media (max-width: 760px), (max-height: 640px) { #grid { grid-template-columns: repeat(5, 96px); grid-template-rows: repeat(4, 70px); gap: 10px; } #grid button { width: 96px; height: 70px; } #menu { gap: 18px; } }
@media (max-width: 540px) { #grid { grid-template-columns: repeat(4, 76px); } #grid button { width: 76px; height: 56px; } #ch-tabs { gap: 0; } #ch-tabs .chtab { width: 34px; } #ch-tabs .chtab .n { font-size: 10px; letter-spacing: 0; text-indent: 0; } #name { display: none; } }