:root {
  --ground: #12141a; --side: #181b22; --raised: #232733; --line: #262a33; --line2: #343947;
  --text: #d9dce3; --read: #d9d4c8; --head: #f2efe8; --muted: #a4abb8; --faint: #8c93a0;
  --accent: #f1b44c; --accent-dim: #8c7440; --on-accent: #12141a;
  --ok: #86c79f; --bad: #ee8f8f;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --top: 52px; --sidew: 296px; --fast: 140ms;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.reading { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--read); max-width: 660px; }
.work { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 760px; }

/* shell */
.stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
/* quiet pill nav, as the mockup's segmented control: muted text, the current area raised in accent */
.stc-nav { display: flex; align-items: center; gap: 2px; }
.stc-nav a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 16px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: background 120ms ease-out, color 120ms ease-out; }
.stc-nav a:hover { color: var(--text); }
.stc-nav a.active, .stc-nav a[aria-current="page"] { background: var(--raised); color: var(--accent); }
.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 680px) { .stc-nav { display: none; } }
.stc-shell { display: flex; align-items: flex-start; }
.stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); }
.stc-main { flex: 1; min-width: 0; padding: 44px 40px 0; }

/* pill */
.stc-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border: 1px solid var(--line2); border-radius: 18px; background: none; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.stc-pill:hover { background: var(--raised); }
.stc-pill--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.stc-pill--ghost { border-color: transparent; color: var(--muted); }
.stc-pill--ghost:hover { color: var(--text); }
.stc-pill:disabled { opacity: .45; cursor: default; }

/* segmented toggle */
.stc-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line2); border-radius: 20px; flex: none; }
.stc-seg button { border: 0; background: none; height: 28px; padding: 0 13px; border-radius: 16px; font-size: 12.5px; font-weight: 500; color: var(--faint); transition: background var(--fast), color var(--fast); }
.stc-seg button:hover { color: var(--text); }
.stc-seg button[aria-pressed="true"] { background: var(--raised); color: var(--head); }

/* progress */
.stc-bar { display: block; flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stc-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.stc-bar--dim > i { background: var(--accent-dim); }

/* floating action bar */
.stc-dock { position: sticky; bottom: 18px; z-index: 10; display: flex; width: max-content; max-width: 100%; margin: 56px auto 18px; gap: 4px; padding: 5px; background: var(--raised); border: 1px solid var(--line2); border-radius: 24px; box-shadow: 0 0 0 10px var(--ground); }
.stc-dock .stc-pill { height: 36px; border-color: transparent; }
.stc-dock .stc-pill:hover { background: var(--line2); }
.stc-dock .stc-pill--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }

/* cover */
.stc-cover { flex: none; position: relative; width: var(--cw, 44px); aspect-ratio: 3 / 4; border-radius: 6px; background: var(--cbg, var(--raised)); color: var(--cfg, var(--accent)); border: 1px solid color-mix(in srgb, var(--cfg, var(--accent)) 18%, transparent); overflow: hidden; font: 600 calc(var(--cw, 44px) * .34) / 1 var(--sans); letter-spacing: -.03em; display: flex; align-items: flex-end; padding: calc(var(--cw, 44px) * .12); }
.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 120ms ease-out; }
.stc-cover img[data-shown] { opacity: 1; }