/* Student themes and key design are preserved in style.css. */
[hidden]{display:none!important}
body{--preview-font:1rem}body[data-text="large"]{--preview-font:1.16rem}
.appShell{width:min(1420px,calc(100% - 28px));padding:16px 0 18px;font-size:var(--preview-font)}
body[data-layout="compact"] .appShell{max-width:820px}
.appHeader{margin-bottom:14px;gap:12px}.appHeader h1{font-size:1.8rem;letter-spacing:-.04em}.appHeader h1 small{font-size:.65rem;letter-spacing:0;color:var(--muted);font-weight:500}
.eyebrow{font-size:.7rem;margin-bottom:4px}.headerActions{gap:6px}
.subButton,.primaryButton{font-size:.88rem;padding:8px 12px;min-height:36px}
.workspace{display:grid;gap:14px;grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr) minmax(240px,1fr);grid-template-areas:"input keys guide" "map map map";align-items:stretch}
.inputPanel{grid-area:input}.keypadPanel{grid-area:keys}.guidePanel{grid-area:guide}.correspondencePanel{grid-area:map}
body[data-layout="compact"] .workspace{grid-template-columns:1fr 1fr;grid-template-areas:"input input" "keys guide"}
body[data-layout="compact"] .correspondencePanel{display:none}
.inputPanel,.keypadPanel,.guidePanel,.correspondencePanel{padding:16px;margin:0;min-width:0}
.panelHeading{margin-bottom:10px;gap:10px}.panelHeading h2{font-size:1.02em}.sectionLabel{font-size:.64rem;margin:0 0 4px}
#inputArea{min-height:140px;height:140px;padding:12px;line-height:1.6;font-size:calc(var(--preview-font) * 1.18);resize:vertical}
body[data-layout="compact"] #inputArea{height:84px;min-height:84px}
.candidateBox{display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--accent-soft);border:1px solid var(--border);border-radius:12px;margin:8px 0}
.candidateBox>div{display:flex;gap:12px;align-items:center;flex-shrink:0}
#candidateText{font-size:2.2rem;line-height:1.2;color:var(--accent)}#candidateStatus{margin:0;font-size:.78rem;color:var(--muted)}
.commitActions{display:flex;gap:8px}.commitActions button{flex:1}.buttonRow{margin-top:8px;gap:6px;flex-wrap:wrap}
.helpText,.guideHint{font-size:.76rem;margin-top:8px}.keyboardArea{display:block}.tenKeyGrid{gap:7px}
.rowKey{min-height:51px;padding:4px;border-radius:10px}.rowKey strong{font-size:1.25rem;margin:0}.rowKey span{font-size:.66rem}
.editKeys{grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.editKey{min-height:54px;padding:5px;border-radius:10px}.editKey span{display:inline;font-size:.8rem}.editKey strong{display:inline;margin-left:7px;font-size:1rem}.editKey small{font-size:.65rem}
.flickGuide{margin:16px auto 8px;gap:7px}.guideKey{min-height:65px;border-radius:10px;padding:5px}.guideKey strong{font-size:1.5rem}
.guideKey.active{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent)}
.helpFooter{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px}.helpFooter p{margin:0;font-size:.77rem;color:var(--muted)}.statusBadge{font-size:.72rem;padding:6px 9px;flex-shrink:0}
#kanaMap{width:100%;border-collapse:collapse;text-align:center;table-layout:fixed;font-size:1rem}
#kanaMap caption{position:absolute;width:1px;height:1px;overflow:hidden}#kanaMap th,#kanaMap td{padding:4px;border-top:1px solid var(--border)}#kanaMap thead th{font-size:.75rem;color:var(--muted)}#kanaMap tbody th{font-size:.8rem}
#kanaMap tr.active{background:var(--accent-soft)}#kanaMap td.selected{color:var(--accent);font-weight:900;outline:2px solid var(--accent);outline-offset:-2px}
body[data-layout="wide"] .correspondencePanel{padding-top:10px;padding-bottom:10px}body[data-layout="wide"] .correspondencePanel .panelHeading{display:none}
dialog{width:min(470px,calc(100% - 24px));max-height:90vh;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);padding:22px;box-shadow:var(--shadow)}dialog::backdrop{background:#10182788}
.dialogHeading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:10px}.dialogHeading h2{margin:0;font-size:1.3rem}
dialog label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0;font-size:.95rem}dialog select{max-width:65%;border:1px solid var(--border);border-radius:8px;color:var(--text);background:var(--surface-2);padding:8px;font:inherit;font-size:.85rem}.checkLabel{justify-content:flex-start!important}dialog details{border-top:1px solid var(--border);padding-top:12px;font-size:.85rem}dialog details p{color:var(--muted)}
button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.55;transform:none!important}
.theme-select-screen{padding:20px}.themeSelectBox{max-width:740px}.themeChoices{gap:15px;grid-template-columns:repeat(3,1fr)}.themeCard{padding:20px}.themeMiniKeyboard{max-width:135px}
@media(min-width:1100px){body[data-layout="wide"] .workspace{grid-template-columns:minmax(350px,1.5fr) minmax(240px,1fr) minmax(250px,1fr)}}
@media(max-width:1050px){body[data-layout="wide"] .workspace{grid-template-columns:1fr 1fr;grid-template-areas:"input input" "keys guide" "map map"}body[data-layout="wide"] #inputArea{min-height:84px;height:84px}}
@media(max-width:650px){.appShell{width:calc(100% - 16px);padding-top:10px}.appHeader{align-items:center}.headerActions{max-width:210px}.appHeader h1{font-size:1.4rem}.appHeader h1 small,.appHeader .eyebrow{display:none}.inputPanel,.keypadPanel,.guidePanel{padding:12px}.workspace{gap:10px}body[data-layout="compact"] .workspace{grid-template-columns:1fr 1fr}.guideKey{min-height:55px}.rowKey{min-height:47px}.helpFooter{flex-direction:column;align-items:flex-start}.candidateBox{gap:8px}.candidateBox>div{gap:8px}.candidateBox .sectionLabel{font-size:.6rem}.themeChoices{gap:8px}.themeCard{padding:12px}.themeMiniKeyboard{display:none}.brandTitle{font-size:3rem}}
@media(max-width:480px){body[data-layout="compact"] .workspace,body[data-layout="wide"] .workspace{grid-template-columns:1fr;grid-template-areas:"input" "keys" "guide" "map"}.guideKey{min-height:65px}.candidateBox{align-items:flex-start}.candidateBox>div{display:block}.editKey{min-height:58px}.themeCardName{font-size:1rem}}
@media(min-width:481px) and (max-height:650px){.appShell{padding-top:8px}.appHeader{margin-bottom:8px}.inputPanel,.keypadPanel,.guidePanel{padding:10px}.workspace{gap:9px}.candidateBox{padding:4px 8px;margin:5px 0}#candidateText{font-size:1.8rem}#inputArea{height:65px!important;min-height:65px!important}.panelHeading{margin-bottom:7px}.rowKey{min-height:43px}.guideKey{min-height:55px}.helpFooter{margin-top:8px}}

/* Compact input uses the horizontal space without shrinking the kana. */
body[data-layout="compact"] .inputPanel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:7px 12px;align-items:center}
body[data-layout="compact"] .inputPanel .panelHeading{grid-column:1/-1;margin:0}
body[data-layout="compact"] .inputPanel .sectionLabel{display:none}
body[data-layout="compact"] #inputArea{grid-column:1;grid-row:2;height:70px;min-height:70px}
body[data-layout="compact"] .candidateBox{grid-column:2;grid-row:2;margin:0;height:70px}
body[data-layout="compact"] .candidateBox>div{display:block}
body[data-layout="compact"] .commitActions{grid-column:2;grid-row:3}
body[data-layout="compact"] .buttonRow{grid-column:1;grid-row:3;margin:0}
body[data-layout="compact"] #operationStatus{grid-column:1/-1;margin:0}
body[data-layout="wide"] #kanaMap caption{position:static;width:auto;height:auto;text-align:left;font-size:.72rem;color:var(--muted);padding-bottom:4px}
body[data-layout="wide"] #kanaMap thead{display:none}
body[data-layout="wide"] #kanaMap tbody{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
body[data-layout="wide"] #kanaMap tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));line-height:1.35}
body[data-layout="wide"] #kanaMap th,body[data-layout="wide"] #kanaMap td{padding:4px 2px}
@media(max-width:650px){.appHeader{flex-direction:row}.panelHeading{flex-direction:row}.headerActions{max-width:240px}.candidateBox{height:auto!important}.commitActions{flex-direction:column;gap:5px}.commitActions button{font-size:.73rem;min-height:33px}.inputPanel .buttonRow{align-content:center}.inputPanel .buttonRow button{font-size:.72rem;padding:6px 8px}}
@media(max-width:480px){body[data-layout="compact"] .inputPanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body[data-layout="compact"] .candidateBox{align-self:stretch}body[data-layout="wide"] #kanaMap tbody{grid-template-columns:1fr}}
@media(min-width:481px) and (max-height:650px){.panelHeading .sectionLabel{display:none}.panelHeading{min-height:20px}.editKey{min-height:48px}.headerActions{flex-wrap:nowrap}.inputPanel .buttonRow button{font-size:.76rem;padding:6px 8px}.helpFooter p{font-size:.67rem}.statusBadge{font-size:.65rem}}

@media(min-width:651px){body[data-layout="compact"] .panel{padding:14px}body[data-layout="compact"] .appShell{padding-bottom:12px}}

body[data-layout="compact"] #operationStatus{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(min-width:481px) and (max-height:650px){
body[data-layout="compact"] .panel{padding:10px}
.rowKey strong{line-height:1.15}.rowKey span{line-height:1.2}.rowKey{padding:2px;min-height:43px}
}

@media(min-width:481px) and (max-height:650px){
body[data-layout="compact"] #inputArea{height:58px!important;min-height:58px!important}
body[data-layout="compact"] .candidateBox{min-height:58px;height:58px!important}
body[data-layout="compact"] .appShell{padding-bottom:5px}
body[data-layout="compact"] .workspace{gap:7px}
}

@media(min-width:1051px){
body[data-layout="wide"] #inputArea{min-height:100px;height:100px}
body[data-layout="wide"] #kanaMap tr{line-height:1.2}
body[data-layout="wide"] #kanaMap td,body[data-layout="wide"] #kanaMap th{padding:2px}
body[data-layout="wide"] .correspondencePanel{padding-top:8px;padding-bottom:8px}
}

body[data-layout="compact"] .candidateBox .sectionLabel{display:block;font-size:.6rem;margin:0}