@font-face {
  font-family: "Miloner";
  src: url("assets/fonts/miloner-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Cochocib";
  src: url("assets/fonts/cochocib-script-free.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #f5eddf;
  --paper: #fffdf8;
  --ivory: #fffaf0;
  --wine: #7f1f31;
  --wine-dark: #52111f;
  --green: #174c3f;
  --green-light: #2c745d;
  --navy: #112f58;
  --navy-dark: #091d38;
  --gold: #d4af52;
  --gold-light: #f3d77d;
  --ink: #352b26;
  --muted: #756a60;
  --line: #dfd2bd;
  --shadow: 0 20px 48px rgba(48, 32, 23, .15);
  --shadow-soft: 0 10px 26px rgba(48, 32, 23, .08);
  --b1: #8d2436;
  --b1-bg: #fae7ea;
  --b2: #23634f;
  --b2-bg: #e3f0e9;
  --b3: #254a76;
  --b3-bg: #e5edf7;
  --b4: #8b671b;
  --b4-bg: #fff1c8;
  --display-serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --reading-serif: Georgia, "Times New Roman", serif;
  --accent-serif: "Miloner", "Palatino Linotype", Georgia, serif;
  --accent-script: "Cochocib", cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(212,175,82,.13), transparent 27%),
    radial-gradient(circle at 94% 28%, rgba(23,76,63,.08), transparent 24%),
    linear-gradient(180deg, #f8f1e5, var(--cream));
  font-family: Arial, Helvetica, sans-serif;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(212,175,82,.7); outline-offset: 3px; }
[hidden] { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(137,110,63,.24); background: rgba(250,245,235,.93); backdrop-filter: blur(14px); }
.topbar-inner { width: min(100% - 28px, 1160px); min-height: 72px; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.brand { padding: 0; display: inline-flex; align-items: center; gap: 9px; justify-self: start; border: 0; background: none; color: var(--wine); font-family: var(--accent-serif); font-size: 23px; font-weight: 500; cursor: pointer; }
.brand span { letter-spacing: .015em; }
.brand-logo { width: 49px; height: 49px; object-fit: contain; }
.topbar-course { text-align: center; }
.topbar-course span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.topbar-course strong { display: block; margin-top: 3px; color: var(--green); font-family: var(--display-serif); font-size: 17px; }
.sound-toggle { width: 56px; height: 56px; padding: 2px; display: grid; place-items: center; justify-self: end; border: 0; border-radius: 50%; background: transparent; cursor: pointer; filter: drop-shadow(0 6px 8px rgba(62,42,22,.18)); transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.sound-toggle:hover { transform: scale(1.06); filter: drop-shadow(0 8px 11px rgba(62,42,22,.24)); }
.sound-toggle:focus-visible { outline: 3px solid rgba(27,82,66,.62); outline-offset: 3px; }
.sound-toggle img { width: 100%; height: 100%; object-fit: contain; }
.sound-toggle[aria-pressed="false"] { opacity: .46; filter: grayscale(.75) drop-shadow(0 3px 5px rgba(62,42,22,.12)); }

main { width: min(100% - 28px, 1120px); margin: 0 auto; padding: 28px 0 64px; }
.course-heading { max-width: 790px; margin: 0 auto 18px; text-align: center; }
.eyebrow, .kicker { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.course-heading h1 { margin: 7px 0 7px; color: var(--wine); font-family: var(--display-serif); font-size: clamp(37px, 6vw, 62px); line-height: 1; letter-spacing: -.018em; text-wrap: balance; }
.course-heading h1.script-display { font-family: var(--accent-script); font-weight: 400; letter-spacing: .01em; line-height: 1.12; }
.course-heading p { margin: 0; color: var(--muted); line-height: 1.55; }
.crumbs { max-width: 950px; margin: 0 auto 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.crumbs button, .crumbs span { min-height: 30px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,248,.72); color: var(--muted); font-size: 10px; font-weight: 900; }
.crumbs button { cursor: pointer; }
.crumbs span.active { border-color: var(--wine); background: var(--wine); color: white; }
.crumbs i { color: #ad9e8c; font-style: normal; }

.screen { display: none; }
.screen.active { display: block; animation: enter .24s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.panel { padding: 27px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,253,248,.9); box-shadow: var(--shadow-soft); }
.section-heading { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.section-heading h2 { margin: 6px 0 7px; color: var(--wine); font-family: var(--display-serif); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.012em; text-wrap: balance; }
.section-heading h2.script-heading { font-family: var(--accent-script); font-size: clamp(38px, 5vw, 54px); font-weight: 400; letter-spacing: .01em; line-height: 1.08; }
.section-heading p { margin: 0; color: var(--muted); line-height: 1.5; }
.back-row { margin: 0 0 11px; }
.secondary-button, .primary-button, .translation-toggle { min-height: 43px; padding: 10px 15px; border-radius: 13px; font-weight: 900; cursor: pointer; }
.secondary-button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.secondary-button:hover { border-color: #c4a75d; background: white; }
.primary-button { border: 0; background: linear-gradient(135deg, var(--green-light), var(--green)); color: white; box-shadow: 0 8px 18px rgba(23,76,63,.18); }
.primary-button:hover { filter: brightness(1.05); }
.compact { min-height: 36px; padding: 7px 10px; font-size: 11px; }

.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.section-card-shell { position: relative; min-width: 0; }
.section-card { position: relative; width: 100%; height: 100%; min-height: 335px; padding: 20px 22px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,240,226,.9)); color: var(--ink); text-align: center; cursor: pointer; box-shadow: 0 9px 24px rgba(56,38,24,.07); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.section-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -80px; bottom: -110px; border-radius: 50%; background: rgba(212,175,82,.12); }
.section-card:hover { transform: translateY(-4px); border-color: #c9aa59; box-shadow: 0 17px 35px rgba(56,38,24,.13); }
.section-card img { width: 220px; height: 220px; margin: -5px auto 3px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(40,25,17,.18)); }
.section-name { position: relative; z-index: 1; max-width: 96%; color: var(--wine); font-family: var(--accent-script); font-size: 38px; font-weight: 400; letter-spacing: .01em; line-height: 1.08; text-wrap: balance; }
.blog-card .section-name { color: var(--green); }
.bank-card .section-name { color: #7c5a18; }
.ideas-card .section-name { color: var(--navy); }

.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.theme-button { min-height: 225px; padding: 15px 12px 19px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); cursor: pointer; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.theme-button:hover { transform: translateY(-3px); border-color: #c7ab61; box-shadow: var(--shadow-soft); }
.theme-button img { width: 155px; height: 155px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(49,31,19,.16)); }
.theme-button span { margin-top: 8px; color: var(--wine); font-family: var(--display-serif); font-size: 20px; font-weight: 800; text-align: center; }

.task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.task-button { position: relative; min-height: 235px; padding: 22px 22px 20px 78px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.task-button:hover { transform: translateY(-3px); border-color: #c7ab61; box-shadow: var(--shadow-soft); }
.task-number { position: absolute; top: 20px; left: 20px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--wine); color: white; font-family: var(--display-serif); font-size: 19px; font-weight: 900; }
.task-button.blog .task-number { background: var(--green); }
.task-form { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.task-button strong { margin-top: 8px; color: var(--wine); font-family: var(--display-serif); font-size: 23px; line-height: 1.15; }
.task-button.blog strong { color: var(--green); }
.task-button p { margin: 9px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-action { margin-top: auto; color: var(--navy); font-size: 11px; font-weight: 900; }

.prompt-card, .gap-card, .complete-card { padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,248,.93); box-shadow: var(--shadow-soft); }
.prompt-card-large { max-width: 850px; margin: auto; }
.prompt-card h2 { margin: 7px 0 9px; color: var(--wine); font-family: var(--display-serif); font-size: clamp(29px,4vw,40px); }
.prompt-card > p { margin: 0 0 12px; color: #514840; line-height: 1.55; }
.colour-bullets { margin: 11px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.colour-bullets li { position: relative; min-height: 45px; padding: 11px 13px 11px 53px; border-left: 5px solid; border-radius: 12px; line-height: 1.4; }
.colour-bullets li span { position: absolute; top: 8px; left: 11px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 900; }
.colour-bullets .b1 { border-color: var(--b1); background: var(--b1-bg); } .colour-bullets .b1 span { background: var(--b1); }
.colour-bullets .b2 { border-color: var(--b2); background: var(--b2-bg); } .colour-bullets .b2 span { background: var(--b2); }
.colour-bullets .b3 { border-color: var(--b3); background: var(--b3-bg); } .colour-bullets .b3 span { background: var(--b3); }
.colour-bullets .b4 { border-color: var(--b4); background: var(--b4-bg); } .colour-bullets .b4 span { background: var(--b4); }
.given-opening { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(201,158,55,.42); border-radius: 15px; background: linear-gradient(135deg,rgba(247,237,203,.75),rgba(255,253,248,.96)); }
.given-opening > span { display: block; margin-bottom: 6px; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.given-opening p { margin: 0; color: var(--ink); font-family: var(--display-serif); font-size: 19px; line-height: 1.45; }
.prompt-actions { margin-top: 19px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.prompt-actions span { color: var(--muted); font-size: 12px; font-weight: 800; }

.function-grid { max-width: 950px; margin: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.function-button { min-height: 124px; padding: 13px 18px; display: grid; grid-template-columns: 98px 1fr; align-items: center; gap: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); text-align: left; cursor: pointer; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.function-button:hover { transform: translateY(-2px); border-color: #c7ab61; box-shadow: var(--shadow-soft); }
.function-button.info-only { position: relative; border-color: rgba(212,175,82,.62); background: linear-gradient(135deg,#fffdf8,#fbf2df); }
.function-button.info-only::after { content: "▶"; position: absolute; right: 15px; bottom: 13px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: white; font-size: 11px; box-shadow: 0 5px 12px rgba(82,17,31,.2); }
.function-button.info-only.is-playing { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,82,.18),var(--shadow-soft); }
.function-button.info-only.is-playing::after { content: "♪"; background: var(--green); animation: teacherButtonBreath 1.5s ease-in-out infinite; }
.function-icon { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 9px 12px rgba(49,31,19,.18)); transition: transform .18s ease; }
.function-badge { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(191,148,48,.58); border-radius: 28px; background: radial-gradient(circle at 28% 22%,rgba(255,255,255,.92),transparent 27%),linear-gradient(145deg,#fff9e8,#ead29b); color: #9b7118; font-family: var(--accent-script); font-size: 42px; font-weight: 400; line-height: 1; box-shadow: inset 0 0 0 5px rgba(255,255,255,.44),0 9px 18px rgba(73,49,20,.15); transition: transform .18s ease; }
.function-button:hover .function-icon, .function-button:hover .function-badge { transform: scale(1.05); }
.function-button strong { display: block; color: var(--wine); font-family: var(--display-serif); font-size: 20px; }

.deck-shell { max-width: 820px; margin: auto; }
.deck-navigation { margin-bottom: 11px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.deck-navigation.course-compact { grid-template-columns: 1fr auto; }
.deck-context { min-width: 0; text-align: center; }
.deck-context small { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.deck-context strong { display: block; margin-top: 3px; overflow: hidden; color: var(--wine); font-family: var(--display-serif); font-size: 19px; white-space: nowrap; text-overflow: ellipsis; }
.deck-count { color: var(--muted); font-size: 12px; font-weight: 900; white-space: nowrap; }
.exam-context { margin-bottom: 12px; padding: 14px 17px; border: 1px solid #dfd1bb; border-radius: 17px; background: rgba(247,239,225,.92); box-shadow: 0 5px 14px rgba(56,38,24,.05); }
.exam-context > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.exam-context span { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.exam-context strong { color: var(--wine); font-family: var(--display-serif); font-size: 16px; }
.exam-context p { margin: 6px 0 0; color: #5f554b; font-size: 13px; line-height: 1.45; }
.flashcard-scene { position: relative; perspective: 1400px; }
.flashcard { position: relative; width: 100%; min-height: 430px; padding: 0; border: 0; border-radius: 29px; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform .52s cubic-bezier(.2,.75,.25,1); }
.flashcard.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; padding: 40px 36px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid transparent; border-radius: 29px; text-align: center; box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front { color: white; background: linear-gradient(145deg,var(--wine),var(--wine-dark)); border-color: #7f2b36; }
.card-front.mail { background: linear-gradient(145deg,var(--wine),var(--wine-dark)); border-color: #7f2b36; }
.card-front.blog { background: linear-gradient(145deg,var(--green-light),var(--green)); border-color: #2f725b; }
.card-front.bank { background: linear-gradient(145deg,var(--navy),var(--navy-dark)); border-color: #253b5f; }
.card-back { color: var(--wine); background: linear-gradient(145deg,var(--ivory),#f5ead3); border-color: #ded0ba; transform: rotateY(180deg); }
.side-label { margin-bottom: 14px; color: rgba(255,255,255,.74); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.card-back .side-label { color: var(--green); }
.card-back .side-label.split-form-label { margin-bottom: 20px; padding: 7px 15px; border: 1px solid currentColor; border-radius: 999px; background: rgba(255,255,255,.46); font-size: 13px; letter-spacing: .16em; box-shadow: 0 5px 12px rgba(65,45,25,.08); }
.card-back .side-label.split-form-label.mail { color: var(--wine); }
.card-back .side-label.split-form-label.blog { color: var(--green); }
.card-sentence { position: relative; z-index: 1; max-width: 720px; color: inherit; font-family: var(--reading-serif); font-size: clamp(28px,4.8vw,44px); font-weight: 800; line-height: 1.18; }
.english-sentence strong { color: #a67c18; font-weight: 900; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.english-sentence span { color: var(--wine); font-weight: 500; }
.english-sentence.bank-complete strong { color: #a67c18; font-weight: 900; text-decoration: none; }
.flip-hint { position: absolute; bottom: 19px; color: rgba(255,255,255,.72); font-size: 11px; }
.card-back .flip-hint { color: var(--muted); }
.rating-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: .18s ease; }
.rating-actions.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.rating-button { min-height: 67px; padding: 10px 14px; border: 0; border-radius: 17px; color: white; cursor: pointer; box-shadow: 0 8px 18px rgba(56,38,24,.13); }
.rating-button strong { display: block; font-size: 15px; }
.rating-button span { display: block; margin-top: 4px; color: rgba(255,255,255,.78); font-size: 10px; }
.rating-button.learning { background: linear-gradient(135deg,#913141,var(--wine)); }
.rating-button.known { background: linear-gradient(135deg,var(--green-light),var(--green)); }
.deck-progress-meta { margin-top: 11px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 900; }
.progress-track { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e5ddd1; }
.progress-track > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--green)); transition: width .25s ease; }

.finish-panel { max-width: 730px; margin: auto; text-align: center; }
.finish-mark { width: 104px; height: 104px; margin: 0 auto 12px; display: grid; place-items: center; filter: drop-shadow(0 10px 15px rgba(119,83,25,.18)); }
.finish-mark img { width: 100%; height: 100%; object-fit: contain; }
.finish-panel h2 { margin: 6px 0 8px; color: var(--wine); font-family: var(--display-serif); font-size: 34px; }
.finish-panel p { max-width: 590px; margin: 0 auto 19px; color: var(--muted); line-height: 1.5; }
.finish-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.model-layout { display: grid; gap: 13px; }
.compact-prompt h2 { font-size: 31px; }
.gap-heading, .complete-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-heading h3, .complete-heading h3 { margin: 4px 0 0; color: var(--wine); font-family: var(--display-serif); font-size: 26px; }
.gap-instruction { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.phrase-bank { margin-bottom: 15px; padding: 13px; display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid #ddcfae; border-radius: 16px; background: #f8f0df; }
.phrase-chip { padding: 9px 11px; border: 1px solid #cdb676; border-radius: 12px; background: white; color: var(--navy); font-size: 11px; font-weight: 900; line-height: 1.35; cursor: pointer; }
.phrase-chip.selected { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 0 0 3px rgba(23,76,63,.13); }
.phrase-chip.used { opacity: .42; cursor: default; }
.model-text { color: #342b26; font-family: var(--reading-serif); font-size: 17px; line-height: 1.7; }
.model-text p { margin: 0 0 12px; }
.model-neutral { padding: 0 10px; white-space: pre-wrap; }
.answer-segment { padding: 13px 15px; border-left: 5px solid; border-radius: 12px; }
.answer-segment.b1 { border-color: var(--b1); background: var(--b1-bg); }
.answer-segment.b2 { border-color: var(--b2); background: var(--b2-bg); }
.answer-segment.b3 { border-color: var(--b3); background: var(--b3-bg); }
.answer-segment.b4 { border-color: var(--b4); background: var(--b4-bg); }
.gap-slot { min-width: 150px; min-height: 34px; margin: 3px; padding: 5px 9px; border: 1px dashed #ab8c47; border-radius: 9px; background: #fff9ea; color: #765b1a; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 900; line-height: 1.35; vertical-align: middle; cursor: pointer; }
.gap-slot.filled { border-style: solid; border-color: #a68a49; background: #fff2ca; color: var(--navy); }
.gap-slot.correct { border-color: var(--green); background: #d5eadf; color: var(--green); }
.gap-slot.wrong { border-color: var(--wine); background: #f6d9de; color: var(--wine); }
.check-row { margin-top: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.answer-button { border-color: #c6a85b; color: var(--green); }
.exercise-status { margin: 0; color: var(--muted); font-size: 12px; font-weight: 900; }
.exercise-status.success { color: var(--green); }
.exercise-status.error { color: var(--wine); }
.complete-card { border-color: #d7c184; background: linear-gradient(145deg,#fffef9,#faf1df); }
.translation-toggle { margin-top: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--wine); }
.translation { margin-top: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.reader-card { padding: 29px; }
.colour-legend { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.colour-legend span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 11px; font-weight: 900; }
.colour-legend .c1 { background: var(--b1); } .colour-legend .c2 { background: var(--b2); } .colour-legend .c3 { background: var(--b3); } .colour-legend .c4 { background: var(--b4); }
.colour-legend small { margin-left: 3px; color: var(--muted); }

.teacher-mini-button { position: relative; width: 64px; height: 64px; flex: 0 0 64px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; isolation: isolate; z-index: 8; filter: drop-shadow(0 7px 9px rgba(53,34,22,.2)); transition: transform .18s ease, filter .18s ease; }
.teacher-mini-button:hover { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 9px 12px rgba(53,34,22,.25)); }
.teacher-mini-button:focus-visible { outline: 3px solid rgba(27,82,66,.62); outline-offset: 4px; }
.teacher-mini-button img { display: block; width: 100%; height: 100%; border: 0; border-radius: 50%; object-fit: contain; box-shadow: none; filter: saturate(.9) contrast(.94) brightness(1.015); image-rendering: auto; }
.teacher-play-indicator { position: absolute; right: -1px; bottom: -1px; width: 23px; height: 23px; display: grid; place-items: center; border: 2px solid var(--ivory); border-radius: 50%; background: var(--wine); color: white; font-size: 9px; line-height: 1; box-shadow: 0 3px 8px rgba(53,24,27,.24); }
.teacher-mini-button.is-playing .teacher-play-indicator { background: var(--green); }
.teacher-mini-button.is-noticing { animation: teacherButtonBreath 1.5s ease-in-out 2; }
.teacher-mini-button.is-noticing::before { content: ""; position: absolute; inset: 3px; z-index: -1; border: 2px solid rgba(212,175,82,.82); border-radius: 50%; animation: teacherButtonHalo 1.5s ease-out 2; }
.section-teacher-button { position: absolute; top: 15px; left: 15px; }
.flashcard-teacher-button { position: absolute; top: 16px; left: 16px; }
.gap-heading.has-teacher { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.gap-heading.has-teacher > div { min-width: 0; }
.gaps-teacher-button { width: 58px; height: 58px; flex-basis: 58px; }
@keyframes teacherButtonBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes teacherButtonHalo { 0% { opacity: .9; transform: scale(.88); } 80%,100% { opacity: 0; transform: scale(1.42); } }
.library-form-grid { max-width: 850px; margin: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.library-form-button { min-height: 265px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); cursor: pointer; box-shadow: var(--shadow-soft); }
.library-form-button:hover { border-color: #c7ab61; transform: translateY(-3px); }
.library-form-button img { width: 185px; height: 185px; object-fit: contain; }
.library-form-button strong { color: var(--wine); font-family: var(--display-serif); font-size: 24px; }
.library-form-button.email-card strong, .library-form-button.blog-card strong { font-family: var(--accent-script); font-size: 38px; font-weight: 400; letter-spacing: .01em; }
.library-form-button.blog-card strong { color: var(--green); }

html.apple-webkit-safe .flashcard-scene { -webkit-perspective: none; perspective: none; }
html.apple-webkit-safe .flashcard,
html.apple-webkit-safe .flashcard.flipped { -webkit-transform: none !important; transform: none !important; -webkit-transform-style: flat; transform-style: flat; transition: none; isolation: isolate; }
html.apple-webkit-safe .card-face { -webkit-transform: none !important; transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible; transition: none; }
html.apple-webkit-safe .card-front { display: flex; visibility: visible; opacity: 1; z-index: 2; animation: iosCardIn .22s ease-out; }
html.apple-webkit-safe .card-back { display: none; visibility: hidden; opacity: 0; z-index: 0; }
html.apple-webkit-safe .flashcard.flipped .card-front { display: none; visibility: hidden; opacity: 0; z-index: 0; }
html.apple-webkit-safe .flashcard.flipped .card-back { display: flex; visibility: visible; opacity: 1; z-index: 2; animation: iosCardIn .22s ease-out; }
@keyframes iosCardIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 820px) {
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .task-grid { grid-template-columns: 1fr; }
  .library-form-button { min-height: 260px; }
}

@media (max-width: 620px) {
  .topbar-inner { width: min(100% - 18px,1160px); min-height: 59px; grid-template-columns: 1fr auto; gap: 8px; }
  .brand { gap: 6px; font-size: 15px; }
  .brand-logo { width: 39px; height: 39px; }
  .topbar-course { display: none; }
  .sound-toggle { width: 47px; height: 47px; padding: 1px; }
  main { width: min(100% - 18px,1120px); padding-top: 18px; }
  .course-heading p { font-size: 13px; }
  .panel { padding: 15px; border-radius: 22px; }
  .section-grid { grid-template-columns: 1fr; gap: 10px; }
  .section-card { min-height: 285px; padding: 13px 12px 20px; }
  .section-card img { width: 188px; height: 188px; margin-bottom: 0; }
  .section-name { font-size: 34px; }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .theme-button { min-height: 175px; padding: 9px 6px 13px; }
  .theme-button img { width: 112px; height: 112px; }
  .theme-button span { font-size: 16px; }
  .task-button { min-height: 215px; padding: 18px 15px 17px 68px; }
  .task-number { top: 16px; left: 15px; width: 39px; height: 39px; }
  .task-button strong { font-size: 21px; }
  .prompt-card, .gap-card, .complete-card { padding: 16px; border-radius: 20px; }
  .prompt-card h2 { font-size: 28px; }
  .prompt-actions { align-items: stretch; flex-direction: column; }
  .function-grid { grid-template-columns: 1fr; }
  .function-button { min-height: 100px; grid-template-columns: 76px 1fr; padding: 11px 12px; gap: 12px; }
  .function-icon { width: 74px; height: 74px; }
  .function-badge { width: 70px; height: 70px; border-radius: 22px; font-size: 34px; }
  .deck-navigation { grid-template-columns: auto 1fr; }
  .deck-count { grid-column: 1 / -1; text-align: center; }
  .deck-navigation.course-compact { grid-template-columns: 1fr auto; }
  .deck-navigation.course-compact .deck-count { grid-column: auto; text-align: right; }
  .exam-context > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .flashcard { min-height: 460px; }
  .card-face { padding: 36px 19px 47px; border-radius: 24px; }
  .card-sentence { font-size: 29px; }
  .rating-actions { gap: 8px; }
  .rating-button { min-height: 67px; padding: 8px; }
  .rating-button strong { font-size: 13px; }
  .rating-button span { font-size: 9px; }
  .gap-heading, .complete-heading { align-items: flex-start; flex-direction: column; }
  .model-text { font-size: 16px; line-height: 1.65; }
  .answer-segment { padding: 12px; }
  .gap-slot { min-width: 118px; }
  .check-row { align-items: flex-start; flex-direction: column; }
  .teacher-mini-button { width: 53px; height: 53px; flex-basis: 53px; }
  .teacher-play-indicator { width: 20px; height: 20px; font-size: 8px; }
  .section-teacher-button { top: 11px; left: 11px; }
  .flashcard-teacher-button { top: 12px; left: 12px; }
  .gap-heading.has-teacher { grid-template-columns: 53px minmax(0,1fr) auto; align-items: center; gap: 9px; }
  .library-form-grid { grid-template-columns: 1fr; }
  .library-form-button { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}