:root {
  color-scheme: light;
  --ink: #161616;
  --muted: #5c564c;
  --paper: #f3efe6;
  --panel: #fffdf8;
  --line: #e4dccf;
  --dark: #141414;
  --dark-2: #2a2a2a;
  --accent: #c4491d;
  --ok: #1e6b3a;
  --bad: #9d2c2c;
  font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav lang";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  min-height: 120px;
  height: auto;
  padding: 8px 12px;
  background: #fff;
  /* Stronger than --line so the white bar separates clearly from cream paper at 320–768. */
  border-bottom: 1px solid #cfc6b8;
  overflow: visible;
}
.brand {
  grid-area: brand;
  justify-self: start;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 8px;
  max-width: min(461px, calc(100vw - 24px));
  background: transparent;
  line-height: 0;
  color-scheme: light;
  overflow: visible;
}
.brand img {
  display: block;
  width: 100%;
  max-width: min(300px, calc(100vw - 40px));
  height: auto;
  aspect-ratio: 461 / 123;
  object-fit: contain;
  object-position: left center;
}
.top-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .lang button, .ghost, .primary, .phases button, .transport button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 6px 12px;
}
.seg button.on, .lang button[aria-pressed="true"], .phases button.on {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
}
.lang { grid-area: lang; display: flex; gap: 6px; flex: 0 0 auto; }
.lang button { width: 52px; height: 32px; padding: 0; flex: 0 0 52px; }

.layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(320px, 1fr) minmax(280px, 340px);
  gap: 14px;
  padding: 12px 18px 24px;
  min-height: calc(100vh - 112px);
}
@media (min-width: 1101px) {
  .layout {
    min-width: 960px;
    grid-template-columns: minmax(260px, 300px) minmax(360px, 1fr) minmax(300px, 360px);
  }
  body { overflow-x: auto; }
}
.book-select-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.book-select-wrap select,
.book-select {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  background: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand lang"
      "nav nav";
    padding: 2px 6px;
    row-gap: 1px;
    column-gap: 6px;
    min-height: 0;
  }
  .brand { padding: 0; max-width: min(160px, calc(100vw - 84px)); }
  .brand img { max-width: min(132px, calc(100vw - 92px)); }
  .top-nav { gap: 2px; }
  #regions.seg { gap: 3px; }
  #books.book-select-wrap,
  .book-select-wrap {
    width: 100%;
    max-width: calc(100vw - 12px);
  }
  .book-select {
    font-size: 12px;
    padding: 2px 22px 2px 8px;
    line-height: 1.1;
  }
  .seg button, .lang button {
    padding: 2px 8px;
    font-size: 12px;
  }
  .lang button { width: 40px; height: 24px; flex-basis: 40px; }
}
.edu-update, .sw-update {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--dark);
  color: #fff;
  font-size: 13px;
}
.edu-update[hidden], .sw-update[hidden] { display: none; }
.edu-update button, .sw-update button {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
}
.edu-toast, .toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  background: #9d2c2c;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.edu-toast[hidden], .toast[hidden] { display: none; }
aside, .teach, .stage-wrap, .readouts {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
aside { padding: 12px; overflow: auto; max-height: calc(100vh - 124px); }
.fold-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.fold-tools button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--paper);
}
#tree h2 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
#tree h3 { font-size: 14px; margin: 10px 0 4px; }
#tree details.chapter { margin: 8px 0; }
#tree details.chapter > summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
#tree details.chapter > summary::-webkit-details-marker { display: none; }
#tree details.chapter > summary::before {
  content: '▸ ';
  color: var(--muted);
  font-weight: 400;
}
#tree details.chapter[open] > summary::before { content: '▾ '; }
.section { margin: 0 0 8px 8px; }
.section p { margin: 6px 0 2px; color: var(--muted); font-size: 12px; }
.lesson {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 6px 8px;
}
.lesson.on { background: var(--dark); color: white; }

main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stage-wrap { padding: 10px; min-height: 460px; }
canvas { width: 100%; height: 440px; display: block; border-radius: 12px; touch-action: none; background: var(--paper); }
.readouts { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; align-items: center; }
.readout-kicker { width: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.readout { display: flex; gap: 8px; align-items: baseline; }
.readout span { color: var(--muted); font-size: 13px; }
.readout strong { font-variant-numeric: tabular-nums; }

.teach { padding: 14px 14px 18px; overflow: auto; max-height: calc(100vh - 124px); }
.crumb { margin: 0; color: var(--muted); font-size: 12px; }
.teach h2 { margin: 4px 0 10px; font-size: 22px; }
.sources {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.sources h3 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sources p { margin: 0 0 6px; }
.sources a { color: var(--accent); text-underline-offset: 2px; }
.phases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.intro { line-height: 1.5; margin-top: 0; }
.primary { background: var(--dark); color: white; border-color: var(--dark); border-radius: 10px; padding: 8px 12px; }
.ghost { margin-top: 10px; }
.bench h3, .queued h3 { font-size: 13px; margin: 12px 0 8px; }
.field { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.slider { display: grid; grid-template-columns: 1fr 88px; gap: 8px; align-items: center; }
.slider input[type="number"], select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 6px;
  background: white;
}
.transport { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 8px 0; }
.checks { display: grid; gap: 10px; }
.checks fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0; }
.checks label { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.checks label.hit { color: var(--ok); }
.checks label.miss { color: var(--bad); }
.mistake { display: flex; gap: 8px; align-items: flex-start; }
.queued { background: var(--paper); border-radius: 12px; padding: 12px; }
.empty { color: var(--muted); }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  aside, .teach { max-height: none; }
}
@media (max-width: 768px) {
  .top {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand lang"
      "nav nav";
    min-height: 0;
  }
  .lang { justify-self: end; }
  .layout { padding-top: 8px; }
}
@media (max-width: 420px) {
  .top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "lang"
      "nav";
    min-height: 0;
    justify-items: start;
  }
  .lang { justify-self: start; }
  .brand img { max-width: min(200px, calc(100vw - 24px)); }
  .book-select {
    font-size: 12px;
    max-width: calc(100vw - 20px);
  }
}
@media (max-width: 320px) {
  .top { padding: 4px 6px; }
  .brand img { max-width: calc(100vw - 16px); }
  /* Keep 「沪科初中物理」 (6 glyphs) fully visible in the native select. */
  .book-select {
    font-size: 12px;
    padding: 3px 18px 3px 6px;
    letter-spacing: 0;
    text-overflow: clip;
    overflow: visible;
  }
}
@media (prefers-color-scheme: dark) {
  .top { background: #fff; color-scheme: light; }
  .brand { background: transparent; color-scheme: light; }
}
@media print {
  .top { position: static; height: auto; overflow: visible; }
  .brand, .brand img { overflow: visible; object-fit: contain; }
  .brand img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 461 / 123; }
}