/* Shared header layout: brand, three equal tool cells, appearance and language. */
@media screen {
 html body .top {height:auto!important;min-height:82px;display:block!important;max-width:none;margin:0;padding:0;}
 html body .top .nav {display:grid!important;grid-template-columns:190px minmax(0,1fr) auto;gap:24px!important;min-height:82px!important;height:auto!important;width:100%;max-width:1180px;margin:auto;padding:10px 28px!important;}
 html body .top .brand {margin:0!important;padding:0!important;min-width:0;}
 html body .top .navlinks {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important;min-width:0;overflow:visible!important;order:initial!important;}
 html body .top .navlinks .nav-tab {width:100%;min-width:0;white-space:normal;text-align:center;}
 html body .top .navlinks [hidden] {display:none!important;}
 html body .top .navright {display:flex!important;gap:8px!important;margin:0!important;flex-shrink:0;}
 html body .top .navright .lang {display:inline-flex!important;align-items:center;justify-content:center;min-width:36px;min-height:36px;flex-shrink:0;}
 body.legal-page main {width:calc(100% - 40px);max-width:900px;margin:28px auto;padding:clamp(22px,4vw,48px);line-height:1.8;}
 body.legal-page :is(header,footer) {color:var(--ink);background:var(--surface-panel);border-color:var(--line);}
 body.legal-page .foot {max-width:none;padding:24px max(20px,calc((100% - 1124px)/2));border-top:1px solid var(--line);}
 body.legal-page .top nav {margin-top:0;}
 body.legal-page :is(th,td) {border-color:var(--line)!important;}
 body.legal-page :is(h1,h2,h3,strong,dt) {color:var(--ink)!important;}
 body.about-page .content {background:var(--surface-panel)!important;color:var(--ink);border-color:var(--line);}
 body.about-page .section {box-shadow:none!important;}
 body.about-page .section h2 {border-color:var(--brand-red);}
 body.about-page .feature {text-decoration:none;}
 @media(max-width:760px) {
  html body .top .nav {grid-template-columns:minmax(0,1fr) auto;padding:12px 16px!important;gap:12px!important;min-height:132px!important;}
  html body .top .navlinks {grid-column:1/-1;grid-row:2;order:initial!important;}
  html body .top .navright {grid-column:2;grid-row:1;}
  html body .top .brand .bihanyu-wordmark {width:141.0417px!important;height:48.4615px!important;max-width:100%;}
  html body .top .navlinks .nav-tab {padding:10px 4px!important;font-size:13px!important;}
 }
}

