.guide-main { padding-block: clamp(2.2rem, 5vw, 4.5rem); }
.guide-heading { max-width: 46rem; margin-bottom: 2.25rem; }
.guide-heading h1 { margin: .45rem 0 .7rem; font-family: var(--serif); font-size: clamp(2.05rem, 5vw, 3.65rem); line-height: 1.08; }
.guide-heading > p:last-child { color: var(--muted); max-width: 39rem; line-height: 1.6; }
.guide-article-heading { margin-top: 1.55rem; }
.guide-day { margin-bottom: 2rem; }
.guide-day h2 { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); margin-bottom: .75rem; }
.guide-day h2 span { padding: .2rem .5rem; border-radius: .25rem; background: var(--soft); color: var(--deep); font: 700 .65rem var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.35rem); }
.guide-card, .guide-character, .guide-exercise { background: var(--panel); border: 1px solid var(--line); border-radius: .45rem; }
.guide-card > a { display: flex; flex-direction: column; height: 100%; padding: 1.3rem; gap: .55rem; text-decoration: none; }
.guide-card > a:hover { background: var(--soft); }
.guide-card-glyph { align-self: flex-start; font: clamp(2rem, 6vw, 3.6rem) var(--calligraphy); }
.guide-card h3 { margin: 0; font: 700 1.35rem/1.25 var(--serif); }
.guide-card p, .guide-char-heading p, .guide-step { color: var(--muted); }
.guide-card-meta { margin-top: auto; padding-top: .55rem; color: var(--deep); font-weight: 650; font-size: .84rem; }
.guide-card-meta span { margin-left: .45rem; }
.guide-character, .guide-exercise { padding: clamp(1rem, 3vw, 1.45rem); }
.guide-char-heading { display: flex; align-items: center; gap: 1rem; }
.guide-char-heading h2 { margin: 0; font: 2.6rem var(--calligraphy); }
.guide-pinyin { font-weight: 700; }
.guide-stroke-board { display: grid; place-items: center; width: min(100%, 16rem); aspect-ratio: 1; margin: 1rem auto; background:
  linear-gradient(to right, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%),
  linear-gradient(to bottom, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%), var(--paper);
  border: 1px solid var(--line); }
.guide-stroke-board > span { font: clamp(3.5rem, 12vw, 7rem) var(--calligraphy); }
.guide-stroke-board svg { width: 90%; height: 90%; }
.guide-stroke-board path { fill: none; stroke: #d9d9cc; }
.guide-stroke-board path.done { stroke: var(--ink); }
.guide-stroke-board path.current { stroke: var(--seal); }
.guide-controls, .guide-pagination { display: flex; flex-wrap: wrap; gap: .6rem; }
.guide-controls .button { min-height: 2.2rem; padding: .35rem .6rem; font-size: .83rem; }
.guide-step { min-height: 1.45em; margin-top: .5rem; font-size: .85rem; }
.guide-tip { margin: .65rem 0 .8rem; line-height: 1.55; }
.guide-exercise { margin: 1.45rem 0; }
.guide-exercise h2 { font-family: var(--serif); margin-bottom: .55rem; }
.guide-exercise ol { margin: 0; padding-left: 1.35rem; line-height: 1.65; }
.guide-pagination { justify-content: space-between; margin-top: 1rem; }
.guide-pagination a { min-height: 2.2rem; }
@media (max-width: 610px) { .guide-grid { grid-template-columns: 1fr; } }