/* 视觉精修层：保留页面结构与三维交互，只统一排版和控件。 */
:root {
  --ui-gold-light: #ead299;
  --ui-gold-dark: #b98c48;
  --ui-edge: rgba(232, 202, 137, .35);
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
}

body { font-size: 14px; line-height: 1.65; letter-spacing: .008em; }
.shell { color: var(--paper); }
.top { height: 64px; padding: 0 24px; }
.wordmark strong { font-size: 18px; letter-spacing: .12em; }
.wordmark small { font-size: 10px; letter-spacing: .16em; margin-top: 6px; }
.mode { font-size: 11px; line-height: 1; padding: 9px 11px; border-color: var(--ui-edge); }

.hero { padding: 32px 26px 38px; }
.hero:after { background: linear-gradient(180deg, rgba(5, 22, 24, .04) 24%, rgba(5, 22, 24, .32) 47%, rgba(5, 22, 24, .88) 82%, var(--bg) 100%); }
.eyebrow { font-size: 11px; letter-spacing: .17em; }
h1 { font-size: clamp(43px, 11.5vw, 56px); line-height: 1.13; letter-spacing: .045em; margin: 15px 0 17px; }
.hero-copy p { font-size: 14px; line-height: 1.75; max-width: 330px; }
.hero-flag { display: inline-block; font-size: 11px; line-height: 1.5; margin-top: 18px; color: #f0d59d; }
.hero-actions { gap: 10px; margin-top: 25px; }

.primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 49px; padding: 11px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 650; letter-spacing: .015em;
  transition: transform .22s var(--ui-ease), box-shadow .22s var(--ui-ease), background .22s var(--ui-ease), border-color .22s var(--ui-ease);
}
.primary { background: linear-gradient(145deg, var(--ui-gold-light), var(--gold) 72%); border-color: #e8ca83; color: #1c302c; box-shadow: inset 0 1px #fff5, 0 7px 20px #051b1b33; }
.primary:hover { box-shadow: inset 0 1px #fff8, 0 10px 25px #051b1b55; }
.secondary { background: #102926bb; border-color: #d4b67499; box-shadow: inset 0 1px #fff1; }
.secondary:hover { background: #173b35dd; border-color: var(--ui-gold-light); }
.primary:active, .secondary:active { transform: translateY(1px) scale(.985); }

.tabs { top: 64px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(12px); }
.tabs a { min-height: 50px; display: grid; place-items: center; padding: 10px 3px; font-size: 13px; font-weight: 550; letter-spacing: .02em; }
.tabs a.active { font-weight: 700; }
section { padding: 54px 22px 14px; scroll-margin-top: 124px; }
.section-kicker { font-size: 11px; font-weight: 650; letter-spacing: .13em; margin-bottom: 11px; }
.section-head { gap: 14px; margin-bottom: 25px; }
.section-head h2 { font-size: 36px; line-height: 1.14; letter-spacing: .025em; }
.section-head span { font-size: 12px; line-height: 1.55; }
.lead { font-size: 14px; line-height: 1.85; margin-bottom: 26px; }

.factline { gap: 5px; padding: 19px 0; margin-bottom: 27px; }
.factline div { padding-left: 13px; }
.factline strong { font-size: 28px; letter-spacing: -.02em; }
.factline strong small { display: inline; margin-left: 3px; font-family: "PingFang SC", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.factline div > small { font-size: 11px; margin-top: 7px; }

.story-card { background: linear-gradient(150deg, #284943, var(--panel)); border-color: var(--ui-edge); border-radius: 17px; padding: 22px 21px 20px; margin-bottom: 12px; }
.story-card h3 { font-size: 19px; line-height: 1.4; margin-bottom: 10px; }
.story-card p { font-size: 14px; line-height: 1.83; }
.story-card small { font-size: 11px; line-height: 1.65; margin-top: 14px; }

.model-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 13px 0 19px; }
.model-controls button, .model-controls select { width: 100%; max-width: none; min-height: 45px; margin: 0; border: 1px solid var(--ui-edge); border-radius: 11px; background: #ffffff0c; color: var(--paper); font-size: 13px; font-weight: 550; padding: 10px 13px; box-shadow: inset 0 1px #fff1; }
.model-controls button[aria-pressed="true"] { color: var(--ui-gold-light); border-color: var(--gold); background: #d8b56d22; }
.model-controls button:hover, .model-controls select:hover { border-color: var(--gold); background: #ffffff14; }
.chips { gap: 8px; margin: 14px 0 8px; }
.chip { min-height: 42px; padding: 9px 14px; font-size: 13px; font-weight: 550; border-color: var(--ui-edge); transition: background .2s, border-color .2s, color .2s; }
.detail { padding: 17px 2px 0; min-height: 100px; }
.detail h3 { font-size: 19px; line-height: 1.4; margin-bottom: 7px; }
.detail p { font-size: 13px; line-height: 1.75; }
.zoom-row { font-size: 12px; margin: 21px 2px 0; }
.model-wrap .model-hint { bottom: 76px; }
.model-zoom {
  position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 430px; min-height: 52px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px 43px;
  align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid rgba(233, 206, 153, .5); border-radius: 15px;
  background: rgba(16, 42, 40, .74); color: #f5efdf;
  box-shadow: 0 5px 22px rgba(6, 21, 20, .24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.model-zoom .zoom-step {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(242, 223, 181, .34); border-radius: 10px;
  background: rgba(255, 255, 255, .12); color: #fff8e5; font-size: 22px; line-height: 1;
}
.model-zoom .zoom-step:hover { background: rgba(255, 255, 255, .23); border-color: #d8b56d; }
.model-zoom .zoom-step:active { transform: scale(.94); }
.model-zoom input { width: 100%; min-width: 0; height: 30px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.model-zoom input::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(to right, #d8b56d 0 var(--zoom-progress, 27%), rgba(241, 235, 218, .42) var(--zoom-progress, 27%) 100%); }
.model-zoom input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin-top: -6px; border: 3px solid #faf6e9; border-radius: 50%; background: #9e753a; box-shadow: 0 0 0 1px #a68959, 0 2px 5px #5d534355; }
.model-zoom input::-moz-range-track { height: 5px; border-radius: 99px; background: #d4d8cc; }
.model-zoom input::-moz-range-progress { height: 5px; border-radius: 99px; background: #ab8345; }
.model-zoom input::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #faf6e9; border-radius: 50%; background: #9e753a; box-shadow: 0 0 0 1px #a68959; }
.model-zoom output { display: block; color: #f5efdf; font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.model-wrap:fullscreen .model-zoom, .model-wrap.expanded .model-zoom { bottom: max(14px, env(safe-area-inset-bottom)); }
.model-wrap:fullscreen .model-hint, .model-wrap.expanded .model-hint { bottom: max(83px, calc(env(safe-area-inset-bottom) + 71px)); }

.qa-intro { border-radius: 17px; padding: 23px; margin-bottom: 16px; }
.qa-intro b { font-size: 25px; line-height: 1.4; }
.qa-intro p { font-size: 13px; line-height: 1.75; margin-top: 8px; }
.qa-list { gap: 10px; }
.qa-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 53px; padding: 12px 16px; border-radius: 12px; border-color: var(--ui-edge); font-size: 14px; line-height: 1.4; transition: background .2s, border-color .2s, transform .2s; }
.qa-list button::after { content: "›"; flex: none; color: var(--gold); font-family: serif; font-size: 23px; line-height: 1; }
.qa-list button:hover { background: #ffffff17; border-color: var(--gold); transform: translateY(-1px); }
.qa-list button:active { transform: translateY(0); }
.question-bar { gap: 9px; margin: 17px 0; }
.question-bar input { min-height: 52px; padding: 13px 14px; border-radius: 12px; font-size: 16px; }
.question-bar button { min-width: 75px; border-radius: 12px; font-size: 14px; font-weight: 700; background: linear-gradient(145deg, var(--ui-gold-light), var(--gold) 72%); box-shadow: inset 0 1px #fff5; }
.question-bar button:hover { filter: brightness(1.06); }
.answer { border-radius: 16px; padding: 19px; }
.answer .role { font-size: 11px; }
.answer p { font-size: 14px; line-height: 1.82; }
.answer small { font-size: 11px; line-height: 1.6; }

.postcard { border: 1px solid var(--ui-edge); border-radius: 18px; background: #102a29; box-shadow: 0 13px 26px #071b1b29; }
.postcard img { aspect-ratio: 3 / 4; object-fit: contain; object-position: center; filter: none; }
.postcard-body { padding: 23px; }
.postcard-body small { font-size: 11px; }
.postcard-body h3 { font-size: 40px; line-height: 1.2; margin: 8px 0; }
.postcard-body p { font-size: 13px; line-height: 1.75; }
.save-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.save-row .primary { width: 100%; font-size: 14px; }
.notice { font-size: 11px; line-height: 1.5; text-align: center; }
.footer { padding: 43px 22px 90px; }
.footer p { font-size: 11px; line-height: 1.8; }
.theme-btn { min-height: 40px; padding: 8px 14px; font-size: 12px; }
.themes button { min-height: 39px; font-size: 12px; }
.card-dialog { padding: 17px; border-radius: 18px; }
.card-dialog p { font-size: 13px; }
.card-actions a, .card-actions button { min-height: 44px; border-radius: 11px; font-size: 13px; }

[data-theme="paper"] .secondary { color: #f7eedc; }
[data-theme="paper"] .question-bar input { background: #fffaf0; color: #263c38; border-color: #8b866d55; }
[data-theme="paper"] .model-controls button,
[data-theme="paper"] .model-controls select { background: #ffffff6e; color: #263c38; }
[data-theme="paper"] .story-card { background: linear-gradient(150deg, #f3ead6, #e4d9c0); }
[data-theme="paper"] .story-card h3 { color: #5a4826; }
[data-theme="paper"] .qa-list button { background: #ffffff66; }
[data-theme="paper"] .postcard { background: #fff9eb; color: #263c38; }
[data-theme="paper"] .footer p { color: #52675d; }

@media (max-width: 380px) {
  .top { padding: 0 20px; }
  .hero { padding: 27px 22px 32px; }
  h1 { font-size: 42px; }
  .section-head h2 { font-size: 33px; }
  .section-head span { font-size: 11px; }
  .factline strong { font-size: 22px; white-space: nowrap; }
  .factline strong small { font-size: 10px; margin-left: 1px; }
  .factline div { padding-left: 8px; }
  .chip { padding: 8px 12px; font-size: 12px; }
  .model-wrap { min-height: 386px; }
  .model-wrap canvas { height: 386px; }
  .qa-intro b { font-size: 23px; }
}

/* 紧凑展陈版：以暖纸色承载内容，避免整页和模型展台使用黑底。 */
body { background: #e9e2d5; }
.shell { box-shadow: 0 18px 48px rgba(74, 64, 47, .16); }
[data-theme="paper"] {
  --bg: #f3efe5;
  --bg2: #ece5d8;
  --panel: #e9e0cf;
  --paper: #263e37;
  --muted: #61746a;
  --gold: #966f36;
  --line: rgba(111, 100, 69, .25);
}
.top { height: 58px; }
.tabs { top: 58px; }
.tabs a { min-height: 45px; }
.hero { min-height: 550px; padding-bottom: 28px; }
.hero-actions { margin-top: 20px; }
section { padding-top: 39px; padding-bottom: 7px; scroll-margin-top: 108px; }
.section-kicker { margin-bottom: 7px; }
.section-head { margin-bottom: 18px; }
.section-head h2 { font-size: 33px; }
.lead { margin-bottom: 19px; }
.factline { padding: 14px 0; margin-bottom: 19px; }
.story-card { padding: 18px 19px 17px; margin-bottom: 9px; }
.story-card h3 { margin-bottom: 7px; }
.story-card p { line-height: 1.74; }
.story-card small { margin-top: 10px; }

.model-wrap { min-height: 420px; background: #dce0d4; border-color: #d0c4a7; }
.model-wrap canvas { height: 420px; }
.model-zoom {
  position: relative; left: auto; bottom: auto; transform: none;
  width: 100%; max-width: none; min-height: 47px; margin: 8px 0 0;
  border-color: #dcd1bb; background: #f9f6ed;
  box-shadow: inset 0 1px #fff, 0 2px 8px rgba(67, 67, 49, .06);
}
.model-tag { background: #f8f5e8ed; border-color: #d0c6ad; color: #425b4e; }
.model-hint { color: #465b50; text-shadow: 0 1px 3px #f0f2e8; }
.model-loading { background: #dce0d4; color: #3f564a; }
.model-exit { background: #f8f5e8e8; color: #263e37; border-color: #d0c6ad; }
.model-controls { gap: 7px; margin: 10px 0 14px; }
.model-controls button, .model-controls select { min-height: 42px; }
.chips { margin: 10px 0 4px; }
.chip { min-height: 39px; }
.detail { padding-top: 12px; min-height: 85px; }

.qa-intro { padding: 19px; margin-bottom: 12px; }
.qa-list { gap: 8px; }
.qa-list button { min-height: 49px; }
.question-bar { margin: 13px 0; }
.postcard-body { padding: 18px 20px; }
.save-row { margin-top: 13px; }
.footer { padding: 31px 22px 58px; }

@media (min-width: 900px) {
  body { background: #e9e2d5; }
  .desktop-note { color: #415a4e; }
  .desktop-note h2 { color: #8b652f; }
  .desktop-note small { color: #63766b; }
}
@media (max-width: 380px) {
  .hero { min-height: 500px; }
  .section-head h2 { font-size: 31px; }
  .model-wrap { min-height: 360px; }
  .model-wrap canvas { height: 360px; }
  .model-zoom { grid-template-columns: 30px minmax(0, 1fr) 30px 38px; gap: 5px; padding: 6px; }
  .model-zoom .zoom-step { width: 30px; height: 30px; }
}

/* 页面仅保留必要交互文案与技术支持署名 */
.model-wrap .model-zoom {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 430px; margin: 0;
  border-color: rgba(233, 206, 153, .5);
  background: rgba(16, 42, 40, .74);
  box-shadow: 0 5px 22px rgba(6, 21, 20, .24);
}
.qa-intro { padding: 18px 22px; }
.qa-intro b { font-size: 20px; }
.footer { padding: 32px 22px 68px; }
.footer p { text-align: center; border-top: 1px solid var(--ui-edge); padding-top: 24px; font-size: 12px; letter-spacing: .08em; }

/* 青玉纸本：用低对比云雷纹连接首屏青铜色与正文。 */
body { background: #10383a; }
[data-theme="paper"] {
  --bg: #e4eee9;
  --bg2: #d7e7e0;
  --panel: #d8e8df;
  --paper: #1c4340;
  --muted: #58746d;
  --gold: #8b6937;
  --line: rgba(33, 91, 84, .2);
}
.shell {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 42% at 8% 20%, rgba(129, 190, 180, .13), transparent 80%),
    radial-gradient(ellipse 85% 32% at 88% 68%, rgba(90, 153, 146, .1), transparent 82%),
    url("青铜云雷暗纹.svg");
  background-size: 100% 1200px, 100% 1350px, 260px 260px;
  background-position: center 620px, center 1650px, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: 0 18px 50px rgba(3, 31, 33, .24);
}
.top, .tabs {
  background: rgba(228, 238, 233, .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.top { border-bottom-color: rgba(34, 89, 82, .2); }
.tabs { border-color: rgba(34, 89, 82, .2); }
.story-card, [data-theme="paper"] .story-card {
  background: linear-gradient(145deg, rgba(248, 251, 244, .96), rgba(207, 227, 216, .96));
  border-color: rgba(37, 91, 80, .2);
  box-shadow: 0 8px 22px rgba(32, 82, 73, .06);
}
[data-theme="paper"] .story-card h3 { color: #23524e; }
[data-theme="paper"] .story-card p { color: #355850; }
.story-card:before { color: rgba(29, 95, 86, .1); }
.factline { border-color: rgba(37, 91, 80, .23); }
.model-wrap { background: #d3e3d9; border-color: rgba(43, 96, 85, .26); }
.model-loading { background: #d3e3d9; }
[data-theme="paper"] .qa-intro {
  background: linear-gradient(135deg, rgba(28, 80, 77, .96), rgba(43, 101, 91, .96));
  color: #f4f0df;
  box-shadow: 0 8px 22px rgba(24, 73, 69, .13);
}
[data-theme="paper"] .qa-list button { background: rgba(250, 252, 246, .72); border-color: rgba(39, 91, 81, .2); }
[data-theme="paper"] .qa-list button:hover { background: rgba(255, 255, 255, .94); }
[data-theme="paper"] .question-bar input { background: rgba(252, 254, 249, .87); border-color: rgba(39, 91, 81, .28); }
[data-theme="paper"] .answer { background: #d3e6dc; }
[data-theme="paper"] .footer p { color: #44655e; }
@media (min-width: 900px) { body { background: #10383a; } }