/* Shared product system lives in styles.css, used unchanged by Hanzi and these
   tools. This file contains only practice-controller and locale adaptations. */
.practice-tool [hidden]{display:none!important}
.practice-tool select,.practice-tool summary{font:inherit;cursor:pointer}
.practice-tool select:focus-visible,.practice-tool summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.practice-tool .brand{min-width:0}.practice-tool .brand-mark{flex-shrink:0}
.practice-tool .header-actions{display:flex;align-items:center;gap:20px}
.practice-tool .header-actions>a{font-size:12px;color:var(--green)}
.practice-tool .locale-picker{position:relative}
.practice-tool .locale-picker summary{display:flex;align-items:center;gap:8px;list-style:none;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:#fffefb;font-size:12px}
.practice-tool .locale-picker summary::-webkit-details-marker{display:none}
.practice-tool .locale-picker nav{position:absolute;right:0;top:calc(100% + 8px);z-index:5;display:grid;min-width:185px;max-width:calc(100vw - 40px);padding:6px;border:1px solid var(--border);border-radius:8px;background:#fffefb;box-shadow:0 8px 24px #37422515}
.practice-tool .locale-picker nav a{padding:12px;border-radius:5px}
.practice-tool .locale-picker nav a:hover,.practice-tool .locale-picker nav a[aria-current=page]{color:var(--green);background:#eef2e9}
.practice-tool .locale-picker nav a[aria-current=page]{font-weight:650}
.practice-tool .globe{width:17px;height:17px;flex:none}
.practice-tool .intro{gap:28px}.practice-tool .intro>div:first-child{min-width:0}
.practice-tool .intro h1{overflow-wrap:anywhere}
.practice-tool .intro-description{max-width:730px}
.practice-tool select{width:100%;min-width:0;min-height:40px;padding:8px 30px 8px 12px;border:1px solid #e0e3d7;border-radius:6px;background:#fffefb;color:#404c3d;font-size:12px}
.practice-tool select:hover{border-color:#bbc4b6}
.practice-tool .input-label{margin-top:20px!important}
.practice-tool textarea{height:104px;font-size:17px;letter-spacing:0}
.practice-tool .content-meta p{margin:0}.practice-tool .content-meta output{white-space:nowrap;font-variant-numeric:tabular-nums}
.practice-tool .over-limit{color:#ac594b;font-weight:650}
.practice-tool .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:20px}
.practice-tool .guide-size-field{margin-bottom:22px}

.practice-tool .guide-note,.practice-tool .privacy-note,.practice-tool .print-hint{font-size:10px;line-height:1.75;color:#838876}
.practice-tool .guide-note{margin:18px 0 0}
.practice-tool .privacy-note{display:flex;gap:7px;margin:12px 0 0}
.practice-tool .print-hint{text-align:center;margin:12px 0 0}
.practice-tool .secondary-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 13px;border:1px solid #aebca3;border-radius:7px;color:var(--green);background:#fffefb;font-size:12px}
.practice-tool .secondary-button:hover:not(:disabled){background:#eef2e9}
.practice-tool .secondary-button:disabled{opacity:.55}
.practice-tool #generate-button{width:100%;justify-content:space-between;margin-bottom:10px}
.practice-tool .export-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.practice-tool .download-button{height:auto;min-height:47px;line-height:1.4;padding:10px}
.practice-tool .preview-toolbar{height:auto;min-height:42px;gap:8px;flex-wrap:wrap}
.practice-tool .preview-heading{min-width:0;flex-wrap:wrap}
.practice-tool .preview-state{max-width:48%;line-height:1.5}.practice-tool #preview-status{overflow-wrap:anywhere}
.practice-tool .preview-stage[aria-busy=true]::after{content:'';position:absolute;inset:0;background:#fffefb99;pointer-events:none}
.practice-tool .preview-stage.is-stale #preview-page{opacity:.5}
.practice-tool #preview-page{width:100%;max-width:545px;margin:0 auto;transition:opacity .2s}
.practice-tool #preview-page svg{display:block;width:100%;height:auto;box-shadow:0 2px 3px #39412709,0 12px 26px #37422512}
.practice-tool #preview-empty{max-width:545px;margin:0 auto;aspect-ratio:210/297;display:grid;place-items:center;text-align:center;padding:30px;background:#fffefa;font-size:12px;line-height:1.8;color:#838876}
.practice-tool .page-navigation{justify-content:flex-end;gap:13px}

.practice-tool .page-navigation output{min-width:36px;text-align:center}
.practice-tool .notice{font-size:11px;line-height:1.75;background:#f2f4ec;border:1px solid #dfe5d6;border-radius:6px;padding:10px 13px;color:#62775c;margin:0 0 12px}
.practice-tool .notice p{margin:0}
.practice-tool .warning{background:#fff4de;border-color:#e4cc99;color:#7d6030}
.practice-tool .text-button{min-height:32px;text-decoration:underline}
.practice-tool .scope-note{margin-top:24px}
.practice-tool .font-licenses a{text-decoration:underline;text-underline-offset:3px}
.practice-tool .site-footer{margin-top:25px;flex-wrap:wrap}.practice-tool .site-footer>a{font-size:11px}
.practice-tool .skip-link{position:fixed;left:15px;top:-80px;z-index:50;background:var(--green);color:white;border-radius:6px;padding:12px}
.practice-tool .skip-link:focus{top:15px}.practice-tool .noscript{margin:30px;padding:20px;background:#fff4de;color:#7d6030}
html:not([lang^="zh"]) .practice-tool .brand-name{letter-spacing:0;font-size:20px}
html:not([lang^="zh"]) .practice-tool .brand-name small{letter-spacing:.3px;max-width:250px;line-height:1.4}
html:not([lang^="zh"]) .practice-tool .intro h1{letter-spacing:0;line-height:1.3}
@media(max-width:800px){.practice-tool .intro{align-items:flex-start;flex-direction:column;gap:18px}.practice-tool .field-meta{flex-wrap:wrap}.practice-tool .export-actions{grid-template-columns:1fr}.practice-tool .header-actions{gap:10px}.practice-tool .brand-name small{max-width:200px}}
@media(max-width:660px){.practice-tool .site-header{height:auto;min-height:82px;gap:12px;flex-wrap:wrap;padding:18px 0}.practice-tool .header-actions{flex-shrink:0}.practice-tool .intro-description{max-width:none;font-size:12px}.practice-tool .export-actions{grid-template-columns:minmax(0,1fr) auto}.practice-tool .field-meta{font-size:11px}.practice-tool .preset-select,.practice-tool input[type=text],.practice-tool textarea{font-size:16px}.practice-tool .site-footer p{text-align:center}.practice-tool .page-navigation button{width:44px;height:44px}}
@media(max-width:370px){.practice-tool .header-actions{width:100%;justify-content:space-between}}
/* Same native controls and selected/focus states as the Hanzi panel. */
.practice-tool .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.practice-tool .preset-select{margin-bottom:10px}
.practice-tool .content-label{gap:10px;align-items:flex-start}
.practice-tool .content-label .text-button{flex-shrink:0;max-width:54%;text-align:start;text-decoration:none;line-height:1.5}
.practice-tool .content-label .text-button svg{flex-shrink:0;margin-top:2px}
.practice-tool .practice-mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;background:#efefe7;border-radius:8px}
.practice-tool #writing-style-options .practice-mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.practice-tool .practice-mode-options label{position:relative;min-width:0;cursor:pointer}
.practice-tool .practice-mode-options input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.practice-tool .practice-mode-options label>span{display:flex;align-items:center;justify-content:center;min-height:57px;height:100%;padding:8px 5px;border:1px solid transparent;border-radius:5px;text-align:center;font-size:11px;line-height:1.5;color:#808675;overflow-wrap:anywhere}
.practice-tool .practice-mode-options input:checked+span{color:var(--green);background:#fffffc;box-shadow:0 2px 5px #3b432212}
.practice-tool .practice-mode-options input:focus-visible+span{outline:2px solid var(--green);outline-offset:3px}
.practice-tool .practice-mode-options label:hover>span{color:var(--green)}
.practice-tool .toggle-field{gap:16px}.practice-tool .toggle-field>span:first-child{min-width:0;line-height:1.5}
.practice-tool .is-disabled{opacity:.5}.practice-tool .is-disabled input{cursor:default}
.practice-tool .color-options{gap:14px;flex-wrap:wrap}.practice-tool .color-option{line-height:1.5}.practice-tool .color-dot{flex:none}
.practice-tool .preview-footer{gap:12px}.practice-tool #page-summary{line-height:1.5}
@media(forced-colors:active){.practice-tool .practice-mode-options input:checked+span{border-color:Highlight}.practice-tool .color-option input:checked+.color-dot{outline:2px solid Highlight}}
#practice-print-root{display:none}
@media print{html,body{background:#fff;margin:0!important;padding:0!important}body>*{display:none!important}body>#practice-print-root{display:block!important}.practice-print-page{break-after:page;page-break-after:always;overflow:hidden;margin:0!important;padding:0!important}.practice-print-page:last-child{break-after:auto;page-break-after:auto}.practice-print-page>svg{display:block!important;box-shadow:none!important;max-width:none!important}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}