:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #66716c;
  --paper: #f7f7f2;
  --paper-deep: #ebece5;
  --surface: #ffffff;
  --line: #cfd4cc;
  --line-strong: #aeb7ae;
  --jade: #1a6548;
  --jade-dark: #153e31;
  --cinnabar: #a7352f;
  --gold: #b9852d;
  --wood: #08783c;
  --wood-soft: #d7f8e2;
  --fire: #ce202c;
  --fire-soft: #ffe1e5;
  --earth: #86411e;
  --earth-soft: #f5dfce;
  --metal: #b88600;
  --metal-soft: #ffe55b;
  --water: #1557cc;
  --water-soft: #dceaff;
  --spirit: #6c4f89;
  --shadow: 0 18px 48px rgba(25, 45, 36, 0.09);
  --display: "Segoe UI Variable Display", "Segoe UI", "Noto Sans", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", "Noto Serif", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.mode-controls { grid-column:1 / -1; min-width:0; padding:16px; border:1px solid var(--line); border-left:3px solid var(--jade); background:#f8faf8; }
.mode-controls p { font-size:14px; line-height:1.65; margin:8px 0 12px; }
.actor-options { margin-top:8px; }
.actor-fields,.candidate-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin:12px 0; }
.candidate-row { display:flex; align-items:end; gap:8px; min-width:0; }
.candidate-row .field { flex:1; min-width:0; }
#action-options { margin-top:16px; }
.ai-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.ai-tabs button { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:4px; padding:10px 12px; font-size:14px; min-height:44px; }
.ai-tabs button[aria-selected="true"] { background:var(--jade-dark); border-color:var(--jade-dark); color:white; }
.ai-tabs button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.ai-tabpanel { min-width:0; }
.rule-preview { margin-top:16px; padding:clamp(12px,2vw,24px); border:1px solid var(--line); background:#f8faf8; }
.rule-actors { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:8px; margin-block:16px; }
.rule-actors>div { padding:12px; border:1px solid var(--line); background:var(--surface); }
.rule-actors strong,.rule-actors span { display:block; font-size:14px; overflow-wrap:anywhere; }
.rule-actors span { margin-top:6px; color:#526159; }
.qimen-json { max-height:360px; overflow:auto; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); padding:14px; }
.comparison-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; }
.comparison-item { min-width:0; padding:16px; background:#f6f9f7; border:1px solid var(--line); border-top:3px solid var(--jade); }
.comparison-item h4 { margin:0; font-size:16px; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 4%, rgba(26, 101, 72, 0.08), transparent 28rem),
    linear-gradient(180deg, #edf1ed 0, var(--paper) 25rem, #f1f2ed 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }

.page-shell {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 0 clamp(14px, 3.4vw, 54px) 34px;
}

.topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(21, 62, 49, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}

.brand > span:last-child { display: grid; }
.brand strong { font-family: var(--display); font-size: 1.28rem; letter-spacing: 0.01em; }
.brand small, .school-mark small { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; }

.brand-seal {
  width: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  padding: 5px;
  background: var(--jade-dark);
  border: 1px solid #0f3025;
  color: #e3d3a2;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.07);
}

.brand-seal i { font-family: var(--serif); font-size: 0.56rem; font-style: normal; line-height: 1; }

.school-mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-left: 18px;
  border-left: 1px solid var(--line-strong);
}

.school-mark span { color: var(--jade-dark); font-family: var(--display); font-size: 1.1rem; font-weight: 700; }

main { padding-top: 24px; }

.control-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--jade-dark);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2vw, 28px);
}

.control-heading, .board-toolbar, .inspector-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--jade);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--display); line-height: 1.18; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); }
h2 { margin-bottom: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); }

.input-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) minmax(170px, 0.75fr) minmax(230px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 22px;
}

.input-grid > .field:not(.question-field) small { min-height: 2.2em; }
.submit-field > span, .submit-field > small { visibility: hidden; }
.submit-field .button { width: 100%; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > span { color: #38423e; font-size: 0.83rem; font-weight: 750; }
.field small { min-height: 1.1em; color: var(--muted); font-size: 0.74rem; line-height: 1.25; }

input, select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fbfcf9;
  color: var(--ink);
  padding: 0 12px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input:focus, select:focus {
  border-color: var(--jade);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 101, 72, 0.12);
}

.button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0 18px;
  font-weight: 760;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid rgba(26, 101, 72, 0.26); outline-offset: 2px; }
