/* Presentación común de las tres herramientas, solo en pantalla. */
@media screen {
body .hero,body.phase2-page .vocabulary-hero{box-sizing:border-box;min-height:280px;margin:24px 0 22px;padding:36px 32px;display:flex;align-items:center}
body .hero>div{width:100%;max-width:660px}
body .hero h1,body.phase2-page .vocabulary-hero h1{font-family:var(--font-ui);font-size:clamp(30px,4vw,43px);font-weight:700;line-height:1.15;margin:12px 0 14px;letter-spacing:-.025em}
body .hero h1 span,body.phase2-page .vocabulary-hero h1 span{display:block;font-family:var(--font-accent);font-style:italic;font-weight:500}
body .hero p,body.phase2-page .vocabulary-hero p{font-family:var(--font-ui);font-size:16px;line-height:1.65;margin:0;max-width:540px;text-indent:0;color:#526b61}
body .hero .eyebrow{font-family:var(--font-ui);font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.16em;color:#215c4b}
body #practicar,body #worksheetPanel,body #dictationPanel{padding:28px 32px}
body #practicar .cardhead,body #worksheetPanel .cardhead,body #dictationPanel .cardhead{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid #dce7df}
body #practicar .cardhead h2,body #worksheetPanel .cardhead h2,body #dictationPanel .cardhead h2{font-family:var(--font-ui);font-size:25px;line-height:1.3;font-weight:650;margin:0;color:#183c34}
body #practicar .fieldlabel,body #worksheetPanel .fieldlabel,body #dictationPanel label[for="dictationInput"]{font-family:var(--font-ui)!important;font-size:14px!important;line-height:1.55!important;font-weight:650!important;color:#183c34}
body #practicar .hint,body #practicar .tiny,body #practicar .vocab-search-help,body #worksheetPanel .worksheet-search-help,body #dictationPanel .dictation-help{font-family:var(--font-ui);font-size:14px;line-height:1.65;margin:12px 0 18px;text-indent:0;color:#526b61}
@media(max-width:640px){body .hero,body.phase2-page .vocabulary-hero{min-height:280px;padding:28px 20px;margin:16px 0 22px}body #practicar,body #worksheetPanel,body #dictationPanel{padding:24px 20px}body .hero h1,body.phase2-page .vocabulary-hero h1{font-size:32px}}
}

@media screen {
body .hero,body.phase2-page .vocabulary-hero{height:320px!important;min-height:320px!important;padding:36px 32px!important;align-items:flex-start!important}
body .hero>div,body.phase2-page .hero>div{margin:0!important;padding:0!important;max-width:660px!important;position:relative!important;top:0!important;left:0!important}
body .hero .eyebrow{margin:0!important;padding:0!important}
body .hero h1,body.phase2-page .vocabulary-hero h1{margin:12px 0 14px!important;line-height:1.15!important;font-size:clamp(30px,4vw,43px)!important}
body .hero p,body.phase2-page .vocabulary-hero p{margin:0!important;line-height:1.65!important;font-size:16px!important}
body #practicar,body #worksheetPanel,body #dictationPanel{padding:28px 32px!important}
body #dictationPanel .dictation-intro{display:none!important}
body #worksheetPanel .worksheet-character-search{margin-top:0!important;padding-top:0!important}
body #practicar .cardhead,body #worksheetPanel .cardhead,body #dictationPanel .cardhead{margin:0 0 20px!important;padding:0 0 18px!important}
body #practicar .fieldlabel,body #worksheetPanel .fieldlabel,body #dictationPanel label[for="dictationInput"]{display:block!important;margin:0 0 10px!important;padding:0!important}
body .search-row,body #worksheetPanel .worksheet-search-row,body #dictationPanel .dictation-add-row{margin-top:0!important;gap:12px!important}
@media(max-width:640px){body .hero,body.phase2-page .vocabulary-hero{padding:28px 20px!important}body #practicar,body #worksheetPanel,body #dictationPanel{padding:24px 20px!important}body .hero h1,body.phase2-page .vocabulary-hero h1{font-size:32px!important}}
}

@media screen {
body #practicar .fieldlabel,body #worksheetPanel .fieldlabel,body #dictationPanel label[for="dictationInput"]{font-size:14px!important;line-height:22px!important;min-height:22px;box-sizing:border-box}
body #wordInput,body #worksheetCharacterInput,body #dictationInput{height:58px!important;min-height:58px!important;box-sizing:border-box;font-family:var(--font-han)!important;font-size:17px!important;line-height:1.5!important}
}

/* Ritmo editorial y respuestas visuales compartidos. */
@media screen {
body .hero p,body #practicar .hint,body #practicar .search-status,body #practicar #wordHelp,body #worksheetPanel .hint,body #dictationPanel .dictation-help,body .pdf-save-hint{font-family:var(--font-ui)!important;font-size:14px;line-height:1.65;text-align:left;text-indent:0;letter-spacing:normal;overflow-wrap:break-word}
body .hero p{font-size:16px!important;min-height:53px}
body #practicar .cardhead h2,body #worksheetPanel .cardhead h2,body #dictationPanel .cardhead h2{font-size:25px!important;line-height:1.3!important;font-weight:650!important;letter-spacing:normal}
body #practicar h3,body #worksheetPanel h3,body #dictationPanel h3{font-family:var(--font-ui);font-size:20px;line-height:1.4;font-weight:650;letter-spacing:normal}
body #wordInput,body #worksheetCharacterInput,body #dictationInput{padding:14px 54px 14px 16px!important;border-radius:10px!important}
body #wordForm>.search-row>button.primary,body #worksheetSearchButton,body #dictationAdd{min-height:58px!important;font-size:14px!important;font-family:var(--font-ui)!important;font-weight:650!important}
body #drawButton,body #worksheetHandwritingButton,body #dictationHandwritingButton{font-family:var(--font-ui)!important;font-size:14px!important;line-height:1.5;min-height:44px;padding:10px 12px!important;border:1px solid #d4e2db!important;border-radius:9px!important;color:#215c4b!important;background:#fff!important;text-decoration:none!important;font-weight:500!important}
body #dictationHandwritingButton[hidden]{display:none!important}
body button,body a.nav-tab,body .navlinks>a{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
body .search-result,body .dictation-choice,body .worksheet-word-chip{transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
body .search-result:hover,body .dictation-choice:hover{border-color:#8fb3a3;box-shadow:0 3px 12px #173c2c0c}
body .hero{overflow:hidden}
body .hero::before{animation:tool-image-reveal .65s ease-out both!important;transform-origin:center}
body #practicar,body #worksheetPanel,body #dictationPanel{animation:tool-panel-reveal .25s ease-out both}
@keyframes tool-image-reveal{from{opacity:.65;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
@keyframes tool-panel-reveal{from{opacity:.7;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){body .hero,body.phase2-page .vocabulary-hero{height:320px!important;min-height:320px!important}body .hero h1,body.phase2-page .vocabulary-hero h1{font-size:30px!important}body #practicar,body #worksheetPanel,body #dictationPanel{padding:22px 18px!important}}
@media(prefers-reduced-motion:reduce){body .hero::before,body #practicar,body #worksheetPanel,body #dictationPanel{animation:none!important;transform:none!important}body button,body a.nav-tab,body .navlinks>a,body .search-result,body .dictation-choice,body .worksheet-word-chip{transition:none!important}}
}

@media screen {
body .hero,body.phase2-page .vocabulary-hero{margin:24px 0 22px!important}
body #wordForm>.search-row{grid-template-columns:minmax(0,1fr) 112px}
body #wordForm>.search-row>button.primary,body #worksheetSearchButton,body #dictationAdd{width:112px;min-width:112px;flex:0 0 112px}
@media(max-width:640px){body .wrap,body.phase2-page .wrap{padding-inline:12px!important}body .hero,body.phase2-page .vocabulary-hero{margin:16px 0 22px!important}body #wordForm>.search-row{grid-template-columns:1fr}body #wordForm>.search-row>button.primary,body #worksheetSearchButton,body #dictationAdd{width:100%;min-width:0;flex-basis:auto}}
}
@media screen and (max-width:640px){body .top .nav{box-sizing:border-box;min-height:124px!important;height:124px!important;gap:12px!important}}

.search-receipt{margin:12px 0;color:#215c4b;font-size:14px;line-height:1.65;overflow-wrap:anywhere}

#searchReceipt:not([hidden]){position:fixed;right:18px;bottom:18px;z-index:100;max-width:min(330px,calc(100vw - 36px));padding:10px 14px;margin:0;border:1px solid #bdd8c6;border-radius:9px;background:#edf7f0eb;color:#215c4b;box-shadow:0 8px 28px #173c2c25;animation:tool-panel-reveal .2s ease-out}
#searchReceipt[hidden]{display:none!important}
@media(max-width:760px){#wordDetail .entry-main>.entry-strokes{width:100%;margin:18px 0;padding:18px 0;border-top:1px solid #dce7df;border-left:0}}
@media(prefers-reduced-motion:reduce){#searchReceipt:not([hidden]){animation:none!important}}

/* Avisos comunes: anclados al viewport, también con paneles animados. */
@media screen {
body>#searchReceipt:not([hidden]),body>#worksheetAddedNotice:not([hidden]),body>#dictationMessage.dictation-added-toast:not([hidden]){position:fixed!important;inset:auto!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;z-index:10000!important;box-sizing:border-box;max-width:min(330px,calc(100vw - 28px))!important;margin:0!important;padding:9px 13px!important;border:1px solid #bdd8c680!important;border-radius:10px!important;background:#eaf5eedb!important;color:#526b61!important;box-shadow:0 4px 16px #173c2c12!important;font-family:var(--font-ui)!important;font-size:14px!important;line-height:1.5!important;text-align:left!important;overflow-wrap:anywhere;pointer-events:none;animation:tool-toast-reveal .18s ease-out!important}
@keyframes tool-toast-reveal{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){body>#searchReceipt,body>#worksheetAddedNotice,body>#dictationMessage.dictation-added-toast{animation:none!important}}
}

@media screen{body>.hanzi-shared-toast:not([hidden]){font-family:var(--font-ui)!important;font-size:14px!important;font-weight:500!important;font-style:normal!important;letter-spacing:normal!important;line-height:1.5!important;background:#eaf5eedb!important;color:#526b61!important}}

/* Ventanas estrechas: evitar bases flex verticales y controles fuera del campo. */
@media screen {
body .hero,body .card,body .layout,body .entry-main,body .entry-strokes,body .search-field,body .dictation-choice,body .worksheet-character-search{min-width:0}
body input,body select,body textarea{max-width:100%;box-sizing:border-box}
body .foot nav{flex-wrap:wrap}
@media(max-width:760px){
body .top .nav{height:auto!important;min-height:124px!important;gap:12px!important;flex-wrap:wrap}
body .top .navlinks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;min-width:0;gap:6px!important}
body .top .navlinks>a,body .top .navlinks .nav-tab{width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:10px 5px!important;text-align:center;font-size:13px!important;line-height:1.4;white-space:normal}
body .search-row,body #worksheetPanel .worksheet-search-row,body #dictationPanel .dictation-add-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%;min-width:0}
body #wordForm>.search-row>button.primary,body #worksheetSearchButton,body #dictationAdd{width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important;flex:0 0 auto!important;align-self:stretch}
body #wordInput,body #worksheetCharacterInput,body #dictationInput{width:100%!important;min-width:0!important;flex:0 0 auto!important}
body .search-field{width:100%!important}
body .worksheet-actions{grid-template-columns:1fr!important;gap:10px}
body .phase4-worksheet-options{gap:12px;max-width:100%;box-sizing:border-box}
body .phase4-worksheet-options label{flex-wrap:wrap;max-width:100%}
body .dictation-round-actions{flex-wrap:wrap}
}
}

@media screen {
body>#searchReceipt:not([hidden]),body>#worksheetAddedNotice:not([hidden]),body>#dictationMessage.dictation-added-toast:not([hidden]){color:#526b61!important;background:#eaf5eedb!important;border:1px solid #bdd8c680!important;font-weight:500!important;font-size:14px!important;font-family:var(--font-ui)!important}
}

/* Same approved composition, smaller mobile source images. */
@media screen and (max-width:760px){body.phase2-page .vocabulary-hero::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffd6 65%,#ffffffb3),url("assets/hero-centered-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d")}body .hero[data-view="worksheet"]::before{background-image:linear-gradient(90deg,#fffffff5,#ffffffde 65%,#ffffffb3),url("assets/practice-desk-jade-mobile.webp?r=ffc8ea75668bbbe3bfbf0327789bdf568c77648561979ca6e17a25c42c81d67d")}}