grows to fill the viewport so the footer rides at the bottom of the screen instead of below the fold. */ display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* html.announce-dismissed hides it with no flash — set in the before first paint. */ .announce { width: 100%; max-width: 64rem; margin: 1.25rem auto 0; padding: 0 1.25rem; } html.announce-dismissed .announce { display: none; } .announce-inner { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); color: var(--fg); font-size: 0.9rem; } .announce-text { flex: 1 1 auto; color: inherit; } a.announce-text:hover { text-decoration: underline; } .announce-close { flex: none; background: none; border: none; color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0 0.15rem; cursor: pointer; } .announce-close:hover { color: var(--fg); } .actionbar { position: fixed; bottom: calc(1.1rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; gap: 0.15rem; padding: 0.35rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .ab-toggle { display: none; } .ab-toggle .ico-close { display: none; } body.nav-open .ab-toggle .ico-open { display: none; } body.nav-open .ab-toggle .ico-close { display: block; } .ab-btn { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; } .ab-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); text-decoration: none; } .ab-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .settings-panel { position: fixed; bottom: calc(4.6rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 51; width: min(20rem, calc(100vw - 2rem)); background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); font-size: 0.9rem; } .settings-panel[hidden] { display: none; } .sp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; } .sp-close { background: 0; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; } .sp-close:hover { color: var(--accent); } .sp-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.6rem 0; color: var(--muted); } .sp-row select, .sp-grp button { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; font: inherit; cursor: pointer; } .sp-row input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; } .sp-grp { display: flex; gap: 0.3rem; } .sp-grp button:hover { border-color: var(--accent); } .sp-reset { width: 100%; margin-top: 0.8rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; } .sp-reset:hover { border-color: var(--accent); color: var(--accent); } .toc-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; } .toc-controls input { flex: 1; min-width: 10rem; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; font: inherit; } .toc-controls button { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem; font: inherit; cursor: pointer; white-space: nowrap; } .toc-controls button:hover { border-color: var(--accent); } .chlist .empty { color: var(--muted); padding: 1rem 0.25rem; } .kicker { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.72rem; color: var(--muted); margin: 0 0 0.4rem; } .chead { margin: 2rem 0 1.5rem; } /* Part switcher across the top of a TOC: pill-segmented tabs for each part. Current part is filled; other live parts link to their TOC; coming-soon is muted. */ .part-switch { display: inline-flex; gap: 0.2rem; margin: 0 0 0.6rem; padding: 0.2rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; } .part-switch-tab { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; padding: 0.3rem 0.75rem; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; } a.part-switch-tab:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; } .part-switch-tab.is-current { background: var(--accent); color: var(--bg); } .part-switch-tab.is-soon { opacity: 0.5; cursor: default; } .chead h1 { margin: 0.2rem 0; font-size: 1.9rem; line-height: 1.2; } .chead-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .epub-btn { flex: none; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.8rem; font-size: 0.85rem; text-decoration: none; white-space: nowrap; } .epub-btn:hover { border-color: var(--accent); text-decoration: none; } .chapter, .toc { width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 7rem; } /* Two-column TOC: cover art on the left, chapter list on the right. The whole block is sized to the viewport so the page itself doesn't scroll — instead the chapter list (.toc-side .chlist) scrolls internally. The ~6rem reserved below keeps the site footer on-screen without pushing the page taller than the viewport. */ .toc--split { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 2rem; align-items: stretch; /* Reserve the footer's full height (2rem top pad + 2.4rem icons + 5.5rem bottom pad added by body:has(.actionbar)) so main + footer fit one screen. */ height: calc(100dvh - 10rem); padding-bottom: 1.5rem; } .toc-cover { align-self: center; /* vertically center the cover art against the chapter list */ } .toc-cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 14px; border: 1px solid var(--border); } /* Book title + per-part chapter ranges, shown under the cover art. */ .toc-book-title { margin: 0.9rem 0 0; font-size: 1.05rem; line-height: 1.3; font-weight: 700; text-align: center; color: var(--fg); } .toc-parts { list-style: none; margin: 0.8rem 0 0; padding: 0; font-size: 0.9rem; } .toc-parts li { padding: 0.3rem 0; border-top: 1px solid var(--border); color: var(--muted); } .toc-parts li:first-child { border-top: none; } .toc-parts-row { display: flex; justify-content: space-between; gap: 0.75rem; } /* Sneaky: linked parts look like the plain rows, revealing on hover only. */ a.toc-parts-row { color: inherit; text-decoration: none; transition: color 0.15s ease; } a.toc-parts-row:hover { color: var(--accent); } .toc-parts-range { white-space: nowrap; } /* The part this TOC belongs to: accent it so readers see where they are. */ .toc-parts li.is-current { color: var(--accent); font-weight: 700; } .toc-side { display: flex; flex-direction: column; min-height: 0; /* let the flex child (.chlist) shrink so it can scroll */ } .toc--split .chlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .page { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 2rem 1.2rem 2rem 2.4rem; box-shadow: 0 8px 34px rgba(0, 0, 0, 0.3); } .page .chead { margin-top: 0; } .cbody { font-family: var(--serif); font-size: var(--read-size); line-height: var(--read-lh); /* `anywhere` (not `break-word`): both wrap long unbroken strings AND collapse the element's min-content width. The latter matters because is a column flexbox, so an oversized min-content (e.g. a 100-char run-on word) would force the whole page wider than the viewport and make mobile Safari zoom the entire layout out. */ overflow-wrap: anywhere; } .cbody p { margin: 0 0 1.1em; } .cbody h2 { font-size: 1.25rem; margin: 1.8em 0 0.6em; } .cbody blockquote { border-left: 3px solid var(--accent); margin: 1.4em 0; padding: 0.2em 1em; color: var(--muted); font-style: italic; } .cbody .sb { border: 0; text-align: center; margin: 2em 0; } .cbody .sb::before { content: "\203B \203B \203B"; color: var(--muted); letter-spacing: 0.4em; } .cbody .center { text-align: center; } .cbody .right { text-align: right; } .cbody em { font-style: italic; } .cbody strong { font-weight: 700; } .cbody s { text-decoration: line-through; } /* ---- Inline chapter illustrations; files live in assets/img/chapters//. A

is not a

, so it carries no build-time paragraph id and is skipped by the per-paragraph comment system (which targets `.cbody > p[id]`). */ .cbody figure.chap-img { margin: 1.8em auto; text-align: center; } .cbody figure.chap-img img { max-width: 100%; height: auto; border-radius: 6px; } .cbody figure.chap-img figcaption { margin-top: 0.5em; font-size: 0.85em; font-style: italic; color: var(--muted); } /* ---- imported colour roles, named by hue (mapped from Google Docs colours in gdocs.js; palette in themes.css). Text roles tint the glyphs; roles tint a translucent background that adapts to any theme. The `gray` role reuses the theme's secondary-text colour (--muted). */ .cbody .font-gray { color: var(--muted); } .cbody .font-blue { color: var(--blue); } .cbody .font-amber { color: var(--amber); } .cbody .font-red { color: var(--red); } .cbody .font-gold { color: var(--gold); } .cbody .font-green { color: var(--green); } .cbody .font-purple { color: var(--purple); } .cbody mark { color: inherit; border-radius: 3px; padding: 0 0.15em; } .cbody mark.font-gray { background: color-mix(in srgb, var(--muted) 22%, transparent); } .cbody mark.font-blue { background: color-mix(in srgb, var(--blue) 20%, transparent); } .cbody mark.font-amber { background: color-mix(in srgb, var(--amber) 24%, transparent); } .cbody mark.font-red { background: color-mix(in srgb, var(--red) 20%, transparent); } .cbody mark.font-gold { background: color-mix(in srgb, var(--gold) 24%, transparent); } .cbody mark.font-green { background: color-mix(in srgb, var(--green) 22%, transparent); } .cbody mark.font-purple { background: color-mix(in srgb, var(--purple) 22%, transparent); } /* ---- imported display fonts (mapped from Google Docs font-families in gdocs.js FONT_ROLES). Self-hosted woff2 (assets/fonts/); the build preloads only the faces a chapter actually uses (see base.eta), and the browser fetches a face only when a .f-* span references it — so a chapter using no special font downloads none. `swap` shows body text immediately, no FOIT. The system-font roles (f-mono, f-korean) have no @font-face — they render from the reader's OS fonts (their generic monospace/serif fallback is close enough). f-chat used to be one of these too, but "Comic Sans MS" is absent on phones/tablets/Linux and fell back to a wildly different `cursive` face, so it now self-hosts Comic Neue (an OFL Comic Sans lookalike). */ @font-face { font-family: "Comic Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/comic-neue.woff2") format("woff2"); } /* f-chat is used italic in the source (e.g. ch211's song lyrics), so ship a true italic face rather than synthesising an oblique from the upright one. */ @font-face { font-family: "Comic Neue"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/comic-neue-italic.woff2") format("woff2"); } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/caveat.woff2") format("woff2"); } @font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lobster.woff2") format("woff2"); } @font-face { font-family: "Gloria Hallelujah"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gloria-hallelujah.woff2") format("woff2"); } /* Merriweather is a real reading serif (variable weight) used for in-world formal notices; it's also used italic in the source, so it ships a true italic face rather than a synthesised oblique. */ @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/merriweather.woff2") format("woff2"); } @font-face { font-family: "Merriweather"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/merriweather-italic.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/spectral.woff2") format("woff2"); } /* Fuzzy Bubbles (OFL, self-hosted, Latin subset) — the theme-park Mascot's spoken signage. The source sets it bold, so a true 700 face ships alongside 400 rather than synthesising the bold. */ @font-face { font-family: "Fuzzy Bubbles"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/fuzzy-bubbles.woff2") format("woff2"); } @font-face { font-family: "Fuzzy Bubbles"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fuzzy-bubbles-bold.woff2") format("woff2"); } @font-face { font-family: "B612 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/b612-mono.woff2") format("woff2"); } /* These are display/script typefaces with their own built-in character; render them upright (font-style: normal) so an enclosing `note` box's italic doesn't synthesise a faux-oblique. */ .cbody .f-script { font-family: "Caveat", cursive; font-style: normal; } .cbody .f-display { font-family: "Lobster", cursive; font-style: normal; } .cbody .f-hand { font-family: "Gloria Hallelujah", cursive; font-style: normal; } /* Casual chat / texting — self-hosted Comic Neue, then the reader's own Comic Sans MS (Windows/ Mac) if present, then generic cursive. No font-style override: keeps its true italic face. */ .cbody .f-chat { font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive; } /* Mascot signage — self-hosted Fuzzy Bubbles; upright so an enclosing box's italic doesn't synthesise a faux-oblique on the display face. */ .cbody .f-mascot { font-family: "Fuzzy Bubbles", cursive; font-style: normal; } /* Pure system-font roles (no @font-face): a monospace terminal readout and Korean serif. These families aren't redistributable, so they render from the reader's OS fonts. */ .cbody .f-mono { font-family: ui-monospace, "Courier New", "Cascadia Code", Consolas, monospace; } .cbody .f-korean { font-family: "Batang", "Nanum Myeongjo", "AppleMyungjo", serif; } /* In-world game/HUD terminal readout — self-hosted B612 Mono, system monospace as fallback. */ .cbody .f-terminal { font-family: "B612 Mono", ui-monospace, "Cascadia Code", Consolas, monospace; } /* Reading serif — keeps its real italic/bold (no font-style override), so the notice's / render as true Merriweather italic/bold. */ .cbody .f-notice { font-family: "Merriweather", Georgia, serif; } /* Applied to ch171's title span (font-family from the source doc). The title's letters are Mathematical Bold Script Unicode that Spectral has no glyphs for (they fall back to a system math font); Spectral styles the ASCII characters in the span (brackets, spaces). */ .cbody .f-title { font-family: "Spectral", Georgia, serif; } /* ---- Readable mode (settings toggle; set by reader/prefs.js as data-readable on ) ---- Accessibility option for readers who struggle with serif or script type: swap the serif reading font for a clean system sans-serif and render every decorative/cursive span in that same plain font. Pure CSS over already-loaded text — no extra webfont is fetched. */ :root[data-readable="1"] .cbody { font-family: var(--ui); } :root[data-readable="1"] .cbody :is(.f-script, .f-display, .f-hand, .f-chat, .f-notice, .f-title, .f-mascot) { font-family: var(--ui); font-style: normal; } /* ---- footnotes / TL notes (build-time; see footnotes() in scripts/lib/enhance.mjs) ------ Inline "[N]" markers link down to their "[N]:" definition at the chapter end and back. */ .cbody .fnref, .cbody .fn-num, .cbody .fn-src, .cbody .fn-back { color: var(--accent); text-decoration: none; } .cbody .fnref { font-weight: 600; white-space: nowrap; } .cbody .fnref:hover, .cbody .fn-src:hover, .cbody .fn-back:hover { text-decoration: underline; } .cbody .fn-back { margin-left: 0.4em; font-size: 0.9em; } /* Clear the sticky top nav when jumping, and briefly flash the landing line. */ .cbody [id^="fn-"], .cbody [id^="fnref-"] { scroll-margin-top: 5rem; } .cbody [id^="fn-"]:target, .cbody [id^="fnref-"]:target { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; } /* ---- special blocks (build-time enhancements; see scripts/lib/enhance.mjs) -------------- Each block is a RUN of paragraphs (still individual `.cbody > p`, so per-paragraph comments keep working). The continuous box is drawn with per-paragraph borders: sides on every line, top/radius on `-top`, bottom/radius on `-bot`, bottom margins collapsed so they join into one frame. Each type sets its own colors/radius below. */ .cbody > p.idcard, .cbody > p.lore { margin-bottom: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--card); padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1.3em; } .cbody > p.idcard-top, .cbody > p.lore-top { border-top: 1px solid var(--border); margin-top: 1.8em; } .cbody > p.idcard-bot, .cbody > p.lore-bot { border-bottom: 1px solid var(--border); margin-bottom: 1.8em; } /* Employee ID card: a centered badge, rounded all corners; first line is a header strip. */ .cbody > p.idcard { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); text-align: center; font-family: var(--ui); letter-spacing: 0.02em; } .cbody > p.idcard-top { border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 0.8em; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; } .cbody > p.idcard-bot { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding-bottom: 0.8em; } /* System-message box (game / visual-novel style): a dark translucent navy panel with a glowing blue frame, shown over the prose like an in-game info window. Uses a FIXED dark palette (not the theme vars) so it reads as a UI overlay on light themes too. The hidden delimiter lines (-----/=====) form the glowing top/bottom edges; the first content line reads as the window title. Tuning knobs: --sys-* below. */ .cbody > p.lore { --sys-bg: rgba(9, 15, 34, 0.93); --sys-line: #3f7bff; /* frame + glow color */ --sys-fg: #cfe0ff; /* body text */ border-color: var(--sys-line); background: var(--sys-bg); color: var(--sys-fg); font-family: var(--ui); font-size: 0.92em; letter-spacing: 0.01em; } .cbody > p.lore-top { border-top: 2px solid var(--sys-line); border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 -7px 20px -7px var(--sys-line); margin-top: 1.7rem; } .cbody > p.lore-bot { border-bottom: 2px solid var(--sys-line); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 7px 20px -7px var(--sys-line); margin-bottom: 1.7rem; } /* The bands hide the ----- / ===== glyphs with font-size:0 — so their box metrics MUST be set in rem/px, not em (em would resolve against the zeroed font-size and collapse to 0). */ .cbody > p.lore-top, .cbody > p.lore-bot { font-size: 0; line-height: 0; height: 0.5rem; padding-top: 0; padding-bottom: 0; } /* First line after the top band = the entry title; brighten it like a window header. */ .cbody > p.lore-top + p.lore { color: #fff; font-weight: 600; padding-top: 0.7em; } /* Exploration "record" (listed type "record"): same blue Wiki/system-window look as `lore`, but for an inline exploration-record entry the source did NOT wrap in ===== delimiters (so there are no glyph rows to hide). Unlike lore-top/-bot (font-size:0 hidden bands), record-top/-bot SHOW their text behind a real top/bottom border, and the first line reads as the bright entry title. */ .cbody > p.record { --sys-bg: rgba(9, 15, 34, 0.93); --sys-line: #3f7bff; --sys-fg: #cfe0ff; margin: 0; border-left: 2px solid var(--sys-line); border-right: 2px solid var(--sys-line); background: var(--sys-bg); color: var(--sys-fg); font-family: var(--ui); font-size: 0.92em; letter-spacing: 0.01em; padding: 0.18em 2.1rem 0.18em 1.3em; } .cbody > p.record-top { border-top: 2px solid var(--sys-line); border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 -7px 20px -7px var(--sys-line); margin-top: 1.7rem; padding-top: 0.7em; color: #fff; font-weight: 600; } .cbody > p.record-bot { border-bottom: 2px solid var(--sys-line); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 7px 20px -7px var(--sys-line); margin-bottom: 1.7rem; padding-bottom: 0.7em; } /* Auto-detected single-line system messages: the book's pervasive bold "[ ... ]" screen / voice markup. Each renders as a self-contained game-UI box (all borders + radius), fixed dark palette so it reads as an overlay on any theme. Bold+ITALIC "[ ... ]" lines (subway PA / broadcast) get the warm `announce` variant. Kept full-width for the comment badge. */ .cbody > p.sysmsg { --sys-line: #3f7bff; margin: 0; /* group members join; -top/-bot add the outer margin */ border-left: 1px solid var(--sys-line); border-right: 1px solid var(--sys-line); background: rgba(9, 15, 34, 0.93); color: #eaf1ff; font-family: var(--ui); font-size: 0.92em; text-align: center; padding: 0.45em 2.1rem 0.45em 1em; } .cbody > p.sysmsg-top { border-top: 1px solid var(--sys-line); border-top-left-radius: 6px; border-top-right-radius: 6px; margin-top: 1.1em; padding-top: 0.6em; box-shadow: 0 -6px 16px -8px var(--sys-line); } .cbody > p.sysmsg-bot { border-bottom: 1px solid var(--sys-line); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-bottom: 1.1em; padding-bottom: 0.6em; box-shadow: 0 6px 16px -8px var(--sys-line); } .cbody > p.sysmsg.announce { --sys-line: #cda049; /* warm amber for PA / broadcast */ background: rgba(28, 21, 9, 0.92); color: #f4e8cd; font-style: italic; } /* Chat log: a back-and-forth of short messages (one-off; tag via enhancements.json type "chat"). Kept full-width — not fit-content pills — so the per-paragraph comment badge (absolute, right:0) still sits in its gutter. Speakers are distinguished by side + colour: incoming = default left; the protagonist's replies are gdoc right-aligned (class="right"). */ .cbody > p.chat { margin: 0.3em 0; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 10px; padding: 0.45em 2.1rem 0.45em 0.95em; font-family: var(--ui); font-size: 0.92em; } .cbody > p.chat.right { text-align: right; border-left: 1px solid var(--border); border-right: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--card)); } .cbody > p.chat-top { margin-top: 1.6rem; } .cbody > p.chat-bot { margin-bottom: 1.6rem; } /* Business card (auto: ━━━ … ━━━ box-drawing rules): a pale paper card with the message scribbled in. The ━ rule lines become hidden top/bottom edges. */ .cbody > p.card { margin: 0; border-left: 1px solid #cfc7b0; border-right: 1px solid #cfc7b0; background: #f6f3ea; color: #2a2a2a; text-align: center; font-family: var(--ui); font-size: 0.95em; padding: 0.4em 2.1rem 0.4em 1em; } .cbody > p.card-top { border-top: 1px solid #cfc7b0; border-top-left-radius: 6px; border-top-right-radius: 6px; margin-top: 1.5rem; /* rem, not em — these bands are font-size:0 (em would collapse to 0) */ box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); } .cbody > p.card-bot { border-bottom: 1px solid #cfc7b0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-bottom: 1.5rem; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); } .cbody > p.card-top, .cbody > p.card-bot { font-size: 0; /* hide the ─── rule glyphs (see rem gotcha note above) */ line-height: 0; height: 0.4rem; padding-top: 0; padding-bottom: 0; } /* Alien-shop "terminal" (auto: ₩/※ catalog & cart runs): a tacky retro web/monospace screen. */ .cbody > p.terminal { margin: 0; border-left: 1px solid #2c8f5a; border-right: 1px solid #2c8f5a; background: #0a120c; color: #9af6c0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.86em; text-align: left; padding: 0.3em 2.1rem 0.3em 1em; } .cbody > p.terminal-top { border-top: 1px solid #2c8f5a; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 1.3em; padding-top: 0.6em; } .cbody > p.terminal-bot { border-bottom: 1px solid #2c8f5a; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin-bottom: 1.3em; padding-bottom: 0.6em; } /* Option / choice list (auto: runs of "1. … / 2. …"): a clean accent-bordered enumeration. */ .cbody > p.options { margin: 0; border-left: 3px solid var(--accent); border-right: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--card)); font-family: var(--ui); font-size: 0.92em; text-align: left; padding: 0.3em 2.1rem 0.3em 1.1em; } .cbody > p.options-top { border-top: 1px solid var(--border); border-top-left-radius: 6px; border-top-right-radius: 6px; margin-top: 1.1em; padding-top: 0.55em; } .cbody > p.options-bot { border-bottom: 1px solid var(--border); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-bottom: 1.1em; padding-bottom: 0.55em; } /* Control panel (auto: "MIN MAX" + lever bar + ▲ marker): a monospace machine readout. */ .cbody > p.panel { margin: 0; border-left: 1px solid #7e8694; border-right: 1px solid #7e8694; background: #15171c; color: #cdd3da; font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; letter-spacing: 0.12em; /* Left-aligned + preserved whitespace so the ▲ marker keeps the raw source's horizontal position (bare = MIN, -indented = MAX). Centering each line independently would drop that position and collapse the leading spaces. */ text-align: left; white-space: pre; padding: 0.12em 2.1rem 0.12em 1em; } .cbody > p.panel-top { border-top: 1px solid #7e8694; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-top: 1.2em; padding-top: 0.5em; } .cbody > p.panel-bot { border-bottom: 1px solid #7e8694; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 1.2em; padding-bottom: 0.5em; } /* Note / document excerpt (listed type "note": diary scrawl, case-file testimony): a dashed paper block in italic. */ .cbody > p.note { margin: 0; border-left: 1px dashed var(--border); border-right: 1px dashed var(--border); background: color-mix(in srgb, var(--muted) 8%, var(--card)); font-style: italic; padding: 0.4em 2.1rem 0.4em 1.2em; } .cbody > p.note-top { border-top: 1px dashed var(--border); border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 1.3em; padding-top: 0.6em; } .cbody > p.note-bot { border-bottom: 1px dashed var(--border); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin-bottom: 1.3em; padding-bottom: 0.6em; } /* Footnotes (auto type "footnote"): the translator's "TL Notes:" trailer. Editorial apparatus, not story text — small, muted, and set off by a rule rather than boxed like an in-world block, so it never reads as something a character can see. */ .cbody > p.footnote { margin: 0; font-size: 0.86em; line-height: 1.55; color: var(--muted); padding: 0.25em 0; } .cbody > p.footnote-top { margin-top: 2em; padding-top: 0.9em; border-top: 1px solid var(--border); font-variant-caps: all-small-caps; letter-spacing: 0.06em; } .cbody > p.footnote-bot { margin-bottom: 1.5em; } /* The jump links inside keep their accent colour — see the .fn-* rules above. */ /* Voice (listed type "voice"): the mascot / system speaking in spaced-out capitals ("G O O D B O Y"). Not a box — a centered, wide-tracked display line that reads as a non-human voice looming over the prose. The trailing letter-spacing is balanced by an equal text-indent so the glyphs stay visually centered. */ .cbody > p.voice { text-align: center; font-family: var(--ui); font-weight: 600; font-size: 1.05em; letter-spacing: 0.3em; text-indent: 0.3em; color: color-mix(in srgb, #c0392b 50%, var(--fg)); margin: 0.5em 0; } .cbody > p.voice-top { margin-top: 1.7em; } .cbody > p.voice-bot { margin-bottom: 1.7em; } /* PA / mascot announcement (listed type "pa"): a recorded tannoy or cheerful mascot/announcer voice the source prefixes with an em-dash (training-video mascots, theme-park ride PA). A NON-box amber caption (like `voice`, but normal-spaced and lower-case) so single interspersed lines read as an overhead announcement without choppy borders. Listed, not auto: a bare `—` prefix is far too common (ordinary dialogue + SFX) to detect safely book-wide. */ .cbody > p.pa { font-style: italic; font-family: var(--ui); color: color-mix(in srgb, #cda049 62%, var(--fg)); letter-spacing: 0.01em; padding-left: 1.2em; margin: 0.4em 0; } .cbody > p.pa-top { margin-top: 1.5em; } .cbody > p.pa-bot { margin-bottom: 1.5em; } /* Vertical text: a word spelled one letter per paragraph (auto: runs of 4+ single-char

). Tight line-height stacks the letters into a centered column; red/bold reads as a scream. */ .cbody > p.verticaltext { text-align: center; font-weight: 700; font-size: 1.3em; line-height: 1.05; letter-spacing: 0.04em; margin: 0; color: color-mix(in srgb, #c0392b 60%, var(--fg)); } .cbody > p.verticaltext-top { margin-top: 1.3em; } .cbody > p.verticaltext-bot { margin-bottom: 1.3em; } /* Sign / signage (auto: text the source wraps in {…} curly braces): an in-world posted notice rendered as a bordered placard. Text alignment is left to the source (these are usually class="center"); the frame is the visual cue. The literal braces stay in the text. */ .cbody > p.sign { margin: 0; border-left: 1px solid var(--muted); border-right: 1px solid var(--muted); background: color-mix(in srgb, var(--muted) 10%, var(--card)); font-family: var(--ui); font-size: 0.93em; letter-spacing: 0.02em; padding: 0.35em 1.4em; } .cbody > p.sign-top { border-top: 1px solid var(--muted); border-top-left-radius: 3px; border-top-right-radius: 3px; margin-top: 1.3em; padding-top: 0.6em; } .cbody > p.sign-bot { border-bottom: 1px solid var(--muted); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 1.3em; padding-bottom: 0.6em; } /* 130666 "smoke" relay (auto: italic ">"-prefixed lines): the contracted entity's speech — drifting and impersonal. A non-box, muted, indented italic caption (the ">" marker stays). */ .cbody > p.smoke { font-style: italic; font-family: var(--ui); color: color-mix(in srgb, var(--muted) 70%, var(--fg)); letter-spacing: 0.04em; padding-left: 1.4em; margin: 0.3em 0; } .cbody > p.smoke-top { margin-top: 1.4em; } .cbody > p.smoke-bot { margin-bottom: 1.4em; } /* Guidance-video crawl (listed type "marquee"): the Tamra-bound train's cabin screen demanding a sacrifice. An amber LED destination board, fixed palette (like card/terminal) so it reads the same on every theme. The .marquee-track span is injected by enhance.mjs — CSS cannot animate a bare text node. padding-left:100% parks the text just off the right edge, and translating the track by its own width (text + that padding) carries it fully off the left, so one cycle is a complete enter-cross-exit pass. Hover pauses it so the line can actually be read. */ .cbody > p.marquee { overflow: hidden; white-space: nowrap; margin: 1.7em 0; padding: 0.55em 0; border-top: 1px solid #7a4a12; border-bottom: 1px solid #7a4a12; background: #120c05; color: #ffb347; font-family: var(--ui); font-size: 0.94em; letter-spacing: 0.09em; text-shadow: 0 0 9px rgba(255, 150, 40, 0.5); } .cbody > p.marquee .marquee-track { display: inline-block; padding-left: 100%; animation: marquee-crawl 15s linear infinite; } .cbody > p.marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-crawl { to { transform: translateX(-100%); } } /* No crawl: show the whole line at rest, still on its sign. */ @media (prefers-reduced-motion: reduce) { .cbody > p.marquee { white-space: normal; text-align: center; padding: 0.55em 1em; } .cbody > p.marquee .marquee-track { display: inline; padding-left: 0; animation: none; } } /* Scroll / invitation (listed type "scroll", source frames it with +++): in-world "transformed text" — exhibition invitations, manual pages. An aged-parchment card in a formal serif. Fixed warm palette (like card/terminal) so it reads the same on every theme. The +++ glyph lines are hidden by enhance.mjs (.boxedge), so the box stands on its own. */ .cbody > p.scroll { margin: 0; border-left: 1px solid #b9a77f; border-right: 1px solid #b9a77f; background: #efe6d0; color: #3a2f1d; font-family: Georgia, "Times New Roman", serif; font-style: italic; text-align: left; padding: 0.4em 2.1rem 0.4em 1.3em; } .cbody > p.scroll-top { border-top: 1px solid #b9a77f; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-top: 1.5em; padding-top: 0.7em; box-shadow: 0 4px 14px rgba(70, 50, 20, 0.18); } .cbody > p.scroll-bot { border-bottom: 1px solid #b9a77f; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 1.5em; padding-bottom: 0.7em; box-shadow: 0 4px 14px rgba(70, 50, 20, 0.18); } /* Orphan box-edge glyph lines (+++, ===) that framed a listed block in the source: hidden. */ .cbody > p.boxedge { display: none; } .cbody > p { position: relative; } .cbody > p[id] { padding-right: 2.1rem; } /* reserved gutter so the badge never overlaps text */ .cp-btn { position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: inline-flex; align-items: center; gap: 0.18rem; height: 1.5rem; padding: 0 0.35rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.78rem; line-height: 1; opacity: 0; transition: opacity 0.15s, color 0.15s; } .cbody > p:hover .cp-btn, .cp-btn:focus-visible, .cp-btn.has { opacity: 1; } .cp-btn:hover { color: var(--accent); } .cp-btn.has { color: var(--accent); } .cp-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cp-n:empty { display: none; } .cbody > p.cp-active, .cbody > p:has(.cp-btn:hover) { box-shadow: -3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 2px; } .cp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(26rem, 100vw); display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.4); transform: translateX(100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s 0.22s; } .cp-panel.open { transform: none; visibility: visible; transition: transform 0.22s ease; } .cp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; } .cp-panel-close { background: 0; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .cp-panel-close:hover { color: var(--accent); } .cp-panel-intro { flex: 0 0 auto; margin: 0; padding: 0.7rem 1.1rem 0; color: var(--muted); font-size: 0.9rem; } .cp-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.1rem; -webkit-overflow-scrolling: touch; } .cp-empty { color: var(--muted); font-style: italic; font-size: 0.92rem; margin: 0.4rem 0 0; } /* The floating pill stays on screen while scrolling, so prev/next stay reachable mid-chapter. On mobile it's hidden behind the actionbar FAB (see the max-width:680 block) to save space. */ .chnav { display: flex; align-items: center; } .chnav-inline-top, .chnav-inline-bot { justify-content: space-between; gap: 1rem; } .chnav-inline-top { margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .chnav-inline-bot { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); } .chnav-inline-top a, .chnav-inline-bot a { color: var(--fg); font-weight: 600; text-decoration: none; white-space: nowrap; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.92rem; } .chnav-inline-top a:hover, .chnav-inline-bot a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .chnav-float { transition: opacity 0.2s, visibility 0.2s, transform 0.2s; position: fixed; left: 50%; top: calc(0.9rem + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; width: max-content; max-width: min(54rem, calc(100vw - 1.5rem)); justify-content: center; gap: 0.35rem; margin: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 1.6rem; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .chnav-float a { color: var(--fg); text-decoration: none; white-space: nowrap; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.9rem; } .chnav-float a:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); text-decoration: none; } .chnav-sel { max-width: 22rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.9rem; cursor: pointer; } .chnav-sel:hover { border-color: var(--accent); } /* Desktop: the floating pill auto-hides whenever an in-flow nav is on screen (chapter start / end), so the reader never sees two navs at once. chapter-nav.js toggles .chnav-hidden via an IntersectionObserver. (On mobile the pill is FAB-gated, so this never applies there.) */ @media (min-width: 681px) { .chnav-float.chnav-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-0.4rem); } } .chlist { list-style: none; margin: 0; padding: 0; } .chlist li { display: flex; align-items: center; border-bottom: 1px solid var(--border); } .chlist a { flex: 1; padding: 0.9rem 0.25rem; color: var(--fg); font-weight: 600; } .chlist a:hover { background: var(--card); text-decoration: none; } .chlist li.read a { color: var(--muted); } .toc-cc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.6rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; } .toc-cc:not(.has) { display: none; } .toc-cc.has { color: var(--accent); } .toc-cc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ch-toggle { flex: 0 0 auto; margin-left: 0.6rem; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; padding: 0.2rem 0.6rem; /* Fixed width so "Read" / "NN%" / "Unread" are all the same size — keeps the comment badge to its left aligned in a column across every row. */ min-width: 4.2rem; text-align: center; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); } .ch-toggle:hover { border-color: var(--accent); color: var(--accent); } .ch-toggle.is-read { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .ch-toggle.is-unread { opacity: 0.6; } .back { margin-top: 2rem; } .resume-slot { margin: 0 0 1.4rem; } .resume-card { display: block; text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; } .resume-card:hover { border-color: var(--accent); text-decoration: none; } .resume-k { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; color: var(--muted); } .resume-t { display: block; color: var(--fg); font-weight: 600; margin: 0.15rem 0 0.5rem; } .resume-bar { display: block; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; } .resume-bar > span { display: block; height: 100%; background: var(--accent); } .resume-p { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.35rem; } .comments { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; } .comments h2 { font-size: 1.1rem; color: var(--muted); } .splash { display: grid; place-items: center; padding: 2rem; position: relative; overflow: hidden; } .splash .card { position: relative; z-index: 2; max-width: 30rem; width: 100%; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .badge { display: inline-block; font-size: 0.68rem; letter-spacing: 0.25em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1.5rem; } .splash .cover { width: 200px; max-width: 70%; height: auto; margin: 0 auto 1.4rem; display: block; } .splash h1 { font-size: 1.7rem; margin: 0.3rem 0 1rem; } .disc { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 0.95rem; border-left: 0; margin: 0 0 1.8rem; padding: 0 0.5rem; } .cta { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; padding: 0.7rem 1.6rem; border-radius: 10px; letter-spacing: 0.02em; } .cta:hover { filter: brightness(1.1); text-decoration: none; } .scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06; background: repeating-linear-gradient(0deg, transparent 0 2px, var(--fg) 2px 3px); } .splash .card--wide { max-width: 64rem; } .parts { display: grid; /* Columns are at least 300px wide; auto-fit collapses to fewer columns (down to a single stacked column) as the viewport narrows. The min() guard keeps a 300px track from overflowing very small phones. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.6rem; margin: 1.8rem 0 0.5rem; } .part-cell { display: flex; flex-direction: column; gap: 0.5rem; } .part { display: flex; flex-direction: column; gap: 0.6rem; text-align: center; color: var(--fg); } .part-epub { align-self: center; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1.1rem; font-size: 0.95rem; text-decoration: none; } .part-epub:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .part:hover { text-decoration: none; } .part-img { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 80%, var(--bg)); /* placeholder when no image */ } .part-img img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.25s ease; } .part:not(.part--soon):hover .part-img { border-color: var(--accent); } .part:not(.part--soon):hover .part-img img { transform: scale(1.04); } .part-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.7rem 0.8rem; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); } .part-range { font-size: 0.95rem; color: var(--muted); } .part--soon { cursor: default; opacity: 0.55; } /* Newest part: accent glow + "New!" badge to draw the eye on launch. Flagged per-part via site.json ("new": true); move the flag to the next part when it drops. Glow pulses; badge sits top-right inside the cover. */ .part--new .part-img { border-color: var(--accent); animation: part-glow 2.4s ease-in-out infinite; } @keyframes part-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 14px -4px var(--accent); } 50% { box-shadow: 0 0 0 1px var(--accent), 0 0 26px 2px var(--accent); } } .part-badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; padding: 0.22rem 0.62rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em; color: #fff; background: var(--accent); /* Accents range from light grey to vivid green, so shadow the text for legibility instead of relying on white-on-accent contrast alone. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { .part--new .part-img { animation: none; box-shadow: 0 0 0 1px var(--accent), 0 0 18px -3px var(--accent); } } .site-foot { position: relative; z-index: 2; padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom)); } /* Pages with the floating actionbar (chapter/TOC) need extra bottom space so the icon row clears it when scrolled to the very bottom. */ body:has(.actionbar) .site-foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } .foot-links { display: flex; justify-content: center; gap: 0.4rem; } .foot-btn { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--muted); } .foot-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); text-decoration: none; } .foot-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .foot-btn svg.foot-brand { fill: currentColor; stroke: none; } .about-body { text-align: left; color: var(--muted); margin: 1.4rem 0 0.5rem; } .about-body p { margin: 0 0 1rem; } .about-body em { color: var(--fg); font-style: italic; } @media (max-width: 680px) { /* Stack the split TOC: cover on top, list below, and let the page scroll normally instead of the desktop viewport-locked internal scroll. */ .toc--split { grid-template-columns: 1fr; height: auto; padding-bottom: 7rem; } .toc-cover { align-self: center; } .toc-cover img { max-width: 320px; margin: 0 auto; } .toc--split .chlist { flex: none; overflow-y: visible; } .cbody > p[id] { padding-right: 1.9rem; } /* slimmer gutter; touch has no hover so show it faintly */ .cp-btn { opacity: 0.55; } .cp-panel { width: 100vw; } /* Mobile: collapse the actionbar + a floating chapter-nav behind one FAB toggle to save screen space. `body.nav-open` (set by the FAB) reveals them. The in-flow bottom nav stays as a no-JS / end-of-chapter fallback; the top nav is repurposed as the floating pill. */ .ab-toggle { display: grid; place-items: center; position: fixed; right: 1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 52; width: 2.9rem; height: 2.9rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); color: var(--fg); cursor: pointer; } .ab-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .actionbar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(0.5rem); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } body.nav-open .actionbar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%); } .chnav-float { position: fixed; left: 50%; top: calc(2rem + env(safe-area-inset-top)); transform: translateX(-50%) translateY(0.5rem); z-index: 50; width: max-content; max-width: calc(100vw - 1.5rem); justify-content: center; gap: 0.25rem; margin: 0; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 1.4rem; background: var(--card); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } body.nav-open .chnav-float { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%); } /* compact, tidy prev/next inside the floating pill (not link-blue) */ .chnav-float a { color: var(--fg); text-decoration: none; white-space: nowrap; padding: 0.4rem 0.55rem; border-radius: 999px; font-size: 0.85rem; } .chnav-float a:active { background: color-mix(in srgb, var(--fg) 12%, transparent); } .chnav-float .chnav-sel { max-width: 42vw; } } @media (max-width: 480px) { .chead h1 { font-size: 1.5rem; } .page { padding: 1.3rem 0.7rem 1.3rem 1.2rem; border-radius: 10px; } .chapter, .toc { padding: 1rem 0.8rem 7rem; } .parts { grid-template-columns: 1fr; } } /* The footer link to the Character Maker (/charmaker.html). The machine's own styles live in charmaker.css, loaded only on that page. */ .foot-brandline { display: block; width: fit-content; margin: 1.1rem auto 0; padding: 0.2rem 0.5rem; border: 0; background: none; font: inherit; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); opacity: 0.45; cursor: pointer; transition: opacity 0.4s, letter-spacing 0.4s; } .foot-brandline:hover, .foot-brandline:focus-visible { opacity: 0.9; letter-spacing: 0.3em; color: var(--accent); text-decoration: none; } /* Version line in the footer. Reader pages show the reader version; the Character Maker page shows only its own. The version is a button that reopens the changelog. */ .foot-version { margin: 0.6rem 0 0; text-align: center; } .foot-version-btn { border: 0; background: none; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); opacity: 0.75; cursor: pointer; transition: opacity 0.2s, color 0.2s; } .foot-version-btn:hover, .foot-version-btn:focus-visible { opacity: 1; color: var(--accent); text-decoration: underline; } /* "What's new" changelog modal, shared by the reader and the Character Maker (changelog-modal.js). Scoped to .clog-*; uses theme tokens so it fits every theme and both pages. */ .clog-root { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; } .clog-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); } .clog-box { position: relative; width: min(32rem, 100%); max-height: min(80vh, 40rem); display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--fg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: clog-in 0.22s ease both; } @keyframes clog-in { from { opacity: 0; transform: translateY(8px); } } .clog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--border); } .clog-head h2 { margin: 0; font-size: 1.02rem; font-weight: 700; } .clog-close { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; } .clog-close:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); } .clog-body { overflow-y: auto; padding: 0.4rem 1.2rem 1.2rem; } .clog-entry { margin-top: 0.9rem; } .clog-ver { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.35rem; font-weight: 700; color: var(--accent); } .clog-date { font-size: 0.72rem; font-weight: 400; color: var(--muted); } .clog-body ul { margin: 0; padding-left: 1.1rem; } .clog-body li { margin: 0.2rem 0; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .clog-box { animation: none; } }