:root {
      color-scheme: dark;
      --bg:#10121b; --surface:#191c29; --raised:#222635; --hover:#292e40;
      --text:#ffffff; --border:#34394c;
      --accent:#c3b4ff; --accent-bg:#39304f; --mint:#a4e3ce; --mint-bg:#233e38;
      --danger:#ffb4b4; --danger-bg:#432c35; --gold:#f2ce88; --shadow:0 20px 60px #00000024;
      --radius:22px; --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
    }
    :root[data-theme="light"] {
      color-scheme: light;
      --bg:#f3f2ef; --surface:#ffffff; --raised:#f3f3f8; --hover:#eaeaf2;
      --text:#000000; --border:#d9dce6;
      --accent:#6748af; --accent-bg:#eee7fa; --mint:#216750; --mint-bg:#e4f3eb;
      --danger:#a52841; --danger-bg:#fce8ed; --gold:#936218; --shadow:0 20px 60px #37325109;
    }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }
    body { margin:0; font-size:19px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
    body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 80% 0%,#9c86eb0b,transparent 55%); }
    button,input,select { font:inherit; }
    button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
    button { cursor:pointer; }
    button:disabled { cursor:not-allowed; opacity:1; border-style:dashed; }
    a { color:inherit; text-decoration:none; }
    a:hover { text-decoration:underline; text-underline-offset:4px; }
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
    h1,h2,p { margin:0; }
    h1 { font-size:clamp(34px,4.13vw,54px); letter-spacing:-1.6px; line-height:1.14; font-weight:720; }
    h2 { font-size:25px; letter-spacing:-.45px; }
    .jp { font-family:var(--jp); font-weight:400; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .skip-link { position:fixed; top:-70px; left:16px; z-index:100; padding:12px 18px; background:var(--surface); border:2px solid var(--accent); border-radius:10px; }
    .skip-link:focus { top:12px; }
    .container { width:min(1180px,100% - 48px); margin-inline:auto; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; border-bottom:1px solid var(--border); }
    .brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .brand:hover { text-decoration:none; }
    .brand-mark { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:var(--text); background:var(--accent-bg); font:32px var(--jp); }
    .brand-name { display:block; font-size:15px; font-weight:750; letter-spacing:1.1px; }
    .brand-sub { display:block; font-size:14px; color:var(--text); margin-top:2px; }
    .topnav { display:flex; align-items:center; gap:9px; }
    .nav-link,.icon-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:42px; border:1px solid transparent; border-radius:10px; padding:8px 11px; color:var(--text); background:transparent; font-size:15px; font-weight:600; }
    .nav-link:hover,.icon-button:hover { background:var(--raised); color:var(--text); text-decoration:none; }
    .donate-nav { color:var(--text); border-color:var(--border); }
    .icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .hero { padding:34px 0 27px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
    .notice { position:relative; overflow:hidden; display:flex; gap:12px; align-items:center; justify-content:space-between; border:1px solid var(--border); background:var(--raised); border-radius:14px; margin:0 0 18px; padding:12px 16px; font-size:15px; color:var(--text); }
    .notice.error { background:var(--danger-bg); border-color:var(--danger); }
    .notice button { background:none; border:0; color:inherit; padding:6px; min-width:32px; font-size:24px; }
    .notice-timer { position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; pointer-events:none; }
    @keyframes notice-countdown { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .workspace { display:grid; grid-template-columns:minmax(0,1fr) 284px; align-items:start; gap:22px; }
    .main-column { min-width:0; }
    .scope-row { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
    .segmented { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--border); background:var(--surface); border-radius:13px; }
    .segment { border:0; border-radius:9px; background:transparent; color:var(--text); padding:8px 5px; min-height:39px; font-size:15px; font-weight:650; }
    .segment[data-scope="mixed"] { grid-column:1 / -1; }
    .segment:hover { color:var(--text); background:var(--raised); }
    .segment[aria-pressed="true"] { background:var(--accent-bg); color:var(--text); }
    .segment.is-mixed { background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent); }
    .scope-count { font-size:14px; color:var(--text); }
    .activity-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-bottom:16px; }
    .activity-tab { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; border:0; border-radius:10px; background:transparent; color:var(--text); font-size:15px; font-weight:650; min-height:46px; }
    .activity-tab:hover { background:var(--raised); color:var(--text); }
    .activity-tab[aria-pressed="true"] { background:var(--accent-bg); color:var(--text); }
    .exercise-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:25px 28px 20px; box-shadow:var(--shadow); overflow:hidden; }
    .exercise-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .badge { font-size:14px; font-weight:750; text-transform:uppercase; letter-spacing:1.3px; color:var(--text); background:var(--accent-bg); border-radius:6px; padding:5px 9px; }
    .round-count { color:var(--text); font-size:14px; font-variant-numeric:tabular-nums; }
    .progress-track { height:4px; background:var(--raised); border-radius:4px; margin-top:17px; overflow:hidden; }
    .progress-fill { height:100%; width:0%; background:var(--mint); border-radius:inherit; transition:width .24s ease; }
    .question-area { text-align:center; padding:25px 0 21px; }
    .question-label { color:var(--text); font-size:15px; }
    .prompt { min-height:160px; display:flex; align-items:center; justify-content:center; font-size:clamp(90px,11.8vw,130px); line-height:1.4; margin:5px 0; letter-spacing:4px; }
    .prompt.romaji { font-family:inherit; font-size:clamp(64px,8.26vw,87px); font-weight:550; letter-spacing:-2px; }
    .prompt.multi { font-size:clamp(78px,10.62vw,111px); }
    .listen-button { display:inline-flex; align-items:center; gap:7px; margin-top:18px; padding:7px 12px; min-height:36px; font-size:14px; font-weight:600; border:1px solid var(--border); border-radius:999px; color:var(--text); background:transparent; }
    .listen-button:hover { background:var(--raised); color:var(--text); }
    .listen-button.playing { color:var(--text); border-color:var(--mint); }
    .options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .option-button { position:relative; display:flex; align-items:center; justify-content:center; min-height:67px; padding:12px 35px; border:1px solid var(--border); border-radius:13px; color:var(--text); background:var(--raised); font-size:28px; transition:background .15s,border-color .15s,transform .15s; }
    .option-button:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-bg); transform:translateY(-1px); }
    .option-button .answer-mark { position:absolute; right:14px; font-size:20px; }
    .option-button:disabled { opacity:1; cursor:default; }
    .option-button.is-correct { background:var(--mint-bg); border-color:var(--mint); color:var(--text); }
    .option-button.is-wrong { background:var(--danger-bg); border-color:var(--danger); color:var(--text); }
    .answer-form { display:flex; align-items:stretch; gap:10px; }
    .answer-input { min-width:0; width:100%; padding:14px 17px; background:var(--raised); color:var(--text); border:1px solid var(--border); border-radius:12px; font-size:27px; text-align:center; }
    input::placeholder { color:var(--text); opacity:1; }
    .answer-input::placeholder { color:var(--text); font-size:19px; }
    .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; border-radius:11px; padding:10px 16px; border:1px solid var(--border); background:var(--raised); color:var(--text); font-size:15px; font-weight:650; }
    .button:hover:not(:disabled) { background:var(--hover); text-decoration:none; }
    .button.primary { color:var(--text); border-color:var(--mint); background:var(--mint-bg); }
    .button.primary:hover:not(:disabled) { background:var(--raised); }
    .button.small { font-size:14px; min-height:36px; padding:7px 11px; }
    .button.ghost { background:transparent; color:var(--text); border-color:transparent; }
    .feedback { min-height:67px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; text-align:center; padding:12px 0 8px; }
    .feedback-title { font-size:18px; font-weight:700; }
    .feedback-detail { font-size:15px; color:var(--text); }
    .feedback-tip { font-size:14px; color:var(--text); margin-top:3px; max-width:540px; }
    .exercise-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:13px; border-top:1px solid var(--border); }
    .keyboard-hint { text-align:left; font-size:14px; color:var(--text); margin:14px 0 0; }
    kbd { font:inherit; border:1px solid var(--border); border-radius:4px; padding:1px 4px; white-space:nowrap; }
    .session-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:15px; }
    .stat { padding:13px 8px; background:var(--surface); border:1px solid var(--border); border-radius:13px; text-align:center; min-width:0; }
    .stat-label { font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--text); }
    .stat strong { display:block; font-weight:600; font-size:26px; letter-spacing:-.5px; margin-top:2px; font-variant-numeric:tabular-nums; }
    .session-caption { margin:10px 2px 0; font-size:14px; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .session-caption .button { min-height:30px; padding:4px 8px; font-size:14px; }
    .settings { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; }
    .settings-heading { display:flex; align-items:center; justify-content:space-between; font-size:17px; font-weight:700; margin-bottom:22px; }
    .setting-group + .setting-group { margin-top:20px; }
    .setting-label { display:block; font-size:14px; font-weight:650; color:var(--text); margin-bottom:8px; }
    .mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .mode-button { min-height:43px; padding:9px 5px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--raised); font-size:14px; font-weight:650; }
    .mode-button[aria-pressed="true"] { border-color:var(--accent); color:var(--text); background:var(--accent-bg); }
    .mode-button.is-mixed { border-color:var(--accent); background:var(--accent-bg); }
    .setting-help { margin-top:8px; color:var(--text); font-size:14px; line-height:1.65; }
    select { width:100%; min-height:41px; border:1px solid var(--border); border-radius:9px; background:var(--raised); color:var(--text); padding:8px 10px; font-size:14px; }
    .check-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:var(--text); cursor:pointer; min-height:34px; }
    .check-row + .check-row { margin-top:8px; }
    input[type="checkbox"] { width:17px; height:17px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
    input[type="range"] { width:100%; accent-color:var(--accent); margin:6px 0 0; }
    .more-options { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; }
    .more-options > summary { font-size:15px; font-weight:700; }
    .settings details + details { margin-top:12px; }
    details summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--text); padding:3px 0; }
    details[open] > summary { margin-bottom:14px; color:var(--text); }
    .data-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .data-actions .button { font-size:14px; padding-inline:9px; }
    .lifetime-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:var(--text); margin:8px 0; }
    .lifetime-row strong { color:var(--text); font-weight:650; }
    .review-count { display:inline-block; color:var(--text); font-weight:650; }
    .match-intro { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:24px 0 19px; }
    .match-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
    .match-tile { min-height:106px; border:1px solid var(--border); border-radius:13px; color:var(--text); background:var(--raised); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:12px 6px; }
    .match-tile .tile-content { font-size:30px; line-height:1.5; }
    .match-tile[data-kind="kana"] .tile-content { font-size:39px; }
    .match-tile:hover:not(:disabled) { border-color:var(--accent); }
    .match-tile.is-selected { border-color:var(--accent); color:var(--text); background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent); }
    .match-tile.is-wrong { border-color:var(--danger); background:var(--danger-bg); }
    .match-tile.is-matched { border-color:var(--mint); background:var(--mint-bg); color:var(--text); opacity:1; cursor:default; }
    .match-tile.is-matched::after { content:"✓"; position:absolute; top:6px; right:9px; font-size:14px; }
    .match-message { font-size:15px; color:var(--text); text-align:center; min-height:51px; padding-top:17px; }
    .match-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--border); }
    .explore-top { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:19px; }
    .explore-top p { color:var(--text); font-size:14px; margin-top:6px; }
    .search-input { width:100%; border:1px solid var(--border); border-radius:11px; background:var(--raised); color:var(--text); padding:12px 14px; font-size:17px; }
    .explore-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:18px; }
    .kana-tile { border:1px solid var(--border); border-radius:11px; background:var(--raised); color:var(--text); min-height:92px; padding:10px 4px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; position:relative; }
    .kana-tile .jp { font-size:34px; }
    .kana-tile .tile-romaji { color:var(--text); font-size:14px; }
    .kana-tile:hover { border-color:var(--accent); background:var(--accent-bg); }
    .kana-tile.needs-review::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); position:absolute; top:8px; right:8px; }
    .explore-count { font-size:14px; color:var(--text); margin-top:13px; }
    .summary { padding:38px 0 24px; text-align:center; }
    .summary-seal { width:67px; height:67px; border-radius:50%; background:var(--mint-bg); color:var(--text); display:grid; place-items:center; margin:0 auto 20px; font-size:33px; }
    .summary h2 { font-size:31px; }
    .summary > p { color:var(--text); font-size:17px; margin-top:9px; }
    .summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:28px 0; }
    .summary-grid div { background:var(--raised); border-radius:12px; padding:16px 8px; font-size:14px; color:var(--text); }
    .summary-grid strong { display:block; font-size:30px; margin-bottom:3px; color:var(--text); font-weight:600; }
    .summary-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
    .empty-state { padding:55px 10px; text-align:center; }
    .empty-state .empty-icon { font:61px var(--jp); color:var(--text); margin-bottom:20px; }
    .empty-state p { color:var(--text); font-size:17px; max-width:440px; margin:12px auto 20px; }
    .support-section { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 28px; border:1px solid var(--border); background:var(--surface); border-radius:18px; margin:30px 0 0; }
    .support-copy { display:flex; align-items:center; gap:17px; }
    .support-symbol { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-bg); color:var(--text); flex-shrink:0; }
    .support-copy h2 { font-size:19px; letter-spacing:-.2px; }
    .support-copy p { color:var(--text); font-size:14px; margin-top:5px; }
    .support-section .button { white-space:nowrap; color:var(--text); border-color:var(--accent); background:transparent; }
    footer { padding:23px 0 30px; display:flex; align-items:center; justify-content:space-between; gap:15px; color:var(--text); font-size:14px; }
    footer a { color:var(--text); }
    dialog { width:min(440px,calc(100% - 36px)); border:1px solid var(--border); border-radius:18px; padding:25px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
    dialog::backdrop { background:#070914b3; }
    dialog p { font-size:15px; color:var(--text); margin:12px 0 23px; }
    dialog .dialog-actions { display:flex; justify-content:flex-end; gap:9px; }
    @media (max-width:920px) {
      .workspace { grid-template-columns:minmax(0,1fr) 250px; gap:16px; }
      .settings { padding:20px 16px; }
      .exercise-card { padding:23px 20px 18px; }
      .match-board { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .activity-tab { flex-direction:column; gap:5px; font-size:14px; }
      .activity-tab .icon { width:16px; }
    }
    @media (max-width:740px) {
      .container { width:calc(100% - 28px); }
      .topbar { gap:10px; padding:17px 0; }
      .brand-mark { width:37px; height:37px; font-size:28px; border-radius:11px; }
      .brand { gap:9px; }
      .brand-name { font-size:14px; letter-spacing:.7px; }
      .brand-sub { font-size:14px; }
      .topnav { gap:1px; }
      .nav-link { padding:8px; font-size:14px; min-height:38px; }
      .icon-button { padding:8px; min-height:38px; }
      .home-label { display:none; }
      .hero { padding:26px 0 23px; gap:8px; }
      h1 { letter-spacing:-1px; }
      .workspace { grid-template-columns:1fr; }
      .segmented { width:100%; }
      .segment { padding:7px 5px; font-size:14px; }
      .activity-tabs { gap:4px; padding:5px; border-radius:14px; margin-bottom:13px; }
      .activity-tab { flex-direction:column; gap:4px; padding:9px 2px; min-height:59px; font-size:14px; }
      .activity-tab .icon { width:18px; }
      .exercise-card { padding:20px 16px 17px; border-radius:18px; }
      .question-area { padding:19px 0 18px; }
      .prompt { min-height:143px; }
      .option-button { min-height:61px; font-size:26px; }
      .settings { padding:21px; }
      .settings-heading { margin-bottom:16px; }
      .mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .setting-group + .setting-group { margin-top:17px; }
      .match-board { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
      .match-tile { min-height:91px; }
      .match-tile .tile-content { font-size:25px; }
      .match-tile[data-kind="kana"] .tile-content { font-size:33px; }
      .match-intro { margin-top:21px; }
      .support-section { padding:20px; margin-top:22px; }
      .support-copy { gap:12px; }
      .support-symbol { display:none; }
      .support-copy h2 { font-size:17px; }
      .support-copy p { font-size:14px; }
      .support-section .button { padding:9px 12px; font-size:14px; }
      footer { align-items:flex-start; }
    }
    @media (max-width:390px) {
      .container { width:calc(100% - 20px); }
      .topbar { flex-wrap:wrap; }
      .brand-sub { display:none; }
      .session-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .match-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .match-tile { min-height:91px; }
      .explore-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
      .stat-label { font-size:14px; letter-spacing:.3px; }
      .option-button { padding-inline:28px; }
      .answer-form { flex-wrap:wrap; }
      .answer-form .button { width:100%; }
      .support-section { flex-direction:column; align-items:flex-start; gap:14px; }
    }
    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    }
    @media print {
      .topnav,.settings,.activity-tabs,.support-section,.keyboard-hint { display:none; }
      .workspace { display:block; }
      body { background:white; color:black; }
    }

    /* Ajustes de vocabulario sobre el diseño original de kana. */
    .levels { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .segment:disabled { opacity:.48; }
    .segment.is-mixed { background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent); }
    .all-modes { grid-column:1 / -1; }
    .prompt,.prompt.multi { font-size:clamp(36px,6.3vw,70px); letter-spacing:0; line-height:1.9; min-height:160px; overflow-wrap:anywhere; }
    .prompt.spanish { font-family:inherit; font-size:clamp(27px,4.2vw,46px); line-height:1.35; }
    .prompt.audio-prompt { font-family:inherit; font-size:30px; letter-spacing:0; }
    ruby { ruby-position:over; ruby-align:center; }
    rt { font-size:.38em; font-weight:400; letter-spacing:.04em; line-height:1.3; }
    .option-button { min-height:88px; font-size:22px; line-height:1.7; padding:15px 28px; overflow-wrap:anywhere; }
    .option-button.jp { font-size:28px; }
    .option-key { position:absolute; left:10px; top:7px; font:12px system-ui; }
    .match-board { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .match-tile .tile-content { font-size:19px; overflow-wrap:anywhere; line-height:1.8; }
    .match-tile[data-kind="jp"] .tile-content { font-size:25px; }
    .match-tile { min-height:120px; padding:14px 9px; }
    .explore-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .vocab-tile { min-height:145px; padding:18px 10px 12px; gap:8px; }
    .vocab-tile .jp { font-size:28px; line-height:1.9; overflow-wrap:anywhere; }
    .tile-meaning { font-size:15px; overflow-wrap:anywhere; }
    .tile-level { font-size:11px; align-self:flex-start; background:var(--accent-bg); border-radius:4px; padding:2px 5px; }
    #explore-more { display:flex; margin:18px auto 0; }
    #feedback-detail { line-height:2; overflow-wrap:anywhere; }
    #feedback-detail .jp { font-size:24px; }
    .word-reveal { display:block; }
    .notice { align-items:flex-start; }
    @media(max-width:920px) { .match-board { grid-template-columns:repeat(3,minmax(0,1fr)); } .explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:740px) { .prompt,.prompt.multi { font-size:clamp(32px,8vw,54px); min-height:140px; } .match-board { grid-template-columns:repeat(3,minmax(0,1fr)); } .levels { grid-template-columns:repeat(5,minmax(0,1fr)); } }
    @media(max-width:430px) { .match-board { grid-template-columns:repeat(2,minmax(0,1fr)); } .option-button { font-size:18px; padding:16px 22px; } .option-button.jp { font-size:23px; } .answer-form { flex-wrap:wrap; } .answer-form .button { width:100%; } .explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .topbar{flex-wrap:wrap}.topnav{flex-wrap:wrap}.topnav .nav-link{white-space:nowrap}@media(max-width:600px){.topbar{align-items:flex-start}.topnav{width:100%;gap:3px}.topnav .nav-link{padding:8px 9px;min-height:42px}.topnav .icon-button{margin-left:auto}}

.prompt{min-height:110px;font-family:inherit;font-size:clamp(25px,4vw,42px);font-weight:600;line-height:1.4;letter-spacing:0;overflow-wrap:anywhere}.options{grid-template-columns:1fr}.option-button{font-size:19px;justify-content:flex-start;padding:16px}.option-button small{margin-right:15px;color:var(--accent)}.controls{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.controls button,.plain-button{border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--raised);color:var(--text)}.controls .primary{background:var(--accent-bg);border-color:var(--accent)}input,select,textarea{max-width:100%;border:1px solid var(--border);border-radius:9px;background:var(--raised);color:var(--text);padding:9px}#written,#search{width:100%}.muted{font-size:14px}.feedback{padding:16px;border-radius:12px;background:var(--raised);margin-top:16px;white-space:pre-line}.correct{border-color:var(--accent)!important;background:var(--accent-bg)!important}.wrong{border-color:var(--danger)!important;background:var(--danger-bg)!important}.chips{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow:auto}.chip{font-size:13px;border:1px solid var(--border);background:var(--raised);color:var(--text);border-radius:8px;padding:7px}.chip[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent)}.setting-group{margin:18px 0}.setting-group label{display:block;font-size:14px;margin:8px 0}.explore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.word-card{border:1px solid var(--border);border-radius:12px;padding:15px;overflow-wrap:anywhere}.word-card h3{font-size:19px;margin:0}.word-card p{font-size:16px;margin:8px 0}.match-board{grid-template-columns:repeat(2,minmax(0,1fr))}.match-tile{font-size:18px;min-height:80px;overflow-wrap:anywhere}.match-tile.is-matched{background:var(--accent-bg);border-color:var(--accent)}.stats-row{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;margin-top:18px}.topnav{flex-wrap:wrap}.topbar{flex-wrap:wrap}#summary h2{margin:18px 0}#notice{white-space:pre-line}.progress-fill{background:var(--accent)}@media(max-width:560px){.explore-grid{grid-template-columns:1fr}.brand-sub{display:none}.topnav{gap:2px}.nav-link{font-size:13px;padding:7px}.activity-tab{font-size:12px;padding:10px 2px}.exercise-card{padding:20px 16px}.container{width:calc(100% - 24px)}}

/* Chinese keeps the shared practice layout, with language-specific reading sizes. */
.hanzi{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-weight:500}.prompt{overflow-wrap:anywhere}.pinyin{font-size:22px;margin-top:8px;min-height:33px}.explore-card h3{font-size:30px;margin:0 0 5px}.explore-card p{margin:4px 0}.explore-card{overflow-wrap:anywhere}.options button{width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere}.option-letter{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:8px;margin-right:12px;flex-shrink:0;font-size:15px}.options button.correct{border-color:var(--mint);background:var(--mint-bg);color:var(--text)}.options button.wrong{border-color:var(--danger);background:var(--danger-bg);color:var(--text)}.options button:disabled{border-style:solid}.option-mark{margin-left:auto;font-size:15px}.topnav{flex-wrap:wrap}.setting-group select{width:100%}#summary .controls{flex-wrap:wrap}.review-history{opacity:1}.empty-state{padding:20px 0}.stats-row{flex-wrap:wrap}#feedback{overflow-wrap:anywhere}.explore-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} @media(max-width:600px){.topbar{align-items:flex-start;flex-direction:column;gap:12px}.topnav{gap:4px}.nav-link{padding:8px}.hero{padding:24px 0}.container{width:calc(100% - 28px)}.options button{padding:14px 12px}.option-mark{font-size:12px}.brand-sub{font-size:13px}}
.options button.correct{background:var(--mint-bg)!important;border-color:var(--mint)!important}.activity-tab[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent);color:var(--text)}.word-card.explore-card h3{font-size:30px}.word-card.explore-card p{margin:4px 0}.option-mark{padding-left:8px;white-space:nowrap}.options button>span:nth-child(2){min-width:0}.activity-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Portuguese uses the shared layout without Chinese typefaces. */
.word-card.explore-card h3{font-family:inherit;font-size:23px}.prompt{font-family:inherit}.pinyin:empty{display:none}.chip{min-height:42px}