@media screen {body.licenses-page :is(.panel,.box,.notice,code,.tag){background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}body.licenses-page .top{border-radius:0}body.legal-page .top .navlinks a{text-decoration:none}body.legal-page .navlinks{line-height:1.4}body.about-page .hero{position:relative;overflow:hidden}}
@media screen {
 html body .tool-empty-state {background:var(--surface-panel)!important;color:var(--ink)!important;border-color:var(--line)!important;}
 html body .tool-empty-state strong {color:var(--ink)!important;}
 html body .tool-empty-state p {color:var(--text-secondary)!important;}
 html body .tool-empty-state svg {fill:var(--surface-selected)!important;stroke:var(--link-color)!important;}
 html body .tool-empty-state svg.dictation-empty-art {fill:none!important;stroke:var(--link-color)!important;}
}
/* Shared notices follow the active red/neutral palette in both themes. */
@media screen {
 :root,:root[data-theme=dark] {--toast-bg:var(--surface-selected);--toast-ink:var(--ink);--toast-border:var(--link-color);}
 html body>:is(#worksheetAddedNotice,#dictationMessage,#searchReceipt,#toast).hanzi-shared-toast:not([hidden]),
 html body :is(#worksheetAddedNotice,#dictationMessage,#searchReceipt,#toast).hanzi-shared-toast,
 html body :is(.toast,.worksheet-added-notice,.dictation-message):not([hidden]) {
  background:var(--toast-bg)!important;color:var(--toast-ink)!important;
  border-color:var(--toast-border)!important;
  box-shadow:0 6px 24px #00000026!important;
 }
 html body .hanzi-shared-toast :is(strong,span,p) {color:var(--toast-ink)!important;}
}
/* Equal artwork bounds and typography for the two introductory cards. */
@media screen {
 html body .tool-empty-state svg {width:56px!important;height:56px!important;flex:0 0 56px!important;}
 html body .tool-empty-state :is(strong,p) {font-family:var(--font-ui)!important;font-size:14px!important;line-height:1.5!important;}
 html body .tool-empty-state svg.dictation-empty-art {fill:none!important;stroke:var(--brand-red)!important;stroke-width:2.4!important;}
 html body .tool-empty-state svg.dictation-empty-art rect {fill:var(--surface-soft)!important;stroke:var(--brand-red)!important;}
 html[data-theme=dark] body .tool-empty-state svg.dictation-empty-art rect {fill:var(--surface-panel)!important;}
 @media(max-width:600px) {html body .tool-empty-state svg {width:44px!important;height:44px!important;flex-basis:44px!important;}}
}

/* Semantic screen mappings, after existing page layers. No logo or sheet rules. */
@media screen {
 html body .top .nav{box-sizing:border-box;grid-template-columns:160px minmax(0,1fr) auto;align-items:center!important;gap:var(--bi-space-6)!important;max-width:var(--bi-width-tools);min-height:82px!important;padding:var(--bi-space-3) var(--bi-space-8)!important}
 html body .top .navlinks{align-items:stretch!important;align-self:center;grid-auto-rows:auto;margin:0!important;padding:0!important;min-height:0;line-height:var(--bi-line-ui)}
 html body .top .navlinks .nav-tab{font:650 var(--bi-type-ui)/var(--bi-line-ui) var(--font-ui)!important;height:auto!important;min-height:44px!important;padding:var(--bi-space-2) var(--bi-space-3)!important;white-space:normal!important;overflow-wrap:anywhere;border-radius:var(--bi-radius-control)!important}
 html body .top .navright{display:flex!important;align-items:center;min-width:0;margin:0!important;gap:var(--bi-space-2)}
 html body .top .lang{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;font:600 var(--bi-type-ui)/var(--bi-line-ui) var(--font-ui)!important;letter-spacing:normal!important;min-width:44px!important;min-height:44px!important;padding:var(--bi-space-2)!important;border-radius:var(--bi-radius-control)!important}
 html body .top .theme-toggle{border-radius:var(--bi-radius-control)!important;flex-shrink:0}
 body.phase2-page>main.wrap,body.about-page>main.wrap,body:not(.legal-page):not(.about-page):not(.phase2-page)>main.wrap{box-sizing:border-box;max-width:var(--bi-width-tools);width:100%;padding-inline:var(--bi-space-8)!important}
 html body .hero,html body.phase2-page .vocabulary-hero{height:auto!important;min-height:20rem!important;padding:var(--bi-space-8)!important;margin:var(--bi-space-6) 0!important;border-radius:var(--bi-radius-panel)!important}
 html body .hero h1,html body.phase2-page .vocabulary-hero h1,html body.about-page #about-title{font-family:var(--font-accent)!important;font-size:var(--bi-type-editorial)!important;line-height:var(--bi-line-editorial)!important;margin:var(--bi-space-3) 0 var(--bi-space-4)!important;overflow-wrap:break-word}
 html body .hero h1 span{font-size:inherit!important;line-height:inherit!important}
 html body .hero p,html body.phase2-page .vocabulary-hero p{font-size:var(--bi-type-body)!important;line-height:var(--bi-line-body)!important;min-height:0!important;text-align:start!important;text-indent:0!important}
 html body .hero .eyebrow{font-size:var(--bi-type-micro)!important;line-height:var(--bi-line-micro)!important;letter-spacing:.12em}
 html body :is(#practicar,#worksheetPanel,#dictationPanel){padding:var(--bi-space-8)!important;border-radius:var(--bi-radius-panel)!important}
 html body :is(#practicar,#worksheetPanel,#dictationPanel) .cardhead{margin:0 0 var(--bi-space-6)!important;padding:0 0 var(--bi-space-4)!important}
 html body :is(#practicar,#worksheetPanel,#dictationPanel) .cardhead h2{font-size:var(--bi-type-panel)!important;line-height:var(--bi-line-panel)!important}
 html body #practicar .fieldlabel,html body #worksheetPanel .worksheet-character-search>.fieldlabel,html body #dictationPanel label[for=dictationInput]{font-size:var(--bi-type-ui)!important;line-height:var(--bi-line-ui)!important;min-height:0!important;margin:0 0 var(--bi-space-2)!important}
 html body :is(#wordInput,#worksheetCharacterInput,#dictationInput){height:auto!important;min-height:58px!important;font-size:var(--bi-type-field)!important;line-height:1.5!important;padding:var(--bi-space-4) 54px var(--bi-space-4) var(--bi-space-4)!important;border-radius:var(--bi-radius-control)!important}
 html body :is(.search-row,.worksheet-search-row,.dictation-add-row){gap:var(--bi-space-3)!important;align-items:stretch}
 html body :is(.primary,.printbtn,.savebtn,.iconbtn,.text-action,.worksheet-handwriting-button,.dictation-draw-prompt,.canonical-search-more),html body #dictationPanel #dictationRound :is(#dictationPause,#dictationReplay,#dictationNext,#dictationStop,#dictationRoundRestart,#dictationRoundExit){font-size:var(--bi-type-ui)!important;line-height:var(--bi-line-ui)!important;border-radius:var(--bi-radius-control)!important}
 html body :is(.text-action,.dictation-more,.dictation-manual-link){border-radius:0!important}
 html body :is(#drawButton,#worksheetHandwritingButton,#dictationHandwritingButton,.tone-filters button,.canonical-tones button,.canonical-build-chips button){font-size:var(--bi-type-ui)!important;line-height:var(--bi-line-ui)!important;border-radius:var(--bi-radius-control)!important}
 html body :is(.hint,.worksheet-search-help,.dictation-help,.pdf-save-hint,.search-status,.dictation-intro,.canonical-search-summary){font-size:var(--bi-type-ui)!important;line-height:var(--bi-line-ui)!important;text-align:start;text-indent:0}
 html body :is(.tool-empty-state,.canonical-search,.canonical-search-item,.dictation-choice,.worksheet-word-chip,.about-page .feature){border-radius:var(--bi-radius-card)!important}
 html body .tool-empty-state{padding:var(--bi-space-6);margin-block:var(--bi-space-4);gap:var(--bi-space-4)}
 html body .tool-empty-state strong{font-size:var(--bi-type-card-small);line-height:var(--bi-line-card-small)}
 html body .tool-empty-state p{font-size:var(--bi-type-ui);line-height:var(--bi-line-ui)}
 html body :is(.field-clear,.clear-input-btn,.remove-entry,.remove-worksheet-item,.sentence-result-clear,.dictation-move,.dictation-remove,.dictation-word-audio,.audio-btn,.audio-control,.worksheet-stroke-resize,.addword,.dictation-repeat,.shared-page-arrow){border-radius:var(--bi-radius-control)!important}
 html body #phase4WorksheetOptions{padding:var(--bi-space-4);margin-block:var(--bi-space-4);gap:var(--bi-space-3) var(--bi-space-6);border-radius:var(--bi-radius-small)!important}
 html body #phase4WorksheetOptions :is(label,.phase4-row-help),html body .stroke-display-controls label{font-size:var(--bi-type-ui);line-height:var(--bi-line-ui)}
 html body.phase2-page :is(#entryMeaningHeading,#componentSection h3,.entry-strokes h3),html body .dictation-answers h3,html body.about-page .section h2{font-size:var(--bi-type-section)!important;line-height:var(--bi-line-section)!important}
 html body.phase2-page #entryMeanings{font-size:var(--bi-type-body);line-height:var(--bi-line-body)}
 html body.phase2-page .stroke-head{flex-wrap:wrap;gap:var(--bi-space-4)}
 html body.phase2-page .stroke-head h3{min-width:0;max-width:100%}
 html body.phase2-page .stroke-actions{min-width:0;max-width:100%;justify-content:flex-start;gap:var(--bi-space-2)}
 html body.phase2-page .stroke-actions button{max-width:100%}
 html body button.unified-close,html body button.unified-restart{border-radius:var(--bi-radius-control)!important}
 html body.phase2-page .source-details{font-size:var(--bi-type-meta);line-height:var(--bi-line-meta)}
 html body.phase2-page :is(.component-reading,.component-meaning,.result-meaning),html body :is(.dictation-choice-reading,.dictation-choice-meaning,.canonical-search-item small){font-size:var(--bi-type-ui)!important;line-height:var(--bi-line-ui)!important}
 html body :is(.entry-type,.local-tag,.shared-page-indicator,.canonical-search-page,.dictation-suggestion-count){font-size:var(--bi-type-meta);line-height:var(--bi-line-meta)}
 html body .pronunciation-note{box-sizing:border-box;width:calc(100% - 64px);max-width:1116px;margin:var(--bi-space-6) auto;padding:var(--bi-space-6)!important;border-radius:var(--bi-radius-card);font-size:var(--bi-type-ui);line-height:var(--bi-line-ui)}
 html body .pronunciation-note h2{font-size:var(--bi-type-card-small);line-height:var(--bi-line-card-small);margin:0 0 var(--bi-space-2)}
 html body.about-page .content{padding:var(--bi-space-8);margin-bottom:var(--bi-space-12);border-radius:var(--bi-radius-panel)}
 html body.about-page .section{padding-block:var(--bi-space-6)}
 html body.about-page .section:first-child{padding-top:0}html body.about-page .section:last-child{padding-bottom:0}
 html body.about-page .section>p{font-size:var(--bi-type-body);line-height:var(--bi-line-body);text-align:start;text-indent:0}
 html body.about-page .grid{gap:var(--bi-space-4);margin-top:var(--bi-space-6)}
 html body.about-page .feature{padding:var(--bi-space-6);min-width:0}
 html body.about-page .feature h3{font-size:var(--bi-type-card);line-height:var(--bi-line-card);overflow-wrap:break-word}
 html body.about-page .feature p{font-size:var(--bi-type-ui);line-height:var(--bi-line-ui);text-align:start}
 body.license-index-page{max-width:none!important;margin:0!important;padding:0!important}
 html body.legal-page main{box-sizing:border-box;width:calc(100% - 32px);max-width:var(--bi-width-reading);margin:var(--bi-space-8) auto;padding:var(--bi-space-12);border-radius:var(--bi-radius-panel);font-size:var(--bi-type-body);line-height:var(--bi-line-body);overflow-wrap:break-word;text-align:start;text-indent:0}
 html body.legal-page main h1{font-size:var(--bi-type-legal);line-height:var(--bi-line-legal);margin:var(--bi-space-4) 0 var(--bi-space-6)}
 html body.legal-page main h2{font-size:var(--bi-type-section);line-height:var(--bi-line-section);margin:var(--bi-space-8) 0 var(--bi-space-3)}
 html body.legal-page main h3{font-size:var(--bi-type-card-small);line-height:var(--bi-line-card-small)}
 html body.legal-page main :is(p,li,dt,dd){text-align:start;text-indent:0}
 html body.legal-page :is(.updated,.meta,.footer){font-size:var(--bi-type-meta);line-height:var(--bi-line-meta);letter-spacing:normal}
 html body.legal-page .panel{padding:var(--bi-space-6);margin-bottom:var(--bi-space-4);border-radius:var(--bi-radius-card)}
 html body.legal-page .box{padding:var(--bi-space-4);min-width:0;border-radius:var(--bi-radius-small)}
 html body.legal-page .legal-notice{padding:var(--bi-space-4);border-radius:var(--bi-radius-small);font-size:var(--bi-type-ui);line-height:var(--bi-line-ui)}
 html body.legal-page .source-table{max-width:100%;overflow:auto;overscroll-behavior-inline:contain}
 html body .foot{box-sizing:border-box;width:100%;max-width:none;padding:var(--bi-space-6) var(--bi-space-4)!important;font-size:var(--bi-type-meta)!important;line-height:var(--bi-line-meta)!important}
 html body .foot :is(a,p){font-size:var(--bi-type-meta)!important;line-height:var(--bi-line-meta)!important}
 html body .foot a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:var(--bi-space-3) 0!important}
 html body .foot nav{margin:0!important;padding:0!important;gap:var(--bi-space-3) var(--bi-space-6)!important}
 @media(max-width:900px){html body.legal-page main{padding:var(--bi-space-8)}}
 @media(max-width:760px){
  html body .top .nav{grid-template-columns:minmax(0,1fr) auto;min-height:0!important;padding:var(--bi-space-3) var(--bi-space-4)!important;gap:var(--bi-space-3)!important}
  html body .top .navlinks{grid-row:2;grid-column:1/-1}html body .top .navright{grid-row:1;grid-column:2}
  body.phase2-page>main.wrap,body.about-page>main.wrap,body:not(.legal-page):not(.about-page):not(.phase2-page)>main.wrap{padding-inline:var(--bi-space-4)!important}
  html body :is(#practicar,#worksheetPanel,#dictationPanel),html body.about-page .content{padding:var(--bi-space-6)!important}
  html body .hero,html body.phase2-page .vocabulary-hero{padding:var(--bi-space-6)!important}
  html body .hero h1,html body.phase2-page .vocabulary-hero h1,html body.about-page #about-title{font-size:2rem!important;line-height:2.5rem!important}
  html body .pronunciation-note{width:calc(100% - 32px)}html body.legal-page main{padding:var(--bi-space-6)}
 }
 @media(max-width:480px){
  html body .hero h1,html body.phase2-page .vocabulary-hero h1,html body.about-page #about-title{font-size:1.875rem!important;line-height:2.375rem!important}
  html body :is(#practicar,#worksheetPanel,#dictationPanel),html body.about-page .content,html body.legal-page main{padding:var(--bi-space-4)!important}
  html body.legal-page main h1{font-size:1.875rem;line-height:2.375rem}html body .top .navlinks .nav-tab{padding-inline:var(--bi-space-1)!important}
 }
}

/* Transient screen feedback is never part of an A4 exercise. The printable
   sheet, school guides, strokes, dimensions and typography are untouched. */
@media print {body>.hanzi-shared-toast{display:none!important}}

/* Review: optional pronunciation information is folded by default. */
@media screen {
 html body .pronunciation-note{padding:var(--bi-space-3) var(--bi-space-4)!important;background:transparent!important;border-color:var(--line)!important}
 html body .pronunciation-disclosure>summary{cursor:pointer;font-family:var(--font-ui);font-size:var(--bi-type-ui);font-weight:600;line-height:var(--bi-line-ui);color:var(--ink);padding-block:var(--bi-space-2);overflow-wrap:break-word}
 html body .pronunciation-disclosure>summary::marker{color:var(--link-color)}
 html body .pronunciation-disclosure>summary:focus-visible{outline:3px solid var(--focus-color);outline-offset:4px;border-radius:var(--bi-radius-control)}
 html body .pronunciation-disclosure>p{margin:var(--bi-space-3) 0 var(--bi-space-2);font-size:var(--bi-type-ui);line-height:var(--bi-line-ui)}
}