:root {
  --ink: #263642;
  --muted: #61717a;
  --cream: #f8f0e2;
  --paper: #fffdfa;
  --peach: #f7a56e;
  --peach-deep: #d96d48;
  --mint: #bfe0cf;
  --mint-deep: #39776b;
  --sky: #c7e4ea;
  --lilac: #d8cdf0;
  --line: #e9dfcf;
  --shadow: 0 18px 45px rgba(69, 51, 34, .10);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 6% 4%, #ffe7c8 0 9%, transparent 25%), radial-gradient(circle at 98% 28%, #d8f0e6 0 7%, transparent 22%), var(--cream); font-family: Vazirmatn, Tahoma, sans-serif; }
button { font: inherit; cursor: pointer; }
.app-shell { width: min(1160px, calc(100% - 40px)); margin: 28px auto 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 24px; }
.brand { color: var(--ink); text-decoration: none; display: inline-flex; gap: 9px; align-items: center; font-weight: 800; font-size: 1.25rem; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--peach-deep); border-radius: 12px 12px 12px 3px; font-size: 1.45rem; }
.child-chip { display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 13px; border: 1px solid rgba(38,54,66,.08); border-radius: 99px; background: rgba(255,253,250,.72); font-weight: 600; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); background: var(--mint); font-size: .9rem; }.chevron { color: var(--muted); }
.nav { display: flex; gap: 4px; padding: 6px; margin-bottom: 32px; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,250,.7); overflow-x: auto; }
.nav-item { border: 0; padding: 9px 14px; color: var(--muted); background: transparent; border-radius: 9px; white-space: nowrap; }.nav-item:hover { color: var(--ink); background: #fff5e9; }.nav-item.active { color: var(--ink); font-weight: 700; background: white; box-shadow: 0 2px 7px rgba(69,51,34,.08); }
.view { display: none; animation: rise .38s ease both; }.view.active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.track-selector { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-11px 4px 17px;color:var(--muted);font-size:.82rem; }.track-selector > span{font-weight:700;color:var(--ink)}.track-selector p{margin:0 5px 0 0;font-size:.75rem}.track-button{border:1px solid #dfd6c8;border-radius:999px;padding:5px 11px;background:#fffaf4;color:var(--muted);font-size:.78rem}.track-button.active{border-color:var(--mint-deep);background:#e4f1eb;color:var(--mint-deep);font-weight:700}
.welcome-row, .section-heading { max-width: 730px; }.welcome-row { display: flex; justify-content: space-between; align-items: end; margin: 0 4px 27px; }.eyebrow { margin: 0 0 6px; color: var(--mint-deep); font-size: .79rem; font-weight: 700; letter-spacing: .02em; }.welcome-row h1, .section-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.23; letter-spacing: -.04em; }.welcome-row em { font-family: Fraunces, Vazirmatn, serif; color: var(--peach-deep); font-style: normal; }.intro, .section-heading > p:last-child { margin: 10px 0 0; color: var(--muted); line-height: 1.8; }.sun-badge { width: 54px; height: 54px; border-radius: 50%; background: #f7cb6a; position: relative; box-shadow: 0 0 0 9px #f9de9d77; }.sun-badge span { position: absolute; inset: 14px; background: #fff4c5; border-radius: 50%; }
.lesson-card { display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; min-height: 330px; background: var(--paper); border: 1px solid #fff; border-radius: 28px; box-shadow: var(--shadow); }.lesson-copy { padding: clamp(28px, 5vw, 56px); align-self: center; }.lesson-meta { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: .85rem; }.pill { display: inline-block; padding: 4px 9px; border-radius: 99px; color: #9a4a2c; background: #ffe8d8; font-size: .75rem; font-weight: 700; }.pill.soft { color: var(--muted); background: #edf2ef; }.lesson-copy h2 { margin: 16px 0 8px; font-size: clamp(1.7rem, 3vw, 2.45rem); }.lesson-copy p { max-width: 410px; color: var(--muted); line-height: 1.9; }.lesson-copy mark, .story-panel mark { color: var(--peach-deep); background: #ffe0c6; border-radius: 5px; padding: 0 3px; }.primary-button { margin-top: 13px; border: 0; border-radius: 12px; padding: 12px 18px; color: white; background: var(--ink); font-weight: 700; box-shadow: 0 7px 14px rgba(38,54,66,.16); }.primary-button:hover { background: #344b5b; transform: translateY(-1px); }.primary-button span { margin-right: 9px; }.illustration { position: relative; overflow: hidden; min-height: 300px; background: linear-gradient(155deg, #cae8e7 0 65%, #aed6bd 65%); }.arch { position: absolute; width: 64%; height: 74%; left: 18%; top: 11%; border: 11px solid #fff7e8; border-bottom: 0; border-radius: 150px 150px 0 0; background: #e9f1d7; }.cloud { position: absolute; width: 62px; height: 20px; border-radius: 99px; background: #fff8e9bb; }.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud::before { width:28px;height:28px;right:9px;bottom:5px; }.cloud::after { width:22px;height:22px;left:8px;bottom:4px; }.cloud-one { top: 15%; right: 16%; }.cloud-two { top: 34%; right: 54%; transform: scale(.66); }.plant { position:absolute; left: 10%; bottom: 0; width: 68px; height: 120px; border-right: 5px solid #377564; transform: rotate(-8deg); transform-origin: bottom; }.plant i { position:absolute; width:35px;height:20px; border-radius:100% 0 100% 0; background:#5f9d75; }.plant i:nth-child(1){top:20px;right:0}.plant i:nth-child(2){top:57px;left:-9px;transform:rotate(67deg)}.plant i:nth-child(3){top:84px;right:4px;transform:rotate(-16deg)}.jug { position:absolute; width:82px;height:91px; bottom:42px; right:30%; border-radius:20px 20px 32px 32px; background:#f69b68; border:5px solid #d96d48; }.jug::before{content:"";position:absolute;width:33px;height:48px;border:7px solid #d96d48;border-left:0;border-radius:0 40px 40px 0;left:-33px;top:15px}.jug b{position:absolute;width:42px;height:17px;background:#f8bb82;left:15px;top:-18px;border-radius:12px 12px 3px 3px}.child-figure { position:absolute; right:11%; bottom:20px; width:88px;height:150px; }.child-figure i{position:absolute;right:20px;top:0;width:61px;height:61px;border-radius:48% 48% 45% 45%;background:#7a4b38;border:5px solid #5c3729}.child-figure b{position:absolute;right:13px;top:50px;width:69px;height:79px;border-radius:30px 30px 12px 12px;background:#f9d565}.child-figure span{position:absolute;right:0;bottom:0;width:87px;height:30px;border-radius:18px 18px 5px 5px;background:#4c766e}.water-drop { position:absolute; bottom:116px; right:26%; width:12px; height:18px; background:#7ac4d4; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.home-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:16px; margin-top: 16px; }.progress-card,.tiny-card,.story-panel,.letter-panel,.practice-panel,.progress-overview article,.milestone,.parent-grid article { background: var(--paper); border: 1px solid rgba(255,255,255,.9); border-radius: 20px; box-shadow: 0 8px 22px rgba(69,51,34,.06); }.progress-card { padding: 23px; }.card-heading { display:flex;justify-content:space-between;align-items:start;}.card-heading h2,.tiny-card p { margin: 0; }.sprout { color:var(--mint-deep);font-size:1.6rem; }.progress-line { height: 8px; overflow:hidden; margin:22px 0 8px; border-radius:9px;background:#f2eadf; }.progress-line span { display:block;height:100%;border-radius:inherit;background:var(--peach); }.progress-labels { display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem; }.progress-labels strong { color:var(--ink); }.muted { margin:17px 0 0;color:var(--muted);font-size:.85rem; }.tiny-card { padding: 21px; display:flex;flex-direction:column;align-items:flex-start; }.card-icon { display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:#e1f0ec;color:var(--mint-deep);font-size:1.2rem; }.tiny-card p { margin-top:16px;color:var(--muted);font-size:.8rem; }.tiny-card strong { margin:3px 0 12px;font-size:1.05rem; }.text-button { padding:0;border:0;color:var(--mint-deep);background:none;font-weight:700; }.memory-card .card-icon { background:#e2edf7;color:#4e7596; }.story-card .card-icon { background:#fff0cb;color:#bb7631; }
.section-heading { margin: 6px 4px 25px; }.learning-layout { display:grid;grid-template-columns:1.3fr .7fr;gap:18px; }.story-panel,.letter-panel { padding:26px; }.panel-label { margin-bottom:11px;color:var(--peach-deep);font-size:.77rem;font-weight:800; }.story-art { position:relative; height:180px;overflow:hidden;border-radius:17px;background:#d2eceb; }.story-sun { position:absolute;top:22px;right:34px;width:42px;height:42px;border-radius:50%;background:#f6c965; }.story-jug { position:absolute;left:42%;bottom:22px;width:70px;height:78px;border:5px solid #d96d48;border-radius:20px 20px 28px 28px;background:#f7a56e; }.story-jug::before{content:"";position:absolute;width:31px;height:31px;border-radius:50%;border:7px solid #d96d48;border-right:0;left:-32px;top:15px}.story-jug i{position:absolute;width:39px;height:16px;border-radius:8px 8px 0 0;background:#f8c18e;top:-19px;right:11px}.story-ground{position:absolute;right:-5%;bottom:-36px;width:110%;height:75px;border-radius:50%;background:#9ec997}.story-panel h2,.letter-panel h2,.practice-panel h2,.library-card h2,.milestone h2,.parent-grid h2{margin:16px 0 6px;font-size:1.42rem}.story-panel p,.letter-panel p,.practice-panel p,.library-card p,.milestone p,.parent-grid p{color:var(--muted);line-height:1.85}.story-actions { display:flex;gap:9px;flex-wrap:wrap;margin-top:14px; }.preview-control,.outline-button { border:1px solid var(--line);padding:9px 12px;border-radius:10px;color:var(--ink);background:#fffaf3;font-weight:600; }.preview-control small { display:block;color:var(--muted);font-size:.65rem;font-weight:400; }.outline-button:hover { border-color:var(--peach);background:#fff2e7; }.status-message,.word-feedback,.home-status { min-height:1.5em;margin:12px 0 0 !important;color:var(--mint-deep) !important;font-size:.84rem; }.letter-panel { text-align:center;background:linear-gradient(155deg,#fffdf9,#fff1e4); }.letter-display { display:grid;place-items:center;width:140px;height:140px;margin:19px auto 9px;border-radius:50% 50% 40% 50%;background:#ffe0c6;color:var(--peach-deep);font-family:Fraunces,Vazirmatn,serif;font-size:5.6rem;line-height:1; }.word-pills { display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:15px; }.word-pills button { border:0;border-radius:999px;padding:7px 12px;background:white;color:var(--peach-deep);box-shadow:0 2px 7px #e4cbb555;font-weight:700; }.word-pills button:hover,.word-pills button.selected { background:var(--peach-deep);color:white; }.practice-panel { display:grid;grid-template-columns:1fr auto auto;gap:25px;align-items:center;margin-top:18px;padding:25px 30px; }.practice-panel h2 { margin-top:0; }.practice-panel p { margin:0; }.trace-button { width:96px;height:96px;border:2px dashed #efaa78;border-radius:22px;color:#d96d48;background:#fff5ed;font-family:Fraunces,Vazirmatn,serif;font-size:4.3rem;line-height:1;transition:.25s; }.trace-button.traced { border-style:solid;background:#f7a56e;color:#fff;transform:rotate(-4deg) scale(1.04); }.practice-result { min-width:125px;color:var(--muted);font-size:.9rem; }
.story-library { display:grid;gap:12px; }.library-card { display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:center;padding:15px 18px; }.mini-art { display:grid;place-items:center;width:70px;height:70px;border-radius:18px;font-family:Fraunces,Vazirmatn,serif;font-size:2.6rem;font-weight:700; }.mini-art.peach{background:#ffe0c6;color:#d96d48}.mini-art.blue{background:#d9eef3;color:#4a7f93}.mini-art.yellow{background:#fff0c8;color:#ba8030}.library-card h2{margin:5px 0 0}.library-card p{margin:2px 0 0;font-size:.86rem}.round-button { display:grid;place-items:center;width:39px;height:39px;border:0;border-radius:50%;background:var(--ink);color:white; }.round-button.inactive{background:#eee9e1;color:#9c9488;cursor:default;}
.progress-overview { display:grid;grid-template-columns:repeat(3,1fr);gap:15px; }.progress-overview article { padding:22px; }.progress-overview span { display:block;color:var(--muted);font-size:.86rem; }.progress-overview strong { display:block;margin-top:8px;font-size:1.13rem; }.progress-overview .progress-line { margin:18px 0 0; }.progress-line.lilac span{background:#9b86ca}.progress-line.coral span{background:#df8c7a}.milestone { display:flex;gap:18px;align-items:center;margin-top:17px;padding:20px; }.milestone-star{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff0cd;color:#c28a32;font-size:1.5rem}.milestone .compact{margin-right:auto;margin-top:0}.parent-grid { display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:16px; }.parent-grid article{padding:23px}.parent-summary{background:#fffaf3!important}.parent-summary ul{padding-right:19px;margin:14px 0 0;color:var(--muted);line-height:2}.teacher-note{background:#e8f1ee!important}.teacher-note blockquote{margin:15px 0;color:var(--ink);line-height:1.9;font-weight:600}.teacher-note span{color:var(--mint-deep);font-size:.78rem}.home-practice .outline-button{margin-top:9px}.toast { position:fixed;left:50%;bottom:25px;padding:11px 16px;border-radius:12px;background:var(--ink);color:white;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:.25s;z-index:5 }.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width: 760px) { .app-shell{width:min(100% - 24px, 600px);margin-top:18px}.topbar{padding-bottom:17px}.nav{width:100%;margin-bottom:25px}.nav-item{padding:8px 11px;font-size:.83rem}.welcome-row h1,.section-heading h1{font-size:2rem}.sun-badge{display:none}.lesson-card,.learning-layout{grid-template-columns:1fr}.lesson-copy{padding:30px}.illustration{min-height:220px;order:-1}.home-grid,.progress-overview,.parent-grid{grid-template-columns:1fr}.home-grid{gap:11px}.tiny-card{min-height:135px}.practice-panel{grid-template-columns:1fr auto;gap:14px;padding:22px}.practice-result{grid-column:1 / -1}.milestone{align-items:flex-start;flex-wrap:wrap}.milestone .compact{margin-right:0}.library-card{gap:11px;padding:13px}.mini-art{width:58px;height:58px;font-size:2rem} }
@media (max-width: 390px) { .nav-item{padding:8px 9px;font-size:.78rem}.lesson-copy h2{font-size:1.75rem}.story-actions{display:grid}.story-actions button{width:100%} }
@media (max-width: 760px) { .track-selector{margin-top:-4px}.track-selector p{width:100%;margin:3px 0 0} }
.role-switcher{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-19px 4px 24px;color:var(--muted);font-size:.78rem}.role-switcher>span{font-weight:700;color:var(--ink)}.role-button{border:1px solid transparent;padding:5px 10px;border-radius:999px;background:transparent;color:var(--muted);font-size:.77rem}.role-button.active{border-color:#b7d8cc;background:#e8f2ed;color:var(--mint-deep);font-weight:700}.writing-area{position:relative;width:150px;height:150px;border:2px dashed #efaa78;border-radius:22px;background:#fff5ed;overflow:hidden}.trace-guide{position:absolute;inset:0;display:grid;place-items:center;color:#f2c29e;font-family:Fraunces,Vazirmatn,serif;font-size:6.2rem;line-height:1;pointer-events:none}#writing-canvas{position:relative;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-controls{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.teacher-grid{display:grid;grid-template-columns:.85fr 1.3fr .9fr;gap:16px}.teacher-grid article{padding:22px;background:var(--paper);border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 8px 22px rgba(69,51,34,.06)}.teacher-grid h2{margin:5px 0 13px;font-size:1.3rem}.class-stat{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;align-items:center;margin:18px 0;color:var(--muted)}.class-stat strong{font-size:1.45rem;color:var(--peach-deep)}.learner-row{display:grid;grid-template-columns:1fr .45fr .8fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}.learner-row.header{padding-top:3px;color:var(--muted);font-size:.75rem;font-weight:700}.management-card p{color:var(--muted);line-height:1.8}.teacher-status{min-height:1.5em}
@media (max-width: 760px) {.role-switcher{margin-top:-15px}.teacher-grid{grid-template-columns:1fr}.writing-area{width:100%;max-width:190px}.canvas-controls{align-items:stretch}}

/* Editorial refinement: warm paper, inky type, and role-specific accents. */
:root {
  --ink: #173333;
  --muted: #667372;
  --cream: #f4efe5;
  --paper: #fffcf6;
  --peach: #df825e;
  --peach-deep: #b94f35;
  --mint: #c9ddd2;
  --mint-deep: #26655b;
  --sky: #b9d9dc;
  --lilac: #d5cce1;
  --line: #ded6c8;
  --shadow: 0 18px 45px rgba(32, 48, 42, .08);
}

body {
  background:
    linear-gradient(90deg, rgba(41, 89, 79, .035) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(rgba(41, 89, 79, .025) 1px, transparent 1px) 0 0 / 78px 78px,
    radial-gradient(circle at 4% 1%, #f8d5a5 0 7%, transparent 24%),
    radial-gradient(circle at 96% 24%, #cde5db 0 8%, transparent 25%), var(--cream);
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-feature-settings: "kern" 1;
}

.app-shell { width: min(1180px, calc(100% - 48px)); margin-top: 32px; }
.topbar { border-bottom: 1px solid rgba(23, 51, 51, .12); padding: 0 2px 17px; }
.header-tools { display: flex; align-items: center; gap: 18px; }
.language-switcher { display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 3px; border: 1px solid #d5ddd6; border-radius: 5px; background: rgba(255,252,246,.62); }
.language-welcome { width:min(92vw,540px); padding:clamp(24px,5vw,42px); border:1px solid #d5ddd6; border-radius:24px; background:#fffdf8; color:#214e43; text-align:center; box-shadow:0 24px 80px #173c3260; }
.language-welcome::backdrop { background:#173c32b8; backdrop-filter:blur(5px); }
.language-welcome-mark { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; border-radius:18px; background:#214e43; color:#fff8e8; font:800 30px/1 Vazirmatn,sans-serif; }
.language-welcome h1 { margin:0; font-size:clamp(1.4rem,4vw,2rem); }
.language-welcome > p { margin:8px 0 24px; color:#62736a; direction:ltr; }
.language-welcome-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.language-welcome-options button { min-height:92px; padding:14px 10px; border:1px solid #c9d4cc; border-radius:14px; background:#f7f2e8; color:#214e43; cursor:pointer; }
.language-welcome-options button:hover,.language-welcome-options button:focus-visible { border-color:#af512e; background:#fff1df; outline:3px solid #af512e30; }
.language-welcome-options strong,.language-welcome-options span { display:block; }
.language-welcome-options strong { font-size:1.08rem; margin-bottom:5px; }
.language-welcome-options span { color:#62736a; font-size:.78rem; line-height:1.5; }
@media (max-width:560px) { .language-welcome-options { grid-template-columns:1fr; } .language-welcome-options button { min-height:64px; } }
.language-label { padding: 0 7px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.language-button { min-width: 34px; min-height: 30px; padding: 4px 7px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 700; transition: background .2s ease, color .2s ease; }
.language-button:hover { color: var(--ink); background: #eef4ef; }.language-button.active { color: #fff; background: var(--ink); }
.brand { gap: 11px; letter-spacing: -.03em; font-size: 1.38rem; }
.brand-mark { width: 42px; height: 42px; border-radius: 5px 15px 5px 15px; background: var(--peach-deep); box-shadow: 4px 4px 0 #e9b06d; }
.child-chip { border: 0; border-bottom: 2px solid #b7d3c9; border-radius: 0; background: transparent; padding: 4px 0 6px 10px; }
.avatar { background: #dceadd; border-radius: 7px; }

.nav { width: 100%; justify-content: space-between; flex-wrap: wrap; column-gap: 16px; row-gap: 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 13px 0 10px; margin-bottom: 12px; overflow: visible; }
.nav-item { position: relative; padding: 7px 3px; border-radius: 0; font-size: .9rem; }
.nav-item::after { content: ""; position: absolute; right: 3px; bottom: -11px; left: 3px; height: 3px; background: transparent; transition: background .2s ease; }
.nav-item:hover { background: transparent; color: var(--peach-deep); }
.nav-item.active { box-shadow: none; background: transparent; color: var(--ink); }
.nav-item.active::after { background: var(--peach-deep); }
.role-switcher { justify-content: flex-start; margin: 14px 0 31px; padding: 0; }
.role-switcher > span { color: var(--muted); font-size: .73rem; }
.role-button { border: 1px solid transparent; border-radius: 5px; padding: 6px 11px; background: transparent; }
.role-button.active { border-color: var(--ink); background: var(--ink); color: #fffaf2; }

.welcome-row { max-width: 880px; margin-right: 0; margin-bottom: 20px; }
.welcome-row h1, .section-heading h1 { max-width: 825px; font-weight: 800; letter-spacing: -.06em; }
.welcome-row h1 { font-size: clamp(2.35rem, 5.1vw, 4.15rem); line-height: 1.14; }
.welcome-row em { color: var(--peach-deep); text-decoration: underline; text-decoration-color: #e7ba76; text-decoration-thickness: .11em; text-underline-offset: .05em; }
.intro, .section-heading > p:last-child { max-width: 610px; font-size: 1.02rem; }
.sun-badge { width: 46px; height: 46px; border-radius: 3px 50% 50% 50%; transform: rotate(18deg); box-shadow: 5px 5px 0 #d4e6d8; }
.sun-badge span { inset: 11px; }
.track-selector { margin: 0 0 19px; padding-top: 12px; border-top: 1px dashed #c9c0b2; }
.track-button { border-radius: 4px; background: transparent; }
.track-button.active { border-color: var(--mint-deep); background: #e5efe9; }

.lesson-card { min-height: 354px; border: 1px solid #e3dbce; border-radius: 6px 28px 6px 28px; box-shadow: 9px 9px 0 rgba(37, 101, 91, .13), var(--shadow); }
.lesson-copy { position: relative; padding: clamp(30px, 5vw, 60px); }
.lesson-copy::before { content: "01"; position: absolute; top: 20px; left: 25px; color: #b6cabe; font-family: Fraunces, serif; font-size: 1.1rem; letter-spacing: .05em; }
.lesson-copy h2 { font-size: clamp(2rem, 3.3vw, 2.8rem); letter-spacing: -.045em; }
.lesson-copy p { font-size: 1rem; }
.pill { border-radius: 3px; background: #f8e2d0; color: #8e3f2c; }
.primary-button { border-radius: 4px; background: var(--ink); box-shadow: 4px 4px 0 #e9b06d; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button:hover { background: #234747; box-shadow: 2px 2px 0 #e9b06d; transform: translate(2px, 2px); }
.lesson-illustration { margin: 0; background: #e7d9bd; }
.lesson-illustration img { display: block; width: 100%; height: 100%; min-height: 354px; object-fit: cover; object-position: 64% center; }
.arch { background: #eef0cf; border-radius: 180px 180px 0 0; }
.jug { box-shadow: 4px 4px 0 rgba(104, 61, 44, .12); }

.home-grid { gap: 20px; margin-top: 28px; }
.progress-card,.tiny-card,.story-panel,.letter-panel,.practice-panel,.progress-overview article,.milestone,.parent-grid article { border: 1px solid #e5ddcf; border-radius: 5px 18px 5px 18px; box-shadow: none; }
.progress-card { background: #fffaf0; border-top: 4px solid var(--mint-deep); }
.tiny-card { border-top: 4px solid #d5b574; background: rgba(255,252,246,.76); }
.memory-card { border-top-color: #578294; }.story-card { border-top-color: #c77a42; }
.progress-line { height: 6px; border-radius: 0; background: #e6e0d6; }.progress-line span { border-radius: 0; }
.card-icon { border-radius: 3px 10px 3px 10px; }
.text-button { color: var(--peach-deep); }

.section-heading { margin-right: 0; border-right: 5px solid var(--peach-deep); padding-right: 18px; }
.section-heading h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
.learning-layout { gap: 22px; }.story-panel,.letter-panel { padding: 30px; }
.story-panel { border-top: 5px solid var(--ink); }.letter-panel { border-top: 5px solid var(--peach-deep); background: #fff9ed; }
.story-art { height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 4px 20px 4px 20px; background: #e6d5b8; }
.story-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }
.story-copy p { margin: 0 0 10px; }
.story-copy p:last-child { margin-bottom: 0; }
.letter-forms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 17px 0 13px; text-align: center; }
.letter-forms div { padding: 10px 6px; border: 1px solid #e8d9c5; border-radius: 4px 13px 4px 13px; background: #fffdf8; }
.letter-forms [data-platform-letter] { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.letter-forms [data-platform-letter]:hover,.letter-forms [data-platform-letter]:focus-visible { border-color: var(--mint-deep); background: #eff8f3; transform: translateY(-2px); }
.letter-forms [data-platform-letter][data-audio-playing="true"] { border-color: var(--peach-deep); background: #fff0e4; }
.letter-display[data-platform-letter],.sound-on-letter-preview [data-platform-letter] { cursor: pointer; transition: box-shadow .18s ease, background .18s ease, transform .18s ease; }
.letter-display[data-platform-letter]:hover,.letter-display[data-platform-letter]:focus-visible { box-shadow: 0 0 0 5px rgba(57,119,107,.16); transform: translateY(-2px); }
.sound-on-letter-preview [data-platform-letter]:hover,.sound-on-letter-preview [data-platform-letter]:focus-visible { background: #eaf5ef; box-shadow: inset 0 0 0 1px var(--mint-deep); transform: translateY(-1px); }
.letter-display[data-audio-playing="true"],.sound-on-letter-preview [data-audio-playing="true"] { background: #ffd9ba; }
.letter-forms span { display: block; color: var(--peach-deep); font-family: Fraunces, Vazirmatn, serif; font-size: 2.3rem; line-height: 1; }
.letter-forms small { display: block; margin-top: 7px; color: var(--muted); font-size: .68rem; line-height: 1.6; }
.sound-preview { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 6px; align-items: center; margin: 12px 0; padding: 9px; border: 1px solid #e3dacd; border-radius: 4px 14px 4px 14px; background: #fffdf8; }
.sound-preview-title { color: var(--ink); font-size: .71rem; font-weight: 800; text-align: right; }
.sound-preview-item { display: grid; place-items: center; min-width: 36px; padding: 4px 3px; border-radius: 9px; font-family: Fraunces, Vazirmatn, serif; font-size: 1.28rem; line-height: 1; }
.sound-preview-item small { margin-top: 2px; font-family: Vazirmatn, sans-serif; font-size: .57rem; }.zabar { color: #a44e34; background: #fbe0d0; }.zir { color: #216474; background: #dcedf0; }.pish { color: #7b5b1d; background: #f8edc9; }
.sound-lab-link,.lesson-route,.back-to-lesson { border: 1px solid #d8dfd5; color: var(--ink); background: #fffdf8; cursor: pointer; }
.sound-lab-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border-radius: 4px 13px 4px 13px; text-align: right; transition: border-color .2s ease, background .2s ease; }.sound-lab-link strong,.sound-lab-link small { display: block; }.sound-lab-link strong { font-size: .8rem; }.sound-lab-link small { margin-top: 2px; color: var(--muted); font-size: .66rem; line-height: 1.55; }.sound-lab-link svg,.lesson-route svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--mint-deep); }.sound-lab-link:hover { border-color: var(--mint-deep); background: #eef7f2; }
.lesson-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }.lesson-route { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px; border-radius: 4px 18px 4px 18px; text-align: right; transition: transform .2s ease, border-color .2s ease, background .2s ease; }.lesson-route:hover { transform: translateY(-2px); }.practice-route { border-top: 4px solid #c77a42; }.sound-route { border-top: 4px solid #356c83; }.route-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f5dfc2; color: var(--peach-deep); font-family: Fraunces, serif; font-weight: 700; }.sound-route .route-number { background: #dcedf0; color: #216474; }.lesson-route strong,.lesson-route small { display: block; }.lesson-route strong { font-size: .92rem; }.lesson-route small { margin-top: 4px; color: var(--muted); font-size: .75rem; line-height: 1.65; }
.back-to-lesson { margin-top: 14px; padding: 9px 12px; border-radius: 4px 12px 4px 12px; font-size: .8rem; font-weight: 700; }.back-to-lesson:hover { border-color: var(--mint-deep); background: #eef7f2; }
.sound-intro { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: "heading marks"; gap: 28px; align-items: end; }.sound-intro .section-heading { grid-area: heading; }.sound-mark-legend { grid-area: marks; padding: 18px; border: 1px solid #d7ded8; border-top: 4px solid #356c83; border-radius: 4px 18px 4px 18px; background: #fffdf8; }.sound-mark-legend > p { margin: 0 0 12px; color: var(--ink); font-size: .8rem; font-weight: 800; }.sound-mark-legend > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.sound-mark-legend span { display: grid; place-items: center; min-height: 66px; border-radius: 10px; }.sound-mark-legend i { font-family: Vazirmatn, serif; font-size: 1.8rem; font-style: normal; line-height: 1; }.sound-mark-legend b { margin-top: 4px; font-size: .65rem; }.practice-view .practice-panel { margin-top: 18px; }.sound-lab-grid { display: grid; grid-template-columns: minmax(180px, .48fr) 1fr; gap: 16px; align-items: stretch; margin-top: 18px; }.long-sound-card,.short-sounds { padding: 23px; border: 1px solid #d8dfd5; border-radius: 4px 20px 4px 20px; background: #fffaf1; }.long-sound-card { border-top: 5px solid var(--peach-deep); text-align: center; }.long-sound-card > span { display: block; color: var(--peach-deep); font-family: Fraunces, Vazirmatn, serif; font-size: 5.2rem; line-height: 1; }.long-sound-card h2 { margin: 7px 0; }.long-sound-card p:last-child { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.75; }.short-sounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 5px solid #356c83; }.sound-tile { display: grid; place-items: center; min-height: 165px; padding: 12px 8px; border: 1px solid currentColor; border-radius: 4px 16px 4px 16px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }.sound-tile:hover,.sound-tile[aria-pressed="true"] { transform: translateY(-2px); box-shadow: 3px 4px 0 rgba(37,101,91,.15); }.sound-letter { font-family: Vazirmatn, serif; font-size: 4.2rem; line-height: 1; }.sound-lab-status { grid-column: 1 / -1; min-height: 1.8em; margin: 0; padding: 12px 15px; border-right: 3px solid #356c83; background: #eef6f7; color: #345f68; font-size: .86rem; }
.word-instruction { margin: 14px 0 4px !important; color: var(--ink) !important; font-size: .82rem; font-weight: 700; }
.word-pills { align-items: stretch; }
.word-pills button { min-height: 39px; }
.reading-practice { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: center; margin-top: 22px; padding: 27px 30px; border: 1px solid #d8e2dc; border-top: 5px solid var(--mint-deep); border-radius: 5px 20px 5px 20px; background: #f4faf5; }
.reading-practice h2 { margin: 3px 0 8px; font-size: 1.45rem; }.reading-practice p { margin: 0; color: var(--muted); line-height: 1.8; }
.sentence-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: sentence; }
.sentence-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 10px 8px 8px; border: 1px solid #d4e2da; border-radius: 4px 14px 4px 14px; background: #fffdf8; counter-increment: sentence; font-weight: 700; }
.sentence-list li::before { content: counter(sentence); display: grid; place-items: center; grid-column: 2; grid-row: 1; width: 32px; height: 32px; color: var(--mint-deep); border-radius: 50%; background: #e2f0e8; font-family: Fraunces, serif; }.sentence-list li > span:not(.sentence-translation) { min-width: 0; grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
.sentence-list mark { color: var(--peach-deep); background: #ffe0c6; border-radius: 3px; padding: 0 2px; }.sentence-audio { grid-column: 3; grid-row: 1; min-width: 38px; min-height: 38px; border: 1px solid #b9d5c9; border-radius: 3px; color: var(--mint-deep); background: #edf6f0; font-weight: 800; }.sentence-audio:hover { background: var(--mint-deep); color: #fff; }
.panel-label { color: var(--peach-deep); letter-spacing: .03em; }
.preview-control,.outline-button { border-radius: 3px; background: transparent; transition: background .2s ease, border-color .2s ease; }
.outline-button:hover { border-color: var(--mint-deep); background: #e9f2ed; }
.letter-display { width: 150px; height: 150px; border-radius: 4px 50% 50% 50%; background: #f6ddc2; }
.word-pills button { border: 1px solid #e3dacd; border-radius: 3px; box-shadow: none; }
.word-pills button:hover,.word-pills button.selected { background: var(--peach-deep); }
.practice-panel { grid-template-columns: minmax(0,1.02fr) auto .88fr; align-items: start; border-top: 5px solid #d5b574; background: #fffaf1; }
.practice-steps { display: grid; gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.practice-steps li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid #eadfce; border-radius: 4px 14px 4px 14px; background: #fffdf8; }
.practice-steps li[hidden] { display:none; }
.practice-steps strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .86rem; }
.practice-steps p { margin: 0; font-size: .77rem; line-height: 1.7; }
.step-chip { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-family: Fraunces, serif; font-size: .95rem; }
.step-chip.coral { background: var(--peach-deep); }
.step-chip.mint { background: var(--mint-deep); }
.step-chip.ochre { background: #8f692c; }
.step-chip.slate { background: #684f56; }
.step-chip.forest { background: #1f5a4f; }
.practice-stage { display: grid; gap: 11px; justify-items: center; }
.writing-area { position: relative; width: 190px; height: 190px; border-radius: 4px 18px 4px 18px; border-color: #d4aa7f; background: #fff4e8; }
.writing-area::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(185,79,53,.28); border-radius: inherit; pointer-events: none; }
.trace-guide { z-index: 3; color: rgba(185,79,53,.43); font-size: 7.35rem; font-weight: 700; }
.trace-map { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: .62; pointer-events: none; }
.trace-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-map.has-movement-preview .trace-route.is-muted { opacity:.14; }
.trace-map.has-movement-preview .trace-route.is-previewed { opacity:1; stroke-width:6; stroke-dasharray:none; filter:drop-shadow(0 1px 2px rgba(38,54,66,.24)); }
.trace-map.has-movement-preview .route-dots.is-previewed { fill:rgba(104,79,86,.34); }
.canvas-controls [data-action^="trace-stroke-"][aria-pressed="true"] { border-color:var(--mint-deep); background:#edf6ef; color:var(--ink); box-shadow:0 0 0 2px rgba(37,101,91,.12); }
.route-four { display:none; fill:none; stroke-width:3.5; stroke-dasharray:2 6; stroke-linecap:round; stroke-linejoin:round; }
.route-five { display:none; fill:none; stroke-width:3.5; stroke-dasharray:2 6; stroke-linecap:round; stroke-linejoin:round; }
.route-main { stroke: rgba(217,109,72,.7); stroke-width: 3; stroke-dasharray: 2 8; }
.route-cap { stroke: rgba(53,108,131,.82); stroke-width: 3.5; stroke-dasharray: 2 6; }
.route-dots { display:none; fill:rgba(104,79,86,.14); stroke:#684f56; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.trace-anchor { stroke: #fff8ef; stroke-width: 2; }
.anchor-main { fill: var(--peach-deep); }
.anchor-cap { fill: var(--mint-deep); }
.anchor-four { display:none; fill:#684f56; }
.anchor-five { display:none; fill:#1f5a4f; }
.stroke-hint { position: absolute; z-index: 4; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff8ef; border-radius: 50%; color: #fff; font-family: Fraunces, serif; font-size: .72rem; font-weight: 800; box-shadow: 0 2px 5px rgba(38,54,66,.18); pointer-events: none; }.stroke-one { top: 37px; left: 142px; background: var(--peach-deep); }.stroke-two { top: 8px; left: 127px; background: var(--mint-deep); }
.stroke-hint[hidden] { display: none; }
.writing-area canvas { position: relative; z-index: 5; }
.writing-area.is-complete { border-style: solid; border-color: var(--mint-deep); background: #edf8f1; }
.writing-area.is-complete::after { border-color: rgba(37,101,91,.28); }
.completed-letter { position: absolute; inset: 0; z-index: 6; display: none; place-items: center; color: var(--mint-deep); font-family: Fraunces, Vazirmatn, serif; font-size: 7.8rem; line-height: 1; background: rgba(237,248,241,.9); pointer-events: none; }
.completed-check { position: absolute; right: 23px; bottom: 25px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mint-deep); color: #fff; box-shadow: 0 0 0 4px #edf8f1; }.completed-check svg { width: 24px; height: 24px; }
.writing-area.is-complete .completed-letter { display: grid; animation: completed-letter-arrive .42s both; }
.worksheet-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; width: 100%; }
.worksheet-strip span { display: grid; place-items: center; min-height: 44px; border: 1px dashed #d7b592; border-radius: 4px 13px 4px 13px; color: rgba(217,109,72,.42); background: #fffaf4; font-family: Fraunces, Vazirmatn, serif; font-size: 2rem; line-height: 1; }
.worksheet-strip span.completed { border-style: solid; border-color: #9fcbb5; color: var(--mint-deep); background: #edf8f1; }
.canvas-controls { align-items: stretch; gap: 8px; }
.canvas-controls .outline-button { width: 100%; }
.practice-result { min-height: 3.2em; font-size: .82rem; line-height: 1.8; }
.writing-reward { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 11px; overflow: hidden; border: 1px solid #a6cdbb; border-radius: 4px 14px 4px 14px; background: #eff8f1; color: #1d5d50; }
.writing-reward[hidden] { display: none; }
.writing-reward::before,.writing-reward::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 1px; background: #e2a241; opacity: 0; }
.writing-reward::before { top: 8px; right: 16px; }.writing-reward::after { bottom: 9px; right: 35px; background: var(--peach-deep); }
.writing-reward strong { display: block; font-size: .84rem; }.writing-reward p { margin: 2px 0 0; color: #4e7165; font-size: .73rem; line-height: 1.6; }
.reward-burst { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #cfe9d8; color: var(--mint-deep); }.reward-burst svg { width: 24px; height: 24px; }
.writing-reward:not([hidden]) { animation: reward-arrive .45s both; }.writing-reward:not([hidden]) .reward-burst { animation: reward-burst .58s .1s both; }.writing-reward:not([hidden])::before,.writing-reward:not([hidden])::after { animation: reward-spark .6s .12s both; }
@keyframes reward-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reward-burst { 0% { transform: scale(.7); } 65% { transform: scale(1.13); } 100% { transform: scale(1); } }
@keyframes reward-spark { 0% { opacity: 0; transform: translateY(8px) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-10px,-15px) rotate(150deg); } }
@keyframes completed-letter-arrive { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

.story-library { gap: 16px; }.library-card { border: 1px solid #e3dbce; border-radius: 4px 18px 4px 18px; background: rgba(255,252,246,.9); padding: 19px; transition: transform .2s ease, border-color .2s ease; }.library-card.current:hover { border-color: var(--peach); transform: translateX(-4px); }.mini-art { display: block; border-radius: 4px 15px 4px 15px; object-fit: cover; object-position: center; }.round-button { border-radius: 4px; background: var(--ink); }

.progress-overview article { padding: 25px; border-top: 4px solid var(--mint-deep); }.progress-overview article:nth-child(2) { border-top-color: #826ca8; }.progress-overview article:nth-child(3) { border-top-color: var(--peach-deep); }
.milestone { border-top: 4px solid #d5b574; background: #fffaf0; }.milestone-star { border-radius: 4px 13px 4px 13px; }

.parent-grid article { padding: 27px; }.parent-summary { border-top: 5px solid #c77a42; }.teacher-note { border-top: 5px solid var(--mint-deep); }.home-practice { border-top: 5px solid #6e8ca0; }
.teacher-note blockquote { border-right: 3px solid var(--mint-deep); padding-right: 13px; }
.teacher-grid { gap: 20px; }.teacher-grid article { border: 1px solid #d8dfd5; border-radius: 5px 18px 5px 18px; box-shadow: none; }.class-card { border-top: 5px solid var(--peach-deep) !important; }.learner-table { border-top: 5px solid var(--mint-deep) !important; }.management-card { border-top: 5px solid #6e8ca0 !important; }
.learner-row { border-bottom-color: #e4ebe5; }

body:has(#parent.active) .role-button[data-role-view="parent"] { border-color: #8f692c; background: #8f692c; color: #fffaf2; }
body:has(#teacher.active) .role-button[data-role-view="teacher"] { border-color: #356c83; background: #356c83; color: #fffaf2; }
body:has(#parent.active) .section-heading { border-color: #8f692c; }
body:has(#teacher.active) .section-heading { border-color: #356c83; }
body:has(#teacher.active) .nav-item.active::after { background: #356c83; }

@media (prefers-reduced-motion: no-preference) {
  .lesson-card, .home-grid > *, .learning-layout > *, .parent-grid > *, .teacher-grid > * { animation: settle .5s both; }
  .home-grid > *:nth-child(2), .learning-layout > *:nth-child(2), .parent-grid > *:nth-child(2), .teacher-grid > *:nth-child(2) { animation-delay: .08s; }
  .home-grid > *:nth-child(3), .parent-grid > *:nth-child(3), .teacher-grid > *:nth-child(3) { animation-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) { .writing-reward:not([hidden]),.writing-reward:not([hidden]) .reward-burst,.writing-reward:not([hidden])::before,.writing-reward:not([hidden])::after,.writing-area.is-complete .completed-letter { animation: none; } }

/* Each form keeps its color in the explanation and on the learning cards. */
.letter-forms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.letter-long { color: #b94f35 !important; }
.letter-plain { color: #216474 !important; }
.letter-joined { color: #8f692c !important; }
.letter-copy .letter-long,.letter-copy .letter-plain,.letter-copy .letter-joined { font-family: Fraunces, Vazirmatn, serif; font-weight: 800; }
.sound-preview-item { display: grid; place-items: center; min-height: 34px; }
.sound-preview-item small { display: none; }
.sound-on-letter-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; padding: 9px; border: 1px solid #e3dacd; border-radius: 4px 14px 4px 14px; background: #fffdf8; text-align: center; }
.sound-on-letter-title { grid-column: 1 / -1; color: var(--ink); font-size: .68rem; font-weight: 800; }
.sound-on-letter-preview > span:not(.sound-on-letter-title) { display: grid; min-height: 32px; place-items: center; border-radius: 8px; font-family: Vazirmatn, serif; font-size: 1.3rem; line-height: 1; }
.story-actions .outline-button { padding: 8px 10px; font-size: .76rem; }
.story-actions .outline-button.active { border-color:var(--mint-deep); color:#fff; background:var(--mint-deep); }
.story-copy mark.letter-long { color: #8e2c1d; background: #ffc5aa; }
.story-copy mark.letter-plain { color: #0d5268; background: #b9e4eb; }
.story-copy mark.letter-joined { color: #6d4811; background: #f8dc83; }
.story-finder-progress { display:grid; gap:6px; min-height:1.6em; margin:10px 0 0 !important; color:var(--mint-deep) !important; font-size:.78rem; font-weight:700; }.finder-form-progress { display:grid; grid-template-columns:40px 1fr auto; gap:8px; align-items:center; padding:6px 8px; border:1px solid #d8e5dd; border-radius:7px; background:#fffdf8; }.finder-form-progress b { color:var(--ink); font-family:Vazirmatn,serif; font-size:1rem; }.finder-form-progress small { color:var(--muted); font-size:.7rem; }.finder-progress-found { color:#6d7c75; }.finder-form-progress.has-found { border-color:#98caaa; background:#eff9f1; }.finder-form-progress.has-found .finder-progress-found { display:inline-flex; width:max-content; padding:3px 7px; border-radius:999px; color:#17633e; background:#ccefd5; font-weight:800; }
.story-letter { border-radius:0; cursor:pointer; outline:none; transition:background .16s ease,color .16s ease; }.story-letter:focus-visible { text-decoration:underline 3px var(--mint-deep); text-underline-offset:4px; }.story-letter:hover:not(.is-muted) { background:linear-gradient(to bottom,transparent 18%,#fff0ce 18% 88%,transparent 88%); }.story-letter.is-muted { cursor:default; opacity:.46; }.story-letter.is-found,.story-letter.is-revealed { font-weight:800; background:linear-gradient(to bottom,transparent 14%,var(--story-marker) 14% 88%,transparent 88%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }.story-letter.is-found.form-long,.story-letter.is-revealed.form-long { --story-marker:#ffd0ba; color:#762416; }.story-letter.is-found.form-plain,.story-letter.is-revealed.form-plain { --story-marker:#c5eaf0; color:#0a4a5b; }.story-letter.is-found.form-medial,.story-letter.is-revealed.form-medial { --story-marker:#e2d8f3; color:#4d3373; }.story-letter.is-found.form-joined,.story-letter.is-revealed.form-joined { --story-marker:#f4d475; color:#583800; }
.persian-content { direction: rtl; unicode-bidi: isolate; text-align: right; }
html[dir="ltr"] .story-actions { justify-content: flex-start; }

/* Shared heading rhythm and form-specific reading and writing practice. */
.welcome-row h1,.section-heading h1,.story-panel h2,.letter-panel h2,.practice-panel h2,.reading-practice h2,.long-sound-card h2,.word-practice-card h2,.library-card h2,.milestone h2,.parent-grid h2 { font-family: Vazirmatn, sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: 1.32; }
.reading-practice { grid-template-columns: .72fr 1.28fr; align-items: start; }
.reading-form-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.reading-form-group { padding:12px; border:1px solid #d4e2da; border-radius:4px 14px 4px 14px; background:#fffdf8; }
.reading-form-group h3 { margin:0 0 9px; font-size:.87rem; text-align:center; }.reading-form-group h3 span { display:inline-block; margin-left:3px; font-family:Fraunces,Vazirmatn,serif; font-size:1.35rem; line-height:.8; }.reading-form-group.long-form { border-top:3px solid #b94f35; }.reading-form-group.plain-form { border-top:3px solid #216474; }.reading-form-group.joined-form { border-top:3px solid #8f692c; }
.reading-form-group .sentence-list { gap:7px; }.reading-form-group .sentence-list li { min-height:44px; gap:7px; padding:6px 7px 6px 6px; border-radius:4px 10px 4px 10px; font-size:.78rem; }.reading-form-group .sentence-audio { min-width:30px; min-height:30px; }
.sentence-list mark.letter-long { color:#b94f35; background:#ffe0d0; }.sentence-list mark.letter-plain { color:#216474; background:#dcedf0; }.sentence-list mark.letter-joined { color:#8f692c; background:#f8edc9; }
.practice-form-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:15px; }.practice-form-button { min-height:43px; border:1px solid #e1d6c7; border-radius:4px 12px 4px 12px; background:#fffdf8; font-family:Fraunces,Vazirmatn,serif; font-size:1.65rem; line-height:1; cursor:pointer; }.practice-form-button.active { border-width:2px; box-shadow:2px 3px 0 rgba(38,54,66,.09); }.practice-form-button:nth-child(1).active { border-color:#b94f35; background:#ffe0d0; }.practice-form-button:nth-child(2).active { border-color:#216474; background:#dcedf0; }.practice-form-button:nth-child(3).active { border-color:#8f692c; background:#f8edc9; }
.route-lead { display:none; fill:none; stroke:rgba(53,108,131,.82); stroke-width:3.5; stroke-dasharray:2 6; stroke-linecap:round; }.anchor-lead { display:none; fill:var(--mint-deep); }
.writing-area[data-practice-form="plain"] .route-cap,.writing-area[data-practice-form="plain"] .anchor-cap,.writing-area[data-practice-form="plain"] .stroke-two { display:none; }.writing-area[data-practice-form="plain"] .stroke-one { top:37px; left:142px; }.writing-area[data-practice-form="joined"] .route-cap,.writing-area[data-practice-form="joined"] .anchor-cap { display:none; }.writing-area[data-practice-form="joined"] .route-lead,.writing-area[data-practice-form="joined"] .anchor-lead { display:block; }.writing-area[data-practice-form="joined"] .route-main { stroke:rgba(53,108,131,.82); }.writing-area[data-practice-form="joined"] .route-lead { stroke:rgba(217,109,72,.7); }.writing-area[data-practice-form="joined"] .anchor-main { fill:var(--mint-deep); }.writing-area[data-practice-form="joined"] .anchor-lead { fill:var(--peach-deep); }.writing-area[data-practice-form="joined"] .stroke-one { top:140px; left:156px; }.writing-area[data-practice-form="joined"] .stroke-two { top:140px; left:57px; }
.lesson-je .writing-area .route-cap,.lesson-che .writing-area .route-cap,.lesson-je .writing-area .route-dots,.lesson-che .writing-area .route-dots{display:block}
.lesson-je .writing-area[data-practice-form="plain"] .stroke-two,.lesson-che .writing-area[data-practice-form="plain"] .stroke-two{display:grid}
.lesson-je .writing-area[data-practice-form="joined"] .route-main,.lesson-che .writing-area[data-practice-form="joined"] .route-main{stroke:rgba(217,109,72,.7)}
.lesson-je .writing-area[data-practice-form="joined"] .anchor-main,.lesson-che .writing-area[data-practice-form="joined"] .anchor-main{fill:var(--peach-deep)}
.lesson-je .writing-area .route-lead,.lesson-che .writing-area .route-lead{stroke:#8f692c}
.lesson-je .stroke-three,.lesson-che .stroke-three{background:#684f56}.lesson-je .stroke-four,.lesson-che .stroke-four{background:#684f56}
@media (max-width: 760px) { .reading-form-groups { grid-template-columns:1fr; }.reading-practice { grid-template-columns:1fr; } }
@media (max-width: 1100px) and (min-width: 761px) { .reading-practice { grid-template-columns: 1fr; }.reading-form-groups { grid-template-columns: repeat(3,minmax(0,1fr)); } }
html[dir="ltr"] .sound-lab-link { text-align: left; }
.lesson-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dictation-route { border-top:4px solid #7b5e9e; }.dictation-route .route-number { background:#eee5f7; color:#7b5e9e; }
.dictation-card { display:grid; gap:12px; max-width:820px; margin-inline:auto; padding:28px; border:1px solid #ddd4e6; border-top:5px solid #7b5e9e; border-radius:5px 22px 5px 22px; background:#fffaf4; }.dictation-item { display:grid; grid-template-columns:auto minmax(72px,.42fr) minmax(150px,1fr) auto auto minmax(90px,.5fr); gap:10px; align-items:center; padding:12px; border:1px solid #e6deec; border-radius:4px 14px 4px 14px; }.dictation-audio { width:38px; height:38px; border:1px solid #cbbddd; border-radius:50%; color:#60477d; background:#f2edf8; font-weight:800; }.dictation-model { display:grid; justify-items:center; gap:2px; padding:5px 8px; border-radius:8px; background:#f5effa; color:var(--ink); }.dictation-model small { color:#705487; font-size:.64rem; font-weight:800; }.dictation-model strong { font-family:Vazirmatn, serif; font-size:1.35rem; line-height:1.1; }.dictation-item label { display:grid; gap:5px; color:var(--muted); font-size:.78rem; font-weight:700; }.dictation-item input { min-width:0; border:0; border-bottom:2px solid #cfc4dc; padding:7px 3px; color:var(--ink); background:transparent; font:inherit; }.persian-keys { display:flex; gap:3px; direction:rtl; }.persian-keys button { min-width:29px; height:29px; border:1px solid #cbbddd; border-radius:5px; color:#60477d; background:#f2edf8; font-family:Vazirmatn,serif; font-weight:800; }.persian-keys button:hover { background:#dfd2ed; }.dictation-result { color:#2c7959; font-size:.82rem; font-weight:700; }.dictation-item.is-correct { border-color:#8fc7a8; background:#edf8f1; }
@media (max-width:760px) { .dictation-item { grid-template-columns:auto 1fr; }.dictation-model { justify-self:start; min-width:72px; }.dictation-item label { grid-column:1 / -1; }.persian-keys { grid-column:1 / -1; }.dictation-item .outline-button,.dictation-result { grid-column:2; } }
.word-route { border-top: 4px solid #8f692c; }
.word-route .route-number { color: #8f692c; background: #f5ead4; }
.workshop-route { border-top: 4px solid #356c83; }
.workshop-route .route-number { color: #216474; background: #dcedf0; }
.word-practice-card { max-width: 720px; margin-inline: auto; padding: clamp(24px, 4vw, 38px); border: 1px solid #dfd1b9; border-top: 5px solid #8f692c; border-radius: 5px 22px 5px 22px; background: #fffaf0; box-shadow: 0 10px 26px rgba(91, 66, 33, .08); }
.word-exercise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.word-exercise { padding:22px; }.word-exercise h2 { font-size:1.2rem; }.word-exercise .word-pills { justify-content:flex-start; margin:16px 0 12px; }.word-exercise .word-pills button { min-width:0; flex:1 1 42%; }
@media (max-width:760px) { .word-exercise-grid { grid-template-columns:1fr; }.word-exercise .word-pills button { flex-basis:40%; } }
.word-practice-card h2 { margin: 5px 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); }
.word-practice-card .word-instruction { margin: 0; color: var(--muted); line-height: 1.9; }
.word-practice-card .word-pills { justify-content: center; gap: 10px; margin: 22px 0 14px; }
.word-practice-card .word-pills button { min-width: 78px; min-height: 48px; font-size: 1rem; }
.word-pills button.correct,.word-pills button.correct:hover { color: #175d42; border-color: #63aa80; background: #e1f3e7; }
.word-pills button.incorrect,.word-pills button.incorrect:hover { color: #8b302d; border-color: #d5887c; background: #fbe4e0; }
.word-pills button.correct::after { content: " ✓"; }
.word-pills button.incorrect::after { content: " ×"; }
.word-pills .letter-long,.word-pills .letter-plain,.word-pills .letter-joined { font-family:Fraunces,Vazirmatn,serif; font-weight:800; }
.word-practice-card .word-feedback { min-height: 1.8em; margin: 0; color: #45655b; font-weight: 700; }

.sound-letter { position: relative; display: inline-grid; place-items: center; }
.sound-letter::after { content: ""; position: absolute; top: .76em; left: 50%; width: 1.75em; border-top: 1.5px solid currentColor; opacity: .5; transform: translateX(-50%); }

/* A subtle writing baseline makes the letter's placement explicit. */
.letter-forms > div { position: relative; overflow: hidden; }
.letter-forms > div::after { content: ""; position: absolute; top: 42px; right: 10%; left: 10%; border-top: 1.5px solid rgba(66, 91, 87, .48); }
.letter-forms span { position: relative; z-index: 1; }
.long-sound-card > span::after { content: ""; position: absolute; left: 50%; width: 1.9em; border-top: 1.5px solid currentColor; opacity: .42; transform: translateX(-50%); }
.long-sound-card > span { position: relative; }
.long-sound-card > span::after { top: .87em; width: 1.45em; }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .sound-intro { grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "marks"; gap:16px; }
  .sound-intro > *, .sound-lab-grid > * { min-width:0; }
  .sound-mark-legend { width:100%; box-sizing:border-box; }
  .app-shell { width: min(100% - 28px, 600px); }
  .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; justify-content: stretch; overflow: visible; }
  .nav-item { min-width: 0; padding-inline: 2px; font-size: .76rem; text-align: center; white-space: normal; }
  .role-switcher { margin-bottom: 24px; }
  .lesson-card { border-radius: 4px 22px 4px 22px; box-shadow: 5px 5px 0 rgba(37,101,91,.13); }
  .lesson-illustration img { min-height: 240px; object-position: 66% center; }
  .lesson-copy::before { left: 18px; }
  .home-grid { gap: 13px; }
  .reading-practice { grid-template-columns: 1fr; gap: 18px; padding: 23px; }
  .lesson-routes,.sound-lab-grid { grid-template-columns: 1fr; }
  .short-sounds { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; }
  .sound-tile { min-height: 135px; }.sound-tile span { font-size: 2.5rem; }
  .practice-panel { grid-template-columns: 1fr; }
  .practice-stage { justify-items: stretch; }
  .writing-area { width: min(100%, 220px); margin-inline: auto; }
  .worksheet-strip { max-width: 220px; margin-inline: auto; }
  .canvas-controls { width: min(100%, 220px); margin-inline: auto; align-items: stretch; }
}

/* Sound cards must fit even with translated copy and enlarged text. */
.sound-intro > *, .sound-lab-grid > * { min-width:0; }
.sound-lab-grid { grid-template-columns:minmax(0,.48fr) minmax(0,1fr); }
.sound-mark-legend, .short-sounds, .sound-tile { min-width:0; box-sizing:border-box; }
.sound-lab-status { overflow-wrap:anywhere; }
.sound-mark-legend.has-shadda > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shadda-sound-card { grid-column: 1 / -1; display: grid; grid-template-columns: 76px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid #d8dfd5; border-right: 5px solid #356c83; border-radius: 4px 18px 4px 18px; background: #fffaf1; }
.shadda-sound-mark { display: grid; place-items: center; font-family: Vazirmatn,Tahoma,sans-serif; font-size: 3.8rem; line-height: 1; color: #356c83; }
.shadda-sound-copy :is(p,h2) { margin: 0; }
.shadda-sound-copy h2 { margin-block: 3px 6px; font-size: 1.2rem; }
.shadda-sound-example { margin-top: 8px !important; font-family: Vazirmatn,Tahoma,sans-serif; font-size: 1.35rem; font-weight: 800; }
@media(max-width:560px) { .sound-mark-legend.has-shadda > div { grid-template-columns: repeat(2,minmax(0,1fr)); } .shadda-sound-card { grid-template-columns: 58px minmax(0,1fr); gap: 12px; } .shadda-sound-card .platform-word-audio { grid-column: 1 / -1; width: 100%; } }
.sound-letter { min-width:1.85em; }
.sound-letter::after { width:1.45em; }
@media (max-width:900px) {
  .sound-intro { grid-template-columns:minmax(0,1fr); grid-template-areas:"heading" "marks"; }
  .sound-lab-grid { grid-template-columns:minmax(0,1fr); }
  .sound-tile { min-height:120px; }
  .sound-letter { font-size:clamp(2rem,8vw,3.5rem); line-height:1.4; }
}
@media (max-width:380px) {
  .short-sounds { gap:6px; padding:10px; }
  .sound-tile { min-height:104px; padding:8px 4px; }
}

/* Public landing: a learning narrative rather than a generic SaaS grid. */
.landing-view { padding: 2px 0 40px; }
.landing-kicker { display: flex; align-items: center; gap: 12px; color: var(--mint-deep); font-size: .78rem; font-weight: 700; }
.landing-kicker span + span { padding-right: 12px; border-right: 1px solid #b8cfc3; color: var(--muted); font-weight: 500; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); gap: clamp(32px, 7vw, 95px); align-items: center; min-height: 550px; padding: 48px 0 62px; border-bottom: 1px solid #d6d0c4; }
.landing-copy h1 { max-width: 680px; margin: 10px 0 18px; color: var(--ink); font-size: clamp(3.2rem, 6.1vw, 5.8rem); line-height: 1.04; letter-spacing: -.075em; }
.landing-copy h1 em { color: var(--peach-deep); font-family: Vazirmatn, Tahoma, sans-serif; font-style: normal; text-decoration: underline; text-decoration-color: #e4bd75; text-underline-offset: .08em; text-decoration-thickness: .09em; }
.landing-copy > p:last-of-type { max-width: 560px; margin: 0; color: #425655; font-size: 1.1rem; line-height: 2.05; }
.landing-story-title { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 22px 0 0; padding: 10px 13px; border-right: 3px solid var(--peach-deep); background: #fff8ee; color: var(--ink); font-size: .92rem; line-height: 1.7; }
.landing-story-title span { color: var(--peach-deep); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.landing-story-title b { font-family: Vazirmatn, serif; font-weight: 800; }
.landing-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }.landing-cta { margin-top: 0; padding: 15px 21px; }.landing-link { font-size: .94rem; }
.landing-art { position: relative; min-height: 440px; overflow: hidden; isolation: isolate; border: 1px solid #d3ded8; border-radius: 6px 44px 6px 44px; background: linear-gradient(145deg, #e2f0e9 0 58%, #f7e7cf 58%); box-shadow: 11px 11px 0 rgba(185, 79, 53, .12); }
.landing-art::before,.landing-art::after { content: ""; position: absolute; border: 1px solid rgba(38,101,91,.2); border-radius: 50%; }.landing-art::before { width: 390px; height: 390px; left: -165px; bottom: -180px; }.landing-art::after { width: 215px; height: 215px; right: -65px; top: -84px; }
.art-sun { position: absolute; top: 60px; right: 76px; width: 83px; height: 83px; border-radius: 6px 50% 50% 50%; background: #dcae52; transform: rotate(18deg); }.art-sun::after { content: ""; position: absolute; inset: 20px; border-radius: inherit; background: #f7e9ad; }
.art-path { position: absolute; width: 570px; height: 270px; right: -165px; bottom: -70px; border: 40px solid #417d71; border-left: 0; border-radius: 50% 0 0 0; transform: rotate(-12deg); opacity: .92; }
.art-page { position: absolute; display: grid; place-items: center; width: 120px; height: 145px; color: var(--ink); border: 1px solid #d7c8b5; background: #fffaf0; box-shadow: 5px 6px 0 rgba(27,50,50,.12); font-size: 5rem; font-weight: 700; }.page-one { right: 72px; bottom: 70px; transform: rotate(7deg); }.page-two { right: 205px; bottom: 114px; transform: rotate(-7deg); color: #bd583d; }.page-three { right: 123px; bottom: 208px; transform: rotate(3deg); color: #377569; }
.art-line { position: absolute; width: 150px; height: 2px; background: #bc6a4e; transform-origin: right; }.line-one { top: 170px; right: 230px; transform: rotate(-27deg); }.line-two { top: 241px; right: 43px; width: 125px; background: #377569; transform: rotate(22deg); }
.art-stamp { position: absolute; left: 35px; top: 38px; padding: 12px 15px; border: 1px solid #337367; color: #26655b; background: #e8f3ec; font-size: .78rem; font-weight: 800; line-height: 1.65; transform: rotate(-6deg); }
.landing-proof { display: grid; grid-template-columns: 1.6fr repeat(4, .75fr); gap: 18px; align-items: center; padding: 24px 0 68px; }.landing-proof p { max-width: 325px; margin: 0; color: var(--muted); line-height: 1.8; font-size: .9rem; }.landing-proof div { display: flex; flex-direction: column; gap: 5px; min-height: 70px; padding-right: 14px; border-right: 1px solid #d6d0c4; }.landing-proof span { color: var(--peach-deep); font-family: Fraunces, serif; font-size: 1.05rem; }.landing-proof strong { max-width: 100px; font-size: .85rem; line-height: 1.55; }
.landing-journey { display: grid; grid-template-columns: .9fr 1.55fr; gap: 70px; padding: 72px 0; border-top: 1px solid #d6d0c4; }.journey-intro h2,.access-doors h2 { margin: 5px 0 14px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.25; letter-spacing: -.04em; }.journey-intro > p:last-child { color: var(--muted); line-height: 1.95; }.journey-steps { display: grid; gap: 0; }.journey-steps article { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 18px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid #d6d0c4; }.journey-steps article:first-child { border-top: 1px solid #d6d0c4; }.journey-steps span { color: var(--peach-deep); font-family: Fraunces, serif; }.journey-steps h3 { margin: 0; font-size: 1.18rem; }.journey-steps p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.access-doors { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 13px; align-items: stretch; padding: 55px 0; border-top: 1px solid #d6d0c4; }.access-doors > div { padding-left: 30px; }.access-door { display: grid; grid-template-rows: auto 1fr auto; min-height: 210px; padding: 20px; text-align: right; border: 1px solid #cfd8d2; border-radius: 4px 21px 4px 21px; color: var(--ink); background: #fffaf2; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.access-door:hover { transform: translateY(-3px); box-shadow: 5px 6px 0 rgba(23,51,51,.1); }.access-door span { color: var(--mint-deep); font-size: .78rem; font-weight: 700; }.access-door strong { align-self: center; max-width: 190px; font-size: 1.08rem; line-height: 1.65; }.access-door i { justify-self: end; color: var(--peach-deep); font-size: 1.2rem; font-style: normal; }.parent-door { background: #fff8ec; border-color: #e1c892; }.teacher-door { background: #f1f8f5; border-color: #b7d5cc; }.teacher-door span { color: #356c83; }
.landing-closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 38px 0 10px; border-top: 1px solid #d6d0c4; }.landing-closing p { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2.05rem); font-weight: 800; letter-spacing: -.04em; }

/* Role atmospheres: the information changes shape, not just accent color. */
body:has(#home.active) .home-grid { grid-template-columns: 1.55fr 1fr 1fr; }.home-grid .progress-card { position: relative; overflow: hidden; }.home-grid .progress-card::after { content: ""; position: absolute; width: 160px; height: 160px; left: -76px; bottom: -94px; border: 18px solid rgba(38,101,91,.12); border-radius: 50%; }
body:has(#parent.active) .parent-grid { grid-template-columns: 1.25fr .9fr 1fr; align-items: stretch; }.parent-summary { position: relative; }.parent-summary::before { content: "این هفته"; display: inline-block; margin-bottom: 10px; color: #8f692c; font-size: .78rem; font-weight: 700; }.home-practice { display: flex; flex-direction: column; }.home-practice .outline-button { margin-top: auto; align-self: flex-start; }
html[lang="en"] .parent-summary::before { content: "This week"; } html[lang="de"] .parent-summary::before { content: "Diese Woche"; }
body:has(#teacher.active) .teacher-grid { grid-template-columns: .85fr 1.6fr .9fr; }.teacher-grid .learner-table { background: #fcfffd; }.learner-row { grid-template-columns: 1fr .55fr .9fr; padding: 13px 0; }.teacher-grid .outline-button { min-height: 42px; }

button:focus-visible, a:focus-visible { outline: 3px solid #d78748; outline-offset: 4px; }

/* A consistent, child-friendly route through every lesson activity. */
.lesson-stage-guide { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px 24px; align-items: center; margin: 0 4px 24px; padding: 18px 20px; border: 1px solid #b9d6cc; border-radius: 5px 22px 5px 22px; background: linear-gradient(135deg,#f2faf6,#fff9ed); box-shadow: 5px 5px 0 rgba(37,101,91,.09); }
.lesson-stage-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: var(--mint-deep); font-size: .78rem; font-weight: 800; }
.lesson-stage-dots { display: flex; flex: 1; gap: 6px; }
.lesson-stage-dot { flex: 1; height: 5px; border-radius: 99px; background: #d7e3de; }
.lesson-stage-dot.done { background: #8fbdad; }
.lesson-stage-dot.active { background: var(--peach-deep); }
.lesson-stage-copy > span { display: block; margin-bottom: 3px; color: var(--peach-deep); font-size: .74rem; font-weight: 800; }
.lesson-stage-copy strong { display: block; font-size: 1.12rem; line-height: 1.55; }
.lesson-stage-copy p { max-width: 660px; margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.lesson-stage-actions { display: flex; align-items: stretch; gap: 8px; }
.lesson-stage-actions button { min-height: 48px; border-radius: 4px 14px 4px 14px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.lesson-stage-back { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.lesson-stage-next { min-width: 170px; border: 0; color: #fff; background: var(--mint-deep); box-shadow: 3px 3px 0 #e9b06d; text-align: start; }
.lesson-stage-next span,.lesson-stage-next strong { display: block; }
.lesson-stage-next span { font-size: .68rem; opacity: .78; }
.lesson-stage-next strong { margin-top: 2px; font-size: .86rem; }
.lesson-stage-next:hover:not(:disabled) { background: #234f47; transform: translateY(-1px); }
.lesson-stage-next:disabled { color: #66716d; background: #dbe1de; box-shadow: none; cursor: not-allowed; }
.lesson-stage-lock { grid-column: 1 / -1; margin-top: -8px; color: #766d5d; font-size: .74rem; }
html[dir="ltr"] .lesson-stage-guide { border-radius: 22px 5px 22px 5px; }

html[lang="en"] body, html[lang="de"] body { font-family: "DM Sans", Arial, sans-serif; }
html[dir="ltr"] .landing-copy h1 { letter-spacing: -.055em; word-spacing: .08em; }
html[dir="ltr"] .section-heading { border-right: 0; border-left: 5px solid var(--peach-deep); padding-right: 0; padding-left: 18px; }
html[dir="ltr"] .landing-kicker span + span { padding-right: 0; padding-left: 12px; border-right: 0; border-left: 1px solid #b8cfc3; }
html[dir="ltr"] .landing-story-title { border-right: 0; border-left: 3px solid var(--peach-deep); }
html[dir="ltr"] .landing-proof div { padding-right: 0; padding-left: 14px; border-right: 0; border-left: 1px solid #d6d0c4; }
html[dir="ltr"] .teacher-note blockquote { border-right: 0; border-left: 3px solid var(--mint-deep); padding-right: 0; padding-left: 13px; }
html[dir="ltr"] .art-sun { right: auto; left: 76px; }
html[dir="ltr"] .art-stamp { left: auto; right: 35px; transform: rotate(6deg); }
html[dir="ltr"] .page-one { right: auto; left: 72px; transform: rotate(-7deg); }
html[dir="ltr"] .page-two { right: auto; left: 205px; transform: rotate(7deg); }
html[dir="ltr"] .page-three { right: auto; left: 123px; transform: rotate(-3deg); }
html[dir="ltr"] .line-one { right: auto; left: 230px; transform: rotate(27deg); }
html[dir="ltr"] .line-two { right: auto; left: 43px; transform: rotate(-22deg); }
html[dir="ltr"] .lesson-copy::before { left: auto; right: 25px; }
@media (max-width: 760px) {
  .nav-item,.role-button,.track-button,.outline-button,.preview-control,.text-button,.primary-button,.access-door { min-height: 44px; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .header-tools { flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .language-button { min-width: 44px; min-height: 44px; }.language-label { display: none; }.language-switcher { min-height: 48px; }
  .landing-hero { grid-template-columns: 1fr; min-height: unset; gap: 30px; padding: 30px 0 46px; }.landing-copy h1 { font-size: clamp(2.75rem, 13vw, 4.3rem); }.landing-art { min-height: 365px; }.art-page { width: 104px; height: 127px; font-size: 4.3rem; }.page-one { right: 52px; bottom: 45px; }.page-two { right: 160px; bottom: 86px; }.page-three { right: 90px; bottom: 184px; }.art-sun { top: 38px; right: 46px; }.landing-proof { grid-template-columns: 1fr 1fr; gap: 0; padding: 23px 0 45px; }.landing-proof p { grid-column: 1 / -1; max-width: 100%; margin-bottom: 18px; }.landing-proof div { margin: 8px 0; }.landing-journey { grid-template-columns: 1fr; gap: 26px; padding: 48px 0; }.journey-steps article { grid-template-columns: 42px 1fr; gap: 10px; }.journey-steps p { grid-column: 2; }.access-doors { grid-template-columns: 1fr; padding: 44px 0; }.access-doors > div { padding-left: 0; }.access-door { min-height: 156px; }.landing-closing { align-items: flex-start; flex-direction: column; padding-bottom: 10px; }
  body:has(#home.active) .home-grid, body:has(#parent.active) .parent-grid, body:has(#teacher.active) .teacher-grid { grid-template-columns: 1fr; }
  .lesson-stage-guide { grid-template-columns: 1fr; gap: 13px; margin-inline: 0; padding: 16px; }
  .lesson-stage-progress { gap: 9px; }
  .lesson-stage-actions { display: grid; grid-template-columns: auto minmax(0,1fr); }
  .lesson-stage-actions .lesson-stage-next:only-child { grid-column: 1 / -1; }
  .lesson-stage-next { min-width: 0; }
  .lesson-stage-lock { margin-top: -5px; }
  html[dir="ltr"] .lesson-copy::before { right: 18px; }
  html[dir="ltr"] .art-sun { right: auto; left: 46px; }
  html[dir="ltr"] .page-one { right: auto; left: 52px; }
  html[dir="ltr"] .page-two { right: auto; left: 160px; }
  html[dir="ltr"] .page-three { right: auto; left: 90px; }
}