*,*::before,*::after{box-sizing:border-box}
main.wide{align-items:stretch;justify-content:flex-start;width:100%;max-width:46rem;margin:0 auto;padding:2rem 1rem 3rem;text-align:left;line-height:1.55}
main.wide header{margin-bottom:1.25rem}
main.wide h1{margin:0 0 0.25rem;font-size:1.35rem}
main.wide header p{margin:0;opacity:0.7;text-wrap:balance}
main.wide section,main.wide details:not(.ai-note){border-top:1px solid rgb(128 128 128 / 0.35);padding-top:1rem;margin-top:1rem}
h2{margin:0 0 0.6rem;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;opacity:0.6}
.cjk{font-family:"Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Hiragino Sans","Malgun Gothic","Microsoft YaHei",sans-serif}
textarea{display:block;width:100%;font:inherit;padding:0.35rem 0.45rem;min-height:3.5rem;resize:vertical;font-size:1.15rem;hyphens:manual}
.row{display:flex;flex-wrap:wrap;gap:0.4rem 0.7rem;align-items:center;margin-top:0.5rem;font-size:0.85rem}
.row label{opacity:0.7}
.pair{display:inline-flex;align-items:center;gap:0.4rem;max-width:100%;min-width:0}
.pair select{min-width:0}
.pair:has(#example){flex:1 1 14rem}
.out{margin:0;font-size:1.3rem;line-height:1.4;min-height:1.4em;white-space:pre-wrap;word-break:break-word}
.forward{margin:0.6rem 0 0;font-size:1.15rem;min-height:1.4em;white-space:pre-wrap;word-break:break-word}
.align{display:flex;flex-wrap:wrap;gap:0.4rem 0.25rem;margin-top:0.9rem}
.align .newline{flex-basis:100%;height:0}
.block{border:1px solid rgb(128 128 128 / 0.35);padding:0.2rem 0.35rem}
.block .word{font-size:0.78rem;opacity:0.6;text-align:center;white-space:nowrap;margin-bottom:0.1rem}
.block .row{gap:0.2rem;justify-content:center;margin:0}
.cell{text-align:center;min-width:1.2em}
.cell .glyph{display:block;font-size:1.15rem;line-height:1.15}
.cell .keys{display:block;font-family:var(--mono);font-size:0.68rem;text-underline-offset:2px}
.short .keys{text-decoration:underline}
.guess .keys{text-decoration:underline dashed}
.plain{opacity:0.55}
.lost{text-decoration:underline dotted}
.lost .glyph{opacity:0.55}
.spelled{text-decoration:underline dashed;text-underline-offset:3px}
.legend{display:flex;flex-wrap:wrap;gap:0.25rem 0.9rem;margin:0.7rem 0 0;font-size:0.72rem;opacity:0.65}
.legend .short{text-decoration:underline}
.legend .guess{text-decoration:underline dashed}
.legend .plain{opacity:1;font-style:italic}
.legend .lost{text-decoration:underline dotted}
.alts{margin-top:0.7rem;font-size:0.95rem}
.alts div{opacity:0.75;word-break:break-word}
.alts .delta{font-family:var(--mono);font-size:0.75rem;opacity:0.6;margin-right:0.5rem}
.stats{margin:0.7rem 0 0;font-family:var(--mono);font-size:0.7rem;opacity:0.55}
.out,.forward,.alts div{hyphens:manual}
details:not(.ai-note) > summary{cursor:pointer;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.09em;opacity:0.6}
details:not(.ai-note)[open] > summary{margin-bottom:0.9rem}
.knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:0.8rem 1.4rem}
.knob label{display:flex;justify-content:space-between;font-size:0.78rem;opacity:0.7}
.knob label b{font-family:var(--mono);font-weight:500;opacity:1}
.knob input{width:100%;margin:0.15rem 0 0}
.knob p{margin:0.15rem 0 0;font-size:0.7rem;opacity:0.7}
@media (max-width:600px){main.wide{padding:1.25rem 0.9rem 2.5rem}
main.wide h1{font-size:1.2rem}
.out{font-size:1.15rem}
.align{gap:0.35rem 0.2rem}}