:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#171c20;background:#eef2f2;--line:#e0e6e7;--soft:#f4f6f7;--teal:#087e75;--teal-soft:#e6f7f4;--bright:#10b3a4}
  *{box-sizing:border-box}
  body{margin:0}
  button{font:inherit;color:inherit;cursor:pointer}
  button:disabled{cursor:default}
  button:focus-visible,a:focus-visible{outline:3px solid #087e75;outline-offset:3px}
  [hidden]{display:none!important}
  .app{max-width:460px;min-height:100vh;margin:auto;background:white;display:flex;flex-direction:column}
  .practice-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 460px);
    gap: 24px;
    max-width: 704px;
    margin: auto;
    padding-inline: 20px;
  }
  .practice-layout .app { width: 100%; margin: 0; }
  .practice-sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
    margin-top: 20px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .practice-sidebar h2 { margin: 0 0 8px; font-size: 14px; }
  #practice-nav { display: grid; gap: 4px; }
  #practice-nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 8px;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  #practice-nav a:hover, #practice-nav a[aria-current=page] {
    background: var(--teal-soft);
    color: var(--teal);
  }
  #practice-menu { display: none; }
  @media (max-width: 704px) {
    .practice-layout { display: block; max-width: 460px; padding-inline: 0; }
    .practice-sidebar {
      position: static;
      margin: 0;
      padding: 3px 18px;
      border-width: 0 0 1px;
      border-radius: 0;
    }
    .practice-sidebar h2 { display: none; }
    #practice-menu {
      display: inline-block;
      min-height: 38px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--teal);
      font-size: 13px;
      font-weight: 750;
    }
    #practice-menu[aria-expanded=false] + nav { display: none; }
    #practice-nav { padding-bottom: 6px; }
  }
  header{padding:16px 18px 13px;border-bottom:1px solid var(--line)}
  .heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  h1{font-size:19px;letter-spacing:-.04em;margin:0}
  .count{font-size:12px;font-weight:700;color:#526364;white-space:nowrap}
  .home-links{display:grid;gap:8px;padding:16px 18px}
  .home-links a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--teal);font-weight:750;text-decoration:none}
  .question{padding:16px 18px 14px}
  h2{font-size:16px;line-height:1.45;margin:0 0 12px;word-break:keep-all}
  .media{display:flex;align-items:center;justify-content:center;gap:7px;min-height:98px;margin-bottom:12px;border:1px solid #e1e6e4;border-radius:12px;background:#f2f5f4;color:#586965;font-size:13px}
  .media svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
  .slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f7f8f9;
  }
  .slot-field { display: grid; align-content: start; gap: 5px; min-width: 0; }
  .slot{position:relative;border:1px solid #d9e1e1;border-radius:10px;background:white;min-height:56px;padding:7px 5px;display:grid;align-content:center;text-align:center}
  .slot[aria-current=true]{border-color:var(--bright);background:var(--teal-soft);box-shadow:inset 0 0 0 1px var(--bright)}
  .slot:disabled:not([data-filled]){opacity:.7}
  .slot-value{font-size:14px;line-height:1.25;font-weight:750;overflow-wrap:anywhere}
  .slot-label{font-size:11px;color:var(--result-ink,var(--teal));font-weight:700;text-align:center}
  .slot-field[data-result=correct] {
    --result-ink: #166534;
    --result-bg: #eaf9ef;
    --result-line: #86bc94;
  }
  .slot-field[data-result=wrong] {
    --result-ink: #b91c1c;
    --result-bg: #fff1f1;
    --result-line: #eea3a3;
  }
  .slot-field[data-result=correct] .slot, .slot-field[data-result=wrong] .slot {
    border-color: var(--result-line);
    background: var(--result-bg);
    color: var(--result-ink);
  }
  .slot-mark {
    position: absolute;
    top: -9px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--result-ink);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
  }
  .slot-correction {
    display: flex;
    align-items: baseline;
    gap: 4px;
    justify-self: center;
    max-width: 100%;
    margin: 0;
    padding: 4px 8px;
    border-radius: 12px;
    background: #eaf9ef;
    color: #166534;
    font-size: 13px;
    font-weight: 750;
    overflow-wrap: anywhere;
  }
  #punctuation { display: grid; align-self: start; place-items: center; min-height: 56px; font-weight: 750; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .choices{padding:11px 18px 15px;background:#f5f6f7;border-top:1px solid #eceeef;flex:1}
  .choices h3{font-size:12px;color:#57666c;margin:0 0 7px}
  #options{display:grid;gap:6px}
  .choice{display:flex;align-items:center;gap:10px;min-height:43px;width:100%;text-align:left;border:1px solid #dee2e5;border-radius:10px;background:#fff;padding:8px 11px;font-size:14px;font-weight:680}
  .choice[aria-pressed=true]{border-color:var(--bright);background:var(--teal-soft);color:#075f58}
  .choice-index{color:#526167;font-size:12px;flex:none}
  .choice-text{flex:1;overflow-wrap:anywhere}
  .choice svg,#replay svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
  .answer-audio { padding: 0 18px 14px; }
  #replay{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid #d9e8e5;border-radius:10px;padding:9px 11px;font-weight:720}
  #replay svg{color:var(--teal)}
  #audio-status{margin:0;padding:6px 18px;color:#674a12;background:#fff7e0;font-size:12px}
  footer{position:sticky;bottom:0;z-index:1;padding:10px 18px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
  .button{min-height:44px;border:1px solid transparent;border-radius:12px;background:var(--teal);color:white;font-size:14px;font-weight:750;padding:8px 12px;width:100%}
  .button:disabled{background:#e8eded;color:#657477}
  .finish { display: grid; place-items: center; text-decoration: none; }
  .audio-credit{margin:4px 0 0;text-align:right;color:#526364;font-size:11px}
  .audio-credit a{color:inherit}