:root {
  --ink:#173532;
  --muted:#78827b;
  --paper:#f5f3ec;
  --orange:#cc6e46;
  --line:#dedfd4;
  --green:#4d7264}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  font:inherit;
  cursor:pointer;
  border:0;
  color:inherit;
  background:transparent}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:4px}
button:disabled {
  cursor:default;
  opacity:.48}
header {
  height:88px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:50px;
  padding:0 5.5%}
.brand {
  text-decoration:none;
  color:var(--ink);
  font-weight:750;
  font-size:23px;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:12px}
.brand-icon {
  background:var(--ink);
  color:var(--paper);
  border-radius:7px;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  font-size:28px}
.edition {
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:18px;
  margin-left:8px}
nav {
  display:flex;
  gap:28px;
  margin-left:auto}
nav button {
  font-size:13px;
  padding:12px 0}
nav button.active {
  border-bottom:2px solid var(--ink)}
.wallet {
  border:1px solid var(--line);
  border-radius:30px;
  padding:7px 17px;
  display:flex;
  gap:10px;
  color:var(--orange)}
.wallet small {
  color:var(--muted)}
main {
  min-height:calc(100svh - 155px);
  max-width:1450px;
  margin:auto;
  padding:40px 5.5% 30px}
footer {
  border-top:1px solid var(--line);
  margin:0 5.5%;
  min-height:65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  letter-spacing:1px}
footer i {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--green);
  border-radius:50%;
  margin:0 7px}
.eyebrow {
  font-size:11px;
  letter-spacing:3px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:10px}
.eyebrow:before {
  content:'';
  width:20px;
  height:1px;
  background:var(--green)}
h1 {
  font-family:Georgia,'Songti SC',serif;
  font-size:48px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:2px;
  margin:18px 0}
h1 em {
  color:var(--orange);
  font-style:normal}
p {
  color:var(--muted)}
.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px}
.intro {
  max-width:600px}
.intro p {
  margin:16px 0 22px;
  font-size:13px}
.primary {
  background:var(--ink);
  color:white;
  padding:13px 25px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  gap:35px;
  min-height:46px}
