/* Portable practice surfaces: no dependency on the public landing layout. */
.practice-theme, .landing-page {
  --practice-ink: #203732;
  --practice-muted: #64706b;
  --practice-canvas: #fff9f2;
  --practice-paper: #fffefa;
  --practice-accent: #ef824b;
  --practice-accent-strong: #bd4b1e;
  --practice-peach: #ffeadb;
  --practice-blue: #edf4f8;
  --practice-sage: #edf4ee;
  --practice-line: #dfe3dd;
  --practice-radius: 22px;
  color-scheme: light;
}
.practice-theme { color: var(--practice-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
.practice-theme [hidden] { display: none !important; }
.practice-theme button { cursor: pointer; }
.practice-theme :focus-visible, .practice-link:focus-visible, .practice-button:focus-visible { outline: 2px solid #bd4b1e; outline-offset: 4px; }
.practice-icon { width: 18px; height: 18px; flex-shrink: 0; }
.practice-button { min-height: 50px; padding: 12px 23px; gap: 16px; font-size: .9375rem; font-weight: 650; color: #fff; background: #bd4b1e; }
.practice-button:hover { background: #a93f17; }
.practice-link {
  display: inline-flex;
  width: fit-content;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid var(--practice-accent);
  background: transparent;
  font-size: .875rem;
  font-weight: 650;
}
.practice-link:hover { color: var(--practice-accent-strong); }
.practice-material, .practice-grammar, .practice-pronunciation { min-width: 0; border: 1px solid var(--practice-line); border-radius: var(--practice-radius); padding: 28px; background: #fff; box-shadow: 0 10px 26px #20373207; }
.practice-material { background: var(--practice-blue); border-color: #d9e4e9; }
.practice-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .875rem; font-weight: 650; }
.practice-pill { padding: 5px 9px; border-radius: 999px; border: 1px solid #d8e0dc; background: #fff; font-size: .75rem; font-weight: 500; color: var(--practice-muted); }
.practice-formats { display: flex; gap: 20px; margin: 24px 0; border-bottom: 1px solid #d5e0e5; padding-bottom: 17px; font-size: .875rem; color: #426478; }
.practice-formats span { display: flex; gap: 7px; align-items: center; }
.practice-formats svg { width: 18px; height: 18px; flex-shrink: 0; }
.practice-dialogue { display: grid; gap: 12px; }
.practice-dialogue p { display: flex; margin: 0; }
.practice-dialogue p:last-child { justify-content: flex-end; }
.practice-dialogue p span { display: inline-block; padding: 17px 19px; background: #fff; border-radius: 14px 14px 14px 3px; font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.35; }
.practice-dialogue p:last-child span { background: #fff1e5; border-radius: 14px 14px 3px 14px; }
.practice-theme mark { background: #ffdabc; color: inherit; }
.practice-vocabulary-entry { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 25px; border-top: 1px solid #d5e0e5; padding-top: 20px; }
.practice-vocabulary-entry strong, .practice-vocabulary-entry div > span { display: block; }
.practice-vocabulary-entry strong { font-size: 1rem; }
.practice-vocabulary-entry div > span { margin-top: 2px; color: var(--practice-muted); font-size: .8125rem; }
.practice-saved-label { color: #397456; font-size: .75rem; }
.practice-footnote { color: var(--practice-muted); font-size: .8125rem; margin: 20px 0 0; line-height: 1.55; }
.practice-grammar { background: #fffaf5; border-color: #e7ddd1; }
.practice-question { margin: 23px 0 18px; font-family: Georgia, serif; font-size: 1.45rem; }
.practice-choices { display: grid; gap: 10px; }
.practice-choices button { display: flex; align-items: center; gap: 12px; min-height: 54px; border: 1px solid #d9ddd7; border-radius: 12px; background: white; padding: 13px 16px; text-align: left; font-size: 1rem; }
.practice-choices button:hover { border-color: var(--practice-accent); }
.practice-choice-circle { width: 16px; height: 16px; border: 1px solid #a7b5ad; border-radius: 50%; flex-shrink: 0; }
.practice-choices .is-correct { background: #edf6ef; border-color: #80b392; }
.practice-choices .is-incorrect { background: #fff0e8; border-color: #dba785; }
.practice-choices .is-correct .practice-choice-circle { border: 5px solid #4a805d; }
.practice-choices .is-incorrect .practice-choice-circle { border: 5px solid #b87551; }
.practice-response { display: flex; align-items: center; min-height: 84px; margin-top: 16px; border-radius: 12px; padding: 12px 15px; background: #f0f1eb; }
.practice-response p { margin: 0; color: var(--practice-muted); font-size: .875rem; line-height: 1.5; }
.practice-response strong { color: var(--practice-ink); display: block; margin-bottom: 4px; }
.practice-response.is-answered { background: #e9f2e9; }
.practice-next { margin-top: 17px; }

.practice-pronunciation { background: #fff; }
.practice-example-label { font-size: .75rem; color: var(--practice-muted); font-weight: 400; }
.practice-pronunciation blockquote { font-size: 1.8rem; line-height: 1.2; letter-spacing: -.035em; margin: 24px 0; }
.practice-recording { display: flex; align-items: center; gap: 12px; border-block: 1px solid var(--practice-line); padding: 16px 0; font-size: .8125rem; color: var(--practice-muted); }
.practice-recording > svg { width: 18px; height: 22px; color: var(--practice-accent-strong); flex-shrink: 0; }
.practice-recording > span:last-child { margin-left: auto; }
.practice-wave { display: flex; height: 27px; align-items: center; gap: 4px; margin-left: auto; color: #729aae; }
.practice-wave i { width: 3px; background: currentColor; border-radius: 2px; }
.practice-wave i:nth-child(4n + 1) { height: 12px; }
.practice-wave i:nth-child(4n + 2) { height: 22px; }
.practice-wave i:nth-child(4n + 3) { height: 27px; }
.practice-wave i:nth-child(4n) { height: 17px; }
.practice-feedback-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }
.practice-feedback-switch button { border: 1px solid var(--practice-line); border-radius: 999px; background: white; padding: 8px 13px; font-size: .875rem; }
.practice-feedback-switch button[aria-pressed="true"] { border-color: #e3ba9e; background: var(--practice-peach); color: #8e431e; }
.practice-feedback-example { min-height: 100px; margin-top: 15px; border-left: 2px solid #dba575; padding: 8px 0 8px 16px; }
.practice-feedback-example strong { font-size: .9375rem; font-weight: 650; }
.practice-feedback-example p { margin: 6px 0 0; font-size: .875rem; line-height: 1.6; color: var(--practice-muted); }
.practice-lesson-summary { display: flex; align-items: center; gap: 16px; border: 1px solid #d9e4e9; background: var(--practice-blue); border-radius: 17px; padding: 18px 21px; }
.practice-booking-date { flex-shrink: 0; border-radius: 10px; min-width: 48px; background: #fff; padding: 7px; text-align: center; }
.practice-booking-date > span { display: block; font-size: .75rem; color: var(--practice-accent-strong); }
.practice-booking-date strong { font-size: 1.2rem; }
.practice-lesson-summary > div:nth-child(2) strong { font-size: .9375rem; }
.practice-lesson-summary p { margin: 3px 0 0; font-size: .8125rem; color: var(--practice-muted); }
.practice-lesson-summary a { display: grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 50%; background: #fff; margin-left: auto; font-size: 1.2rem; color: var(--practice-accent-strong); }


.practice-formats { list-style: none; padding-left: 0; flex-wrap: wrap; }
.practice-formats li > a, .practice-formats li > span { display: flex; align-items: center; gap: 7px; }
.practice-formats a { border-radius: 4px; text-decoration: none; }
.practice-formats a:hover { color: var(--practice-accent-strong); text-decoration: underline; text-underline-offset: 5px; }
.practice-pronunciation blockquote { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.practice-pronunciation audio { width: 100%; margin-block: 16px; }
.practice-topline strong { font-weight: 650; }
.practice-topline strong, .practice-vocabulary-entry strong, .practice-dialogue p span { overflow-wrap: anywhere; }
.practice-lesson-summary > div:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .practice-material, .practice-grammar, .practice-pronunciation { padding: 20px; border-radius: 18px; }
  .practice-formats { gap: 18px; }
  .practice-dialogue p span { font-size: 1.25rem; padding: 15px; }
  .practice-vocabulary-entry { align-items: flex-start; flex-direction: column; gap: 8px; }
  .practice-choices button { padding: 13px 12px; }
  .practice-response { min-height: 101px; }
  .practice-pronunciation blockquote { font-size: 1.65rem; }
  .practice-recording { gap: 9px; }
  .practice-wave { gap: 3px; }
  .practice-wave i:nth-child(n + 8) { display: none; }
  .practice-feedback-switch { gap: 5px; }
  .practice-feedback-switch button { padding: 8px 11px; }
  .practice-feedback-example { min-height: 115px; }
  .practice-lesson-summary { padding: 15px; gap: 12px; }
  .practice-lesson-summary a { min-width: 34px; min-height: 34px; }
  .practice-lesson-summary > div:nth-child(2) strong { font-size: .875rem; }
}