/* ============================================================
   Lenton — PIXEL

   A pixel display face for chrome, and JetBrains Mono for everything that
   has to be read. Hairline borders, square corners, no shadows, plenty of
   air.

   Colour comes entirely from palettes.css (--p-*), so the same style
   works in all five schemes.

   Pixelify Sans is the open display face.
   ============================================================ */

:root {
  /* Chrome: brand, headings, labels, buttons — carries the pixel character. */
  --font-display: "Pixelify Sans", "DotGothic16", "Courier New", monospace;
  /* Reading: subtitles, sentences, definitions, notes. Legibility first.
     Per-glyph fallback covers the IPA that JetBrains Mono lacks. */
  --font-read: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --subtitle-default-font: var(--font-read);

  /* Semantic tokens, mapped from the active palette. */
  --bg: var(--p-bg);
  --surface: var(--p-surface);
  --surface-alt: var(--p-surface-alt);
  --sunken: var(--p-sunken);
  --ink: var(--p-ink);
  --ink-dim: var(--p-ink-dim);
  --ink-faint: var(--p-ink-faint);
  --accent: var(--p-accent);
  --accent-ink: var(--p-accent-ink);
  --highlight: var(--p-highlight);
  --highlight-ink: var(--p-highlight-ink);
  --line: var(--p-line);
  --line-strong: var(--p-line-strong);
  --edge: var(--p-edge);
  --good: var(--p-good);
  --bad: var(--p-bad);
  --scrim: var(--p-scrim);
  --subtitle-default-text: var(--ink);
  --subtitle-default-english: var(--ink-faint);

  --nav-h: 64px;
  --de-size: 32px;
  --en-size: 18px;
  --sub-scale: 1;
  --watch-main-max: 1500px;

  /* Shared with the softer theme: fast feedback, a calm deceleration, and
     enough travel to communicate hierarchy without making the UI float. */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-ui: 220ms;
  --motion-page: 340ms;
  --motion-slow: 480ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-standard: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------ base */

*, *::before, *::after {  border-radius: 0 !important; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {





  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-read);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Page changes should feel composed, not theatrical. Only paint properties
   and a few pixels of travel are animated, so nothing shifts in layout. */
main { animation: cdl-page-enter var(--motion-page) var(--motion-ease); }
header { animation: cdl-chrome-enter 180ms var(--motion-ease); }
.app-footer { animation: cdl-quiet-enter 260ms var(--motion-ease); }

@keyframes cdl-page-enter {
  from { opacity: 0; transform: translateY(5px); }
}
@keyframes cdl-chrome-enter {
  from { opacity: 0; transform: translateY(-3px); }
}
@keyframes cdl-quiet-enter { from { opacity: 0; } }

.app-footer {


  color: var(--ink-dim);
  border-top: 1px solid var(--line);
}
.app-footer-inner {



  padding: 24px 22px;




}
.footer-brand {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  text-decoration: none;

}
.footer-identity > span,
.footer-local { font-size: 11px; }
.footer-local {  text-align: right; }
.footer-local a { color: var(--ink); font-family: var(--font-display); font-size: 13px; }
/* Icons are drawn on a 16px grid — keep their edges hard. */
[data-icon] svg { image-rendering: pixelated; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion-fast) linear;
}
a:hover { color: var(--accent); }
::selection { background: var(--highlight); color: var(--highlight-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Display face, used only where it can't hurt reading. */
.brand, .hero h1, .page-head h1, .sheet-lemma, .word-lemma, .empty-state h2,
.pop-label, .panel h2, .sheet-block h4, nav a, .btn, .segmented button,
kbd, .word-tag, .meta, .kbd-hint, .count, .sheet-links, .word-body .where,
.stage-idle, .sheet-sub, .select-picker-button, .select-picker-label,
.search-picker input, .search-picker-options button {
  font-family: var(--font-display);
}

/* ------------------------------------------------------------ buttons */

button { font: inherit; color: var(--ink); background: none; border: none;  cursor: pointer; }

.btn {


  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition: background-color var(--motion-fast) linear,
              border-color var(--motion-fast) linear,
              color var(--motion-fast) linear;
}
.btn:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--ink-faint); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn [data-icon] { width: 14px; height: 14px; flex-shrink: 0; }

.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.12); }

.btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.danger:hover:not(:disabled) { filter: brightness(1.1); }

.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-dim); }
.btn.quiet:hover:not(:disabled) { color: var(--ink); background: var(--surface-alt); border-color: var(--line); }

.btn.small { padding: 4px 11px; font-size: 12px; }

.icon-btn {





  color: var(--ink-faint);
  border: 1px solid transparent;
  transition: background-color var(--motion-fast) linear,
              border-color var(--motion-fast) linear,
              color var(--motion-fast) linear;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-alt); border-color: var(--line); }
.icon-btn.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.icon-btn [data-icon] { width: 16px; height: 16px; display: block; }
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.segmented button:active:not(:disabled) { transform: translate(1px, 1px); }

