/* ═══════════════════════════════════════════════════════════════════════════ Serial Reader A calm, high-contrast reading surface. Themes are swapped by setting data-theme on ; everything else reads from these custom properties. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bg: #11141b; --bg-raised: #171b24; --bg-sunken: #0d1016; --line: #262c38; --text: #e7eaf0; --text-dim: #9aa3b2; --text-faint: #6b7484; --accent: #7aa2f7; --accent-soft: #2a3550; --focus: #f7768e; --good: #9ece6a; --shadow: 0 18px 40px rgb(0 0 0 / 45%); --radius: 14px; --stage-font: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --word-size: clamp(2.6rem, 9vw, 5.5rem); --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-theme="ink"] { --bg: #000000; --bg-raised: #0b0b0d; --bg-sunken: #000000; --line: #1e1e22; --text: #f2f2f4; --text-dim: #9a9aa2; --accent: #8ab4f8; --accent-soft: #1d2433; } html[data-theme="paper"] { --bg: #f6f6f4; --bg-raised: #ffffff; --bg-sunken: #ececea; --line: #dcdcd6; --text: #16181d; --text-dim: #5a6070; --text-faint: #8b91a0; --accent: #2f5fd0; --accent-soft: #dde6fb; --focus: #c02b45; --shadow: 0 14px 34px rgb(20 24 34 / 12%); } html[data-theme="sepia"] { --bg: #f3e9d8; --bg-raised: #fbf4e7; --bg-sunken: #e9dcc6; --line: #ddcdb1; --text: #2f2618; --text-dim: #6b5c45; --text-faint: #8d7d64; --accent: #96551f; --accent-soft: #eddcc2; --focus: #a63f2b; --shadow: 0 14px 34px rgb(80 60 30 / 14%); } html[data-theme="contrast"] { --bg: #000000; --bg-raised: #000000; --bg-sunken: #000000; --line: #ffffff; --text: #ffffff; --text-dim: #e0e0e0; --text-faint: #c0c0c0; --accent: #ffd400; --accent-soft: #333300; --focus: #ffd400; } html[data-font="sans"] { --stage-font: var(--ui-font); } html[data-font="slab"] { --stage-font: "Roboto Slab", Rockwell, "Courier Bold", Georgia, serif; } html[data-font="mono"] { --stage-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } html[data-size="0"] { --word-size: clamp(1.9rem, 6vw, 3.2rem); } html[data-size="1"] { --word-size: clamp(2.2rem, 7.5vw, 4.2rem); } html[data-size="2"] { --word-size: clamp(2.6rem, 9vw, 5.5rem); } html[data-size="3"] { --word-size: clamp(3rem, 11vw, 6.8rem); } html[data-size="4"] { --word-size: clamp(3.4rem, 13vw, 8rem); } html[data-size="5"] { --word-size: clamp(3.8rem, 15vw, 9.5rem); } * { box-sizing: border-box; } /* Several components set their own `display`, which would otherwise beat the `hidden` attribute and leave an invisible panel swallowing clicks. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui-font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 620; letter-spacing: -0.01em; } p { margin: 0 0 .8em; } .muted { color: var(--text-dim); } .skip-link { position: absolute; left: -9999px; top: 0; padding: .6rem 1rem; background: var(--accent); color: #0b0d12; z-index: 100; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ── Buttons ──────────────────────────────────────────────────────────── */ button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } button:active { transform: translateY(1px); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .primary { background: var(--accent); color: #0b0d12; border-color: var(--accent); padding: .7rem 1.4rem; font-weight: 620; } .primary:hover { filter: brightness(1.08); } .primary.large { padding: .95rem 2.2rem; font-size: 1.05rem; border-radius: 12px; } .ghost { background: transparent; color: var(--text-dim); border-color: var(--line); padding: .5rem 1rem; } .ghost:hover { color: var(--text); border-color: var(--text-faint); } .ghost.small { padding: .35rem .7rem; font-size: .85rem; } .link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; } .icon { background: transparent; border: 1px solid transparent; color: var(--text-dim); width: 2.6rem; height: 2.6rem; display: grid; place-items: center; font-size: 1.05rem; } .icon:hover { color: var(--text); background: var(--bg-raised); } .icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon.play { background: var(--accent); color: #0b0d12; width: 3.4rem; height: 3.4rem; border-radius: 50%; } .icon.play svg { width: 24px; height: 24px; } .icon.play:hover { filter: brightness(1.08); } .icon.play .pause-icon { display: none; } body.playing .icon.play .play-icon { display: none; } body.playing .icon.play .pause-icon { display: block; } /* ── App bar ──────────────────────────────────────────────────────────── */ .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); } .brand { display: flex; align-items: center; gap: .6rem; background: none; border: none; color: var(--text); font-weight: 640; letter-spacing: -0.01em; padding: .2rem .3rem; } .brand-mark { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; } .app-bar-actions { display: flex; gap: .5rem; } main { padding: clamp(1.2rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem; } .view { max-width: 62rem; margin: 0 auto; } /* ── Library ──────────────────────────────────────────────────────────── */ .hero { max-width: 40rem; margin-bottom: 2rem; } .hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); letter-spacing: -0.03em; } .lede { color: var(--text-dim); font-size: 1.05rem; } .privacy { color: var(--text-faint); font-size: .9rem; } .dropzone { position: relative; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--bg-raised); padding: clamp(1.6rem, 5vw, 3rem); text-align: center; transition: border-color .15s ease, background-color .15s ease; } .dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); } .dropzone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } .dropzone-icon { width: 34px; height: 34px; fill: none; stroke: var(--text-faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .6rem; } .dropzone-title { font-size: 1.15rem; font-weight: 600; margin-bottom: .2rem; } .dropzone-hint { color: var(--text-dim); margin: 0; font-size: .95rem; } .import { margin-top: 1rem; } .import-label { color: var(--text-dim); font-size: .9rem; margin-bottom: .4rem; } .bar { height: 6px; background: var(--bg-sunken); border-radius: 99px; overflow: hidden; } .bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width .25s ease; } .error { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--focus); border-radius: 10px; background: color-mix(in srgb, var(--focus) 12%, transparent); color: var(--text); } .shelf-section { margin-top: 2.6rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .section-head h2 { font-size: 1.1rem; margin: 0; } .empty { color: var(--text-faint); font-size: .95rem; } .shelf { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; } .shelf-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; } .shelf-item .cover-thumb { width: 52px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--bg-sunken); display: grid; place-items: center; color: var(--text-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; } .shelf-item .cover-thumb img { width: 100%; height: 100%; object-fit: cover; } .shelf-title { font-weight: 600; margin: 0; } .shelf-meta { color: var(--text-dim); font-size: .85rem; margin: .15rem 0 .4rem; } .shelf-progress { height: 4px; background: var(--bg-sunken); border-radius: 99px; overflow: hidden; max-width: 22rem; } .shelf-progress span { display: block; height: 100%; background: var(--good); } .shelf-actions { display: flex; gap: .4rem; align-items: center; } /* ── Setup ────────────────────────────────────────────────────────────── */ .back { background: none; border: none; color: var(--text-dim); padding: .3rem 0; margin-bottom: .8rem; } .back:hover { color: var(--text); } .book-head { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; margin-bottom: 2rem; } .book-head h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); } .byline { color: var(--text-dim); margin: 0 0 .3rem; } .cover { width: 96px; height: 134px; border-radius: 8px; overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-faint); font-size: .75rem; } .cover img { width: 100%; height: 100%; object-fit: cover; } .resume-line { color: var(--good); font-size: .92rem; margin: .5rem 0 0; } .panel-grid { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .panel h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: .8rem; } .panel-hint { color: var(--text-faint); font-size: .85rem; } .choice-row { display: flex; flex-wrap: wrap; gap: .4rem; } .choice { background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text-dim); padding: .45rem .8rem; font-size: .9rem; } .choice:hover { color: var(--text); } .choice[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .choice-row.small .choice { font-size: .82rem; padding: .3rem .65rem; } .field { display: block; margin-top: .9rem; } .field > span { display: block; font-size: .85rem; color: var(--text-dim); margin-bottom: .35rem; } .field-group { margin-top: .2rem; } select, input[type="url"], input[type="file"] { width: 100%; font: inherit; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .6rem; } select { cursor: pointer; } input[type="range"] { width: 100%; appearance: none; background: transparent; margin: .4rem 0; } input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: var(--bg-sunken); border-radius: 99px; border: 1px solid var(--line); } input[type="range"]::-moz-range-track { height: 5px; background: var(--bg-sunken); border-radius: 99px; border: 1px solid var(--line); } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); } .slider-field output { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; } .summary { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-raised)); } .summary-headline { font-size: 1.15rem; font-weight: 640; margin-bottom: .2rem; } .summary-detail { color: var(--text-dim); margin-bottom: .4rem; } .summary-preview { color: var(--text-faint); font-family: var(--stage-font); font-size: .95rem; margin: 0; font-style: italic; } .start-row { display: flex; gap: .7rem; align-items: center; margin-top: 1.4rem; flex-wrap: wrap; } .contents { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line); } .contents li { border-bottom: 1px solid var(--line); } .contents button { width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); padding: .6rem .2rem; display: flex; justify-content: space-between; gap: 1rem; border-radius: 0; } .contents button:hover { color: var(--text); background: var(--bg-raised); } .contents .level-1 button { padding-left: 1.4rem; font-size: .92rem; } .contents .level-2 button { padding-left: 2.6rem; font-size: .88rem; } .contents .chapter-words { color: var(--text-faint); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── Reader ───────────────────────────────────────────────────────────── */ body.reading { overflow: hidden; } body.reading .app-bar { display: none; } body.reading main { padding: 0; } .reader { max-width: none; height: 100dvh; display: grid; /* minmax(0, 1fr) rather than 1fr: a grid column sizes to its content by default, and the stage holds a word that is not allowed to wrap, so a long one would widen the column past the viewport and simply be clipped by the overflow rule below. Capping it at 0 keeps the column the width of the screen, which is what the fit calculation measures against. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; overflow-x: hidden; } .reader-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2rem); opacity: .55; transition: opacity .3s ease; } .reader-head:hover, body:not(.playing) .reader-head { opacity: 1; } .reader-context { margin: 0; color: var(--text-dim); font-size: .85rem; text-align: center; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-head-actions { display: flex; gap: .4rem; } .stage { /* Flex rather than grid: the focus rules must keep a fixed width, not track the width of whichever word or sentence happens to be on screen. */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem clamp(1rem, 4vw, 2rem); position: relative; min-height: 0; width: 100%; min-width: 0; } .stage-inner { position: relative; width: min(100%, 46rem); text-align: center; } .guide { position: absolute; left: 50%; width: 1px; height: 14px; background: var(--text-faint); opacity: .5; transform: translateX(-50%); } .guide-top { top: -22px; } .guide-bottom { bottom: -22px; } html[data-guides="off"] .guide { display: none; } .stage-inner::before, .stage-inner::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); } .stage-inner::before { top: -22px; } .stage-inner::after { bottom: -22px; } html[data-guides="off"] .stage-inner::before, html[data-guides="off"] .stage-inner::after { display: none; } .word { font-family: var(--stage-font); font-size: var(--word-size); line-height: 1.12; margin: 0; letter-spacing: -0.015em; word-break: break-word; font-variant-ligatures: none; } .word-orp { color: var(--focus); } /* Pivot alignment: the two equal flex sides pin the focus letter to the centre line, so the eye never has to re-aim between flashes. The letter stays there for every word -- one too long to fit is split across flashes rather than moved, shrunk or re-centred. min-width: 0 matters more than it looks. A flex item defaults to min-width: auto, which refuses to size below its content, and these sides never wrap. Without it a long word forces its half wider than the free space allows and shoves the focus letter off the guide -- exactly the drift the pivot mode exists to remove. */ html[data-align="pivot"] .word { display: flex; justify-content: center; } html[data-align="pivot"] .word-pre { flex: 1 0 0; min-width: 0; text-align: right; white-space: pre; } html[data-align="pivot"] .word-post { flex: 1 0 0; min-width: 0; text-align: left; white-space: pre; } html[data-orp="off"] .word-orp { color: inherit; } .context { margin: 2.6rem auto 0; max-width: min(90vw, 40rem); color: var(--text-faint); font-family: var(--stage-font); font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.6; text-align: center; /* A fixed window, not min-height. The stage centres its column, so a sentence that wraps to four lines where the last one wrapped to two lifts the word off the guide line and the eye has to chase it. Three lines hold most sentences whole; a longer one pages inside this box while the word above stays exactly where it was. */ height: 4.8em; overflow: hidden; position: relative; } .context .now { color: var(--text-dim); } html[data-context="off"] .context { display: none; } .resume-hint { margin: 1.4rem 0 0; color: var(--text-faint); font-size: .88rem; text-align: center; } body.playing .resume-hint { visibility: hidden; } kbd { font: inherit; font-size: .82em; padding: .1em .4em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-raised); } .reader-foot { padding: .6rem clamp(1rem, 4vw, 2rem) max(1rem, env(safe-area-inset-bottom)); display: grid; gap: .6rem; justify-items: center; } .track { position: relative; width: min(100%, 46rem); height: 22px; display: flex; align-items: center; } .track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--bg-sunken); border-radius: 99px; } .track-fill { position: absolute; left: 0; height: 4px; width: 0%; background: var(--accent); border-radius: 99px; pointer-events: none; } .track-target { position: absolute; width: 2px; height: 12px; background: var(--good); border-radius: 2px; left: 100%; pointer-events: none; } .track-input, #track-input { position: absolute; left: 0; width: 100%; margin: 0; opacity: 0; height: 22px; cursor: pointer; } .transport { display: flex; align-items: center; gap: .3rem; } .readout { display: flex; gap: 1.2rem; color: var(--text-faint); font-size: .82rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; justify-content: center; } /* ── Drawers ──────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 45%); z-index: 40; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; } } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(24rem, 100vw); background: var(--bg-raised); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slide .22s ease; } @keyframes slide { from { transform: translateX(16px); opacity: 0; } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem .9rem 1.2rem; border-bottom: 1px solid var(--line); } .drawer-head h2 { margin: 0; font-size: 1rem; } .drawer-body { padding: 1rem 1.2rem 2.5rem; overflow-y: auto; } .switches { border: none; margin: 1.2rem 0 0; padding: 0; } .switches legend { font-size: .85rem; color: var(--text-dim); padding: 0 0 .4rem; } .switch { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .92rem; cursor: pointer; } .switch input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); } .shortcuts { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: .8rem; } .shortcuts summary { cursor: pointer; color: var(--text-dim); font-size: .9rem; } .shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .8rem 0 0; font-size: .85rem; } .shortcuts dt { color: var(--text-dim); } .shortcuts dd { margin: 0; color: var(--text-faint); } .preset-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; } .preset { width: 100%; text-align: left; background: var(--bg-sunken); border: 1px solid var(--line); color: var(--text-dim); padding: .7rem .9rem; } .preset:hover { color: var(--text); } .preset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .preset strong { display: block; color: var(--text); font-weight: 600; font-size: .95rem; } .preset span { font-size: .82rem; } .custom-source { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .4rem; } /* ── Finish dialog ────────────────────────────────────────────────────── */ .finish { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); color: var(--text); padding: 1.6rem; max-width: 26rem; box-shadow: var(--shadow); } .finish::backdrop { background: rgb(0 0 0 / 55%); } .finish h2 { font-size: 1.3rem; } .finish-detail { color: var(--text-dim); } .finish-stop { color: var(--text-faint); font-family: var(--stage-font); font-style: italic; font-size: .95rem; } .finish-actions { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; } /* ── Small screens ────────────────────────────────────────────────────── */ @media (max-width: 40rem) { .book-head { grid-template-columns: 1fr; } .cover { width: 76px; height: 106px; } .shelf-item { grid-template-columns: 44px 1fr; grid-template-areas: "cover body" "actions actions"; } .shelf-item .cover-thumb { width: 44px; height: 62px; grid-area: cover; } .shelf-actions { grid-area: actions; justify-content: flex-end; } .icon { width: 2.3rem; height: 2.3rem; } .icon.play { width: 3.1rem; height: 3.1rem; } .context { margin-top: 1.6rem; } .reader-head { gap: .35rem; padding: .6rem .8rem; } .reader-head .ghost.small { padding: .3rem .5rem; font-size: .78rem; } .reader-context { font-size: .76rem; } .transport { gap: .1rem; } .readout { gap: .8rem; font-size: .76rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }