@font-face {
  font-family: DM Sans;
  src: url("assets/dm-sans.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DM Sans;
  src: url("assets/dm-sans-semibold.ttf") format("truetype");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: Noto Serif Bengali;
  src: url("assets/bengali.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --paper: #f8f9f4;
  --white: #fffefa;
  --ink: #203d34;
  --green: #214b3f;
  --muted: #64715d;
  --line: #e3e7dd;
  --lime: #e4ebcb;
  --peach: #f1dfd2;
  --sans:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Serif Bengali", sans-serif;
  --bengali: "Noto Serif Bengali", serif;
  --display: Georgia, "Times New Roman", serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: style;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
button {
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a,
button,
input {
  outline-offset: 5px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
canvas:focus-visible {
  outline: 3px solid #b87750;
}
main:focus {
  outline: none;
}
[hidden] {
  display: none !important;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
p {
  line-height: 1.7;
  margin: 0 0 1em;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
}
h1 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1.12;
}
h2 {
  font-size: 24px;
  letter-spacing: -0.7px;
  line-height: 1.35;
}
h3 {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.3px;
}
em {
  font-weight: 400;
}
strong {
  font-weight: 600;
}
.icon {
  width: 21px;
  height: 21px;
}
.bengali {
  font-family: var(--bengali);
  font-weight: 500;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 14px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 49px;
  padding: 13px 21px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.button-primary {
  background: var(--green);
  color: #fff;
}
.button-primary:hover:not(:disabled) {
  background: #163e32;
}
.button-secondary {
  background: #eef1e7;
  border: 1px solid #dce2d4;
}
.button-ghost {
  background: transparent;
  min-height: 44px;
}
.button-ghost:hover:not(:disabled) {
  background: #edf0e7;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  padding: 9px 0;
  white-space: nowrap;
}
.text-link .icon {
  width: 18px;
}
.text-link:hover {
  color: #a96547;
}
.middle-dot {
  padding: 0 8px;
  color: #92998c;
}
.round-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: #e9eddf;
  border-radius: 50%;
  width: 43px;
  height: 43px;
}
.pill {
  display: inline-flex;
  border-radius: 5px;
  padding: 6px 9px;
  background: #f1f4e7;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
}
.tiny-line {
  display: inline-block;
  width: 23px;
  height: 1px;
  background: #8e9c79;
  vertical-align: middle;
  margin-right: 8px;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 100;
  background: var(--green);
  color: white;
  padding: 16px;
}
.skip-link:focus {
  top: 10px;
}
.site-header {
  max-width: 1256px;
  margin: auto;
  padding: 27px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 30px;
  letter-spacing: -1.5px;
  line-height: 1.1;
  font-weight: 600;
}
.brand-mark {
  width: 41px;
  height: 44px;
  background: var(--green);
  color: #edf0da;
  border-radius: 11px 11px 11px 3px;
  display: grid;
  place-items: center;
  font-family: var(--bengali);
  font-size: 34px;
  padding-top: 5px;
}
.brand-tagline {
  display: block;
  font-size: 6.8px;
  letter-spacing: 1.45px;
  margin-top: 7px;
  font-weight: 500;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 44px;
}
.main-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #7e847b;
  height: 100%;
  position: relative;
  font-weight: 500;
}
.main-nav a > svg {
  width: 16px;
  height: 16px;
}
.main-nav a.active {
  color: var(--green);
}
.main-nav a.active:after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
}
.header-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef0e4;
  border: 1px solid #e2e6d7;
  border-radius: 30px;
  padding: 10px 13px;
  font-size: 12px;
  white-space: nowrap;
}
.header-streak svg {
  width: 17px;
  height: 19px;
  color: #9c7953;
}
.header-streak #header-streak {
  font-weight: 600;
}
.streak-label {
  color: #7a826d;
  font-size: 10px;
}
#main {
  max-width: 1160px;
  min-height: calc(100vh - 220px);
  margin: 0 auto;
  padding: 0 48px 40px;
}
.home-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 365px;
  align-items: center;
  gap: 20px;
  padding: 34px 0 30px;
}
.hero-copy .eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  margin-bottom: 24px;
}
.hero-copy h1 {
  font-size: 57px;
  line-height: 1.13;
  letter-spacing: -2px;
}
.hero-copy h1 em {
  color: #78865a;
}
.hero-description {
  font-size: 13px;
  color: #7b8277;
  line-height: 1.85;
  margin: 19px 0 20px;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 10px;
  color: #74816d;
}
.hero-meta > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-meta .icon {
  width: 13px;
  height: 13px;
}
.mini-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #96a37c;
}
.letter-garden {
  position: relative;
  height: 295px;
  width: 100%;
  max-width: 430px;
  justify-self: end;
}
.garden-orbit {
  position: absolute;
  border: 1px solid #e5e8da;
  border-radius: 50%;
  width: 280px;
  height: 280px;
  left: 70px;
  top: 4px;
  transform: rotate(-20deg);
}
.orbit-two {
  width: 340px;
  height: 200px;
  left: 40px;
  top: 50px;
  transform: rotate(-35deg);
}
.floating-letter {
  position: absolute;
  border: 1px solid #e1e5d3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 10px 25px #36523806;
}
.floating-letter > .bengali {
  line-height: 1;
}
.letter-one {
  width: 150px;
  height: 174px;
  background: #e8edda;
  border-radius: 20px;
  left: 60px;
  top: 37px;
  transform: rotate(-10deg);
  z-index: 2;
}
.letter-one > .bengali {
  font-size: 97px;
  padding-top: 15px;
  color: #385c42;
}
.letter-one > span + span {
  font-size: 8px;
  color: #7e8a68;
  margin-top: 18px;
  letter-spacing: 1px;
}
.letter-two {
  width: 139px;
  height: 153px;
  border-radius: 19px;
  background: #f0dfd1;
  left: 198px;
  top: 88px;
  transform: rotate(11deg);
  z-index: 3;
  border-color: #e9d6c6;
}
.letter-two > .bengali {
  font-size: 96px;
  color: #936f50;
  padding-top: 20px;
}
.letter-three {
  width: 92px;
  height: 98px;
  background: #f6f4e9;
  border-radius: 14px;
  left: 267px;
  top: 4px;
  transform: rotate(9deg);
  border-color: #e7e5d8;
}
.letter-three > .bengali {
  font-size: 62px;
  color: #9b9e7e;
  padding-top: 12px;
}
.garden-star {
  position: absolute;
  font-size: 38px;
  color: #a4ad85;
  top: 2px;
  left: 172px;
  font-weight: 400;
}
.garden-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #d5dcb7;
}
.dot-one {
  left: 18px;
  top: 160px;
}
.dot-two {
  right: 12px;
  bottom: 72px;
  width: 5px;
  height: 5px;
  background: #c8a88e;
}
.garden-note {
  position: absolute;
  bottom: 0;
  left: 127px;
  color: #8f977d;
  font-size: 12px;
  font-family: var(--display);
  font-style: italic;
  transform: rotate(-5deg);
}
.daily-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 0 21px;
}
.daily-heading .eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #828a77;
  margin-bottom: 7px;
}
.daily-heading h2 {
  font-size: 23px;
}
.daily-date {
  font-size: 10px;
  color: #848b7e;
  padding-bottom: 4px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.95fr 1fr;
  gap: 20px;
}
.next-lesson {
  border-radius: 18px;
  background: #e9edde;
  border: 1px solid #dce3cd;
  padding: 23px 25px;
  position: relative;
  overflow: hidden;
}
.lesson-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lesson-topline .pill {
  background: #f9faefcf;
  color: #60734c;
  font-size: 8px;
  padding: 6px 8px;
  letter-spacing: 1px;
}
.lesson-number {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #8b9777;
}
.lesson-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 23px;
}
.small-label {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #7f8d6e;
  margin: 0 0 8px;
}
.lesson-card-body h2 {
  font-size: 28px;
  margin-bottom: 7px;
  letter-spacing: -1px;
}
.lesson-card-body p:not(.small-label) {
  font-size: 11px;
  color: #7b886d;
  max-width: 260px;
  margin-bottom: 0;
  line-height: 1.7;
}
.lesson-glyphs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 1px;
  color: #7d8d5e;
  white-space: nowrap;
}
.lesson-glyphs .bengali {
  font-size: 46px;
  padding-top: 8px;
}
.lesson-bottom {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 24px;
}
.lesson-bottom .button {
  min-height: 43px;
  padding: 11px 16px;
  font-size: 11px;
  gap: 24px;
}
.lesson-bottom > .button > .icon {
  width: 17px;
}
.lesson-bottom > span {
  font-size: 9px;
  color: #7d896d;
  white-space: nowrap;
}
.lesson-bottom .middle-dot {
  padding: 0 5px;
}
.daily-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.review-card {
  padding: 20px 19px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
  display: flex;
  text-align: left;
  align-items: center;
  gap: 12px;
}
.review-copy {
  flex: 1;
}
.review-copy strong {
  display: block;
  font-size: 13px;
  letter-spacing: -0.2px;
}
.review-copy > span {
  font-size: 10px;
  color: #8a9081;
  display: block;
  margin-top: 6px;
}
.review-card > .icon {
  width: 16px;
  color: #8a947b;
}
.review-card .round-icon {
  width: 35px;
  height: 35px;
  background: #f2e8db;
  color: #9b815d;
}
.review-card .round-icon > .icon {
  width: 17px;
}
.review-card:hover {
  border-color: #b9c5a6;
}
.daily-goal {
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 17px 20px;
  background: #f1f3e9;
}
.goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.goal-top > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  letter-spacing: 1.1px;
  color: #879072;
}
.goal-top .icon {
  width: 14px;
  height: 14px;
}
.goal-top > strong {
  font-size: 17px;
  font-weight: 500;
}
.goal-top > strong > span {
  font-size: 11px;
  color: #98a084;
}
.daily-goal p {
  font-size: 10px;
  color: #8a927c;
  margin: 9px 0 11px;
}
.goal-track {
  height: 4px;
  background: #dfe5d1;
  border-radius: 3px;
  overflow: hidden;
}
.goal-track > span {
  height: 100%;
  display: block;
  background: #819765;
  border-radius: 3px;
}
.journey-section {
  margin-top: 34px;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 19px;
}
.section-heading .eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #89907e;
  margin-bottom: 6px;
}
.section-heading h2 {
  font-size: 21px;
}
.section-heading > .muted {
  font-size: 11px;
}
.journey-card {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 23px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.journey-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 115px;
  border-right: 1px solid var(--line);
  padding-right: 25px;
}
.stat-number {
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -1.8px;
}
.stat-number > span {
  font-size: 16px;
  color: #a5ac97;
  letter-spacing: -0.5px;
}
.journey-stat > span + span {
  font-size: 9px;
  color: #89917d;
}
.journey-path {
  display: flex;
  flex: 1;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  align-items: center;
}
.journey-path:before {
  content: "";
  position: absolute;
  top: 23px;
  left: 30px;
  right: 30px;
  height: 1px;
  background: #e6e9dc;
}
.path-stage {
  text-align: center;
  z-index: 1;
  background: var(--white);
  padding: 0 6px;
}
.path-stage > span {
  display: grid;
  place-items: center;
  margin: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f0f3e8;
  color: #a0a88e;
  font-size: 9px;
  border: 1px solid #e4e9d9;
}
.path-stage.is-current > span {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px #eef0e4;
}
.path-stage.is-complete > span {
  background: #dce6cd;
  color: var(--green);
}
.path-stage > small {
  display: block;
  font-size: 8px;
  color: #919780;
  margin-top: 12px;
  white-space: nowrap;
}
.path-stage .icon {
  width: 13px;
  height: 13px;
}
.journey-caption {
  font-size: 8px;
  line-height: 1.9;
  color: #949b88;
  padding-left: 14px;
  max-width: 133px;
}
.method-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  padding: 23px 25px;
  background: #f0f1e8;
  border-radius: 15px;
}
.method-art {
  font-family: var(--bengali);
  font-size: 38px;
  border-right: 1px solid #dce2d1;
  padding-right: 24px;
  line-height: 1.5;
  color: #9aab7f;
}
.method-strip > div {
  flex: 1;
}
.method-strip .eyebrow {
  font-size: 7px;
  letter-spacing: 1.2px;
  color: #909981;
  margin-bottom: 4px;
}
.method-strip h3 {
  font-size: 14px;
  margin-bottom: 3px;
}
.method-strip p:not(.eyebrow) {
  font-size: 10px;
  color: #8c9481;
  margin-bottom: 0;
}
.method-strip .text-link {
  font-size: 10px;
}
.site-footer {
  max-width: 1064px;
  border-top: 1px solid var(--line);
  margin: 0 auto;
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  color: #929986;
}
.site-footer > button {
  font-size: 9px;
  background: none;
  padding: 0;
  color: #839076;
}
.site-footer > button span {
  margin-left: 10px;
}
.page-heading {
  padding: 49px 0 31px;
  max-width: 740px;
}
.page-heading h1 {
  font-size: 44px;
  margin-bottom: 17px;
}
.page-heading > .muted {
  font-size: 13px;
  max-width: 610px;
}
.page-heading .eyebrow {
  color: #859372;
}
.alphabet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 25px;
}
.filter-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.filter-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 13px;
  font-size: 11px;
  border-radius: 8px;
  color: #7f8875;
  min-height: 40px;
}
.filter-tab.active {
  background: var(--green);
  color: white;
}
.filter-tab:hover:not(.active) {
  background: #e9eddf;
}
.search-field {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0 12px;
  border-radius: 9px;
  gap: 9px;
  color: #919b85;
}
.search-field .icon {
  width: 16px;
  height: 16px;
}
.search-field input {
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 11px;
  min-width: 0;
  width: 170px;
  color: var(--ink);
}
.search-field input:focus {
  outline: none;
}
.search-field:focus-within {
  outline: 2px solid #8fa47e;
  outline-offset: 2px;
}
.alphabet-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 12px;
}
.letter-tile {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 13px;
  padding: 16px 5px 11px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.letter-tile:hover {
  border-color: #94a77b;
  transform: translateY(-3px);
}
.letter-tile > .bengali {
  font-size: 41px;
  line-height: 1.5;
}
.letter-tile > span:last-child:not(.bengali) {
  font-size: 10px;
  color: #8c967e;
}
.letter-tile.is-learned {
  background: #edf1e5;
  border-color: #d5dfc5;
}
.tile-check {
  position: absolute;
  right: 7px;
  top: 4px;
  color: #7a9163;
}
.tile-check .icon {
  width: 11px;
  height: 11px;
}
.script-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 23px 25px;
  margin-top: 28px;
  background: #edf0e5;
}
.script-note h3 {
  font-size: 15px;
  margin-bottom: 5px;
}
.script-note p {
  font-size: 12px;
  color: #7a866d;
  margin: 0;
}
.script-note .bengali {
  font-size: 19px;
}
.marks-intro {
  max-width: 650px;
  margin: 5px 0 25px;
}
.marks-intro h2 {
  margin-bottom: 10px;
}
.marks-intro p {
  font-size: 13px;
}
.marks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}
.mark-card {
  text-align: center;
  padding: 23px 10px;
}
.mark-card .bengali {
  font-size: 33px;
  line-height: 1.8;
}
.mark-card div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.mark-card strong {
  font-size: 12px;
  color: #7f8c6b;
}
.script-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-top: 25px;
}
.script-notes .card {
  padding: 22px;
}
.script-notes h3 {
  font-size: 15px;
  margin-bottom: 9px;
}
.script-notes p {
  font-size: 12px;
  margin-bottom: 0;
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
}
.empty-state p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #7f8d71;
  margin: 28px 0 22px;
  min-height: 32px;
}
.back-link .icon {
  width: 17px;
}
.letter-detail,
.study-card,
.review-session {
  max-width: 640px;
  margin: 0 auto 25px;
  text-align: center;
  padding: 34px 45px;
}
.letter-detail .eyebrow,
.study-card .eyebrow,
.review-session .eyebrow {
  color: #8b9678;
  font-size: 9px;
}
.detail-glyph {
  display: block;
  font-size: 138px;
  line-height: 1.5;
  padding-top: 12px;
}
.letter-detail h1,
.study-card h1,
.review-session h1 {
  font-family: var(--sans);
  font-size: 29px;
  letter-spacing: -1px;
  margin: 0 0 10px;
}
.letter-sound {
  font-size: 13px;
  color: #7e8972;
  max-width: 440px;
  margin: 0 auto 22px;
}
.word-example {
  background: #eff2e7;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  gap: 5px;
  margin-bottom: 20px;
}
.word-example > .bengali {
  font-size: 33px;
  line-height: 1.6;
}
.word-example > span + span {
  font-size: 11px;
  color: #859274;
}
.letter-tip {
  font-size: 12px;
  color: #818c75;
  max-width: 440px;
  margin: 0 auto 25px;
}
.detail-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.study-instruction {
  font-size: 12px;
  color: #687a58;
  margin: 0 0 22px;
}
.study-card .audio-button {
  display: flex;
  margin: 10px auto 0;
}
.session-top {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 11px;
  color: #7f8d72;
}
.session-top > .back-link {
  margin-right: auto;
}
.session-top > strong {
  font-weight: 500;
}
.session-progress {
  height: 3px;
  background: #e4e9da;
  margin-bottom: 30px;
  border-radius: 2px;
  overflow: hidden;
}
.session-progress > span {
  display: block;
  height: 100%;
  background: #718c5e;
  transition: width 0.3s;
}
.quiz-card {
  max-width: 650px;
  text-align: center;
  margin: 45px auto;
}
.quiz-card h1 {
  font-size: 39px;
  margin-bottom: 17px;
}
.quiz-card > .muted {
  font-size: 13px;
}
.quiz-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 35px;
}
.quiz-choice {
  padding: 20px 10px;
  min-height: 142px;
  color: var(--green);
}
.quiz-choice > .bengali {
  font-size: 70px;
  line-height: 1.3;
}
.quiz-choice:hover:not(:disabled) {
  background: #edf1e4;
  border-color: #9caf85;
}
.quiz-choice.is-incorrect {
  background: #f6e8df;
  border-color: #c9997c;
  opacity: 0.7;
}
.quiz-choice.is-correct {
  background: #e0eacc;
  border-color: #829d61;
  opacity: 1;
}
.quiz-feedback {
  font-size: 13px;
  color: #8c836e;
  margin: 24px 0;
}
.quiz-feedback.correct {
  color: #4a7042;
}
.review-session {
  margin-top: 12px;
}
.review-session > .muted {
  font-size: 13px;
  margin: 12px 0 25px;
}
.review-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.session-complete {
  text-align: center;
  padding: 40px 0;
  max-width: 650px;
  margin: auto;
}
.completion-art {
  position: relative;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  width: 108px;
  height: 118px;
  background: #e5ebd6;
  transform: rotate(-7deg);
  border-radius: 24px;
}
.completion-art > .bengali {
  font-size: 85px;
  line-height: 1;
  padding-top: 12px;
}
.completion-art > span + span {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 33px;
  height: 33px;
  background: var(--green);
  border: 4px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
}
.completion-art .icon {
  width: 16px;
  height: 16px;
}
.session-complete h1 {
  font-size: 48px;
  margin-bottom: 24px;
}
.session-complete h1 em {
  color: #8a9a6f;
}
.session-complete > p:not(.eyebrow) {
  font-size: 13px;
  max-width: 450px;
  margin: 0 auto 23px;
  color: #7c8871;
}
.completion-summary {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 28px auto;
  font-size: 11px;
  color: #7c896e;
}
.completion-summary strong {
  font-size: 22px;
  color: var(--green);
  display: block;
  margin-bottom: 5px;
}
.completion-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.practice-cards {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 20px;
  margin-bottom: 36px;
}
.practice-feature {
  padding: 28px;
  display: flex;
  gap: 28px;
  align-items: center;
  background: #e9edde;
}
.practice-feature h2 {
  font-size: 27px;
  margin-bottom: 12px;
}
.practice-feature p:not(.eyebrow) {
  font-size: 12px;
  color: #81906e;
}
.practice-feature .eyebrow {
  font-size: 8px;
  color: #869772;
}
.practice-feature .button {
  font-size: 11px;
  padding: 12px 16px;
}
.practice-scribble {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 130px;
}
.practice-scribble > .bengali {
  font-size: 100px;
  color: #7e9665;
  line-height: 1.3;
  padding-top: 20px;
  transform: rotate(-5deg);
}
.practice-scribble > svg {
  width: 120px;
  height: 35px;
  color: #a5b28d;
  stroke-width: 2;
}
.practice-review {
  padding: 26px;
}
.practice-review .round-icon {
  margin-bottom: 15px;
  background: #f3e7da;
  color: #a48662;
}
.practice-review h2 {
  margin-bottom: 10px;
}
.practice-review p {
  font-size: 12px;
  color: #879179;
}
.practice-review .button {
  background: #e9edde;
  color: var(--green);
  min-height: 42px;
  font-size: 11px;
  padding: 10px 15px;
}
.progress-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}
.progress-stats .card {
  padding: 25px;
}
.progress-number {
  font-size: 46px;
  letter-spacing: -2px;
  line-height: 1.4;
}
.progress-stats h3 {
  font-size: 14px;
  margin-top: 5px;
}
.progress-stats p {
  font-size: 10px;
  margin: 6px 0 0;
}
.activity-card {
  padding: 26px;
  margin-bottom: 35px;
}
.activity-days {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 12px;
  margin: 30px 0 22px;
}
.activity-day {
  text-align: center;
}
.activity-square {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f0f2e9;
  color: #c3cbb7;
}
.activity-square .icon {
  width: 17px;
  height: 17px;
}
.activity-square.has-activity {
  background: #d8e5c5;
  color: #6c8955;
}
.activity-square.goal-met {
  background: var(--green);
  color: white;
}
.activity-day small {
  font-size: 9px;
  color: #8c977e;
  display: block;
  margin-top: 9px;
}
.small-text {
  font-size: 10px;
  margin-bottom: 0;
}
.lesson-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lesson-list-item {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  padding: 18px;
}
.lesson-list-item:hover {
  border-color: #a5b791;
}
.lesson-index {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #f0f2e7;
  color: #929f7b;
  border-radius: 50%;
  font-size: 12px;
}
.lesson-index.done {
  background: #e0e9cf;
  color: #5f7e48;
}
.lesson-index .icon {
  width: 17px;
  height: 17px;
}
.lesson-list-item > span:nth-child(2) {
  flex: 1;
}
.lesson-list-item strong {
  display: block;
  font-size: 12px;
}
.lesson-list-item small {
  display: block;
  margin-top: 6px;
  font-family: var(--bengali);
  color: #8a9777;
  font-size: 14px;
}
.lesson-list-count {
  font-size: 10px;
  color: #99a187;
}
.lesson-list-item > .icon {
  width: 14px;
  color: #a4ae96;
}
.privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 30px 0 0;
  font-size: 10px;
  color: #8f9982;
}
.privacy-note .icon {
  width: 14px;
  height: 14px;
}
.writer-header {
  position: relative;
  text-align: center;
  padding: 37px 60px 23px;
}
.writer-back {
  position: absolute;
  top: 37px;
  left: 0;
}
.writer-header .eyebrow {
  font-size: 9px;
  color: #8c9b78;
}
.writer-header h1 {
  font-size: 42px;
  margin-bottom: 14px;
}
.writer-intro {
  font-size: 12px;
  max-width: 470px;
  margin: 0 auto;
}
.writing-workspace {
  max-width: 600px;
  padding: 25px 40px 30px;
  margin: 0 auto 20px;
  text-align: center;
}
.writing-modes {
  display: inline-flex;
  background: #eef1e6;
  border-radius: 9px;
  padding: 4px;
  gap: 3px;
}
.writing-mode {
  padding: 10px 35px;
  font-size: 12px;
  border-radius: 6px;
  background: transparent;
  color: #879773;
  min-height: 40px;
}
.writing-mode.is-active {
  background: var(--white);
  color: var(--green);
  box-shadow: 0 2px 7px #234f4010;
}
.writing-cue {
  font-size: 12px;
  color: #7c8a6d;
  margin: 17px 0;
}
.writing-pad {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin: 14px auto 0;
  overflow: hidden;
  touch-action: none;
  background: #fafbf5;
  border: 1px solid #e0e7d4;
  border-radius: 14px;
  cursor: crosshair;
}
.writing-model,
.writing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.writing-model {
  pointer-events: none;
}
.writing-demo {
  min-height: 44px;
  font-size: 12px;
}
.writing-feedback {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-top: 20px;
  background: #f1f4e8;
  text-align: left;
  scroll-margin-block: 100px;
}
.writing-feedback h2 {
  font-size: 22px;
  margin-bottom: 14px;
}
.writing-feedback p:not(.eyebrow) {
  font-size: 12px;
  margin-bottom: 10px;
}
.writing-result-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.writing-badge {
  border-radius: 6px;
  padding: 7px 9px;
  background: #efe2d4;
  color: #714f38;
  font-size: 10px;
  line-height: 1.6;
}
.writing-badge.is-good {
  background: #dce8cd;
  color: var(--green);
}
.writing-grading-note {
  border-top: 1px solid #dce3d0;
  padding-top: 13px;
}
.writing-sample-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.writing-actions {
  margin-top: 18px;
}
.writing-source {
  max-width: 420px;
  text-align: left;
  margin: 24px auto 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.writing-source summary {
  min-height: 32px;
  cursor: pointer;
}
.writing-source a {
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.writing-source p {
  margin-block: 10px;
}
.writing-tip {
  font-size: 11px;
  max-width: 420px;
  margin: 16px auto 0;
  line-height: 1.6;
}
.writing-tools {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  margin: 7px auto 8px;
}
.writing-tools .button {
  font-size: 11px;
  gap: 8px;
  padding: 9px 12px;
  min-height: 40px;
}
.writing-check {
  width: 100%;
  max-width: 420px;
}
.writing-status {
  font-size: 10px;
  min-height: 20px;
  margin: 13px 0 0;
}
.writing-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.writing-sample {
  margin: 0;
  padding: 13px 10px 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbf5;
  min-width: 0;
}
.writing-sample figcaption {
  font-size: 10px;
  color: #8b987d;
}
.writing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.writing-actions .button {
  font-size: 11px;
  padding: 12px 16px;
  min-height: 44px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--green);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 5px 25px #163d3320;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: calc(100% - 32px);
  width: max-content;
  font-size: 12px;
  text-align: center;
  line-height: 1.7;
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
dialog {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #e2e6d7;
  border-radius: 23px;
  padding: 39px;
  max-width: 580px;
  width: calc(100% - 32px);
  max-height: 85dvh;
  overflow-y: auto;
}
dialog::backdrop {
  background: #1b352b65;
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 33px;
  height: 33px;
  font-size: 23px;
  color: #7d8e6c;
}
.dialog-close:hover {
  background: #e4e9d9;
}
dialog h2 {
  font-family: var(--display);
  font-size: 33px;
  letter-spacing: -1px;
  margin: 0 0 22px;
}
dialog h3 {
  font-size: 16px;
  margin: 25px 0 10px;
}
dialog p {
  font-size: 12px;
  color: #7a886c;
}
dialog p strong {
  color: var(--green);
}
dialog a {
  border-bottom: 1px solid #c6d1b9;
  line-height: 2.2;
}
.method-list {
  border-block: 1px solid #dce3d1;
  margin: 23px 0;
  padding: 22px 0 5px;
}
.noscript {
  text-align: center;
  padding: 30px;
}
@media (min-width: 1500px) {
  .site-header {
    max-width: 1370px;
    padding-inline: 60px;
  }
  #main {
    max-width: 1270px;
    padding-inline: 60px;
  }
  .site-footer {
    max-width: 1150px;
  }
  .home-hero {
    min-height: 400px;
  }
  .hero-copy h1 {
    font-size: 64px;
  }
  .letter-garden {
    margin-right: 30px;
  }
  .next-lesson {
    padding: 26px 30px;
  }
  .lesson-card-body h2 {
    font-size: 31px;
  }
  .lesson-glyphs .bengali {
    font-size: 54px;
  }
  .lesson-card-body {
    margin-top: 27px;
  }
  .lesson-bottom {
    margin-top: 27px;
  }
  .journey-section {
    margin-top: 40px;
  }
}
@media (max-width: 1050px) {
  .site-header {
    padding: 23px 32px;
    gap: 20px;
  }
  .main-nav {
    gap: 22px;
  }
  .main-nav a.active:after {
    bottom: -24px;
  }
  .main-nav a {
    font-size: 11px;
  }
  .main-nav a > svg {
    display: none;
  }
  .brand {
    font-size: 27px;
  }
  .brand-tagline {
    font-size: 6px;
  }
  .brand-mark {
    width: 37px;
    height: 41px;
    font-size: 31px;
  }
  #main {
    padding-inline: 32px;
  }
  .hero-copy h1 {
    font-size: 49px;
  }
  .letter-garden {
    transform: scale(0.9);
    transform-origin: right center;
  }
  .hero-copy .eyebrow {
    font-size: 8px;
  }
  .lesson-glyphs {
    gap: 5px;
  }
  .lesson-glyphs .bengali {
    font-size: 37px;
  }
  .lesson-card-body h2 {
    font-size: 24px;
  }
  .lesson-bottom {
    gap: 10px;
  }
  .lesson-bottom > .button {
    font-size: 10px;
    gap: 12px;
  }
  .lesson-bottom > span {
    font-size: 8px;
  }
  .next-lesson {
    padding: 21px;
  }
  .review-card {
    padding: 15px 13px;
    gap: 9px;
  }
  .review-copy strong {
    font-size: 11px;
  }
  .review-copy > span {
    font-size: 9px;
  }
  .daily-goal {
    padding: 16px;
  }
  .journey-caption {
    display: none;
  }
  .site-footer {
    margin-inline: 32px;
  }
  .alphabet-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .practice-scribble {
    min-width: 90px;
  }
  .practice-scribble > .bengali {
    font-size: 80px;
  }
  .practice-scribble > svg {
    width: 90px;
  }
  .practice-feature {
    padding: 22px;
    gap: 20px;
  }
  .practice-feature h2 {
    font-size: 23px;
  }
  .progress-stats .card {
    padding: 19px;
  }
  .activity-days {
    gap: 9px;
  }
  .activity-square {
    border-radius: 7px;
  }
}
@media (max-width: 760px) {
  .site-header {
    padding: 19px 24px;
    gap: 15px;
  }
  .brand {
    font-size: 28px;
  }
  .brand-tagline {
    font-size: 6px;
  }
  .main-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    justify-content: space-around;
    gap: 0;
    height: auto;
    min-height: 70px;
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
    background: #f8f9f4f2;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid #e1e6d8;
  }
  .main-nav a {
    height: 47px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    font-size: 9px;
    min-width: 65px;
    color: #939c87;
  }
  .main-nav a > svg {
    display: block;
    width: 19px;
    height: 19px;
  }
  .main-nav a.active {
    color: var(--green);
  }
  .main-nav a.active:after {
    display: none;
  }
  .header-streak {
    padding: 8px 11px;
  }
  .streak-label {
    font-size: 9px;
  }
  .site-header {
    border-bottom: 1px solid var(--line);
  }
  #main {
    padding: 0 24px 30px;
    min-height: calc(100dvh - 240px);
  }
  .home-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 33px 0 16px;
    gap: 0;
  }
  .hero-copy h1 {
    font-size: clamp(31px, 8.7vw, 44px);
    letter-spacing: -1.8px;
  }
  .hero-copy .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
    margin-bottom: 20px;
  }
  .hero-description {
    font-size: 12px;
    margin: 18px 0;
  }
  .hero-meta {
    font-size: 9px;
    gap: 20px;
  }
  .hero-meta .icon {
    width: 12px;
  }
  .letter-garden {
    height: 190px;
    transform: scale(0.6);
    transform-origin: top center;
    justify-self: center;
    max-width: 390px;
    margin-top: 12px;
    margin-bottom: -65px;
  }
  .garden-orbit {
    left: 58px;
  }
  .orbit-two {
    left: 27px;
  }
  .letter-one {
    left: 48px;
  }
  .letter-two {
    left: 186px;
  }
  .letter-three {
    left: 255px;
  }
  .garden-note {
    bottom: -12px;
    left: 115px;
  }
  .dot-one {
    left: 10px;
  }
  .dot-two {
    right: 6px;
    bottom: 17px;
  }
  .daily-heading {
    padding: 12px 0 14px;
  }
  .daily-heading h2 {
    font-size: 22px;
    letter-spacing: -0.8px;
  }
  .daily-heading .eyebrow {
    font-size: 8px;
  }
  .daily-date {
    display: none;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .next-lesson {
    padding: 22px;
  }
  .lesson-card-body {
    margin-top: 25px;
    gap: 12px;
  }
  .lesson-card-body h2 {
    font-size: 26px;
  }
  .lesson-card-body p:not(.small-label) {
    font-size: 11px;
    max-width: 185px;
  }
  .lesson-glyphs {
    gap: 6px;
    align-self: center;
    margin-right: 0;
  }
  .lesson-glyphs .bengali {
    font-size: 34px;
  }
  .lesson-card-body .small-label {
    font-size: 8px;
    letter-spacing: 0.9px;
  }
  .lesson-topline .pill {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  .lesson-number {
    font-size: 8px;
  }
  .lesson-bottom {
    margin-top: 25px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .lesson-bottom .button {
    font-size: 11px;
    min-height: 44px;
    padding: 12px 15px;
    gap: 17px;
  }
  .lesson-bottom > span {
    font-size: 9px;
  }
  .daily-side {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .review-card {
    padding: 19px;
  }
  .review-copy strong {
    font-size: 13px;
  }
  .review-copy > span {
    font-size: 10px;
  }
  .review-card .round-icon {
    width: 38px;
    height: 38px;
  }
  .review-card {
    gap: 13px;
  }
  .daily-goal {
    padding: 17px 20px;
  }
  .goal-top > span {
    font-size: 8px;
  }
  .daily-goal p {
    margin: 7px 0 12px;
  }
  .journey-section {
    margin-top: 29px;
  }
  .section-heading {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 17px;
  }
  .section-heading h2 {
    font-size: 20px;
  }
  .section-heading > .text-link {
    font-size: 10px;
    padding-top: 3px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
  }
  .journey-card {
    padding: 20px;
    gap: 20px;
    flex-wrap: wrap;
  }
  .journey-stat {
    min-width: 0;
    padding-right: 20px;
  }
  .stat-number {
    font-size: 32px;
  }
  .stat-number > span {
    font-size: 15px;
  }
  .journey-path {
    min-width: 100%;
    order: 2;
    padding-top: 2px;
  }
  .journey-path:before {
    top: 15px;
  }
  .path-stage {
    padding: 0 3px;
  }
  .path-stage > small {
    font-size: 7px;
    margin-top: 9px;
  }
  .path-stage > span {
    width: 25px;
    height: 25px;
  }
  .journey-caption {
    display: block;
    max-width: 160px;
    padding-left: 0;
    font-size: 9px;
    flex: 1;
  }
  .method-strip {
    padding: 20px;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .method-art {
    font-size: 34px;
    padding-right: 14px;
  }
  .method-strip > div {
    flex: 1;
    min-width: 180px;
  }
  .method-strip h3 {
    font-size: 13px;
  }
  .method-strip p:not(.eyebrow) {
    font-size: 10px;
  }
  .method-strip .eyebrow {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .method-strip > .text-link {
    padding: 0 0 0 65px;
    margin-top: -3px;
  }
  .site-footer {
    margin: 0 24px 85px;
    padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 8px;
  }
  .site-footer > button {
    font-size: 8px;
  }
  .page-heading {
    padding: 32px 0 23px;
  }
  .page-heading h1 {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
  .page-heading > .muted {
    font-size: 12px;
  }
  .page-heading .eyebrow {
    font-size: 9px;
  }
  .alphabet-toolbar {
    gap: 15px;
    margin-bottom: 21px;
  }
  .filter-tabs {
    gap: 4px;
    flex-wrap: wrap;
  }
  .filter-tab {
    font-size: 10px;
    padding: 9px 11px;
  }
  .search-field {
    width: 100%;
  }
  .search-field input {
    width: 100%;
    font-size: 16px;
    padding: 13px 0;
  }
  .alphabet-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
  }
  .letter-tile {
    padding: 13px 4px 9px;
    border-radius: 11px;
    gap: 3px;
  }
  .letter-tile > .bengali {
    font-size: 35px;
  }
  .letter-tile > span:last-child:not(.bengali) {
    font-size: 9px;
  }
  .tile-check {
    right: 4px;
    top: 3px;
  }
  .tile-check .icon {
    width: 9px;
  }
  .script-note {
    padding: 20px 17px;
    gap: 13px;
  }
  .script-note .round-icon {
    width: 33px;
    height: 33px;
  }
  .script-note .round-icon > .icon {
    width: 17px;
  }
  .script-note h3 {
    font-size: 14px;
  }
  .script-note p {
    font-size: 11px;
  }
  .marks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .marks-intro h2 {
    font-size: 21px;
  }
  .marks-intro p {
    font-size: 12px;
  }
  .mark-card {
    padding: 17px 10px;
  }
  .script-notes {
    grid-template-columns: 1fr;
  }
  .back-link {
    margin: 20px 0 17px;
    font-size: 10px;
  }
  .letter-detail,
  .study-card,
  .review-session {
    padding: 26px 22px;
    margin-bottom: 15px;
  }
  .detail-glyph {
    font-size: 115px;
  }
  .letter-detail h1,
  .study-card h1,
  .review-session h1 {
    font-size: 25px;
  }
  .letter-sound {
    font-size: 12px;
  }
  .letter-tip {
    font-size: 11px;
  }
  .word-example > .bengali {
    font-size: 31px;
  }
  .detail-actions .button {
    font-size: 12px;
  }
  .session-top {
    gap: 10px;
    font-size: 9px;
    flex-wrap: wrap;
    padding-top: 8px;
  }
  .session-top > .back-link {
    width: 100%;
    margin-bottom: 0;
  }
  .session-top > strong {
    margin-left: auto;
  }
  .session-top > span {
    margin-bottom: 2px;
  }
  .session-progress {
    margin: 17px 0 20px;
  }
  .quiz-card {
    margin: 30px auto;
  }
  .quiz-card h1 {
    font-size: 31px;
  }
  .quiz-choices {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 25px;
  }
  .quiz-choice {
    min-height: 122px;
    padding: 12px;
  }
  .quiz-choice > .bengali {
    font-size: 68px;
  }
  .quiz-card .eyebrow {
    font-size: 9px;
  }
  .quiz-card > .muted {
    font-size: 12px;
  }
  .quiz-feedback {
    font-size: 12px;
  }
  .session-complete {
    padding: 35px 0 15px;
  }
  .session-complete h1 {
    font-size: 41px;
  }
  .session-complete > p:not(.eyebrow) {
    font-size: 12px;
  }
  .completion-actions {
    flex-direction: column;
  }
  .practice-cards {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 28px;
  }
  .practice-feature {
    padding: 22px;
    gap: 20px;
  }
  .practice-feature h2 {
    font-size: 23px;
  }
  .practice-feature .eyebrow {
    font-size: 7px;
  }
  .practice-feature p:not(.eyebrow) {
    font-size: 11px;
  }
  .practice-feature .button {
    font-size: 10px;
    padding: 11px 13px;
    gap: 10px;
  }
  .practice-scribble {
    min-width: 63px;
  }
  .practice-scribble > .bengali {
    font-size: 65px;
  }
  .practice-scribble > svg {
    width: 65px;
  }
  .practice-review {
    padding: 23px;
  }
  .practice-review .round-icon {
    float: left;
    margin: 0 15px 0 0;
  }
  .practice-review h2 {
    font-size: 22px;
  }
  .practice-review p {
    font-size: 11px;
    margin-top: 12px;
  }
  .practice-review .button {
    width: 100%;
  }
  .progress-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .progress-stats .card {
    padding: 20px 17px;
  }
  .progress-number {
    font-size: 39px;
  }
  .progress-stats h3 {
    font-size: 12px;
  }
  .progress-stats p {
    font-size: 9px;
  }
  .activity-card {
    padding: 22px 18px;
  }
  .activity-card .section-heading {
    gap: 14px;
  }
  .activity-card .pill {
    font-size: 8px;
  }
  .activity-days {
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin: 22px 0;
  }
  .activity-square {
    border-radius: 7px;
  }
  .activity-day small {
    margin-top: 5px;
  }
  .activity-card .small-text {
    font-size: 9px;
  }
  .lesson-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lesson-list-item {
    padding: 16px;
  }
  .privacy-note {
    font-size: 9px;
    align-items: flex-start;
    line-height: 1.7;
    text-align: center;
  }
  .privacy-note .icon {
    margin-top: 2px;
  }
  .writer-header {
    padding: 30px 0 21px;
  }
  .writer-back {
    position: static;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 0 22px;
  }
  .writer-header h1 {
    font-size: 37px;
  }
  .writer-header .eyebrow {
    font-size: 8px;
  }
  .writer-intro {
    font-size: 11px;
  }
  .writing-workspace {
    padding: 19px 16px 22px;
    border-radius: 17px;
  }
  .writing-mode {
    padding: 9px 29px;
    font-size: 11px;
  }
  .writing-cue {
    font-size: 11px;
    margin: 15px 0;
  }
  .writing-pad {
    border-radius: 11px;
  }
  .writing-tools .button {
    font-size: 10px;
  }
  .writing-status {
    font-size: 9px;
  }
  .writing-tip {
    font-size: 10px;
  }
  .writing-comparison {
    gap: 10px;
  }
  .writing-sample {
    padding: 10px 5px 3px;
  }
  .writing-sample figcaption {
    font-size: 9px;
  }
  .writing-actions {
    gap: 7px;
  }
  .writing-actions .button {
    font-size: 10px;
    padding: 11px 12px;
  }
  .toast {
    bottom: calc(85px + env(safe-area-inset-bottom));
    font-size: 11px;
    width: calc(100% - 32px);
  }
  dialog {
    padding: 31px 24px;
    max-height: 82dvh;
  }
  dialog h2 {
    font-size: 30px;
  }
  dialog p {
    font-size: 12px;
  }
  #session-content .writer-back,
  #session-content .writer-header .eyebrow {
    display: none;
  }
  #session-content .writer-header {
    padding-top: 10px;
  }
}
@media (max-width: 370px) {
  #main {
    padding-inline: 18px;
  }
  .site-header {
    padding-inline: 18px;
  }
  .hero-copy h1 {
    font-size: 32px;
  }
  .hero-copy .eyebrow {
    font-size: 7px;
  }
  .hero-description {
    font-size: 11px;
  }
  .hero-meta {
    font-size: 8px;
  }
  .letter-garden {
    transform: scale(0.58);
    margin-bottom: -65px;
    width: 100%;
    left: 0;
  }
  .lesson-glyphs .bengali {
    font-size: 29px;
  }
  .lesson-card-body h2 {
    font-size: 23px;
  }
  .next-lesson {
    padding: 19px;
  }
  .lesson-bottom {
    gap: 9px;
  }
  .lesson-bottom > span {
    font-size: 8px;
  }
  .lesson-bottom > .button {
    font-size: 10px;
    gap: 11px;
  }
  .section-heading h2 {
    font-size: 19px;
  }
  .alphabet-grid {
    gap: 7px;
  }
  .letter-tile > .bengali {
    font-size: 30px;
  }
  .practice-feature {
    gap: 15px;
    padding: 19px;
  }
  .practice-scribble {
    min-width: 55px;
  }
  .practice-feature h2 {
    font-size: 21px;
  }
  .practice-feature .button {
    font-size: 9px;
  }
  .page-heading h1 {
    font-size: 34px;
  }
  .writing-actions .button {
    font-size: 9px;
    padding: 11px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Keep secondary text readable on both paper and tinted cards. */
.main-nav a,
.filter-tab:not(.active),
.back-link,
.hero-description,
.hero-meta,
.daily-heading .eyebrow,
.daily-date,
.lesson-number,
.small-label,
.lesson-card-body p:not(.small-label),
.lesson-bottom > span,
.review-copy > span,
.goal-top > span,
.daily-goal p,
.section-heading .eyebrow,
.journey-stat > span + span,
.path-stage > small,
.journey-caption,
.method-strip p:not(.eyebrow),
.method-strip .eyebrow,
.site-footer,
.site-footer > button,
.page-heading .eyebrow,
.letter-tile > span:last-child:not(.bengali),
.script-note p,
.letter-sound,
.word-example > span + span,
.letter-tip,
.practice-feature p:not(.eyebrow),
.practice-review p,
.activity-day small,
.privacy-note,
.writing-cue,
dialog p {
  color: var(--muted);
}