[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ fields */

input[type="text"], input[type="search"], textarea {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-read);
  font-size: inherit;
  letter-spacing: inherit;
  padding: 0;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus { outline: none; }

.field {




  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.field:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field [data-icon] { width: 13px; height: 13px; color: var(--ink-faint); flex-shrink: 0; }
.field input { font-size: 14px; }

/* A square switch: the knob steps across, it doesn't glide. */
.switch {
  appearance: none;
  -webkit-appearance: none;


  width: 42px;
  height: 22px;

  cursor: pointer;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
}
.switch::after {
  content: "";



  width: 16px;
  height: 16px;
  background: var(--ink-faint);
  transition: left 0.12s steps(3, end), background-color 0.12s linear;
}
.switch:checked { border-color: var(--accent); }
.switch:checked::after { left: 22px; background: var(--accent); }

.segmented {   border: 1px solid var(--line-strong); }
.segmented button {
  min-width: 36px;
  padding: 4px 9px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  border-right: 1px solid var(--line-strong);
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { color: var(--ink); background: var(--surface-alt); }
.segmented button.on { color: var(--accent-ink); background: var(--accent); }

/* ------------------------------------------------------------ nav */

header {




  /* One row: with wrap enabled flexbox moves the nav to a second line
     instead of shrinking the field, which made the header taller on the
     watch page than on the vocabulary page. */
  flex-wrap: nowrap;



  padding: 10px 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.brand {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;


}
.brand:hover { color: var(--accent); }
.brand::after {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
}
nav { position: relative; gap: 3px; }
nav a {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
  padding: 7px 10px;
  border: 0;
}
nav a:hover { color: var(--ink); background: var(--surface-alt); }
nav a.on { color: var(--ink); }
nav a[aria-current="page"]::after,
nav a.on::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 1px;
  background: var(--ink);
  pointer-events: none;
}

.nav-sep {  height: 18px; background: var(--line); margin: 0 6px; }

.nav-settings {


  border-left-color: var(--line);
}
.nav-settings.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.nav-profile::before { content: "";      background: var(--line); transform: translateY(-50%); }
.nav-profile > .icon-btn { width: 34px; height: 34px; color: var(--ink-dim); border: 0; }
.nav-profile > .icon-btn [data-icon] { width: 16px; height: 16px; }
.nav-profile > .icon-btn:hover { color: var(--accent-ink); background: var(--accent); }
.nav-profile > .icon-btn.on { color: var(--accent-ink); background: var(--accent); }
.profile-popover { width: 260px; }
.profile-summary {    padding: 12px 10px 10px; }
.profile-avatar { width: 38px; height: 38px;     color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); }
.profile-avatar [data-icon] { width: 19px; height: 19px; }
.profile-summary strong { font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.profile-summary small { color: var(--ink-faint); font-size: 11px; }
.profile-note { margin: 7px 10px 9px; color: var(--ink-faint); font-size: 11px; line-height: 1.5; }

/* Watch-only actions live below the stable app bar. */
.watch-toolbar {
  --watch-control-height: 42px;





  margin-bottom: 22px;

  border-bottom: 1px solid var(--line);
}
.vocab-anki-menu .popover { top: calc(100% + 8px); }

/* ------------------------------------------------------------ popover */

.popover {

  top: calc(100% + 9px);

  width: 296px;
  max-height: calc(100dvh - var(--nav-h) - 18px);



  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--ink-faint);
}
.popover:not([hidden]) {
  transform-origin: top right;
  animation: cdl-popover-enter var(--motion-ui) var(--motion-ease);
}
@keyframes cdl-popover-enter {
  from { opacity: 0; transform: translateY(-4px); }
}
.pop-label {
  padding: 10px 10px 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.pop-row {




  padding: 7px 10px;
  font-size: 14px;
}
.pop-row label { cursor: pointer; }
.pop-hr {  margin: 7px 10px; background: var(--line); }
.pop-more {



  padding: 8px 10px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
}
.pop-more:hover { color: var(--ink); background: var(--surface-alt); border-color: var(--line); }

.caption-center {
  margin: 5px 3px 7px;
  background: var(--sunken);
  border: 1px solid var(--line-strong);
}
.caption-center-head {
  min-height: 31px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}
.caption-center-state {
  color: var(--ink-faint);
  font: 500 10px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.caption-track-row {
  min-height: 48px;
  gap: 8px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.caption-track-lang {
  width: 30px;
  height: 24px;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font: 500 11px/1 var(--font-display);
}
.caption-track-copy strong {
  color: var(--ink);
  font: 500 13px/1.25 var(--font-read);
}
.caption-track-copy small {
  margin-top: 2px;
  color: var(--ink-faint);
  font: 500 10px/1.25 var(--font-read);
}
.caption-track-action {
  min-height: 30px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font: 500 11px/1 var(--font-display);
}
.caption-track-action:not(:disabled):hover {
  color: var(--surface);
  background: var(--ink);
}
.caption-display-controls {
  padding: 4px 0;
  background: var(--surface);
}
.caption-display-controls .pop-row { padding-block: 5px; }

@media (max-height: 720px) {
.pop-row { padding-block: 5px; }
.caption-track-row { min-height: 43px; padding-block: 5px; }
.caption-display-controls .pop-row { padding-block: 4px; }
}

/* ------------------------------------------------------------ layout */

main {

  grid-template-columns: minmax(0, 1fr) 310px;



  padding-block: 44px 90px;
}
@media (max-width: 1100px) {
}

/* ------------------------------------------------------------ hero */

.hero { max-width: 780px;  padding: clamp(50px, 12vh, 130px) 4px; }
.hero h1 {

  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.hero h1 em {  font-style: normal; color: var(--ink-faint); }
.hero p {
  margin: 28px 0 0;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
}
/* ------------------------------------------------------------ video */

.player-wrap {





  background: #000;

  border: 1px solid var(--line-strong);
}
.player-wrap iframe {   border: 0;  }
/* ------------------------------------------------------------ stage
   The German is the most-read text in the app: mono, generous, unstyled. */

.stage {



  gap: 0.5em;
  padding: clamp(14px, 2.4vh, 28px) 4px 0;
  height: calc(
    clamp(14px, 2.4vh, 28px)
    + (var(--de-size) * var(--sub-scale) * 4.26)
    + (var(--en-size) * var(--sub-scale) * 3.1)
    + 12px
  );


  text-align: center;
}
.sub-de {

  font-family: var(--font-read);
  font-size: calc(var(--de-size) * var(--sub-scale));
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.02em;

}
.sub-en {

  font-family: var(--font-read);
  font-size: calc(var(--en-size) * var(--sub-scale));
  line-height: 1.55;
  color: var(--ink-faint);
  letter-spacing: -0.01em;
}
.stage-idle { color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }

.w { cursor: pointer; padding: 0 0.05em; margin: 0 -0.03em; }
.w:hover { background: var(--word-hover-highlight, var(--highlight)); color: var(--word-hover-highlight-ink, var(--highlight-ink)); }
.w.saved { box-shadow: inset 0 -0.1em 0 var(--word-saved-custom, var(--good)); }
/* Vocabulary at the level you are working towards but have not saved yet.
   Underlined like a known word so the two read as one system, in a different
   colour so the distinction is immediate: green you know, purple you should. */
.w.in-level { box-shadow: inset 0 -0.1em 0 var(--word-level, #7c5cff); }
.w.active { background: var(--word-hover-highlight, var(--highlight)); color: var(--word-hover-highlight-ink, var(--highlight-ink)); }
.w.in-phrase { background: var(--word-hover-highlight, var(--highlight)); color: var(--word-hover-highlight-ink, var(--highlight-ink)); }
/* A saved phrase is underlined the way a saved word is, but as one unbroken
   line: each word after the first stretches its box leftwards over the space,
   exactly as the drag-selection highlight does. */
.w.saved-phrase { box-shadow: inset 0 -0.1em 0 var(--word-saved-custom, var(--good)); }
/* The bar finishes flush with the first and last glyphs. Padding and margin
   still sum to the same value as an unselected word, so nothing shifts. */

/* Bridged rightwards, never leftwards. Inline boxes paint in document order,
   so a background reaching left lands on top of the previous word's letters
   and swallows them. Reaching right slides under the next word's text, which
   paints afterwards and stays legible. Padding and margin still sum to an
   unselected word's, so nothing shifts. */
.w.in-phrase-join, .w.saved-phrase-join { padding-inline-end: 0.8em; margin-inline-end: -0.78em; }
/* The run's outer ends keep a plain word's padding, so a highlighted phrase
   is padded exactly like a single highlighted word. Only the joins between
   words are adjusted. */

/* A selected run should read as one continuous highlight, not a row of
   separate blocks. The words are individual elements with a space between
   them, so each word after the first extends its background leftwards far
   enough to cover that gap. The padding cancels the negative margin, so the
   text does not move; `+` skips the whitespace text node, so this only ever
   applies between two selected words and the overshoot can never paint
   outside the run. */

.word-hover-translation {
  color: var(--word-tooltip-text, var(--bg));
  background: var(--word-tooltip-bg, var(--ink));
  border: 1px solid var(--line-strong);
  box-shadow: none;
  font: 500 14px/1.35 var(--font-read);
  letter-spacing: 0;
  animation: word-tooltip-in 0.12s ease both;
}

@keyframes word-tooltip-in { from { opacity: 0; } }

/* ------------------------------------------------------------ meta */

.meta {



  gap: 22px;
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-faint);
}
.meta .title {

  font-family: var(--font-read);
  font-size: 13px;
  letter-spacing: -0.01em;


  color: var(--ink);
}
.meta .channel { color: var(--ink-dim); }
.meta-label {

  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.meta-group > span:not(.meta-label) { color: var(--ink-dim); }
.meta-group .resume, .meta-captions b { color: var(--ink); font-weight: 500; }
.meta-captions b {  width: 22px; font-family: var(--font-display); }
.kbd-hint {




  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-faint);
}
.shortcut-help-trigger { color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-display); }
.shortcut-help-trigger:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.shortcut-sheet { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.shortcut-sheet::backdrop { background: var(--scrim); }
.shortcut-sheet .eyebrow { color: var(--ink-faint); font: 500 11px/1.4 var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.shortcut-sheet h2 { font: 500 28px/1.1 var(--font-display); }
.shortcut-sheet-group h3 { color: var(--ink-faint); font: 500 10px/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.shortcut-sheet-row { color: var(--ink-dim); font-size: 12px; border-bottom: 1px solid var(--line); }
.shortcut-sheet-keycaps kbd { color: var(--ink); background: var(--surface-alt); border: 1px solid var(--line-strong); font: 500 13px/1 var(--font-display); }
.shortcut-sheet-note { color: var(--ink-faint); font-size: 11px; }
.shortcut-sheet-note a { color: inherit; }
.shortcut-sheet-note a:hover { color: var(--accent); }
.shortcut-group {    padding: 0 18px; border-left: 1px solid var(--line); }
.shortcut-group:first-child {  border-left: 0; }
.shortcut-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.shortcut-list {   gap: 8px 13px; }
.shortcut {     color: var(--ink-dim); }
kbd {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;

  font-size: 11px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px solid var(--line-strong);
}

@media (max-width: 920px) {
.shortcut-group {  border-left: 0; border-top: 1px solid var(--line); }
  .shortcut-group:first-child {  border-top: 0; }
}

@media (max-width: 560px) {
}

/* ------------------------------------------------------------ notices */

.notice {

  padding: 18px 20px;




  font-size: 14px;
  background: var(--sunken);
  border: 1px solid var(--line-strong);
}
.notice.bad { border-color: var(--bad); }
.notice p {   min-width: 240px; color: var(--ink-dim); line-height: 1.6; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice code { font-size: 13px; padding: 1px 5px; background: var(--surface-alt); border: 1px solid var(--line); }

.bar { width: 100%; height: 10px;  padding: 1px; background: var(--surface-alt); border: 1px solid var(--line-strong); }
.bar i {



  background-color: var(--accent);
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, var(--sunken) 5px 6px);
  transition: width 0.3s steps(10, end);
}

/* ------------------------------------------------------------ transcript */

.panel {  top: calc(var(--nav-h) + 44px); }
.panel h2 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.transcript {
  max-height: calc(100vh - var(--nav-h) - 140px);


  border: 1px solid var(--line);
}
.transcript div {


  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.transcript div:last-child { border-bottom: none; }
.transcript div:hover { background: var(--surface-alt); color: var(--ink); }
.transcript div.on { background: var(--highlight); color: var(--highlight-ink); }
.transcript time {  font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.7; }

.transcript::-webkit-scrollbar { width: 11px; }
.transcript::-webkit-scrollbar-track { background: var(--surface-alt); }
.transcript::-webkit-scrollbar-thumb { background: var(--ink-faint); }

.game-task-list { scrollbar-color: var(--ink-faint) var(--surface-alt); }
.game-task-list::-webkit-scrollbar { width: 9px; }
.game-task-list::-webkit-scrollbar-track { background: var(--surface-alt); }
.game-task-list::-webkit-scrollbar-thumb { background: var(--ink-faint); }

/* ------------------------------------------------------------ word sheet */

.sheet-scrim {



  background: var(--scrim);



  padding: 22px;
}
.sheet {
  width: min(470px, 100%);


  padding: 30px 30px 24px;
  background: var(--surface);
  border: 1px solid var(--ink-faint);
}
.sheet-scrim { animation: cdl-scrim-enter var(--motion-ui) ease-out; }
.sheet-scrim .sheet { animation: cdl-sheet-enter 190ms var(--motion-ease); }
@keyframes cdl-scrim-enter { from { opacity: 0; } }
@keyframes cdl-sheet-enter {
  from { opacity: 0; transform: translateY(5px); }
}

dialog[open] { animation: cdl-sheet-enter 190ms var(--motion-ease); }
dialog[open]::backdrop { animation: cdl-scrim-enter var(--motion-ui) ease-out; }

.sheet-lemma {  font-size: 38px; line-height: 1.1; font-weight: 400; letter-spacing: -0.025em; }
.sheet-sub {
  margin: 12px 0 0;


  gap: 4px 12px;

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.sheet-sub .ipa { font-family: var(--font-read); text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.sheet-gloss { margin: 22px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: -0.015em; }
.sheet-source {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font: 10px/1.5 var(--font-read);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sheet-source strong { color: var(--ink-dim); font-weight: inherit; }
.sheet-source strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--good); vertical-align: 1px; }
.sheet-source span { color: var(--ink-faint); }
.sheet-source.is-fallback strong::before { background: var(--warn); }
.sheet-source.is-loading strong::before { background: var(--ink-faint); }
.sheet-progressive-lines i {
  background: linear-gradient(90deg, var(--surface-alt), var(--line), var(--surface-alt));
  background-size: 220% 100%;
  animation: sheet-progressive-pulse 1.35s ease-in-out infinite;
}
@keyframes sheet-progressive-pulse { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="off"]) .sheet-progressive-lines i { animation: none; }
}
html[data-reduced-motion="on"] .sheet-progressive-lines i { animation: none; }
.sheet-block { margin-top: 24px; }
.sheet-block h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.sheet-block p {  font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.sheet-block ol, .sheet-block ul {  padding-left: 19px; font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.sheet-block li::marker { color: var(--ink-faint); }

.anki-example-input {




  padding: 9px 10px;

  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line-strong);
}
.anki-example-input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.anki-example-source { font: 500 10px/1 var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.anki-example-generate { min-height: 32px; padding: 6px 9px 7px; }
.anki-example-help {  font-size: 11px !important; color: var(--ink-faint) !important; }
.anki-example-help.bad { color: var(--bad) !important; }
.vocab-anki-example {  padding: 12px; border: 1px solid var(--line); }
.vocab-anki-example > label { font-family: var(--font-display); font-size: 12px; color: var(--ink-dim); }
.sheet-actions {     margin-top: 30px; }
.sheet-actions .btn {  padding-inline: 10px;  }
.sheet-action-status {  color: var(--ink-dim); font-size: 12px; line-height: 1.5; }
.sheet-action-status.bad { color: var(--danger); }
.sheet-loading {  text-align: center; color: var(--ink-faint); font-size: 14px; }
.sheet-links {



  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sheet-links a { text-decoration: none; color: var(--ink-faint); }
.sheet-links a:hover { color: var(--ink); }

/* ------------------------------------------------------------ vocabulary */

main.vocabulary-main { padding-top: clamp(42px, 8vh, 88px); }
.vocabulary-head { margin-bottom: 34px; }
.vocabulary-head .eyebrow { font-family: var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.vocabulary-head h1 { font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px); line-height: 1; font-weight: 500; }
.vocabulary-head > p:last-child { color: var(--ink-dim); }

.vocab-tools {
  max-width: none;
  margin: 0;
  padding-bottom: 12px;
}
.vocab-tools .field { flex: 1 1 190px; max-width: 280px; }
.vocab-tools .field,
.vocab-tools #seg-filter,
.vocab-tools > a .btn,
.vocab-tools .vocab-anki-menu > .btn { height: 38px; }
.vocab-tools .count { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint); }
.vocab-tools a { text-decoration: none; }

.words { max-width: none; }
.word { padding: 26px 2px; border-top: 1px solid var(--line); }
.word:last-child { border-bottom: 1px solid var(--line); }

.word-lemma { font-size: 25px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.word-gloss { font-size: 15px; color: var(--ink-dim); }
.word-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint); padding: 2px 6px; border: 1px solid var(--line-strong); }
.word-ipa { font-family: var(--font-read); font-size: 12px; color: var(--ink-faint); }

/* Fade each button, not the container: a parent's opacity applies to its whole
   subtree, so a child could never opt back in — which left the star and the
   "already in Anki" marker invisible until you hovered the row. */
.word-actions .icon-btn { opacity: 0; transition: opacity 0.15s linear; }
.word:hover .word-actions .icon-btn,
.word:focus-within .word-actions .icon-btn { opacity: 1; }
/* State markers always show — they carry information, not just an action. */
.word-actions .icon-btn.starred,
.word-actions .icon-btn.synced { opacity: 1; }
.word-actions .starred { color: var(--accent); }

.word-body {  font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.word-body .quote { margin-top: 13px; padding-left: 13px; border-left: 2px solid var(--line-strong); font-size: 15px; color: var(--ink); }
.word-body .quote strong { font-weight: 600; }
.word-body .sub { color: var(--ink-faint); }
.word-body .where { margin-top: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint); }
.word-body .where a { text-decoration: none; }
.word-body .where a:hover { color: var(--ink); text-decoration: underline; }
.word-encounters-toggle {
  color: var(--ink-dim);
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.word-encounters-toggle:hover { color: var(--ink); background: var(--surface-alt); }
.word-encounters-toggle span,
.encounter-section-head > span,
.encounter-meta,
.encounter-source,
.anki-provenance-meta {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .07em;
}
.encounter-section-head h3 { color: var(--ink); font-size: 14px; font-weight: 500; }
.anki-provenance { border-bottom: 1px solid var(--line); }
.anki-provenance blockquote,
.encounter-item blockquote { color: var(--ink); font-style: normal; }
.anki-provenance blockquote span,
.encounter-item blockquote span { color: var(--ink-faint); font-weight: 400; }
.encounter-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.encounter-item:last-child::before { display: none; }
.encounter-marker { background: var(--ink-faint); }
.encounter-item.used-for-anki .encounter-marker { background: var(--good); }
.encounter-meta strong { color: var(--good); font-weight: 500; }
.encounter-surface,
.encounter-meaning { color: var(--ink-dim); }
.encounter-source a { color: var(--ink-dim); text-decoration: none; }
.encounter-source a:hover { color: var(--ink); text-decoration: underline; }
.encounter-loading,
.encounter-muted { color: var(--ink-faint); }
.encounter-error { color: var(--bad); }

.word-note {


  padding: 9px 11px;

  font-size: 13px;
  line-height: 1.6;

  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
}
.word-note:hover { border-color: var(--line); }
.word-note.filled { background: var(--sunken); border-color: var(--line); }
.word-note:focus { background: var(--sunken); border-color: var(--accent); color: var(--ink); }

.empty-state {   padding: clamp(60px, 14vh, 130px) 20px; text-align: center; }
.empty-state h2 {  font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.empty-state p { margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-dim); }

/* ============================================================ focus */

body.focus {
  --sub-scale: 1.2;

  background: var(--sunken);
}
body.focus header {

  transform: translateY(-100%);
  opacity: 0;

}
body.focus section {


  padding: clamp(16px, 3vh, 44px) clamp(18px, 4vw, 76px);
}
body.focus .watch-toolbar {
  transition: opacity 0.25s ease;
}
body.focus .watch-actions > .anchor > .icon-btn {
  background: var(--surface);
}
#focus-exit {

  top: 16px;
  right: 16px;


  opacity: 0;
  background: var(--surface);
  transition: opacity 0.25s ease;
}
body.focus.pointer-active #focus-exit,
body.focus:has(.watch-toolbar:focus-within) #focus-exit { opacity: 1; }

/* ------------------------------------------------------------ anki controls */

/* words.js sets this inline on the delete confirm; alias it so the name
   resolves in both styles. */
:root { --danger: var(--p-bad); }

select {
  appearance: none;
  -webkit-appearance: none;


  padding: 6px 28px 6px 9px;

  font-family: var(--font-read);
  font-size: 13px;
  line-height: 1.2;

  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
select:hover { background: var(--surface-alt); }
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.select-wrap::after {
  content: "";


  right: 10px;
  width: 8px;
  height: 5px;
  background: var(--ink-dim);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(-40%);

}
.select-picker-button {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font: 13px/1.2 var(--font-read);
  cursor: pointer;
}
.select-picker-button:hover:not(:disabled) { background: var(--surface-alt); }
.select-picker:focus-within .select-picker-button { border-color: var(--edge); }
.select-picker-chevron {
  color: var(--ink-dim);
  border-left: 1px solid var(--line);
}
.select-picker-button:hover .select-picker-chevron,
.select-picker.open .select-picker-chevron { color: var(--ink); }

/* ------------------------------------------------------------ settings page */

main.settings-main {
  padding-top: clamp(42px, 8vh, 88px);
}
.settings-head { padding: 0 0 34px; }
.settings-head .eyebrow {

  font-family: var(--font-display);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.settings-head h1 {

  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1;
  font-weight: 500;
}
.settings-head > p:not(.eyebrow):not(.settings-feedback) {  color: var(--ink-dim); }
.settings-feedback {


  font-size: 12px;
  color: var(--ink-dim) !important;
}
.settings-feedback::before { content: "✓ "; color: var(--good); }
.settings-feedback[data-state="saving"]::before { content: "… "; color: var(--accent); }
.settings-feedback[data-state="error"] { color: var(--bad) !important; }
.settings-feedback[data-state="error"]::before { content: "! "; color: var(--bad); }
.settings-section {

  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 34px;
  padding: 30px 0;
  border-top: 1px solid var(--line-strong);
}
.settings-section-head h2 {

  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
}
.settings-section-head p {  color: var(--ink-faint); font-size: 13px; }
.setting-row {




  min-height: 46px;

  border-bottom: 1px solid var(--line);
}
.setting-note { margin: 10px 0 0; color: var(--ink-dim); font-size: 12px; }
.setting-note.bad { color: var(--bad); }
.shortcut-group-label { color: var(--ink-faint); font: 500 11px/1.4 var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.shortcut-area { background: transparent; }
.shortcut-area-head { border: 0; }
.shortcut-area-head h3 { font: 500 19px/1.2 var(--font-display); }
.shortcut-area-head span { color: var(--ink-faint); font: 500 10px/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.shortcut-reset:disabled { opacity: .28; cursor: default; }
.shortcut-capture {
  padding: 5px 8px 8px;
  background: var(--surface-alt);
  border-color: var(--line);
}
.shortcut-keycap {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 3px 0 var(--line-strong);
  font: 500 15px/1 var(--font-display);
}
.shortcut-capture:hover .shortcut-keycap,
.shortcut-capture:active .shortcut-keycap {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line-strong);
}
.shortcut-capture:focus { border-color: var(--accent); }
.shortcut-capture:focus .shortcut-keycap { color: var(--accent); border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.shortcut-capture.is-capturing { color: var(--accent); border-style: dashed; }
.shortcut-capture-prompt { font-family: var(--font-display); }
.third-party-preview { background: #111319; border: 1px solid var(--line-strong); }
.third-party-preview[data-target="website"] { background: var(--bg); }
.third-party-preview .preview-de {
  color: var(--third-text);
  background: var(--third-bg);
  font: 500 var(--third-size)/1.35 var(--font-read);
}
.third-party-preview .preview-en {
  color: var(--third-en-text);
  background: var(--third-bg);
  font: 400 var(--third-en-size)/1.35 var(--font-read);
}
.third-party-preview[data-font="pixel"] > span { font-family: var(--font-display); }
.third-party-preview[data-font="system"] > span { font-family: system-ui, sans-serif; }
.third-party-preview mark { color: inherit; background: transparent; }
.third-party-preview mark:hover,
.third-party-preview mark:focus { color: var(--third-highlight-ink); background: var(--third-highlight); }
.third-party-preview mark.known::after { background: var(--third-known); }
.third-party-preview mark.level::after { background: var(--third-level); }

/* The level badge on the word card, in the same colour as the underline that
   put the word there. */
.sheet-level {
  color: var(--word-level, #7c5cff);
  border: 1px solid currentColor;
  padding: 0 5px;
  font: 500 11px/1.6 var(--font-display);
  letter-spacing: .08em;
}
.preview-hover-tooltip { border: 1px solid var(--line-strong); font-family: var(--font-read); }
.range-setting output { color: var(--ink-faint); font-size: 11px; }
.range-setting input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.range-setting input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(
    to right,
    var(--range-fill, var(--accent)) 0 var(--range-progress, 50%),
    var(--surface-alt) var(--range-progress, 50%) 100%
  );
  border: 1px solid var(--line-strong);
}
.range-setting input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
  margin-top: -7px;
  background: var(--surface);
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 var(--line-strong);
}
.range-setting input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--highlight);
}
.range-setting input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
}
.range-setting input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--range-fill, var(--accent));
  border-block: 1px solid var(--line-strong);
}
.range-setting input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 18px;
  background: var(--surface);
  border: 2px solid var(--edge);
  box-shadow: 2px 2px 0 var(--line-strong);
}
.range-setting input[type="range"]:hover::-moz-range-thumb {
  background: var(--highlight);
}
.color-input { background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; }

.search-picker input {



  padding: 7px 38px 7px 10px;

  font: 13px/1.2 var(--font-display);

  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.search-picker input:focus { outline: none; }
.search-picker:focus-within input { border-color: var(--edge); }
.search-picker:focus-within .search-picker-toggle {
  color: var(--ink);
  border-left-color: var(--edge);
}
.search-picker-toggle {







  color: var(--ink-dim);
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
}
.search-picker-toggle:hover { color: var(--ink); background: var(--surface-alt); }
.search-picker-options {


  top: calc(100% + 5px);





  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.popover .search-picker-options { width: 100%; }
.search-picker-options button {



  padding: 8px 10px;

  font: 12px/1.35 var(--font-read);
  text-align: left;


  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.search-picker-options button:hover,
.search-picker-options button.active { background: var(--surface-alt); color: var(--ink); }
.search-picker-options button[aria-selected="true"]::before {
  content: "✓";
  display: inline-block;
  width: 18px;
  color: var(--good);
}
.search-picker-empty {  padding: 12px 10px; color: var(--ink-faint); font-size: 12px; }

.restore-dialog {




  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.caption-editor {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.caption-editor::backdrop { background: var(--scrim); }
.caption-editor .eyebrow { color: var(--ink-faint); font: 500 11px/1.4 var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.caption-editor h2 { font: 500 30px/1.1 var(--font-display); }
.caption-editor-intro, .caption-editor-field small { color: var(--ink-dim); font-size: 12px; }
.caption-editor-summary span { color: var(--ink-faint); font: 500 11px/1.4 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.caption-editor-summary strong { color: var(--ink); font: 500 13px/1.45 var(--font-read); }
.caption-editor-field strong { font: 500 14px/1.3 var(--font-display); }
.caption-editor-field textarea { padding: 12px; color: var(--ink); background: var(--sunken); border: 1px solid var(--line-strong); font: 500 15px/1.5 var(--font-read); }
.caption-editor-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.caption-source-reset { color: var(--ink-dim); font: 500 11px/1.3 var(--font-display); }
.caption-source-reset:hover { color: var(--accent); }
.caption-editor-status { color: var(--ink-dim); font-size: 12px; }
.caption-editor-status.bad { color: var(--bad); }
.restore-dialog::backdrop { background: var(--scrim); }
.restore-dialog .eyebrow {  color: var(--ink-faint); text-transform: uppercase; }
.restore-dialog h2 {  font: 500 28px/1.1 var(--font-display); }
.restore-intro {  color: var(--ink-dim); font-size: 13px; }
.restore-summary {  border-top: 1px solid var(--line-strong); }
.restore-summary > div {




  border-bottom: 1px solid var(--line);
}
.restore-summary dt { color: var(--ink-faint); }
.restore-summary dd {   text-align: right; }
.restore-warning {  padding-left: 11px; color: var(--ink-dim); border-left: 3px solid var(--accent); font-size: 12px; }
@media (max-width: 700px) {
}

/* ------------------------------------------------------------ statistics page */

main.statistics-main {


  padding-top: clamp(42px, 8vh, 88px);
}
.statistics-head {  margin-bottom: 38px; }
.statistics-head .eyebrow,
.statistics-panel .eyebrow {

  font-family: var(--font-display);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.statistics-head h1 {

  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1;
  font-weight: 500;
}
.statistics-head > p:last-child {  color: var(--ink-dim); }
.stat-grid {


  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.stat-card {
  min-height: 172px;



  background: var(--surface);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.stat-card-featured { background: var(--highlight); color: var(--highlight-ink); }
.stat-label, .stat-detail { font-size: 12px; color: var(--ink-faint); }
.stat-card-featured .stat-label,
.stat-card-featured .stat-detail { color: inherit; opacity: 0.72; }
.stat-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-value {

  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 500;
  line-height: 0.9;
}
.statistics-columns {



  margin-top: 28px;
}
.statistics-panel {   padding-top: 22px; border-top: 1px solid var(--line-strong); }
.statistics-panel h2 {  font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.activity-chart {








  border-bottom: 1px solid var(--line-strong);
}
.activity-day {     text-align: center; }
.activity-count { font-size: 10px; color: var(--ink-faint); }
.activity-bar {   background: var(--accent); }
.activity-label {  font-family: var(--font-display); font-size: 11px; color: var(--ink-faint); }
.top-videos { list-style: none;   }
.top-videos li {     border-bottom: 1px solid var(--line); }
.top-videos a {    font-family: var(--font-read); text-decoration: none; }
.statistics-empty { color: var(--ink-faint); line-height: 1.6; }
.statistics-error {  color: var(--bad); border: 1px solid var(--bad); }

@media (max-width: 860px) {
}
@media (max-width: 480px) {
}

/* ------------------------------------------------------------ watch history */

.history-head {  margin-bottom: 34px; }
.history-head .eyebrow {  font-family: var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.history-head h1 {  font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px); line-height: 1; font-weight: 500; }
.watch-history { border-top: 1px solid var(--line-strong); }
.watch-history .history-head h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 1; font-weight: 500; }
.history-head > p:last-child {  color: var(--ink-dim); }
.history-tools {     border-bottom: 1px solid var(--line-strong); }
.history-item {      border-bottom: 1px solid var(--line); }
.history-thumb {     background: var(--sunken); border: 1px solid var(--line-strong); }
.video-progress {       background: var(--line-strong);  }
.video-progress::after { content: "";    background: var(--accent); }
.history-duration {  right: 6px; bottom: 6px; padding: 2px 6px; font-family: var(--font-display); font-size: 11px; color: var(--accent-ink); background: var(--accent); }
.history-when { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.history-body h2 {  font-family: var(--font-read); font-size: 18px; font-weight: 600; line-height: 1.3; }
.history-body h2 a {     text-decoration: none; }
.history-channel, .history-details {  color: var(--ink-dim); }
.history-channel { font-size: 13px; }
.history-details {  font-size: 12px; }
.history-actions {    gap: 7px; }
.history-resume {  text-decoration: none; }
.history-remove {    color: var(--ink-dim); }
.history-remove[data-confirm="1"] { color: var(--bad); background: var(--surface-alt); border-color: var(--bad); }
.history-remove:disabled { opacity: 0.45; cursor: wait; }
.history-empty {  text-align: center; border-bottom: 1px solid var(--line); }
.history-empty h2 {  font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.history-empty p {  color: var(--ink-faint); }
.history-empty-mark { color: var(--ink-dim); border: 1px solid var(--line-strong); }
.history-skeleton { border-bottom: 1px solid var(--line); }
.history-skeleton > i, .history-skeleton b {
  background: linear-gradient(90deg, var(--surface-alt) 0%, var(--line) 48%, var(--surface-alt) 100%);
  background-size: 220% 100%;
  animation: history-skeleton-pulse 1.35s ease-in-out infinite;
}
@keyframes history-skeleton-pulse { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="off"]) .history-skeleton > i,
  html:not([data-reduced-motion="off"]) .history-skeleton b { animation: none; }
}
html[data-reduced-motion="on"] .history-skeleton > i,
html[data-reduced-motion="on"] .history-skeleton b { animation: none; }

@media (max-width: 760px) {
.history-body h2 { font-size: 16px; }
}
@media (max-width: 480px) {
}

/* ------------------------------------------------------------ home */

main.home-main {   padding-top: clamp(34px, 6vh, 68px); }
.home-hero {
  padding-block: clamp(54px, 9vw, 112px);
}
.home-copy .eyebrow, .home-section-head .eyebrow, .home-first-run .eyebrow {

  font-family: var(--font-display);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.home-copy h1 {

  font-family: var(--font-display);
  font-size: clamp(64px, 9.4vw, 120px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.055em;

}
.home-dot { color: var(--accent); }
.home-tagline {   font-size: clamp(16px, 2vw, 21px); line-height: 1.55; color: var(--ink-dim); }
.continue-section { padding-top: clamp(42px, 7vw, 76px); border-top: 1px solid var(--line); }
.home-section-head h2, .home-first-run h2 {  font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1; }
.carousel-actions .icon-btn {   color: var(--ink); border-color: var(--line-strong); font-family: var(--font-display); font-size: 18px; }
.carousel-actions .icon-btn:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.carousel-actions .icon-btn:disabled { color: var(--ink-faint); opacity: 0.42; cursor: default; }
.home-view-all {  font-family: var(--font-display); font-size: 13px; text-decoration: none; }
.home-carousel { --carousel-columns: 3;    }
.home-video-card {   color: var(--ink); text-decoration: none; }
.home-video-visual {     background: var(--sunken); border: 1px solid var(--line-strong); }
.home-video-visual img {     transition: filter 0.15s linear; }
.home-video-card:hover img { filter: contrast(1.08); }
.home-video-duration {    padding: 2px 6px; color: var(--accent-ink); background: var(--accent); font-family: var(--font-display); font-size: 11px; }
.home-video-when { font-family: var(--font-display); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.home-video-meta strong {    font-family: var(--font-read); font-size: 14px; font-weight: 600; }
.home-video-meta > span:last-child {    font-size: 12px; color: var(--ink-dim); }
.home-first-run {    border: 1px solid var(--line-strong); }
.home-first-run > p:not(.eyebrow) { color: var(--ink-dim); }
.home-first-run .btn {  text-decoration: none; }
.home-reading-section { padding-top: clamp(42px, 7vw, 76px); border-top: 1px solid var(--line); }
.home-game-section { background: var(--surface); border: 1px solid var(--line-strong); }
.home-game-copy h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1; }
.home-game-copy > p:not(.eyebrow) { color: var(--ink-dim); }
.home-game-status > span { background: var(--surface-alt); border: 1px solid var(--line); border-left: 0; }
.home-game-status > span:first-child { border-left: 1px solid var(--line); }
.home-game-status strong { font-family: var(--font-display); font-size: 22px; }
.home-game-status small { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; }
.home-game-status > i { background: var(--surface-alt); border: 1px solid var(--line); border-top: 0; }
.home-game-status > i b { background: var(--accent); }
.home-reading-list { border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.home-reading-card { color: var(--ink); text-decoration: none; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.home-reading-card:hover { background: var(--surface-alt); }
.home-reading-progress { background: var(--line); }
.home-reading-progress i { background: var(--accent); }
.home-reading-kicker, .home-reading-meta { color: var(--ink-faint); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.home-reading-card strong { font-family: var(--font-read); font-size: 17px; }
.home-reading-author { color: var(--ink-dim); font-size: 12px; }

@media (max-width: 780px) {
  .home-hero { padding-block: 64px; }
.home-carousel { --carousel-columns: 2; }
}
@media (max-width: 480px) {
  .home-hero { padding-block: 50px; }
  .home-copy h1 { font-size: clamp(58px, 21vw, 84px); }
.home-carousel { --carousel-columns: 1; }
}

.pop-note {
  margin: 2px 10px 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.pop-note.bad { color: var(--bad); }
/* A word already in Anki keeps its marker visible, like a star. */
.icon-btn.synced { color: var(--good); }

/* ------------------------------------------------------------ pixel legibility
   Pixelify Sans carries far less detail per em than a vector face, so sizes
   that read fine in Clean turn to mush here. Every element set in the display
   face steps up; the reading face (JetBrains Mono) is deliberately untouched.
   Kept above the responsive block so the mobile sizes below still win. */

.brand { font-size: 23px; }
nav a { font-size: 14px; letter-spacing: 0.07em; }
.btn { font-size: 15px; }
.btn.small { font-size: 13px; }
.segmented button { font-size: 14px; }

.pop-label { font-size: 13px; letter-spacing: 0.1em; }
kbd { font-size: 13px; min-width: 19px; }
.kbd-hint { font-size: 13px; }
.meta { font-size: 13px; }
.count, .vocab-tools .count { font-size: 13px; }
.panel h2 { font-size: 13px; }
.stage-idle { font-size: 14px; }

.sheet-sub { font-size: 13px; }
.sheet-block h4 { font-size: 13px; }
.sheet-links { font-size: 13px; }
.sheet-lemma { font-size: 42px; }

.word-lemma { font-size: 28px; }
.word-tag { font-size: 12px; }
.word-body .where { font-size: 12px; }
.empty-state h2 { font-size: 29px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  header { padding: 9px 15px; }
  main { padding-block: 26px 56px; }
  nav { gap: 0; }
  nav a { padding-inline: 7px; }
  .nav-settings, .nav-profile { margin-left: 3px; }
  .nav-profile { padding-left: 9px; }
  .watch-toolbar { gap: 8px; }
  .word { padding: 20px 2px; }
  .word-lemma { font-size: 21px; }
  .word-actions { opacity: 1; }
  .sheet { padding: 24px 20px 20px; }
  .sheet-lemma { font-size: 30px; }
}

@media (max-width: 600px) {
  .app-footer-inner {    padding: 22px 15px; }
  .footer-identity, .footer-local {    text-align: left; }
}

@media (max-width: 600px) {
nav a { padding-inline: 5px; font-size: 12px; letter-spacing: 0.03em; }
}

@media (max-width: 480px) {
}

@media (max-width: 480px) {
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="off"]) *,
  html:not([data-reduced-motion="off"]) *::before,
  html:not([data-reduced-motion="off"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.w.separable { text-decoration-color: var(--accent); }
.sub-de .w.separable.partner-hover,
.w.separable.partner-hover { background: var(--highlight); color: var(--highlight-ink); }

/* ------------------------------------------------------------ reading */
main.reading-main { padding-top: clamp(42px, 8vh, 88px); }
.reading-head .eyebrow, .reading-card-kicker, .reading-summary small,
.reader-status, .reading-editor-fields label > span, .reading-dialog-note,
.reading-bookmark-item label > span { font-family: var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.reading-head .eyebrow { margin-bottom: 8px; }
.reading-head h1 { font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px); line-height: 1; font-weight: 500; }
.reading-head > div > p:last-child { color: var(--ink-dim); }
.reading-summary { margin-top: 38px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.reading-summary > span { background: var(--surface); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.reading-summary strong { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; }
.reading-summary small, .reading-card-kicker { font-size: 11px; }
.reading-tools { margin-top: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); }
.reading-card { background: var(--surface); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.reading-card:nth-child(3n+1) { border-left: 1px solid var(--line-strong); }
.reading-card-main { color: var(--ink); text-decoration: none; }
.reading-card-main:hover { background: var(--surface-alt); }
.reading-card h2 { font-family: var(--font-read); font-size: 20px; line-height: 1.35; font-weight: 600; }
.reading-card-author, .reading-card-meta { color: var(--ink-dim); font-size: 12px; }
.reading-card-progress { background: var(--line); }
.reading-card-progress i { background: var(--accent); }
.reading-card-favorite.starred { color: var(--accent); }
.reading-card-remove[data-confirm="1"] { color: var(--bad); border-color: var(--bad); }
.reading-empty { border: 1px solid var(--line-strong); }
.reading-empty .eyebrow { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.reading-empty h2 { font-family: var(--font-display); font-size: 32px; font-weight: 500; }
.reading-empty p:not(.eyebrow) { color: var(--ink-dim); line-height: 1.6; }
.reader-toolbar, .reader-find, .reader-nav { background: color-mix(in srgb, var(--bg) 95%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.reader-toolbar { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ habits / game */
.game-column, .game-dialog { background: var(--surface); border: 1px solid var(--line-strong); }
.game-avatar-mini > b { color: var(--accent-ink); background: var(--accent); border: 1px solid var(--edge); font-family: var(--font-display); font-size: 9px; }
.pixel-pet small { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.sprite-shadow { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.pixel-heart { background: var(--bad); clip-path: polygon(0 20%,20% 20%,20% 0,40% 0,50% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%); }
.pixel-star { background: var(--accent); clip-path: polygon(40% 0,60% 0,60% 30%,100% 30%,100% 50%,70% 50%,70% 70%,60% 70%,60% 100%,40% 100%,40% 70%,30% 70%,30% 50%,0 50%,0 30%,40% 30%); }
.pixel-coin { background: #ffd34d; border: 3px solid #bd7b00; clip-path: polygon(20% 0,80% 0,80% 10%,100% 10%,100% 90%,80% 90%,80% 100%,20% 100%,20% 90%,0 90%,0 10%,20% 10%); }
.pixel-coin::after { content: ""; position: absolute; inset: 3px 4px; background: #fff1a1; }
.pixel-flame { background: #f07b28; clip-path: polygon(40% 0,60% 0,60% 20%,80% 20%,80% 40%,100% 40%,100% 80%,80% 80%,80% 100%,20% 100%,20% 80%,0 80%,0 40%,20% 40%,20% 20%,40% 20%); }
.game-header-stats { color: var(--ink-dim); font-family: var(--font-display); font-size: 13px; }
.game-strip { background: var(--surface-alt); border: 1px solid var(--line); }
.game-strip-copy > strong { font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.game-strip-today > span:first-child { font-family: var(--font-display); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.game-sync-state, .game-task-meta, .game-task-progress span, .game-achievement small, .game-log small, .game-dialog-note, .game-setting-row small { color: var(--ink-faint); }
.game-vitals-mini small, .game-task-meta, .game-task-progress span, .game-buy span, .game-achievement small { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em; }
.game-vitals-mini small { font-size: 10px; color: var(--ink-faint); }
.game-meter, .game-day-progress-mini, .game-task-progress i, .game-achievement i { background: var(--surface); border: 1px solid var(--line); }
.game-meter.hp b { background: var(--bad); }
.game-meter.xp b, .game-day-progress-mini b, .game-task-progress i b, .game-achievement i b { background: var(--accent); }
.game-column h2, .game-dialog-head h2 { font-family: var(--font-display); font-weight: 400; }
.game-day-label { font-family: var(--font-display); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.game-board-toolbar { border-bottom: 1px solid var(--line); }
.game-search { border: 1px solid var(--line-strong); background: var(--surface); }
.game-search input { color: var(--ink); background: transparent; border: 0; }
.game-search [data-icon], .game-search-shortcut, .game-board-count { color: var(--ink-faint); }
.game-column { background: var(--surface-alt); }
.game-column-head { border-bottom: 1px solid var(--line-strong); }
.game-column-heading p { color: var(--ink-faint); font-size: 11px; }
.game-column-heading h2 span { color: var(--accent-ink); background: var(--accent); font-size: 11px; }
.game-column-tabs button, .game-shop-tabs button { color: var(--ink-faint); background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: var(--font-display); }
.game-column-tabs button:hover, .game-shop-tabs button:hover { color: var(--ink); }
.game-column-tabs button.on, .game-shop-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.game-shop-tabs { border-bottom: 1px solid var(--line); }
.game-shop-panel-head { color: var(--ink-dim); font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.game-add-row { color: var(--ink-dim); background: var(--surface); border: 1px dashed var(--line-strong); font-family: var(--font-read); }
.game-add-row:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.game-task { border: 1px solid var(--line); background: var(--surface); box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.game-task:last-child { border-bottom: 1px solid var(--line); }
.game-task:hover { background: var(--surface-alt); }
.game-task.completed { opacity: .62; }
.game-task.completed .game-task-edit strong { text-decoration: line-through; }
.game-task.not-scheduled { opacity: .48; }
.game-task-edit, .game-task-menu, .game-habit-action, .game-check, .game-buy { color: inherit; background: transparent; border: 0; }
.game-task-edit strong { font-family: var(--font-read); font-size: 14px; line-height: 1.4; }
.game-task-copy p { color: var(--ink-dim); font-size: 12px; line-height: 1.5; }
.game-task-menu { color: var(--ink-faint); font-family: var(--font-display); }
.game-task-menu:hover { color: var(--ink); }
.game-check, .game-buy, .game-habit-action.positive, .game-habit-action-spacer:not(.trailing) { border-right: 1px solid var(--line); }
.game-habit-action.negative, .game-habit-action-spacer.trailing { border-left: 1px solid var(--line); }
.game-habit-action { font-family: var(--font-display); font-size: 20px; color: var(--ink-dim); }
.game-habit-action.positive:hover { color: var(--accent-ink); background: var(--accent); }
.game-habit-action.negative:hover { color: #fff; background: var(--bad); }
.game-check span { border: 1px solid var(--line-strong); }
.game-check[aria-pressed="true"] span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.game-buy { font-family: var(--font-display); color: var(--ink-dim); }
.game-buy:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent); }
.game-buy:disabled { opacity: .35; }
.game-auto-badge { color: var(--accent); }
.game-task-streak { color: var(--good); }
.game-task-due { color: var(--ink-dim); }
.game-column-empty { color: var(--ink-faint); }
.game-pet-card { border: 1px solid var(--line); }
.game-pet-card.active { border-color: var(--accent); }
.game-pet-card p { color: var(--ink-dim); font-size: 12px; line-height: 1.45; }
.game-pet-tag { color: var(--accent-ink); background: var(--accent); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.game-achievement { border: 1px solid var(--line); }
.game-achievement-mark { font-family: var(--font-display); color: var(--ink-faint); background: var(--surface-alt); border: 1px solid var(--line); }
.game-achievement.unlocked .game-achievement-mark { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.game-achievement p { color: var(--ink-dim); font-size: 12px; line-height: 1.45; }
.game-log li { border-bottom: 1px solid var(--line); }
.game-log li > b { font-family: var(--font-display); font-size: 11px; color: var(--good); }
.game-log li > b.negative { color: var(--bad); }
.game-dialog::backdrop { background: var(--scrim); }
.game-field > span, .game-weekdays legend { font-family: var(--font-display); color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.game-field input, .game-field textarea { font-family: var(--font-read); font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.game-field input:focus, .game-field textarea:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.game-field textarea { line-height: 1.5; resize: vertical; }
.game-weekdays { border: 0; }
.game-weekdays span { font-family: var(--font-display); color: var(--ink-dim); border: 1px solid var(--line); border-left: 0; }
.game-weekdays label:first-child span { border-left: 1px solid var(--line); }
.game-weekdays input:checked + span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.game-dialog-actions, .game-setting-row { border-top: 1px solid var(--line); }
.game-setting-row strong { font-family: var(--font-read); font-size: 14px; }
.game-toast { color: var(--accent-ink); background: var(--accent); border: 1px solid var(--edge); font-family: var(--font-display); box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 20%, transparent); }
.game-toast.negative { color: #fff; background: var(--bad); }
.reader-identity strong { font-family: var(--font-read); font-size: 14px; }
.reader-identity span { color: var(--ink-faint); font-size: 12px; }
.reading-stepper { border: 1px solid var(--line-strong); }
.reading-stepper button + output, .reading-stepper output + button { border-left: 1px solid var(--line); }
.reading-stepper button:hover { background: var(--surface-alt); }
.reader-progress { background: var(--line); }
.reader-progress span { background: var(--accent); }
.reader-status { font-size: 11px; }
.reader-content { font-family: var(--font-read); font-size: var(--reader-size); line-height: 1.9; letter-spacing: -.02em; }
.reader-paragraph.current { background: var(--surface-alt); }
:root[data-reader-ruler="on"] .reader-paragraph.current { box-shadow: inset 3px 0 0 var(--accent); }
.reader-paragraph.find-match { box-shadow: inset 3px 0 0 var(--highlight); }
.reader-paragraph-actions button { color: var(--ink-faint); background: var(--bg); border: 0; }
.reader-paragraph-actions button:hover, .reader-paragraph.bookmarked .reader-paragraph-bookmark, .reader-paragraph-listen.playing { color: var(--accent); }
.reader-paragraph-listen.loading, .reader-paragraph-listen.playing { animation: reader-speaker-blink .7s steps(2, end) infinite; }
@keyframes reader-speaker-blink { 50% { opacity: .35; } }
.reader-content .w:hover, .reader-content .w.active, .reader-content .w.partner-hover { background: var(--word-hover-highlight, var(--highlight)); color: var(--word-hover-highlight-ink, var(--highlight-ink)); }
.reader-content .w.saved { box-shadow: inset 0 -.1em 0 var(--word-saved-custom, var(--good)); }
.reader-content .w.separable { text-decoration-color: var(--accent); }
.reader-nav { border-top: 1px solid var(--line); border-bottom: 0; }
.reader-nav .bookmarked { color: var(--accent); }
.reading-dialog { color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); }
.reading-dialog::backdrop { background: var(--scrim); }
.reading-dialog-head .eyebrow { font-family: var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.reading-dialog-head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.reading-editor-fields label > span, .reading-bookmark-item label > span { font-size: 11px; }
.reading-editor-fields small { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.reading-dialog-note { font-size: 10px; line-height: 1.5; }
.reading-bookmark-item { border-top: 1px solid var(--line); }
.reading-chapter-item { color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); }
.reading-chapter-item:first-child { border-top: 0; }
.reading-chapter-item strong { font-family: var(--font-read); font-size: 14px; line-height: 1.4; }
/* A sub-chapter reads as subordinate, not just indented. */
.reading-chapter-item[data-level="2"] strong { font-size: 13px; color: var(--ink-dim); }
.reading-chapter-item[data-level="3"] strong,
.reading-chapter-item[data-level="4"] strong,
.reading-chapter-item[data-level="5"] strong,
.reading-chapter-item[data-level="6"] strong { font-size: 13px; color: var(--ink-faint); }
.reading-chapter-item:not([data-level="1"]) { border-top-color: transparent; }
.reading-chapter-item:hover strong { color: var(--accent); }
.reading-chapter-item.on strong { color: var(--accent); }
.reading-editor-toc ol { color: var(--ink-dim); font-family: var(--font-read); font-size: 13px; line-height: 1.5; }
.reading-editor-toc-rest { color: var(--ink-faint); list-style: none; margin-left: -20px; }
.reading-bookmark-jump { color: var(--ink); background: none; border: 0; }
.reading-bookmark-jump:hover p { color: var(--accent); }
.reading-bookmark-jump p { font-family: var(--font-read); color: var(--ink-dim); line-height: 1.5; }
.reading-dialog-empty { color: var(--ink-faint); }
.reading-dialog-empty h3 { color: var(--ink); font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.reading-statistics-grid { border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.reading-statistics-grid > span { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.reading-statistics-grid strong { font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.reading-statistics-grid small { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1040px) {
  .reading-card:nth-child(3n+1) { border-left: 0; }
  .reading-card:nth-child(2n+1) { border-left: 1px solid var(--line-strong); }
}
@media (max-width: 760px) {
  .reading-card { border-left: 1px solid var(--line-strong) !important; }
}
/* Rows is single-column at every width. */
.reading-grid[data-view="rows"] .reading-card { border-left: 1px solid var(--line-strong) !important; }

/* ================================================================ MUSIC */
.music-head .eyebrow, .music-card-kicker, .music-summary small,
.music-lyrics-head .eyebrow, .music-form-grid label > span {
  font-family: var(--font-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em;
}
.music-head h1 { font-family: var(--font-display); font-size: clamp(42px, 7vw, 72px); line-height: 1; font-weight: 500; }
.music-head > div > p:last-child { color: var(--ink-dim); }
.music-catalog-search { background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 7px 7px 0 var(--line); }
.music-catalog-search:focus-within { border-color: var(--accent); }
.music-provider-bar { color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.music-provider-select select { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.music-provider-dot { background: var(--accent); }
.music-provider-bar.connected .music-provider-dot { background: var(--good); }
.music-provider-bar.needs-setup .music-provider-dot { background: var(--bad); }
.music-library-head .eyebrow, .music-result-provider { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .09em; }
.music-library-head h2 { font-family: var(--font-display); font-size: 34px; }
.music-library-head > div > p:last-child { color: var(--ink-dim); }
.music-result-card, .music-results-empty { background: var(--surface); border: 1px solid var(--line-strong); }
.music-result-placeholder { color: hsl(calc(var(--cover-hue) + 160) 52% 13%); background: hsl(var(--cover-hue) 72% 68%); font-family: var(--font-display); font-size: 28px; }
.music-result-card h3 { font-family: var(--font-read); font-size: 18px; }
.music-result-card p, .music-result-card small, .music-result-lyrics, .music-results-empty span { color: var(--ink-dim); }
.music-result-lyrics { font-family: var(--font-display); }
.music-summary { border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.music-summary > span { background: var(--surface); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.music-summary strong { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; }
.music-summary small, .music-card-kicker { font-size: 11px; }
.music-tools { border-bottom: 1px solid var(--line-strong); }
.music-card { background: var(--surface); border: 1px solid var(--line-strong); }
.music-card-main { color: var(--ink); text-decoration: none; }
.music-card-main:hover .music-card-copy { background: var(--surface-alt); }
.music-card-cover { color: hsl(calc(var(--cover-hue) + 160) 52% 13%); background: hsl(var(--cover-hue) 72% 68%); border-right: 1px solid var(--line-strong); image-rendering: pixelated; }
.music-card-cover.has-artwork { image-rendering: auto; }
.music-card-cover b { font-family: var(--font-display); font-weight: 500; }
.music-card-cover small { font-family: var(--font-display); }
.music-card-copy h2 { font-family: var(--font-read); font-size: 18px; line-height: 1.25; }
.music-card-copy p, .music-card-meta { color: var(--ink-dim); font-size: 11px; }
.music-card-copy > i { background: var(--line); }
.music-card-copy > i b { background: var(--accent); }
.music-card-favorite.starred, .music-player-actions .starred { color: var(--accent); }
.music-card-remove.delete-armed { color: var(--bad); border-color: var(--bad); }
.music-empty { border: 1px solid var(--line-strong); }
.music-empty .eyebrow { color: var(--ink-faint); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.music-empty h2 { font-family: var(--font-display); font-size: 32px; font-weight: 500; }
.music-empty p:not(.eyebrow) { color: var(--ink-dim); line-height: 1.6; }
.music-player-toolbar { border-bottom: 1px solid var(--line-strong); }
.music-player-identity strong { font-family: var(--font-read); font-size: 14px; }
.music-player-identity span { color: var(--ink-dim); font-size: 11px; }
.music-player-layout { border: 1px solid var(--line-strong); border-top: 0; }
.music-deck { background: var(--surface-alt); border-right: 1px solid var(--line-strong); }
.music-cover { color: hsl(calc(var(--cover-hue) + 160) 50% 12%); background: hsl(var(--cover-hue) 70% 64%); border: 1px solid var(--line-strong); box-shadow: 10px 10px 0 var(--line); }
.music-cover::before { background: hsl(calc(var(--cover-hue) + 175) 34% 11%); }
.music-cover::after { background: hsl(var(--cover-hue) 70% 64%); }
.music-cover span { font-family: var(--font-display); font-weight: 500; color: hsl(var(--cover-hue) 70% 64%); }
.music-cover small { font-family: var(--font-display); color: hsl(var(--cover-hue) 70% 64%); }
.music-now > span:first-child { color: var(--ink-faint); font-family: var(--font-display); }
.music-now strong { font-family: var(--font-read); }
.music-now > span:last-child { color: var(--ink-dim); }
.music-scrubber span, .music-shortcuts { color: var(--ink-faint); font-family: var(--font-display); }
.music-provider-gate { background: var(--surface); border: 1px solid var(--line-strong); }
.music-spotify-embed { color: var(--ink-dim); font-family: var(--font-display); font-size: 11px; }
.music-provider-gate strong { font-family: var(--font-display); }
.music-provider-gate span { color: var(--ink-dim); }
.music-seek, .music-play { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-display); }
.music-seek:hover, .music-play:hover { background: var(--highlight); color: var(--highlight-ink); }
.music-play { box-shadow: 4px 4px 0 var(--line-strong); }
.music-play-options label { background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-display); }
.music-play-options .on { color: var(--good); border-color: var(--good); }
.music-lyrics-panel { background: var(--surface); }
.music-lyrics-head, .music-sync-bar, .music-lyrics-foot { border-bottom: 1px solid var(--line-strong); }
.music-lyrics-head h2 { font-family: var(--font-display); font-size: 25px; font-weight: 500; }
.music-sync-bar { background: var(--highlight); color: var(--highlight-ink); }
.music-sync-bar output { font-family: var(--font-display); }
.music-lyric-row { border-bottom: 1px solid var(--line); }
.music-lyric-row.active { background: var(--surface-alt); box-shadow: inset 4px 0 0 var(--accent); }
.music-lyric-time { color: var(--ink-faint); background: transparent; border: 0; font-family: var(--font-display); }
.music-lyric-row.active .music-lyric-time { color: var(--accent); }
.music-line-de { font-family: var(--font-read); }
.music-line-en { color: var(--ink-dim); font-family: var(--font-read); }
.music-lyrics.syncing .music-lyric-row:hover { background: var(--highlight); color: var(--highlight-ink); }
.music-lyrics.syncing .music-lyric-row:hover .music-line-en,
.music-lyrics.syncing .music-lyric-row:hover .music-lyric-time { color: inherit; }
.music-lyrics-empty { color: var(--ink-dim); }
.music-lyrics-empty h3 { color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.music-lyrics-foot { color: var(--ink-faint); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.music-audio-field { background: var(--surface-alt); border: 1px dashed var(--line-strong); }
.music-audio-field:hover { background: var(--highlight); color: var(--highlight-ink); }
.music-audio-field small { color: var(--ink-dim); }
.music-lyric-field textarea { background: var(--surface); }
.home-extension-cta p { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 500; color: var(--ink); }

.home-music-feature { background: var(--surface); border: 1px solid var(--line-strong); }
.home-music-feature h2 { font-family: var(--font-display); font-size: clamp(31px, 5vw, 52px); line-height: 1.05; font-weight: 500; }
.home-music-feature > div:first-child > p:not(.eyebrow) { color: var(--ink-dim); }
.home-music-preview { background: var(--surface-alt); border: 1px solid var(--line-strong); box-shadow: 8px 8px 0 var(--line); }
.home-music-preview > span, .home-music-preview small { color: var(--ink-faint); font-family: var(--font-display); }
.home-music-preview strong { font-family: var(--font-read); }
.home-music-preview p { color: var(--ink-dim); }
.home-music-preview i { background: var(--line); }
.home-music-preview i b { background: var(--accent); }
/* Pixel glyphs stay crisp at their native weight. Hierarchy comes from scale,
   spacing, color, and structure—not synthetic or bold pixel strokes. */
html[data-style="pixel"] *,
html[data-style="pixel"] *::before,
html[data-style="pixel"] *::after {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------ music player
   A listening console, not a stack of browser controls. This is deliberately
   scoped to Pixel: the retired Clean theme is not part of this feature pass. */
html[data-style="pixel"] .music-player-toolbar { min-height: 64px; padding: 0 2px 18px; border-bottom-color: var(--line); }
html[data-style="pixel"] .music-player-toolbar > .btn { width: 42px; min-width: 42px; height: 42px; }
html[data-style="pixel"] .music-player-identity { gap: 2px; }
html[data-style="pixel"] .music-player-identity strong { font-size: 18px; line-height: 1.25; }
html[data-style="pixel"] .music-player-identity span { font-size: 12px; }
html[data-style="pixel"] .music-player-layout {
  grid-template-columns: minmax(350px, .78fr) minmax(500px, 1.22fr);
  min-height: min(780px, calc(100vh - 190px));
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
html[data-style="pixel"] .music-deck {
  position: relative;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px);
  background-color: var(--surface-alt);
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 48%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 48%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  border-right-color: var(--line);
}
html[data-style="pixel"] .music-deck::before {
  content: "LISTEN / LEARN";
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 2px 6px;
  color: var(--ink-faint);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font: 10px/1.5 var(--font-display);
  letter-spacing: .12em;
}
html[data-style="pixel"] .music-cover {
  width: min(100%, 330px);
  background-color: hsl(var(--cover-hue) 70% 64%);
  border: 1px solid var(--edge);
  box-shadow: 3px 3px 0 var(--line-strong), inset 0 0 0 1px color-mix(in srgb, white 20%, transparent);
  transition: transform var(--motion-slow) var(--motion-ease), box-shadow var(--motion-ui) var(--motion-ease);
}
html[data-style="pixel"] .music-player.is-playing .music-cover {
  box-shadow: 5px 5px 0 var(--line-strong), inset 0 0 0 1px color-mix(in srgb, white 20%, transparent);
  transform: translate(-1px, -1px);
}
html[data-style="pixel"] .music-spotify-embed {
  width: 100%;
  margin-top: 18px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
html[data-style="pixel"] .music-spotify-embed iframe { display: block; }
html[data-style="pixel"] .music-now {
  position: relative;
  width: 100%;
  min-height: 112px;
  margin-top: 25px;
  padding: 15px 17px 16px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-style="pixel"] .music-now > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  letter-spacing: .14em;
}
html[data-style="pixel"] .music-now > span:first-child::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; background: currentColor; }
html[data-style="pixel"] .music-player.is-playing .music-now > span:first-child::before { animation: music-live-pulse 1.2s steps(2, end) infinite; }
@keyframes music-live-pulse { 50% { opacity: .3; } }
html[data-style="pixel"] .music-now strong { margin-top: 7px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.38; }
html[data-style="pixel"] .music-now > span:last-child { margin-top: 4px; color: var(--ink-dim); font-size: 13px; }
html[data-style="pixel"] .music-scrubber { width: 100%; margin-top: 22px; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px; }
html[data-style="pixel"] .music-scrubber span {
  color: var(--ink-dim);
  font-family: var(--font-read);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
html[data-style="pixel"] #music-current { text-align: left; }
html[data-style="pixel"] #music-duration { text-align: right; }
html[data-style="pixel"] #music-progress {
  --music-progress: 0%;
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  transition: --music-progress 240ms linear;
}
html[data-style="pixel"] #music-progress::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--music-progress), var(--line-strong) var(--music-progress) 100%);
  border: 1px solid var(--line-strong);
}
html[data-style="pixel"] #music-progress::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--music-progress), var(--line-strong) var(--music-progress) 100%);
  border: 1px solid var(--line-strong);
}
html[data-style="pixel"] #music-progress::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -6px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--edge);
  transition: transform var(--motion-fast) var(--motion-ease);
}
html[data-style="pixel"] #music-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--edge);
}
html[data-style="pixel"] #music-progress:hover::-webkit-slider-thumb,
html[data-style="pixel"] #music-progress:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
html[data-style="pixel"] .music-transport { width: 100%; margin-top: 12px; gap: 14px; }
html[data-style="pixel"] .music-seek {
  width: 52px;
  height: 44px;
  color: var(--ink-dim);
  background: transparent;
  border-color: transparent;
  font-family: var(--font-read);
  font-size: 12px;
}
html[data-style="pixel"] .music-seek:hover { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
html[data-style="pixel"] .music-play {
  position: relative;
  width: 66px;
  height: 58px;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--edge);
  box-shadow: 3px 3px 0 var(--line-strong);
  font-size: 0;
}
html[data-style="pixel"] .music-play:hover { color: var(--accent-ink); background: var(--accent); filter: brightness(1.08); }
html[data-style="pixel"] .music-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}
html[data-style="pixel"] .music-player.is-playing .music-play::before {
  width: 13px;
  height: 18px;
  margin-left: 0;
  border: 0;
  border-right: 5px solid currentColor;
  border-left: 5px solid currentColor;
}
html[data-style="pixel"] .music-play-options { width: 100%; margin-top: 20px; padding-top: 14px; gap: 7px; border-top: 1px solid var(--line); }
html[data-style="pixel"] .music-play-options label,
html[data-style="pixel"] .music-play-options .btn { min-height: 36px; }
html[data-style="pixel"] .music-play-options label { padding-inline: 11px 7px; color: var(--ink-dim); background: var(--surface); border-color: var(--line); }
html[data-style="pixel"] .music-play-options select { min-height: 28px; color: var(--ink); cursor: pointer; }
html[data-style="pixel"] .music-play-options .on { color: var(--accent-ink); background: var(--accent); border-color: var(--edge); }
html[data-style="pixel"] .music-shortcuts { margin-top: 13px; color: var(--ink-faint); letter-spacing: .035em; }
html[data-style="pixel"] .music-lyrics-panel { border-left: 0; }
html[data-style="pixel"] .music-lyrics-head { min-height: 96px; background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
html[data-style="pixel"] .music-lyric-row.active { background: color-mix(in srgb, var(--surface-alt) 86%, var(--accent)); box-shadow: inset 4px 0 0 var(--accent); }

@media (max-width: 1180px) {
  html[data-style="pixel"] .music-player-layout { grid-template-columns: minmax(310px, .68fr) minmax(440px, 1.32fr); }
}
@media (max-width: 820px) {
  html[data-style="pixel"] .music-player-layout { display: flex; }
  html[data-style="pixel"] .music-deck { padding: 38px 24px 28px; }
  html[data-style="pixel"] .music-cover { width: min(72vw, 320px); }
}
@media (max-width: 560px) {
  html[data-style="pixel"] .music-player-toolbar { min-height: 56px; }
  html[data-style="pixel"] .music-player-identity strong { font-size: 15px; }
  html[data-style="pixel"] .music-deck { padding-inline: 16px; }
  html[data-style="pixel"] .music-now { min-height: 104px; }
  html[data-style="pixel"] .music-play-options { align-items: stretch; }
  html[data-style="pixel"] .music-play-options label,
  html[data-style="pixel"] .music-play-options .btn { flex: 1 1 auto; justify-content: center; }
  html[data-style="pixel"] .music-shortcuts { display: none; }
}

/* ------------------------------------------------------------ Obsidian v2
   The current and only Obsidian treatment. It keeps the established quiet,
   editorial hierarchy but restores the original Pixel system's square
   construction everywhere. The persisted `obsidian` id is intentionally
   reused so no retired palette needs a compatibility branch. */
html[data-style="pixel"][data-palette="obsidian"] {
  --nav-h: 72px;
  --obsidian-radius: 0px;
  --obsidian-green: #3bb46e;
  --ui-radius-control: 0px;
  --ui-radius-surface: 0px;
  scrollbar-color: var(--line-strong) var(--bg);
}

html[data-style="pixel"][data-palette="obsidian"] body {
  font-size: 14px;
  line-height: 1.7;
}

html[data-style="pixel"][data-palette="obsidian"] header {
  min-height: var(--nav-h);
  padding: 0 clamp(24px, 3vw, 48px);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

html[data-style="pixel"][data-palette="obsidian"] .brand {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .01em;
  text-transform: none;
}

html[data-style="pixel"][data-palette="obsidian"] .brand::after {
  padding-left: 2px;
  color: var(--ink-faint);
  font-family: var(--font-read);
  font-size: 7px;
  letter-spacing: .12em;
}

html[data-style="pixel"][data-palette="obsidian"] nav {
  position: relative;
  gap: 7px;
}
html[data-style="pixel"][data-palette="obsidian"] nav a {
  position: relative;
  padding: 9px 8px;
  color: var(--ink-faint);
  border: 0;
  font-family: var(--font-read);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: none;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
html[data-style="pixel"][data-palette="obsidian"] nav a:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border: 0;
  border-radius: 6px !important;
}
html[data-style="pixel"][data-palette="obsidian"] nav a.on { color: var(--ink); border: 0; }
html[data-style="pixel"][data-palette="obsidian"] main {
  padding-inline: var(--content-page-gutter);
  padding-top: clamp(42px, 8vh, 88px);
  padding-bottom: 90px;
}

html[data-style="pixel"][data-palette="obsidian"] :is(.hero h1, .page-head h1, .home-copy h1, .music-head h1) {
  color: var(--ink);
  font-size: clamp(48px, 6.8vw, 78px);
  line-height: .98;
  letter-spacing: -.035em;
}
html[data-style="pixel"][data-palette="obsidian"] :is(.eyebrow, .meta, .word-tag, .music-card-kicker) {
  color: var(--ink-faint);
  font-family: var(--font-read);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: none;
}
html[data-style="pixel"][data-palette="obsidian"] :is(.hero p, .home-tagline, .page-head p, .music-head > div > p:last-child) {
  max-width: 680px;
  color: var(--ink-dim);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.7;
}

html[data-style="pixel"][data-palette="obsidian"] :is(
  .home-music-feature, .home-game-section, .home-first-run, .home-music-preview,
  .music-card, .music-result-card, .music-results-empty, .music-player-layout,
  .reading-card, .stat-card, .account-panel, .restore-dialog,
  .game-task, .game-pet-card, dialog, .sheet, .popover
) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--obsidian-radius) !important;
  box-shadow: none;
}
html[data-style="pixel"][data-palette="obsidian"] .settings-section {
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}
html[data-style="pixel"][data-palette="obsidian"] :is(.home-music-feature, .home-game-section, .home-first-run) {
  padding: clamp(28px, 4vw, 48px);
}
html[data-style="pixel"][data-palette="obsidian"] :is(.music-card, .music-result-card, .reading-card, .stat-card) {
  overflow: hidden;
  transition: background-color var(--motion-ui) var(--motion-ease), border-color var(--motion-ui) var(--motion-ease);
}
@media (hover: hover) {
  html[data-style="pixel"][data-palette="obsidian"] :is(.music-card, .music-result-card, .reading-card, .stat-card):hover {
    background: var(--surface-alt);
    border-color: var(--line-strong);
    transform: none;
    box-shadow: none;
  }
}

html[data-style="pixel"][data-palette="obsidian"] :is(.btn, .icon-btn, .field, .segmented, .segmented button, .select-wrap, .search-picker-button) {
  border-radius: 10px !important;
}
html[data-style="pixel"][data-palette="obsidian"] .segmented {
  overflow: hidden;
  border-radius: 10px !important;
}
html[data-style="pixel"][data-palette="obsidian"] .segmented button {
  border-radius: 0 !important;
}
html[data-style="pixel"][data-palette="obsidian"] .btn {
  min-height: 46px;
  justify-content: center;
  gap: 10px;
  padding-inline: 20px;
  background: transparent;
  border-color: var(--line-strong);
  font-family: var(--font-read);
  font-size: 13px;
  letter-spacing: .025em;
  text-transform: none;
}
html[data-style="pixel"][data-palette="obsidian"] .btn:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: #515151;
}
html[data-style="pixel"][data-palette="obsidian"] .btn.primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
html[data-style="pixel"][data-palette="obsidian"] .btn.primary:hover:not(:disabled) {
  color: var(--accent-ink);
  background: #fff;
  border-color: #fff;
  filter: none;
}
html[data-style="pixel"][data-palette="obsidian"] .btn.small {
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 8px !important;
  font-size: 11px;
}
html[data-style="pixel"][data-palette="obsidian"] .btn [data-icon] {
  width: 16px;
  height: 16px;
  color: currentColor;
}
html[data-style="pixel"][data-palette="obsidian"] .icon-btn {
  width: 42px;
  height: 42px;
  color: var(--ink-dim);
  background: transparent;
  border-color: var(--line-strong);
}
html[data-style="pixel"][data-palette="obsidian"] .icon-btn:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: #515151;
}
html[data-style="pixel"][data-palette="obsidian"] :is(
  .btn, .icon-btn, .music-play, .music-seek, .carousel-actions button
):not(:disabled):hover {
  transform: none !important;
}
html[data-style="pixel"][data-palette="obsidian"] .btn:active:not(:disabled),
html[data-style="pixel"][data-palette="obsidian"] .icon-btn:active:not(:disabled),
html[data-style="pixel"][data-palette="obsidian"] .segmented button:active:not(:disabled) { transform: scale(.98); }

html[data-style="pixel"][data-palette="obsidian"] :is(.field, .search-picker-button, .select-wrap, textarea) {
  background: var(--surface);
  border-color: var(--line-strong);
}
html[data-style="pixel"][data-palette="obsidian"] .field {
  min-height: 46px;
  padding-inline: 15px;
}
html[data-style="pixel"][data-palette="obsidian"] .field:focus-within {
  border-color: var(--ink-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}

html[data-style="pixel"][data-palette="obsidian"] :is(.reading-search, .reading-filters, .reading-view-toggle, .reading-tools .sort-picker) {
  height: 46px;
}
html[data-style="pixel"][data-palette="obsidian"] .reading-tools .sort-picker {
  min-width: 46px;
  overflow: hidden;
}
html[data-style="pixel"][data-palette="obsidian"] .reading-tools .sort-picker select {
  height: 100%;
}
html[data-style="pixel"][data-palette="obsidian"] .reading-grid[data-view="rows"] .reading-card {
  border: 1px solid var(--line) !important;
}
html[data-style="pixel"][data-palette="obsidian"] .reading-grid[data-view="rows"] .reading-card-actions {
  border-left: 1px solid var(--line);
  background: var(--surface);
}
html[data-style="pixel"][data-palette="obsidian"] .reading-card-main:hover {
  background: var(--surface-alt);
  transform: none !important;
}

html[data-style="pixel"][data-palette="obsidian"] .popover {
  padding: 8px;
  border-color: var(--line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
html[data-style="pixel"][data-palette="obsidian"] .pop-more,
html[data-style="pixel"][data-palette="obsidian"] .pop-row { border-radius: 6px !important; }
html[data-style="pixel"][data-palette="obsidian"] .pop-more:hover { background: var(--surface-alt); border-color: transparent; }

/* Keep the homepage on the same outer grid as every other workspace. Its
   content can stay editorially narrow without inventing wider side gutters. */
html[data-style="pixel"][data-palette="obsidian"] .home-main { max-width: var(--watch-main-max); }
html[data-style="pixel"][data-palette="obsidian"] .home-copy { max-width: 900px; }
html[data-style="pixel"][data-palette="obsidian"] .home-copy h1 { font-size: clamp(64px, 10vw, 118px); }
html[data-style="pixel"][data-palette="obsidian"] .home-actions { gap: 9px; }
html[data-style="pixel"][data-palette="obsidian"] .home-music-preview {
  background: var(--sunken);
  border-color: var(--line);
  box-shadow: none;
}

html[data-style="pixel"][data-palette="obsidian"] .music-player-layout {
  overflow: hidden;
  background: var(--sunken);
  border-color: var(--line);
}
html[data-style="pixel"][data-palette="obsidian"] .music-deck {
  background-color: var(--surface);
  background-image: none;
  border-right-color: var(--line);
}
html[data-style="pixel"][data-palette="obsidian"] .music-deck::before {
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  font-family: var(--font-read);
}
html[data-style="pixel"][data-palette="obsidian"] :is(.music-cover, .music-player.is-playing .music-cover) {
  border-radius: 8px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
  transform: none;
}
html[data-style="pixel"][data-palette="obsidian"] .music-now {
  background: var(--sunken);
  border-color: var(--line);
  border-radius: 9px !important;
  box-shadow: none;
}
html[data-style="pixel"][data-palette="obsidian"] .music-now > span:first-child { color: var(--obsidian-green); }
html[data-style="pixel"][data-palette="obsidian"] .music-play {
  color: #07140c;
  background: var(--obsidian-green);
  border-color: var(--obsidian-green);
  border-radius: 50% !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--obsidian-green) 22%, transparent);
}
html[data-style="pixel"][data-palette="obsidian"] .music-play:hover {
  color: #07140c;
  background: #48c77d;
  filter: none;
}
html[data-style="pixel"][data-palette="obsidian"] .music-seek { border-radius: 7px !important; }
html[data-style="pixel"][data-palette="obsidian"] .music-lyrics-panel { background: var(--sunken); }
html[data-style="pixel"][data-palette="obsidian"] .music-lyrics-head { background: var(--surface); }
html[data-style="pixel"][data-palette="obsidian"] .music-lyric-row.active {
  background: var(--surface-alt);
  box-shadow: inset 2px 0 0 var(--obsidian-green);
}
html[data-style="pixel"][data-palette="obsidian"] .music-lyric-row.active .music-lyric-time { color: var(--obsidian-green); }

html[data-style="pixel"][data-palette="obsidian"] .app-footer {
  color: var(--ink-faint);
  background: var(--bg);
  border-top-color: var(--line);
}

/* Obsidian uses case as written. Product copy, navigation and controls should
   read naturally instead of acquiring an all-caps software-dashboard voice. */
html[data-style="pixel"][data-palette="obsidian"] :is(
  .pop-label, .sheet-block h4, .sheet-sub, .sheet-links, .sheet-source,
  .select-picker-label, .count, .kbd-hint, .stage-idle,
  .reading-card-kicker, .reading-summary small, .music-summary small,
  .music-result-provider, .music-now > span:first-child,
  .game-vitals-mini small, .game-task-meta, .game-achievement small,
  .reader-status, .reading-dialog-note, .cdl-dict-provider
) {
  text-transform: none;
  letter-spacing: .035em;
}

@media (max-width: 820px) {
  html[data-style="pixel"][data-palette="obsidian"] { --nav-h: 64px; }
  html[data-style="pixel"][data-palette="obsidian"] header { padding-inline: 18px; }
  html[data-style="pixel"][data-palette="obsidian"] main { padding-top: 44px; }
  html[data-style="pixel"][data-palette="obsidian"] .home-copy h1 { font-size: clamp(56px, 18vw, 86px); }
}

/* V2's geometry contract comes last so specialized components cannot quietly
   reintroduce pills, soft cards, circular media controls, or rounded menus. */
html[data-style="pixel"][data-palette="obsidian"] *,
html[data-style="pixel"][data-palette="obsidian"] *::before,
html[data-style="pixel"][data-palette="obsidian"] *::after {
  border-radius: 0 !important;
}