@font-face {
  font-family: "JianZiPu";
  src: url("./vendor/jianzipu/JianZiPu.ttf") format("truetype");
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

:root {
  color-scheme: light;
  --ink: #17120d;
  --muted: #756a5c;
  --paper: #f4ead8;
  --paper-deep: #e4d2b2;
  --lacquer: #2a1711;
  --cinnabar: #9f2f24;
  --bluegreen: #1d5a5a;
  --line: rgba(42, 23, 17, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(178, 139, 69, 0.14), transparent 42%), var(--paper);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
}

button, textarea { font: inherit; }

.input-lab-shell { min-height: 100vh; padding: 24px; }
.input-lab-header, .input-lab-grid { max-width: 1500px; margin: 0 auto; }
.input-lab-header { display: grid; grid-template-columns: 1fr minmax(300px, 1.8fr) auto; gap: 24px; align-items: start; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.site-nav a, .sample-button { padding: 7px 9px; border: 1px solid var(--line); color: var(--lacquer); background: rgba(255,255,255,.48); font: 700 12px ui-sans-serif, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.site-nav a[aria-current="page"], #compileButton { color: #fffaf1; background: var(--lacquer); }
.eyebrow { margin: 0 0 8px; color: var(--cinnabar); font: 700 11px ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { font-size: clamp(28px, 4vw, 52px); }
h2 { font-size: 24px; }
h3 { margin-top: 22px; font: 700 12px ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.lead { max-width: 680px; color: var(--muted); line-height: 1.7; }
.font-status, .status-badge { padding: 8px 10px; border: 1px solid var(--line); color: var(--bluegreen); background: rgba(255,255,255,.56); font: 700 12px ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
.font-status[data-loaded="false"] { color: var(--cinnabar); }
.input-lab-grid { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(260px, 340px); gap: 18px; margin-top: 28px; }
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); background: rgba(255,250,241,.78); box-shadow: 0 22px 60px rgba(31,20,11,.14); }
.editor-panel { display: flex; flex-direction: column; gap: 14px; }
.composer-block { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.composer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.composer-grid label { display: grid; gap: 5px; }
select { width: 100%; min-height: 34px; padding: 5px 7px; border: 1px solid rgba(42,23,17,.24); color: var(--ink); background: rgba(255,255,255,.58); }
#composeButton { min-height: 38px; border: 1px solid var(--lacquer); color: var(--lacquer); background: rgba(255,255,255,.58); cursor: pointer; }
.composer-status { min-height: 20px; margin: 0; color: var(--bluegreen); font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.composer-status[data-status="error"] { color: var(--cinnabar); }
label { color: var(--muted); font: 700 13px ui-sans-serif, system-ui, sans-serif; }
textarea { width: 100%; min-height: 190px; resize: vertical; padding: 14px; border: 1px solid rgba(42,23,17,.28); color: var(--ink); background: rgba(255,255,255,.58); line-height: 1.8; outline: none; }
textarea:focus { border-color: var(--bluegreen); box-shadow: 0 0 0 3px rgba(29,90,90,.12); }
#compileButton { min-height: 42px; border: 0; cursor: pointer; }
.sample-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sample-button { padding: 5px 7px; font-size: 11px; }
.hint { margin: 0; color: var(--muted); font: 12px/1.6 ui-sans-serif, system-ui, sans-serif; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.font-preview { display: grid; place-items: center; min-height: 380px; margin-top: 18px; padding: 24px; overflow: auto; border: 1px solid rgba(42,23,17,.16); background: rgba(255,255,255,.44); }
.font-sequence { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; max-width: 100%; }
.font-score-unit { display: inline-block; min-width: 1.2em; color: #17120d; font-family: "JianZiPu", serif; font-size: clamp(48px, 8vw, 112px); font-weight: 400; line-height: 1.2; white-space: pre; font-kerning: normal; font-feature-settings: "kern", "liga", "mark", "mkmk"; font-variant-ligatures: normal; font-synthesis: none; text-rendering: geometricPrecision; }
.font-score-unit.unparsed { color: var(--cinnabar); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; }
.font-score-unit.font-only { color: #245c5b; }
.unparsed-preview { color: var(--cinnabar); font: 700 14px ui-sans-serif, system-ui, sans-serif; }
.font-text { min-height: 24px; margin-bottom: 0; color: var(--muted); font: 12px/1.6 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
.audit-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; margin: 18px 0 0; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.audit-list dt { color: var(--muted); font-weight: 700; }
.audit-list dd { margin: 0; overflow-wrap: anywhere; }
.coverage-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.coverage-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coverage-heading h3 { margin: 0; }
.coverage-status { color: var(--bluegreen); font: 700 11px ui-sans-serif, system-ui, sans-serif; }
.coverage-status[data-status="error"] { color: var(--cinnabar); }
.coverage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.coverage-summary span { min-width: 0; padding: 7px 5px; border: 1px solid rgba(42,23,17,.12); text-align: center; background: rgba(255,255,255,.38); }
.coverage-summary b, .coverage-summary small { display: block; }
.coverage-summary b { color: var(--lacquer); font: 700 16px/1.1 ui-sans-serif, system-ui, sans-serif; }
.coverage-summary small { margin-top: 4px; color: var(--muted); font: 10px/1.2 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.coverage-note { margin: 10px 0 0; color: var(--muted); font: 11px/1.55 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.coverage-table-wrap { margin-top: 16px; border-top: 1px solid rgba(43, 33, 23, 0.12); padding-top: 12px; }
.coverage-table-wrap summary { cursor: pointer; color: #245c5b; font-size: 0.82rem; font-weight: 700; }
.coverage-table-scroll { margin-top: 10px; max-width: 100%; overflow-x: auto; border: 1px solid rgba(43, 33, 23, 0.12); }
.coverage-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.72rem; background: #fffdf7; }
.coverage-table th, .coverage-table td { padding: 7px 8px; border-bottom: 1px solid rgba(43, 33, 23, 0.08); text-align: left; vertical-align: top; }
.coverage-table th { color: var(--muted); font-weight: 700; white-space: nowrap; background: #f3ecdf; }
.coverage-table td { color: #2f2923; }
.coverage-table tr[data-parser-status="component-only"] td { color: #80603a; }
.coverage-table tr[data-parser-status="unparsed"] td { color: #8b4b3e; }
.coverage-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.coverage-areas { min-width: 160px; color: #5b554e; }
.history-block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.historical-seed-list { display: grid; gap: 8px; margin-top: 10px; }
.historical-evidence-image { display:block; width:100%; max-height:260px; object-fit:contain; object-position:top; margin-top:10px; border:1px solid rgba(42,23,17,.14); background:#fffdf7; }
.historical-seed { padding: 9px 10px; border-left: 3px solid var(--bluegreen); background: rgba(29,90,90,.06); }
.historical-seed[data-playable="false"] { border-color: var(--cinnabar); background: rgba(159,47,36,.05); }
.historical-seed h4, .historical-seed p, .historical-seed small { display: block; margin: 0; }
.historical-seed-figure { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.historical-seed-figure img { width:42px; height:52px; object-fit:contain; border:1px solid rgba(42,23,17,.12); background:#fffdf7; }
.historical-seed h4 { color: var(--lacquer); font: 700 12px/1.4 ui-sans-serif, system-ui, sans-serif; }
.historical-seed p { margin-top: 4px; color: var(--muted); font: 11px/1.45 ui-sans-serif, system-ui, sans-serif; }
.historical-seed small { margin-top: 6px; color: var(--muted); font: 10px/1.4 ui-sans-serif, system-ui, sans-serif; }
.shaping-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.shaping-evidence-list { display: grid; gap: 8px; margin-top: 10px; }
.shaping-evidence-entry { min-width: 0; padding: 9px 10px; border-left: 3px solid var(--gold); background: rgba(178,139,69,.08); }
.shaping-evidence-entry h4, .shaping-evidence-entry p, .shaping-evidence-entry small { display: block; margin: 0; overflow-wrap: anywhere; }
.shaping-evidence-entry h4 { color: var(--lacquer); font: 700 12px/1.4 ui-sans-serif, system-ui, sans-serif; }
.shaping-evidence-entry p { margin-top: 4px; color: var(--muted); font: 11px/1.45 ui-sans-serif, system-ui, sans-serif; }
.shaping-evidence-entry small { margin-top: 6px; color: var(--muted); font: 10px/1.45 ui-monospace, SFMono-Regular, monospace; }
.shaping-evidence-empty { margin: 10px 0 0; color: var(--muted); font: 11px/1.5 ui-sans-serif, system-ui, sans-serif; }
.raw-glyph-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.raw-glyph-block .coverage-status[data-status="warning"] { color: #8b4b3e; }
.token-output { max-height: 260px; overflow: auto; padding: 12px; color: #3c2a1d; background: rgba(255,255,255,.5); font: 11px/1.5 ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; }
.warning-list { margin: 10px 0 0; padding-left: 18px; color: var(--cinnabar); font: 12px/1.6 ui-sans-serif, system-ui, sans-serif; }
.performance-output { display: grid; gap: 8px; margin-top: 10px; }
.performance-row { padding: 8px 10px; border-left: 3px solid var(--bluegreen); color: var(--muted); background: rgba(29,90,90,.07); font: 12px/1.55 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.performance-row[data-playable="false"] { border-color: var(--cinnabar); color: var(--cinnabar); background: rgba(159,47,36,.06); }
@media (max-width: 980px) { .input-lab-header, .input-lab-grid { grid-template-columns: 1fr; } .font-status { justify-self: start; } .font-preview { min-height: 260px; } }
@media (max-width: 560px) { .input-lab-shell { padding: 14px; } .panel { padding: 15px; } .font-sequence { gap: 8px; } .font-score-unit { font-size: 48px; } .coverage-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }