:root {
  --night: #1b2440;
  --night-2: #2a355a;
  --moon: #f2c14e;
  --desk: #e6ebf2;
  --paper: #ffffff;
  --jade: #2e8b66;
  --jade-soft: #a9d5c2;
  --text: #1f2637;
  --muted: #586179;
  --rule: #cfd6e2;
  --display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --body: "Atkinson Hyperlegible", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--text); font: 17px/1.6 var(--body); }
a { color: var(--night); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; }

/* Header */
.top { background: var(--night); color: #fff; }
.top-in { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 20px/1 var(--display); }
.brand svg { width: 36px; height: 36px; }
.brand .g-border { stroke: var(--moon); stroke-width: 40; fill: none; }
.brand .g-guide { stroke: rgba(242,193,78,.45); stroke-width: 22; stroke-dasharray: 70 50; fill: none; }
.brand .s-done { fill: var(--moon); }
.top nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.top nav a { color: #dfe4f0; text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--moon); }

/* Desk: tools on the left, paper on the right */
.desk { max-width: 1280px; margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
.panel { position: sticky; top: 20px; min-width: 0; }
.panel h1 { font: 800 36px/1.08 var(--display); letter-spacing: -0.02em; color: var(--night); margin: 0 0 12px; }
.panel .lede { color: var(--muted); margin: 0 0 24px; font-size: 16px; }
.paper-col { min-width: 0; display: flex; justify-content: center; }

/* Controls */
.controls { display: flex; flex-direction: column; gap: 14px; }
.field { font-weight: 700; font-size: 14px; color: var(--night); }
.controls textarea { font: 28px/1.4 "Kaiti SC", "STKaiti", "KaiTi", var(--body); padding: 10px 12px; border: 2px solid var(--night); border-radius: 6px; background: var(--paper); color: var(--text); resize: vertical; width: 100%; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { font: 14px/1 var(--body); background: transparent; border: 1px solid var(--rule); color: var(--night); padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.presets button:hover { border-color: var(--night); background: var(--paper); }
.field-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; }
.seg { display: flex; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 3px; gap: 2px; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; font-size: 14px; border-radius: 4px; color: var(--muted); white-space: nowrap; }
.seg input:checked + span { background: var(--night); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--moon); }
.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.checks input { accent-color: var(--night); width: 16px; height: 16px; vertical-align: -2px; }
.print { margin-top: 6px; font: 700 18px/1 var(--display); background: var(--moon); color: var(--night); border: 0; border-radius: 6px; padding: 16px; cursor: pointer; box-shadow: 0 3px 0 #c99a2e; }
.print:hover { background: #f5cb66; }
.print:active { transform: translateY(2px); box-shadow: 0 1px 0 #c99a2e; }
.status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.6em; }

/* The paper */
.sheet { width: 210mm; min-height: 297mm; padding: 15mm; background: var(--paper); box-shadow: 0 1px 2px rgba(27,36,64,.12), 0 12px 32px rgba(27,36,64,.10); transform-origin: top center; }
.sheet[data-paper="letter"] { width: 215.9mm; min-height: 279.4mm; }
.sheet-head { display: flex; align-items: baseline; gap: 3mm; font: 12pt var(--body); color: #333; margin-bottom: 7mm; }
.sheet-head .line { flex: 1; border-bottom: 1px solid #555; }
.sheet-head .line.short { flex: .5; }
.sheet-foot { text-align: right; font-size: 7.5pt; color: #9aa3b5; margin-top: 6mm; }
.char-block { break-inside: avoid; margin-bottom: 4.5mm; }
.char-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5mm 3mm; margin-bottom: 1.5mm; }
.big-char { font: 700 14pt "Kaiti SC", "STKaiti", "KaiTi", serif; }
.py { font-size: 13pt; color: var(--jade); min-width: 12mm; }
.order { display: flex; flex-wrap: wrap; gap: .8mm; }
.row { display: flex; line-height: 0; }
.cell { display: block; margin: 0 -1px -1px 0; }
.g-border { fill: none; stroke: var(--jade); stroke-width: 12; }
.g-guide { fill: none; stroke: var(--jade-soft); stroke-width: 7; stroke-dasharray: 34 26; }
.step .g-border { stroke: #c4cbd6; stroke-width: 22; }
.s-done { fill: #1d1d1f; }
.s-current { fill: #d2452c; }
.step .s-done { fill: #a3a9b4; }

/* Reading content */
.read { background: var(--paper); border-top: 1px solid var(--rule); }
.read-in { max-width: 680px; margin: 0 auto; padding: 48px 24px 56px; }
.read h1 { font: 800 36px/1.1 var(--display); color: var(--night); margin: 0 0 16px; }
.read h2 { font: 700 24px/1.25 var(--display); color: var(--night); margin: 40px 0 10px; }
.read h2:first-child { margin-top: 0; }
.read li { margin-bottom: 6px; }
.more { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.more a { font-weight: 700; }

.foot { background: var(--night); color: #b9c1d6; font-size: 14px; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 28px 24px; display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.foot a { color: #dfe4f0; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 40px; gap: 28px; }
  .panel { position: static; }
  .panel h1 { font-size: 30px; }
  .top-in, .foot-in { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media print {
  body { background: #fff; }
  .top, .panel, .read, .foot { display: none !important; }
  .desk { display: block; padding: 0; max-width: none; }
  .sheet { zoom: 1 !important; width: auto !important; min-height: 0 !important; padding: 0; box-shadow: none; }
}