:root {
  color: #30352f;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --background: #faf9f5;
  --foreground: #30352f;
  --card: #fff;
  --primary: #386c56;
  --primary-deep: #28513f;
  --primary-soft: #e3f0e9;
  --accent: #c96442;
  --accent-soft: #f6ded6;
  --yellow: #d6a33d;
  --yellow-soft: #fff2cc;
  --blue: #4e7fa3;
  --blue-soft: #e6f0f7;
  --purple: #80639a;
  --purple-soft: #eee7f4;
  --danger: #cc4e45;
  --muted: #7d817b;
  --secondary: #ece9df;
  --border: #dcd9cf;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; letter-spacing: 0; }
html, body, #app { min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--background); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgb(56 108 86 / 24%); outline-offset: 3px; }

.app-shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-header { z-index: 20; flex: 0 0 76px; display: grid; grid-template-columns: 170px minmax(0, 1fr) 76px; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border); background: rgb(250 249 245 / 96%); box-shadow: 0 8px 24px rgb(40 42 36 / 4%); }
.module-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-link { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 6px; color: var(--foreground); font-size: 25px; text-decoration: none; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy small { color: var(--accent); font-size: 9px; font-weight: 900; }
.brand-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.demo-tabs { min-width: 0; display: flex; justify-content: safe center; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tabs button { min-width: 155px; height: 48px; padding: 0 13px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 900; cursor: pointer; }
.demo-tabs button:hover { color: var(--foreground); background: var(--secondary); }
.demo-tabs button.active { color: #fff; background: var(--accent); box-shadow: 0 8px 18px rgb(201 100 66 / 20%); }
.nav-number { font-family: ui-monospace, monospace; font-size: 9px; opacity: .78; }
.lab-status { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 900; }
.lab-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.feature-page { flex: 1; min-height: 0; padding: 13px 20px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.feature-heading { min-height: 72px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.heading-copy { min-width: 0; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 950; text-transform: uppercase; }
.feature-heading h1 { margin: 3px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1; }
.feature-heading p { max-width: 720px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.45; }
.feature-actions { display: flex; align-items: center; gap: 6px; }
.tool-button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 18px; font-weight: 900; cursor: pointer; }
.status-chip { min-height: 29px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--primary-deep); background: var(--primary-soft); font-size: 9px; font-weight: 900; }
.status-chip.orange { color: #91401f; background: var(--accent-soft); }
.status-chip.yellow { color: #725616; background: var(--yellow-soft); }
.status-chip.blue { color: #345f7e; background: var(--blue-soft); }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgb(40 42 36 / 4%); }
.guided-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; }
.guided-layout.complete { grid-template-columns: minmax(0, 1fr); }
.workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.action-button, .text-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.action-button.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
.action-button.green { color: #fff; border-color: var(--primary); background: var(--primary); }
.action-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .45; }
.text-button { width: 100%; color: var(--accent); background: var(--accent-soft); }

.koi-layout { flex: 1; min-height: 500px; display: grid; grid-template-columns: 205px minmax(430px, 1fr) 330px; gap: 10px; }
.episode-list { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.section-label { color: var(--muted); font-size: 8px; font-weight: 950; text-transform: uppercase; }
.episode-button { padding: 11px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.episode-button.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.episode-button b { display: block; font-size: 11px; }
.episode-button span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 750; }
.koi-budget { margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--border); }
.koi-budget strong { display: block; margin: 4px 0; font-size: 18px; }
.koi-budget p { margin: 0; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.5; }
.clue-stage { padding: 15px; display: flex; flex-direction: column; min-height: 0; }
.clue-stage header { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.clue-stage h2 { margin: 4px 0; font-family: Georgia, serif; font-size: 21px; }
.clue-stage header p { margin: 0; color: var(--muted); font-size: 9px; font-weight: 750; }
.day-simulator { display: flex; align-items: center; gap: 5px; }
.day-simulator button { min-width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: #fff; cursor: pointer; }
.clue-timeline { min-height: 0; padding: 11px 2px; display: grid; align-content: start; gap: 8px; overflow: auto; }
.clue-row { display: grid; grid-template-columns: 62px 18px minmax(0, 1fr); gap: 7px; align-items: start; }
.clue-row time { padding-top: 9px; color: var(--muted); font-size: 8px; font-weight: 850; text-align: right; }
.clue-node { width: 15px; height: 15px; margin-top: 7px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.clue-row.locked .clue-node { background: var(--border); box-shadow: 0 0 0 1px var(--border); }
.clue-card { min-height: 58px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: #fcfbf8; font-family: Georgia, serif; font-size: 12px; line-height: 1.45; }
.clue-row.locked .clue-card { color: #aaa89f; border-left-color: var(--border); background: #f5f3ee; }
.clue-explain { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); color: var(--muted); font-family: inherit; font-size: 8px; font-weight: 750; }
.answer-panel { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.answer-panel h2 { margin: 3px 0; font-size: 17px; }
.answer-panel p { margin: 0; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.5; }
.answer-box { padding: 11px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.answer-box input { width: 100%; height: 44px; padding: 0 11px; border: 2px solid var(--border); border-radius: 6px; background: #fcfbf8; font-size: 15px; font-weight: 900; }
.answer-box small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; font-weight: 750; line-height: 1.4; }
.current-answer { padding: 11px; border-left: 4px solid var(--primary); background: #f7faf8; }
.current-answer span { color: var(--muted); font-size: 8px; font-weight: 900; }
.current-answer strong { display: block; margin: 4px 0; font-family: Georgia, serif; font-size: 20px; }
.current-answer p { font-size: 8px; }
.koi-rule { padding: 10px; background: var(--yellow-soft); }
.koi-rule b { display: block; font-size: 10px; }
.koi-rule span { display: block; margin-top: 4px; color: #725616; font-size: 8px; font-weight: 750; line-height: 1.45; }
.archive-result { padding: 8px 0; border-top: 4px solid var(--accent); }
.archive-result strong { display: block; margin: 5px 0; font-family: Georgia, serif; font-size: 24px; }
.leaderboard { min-height: 0; display: grid; align-content: start; gap: 4px; overflow: auto; }
.rank-row { padding: 7px 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) 42px 70px; gap: 5px; border-top: 1px solid var(--border); font-size: 8px; }
.rank-row b { color: var(--accent); }
.rank-row span { font-weight: 800; }
.rank-row small { color: var(--muted); }

.dynasty-setup { flex: 1; min-height: 500px; padding: 24px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; }
.setup-copy h2 { margin: 6px 0; font-family: Georgia, serif; font-size: 26px; }
.setup-copy p { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.6; }
.period-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.period-card { min-height: 210px; padding: 15px; display: flex; flex-direction: column; border: 2px solid var(--border); border-bottom: 6px solid var(--period); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.period-card.selected { border-color: var(--period); box-shadow: 0 0 0 3px color-mix(in srgb, var(--period), transparent 80%); }
.period-card small { color: var(--period); font-size: 8px; font-weight: 950; }
.period-card h3 { margin: 8px 0 4px; font-family: Georgia, serif; font-size: 22px; }
.period-card p { color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.5; }
.period-card span { margin-top: auto; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 900; }
.difficulty-tabs { margin-top: 10px; display: flex; gap: 5px; }
.difficulty-tabs button { min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; background: #fff; font-size: 8px; font-weight: 900; cursor: pointer; }
.difficulty-tabs button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.dynasty-game { flex: 1; min-height: 500px; display: grid; grid-template-columns: 250px minmax(420px, 1fr) 310px; gap: 10px; }
.resource-panel { padding: 15px; display: flex; flex-direction: column; gap: 9px; }
.period-seal { min-height: 86px; display: grid; place-items: center; align-content: center; border: 1px solid var(--border); background: #f7f3eb; text-align: center; }
.period-seal strong { font-family: Georgia, serif; font-size: 28px; }
.period-seal span { color: var(--muted); font-size: 8px; font-weight: 900; }
.resource-list { display: grid; gap: 9px; }
.resource-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px; gap: 7px; align-items: center; }
.resource-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--resource); font-family: Georgia, serif; font-size: 11px; font-weight: 900; }
.resource-item label { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; font-weight: 900; }
.resource-track { height: 8px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: var(--secondary); }
.resource-track i { height: 100%; display: block; width: var(--value); background: var(--resource); transition: width .3s; }
.resource-item > b { font-family: ui-monospace, monospace; font-size: 11px; }
.event-queue { min-height: 0; padding-top: 9px; border-top: 1px solid var(--border); overflow: auto; }
.event-queue h3 { margin: 0 0 6px; font-size: 10px; }
.queue-item { padding: 7px; border-left: 3px solid var(--yellow); background: var(--yellow-soft); font-size: 8px; font-weight: 750; line-height: 1.4; }
.history-card-stage { padding: 18px; display: grid; place-items: center; }
.decision-card { width: min(550px, 100%); min-height: 410px; padding: 23px; display: flex; flex-direction: column; border: 1px solid #cfc7b5; border-bottom: 7px solid var(--accent); border-radius: 8px; background: #fffdf8; box-shadow: 0 18px 38px rgb(66 50 31 / 10%); position: relative; }
.decision-card::before { content: ""; height: 5px; position: absolute; top: 0; right: 0; left: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 20px, transparent 20px 28px); }
.card-meta { display: flex; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 900; }
.speaker-mark { width: 52px; height: 52px; margin: 18px auto 8px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); background: #fff; font-family: Georgia, serif; font-size: 12px; font-weight: 900; }
.decision-card h2 { margin: 5px 0 10px; font-family: Georgia, serif; font-size: 24px; text-align: center; }
.decision-card > p { margin: 0; color: #5f5c55; font-size: 11px; font-weight: 750; line-height: 1.7; text-align: center; }
.choice-buttons { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-button { min-height: 66px; padding: 9px; border: 1px solid var(--border); border-bottom: 4px solid var(--side); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }
.choice-button:hover { background: #f8f7f2; transform: translateY(-1px); }
.choice-button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.history-side { min-height: 0; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.turn-info { display: flex; justify-content: space-between; gap: 7px; }
.turn-info div { flex: 1; padding: 8px; border-top: 3px solid var(--accent); background: #fff8f5; }
.turn-info span { display: block; color: var(--muted); font-size: 7px; font-weight: 900; }
.turn-info b { font-size: 12px; }
.fact-feedback { min-height: 240px; padding: 13px; border: 1px solid var(--border); border-top: 4px solid var(--primary); background: #f8fbf9; }
.fact-feedback small { color: var(--primary); font-size: 8px; font-weight: 950; }
.fact-feedback h3 { margin: 6px 0; font-size: 15px; }
.fact-feedback p { margin: 0 0 7px; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.55; }
.delta-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.delta-chip { padding: 5px; border-radius: 4px; background: #fff; font-size: 8px; font-weight: 900; }
.delta-chip.positive { color: var(--primary); }
.delta-chip.negative { color: var(--danger); }
.knowledge-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.knowledge-tags span { padding: 4px 6px; border-radius: 4px; background: var(--secondary); font-size: 7px; font-weight: 900; }
.timeline-mini { min-height: 0; display: grid; align-content: start; gap: 4px; overflow: auto; }
.timeline-mini div { padding: 6px 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 6px; border-top: 1px solid var(--border); font-size: 8px; }
.timeline-mini b { color: var(--accent); }
.timeline-mini span { font-weight: 800; }

.ending-layout { flex: 1; min-height: 490px; padding: 20px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; }
.ending-hero { display: grid; place-items: center; align-content: center; text-align: center; }
.ending-hero strong { font-family: Georgia, serif; font-size: 35px; }
.ending-hero p { color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.5; }
.review-tabs { display: flex; gap: 5px; }
.review-tabs button { min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 5px; background: #fff; font-size: 8px; font-weight: 900; cursor: pointer; }
.review-tabs button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.review-content { min-height: 0; padding: 13px; border: 1px solid var(--border); background: #fff; overflow: auto; }
.review-row { padding: 9px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid var(--border); }
.review-row b { color: var(--accent); font-size: 9px; }
.review-row strong { display: block; font-size: 10px; }
.review-row p { margin: 3px 0 0; color: var(--muted); font-size: 8px; font-weight: 750; line-height: 1.4; }
.review-row span { font-size: 8px; font-weight: 900; }
.actual-history { padding: 12px; border-left: 4px solid var(--blue); background: var(--blue-soft); }
.actual-history h3 { margin: 0 0 5px; font-size: 12px; }
.actual-history p { margin: 0; color: #345f7e; font-size: 9px; font-weight: 750; line-height: 1.55; }

.guide-sidebar { z-index: 60; min-width: 0; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgb(40 42 36 / 9%); position: relative; }
.guide-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 900; }
.guide-head b { margin-left: auto; color: var(--accent); }
.guide-head button { min-height: 29px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 850; cursor: pointer; }
.guide-current { margin-top: 15px; padding: 15px 0; border-top: 4px solid var(--accent); border-bottom: 1px solid var(--border); }
.guide-current span { color: var(--accent); font-size: 9px; font-weight: 900; }
.guide-current h2 { margin: 6px 0 10px; font-size: 21px; line-height: 1.2; }
.guide-current p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.55; }
.guide-steps { margin-top: auto; display: grid; gap: 6px; }
.guide-step { min-height: 36px; padding: 4px 6px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; border-radius: 6px; color: #aaa89f; }
.guide-step b { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 8px; }
.guide-step span { font-size: 10px; font-weight: 800; }
.guide-step.active { color: #91401f; background: var(--accent-soft); }
.guide-step.active b { color: #fff; border-color: var(--accent); background: var(--accent); }
.guide-step.done { color: var(--accent); }
.guide-followup { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--border); color: var(--muted); font-size: 8px; font-weight: 800; line-height: 1.4; }
.guide-overlay { z-index: 45; pointer-events: none; position: fixed; inset: 0; }
.guide-shade { position: fixed; background: rgb(34 36 31 / 57%); transition: all .2s; }
.guide-frame { position: fixed; border: 3px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 4px rgb(201 100 66 / 18%); transition: all .2s; }
.toast { z-index: 100; position: fixed; left: 50%; bottom: 24px; max-width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); padding: 11px 15px; border-radius: 7px; color: #fff; background: #30352f; box-shadow: 0 10px 26px rgb(35 37 32 / 22%); font-size: 10px; font-weight: 800; text-align: center; }

@media (max-width: 1160px) {
  .koi-layout { grid-template-columns: 180px minmax(390px, 1fr) 300px; }
  .dynasty-game { grid-template-columns: 220px minmax(390px, 1fr) 290px; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { min-height: 100dvh; height: auto; overflow: visible; }
  .app-header { min-height: 70px; grid-template-columns: 145px minmax(0, 1fr); padding: 8px 12px; }
  .lab-status { display: none; }
  .demo-tabs { justify-content: flex-start; }
  .feature-page { min-height: calc(100dvh - 70px); overflow: visible; }
  .guided-layout { display: block; }
  .guide-sidebar { position: fixed; right: 10px; bottom: 10px; left: 10px; max-height: 40vh; overflow: auto; }
  .guide-current { padding: 9px 0; }
  .guide-current h2 { margin: 4px 0 5px; font-size: 17px; }
  .guide-steps { display: none; }
  .koi-layout { min-height: 0; grid-template-columns: 170px minmax(0, 1fr); }
  .answer-panel { grid-column: 1 / -1; min-height: 430px; }
  .dynasty-setup { min-height: 0; grid-template-columns: 1fr; }
  .dynasty-game { min-height: 0; grid-template-columns: 220px minmax(0, 1fr); }
  .history-side { grid-column: 1 / -1; min-height: 480px; }
  .ending-layout { min-height: 0; }
}
@media (max-width: 580px) {
  .app-header { grid-template-columns: 102px minmax(0, 1fr); }
  .brand-copy small { display: none; }
  .demo-tabs { gap: 2px; }
  .demo-tabs button { min-width: 112px; height: 42px; padding: 0 6px; font-size: 10px; }
  .feature-page { padding: 11px; }
  .feature-heading h1 { font-size: 21px; }
  .feature-heading p { max-width: 245px; }
  .koi-layout, .dynasty-game { display: block; }
  .episode-list { margin-bottom: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .episode-button { min-height: 70px; padding: 7px; }
  .episode-button span { display: none; }
  .koi-budget { display: none; }
  .clue-stage { min-height: 650px; margin-bottom: 10px; }
  .clue-row { grid-template-columns: 45px 14px minmax(0, 1fr); }
  .answer-panel { min-height: 560px; }
  .dynasty-setup, .ending-layout { padding: 15px; grid-template-columns: 1fr; }
  .period-grid { grid-template-columns: 1fr; }
  .period-card { min-height: 125px; }
  .resource-panel { margin-bottom: 10px; }
  .resource-list { grid-template-columns: 1fr 1fr; }
  .history-card-stage { padding: 10px; margin-bottom: 10px; }
  .decision-card { min-height: 430px; padding: 17px; }
  .choice-buttons { grid-template-columns: 1fr; }
  .history-side { min-height: 560px; }
  .review-tabs { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }