.focus-invitation { margin-top: 24px; padding: 32px; border: 1px solid light-dark(rgb(166,201,198), #30504d); border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, light-dark(rgb(241,248,249), #153b3c) 0, transparent 65%), var(--bg-soft); }
.focus-kicker { font-size: 10px; letter-spacing: 2.5px; color: var(--teal); font-weight: 700; }
.focus-invitation h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.5; letter-spacing: -.6px; margin: 14px 0; }
.focus-invitation h2 em { font-style: normal; color: light-dark(rgb(29,124,103), #81e2cc); }
.focus-invitation > p { font-size: 14px; color: var(--text-dim); max-width: 530px; margin: 0 0 22px; }
.focus-topic-choices, .focus-invitation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.focus-topic-choices { margin: 22px 0; }
.focus-topic-choices button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); font-size: 12px; }
.focus-topic-choices button[aria-pressed=true] { background: var(--teal-soft); color: light-dark(rgb(29,124,109), #9be8dc); border-color: light-dark(rgb(166,201,195), #426e66); }
.focus-invitation-actions > span { font-size: 12px; color: var(--text-dim); }
.focus-invitation-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); padding-top: 22px; margin-top: 24px; border-top: 1px solid light-dark(rgba(184,184,184,0.063), #ffffff10); }
.focus-recent { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.focus-recent summary { cursor: pointer; }
.focus-recent > div { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; }
.listening-focus { max-width: 770px; margin: 0 auto; }
.focus-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 24px; }
.focus-topbar > span { font-size: 11px; color: var(--text-dim); }
.focus-steps { display: flex; align-items: center; gap: 10px; margin: 10px 0 30px; }
.focus-steps > div { display: flex; align-items: center; gap: 8px; flex: 1; }
.focus-steps > div > span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.focus-steps i { height: 3px; background: var(--line); border-radius: 3px; flex: 1; }
.focus-steps .done i { background: var(--teal); }
.focus-steps .done span, .focus-steps .current span { color: var(--teal); }
.focus-steps .current i { background: linear-gradient(90deg, var(--teal-soft), light-dark(rgb(243,247,246), #507b75)); }
.focus-step-label { padding-left: 12px; font-size: 11px; color: var(--text-dim); }
.focus-cue { color: var(--text-dim); font-size: 13px; margin: 6px 0 20px; }
.focus-player { padding: 22px 24px 17px; border: 1px solid light-dark(rgb(170,195,197), #3b5557); border-radius: 16px; background: linear-gradient(125deg, light-dark(rgb(241,246,248), #1c3037), var(--bg-soft)); }
.focus-player-main { display: flex; align-items: center; gap: 20px; }
.focus-play { display: grid; place-items: center; border-radius: 50%; background: light-dark(rgb(220,239,235), #83e4cf); color: light-dark(rgb(16,52,44), #10342c); width: 62px; height: 62px; font-size: 22px; flex: none; transition: box-shadow .25s, transform .15s; }
.focus-play:hover { transform: scale(1.04); box-shadow: 0 0 0 7px #83e4cf0a; }
.focus-play:disabled { opacity: .65; cursor: wait; }
.is-playing .focus-play { box-shadow: 0 0 0 7px #83e4cf12; }
.focus-player-main strong { font-size: 16px; font-weight: 600; }
.focus-player-status { display: block; font-size: 12px; color: light-dark(rgb(61,88,92), #a5bfc3); margin-top: 3px; }
.focus-seek { display: flex; align-items: center; gap: 16px; margin: 19px 0 15px; }
.focus-seek input { flex: 1; min-width: 0; cursor: pointer; accent-color: #83e4cf; height: 18px; }
.focus-time { color: light-dark(rgb(61,88,92), #a5bfc3); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }
.focus-player-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.focus-replay { display: flex; gap: 6px; }
.focus-player-tools .btn.ghost { border: 0; padding: 5px 9px; color: light-dark(rgb(61,88,92), #a5bfc3); font-size: 12px; }
.focus-speeds { display: flex; gap: 3px; background: light-dark(rgba(241,245,249,0.502), #0a121980); padding: 3px; border-radius: 8px; }
.focus-speeds button { font-size: 11px; padding: 4px 9px; color: light-dark(rgb(61,88,92), #a5bfc3); border-radius: 6px; }
.focus-speeds button[aria-pressed=true] { background: light-dark(rgb(243,247,247), #33504e); color: light-dark(rgb(23,130,104), #bcffef); }
.focus-audio-error, .focus-inline-error { font-size: 12px; color: var(--amber); margin-top: 12px; }
.focus-editor { margin-top: 24px; }
.focus-editor-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 9px; }
.focus-editor-label > span { font-size: 11px; color: var(--text-dim); }
textarea.focus-input { font-family: var(--sans); font-size: 17px; min-height: 135px; padding: 16px; line-height: 1.8; border-color: light-dark(rgb(169,182,199), #3a4859); background: light-dark(rgb(242,244,248), #151c26); }
textarea.focus-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #2dd4bf0a; }
textarea.focus-input::placeholder { font-size: 14px; color: light-dark(rgb(66,74,87), #7f8b9d); }
.focus-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; }
.focus-near-replay { display: none; }
.focus-keyboard { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; color: var(--text-dim); font-size: 10px; margin-top: 14px; }
.focus-rules { margin-top: 25px; color: var(--text-dim); font-size: 11px; }
.focus-rules summary { cursor: pointer; }
.focus-feedback { border-bottom: 1px solid var(--line); padding: 24px 0 16px; }
.focus-feedback-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.focus-feedback-title { font-size: 16px; font-weight: 500; margin: 0; outline: none; }
.focus-percent { min-width: 76px; font-size: 27px; color: light-dark(rgb(29,124,103), #8de4d1); line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
.focus-percent small { font-size: 12px; margin-left: 2px; }
.focus-percent > span { display: block; font-size: 10px; color: var(--text-dim); margin-top: 5px; }
.focus-reconstruction { font-size: 18px; line-height: 2.8; margin: 14px 0 10px; overflow-wrap: anywhere; }
.heard-word { color: light-dark(rgb(56,97,83), #c1dbd2); }
.missing-word { display: inline-flex; vertical-align: middle; flex-direction: column; align-items: center; min-width: 44px; padding: 4px 9px; margin: 0 5px 4px 0; border: 1px dashed light-dark(rgb(209,190,159), #ad8643); border-radius: 7px; background: light-dark(rgba(239,233,220,0.043), #f5b83d0b); color: light-dark(rgb(130,89,23), #ffd796); line-height: 1.3; font-size: 16px; }
.missing-word:hover { background: light-dark(rgba(239,233,220,0.133), #f5b83d22); }
.missing-word small, .extra-word small { font: 9px/1.4 var(--sans); display: block; margin-bottom: 1px; }
.missing-word.revealed { border-style: solid; background: var(--amber-soft); cursor: default; }
.extra-word { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.3; color: light-dark(rgb(130,23,23), #f5a3a3); padding: 4px 6px; margin-right: 4px; border-radius: 6px; background: var(--red-soft); font-size: 16px; }
.focus-feedback-help { font-size: 11px; color: var(--text-dim); margin: 7px 0 14px; }
.focus-attempt-meta { display: flex; justify-content: space-between; gap: 7px; flex-wrap: wrap; color: var(--text-dim); font-size: 11px; }
.focus-resolution { padding-top: 25px; }
.focus-resolution h2 { font-size: 20px; margin: 8px 0 18px; }
.focus-transcript { font: 22px/1.85 var(--serif); border-left: 2px solid var(--teal); padding-left: 19px; overflow-wrap: anywhere; }
.focus-translation { color: var(--text-dim); font-size: 13px; margin-top: -3px; }
.focus-listening-note { display: flex; gap: 14px; align-items: baseline; background: var(--bg-soft); border-radius: 10px; padding: 14px 16px; margin: 20px 0; }
.focus-listening-note > span { flex: none; font-size: 11px; color: var(--teal); }
.focus-listening-note > p { margin: 0; font-size: 12px; color: light-dark(rgb(58,73,95), #bbc6d6); }
.focus-vocab-nudge { color: light-dark(rgb(60,93,76), #9bbfac); font-size: 11px; margin: 16px 0; }
.focus-next { margin: 25px 0 10px; }
.focus-summary { padding: 34px; margin-top: 20px; }
.focus-summary h1 { font-size: 28px; margin: 12px 0 8px; }
.focus-summary > p { color: var(--text-dim); font-size: 13px; }
.focus-summary-list { margin: 25px 0; }
.focus-summary-list > div { display: flex; align-items: center; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.focus-summary-index { color: var(--teal); font-size: 12px; }
.focus-summary-list strong { font-weight: 500; font-size: 14px; }
.focus-summary-list small { display: block; color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.focus-summary-numbers { color: light-dark(rgb(31,122,100), #8fe2ce); font-size: 16px; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.focus-summary > .focus-summary-boundary { font-size: 11px; }
.focus-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.focus-full-link { font-size: 12px; color: var(--text-dim); padding: 17px 0 0; }
.listening-focus[aria-busy=true] .focus-editor-actions, .listening-focus[aria-busy=true] .focus-next { opacity: .65; pointer-events: none; }
@media(max-width:760px) {
  .focus-invitation { padding: 23px 20px; }
  .focus-invitation h2 { font-size: 28px; }
  .focus-invitation-actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .focus-topic-choices { gap: 7px; }
  .focus-topic-choices button { padding: 6px 9px; }
  .focus-topbar { margin-bottom: 16px; }
  .focus-topbar > span { font-size: 10px; max-width: 90px; text-align: right; }
  .focus-step-label { display: none; }
  .focus-steps { margin-bottom: 20px; }
  .focus-player { padding: 19px 16px 13px; }
  .focus-player-main { gap: 15px; }
  .focus-play { width: 54px; height: 54px; }
  .focus-player-main strong { font-size: 15px; }
  .focus-player-status { font-size: 11px; }
  .focus-player-tools { gap: 7px; }
  .focus-player-tools .btn.ghost { padding: 6px 5px; }
  .focus-speeds button { padding: 6px 8px; }
  .focus-editor-label > span { font-size: 10px; }
  .focus-editor-actions { gap: 7px; }
  .focus-near-replay { display: inline-flex; }
  .focus-editor-actions .btn.ghost.small { padding: 7px 9px; font-size: 11px; }
  .focus-editor-actions > .btn.green { padding: 11px 16px; font-size: 13px; }
  .focus-keyboard > span:first-child { display: none; }
  textarea.focus-input { min-height: 132px; font-size: 16px; }
  .focus-feedback-title { font-size: 15px; }
  .focus-transcript { font-size: 20px; padding-left: 14px; }
  .focus-listening-note { display: block; }
  .focus-listening-note > p { margin-top: 4px; }
  .focus-summary { padding: 23px 20px; }
  .focus-summary h1 { font-size: 25px; }
  .focus-summary-list > div { gap: 10px; }
  .focus-summary-numbers { font-size: 14px; }
}
@media(prefers-reduced-motion:reduce) { .focus-play { transition: none; } }