@font-face{font-family:PhoneticArabic;src:url('/assets/fonts/ScheherazadeNew-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
.pinyin-page{
  --page:#112738;--surface:#172f42;--stroke:#3c5060;--text:#f0f4f7;--muted:#b5c5d1;
  --head:#39434b;--head-text:#f2f4f6;--control:#1c3548;--hover:#29485d;--selected:#f19a4f;
  --tone-one:#202b35;--tone-two:#1c344b;--tone-three:#253b33;--tone-four:#3b2c32;
  --tone-two-head:#35516a;--tone-three-head:#42584b;--tone-four-head:#59434b;
  --field:var(--tone-one);--table-head:var(--head);--latin-size:22px;--arabic-size:29px;--cell-height:58px;--stub:70px;
  background:var(--page);color:var(--text);color-scheme:dark;
}
html[data-theme="light"] .pinyin-page{
  --page:#f4f5f3;--surface:#fff;--stroke:#ccd5dc;--text:#233c50;--muted:#536a7a;
  --head:#d5dadd;--head-text:#344450;--control:#e9eef1;--hover:#e0e8ed;--selected:#aa5010;
  --tone-one:#eaecee;--tone-two:#e7eff8;--tone-three:#eaf2e7;--tone-four:#f7eae7;
  --tone-two-head:#cedeee;--tone-three-head:#d2e0cd;--tone-four-head:#e9d1cc;color-scheme:light;
}
.pinyin-page[data-tone="2"]{--field:var(--tone-two);--table-head:var(--tone-two-head)}
.pinyin-page[data-tone="3"]{--field:var(--tone-three);--table-head:var(--tone-three-head)}
.pinyin-page[data-tone="4"]{--field:var(--tone-four);--table-head:var(--tone-four-head)}
.pinyin-page .site-header{position:relative;background:var(--page);border-bottom:1px solid var(--stroke)}
.pinyin-page .header-nav a[aria-current="page"]{position:relative}
.pinyin-page .header-nav a[aria-current="page"]::after{content:'';position:absolute;inset-inline:0;bottom:-17px;height:2px;background:var(--orange);border-radius:2px}
.pinyin-workspace{background:radial-gradient(ellipse at 50% 0%,#36556c16,transparent 55%);overflow:clip}
.pinyin-controls{padding-block:34px 22px;text-align:center}
.pinyin-heading{position:relative;max-width:950px;margin:0 auto 25px;min-height:58px;display:flex;align-items:center;justify-content:center;padding-inline:50px}
.pinyin-heading h1{font-size:36px;font-weight:600;line-height:1.6;letter-spacing:-.8px}
.display-settings,.icon-button{display:grid;place-items:center;width:44px;height:44px;flex:none;background:transparent;border:0;border-radius:50%;color:var(--muted);padding:9px}
.display-settings{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%)}
.display-settings:hover,.icon-button:hover{background:var(--control);color:var(--text)}
.display-settings .icon{width:23px;height:23px}
.finals{display:flex;justify-content:center;gap:16px;margin-bottom:27px}
.final{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--stroke);border-radius:50%;background:var(--control);color:var(--text);font:400 31px/1 Century,'Century Gothic',sans-serif;padding:0 0 3px;transition:background-color .16s,border-color .16s}
.final:hover{background:var(--hover);border-color:var(--muted)}
.final[aria-pressed="true"],.final[aria-pressed="true"]:hover{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 4px 18px #e67e2219}
.tone-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:950px;margin-inline:auto}
.tone-icon{display:flex;justify-content:center;align-items:center;gap:13px;padding:12px 16px;height:124px;border:1px solid var(--stroke);border-radius:12px;background:var(--surface);color:var(--text);transition:background-color .18s,border-color .18s;overflow:hidden}
.tone-icon img{width:64px;height:98px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 4px #0002);pointer-events:none}
.tone-caption{display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;pointer-events:none}
.written-tone{width:58px;height:38px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:3px}
.tone-name{font-size:12px;line-height:1.9}.tone-name-short{display:none}.tone-direction{font-size:10px;line-height:1.9;color:var(--muted)}
.tone-icon:hover{background:var(--hover)}
.tone-icon[aria-pressed="true"]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange);background:var(--field)}
.tone-icon[aria-pressed="true"] .written-tone{color:var(--selected)}
.table-toolbar{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.table-hint{font-size:11px;color:var(--muted);margin-inline-start:auto}
.column-pagination{display:flex;align-items:center;gap:7px;direction:ltr;min-height:42px}
.column-pagination:empty{display:none}.page-count{min-width:78px;text-align:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.page-arrow{width:38px;height:38px;display:grid;place-items:center;padding:8px;background:transparent;border:1px solid var(--stroke);border-radius:50%;color:var(--text)}
.page-arrow svg{width:17px;height:17px}.page-arrow:disabled{opacity:.28;cursor:default}.page-arrow:not(:disabled):hover{background:var(--head)}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px;direction:ltr;align-items:stretch}
.col{display:contents}.overlay-card{min-width:0;border:1px solid var(--stroke);border-radius:12px;background:var(--field);padding:11px;cursor:zoom-in;outline-offset:4px;transition:background-color .18s,border-color .16s}
.overlay-card:hover{border-color:var(--muted)}.overlay-card:focus-visible{outline:2px solid var(--orange)}
.pinyin-page[data-view="latin"] .col-right,.pinyin-page[data-view="arabic"] .col-left{display:none}
.pinyin-page:not([data-view="both"]) .columns{grid-template-columns:minmax(0,1fr);max-width:1080px;margin-inline:auto}
.pinyin-grid{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
.pinyin-grid-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px;font:400 var(--latin-size)/1.25 Century,'Century Gothic',sans-serif;direction:ltr;color:var(--text)}
.pinyin-grid-table th,.pinyin-grid-table td{height:var(--cell-height);text-align:center;font-weight:400;padding:7px 4px;border-radius:5px;white-space:nowrap;vertical-align:middle}
.pinyin-grid-table td{background:transparent}
.pinyin-grid-table thead th,.pinyin-grid-table tbody th.stub{background:var(--table-head);color:var(--head-text)}
.pinyin-grid-table thead th{height:54px;font-size:20px}
.pinyin-grid-table thead th.stub{background:transparent}
.pinyin-grid-table .stub{width:var(--stub)}
.pinyin-grid-table tbody th.stub{font-size:23px}
.overlay-card:not([data-first="true"]) thead{display:none}
.pinyin-grid-table[dir="rtl"]{direction:rtl;font-family:PhoneticArabic,serif;font-size:var(--arabic-size)}
.pinyin-grid-table[dir="rtl"] thead th{font-size:25px}
.pinyin-grid-table[dir="rtl"] tbody th.stub{font-size:29px}
.phonetic-reading{display:inline-block;line-height:1.65;vertical-align:middle}
.written-syllable{display:inline-flex;direction:ltr;white-space:nowrap;line-height:1.25}
.written-vowel{position:relative;display:inline-block}
/* Keep the approved third tone; shorten tones 1/2/4 without shifting their centers. */
.syllable-accent{position:absolute;width:.46em;height:auto;left:50%;transform:translateX(-50%);top:.006em;fill:none;stroke:currentColor;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.syllable-accent[data-tone="1"]{top:.225em}.syllable-accent[data-tone="3"]{width:.55em;top:.07em}
.written-vowel.has-umlaut .syllable-accent{margin-top:-.23em}
.tone-number{font:400 .6em/1 Century,sans-serif;vertical-align:super;margin-inline-start:3px;position:relative;top:-.35em}
.table-status{font-size:13px;text-align:center;padding-block:18px;color:var(--muted)}.table-status:empty{display:none}
.pinyin-landscape{height:110px;margin-top:30px;background:linear-gradient(var(--page),transparent),url('/assets/studio/mountains.webp') center 58%/cover;opacity:.22;mix-blend-mode:luminosity;mask-image:linear-gradient(transparent,#000)}
.pinyin-page .site-footer{border-top:1px solid var(--stroke)}

/* Native dialogs supply modal semantics, focus management and Escape. */
dialog{color:var(--text);background:var(--surface);border:1px solid var(--stroke);border-radius:16px;padding:24px;box-shadow:0 22px 80px #0005;max-height:calc(100dvh - 32px);overflow:auto}
dialog::backdrop{background:#061521b8;backdrop-filter:blur(4px)}
body:has(dialog[open]){overflow:hidden}
.settings-dialog{width:min(420px,calc(100vw - 30px))}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}.dialog-heading h2{font-size:19px;font-weight:500}
.display-form{display:grid;gap:24px}.display-form fieldset{border:0;padding:0;margin:0;min-width:0}.display-form legend{font-size:13px;margin-bottom:10px}
.setting-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.setting-options label{position:relative;cursor:pointer}.setting-options input{position:absolute;opacity:0;width:1px;height:1px}
.setting-options span{display:grid;place-items:center;min-height:44px;border:1px solid var(--stroke);border-radius:8px;font-size:12px;color:var(--muted)}
.setting-options span[lang="zh-Latn"]{font-family:Century,sans-serif;font-size:15px}
.setting-options input:checked+span{background:var(--head);color:var(--head-text);border-color:var(--muted)}
.setting-options input:focus-visible+span{outline:2px solid var(--orange);outline-offset:3px}
.setting-help{font-size:10px;line-height:1.9;color:var(--muted);margin-top:9px}
.zoom-dialog{width:min(1100px,calc(100vw - 32px));background:var(--field);padding:20px 25px 26px}
.zoom-heading{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:8px;gap:12px}
.zoom-close{margin-inline-start:auto}.zoom-content .pinyin-grid-table{--latin-size:29px;--arabic-size:35px;--cell-height:66px;--stub:clamp(72px,9vw,104px)}.zoom-content .pinyin-grid-table thead{display:table-header-group}
.zoom-content .pinyin-grid-table tbody th.stub{font-size:var(--latin-size)}
.zoom-content .pinyin-grid-table[dir="rtl"] tbody th.stub{font-size:var(--arabic-size)}
@media(max-width:1100px){.pinyin-page{--latin-size:20px;--arabic-size:27px;--stub:64px}.columns{gap:18px}.overlay-card{padding:9px}.tone-icon{gap:8px;padding-inline:10px}.tone-icon img{width:55px}.tone-name{font-size:11px}.pinyin-grid-table tbody th.stub{font-size:22px}.pinyin-grid-table[dir="rtl"] tbody th.stub{font-size:27px}}
@media(max-width:980px){.pinyin-page .header-nav a[aria-current="page"]::after{display:none}}
@media(max-width:860px){
  .columns{grid-template-columns:minmax(0,1fr)}
  .pinyin-controls{padding-top:26px}.pinyin-heading{margin-bottom:20px}.pinyin-heading h1{font-size:31px}
  .tone-choices{gap:10px}.tone-icon{height:110px;padding:8px;gap:5px}.tone-icon img{width:47px;height:82px}.written-tone{width:42px;height:32px}.tone-name{font-size:10px}.tone-direction{font-size:8px}
  .table-hint{display:none}.table-toolbar{justify-content:center;margin-bottom:10px}
}
@media(max-width:600px){
  .pinyin-page{--latin-size:19px;--arabic-size:25px;--stub:54px;--cell-height:54px}
  .pinyin-controls{padding-block:22px 16px}.pinyin-heading{padding-inline:40px;min-height:50px;margin-bottom:20px}.pinyin-heading h1{font-size:28px}.display-settings{width:40px;height:40px}.display-settings .icon{width:21px;height:21px}
  .finals{gap:10px;margin-bottom:22px}.final{width:46px;height:46px;font-size:27px}
  .tone-choices{gap:8px}.tone-icon{height:130px;flex-direction:column;padding:8px 3px;gap:2px;border-radius:10px}.tone-icon img{height:63px;width:49px}.tone-caption{gap:0}.written-tone{width:34px;height:24px;margin:0}.tone-name{font-size:11px}.tone-direction,.tone-name-full{display:none}.tone-name-short{display:inline}
  .table-workspace{width:calc(100% - 24px)}.columns{gap:14px}.overlay-card{padding:7px;border-radius:10px}.pinyin-grid-table{border-spacing:2px}.pinyin-grid-table th,.pinyin-grid-table td{padding:6px 3px}.pinyin-grid-table thead th{font-size:18px;height:50px}.pinyin-grid-table tbody th.stub{font-size:21px}.pinyin-grid-table[dir="rtl"] thead th{font-size:23px}.pinyin-grid-table[dir="rtl"] tbody th.stub{font-size:25px}
  .zoom-dialog{padding:12px;width:calc(100vw - 20px)}.zoom-content .pinyin-grid-table{--latin-size:21px;--arabic-size:27px;--cell-height:56px;--stub:58px}.settings-dialog{padding:18px}.pinyin-landscape{height:80px;margin-top:20px}
}
@media(max-width:360px){.pinyin-heading h1{font-size:25px}.pinyin-heading{padding-inline:35px}.finals{gap:6px}.final{width:44px;height:44px;font-size:25px}.pinyin-controls{width:calc(100% - 24px)}.tone-choices{gap:5px}.tone-name{font-size:10px}.tone-icon{height:124px}}
@media(prefers-reduced-motion:reduce){.final,.tone-icon,.overlay-card{transition:none}}

/* Recordings are fetched only after a deliberate activation. */
.header-expand{display:block;width:100%;margin:0;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:zoom-in;touch-action:manipulation}
.syllable-play{display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(var(--cell-height) - 14px);margin:0;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.syllable-play:hover,.syllable-play.is-playing{background:var(--table-head)}
.syllable-play.is-playing{box-shadow:inset 0 -2px var(--selected)}
.syllable-play.is-loading{box-shadow:inset 0 -1px var(--muted)}
.syllable-play:focus-visible,.header-expand:focus-visible{outline:2px solid var(--selected);outline-offset:1px}
.recording-unavailable{cursor:default;opacity:.65}
.pinyin-grid-table td[data-pinyin]{cursor:default}
.audio-feedback{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;background:var(--surface);color:var(--text);border:1px solid var(--stroke);border-radius:10px;font-size:12px;line-height:1.9;z-index:10;box-shadow:0 5px 25px #0002}
.audio-feedback:empty{display:none}
.table-note{display:flex;align-items:baseline;gap:8px;margin:22px 0 0;color:var(--muted);font-size:11px;line-height:2;text-align:start}
.table-note-marker{flex:none;font-size:14px}

/* Chinese interface copy uses the approved light Yuanti face. Phonetic cells
   keep Century Gothic and Scheherazade New independently of the UI locale. */
.pinyin-page[data-locale="zh"]{font-weight:300}
.pinyin-page[data-locale="zh"] .pinyin-heading h1{font-weight:300;letter-spacing:.03em}
.pinyin-page[data-locale="zh"] .tone-name{font-size:18px;line-height:1.5}
.pinyin-page[data-locale="zh"] .tone-direction{font-size:14px;line-height:1.5}
.pinyin-page[data-locale="zh"] .table-hint,.pinyin-page[data-locale="zh"] .page-count,.pinyin-page[data-locale="zh"] .table-status{font-size:16px}
.pinyin-page[data-locale="zh"] .table-note,.pinyin-page[data-locale="zh"] .setting-help{font-size:14px;line-height:1.8}
.pinyin-page[data-locale="zh"] .dialog-heading h2{font-size:23px;font-weight:300}
.pinyin-page[data-locale="zh"] .display-form legend{font-size:18px}
.pinyin-page[data-locale="zh"] .setting-options span,.pinyin-page[data-locale="zh"] .audio-feedback{font-size:16px}
@media(max-width:860px){.pinyin-page[data-locale="zh"] .tone-name{font-size:16px}.pinyin-page[data-locale="zh"] .tone-direction{font-size:12px}}

/* The outgoing table stays visible while the live table slides in. This
   lightweight, inert overlay never reloads a page or fades through blank. */
.language-table-clip{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.language-table-outgoing{direction:ltr;pointer-events:none}