.converterEditor,.converterEditor.hasRunningDocument{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"input outputs" "document document";grid-template-rows:auto auto;align-items:start}
.converterEditor.isExpanded{grid-template-columns:minmax(0,1fr);grid-template-areas:"input" "outputs" "document"}
.converterInputField,.converterOutputHost{min-width:0;max-width:100%}.converterOutputHost{grid-area:outputs}
.converterOutputs{display:block}.converterContinuousOutput,#converterInput,.runningDocumentPane .runningDocumentContent{box-sizing:border-box;height:16rem;max-height:90vh;max-height:90dvh;min-height:0;overflow:auto;resize:vertical}
.converterContinuousOutput{border:1px solid var(--supplemental-line);border-radius:.35rem;padding:.9rem;background:white;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.converterContinuousOutput:focus-visible{outline:2px solid #47738c;outline-offset:2px}
.converterFieldLabel #converterInput,.converterContinuousOutput,.runningDocumentContent{font-size:var(--document-text-size,1.85rem)}
#converterInput{display:block;width:100%;padding:.65rem;border:1px solid #b9c8d3;border-radius:.4rem;background:white;color:var(--supplemental-ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
#converterInput:empty:before{content:attr(data-placeholder);color:#757575;pointer-events:none}
#converterInput:focus-visible{outline:2px solid #47738c;outline-offset:2px}
#converterInput ruby{ruby-position:over;font-family:ui-serif,"Noto Serif CJK TC","Noto Serif CJK SC",serif;line-height:2.35}
#converterInput rt{font-size:.48em;font-family:system-ui,sans-serif;font-weight:400;user-select:none}
#converterInput.system-ipa,#converterInput .system-ipa{font-family:"Charis IPA",Charis,serif}
#converterInput.system-canipa,#converterInput .system-canipa{font-family:"canIPA Mandarin Subset",canIPA,sans-serif}
#converterInput.system-guanhua-zimu,#converterInput .system-guanhua-zimu{font-family:"Guanhua Zimu",sans-serif}
#converterInput.system-musa,#converterInput .system-musa{font-family:"Kunming Musa Fangzi",Musa,sans-serif}
#converterInput.system-xiaoerjing,#converterInput .system-xiaoerjing{font-family:"Noto Naskh Arabic",sans-serif;direction:rtl;unicode-bidi:isolate}
#converterInput.system-modern-qieyun{font-family:ui-sans-serif,system-ui,sans-serif}
.converterContinuousOutput .converterRubyOutput{font-size:inherit;max-height:none;min-height:0;overflow:visible;border:0;background:none;padding:0;line-height:2.35}
.converterContinuousOutput .converterOutputSection{border:0;background:none;padding:0;margin:0 0 1rem}
.converterContinuousOutput .converterOutputHeading{font:600 .9rem/1.6 system-ui,sans-serif;margin:0 0 .5em;white-space:normal}
.converterContinuousOutput .runningDocumentSystemName{min-width:0;margin-inline-end:.7em}
.converterPronunciationTranscriptions{display:inline;white-space:pre-wrap}
:is(.converterPlainTranscription,.runningDocumentText,.converterPronunciationTranscriptions).system-ipa{font-family:"Charis IPA",Charis,serif}
:is(.converterPlainTranscription,.runningDocumentText,.converterPronunciationTranscriptions).system-canipa{font-family:"canIPA Mandarin Subset",canIPA,sans-serif}
:is(.converterPlainTranscription,.runningDocumentText,.converterPronunciationTranscriptions).system-guanhua-zimu{font-family:"Guanhua Zimu",sans-serif}
:is(.converterPlainTranscription,.runningDocumentText,.converterPronunciationTranscriptions).system-musa{font-family:"Kunming Musa Fangzi",Musa,sans-serif}
:is(.converterPlainTranscription,.runningDocumentText,.converterPronunciationTranscriptions).system-xiaoerjing{font-family:"Noto Naskh Arabic",sans-serif;direction:rtl;unicode-bidi:isolate}
:is(.converterContinuousOutput,.runningDocumentContent) p{margin:0;min-height:1em}.converterContinuousOutput li{margin:.3em 0}
.converterContinuousOutput .documentImportChunk{display:inline;font-size:inherit;max-height:none;min-height:0;padding:0;border:0;background:none;overflow:visible}
:is(.converterContinuousOutput,.runningDocumentContent) .converterOutputSection>div>p,:is(.converterContinuousOutput,.runningDocumentContent) .converterOutputSection>div>section{content-visibility:auto;contain-intrinsic-block-size:auto 1.5em;padding-block:0}
.unifiedMetricProbe{position:absolute;left:-20000px;top:0;width:900px;height:auto;visibility:hidden;pointer-events:none;contain:layout style paint}
.converterContinuousOutput [data-pronunciation-occurrence]{cursor:text}
.converterContinuousOutput.isReviewing [data-pronunciation-occurrence]{cursor:pointer}
.converterContinuousOutput .isSelectedPronunciation{background:#ffe39a;outline:2px solid #a96c00;outline-offset:1px}
.converterJobControls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.7rem 0}.converterJobControls progress{width:9rem;height:1rem}.converterJobControls [hidden]{display:none}
.converterAnnotate{background:var(--supplemental-action-red);color:white;border:2px solid var(--supplemental-action-red);border-radius:.35rem;font:600 1rem/1.5 system-ui;padding:.4rem .85rem;cursor:pointer}
.converterAnnotate:focus-visible{outline:3px solid #214f6b;outline-offset:3px}.converterAnnotate:disabled{background:#846268;border-color:#846268;cursor:default}
.converterImportHint{font-size:.86rem;margin:0}.converterImportButton,.converterCancel,.converterSectionSave,.converterSectionPrint{font:inherit;padding:.35rem .65rem}
.converterSectionToolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .6rem}.converterSectionToolbar>h2{font-size:1rem;margin:0 auto 0 0}
.converterSizeControl{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font:inherit}.converterSizeControl input{width:8rem}
.runningDocumentPane{grid-column:1/-1;margin-top:.8rem}.runningDocumentPane[hidden]{display:none}
.runningDocumentContent .converterRubyOutput{font-size:inherit}
:is(.converterContinuousOutput,.runningDocumentContent) .converterHanDisplay{font-size:inherit}
.converterPronunciationPanel{position:sticky;top:.3rem;z-index:12;max-height:30vh;overflow:auto;margin:0 0 .5rem;padding:.5rem}
.converterPronunciationPanel.hasSelectedPronunciation{border:2px solid #47738c;background:#f0f6fa;box-shadow:inset .2rem 0 #47738c}
.converterPronunciationEdit:disabled{opacity:.5;cursor:default}
.converterPronunciationDone{margin-inline-start:.35rem;padding:.4rem .65rem;border:2px solid var(--supplemental-action-red);border-radius:.35rem;background:var(--supplemental-action-red);color:white;font:600 .85rem/1.4 system-ui,sans-serif;cursor:pointer}
.converterPronunciationDone:hover:not(:disabled){background:#831929;border-color:#831929}
.converterPronunciationDone:focus-visible{outline:3px solid #214f6b;outline-offset:2px}
.converterPronunciationDetails{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.converterPronunciationKnown{display:flex;flex-wrap:wrap;gap:.35rem}.converterPronunciationCustomField{max-height:22vh;overflow:auto}
.converterPronunciationCustomField textarea{max-height:3rem}.converterPronunciationCustomField .converterKeyboardPanel{max-height:12vh;overflow:auto}
.converterRubyOutputFixed .converterRubyPreserved{font-family:ui-serif,"Noto Serif CJK TC","Noto Serif CJK SC",serif;font-size:1em;font-style:normal;line-height:1.1;vertical-align:baseline}
.converterContinuousOutput .documentImportChunk,.runningDocumentContent .documentImportChunk{display:inline-flex;flex-wrap:wrap;align-items:flex-start;vertical-align:bottom;max-width:100%}
.unifiedPrintFrame{position:fixed;left:-20000px;top:0;width:1000px;height:800px;border:0}
.runningDocumentExport .runningDocumentContent{height:auto;min-height:0;max-height:none;overflow:visible;font-size:var(--document-text-size,1.85rem)}
.runningDocumentExport .converterOutputSection{border:0;background:none;padding:0;margin:0 0 1rem}
.runningDocumentExport .converterRubyOutput{font-size:inherit;overflow:visible;max-height:none;min-height:0}
@media(max-width:899px){.converterEditor,.converterEditor.hasRunningDocument{grid-template-columns:minmax(0,1fr);grid-template-areas:"input" "outputs" "document"}.converterContinuousOutput{padding:.65rem}.converterPronunciationPanel{max-height:28dvh}.converterInputField.isSiteKeyboardMode #converterInput{min-height:4.5rem;font-size:var(--document-text-size,1.85rem)}.converterInputField.isSiteKeyboardMode .converterKeyboardPanel{max-height:calc(100vh - var(--document-keyboard-reserved,11rem));max-height:calc(100dvh - var(--document-keyboard-reserved,11rem));overflow-y:auto}}
.unifiedPrintSurface .runningDocumentToolbar{display:none!important}
.unifiedPrintSurface .runningDocumentContent,.unifiedPrintSurface .converterRubyOutput,.unifiedPrintSurface .converterOutputSection>div>*{height:auto!important;max-height:none!important;overflow:visible!important;contain:none!important;content-visibility:visible!important}
@media print{.runningDocumentExport .runningDocumentToolbar{display:none!important}.runningDocumentExport .runningDocumentContent,.runningDocumentExport .converterRubyOutput,.runningDocumentExport .converterOutputSection>div>*{height:auto!important;max-height:none!important;overflow:visible!important;contain:none!important;content-visibility:visible!important}.runningDocumentExport .isSelectedPronunciation{background:none;outline:none}.runningDocumentExport .converterOutputHeading{font-size:.9rem}}
.converterSelectorPanel{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:1rem;overflow-x:auto;max-width:100%;padding:.65rem .75rem;margin:.6rem 0}
.converterSelectorPanel .converterGrouping{flex:0 0 auto;align-self:start}.converterGrouping:disabled{opacity:.48}.converterGrouping:disabled span{cursor:default}
.converterSourceControls{display:flex;align-items:end;gap:.5rem;margin:.65rem 0 .45rem;min-width:0}.converterSourceControls .converterSelectLabel{flex:1;min-width:0}.converterSourceControls select{width:100%;min-width:0}.converterImportInfo{font-size:1.1rem;padding:.25rem .4rem;background:none;border:0;color:#214f6b;cursor:pointer}.converterImportHint[hidden]{display:none}
.converterOutputHost>.converterTargetField{margin:.65rem 0 .45rem}.converterInputMethod{margin-bottom:.4rem}
.converterInputHeading,.runningDocumentOutputToolbar,.runningDocumentPane .runningDocumentToolbar{box-sizing:border-box;display:flex;align-items:center;flex-wrap:nowrap;gap:.6rem;min-height:3.1rem;padding:.55rem .65rem;background:#e8eef2;border:1px solid #b9c8d3;border-radius:0;color:var(--supplemental-ink);font:500 .82rem/1.3 system-ui,sans-serif;margin:0}
.converterInputHeading>label,.runningDocumentOutputToolbar>h2,.runningDocumentPane .runningDocumentToolbar>h2{flex:0 0 auto;font:800 1.3rem/1.2 system-ui,sans-serif;padding:0;margin:0 auto 0 0;color:var(--supplemental-ink)}
.converterActions,.runningDocumentOutputToolbar,.runningDocumentPane .runningDocumentToolbar{white-space:nowrap;overflow-x:auto}.converterActions{flex-wrap:nowrap;align-items:center;gap:.4rem;max-width:100%;min-width:0}.converterActions button,.runningDocumentOutputToolbar button,.runningDocumentToolbar button{flex:0 0 auto;font:600 .8rem/1.3 system-ui,sans-serif;padding:.35rem .5rem}.converterActions .converterAnnotate{background:var(--supplemental-action-red);border:2px solid var(--supplemental-action-red);color:white}.converterActions .converterAnnotate:disabled{background:#846268;border-color:#846268}.converterActions .converterAnnotate:hover:not(:disabled){background:#831929;color:white}
.converterSizeControl{flex:0 0 auto;flex-wrap:nowrap;gap:.25rem;font-size:.78rem}.converterSizeControl input{position:static;opacity:1;width:8rem;height:2.25rem;margin:0;cursor:pointer}.runningDocumentStatus{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;color:#365e78;font-size:.8rem;white-space:normal}.runningDocumentStatus:has(>span:not(:empty)){margin:.35rem 0}.runningDocumentView[hidden]{display:none}.runningDocumentView{padding:0;border:0;background:none;color:#214f6b;font:inherit;text-decoration:underline;cursor:pointer}.converterJobControls{gap:.4rem;margin:.45rem 0}.converterJobControls:has(progress[hidden]){display:none}
.converterSourceControls .converterSelectLabel{flex:.5;min-width:10rem}.converterOutputHost>.converterTargetField{width:50%;min-width:10rem;max-width:100%}
@media(max-width:899px){.converterSourceControls .converterSelectLabel{flex:1;min-width:0}.converterOutputHost>.converterTargetField{width:100%;min-width:0}}
.converterContinuousOutput.isCompactTranscription .runningDocumentLine,.runningDocumentContent .isCompactTranscription .runningDocumentLine,.runningDocumentExport .isCompactTranscription .runningDocumentLine{display:grid;grid-template-columns:var(--document-label-width,10rem) minmax(0,1fr);gap:.65rem;align-items:baseline;white-space:normal}
.runningDocumentLine>.runningDocumentSystemName{color:#365e78;font:600 .86rem/1.5 system-ui,sans-serif;min-width:0;margin:0}.runningDocumentLine>.runningDocumentText{color:var(--supplemental-ink);min-width:0;overflow-wrap:anywhere}
.converterContinuousOutput.isMultilineTranscription .runningDocumentLine>.runningDocumentSystemName{display:block;margin-bottom:.4rem}.converterContinuousOutput.isMultilineTranscription .runningDocumentLine>.runningDocumentText{display:block;white-space:pre-wrap}
.converterAutoCandidate{position:relative;border:1px solid #bccbd6;border-radius:.35rem;padding:.65rem .8rem .65rem 2.3rem;margin:0 0 .7rem;line-height:1.6;content-visibility:auto;contain-intrinsic-block-size:auto 7rem}.converterAutoCandidate[data-selected=true]{border-color:#47738c;background:#f3f8fb}.converterCandidateControl{position:absolute;left:.65rem;top:.8rem}.converterCandidatePrimary .runningDocumentText,.converterCandidatePrimary .runningDocumentSystemName{font-weight:700}.converterCandidatePrimary+.converterCandidatePrimary{margin-top:0}.converterCandidateReference{margin-top:.8rem}.converterCandidateReference .runningDocumentText,.converterCandidateReference .runningDocumentSystemName{font-weight:400}
.converterCandidateAddition{margin:0 0 .8rem}.runningDocumentExport .converterAutoCandidate{content-visibility:visible;contain:none}
/* Small candidate inventories need real heights, not offscreen estimates,
   so auto-grow does not stop before the viewport cap with a clipped card. */
.converterContinuousOutput:not(:has(>.converterAutoCandidate:nth-child(9)))>.converterAutoCandidate{content-visibility:visible}
.runningDocumentOutputToolbar{align-items:flex-start}.runningDocumentAddGroup{display:flex;flex-direction:column;flex:0 0 auto;max-width:100%;gap:.2rem}.runningDocumentAddControls{display:flex;align-items:center;gap:.5rem}.runningDocumentIncludeLabel{display:inline-flex;align-items:center;gap:.25rem;font:500 .8rem/1.3 system-ui,sans-serif;cursor:pointer}.runningDocumentIncludeInput{position:static;opacity:1;width:1rem;height:1rem;margin:0;accent-color:#47738c}.runningDocumentIncludeLabel:has(:disabled){opacity:.5;cursor:default}.runningDocumentAddGroup>.runningDocumentStatus{max-width:18rem;margin:0}
@media(max-width:600px){.converterContinuousOutput.isCompactTranscription .runningDocumentLine,.runningDocumentContent .isCompactTranscription .runningDocumentLine,.runningDocumentExport .isCompactTranscription .runningDocumentLine{grid-template-columns:minmax(6rem,35%) minmax(0,1fr)}.converterInputHeading{gap:.4rem;padding:.45rem}.converterInputHeading>label,.runningDocumentOutputToolbar>h2,.runningDocumentPane .runningDocumentToolbar>h2{font-size:1.18rem}.converterActions{gap:.3rem}.converterSourceControls .converterImportButton{font-size:.8rem}.converterTargetPanel{width:min(32rem,calc(100vw - 2rem))}}

/* Three shared rows keep both selector labels and dropdowns aligned even
   when translated toolbar options wrap to a second line. */
#converterInput:empty:before{font:400 16px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.converterEditor,.converterEditor.hasRunningDocument{grid-template-areas:"input outputs" "input outputs" "input outputs" "document document";grid-template-rows:auto auto auto auto;row-gap:0}
.converterInputField,.converterOutputHost{display:grid;grid-template-rows:subgrid;align-items:start}
.converterInputContent,.converterOutputContent{min-width:0}
.converterInputHeading,.runningDocumentOutputToolbar,.runningDocumentPane .runningDocumentToolbar{background:white;flex-wrap:wrap;white-space:normal;overflow:visible;align-self:stretch;align-content:start}
.converterActions{flex-wrap:wrap;overflow:visible;white-space:normal}
.converterActions button,.runningDocumentOutputToolbar button,.runningDocumentToolbar button,.converterImportButton,.converterRubyFormToggle{box-sizing:border-box;font:600 .8rem/1.3 system-ui,sans-serif;min-height:2rem;padding:.35rem .5rem;border:1px solid #8ca4b5;border-radius:.35rem;background:white;color:#214f6b;white-space:normal;cursor:pointer}
.runningDocumentOutputToolbar button{max-width:9rem;flex:0 1 auto}.runningDocumentAddGroup{flex:1 1 15rem;min-width:0}.runningDocumentAddControls{flex-wrap:wrap;min-width:0}.runningDocumentIncludeLabel{white-space:normal;min-width:0}
.converterSelectorPanel{flex-wrap:wrap;overflow:visible;background:white}.converterSelectorPanel .converterGrouping{min-width:0;max-width:100%;flex:0 1 auto}.converterSelectorPanel .converterGrouping span{white-space:normal}
.converterSourceControls,.converterOutputControls{display:flex;align-items:end;gap:.5rem;margin:.65rem 0 .45rem;min-width:0;align-self:end}
.converterOutputControls{flex-wrap:wrap;column-gap:.3rem}.converterToneNumberOption{display:flex;align-items:center;gap:.1rem;min-width:0;max-width:100%}.converterToneNumberOption[hidden],.converterToneNumberHelp[hidden]{display:none}.converterToneNumberOption label{white-space:normal}.converterToneNumberOption input{width:1rem;height:1rem;margin:0;accent-color:#47738c}.converterToneNumberHelp{font:.85rem/1.5 system-ui,sans-serif;color:#425563;margin:.2rem 0 .6rem}
.converterSourceControls .converterSelectLabel,.converterOutputControls .converterTargetField{box-sizing:border-box;flex:0 1 50%;width:50%;min-width:0;margin:0}
.converterSourceControls select,.converterTargetTrigger{box-sizing:border-box;width:100%;min-width:0}
#converterFrom,#converterTo{box-sizing:border-box;width:100%;height:2.25rem;min-height:2.25rem;background:white;font:500 .82rem/1.3 system-ui,sans-serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.converterSourceControls .converterImportButton,.converterRubyFormToggle{max-width:calc(50% - .5rem);flex:0 1 auto}.converterRubyFormToggle{min-height:2.25rem}.converterRubyFormToggle[hidden]{display:none!important}.converterRubyFormToggle:disabled{opacity:.5;cursor:default}
@media(max-width:899px){.converterEditor,.converterEditor.hasRunningDocument{grid-template-areas:"input" "outputs" "document";grid-template-rows:auto auto auto;row-gap:.8rem}.converterInputField,.converterOutputHost{display:block}.converterOutputControls .converterTargetField,.converterSourceControls .converterSelectLabel{flex:1 1 12rem;width:auto}.converterSelectorPanel{gap:.75rem}.converterTargetPanel{max-width:calc(100vw - 3rem)}}
.converterEditor.isExpanded{grid-template-areas:"input" "outputs" "document";grid-template-rows:auto auto auto;row-gap:.8rem}.converterEditor.isExpanded .converterInputField,.converterEditor.isExpanded .converterOutputHost{display:block}

/* Desktop actions fit one horizontal row; status feedback may sit below it. */
@media(min-width:1200px){.runningDocumentOutputToolbar{display:grid;grid-template-columns:auto auto auto auto auto minmax(0,1fr);gap:.35rem;align-items:start}.runningDocumentOutputToolbar>h2{margin:0 auto 0 0}.runningDocumentOutputToolbar button{max-width:none;white-space:nowrap;padding:.35rem .35rem}.runningDocumentAddGroup{min-width:0}.runningDocumentAddControls{flex-wrap:wrap;gap:.35rem}.runningDocumentIncludeLabel{white-space:nowrap;font-size:.72rem}.runningDocumentOutputToolbar .runningDocumentStatus{grid-column:1/-1}.runningDocumentOutputToolbar>.converterPronunciationResetAll[hidden]{display:none}.runningDocumentOutputToolbar .runningDocumentAddGroup{grid-column:-2 / -1}}

/* Tone explanations are UI controls, never transcription or clipboard text. */
.converterToneInfo{display:inline-block;margin-inline-start:.3rem;vertical-align:middle;white-space:normal;user-select:none}
.converterToneInfo>.alternateCitationMarker::before{content:"ⓘ"}
.converterToneInfo>.alternateCitationMarker{vertical-align:middle}
.converterToneInfoPanel{width:min(20rem,calc(100vw - 24px));font-weight:400;text-align:start;white-space:normal}
.converterToneInfoPanel[hidden]{display:none}

.converterMobileActions{display:none}
.converterMusaInfo[hidden]{display:none}
.converterMusaInfoPanel p{margin:.4rem 0;line-height:1.5}
@media(max-width:899px){
  .converterActions .converterAnnotate,.converterActions .converterCancel{display:none}
  .converterMobileActions{display:flex;flex:1 0 100%;order:50;gap:.5rem}
  .converterMobileActions button{min-height:2.75rem;padding:.4rem .85rem}
  .converterMobileActions .converterMobileAnnotate{background:var(--supplemental-action-red);border:2px solid var(--supplemental-action-red);color:white;font-weight:700}
  .converterMobileActions .converterMobileAnnotate:hover:not(:disabled){background:#831929;color:white}
  .converterMobileActions .converterMobileAnnotate:disabled{background:#846268;border-color:#846268;cursor:default}
  .converterMobileActions .converterMobileAnnotate:focus-visible{outline:3px solid #214f6b;outline-offset:3px}
}

/* Counted vertical preview uses a separate tree; the native editable tree and
   its Undo/selection history are never split, wrapped or reserialized. */
.converterVerticalControls{display:flex;align-items:center;gap:.4rem;max-width:100%;min-width:0}
.converterVerticalControls [hidden],.converterVerticalPreview[hidden],.converterVerticalPreview [hidden]{display:none!important}
.converterVerticalSourceHidden{display:none!important}
.converterTypographyControls{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.7rem;min-width:0;max-width:100%}
.converterColumnCountControl{display:flex;align-items:center;gap:.4rem;margin:0;border:0;padding:0;min-width:0;font:600 .78rem/1.4 system-ui,sans-serif}
.converterColumnCountControl legend{margin-bottom:.2rem;color:var(--supplemental-muted)}
.converterColumnCountControl input{position:static;opacity:1;clip-path:none;height:2.25rem;margin:0;padding:0;accent-color:#47738c}
.converterColumnCountControl .converterVerticalRange{width:8rem;max-width:35vw;cursor:pointer}
.converterColumnCountControl .converterVerticalNumber{box-sizing:border-box;width:4rem;padding:.2rem .3rem;border:1px solid #b9c8d3;border-radius:.3rem;background:white;font:inherit}
.converterColumnCountControl:disabled{opacity:.48}
.converterVerticalPreview{box-sizing:border-box;display:flex;flex-direction:column;gap:.45rem;max-width:100%;min-width:0;min-height:0;max-height:none;overflow:hidden;font-size:var(--document-text-size,1.85rem);border:1px solid var(--supplemental-line);border-radius:.4rem;background:var(--supplemental-paper);padding:.65rem}
.converterVerticalStatus{flex:none;min-block-size:2.9em;margin:0;font:400 .8rem/1.45 system-ui,sans-serif;color:var(--supplemental-muted)}
.converterVerticalContent{flex:1;min-width:0;min-height:0;overflow:hidden}
.converterVerticalPager{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex:none;font:500 .8rem/1.4 system-ui,sans-serif}
.converterVerticalPager button{min-height:2rem;padding:.25rem .5rem;border:1px solid #8ca4b5;border-radius:.3rem;background:white;color:#214f6b;font:inherit;cursor:pointer}
.converterVerticalPager button:disabled{opacity:.45;cursor:default}
.converterVerticalPreview .converterContinuousOutput,.converterVerticalPreview .runningDocumentContent{height:100%!important;max-height:none!important;min-height:0;overflow:hidden!important;resize:none;border:0;padding:0;font-size:inherit;white-space:normal}
.converterVerticalPreview .converterOutputSection,.converterVerticalPreview .runningDocumentLine{display:block!important;padding:0!important;margin:0!important;max-width:100%;contain:none;content-visibility:visible;white-space:normal}
.converterVerticalPreview .converterOutputHeading,.converterVerticalPreview .runningDocumentSystemName{display:block;font:600 .85rem/1.5 system-ui,sans-serif;margin:0 0 .25rem}
.converterVerticalBlock{display:block!important;width:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;line-height:1.1!important;margin:0!important;padding:0!important;contain:none!important;content-visibility:visible!important}
.converterVerticalColumns{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:.8em;width:100%;max-width:100%;margin:0;writing-mode:horizontal-tb;direction:ltr}
.converterVerticalColumn{display:flex;flex-direction:column;align-items:flex-start;flex:none;width:calc(var(--vertical-column-em,1.55)*1em);min-width:0;gap:var(--ruby-character-gap,0);padding:0}
.converterVerticalAtom{display:block;flex:none;line-height:1.1}
.converterVerticalColumn>.converterRubyWordBoundary{margin-inline-start:0;margin-block-start:var(--ruby-word-gap,0)}
.converterVerticalColumn>.converterRubyWordBoundary:first-child{margin-block-start:0}
.converterVerticalLiteral{writing-mode:vertical-rl;text-orientation:mixed;white-space:pre;inline-size:1.1em;min-block-size:1em}
.converterVerticalBreak{display:none}
.converterVerticalColumn>.converterVerticalAtom.converterRubyVisualGroup{display:block;padding:0;margin-inline-end:0;min-inline-size:0;inline-size:auto;transform:none}
.converterVerticalAtom .converterRubyVisualBeside{display:grid;inline-size:1.55em;block-size:auto;grid-template-columns:1em .55em;align-items:center;direction:ltr;writing-mode:horizontal-tb;padding-block-start:0}
.converterVerticalAtom .converterRubyVisualBase{display:flex;flex-direction:column;gap:0;inline-size:1em;block-size:auto;grid-row:auto;grid-column:1;justify-self:auto;line-height:1.1}
.converterVerticalAtom .converterRubyBaseCell{inline-size:1em;block-size:1.1em;line-height:1.1;text-align:center}
.converterVerticalAtom .converterRubyVisualBeside>.converterRubyVisualAnnotation{position:static;grid-column:2;grid-row:auto;inline-size:.55em;block-size:.92em;font-size:1em;transform:none}
@media(max-width:899px){.converterTypographyControls{flex-basis:100%}}
.converterCanipaInputHint{margin:.35rem 0;font:400 .8rem/1.45 system-ui,sans-serif;color:var(--supplemental-muted)}
.converterCanipaInputHint[hidden]{display:none}

.converterRubyVisualAnnotation.system-musa{font-family:"Kunming Musa Fangzi",Musa,sans-serif}
.converterRubyOutputFixed .converterRubyVisualGroup:has(.converterRubyCompactBeside){padding-block-start:0;min-block-size:1.1em;align-items:center}
.converterRubyOutputFixed .converterRubyCompactBeside{display:inline-grid;grid-template-columns:auto max-content;grid-template-rows:auto;gap:.12em;align-items:center;justify-items:start;inline-size:max-content;min-inline-size:1em;block-size:auto;min-block-size:1.1em;transform:none}
.converterRubyCompactBeside>.converterRubyVisualBase{grid-row:1;grid-column:1;justify-self:start}
.converterRubyOutputFixed .converterRubyCompactBeside>.converterRubyVisualAnnotation{grid-row:1;grid-column:2;position:static;inset:auto;transform:none;inline-size:max-content;max-inline-size:none;block-size:auto;font-size:.5em;line-height:1.15;margin:0;text-align:start}
.converterVerticalRubyAbove,.converterVerticalRubyBeside{display:grid!important;position:static!important;inline-size:var(--vertical-item-width,1.4em)!important;block-size:auto!important;transform:none!important;align-items:center;justify-items:center;margin:0!important;padding:0!important;gap:0}
.converterVerticalRubyAbove{grid-template-columns:1fr;grid-template-rows:var(--vertical-annotation-row,.7em) auto}
.converterVerticalRubyBeside{grid-template-columns:1em max-content;grid-template-rows:auto;column-gap:.12em}
.converterVerticalRubyAbove>.converterRubyVisualBase{grid-row:2!important;grid-column:1!important;justify-self:center!important}
.converterVerticalRubyBeside>.converterRubyVisualBase{grid-row:1!important;grid-column:1!important}
.converterVerticalRubyAbove>.converterRubyVisualAnnotation,.converterVerticalRubyBeside>.converterRubyVisualAnnotation{position:static!important;inset:auto!important;transform:none!important;font-size:.5em!important;line-height:1.15!important;inline-size:max-content!important;block-size:auto!important;white-space:nowrap;margin:0!important;max-inline-size:none;text-align:center}
.converterVerticalRubyAbove>.converterRubyVisualAnnotation{grid-row:1!important;grid-column:1!important}
.converterVerticalRubyBeside>.converterRubyVisualAnnotation{grid-row:1!important;grid-column:2!important}
.converterVerticalPreview .converterRubyVisualAnnotation[dir="rtl"]{direction:rtl;unicode-bidi:isolate}

/* Stable counted pages and their controls share one coordinate system. */
.converterSelectorPanel.isExpanded{position:sticky;top:0;z-index:50;box-shadow:0 2px 5px #243a4a22}
.converterSizeControl input[type=number]{position:static;opacity:1;clip-path:none;box-sizing:border-box;width:4.5rem;height:2.25rem;padding:.2rem .3rem;border:1px solid #b9c8d3;border-radius:.3rem;background:white;font:inherit}
.converterSystemNavigation{display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem;overflow-x:auto;max-width:100%;margin:0 0 .4rem;padding:.15rem 0;white-space:nowrap}
.converterSystemNavigation[hidden]{display:none!important}.converterSystemNavigationButton{flex:none;border:1px solid #8ca4b5;border-radius:.3rem;background:white;color:#214f6b;padding:.35rem .6rem;font:600 .8rem/1.3 system-ui,sans-serif;cursor:pointer}
.converterSystemNavigationButton.isActive{background:#214f6b;color:white;border-color:#214f6b}
.converterSystemContent .converterOutputHeading,.converterSystemContent .runningDocumentSystemName{display:none!important}
.converterVerticalColumn>.converterVerticalAtom.converterRubyVisualGroup{width:100%;inline-size:100%;align-self:stretch}
.converterVerticalColumn .converterVerticalRubyAbove,.converterVerticalColumn .converterVerticalRubyBeside{width:100%!important;inline-size:100%!important}
.converterVerticalColumn>.converterVerticalLiteral{width:100%;height:1.1em;inline-size:auto;min-block-size:0;text-align:center;display:grid;place-items:center}
.converterVerticalPreview .converterVerticalColumns{font-size:inherit;line-height:1.1}
.converterKeyboardAlternateReference{font:500 .8rem/1.4 system-ui,sans-serif;white-space:normal}

/* Vertical text changes use source-backed native edit transactions. */
.converterVerticalSourceHidden{display:block!important;position:fixed!important;left:-20000px!important;top:0!important;width:var(--vertical-source-width,600px)!important;opacity:0!important;pointer-events:none!important;max-height:1px!important;overflow:hidden!important}
.converterVerticalEditPanel{display:flex;flex:none;align-items:center;flex-wrap:wrap;gap:.4rem;font:500 .8rem/1.4 system-ui,sans-serif;margin:.2rem 0;padding:.4rem;border:1px solid #8ca4b5;border-radius:.3rem;background:#f5f8fa}
.converterVerticalEditPanel[hidden]{display:none!important}.converterVerticalEditPanel input{position:static;opacity:1;width:min(16rem,50vw);padding:.35rem;border:1px solid #8ca4b5;font:inherit}
.converterVerticalEditPanel button{padding:.35rem .55rem;border:1px solid #8ca4b5;border-radius:.3rem;background:white;color:#214f6b;font:inherit;cursor:pointer}
.converterVerticalEditPanel p{flex-basis:100%;margin:0}.converterVerticalContent [data-vertical-edit-id]{cursor:text}.converterVerticalContent [data-vertical-edit-id]:focus-visible{outline:2px solid #47738c;outline-offset:2px}

.converterGrouping .converterRubyPlacementLabel,.converterGrouping .converterRubyPlacementHelp{display:inline;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:inherit}
.converterGrouping .converterRubyPlacementHelp{display:inline-block;margin-inline-start:.3rem;vertical-align:middle}
.converterZhuyinPlacement:disabled{opacity:1}
.converterRubyPlacementInfo{font:inherit!important;padding:0!important;min-width:1.5rem;min-height:1.5rem;line-height:1.1;cursor:pointer}
.converterRubyPlacementInfo:focus-visible{outline:2px solid #47738c;outline-offset:2px}
.converterRubyPlacementPanel{font:400 .85rem/1.45 system-ui,sans-serif;color:#243a4a;white-space:normal}
.converterVerticalColumnFull{height:var(--vertical-column-height);justify-content:space-between}

.converterVerticalPasteTools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:.4rem 0;font:400 .8rem/1.4 system-ui,sans-serif;color:var(--supplemental-muted)}
.converterVerticalPasteTools[hidden],.converterVerticalPasteTools [hidden]{display:none!important}
.converterVerticalPasteJoin{flex:none;padding:.35rem .5rem;border:1px solid #8ca4b5;border-radius:.3rem;background:white;color:#214f6b;font:600 .8rem/1.3 system-ui,sans-serif;cursor:pointer}
.converterVerticalPasteJoin:disabled{opacity:.5;cursor:default}.converterVerticalPasteJoin:focus-visible{outline:2px solid #47738c;outline-offset:2px}
.converterVerticalPasteHint{flex:1;min-width:min(15rem,100%)}.converterVerticalPasteStatus{color:var(--supplemental-ink)}

/* Projected text remains selectable; only explicit activation opens editors. */
.converterVerticalContent,.converterVerticalContent *{-webkit-user-select:text;user-select:text}
.converterVerticalContent .isPronunciationEditable{cursor:pointer}
.converterVerticalContent .isPronunciationEditable:hover,.converterVerticalContent .isSelectedPronunciation{background:#e1edf5}
.converterVerticalSnapshot{display:block;direction:ltr;writing-mode:horizontal-tb;white-space:normal}
.converterVerticalSnapshotPage{box-sizing:border-box;display:block;width:var(--vertical-page-width);height:var(--vertical-page-height);max-width:none;font-size:inherit;overflow:visible;margin:0 0 1rem;padding:0;border:0;break-inside:avoid;break-after:page}
.converterVerticalSnapshotPage:last-child{break-after:auto}
.converterVerticalSnapshot .converterVerticalColumns{font-size:inherit;line-height:1.1}
.runningDocumentContent:has(.converterVerticalSnapshot){overflow-x:auto}
.runningDocumentExport:has(.converterVerticalSnapshot) main{max-width:none}
@media print{
 .runningDocumentExport:has(.converterVerticalSnapshot),.runningDocumentExport:has(.converterVerticalSnapshot) main,.runningDocumentExport:has(.converterVerticalSnapshot) .runningDocumentContent{margin:0!important;padding:0!important;border:0!important;max-width:none!important;overflow:visible!important}
 .runningDocumentAddition:has(.converterVerticalSnapshot){margin:0;padding:0;border:0}
 .converterVerticalSnapshotPage{margin:0!important;height:var(--vertical-page-height)!important;width:var(--vertical-page-width)!important;break-inside:avoid;break-after:page}
 .converterVerticalSnapshotPage:last-child{break-after:auto}
 .runningDocumentAddition:has(.converterVerticalSnapshot)+.runningDocumentBreak{display:none}
}

/* Plain Han has no ruby band to reserve. Keep authored paragraphs/newlines,
   but do not make their visual separation look like deletable blank text. */
:is(.converterContinuousOutput,.runningDocumentContent) .runningDocumentText{line-height:1.5}
:is(.converterContinuousOutput,.runningDocumentContent) .converterOutputSection>div>p{margin-block:0;padding-block:0}
.converterVerticalNativeHost{flex:1;min-height:0;min-width:0;width:100%;overflow:hidden}
.converterVerticalNativeHost[hidden],.converterVerticalNativeText[hidden]{display:none!important}
.converterVerticalNativeText{box-sizing:border-box;display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--supplemental-ink);font-family:ui-serif,"Noto Serif CJK TC","Noto Serif CJK SC",serif;font-size:inherit;font-weight:500;writing-mode:vertical-rl;text-orientation:upright;direction:ltr;white-space:pre-wrap;word-break:break-all;line-break:anywhere;resize:none;overflow:hidden;caret-color:currentColor;-webkit-user-select:text;user-select:text;cursor:text;appearance:none}
.converterVerticalNativeText:focus-visible{outline:2px solid #47738c;outline-offset:-2px}