:root{color-scheme:light;--bg:#f6f6f0;--surface:#fffefa;--surface-soft:#eeefe6;--ink:#27382d;--muted:#748073;--line:#dfe3d8;--accent:#425f4c;--accent-soft:#e8eee4;--accent-ink:#fffefa;--paper-shadow:0 5px 24px #29372a06;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default;opacity:.35}button,select,summary{touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}svg{width:20px;height:20px;display:block;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}p,h1,h2,h3,figure{margin:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;top:-80px;left:16px;z-index:30;background:var(--surface);padding:14px}.skip-link:focus{top:12px}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:650;letter-spacing:-.5px}.brand-seal{width:33px;height:35px;background:var(--accent);color:var(--accent-ink);border-radius:10px;display:grid;place-items:center;font-size:23px;font-family:serif}.site-header nav{display:flex;align-items:center;gap:17px}.quiet-button{min-height:42px;padding:9px 2px;font-size:13px;color:var(--muted);display:inline-flex;gap:10px;align-items:center}.quiet-button:hover{color:var(--ink)}#saved-count{min-width:20px;height:20px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:10px}.icon-button{width:40px;height:40px;padding:9px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-size:22px}.icon-button:hover{background:var(--accent-soft)}
.settings-menu{position:relative}.settings-menu>summary{display:flex;gap:8px;align-items:center;list-style:none;cursor:pointer;font-size:12px;color:var(--muted);min-height:42px;padding:9px 0}.settings-menu>summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;right:0;top:49px;z-index:20;width:290px;padding:23px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 12px 44px #0002}.panel-label,.eyebrow{font-size:10px;letter-spacing:1.3px;font-weight:600;color:var(--muted)}.setting-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-top:9px;font-size:13px}.setting-toggle span:first-child{font-family:serif;font-size:21px}.speed-label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;min-height:49px}.speed-label select{width:76px;border:1px solid var(--line);padding:8px;background:var(--surface);color:var(--ink);border-radius:9px}
.lesson-section{padding:30px 0 0}.lesson-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:23px}.lesson-title-group .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:9px}h1{font-size:clamp(23px,2.5vw,31px);font-weight:570;line-height:1.2;letter-spacing:-.8px}.scene-navigation{display:flex;gap:9px;align-items:center;flex-shrink:0}.scene-navigation select{width:170px;min-height:40px;padding:9px 30px 9px 12px;font-size:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;text-overflow:ellipsis}.learning-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px;align-items:start}.picture-column{min-width:0}.scene-figure{border:1px solid var(--line);border-radius:19px;background:var(--surface);overflow:hidden;box-shadow:var(--paper-shadow)}.picture-toolbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 13px 0 18px;gap:12px}.picture-toolbar>#scene-caption{font-size:12px;color:var(--muted)}.zoom-controls{display:flex;align-items:center;gap:1px}.zoom-controls button{min-width:36px;min-height:36px;border-radius:8px;font-size:20px;font-variant-numeric:tabular-nums}.zoom-controls button:hover{background:var(--surface-soft)}.zoom-controls #zoom-reset{font-size:10px;min-width:47px;color:var(--muted)}.scene-viewport{width:100%;max-height:660px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:var(--line) transparent;background:var(--surface-soft)}.scene-frame{position:relative;width:100%;aspect-ratio:4/3;flex:none;overflow:hidden;margin-inline:auto}.scene-art>img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;z-index:1;border-radius:50%;isolation:isolate}.hotspot-dot{display:block;width:13px;height:13px;background:#fffdf2eb;border:2px solid #fff;box-shadow:0 1px 5px #17271d55;border-radius:50%;transition:scale .15s}.hotspot:hover .hotspot-dot,.hotspot.active .hotspot-dot{background:var(--accent);scale:1.15}.hotspot.active{z-index:5}.hotspot.active .hotspot-dot{outline:5px solid #fff8}.hotspot-label{position:absolute;left:50%;bottom:39px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 11px;border:1px solid #ffffffa1;border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 3px 10px #0002;white-space:nowrap;pointer-events:none}.hotspot .han{font-size:15px;line-height:1.3;font-weight:600}.hotspot .pin{font-size:10px;line-height:1.2;color:var(--muted)}.scene-frame.labels-hidden .hotspot:not(.active) .hotspot-label{display:none}.scene-frame.labels-hidden .hotspot.active .pin{display:none}.scene-frame:not(.labels-hidden) .hotspot-label{padding:5px 7px;bottom:34px}.scene-frame:not(.labels-hidden) .hotspot .pin{display:none}.scene-figure figcaption{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:36px;padding:8px 16px;font-size:10px;color:var(--muted)}#scene-progress{white-space:nowrap;font-variant-numeric:tabular-nums}
.narrator{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 15px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.play-main{width:39px;height:39px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}.play-main svg{width:19px;height:19px;stroke:none}.narrator-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.narrator-copy strong{font-size:13px;font-weight:550;line-height:1.25}.narrator-copy span{font-size:10px;color:var(--muted)}.audio-time{margin-left:auto;white-space:nowrap;font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
.word-card{min-width:0;padding:18px 20px 10px;border:1px solid var(--line);border-radius:19px;background:var(--surface);box-shadow:var(--paper-shadow);position:sticky;top:22px}.word-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.word-card-top .icon-button{width:32px;height:32px;padding:7px;border:0;background:transparent;color:var(--muted)}.save-word[aria-pressed=true]{color:var(--accent)}.word-identity{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.word-core{min-width:0}.word-core h2{font-family:"PingFang SC","Noto Sans CJK SC",sans-serif;font-size:46px;line-height:1.3;font-weight:500;letter-spacing:1px;overflow-wrap:anywhere}.word-pinyin{font-size:15px;margin-top:4px;line-height:1.5;color:var(--accent)}.word-meaning{font-size:13px;line-height:1.5;margin-top:6px;color:var(--muted);overflow-wrap:anywhere}.pronounce-button{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;min-width:44px;min-height:44px;padding:8px 4px;color:var(--accent);border-radius:10px}.pronounce-button svg{width:21px;height:21px}.pronounce-button span{font-size:9px}.pronounce-button:hover{background:var(--accent-soft)}.explanation-button{width:100%;min-height:43px;background:var(--accent-soft);color:var(--accent);border-radius:10px;font-size:12px;font-weight:550;padding:10px}.explanation-button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.word-details{margin-top:14px}.word-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:12px;color:var(--muted)}.word-details>summary::-webkit-details-marker{display:none}.word-details>summary>span{font-size:20px;font-weight:300}.word-details[open]>summary>span{transform:rotate(45deg)}.detail-content{font-size:12px;line-height:1.9;color:var(--muted);padding:8px 0 16px}.detail-content strong{color:var(--ink);font-weight:550}.example{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}#example-zh{font-size:20px;line-height:1.6;color:var(--ink)}#example-pinyin{font-size:12px;line-height:1.8;color:var(--accent);margin:7px 0}#example-en{font-size:12px}.known-button{display:block;border:1px solid var(--line);border-radius:9px;min-height:40px;padding:9px 12px;margin-top:19px;font-size:11px}.known-button.is-known{background:var(--accent-soft);color:var(--accent)}.word-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:5px;padding-top:9px}.word-navigation .icon-button{border:0;width:40px;height:40px;background:none}.word-navigation>span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:1px}.lesson-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:0 3px;gap:20px}.lesson-bottom p{font-size:11px;color:var(--muted)}.lesson-bottom button{color:var(--accent);font-size:12px}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:27px 0 23px;margin-top:23px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.site-footer>span:last-child{font-size:8px;letter-spacing:1px}
 dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:23px;padding:27px;width:min(520px,calc(100% - 32px));max-height:88svh;overflow:auto;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#17261dc0;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:23px}.dialog-top .icon-button{border:0;background:var(--surface-soft)}.dialog-intro{font-size:13px;color:var(--muted);margin:9px 0 24px}dialog h2{font-size:25px;font-weight:550;line-height:1.35;letter-spacing:-.5px}.scene-dialog{width:min(900px,calc(100% - 40px))}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.scene-card{text-align:left;min-width:0;background:var(--surface-soft);border-radius:13px;padding:7px 7px 13px;border:1px solid transparent}.scene-card:hover,.scene-card.active{border-color:var(--accent)}.scene-card-image{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/3}.scene-card-image img{display:block;width:100%;height:100%;object-fit:cover}.card-badge{position:absolute;bottom:8px;left:8px;font-size:8px;letter-spacing:1px;background:var(--surface);padding:5px 7px;border-radius:6px}.scene-card h3{font-size:12px;line-height:1.5;font-weight:550;margin:10px 4px 4px}.card-number{display:none}.card-meta{font-size:9px;color:var(--muted);margin:0 4px}.card-progress{height:2px;background:var(--line);margin:11px 4px 0;border-radius:3px;overflow:hidden}.card-progress span{display:block;height:100%;background:var(--accent)}.quiz-number{font-size:11px;color:var(--muted);margin-bottom:17px}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.quiz-choice{border:1px solid var(--line);padding:20px 12px;border-radius:12px;font-size:25px;background:var(--surface-soft)}.quiz-choice span{display:block;font-size:12px;margin-top:7px;color:var(--muted)}.quiz-choice.correct{background:var(--accent-soft);border-color:var(--accent);opacity:1}.quiz-choice.incorrect{border-color:#b86e64;opacity:.75}.quiz-feedback{font-size:12px;color:var(--muted);line-height:1.8;min-height:45px;margin-bottom:20px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:11px 18px;border-radius:10px;font-size:12px}.primary-button{background:var(--accent);color:var(--accent-ink)}.secondary-button{border:1px solid var(--line);margin-top:10px}.quiz-results{text-align:center;padding:8px 5px 12px}.quiz-results .eyebrow{margin-bottom:15px}.result-score{font-size:70px;font-family:serif;color:var(--accent);margin-bottom:19px}.quiz-results p{font-size:13px;line-height:1.9;color:var(--muted);margin:17px 0 22px}.quiz-results button{display:flex;margin-inline:auto}.saved-row{display:flex;gap:12px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.saved-row>button:first-child{flex:1;text-align:left;display:grid;gap:5px;min-width:0}.saved-row strong{font-size:23px;font-weight:500}.saved-meaning{font-size:12px}.saved-detail{font-size:11px;color:var(--muted)}.saved-empty{margin:22px 0 12px;font-size:13px;line-height:1.9;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,14px);opacity:0;pointer-events:none;z-index:50;max-width:calc(100% - 32px);width:max-content;padding:13px 18px;background:var(--ink);color:var(--bg);border-radius:12px;font-size:12px;line-height:1.7;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:901px) and (max-height:850px){.shell{max-width:1080px}.site-header{height:64px}.lesson-section{padding-top:22px}.lesson-heading{margin-bottom:18px}.learning-layout{grid-template-columns:minmax(0,1fr)260px;gap:22px}.scene-viewport{max-height:560px}}
@media(max-width:900px){.shell{width:calc(100% - 40px);max-width:680px}.site-header{height:66px}.lesson-section{padding-top:24px}.lesson-heading{align-items:start;margin-bottom:18px;gap:14px}.lesson-title-group .eyebrow{display:none}h1{font-size:25px;line-height:1.25;max-width:410px}.learning-layout{grid-template-columns:minmax(0,1fr);gap:15px}.word-card{position:static;padding:13px 19px 7px}.word-card-top{margin-bottom:0}.word-identity{margin-bottom:12px}.word-core h2{font-size:35px}.word-pinyin{margin-top:0;font-size:14px}.word-meaning{margin-top:2px;font-size:13px}.word-card .panel-label{font-size:9px}.word-details{margin-top:7px}.word-navigation{padding-top:5px}.scene-viewport{max-height:66svh}.scene-navigation select{width:150px}.scene-navigation>.icon-button{display:none}.narrator{margin-top:10px;padding:9px 13px}.lesson-bottom{margin-top:16px}.site-footer{margin-top:15px;padding:19px 0}}
@media(max-width:520px){.shell{width:calc(100% - 24px)}.site-header{height:58px}.brand{font-size:18px;gap:8px}.brand-seal{width:28px;height:30px;font-size:21px;border-radius:8px}.site-header nav{gap:15px}.quiet-button{font-size:12px}.settings-label{display:none}.settings-panel{right:-1px;max-width:calc(100vw - 24px);width:282px}.lesson-section{padding-top:18px}.lesson-heading{display:block;margin-bottom:13px}.lesson-title-group{padding-inline:3px}h1{font-size:23px;letter-spacing:-.5px}.scene-navigation{margin-top:11px}.scene-navigation select{width:100%;min-height:35px;font-size:11px;border-radius:9px;background:transparent;color:var(--muted)}.scene-figure{border-radius:15px}.picture-toolbar{height:39px;padding:0 6px 0 12px}.picture-toolbar>#scene-caption{font-size:10px}.zoom-controls button{min-height:35px;min-width:35px;font-size:19px}.zoom-controls #zoom-reset{font-size:9px;min-width:43px}.scene-figure figcaption{padding:8px 11px;font-size:9px;gap:9px;min-height:32px}.hotspot-label{bottom:36px;padding:5px 9px}.hotspot .han{font-size:14px}.hotspot-dot{width:12px;height:12px}.narrator{border-radius:12px;gap:10px}.play-main{width:35px;height:35px}.narrator-copy strong{font-size:12px}.narrator-copy span{font-size:9px}.audio-time{font-size:9px}.learning-layout{gap:12px}.word-card{padding:10px 15px 5px;border-radius:15px}.word-card-top{margin-bottom:-5px}.word-core h2{font-size:32px;line-height:1.2}.word-identity{margin-bottom:11px}.pronounce-button{flex-direction:row;gap:6px;font-size:10px}.pronounce-button span{font-size:10px}.explanation-button{min-height:39px;font-size:11px}.word-details>summary{min-height:38px;font-size:11px}.word-navigation{margin-top:2px;padding-top:2px}.word-navigation .icon-button{height:36px;width:40px}.lesson-bottom{margin-top:11px;gap:9px}.lesson-bottom p{font-size:9px}.lesson-bottom button{font-size:11px}.site-footer{font-size:9px;margin-top:11px}.scene-grid{grid-template-columns:1fr 1fr;gap:10px}.scene-dialog{padding:20px;width:calc(100% - 24px)}.scene-card h3{font-size:11px}.card-meta{font-size:8px}.scene-card{padding:5px 5px 10px}.dialog-top{margin-bottom:18px}dialog{padding:23px 20px}dialog h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

:root[data-theme="night"]{color-scheme:dark}.hotspot-low-label .hotspot-label,.scene-frame:not(.labels-hidden) .hotspot-low-label .hotspot-label{bottom:auto;top:38px}.theme-switcher{margin-top:15px;padding-top:17px;border-top:1px solid var(--line)}.theme-label{display:flex;align-items:center;justify-content:space-between;gap:12px}.theme-label>a{font-size:11px;color:var(--accent)}.theme-option{font-size:11px}
@media(max-width:520px){.lesson-title-group h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.scene-navigation{margin-top:0}.scene-navigation select{font-size:21px;font-weight:550;letter-spacing:-.5px;min-height:38px;padding:3px 25px 3px 3px;border:0;color:var(--ink)}.lesson-section{padding-top:14px}.picture-toolbar{height:44px}.zoom-controls button{min-width:40px;min-height:40px}.zoom-controls #zoom-reset{min-width:45px}.explanation-button{min-height:44px}.word-navigation .icon-button{height:44px}.hotspot-low-label .hotspot-label,.scene-frame:not(.labels-hidden) .hotspot-low-label .hotspot-label{top:36px}}

@media(min-width:901px) and (max-height:1000px){.shell{max-width:min(1180px,calc((100svh - 350px)*1.3333 + 296px))}.lesson-title-group .eyebrow{display:none}}

/* The scene stays fixed; only isolated objects animate above it. */
.scene-art{position:absolute;inset:0;isolation:isolate}
.scene-art>img{position:absolute;inset:0}
.scene-art>.hotspots{z-index:3}
.scene-frame[data-motion="on"] .hotspot.active .hotspot-dot{animation:word-arrival .8s ease-out 1}
.setting-toggle:disabled{opacity:.6;cursor:default}
@keyframes word-arrival{0%{box-shadow:0 0 0 0 #fff9}65%{box-shadow:0 0 0 12px #fff0}100%{box-shadow:0 1px 5px #17271d55}}
@media(prefers-reduced-motion:reduce){.scene-art,.scene-frame[data-motion="on"] .scene-art,.scene-frame[data-motion="on"] .hotspot.active .hotspot-dot{animation:none;transform:none;transition:none;will-change:auto}}

/* Pronunciation guidance lives in an optional dialog, keeping the learning
   picture, word card and player inside their existing mobile height budget. */
.pinyin-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: 88vh;
  max-height: min(88dvh, 860px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
}
.pinyin-dialog .dialog-top {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 13px;
}
.pinyin-dialog .dialog-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
}
.pinyin-dialog h2 { margin-top: 5px; }
.pinyin-dialog h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.pinyin-intro,
.pinyin-letter-section > p,
.pinyin-tone-note,
.pinyin-neutral-example p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.pinyin-spelling,
.pinyin-tone-symbol,
.setting-toggle[data-pinyin-help] .pinyin-help-symbol {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  letter-spacing: 0;
}
.pinyin-current {
  margin-block: 19px 22px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.pinyin-current-word {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 10px;
}
#pinyin-current-hanzi {
  font-size: 29px;
  font-weight: 600;
  line-height: 1.3;
}
#pinyin-current-spelling {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pinyin-current-meaning {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.pinyin-listen-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin-top: 13px;
  padding: 9px 14px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.pinyin-tone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pinyin-tone-grid > li {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.pinyin-tone-symbol {
  display: block;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}
.pinyin-tone-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.pinyin-tone-grid p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pinyin-tone-note { margin-top: 12px; }
.pinyin-letter-section { margin-top: 21px; }
.pinyin-letter-section > p { margin-top: 8px; }
.pinyin-neutral-example {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  border-radius: 0 9px 9px 0;
  background: var(--surface-soft);
}
.pinyin-neutral-example > strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}
.pinyin-neutral-example p { margin-top: 4px; }
.detail-content > .pinyin-help-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 600px) {
  .pinyin-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    padding: 17px;
  }
  .pinyin-dialog .dialog-top { gap: 10px; }
  .pinyin-dialog h2 { font-size: 23px; }
  .pinyin-current { padding: 13px; }
  .pinyin-tone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pinyin-tone-neutral { grid-column: 1 / -1; }
  .pinyin-listen-current { width: 100%; }
}