/* All illustration is CSS around an unchanged, canonical text glyph. */
#screen-hanzi { --vh-teal: #136d68; --vh-amber: #9a5a0b; }
#vh-content { width: 100%; }
.vh-lab { max-width: 960px; margin: auto; padding: 16px 16px 36px; }
.vh-lab h2 { margin: 10px 0; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; }
.vh-lab h3 { margin: 12px 0 8px; }
.vh-lab p { line-height: 1.6; }
.vh-lab small { display: block; color: var(--text-2); line-height: 1.5; }
.vh-lab button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.vh-lab button:hover:not(:disabled) { border-color: var(--vh-teal); }
.vh-lab button:focus-visible, .vh-lab textarea:focus-visible { outline: 3px solid var(--vh-amber); outline-offset: 3px; }
.vh-lab button:disabled { opacity: .45; cursor: default; }
.vh-lab .vh-primary { background: var(--vh-teal); color: #fff; border-color: transparent; font-weight: 650; }
.vh-eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .13em; color: var(--vh-teal); }
.vh-intro { padding: 8px 0 24px; }
.vh-intro > small { margin-top: 12px; }
.vh-family { margin: 0 0 28px; }
.vh-family > h3 { margin: 0 0 10px; color: var(--text-2); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.vh-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vh-catalog > button { padding: 0; overflow: hidden; text-align: left; }
.vh-card-info { display: grid; gap: 4px; padding: 14px; }
.vh-card-info > span:not(.vh-badge) { color: var(--text-2); font-size: .9rem; }
.vh-badge { width: fit-content; border: 1px solid var(--line); border-radius: 30px; padding: 3px 9px; font-size: .72rem; }
.vh-note { color: var(--text-2); font-size: .85rem; }
.vh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.vh-study { display: grid; gap: 24px; }
.vh-story { align-self: center; }
.vh-shape-note { border-left: 3px solid var(--vh-amber); padding-left: 14px; }
.vh-scene { position: relative; display: grid; place-items: center; height: 300px; isolation: isolate; overflow: hidden; border-radius: 18px; background: #e9f3ed; color: #164e4a; }
.vh-glyph { position: relative; z-index: 1; font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif CJK SC', serif; font-size: 180px; font-weight: 400; line-height: 1; }
.vh-scenery { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s; }
.vh-memory-art { width: 82%; height: 82%; overflow: visible; fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.vh-walker { background: #e8f7f1; }
.vh-walker .vh-figure-line { stroke: #ed806b; opacity: .55; }
.vh-walker .vh-head-fill { fill: #f5b47f; stroke: #c66755; opacity: .82; }
.vh-walker .vh-context-line { stroke: #c69a5c; stroke-width: 6; stroke-dasharray: 7 9; opacity: .58; }
.vh-wide { background: #edf2ff; }
.vh-wide .vh-figure-line { stroke: #4e82c0; opacity: .48; }
.vh-wide .vh-head-fill { fill: #f5b47f; stroke: #c66755; opacity: .82; }
.vh-wide .vh-context-line { stroke: #e08c4e; stroke-width: 7; stroke-dasharray: 7 9; opacity: .62; }
.vh-spark { background: #fff0e4; }
.vh-spark .vh-figure-line { stroke: #7770c5; opacity: .42; }
.vh-spark .vh-extra-zone { fill: #ffd0bf; stroke: none; opacity: .7; }
.vh-spark .vh-accent-line { stroke: #e96559; stroke-width: 7; opacity: .82; }
.vh-sky { background: linear-gradient(180deg, #80c9e8 0%, #c8ebf7 70%, #edf8f8 70%); }
.vh-sky .vh-cloud { fill: #fff; stroke: #fff; stroke-width: 3; opacity: .82; }
.vh-sky .vh-cloud-small { opacity: .62; }
.vh-mouth { background: #fff1ed; }
.vh-mouth .vh-mouth-frame { fill: #ffd8c8; stroke: #d86554; opacity: .72; }
.vh-mouth .vh-mouth-wave { stroke: #bf4d4e; stroke-width: 7; opacity: .7; }
.vh-fire { background: #fff1d9; }
.vh-fire .vh-fire-flame { fill: #ff9b42; stroke: #e25d38; opacity: .72; }
.vh-fire .vh-fire-inner { fill: #ffe28a; stroke: none; opacity: .9; }
.vh-tree { background: #e8f5dc; }
.vh-tree .vh-tree-canopy { fill: #87bd68; stroke: #4a8253; opacity: .68; }
.vh-tree .vh-tree-trunk { stroke: #9a633d; stroke-width: 11; opacity: .78; }
.vh-mountain { background: #eef0ff; }
.vh-mountain .vh-mountain-back { fill: #97a8d7; stroke: #667aaf; opacity: .62; }
.vh-mountain .vh-mountain-front { fill: #c3d2ef; stroke: #7188bc; opacity: .8; }
.vh-day { background: #fff8d9; }
.vh-day .vh-day-frame { fill: #ffe79a; stroke: #d79936; opacity: .68; }
.vh-day .vh-day-rail { stroke: #c47e28; stroke-width: 8; opacity: .72; }
.vh-moon { background: #e9edff; }
.vh-moon .vh-moon-crescent { fill: #a9b5ec; stroke: #6878bb; opacity: .76; }
.vh-moon .vh-moon-lines { stroke: #6577ba; stroke-width: 8; opacity: .68; }
.vh-water { background: #e0f4f4; }
.vh-water .vh-water-bank { stroke: #75bba8; stroke-width: 16; opacity: .34; }
.vh-water .vh-water-stream { stroke: #3b91b6; stroke-width: 12; opacity: .68; }
.vh-water .vh-water-side { stroke-width: 8; opacity: .56; }
.vh-rain { background: #e6f1fb; }
.vh-rain .vh-rain-frame { fill: #bed7ef; stroke: #668fb4; opacity: .62; }
.vh-rain .vh-rain-cloud { fill: #d7e7f5; stroke: #7197b9; opacity: .72; }
.vh-rain .vh-rain-lines { stroke: #438dbb; stroke-width: 8; opacity: .72; }
.vh-clues { position: absolute; z-index: 2; inset: auto 12px 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.vh-clues span { padding: 4px 8px; border: 1px solid rgba(19,109,104,.25); border-radius: 999px; background: rgba(255,255,255,.82); color: #315d59; font-size: .69rem; font-weight: 650; letter-spacing: .01em; }
.vh-stage-1 .vh-scenery { opacity: .18; }
.vh-stage-1 .vh-clues { opacity: .45; }
.vh-stage-2 { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.vh-stage-2 .vh-scenery, .vh-stage-2 .vh-clues { display: none; }
.vh-catalog .vh-scene { height: 200px; border-radius: 0; }
.vh-catalog .vh-glyph { font-size: 130px; }
.vh-catalog .vh-memory-art { width: 88%; height: 88%; stroke-width: 8; }
.vh-catalog .vh-clues { display: none; }
.vh-stages, .vh-actions, .vh-ratings { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.vh-stages { justify-content: center; }
.vh-stages button { padding: 8px 12px; font-size: .85rem; }
.vh-stages [aria-pressed='true'] { background: var(--vh-teal); color: #fff; }
.vh-mnemonic-label { display: block; font-size: .85rem; margin: 18px 0 6px; }
.vh-lab textarea { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--card); color: var(--text); font: inherit; resize: vertical; margin-bottom: 8px; }
.vh-panel { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.vh-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.vh-component-tile { display: grid; align-content: start; gap: 4px; min-height: 132px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); text-align: left; }
.vh-component-tile strong { font-size: .9rem; }
.vh-component-tile small { font-size: .75rem; }
.vh-component-glyph { font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif CJK SC', serif; font-size: 2rem; line-height: 1; color: var(--vh-teal); }
.vh-component-role { color: var(--text-2); font-size: .78rem; line-height: 1.35; }
.vh-component-static { cursor: default; }
.vh-components > small { margin-top: 12px; }
.vh-compose { display: grid; gap: 14px; max-width: 760px; margin: auto; padding: 4px 0 24px; }
.vh-compose-progress { min-height: 1.6em; margin: 0; color: var(--vh-teal); font-weight: 650; }
.vh-compose-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-compose-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.vh-compose-slot, .vh-compose-tile { display: grid; place-items: center; gap: 4px; min-width: 0; min-height: 64px; padding: 8px; }
.vh-compose-slot { flex: 0 0 76px; width: 76px; background: var(--bg); border-style: dashed; }
.vh-compose-slot.is-filled { border-style: solid; border-color: var(--vh-teal); }
.vh-compose-tile { min-height: 92px; }
.vh-compose-tile small { max-width: 100%; text-align: center; }
.vh-compose-tile.is-used { opacity: .45; }
.vh-compose-glyph { font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif CJK SC', serif; font-size: 2rem; line-height: 1; color: var(--vh-teal); }
.vh-compose-stroke { width: 42px; height: 42px; overflow: visible; fill: var(--vh-teal); }
.vh-compose-answer { margin: 0; color: var(--vh-teal); font-weight: 700; }
.vh-compose-answer [lang] { font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif CJK SC', serif; font-size: 2rem; vertical-align: middle; }
.vh-compose-cta { display: grid; gap: 8px; }
.vh-compose-cta p { margin: 0; }
.vh-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vh-compare button { display: grid; align-content: start; gap: 7px; padding: 12px 6px; }
.vh-compare [lang] { font-size: 46px; line-height: 1.3; }
.vh-compare strong { font-size: .8rem; }
.vh-compare small { font-size: .72rem; }
.vh-build { display: grid; gap: 8px; max-width: 260px; margin: 16px auto; padding: 12px; background: var(--bg); border: 1px dashed var(--vh-teal); border-radius: 16px; }
.vh-build button { text-transform: capitalize; }
.vh-piece { color: var(--vh-amber); font-size: 1.7rem; vertical-align: middle; }
.vh-feedback { min-height: 1.6em; color: var(--vh-teal); }
.vh-words { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-words button { display: grid; gap: 4px; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.vh-words [lang] { font-size: 1.35rem; }
.vh-bottom { margin-top: 24px; text-align: center; }
.vh-recall { max-width: 540px; margin: auto; text-align: center; }
.vh-recall .vh-actions, .vh-ratings { justify-content: center; }
.vh-answer { padding: 10px; margin-top: 16px; background: var(--card); border-radius: 14px; }
html[data-theme='dark'] #screen-hanzi { --vh-teal: #1f746e; --vh-amber: #e8ba62; }
html[data-theme='dark'] .vh-eyebrow, html[data-theme='dark'] .vh-feedback, html[data-theme='dark'] .vh-compose-progress, html[data-theme='dark'] .vh-compose-answer { color: #72cbc0; }
html[data-theme='dark'] .vh-clues span { background: rgba(16,17,20,.82); color: #9ed7d0; border-color: rgba(114,203,192,.3); }
@media (min-width: 700px) {
  .vh-lab { padding: 24px 28px 48px; }
  .vh-study { grid-template-columns: 1fr 1fr; }
  .vh-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vh-catalog .vh-scene { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .vh-scenery { transition: none; } }