.primary:hover {
  background:#285047}
.ghost {
  border:1px solid var(--line);
  border-radius:5px;
  padding:11px 22px;
  min-height:44px}
.hero-actions {
  display:flex;
  align-items:center;
  gap:18px}
.hero-actions small {
  color:var(--muted);
  font-size:11px}
.journey-card {
  width:245px;
  padding:20px 22px;
  border:1px solid var(--line);
  background:#eeeee5;
  border-radius:7px;
  position:relative}
.journey-card:before {
  content:'✦';
  position:absolute;
  right:22px;
  top:14px;
  font-size:25px;
  color:#b8c4b6}
.journey-card small {
  font-size:10px;
  letter-spacing:2px;
  color:var(--green)}
.journey-card h3 {
  font-size:15px;
  font-weight:500;
  margin:10px 0}
.journey-card p {
  font-size:11px;
  margin:8px 0}
.progress {
  height:4px;
  background:#dce0d5;
  border-radius:3px;
  overflow:hidden}
.progress span {
  display:block;
  background:var(--green);
  height:100%}
.map-section {
  margin-top:32px}
.section-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px}
.section-bar h2 {
  font-weight:600;
  font-size:14px;
  letter-spacing:2px;
  margin:0}
.section-bar small {
  font-size:11px;
  color:var(--muted)}
.atlas {
  height:400px;
  background:#e8ece2;
  border:1px solid #dce1d6;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(#a2b19f66 .7px,transparent .7px);
  background-size:16px 16px}
.atlas svg {
  width:100%;
  height:100%;
  position:absolute;
  inset:0}
.land {
  fill:#c4cfbd;
  stroke:#e8ece2;
  stroke-width:2}
.map-label {
  position:absolute;
  left:24px;
  top:20px;
  color:#7f927e;
  font-size:10px;
  letter-spacing:3px}
.compass {
  position:absolute;
  right:26px;
  top:22px;
  color:#7f927e;
  text-align:center;
  font-size:12px;
  line-height:1.4}
.pin {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  background:#f7f6eeed;
  border:1px solid #d5dccd;
  border-radius:5px;
  box-shadow:0 3px 10px #29412a08;
  white-space:nowrap;
  font-size:12px}
.pin b {
  display:block;
  font-weight:500}
.pin small {
  font-size:9px;
  color:var(--muted)}
.pin.active {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  padding:10px 15px}
.pin.active small {
  color:#bacac0}
.pin.active:before {
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  background:var(--orange);
  border:3px solid #e8ece2;
  border-radius:100%;
  left:50%;
  bottom:-16px;
  box-shadow:0 0 0 5px #b4bea55c}
.pin.us {
  background:#f6f2e8;
  color:var(--ink);
  border-color:#c2cabb}
.pin.locked {
  color:#899287;
  font-size:11px}
.map-caption {
  position:absolute;
  left:22px;
  bottom:18px;
  font-size:10px;
  letter-spacing:1px;
  color:#83917d}
.legend {
  position:absolute;
  right:22px;
  bottom:18px;
  color:#75856f;
  font-size:10px}
.legend i {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%;
  margin:0 6px 0 18px}
.legend i:last-of-type {
  background:#b2bcaa}
.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:23px;
  gap:25px}
.feature {
  display:flex;
  gap:14px;
  align-items:center}
.feature-icon {
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  width:42px;
  height:42px;
  flex-shrink:0;
  font-size:19px;
  color:var(--green)}
.feature h3 {
  font-size:12px;
  font-weight:600;
  margin:0}
.feature p {
  font-size:10px;
  margin:3px 0}
.back {
  font-size:12px;
  color:var(--green);
  margin-bottom:14px;
  padding:5px 0}
.page-title {
  display:flex;
  justify-content:space-between;
  align-items:end}
.page-title h1 {
  font-size:38px}
.timeline {
  max-width:850px;
  margin:30px auto;
  position:relative}
.timeline:before {
  content:'';
  position:absolute;
  left:23px;
  top:10px;
  bottom:30px;
  width:1px;
  background:#cbd4c7}
.period {
  display:flex;
  gap:24px;
  position:relative;
  margin:0 0 18px}
.node {
  width:47px;
  height:47px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid #cbd4c7;
  background:var(--paper);
  display:grid;
  place-items:center;
  font-size:13px}
.period.open .node {
  background:var(--ink);
  color:white}
.period.done .node {
  background:var(--green);
  color:white}
.period-card {
  flex:1;
  text-align:left;
  padding:20px 25px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff9;
  display:flex;
  justify-content:space-between;
  align-items:center}
.period-card h3 {
  margin:4px 0;
  font-size:18px;
  font-weight:500}
.period-card small {
  color:var(--green);
  letter-spacing:2px}
.period-card p {
  margin:4px 0;
  font-size:11px}
.levels {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:40px 0}
.level-card {
  background:#eceee4;
  border:1px solid var(--line);
  border-radius:8px;
  padding:30px;
  text-align:left;
  min-height:240px;
  display:flex;
  flex-direction:column;
  align-items:start}
.level-card .number {
  font-family:Georgia,serif;
  font-size:45px;
  color:#8c9c86}
.level-card h3 {
  font-size:18px;
  margin:15px 0 5px}
.level-card p {
  font-size:12px}
.level-card .status {
  margin-top:auto;
  padding-top:20px;
  color:var(--orange);
  font-size:12px}
.modal-shade {
  position:fixed;
  inset:0;
  background:#0f2426ad;
  z-index:20;
  display:grid;
  place-items:center;
  padding:20px;
  backdrop-filter:blur(5px)}
.modal {
  width:min(480px,100%);
  background:var(--paper);
  border-radius:12px;
  padding:30px;
  max-height:90svh;
  overflow:auto;
  box-shadow:0 20px 100px #0003}
.modal h2 {
  font-family:'Songti SC',serif;
  font-size:25px;
  font-weight:500;
  line-height:1.5;
  margin:14px 0}
.modal p {
  font-size:13px}
.choices {
  display:grid;
  gap:9px;
  margin:22px 0}
.choice {
  text-align:left;
  padding:14px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff8;
  min-height:48px}
.choice:hover {
  border-color:var(--green)}
.choice.correct {
  background:#dce8d9;
  border-color:var(--green)}
.choice.wrong {
  background:#f2ded4;
  border-color:var(--orange)}
.feedback {
  font-size:13px;
  min-height:24px}
.modal .primary {
  width:100%;
  justify-content:space-between;
  margin-top:15px}
.game-layout {
  max-width:520px;
  margin:0 auto}
.game-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:12px}
.game-board {
  height:min(66svh,610px);
  min-height:300px;
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:var(--ink);
  touch-action:none}
canvas {
  width:100%;
  height:100%;
  display:block}
.game-hud {
  position:absolute;
  left:18px;
  right:18px;
  top:15px;
  color:#f1ead9;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  pointer-events:none}
.game-help {
  position:absolute;
  bottom:16px;
  left:0;
  right:0;
  text-align:center;
  color:#e6e4d7aa;
  font-size:11px;
  pointer-events:none}
.game-buttons {
  display:flex;
  gap:12px;
  margin-top:12px}
.game-buttons button {
  flex:1;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:5px}
.game-board .progress {
  position:absolute;
  top:42px;
  left:18px;
  right:18px;
  background:#ffffff20;
  height:3px}
.game-board .progress span {
  background:#d99066}
#toast {
  position:fixed;
  left:50%;
  bottom:35px;
  transform:translateX(-50%);
  background:var(--ink);
  color:white;
  z-index:50;
  border-radius:6px;
  padding:12px 24px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  width:max-content;
  max-width:90vw}
#toast.visible {
  opacity:1}
.statline {
  font-size:12px;
  color:var(--green)}
.result-stats {
  display:flex;
  gap:30px;
  margin:25px 0}
.result-stats strong {
  display:block;
  font-size:30px;
  font-weight:400;
  color:var(--ink)}
.result-stats span {
  font-size:11px;
  color:var(--muted)}
.source-note {
  font-size:11px;
  color:var(--muted);
  max-width:700px}
.source-note a {
  color:var(--green)}

@media(min-width:1500px) {
  main {
  padding-top:50px}
.atlas {
  height:460px}
}
@media(max-width:720px) {
  header {
  height:70px;
  padding:0 6%;
  gap:12px}
.brand {
  font-size:19px;
  gap:8px}
.brand-icon {
  width:29px;
  height:29px;
  font-size:23px}
.edition {
  display:none}
nav {
  gap:15px}
nav button {
  font-size:11px}
.wallet {
  padding:5px 10px;
  font-size:12px;
  gap:5px}
.wallet small {
  display:none}
main {
  padding:28px 6% 24px;
  min-height:calc(100svh - 140px)}
h1 {
  font-size:37px;
  letter-spacing:1px}
.hero-top {
  align-items:start}
.journey-card {
  display:none}
.intro p {
  font-size:12px}
.hero-actions {
  gap:12px}
.hero-actions small {
  font-size:10px}
.map-section {
  margin-top:30px}
.atlas {
  height:350px}
.atlas svg {
  width:170%;
  max-width:none;
  left:-32%}
.pin {
  padding:5px 7px;
  font-size:10px;
  gap:4px}
.pin.active {
  padding:8px 10px}
.pin small {
  font-size:8px}
.pin.locked {
  font-size:9px}
.map-label {
  font-size:8px;
  left:14px;
  top:14px}
.compass {
  right:14px;
  top:14px}
.map-caption {
  left:12px;
  font-size:8px;
  bottom:12px}
.legend {
  right:12px;
  bottom:12px;
  font-size:8px}
.legend i {
  margin-left:8px}
.features {
  gap:15px;
  grid-template-columns:1fr;
  margin-top:22px}
.feature {
  gap:12px}
.feature-icon {
  width:35px;
  height:35px;
  font-size:17px}
.feature p {
  font-size:11px}
.feature h3 {
  font-size:12px}
footer {
  margin:0 6%;
  font-size:9px;
  gap:15px;
  min-height:70px}
footer span:last-child {
  text-align:right}
.section-bar small {
  font-size:9px}
.levels {
  grid-template-columns:1fr;
  margin:25px 0;
  gap:12px}
.level-card {
  min-height:140px;
  padding:20px;
  position:relative}
.level-card .number {
  position:absolute;
  right:20px;
  top:15px;
  font-size:35px}
.level-card h3 {
  margin:0 0 5px}
.level-card .status {
  padding-top:15px}
.page-title h1 {
  font-size:30px}
.period {
  gap:13px}
.period-card {
  padding:15px}
.period-card h3 {
  font-size:15px}
.period-card small {
  font-size:10px}
.period-card p {
  font-size:10px}
.modal {
  padding:24px}
.modal h2 {
  font-size:22px}
.game-board {
  height:63svh}
.eyebrow {
  font-size:10px;
  letter-spacing:2px}
.statline {
  font-size:10px}
}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important}
}

/* 第二辑：光影档案、时期序章和图文放映厅。所有卡片保持足够的触摸区域。 */
header{gap:30px}nav{gap:22px}nav button{white-space:nowrap}.sound-toggle{font-size:11px;white-space:nowrap;color:var(--green);min-height:44px}.wallet{cursor:pointer}.quiet{display:block;width:100%;min-height:44px;color:var(--muted);margin-top:8px}.archive-chips{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0}.archive-chips span{font-size:10px;border:1px solid #cdd6c6;padding:4px 9px;border-radius:3px;color:var(--green)}.study-note{padding:17px 20px;border-left:2px solid var(--orange);background:#e9ebdf;margin:20px 0;text-align:left}.study-note small{font-size:10px;color:var(--orange);letter-spacing:2px}.study-note p{font-size:12px;line-height:1.9;margin:8px 0 0;color:#607063}.study-note ul{padding-left:18px;margin:12px 0;font-size:12px;color:#53665c}.study-note li{padding:4px 0}.intro-art{height:145px;overflow:hidden;margin:-30px -30px 26px;position:relative;background:var(--ink)}.intro-art .archive-poster{height:auto;width:100%;transform:translateY(-20%)}.intro-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#17353255)}.chapter-intro h2{font-size:28px}.intro-lead{font-family:Georgia,'Songti SC',serif!important;line-height:2.05!important;font-size:15px!important;color:var(--ink)!important}.archive-poster{width:100%;height:auto;display:block}.chapter-banner{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:7px;padding:16px 20px;margin-top:25px;background:#e9ecdf}.chapter-banner .banner-art{width:55px;height:65px;overflow:hidden;flex-shrink:0}.chapter-banner .banner-art svg{transform:translateY(-8px)}.chapter-banner h3{font-size:14px;margin:0 0 5px;font-weight:500}.chapter-banner p{font-size:11px;margin:0}.chapter-banner button{margin-left:auto;white-space:nowrap;font-size:11px;min-height:44px}.chapter-banner .free-review{color:var(--orange)}.question-tag{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}.difficulty{font-size:10px;letter-spacing:1px;padding:4px 9px;background:#e2e8d9;border-radius:3px;color:var(--green)}.difficulty.advanced{background:#ecdcc9;color:#a46841}.quiz-topic{font-size:10px;color:var(--muted);margin-top:10px}.feedback{line-height:1.9}.feedback-source{font-size:10px;color:var(--green)}.archive-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:30px;border-bottom:1px solid var(--line);gap:20px}.archive-tabs{display:flex;gap:30px}.archive-tabs button{padding:15px 0;border-bottom:2px solid transparent;font-size:13px;min-height:48px}.archive-tabs [aria-selected=true]{border-color:var(--ink);font-weight:600}.small-button{font-size:11px;padding:7px 12px;min-height:36px}.archive-balance{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0;color:var(--green);font-size:12px}.archive-balance strong{font-size:22px;color:var(--orange);font-weight:500;margin-left:9px}.archive-balance small{font-size:10px;color:var(--muted)}.archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;margin:25px 0 35px}.collect-card{padding:0;border:1px solid var(--line);border-radius:7px;background:#fcfaf4;text-align:left;overflow:hidden;transition:transform .2s,box-shadow .2s}.collect-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #17353212}.collect-art{position:relative;aspect-ratio:300/370;overflow:hidden;background:var(--ink)}.collect-art svg{width:100%;height:auto;position:absolute;top:-2%}.collection-stamp{position:absolute;bottom:12px;right:12px;color:#f1e8d1;background:#16342de8;border:1px solid #e8e4c733;padding:5px 9px;font-size:10px;border-radius:3px}.collected .collection-stamp{background:#f5f1dfed;color:var(--ink)}.collect-caption{padding:17px}.collect-caption>span{font-size:9px;color:var(--muted);letter-spacing:1px}.collect-caption h3{font-size:18px;font-weight:500;line-height:1.5;margin:7px 0}.collect-caption p{font-size:11px;line-height:1.7;min-height:37px;margin:0 0 10px}.collect-caption small{font-size:10px;color:var(--green)}.screening-locked .collect-art{filter:saturate(.35);opacity:.75}.screening-locked .collection-stamp{background:#263f35}.director-head{display:flex;align-items:center;gap:22px}.director-head>svg{width:100px;flex-shrink:0;border-radius:4px}.director-head h2{font-size:22px;margin:8px 0}.director-head p{font-size:11px;margin:5px 0}.director-head small{font-size:10px;color:var(--green);line-height:1.7;display:block}.archive-story{margin:25px 0}.archive-story h3{font-size:15px;font-weight:500}.archive-story p{font-size:13px;line-height:2.1;color:#596a5e}.compare-note{padding-top:12px;border-top:1px solid #cfd8c5}.redeem-summary{display:flex;justify-content:space-between;align-items:center;margin-top:25px;gap:10px}.redeem-summary strong{font-size:18px;color:var(--orange);font-weight:500}.redeem-summary span{font-size:11px;color:var(--muted)}.archive-sources{display:flex;gap:7px;flex-wrap:wrap;font-size:10px;margin:20px 0}.archive-sources small{width:100%;color:var(--muted);letter-spacing:1px}.archive-sources a{color:var(--green);text-underline-offset:3px}.screening-page{max-width:1030px;margin:auto}.screening-page>h1{font-size:38px}.screening-preface{font-size:12px}.screening-stage{background:#192f2d;border-radius:9px;display:grid;grid-template-columns:minmax(230px,.8fr) 1.2fr;gap:50px;padding:38px;margin:30px 0 25px;color:#f0ead8;position:relative;overflow:hidden}.screening-stage:after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(90deg,transparent 0 12px,#f5f3ec66 12px 21px,transparent 21px 32px)}.screening-art{max-width:310px;width:100%;box-shadow:0 10px 50px #0005;align-self:center}.screening-copy{align-self:center}.frame-index{font-size:10px;letter-spacing:3px;color:#9db19e}.screening-copy h2{font-family:'Songti SC',serif;font-size:31px;font-weight:400;margin:20px 0 5px}.screening-copy .film-credit{font-size:11px;color:#a2b3a6}.screening-copy blockquote{margin:30px 0 10px;font-family:'Songti SC',serif;font-size:22px;line-height:1.9;letter-spacing:1px;color:#ead9b6}.comment-credit{font-size:10px;color:#839f91}.screening-focus{margin:30px 0}.screening-focus small{font-size:10px;color:#cf9b70;letter-spacing:2px}.screening-focus p{font-size:12px;color:#b3c4b4;line-height:1.9}.screening-controls{display:flex;gap:10px}.screening-controls button{font-size:11px;border-color:#4b6054;color:#e5e5d0;padding:10px 14px}.score-label{font-size:10px;color:#94aa99;margin-top:20px}.review-end{display:flex;align-items:center;justify-content:space-between;gap:20px}.review-end p{font-family:'Songti SC',serif;font-size:13px}.sound-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;min-height:52px}.sound-row input{accent-color:var(--green);width:21px;height:21px}.volume-row{display:flex;justify-content:space-between;margin:23px 0 12px;font-size:12px}#volume-setting{width:100%;accent-color:var(--green);height:30px}.archive-invite{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:#e9ecdf;border:1px solid var(--line);border-radius:7px;margin-top:27px;gap:20px}.archive-invite h3{font-size:13px;margin:0 0 5px;font-weight:500}.archive-invite p{font-size:11px;margin:0}.archive-invite button{white-space:nowrap;font-size:11px}.modal .primary:disabled{background:#88968a;opacity:.7}.modal{overscroll-behavior:contain}
@media(max-width:1000px){header{gap:15px}nav{gap:16px}.edition{display:none}.archive-grid{gap:17px;grid-template-columns:repeat(3,minmax(0,1fr))}.screening-stage{gap:30px}}
@media(max-width:720px){header{padding:0 5%;gap:9px;flex-wrap:wrap;height:auto;min-height:92px;padding-top:10px;padding-bottom:8px}.brand{font-size:18px}.brand-icon{width:27px;height:27px}.wallet{margin-left:auto;order:1}.sound-toggle{order:2;min-height:34px;padding:4px;font-size:10px}nav{order:3;margin-left:0;width:100%;justify-content:space-between;gap:12px;padding-left:35px}nav button{font-size:11px;padding:4px 0;min-height:32px}main{padding-top:25px}.intro-art{margin:-24px -24px 23px;height:135px}.chapter-intro h2{font-size:25px}.intro-lead{font-size:14px!important}.chapter-banner{padding:13px;gap:12px}.chapter-banner .banner-art{width:40px;height:53px}.chapter-banner h3{font-size:12px}.chapter-banner p{font-size:10px}.chapter-banner button{font-size:10px;padding:5px}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.archive-toolbar{margin-top:22px;gap:12px}.archive-tabs{gap:20px}.archive-tabs button{font-size:12px}.archive-balance{align-items:start;gap:10px;flex-direction:column}.archive-balance small{font-size:10px}.collect-caption{padding:12px}.collect-caption h3{font-size:15px;line-height:1.6}.collect-caption p{font-size:10px;min-height:35px}.collect-caption>span{font-size:8px}.collection-stamp{bottom:9px;right:9px;font-size:9px;padding:4px 6px}.director-head{gap:16px}.director-head>svg{width:85px}.director-head h2{font-size:20px}.screening-page>h1{font-size:29px}.screening-stage{grid-template-columns:1fr;gap:25px;padding:22px;margin-top:22px}.screening-art{width:72%;max-width:220px;justify-self:center}.screening-copy h2{font-size:27px;margin-top:12px}.screening-copy blockquote{font-size:20px;margin-top:20px}.screening-focus{margin:23px 0}.review-end{flex-direction:column;align-items:start;gap:8px}.review-end p{font-size:12px}.review-end button{width:100%;justify-content:space-between}.archive-invite{padding:15px;gap:12px}.archive-invite h3{font-size:12px}.archive-invite p{font-size:10px}.archive-invite button{padding:9px 11px;font-size:10px}.game-board{height:58svh}.game-hud{font-size:12px}}
@media(prefers-reduced-motion:reduce){.collect-card:hover{transform:none}}

.modal:focus{outline:none}
/* 课程与题库：路线独立，移动端可横向滚动切换。 */
.route-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:25px 0;overflow:auto}.route-tabs button{padding:12px 0;border-bottom:2px solid transparent;min-height:48px;white-space:nowrap}.route-tabs button[aria-selected=true]{border-color:var(--ink);font-weight:600}.route-tabs small{color:var(--muted);font-size:10px;margin-left:5px}.bank-mini{font-size:10px;color:var(--green);display:block;margin-top:8px}.node-status{flex-shrink:0;font-size:11px;margin-left:12px}.question-bank-summary{display:flex;gap:28px;align-items:center;padding:20px 23px;background:#e9ecdf;border:1px solid var(--line);border-radius:7px;margin:25px 0}.question-bank-summary>div{display:flex;flex-direction:column;align-items:start;min-width:55px}.question-bank-summary strong{font-family:Georgia,serif;font-size:27px;font-weight:400;color:var(--orange)}.question-bank-summary span{font-size:10px;color:var(--green)}.question-bank-summary p{font-size:11px;max-width:360px;margin:0 0 0 auto;line-height:1.9}.collection-filters{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 13px}.country-filters{display:flex;gap:7px}.country-filters button{border:1px solid var(--line);padding:8px 13px;border-radius:4px;min-height:40px;font-size:11px}.country-filters [aria-pressed=true],#owned-filter[aria-pressed=true]{background:var(--ink);color:#f4f1df;border-color:var(--ink)}.archive-search{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:11px;color:var(--muted)}.archive-search input{border:1px solid var(--line);border-radius:4px;background:#fbfaf4;padding:10px 13px;min-height:42px;min-width:220px;font:inherit;color:var(--ink)}.empty-archive{padding:35px;background:#e9ecdf;grid-column:1/-1;border-radius:7px;font-size:13px}.period-card>div{min-width:0}.period-card p{max-width:570px}
@media(max-width:720px){.route-tabs{gap:19px;margin:20px 0}.route-tabs button{font-size:12px}.question-bank-summary{gap:20px;padding:16px;flex-wrap:wrap}.question-bank-summary p{width:100%;max-width:none;margin:0}.question-bank-summary strong{font-size:25px}.collection-filters{gap:10px;margin-top:17px}.country-filters{width:100%;gap:8px}.country-filters button{flex:1}.archive-search{margin-left:0;flex:1;min-width:0}.archive-search>span{display:none}.archive-search input{min-width:0;width:100%}.node-status{margin-left:8px;font-size:10px}.period-card p{font-size:10px;line-height:1.9}.bank-mini{font-size:9px}.archive-balance small{line-height:1.8}}

/* 影人收藏：纸张、藏品编号与观影路线，正文在手机上自然纵向展开。 */
.collect-caption .archive-chips {gap:5px;margin:12px 0}
.collect-caption .archive-chips span {font-size:10px;padding:2px 7px}
.entry-preview {border-top:1px solid var(--line);padding:12px 0;font-size:12px}
.entry-preview>span {display:block;color:var(--muted);font-size:10px;letter-spacing:2px;margin-bottom:3px}
.archive-toolbar {flex-wrap:wrap;gap:12px}
.modal:has(.filmmaker-sheet) {max-width:880px;width:calc(100vw - 32px);padding:0;border-radius:9px}
.sheet-top {display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:2px}
.sheet-top button {min-height:44px;letter-spacing:0}
.filmmaker-cover {display:grid;grid-template-columns:190px 1fr;gap:38px;padding:32px 40px;background:#e9ecdf;align-items:center}
.portrait-print {position:relative;transform:rotate(-3deg);box-shadow:4px 8px 0 #17353218;border:7px solid #fffdf5}
.portrait-print svg {display:block;width:100%;height:auto}
.edition-seal {position:absolute;bottom:12px;right:-14px;background:var(--orange);color:white;padding:4px 14px;font-size:11px;transform:rotate(3deg)}
.filmmaker-heading h2 {font-size:38px;line-height:1.2;margin:14px 0}
.person-tagline {font-size:17px!important;line-height:1.7!important}
.filmmaker-heading>small,.sheet-intro {color:var(--muted)}
.sheet-intro {margin:18px 0 0!important;font-size:12px!important}
.sheet-body {padding:32px 40px}
.section-number {font-size:11px;letter-spacing:2px;color:var(--orange);margin-bottom:18px}
.sheet-body section+section {margin-top:32px}
.viewing-film {display:grid;grid-template-columns:105px 1fr;gap:24px;align-items:start}
.film-mini svg {display:block;width:100%;height:auto;box-shadow:0 5px 12px #17353218}
.viewing-film h3 {margin:5px 0 8px;font-size:21px;line-height:1.5}
.viewing-film p {font-size:14px;line-height:1.9;margin:8px 0 16px}
.watch-button[aria-pressed=true] {background:var(--ink);color:var(--paper)}
.watching-note {background:var(--ink);color:var(--paper);padding:24px 28px;margin:28px 0;border-radius:3px}
.watching-note>span {font-size:11px;letter-spacing:2px;color:#bed0b7}
.watching-note p {font-size:18px;line-height:1.9;margin:12px 0}
.watching-note>small {font-size:10px;color:#b5c2b5}
.sheet-body .archive-story {margin:32px 0}
.sheet-body .archive-story h3 {font-size:23px;margin:0 0 14px}
.sheet-body .archive-story p {font-size:15px;line-height:2.1}
.filmography {border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:28px 0}
.filmography>span {font-size:11px;color:var(--muted);letter-spacing:1px}
.filmography p {font-size:13px;line-height:2}
.sealed-content {background:#ecece1;border:1px dashed #b3bdab;padding:24px;margin:28px 0}
.sealed-content h3 {font-size:19px;margin:14px 0}
.sealed-content p {line-height:2!important}
.sealed-content small {color:var(--muted)}
.saved-films article {display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.saved-films small {color:var(--orange);font-size:10px;letter-spacing:2px}
.saved-films h3 {margin:4px 0;font-size:17px}
.saved-films p {margin:0;font-size:12px;color:var(--muted)}
@media(max-width:600px) {
 .sheet-top {padding:8px 18px;font-size:10px;letter-spacing:1px}
 .filmmaker-cover {grid-template-columns:102px 1fr;gap:20px;padding:26px 20px}
 .filmmaker-heading h2 {font-size:25px;overflow-wrap:anywhere;margin:9px 0}
 .filmmaker-heading .eyebrow {font-size:9px;letter-spacing:1px}
 .person-tagline {font-size:13px!important}
 .sheet-intro {display:none}
 .filmmaker-heading .archive-chips {gap:4px;margin:10px 0}
 .filmmaker-heading .archive-chips span {font-size:9px;padding:2px 5px}
 .sheet-body {padding:26px 20px}
 .viewing-film {grid-template-columns:75px 1fr;gap:16px}
 .viewing-film h3 {font-size:17px}
 .viewing-film p {font-size:13px;line-height:1.85}
 .viewing-film .eyebrow {font-size:9px}
 .watching-note {padding:22px 20px}
 .watching-note p {font-size:16px}
 .sheet-body .archive-story h3 {font-size:21px}
 .sheet-body .archive-story p {font-size:14px}
 .sealed-content {padding:20px}
 .archive-tabs button {padding:10px 12px}
}
.modal .watching-note p {color:#f5f3ec}