@font-face {
  font-family: "TraceWorksheet";
  src: local("Mv Jadheedh Trace"),
       local("Faruma"),
       url("https://static.wfonts.com/data/2015/12/14/faruma/Mv%20Jadheedh%20Trace.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #2d2850;
  --muted: #6d6983;
  --paper: #fffdf8;
  --purple: #6f58c9;
  --purple-dark: #5540ad;
  --pink: #f8c6dd;
  --blue: #cdebf9;
  --mint: #d8f2df;
  --yellow: #ffe9a8;
  --peach: #ffd8bd;
  --lavender: #e5dcfb;
  --line: #e5e1ef;
  --shadow: 0 12px 30px rgba(62, 50, 102, .13);
  --radius: 24px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(#faf8ff 0 28rem, #fffdf8 28rem 100%);
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.hero {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 420px;
  padding: 42px 28px 18px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 28px;
}
.eyebrow, .small-label {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
  font-weight: 900;
  color: var(--purple);
}
h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: .95; }
.hero-text { max-width: 680px; font-size: 1.18rem; line-height: 1.65; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.primary-btn, .secondary-btn, .lesson-btn, .complete-btn {
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  padding: 13px 20px;
}
.primary-btn { background: var(--purple); color: white; box-shadow: 0 7px 0 #463491; }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 4px 0 #463491; }
.secondary-btn { background: white; color: var(--purple-dark); border: 2px solid var(--lavender); }
.hero-art { position: relative; min-height: 330px; }
.hero-mascot { position: absolute; width: min(88%, 350px); right: 4%; bottom: 0; filter: drop-shadow(0 16px 18px rgba(57,49,99,.15)); }
.hero-crayon { position: absolute; width: 145px; left: 0; top: 6%; transform: rotate(-17deg); filter: drop-shadow(0 9px 10px rgba(57,49,99,.12)); }

main { max-width: 1180px; margin: 0 auto; padding: 0 28px 56px; }
.progress-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 2fr) auto;
  align-items: center;
  gap: 18px;
}
.progress-panel h2 { margin: 0; font-size: 1.15rem; }
.progress-track { height: 16px; border-radius: 999px; background: #eeeaf8; overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6f58c9, #b06fd1); transition: width .35s ease; }
.progress-percent { margin: 0; font-weight: 900; color: var(--purple-dark); }

.section-wrap { padding: 44px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-note { margin: 0; color: var(--muted); max-width: 330px; text-align: right; }
.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.unit-card {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  border-radius: var(--radius);
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.unit-card:nth-child(6n+1) { background: var(--yellow); }
.unit-card:nth-child(6n+2) { background: var(--blue); }
.unit-card:nth-child(6n+3) { background: var(--pink); }
.unit-card:nth-child(6n+4) { background: var(--mint); }
.unit-card:nth-child(6n+5) { background: var(--lavender); }
.unit-card:nth-child(6n+6) { background: var(--peach); }
.unit-card h3 { margin: 0 0 8px; font-size: 1.45rem; }
.unit-card p { margin: 0; line-height: 1.45; }
.unit-kicker { font-size: .8rem; font-weight: 900; opacity: .72; }
.unit-art { width: 116px; height: 116px; object-fit: contain; align-self: flex-end; filter: drop-shadow(0 8px 8px rgba(80,60,90,.12)); }
.unit-open {
  margin-top: 14px;
  align-self: flex-start;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  padding: 10px 14px;
  font-weight: 900;
  color: var(--ink);
}

.practice-banner { min-height: 360px; border-radius: 32px; overflow: hidden; position: relative; box-shadow: var(--shadow); }
.practice-banner > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.practice-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(540px, 100%);
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0 68%, rgba(255,255,255,.18) 100%);
}
.practice-overlay h2 { margin: 0; font-size: 2.2rem; }
.practice-overlay p { line-height: 1.55; }
.practice-overlay .primary-btn { align-self: flex-start; }

footer { max-width: 1180px; margin: 0 auto 36px; padding: 18px 28px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-weight: 800; }
footer img { width: 46px; height: 46px; object-fit: contain; }

.modal { position: fixed; inset: 0; background: rgba(35,28,60,.55); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal[hidden] { display: none; }
.modal-card { width: min(920px, 100%); max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 26px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.28); position: relative; }
.close-btn { position: sticky; float: right; top: 0; z-index: 3; border: 0; background: #eee9fb; color: var(--purple-dark); border-radius: 50%; width: 42px; height: 42px; font-size: 1.6rem; font-weight: 900; }
.modal-hero { display: grid; grid-template-columns: 1fr 190px; gap: 18px; align-items: center; margin-bottom: 24px; }
.modal-hero img { width: 100%; height: 170px; object-fit: contain; }
.modal-hero h2 { font-size: 2.2rem; margin: 3px 0 8px; }
.week-list { display: grid; gap: 16px; }
.week-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.week-card h3 { margin: 0 0 12px; }
.lesson-list { display: grid; gap: 9px; }
.lesson-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-radius: 14px; background: #f9f7ff; padding: 10px 12px; }
.lesson-row.done { background: #effaf1; }
.lesson-title { font-weight: 800; }
.lesson-meta { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.lesson-btn { padding: 9px 12px; background: white; color: var(--purple-dark); border: 1px solid #ddd5f3; }
.lesson-row.done .lesson-btn { background: #d9f4df; border-color: #b7dfbf; color: #28683a; }

.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.practice-card { border-radius: 18px; border: 1px solid var(--line); background: white; padding: 18px; }
.practice-card h3 { margin-top: 0; }
.writing-lines { background: repeating-linear-gradient(to bottom, white 0 29px, #b7d9ee 30px 31px, white 32px 59px, #f7a8b8 60px 61px); min-height: 160px; border: 2px solid #e7e4ef; border-radius: 14px; padding: 12px; width: 100%; resize: vertical; color: var(--ink); font-size: 1.35rem; line-height: 30px; }
.canvas-wrap { background: white; border: 2px dashed #d7cff0; border-radius: 16px; padding: 8px; overflow: hidden; }
.canvas-wrap canvas { display:block; width:100%; height:auto; aspect-ratio:720/360; touch-action:none; cursor:crosshair; background:#fff; border-radius:12px; }
#traceCanvas { width: 100%; height: 260px; touch-action: none; display: block; background: #fff; border-radius: 10px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tool-row button { border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 900; }
.clear-btn { background: #f3ecff; color: var(--purple-dark); }
.save-btn { background: #dff5e4; color: #28683a; }
.portfolio-item { padding: 15px; background: white; border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; }
.portfolio-item p { white-space: pre-wrap; }
.empty-state { text-align: center; padding: 24px; color: var(--muted); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-art { min-height: 250px; }
  .hero-mascot { width: 260px; right: 12%; }
  .hero-crayon { width: 110px; left: 10%; }
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-panel { grid-template-columns: 1fr; }
  .progress-percent { justify-self: end; }
}
@media (max-width: 620px) {
  .hero { padding: 30px 18px 14px; }
  main { padding: 0 18px 42px; }
  h1 { font-size: 3rem; }
  .hero-text { font-size: 1.02rem; }
  .hero-art { min-height: 220px; }
  .hero-mascot { width: 225px; right: 7%; }
  .unit-grid { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-note { text-align: left; margin-top: 10px; }
  .practice-overlay { padding: 25px; background: rgba(255,255,255,.9); }
  .modal-card { padding: 18px; }
  .modal-hero { grid-template-columns: 1fr; }
  .modal-hero img { height: 120px; }
  .lesson-row { grid-template-columns: 1fr; }
  .lesson-btn { justify-self: start; }
  .practice-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 2 — READY TO WRITE INTERACTIVE LESSONS
   ============================================================ */
.phase-badge,.planned-badge{display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:900;margin-top:10px}
.phase-badge{background:#ddf5e3;color:#28683a}.planned-badge{background:#f0edf5;color:#766f83}
.student-name-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f7f3ff;border:1px solid #e0d8f5;border-radius:16px;padding:12px 15px;margin:-6px 0 18px}
.week-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.week-heading-row h3{margin:0}.week-progress{font-size:.8rem;font-weight:900;color:#6f58c9;background:#f1ecff;padding:7px 10px;border-radius:999px}
.start-lesson-btn{background:#fff;color:#5b45b0;border-color:#cec4ed}.lesson-btn:disabled{opacity:.52;cursor:not-allowed}
.compact-modal-hero{grid-template-columns:1fr 130px}.name-form-card{max-width:620px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.name-form-card label{display:block;font-weight:900;margin:0 0 16px}.name-form-card input{display:block;width:100%;margin-top:8px;border:2px solid #ddd6ef;border-radius:14px;padding:13px 14px;font-size:1.12rem;color:var(--ink);outline:none}.name-form-card input:focus{border-color:#8c74db;box-shadow:0 0 0 4px #eee9ff}
.lesson-shell{min-height:600px}.lesson-topbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:0 0 16px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--muted);font-weight:800}.back-to-unit{border:0;background:#f0ebff;color:#604bb8;border-radius:999px;padding:9px 12px;font-weight:900}.lesson-status-pill{justify-self:end;background:#fff3cd;color:#7a5b00;border-radius:999px;padding:7px 10px}.lesson-status-pill.done{background:#ddf5e3;color:#28683a}
.lesson-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;align-items:center;padding:24px 0 16px}.lesson-intro-grid h2{font-size:clamp(2rem,5vw,3rem);margin:2px 0 10px}.lesson-direction{font-size:1.08rem;line-height:1.6;color:#57516a;max-width:650px}.lesson-art-frame{height:170px;border-radius:22px;background:linear-gradient(135deg,#f5efff,#fff7e5);display:grid;place-items:center;overflow:hidden}.lesson-art-frame img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(80,60,90,.12))}
.lesson-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.speak-btn{background:#eef8ff;border-color:#cfe7f6;color:#286287}.tip-card{background:#fff7d9;border:1px solid #f2dfa2;border-radius:16px;padding:13px 15px;margin:0 0 18px;line-height:1.45;color:#68591f}
.ready-board-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 8px 22px rgba(62,50,102,.08)}.board-header{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:12px}.board-header strong{display:block;font-size:1.05rem}.board-header span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}.board-tools{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.mini-tool{border:1px solid #ded8eb;background:#faf9fd;border-radius:999px;padding:7px 10px;font-weight:900;font-size:.8rem;color:#5e586b}.mini-tool.selected{box-shadow:0 0 0 3px #e8e0ff;border-color:#8b72dc;color:#5c43b6}.eraser-tool.selected{background:#fff0f3;color:#a4415c}
.ready-canvas-wrap{border:2px solid #e5e0ec;border-radius:18px;overflow:hidden;background:#fffefb}.ready-canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1000/590;touch-action:none}.name-helper-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted)}
.lesson-footer-actions{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:18px}.lesson-footer-actions .primary-btn{justify-self:center}.completion-hint{text-align:center;color:var(--muted);font-weight:800;min-height:1.4em;margin:12px 0 0}
.name-choice-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;box-shadow:0 8px 22px rgba(62,50,102,.08)}.name-choice-scene{height:165px;overflow:hidden;border-radius:16px;margin-bottom:14px}.name-choice-scene img{width:100%;height:100%;object-fit:cover}.name-choice-card h3{font-size:1.5rem}.name-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:680px;margin:18px auto}.name-card{border:3px solid #ddd4f1;border-radius:18px;background:#faf7ff;color:#3d3552;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:900;padding:20px;min-height:82px}.name-card:hover{border-color:#a994e4}.name-card.correct{background:#e0f7e6;border-color:#69bd7b;color:#2d6d3e}.name-card.incorrect{background:#fff0f2;border-color:#e99aa7;color:#9b4355}.name-choice-feedback{font-weight:900;min-height:1.5em;color:#5b4aaa}
@media(max-width:700px){.student-name-strip{align-items:flex-start;flex-direction:column}.lesson-topbar{grid-template-columns:1fr auto}.lesson-topbar>span:nth-child(2){grid-column:1/-1;grid-row:2}.lesson-intro-grid{grid-template-columns:1fr}.lesson-art-frame{height:130px}.board-header{align-items:flex-start;flex-direction:column}.board-tools{justify-content:flex-start}.lesson-footer-actions{grid-template-columns:1fr 1fr}.lesson-footer-actions .primary-btn{grid-column:1/-1;grid-row:1;justify-self:stretch}.lesson-footer-actions #previousReadyLesson{grid-row:2}.lesson-footer-actions #nextReadyLesson{grid-row:2}.name-choice-grid{grid-template-columns:1fr}.compact-modal-hero{grid-template-columns:1fr}.compact-modal-hero img{display:none}}

/* ============================================================
   PHASE 3 — UPPERCASE LETTERS
   ============================================================ */
.uppercase-skill-strip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#eef8ff;border:1px solid #cfe7f6;color:#315d79;border-radius:16px;padding:12px 15px;margin:-5px 0 18px}.uppercase-skill-strip span{font-weight:800}
.formation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.formation-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}.formation-letter{width:110px;height:125px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#f0eaff,#fff7de);font:900 5rem/1 Arial,sans-serif;color:#604bb8;text-shadow:0 3px 0 #fff}.formation-card h3{margin:0 0 8px}.formation-card ol{margin:0 0 10px;padding-left:20px;color:#57516a;line-height:1.45}.formation-card li+li{margin-top:4px}
.uppercase-board-card{margin-top:16px}.copy-model-card{background:#f8f4ff;border:1px solid #ded5f2;border-radius:20px;padding:18px;text-align:center;margin-bottom:12px}.copy-model-letters{font:900 clamp(2rem,6vw,4.2rem)/1.35 Arial,sans-serif;letter-spacing:.15em;color:#4f3c9d;overflow-wrap:anywhere}.uppercase-quiz-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;text-align:center;box-shadow:0 8px 22px rgba(62,50,102,.08);overflow:hidden}.uppercase-quiz-card h3{font-size:clamp(1.5rem,4vw,2.2rem);margin:4px 0 12px}.quiz-score-row{display:flex;justify-content:center;gap:24px;align-items:center;color:#686176;font-weight:800;margin-bottom:15px}.quiz-score-row strong{color:#4f3c9d}.uppercase-letter-grid{display:grid;grid-template-columns:repeat(5,minmax(64px,1fr));gap:11px;max-width:720px;margin:auto}.uppercase-letter-grid.compact{grid-template-columns:repeat(4,minmax(64px,1fr))}.uppercase-letter-choice{min-height:76px;border:3px solid #ddd4f1;border-radius:17px;background:#fbf9ff;color:#3d3552;font:900 2rem/1 Arial,sans-serif;transition:transform .12s,border-color .12s,background .12s}.uppercase-letter-choice:hover{transform:translateY(-2px);border-color:#a994e4}.uppercase-letter-choice.correct{background:#dff6e5;border-color:#6bc17e;color:#28683a}.uppercase-letter-choice.incorrect{background:#fff0f2;border-color:#e899a6;color:#9b4355}.game-mode{background:linear-gradient(180deg,#fffef8,#f8f3ff)}.quiz-star-art{position:absolute;width:110px;height:110px;object-fit:contain;right:-15px;top:-12px;opacity:.2}.star-choice{background:radial-gradient(circle at 50% 45%,#fff9d4,#fff0a9);border-color:#eedb7b}.star-choice span{display:grid;place-items:center;margin:auto;width:56px;height:56px;border-radius:50%;background:#fff;font-size:2rem}.quiz-finish-card{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;align-items:center;background:#eef9f1;border:1px solid #c3e6cb;border-radius:18px;padding:24px;color:#28683a}.quiz-finish-card strong{font-size:2.4rem}.find-trace-layout{display:grid;grid-template-columns:1fr;gap:16px}.trace-unlock-card{border:1px dashed #cec5df;border-radius:20px;background:#faf9fc;padding:20px;text-align:center}.trace-unlock-card.locked{color:#827b8d}.trace-unlock-card .ready-board-card{margin-top:14px;text-align:left}.check-intro-card{display:grid;grid-template-columns:1fr 100px;gap:12px;align-items:center;background:#f3f9ff;border:1px solid #d4e8f6;border-radius:18px;padding:16px;margin-bottom:14px}.check-intro-card h3,.check-intro-card p{margin:3px 0}.check-intro-card img{width:90px;height:90px;object-fit:contain}.check-writing-heading{margin:20px 0 8px}.check-writing-heading h3{font-size:1.7rem;margin:4px 0}.uppercase-lesson-shell .completion-hint{font-weight:900;color:#5c4ab0}
@media(max-width:760px){.formation-grid{grid-template-columns:1fr}.formation-card{grid-template-columns:90px 1fr}.formation-letter{width:82px;height:100px;font-size:4rem}.uppercase-letter-grid{grid-template-columns:repeat(3,minmax(58px,1fr))}.uppercase-letter-grid.compact{grid-template-columns:repeat(3,minmax(58px,1fr))}.quiz-score-row{gap:12px;justify-content:space-between}.copy-model-letters{letter-spacing:.08em}.check-intro-card{grid-template-columns:1fr 72px}.check-intro-card img{width:66px;height:66px}}

/* ============================================================
   PHASE 4 — LOWERCASE LETTERS
   ============================================================ */
.lowercase-zone-strip,.lowercase-skill-strip{display:flex;align-items:center;flex-wrap:wrap;gap:9px;border-radius:16px;padding:12px 15px;margin:-5px 0 12px;font-size:.9rem}.lowercase-zone-strip{background:#fffaf0;border:1px solid #efdfbc;color:#615536}.lowercase-skill-strip{background:#f2f9f4;border:1px solid #cde8d2;color:#355f40;margin-bottom:18px}.lowercase-skill-strip span{font-weight:800}.zone{border-radius:999px;padding:6px 9px;font-weight:900;font-size:.76rem}.tall-zone{background:#e5f4ff;color:#276184}.short-zone{background:#eef8f1;color:#347247}.base-zone{background:#fff0f3;color:#9c485d}.desc-zone{background:#f2edff;color:#604bb8}
.lowercase-formation-card{background:linear-gradient(180deg,#fff,#fffdf8)}.lowercase-formation-letter{text-transform:lowercase;font-family:Arial,sans-serif;background:linear-gradient(145deg,#eef9f2,#fff1f5);color:#356f48}.lowercase-type-pill{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:.72rem;font-weight:900;margin-bottom:6px}.lowercase-type-pill.tall{background:#e3f3ff;color:#286581}.lowercase-type-pill.short{background:#e7f6eb;color:#327047}.lowercase-type-pill.descender{background:#f0eaff;color:#624bac}.lowercase-copy-model{background:linear-gradient(135deg,#f1fbf4,#fff8ed)}.lowercase-copy-letters{text-transform:lowercase;color:#356f48;font-family:Arial,sans-serif}
.lowercase-board-card{margin-top:16px;border-color:#d6e9da}.lowercase-line-key{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:3px 0 8px;color:#746d80;font-size:.72rem;font-weight:900;text-align:center}.lowercase-line-key span{background:#f8f6fb;border-radius:999px;padding:4px 6px}.lowercase-canvas-wrap canvas{aspect-ratio:1000/680}.lowercase-quiz-card{border-color:#d7eadb}.lowercase-letter-choice{font-family:Arial,sans-serif;text-transform:lowercase;font-size:2.35rem}.lowercase-sort-card{background:linear-gradient(180deg,#fffdf7,#f7fcf8)}.lowercase-match-card{background:linear-gradient(180deg,#f8fbff,#fffaf0)}.case-match-model{width:130px;height:130px;border-radius:28px;margin:8px auto 4px;display:grid;place-items:center;background:#f0eaff;border:3px solid #cfc2ef;color:#5e47b1;font:900 5.3rem/1 Arial,sans-serif;box-shadow:0 10px 22px rgba(80,60,130,.12)}.case-match-help{margin:6px 0 16px;color:#746d80;font-weight:800}.lowercase-lesson-shell .completion-hint{font-weight:900;color:#376d49}
@media(max-width:760px){.lowercase-zone-strip{align-items:flex-start}.lowercase-line-key{grid-template-columns:repeat(2,1fr)}.case-match-model{width:105px;height:105px;font-size:4.4rem}.lowercase-letter-choice{font-size:2.05rem}}

/* Phase 5 — Writing Words */
.word-skill-strip{margin:18px 0 12px;padding:14px 18px;border-radius:18px;background:#f4f0ff;display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:#54447f}.word-preview-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 22px}.word-preview-strip>span{display:none}.word-preview-strip img{width:100%;height:105px;object-fit:contain;background:#fff;border:2px solid #ece5ff;border-radius:18px;padding:8px}.word-art-frame img{max-height:180px;object-fit:contain}.personal-word-card,.random-word-model,.picture-label-card,.word-hunt-card,.sound-card,.cvc-read-card,.cvc-build-card,.fill-blank-card,.memory-word-card,.mixed-word-card,.word-page-picker,.unit4-check-banner{margin:18px 0;padding:20px;border:2px solid #ece6f7;border-radius:22px;background:#fff}.personal-word-card{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:18px}.personal-word-card img{width:130px;height:130px;object-fit:contain}.personal-word-card h3{font-size:clamp(2rem,6vw,4rem);margin:3px 0}.word-name-label{display:grid;gap:6px;font-weight:800;margin-bottom:10px}.word-name-label input{font:inherit;font-size:1.25rem;padding:12px;border:2px solid #cfc4ea;border-radius:12px}.word-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.word-chip,.hear-inline{border:2px solid #d9cff0;background:#faf8ff;border-radius:999px;padding:10px 16px;font:800 1.15rem/1.1 inherit;color:#514276;cursor:pointer}.word-chip:hover,.word-chip.selected{background:#ece3ff;border-color:#8269ce}.word-big-row{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}.word-big-row span{font-size:2rem;font-weight:900;padding:12px 18px;border-radius:16px;background:#f6f2ff}.word-board-card{margin-top:18px}.word-canvas-wrap canvas{touch-action:none;background:#fff;border-radius:14px}.picture-label-stage{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:10px auto}.picture-label-stage img{width:min(250px,65vw);height:210px;object-fit:contain}.mini-audio-btn,.sound-word-button{border:0;border-radius:999px;padding:10px 16px;background:#6f58c9;color:#fff;font-weight:800;cursor:pointer}.word-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.word-choice-grid.large{grid-template-columns:repeat(4,minmax(0,1fr))}.word-choice{min-height:66px;border:2px solid #dcd4ed;border-radius:16px;background:#fff;font:900 1.35rem/1.1 inherit;color:#43355f;cursor:pointer}.word-choice:hover{background:#f7f3ff}.word-choice.correct,.sound-letter.correct{background:#e3f7e8;border-color:#5eb66c}.word-choice.incorrect,.sound-letter.incorrect{background:#fff0f2;border-color:#dd7889}.star-mode{background:linear-gradient(180deg,#fffaf0,#fff)}.sound-letter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.sound-letter{min-height:70px;border:2px solid #dcd4ed;border-radius:16px;background:#fff;font:900 2rem/1 inherit;color:#513e72;cursor:pointer}.cvc-read-card h3{font-size:2.3rem;letter-spacing:.18em}.build-slots{display:flex;gap:12px;justify-content:center;margin:20px 0}.build-slots span{width:76px;height:84px;border-bottom:5px solid #6f58c9;display:grid;place-items:center;font-size:3rem;font-weight:900}.tile-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:16px 0}.letter-tile{width:82px;height:82px;border:3px solid #cdbfec;background:#faf8ff;border-radius:18px;font-size:2.4rem;font-weight:900;color:#513e72;cursor:pointer;box-shadow:0 4px 0 #d8cfeb}.memory-word{text-align:center;font-size:clamp(3rem,10vw,6rem);font-weight:900;color:#503c75;margin:18px}.mixed-picture{display:block;width:min(250px,65vw);height:210px;object-fit:contain;margin:6px auto}.mixed-finish-star{display:block;width:140px;height:140px;object-fit:contain;margin:auto}.unit4-check-banner{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;background:#faf8ff}.unit4-check-banner img{width:110px;height:110px;object-fit:contain}.word-page-picker .selectable.selected{background:#e9ddff;border-color:#6f58c9}.word-copy-card .word-chip{font-size:1.35rem}.word-unit-hero img{max-height:180px}.quiz-score-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px}.name-choice-feedback{min-height:1.6em;font-weight:800;color:#5b4a7e}.check-intro-card{margin-top:18px}
@media (max-width:700px){.word-preview-strip{grid-template-columns:repeat(2,1fr)}.personal-word-card,.unit4-check-banner{grid-template-columns:1fr;text-align:center}.personal-word-card img,.unit4-check-banner img{margin:auto}.word-choice-grid,.word-choice-grid.large{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-letter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.word-choice{font-size:1.1rem;min-height:58px}.build-slots span{width:64px;height:70px;font-size:2.4rem}.letter-tile{width:68px;height:68px;font-size:2rem}}

/* ============================================================
   PHASE 6 — BUILDING SENTENCES
   ============================================================ */
.sentence-skill-strip{margin:18px 0 12px;padding:14px 18px;border-radius:18px;background:#edf7ff;border:1px solid #cee4f4;display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:#365f7d}.sentence-skill-strip span{font-weight:800}.sentence-example-row{display:flex;justify-content:center;align-items:baseline;gap:1px;margin:12px 0 22px;padding:18px;border-radius:18px;background:#fff;border:2px solid #e5def5;font-size:clamp(1.8rem,6vw,3rem);font-weight:900}.capital-example,.punct-example{color:#6f58c9}.sentence-art-frame img{max-height:180px;object-fit:contain}.sentence-quiz-card,.sentence-scramble-card,.sentence-copy-card,.picture-sentence-card,.expand-card,.fix-card,.three-kinds-card,.picture-writing-prompt,.independent-prompt-card,.mixed-sentence-card,.unit5-check-banner{position:relative;margin:18px 0;padding:20px;border:2px solid #e7e2f0;border-radius:22px;background:#fff}.sentence-quiz-card h3,.sentence-scramble-card h3{font-size:clamp(1.4rem,4vw,2.15rem);margin:8px 0 14px}.two-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.sentence-choice,.sentence-long-choice{border:2px solid #d8d0e8;border-radius:16px;background:#fff;color:#403554;font-weight:900;cursor:pointer}.sentence-choice{min-height:72px;font-size:1.15rem}.sentence-long-choice{width:100%;min-height:66px;padding:12px 16px;text-align:left;font-size:1.18rem;line-height:1.35}.sentence-choice:hover,.sentence-long-choice:hover{background:#f8f4ff;border-color:#aa97db}.sentence-choice.correct,.sentence-long-choice.correct,.punctuation-choice-row button.correct{background:#e2f7e7;border-color:#5ab46b;color:#28683a}.sentence-choice.incorrect,.sentence-long-choice.incorrect,.punctuation-choice-row button.incorrect{background:#fff0f2;border-color:#df7d8d;color:#984255}.sentence-choice-stack{display:grid;gap:11px;margin:16px 0}.spacing-demo{white-space:pre-wrap}.punctuation-choice-row{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:14px;max-width:430px;margin:18px auto}.punctuation-choice-row button{min-height:88px;border:3px solid #d5cce8;border-radius:20px;background:#faf8ff;color:#58447e;font:900 3.2rem/1 Arial,sans-serif;cursor:pointer}.punctuation-choice-row button:hover{transform:translateY(-2px);border-color:#9e87d4}.built-sentence{min-height:84px;border:3px dashed #cfc4e6;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:14px;margin:12px 0 18px;background:#faf8ff;font-size:clamp(1.4rem,4vw,2.1rem);font-weight:900;text-align:center}.sentence-tile-row{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin:14px 0}.sentence-tile{border:2px solid #cdbfec;border-radius:14px;background:#fff;padding:13px 18px;color:#493b68;font-size:1.25rem;font-weight:900;box-shadow:0 4px 0 #ddd5eb;cursor:pointer}.sentence-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd5eb}.sentence-board-card{margin-top:18px}.sentence-model-strip{display:grid;gap:8px;margin:10px 0 14px;padding:12px 15px;border-radius:15px;background:#f7f4ff}.sentence-model-strip span{font-size:1.18rem;font-weight:900}.sentence-canvas-wrap canvas{touch-action:none;background:#fff;border-radius:14px;aspect-ratio:1100/680}.sentence-copy-models{display:grid;gap:10px;margin-top:12px}.sentence-copy-models div{padding:12px 15px;border-radius:14px;background:#f7f4ff;font-size:1.25rem;font-weight:900}.sentence-picture-stage{min-height:230px;display:grid;place-items:center;margin:6px 0}.sentence-picture-stage img{width:min(260px,70vw);height:220px;object-fit:contain}.base-sentence,.broken-sentence{padding:15px 18px;border-radius:16px;background:#f2effb;color:#514276;font-size:1.45rem;font-weight:900;margin:12px 0}.broken-sentence{text-decoration:underline wavy #d77c8e;text-decoration-thickness:2px}.three-kinds-card{background:linear-gradient(180deg,#fff,#faf8ff)}.sentence-kind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.sentence-kind-grid>div{border:1px solid #ded7ed;border-radius:16px;padding:14px;background:#fff}.sentence-kind-grid strong,.sentence-kind-grid span{display:block}.sentence-kind-grid span{margin-top:8px;font-size:1.05rem;font-weight:800}.picture-writing-prompt,.independent-prompt-card,.unit5-check-banner{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}.picture-writing-prompt img,.independent-prompt-card img,.unit5-check-banner img{width:140px;height:140px;object-fit:contain}.picture-writing-prompt h3,.independent-prompt-card h3,.unit5-check-banner h3{margin:4px 0 8px;font-size:1.65rem}.sentence-checklist{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.sentence-checklist span{border-radius:999px;background:#eef8f1;border:1px solid #cfe8d5;color:#39704a;padding:8px 12px;font-weight:900}.mixed-sentence-card{background:linear-gradient(180deg,#fffdf7,#fbf9ff)}.mixed-sentence-card #mixedSentenceArea{display:grid;gap:10px;margin:15px 0}.sentence-unit-hero img{max-height:180px}.sentence-lesson-shell .completion-hint{font-weight:900;color:#4d5e91}
@media(max-width:700px){.two-choice-row{grid-template-columns:1fr}.sentence-kind-grid{grid-template-columns:1fr}.picture-writing-prompt,.independent-prompt-card,.unit5-check-banner{grid-template-columns:1fr;text-align:center}.picture-writing-prompt img,.independent-prompt-card img,.unit5-check-banner img{margin:auto}.punctuation-choice-row button{min-height:72px;font-size:2.6rem}.sentence-long-choice{font-size:1.05rem}.sentence-tile{font-size:1.1rem;padding:11px 14px}}

/* Final polish: accessibility and tracing feedback */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;background:#fff;color:#35275d;padding:10px 14px;border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.2);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:4px solid #ffbf47;outline-offset:3px}
.trace-feedback{min-height:1.6em;margin:10px 6px 2px;font-weight:900;color:#3f6650}
.trace-check-btn{background:#eef8f1!important;border-color:#92cf9f!important;color:#2f6840!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (forced-colors: active){button,.unit-card,.practice-card,.week-card{border:2px solid CanvasText}.progress-bar{forced-color-adjust:none}}


/* Writing Practice Room upgrade */
.practice-studio-card{padding:20px;border-radius:22px;background:#fff}
.practice-tool-row{align-items:center}
.practice-tool-row .mini-tool,.practice-tool-row .clear-btn,.practice-tool-row .save-btn{border:2px solid #d8d0e8;background:#faf8ff;color:#4e3d73;font-weight:900}
.practice-tool-row .save-btn{background:#dff5e4;border-color:#b9dfc3;color:#28683a}
.practice-tool-row .clear-btn{background:#f3ecff;border-color:#d8cef6;color:#5b45a1}
.practice-export-btn{background:#eaf5ff!important;border-color:#cde4f7!important;color:#285f8e!important}
.practice-print-btn{background:#fff6df!important;border-color:#f0ddb0!important;color:#8b5c13!important}
.practice-tool-row .selected{background:#ece3ff!important;border-color:#8f78d5!important;color:#4a3688!important}
.practice-studio-wrap{padding:10px;background:#fff;border:2px dashed #d7cff0;border-radius:18px}
.practice-studio-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:1100/820;touch-action:none;cursor:crosshair;background:#fff;border-radius:14px}
.portfolio-image-item .portfolio-item-title{font-weight:900;color:#52446f;margin:8px 0}
.portfolio-image{display:block;width:100%;max-width:760px;height:auto;border:2px solid #e5e0ec;border-radius:16px;background:#fff;margin:8px 0 14px}
@media (max-width:700px){.practice-studio-wrap canvas{aspect-ratio:1100/920}.practice-tool-row{gap:8px}.practice-tool-row .mini-tool,.practice-tool-row .clear-btn,.practice-tool-row .save-btn{padding:10px 12px;font-size:.95rem}}

/* Writing Practice Room stations */
.practice-station-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.practice-station-tab{min-height:54px;border:2px solid #ded6ee;border-radius:16px;background:#fff;color:#514276;font:900 1rem/1.2 inherit;padding:10px 12px;cursor:pointer}
.practice-station-tab.selected{background:#eee8ff;border-color:#8d76d4;color:#4b3788;box-shadow:inset 0 0 0 2px rgba(111,88,201,.08)}
.practice-station-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:8px}
.practice-station-heading h3{margin:2px 0 6px}
.practice-bank-counter{flex:0 0 auto;border-radius:999px;background:#f4f0ff;border:1px solid #ddd2f5;color:#5b4984;padding:8px 12px;font-weight:900;font-size:.9rem}
.practice-room-hero img{max-height:150px;object-fit:contain}
.practice-studio-card{max-width:none}
.practice-studio-wrap canvas{aspect-ratio:1100/820}
#nextPracticeChallenge{padding:10px 16px}
@media(max-width:820px){.practice-station-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-station-heading{flex-direction:column;gap:4px}.practice-bank-counter{align-self:flex-start}}
@media(max-width:480px){.practice-station-tabs{grid-template-columns:1fr}.practice-station-tab{min-height:48px}.practice-studio-card{padding:14px}.practice-studio-wrap{padding:6px}.practice-tool-row{gap:7px}.practice-tool-row button{flex:1 1 auto}}