@charset "UTF-8";
/* The homepage frame is sized to its contents: native page scrolling continues
   normally over it. All learning UI inside comes from pinyin.css unchanged. */
.show-visual.live-pinyin{display:block;position:relative;width:100%;max-width:1120px;min-height:0;height:auto;aspect-ratio:auto;padding:0;overflow:hidden;border:1px solid #3c5060;border-radius:18px;background:#112738;box-shadow:0 18px 55px #03131d16}
html[data-theme="light"] .show-visual.live-pinyin{border-color:#ccd5dc;background:#f4f5f3}
.pinyin-tool-frame{display:block;width:100%;height:580px;border:0;visibility:hidden}
.live-pinyin.is-ready .pinyin-tool-frame{visibility:visible}
.pinyin-preview-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#b5c5d1;font-size:13px}
html[data-theme="light"] .pinyin-preview-loading{color:#536a7a}
.pinyin-preview-loading[hidden]{display:none}
.live-pinyin.is-unavailable .pinyin-tool-frame{display:none}
.live-pinyin.is-unavailable .pinyin-preview-loading{position:static;min-height:180px}
html[lang="zh-Hans"] .pinyin-preview-loading{font:300 18px/1.5 Yuanti,sans-serif}

/* This sheet is loaded a second time only inside the same-origin iframe.
   Do not override reading fonts, accent geometry, tone colours, cell contents,
   native family/tone controls or pagination. The actual tool owns them. */
html.pinyin-home-preview{overflow:hidden;scroll-behavior:auto;background:transparent}
.pinyin-home-preview body.studio{display:block;min-height:0;height:auto;overflow:hidden}
.pinyin-home-preview .site-header,.pinyin-home-preview .site-footer,.pinyin-home-preview .skip-link,.pinyin-home-preview .pinyin-landscape,.pinyin-home-preview .table-note{display:none}
.pinyin-home-preview .pinyin-workspace{flex:none;padding:12px 0}
.pinyin-home-preview .shell{width:calc(100% - 32px)}
.pinyin-home-preview .pinyin-controls{padding:0 0 12px}
.pinyin-home-preview .pinyin-heading{min-height:0;height:0;margin:0}
.pinyin-home-preview .pinyin-heading h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pinyin-home-preview .finals{margin-bottom:12px}
.pinyin-home-preview .table-toolbar{margin-bottom:4px}
.pinyin-home-preview .table-toolbar .display-settings{position:static;transform:none;margin-inline-start:auto}
.pinyin-home-preview .columns>.col>.overlay-card{display:none;grid-row:1!important}
/* Complete original groups: b/p/m/f for a and o, g/k/h for e and u,
   j/q/x for i and ü. Empty/unattested cells remain exactly as rendered. */
.pinyin-home-preview body:is([data-family="a"],[data-family="o"]) .overlay-card:is([data-slot="L1"],[data-slot="R1"]),
.pinyin-home-preview body:is([data-family="e"],[data-family="u"]) .overlay-card:is([data-slot="L3"],[data-slot="R3"]),
.pinyin-home-preview body:is([data-family="i"],[data-family="ü"]) .overlay-card:is([data-slot="L4"],[data-slot="R4"]){display:block}
.pinyin-home-preview .overlay-card thead{display:table-header-group}
@media(max-width:860px){
 .pinyin-home-preview body[data-view="both"] .columns>.col>.overlay-card{grid-row:auto!important;grid-column:1!important}
 .pinyin-home-preview body[data-view="both"][data-locale="ar"] .col-right>.overlay-card{order:-1}
}
@media(max-width:600px){
 .show-visual.live-pinyin{border-radius:12px}
 .pinyin-home-preview .shell{width:calc(100% - 16px)}
 .pinyin-home-preview .pinyin-workspace{padding:8px 0 12px}
 .pinyin-home-preview .pinyin-controls{padding-bottom:6px}
 .pinyin-home-preview .finals{margin-bottom:12px}
 .pinyin-home-preview .table-toolbar{margin-bottom:4px}
}

/* Brand-blue surfaces for the homepage embed; real tone categories stay distinct. */
html.pinyin-home-preview[data-theme=dark] .pinyin-page{--page:#243b50;--surface:#2c455b;--stroke:#4c6478;--text:#f1f5f8;--muted:#c1d1de;--head:#425a6e;--head-text:#f1f5f8;--control:#2c455b;--hover:#3b566d;--tone-one:#293f53}