.button-primary { height: 48px; display: inline-flex; align-items: center; gap: 20px; justify-content: space-between; background: var(--jade-dark); color: white; }
.button-primary:hover { background: #0f3328; }
.button-quiet { min-height: 38px; background: transparent; border-color: var(--line-strong); color: var(--jade-dark); }
.button-quiet:hover { background: var(--wood-soft); border-color: var(--jade); }

.form-error { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--cinnabar); background: var(--fire-soft); color: #7e2925; }

.result { margin-top: 24px; }

.chart-meta {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) minmax(430px, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.pillars, .calculation-summary {
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--line);
  min-height: 104px;
}

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); }

.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px clamp(9px, 1.2vw, 17px);
  border-right: 1px solid var(--line);
}

.pillar:last-child { border-right: 0; }
.pillar small { grid-column: 1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:6px; color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.pillar small b { color:var(--jade); font-size:.72rem; letter-spacing:0; text-align:right; text-transform:none; }
.pillar .han { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.pillar .vi { font-size: 0.82rem; font-weight: 700; line-height: 1.25; }

.calculation-summary {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
}

.summary-item { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item small { color: var(--muted); font-size: 0.73rem; }
.summary-item strong { margin: 3px 0 1px; color: var(--jade-dark); font-family: var(--display); font-size: 1.12rem; }
.summary-item em { color: var(--muted); font-size: 0.72rem; font-style: normal; }
.summary-item.dun strong { color: var(--cinnabar); font-size: 1.32rem; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 760px) repeat(2, minmax(260px, 320px));
  gap: 18px;
  align-items: stretch;
  justify-content: center;
}

.board-column, .inspector, .workspace > .element-panel {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.board-toolbar, .inspector-head { min-height: 76px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.board-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 0.75rem; }
.board-key span { display: inline-flex; align-items: center; gap: 6px; }
.role-key { font-weight: 800; }
.role-key b { font-size: 1rem; line-height: 1; }
.role-key-person { color: #0c7253; }
.role-key-event { color: #8a334d; }
.key-dot { width: 7px; height: 7px; border-radius: 50%; }
.spirit-dot { background: var(--spirit); }
.star-dot { background: var(--gold); }
.door-dot { background: var(--cinnabar); }
.stem-dot { background: var(--jade); }

.board-frame { position: relative; padding: clamp(8px, 1.4vw, 16px); background: #e9ece7; }
.board-frame::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.4vw, 16px);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(23, 33, 29, 0.25), inset 0 0 36px rgba(20, 56, 43, 0.04);
  z-index: 2;
}

.qimen-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  background: var(--line-strong);
  gap: 1px;
}

.palace {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
  isolation: isolate;
}

.palace::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.palace:hover::after { border-color: rgba(26, 101, 72, 0.28); }
.palace.is-selected::after { border-color: var(--jade-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85); }
.palace:focus-visible { outline: 4px solid rgba(26, 101, 72, 0.35); outline-offset: -4px; z-index: 3; }

.palace-head {
  min-height: clamp(26px, 3.2vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px clamp(6px, 1vw, 11px);
  border-top: 4px solid var(--element-color);
  background: var(--element-soft);
}

.palace-head strong { font-family: var(--display); font-size: clamp(0.77rem, 1.3vw, 1rem); line-height: 1; }
.palace-head strong .trigram { margin-right: 4px; font-family: var(--sans); font-weight: 500; }
.palace-head span:last-child { color: var(--element-color); font-size: clamp(0.62rem, 0.9vw, 0.72rem); font-weight: 750; white-space: nowrap; }

[data-element="wood"] { --element-color: var(--wood); --element-soft: var(--wood-soft); }
[data-element="fire"] { --element-color: var(--fire); --element-soft: var(--fire-soft); }
[data-element="earth"] { --element-color: var(--earth); --element-soft: var(--earth-soft); }
[data-element="metal"] { --element-color: var(--metal); --element-soft: var(--metal-soft); }
[data-element="water"] { --element-color: var(--water); --element-soft: var(--water-soft); }

.palace-body {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2px, 0.5vw, 7px);
  padding: clamp(7px, 1vw, 13px) clamp(6px, 0.8vw, 10px) 4px;
}

.entity { min-width: 0; text-align: center; }
.entity-label { display: block; margin-bottom: 2px; color: #87908b; font-size: clamp(0.58rem, 0.72vw, 0.67rem); letter-spacing: 0.06em; text-transform: uppercase; }
.entity .han {
  display: block;
  color: var(--entity-color, var(--ink));
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.15vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
}
.entity .vi { display: block; overflow: hidden; color: #4f5a55; font-size: clamp(0.61rem, 0.85vw, 0.76rem); line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.entity.spirit { --entity-color: var(--spirit); }
.entity[data-element="wood"] { --entity-color: var(--wood); }
.entity[data-element="fire"] { --entity-color: var(--fire); }
.entity[data-element="earth"] { --entity-color: var(--earth); }
.entity[data-element="metal"] { --entity-color: var(--metal); }
.entity[data-element="water"] { --entity-color: var(--water); }

.stem-pair { display: flex; align-items: flex-start; justify-content: center; gap: 2px; }
.stem-pair .stem-token + .stem-token { padding-left: 4px; border-left: 1px solid var(--line); }
.stem-token .han { font-size: clamp(1.05rem, 1.9vw, 1.72rem); }
.stem-token .vi { font-size: clamp(0.56rem, 0.76vw, 0.68rem); }

.star-stack { position: relative; }
.qin-tag { display: inline-flex; align-items: center; justify-content: center; gap: 3px; margin-top: 3px; padding: 1px 4px; background: var(--earth-soft); color: var(--earth); font-size: clamp(0.55rem, 0.67vw, 0.63rem); font-weight: 800; line-height: 1.25; }

.duty-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  background: var(--cinnabar);
  color: #fff;
  font-size: clamp(0.54rem, 0.65vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.palace-foot {
  min-height: clamp(35px, 4.3vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(4px, 0.7vw, 9px);
  padding: 4px clamp(7px, 1vw, 11px) 7px;
}

.palace-number {
  color: var(--element-color);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
  font-weight: 800;
}

.palace-number-wrap { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.role-symbols { display: inline-flex; align-items: center; gap: 3px; }
.role-symbol { width: 19px; height: 19px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #fff; font-family: var(--sans); font-size: 0.72rem; font-weight: 900; line-height: 1; box-shadow: 0 1px 3px rgba(22,38,31,.12); }
.role-person { color: #0c7253; }
.role-event { color: #8a334d; border-radius: 3px; }

.door-token { min-width: 0; text-align: center; }
.door-token .han { color: var(--entity-color); font-family: var(--serif); font-size: clamp(1.18rem, 2vw, 1.8rem); font-weight: 750; line-height: 1; }
.door-token .vi { display: block; color: #59635e; font-size: clamp(0.58rem, 0.8vw, 0.7rem); line-height: 1.05; white-space: nowrap; }
.door-token[data-element="wood"] { --entity-color: var(--wood); }
.door-token[data-element="fire"] { --entity-color: var(--fire); }
.door-token[data-element="earth"] { --entity-color: var(--earth); }
.door-token[data-element="metal"] { --entity-color: var(--metal); }
.door-token[data-element="water"] { --entity-color: var(--water); }

.earth-stem { text-align: right; }
.earth-stem .han { color: var(--entity-color); font-family: var(--serif); font-size: clamp(1.15rem, 1.85vw, 1.62rem); font-weight: 700; line-height: 1; }
.earth-stem .vi { display: block; color: #68716d; font-size: clamp(0.56rem, 0.72vw, 0.66rem); }
.earth-stem[data-element="wood"] { --entity-color: var(--wood); }
.earth-stem[data-element="fire"] { --entity-color: var(--fire); }
.earth-stem[data-element="earth"] { --entity-color: var(--earth); }
.earth-stem[data-element="metal"] { --entity-color: var(--metal); }
.earth-stem[data-element="water"] { --entity-color: var(--water); }

.markers { position: absolute; top: clamp(31px, 3.7vw, 42px); right: 5px; display: flex; gap: 3px; z-index: 2; }
.marker { padding: 1px 4px; border: 1px solid currentColor; background: rgba(255,255,255,0.93); font-size: clamp(0.5rem, 0.6vw, 0.58rem); font-weight: 900; line-height: 1.35; }
.marker-void { color: #8b312e; }
.marker-horse { color: #1b6082; }

.palace-center {
  background:
    radial-gradient(circle at center, rgba(185,133,45,0.09) 0 19%, transparent 19.5%),
    linear-gradient(135deg, rgba(146,97,32,0.035), transparent 60%), #fbfaf6;
}
.palace-center .palace-body { grid-template-columns: 1fr; place-items: center; padding: 5px; }
.center-seal { width: clamp(52px, 7vw, 78px); height: clamp(52px, 7vw, 78px); display: grid; place-items: center; border: 1px solid rgba(146,97,32,0.4); border-radius: 50%; color: var(--earth); font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 800; box-shadow: inset 0 0 0 5px rgba(146,97,32,0.06); }
.center-note { display: block; margin-top: 6px; color: var(--muted); font-size: clamp(0.55rem, 0.75vw, 0.67rem); text-align: center; }

.board-flags { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px 16px; border-top: 1px solid var(--line); background: #fbfcfa; }
.flag { padding: 3px 8px; border: 1px solid var(--line-strong); background: #fff; color: #46514c; font-size: 0.72rem; font-weight: 750; }
.flag-primary { border-color: rgba(167,53,47,0.45); background: var(--fire-soft); color: #852c28; }

.inspector { position: static; }
.inspector-head { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; }
.palace-detail { padding: 18px; }
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.detail-title-main { display: flex; align-items: center; gap: 10px; }
.detail-gua { color: var(--element-color); font-size: 2rem; }
.detail-title strong { display: block; font-family: var(--display); font-size: 1.2rem; }
.detail-title small { color: var(--muted); }
.element-chip { padding: 3px 8px; background: var(--element-soft); color: var(--element-color); font-size: 0.75rem; font-weight: 800; }
.detail-image { margin: 13px 0; color: #46514c; font-size: 0.86rem; }
.detail-list { display: grid; gap: 8px; }
.detail-item { padding: 10px 11px; border-left: 3px solid var(--item-color, var(--line-strong)); background: #f7f8f5; }
.detail-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.detail-item strong { font-family: var(--display); font-size: 0.95rem; }
.detail-item small { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; }
.detail-item p { margin: 4px 0 0; color: #58625e; font-size: 0.78rem; line-height: 1.45; }
.detail-item.item-spirit { --item-color: var(--spirit); }
.detail-item.item-star { --item-color: var(--gold); }
.detail-item.item-door { --item-color: var(--cinnabar); }
.detail-item.item-stem { --item-color: var(--jade); }
.detail-markers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detail-marker { padding: 4px 7px; background: var(--metal-soft); color: #4e5a63; font-size: 0.72rem; font-weight: 750; }

.reading-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(200px, 0.65fr) 2fr;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  background: var(--jade-dark);
  color: white;
}
.reading-strip .eyebrow { color: #9bc7ad; }
.reading-strip ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; counter-reset: layers; }
.reading-strip li { min-height: 54px; padding: 3px 13px; border-left: 1px solid rgba(255,255,255,0.17); counter-increment: layers; }
.reading-strip li::before { content: "0" counter(layers); display: block; margin-bottom: 3px; color: #d4b76f; font-size: 0.66rem; font-weight: 800; }
.reading-strip strong { display: block; font-family: var(--display); font-size: 0.92rem; }
.reading-strip span { color: #bbcac3; font-size: 0.7rem; line-height: 1.25; }

.method-details { margin-top: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.78); }
.method-details summary { padding: 14px 17px; color: var(--jade-dark); font-weight: 750; cursor: pointer; }
.method-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 17px 17px; color: #56615c; font-size: 0.83rem; }
.method-copy p { margin-bottom: 0; }
.method-copy strong { color: var(--ink); }

footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; }
footer p { margin-bottom: 0; }
footer a { color: var(--jade); }

@media (max-width: 1220px) {
  .workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .board-column { width: min(100%, 820px); grid-column: 1 / -1; justify-self: center; }
  .inspector, .workspace > .element-panel { grid-column: auto; }
}

@media (max-width: 1080px) {
  .input-grid { grid-template-columns: 1.3fr 0.7fr 1fr; }
  .submit-field { grid-column: 1 / -1; }
  .submit-field > span, .submit-field > small { display: none; }
  .submit-field .button { justify-content: center; }
  .field small { min-height: 0; }
  .chart-meta { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .workspace { grid-template-columns: 1fr; }
  .board-column, .inspector, .workspace > .element-panel { width:100%; height:auto; grid-column:1; grid-row:auto; }
  .inspector { position: static; }
  .palace-detail { display: grid; grid-template-columns: minmax(210px, 0.65fr) 1fr; gap: 18px; }
  .detail-title, .detail-image, .detail-markers { grid-column: 1; }
  .detail-list { grid-column: 2; grid-row: 1 / span 3; }
  .reading-strip { grid-template-columns: 1fr; gap: 14px; }
  .method-copy { grid-template-columns: 1fr; gap: 7px; }
}

@media (max-width: 680px) {
  .page-shell { padding-inline: 10px; }
  .topbar { min-height: 72px; }
  .school-mark small { display: none; }
  .school-mark { padding-left: 12px; }
  .control-heading { align-items: flex-start; }
  .control-heading .button { padding-inline: 10px; font-size: 0.78rem; }
  .input-grid { grid-template-columns: 1fr 1fr; }
  .field-time, .submit-field { grid-column: 1 / -1; }
  .chart-meta { gap: 10px; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { border-bottom: 1px solid var(--line); }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(3), .pillar:nth-child(4) { border-bottom: 0; }
  .calculation-summary { grid-template-columns: 1fr; }
  .summary-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-item:last-child { border-bottom: 0; }
  .board-toolbar { align-items: flex-start; flex-direction: column; }
  .board-key { justify-content: flex-start; }
  .qimen-board { aspect-ratio: 1 / 1.32; }
  .palace-head span:last-child { display: none; }
  .entity-label { display: none; }
  .palace-body { align-items: center; padding-top: 4px; }
  .entity .vi, .door-token .vi, .earth-stem .vi { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: normal; line-height: 1.15; }
  .duty-badge { padding-inline: 3px; }
  .markers { top: 29px; }
  .palace-detail { display: block; }
  .detail-list { margin-top: 12px; }
  .reading-strip ol { grid-template-columns: repeat(2, 1fr); }
  .reading-strip li { border-bottom: 1px solid rgba(255,255,255,0.12); }
  footer { flex-direction: column; gap: 7px; }
}

@media (max-width: 430px) {
  .brand-seal { width: 42px; height: 42px; }
  .school-mark span { font-size: 0.9rem; }
  .input-grid { grid-template-columns: 1fr; }
  .field-time, .field-method, .submit-field { grid-column: auto; }
  .control-panel { padding-inline: 14px; }
  .board-frame { padding: 5px; }
  .board-frame::before { inset: 5px; }
  .qimen-board { aspect-ratio: auto; grid-template-rows: repeat(3, minmax(185px, auto)); }
  .palace-head { padding-inline: 5px; }
  .palace-body { gap: 1px; padding-inline: 3px; }
  .entity .vi, .door-token .vi, .earth-stem .vi { min-height: 2.3em; font-size: 0.68rem; }
  .qin-tag { max-width: 100%; white-space: normal; font-size: 0.54rem; }
  .palace-foot { padding-inline: 5px; }
  .markers { right: 2px; }
  .marker { padding-inline: 2px; }
}

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

.question-field { grid-column:1 / -1; }
textarea { font:inherit; width:100%; resize:vertical; min-height:88px; border:1px solid var(--line-strong); border-radius:3px; padding:12px; }
textarea:focus { outline:3px solid #bce8ce; }
.question-summary { padding:14px; background:#e3f4e9; border-left:4px solid var(--jade); overflow-wrap:anywhere; white-space:pre-wrap; }
.learning-panel { margin-top:20px; padding:clamp(16px,3vw,28px); border:1px solid var(--line); background:#fff; }
.learning-panel h2 { margin-bottom:16px; }
.learning-panel h3 { font-size:1.1rem; }
.learning-panel p, .learning-panel li, .learning-panel dd { font-size:1rem; line-height:1.65; }
.learning-panel summary { cursor:pointer; padding:14px 0; color:var(--jade-dark); font-weight:750; }
.learning-panel dt { font-weight:800; margin-top:14px; }
.learning-panel dd { margin-left:0; color:#48544e; }
.beginner-steps { padding-left:24px; }
.beginner-steps li { padding:7px 0; }
.locator-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.locator-grid > div { border:1px solid var(--line); padding:16px; }
.locator-grid p { margin:8px 0; }
.guide-links { display:flex; flex-wrap:wrap; gap:8px; }
.jump-cung { min-height:44px; padding:10px 12px; border:1px solid var(--element-color); color:var(--element-color); background:var(--element-soft); font-weight:750; text-align:left; }
.jump-cung:focus-visible { outline:3px solid var(--jade); outline-offset:3px; }
.relation-banner { padding:14px; border-left:4px solid var(--jade); background:#eff8f1; margin-top:16px; }
.reality-check { padding:14px; background:#f2f5f8; }
.learning-panel .element-chip, .board-key .element-chip { font-size:0.875rem; }
.source-note { color:var(--muted); }
.source-note a { text-decoration:underline; }
.stem-token[data-element] .han { color:var(--element-color); }
.entity[data-element="metal"] .han, .stem-token[data-element="metal"] .han,
.door-token[data-element="metal"] .han, .earth-stem[data-element="metal"] .han {
  background:transparent; color:var(--metal); border-radius:0;
}
.palace[data-element="metal"] .palace-head { border-top-color:#e5b800; }
@media(max-width:680px) {
  .locator-grid { grid-template-columns:1fr; }
}
.element-diagram { position:relative; width:min(100%,660px); aspect-ratio:1; margin:20px auto 8px; isolation:isolate; }
.element-routes { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.element-routes path { fill:none; opacity:.9; stroke-linecap:round; stroke-linejoin:round; transition:opacity .22s ease,filter .22s ease; }
.generate-routes path { stroke:#208b59; stroke-width:6.5; marker-end:url(#arrow-generate); }
.generate-routes marker path, #arrow-generate path { fill:#208b59; }
.control-routes path { stroke:#b83c4c; stroke-width:4.2; marker-end:url(#arrow-control); }
.control-routes marker path, #arrow-control path { fill:#b83c4c; }
.element-diagram[data-active] .element-routes path { opacity:.11; }
.element-diagram[data-active] .element-routes path.is-related { opacity:1; filter:drop-shadow(0 1px 1px rgba(18,32,26,.18)); }
.element-orb { position:absolute; z-index:2; width:clamp(76px,16%,108px); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:3px solid var(--element-color); border-radius:50%; background:radial-gradient(circle at 38% 30%,#fff 0 18%,var(--element-soft) 70%); color:var(--element-color); box-shadow:0 8px 22px rgba(20,38,30,.14),inset 0 0 0 5px rgba(255,255,255,.72); cursor:pointer; transform:translate(-50%,-50%); transition:transform .18s,box-shadow .18s; }
.element-icon { width:clamp(26px,5vw,39px); height:clamp(26px,5vw,39px); fill:currentColor; overflow:visible; }
.element-icon .icon-detail { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; opacity:.88; }
.element-icon .icon-cutout { fill:var(--element-soft); }
.element-orb strong { font-size:clamp(.9rem,2.4vw,1.08rem); text-transform:uppercase; letter-spacing:.04em; }
.element-orb small { color:#59635e; font-size:clamp(.64rem,1.8vw,.78rem); }
.element-orb:hover { box-shadow:0 11px 28px rgba(20,38,30,.2),inset 0 0 0 5px rgba(255,255,255,.84); }
.element-orb:focus-visible { outline:4px solid #15251f; outline-offset:4px; }
.element-orb.is-active { transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 0 6px var(--element-soft),0 13px 30px rgba(20,38,30,.22),inset 0 0 0 5px #fff; }
.orb-fire { left:50%; top:8.3%; }
.orb-earth { left:89.6%; top:37.2%; }
.orb-metal { left:74.5%; top:83.7%; }
.orb-water { left:25.5%; top:83.7%; }
.orb-wood { left:10.4%; top:37.2%; }
.diagram-center { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(92px,17%,116px); aspect-ratio:1; display:grid; place-items:center; pointer-events:none; }
.taiji-ink { width:100%; height:100%; object-fit:contain; filter:contrast(1.08) drop-shadow(0 3px 7px rgba(20,25,22,.13)); }
.diagram-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px; margin:12px 0 20px; }
.diagram-legend span { display:flex; align-items:center; gap:7px; font-size:.95rem; }
.diagram-legend i { width:34px; height:5px; border-radius:9px; }
.legend-generate { background:#2f9860; }
.legend-control { background:#bc3343; }
.element-reading { width:min(100%,760px); margin:0 auto 20px; padding:18px; border:1px solid var(--line); background:#f8faf6; }
.element-reading-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.element-reading h3 { margin:0; font-family:var(--display); color:var(--jade-dark); }
.reading-reset { min-height:36px; padding:6px 10px; border:1px solid var(--jade); background:#fff; color:var(--jade-dark); font-weight:700; }
.reading-reset:hover { background:var(--wood-soft); }
.relation-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.relation-cards p { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; margin:0; padding:11px 12px; background:#fff; border:1px solid var(--line); }
.relation-cards strong { font-size:.95rem; }
.relation-cards small { grid-column:2; color:var(--muted); }
.relation-label { grid-row:1/3; min-width:70px; padding:5px 8px; color:#fff; font-size:.74rem; font-weight:800; text-align:center; text-transform:uppercase; }
.relation-generate { background:#2f9860; }
.relation-control { background:#bc3343; }
.workspace > .element-panel { margin:0; padding:0; min-width:0; }
.element-panel-head { min-height:76px; display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.element-panel-head h2 { margin:0; font-size:clamp(1.08rem,1.4vw,1.35rem); }
.element-panel-body { padding:18px; }
.element-panel-body > p { color:#56615c; font-size:.84rem; line-height:1.5; }
.element-panel .element-diagram { width:min(100%,310px); margin:10px auto 4px; }
.element-panel .element-orb { width:19%; min-width:0; border-width:2px; box-shadow:0 5px 13px rgba(20,38,30,.15),inset 0 0 0 3px rgba(255,255,255,.72); }
.element-panel .element-orb strong { font-size:.78rem; }
.element-panel .element-orb small { display:none; }
.element-panel .element-icon { width:30%; height:30%; }
.element-panel .diagram-center { width:18%; }
.element-panel .diagram-legend { gap:7px 14px; margin:6px 0 12px; }
.element-panel .diagram-legend span { gap:5px; font-size:.76rem; }
.element-panel .diagram-legend i { width:24px; height:4px; }
.element-panel .element-reading { margin-bottom:12px; padding:10px; }
.element-panel .element-reading-head { align-items:flex-start; flex-direction:column; margin-bottom:9px; }
.element-panel .element-reading h3 { font-size:1rem; }
.element-panel .relation-cards { grid-template-columns:1fr; gap:6px; }
.element-panel .relation-cards p { padding:8px; column-gap:7px; }
.element-panel .relation-cards strong { font-size:.82rem; }
.element-panel .relation-cards small { font-size:.72rem; }
.element-panel .relation-label { min-width:58px; padding:4px 6px; font-size:.65rem; }
@media(max-width:560px) {
  .element-diagram { margin-block:14px 6px; }
  .element-orb { width:19%; border-width:2px; box-shadow:0 5px 13px rgba(20,38,30,.15),inset 0 0 0 3px rgba(255,255,255,.72); }
  .element-orb small { display:none; }
  .element-icon { width:32%; height:32%; }
  .diagram-center { width:18%; }
  .relation-cards { grid-template-columns:1fr; }
  .element-reading-head { align-items:flex-start; flex-direction:column; }
}
.ai-panel { margin: 16px 0 24px; border: 2px solid #b58a24; }
.local-controls { display:grid; grid-template-columns:minmax(240px,1fr) auto auto auto; align-items:end; gap:12px; margin:16px 0; }
.local-controls .field { min-width:0; }
.local-controls .button { white-space:nowrap; }
.ai-panel p,.ai-panel li { font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.ai-panel code { white-space:normal; overflow-wrap:anywhere; }
.ai-assessment { padding:14px 0; border-top:1px solid var(--line); }
#ai-answer { max-width:960px; margin:24px auto 0; min-width:0; }
#ai-answer h3 { font-size:1.2rem; line-height:1.4; margin:18px 0 10px; }
#ai-answer h4 { font-size:1.08rem; line-height:1.45; margin:6px 0 10px; }
#ai-answer p { white-space:pre-line; }
.ai-opening { border-left:4px solid var(--jade); background:#f0f7f2; padding:2px 18px; }
.ai-scope { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; padding:16px 0; }
.ai-scope div { min-width:0; }
.ai-scope dt { font-size:14px; font-weight:700; color:var(--jade-dark); }
.ai-scope dd { margin:4px 0 0; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.ai-evidence-links { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.ai-evidence-links button { min-height:40px; font-size:14px; padding:8px 12px; }
.ai-evidence summary { font-size:14px; }
.ai-development,.ai-alternatives { border-top:1px solid var(--line); padding-top:8px; margin-top:18px; }
.ai-stages { list-style:none; padding:0 0 0 22px; border-left:2px solid #c39a44; margin:18px 0 24px 8px; }
.ai-stages>li { position:relative; padding:0 0 22px; min-width:0; }
.ai-stages>li::before { content:''; position:absolute; left:-30px; top:4px; width:12px; height:12px; border:2px solid white; border-radius:50%; background:var(--jade); }
.ai-stage-label { color:var(--jade-dark); font-size:14px; font-weight:750; }
.ai-panel .ai-condition { padding:10px 14px; border-left:3px solid #c39a44; background:#faf7ef; }
.ai-panel .ai-thread,.ai-panel .ai-note { font-size:14px; color:#526159; line-height:1.6; }
@media(max-width:560px){.ai-scope{grid-template-columns:1fr}.ai-stages{padding-left:18px;margin-left:4px}.ai-stages>li::before{left:-26px}.ai-opening{padding-inline:12px}}
#ai-status { font-weight:600; }
@media(max-width:760px) {
  .local-controls { grid-template-columns:1fr 1fr; }
  .local-controls .field { grid-column:1 / -1; }
  .local-controls .button { justify-content:center; }
}
@media(max-width:430px) {
  .control-heading { flex-wrap:wrap; }
  .detail-title { align-items:flex-start; flex-wrap:wrap; }
  .local-controls { grid-template-columns:1fr; }
  .local-controls .field, .local-controls .button { grid-column:auto; width:100%; }
}
[hidden] { display:none !important; }
.audit-page main { display:grid; gap:24px; padding-top:30px; }
.audit-hero,.audit-section { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:clamp(22px,4vw,48px); }
.audit-hero { border-top:5px solid var(--jade); }
.audit-hero h1 { max-width:930px; margin:5px 0 16px; font:700 clamp(2rem,5vw,4.25rem)/1.02 var(--display); letter-spacing:-.035em; }
.audit-lead { max-width:1000px; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.65; }
.audit-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.audit-badges span { background:#e5f2eb; border:1px solid #bad4c5; color:var(--jade-dark); padding:7px 10px; font-weight:750; font-size:.82rem; }
.audit-section h2 { margin:4px 0 20px; font:700 clamp(1.55rem,3vw,2.35rem)/1.1 var(--display); }
.audit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.audit-grid article { border:1px solid var(--line); border-left:4px solid var(--jade); padding:17px; background:#fafbf8; }
.audit-grid h3,.audit-flow strong { margin:0 0 6px; font-family:var(--display); }
.audit-grid p { margin:0; color:#44504a; }
.audit-table-wrap { overflow-x:auto; }
.audit-table { width:100%; border-collapse:collapse; min-width:760px; }
.audit-table th,.audit-table td { border:1px solid var(--line); padding:13px; text-align:left; vertical-align:top; }
.audit-table th { background:var(--jade-dark); color:white; }
.audit-table tr:nth-child(even) td { background:#f7f8f4; }
.audit-table code,.audit-sources code { background:#eef0ea; padding:2px 5px; }
.audit-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.audit-flow div { display:grid; align-content:start; gap:6px; border-top:4px solid var(--gold); background:#faf7ef; padding:15px; }
.audit-flow b { color:var(--gold); font-size:1.4rem; }
.audit-flow span { color:var(--muted); font-size:.9rem; }
.audit-list,.audit-sources ol { padding-left:1.25rem; }
.audit-list li,.audit-sources li { margin:.7rem 0; }
.audit-sources a { color:var(--jade); font-weight:700; }
@media (max-width:900px){.audit-flow{grid-template-columns:1fr 1fr}.audit-grid{grid-template-columns:1fr}}
@media (max-width:520px){.audit-page{padding-left:10px;padding-right:10px}.audit-page .topbar{min-height:72px}.audit-page .topbar>.button{padding:8px}.audit-hero,.audit-section{padding:20px 16px}.audit-flow{grid-template-columns:1fr}.audit-hero h1{font-size:2.25rem}}
@media print {
  body { background: #fff; }
  .page-shell { width: 100%; padding: 0; }
  .topbar { min-height: 60px; }
  .control-panel, .inspector, .reading-strip, .method-details, footer { display: none; }
  .result { margin-top: 8px; }
  .workspace { display: block; }
  .board-column, .pillars, .calculation-summary { box-shadow: none; }
  .qimen-board { aspect-ratio: 1 / 0.9; }
}

/* Reading controls and evidence retain the existing responsive layout. */
.reading-depth { margin-top:12px; max-width:26rem; }
.ai-evidence { margin:12px 0; overflow-wrap:anywhere; }
.ai-evidence .jump-cung { min-height:44px; margin:8px 8px 4px 0; padding:8px 12px; font-size:14px; }
.ai-actions > li { margin-bottom:18px; }