html,body{height:100%;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#fff;color:#111827;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}:root{--fg-main: #1f2937;--fg-muted: #0d3aee;--fg-soft: #1a77e9;--border: #e5e7eb;--border-soft: #d6e3ff;--bg-panel: #ffffff;--bg-chip: #f6f9ff;--bg-disabled: #f3f4f6;--danger: #b00020;--mono: ui-monospace, SFMono-Regular, Menlo, monospace}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden}body{font-family:system-ui,sans-serif;color:var(--fg-main);background:#fff}.app{width:min(1280px,calc(100vw - 32px));margin:20px auto;padding:16px}@media(max-width:520px){.app{width:calc(100vw - 20px);padding:12px}}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:900px){.grid-2{grid-template-columns:1fr}}.panel{border:1px solid var(--border-soft);border-radius:12px;padding:14px;background:var(--bg-panel)}.panel h3{margin:0 0 10px}h2{margin:10px 0 14px}.muted{color:var(--fg-muted)}.soft{color:var(--fg-soft)}.mono{font-family:var(--mono)}.error{margin-top:12px;color:var(--danger);white-space:pre-wrap}textarea,input,select{width:100%;padding:10px;border-radius:10px;border:1px solid #cbd7ea;font-size:16px;line-height:1.4;background:#fff}.text-surface{width:100%}button{padding:10px 14px;border-radius:10px;border:1px solid #2d3a4a;background:#fff;font-weight:600;cursor:pointer}button.secondary{border-color:#cbd7ea;background:var(--bg-chip)}button:disabled{background:var(--bg-disabled);cursor:not-allowed}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.active-toggle{background:var(--fg-muted);color:#fff;border-color:var(--fg-muted)}.inactive-toggle{background:#fff;color:var(--fg-main);border-color:#cbd7ea}.hintline{margin-top:6px;font-size:13px;color:var(--fg-soft)}.io-panel{display:grid;grid-template-rows:auto 1fr auto}.io-footer{margin-top:10px;display:grid;grid-template-rows:auto auto;row-gap:10px}.hintline--slot{min-height:18px}.io-actions{margin-top:0}.review-surface{border:1px solid #f0d98c;border-radius:10px;padding:10px;white-space:pre-wrap;min-height:2.8em;background:#fff}.review-surface:before{content:"Review mode – click a word to change it";display:block;font-size:13px;color:#8a6d00;margin-bottom:6px}.word{cursor:pointer;padding:2px 3px;border-radius:4px}.review-surface .word{background:#fff3b0;transition:background .15s ease,box-shadow .15s ease}.review-surface .word:hover{background:#ffe08a;box-shadow:0 0 0 1px #f2b705}.review-surface .word:active{background:#ffd24d}.popover{position:fixed;z-index:50;background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:8px;box-shadow:0 8px 24px #00000014;max-width:320px}.popover button{width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:6px 8px;border-radius:8px;font-weight:600}.popover button:hover{background:var(--bg-chip);border-color:#cbd7ea}.typing-help-fab{background:var(--bg-chip);border:1px solid var(--border-soft)}.typing-help-content table{width:100%;border-collapse:collapse;margin:8px 0 14px}.typing-help-content th,.typing-help-content td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}.typing-help-content th{color:var(--fg-soft);font-weight:700}@media(max-width:520px){.typing-help-content table{font-size:14px}}