@charset "UTF-8";
/*
 * 宋韵册页 · 五章视觉精修
 * 只覆盖排版、色彩与装裱。舞台尺寸、木梁坐标、热点 transform、
 * Canvas 画面与原生 dialog 的开合机制均沿用原实现。
 */
:root {
  --paper: #f4f1e8;
  --ink: #263f37;
  --green: #3c5e4f;
  --muted: #687561;
  --line: #cfd2bf;
  --red: #9f503d;
  --wood: #956c46;
  --gold: #b69a68;
  --exhibition-copy: #5f705e;
  --exhibition-note: #657057;
  --exhibition-frame: #c4c9b2;
  --exhibition-wash: #ebe9dc;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% 5%, #fffaf14d, transparent 68%);
  text-rendering: optimizeLegibility;
}
body::before { opacity: .12; }
::selection { color: #f8f1df; background: #486851; }

/* 题字如册页题签，操作和阅读维持清楚的层级。 */
.brand > span { color: #28483a; }
.brand > svg { stroke: #42634f; }
.brand small { color: #687562; }
.header-nav > * { color: #6b7866; white-space: nowrap; }
.header-nav .is-current { color: #2d4e3d; }
.header-nav .is-current::after { background: #a75e43; }
.sound-toggle { min-height: 44px; min-width: 76px; color: #52674e; }
.sound-toggle svg { border-color: #c8cdb9; background: #faf6ea57; }
.eyebrow { color: #738066; line-height: 1.7; }
.game-heading h1,
.weave-heading h1,
.instant-heading h1,
.explore-heading h1,
.guardian-heading h1 {
  color: #2e4c3e;
  font-weight: 400;
  text-shadow: 0 1px 0 #ffffff70;
}
.game-heading > p:last-child,
.weave-heading > p:last-child,
.instant-heading > p:last-child,
.explore-heading > p:last-child,
.guardian-heading > p:last-child {
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: .6px;
  color: var(--exhibition-copy);
}
.back-button { min-height: 44px; color: #63735a; }
.back-button span { font-size: 12px; }

/* 黛青与薄金，只在操作端建立适度的分量。 */
.primary-button {
  min-height: 52px;
  border: 1px solid #294638;
  border-radius: 1px;
  background: linear-gradient(145deg, #355443, #263f37 85%);
  box-shadow: inset 0 0 0 3px #afaa7520, 0 4px 12px #2945340c;
  color: #f7f0dc;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 2px;
}
.primary-button:hover {
  background: linear-gradient(145deg, #45674f, #304f40);
  border-color: #536b49;
  box-shadow: inset 0 0 0 3px #c8b88724, 0 6px 18px #29453415;
}
.primary-button:disabled { box-shadow: none; }
.secondary-button {
  min-height: 46px;
  border-color: #b5bea3;
  background: #f7f4e755;
  color: #516a4c;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 2px #fbf8ed66;
}
.secondary-button:hover { background: #e5e8d7; border-color: #9aa888; }
.text-button { min-height: 44px; font-size: 12px; color: #6b795f; }
.primary-button:focus-visible,
.secondary-button:focus-visible,
.text-button:focus-visible,
.sound-toggle:focus-visible {
  outline: 2px solid #a76245;
  outline-offset: 4px;
}

/* 纸绢装裱：以细内沿和浅墨投影取代厚重卡片。 */
.workbench,
.weave-workbench,
.instant-composition,
.explore-gallery,
.guardian-intro {
  border-color: var(--exhibition-frame);
  box-shadow: 0 12px 35px #4b57330a, 0 1px 0 #fffffb80;
}
.board-topline,
.weave-topline,
.instant-labelbar,
.explore-labelbar,
.explore-exhibit-top {
  border-bottom-color: #d0d3bd;
  background: linear-gradient(90deg, #ebe9db50, #faf7ec47, #e9e6d75c);
  color: #68795c;
}
.board-topline i,
.weave-topline i,
.instant-labelbar i,
.explore-labelbar i,
.explore-exhibit-top i { color: #8b937a; }
.timer-wrap { color: #748064; }
.timer-wrap time { color: #476047; }

/* 序章：保留原画和留白，增强题字与副题的清晰度。 */
.hero h1 { color: #294a3b; text-shadow: 0 1px 0 #17332560; }
.hero-subtitle { color: #3f5d48; }
.hero-description { font-size: 13px; line-height: 2; color: #64715e; }
.experience-note { font-size: 11px; color: #748064; }
.poem { color: #60765b; }
.hero-bottom { color: #78836a; }
.journey { border-color: #cdd2bc; grid-template-columns: 1.1fr repeat(5, minmax(0, 1fr)); gap: 23px; }
.journey h2,.journey h3 { color: #36533f; }
.journey-step { border-color: #d1d5c2; padding-left: 20px; }
.journey-step p { font-size: 13px; line-height: 2; color: #6d7b62; }
.site-footer { border-color: #cdd2bc; color: #748167; font-size: 11px; }
.site-footer button { min-height: 44px; font-size: 11px; }

/* 第一关：只精修木面与反馈，不更改定位、旋转或点击热区。 */
.beam {
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, #744c2918 5px 6px, transparent 6px 11px, #f7d4a210 11px 12px), linear-gradient(180deg, #c09d70 0%, #ad8254 32%, #93633c 100%);
  border-color: #805a38;
}
.beam.is-dragging {
  box-shadow: 0 4px 0 #6e4a2c, 0 15px 23px #2d423335, 0 0 0 4px #d5ba7e2b;
}
.target.is-active { border-color: #a57c45; background: #d8c4947a; box-shadow: 0 0 0 5px #c3a56e17; }
.game-hint,.weave-message {
  font-size: 13px;
  line-height: 1.9;
  color: #62765a;
  background: #f8f5e65c;
  border-top-color: #d0d3bd;
}
.progress-row,.weave-progress-row { font-size: 12px; color: #6d7b61; }
.progress-track,.weave-progress-track { background: #dadfca; }
.progress-track span { background: linear-gradient(90deg, #809974, #a58b58); }
.craft-steps li strong { font-size: 13px; }
.craft-steps li small { font-size: 11px; color: #7a866c; }
.guide-note { font-size: 11px; line-height: 1.95; color: #78836b; }
.game-footer { color: #7d876f; font-size: 13px; }
.success-dialog,.about-dialog { border-color: #bdc3a9; box-shadow: 0 18px 75px #233b3040, inset 0 0 0 5px #f9f6e85c; }
.success-dialog > p:not(.eyebrow),.about-dialog > p:not(.eyebrow) { font-size: 14px; line-height: 2; color: #66775e; }
.success-stat { font-size: 12px; color: #7a8269; }
.success-dialog .primary-button { font-size: 13px; }

/* 第二关：木作图谱的章法，衬托构件而不添加体积庞大的装饰。 */
.weave-target.is-active .weave-target-outline { stroke: #9c7844; }
.weave-piece.is-selected .weave-piece-body { filter: drop-shadow(0 0 5px #ba8c46aa); }
.weave-piece.is-dragging { filter: drop-shadow(0 14px 8px #433c2b40); }
.weave-guide-poem { font-size: 12px; line-height: 2.1; color: #748367; }
.weave-principles p { font-size: 12px; color: #738369; }
.weave-principles strong { font-size: 13px; color: #516e4e; }
.weave-guide-actions .text-button,.weave-audio-button { font-size: 12px; min-height: 44px; color: #718063; }
.weave-disclosure { font-size: 11px; line-height: 1.95; color: #7a846d; }
.weave-disclosure span { color: #667c59; font-size: 14px; }
.weave-finale { border-top-color: #bfc8aa; }
.weave-finale > p:not(.eyebrow) { font-size: 13px; line-height: 2; color: #6d7e61; }
.weave-final-actions .primary-button { min-height: 50px; font-size: 13px; }
.weave-final-actions > .text-button { font-size: 12px; }
.weave-film-title > span { color: #38523f; text-shadow: 0 1px 8px #f7f3e4b3; }

/* 第三关：画卷正文如展签，高潮诗句保持空灵的辨识度。 */
.instant-scrubber { background: linear-gradient(180deg, #f8f5e75c, #ecebdc80); }
.instant-progress-top > span { color: #526e4c; }
.instant-stage-nav button { min-height: 44px; font-size: 12px; color: #758169; }
.instant-stage-nav button > i { color: #8b947b; }
.instant-stage-nav button[aria-current="step"] { color: #916640; }
.instant-stage-copy > p:last-child,.instant-culture article p {
  font-size: 14px;
  line-height: 2;
  letter-spacing: .4px;
  color: #687a5f;
}
.instant-culture h3 { color: #4e6b48; }
.instant-culture a { font-size: 11px; line-height: 1.9; color: #788369; border-bottom-color: #b7c2a0; }
.instant-disclosure { font-size: 11px; line-height: 1.95; color: #7f876e; }
.instant-disclosure strong { color: #8e734f; }
.instant-lower-actions .text-button { font-size: 12px; }
.instant-completion > p:not(.eyebrow) { font-size: 14px; line-height: 2; color: #6d7d61; }
.instant-completion .primary-button { min-height: 52px; font-size: 14px; }
.instant-completion .coming-note { font-size: 11px; }
.instant-poem > span { color: #36543f; text-shadow: 0 1px 7px #fff9eeb3; }

/* 第四关：保留顶层答题窗和已修复的热点按压偏移。 */
.explore-pin { border-color: #a58a5a; background-color: #f7f1e1d9; }
.explore-pin-label { color: #49613f; background-color: #faf6e8dc; border-color: #b7a47999; }
.explore-colophon { color: #7a876c; }
.explore-colophon > span:last-child { color: #8d7c58; }
.explore-exhibit { background: linear-gradient(90deg, #e5e0cc45, transparent 9%), #f6f2e7; }
.explore-book-mark,.explore-seal,.explore-quiz-seal { border-color: #b1966b; }
.explore-overview > p:not(.eyebrow),
.explore-culture-copy,
.explore-quiz-intro > p:last-child,
.explore-finale > p:not(.eyebrow),
.explore-quiz-launch p:last-child {
  font-size: 14px;
  line-height: 2;
  letter-spacing: .4px;
  color: #63785b;
}
.explore-overview-rule p { font-size: 12px; color: #5c7353; }
.explore-overview-rule small { font-size: 11px; color: #788469; }
.explore-overview .explore-overview-foot { font-size: 11px; color: #8c7b58; }
.explore-exhibit-lead { font-size: 16px; color: #6b805e; }
.explore-art-note,.explore-mini-art > small { font-size: 11px; line-height: 1.85; color: #887750; }
.explore-source { font-size: 11px; line-height: 1.9; color: #768266; border-bottom-color: #b8c29f; }
.explore-action { min-height: 46px; font-size: 13px; color: #516c48; border-color: #b5c09e; background: #fbf8ed4d; }
.explore-action:hover { background: #e6e8d6; }
.explore-collect { color: #95613f; min-height: 48px; font-size: 15px; }
.explore-range-label { font-size: 12px; color: #6b7e60; }
.explore-range { height: 44px; }
.explore-joint-actions .text-button { min-height: 44px; font-size: 12px; }
.explore-lineage-tabs > button { min-height: 44px; font-size: 16px; color: #7e896f; }
.explore-status { font-size: 12px; color: #6a7e5c; }
.explore-support-status { font-size: 12px; line-height: 1.9; color: #886d46; }
.explore-disclosure { font-size: 11px; color: #7d876e; line-height: 1.95; }
.explore-lower-actions .text-button { font-size: 12px; }
.explore-quiz-launch > .primary-button { min-height: 50px; font-size: 13px; }
.explore-quiz-dialog { border-color: #b4bfa0; box-shadow: 0 20px 90px #243b3052, inset 0 0 0 5px #fbf7e966; }
.explore-quiz-dialog #explore-quiz-question { font-size: 14px; line-height: 2; color: #526f4a; }
.explore-quiz-dialog .explore-answers > button { font-size: 18px; min-height: 52px; background: #fcf8ec80; }
.explore-quiz-dialog #explore-quiz-feedback { font-size: 13px; line-height: 1.9; color: #6b7d5c; }
.explore-quiz-dialog #explore-quiz-feedback.is-correct { color: #456a3c; font-size: 17px; }
.explore-quiz-footer > .primary-button { min-height: 48px; font-size: 13px; }
.explore-quiz-footer > .text-button { min-height: 44px; font-size: 12px; }
.explore-finale .primary-button { min-height: 52px; font-size: 14px; }
.explore-finale > .text-button { font-size: 12px; }

/* 第五关：纸面留印，控件与画作之间保留呼吸。 */
.guardian-ending-poem { color: #4a684d; }
.guardian-ending-poem p:nth-of-type(3) { color: #96714a; }
.guardian-intro-skip { min-height: 44px; font-size: 12px; color: #697c5c; }
.guardian-workshop-heading > p:last-child { font-size: 14px; line-height: 1.95; color: #697c5e; }
.guardian-card-mat { border-color: #bfc9ab; background: radial-gradient(ellipse at 44% 42%, #f6f1e5, transparent 72%), linear-gradient(135deg, #e6e7d8, #dbdfcd); }
.guardian-card-mat::after { border-color: #c6ceb6; }
.guardian-card-stage { box-shadow: 0 13px 28px #48512f1e, 2px 2px 0 #aaa37f30; }
.guardian-preview-label { font-size: 12px; color: #728264; }
.guardian-stamp-caption p { font-size: 12px; line-height: 1.8; color: #657a58; }
.guardian-stamp-caption small { font-size: 11px; color: #7c886c; }
.guardian-stamp-caption > button { font-size: 11px; min-height: 44px; color: #847c5c; }
.guardian-options legend { color: #4c6946; }
.guardian-options legend > span { font-size: 11px; color: #7b866b; }
.guardian-swatches small { font-size: 11px; color: #81896f; }
.guardian-swatches b,.guardian-seals b { font-size: 15px; color: #596f50; }
.guardian-swatches > button[aria-pressed=true],.guardian-seals > button[aria-pressed=true] { background: #e5e5d44f; border-color: #a99870; box-shadow: inset 0 0 0 3px #f9f3e44d; }
.guardian-messages > button { font-size: 16px; min-height: 48px; line-height: 1.75; color: #657b58; border-color: #c4cbb0; }
.guardian-messages > button[aria-pressed=true] { color: #405f3b; background: #e5e7d64d; border-color: #a1986f; }
.guardian-selection-text { font-size: 11px; color: #7a8669; }
.guardian-generate { min-height: 54px; font-size: 14px; }
.guardian-reset { font-size: 12px; color: #78866a; }
.guardian-status { font-size: 12px; line-height: 1.9; color: #677b5b; }
.guardian-result-art { background: #e5e6d6; border-color: #c2c9af; }
.guardian-result-copy > p:not(.eyebrow) { font-size: 14px; line-height: 2; color: #657b5b; }
.guardian-download { font-size: 14px; min-height: 52px; }
.guardian-share { font-size: 13px; min-height: 46px; }
.guardian-result-copy .guardian-save-hint { font-size: 12px; line-height: 1.95; color: #788569; max-width: 330px; }
.guardian-result-copy > .text-button { font-size: 12px; color: #6f8161; }
.guardian-disclosure { font-size: 11px; line-height: 1.95; color: #7c866d; }
.guardian-footer { color: #728166; }
.guardian-footer > small { font-size: 12px; color: #7d886f; }
.guardian-error { font-size: 13px; line-height: 1.9; }

/* 390 × 844：关键信息从 8–10px 提升到舒适可读的大小。
 * 排版自然向下延展，不压缩互动舞台，也不禁止页面正常纵向滚动。
 */
@media (min-width: 761px) and (max-width: 1100px) {
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
  .journey-step { padding-left: 24px; }
}

@media (max-width: 760px) {
  .site-header { padding-left: 6%; padding-right: 6%; }
  .sound-toggle { font-size: 11px; gap: 5px; min-width: 76px; }
  .hero-copy { width: 84%; }
  .hero-description { font-size: 12.5px; line-height: 1.95; letter-spacing: .35px; }
  .hero-subtitle { font-size: 21px; letter-spacing: 2px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 2px; }
  .start-button { font-size: 14px; min-height: 52px; }
  .experience-note { font-size: 10px; letter-spacing: .2px; gap: 5px; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .journey-step { padding-left: 15px; }
  .journey-step p { font-size: 12px; line-height: 1.95; letter-spacing: .15px; }
  .journey h3 { font-size: 19px; letter-spacing: 1px; }
  .site-footer,.site-footer button { font-size: 11px; line-height: 1.9; }
  .site-footer { gap: 7px; }
  .primary-button { font-size: 14px; min-height: 50px; letter-spacing: 1.2px; }
  .secondary-button { font-size: 12px; min-height: 46px; letter-spacing: .6px; }
  .text-button { min-height: 44px; font-size: 12px; }
  .game-heading h1 { font-size: clamp(26px, 7.4vw, 31px); letter-spacing: 1.3px; }
  .weave-heading h1 { font-size: 36px; letter-spacing: 5px; }
  .instant-heading h1,.explore-heading h1,.guardian-heading h1 { font-size: 30px; letter-spacing: 1.7px; }
  .game-heading .eyebrow,.weave-heading > .eyebrow,.instant-heading > .eyebrow,.explore-heading > .eyebrow,.guardian-heading > .eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: 1px; }
  .explore-heading .eyebrow i,.guardian-heading .eyebrow i { font-size: 8px; letter-spacing: .8px; }
  .game-heading > p:last-child,.weave-heading > p:last-child,.instant-heading > p:last-child,.explore-heading > p:last-child,.guardian-heading > p:last-child { font-size: 13px; line-height: 1.9; letter-spacing: .2px; max-width: none; }
  .back-button { min-height: 44px; }
  .back-button span { font-size: 12px; }
  .board-topline,.weave-topline,.instant-labelbar,.explore-labelbar,.explore-exhibit-top { font-size: 11px; letter-spacing: .5px; }
  .timer-wrap { font-size: 10px; }
  .weave-topline .timer-wrap { font-size: 10px; }
  .instant-labelbar .art-demo-label { font-size: 10px; letter-spacing: 0; }
  .game-hint,.weave-message { font-size: 13px; line-height: 1.85; letter-spacing: .1px; padding: 12px; }
  .craft-guide { padding-top: 22px; }
  .progress-row,.weave-progress-row { font-size: 12px; }
  .craft-steps li strong { font-size: 11px; }
  .craft-steps li > span { width: 28px; }
  .game-actions { gap: 12px; }
  .game-actions .text-button,.weave-guide-actions .text-button { font-size: 12px; }
  .game-actions .secondary-button,.weave-guide-actions > .secondary-button { font-size: 12px; letter-spacing: .3px; }
  .guide-note { font-size: 11px; letter-spacing: 0; }
  .game-footer { font-size: 12px; line-height: 1.9; letter-spacing: 1px; }
  .success-dialog > p:not(.eyebrow),.about-dialog > p:not(.eyebrow) { font-size: 13px; }
  .success-dialog .primary-button,#success-dialog [data-weave-open],#success-dialog [data-replay] { min-height: 48px; font-size: 13px; }
  .success-stat { font-size: 12px; }
  .weave-guide-actions { column-gap: 12px; }
  .weave-audio-button { min-height: 44px; font-size: 12px; }
  .weave-disclosure { font-size: 11px; line-height: 1.9; letter-spacing: .15px; }
  .weave-disclosure span { font-size: 13px; }
  .weave-finale > p:not(.eyebrow) { font-size: 13px; letter-spacing: .2px; }
  .weave-final-actions .primary-button { font-size: 13px; min-height: 50px; }
  .weave-final-actions > .text-button { font-size: 12px; }
  .instant-stage-nav button { font-size: 11px; letter-spacing: 0; gap: 3px; min-height: 44px; }
  .instant-stage-nav button > i { font-size: 8px; }
  .instant-stage-copy > .eyebrow,.instant-culture > .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .instant-information { gap: 22px; margin-top: 23px; }
  .instant-stage-copy > p:last-child,.instant-culture article p { font-size: 14px; line-height: 1.95; letter-spacing: .2px; }
  .instant-culture a { font-size: 11px; line-height: 1.9; }
  .instant-disclosure { font-size: 11px; line-height: 1.9; }
  .instant-lower-actions { gap: 16px; }
  .instant-lower-actions .text-button { font-size: 12px; }
  .instant-completion > p:not(.eyebrow) { font-size: 14px; letter-spacing: .3px; }
  .instant-completion .primary-button { font-size: 14px; min-height: 50px; }
  .instant-completion .coming-note { font-size: 11px; }
  .explore-pin-label { font-size: 13px; padding: 7px 6px; letter-spacing: .6px; }
  .explore-scene-caption { font-size: 10px; letter-spacing: .7px; }
  .explore-colophon,.explore-colophon > span:last-child { font-size: 10px; letter-spacing: .3px; }
  .explore-overview > .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .explore-exhibit article,.explore-overview { padding-left: 21px; padding-right: 21px; }
  .explore-overview > p:not(.eyebrow),.explore-culture-copy { font-size: 14px; line-height: 2; letter-spacing: .25px; }
  .explore-overview-rule { width: 100%; gap: 12px; margin-top: 15px; }
  .explore-overview-rule + .explore-overview-rule { margin-top: 12px; }
  .explore-overview-rule p { font-size: 12px; line-height: 1.85; }
  .explore-overview-rule small { font-size: 11px; }
  .explore-overview .explore-overview-foot { font-size: 11px; }
  .explore-exhibit-lead { font-size: 15px; line-height: 1.9; }
  .explore-mini-art > small,.explore-art-note { font-size: 11px; line-height: 1.9; }
  .explore-source { font-size: 11px; }
  .explore-action { min-height: 46px; font-size: 13px; letter-spacing: .6px; }
  .explore-range-label { font-size: 12px; }
  .explore-joint-actions { gap: 10px; }
  .explore-joint-actions .text-button { font-size: 11px; white-space: nowrap; }
  .explore-collect { font-size: 15px; min-height: 48px; }
  .explore-status { font-size: 12px; line-height: 1.9; }
  .explore-support-status { font-size: 12px; line-height: 1.9; }
  .explore-disclosure { font-size: 11px; line-height: 1.9; }
  .explore-lower-actions .text-button { font-size: 12px; letter-spacing: .2px; }
  .explore-quiz-launch p:last-child { font-size: 14px; line-height: 1.9; }
  .explore-quiz-launch > .primary-button { font-size: 13px; min-height: 48px; }
  .explore-quiz-dialog #explore-quiz-question { font-size: 14px; line-height: 1.95; letter-spacing: .2px; }
  .explore-quiz-dialog .explore-answers > button { font-size: 17px; min-height: 52px; }
  .explore-quiz-dialog #explore-quiz-feedback { font-size: 13px; line-height: 1.9; min-height: 42px; }
  .explore-quiz-dialog #explore-quiz-feedback.is-correct { font-size: 16px; }
  .explore-quiz-footer { gap: 10px; }
  .explore-quiz-footer > .text-button { min-height: 44px; font-size: 12px; }
  .explore-quiz-footer > .primary-button { font-size: 13px; min-width: 146px; min-height: 48px; }
  .explore-finale > p:not(.eyebrow) { font-size: 14px; line-height: 1.95; }
  .explore-finale .primary-button { font-size: 14px; min-height: 50px; }
  .explore-finale > .text-button { font-size: 12px; }
  .guardian-intro-skip { font-size: 12px; min-height: 44px; }
  .guardian-workshop-heading > .eyebrow,.guardian-design-title > .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .guardian-workshop-heading > p:last-child { font-size: 14px; line-height: 1.9; letter-spacing: .2px; }
  .guardian-atelier { gap: 30px; }
  .guardian-preview-label { font-size: 11px; }
  .guardian-stamp-caption { gap: 7px; align-items: flex-start; }
  .guardian-stamp-caption p { font-size: 12px; line-height: 1.85; letter-spacing: 0; }
  .guardian-stamp-caption small { font-size: 11px; }
  .guardian-stamp-caption > button { font-size: 11px; padding: 5px 0; min-height: 44px; }
  .guardian-options legend > span { font-size: 10px; }
  .guardian-swatches b,.guardian-seals b { font-size: 15px; }
  .guardian-swatches small { font-size: 10px; letter-spacing: 0; }
  .guardian-messages > button { font-size: 15px; min-height: 49px; line-height: 1.75; letter-spacing: .1px; gap: 8px; padding: 10px 9px; }
  .guardian-selection-text { font-size: 11px; line-height: 1.9; letter-spacing: .2px; }
  .guardian-generate { font-size: 14px; min-height: 54px; letter-spacing: 1px; }
  .guardian-reset { font-size: 12px; }
  .guardian-status { font-size: 12px; line-height: 1.9; letter-spacing: .15px; }
  .guardian-result-copy > .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .guardian-result-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.95; letter-spacing: .2px; }
  .guardian-download { font-size: 14px; min-height: 52px; }
  .guardian-share { font-size: 13px; min-height: 46px; }
  .guardian-result-copy .guardian-save-hint { font-size: 12px; line-height: 1.95; max-width: none; }
  .guardian-result-copy > .text-button { font-size: 12px; }
  .guardian-disclosure { font-size: 11px; line-height: 1.9; }
  .guardian-footer > span { font-size: 10px; line-height: 1.8; }
  .guardian-footer > small { font-size: 11px; line-height: 1.9; }
  .guardian-revisit { font-size: 17px; min-height: 46px; }
}

@media (max-width: 360px) {
  .hero-description { font-size: 12px; letter-spacing: 0; }
  .hero-subtitle { font-size: 19px; }
  .instant-heading h1,.explore-heading h1,.guardian-heading h1 { font-size: 27px; letter-spacing: 1px; }
  .game-heading h1 { font-size: 25px; letter-spacing: 1px; }
  .instant-stage-nav button { font-size: 11px; }
  .instant-stage-nav button > i { display: none; }
  .craft-steps li { gap: 4px; }
  .craft-steps li strong { font-size: 10px; }
  .craft-steps li > span { width: 25px; }
  .guardian-messages > button { font-size: 14px; gap: 6px; }
}

/* 阅读层对比度：纸白上正文约 4.69:1，辅助文字约 4.64:1。
 * 景物题跋与英文装饰仍保持墨色轻重，不将正文做成淡墨装饰。
 */
.hero-description,
.journey-step p,
.success-dialog > p:not(.eyebrow),
.about-dialog > p:not(.eyebrow),
.instant-stage-copy > p:last-child,
.instant-culture article p,
.instant-completion > p:not(.eyebrow),
.explore-overview > p:not(.eyebrow),
.explore-culture-copy,
.explore-quiz-intro > p:last-child,
.explore-finale > p:not(.eyebrow),
.explore-quiz-launch p:last-child,
.guardian-workshop-heading > p:last-child,
.guardian-result-copy > p:not(.eyebrow) { color: var(--exhibition-copy); }
.experience-note,
.guide-note,
.weave-disclosure,
.instant-culture a,
.instant-disclosure,
.explore-source,
.explore-disclosure,
.explore-overview-rule small,
.guardian-stamp-caption small,
.guardian-swatches small,
.guardian-selection-text,
.guardian-disclosure,
.guardian-result-copy .guardian-save-hint { color: var(--exhibition-note); }
.explore-art-note,.explore-mini-art > small { color: #746a50; }

/* 本文件不引入运动；系统减弱动态时也不额外制造视觉闪烁。 */
@media (prefers-reduced-motion: reduce) {
  .primary-button,.secondary-button,.sound-toggle,.explore-action { transition: none; }
}
