.practice-main { display:block; width:min(100% - 32px, 940px); margin:0 auto; padding:26px 0 64px; }
.practice-main .back-link { width:max-content; }
.practice-hero { max-width:760px; margin:30px auto 22px; text-align:center; }
.practice-kicker { margin:0 0 7px; color:var(--teal-dark); font-size:.76rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.practice-hero h1 { margin:0; font-size:clamp(2rem,6vw,3.25rem); line-height:1.05; letter-spacing:-.035em; }
.practice-hero > p:last-child { max-width:680px; margin:15px auto 0; color:var(--muted); font-size:1.04rem; line-height:1.65; }
.practice-arena { position:relative; overflow:hidden; width:min(100%,760px); min-height:430px; margin:0 auto; padding:22px; border:2px solid color-mix(in srgb,var(--theme-1) 42%,var(--line)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--theme-1) 6%),color-mix(in srgb,var(--surface-2) 92%,var(--theme-3) 8%)); box-shadow:0 8px 0 color-mix(in srgb,var(--theme-1) 18%,transparent),0 24px 48px color-mix(in srgb,var(--ink) 14%,transparent); }
.practice-arena::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--theme-1) 0 33.33%,var(--theme-2) 33.33% 66.66%,var(--theme-3) 66.66%); }
.practice-arena-head { display:flex; justify-content:space-between; gap:12px; padding-top:3px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.practice-free { white-space:nowrap; }
.practice-stage { min-height:320px; display:grid; place-items:center; align-content:center; gap:18px; padding:24px 0 6px; text-align:center; }
.practice-prompt { display:grid; gap:7px; justify-items:center; }
.practice-prompt-main { font-size:clamp(1.85rem,7vw,2.65rem); font-weight:850; line-height:1.15; overflow-wrap:anywhere; }
.practice-prompt-hint { color:var(--muted); font-size:.86rem; }
.practice-audio { width:auto; min-height:42px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:2px solid var(--sound-border); background:var(--sound-bg); color:var(--sound-ink); font-weight:800; cursor:pointer; }
.practice-choices { width:min(100%,610px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.practice-choice { min-height:56px; padding:10px 14px; border:2px solid var(--btn-border); border-top:5px solid var(--theme-2); border-radius:13px; background:var(--button-bg); color:var(--ink); box-shadow:0 4px 0 var(--btn-shadow); font:inherit; font-weight:750; cursor:pointer; }
.practice-choice:hover:not(:disabled) { transform:translateY(-2px); }
.practice-choice.is-right { border-color:#16a34a; background:color-mix(in srgb,#16a34a 15%,var(--button-bg)); }
.practice-choice.is-wrong { border-color:#e5484d; background:color-mix(in srgb,#e5484d 15%,var(--button-bg)); }
.practice-choice:disabled { cursor:default; opacity:.68; }
.practice-choice.is-right:disabled,.practice-choice.is-wrong:disabled { opacity:1; }
.practice-feedback { min-height:1.5rem; margin:10px 0 0; text-align:center; color:var(--muted); font-weight:750; }
.practice-next,.practice-primary,.practice-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 20px; border-radius:999px; font-weight:850; text-decoration:none; cursor:pointer; }
.practice-next,.practice-primary { border:2px solid var(--theme-2); background:var(--theme-2); color:var(--theme-2-ink); }
.practice-secondary { border:2px solid var(--line); background:var(--surface); color:var(--ink); }
.practice-answer { width:min(100%,560px); padding:18px; border:2px solid var(--line); border-radius:15px; background:var(--surface-2); font-size:1.25rem; font-weight:800; }
.practice-grade-row,.practice-result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.practice-result { width:min(100%,620px); display:grid; justify-items:center; gap:13px; }
.practice-result strong { font-size:2rem; }
.practice-result p { margin:0; color:var(--muted); }
.match-board { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.match-column { display:grid; gap:8px; }
.match-choice { min-height:52px; padding:9px 10px; border:2px solid var(--line); border-radius:12px; background:var(--button-bg); color:var(--ink); font:inherit; font-weight:750; cursor:pointer; }
.match-choice.is-picked { border-color:var(--theme-2); background:color-mix(in srgb,var(--theme-2) 12%,var(--surface)); }
.match-choice.is-matched { visibility:hidden; }
.practice-copy { width:min(100%,760px); margin:38px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.practice-copy section { padding-top:16px; border-top:3px solid var(--theme-2); }
.practice-copy h2,.practice-more h2,.practice-index-next h2 { margin:0 0 8px; font-size:1.25rem; }
.practice-copy p { margin:0; color:var(--muted); line-height:1.7; }
.practice-more { width:min(100%,760px); margin:36px auto 0; }
.practice-links,.practice-index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.practice-link { display:grid; gap:2px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-decoration:none; }
.practice-link span { color:var(--muted); font-size:.78rem; }
.practice-index-hero { margin-top:40px; }
.practice-index-grid { width:min(100%,820px); margin:30px auto 0; }
.practice-index-card { min-height:210px; display:flex; flex-direction:column; gap:8px; padding:20px; border:2px solid var(--line); border-top:6px solid var(--theme-2); border-radius:16px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 12%,transparent); }
.practice-index-card strong { font-size:1.25rem; }
.practice-index-card > span:not(.practice-index-number) { color:var(--muted); line-height:1.55; }
.practice-index-card b { margin-top:auto; color:var(--teal-dark); }
.practice-index-number { color:var(--theme-2); font-size:.75rem; font-weight:900; letter-spacing:.1em; }
.practice-index-next { width:min(100%,820px); margin:32px auto 0; padding:22px; border-radius:16px; background:var(--surface-2); text-align:center; }
.practice-index-next p { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:14px 0 0; }
@media (max-width:620px) {
  .practice-main { width:min(100% - 16px,940px); padding-top:16px; }
  .practice-hero { margin:20px auto 16px; padding-inline:8px; }
  .practice-hero h1 { font-size:2rem; }
  .practice-hero > p:last-child { font-size:.94rem; line-height:1.55; }
  .practice-arena { min-height:400px; padding:16px 13px; border-radius:15px; }
  .practice-stage { min-height:300px; padding-top:18px; }
  .practice-choices { grid-template-columns:1fr; gap:8px; }
  .practice-choice { min-height:50px; }
  .practice-copy { grid-template-columns:1fr; gap:20px; margin-top:30px; }
  .practice-links,.practice-index-grid { grid-template-columns:1fr; }
  .practice-index-card { min-height:0; }
  .match-board { gap:7px; }
  .match-choice { min-height:54px; padding:8px 6px; font-size:.82rem; }
  .practice-result-actions { width:100%; }
  .practice-result-actions a,.practice-result-actions button { width:100%; }
}