:root {
  font-family: ui-rounded, "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  color: #261221;
  background: #f7f7fa;
  font-synthesis: none;
  --brand: #e6007e;
  --brand-action: #b00060;
  --brand-hover: #cc006f;
  --brand-pressed: #870049;
  --brand-soft: #ffd6ea;
  --brand-wash: #fff0f7;
  --voice: #ffd21a;
  --voice-soft: #fff9db;
  --listen: #b00060;
  --listen-soft: #fff0f7;
  --success: #137a50;
  --success-soft: #e8f6ef;
  --error: #b4232a;
  --error-soft: #fdebed;
  --ink: #261221;
  --muted: #625762;
  --surface: #ffffff;
  --surface-soft: #f7f7fa;
  --surface-subtle: #fcfbfd;
  --line: #ddd7e0;
  --card-shadow: #e8e3ea;
  --action-shadow: #870049;

  /* Transitional aliases while the prototype components are consolidated. */
  --cream: var(--surface);
  --vanilla: var(--surface);
  --sage: var(--success-soft);
  --sky: var(--listen-soft);
  --coral: var(--brand-action);
  --teal: var(--ink);
  --maize: var(--voice);
  --cocoa: var(--ink);
  --clay: var(--brand-soft);
}

.ui-icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 24px; overflow: visible; color: inherit; vertical-align: middle; }
.canonical-art-icon { width: 100%; height: 100%; display: block; object-fit: contain; }
.canonical-object-image { min-width: 0; min-height: 0; max-width: none; max-height: none; display: block; object-fit: contain; object-position: center; }

/* Private Pronunciation Lab */
.pronunciation-lab-entry { display:flex; align-items:center; gap:14px; }
.pronunciation-lab-entry .workshop-card__icon { flex:0 0 52px; width:52px; height:52px; background:#ffd6ea; color:#b00060; }
.pronunciation-lab-entry .workshop-card__icon img { width:29px; height:29px; display:block; }
.pronunciation-lab-entry__copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:5px; }
.pronunciation-lab-entry__copy strong,.pronunciation-lab-entry__copy small { display:block; line-height:1.25; }
.pronunciation-lab-entry__copy small { color:#625762; font-weight:650; }
.pronunciation-lab-entry > b { flex:0 0 auto; }
.calibration-screen { max-width:760px; margin:0 auto; display:grid; gap:20px; }
.calibration-status-card,.calibration-consent,.calibration-distribution,.calibration-recommendation { border:2px solid #ddd7e0; border-radius:26px; padding:22px; background:#fff; box-shadow:0 6px 0 #f1edf2; }
.calibration-status-card { display:grid; text-align:center; gap:5px; }
.calibration-status-card > small { color:#b00060; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.calibration-status-card > strong { color:#261221; font-size:clamp(2.3rem,8vw,4rem); }
.calibration-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; }
.calibration-stat-row span { display:grid; gap:2px; padding:12px 6px; border-radius:16px; background:#f7f7fa; color:#625762; font-size:.82rem; }
.calibration-stat-row b { color:#261221; font-size:1.4rem; }
.calibration-privacy { line-height:1.5; }
.destructive-text { color:#b4232a; }
.calibration-consent h2,.calibration-distribution h2,.calibration-recommendation h2 { margin-top:0; }
.consent-check { width:100%; display:flex; align-items:center; gap:12px; margin-top:16px; padding:15px; border:2px solid #ddd7e0; border-radius:18px; background:#fff; color:#261221; text-align:left; font:inherit; font-weight:750; }
.consent-check span { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border:2px solid #b00060; border-radius:8px; color:#fff; }
.consent-check.is-checked { border-color:#b00060; background:#fff2f8; }
.consent-check.is-checked span { background:#b00060; }
.calibration-batch-size { display:flex; justify-content:space-between; align-items:center; gap:15px; font-weight:800; }
.calibration-batch-size select { min-width:90px; padding:10px; border:2px solid #ddd7e0; border-radius:14px; font:inherit; }
.calibration-word-list { display:grid; gap:10px; }
.calibration-word-list > div { display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:10px 14px; border:2px solid #f0d7e5; border-radius:18px; background:#fff; }
.calibration-word-list > div > span { grid-row:1/3; width:50px; height:50px; display:grid; place-items:center; overflow:hidden; border-radius:12px; font-size:2rem; }
.calibration-word-list img { width:100%; height:100%; object-fit:contain; background:var(--surface); }
.calibration-word-list small { color:#625762; }
.calibration-record-screen,.calibration-label-screen { text-align:center; justify-items:center; }
.calibration-step { color:#b00060; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.calibration-target-visual { width:min(240px,60vw); aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 16px 35px rgba(38,18,33,.12); font-size:7rem; }
.calibration-target-visual img,.calibration-target-mini img { width:100%; height:100%; object-fit:contain; background:var(--surface); }
.calibration-instruction { max-width:560px; color:#261221; font-size:1.15rem; font-weight:750; }
.calibration-reference-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.calibration-reference-row button { padding:9px 14px; border:2px solid #ffd6ea; border-radius:999px; background:#fff2f8; color:#b00060; font:inherit; font-weight:800; }
.calibration-mic { width:150px; height:150px; border:12px solid #ffd6ea; border-radius:50%; background:#b00060; box-shadow:0 10px 0 #800048; color:#fff; font-size:3.8rem; transition:.2s ease; }
.calibration-mic.is-recording { background:#b4232a; border-color:#ffe1e3; box-shadow:0 10px 0 #7e171c; animation:calibration-pulse 1.1s ease-in-out infinite; }
@keyframes calibration-pulse { 50% { transform:scale(1.06); box-shadow:0 10px 0 #7e171c,0 0 0 18px rgba(180,35,42,.12); } }
.calibration-record-state { color:#b00060; font-size:1.1rem; }
.calibration-target-mini { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:18px; background:#f7f7fa; }
.calibration-target-mini > :first-child { width:58px; height:58px; display:grid; place-items:center; overflow:hidden; border-radius:12px; font-size:2.5rem; }
.calibration-label-screen audio { width:min(100%,520px); }
.calibration-label-options { width:100%; display:grid; gap:10px; }
.calibration-label-options button { padding:15px; border:2px solid #ddd7e0; border-radius:18px; background:#fff; color:#261221; font:inherit; font-weight:800; text-align:left; }
.calibration-label-options button strong,.calibration-label-options button small { display:block; }
.calibration-label-options button small { margin-top:5px; color:#625762; font-size:.78em; font-weight:650; line-height:1.35; }
.calibration-label-options button.is-selected { border-color:#b00060; background:#fff2f8; box-shadow:inset 5px 0 #b00060; }
.calibration-rerecord { width:100%; color:#b00060; }
.calibration-score-reveal { width:min(100%,480px); display:grid; gap:6px; padding:24px; border:2px solid #ffd21a; border-radius:24px; background:#fff9d8; }
.calibration-score-reveal > strong { color:#261221; font-size:3.5rem; }
.calibration-score-reveal small,.calibration-retention-note { color:#625762; }
.calibration-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.calibration-metrics article { display:grid; gap:7px; padding:17px 10px; border:2px solid #ddd7e0; border-radius:20px; background:#fff; text-align:center; }
.calibration-metrics strong { color:#b00060; font-size:1.35rem; }
.calibration-metrics span { color:#625762; font-size:.82rem; }
.distribution-chart { height:180px; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:14px; padding:12px 10px 0; border-bottom:2px solid #261221; background:repeating-linear-gradient(to top,#f7f7fa 0,#f7f7fa 1px,transparent 1px,transparent 25%); }
.distribution-chart > div { height:100%; display:flex; align-items:end; gap:5px; }
.distribution-chart span { flex:1; min-height:4px; border-radius:8px 8px 0 0; }
.distribution-chart .is-positive { background:#137a50; }
.distribution-chart .is-negative { background:#b4232a; }
.distribution-axis { display:flex; justify-content:space-between; color:#625762; font-size:.75rem; }
.positive-key,.negative-key { display:inline-block; width:12px; height:12px; margin:0 5px 0 12px; border-radius:3px; }
.positive-key { background:#137a50; }.negative-key { background:#b4232a; }
.calibration-warning { display:grid; gap:6px; padding:18px; border:2px solid #ffd21a; border-radius:20px; background:#fff9d8; color:#261221; }
.calibration-diagnostics { padding:16px; border:2px solid #ddd7e0; border-radius:22px; background:#fff; }
.calibration-diagnostics summary { cursor:pointer; color:#b00060; font-weight:850; }
.calibration-breakdown { margin-top:20px; }
.calibration-breakdown__table { display:grid; gap:8px; }
.calibration-breakdown__table > div { display:grid; grid-template-columns:minmax(130px,2fr) repeat(3,1fr); gap:8px; padding:10px; border-radius:12px; background:#f7f7fa; font-size:.8rem; align-items:center; }
@media (max-width:600px) {
  .calibration-stat-row,.calibration-metrics { grid-template-columns:1fr; }
  .calibration-metrics article { grid-template-columns:1fr 2fr; align-items:center; text-align:left; }
  .calibration-mic { width:126px; height:126px; }
  .calibration-breakdown__table > div { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { .calibration-mic.is-recording { animation:none; } }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid rgb(230 0 126 / 24%); outline-offset: 3px; }

#root { min-height: 100vh; }
.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--surface);
  box-shadow: 0 0 50px rgb(38 18 33 / 10%);
  overflow: hidden;
}
.app-shell--profiles { background: linear-gradient(180deg, var(--brand-wash) 0, var(--surface) 28%); }
.app-shell--growth { background: linear-gradient(180deg, var(--listen-soft) 0, var(--surface) 28%); }
.app-shell--workshop { background: linear-gradient(180deg, var(--brand-wash) 0, var(--surface) 25%); }
.app-shell--celebrate { background: radial-gradient(circle at 50% 25%, white 0 12%, var(--voice-soft) 42%, var(--brand-wash) 100%); }
.screen { min-height: calc(100vh - 72px); padding: 20px 24px 34px; position: relative; }
.screen--center { display: flex; flex-direction: column; align-items: center; text-align: center; }

.topbar { height: 72px; padding: max(16px, env(safe-area-inset-top)) 20px 10px; display: flex; align-items: center; justify-content: space-between; }
.topbar__brand { display: flex; align-items: center; gap: 4px; }
.topbar__brand .icon-button { margin-left: -8px; }
.brand-mark { width: 34px; height: 34px; display: block; object-fit: contain; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.brand-logo { display: block; height: auto; object-fit: contain; }
.brand-logo--compact { width: 126px; max-height: 48px; object-position: left center; }
.brand-logo--internal { width: 108px; max-height: 38px; object-position: left center; }
.brand-home { min-height: 44px; padding: 4px 6px; display: grid; place-items: center; border: 0; border-radius: 14px; background: transparent; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.brand-home:hover { background: var(--brand-wash); }
.brand-home:active { transform: scale(.97); }
.brand-home:focus-visible { outline: 3px solid var(--voice); outline-offset: 2px; }
.brand-home .brand-logo { pointer-events: none; }
.language-toggle, .icon-button { border: 0; background: transparent; color: var(--brand-action); font-weight: 900; cursor: pointer; min-height: 44px; padding: 6px 8px; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; font-size: 0; }
.icon-button .ui-icon, .notification-button .ui-icon { width: 24px; height: 24px; }
.notification-button { width: 44px; height: 44px; position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-wash); color: var(--brand-action); cursor: pointer; font-size: 20px; }
.notification-button b { min-width: 19px; height: 19px; padding: 0 5px; position: absolute; top: -3px; right: -3px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 999px; background: var(--brand-action); color: white; font-size: 9px; line-height: 1; }

h1, h2, p { margin-top: 0; }
h1 { color: var(--ink); font-size: clamp(30px, 8vw, 42px); line-height: 1.05; letter-spacing: -1.6px; }
h2 { color: var(--ink); font-size: 25px; line-height: 1.15; }

.family-inbox-screen { display: grid; align-content: start; gap: 22px; }
.inbox-heading { display: flex; align-items: center; gap: 14px; }
.inbox-heading > span { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: var(--brand-wash); font-size: 27px; }
.inbox-heading > span img { width: 48px; height: 48px; object-fit: contain; }
.inbox-heading small { color: var(--muted); font-size: 11px; font-weight: 850; }
.inbox-heading h1 { margin: 2px 0 0; font-size: 34px; }
.inbox-section { display: grid; gap: 12px; }
.inbox-section h2 { margin: 0; font-size: 19px; }
.inbox-section-toggle { width: 100%; min-height: 48px; padding: 4px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.inbox-section-toggle > span { min-width: 34px; height: 34px; padding: 0 9px; display: grid; place-items: center; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 12px; font-weight: 950; }
.inbox-section-toggle > i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand-action); transition: transform .18s ease; }
.inbox-section-toggle > i .ui-icon { width: 20px; height: 20px; }
.inbox-section.is-expanded > .inbox-section-toggle > i { transform: rotate(180deg); }
.inbox-sort-control { justify-self: end; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 850; }
.inbox-sort-control select { min-height: 36px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.inbox-sorted-list { display: grid; gap: 12px; }
.inbox-empty { padding: 18px; border-radius: 20px; background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 850; }
.notification-card { padding: 17px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; border: 2px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: 0 4px 0 #e8e3ea; }
.notification-card.is-unread { border-color: var(--brand-action); background: var(--brand-wash); }
.notification-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-weight: 950; }
.notification-card div { min-width: 0; display: grid; gap: 5px; }
.notification-card strong { font-size: 16px; }
.notification-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.notification-review-message { display: block; margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--brand-action); border-radius: 0 10px 10px 0; background: var(--surface-subtle); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; }
.notification-review-message > small, .spelling-suggestion-card__result blockquote > small { display: block; margin-bottom: 5px; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }
.notification-review-message > span { display: block; }
.notification-card small { color: var(--success); font-size: 10px; font-weight: 850; }
.notification-card button { grid-column: 2; justify-self: start; min-height: 44px; padding: 7px 12px; border: 0; border-radius: 13px; background: var(--brand-action); color: white; font-size: 11px; font-weight: 900; cursor: pointer; }
.notification-card .notification-card__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.notification-card__actions button { grid-column: auto; }
.notification-card__actions button.is-secondary { background: var(--error-soft); color: var(--error); }
.written-form-review-response { grid-column: 2; margin-top: 6px; padding: 12px; display: grid; gap: 10px; border: 1px solid var(--brand-soft); border-radius: 15px; background: var(--surface); }
.written-form-review-response label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 900; }
.written-form-review-response textarea { width: 100%; min-height: 92px; padding: 10px 12px; resize: vertical; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.4; }
.written-form-review-response > div { display: flex; flex-wrap: wrap; gap: 8px; }
.written-form-review-response button { grid-column: auto; }
.written-form-review-response button:disabled { opacity: .45; cursor: not-allowed; }
.my-questions-heading { align-items: end; }
.my-questions-heading h2 { margin: 0 0 3px; }
.my-questions-heading p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.35; }
.my-questions-heading > span { font-size: 13px; }
.my-request-list { display: grid; gap: 11px; }
.my-request-card { padding: 12px; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: 0 4px 0 #e8e3ea; }
.my-request-card.is-progress { border-color: var(--voice); background: var(--voice-soft); }
.my-request-card.is-ready { border-color: var(--success); background: var(--success-soft); }
.my-request-card__visual { position: relative; width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: white; color: var(--brand-action); font-size: 25px; font-weight: 950; }
.my-request-card__visual :is(img, .object-image) { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); min-width: 0; min-height: 0; max-width: none; max-height: none; display: block; object-fit: contain; object-position: center; }
.my-request-card__visual .ui-icon { width: 30px; height: 30px; }
.my-request-card__content { min-width: 0; display: grid; gap: 3px; }
.my-request-card__content strong { overflow: hidden; color: var(--ink); font-size: 17px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.my-request-card__content p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.35; }
.my-request-card__content small { color: var(--muted); font-size: 9px; font-weight: 800; }
.my-request-card__status { width: max-content; padding: 4px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .03em; }
.my-request-card.is-progress .my-request-card__status { background: white; color: var(--brand-action); }
.my-request-card.is-ready .my-request-card__status { background: white; color: var(--success); }
.spelling-suggestion-card { padding: 13px; display: grid; gap: 12px; border: 2px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: 0 4px 0 var(--card-shadow); }
.spelling-suggestion-card__heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px; }
.spelling-suggestion-card__heading > span { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: var(--surface-soft); font-size: 30px; }
.spelling-suggestion-card__heading > span img { width: 100%; height: 100%; object-fit: contain; }
.spelling-suggestion-card__heading > div { min-width: 0; display: grid; gap: 2px; }
.spelling-suggestion-card__heading small { width: fit-content; padding: 3px 7px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 9px; font-weight: 950; text-transform: uppercase; }
.spelling-suggestion-card__heading strong { overflow: hidden; color: var(--ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.spelling-suggestion-card__heading time { color: var(--muted); font-size: 9px; font-weight: 800; }
.spelling-suggestion-card__result { display: grid; gap: 7px; padding: 11px; border-radius: 14px; background: var(--surface-soft); }
.spelling-suggestion-card__result > span { width: fit-content; padding: 5px 10px; border-radius: 999px; background: var(--brand-wash); color: var(--ink); font-size: 17px; font-weight: 900; }
.spelling-suggestion-card__result p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.spelling-suggestion-card__result blockquote { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--brand-action); border-radius: 0 10px 10px 0; background: var(--surface); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; }
.spelling-suggestion-card__result blockquote > span { display: block; }
.spelling-suggestion-card.is-approved { border-color: var(--success); }
.spelling-suggestion-card.is-approved .spelling-suggestion-card__heading small { background: var(--success-soft); color: var(--success); }
.spelling-suggestion-card.is-hidden-history { opacity: .72; border-style: dashed; box-shadow: none; }
.spelling-suggestion-card__hide, .show-hidden-suggestions { justify-self: start; min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--brand-action); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.spelling-suggestions-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.spelling-suggestions-toolbar .inbox-sort-control { justify-self: auto; }
.spelling-suggestions-toolbar .show-hidden-suggestions { margin-right: auto; }
.my-request-card__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.my-request-card__actions button { min-height: 44px; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--brand-action); border-radius: 14px; background: white; color: var(--brand-action); font-size: 10px; font-weight: 950; cursor: pointer; }
.my-request-card__actions .my-request-card__learn-button { background: var(--brand-action); color: white; }
.my-request-card__actions button .ui-icon { width: 18px; height: 18px; }
.my-request-detail { grid-column: 1 / -1; padding: 12px; display: grid; gap: 10px; border-top: 2px solid color-mix(in srgb, var(--line) 70%, transparent); }
.my-request-detail h3 { margin: 0; color: var(--ink); font-size: 14px; }
.my-request-detail__image { width: 100%; max-height: 240px; margin: 0; overflow: hidden; border-radius: 17px; background: white; }
.my-request-detail__image img { width: 100%; max-height: 240px; display: block; object-fit: contain; }
.my-request-detail__text { margin: 0; padding: 13px; border-radius: 14px; background: white; color: var(--ink); font-size: 15px; font-weight: 850; line-height: 1.4; }
.my-request-detail__voice { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--brand-action); border-radius: 14px; background: white; color: var(--brand-action); font-weight: 900; cursor: pointer; }
.my-request-detail__voice .ui-icon { width: 19px; height: 19px; }
.my-request-detail__voice .speaking-indicator { width: 22px; height: 22px; }
.my-request-detail__voice.is-speaking { background: var(--brand-wash); }
.my-request-responses { display: grid; gap: 9px; }
.my-request-responses > h3 { text-align: center; font-size: 16px; }
.my-request-responses .family-voice-row { width: 100%; }
.my-request-detail__remove { min-height: 44px; border: 0; background: transparent; color: var(--error); font-size: 11px; font-weight: 900; text-decoration: underline; cursor: pointer; }
.my-questions-empty { min-height: 145px; padding: 14px 18px 14px 112px; position: relative; display: flex; align-items: center; border: 2px dashed var(--brand-soft); border-radius: 24px; background: var(--brand-wash); }
.my-questions-empty .dillo { width: 104px; height: 125px; position: absolute; left: 4px; bottom: 0; }
.my-questions-empty > div { display: grid; gap: 6px; }
.my-questions-empty strong { color: var(--brand-action); font-size: 16px; line-height: 1.15; }
.my-questions-empty span { color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.4; }

.dillo { position: relative; display: block; flex: 0 0 auto; width: 150px; height: 175px; overflow: visible; background: transparent; pointer-events: none; }
.dillo--hero { width: 210px; height: 245px; margin: 8px auto; }
.dillo--listen, .dillo--speak { width: 150px; height: 175px; }
.dillo--think { width: 130px; height: 130px; }
.dillo--celebrate { width: 175px; height: 185px; }
.dillo.is-talking { filter: saturate(1.04) drop-shadow(0 0 8px rgb(255 210 26 / 38%)); }
.dillo.is-listening-to-you { filter: saturate(1.04) drop-shadow(0 0 8px rgb(230 0 126 / 28%)); }
.dillo.is-happy { animation: dillo-character-hop .62s ease-out both; }
.dillo.is-encouraging { animation: dillo-character-nod .78s ease-in-out both; }

.dillo__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; transform-origin: 50% 88%; user-select: none; pointer-events: none; }
.dillo__image--primary { animation: dillo-pose-idle 3.8s ease-in-out infinite; }
.dillo--listen .dillo__image--primary { animation-name: dillo-pose-listen; animation-duration: 3.2s; }
.dillo--speak .dillo__image--primary { animation-name: dillo-pose-speak; animation-duration: 2.8s; }
.dillo.is-talking .dillo__image--primary { animation: dillo-pose-talking .46s ease-in-out infinite alternate; }
.dillo__image--curl { opacity: 0; transform: scale(.62) rotate(-15deg); }
.dillo--celebrate .dillo__image--primary { animation: dillo-pose-celebrate-open 3.8s ease-in-out infinite; }
.dillo--celebrate .dillo__image--curl { animation: dillo-pose-celebrate-curl 3.8s ease-in-out infinite; }

@keyframes dillo-pose-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.008, 1.015); }
}
@keyframes dillo-pose-listen {
  0%, 100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(-1.6deg) translateY(-2px); }
}
@keyframes dillo-pose-speak {
  0%, 100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(1.2deg) translateY(-2px); }
}
@keyframes dillo-pose-talking {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-3px) scale(1.012); }
}
@keyframes dillo-pose-celebrate-open {
  0%, 25%, 80%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  34%, 68% { opacity: 0; transform: translateY(9px) scale(.7); }
}
@keyframes dillo-pose-celebrate-curl {
  0%, 25%, 80%, 100% { opacity: 0; transform: scale(.62) rotate(-15deg); }
  36% { opacity: 1; transform: translateY(5px) scale(.9) rotate(-9deg); }
  51% { opacity: 1; transform: translateY(-7px) scale(1) rotate(12deg); }
  67% { opacity: 1; transform: translateY(3px) scale(.92) rotate(24deg); }
}

/* Upright vector Dillo: whole-body forward pose with explicit arm and curl states. */
.dillo-v__shadow { fill: rgb(38 18 33 / 13%); }
.dillo-v__open, .dillo-v__curl { transform-box: fill-box; transform-origin: center 88%; }
.dillo-v__curl { opacity: 0; transform: scale(.72) rotate(-12deg); }
.dillo-v__tail, .dillo-v__shell-base { fill: #e6007e; stroke: #261221; stroke-width: 6; stroke-linejoin: round; }
.dillo-v__shell-light { fill: #ffd6ea; opacity: .32; }
.dillo-v__shell-shade { fill: #b00060; opacity: .42; }
.dillo-v__shell-band { fill: none; stroke: #ffd21a; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(255 210 26 / 48%)); }
.dillo-v__scutes path, .dillo-v__face-scutes { fill: #b00060; stroke: #261221; stroke-width: 2.5; opacity: .68; }
.dillo-v__shell { transform-box: fill-box; transform-origin: center bottom; animation: dillo-v-breathe 4s ease-in-out infinite; }
.dillo-v__body, .dillo-v__limb, .dillo-v__head-base { fill: #fff; stroke: #261221; stroke-width: 5; stroke-linejoin: round; }
.dillo-v__belly, .dillo-v__face { fill: #ffd6ea; }
.dillo-v__head { transform-box: fill-box; transform-origin: center 74%; animation: dillo-v-curious 5.4s ease-in-out infinite; }
.dillo-v__ear { fill: #fff; stroke: #261221; stroke-width: 5; stroke-linejoin: round; }
.dillo-v__ear-inner { fill: #b00060; stroke: #261221; stroke-width: 4; }
.dillo-v__hand, .dillo-v__foot { fill: #261221; stroke: #261221; stroke-width: 4; }
.dillo-v__blush { fill: #e6007e; opacity: .18; }
.dillo-v__forehead { fill: #b00060; opacity: .98; }
.dillo-v__brow, .dillo-v__smile, .dillo-v__happy-eye { fill: none; stroke: #261221; stroke-width: 5; stroke-linecap: round; }
.dillo-v__eye-white { fill: #fff; stroke: #261221; stroke-width: 4; }
.dillo-v__iris, .dillo-v__pupil { fill: #261221; }
.dillo-v__shine, .dillo-v__nose-shine { fill: #fff; opacity: .94; }
.dillo-v__lid { fill: #ffd6ea; transform-box: fill-box; transform-origin: center top; animation: dillo-v-blink 4.8s infinite; }
.dillo-v__nose { fill: #b00060; stroke: #261221; stroke-width: 3; }
.dillo-v__mouth { fill: #261221; }
.dillo-v__tongue { fill: #e6007e; }
.dillo-v__toe, .dillo-v__finger { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }

.dillo-v__arm { display: none; transform-box: fill-box; transform-origin: center 18%; }
.dillo--hero .dillo-v__arm--rest,
.dillo--hero .dillo-v__arm--hero,
.dillo--listen .dillo-v__arm--listen,
.dillo--listen .dillo-v__arm--hero,
.dillo--speak .dillo-v__arm--rest,
.dillo--speak .dillo-v__arm--speak,
.dillo--celebrate .dillo-v__arm--joy-left,
.dillo--celebrate .dillo-v__arm--joy-right { display: block; }
.dillo--listen .dillo-v__arm--listen { animation: dillo-v-listen-arm 2.2s ease-in-out infinite; }
.dillo--speak .dillo-v__arm--speak { animation: dillo-v-speak-arm 1.8s ease-in-out infinite; }
.dillo--celebrate .dillo-v__arm--joy-left { animation: dillo-v-joy-left .8s ease-in-out infinite alternate; }
.dillo--celebrate .dillo-v__arm--joy-right { animation: dillo-v-joy-right .8s ease-in-out infinite alternate; }
.dillo--think .dillo-v__open { opacity: 0; }
.dillo--think .dillo-v__curl { opacity: 1; transform: scale(1); animation: dillo-v-curl-idle 3.4s ease-in-out infinite; }
.dillo--celebrate .dillo-v__open { animation: dillo-v-open-celebrate 4.2s ease-in-out infinite; }
.dillo--celebrate .dillo-v__curl { animation: dillo-v-curl-celebrate 4.2s ease-in-out infinite; }
.dillo.is-talking .dillo-v__mouth, .dillo.is-talking .dillo-v__tongue { transform-box: fill-box; transform-origin: center top; animation: dillo-v-talk .34s ease-in-out infinite alternate; }
.dillo.is-listening-to-you .dillo-v__head { animation: dillo-v-listening 1.8s ease-in-out infinite; }

.dillo-v__curl-shell { fill: #e6007e; stroke: #261221; stroke-width: 7; }
.dillo-v__curl-light { fill: #ffd6ea; opacity: .34; }
.dillo-v__curl-band { fill: none; stroke: #ffd21a; stroke-width: 11; stroke-linecap: round; }
.dillo-v__curl-line { fill: none; stroke: #b00060; stroke-width: 6; stroke-linecap: round; opacity: .9; }

@keyframes dillo-v-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012, 1.025); }
}
@keyframes dillo-v-curious {
  0%, 40%, 100% { transform: rotate(0); }
  48%, 62% { transform: rotate(-1.6deg) translateY(-1px); }
}
@keyframes dillo-v-listening {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-2.8deg) translateY(-2px); }
}
@keyframes dillo-v-blink {
  0%, 44%, 48%, 100% { transform: scaleY(0); }
  45.5%, 46.5% { transform: scaleY(1.08); }
}
@keyframes dillo-v-listen-arm {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-2.5deg); }
}
@keyframes dillo-v-speak-arm {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-4deg) translateX(2px); }
}
@keyframes dillo-v-joy-left { to { transform: rotate(-5deg) translateY(-3px); } }
@keyframes dillo-v-joy-right { to { transform: rotate(5deg) translateY(-3px); } }
@keyframes dillo-v-curl-idle {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.025) rotate(2deg) translateY(-2px); }
}
@keyframes dillo-v-talk { from { transform: scaleY(.74); } to { transform: scaleY(1.12); } }
@keyframes dillo-v-open-celebrate {
  0%, 28%, 82%, 100% { opacity: 1; transform: scale(1) translateY(0); }
  37%, 70% { opacity: 0; transform: scale(.7) translateY(12px); }
}
@keyframes dillo-v-curl-celebrate {
  0%, 28%, 82%, 100% { opacity: 0; transform: scale(.7) rotate(-15deg); }
  39% { opacity: 1; transform: scale(.94) rotate(-8deg) translateY(5px); }
  53% { opacity: 1; transform: scale(1.02) rotate(13deg) translateY(-6px); }
  69% { opacity: 1; transform: scale(.95) rotate(25deg) translateY(3px); }
}

/* Dillo is one stable vector drawing. Only individual body parts move. */
.dillo__shadow { fill: rgb(73 52 43 / 12%); }
.dillo__pose { transform-box: fill-box; transform-origin: center; }
.dillo__pose--curled { opacity: 0; transform: scale(.72) rotate(-14deg); }
.dillo__tail, .dillo__feet path, .dillo__head-base { fill: #b77f70; stroke: #795149; stroke-width: 4.5; stroke-linejoin: round; }
.dillo__belly { fill: #deb395; stroke: #795149; stroke-width: 4.5; }
.dillo__shell { transform-box: fill-box; transform-origin: 52% 88%; animation: dillo-breathe 3.8s ease-in-out infinite; }
.dillo__shell-base { fill: #ad786e; stroke: #704b44; stroke-width: 5; stroke-linejoin: round; }
.dillo__shell-shadow { fill: #8f625b; opacity: .38; }
.dillo__shell-highlight { fill: #d3a18e; opacity: .48; }
.dillo__band { fill: none; stroke: #e8b7a0; stroke-width: 10; stroke-linecap: round; opacity: .92; }
.dillo__scutes path { fill: #c28c7d; stroke: #895e55; stroke-width: 2.5; opacity: .62; }
.dillo__claws { fill: none !important; stroke: #4d3733 !important; stroke-width: 5 !important; stroke-linecap: round; }
.dillo__head { transform-box: fill-box; transform-origin: 22% 76%; animation: dillo-curious 5.2s ease-in-out infinite; }
.dillo__face { fill: #f0c9a3; }
.dillo__cheek { fill: #edaa96; opacity: .25; }
.dillo__forehead { fill: #bd8174; opacity: .97; }
.dillo__face-scutes path { fill: #c99080; stroke: #99665b; stroke-width: 1.5; opacity: .48; }
.dillo__ear { fill: #bc8274; stroke: #795149; stroke-width: 4.5; transform-box: fill-box; transform-origin: 50% 92%; }
.dillo__ear--front { animation: dillo-ear-twitch 6.4s ease-in-out infinite; }
.dillo__ear-inner { fill: #dc8d7b; opacity: .9; }
.dillo__eye-white { fill: #fffdf8; stroke: #60423b; stroke-width: 4; }
.dillo__iris { fill: #8b552d; }
.dillo__pupil { fill: #211816; }
.dillo__eye-shine, .dillo__eye-shine-small, .dillo__nose-shine { fill: white; opacity: .92; }
.dillo__eyelid { fill: #efc6a1; transform-box: fill-box; transform-origin: center top; animation: dillo-blink 4.7s infinite; }
.dillo__brow, .dillo__smile { fill: none; stroke: #51362f; stroke-width: 4.5; stroke-linecap: round; }
.dillo__nose { fill: #5a3c36; stroke: #3f2d29; stroke-width: 3; }
.dillo__mouth-open { fill: #59332f; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dillo__mouth-tongue { fill: #e98b7a; opacity: 0; }
.dillo__curl-shell { fill: #ad786e; stroke: #704b44; stroke-width: 6; }
.dillo__curl-highlight { fill: #d3a18e; opacity: .52; }
.dillo__curl-band, .dillo__curl-line { fill: none; stroke: #e8b7a0; stroke-width: 10; stroke-linecap: round; }
.dillo__curl-line { stroke: #7e554d; stroke-width: 5; opacity: .75; }
.dillo__happy-eye, .dillo__curl-smile { fill: none; stroke: #51362f; stroke-width: 5; stroke-linecap: round; }
.dillo.is-talking .dillo__smile { opacity: 0; }
.dillo.is-talking .dillo__mouth-open,
.dillo.is-talking .dillo__mouth-tongue { animation: dillo-talk .34s ease-in-out infinite alternate; }
.dillo.is-listening-to-you .dillo__head { animation: dillo-listen 1.8s ease-in-out infinite; }
.dillo--celebrate .dillo__pose--open { animation: dillo-open-pose 3.4s ease-in-out infinite; }
.dillo--celebrate .dillo__pose--curled { animation: dillo-curled-pose 3.4s ease-in-out infinite; }

@keyframes dillo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012, 1.025); }
}
@keyframes dillo-curious {
  0%, 38%, 100% { transform: rotate(0deg) translate(0); }
  45%, 60% { transform: rotate(-1.8deg) translateY(-1px); }
}
@keyframes dillo-listen {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg) translateY(-2px); }
}
@keyframes dillo-ear-twitch {
  0%, 72%, 79%, 100% { transform: rotate(0deg); }
  75% { transform: rotate(-7deg); }
  77% { transform: rotate(4deg); }
}
@keyframes dillo-blink {
  0%, 43%, 47%, 100% { transform: scaleY(0); }
  44.5%, 45.5% { transform: scaleY(1.08); }
}
@keyframes dillo-talk {
  from { opacity: 1; transform: scaleY(.55); }
  to { opacity: 1; transform: scaleY(1.15); }
}
@keyframes dillo-open-pose {
  0%, 24%, 82%, 100% { opacity: 1; transform: scale(1) translateY(0); }
  34%, 68% { opacity: 0; transform: scale(.72) translateY(10px); }
}
@keyframes dillo-curled-pose {
  0%, 24%, 82%, 100% { opacity: 0; transform: scale(.72) rotate(-14deg); }
  36% { opacity: 1; transform: scale(.94) rotate(-10deg) translateY(5px); }
  50% { opacity: 1; transform: scale(1.02) rotate(12deg) translateY(-7px); }
  66% { opacity: 1; transform: scale(.96) rotate(25deg) translateY(3px); }
}

@keyframes dillo-character-hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-13px) scale(1.04); }
  72% { transform: translateY(2px) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes dillo-character-nod {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-2.5deg); }
  62% { transform: rotate(2deg); }
}

.profile-screen .dillo { margin: 8px auto 4px; }
.profile-screen h2 { max-width: 360px; margin-bottom: 22px; }
.profile-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-card { min-height: 170px; padding: 20px 10px; border: 2px solid var(--line); border-radius: 28px; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 7px 0 var(--neutral-shadow, #e7e2e9); cursor: pointer; }
.profile-card:hover { border-color: var(--brand); background: var(--brand-wash); }
.profile-card strong { font-size: 20px; color: var(--ink); }
.profile-card small { font-weight: 800; color: var(--muted); }
.profile-card.is-active-elsewhere, .family-member-row.is-active-elsewhere { border-color: var(--sun, #ffc91c); background: #fffaf0; }
.profile-active-status { margin-top: 7px; display: grid; justify-items: center; gap: 2px; }
.family-member-row .profile-active-status { justify-items: start; }
.profile-active-status b { display: inline-flex; align-items: center; gap: 6px; color: var(--green, #14845f); font-size: 13px; font-weight: 950; }
.profile-active-status b i { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #14845f); box-shadow: 0 0 0 3px #dff5eb; }
.profile-active-status small { color: var(--muted); font-size: 11px; font-weight: 800; }
.auth-loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 28px; }
.auth-loading .brand-logo { width: 210px; }
.auth-loading__pulse { width: 54px; height: 54px; border: 8px solid var(--brand-pale, #ffd5e7); border-top-color: var(--brand); border-radius: 50%; animation: auth-spin .9s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.auth-screen .auth-dillo .dillo { width: 155px; height: 160px; margin: 0 auto; }
.auth-screen h1 { margin: 0; font-size: clamp(31px, 8vw, 46px); }
.auth-screen > p { max-width: 460px; margin: 0 0 12px; color: var(--muted); font-weight: 750; }
.auth-card { width: 100%; padding: 22px; border: 2px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 7px 0 var(--card-shadow, #e8e3ea); text-align: left; }
.auth-card h2 { margin: 0 0 16px; font-size: 22px; }
.auth-adults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-adult { min-height: 112px; padding: 14px 8px; border: 2px solid var(--line); border-radius: 22px; background: white; display: grid; justify-items: center; align-content: center; gap: 5px; color: var(--ink); cursor: pointer; }
.auth-adult.is-selected { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 5px 0 var(--brand-soft); }
.auth-adult strong { font-size: 18px; }
.auth-adult small { color: var(--muted); font-weight: 800; text-align: center; }
.auth-form { margin-top: 20px; display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 8px; font-weight: 900; }
.auth-form input { width: 100%; min-height: 58px; padding: 0 16px; border: 2px solid var(--line); border-radius: 18px; color: var(--ink); background: white; font: inherit; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 142px; }
.password-field button { position: absolute; top: 50%; right: 7px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 13px; color: var(--brand); background: var(--brand-soft); font: inherit; font-size: 14px; font-weight: 900; transform: translateY(-50%); cursor: pointer; }
.password-field button:focus-visible { outline: 3px solid var(--voice); outline-offset: 2px; }
.auth-form > small { color: var(--muted); font-weight: 750; }
.auth-form--login { margin-top: 0; }
.auth-forgot { justify-self: center; border: 0; background: transparent; color: var(--brand); font: inherit; font-weight: 850; }
.auth-forgot:disabled { opacity: .55; cursor: not-allowed; }
.auth-provider-options { display: grid; gap: 10px; }
.auth-provider-options--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-provider-button { width: 100%; min-height: 54px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 900; }
.auth-provider-button span { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-wash); color: var(--brand); display: grid; place-items: center; font-weight: 900; }
.auth-provider-button:disabled, .get-started-card > .primary-button:disabled { opacity: .52; cursor: not-allowed; }
.auth-divider { margin: 16px 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 800; text-align: center; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-divider span { flex: none; }
.auth-route-link { margin: 2px 0; color: var(--muted); font-weight: 800; }
.auth-route-link a { color: var(--brand); font-weight: 900; text-underline-offset: 3px; }
.auth-screen--login { padding-top: 38px; }
.auth-screen--login > h1 { font-size: clamp(30px, 7vw, 42px); }
.auth-privacy-inline { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.auth-privacy-inline .ui-icon { width: 17px; height: 17px; }
.get-started-card > p { margin: 0 0 16px; color: var(--muted); font-weight: 800; text-align: center; }
.get-started-card > .primary-button { width: 100%; margin: 0; }
.get-started-language-screen { padding-top: clamp(34px, 8vw, 76px); gap: 20px; }
.get-started-heading { width: min(100%, 620px); display: grid; gap: 10px; }
.get-started-heading h1 { margin: 0; font-size: clamp(34px, 8vw, 52px); line-height: 1.05; }
.get-started-heading p { margin: 0; color: var(--muted); font-weight: 800; }
.signup-language-options { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.signup-language-card { min-height: 96px; padding: 14px 14px; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 0 var(--card-shadow, #e8e3ea); display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; align-items: center; gap: 10px; font: inherit; text-align: left; cursor: pointer; }
.signup-language-card:hover { border-color: var(--brand-soft); background: var(--brand-wash); }
.signup-language-card.is-selected { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 6px 0 var(--brand-soft); }
.signup-language-card:focus-visible { outline: 3px solid var(--voice); outline-offset: 3px; }
.signup-language-visual { width: 46px; height: 46px; overflow: hidden; border-radius: 13px; background: white; display: grid; place-items: center; color: var(--brand); font-size: 20px; font-weight: 950; }
.signup-language-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.signup-language-card strong { min-width: 0; font-size: 18px; line-height: 1.1; overflow-wrap: anywhere; }
.signup-language-card > b { color: var(--brand); display: grid; place-items: center; }
.signup-language-card > b .ui-icon { width: 20px; height: 20px; }
.signup-language-request { margin: 0 !important; }
.signup-language-request a { color: var(--brand); font-weight: 900; text-underline-offset: 3px; }
.signup-language-continue { width: 100%; margin: 2px 0 0; }
.signup-language-continue:disabled { opacity: .48; cursor: not-allowed; }
.signup-language-message { color: var(--danger, #a22945) !important; }
.get-started-back { align-self: flex-start; min-height: 44px; padding: 7px 10px; border: 0; background: transparent; color: var(--brand); display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 900; cursor: pointer; }
.get-started-back .ui-icon { width: 20px; height: 20px; }
.selected-signup-language { min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--brand-wash); color: var(--brand); display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }
.selected-signup-language__visual { width: 30px; height: 30px; overflow: hidden; border-radius: 9px; background: white; display: grid; place-items: center; font-size: 13px; font-weight: 950; }
.selected-signup-language__visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-secondary-card { width: 100%; overflow: hidden; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); text-align: left; }
.auth-create-circle { min-height: 74px; padding: 14px 18px; display: grid; align-content: center; gap: 2px; }
.auth-create-circle span { color: var(--muted); font-size: 13px; font-weight: 800; }
.auth-create-circle a { width: max-content; max-width: 100%; color: var(--brand); font-size: 17px; font-weight: 900; text-decoration: none; }
.auth-create-circle a:hover { text-decoration: underline; text-underline-offset: 3px; }
.family-pass-entry { border-top: 1px solid var(--line); display: grid; }
.family-pass-entry--first { border-top: 0; }
.family-pass-entry__toggle { width: 100%; min-height: 74px; padding: 10px 14px 10px 18px; border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.family-pass-entry__toggle strong { color: var(--brand); font-size: 17px; }
.family-pass-entry__toggle b { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .2s ease; }
.family-pass-entry__toggle[aria-expanded="true"] b { transform: rotate(180deg); }
.family-pass-entry__toggle .ui-icon { width: 20px; height: 20px; }
.family-pass-entry__content { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--page, #fffafb); display: grid; gap: 12px; }
.family-pass-entry__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.family-pass-entry__choices .secondary-button { min-height: 52px; margin: 0; }
.family-pass-scanner { display: grid; gap: 12px; }
.family-pass-scanner > p { margin: 0; color: var(--muted); font-weight: 800; }
.family-pass-camera { position: relative; overflow: hidden; aspect-ratio: 1; border: 3px solid var(--voice); border-radius: 24px; background: #1f1820; }
.family-pass-camera video { width: 100%; height: 100%; display: block; object-fit: cover; }
.family-pass-camera > span { position: absolute; inset: 16%; border: 3px solid var(--voice); border-radius: 22px; pointer-events: none; }
@media (max-width: 480px) { .family-pass-entry__choices { grid-template-columns: 1fr; } }
@media (max-width: 390px) { .auth-provider-options--compact { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .signup-language-options { grid-template-columns: 1fr; }
  .signup-language-card { min-height: 98px; }
}
.family-pass-code-form { margin-top: 0; }
.family-pass-code-form input { text-align: center; font-size: 24px; letter-spacing: .12em; }
.family-pass-screen { display: grid; grid-auto-rows: max-content; align-content: start; gap: 18px; }
.family-pass-screen > h1, .family-pass-screen > h2, .family-pass-screen > p { margin: 0; }
.family-pass-screen--setup > .privacy-pill { width: max-content; justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.family-pass-screen--ready { justify-items: center; }
.family-pass-screen--ready > .privacy-pill { width: max-content; display: inline-flex; align-items: center; gap: 7px; }
.family-pass-children { display: grid; gap: 12px; }
.family-pass-children > button { min-height: 74px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); display: flex; align-items: center; gap: 14px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.family-pass-children > button strong { flex: 1; font-size: 18px; }
.family-pass-children > button > span:last-child { color: var(--brand-action); }
.family-pass-qr { width: min(320px, 80vw); margin: 0 auto; border: 12px solid white; border-radius: 24px; box-shadow: 0 10px 24px rgb(38 18 33 / 12%); }
.family-pass-code-label { color: var(--muted); font-weight: 800; }
.family-pass-code { font-size: clamp(34px, 9vw, 54px); letter-spacing: .12em; color: var(--brand-action); }
.family-pass-conflict { padding: 18px; border: 2px solid var(--voice); border-radius: 22px; background: var(--voice-soft); display: grid; gap: 12px; }
.family-pass-conflict p { margin: 0; font-weight: 800; }
.auth-message { min-height: 22px; margin: 0; color: #b42318; font-weight: 800; text-align: center; }
.profile-session-footer { width: 100%; margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--line); display: grid; justify-items: center; gap: 18px; }
.avatar.is-learner-locked { box-shadow: 0 0 0 4px var(--brand-pale, #ffd5e7); }
.account-control { position: relative; }
.account-avatar { width: 48px; height: 48px; padding: 0; border: 3px solid white; border-radius: 50%; background: var(--surface-soft); color: var(--ink); box-shadow: 0 0 0 2px var(--brand-soft); display: grid; place-items: center; font-size: 17px; font-weight: 950; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.account-avatar:hover, .account-avatar:focus-visible, .account-avatar[aria-expanded="true"] { background: var(--brand-wash); box-shadow: 0 0 0 3px var(--brand); transform: translateY(-1px); }
.account-menu { width: min(310px, calc(100vw - 32px)); position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; overflow: hidden; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 16px 38px rgb(38 18 33 / 20%); text-align: left; }
.account-menu__identity { padding: 16px; display: flex; align-items: center; gap: 12px; background: var(--brand-wash); border-bottom: 1px solid var(--line); }
.account-menu__identity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.account-menu__identity strong, .account-menu__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__identity strong { font-size: 17px; }
.account-menu__identity small { color: var(--muted); font-size: 11px; font-weight: 750; }
.account-menu__avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--brand-soft); color: var(--ink); font-weight: 950; }
.profile-avatar { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: white; }
.profile-avatar > img, .profile-avatar__inner > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-avatar__fallback { display: none; position: absolute; inset: 0; place-items: center; background: var(--surface-soft); color: var(--ink); font-weight: 950; }
.profile-avatar.is-failed > img, .profile-avatar__inner.is-failed > img { display: none; }
.profile-avatar.is-failed > .profile-avatar__fallback, .profile-avatar__inner.is-failed > .profile-avatar__fallback { display: grid; }
.profile-avatar__inner { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.account-avatar .profile-avatar__inner { border: 0; }
.profile-avatar-editor { padding: 18px; border: 2px solid var(--line); border-radius: 24px; background: var(--brand-wash); text-align: center; }
.profile-avatar-editor h2 { margin: 0 0 12px; }
.profile-avatar-preview { width: 144px; height: 144px; margin: 0 auto 15px; display: grid; place-items: center; border: 4px solid white; box-shadow: 0 0 0 3px var(--brand-soft); font-size: 48px; font-weight: 950; }
.profile-avatar-preview-button { margin:0 auto; padding:0; display:block; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.profile-avatar-preview-button:focus-visible { outline:4px solid var(--sun); outline-offset:6px; }
.profile-avatar-editor .secondary-button { min-height: 50px; }
.profile-avatar-editor__actions { display:grid; gap:10px; }
.avatar-personalizer { display:grid; gap:16px; }
.avatar-personalizer__template { display:grid; grid-template-columns:120px 32px 120px; align-items:center; justify-content:center; gap:10px; }
.avatar-personalizer__template > img, .avatar-personalizer__photo { width:120px; height:120px; border:3px solid var(--brand-soft); border-radius:50%; background:var(--brand-wash); object-fit:cover; overflow:hidden; }
.avatar-personalizer__template > span { color:var(--brand-action); font-size:32px; font-weight:950; text-align:center; }
.avatar-personalizer__photo { display:grid; place-items:center; color:var(--brand-action); font-size:42px; }
.avatar-personalizer__photo img { width:100%; height:100%; object-fit:cover; }
.avatar-photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.avatar-photo-actions > button, .avatar-photo-actions > label { min-height:58px; margin:0; }
.avatar-photo-button { position:relative; display:grid; place-items:center; cursor:pointer; }
.avatar-personalizer__tip { color:var(--muted); font-weight:750; text-align:center; }
.avatar-consent { padding:13px; display:grid; grid-template-columns:22px 1fr; align-items:start; gap:10px; border-radius:16px; background:var(--listen-soft); color:var(--ink); font-weight:750; }
.avatar-consent input { width:20px; height:20px; accent-color:var(--brand-action); }
.avatar-personalizer__preview { display:grid; justify-items:center; gap:10px; }
.avatar-personalizer__preview img { width:min(100%,360px); aspect-ratio:1; border:4px solid var(--brand-soft); border-radius:28px; object-fit:cover; }
.avatar-personalizer__preview p { margin:0; color:var(--success); font-weight:900; }
.avatar-personalizer__quiet { border:0; background:transparent; color:var(--muted); font:inherit; font-weight:850; text-decoration:underline; cursor:pointer; }
.avatar-generating { padding:18px; display:grid; justify-items:center; gap:7px; border-radius:22px; background:var(--brand-wash); text-align:center; }
.avatar-generating__orbit { width:62px; height:62px; display:grid; place-items:center; border:6px solid var(--brand-soft); border-top-color:var(--sun); border-radius:50%; color:var(--brand-action); font-size:25px; animation:avatar-orbit 1.1s linear infinite; }
.avatar-generating small { color:var(--muted); font-weight:750; }
.avatar-generating--background { min-height:280px; align-content:center; margin:18px 0; }
.avatar-download-button { display:flex; align-items:center; justify-content:center; text-decoration:none; margin-top:12px; }
.profile-avatar-viewer { display:grid; gap:18px; }
.profile-avatar-viewer__image { width:min(100%,480px); aspect-ratio:1; margin:0 auto; display:grid; place-items:center; overflow:hidden; border:4px solid var(--brand-soft); border-radius:30px; background:var(--brand-wash); }
.profile-avatar-viewer__image img { width:100%; height:100%; display:block; object-fit:cover; }
.profile-avatar-viewer__initial { font-size:clamp(80px,24vw,180px); font-weight:950; color:var(--ink); }
@keyframes avatar-orbit { to { transform:rotate(360deg); } }
.avatar-camera-backdrop { position:fixed; z-index:120; inset:0; padding:18px; display:grid; place-items:center; background:rgb(38 18 33 / 68%); }
.avatar-camera { width:min(100%,560px); max-height:92vh; padding:22px; display:grid; gap:16px; overflow:auto; border:3px solid var(--brand-soft); border-radius:30px; background:var(--surface); box-shadow:0 24px 70px rgb(38 18 33 / 38%); }
.avatar-camera__viewport { position:relative; width:min(100%,460px); aspect-ratio:1; margin:0 auto; overflow:hidden; border:4px solid var(--brand-soft); border-radius:28px; background:var(--ink); }
.avatar-camera__viewport video { width:100%; height:100%; display:block; object-fit:cover; transform:scaleX(-1); }
.avatar-camera__face-guide { position:absolute; width:58%; height:76%; left:21%; top:11%; border:4px solid rgb(255 255 255 / 88%); border-radius:50%; box-shadow:0 0 0 999px rgb(38 18 33 / 18%); pointer-events:none; }
.avatar-camera__status { position:absolute; inset:0; padding:24px; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--brand-wash); color:var(--ink); text-align:center; }
.avatar-camera__status .avatar-generating__orbit { background:var(--surface); }
@media (max-width:430px){.avatar-personalizer__template{grid-template-columns:94px 24px 94px}.avatar-personalizer__template>img,.avatar-personalizer__photo{width:94px;height:94px}.avatar-photo-actions{grid-template-columns:1fr}.avatar-camera{padding:16px;border-radius:24px}.avatar-camera__viewport{border-radius:22px}}
.avatar-picker-backdrop { position: fixed; z-index: 100; inset: 0; padding: 18px; display: grid; align-items: end; background: rgb(38 18 33 / 55%); }
.avatar-picker { width: min(100%, 620px); max-height: 90vh; margin: 0 auto; padding: 22px; overflow: auto; border-radius: 30px 30px 20px 20px; background: var(--surface); box-shadow: 0 20px 60px rgb(38 18 33 / 30%); }
.avatar-picker__heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.avatar-picker__heading h2 { margin: 0; font-size: 28px; }
.avatar-picker__heading p { margin: 5px 0 16px; color: var(--muted); font-weight: 750; }
.avatar-picker__heading > button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: var(--brand-wash); color: var(--brand-action); font-size: 26px; cursor: pointer; }
.avatar-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.avatar-choice { min-height: 154px; position: relative; padding: 12px; display: grid; justify-items: center; align-content: center; gap: 7px; border: 3px solid var(--line); border-radius: 22px; background: white; color: var(--ink); font: inherit; cursor: pointer; }
.avatar-choice img, .avatar-choice__initial { width: 92px; height: 92px; border: 3px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--brand-soft); }
.avatar-choice__initial { display: grid; place-items: center; background: var(--surface-soft); font-size: 34px; font-weight: 950; }
.avatar-choice strong { font-size: 12px; line-height: 1.25; text-align: center; }
.avatar-choice > b { width: 30px; height: 30px; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-action); color: white; }
.avatar-choice.is-selected { border-color: var(--brand-action); box-shadow: 0 0 0 3px var(--brand-soft); }
.avatar-choice:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.avatar-picker__empty { padding: 16px; border-radius: 16px; background: var(--voice-soft); color: var(--muted); font-weight: 800; }
.avatar-picker__actions { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.avatar-picker-tools { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border-radius:20px; background:var(--brand-wash); }
.avatar-picker-tools > small { grid-column:1/-1; color:var(--muted); font-weight:750; text-align:center; }
.avatar-picker-tools--upload-only { grid-template-columns:1fr; }
.avatar-picker-tools .primary-button, .avatar-picker-tools .secondary-button { min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; }
.avatar-upload-button { cursor:pointer; }
.avatar-picker-group { margin-top:18px; }
.avatar-picker-group h3 { margin:0 0 10px; font-size:18px; }
@media (max-width:430px){.avatar-picker-tools{grid-template-columns:1fr}.avatar-picker-tools>small{grid-column:1}}
@media (min-width: 700px) { .avatar-picker-backdrop { align-items: center; } .avatar-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.account-menu__items { padding: 8px; display: grid; gap: 3px; }
.account-menu__items button, .account-menu__signout { width: 100%; min-height: 48px; padding: 9px 12px; border: 0; border-radius: 14px; background: transparent; display: flex; align-items: center; gap: 12px; color: var(--ink); font: inherit; font-size: 14px; font-weight: 850; text-align: left; cursor: pointer; }
.account-menu__items button:hover, .account-menu__items button:focus-visible { background: var(--brand-wash); }
.account-menu__items img, .account-menu__items .ui-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; object-fit: contain; color: var(--brand-action); }
.account-menu__signout { padding: 12px 20px; border-top: 1px solid var(--line); border-radius: 0; color: var(--brand-action); justify-content: center; text-align: center; }
.account-menu__signout:hover, .account-menu__signout:focus-visible { background: var(--brand-wash); }
.learner-unlock-screen { padding-top: 42px; }
.learner-unlock-mark { width: 108px; height: 108px; border-radius: 50%; background: var(--brand-wash); display: grid; place-items: center; box-shadow: 0 7px 0 var(--brand-soft); }
.learner-unlock-mark .avatar { width: 76px; height: 76px; font-size: 28px; }
.learner-session-lock-note { width: min(100%, 460px); padding: 13px 16px; border-radius: 18px; background: var(--brand-wash); color: var(--brand); font-weight: 850; }
.learner-unlock-screen .auth-card { max-width: 520px; }
.learner-unlock-screen .secondary-button { min-height: 56px; }
.learner-signout { margin-top: 2px; }
.profile-conflict-screen { padding-top: 54px; }
.profile-conflict-icon { width: 104px; height: 104px; border-radius: 50%; background: #fff7d6; border: 3px solid var(--sun, #ffc91c); display: grid; place-items: center; box-shadow: 0 7px 0 #ead7a0; }
.profile-conflict-icon span { color: var(--brand); font-size: 52px; font-weight: 950; line-height: 1; }
.profile-conflict-card { width: min(100%, 520px); padding: 22px; border: 2px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 7px 0 var(--card-shadow, #e8e3ea); display: grid; gap: 15px; }
.profile-conflict-people { padding: 14px 16px; border-radius: 20px; background: var(--brand-wash); display: flex; align-items: center; gap: 14px; text-align: left; }
.profile-conflict-people div { display: grid; gap: 2px; }
.profile-conflict-people strong { font-size: 20px; }
.profile-conflict-people small { color: var(--muted); font-weight: 800; }
.profile-conflict-card .secondary-button { min-height: 56px; }
.profile-session-footer .privacy-pill { margin: 0; }
@media (max-width: 430px) { .auth-adults { grid-template-columns: 1fr; } }
@media (max-width: 430px) {
  .profile-session-footer { margin-top: 22px; padding-top: 18px; gap: 15px; }
}
@media (max-width: 430px) {
  .topbar { padding-inline: 12px; }
  .topbar__actions { gap: 5px; }
  .topbar__brand { gap: 0; }
  .brand-logo--internal { width: 84px; }
  .language-toggle { padding-inline: 4px; font-size: 13px; }
  .notification-button { width: 44px; height: 44px; }
  .account-avatar { width: 44px; height: 44px; }
}
.profile-screen.is-directory .dillo { width: 145px; height: 150px; margin-top: 0; }
.profile-screen.is-directory h2 { margin-bottom: 15px; font-size: 22px; }
.family-directory { width: 100%; display: grid; gap: 14px; text-align: left; }
.family-directory > h3, .other-family-members h3 { margin: 0; color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }
.family-household { overflow: hidden; border: 2px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: 0 5px 0 #e8e3ea; }
.family-household summary { min-height: 68px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; background: var(--brand-wash); }
.family-household summary::-webkit-details-marker { display: none; }
.family-household summary > span { display: grid; gap: 3px; }
.family-household summary strong { font-size: 16px; }
.family-household summary small { color: var(--muted); font-size: 10px; font-weight: 850; }
.family-household summary b { color: var(--brand-action); font-size: 20px; transition: transform .2s ease; }
.family-household:not([open]) summary b { transform: rotate(-90deg); }
.family-household > div { padding: 4px 12px 9px; }
.family-member-row { width: 100%; min-height: 59px; padding: 8px 5px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.family-member-row:first-child { border-top: 0; }
.family-member-row.is-child { padding-left: 25px; grid-template-columns: 36px 1fr auto; }
.family-member-row .avatar { width: 38px; height: 38px; font-size: 14px; }
.family-member-row.is-child .avatar { width: 32px; height: 32px; background: var(--voice-soft); }
.family-member-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.family-member-row strong { font-size: 14px; }
.family-member-row small { color: var(--muted); font-size: 10px; font-weight: 800; }
.family-member-row > b { color: var(--brand-action); font-size: 20px; }
.other-family-members { display: grid; gap: 0; padding: 15px 12px 8px; border: 2px solid var(--line); border-radius: 23px; background: var(--surface); }
.other-family-members h3 { padding: 0 5px 8px; }
.family-directory + .privacy-pill { margin-top: 20px; }
.circle-member-directory { margin-top: 20px; display: grid; gap: 12px; }
.circle-member-directory > h2 { margin: 0 0 2px; font-size: 20px; }
.circle-member-directory > h3 { margin: 7px 4px 0; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; }
.circle-directory-household { box-shadow: 0 4px 0 #e8e3ea; }
.circle-directory-household.is-own { border-color: var(--brand-soft); }
.circle-directory-household.is-own summary { background: var(--brand-wash); }
.directory-member-row { grid-template-columns: 42px 1fr; cursor: default; }
.directory-member-row.is-child { grid-template-columns: 36px 1fr; }
.circle-member-directory .other-family-members { margin-top: 1px; }
.steward-directory .steward-household summary { background: linear-gradient(90deg, var(--listen-soft), var(--brand-wash)); }
.steward-directory .other-family-members { border-color: var(--brand-soft); box-shadow: 0 4px 0 #e8e3ea; }
.steward-directory .other-family-members h3 { color: var(--brand-action); }
.steward-member-row { min-width: 0; min-height: 82px; padding: 9px 5px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; border-top: 1px solid var(--line); }
.steward-member-row:first-child { border-top: 0; }
.steward-member-row.is-child { padding-left: 22px; grid-template-columns: 34px minmax(0, 1fr) auto; }
.steward-member-row .avatar { width: 38px; height: 38px; font-size: 13px; }
.steward-member-row.is-child .avatar { width: 32px; height: 32px; background: var(--voice-soft); }
.steward-member-row__identity { min-width: 0; display: grid; gap: 3px; }
.steward-member-row__identity strong { font-size: 14px; }
.steward-member-row__identity small { color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.35; }
.steward-role-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 120px; }
.steward-role-chips b { padding: 4px 7px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 8px; }
.steward-member-row.is-child .steward-role-chips b { background: var(--voice-soft); color: var(--ink); }
.member-edit-button { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand-action); }
.member-edit-button .ui-icon, .member-role-button .ui-icon, .member-relationship-button .ui-icon { width: 19px; height: 19px; }
.steward-row-actions { min-width: 0; grid-column: 2 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.steward-row-actions button { min-height: 31px; padding: 5px 9px; display: flex; align-items: center; justify-content: center; gap: 5px; border-style: solid; border-width: 1px; border-radius: 999px; font: inherit; font-size: 8px; font-weight: 900; line-height: 1; cursor: pointer; }
.steward-row-actions button .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.member-role-button { border-color: #9fd6c4; background: var(--listen-soft); color: var(--listen); }
.member-relationship-button { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand-action); }
.member-remove-button { border-color: #f3b8bd; background: #fff1f2; color: #b9232e; }
.member-remove-button svg { width: 19px; height: 19px; }
.member-role-editor { display: grid; align-content: start; gap: 18px; }
.member-relationship-editor { display: grid; align-content: start; gap: 20px; padding-bottom: 54px; }
.relationship-editor-hint, .relationship-empty { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--brand-wash); color: var(--muted); font-weight: 750; line-height: 1.45; }
.confirmed-relationships { display: grid; gap: 10px; }
.confirmed-relationships h2 { margin: 0 0 2px; font-size: 20px; }
.confirmed-relationships > button { width: 100%; min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.confirmed-relationships > button > .ui-icon { color: var(--success); }
.confirmed-relationships > button > b { color: var(--brand-action); }
.confirmed-relationship-fixed { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.confirmed-relationship-fixed > .ui-icon:first-child { color: var(--success); }
.confirmed-relationship-fixed > .ui-icon:last-child { color: var(--muted); }
.confirmed-relationship-fixed span { display: grid; gap: 3px; }
.confirmed-relationship-fixed small { color: var(--muted); font-size: 10px; font-weight: 750; }
.confirmed-relationships span { display: grid; gap: 3px; }
.confirmed-relationships small { color: var(--muted); font-size: 11px; font-weight: 750; }
.relationship-form { padding: 18px; display: grid; gap: 16px; border: 2px solid var(--line); border-radius: 25px; background: var(--surface); }
.relationship-form > h2 { margin: 0 0 -2px; font-size: 20px; }
.relationship-form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 900; }
.relationship-form input, .relationship-form select { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 750; }
.relationship-overrides { display: grid; gap: 14px; padding-top: 2px; }
.relationship-preview { margin: -2px 0 0; padding: 11px 13px; border-radius: 14px; background: var(--brand-wash); color: var(--brand-action); font-size: 12px; font-weight: 850; line-height: 1.4; }
.relationship-form .primary-button { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.relationship-form .primary-button .ui-icon { width: 20px; height: 20px; }
.editor-person p { margin: 1px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.role-editor-hint { margin: 0; color: var(--muted); font-weight: 750; }
.role-editor-options { display: grid; gap: 12px; }
.role-editor-option { min-height: 82px; padding: 13px 15px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 21px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.role-editor-option > span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-soft); font-size: 20px; }
.role-editor-option > span:nth-child(2) { display: grid; gap: 4px; }
.role-editor-option strong { font-size: 17px; }
.role-editor-option small { color: var(--muted); font-size: 10px; font-weight: 750; }
.role-editor-option > b { color: var(--brand-action); font-size: 20px; }
.role-editor-option.is-selected { border-color: var(--brand-action); background: var(--brand-wash); box-shadow: 0 4px 0 var(--brand-soft); }
.role-lock-note { margin: 0; padding: 12px 14px; border-radius: 15px; background: var(--listen-soft); color: var(--listen); font-size: 10px; font-weight: 800; }
.directory-member-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
.directory-member-row.is-child { grid-template-columns: 36px minmax(0, 1fr) auto; }
.steward-household.is-own { border-color: var(--brand-action); }
.steward-household.is-own summary { background: var(--brand-wash); }
.editor-person { display: flex; align-items: center; gap: 14px; }
.editor-person .avatar { width: 58px; height: 58px; }
.editor-person small { color: var(--muted); font-size: 11px; font-weight: 850; }
.editor-person h1 { margin: 2px 0 0; font-size: 30px; }
.steward-dashboard-entry { border-color: var(--listen); background: var(--listen-soft); }
.steward-dashboard-screen { display: grid; align-content: start; gap: 20px; }
.steward-dashboard-title { display: flex; align-items: center; gap: 14px; }
.steward-dashboard-title > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 19px; background: var(--listen); color: white; font-size: 25px; }
.steward-dashboard-title small { color: var(--muted); font-weight: 850; }
.steward-dashboard-title h1 { margin: 2px 0; font-size: 32px; }
.steward-dashboard-title p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; }
.steward-own-family { min-height: 88px; padding: 14px; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; border: 2px solid var(--brand-action); border-radius: 23px; background: var(--brand-wash); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 5px 0 var(--brand-soft); }
.steward-own-family > span:first-child { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--surface); color: var(--brand-action); font-size: 25px; }
.steward-own-family > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.steward-own-family strong { font-size: 18px; }
.steward-own-family small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.steward-own-family em { margin-top: 3px; color: var(--brand-action); font-size: 10px; font-style: normal; font-weight: 900; }
.steward-own-family > b { color: var(--brand-action); font-size: 22px; }
.my-family-screen { display: grid; align-content: start; gap: 20px; }
.my-family-heading { display: flex; align-items: center; gap: 14px; }
.my-family-heading > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 19px; background: var(--brand-action); color: white; font-size: 28px; }
.my-family-heading small { color: var(--muted); font-weight: 850; }
.my-family-heading h1 { margin: 2px 0; font-size: 32px; }
.my-family-heading p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; }
.steward-overview { padding: 15px; border: 2px solid var(--brand-soft); border-radius: 22px; background: var(--brand-wash); }
.steward-overview h2 { margin-bottom: 11px; color: var(--ink); font-size: 18px; }
.steward-overview > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steward-overview span { min-width: 0; padding: 10px 7px; display: grid; gap: 3px; border: 1px solid var(--brand-soft); border-radius: 15px; background: var(--surface); text-align: center; }
.steward-overview strong { color: var(--brand-action); font-size: 22px; }
.steward-overview small { color: var(--muted); font-size: 8px; font-weight: 800; line-height: 1.25; }
.steward-dashboard-actions { display: grid; gap: 8px; }
.steward-dashboard-actions button { min-height: 64px; padding: 9px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 1px; border: 2px solid var(--line); border-radius: 19px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 3px 0 #eee9ef; }
.steward-dashboard-actions button > span { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--brand-wash); color: var(--ink); font-size: 19px; }
.steward-dashboard-actions button > strong, .steward-dashboard-actions button > small { grid-column: 2; }
.steward-dashboard-actions button > strong { align-self: end; font-size: 14px; line-height: 1.15; }
.steward-dashboard-actions button > small { overflow: hidden; align-self: start; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.steward-dashboard-actions button > b { grid-column: 3; grid-row: 1 / span 2; color: var(--brand-action); font-size: 20px; }
.steward-dashboard-actions button:is([data-action="notifications"], [data-action="circle-words"]) { border-color: var(--brand-soft); background: var(--brand-wash); }
.steward-dashboard-actions button:is([data-action="notifications"], [data-action="circle-words"]) > span { background: var(--surface); color: var(--brand-action); }
.steward-dashboard-actions button:is([data-action="manage-circle"], [data-action="requests"], [data-action="recording-studio"]) { border-color: #a9d5c2; background: var(--success-soft); }
.steward-dashboard-actions button:is([data-action="manage-circle"], [data-action="requests"], [data-action="recording-studio"]) > span { background: var(--success); color: white; }
.steward-dashboard-actions button:is([data-action="learning-observations"], [data-action="needs-home"]) { border-color: var(--voice); background: var(--voice-soft); }
.steward-dashboard-actions button:is([data-action="learning-observations"], [data-action="needs-home"]) > span { background: var(--voice); color: var(--ink); }
.avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--ink); border: 3px solid white; font-weight: 900; font-size: 22px; }
.avatar--yanushka { background: var(--voice-soft); }
.avatar--leo { background: var(--brand-soft); }
.avatar--marcos { background: var(--listen-soft); }
.avatar--small { width: 44px; height: 44px; font-size: 16px; cursor: pointer; }
.text-button { margin: 22px 0 16px; border: 0; background: transparent; color: var(--brand-action); font-weight: 900; }
.privacy-pill, .prototype-note { border-radius: 999px; padding: 9px 14px; background: var(--listen-soft); color: var(--listen); font-size: 12px; font-weight: 900; }

.home-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-screen h1 { margin: 18px 0 2px; }
.home-screen > .dillo { margin: -4px 0 -12px; align-self: flex-start; }
.prototype-note { align-self: flex-end; font-size: 10px; }
.today-session { position: relative; width: 100%; min-height: 210px; margin: 20px 0 4px; padding: 24px; overflow: hidden; border: 0; border-radius: 30px; background: var(--brand-wash); box-shadow: 0 8px 0 var(--brand-soft); color: var(--ink); cursor: pointer; text-align: left; }
.today-session::after { content: ""; position: absolute; width: 170px; height: 170px; right: -62px; top: -64px; border-radius: 50%; background: var(--brand-soft); opacity: .7; }
.today-session__copy { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 70%; }
.today-session__copy small { color: var(--brand-action); font-size: 13px; font-weight: 900; }
.today-session__copy strong { margin: 7px 0 10px; font-size: 29px; line-height: 1.05; }
.today-session__copy b { color: var(--muted); font-size: 12px; }
.today-session__preview { position: absolute; z-index: 1; right: 18px; bottom: 18px; display: flex; flex-direction: row-reverse; align-items: center; }
.today-session__preview i { width: 66px; height: 66px; margin-left: -18px; display: grid; place-items: center; overflow: hidden; border: 4px solid white; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 12px rgb(38 18 33 / 12%); font-size: 38px; font-style: normal; }
.today-session__preview i > span { font-size: 38px; }
.today-session__preview img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.today-session__play { position: absolute; z-index: 2; right: 22px; top: 22px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-action); color: white; box-shadow: 0 5px 0 var(--brand-pressed); }
.today-session__play .ui-icon { width: 26px; height: 26px; }
.learner-nav-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.learner-nav-card { min-height: 154px; padding: 18px 14px; display: flex; flex-direction: column; align-items: flex-start; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 5px 0 #e8e3ea; color: var(--ink); text-align: left; cursor: pointer; }
.learner-nav-card > span { font-size: 36px; }
.learner-nav-card > .learner-nav-card__icon { width: 54px; height: 54px; display: block; font-size: 0; }
.learner-nav-card__icon img { width: 100%; height: 100%; display: block; }
.learner-nav-card strong { margin: 9px 0 5px; font-size: 18px; }
.learner-nav-card small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.learner-nav-card--home { min-height: 154px; }
.learner-nav-card--home .learner-nav-card__heading { width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; }
.learner-nav-card--home .learner-nav-card__heading .learner-nav-card__icon { width: 54px; height: 54px; display: block; font-size: 0; }
.learner-nav-card--home .learner-nav-card__heading .learner-nav-card__icon img { width: 100%; height: 100%; display: block; }
.learner-nav-card--home .learner-nav-card__heading strong { margin: 0; line-height: 1.08; }
.learner-nav-card--home > small { margin-top: 10px; }
.learner-nav-card__previews { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-left: 4px; }
.learner-nav-card__previews > span { display: flex; align-items: center; min-width: 0; }
.learner-nav-card__previews > em { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--brand-action); color: white; font-size: 10px; font-style: normal; font-weight: 950; line-height: 1.2; white-space: nowrap; }
.learner-nav-card__previews i { width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; overflow: hidden; border: 3px solid white; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 7px rgb(38 18 33 / 12%); font-size: 24px; font-style: normal; }
.learner-nav-card__previews i > span { font-size: 24px; }
.learner-nav-card__previews img { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--surface); }
.ask-family-link { min-height: 48px; margin: 18px auto 4px; padding: 8px 14px; border: 0; background: transparent; color: var(--brand-action); font-weight: 950; cursor: pointer; }
.ask-family-card { width: calc(100% - 16px); min-height: 72px; margin: 24px 8px 10px; padding: 10px 12px; display: grid; grid-template-columns: 50px minmax(0,1fr) 44px; align-items: center; gap: 12px; border: 0; border-left: 5px solid var(--maize); border-radius: 15px 24px 24px 15px; background: color-mix(in srgb, var(--maize) 16%, var(--surface)); color: var(--ink); text-align: left; cursor: pointer; }
.ask-family-card__icon { position: relative; width: 50px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 18px; background: var(--maize); color: var(--ink); }
.ask-family-card__question { font-size: 32px; font-weight: 950; line-height: 1; transform: translateY(-1px); }
.ask-family-card__sparkle { position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand-action); color: var(--surface); }
.ask-family-card__sparkle .ui-icon { width: 13px; height: 13px; }
.ask-family-card__count { position: absolute; right: -6px; top: -6px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 999px; background: var(--brand-action); color: var(--surface); font-size: 12px; font-weight: 950; line-height: 1; }
.ask-family-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.ask-family-card strong { color: var(--ink); font-size: 19px; }
.ask-family-card small { color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.3; }
.ask-family-card > b { width: 44px; height: 44px; display: grid; place-items: center; color: var(--brand-action); }
.ask-family-card:hover { background: color-mix(in srgb, var(--maize) 23%, var(--surface)); }
.ask-family-card:focus-visible { outline: 3px solid var(--brand-action); outline-offset: 3px; }
.ask-family-card--questions { background: color-mix(in srgb, var(--maize) 11%, var(--surface)); }
.ask-family-card--questions.has-ready-answer { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.ask-family-card--questions.has-ready-answer .ask-family-card__icon { background: color-mix(in srgb, var(--success) 18%, var(--maize)); }
.ask-family-card--questions.has-ready-answer .ask-family-card__count { background: var(--success); }
.ask-family-card--questions.has-ready-answer small { color: var(--success); }
.ask-family-section { width: 100%; margin: 24px 0 10px; padding: 8px; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); }
.ask-family-section > .ask-family-card { width: 100%; margin: 0; }
.ask-family-section > .ask-family-card--nested { width: calc(100% - 32px); min-height: 62px; margin: 8px 16px 0; }
.today-card { width: 100%; min-height: 245px; border-radius: 30px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 10px 0 #e8e3ea; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 22px; margin-bottom: 24px; }
.today-card__object { font-size: 112px; filter: drop-shadow(0 10px 12px rgb(38 18 33 / 12%)); }
.today-card__object > span { font-size: 112px; }
.today-card__object img { width: 120px; height: 120px; object-fit: contain; border-radius: 28px; background: var(--surface); }
.today-card strong { grid-column: 1/-1; color: var(--ink); font-size: 18px; }
.sound-bars { display: flex; gap: 5px; justify-content: center; align-items: center; height: 80px; }
.sound-bars i { width: 7px; height: 26px; border-radius: 9px; background: var(--listen); }
.sound-bars i:nth-child(2), .sound-bars i:nth-child(4) { height: 48px; }
.sound-bars i:nth-child(3) { height: 70px; }

.primary-button, .secondary-button { width: 100%; min-height: 68px; border-radius: 22px; border: 0; font-weight: 950; font-size: 24px; letter-spacing: .4px; cursor: pointer; margin-top: 12px; }
.primary-button:disabled { opacity: .38; cursor: default; }
.primary-button--coral, .primary-button--teal { background: var(--brand-action); color: white; box-shadow: 0 7px 0 var(--brand-pressed); }
.primary-button--listen { background: var(--brand-action); color: white; box-shadow: 0 7px 0 var(--brand-pressed); }
.primary-button--maize { background: var(--voice); color: var(--ink); box-shadow: 0 7px 0 #c89600; }
.secondary-button { min-height: 54px; font-size: 17px; background: var(--surface); border: 2px solid var(--line); color: var(--brand-action); }
.workshop-entry { width: 100%; margin-top: 18px; min-height: 76px; border-radius: 22px; border: 2px solid var(--brand-soft); background: var(--brand-wash); display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; cursor: pointer; }
.workshop-entry span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.workshop-entry strong { color: var(--brand-action); }
.workshop-entry small { font-size: 11px; margin-top: 3px; }
.teach-family-entry__icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; }
.teach-family-entry__icon img { width: 100%; height: 100%; display: block; }
.member-family-circle-entry__icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; }
.member-family-circle-entry__icon img { width: 100%; height: 100%; display: block; }
.observation-entry__icon, .steward-dashboard-entry__icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 3px solid var(--brand); border-radius: 50%; background: var(--surface); color: var(--ink); }
.observation-entry__icon .ui-icon { width: 29px; height: 29px; }
.steward-dashboard-entry__icon .ui-icon { width: 25px; height: 25px; }

.lesson-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lesson-screen--rhythm { gap: 28px; }
.lesson-screen--rhythm > .lesson-journey,
.lesson-screen--rhythm > .focus-object,
.lesson-screen--rhythm > .family-listen,
.lesson-screen--rhythm > .lesson-continue,
.lesson-screen--rhythm > .object-grid,
.lesson-screen--rhythm > .choice-response,
.lesson-screen--rhythm > .choice-next,
.lesson-screen--rhythm > .speaking-row,
.lesson-screen--rhythm > .recording-status,
.lesson-screen--rhythm > .pronunciation-result,
.lesson-screen--rhythm > .audio-button,
.lesson-screen--rhythm > .gentle-prompt,
.lesson-screen--rhythm > .feedback,
.lesson-screen--rhythm > .earned-object,
.lesson-screen--rhythm > h1,
.lesson-screen--rhythm > p,
.lesson-screen--rhythm > .primary-button,
.lesson-screen--rhythm > .family-message,
.lesson-screen--rhythm > .confetti { margin-top: 0; margin-bottom: 0; }
.lesson-journey { width: 100%; margin: 2px 0 26px; display: grid; gap: 15px; }
.word-journey { width: 100%; min-height: 42px; padding: 2px 3px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 0; background: transparent; box-shadow: none; }
.word-journey > strong { color: var(--brand-action); font-size: 12px; white-space: nowrap; }
.word-tokens { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.word-tokens span { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; box-sizing: border-box; border: 2px solid var(--brand-soft); border-radius: 50%; background: var(--surface); color: var(--brand-action); font-size: 8px; font-weight: 950; transition: transform .2s ease, background .2s ease; }
.word-tokens span.is-complete { width: 20px; height: 20px; flex-basis: 20px; border-color: var(--brand-action); background: var(--brand-action); color: white; }
.word-tokens span.is-complete .ui-icon { width: 11px; height: 11px; stroke-width: 2.8; }
.word-tokens span.is-current { width: 30px; height: 30px; flex-basis: 30px; border: 3px solid var(--voice); background: var(--voice); color: var(--ink); box-shadow: 0 0 0 4px var(--voice-soft); font-size: 10px; transform: none; }
@media (max-width: 370px) {
  .word-journey { padding-inline: 9px; gap: 7px; }
  .word-journey > strong { font-size: 10px; }
  .word-tokens { gap: 4px; }
}
.lesson-stage-list { position: relative; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; }
.lesson-stage-list::before { content: ""; position: absolute; height: 4px; left: 9%; right: 9%; top: 18px; border-radius: 999px; background: var(--line); }
.lesson-stage { position: relative; z-index: 1; min-width: 0; display: grid; justify-items: center; gap: 5px; color: var(--muted); }
.lesson-stage b { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1; }
.lesson-stage b .lesson-glyph { width: 21px; height: 21px; }
.lesson-stage small { max-width: 74px; overflow: hidden; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.lesson-stage.is-complete b { border-color: var(--brand-action); background: var(--brand-action); color: white; }
.lesson-stage.is-complete small { color: var(--brand-action); }
.lesson-stage__check { position: absolute; width: 17px; height: 17px; top: -7px; right: -8px; display: grid; place-items: center; box-sizing: border-box; border: 2px solid var(--brand-action); border-radius: 50%; background: white; color: var(--brand-action); box-shadow: 0 2px 0 rgb(38 18 33 / 10%); }
.lesson-stage__check .ui-icon { width: 10px; height: 10px; stroke-width: 2.8; }
.lesson-stage.is-current b { width: 44px; height: 44px; margin-top: -3px; border-color: var(--voice); background: var(--voice); color: var(--ink); box-shadow: 0 4px 0 #c89600, 0 0 0 5px var(--voice-soft); font-size: 18px; }
.lesson-stage.is-current b svg { width: 24px; height: 24px; stroke-width: 2.25; }
.lesson-stage.is-current small { color: var(--ink); font-size: 9px; }
.lesson-screen h1 { margin-bottom: 18px; }
.focus-object { width: 320px; height: 320px; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--line); border-radius: 38px; background: var(--surface); box-shadow: 0 0 0 3px rgb(255 210 26 / 12%); font-size: 210px; filter: drop-shadow(0 16px 22px rgb(38 18 33 / 14%)); }
.focus-object__visual { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden; }
.focus-object__visual img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); min-width: 0; min-height: 0; max-width: none; max-height: none; display: block; object-fit: contain; object-position: center; border: 0; border-radius: 30px; background: transparent; box-shadow: none; }
.focus-object--medium { width: 220px; height: 220px; font-size: 150px; }
.focus-object--medium .focus-object__visual img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.audio-button { width: 112px; height: 112px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-action); color: white; box-shadow: 0 8px 0 var(--brand-pressed), 0 0 0 13px rgb(255 210 26 / 18%); cursor: pointer; }
.audio-cue-icon { width: 68px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; transform: translateX(3px); }
.audio-cue-icon__play { width: 0; height: 0; flex: 0 0 auto; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid currentColor; }
.audio-cue-icon__waves { width: 23px; height: 38px; display: flex; align-items: center; gap: 2px; }
.audio-cue-icon__waves b { width: 6px; height: 15px; display: block; border: 3px solid currentColor; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0 50% 50% 0; }
.audio-cue-icon__waves b:nth-child(2) { height: 25px; }
.audio-cue-icon__waves b:nth-child(3) { height: 35px; }
.audio-button--small { width: 72px; height: 72px; font-size: 28px; box-shadow: 0 6px 0 var(--brand-pressed); margin-bottom: 20px; }
.audio-button--small .audio-cue-icon { width: 34px; height: 34px; transform: translateX(2px); }
.audio-button--small .audio-cue-icon__play { border-top-width: 11px; border-bottom-width: 11px; border-left-width: 17px; }
.lesson-replay-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: -2px 0 20px; padding: 10px 18px; border: 2px solid var(--brand-soft); border-radius: 999px; background: var(--surface); color: var(--brand-action); font-size: 14px; font-weight: 900; cursor: pointer; }
.lesson-replay-button:hover { border-color: var(--brand); background: var(--brand-wash); }
.lesson-replay-button .audio-cue-icon { width: 19px; height: 22px; transform: none; }
.lesson-replay-button .audio-cue-icon__play { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 11px; }
.family-listen { width: 100%; margin-top: 8px; }
.family-listen h2 { margin: 0 0 10px; color: var(--ink); font-size: 17px; }
.family-listen--primary {
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.family-listen--primary:has(.family-voice-button:only-child) { max-width: none; }
.family-listen--primary h2 { margin-bottom: 12px; }
.family-listen--primary .family-voice-row { padding-bottom: 2px; }
.family-listen--replay { margin: 14px 0 4px; }
.family-listen--replay h2 { margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 850; }
.family-listen--replay .family-voice-row { justify-content: center; gap: 7px; padding-bottom: 5px; }
.family-voice-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; gap: 12px; padding: 2px 3px 9px; }
.family-voice-row:has(> .family-voice-button:only-child) { grid-template-columns: minmax(0, 1fr); }
.family-voice-row:has(> .family-voice-button:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 260px)); }
.family-voice-row:has(> .family-voice-button:only-child) .family-voice-button { min-height: 84px; grid-template-rows: none; grid-template-columns: 62px minmax(0, 1fr) 40px; justify-items: stretch; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; }
.family-voice-row:has(> .family-voice-button:only-child) .family-voice-avatar { width: 60px; height: 60px; border-width: 2px; font-size: 21px; }
.family-voice-row:has(> .family-voice-button:only-child) .family-voice-name { align-items: flex-start; }
.family-voice-row:has(> .family-voice-button:only-child) .family-voice-play { width: 40px; height: 40px; }
.family-voice-row:has(> .family-voice-button:only-child) .family-voice-play .ui-icon { width: 19px; height: 19px; }
.family-voice-button { width: 100%; min-width: 0; min-height: 210px; display: grid; grid-template-rows: 92px minmax(42px, auto) 40px; justify-items: center; align-content: center; gap: 8px; padding: 14px 10px 12px; border: 2px solid var(--brand-soft); border-radius: 19px; background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--brand-soft); text-align: center; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.family-voice-button:hover { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 6px 0 var(--brand-soft); transform: translateY(-1px); }
.family-voice-button:focus-visible { outline: 4px solid var(--voice); outline-offset: 3px; }
.family-voice-button:active { box-shadow: 0 2px 0 var(--brand-soft); transform: translateY(3px); }
.family-voice-button.is-selected { border-color: var(--brand-action); background: var(--brand-wash); }
.family-voice-button.is-heard .family-voice-play { background: var(--success); }
.family-voice-button--replay { min-height: 164px; grid-template-rows: 66px minmax(32px, auto) 36px; gap: 6px; padding: 10px 8px; border-width: 1px; border-radius: 15px; box-shadow: none; }
.family-voice-button--replay .family-voice-avatar { width: 64px; height: 64px; border-width: 2px; font-size: 22px; }
.family-voice-button--replay .family-voice-name strong { font-size: 12px; }
.family-voice-button--replay .family-voice-name small { margin-top: 1px; font-size: 8px; }
.family-voice-button--replay .family-voice-play { width: 36px; height: 36px; }
.family-voice-button--replay.is-selected { border-color: var(--brand-soft); background: var(--brand-wash); }
.family-voice-button--replay.is-selected > .family-voice-play { color: white; }
.family-voice-avatar { width: 88px; height: 88px; box-sizing: border-box; display: grid; place-items: center; border: 3px solid var(--brand-soft); border-radius: 50%; background: var(--brand-action); color: white; font-size: 30px; font-weight: 950; overflow: hidden; }
.family-voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.family-voice-name { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.family-voice-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-voice-name strong { font-size: 14px; }
.family-voice-name small { margin-top: 3px; overflow-wrap: anywhere; color: var(--brand-action); font-size: 10px; font-weight: 850; line-height: 1.2; }
.family-voice-play { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-action); color: white; text-align: center; pointer-events: none; }
.family-voice-play .ui-icon { width: 20px; height: 20px; }
.speaking-indicator { width: 24px; height: 24px; display: block; overflow: visible; }
.speaking-indicator__speaker { fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.4; }
.speaking-indicator__wave { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; transform-origin: 12px 12px; animation: speaking-wave 900ms ease-in-out infinite; }
.speaking-indicator__wave--two { animation-delay: 150ms; }
.speaking-indicator__wave--three { animation-delay: 300ms; }
@keyframes speaking-wave {
  0%, 100% { opacity: .2; transform: scale(.88); }
  45% { opacity: 1; transform: scale(1); }
}
.voices-heard { min-height: 18px; margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 850; }
.voices-heard.is-complete { color: var(--correct); }
.lesson-screen > .dillo--listen, .lesson-screen > .dillo--speak { position: absolute; bottom: 18px; right: 20px; }
.lesson-continue { max-width: 330px; margin-top: 14px; }
.lesson-step-button { min-height: 68px; display: grid; grid-template-columns: 46px minmax(0, auto) 28px; align-items: center; justify-content: center; gap: 10px; }
.lesson-step-button__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--brand-action); }
.lesson-step-button__icon .lesson-glyph { width: 32px; height: 32px; }
.lesson-step-button strong { font-size: 18px; font-weight: 950; letter-spacing: .4px; text-transform: uppercase; }
.lesson-step-button__arrow { font-size: 27px; font-weight: 900; line-height: 1; }
.lesson-screen > .dillo--think { margin: 6px auto -14px; }
@media (max-width: 600px) {
  .lesson-screen > .dillo--listen,
  .lesson-screen > .dillo--speak {
    position: static;
    width: 92px;
    height: 108px;
    margin: -4px 4px 0 0;
    align-self: flex-end;
  }
}
@media (max-height: 720px) {
  .lesson-screen > .dillo--listen { width: 105px; height: 122px; right: 4px; bottom: 0; }
}
.object-grid { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 6px 0 10px; }
.object-grid--context { margin-top: 34px; }
.check-it-screen .lesson-journey { margin-bottom: 24px; }
.context-speaker-choice { width: 100%; margin-top: 34px; padding: 18px 16px 20px; border: 2px solid var(--voice); border-radius: 22px; background: var(--listen-soft); }
.context-speaker-choice h2 { margin: 0 0 14px; color: var(--ink); font-size: 19px; text-align: center; }
.context-speaker-choice .family-voice-row { justify-content: center; }
.context-speaker-choice .family-voice-button { max-width: none; }
.context-speaker-choice .family-voice-button.is-speaking,
.context-family-replay .family-voice-button.is-speaking { border-color: var(--brand-action); box-shadow: 0 0 0 5px var(--brand-soft); animation: context-speaker-pulse 760ms ease-in-out infinite alternate; }
.context-family-replay { width: 100%; }
.context-family-replay .family-voice-button:disabled { opacity: .68; cursor: default; }
.object-card { position: relative; aspect-ratio: .78; min-width: 0; border-radius: 22px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 6px 0 #e8e3ea; cursor: pointer; }
.find-it-screen .object-card,
.check-it-screen .object-card { border-color: var(--line); box-shadow: 0 0 0 3px rgb(255 210 26 / 12%); filter: drop-shadow(0 10px 14px rgb(38 18 33 / 10%)); }
.object-card span { font-size: clamp(52px, 16vw, 84px); filter: drop-shadow(0 8px 8px rgb(38 18 33 / 10%)); }
.object-card img { width: 100%; height: 100%; box-sizing: border-box; padding: 8px; object-fit: contain; object-position: center; border-radius: 19px; background: var(--surface); }
.object-card.is-selected { border: 4px solid var(--brand); background: var(--brand-wash); transform: translateY(-2px); box-shadow: 0 8px 0 var(--brand-action); }
.object-card.is-correct { border-color: var(--success); background: var(--success-soft); box-shadow: 0 8px 0 var(--success); }
.object-card.is-incorrect { border-color: var(--voice); background: var(--voice-soft); box-shadow: 0 8px 0 #d5a900; }
.object-card:disabled { cursor: default; }
.object-card__result { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--success); color: white; box-shadow: 0 3px 0 rgb(0 0 0 / 12%); font-size: 18px; line-height: 1; }
.feedback { min-height: 24px; margin: 10px 0 0; color: var(--ink); font-weight: 900; }

.lesson-screen--choose .lesson-journey { margin-bottom: 0; }
.lesson-screen--choose .object-grid { margin: 0; }
.choice-feedback { width: 100%; min-height: 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border: 2px solid; border-radius: 18px; font-size: 16px; font-weight: 900; }
.choice-feedback > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 20px; line-height: 1; }
.choice-feedback--incorrect { min-height: 44px; border-color: #f1dfa0; background: #fffdf0; color: var(--ink); box-shadow: none; filter: none; transform: none; }
.choice-feedback--incorrect > span { width: 24px; height: 24px; flex-basis: 24px; background: #f5d65b; color: var(--ink); font-size: 16px; }
.choice-feedback--correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.choice-feedback--correct > span { background: var(--success); }
.choice-response { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.choice-response .choice-feedback { min-width: 0; }
.choice-response__dillo { width: 84px; height: 92px; display: grid; place-items: center; overflow: visible; }
.choice-response__dillo .dillo { width: 82px; height: 88px; margin: 0; }
.choice-response--correct .choice-response__dillo .dillo { width: 86px; height: 92px; }
.choice-next { margin-top: 0; }
.lesson-screen--choose .family-listen--replay { box-sizing: border-box; margin: 0; padding: 12px 10px 10px; border: 1px solid var(--brand-soft); border-radius: 16px; background: var(--brand-wash); }
.lesson-screen--choose .family-listen--replay h2 { margin-bottom: 5px; font-size: 11px; }
.lesson-screen--choose .family-listen--replay .family-voice-row { padding-bottom: 1px; }

@media (max-width: 430px) {
  .family-voice-row { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; gap: 7px; padding-inline: 0; overflow: visible; }
  .family-voice-row:has(> .family-voice-button:only-child) { grid-template-columns: minmax(0, 1fr); justify-content: stretch; overflow: visible; }
  .family-voice-row:has(> .family-voice-button:nth-child(2):last-child) { grid-template-columns: repeat(2, 158px); justify-content: center; overflow: visible; }
  .family-voice-button { min-height: 174px; grid-template-rows: 70px minmax(34px, auto) 38px; gap: 5px; padding: 9px 5px; }
  .family-voice-avatar { width: 68px; height: 68px; border-width: 2px; font-size: 23px; }
  .family-voice-play { width: 38px; height: 38px; }
  .family-voice-name strong { font-size: 12px; }
  .family-voice-name small { font-size: 8px; }
  .lesson-screen--choose .lesson-journey { margin-bottom: 32px; }
  .lesson-screen--choose .object-grid { margin-bottom: 24px; }
  .choice-response { grid-template-columns: minmax(0, 1fr); }
  .choice-response__dillo { width: 68px; height: 80px; }
  .choice-response__dillo .dillo,
  .choice-response--correct .choice-response__dillo .dillo { width: 72px; height: 78px; }
  .choice-next { margin-top: 20px; }
  .lesson-screen--choose .family-listen--replay { margin-top: 22px; }
}

.speaking-row { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: -12px; }
.lesson-screen--rhythm > .focus-object--medium + .speaking-row { margin-top: 40px; }
.speaking-row--inviting::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 128px;
  height: 128px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.8);
  box-shadow:
    0 0 0 15px rgb(230 0 126 / 20%),
    0 0 0 31px rgb(176 0 96 / 14%),
    0 0 0 47px rgb(255 210 26 / 18%);
  animation: mic-wave-invite 3.2s ease-out infinite;
}
.mic-button { position: relative; width: 128px; height: 128px; border-radius: 50%; border: 0; background: var(--brand-action); color: white; box-shadow: 0 8px 0 var(--brand-pressed), 0 0 0 14px rgb(230 0 126 / 10%); cursor: pointer; font-size: 0; }
.mic-button--inviting { z-index: 1; animation: mic-tap-invite 3.2s ease-in-out infinite; }
.mic-button--inviting:active { animation: none; transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 var(--brand-pressed), 0 0 0 10px rgb(230 0 126 / 10%); }
.mic-button:disabled { background: #b9b3bb; box-shadow: 0 7px 0 #8e878f, 0 0 0 14px rgb(98 87 98 / 8%); cursor: not-allowed; }
.reference-limit-note { max-width: 390px; margin: 8px auto 2px; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.4; text-align: center; }
.mic-button::before { content: ""; position: absolute; left: 50%; top: 27px; width: 32px; height: 52px; border: 6px solid white; border-radius: 18px; transform: translateX(-50%); }
.mic-button::after { content: ""; position: absolute; left: 50%; top: 66px; width: 52px; height: 34px; border: 6px solid white; border-top: 0; border-radius: 0 0 30px 30px; transform: translateX(-50%); }
.mic-button.is-recording { animation: pulse 1s infinite; }
.speaking-row .mic-button.is-recording { background: var(--error); box-shadow: 0 8px 0 #7d1820, 0 0 0 14px rgb(180 35 42 / 13%); animation: learner-recording-pulse 1s ease-in-out infinite; }
.mic-button.is-recording::before { top: 50%; width: 39px; height: 39px; border: 0; border-radius: 8px; background: white; transform: translate(-50%, -50%); }
.mic-button.is-recording::after { display: none; }
.speaking-row .mic-button.is-recording:active { animation: none; transform: translateY(4px) scale(.98); box-shadow: 0 4px 0 #7d1820, 0 0 0 18px rgb(180 35 42 / 11%); }
.mic-symbol { display: none; }
.recording-status { min-height: 26px; margin: 12px 0 4px; color: var(--brand-action); font-weight: 900; }
.lesson-screen--rhythm > .speaking-row + .recording-status { margin-top: 40px; }
.recording-status.is-error { max-width: 360px; padding: 10px 14px; border: 2px solid var(--voice); border-radius: 14px; background: var(--voice-soft); color: var(--ink); font-size: 13px; line-height: 1.35; }
.speak-help { width: 100%; margin: 8px auto 0; display: grid; justify-items: center; gap: 10px; }
.speak-help__toggle { min-width: 164px; min-height: 48px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 2px solid var(--brand-soft); border-radius: 999px; background: var(--surface); color: var(--brand-action); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.speak-help__toggle .lesson-glyph { width: 23px; height: 23px; flex: 0 0 23px; }
.speak-help__toggle[aria-expanded="false"] .lesson-glyph { animation: speak-help-nudge 2.8s ease-in-out infinite; }
.speak-help__toggle[aria-expanded="true"] { border-color: var(--brand-action); background: var(--brand-wash); }
.speak-help__voices { width: 100%; box-sizing: border-box; }
.speak-help__voices h2 { margin: 0 0 12px; color: var(--ink); font-size: 17px; text-align: center; }
.speak-help__voices .family-voice-row { justify-content: center; gap: 7px; padding-bottom: 5px; }
@keyframes speak-help-nudge {
  0%, 68%, 100% { transform: scale(1); }
  76% { transform: scale(1.12); }
  84% { transform: scale(.98); }
  92% { transform: scale(1.08); }
}
.hear-my-voice { margin-top: 12px; }
.retry-recording { margin: 9px 0 0; }
.speak-compare-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; }
.self-voice-section { min-width: 0; height: 100%; padding: 16px 14px 18px; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 12px; border: 2px solid var(--brand-action); border-radius: 22px; background: var(--brand-wash); }
.self-voice-section__action { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.self-voice-section__dillo { width: 54px; height: 60px; flex: 0 0 54px; display: grid; place-items: center; }
.self-voice-section__dillo .dillo { width: 54px; height: 60px; margin: 0; }
.self-voice-section__dillo .dillo * { animation: none; }
.self-voice-section h2 { margin: 0; color: var(--ink); font-size: 17px; }
.pronunciation-result { width: 100%; margin: 10px 0 2px; padding: 16px; display: grid; justify-items: center; gap: 5px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface-soft); }
.pronunciation-result small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; }
.pronunciation-result strong { font-size: 23px; }
.pronunciation-result p { margin: 0; font-size: 13px; font-weight: 850; line-height: 1.35; }
.voice-strength { min-height: 58px; display: flex; align-items: flex-end; justify-content: center; gap: 9px; }
.voice-strength i { width: 19px; border: 3px solid var(--line); border-radius: 999px; background: var(--surface); }
.voice-strength i:nth-child(1) { height: 18px; }
.voice-strength i:nth-child(2) { height: 27px; }
.voice-strength i:nth-child(3) { height: 36px; }
.voice-strength i:nth-child(4) { height: 45px; }
.voice-strength i:nth-child(5) { height: 54px; }
.voice-strength i.is-filled { border-color: #c89600; background: var(--voice); }
.pronunciation-result.is-retry .voice-strength i.is-filled,
.pronunciation-result.is-different .voice-strength i.is-filled { border-color: var(--brand-pressed); background: var(--brand-action); }
.pronunciation-result.is-pass .voice-strength i.is-filled { border-color: #0d6340; background: var(--success); }
.pronunciation-result.is-pass { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.pronunciation-result.is-retry { border-color: var(--voice); background: var(--voice-soft); }
.pronunciation-result.is-different { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand-action); }
.pronunciation-result.is-unavailable { background: var(--listen-soft); color: var(--listen); }
.pronunciation-result.is-checking { min-height: 104px; justify-content: center; color: var(--listen); }
.pronunciation-result:not(.is-checking) { grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.pronunciation-result__dillo { width: 74px; height: 82px; display: grid; place-items: center; align-self: end; }
.pronunciation-result__dillo .dillo { width: 74px; height: 82px; margin: 0; animation: result-dillo-arrive .62s ease-out both; }
.pronunciation-result__dillo .dillo * { animation: none; }
.pronunciation-result__feedback { min-width: 0; flex: 1; display: grid; justify-items: center; gap: 6px; }
.pronunciation-result__feedback p { margin: 0; }
.voice-checking { height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.voice-checking i { width: 8px; height: 12px; border-radius: 999px; background: var(--voice); animation: voice-checking-wave .8s ease-in-out infinite alternate; }
.voice-checking i:nth-child(2), .voice-checking i:nth-child(4) { animation-delay: -.2s; }
.voice-checking i:nth-child(3) { animation-delay: -.4s; }
.voice-checking i:nth-child(5) { animation-delay: -.1s; }
.speak-family-voices { min-width: 0; width: 100%; display: grid; justify-items: center; gap: 12px; }
.speak-family-voices h2 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.25; }
.speak-family-voices > .family-voice-row { width: 100%; }
.speak-family-voice { box-sizing: border-box; width: 158px; min-width: 158px; min-height: 174px; flex: 0 0 158px; padding: 10px 8px; display: grid; grid-template-rows: 72px minmax(32px, auto) 38px; justify-items: center; align-content: center; gap: 6px; border: 2px solid var(--brand-soft); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--brand-soft); text-align: center; scroll-snap-align: start; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.speak-family-voice:hover { border-color: var(--brand); background: var(--brand-wash); transform: translateY(-1px); }
.speak-family-voice:focus-visible { outline: 4px solid var(--voice); outline-offset: 3px; }
.speak-family-voice:active { box-shadow: 0 2px 0 var(--brand-soft); transform: translateY(2px); }
.speak-family-voice.is-selected { border-color: var(--brand-action); box-shadow: 0 0 0 3px var(--brand-soft); }
.speak-family-voice__avatar { width: 70px; height: 70px; flex: 0 0 70px; border: 2px solid var(--brand-soft); border-radius: 50%; overflow: hidden; }
.speak-family-voice__avatar img { width: 100%; height: 100%; object-fit: cover; }
.speak-family-voice > span { min-width: 0; max-width: 100%; display: grid; justify-items: center; gap: 2px; }
.speak-family-voice strong { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.speak-family-voice small { overflow-wrap: anywhere; color: var(--brand-action); font-size: 9px; font-weight: 850; line-height: 1.2; }
.speak-family-voice .family-voice-play { width: 38px; height: 38px; }
.learner-voice-replay { min-width: 0; min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 2px solid var(--brand-action); border-radius: 18px; background: var(--surface); color: var(--brand-action); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
@media (max-width: 600px) {
  .speak-help { margin-top: 5px; gap: 7px; }
  .speak-help__toggle { min-height: 44px; padding: 7px 14px; font-size: 13px; }
  .speak-help__voices .family-voice-row { justify-content: center; }
  .lesson-screen--rhythm:has(.speak-compare-grid) { gap: 14px; }
  .speak-compare-grid { grid-template-columns: 1fr; gap: 9px; }
  .self-voice-section,
  .speak-family-voices { height:auto; gap:7px; }
  .self-voice-section { height:auto; padding:10px 12px; gap:7px; border-radius:18px; }
  .self-voice-section h2,
  .speak-family-voices h2 { font-size:14px; }
  .self-voice-section__action { gap:7px; }
  .self-voice-section__dillo,
  .self-voice-section__dillo .dillo { width:40px; height:44px; flex-basis:40px; }
  .learner-voice-replay { min-height:48px; flex: 1; padding:7px 10px; font-size:13px; }
  .speak-family-voices > .family-voice-row { justify-content:center; gap:7px; }
  .speak-family-voice { min-height:164px; padding:8px; border-radius:15px; }
  .speak-family-voice__avatar { width:64px; height:64px; flex-basis:64px; border-width:2px; }
  .speak-continue { min-height:70px; }
}
.speak-retry-button { min-height: 58px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--brand-soft); background: var(--surface); color: var(--brand-action); box-shadow: none; font-size: 16px; }
.speak-retry-button .ui-icon { width: 25px; height: 25px; }
.speak-continue { min-height: 82px; }
.speak-continue__dillo { width: 58px; height: 62px; display: grid; place-items: center; }
.speak-continue__dillo .dillo { width: 58px; height: 62px; margin: 0; }
.speak-continue__dillo .dillo * { animation: none; }
.speak-continue__copy { display: grid; justify-items: start; gap: 1px; line-height: 1; }
.speak-continue__copy small { font-size: 10px; font-weight: 850; letter-spacing: .8px; }
.speak-continue__copy strong { font-size: 23px; }
.learner-voice-replay:active,
.speak-family-voice:active { transform: translateY(2px); }
.checking-dot { width: 15px; height: 15px; border: 3px solid var(--listen-soft); border-top-color: var(--listen); border-radius: 50%; animation: checking-spin .8s linear infinite; }
@keyframes checking-spin { to { transform: rotate(360deg); } }
@keyframes context-speaker-pulse { to { box-shadow: 0 0 0 9px rgb(230 0 126 / 12%); } }
@media (prefers-reduced-motion: reduce) {
  .speaking-indicator__wave { animation: none; opacity: 1; }
  .context-speaker-choice .family-voice-button.is-speaking,
  .context-family-replay .family-voice-button.is-speaking { animation: none; }
}
@keyframes voice-checking-wave { to { height: 38px; background: var(--brand-action); } }
@keyframes result-dillo-arrive {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  58% { opacity: 1; transform: translateY(-3px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse { 50% { box-shadow: 0 8px 0 var(--brand-pressed), 0 0 0 28px rgb(230 0 126 / 8%); } }
@keyframes learner-recording-pulse { 50% { box-shadow: 0 8px 0 #7d1820, 0 0 0 27px rgb(180 35 42 / 10%); } }
@keyframes mic-tap-invite {
  0%, 8%, 38%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 0 var(--brand-pressed), 0 0 0 14px rgb(230 0 126 / 10%);
  }
  13% {
    transform: translateY(5px) scale(.98);
    box-shadow: 0 3px 0 var(--brand-pressed), 0 0 0 12px rgb(230 0 126 / 13%);
  }
  20% { transform: translateY(0) scale(1.035); box-shadow: 0 8px 0 var(--brand-pressed), 0 0 0 14px rgb(230 0 126 / 10%); }
}
@keyframes mic-wave-invite {
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(.78); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(.92); }
  42% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
  43%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.78); }
}
.gentle-prompt { color: var(--muted); font-weight: 800; margin: 26px 0; }

.celebrate-screen { padding-top: 28px; }
.celebrate-screen .lesson-journey { margin-bottom: 0; }
.confetti { color: var(--maize); font-size: 28px; letter-spacing: 12px; }
.keep-word-scene { position: relative; width: min(100%, 380px); min-height: 290px; display: grid; place-items: center; }
.keep-word-hero { position: relative; z-index: 2; width: 260px; height: 260px; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--line); border-radius: 38px; background: var(--surface); box-shadow: 0 0 0 3px rgb(255 210 26 / 12%); font-size: 180px; filter: drop-shadow(0 16px 22px rgb(38 18 33 / 14%)); animation: keep-word-arrive 900ms cubic-bezier(.2, .82, .35, 1) 3 both; }
.keep-word-hero__visual { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; }
.keep-word-hero__visual img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); min-width: 0; min-height: 0; max-width: none; max-height: none; display: block; object-fit: contain; object-position: center; border: 0; border-radius: 30px; background: transparent; box-shadow: none; }
.keep-word-sparkles { position: absolute; z-index: 1; width: 340px; height: 270px; inset: 50% auto auto 50%; color: var(--brand-action); transform: translate(-50%, -50%); pointer-events: none; }
.keep-word-sparkles i { position: absolute; width: 30px; height: 30px; display: grid; place-items: center; opacity: 0; animation: keep-sparkle-pop 800ms ease-out 3 both; }
.keep-word-sparkles i .ui-icon { width: 100%; height: 100%; }
.keep-word-sparkles i:nth-child(1) { left: 4px; top: 18px; color: var(--brand); }
.keep-word-sparkles i:nth-child(2) { right: 2px; top: 28px; color: var(--maize); animation-delay: .1s; }
.keep-word-sparkles i:nth-child(3) { left: 20px; bottom: 8px; width: 22px; height: 22px; color: var(--maize); animation-delay: .18s; }
.keep-word-sparkles i:nth-child(4) { right: 18px; bottom: 0; width: 24px; height: 24px; color: var(--brand-action); animation-delay: .26s; }
.keep-affirmation { display: flex; align-items: center; justify-content: center; gap: 12px; }
.keep-affirmation > span { width: 82px; height: 86px; display: grid; place-items: center; animation: keep-dillo-hop 3s cubic-bezier(.34, 1.4, .58, 1) infinite; }
.keep-affirmation .dillo { width: 82px; height: 86px; margin: 0; }
.keep-affirmation .dillo * { animation: none; }
.keep-affirmation h1 { margin: 0; font-size: clamp(34px, 8vw, 44px); }
.keep-promise { width: 100%; box-sizing: border-box; padding: 17px 18px 19px; display: grid; gap: 3px; border: 2px solid var(--brand-soft); border-radius: 22px; background: var(--brand-wash); box-shadow: none; line-height: 1.2; }
.keep-promise span { color: var(--ink); font-size: 16px; font-weight: 850; }
.keep-promise strong { color: var(--brand-action); font-size: clamp(20px, 5vw, 25px); }
.celebrate-screen > .primary-button { margin-top: 2px; }
.keep-action-button .lesson-step-button__arrow { font-size: 36px; }
.keep-action-button--next { grid-template-columns: minmax(0, auto) 40px; }
@keyframes keep-word-arrive {
  0%, 18% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-10px) scale(1.02); }
  72% { transform: translateY(2px) scale(.995, 1.005); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes keep-sparkle-pop {
  0%, 18% { opacity: 0; transform: scale(.35) rotate(-20deg); }
  48%, 64% { opacity: 1; transform: scale(1.05) rotate(8deg); }
  100% { opacity: 0; transform: scale(.75) rotate(14deg); }
}
@keyframes keep-dillo-hop {
  0%, 16%, 58%, 100% { transform: translateY(0) rotate(0); }
  29% { transform: translateY(-8px) rotate(-2deg); }
  43% { transform: translateY(1px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .keep-word-hero, .keep-word-sparkles i, .keep-affirmation > span { animation: none; }
  .keep-word-sparkles i { opacity: 0; }
}
.session-complete-screen { justify-content: center; }
.session-complete-screen .dillo { margin: 4px 0 6px; }
.session-complete-screen h1 { max-width: 390px; margin-bottom: 9px; }
.session-complete-screen > p { color: var(--muted); font-weight: 800; }
.session-summary { width: 100%; margin: 18px 0 14px; padding: 22px; display: grid; gap: 14px; border: 2px solid var(--voice); border-radius: 26px; background: var(--voice-soft); }
.session-summary > strong { font-size: 23px; }
.session-summary > span { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.session-summary b { padding: 10px; border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 13px; }

.collection-screen h1 { text-align: center; margin: 12px 0 24px; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collection-card { position: relative; min-height: 145px; border: 2px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 6px 0 #e8e3ea; cursor: pointer; }
.collection-card > span { font-size: 64px; }
.collection-card > img { width: 100%; height: 145px; object-fit: contain; border-radius: 21px; background: var(--surface); }
.collection-card b { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; right: 10px; bottom: 10px; background: var(--listen); color: white; border-radius: 50%; font-size: 12px; }
.collection-card.is-new { border-color: var(--voice); box-shadow: 0 0 0 5px rgb(255 210 26 / 22%), 0 6px 0 #c89600; }
.collection-card.is-locked { filter: grayscale(.75); opacity: .48; box-shadow: none; }
.collection-note { margin: 18px 0 -6px; display: flex; align-items: center; justify-content: center; }
.collection-note .dillo { transform: scale(.72); margin: -22px -15px -25px -35px; }
.collection-note p { margin: 0; max-width: 210px; color: var(--ink); font-weight: 900; }

.workshop-screen { text-align: center; }
.lock-mark { width: 58px; height: 58px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 18px; background: var(--brand-action); color: white; font-size: 26px; }
.lock-mark.teach-family-mark { width: 72px; height: 72px; padding: 0; border-radius: 50%; background: transparent; }
.lock-mark.teach-family-mark img { width: 100%; height: 100%; display: block; }
.workshop-screen h1 { margin-bottom: 10px; }
.workshop-intro { line-height: 1.45; font-weight: 700; color: var(--muted); }
.workshop-card { padding: 18px; background: var(--surface); border: 2px solid var(--line); border-radius: 26px; margin: 18px 0; text-align: left; }
.workshop-card h2 { font-size: 20px; }
.role-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.role-row .avatar { width: 44px; height: 44px; font-size: 16px; }
.role-row b { color: var(--listen); font-size: 12px; background: var(--listen-soft); padding: 7px 9px; border-radius: 999px; }
.workshop-roles-card { padding: 0; overflow: hidden; }
.workshop-roles-card > summary { min-height: 76px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.workshop-roles-card > summary::-webkit-details-marker { display: none; }
.workshop-roles-card > summary > span { display: grid; gap: 3px; }
.workshop-roles-card > summary strong { font-size: 18px; }
.workshop-roles-card > summary small { color: var(--muted); font-size: 11px; font-weight: 800; }
.workshop-roles-card > summary > b { color: var(--brand-action); font-size: 22px; transition: transform .18s ease; }
.workshop-roles-card:not([open]) > summary > b { transform: rotate(-90deg); }
.workshop-role-groups { display: grid; gap: 12px; padding: 0 12px 14px; }
.workshop-household { box-shadow: none; }
.workshop-household.is-own { border-color: var(--brand-action); }
.workshop-household.is-own summary { background: var(--brand-wash); }
.workshop-role-row { min-height: 58px; padding: 8px 4px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.workshop-role-row:first-child { border-top: 0; }
.workshop-role-row.is-child { padding-left: 18px; grid-template-columns: 32px minmax(0, 1fr) auto; }
.workshop-role-row .avatar { width: 36px; height: 36px; font-size: 12px; }
.workshop-role-row.is-child .avatar { width: 30px; height: 30px; background: var(--voice-soft); }
.workshop-role-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.workshop-role-row strong { font-size: 13px; }
.workshop-role-row small { color: var(--muted); font-size: 9px; font-weight: 750; }
.workshop-role-row > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.workshop-role-row b { padding: 4px 7px; border-radius: 999px; background: var(--listen-soft); color: var(--listen); font-size: 8px; }
.workshop-role-row.is-child b { background: var(--voice-soft); color: var(--ink); }
.workshop-other-members { overflow: hidden; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); }
.workshop-other-members h3 { margin: 0; padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.workshop-other-members .workshop-role-row { margin: 0 12px; }
.workshop-card--sage { display: flex; align-items: center; gap: 14px; background: var(--success-soft); border-color: #a9d5c2; }
.workshop-card--sage div, .workshop-card--sage > span:nth-child(2) { display: flex; flex-direction: column; }
.workshop-card--sage small { margin-top: 5px; color: var(--muted); }
.workshop-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: white; }
.privacy-panel { padding: 14px; background: var(--listen-soft); color: var(--listen); border-radius: 18px; font-size: 13px; font-weight: 900; line-height: 1.4; }
.circle-privacy-note { margin: 18px 0 4px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 850; }
.workshop-card--button { width: 100%; color: inherit; font: inherit; cursor: pointer; }
.workshop-card--button > span:nth-child(2) { flex: 1; text-align: left; }
.workshop-card--button > b { color: var(--brand-action); font-size: 24px; }
.workshop-waiting-count { display: inline-block; margin-left: 5px; color: var(--brand-action); font-style: normal; font-weight: 900; white-space: nowrap; }
.request-workshop-card { display: flex; align-items: center; gap: 14px; }
.request-workshop-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; text-align: left; }
.request-workshop-card small { margin-top: 5px; color: var(--muted); }
.teach-new-word-card { display: flex; align-items: center; gap: 14px; background: var(--brand-wash); border-color: var(--brand-soft); }
.needs-home-entry { display: flex; align-items: center; gap: 14px; border-color: var(--voice); background: var(--voice-soft); }
.needs-home-entry > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.needs-home-entry > span:nth-child(2) :is(strong, small) { display: block; }
.needs-home-entry > span:nth-child(2) small { color: var(--muted); line-height: 1.25; }
.needs-home-list { display: grid; gap: 11px; }
.needs-home-card { width: 100%; min-height: 84px; padding: 10px 12px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.needs-home-card.is-selected { border-color: var(--brand-action); background: var(--brand-wash); }
.needs-home-card > :is(.canonical-object-image, span:first-child) { width: 62px; height: 62px; min-width: 0; min-height: 0; display: grid; place-items: center; border-radius: 14px; background: var(--surface); object-fit: contain; object-position: center; overflow: hidden; }
.needs-home-card > span { display: grid; gap: 3px; }
.needs-home-card strong { font-size: 18px; }
.needs-home-card small { color: var(--muted); font-weight: 750; }
.needs-home-card > b { color: var(--brand-action); font-size: 22px; }
.home-organizer { margin-bottom: 18px; padding: 16px; display: grid; gap: 10px; border: 2px solid var(--brand-action); border-radius: 24px; background: var(--brand-wash); }
.home-organizer__word { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 13px; }
.home-organizer__word > :is(.canonical-object-image, span:first-child) { width: 72px; height: 72px; min-width: 0; min-height: 0; display: grid; place-items: center; border-radius: 16px; background: var(--surface); object-fit: contain; object-position: center; overflow: hidden; }
.home-organizer__word span { display: grid; gap: 3px; }
.home-organizer__word small { color: var(--brand-action); font-weight: 850; }
.home-organizer__word strong { font-size: 22px; }
.home-organizer > label { font-size: 13px; font-weight: 900; }
.home-organizer select, .home-organizer input { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; }
.home-organizer .primary-button { margin-top: 5px; }
.home-organizer .text-button { margin: 5px 0 0; }
.teach-new-word-card .workshop-card__icon { background: var(--brand-action); }
.teach-new-word-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.teach-new-word-card > span:nth-child(2) strong, .teach-new-word-card > span:nth-child(2) small { display: block; }
.teach-word-screen { display: grid; align-content: start; gap: 18px; }
.teach-word-picture { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: 23px; background: var(--surface); text-align: center; }
.teach-word-picture h2 { margin: 0; text-align: left; font-size: 19px; }
.teach-word-picture > span { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.word-world-picker { order: -1; display: grid; gap: 9px; margin: 0 0 8px; padding: 15px; border: 2px solid var(--brand-soft); border-radius: 20px; background: var(--brand-wash); text-align: left; }
.word-world-picker label { color: var(--ink); font-size: 13px; font-weight: 900; }
.word-world-picker select, .word-world-picker input { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; }
.word-world-picker small { color: var(--brand-action); font-weight: 850; }
.illustration-button { width: 100%; min-height: 52px; border: 2px solid var(--listen); border-radius: 17px; background: var(--listen-soft); color: var(--listen); font-weight: 900; cursor: pointer; }
.illustration-button:disabled { opacity: .45; cursor: default; }
.illustration-loader { min-height: 340px; padding: 32px 20px; display: grid; place-items: center; align-content: center; gap: 12px; border: 3px solid var(--brand-soft); border-radius: 30px; background: var(--brand-wash); overflow: hidden; }
.illustration-loader__orbit { position: relative; width: 112px; height: 112px; margin: 38px 0 42px; display: grid; place-items: center; border: 7px solid var(--brand-soft); border-top-color: var(--brand-action); border-right-color: var(--voice); border-radius: 50%; box-shadow: 0 0 0 38px var(--brand-soft); animation: illustration-spin 1.35s linear infinite; }
.illustration-loader__orbit span { color: var(--brand-action); font-size: 42px; animation: illustration-counter-spin 1.35s linear infinite; }
.illustration-loader__orbit i, .illustration-loader__orbit b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--voice); }
.illustration-loader__orbit i { top: -10px; left: 44px; }
.illustration-loader__orbit b { right: -7px; bottom: 16px; background: var(--brand-action); }
.illustration-loader > strong { color: var(--ink); font-size: 20px; }
.illustration-loader > small { color: var(--muted); font-size: 13px; font-weight: 800; }
.illustration-loader__bar { width: min(280px, 82%); height: 10px; border-radius: 999px; background: var(--brand-soft); overflow: hidden; }
.illustration-loader__bar span { width: 42%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brand-action), var(--voice)); animation: illustration-progress 1.6s ease-in-out infinite alternate; }
@keyframes illustration-spin { to { transform: rotate(360deg); } }
@keyframes illustration-counter-spin { to { transform: rotate(-360deg); } }
@keyframes illustration-progress { from { transform: translateX(-60%); } to { transform: translateX(200%); } }
@media (prefers-reduced-motion: reduce) {
  .illustration-loader__orbit, .illustration-loader__orbit span, .illustration-loader__bar span { animation-duration: 4s; }
}
.illustration-review, .illustration-feedback { display: grid; gap: 12px; padding-top: 4px; }
.illustration-accept { min-height: 64px; font-size: 21px; }
.illustration-reject { justify-self: center; color: var(--muted); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.illustration-feedback { padding: 16px; border: 2px solid var(--brand-soft); border-radius: 20px; background: var(--brand-wash); }
.illustration-feedback h3 { margin: 0; color: var(--ink); font-size: 18px; }
.illustration-feedback__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.feedback-chip { min-height: 44px; padding: 8px 13px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.feedback-chip.is-selected { border-color: var(--brand-action); background: var(--brand-soft); color: var(--brand-action); }
.illustration-limit { margin: 0; color: var(--muted); font-weight: 750; }
.taught-words-entry { display: flex; align-items: center; gap: 14px; border-color: var(--brand-soft); background: var(--brand-wash); }
.taught-words-entry > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.taught-words-entry > span:nth-child(2) strong, .taught-words-entry > span:nth-child(2) small { display: block; }
.taught-words-entry small { color: var(--muted); line-height: 1.3; }
.words-taught-screen .section-heading { margin-bottom: 20px; }
.taught-world-list { display: grid; gap: 14px; margin-bottom: 22px; }
.taught-world-list .world-card { margin: 0; }
.taught-search { min-height: 54px; margin: 16px 0 18px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); }
.taught-search > span { color: var(--brand-action); font-size: 25px; }
.taught-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 750; }
.taught-section { margin-bottom: 18px; padding: 14px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface); }
.taught-section__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.taught-section__heading h2 { margin: 0; color: var(--ink); font-size: 19px; }
.taught-section__heading span { min-width: 30px; padding: 5px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-action); text-align: center; font-size: 12px; font-weight: 950; }
.taught-word-list { display: grid; gap: 9px; }
.taught-word-list > p { margin: 0; padding: 13px; border-radius: 14px; background: var(--page); color: var(--muted); text-align: center; font-size: 13px; font-weight: 750; }
.taught-word-card { width: 100%; min-height: 72px; padding: 9px 11px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--ink); text-align: left; }
.taught-word-card > img { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: var(--surface); }
.taught-word-card > span:first-child { width: 52px; display: grid; place-items: center; font-size: 38px; }
.taught-word-card > span:nth-child(2) { display: grid; gap: 3px; }
.taught-word-card strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 16px; }
.taught-word-card strong > b { font: inherit; text-transform: capitalize; }
.taught-word-card__written { color: var(--brand-action); font-size: 13px; font-style: normal; font-weight: 850; text-transform: none; }
.taught-word-card small { color: var(--success); font-size: 11px; font-weight: 850; }
.taught-word-card__actions { display: flex; align-items: center; gap: 7px; }
.taught-word-card__actions button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font: inherit; font-weight: 950; cursor: pointer; }
.taught-word-card__play { border: 0; background: var(--brand-action); color: white; box-shadow: 0 3px 0 var(--brand-shadow); }
.taught-word-card__delete { border: 1px solid #f3c9cd; background: #fff0f1; color: #b8202a; }
.taught-word-card__open { border: 0; background: transparent; color: var(--brand-action); font-size: 24px; }
.voice-manager-screen { display: grid; align-content: start; grid-auto-rows: max-content; gap: 16px; }
.voice-manager-concept { width: min(100%, 420px); margin: 2px auto 4px; padding: 18px; display: grid; justify-items: center; gap: 10px; border: 2px solid var(--brand-soft); border-radius: 28px; background: var(--brand-wash); box-shadow: 0 6px 0 var(--card-shadow); text-align: center; }
.voice-manager-concept > img { width: min(100%, 280px); height: min(280px, 64vw); border-radius: 24px; object-fit: contain; }
.voice-manager-concept > span { min-height: 250px; display: grid; place-items: center; font-size: 180px; }
.voice-manager-concept small { font-size: 14px; }
.voice-manager-concept h2 { margin: 2px 0 0; color: var(--ink); font-size: 34px; line-height: 1; text-transform: capitalize; }
.voice-manager-written-form { display: block; margin-top: 8px; color: var(--brand-action); font-weight: 900; text-transform: none; }
.voice-manager-writing { display: grid; }
.voice-manager-writing .written-form-action { border-width: 2px; box-shadow: 0 4px 0 var(--card-shadow); }
.voice-manager-current, .voice-manager-candidate { padding: 18px; display: grid; gap: 14px; border: 2px solid var(--brand-soft); border-radius: 22px; background: var(--surface); box-shadow: 0 4px 0 var(--card-shadow); }
.voice-manager-current h2, .voice-manager-candidate h2 { margin: 0; font-size: 20px; }
.voice-manager-play { width: 100%; min-height: 68px; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 2px solid var(--brand-action); border-radius: 18px; background: var(--surface); color: var(--brand-action); font: inherit; font-weight: 900; cursor: pointer; }
.voice-manager-play > svg, .voice-manager-play > span:first-child { width: 30px; height: 30px; }
.voice-manager-play.is-speaking { background: var(--brand-wash); }
.voice-manager-hint { margin: -5px 4px 0; color: var(--muted); text-align: center; font-size: 13px; font-weight: 750; line-height: 1.4; }
.voice-manager-replace { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.voice-manager-replace__toggle { width: 100%; min-height: 62px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 900; text-align: left; cursor: pointer; }
.voice-manager-replace__toggle .ui-icon { width: 22px; height: 22px; color: var(--brand-action); transform: rotate(90deg); transition: transform 160ms ease; }
.voice-manager-replace.is-open .voice-manager-replace__toggle .ui-icon { transform: rotate(-90deg); }
.voice-manager-replace__body { padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.voice-manager-replace__body > .studio-message { text-align: center; }
.voice-manager-record { position: relative; display: grid; justify-items: center; align-items: center; gap: 24px; margin-top: 8px; padding: 24px 0 8px; }
.voice-manager-record .studio-mic, .voice-manager-record .recording-status { margin: 0; }
.voice-manager-record .recording-status { min-height: 0; }
.voice-manager-choices { display: grid; gap: 11px; }
.voice-manager-remove { justify-self: center; padding: 6px 8px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--error); font: inherit; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.voice-manager-remove .ui-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.voice-manager-danger { min-height: 40px; padding: 2px 8px; display: grid; place-items: center; border: 0; background: transparent; }
.voice-manager-screen > .studio-message { text-align: center; }
.voice-manager-screen > .studio-privacy { margin-top: 2px; }
.circle-word-list { display: grid; gap: 10px; margin-top: 20px; }
.circle-word-tools { margin-top: 24px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 270px); align-items: end; gap: 12px; border: 2px solid var(--brand-soft); border-radius: 20px; background: var(--brand-wash); }
.circle-word-tools .taught-search { width: 100%; margin: 0; background: var(--surface); }
.circle-words-category-filter { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 850; }
.circle-words-category-filter select { width: 100%; min-height: 54px; padding: 9px 42px 9px 14px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.circle-words-sort { margin: 22px 0 0 auto; width: min(100%, 290px); display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 850; }
.circle-words-sort select { width: 100%; min-height: 48px; padding: 9px 42px 9px 14px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.circle-word-categories { display: grid; gap: 14px; margin-top: 26px; }
.circle-word-category { overflow: visible; border: 2px solid var(--line); border-radius: 22px; background: var(--surface); }
.circle-word-category__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.circle-word-category__heading { width: 100%; min-height: 76px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 28px; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 20px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.circle-word-category__heading > span { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-wash); }
.circle-word-category__heading > span svg { width: 38px; height: 38px; }
.circle-word-category__heading strong { font-size: 20px; }
.circle-word-category__heading small { min-width: 32px; padding: 5px 9px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 13px; font-weight: 900; text-align: center; }
.circle-word-category__heading > b { color: var(--muted); transform: rotate(-90deg); transition: transform 160ms ease; }
.circle-word-category.is-open .circle-word-category__heading > b { transform: rotate(0); }
.circle-word-category__delete { width: 42px; height: 42px; margin-right: 13px; display: grid; place-items: center; border: 1px solid var(--error-soft); border-radius: 13px; background: var(--error-soft); color: var(--error); cursor: pointer; }
.circle-word-category__delete:disabled { border-color: var(--line); background: var(--surface-soft); color: var(--muted); cursor: not-allowed; opacity: .52; }
.circle-word-category__delete .ui-icon { width: 20px; height: 20px; }
.circle-delete-confirm { grid-column: 1 / -1; margin: 2px 0 0; padding: 12px; display: grid; gap: 7px; border: 1px solid #f1bfc3; border-radius: 14px; background: var(--error-soft); }
.circle-delete-confirm--category { margin: 0 12px 12px; }
.circle-delete-confirm strong { color: var(--ink); font-size: 12px; line-height: 1.4; }
.circle-delete-confirm p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.circle-delete-confirm > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.circle-delete-confirm__danger { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 11px; background: var(--error); color: white; font: inherit; font-size: 10px; font-weight: 950; cursor: pointer; }
.circle-word-category__body { padding: 0 12px 14px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fffafd 0, var(--surface) 88px); border-radius: 0 0 20px 20px; }
.circle-word-category__body .circle-words-sort { margin-top: 14px; }
.circle-word-category__body .circle-word-list { margin-top: 16px; }
.circle-word-category__empty { margin: 0; padding: 18px 4px 5px; color: var(--muted); font-size: 13px; font-weight: 800; text-align: center; }
.circle-word-groups { margin-top: 16px; display: grid; gap: 14px; }
.circle-word-groups .semantic-group { gap: 10px; }
.circle-word-groups .semantic-group + .semantic-group { padding-top: 10px; border-top: 1px solid var(--line); }
.circle-word-groups .circle-word-list { margin-top: 0; }
.circle-word-groups .taught-show-more { margin-top: 2px; }
.circle-word-card { position: relative; min-height: 96px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; align-items: center; gap: 11px; padding: 10px 11px 10px 13px; border: 1px solid var(--line); border-left: 4px solid var(--brand-action); border-radius: 17px; background: var(--surface); box-shadow: 0 4px 0 #eee9ef; }
.circle-word-card.is-confirming-delete { align-items: start; }
.circle-word-card.is-starter-word { border-left-color: var(--voice); }
.circle-word-card > img { width: 56px; height: 56px; object-fit: contain; border-radius: 13px; background: #fffafd; }
.circle-word-card > span:first-child { width: 56px; display: grid; place-items: center; font-size: 38px; }
.circle-word-card__body { min-width: 0; display: grid; gap: 7px; }
.circle-word-card__identity { min-width: 0; display: grid; gap: 1px; }
.circle-word-card strong { color: var(--ink); font-size: 17px; line-height: 1.1; text-transform: capitalize; }
.circle-word-card small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.circle-word-card__organize { min-width: 0; display: flex; align-items: center; gap: 9px; }
.circle-word-voices { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.canonical-classification-controls { min-width: 0; display: grid; grid-template-columns: minmax(92px, 1fr) minmax(112px, 1fr); gap: 6px; margin: 0; }
.canonical-classification-controls select { width: 100%; min-width: 0; max-width: 180px; height: 34px; padding: 5px 24px 5px 8px; border: 1px solid var(--brand-soft); border-radius: 10px; background: var(--brand-wash); color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.canonical-classification-controls select:focus-visible { outline: 3px solid var(--voice); outline-offset: 2px; }
.classification-suggestion-link { display: block; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--brand-deep); font: inherit; font-size: 12px; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.circle-word-voice { position: relative; z-index: 1; width: 38px; height: 38px; padding: 0; border: 2px solid var(--voice); border-radius: 50%; background: var(--surface); cursor: pointer; }
.circle-word-voice-avatar { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-wash); color: var(--ink); font-size: 14px; font-weight: 900; }
.circle-word-voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.circle-word-voice > b { position: absolute; right: -5px; bottom: -4px; width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand-action); color: white; }
.circle-word-voice > b svg { width: 11px; height: 11px; overflow: visible; }
.circle-word-voice::after { content: attr(data-speaker); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 5; max-width: 150px; padding: 5px 8px; border-radius: 7px; background: var(--ink); color: white; font-size: 11px; font-weight: 850; line-height: 1.1; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease; white-space: nowrap; }
.circle-word-voice:hover::after, .circle-word-voice:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.circle-word-voice:hover, .circle-word-voice:focus-visible { z-index: 4; }
.circle-word-voice:focus-visible { outline: 3px solid var(--voice); outline-offset: 2px; }
.circle-word-card .taught-word-card__delete { position: relative; z-index: 2; width: 40px; height: 40px; margin-top: 7px; display: grid; place-items: center; align-self: start; border-radius: 50%; cursor: pointer; }
.circle-word-card__protected { width: 34px; height: 34px; display: grid; place-items: center; justify-self: center; border-radius: 50%; background: var(--brand-wash); color: var(--brand-action); }
.circle-word-card__protected .ui-icon { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .circle-word-tools { grid-template-columns: 1fr; }
  .circle-word-card { grid-template-columns: 52px minmax(0, 1fr) 38px; gap: 9px; padding-left: 10px; }
  .circle-word-card > img, .circle-word-card > span:first-child { width: 50px; height: 50px; }
  .circle-word-card__organize { align-items: flex-end; }
  .canonical-classification-controls { flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .circle-word-card { grid-template-columns: 48px minmax(0, 1fr) 36px; }
  .circle-word-card > img, .circle-word-card > span:first-child { width: 46px; height: 46px; }
  .circle-word-card__organize { display: grid; grid-template-columns: 38px minmax(0, 1fr); }
  .canonical-classification-controls { grid-template-columns: 1fr; }
}
.taught-show-more { width: 100%; min-height: 48px; border: 2px solid var(--brand-soft); border-radius: 15px; background: var(--brand-wash); color: var(--brand-action); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.semantic-groups { display: grid; gap: 18px; }
.semantic-group { display: grid; gap: 10px; }
.semantic-group__heading { width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 4px 7px; border: 0; border-radius: 13px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.semantic-group__heading:hover { background: var(--brand-wash); }
.semantic-group__heading h3 { margin: 0; color: var(--ink); font-size: 18px; }
.semantic-group__heading span { min-width: 30px; padding: 5px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-action); text-align: center; font-size: 12px; font-weight: 900; }
.semantic-group__heading i { color: var(--brand-action); font-size: 22px; font-style: normal; transition: transform .18s ease; }
.semantic-group.is-open .semantic-group__heading i { transform: rotate(180deg); }
.semantic-group.is-collapsed { border-bottom: 1px solid var(--line); }
.semantic-collapse-all { justify-self: end; padding: 6px 10px; border: 0; background: transparent; color: var(--brand-action); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.taught-word-list > .semantic-group { gap: 8px; }
.taught-word-list > .semantic-group + .semantic-group { margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.illustration-message { min-height: 18px; margin: 0; color: var(--success); font-size: 10px; font-weight: 800; line-height: 1.4; }
.illustration-message.is-error { color: var(--danger); }
.spelling-suggestion { margin-top: 8px; padding: 10px 12px; display: grid; gap: 8px; border: 1px solid #e9bd55; border-radius: 14px; background: var(--voice-soft); color: var(--ink); font-size: 10px; font-weight: 800; }
.spelling-suggestion > span strong { color: var(--brand-action); }
.spelling-suggestion > div { display: flex; flex-wrap: wrap; gap: 7px; }
.spelling-suggestion button { padding: 7px 9px; border: 1px solid var(--brand-action); border-radius: 10px; background: var(--surface); color: var(--brand-action); font-size: 8px; font-weight: 900; cursor: pointer; }
.spelling-suggestion button:first-child { background: var(--brand-action); color: white; }
.learner-message-screen { position: relative; }
.learner-message-screen::after { content: ""; position: absolute; z-index: 0; width: 160px; height: 160px; right: -78px; top: 92px; border: 17px solid var(--brand-soft); border-radius: 50%; opacity: .42; pointer-events: none; }
.learner-message-screen > * { position: relative; z-index: 1; }
.learner-message-screen .inbox-heading > span { background: var(--voice); box-shadow: 0 5px 0 #c89600; }
.inbox-heading--learner h1 { color: var(--brand-action); }
.learner-message-empty { position: relative; min-height: 210px; padding: 18px 20px 18px 142px; display: flex; align-items: center; overflow: hidden; border: 3px solid var(--voice); border-radius: 28px; background: linear-gradient(145deg, var(--voice-soft), var(--brand-wash)); color: var(--ink); box-shadow: 0 7px 0 var(--brand-soft); text-align: left; }
.learner-message-empty::before { content: ""; position: absolute; width: 94px; height: 94px; right: -36px; top: -42px; border: 16px solid var(--brand-soft); border-radius: 50%; opacity: .85; }
.learner-message-empty__dillo { position: absolute; left: 2px; bottom: -9px; width: 142px; height: 175px; display: grid; place-items: end center; }
.learner-message-empty__dillo .dillo { width: 142px; height: 175px; }
.learner-message-empty > div:nth-child(2) { display: grid; gap: 8px; }
.learner-message-empty strong { color: var(--brand-action); font-size: 20px; line-height: 1.08; }
.learner-message-empty span { color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.45; }
.learner-message-empty > i { position: absolute; width: 10px; height: 10px; right: 26px; bottom: 23px; border-radius: 50%; background: var(--brand); box-shadow: 17px 0 0 var(--voice), 34px 0 0 var(--listen); }
.learner-seen-section { opacity: .84; }

/* Shared Tuki Ruki interaction language: rounded, tactile, and visibly branded. */
:is(.profile-card, .learner-nav-card, .collection-card, .workshop-card, .family-household, .notification-card, .steward-dashboard-actions button, .member-type-choice) { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
:is(.profile-card, .learner-nav-card, .collection-card, .workshop-card, .family-household, .notification-card, .steward-dashboard-actions button, .member-type-choice):hover { border-color: var(--brand-soft); }
:is(.profile-card, .learner-nav-card, .collection-card, .workshop-entry, .steward-dashboard-actions button, .member-type-choice, .primary-button, .secondary-button):active { transform: translateY(3px); box-shadow: 0 2px 0 var(--card-shadow); }

@media (max-width: 390px) {
  .brand-logo--internal { width: 88px; }
  .word-journey { grid-template-columns: 1fr; gap: 8px; }
  .word-tokens { justify-content: center; }
  .lesson-stage small { visibility: hidden; }
  .lesson-stage.is-current small { visibility: visible; }
  .learner-message-empty { min-height: 235px; padding: 124px 18px 20px; text-align: center; }
  .learner-message-empty__dillo { left: 50%; bottom: 91px; width: 118px; height: 142px; transform: translateX(-50%); }
  .learner-message-empty__dillo .dillo { width: 118px; height: 142px; }
}
.circle-manage-entry { display: flex; align-items: center; gap: 14px; background: var(--listen-soft); border-color: var(--brand-soft); }
.circle-manage-entry .workshop-card__icon { background: var(--listen); }
.circle-manage-entry > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.circle-manage-entry > span:nth-child(2) strong { display: block; color: var(--ink); }
.circle-manage-entry > span:nth-child(2) small { display: block; width: 100%; margin-top: 5px; overflow: hidden; color: var(--muted); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.circle-manager-screen { padding-bottom: 54px; }
.circle-view-tabs { margin-top: 20px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 2px solid var(--brand-soft); border-radius: 18px; background: var(--brand-wash); }
.circle-view-tabs button { min-height: 48px; padding: 8px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.circle-view-tabs button .ui-icon { width: 19px; height: 19px; }
.circle-view-tabs button.is-selected { background: var(--surface); color: var(--brand-action); box-shadow: 0 3px 0 var(--brand-soft); }
.circle-manage-view.is-hidden { display: none; }
.family-map-view { margin-top: 18px; display: grid; gap: 20px; }
.family-map-viewer { padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; border-radius: 18px; background: var(--listen-soft); color: var(--ink); font-size: 13px; font-weight: 900; }
.family-map-viewer select { width: 100%; min-height: 46px; padding: 8px 38px 8px 12px; border: 2px solid var(--voice); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 850; }
.family-map-viewpoint { width: min(100%, 220px); margin: -4px auto 0; padding: 12px 16px 14px; display: grid; justify-items: center; gap: 8px; border: 2px solid var(--brand-action); border-radius: 22px; background: var(--brand-wash); }
.family-map-viewpoint > small { color: var(--brand-action); font-size: 9px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; }
.family-map-viewpoint .family-map-avatar { width: 68px; height: 68px; border-color: var(--brand-action); }
.family-map-households { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.family-map-household { min-width: 0; padding: 16px 12px 18px; display: grid; justify-items: center; align-content: start; border: 2px solid var(--brand-soft); border-radius: 24px; background: linear-gradient(180deg, var(--surface) 0%, var(--brand-wash) 100%); }
.family-map-household h3, .family-map-group h3 { margin: 0 0 14px; color: var(--ink); font-size: 15px; text-align: center; }
.family-map-adults, .family-map-children, .family-map-group > div { width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 12px; }
.family-map-connector { width: 2px; height: 22px; margin: 4px 0; display: block; background: var(--voice); }
.family-map-person { width: 76px; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.family-map-avatar { width: 62px; height: 62px; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--voice); border-radius: 50%; background: var(--brand-wash); color: var(--brand-action); font-size: 22px; font-weight: 950; }
.family-map-avatar img { width: 100%; height: 100%; object-fit: cover; }
.family-map-person strong { width: 100%; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.family-map-person small { color: var(--brand-action); font-size: 9px; font-weight: 900; line-height: 1.15; }
.family-map-group { padding: 16px; border-radius: 22px; background: var(--surface-soft); }
.family-map-group.is-siblings { border: 2px solid var(--voice); background: linear-gradient(180deg, var(--listen-soft), var(--brand-wash)); }
.family-map-group.is-extended { border: 2px solid var(--voice); background: var(--listen-soft); }
.family-map-group.is-friends { border: 2px solid var(--brand-soft); background: var(--brand-wash); }
.family-map-group.is-unconnected { border: 2px dashed var(--line); background: var(--surface); }
.family-map-group > p { margin: -7px auto 14px; max-width: 360px; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.35; text-align: center; }
.circle-title { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.circle-title > span { width: 62px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 20px; background: var(--brand-action); color: white; font-size: 32px; }
.circle-title small { color: var(--muted); font-size: 11px; font-weight: 900; }
.circle-title h1 { margin: 2px 0 3px; font-size: 34px; }
.circle-title p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.migration-proof { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #a9d5c2; border-radius: 15px; background: var(--success-soft); color: var(--success); }
.migration-proof strong { font-size: 13px; }
.migration-proof span { color: var(--muted); font-size: 10px; font-weight: 800; }
.circle-member-success { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 2px solid #16845d; border-radius: 16px; background: #e8f7f1; color: #116f50; }
.circle-member-success .ui-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.circle-member-list, .invite-builder, .invitation-result, .child-builder { margin-top: 20px; padding: 18px; border: 2px solid var(--line); border-radius: 25px; background: var(--surface); }
.circle-member-list h2, .invite-builder h2, .invitation-result h2, .child-builder h2 { margin-bottom: 12px; font-size: 20px; }
.circle-member { min-height: 61px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.circle-member .avatar { width: 40px; height: 40px; font-size: 15px; }
.circle-member > div { display: grid; gap: 2px; }
.circle-member small { color: var(--muted); font-size: 10px; font-weight: 800; }
.circle-member > b { padding: 5px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-size: 9px; }
.member-type-picker { margin-top: 20px; display: grid; gap: 10px; }
.member-type-picker h2 { margin: 0 0 2px; font-size: 20px; }
.member-type-choice { width: 100%; min-height: 78px; padding: 13px 15px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: 0 4px 0 #e8e3ea; text-align: left; cursor: pointer; }
.member-type-choice > span:first-child { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--brand-wash); color: var(--brand-action); font-size: 23px; }
.member-type-choice > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.member-type-choice strong { font-size: 16px; }
.member-type-choice small { color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.3; }
.member-type-choice > b { color: var(--brand-action); font-size: 20px; }
.member-type-choice.is-selected { border-color: var(--brand-action); background: var(--brand-wash); box-shadow: 0 5px 0 var(--brand-soft); }
.circle-manager-screen > .member-type-choice { margin-top: 20px; }
.circle-manage-view .member-type-picker { margin-top: 24px; }
.circle-manage-view .member-type-picker h2 { color: var(--ink); }
.circle-manage-view .member-type-choice:first-of-type { border-color: var(--brand-soft); background: linear-gradient(90deg, var(--brand-wash), var(--surface)); }
.circle-manage-view .member-type-choice:first-of-type > span:first-child { background: var(--brand-soft); color: var(--brand-action); }
.circle-manage-view .member-type-choice:nth-of-type(2) { border-color: #e9bd55; background: linear-gradient(90deg, var(--voice-soft), var(--surface)); }
.circle-manage-view .member-type-choice:nth-of-type(2) > span:first-child { background: var(--voice); color: var(--ink); }
.invite-builder > label, .child-builder > label, .invitation-accept-screen > label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 900; text-align: left; }
.invite-builder input, .invite-builder select, .child-builder input, .child-builder select, .invitation-accept-screen input { width: 100%; min-height: 52px; padding: 10px 44px 10px 14px; border: 2px solid var(--line); border-radius: 16px; background-color: var(--surface); color: var(--ink); font: inherit; font-weight: 750; }
.invite-builder input, .child-builder input, .invitation-accept-screen input { padding-right: 14px; }
.invite-builder select, .child-builder select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand-action) 50%), linear-gradient(135deg, var(--brand-action) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.invite-builder { display: grid; gap: 14px; }
.child-builder { display: grid; gap: 13px; }
.child-builder .primary-button { margin-top: 2px; }
.invite-builder .primary-button { margin-top: 2px; }
.invite-builder fieldset { margin: 0; padding: 0; border: 0; }
.invite-builder legend { margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 900; }
.connection-choices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.connection-choice { width: 100%; min-height: 48px; padding: 9px 12px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; font-size: 12px; font-weight: 850; cursor: pointer; }
.connection-choice > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-soft); color: var(--brand-action); }
.connection-choice > span .ui-icon { width: 17px; height: 17px; }
.connection-choice.is-selected { border-color: var(--brand-action); background: var(--brand-wash); color: var(--brand-action); }
.connection-choice.is-selected > span { background: var(--brand-soft); }
@media (max-width: 430px) {
  .migration-proof { align-items: flex-start; flex-direction: column; gap: 3px; }
  .family-map-viewer { grid-template-columns: 1fr; gap: 7px; }
  .family-map-households { grid-template-columns: 1fr; }
  .family-map-household { padding-inline: 10px; }
  .family-map-avatar { width: 56px; height: 56px; }
  .family-map-person { width: 70px; }
  .connection-choices > div { grid-template-columns: 1fr; }
  .steward-member-row { grid-template-columns: 46px minmax(0, 1fr); }
  .steward-role-chips, .steward-row-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .circle-title { align-items: flex-start; }
  .circle-title > span { width: 52px; height: 52px; border-radius: 17px; font-size: 27px; }
  .circle-title h1 { font-size: 29px; overflow-wrap: anywhere; }
  .migration-proof { align-items: flex-start; flex-direction: column; gap: 4px; }
  .circle-view-tabs button { padding-inline: 7px; font-size: 11px; }
  .steward-member-row { grid-template-columns: 38px minmax(0, 1fr); }
  .steward-member-row.is-child { grid-template-columns: 32px minmax(0, 1fr); }
  .steward-role-chips { grid-column: 2; justify-content: flex-start; max-width: none; }
  .steward-row-actions { grid-column: 2; justify-content: flex-start; }
}
.adult-connection-choices > div { display: flex; flex-wrap: wrap; gap: 8px; }
.adult-connection-choice { min-height: 44px; padding: 6px 12px 6px 7px; display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; cursor: pointer; }
.adult-connection-choice .avatar { width: 30px; height: 30px; font-size: 11px; }
.adult-connection-choice.is-selected { border-color: var(--brand-action); background: var(--brand-wash); color: var(--brand-action); }
.role-choice { min-height: 46px; margin-right: 7px; padding: 8px 15px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; }
.role-choice.is-selected { border-color: var(--brand-action); background: var(--brand-wash); color: var(--brand-action); }
.avatar-style-choices { margin: 0; padding: 14px; border: 2px solid var(--line); border-radius: 18px; text-align: left; }
.avatar-style-choices legend { padding: 0 6px; color: var(--ink); font-size: 13px; font-weight: 900; }
.avatar-style-choices p { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.avatar-style-choices > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.avatar-style-choice { min-height: 48px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 850; cursor: pointer; }
.avatar-style-choice.is-selected { border-color: var(--brand-action); background: var(--brand-wash); color: var(--brand-action); box-shadow: 0 4px 0 var(--brand-soft); }
.child-builder label small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.circle-fine-print, .invitation-result > p { margin: 12px 0 0; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.4; text-align: center; }
.invitation-result { border-color: var(--voice); background: var(--voice-soft); text-align: center; }
.invitation-delivery-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invitation-delivery-tabs button { min-height: 50px; padding: 8px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); font-size: 12px; font-weight: 900; cursor: pointer; }
.invitation-delivery-tabs button.is-selected { border-color: var(--brand-action); color: var(--brand-action); }
.invitation-link { margin-top: 13px; padding: 10px; display: grid; gap: 9px; border-radius: 14px; background: var(--surface); }
.invitation-link span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.invitation-link button { min-height: 44px; border: 0; border-radius: 12px; background: var(--brand-wash); color: var(--brand-action); font-weight: 950; cursor: pointer; }
.invitation-qr { width: min(100%, 300px); height: auto; margin: 14px auto 0; display: block; border: 12px solid var(--surface); border-radius: 18px; }
.active-invite-count { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 11px; font-weight: 850; }
.active-invitations { margin-top: 18px; }
.active-invitations h2 { margin-bottom: 8px; font-size: 18px; }
.active-invitations > div { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.active-invitations span { display: grid; gap: 2px; }
.active-invitations small { color: var(--muted); font-size: 10px; font-weight: 800; }
.active-invitations button { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 11px; background: var(--error-soft); color: var(--error); font-size: 10px; font-weight: 950; cursor: pointer; }
.invitation-accept-screen { justify-content: flex-start; gap: 22px; padding-top: 12px; padding-bottom: 48px; }
.invitation-welcome { width: min(100%, 420px); padding: 18px 18px 22px; display: grid; justify-items: center; gap: 10px; border: 2px solid var(--brand-soft); border-radius: 28px; background: linear-gradient(180deg, var(--surface) 0%, var(--brand-wash) 100%); box-shadow: 0 7px 0 var(--brand-soft); }
.invitation-welcome .dillo { width: 128px; height: 146px; margin: -3px auto -9px; }
.invitation-welcome .privacy-pill { margin: 0; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--brand-soft); background: var(--surface); }
.invitation-welcome .privacy-pill .ui-icon { width: 17px; height: 17px; }
.invitation-welcome h1 { max-width: 100%; margin: 0; font-size: clamp(34px, 9vw, 48px); line-height: 1; overflow-wrap: anywhere; }
.invitation-welcome > p { max-width: 330px; margin: 2px 0 0; color: var(--muted); font-size: 15px; font-weight: 800; line-height: 1.4; }
.invitation-accept-card { width: min(100%, 420px); padding: 20px; display: grid; gap: 20px; border: 2px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 7px 0 #e8e3ea; text-align: left; }
.invitation-fields { display: grid; gap: 17px; }
.invitation-fields label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 900; }
.invitation-fields label small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.4; }
.invitation-accept-card .avatar-style-choices { padding: 16px; border-color: var(--brand-soft); background: var(--brand-wash); }
.invitation-access-fields { padding-top: 18px; display: grid; gap: 14px; border-top: 2px solid var(--brand-soft); }
.invitation-access-fields h2 { margin: 0; font-size: 20px; text-align: center; }
.invitation-access-fields label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 900; }
.invitation-access-fields > small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.4; }
.invitation-accept-action { width: 100%; min-height: 66px; margin: 0; font-size: clamp(20px, 6vw, 25px); }
.invitation-accept-card .circle-fine-print { margin: -5px 8px 0; }
.invitation-accept-card .studio-message { min-height: 0; margin: 0; text-align: center; }
@media (max-width: 520px) {
  .invitation-accept-screen { gap: 18px; padding: 8px 16px 40px; }
  .invitation-welcome { padding: 14px 14px 19px; border-radius: 24px; }
  .invitation-welcome .dillo { width: 110px; height: 126px; }
  .invitation-welcome h1 { font-size: clamp(32px, 11vw, 42px); }
  .invitation-welcome > p { font-size: 14px; }
  .invitation-accept-card { padding: 16px; gap: 17px; border-radius: 23px; }
}
.family-circle-entry { background: var(--listen-soft); border-color: var(--brand-soft); }
.guardian-request { margin-top: 16px; padding: 16px; display: grid; gap: 8px; border: 2px solid var(--voice); border-radius: 20px; background: var(--voice-soft); }
.guardian-request > span { font-size: 20px; font-weight: 950; }
.guardian-request > div { display: flex; gap: 8px; }
.guardian-request button { min-height: 44px; flex: 1; border: 0; border-radius: 12px; background: var(--success); color: white; font-size: 10px; font-weight: 950; cursor: pointer; }
.guardian-request button:last-child { background: var(--error-soft); color: var(--error); }

.studio-screen, .recorder-screen { padding-bottom: 46px; }
.studio-heading { display: flex; gap: 14px; align-items: center; text-align: left; }
.studio-heading .lock-mark { flex: 0 0 auto; margin: 0; }
.studio-heading h1 { font-size: 30px; margin: 0 0 5px; }
.studio-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }
.studio-progress { height: 12px; margin: 20px 0 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.studio-progress span { display: block; height: 100%; border-radius: inherit; background: var(--voice); transition: width .25s ease; }
.studio-progress-label { display: block; text-align: center; color: var(--ink); font-size: 13px; }
.studio-screen > h2 { font-size: 19px; margin: 22px 0 12px; }
.studio-search { margin-top: 0; }
.studio-worlds { display: grid; gap: 12px; }
.studio-world { overflow: hidden; border: 2px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: 0 5px 0 #e8e3ea; }
.studio-world__heading { width: 100%; min-height: 78px; padding: 12px 15px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; background: var(--brand-wash); color: var(--ink); text-align: left; cursor: pointer; }
.studio-world__heading > span { font-size: 31px; text-align: center; }
.studio-world__heading div { min-width: 0; }
.studio-world__heading h3 { margin: 0 0 3px; font-size: 19px; }
.studio-world__heading small { color: var(--muted); font-size: 10px; font-weight: 850; line-height: 1.35; }
.studio-world__heading i { color: var(--brand-action); font-size: 25px; font-style: normal; transition: transform .18s ease; }
.studio-world.is-open .studio-world__heading i { transform: rotate(180deg); }
.studio-world__body { padding: 12px; }
.studio-world-sort { margin: 0 0 10px; }
.studio-world__body .semantic-groups { gap: 10px; }
.concept-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.studio-concept-wrap { min-width: 0; display: grid; gap: 8px; }
.studio-concept-wrap.is-selected { grid-column: 1 / -1; padding: 8px; border: 2px solid var(--brand); border-radius: 20px; background: var(--brand-wash); }
.concept-choice { width: 100%; min-height: 88px; padding: 9px 10px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; box-shadow: 0 4px 0 #e8e3ea; cursor: pointer; text-align: left; }
.concept-choice > span:not(.concept-choice__copy) { font-size: 34px; text-align: center; }
.concept-choice > img { width: 58px; height: 58px; object-fit: contain; border-radius: 16px; background: var(--surface); }
.concept-choice__copy { min-width: 0; display: grid; gap: 2px; }
.concept-choice strong { color: var(--ink); font-size: 15px; text-transform: capitalize; }
.concept-choice__name { min-width: 0; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.concept-choice__name em { color: var(--brand-action); font-size: 10px; font-style: normal; font-weight: 900; text-transform: none; }
.concept-choice small { color: var(--muted); font-size: 10px; font-weight: 900; }
.concept-speaker-names { max-width: 100%; overflow: hidden; color: var(--success); font-size: 9px; font-style: normal; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.concept-choice.is-selected { border-color: var(--brand); background: var(--surface); box-shadow: 0 4px 0 var(--brand-action); }
.concept-choice.is-approved { border-color: var(--success); background: var(--success-soft); }
.studio-inline-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.studio-inline-action button { min-height: 54px; padding: 10px 16px; border: 0; border-radius: 15px; background: var(--brand-action); color: white; box-shadow: 0 5px 0 var(--brand-shadow); font: inherit; font-size: 13px; font-weight: 950; cursor: pointer; }
.studio-inline-action small { max-width: 110px; color: var(--muted); font-size: 9px; font-weight: 850; line-height: 1.3; }
.studio-inline-action.is-complete { grid-template-columns: 1fr; padding: 10px; border-radius: 14px; background: var(--success-soft); color: var(--success); text-align: center; }
.studio-inline-action.is-complete small { max-width: none; }
.studio-inline-contributions { display: grid; gap: 10px; }
.independent-contribution-actions { width: min(100%, 520px); margin: 0 auto; display: grid; gap: 12px; }
.written-form-action { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--brand-soft); border-radius: 15px; background: var(--brand-wash); text-align: left; }
.written-form-action > span { min-width: 0; display: grid; gap: 2px; }
.written-form-action > span small { color: var(--muted); font-size: 9px; font-weight: 850; }
.written-form-action > span strong { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
.written-form-action .secondary-button { width: auto; min-height: 44px; margin: 0; padding: 9px 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; box-shadow: none; }
.written-form-action .secondary-button svg { width: 17px; height: 17px; }
.written-form-action--request { margin-top: 0; }
.written-form-action--recorder { margin: 8px 0 12px; }
.written-form-action--open, .written-form-action--pending { display: grid; align-items: stretch; }
.written-form-inline-editor, .written-form-inline-complete, .written-form-pending-copy { min-width: 0; display: grid; gap: 10px; }
.written-form-inline-editor > div:first-child { display: grid; gap: 3px; }
.written-form-inline-editor > div:first-child small { color: var(--brand-action); font-size: 9px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.written-form-inline-editor > div:first-child strong { color: var(--ink); font-size: 18px; }
.written-form-inline-editor p, .written-form-pending-copy p, .written-form-withdraw-confirm p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.4; }
.written-form-inline-editor label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 900; }
.written-form-inline-editor input { width: 100%; min-height: 50px; padding: 10px 13px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 19px; font-weight: 850; }
.written-form-inline-editor label small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.written-form-inline-actions, .written-form-withdraw-confirm > div { display: flex; align-items: center; gap: 9px; }
.written-form-inline-actions .primary-button { width: auto; min-height: 46px; margin: 0; padding: 9px 16px; font-size: 11px; }
.quiet-button { border: 0; background: transparent; color: var(--brand-action); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.written-form-action--pending { border-color: var(--line); background: var(--surface); }
.written-form-pending-copy small { color: var(--success); font-size: 11px; font-weight: 950; }
.written-form-pending-copy strong { width: fit-content; padding: 5px 10px; border-radius: 999px; background: var(--brand-wash); color: var(--ink); font-size: 17px; }
.written-form-action--pending > .quiet-button { justify-self: start; padding: 3px 0; }
.written-form-withdraw-confirm { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.written-form-withdraw-confirm > strong { color: var(--ink); font-size: 13px; }
.written-form-withdraw-confirm .danger-button { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 11px; background: var(--error-soft); color: var(--error); font: inherit; font-size: 9px; font-weight: 950; cursor: pointer; }
.written-form-inline-complete { justify-items: center; padding: 12px; text-align: center; }
.written-form-inline-complete > strong { color: var(--ink); font-size: 15px; }
.written-form-inline-complete > span[lang] { padding: 5px 12px; border-radius: 999px; background: var(--brand-wash); color: var(--ink); font-size: 17px; font-weight: 900; }
.written-form-inline-complete .primary-button { width: min(100%, 260px); margin: 2px 0 0; }
.written-form-inline-complete.is-passive { padding-block: 18px; }
.studio-empty { margin: 8px 0; padding: 20px; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; font-weight: 850; }
.studio-privacy { margin-top: 20px; padding: 4px 8px; background: transparent; color: var(--muted); text-align: center; font-size: 11px; font-weight: 800; }

.record-concept { min-height: 98px; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.record-concept > span { font-size: 76px; }
.record-concept > img { width: 92px; height: 92px; object-fit: contain; border-radius: 24px; background: var(--surface); }
.record-concept small { color: var(--muted); font-weight: 800; text-transform: capitalize; }
.record-concept h1 { margin: 2px 0 0; font-size: 38px; text-transform: capitalize; }
.recorder-heading { margin-bottom: 18px; }
.recorder-concept { margin-bottom: 16px; padding: 16px; border: 2px solid var(--brand-soft); border-radius: 24px; box-shadow: 0 5px 0 var(--card-shadow); }
.record-concept .recorder-written-form { display: block; margin-top: 6px; color: var(--brand-action); font-size: 14px; font-weight: 900; text-transform: none; }
.field-grid { display: grid; gap: 10px; margin-bottom: 22px; }
.field-grid label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 900; }
.field-grid label small { color: var(--muted); }
.field-grid input { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); font: inherit; font-weight: 700; }
.meaning-field { display: grid; gap: 8px; padding: 12px; border: 2px solid transparent; border-radius: 19px; }
.meaning-field.is-ai-assisted { border-color: var(--voice); background: var(--voice-soft); }
.meaning-field-heading { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meaning-field-heading label { color: var(--ink); font-size: 13px; font-weight: 900; }
.ai-assisted-badge { padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--voice); font-size: 9px; font-weight: 950; }
.meaning-input-wrap { position: relative; display: block; }
.meaning-input-wrap input { padding-right: 54px; }
.translation-wand { position: absolute; top: 50%; right: 5px; width: 44px; height: 44px; padding: 0; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.translation-wand:hover:not(:disabled), .translation-wand:focus-visible { border-color: var(--voice); background: var(--voice-soft); color: var(--ink); }
.translation-wand:disabled { opacity: .28; cursor: default; filter: grayscale(1); }
.translation-message { min-height: 19px; margin: -12px 4px 16px; color: var(--voice); text-align: center; font-size: 12px; font-weight: 850; line-height: 1.35; }
.translation-message.is-error { color: var(--error); }
.studio-mic { display: block; margin: 22px auto 24px; }
.recording-step { margin: 0 auto 8px; padding: 7px 12px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 12px; border-radius: 999px; background: var(--success-soft); text-align: center; }
.recording-step strong { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-size: 12px; }
.recording-step strong .ui-icon { width: 16px; height: 16px; }
.recording-step span { color: var(--brand-action); font-size: 10px; font-weight: 950; text-transform: uppercase; }
.recording-prompt { margin: 2px auto 9px; text-align: center; }
.recording-prompt strong { color: var(--ink); font-size: 20px; }
.recording-prompt p { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 750; }
.recording-next-direction { margin: 0 0 11px; padding: 10px; border-radius: 16px; background: var(--voice-soft); color: var(--brand-action); text-align: center; font-weight: 900; }
.variant-details { margin: 4px 0 16px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); }
.variant-details summary { padding: 13px 15px; color: var(--muted); font-size: 13px; font-weight: 850; cursor: pointer; list-style: none; }
.variant-details summary::-webkit-details-marker { display: none; }
.variant-details .field-grid { margin: 0; padding: 0 14px 14px; }
.word-ready-panel { margin: 4px 0 18px; padding: 18px 16px; display: grid; justify-items: center; gap: 14px; border: 0; border-radius: 0; background: transparent; text-align: center; }
.word-ready-completed-word { width: 100%; padding: 12px; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; border: 2px solid var(--voice); border-radius: 22px; background: var(--surface); text-align: left; }
.word-ready-completed-word > img { width: 112px; height: 106px; object-fit: contain; border-radius: 17px; background: var(--surface-soft); }
.word-ready-completed-word > span { width: 112px; height: 106px; display: grid; place-items: center; font-size: 66px; }
.word-ready-completed-word > div { min-width: 0; display: grid; gap: 3px; }
.word-ready-completed-word small { color: var(--muted); font-size: 13px; font-weight: 850; text-transform: capitalize; }
.word-ready-completed-word strong { color: var(--brand-action); font-size: 28px; line-height: 1.08; text-transform: capitalize; }
.word-ready-thanks { display: flex; align-items: center; justify-content: center; gap: 8px; }
.word-ready-thanks p { margin: 0; color: var(--ink); font-size: 20px; font-weight: 950; }
.word-ready-panel__dillo { width: 62px; height: 70px; margin: -8px 0 -10px; }
.word-ready-panel__dillo .dillo { width: 62px; height: 70px; margin: 0; }
.word-ready-panel h2 { margin: 2px 0 0; color: var(--ink); font-size: 18px; }
.word-ready-next-section { width: 100%; padding-top: 14px; display: grid; gap: 7px; border-top: 2px solid var(--brand-soft); }
.word-ready-next-section > p { margin: -3px 0 2px; color: var(--muted); font-size: 12px; font-weight: 800; }
.word-ready-panel .primary-button, .word-ready-panel .secondary-button { width: 100%; min-height: 52px; }
.word-ready-panel .primary-button { min-height: 64px; font-size: 20px; }
.word-ready-carousel { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 7px; }
.word-ready-carousel__track { min-width: 0; padding: 4px 3px 9px; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.word-ready-carousel__arrow { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 2px solid var(--brand-action); border-radius: 50%; background: var(--surface); color: var(--brand-action); cursor: pointer; }
.request-row.word-ready-choice { min-width: 112px; width: 112px; min-height: 136px; padding: 7px; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 5px; border: 2px solid var(--brand-soft); border-radius: 19px; background: var(--surface); box-shadow: 0 4px 0 var(--brand-soft); color: var(--ink); scroll-snap-align: start; text-align: center; }
.word-ready-choice__open { width: 100%; min-width: 0; padding: 0; display: grid; justify-items: center; gap: 3px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.word-ready-choice__picture { width: 96px; height: 86px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--surface-soft); }
.word-ready-choice__picture > img { width: 100%; height: 100%; object-fit: contain; }
.word-ready-choice__picture > span { font-size: 48px; }
.word-ready-choice__picture .word-ready-choice__voice { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-wash); color: var(--brand-action); }
.word-ready-choice__picture .word-ready-choice__voice .ui-icon { width: 30px; height: 30px; }
.word-ready-choice__audio { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-action); color: var(--surface); cursor: pointer; }
.word-ready-choice__audio .ui-icon, .word-ready-choice__audio .speaking-indicator { width: 21px; height: 21px; }
.request-row.word-ready-choice strong { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.request-row.word-ready-choice small { max-width: 100%; margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.word-ready-return { border-color: var(--brand-action); background: var(--surface); color: var(--brand-action); box-shadow: 0 5px 0 var(--brand-soft); }
.recorder-screen > .recording-status { display: block; text-align: center; line-height: 1.4; }
.studio-message { min-height: 18px; margin: 5px 0 9px; text-align: center; color: var(--ink); font-size: 13px; font-weight: 900; }
.contributor-identity { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 8px; margin: 0 auto 10px; padding: 5px 10px 5px 6px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.contributor-identity .avatar { width: 42px; height: 42px; }
.contributor-identity > div { display: grid; gap: 2px; }
.contributor-identity small { color: var(--muted); font-size: 10px; font-weight: 850; }
.contributor-identity strong { color: var(--ink); font-size: 14px; }
.reference-guide { margin: 1px 0 12px; padding: 12px; display: grid; gap: 4px; border: 2px solid var(--voice); border-radius: 18px; background: var(--voice-soft); }
.reference-guide.is-strong { border-color: var(--success); background: var(--success-soft); }
.reference-guide strong { font-size: 16px; }
.reference-guide span { color: var(--brand-action); font-size: 12px; font-weight: 900; }
.reference-guide p { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.speaker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.speaker-chips b { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--success); font-size: 10px; }
.takes-panel { margin-top: 4px; }
.takes-panel--guided { margin-top: 0; }
.takes-panel h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 19px; }
.takes-panel h2 span { padding: 5px 9px; border-radius: 999px; background: var(--listen-soft); color: var(--listen); font-size: 12px; }
.take-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 11px; margin-bottom: 9px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); }
.take-row.is-approved { border-color: var(--success); background: var(--success-soft); }
.take-row.is-next-step { border-color: var(--voice); box-shadow: 0 0 0 4px var(--voice-soft); }
.recording-review-heading { margin: 6px 0 12px; padding: 11px 14px; border-radius: 18px; background: var(--voice-soft); text-align: center; }
.recording-review-heading strong { color: var(--ink); font-size: 18px; }
.recording-review-heading p { margin: 4px 0 0; color: var(--brand-action); font-size: 13px; font-weight: 850; }
.record-again-button { width: 100%; min-height: 48px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--brand-action); border-radius: 16px; background: var(--surface); color: var(--brand-action); font: inherit; font-size: 13px; font-weight: 950; cursor: pointer; }
.record-again-button .ui-icon { width: 21px; height: 21px; }
.take-play { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--listen); color: white; cursor: pointer; }
.take-play .speaking-indicator { width: 26px; height: 26px; }
.take-play.is-speaking { background: var(--brand-action); }
.take-row > div:nth-child(2) { display: flex; flex-direction: column; }
.take-row small { color: var(--muted); margin-top: 3px; font-size: 10px; font-weight: 800; }
.take-row small .ui-icon { width: 13px; height: 13px; vertical-align: -2px; }
.take-actions { display: flex; gap: 5px; align-items: center; }
.take-actions button { min-height: 44px; padding: 5px 8px; border: 0; border-radius: 10px; background: var(--success-soft); color: var(--success); font-size: 9px; font-weight: 950; cursor: pointer; }
.take-actions button:last-child { background: var(--error-soft); color: var(--error); font-size: 18px; }
.take-actions__status { max-width: 132px; color: var(--success); font-size: 9px; font-weight: 950; line-height: 1.2; text-align: center; }
.empty-takes { padding: 18px; border: 2px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }

.lesson-picker-heading { display: flex; align-items: center; gap: 4px; margin: -14px 0 14px; }
.lesson-picker-heading .dillo { transform: scale(.78); margin: -8px -18px -12px -28px; }
.lesson-picker-heading h1 { margin: 0 0 6px; font-size: 31px; }
.lesson-picker-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.35; }
.learner-concept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.learner-concept { min-height: 155px; padding: 12px 8px; border: 2px solid var(--line); border-radius: 24px; display: grid; place-items: center; gap: 3px; background: var(--surface); box-shadow: 0 6px 0 #e8e3ea; cursor: pointer; }
.learner-concept > span { font-size: 62px; filter: drop-shadow(0 7px 8px rgb(38 18 33 / 10%)); }
.learner-concept > img { width: 100%; height: 82px; object-fit: contain; border-radius: 17px; background: var(--surface); }
.learner-concept strong { color: var(--ink); font-size: 17px; text-transform: capitalize; }
.learner-concept small { min-width: 38px; max-width: 100%; padding: 7px 10px; border-radius: 999px; background: var(--listen); color: white; font-size: 10px; font-weight: 950; line-height: 1.15; }
.learner-concept.is-ready { border-color: var(--voice); background: linear-gradient(180deg, var(--surface), var(--voice-soft)); }
.learner-concept.is-locked { filter: grayscale(.35); opacity: .72; cursor: pointer; box-shadow: 0 4px 0 #ded9e1; }
.learner-concept.is-locked small { background: var(--muted); }
.waiting-card { margin-top: 20px; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 22px; background: var(--listen-soft); color: var(--listen); font-weight: 900; }
.waiting-card .dillo { transform: scale(.6); margin: -34px -30px -38px -48px; }
.waiting-card p { margin: 0; }

.section-heading { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; }
.section-heading__icon { width: 60px; height: 60px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 20px; background: var(--brand-wash); font-size: 30px; }
.section-heading__icon--art { padding: 6px; }
.section-heading__icon--art img { width: 100%; height: 100%; display: block; }
.secondary-button--with-icon { display: flex; align-items: center; justify-content: center; gap: 10px; }
.secondary-button--with-icon img { width: 34px; height: 34px; flex: 0 0 auto; }
.section-heading h1 { margin: 0 0 5px; font-size: 31px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.35; }
.world-grid { display: grid; gap: 13px; }
.latest-family-card { width: 100%; min-height: 78px; margin: 0 0 18px; padding: 10px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-subtle); color: var(--ink); box-shadow: none; text-align: left; cursor: pointer; }
.latest-family-card__copy { min-width: 0; display: grid; gap: 2px; }
.latest-family-card__copy strong { font-size: 16px; font-weight: 850; line-height: 1.1; }
.latest-family-card__copy small { color: var(--muted); font-size: 10px; font-weight: 700; }
.latest-family-card__previews { display: flex; align-items: center; padding-left: 8px; }
.latest-family-card__previews i { width: 40px; height: 40px; margin-left: -8px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: 50%; background: var(--surface); font-size: 22px; font-style: normal; box-shadow: 0 2px 5px rgb(38 18 33 / 7%); }
.latest-family-card__previews i > img { width: 100%; height: 100%; object-fit: contain; }
.latest-family-card > em, .world-card__status em { padding: 5px 9px; border-radius: 999px; background: var(--brand-action); color: white; font-size: 10px; font-style: normal; font-weight: 950; white-space: nowrap; }
.latest-family-card > b { color: var(--brand-action); }
.latest-family-card > b .ui-icon { width: 22px; height: 22px; }
.world-card { width: 100%; min-height: 122px; padding: 16px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; border: 2px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 6px 0 #e8e3ea; color: var(--ink); text-align: left; cursor: pointer; }
.world-card__icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; background: var(--surface); font-size: 40px; }
.world-card__icon .canonical-art-icon { width: 64px; height: 64px; }
.world-card > i .ui-icon, .workshop-entry > b .ui-icon { width: 22px; height: 22px; }
.world-card > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.world-card strong { font-size: 21px; }
.world-card small { margin: 4px 0 9px; color: var(--muted); font-size: 11px; }
.world-card b, .world-hero b { color: var(--brand-action); font-size: 11px; }
.world-card__status { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.world-card__status em { padding: 4px 8px; }
.world-card > i { color: var(--brand-action); font-size: 24px; font-style: normal; }
.world-card--body { background: var(--brand-wash); border-color: var(--brand-soft); }
.world-card--nature { background: var(--success-soft); border-color: #a9d5c2; }
.world-card--animals { background: var(--voice-soft); border-color: var(--voice); }
.world-card--colors { background: var(--brand-wash); border-color: var(--brand-soft); }
.world-card--food { background: var(--voice-soft); border-color: var(--voice); }
.world-card--home { background: var(--listen-soft); border-color: var(--brand-soft); }
.world-card--numbers { background: var(--voice-soft); border-color: var(--voice); }
.world-card--phrases { background: var(--brand-wash); border-color: var(--brand-soft); }
.world-card[class*="world-card--world_"] { background: var(--brand-wash); border-color: var(--brand-soft); }
.latest-family-groups { display: grid; gap: 26px; }
.latest-family-group { display: grid; gap: 12px; }
.latest-family-group__heading { display: flex; align-items: center; gap: 10px; }
.latest-family-group__heading > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: var(--brand-wash); font-size: 30px; }
.latest-family-group__heading > span .canonical-art-icon { width: 48px; height: 48px; }
.latest-family-group__heading > div { display: flex; align-items: center; gap: 8px; }
.latest-family-group__heading h2 { margin: 0; font-size: 21px; }
.latest-family-group__heading small { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-weight: 900; text-align: center; }
.world-hero { min-height: 145px; margin: 0 0 20px; padding: 22px; display: flex; align-items: center; gap: 18px; border: 2px solid var(--line); border-radius: 30px; }
.world-hero > span { font-size: 62px; }
.world-hero h1 { margin: 0 0 5px; font-size: 34px; }
.world-hero p { margin: 0 0 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
.empty-world { padding: 18px; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--surface-soft); color: var(--muted); font-weight: 800; text-align: center; }
.empty-world .dillo { transform: scale(.65); margin: -28px -25px -32px -40px; }

.collection-screen .section-heading__icon--art .canonical-art-icon { width: 48px; height: 48px; display:block; }
.collection-worlds { display: grid; gap: 26px; }
.my-words-section, .next-words-section { display:grid; gap:12px; }
.my-words-section > h2, .next-words-section h2 { margin:0; color:var(--ink); font-size:21px; }
.next-words-section { margin-top:28px; padding:16px; border:2px solid var(--brand-soft); border-radius:24px; background:var(--brand-wash); }
.next-words-section p { margin:3px 0 0; color:var(--muted); font-size:12px; font-weight:800; }
.next-words-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.next-word-card { min-width:0; padding:8px; display:grid; justify-items:center; gap:6px; border:2px solid var(--line); border-radius:18px; background:var(--surface); }
.next-word-card > img { width:100%; height:76px; object-fit:contain; border-radius:12px; }
.next-word-card > span { min-height:76px; display:grid; place-items:center; font-size:48px; }
.next-word-card strong { max-width:100%; overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; text-transform:capitalize; white-space:nowrap; }
.collection-world { display: grid; gap: 10px; }
.collection-world__heading { width: 100%; min-height: 64px; padding: 4px 6px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto 44px; align-items: center; gap: 10px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.collection-world__heading:hover { background:var(--brand-wash); }
.collection-world__heading > span { width:54px; height:54px; display:grid; place-items:center; }
.collection-world__heading > span .canonical-art-icon { width:54px; height:54px; display:block; }
.collection-world__heading strong { font-size: 19px; }
.collection-world__heading small { min-width: 30px; padding: 5px 9px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-action); font-weight: 900; text-align: center; }
.collection-world__heading b { width:44px; height:44px; display:grid; place-items:center; color: var(--brand-action); }
.collection-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.collection-strip .collection-card { min-height: 92px; border-radius: 20px; }
.collection-strip .collection-card > span { font-size: 42px; }
.collection-strip .collection-card > img { height: 92px; border-radius: 17px; }
.collection-strip .collection-card b { width: 27px; height: 27px; right: 6px; bottom: 6px; font-size: 9px; }

.ask-new-button { margin-top: 18px; }
.request-screen { gap: 18px; padding-top: 14px; }
.request-screen > .dillo { margin: -18px auto -12px; }
.request-screen h1 { max-width: 430px; margin: 8px 0 2px; font-size: 31px; line-height: 1.08; }
.request-picture-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.request-guide { width: 76px; height: 88px; display: grid; place-items: center; }
.request-guide .dillo { width: 76px; height: 88px; margin: 0; }
.request-picture-actions { width: min(100%, 460px); min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.request-picture-action { min-height: 136px; padding: 16px 12px; display: grid; place-items: center; align-content: center; gap: 12px; box-sizing: border-box; border: 3px solid var(--brand-soft); border-radius: 24px; background: var(--brand-wash); color: var(--brand-action); cursor: pointer; text-align: center; }
.request-picture-action:is(button) { width: 100%; font: inherit; }
.request-picture-action:hover { border-color: var(--brand-action); }
.request-picture-action .ui-icon { width: 44px; height: 44px; }
.request-picture-action strong { font-size: 16px; line-height: 1.25; }
.request-write-action > span { font-size: 34px; font-weight: 950; line-height: 1; }
.request-compose-panel { width: min(100%, 460px); margin-top: 2px; padding: 20px; display: grid; justify-items: center; gap: 14px; box-sizing: border-box; border: 2px solid var(--brand-soft); border-radius: 24px; background: var(--brand-wash); }
.request-text-panel { justify-items: stretch; text-align: left; }
.request-text-panel textarea { width: 100%; min-height: 100px; padding: 14px 16px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; resize: vertical; }
.request-record-control { position: relative; min-height: 150px; display: grid; place-items: center; }
.request-record-control.speaking-row--inviting::before { width: 112px; height: 112px; }
.request-record-button { width: 112px; height: 112px; display: grid; place-items: center; }
.request-record-button.is-recording { background: var(--error); box-shadow: 0 8px 0 #7d1820, 0 0 0 14px rgb(180 35 42 / 13%); animation: learner-recording-pulse 1s ease-in-out infinite; }
.request-voice-panel > span { color: var(--brand-action); font-weight: 900; }
.request-voice-panel > small { color: #9a2530; font-weight: 800; text-align: center; }
.request-voice-ready { width: min(100%, 460px); margin-top: 2px; display: grid; grid-template-columns: 1fr 48px; gap: 10px; }
.request-voice-ready > button { min-height: 52px; border: 2px solid var(--brand-action); border-radius: 18px; background: var(--surface); color: var(--brand-action); font: inherit; cursor: pointer; }
.request-voice-ready > button:first-child { display: flex; align-items: center; justify-content: center; gap: 9px; }
.request-voice-ready .request-remove-voice { border-color: #efb6bd; color: #bd2834; }
.request-picture-action input,
.request-change-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.request-photo-review { width: 100%; display: grid; justify-items: center; gap: 10px; }
.request-photo-review > img { width: min(100%, 390px); height: 290px; border: 3px solid var(--brand-soft); border-radius: 28px; background: var(--surface); object-fit: contain; }
.request-photo-tools { width: min(100%, 390px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.request-photo-tools > button,
.request-change-photo { min-height: 44px; padding: 7px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--brand-soft); border-radius: 999px; background: var(--surface); color: var(--brand-action); font-size: 13px; font-weight: 900; cursor: pointer; }
.request-photo-tools > button { font: inherit; font-size: 12px; font-weight: 900; }
.request-photo-tools .ui-icon,
.request-change-photo .ui-icon { width: 21px; height: 21px; }
.request-photo-tools > button > span:first-child:not(:last-child) { font-size: 19px; font-weight: 950; }
.request-screen > .primary-button { margin-top: 0; }
.request-submit-message { min-height: 18px; margin: -2px 0 0; color: var(--brand-action); font-size: 12px; font-weight: 850; line-height: 1.35; text-align: center; }
.request-screen > .studio-privacy { margin-top: 2px; padding: 6px 10px; background: transparent; font-size: 11px; }
.request-object { width: 220px; height: 220px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 32px; background: var(--surface); overflow: hidden; }
.request-object span { font-size: 130px; }
.request-object img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.request-label { margin: 12px 0 8px; color: var(--ink); font-size: 22px; text-transform: capitalize; }
.photo-picker { width: 100%; min-height: 280px; display: grid; place-items: center; align-content: center; gap: 10px; border: 3px dashed var(--brand-soft); border-radius: 30px; background: var(--brand-wash); color: var(--brand-action); cursor: pointer; overflow: hidden; }
.photo-picker > span { font-size: 70px; }
.photo-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-picker.has-photo { display: block; border-style: solid; }
.photo-picker img { width: 100%; height: 300px; object-fit: contain; background: var(--surface); }
.request-sent-screen { justify-content: center; gap: 12px; }
.request-sent-screen .confetti { margin-bottom: -6px; }
.request-sent-screen .dillo { width: 126px; height: 142px; margin: -2px auto -16px; }
.request-sent-screen h1 { max-width: 430px; margin: 0 0 4px; font-size: 38px; line-height: 1.05; }
.request-sent-screen p { max-width: 360px; margin: 0; color: var(--ink); font-size: 18px; font-weight: 900; line-height: 1.35; }
.request-sent-text { max-width: 430px; padding: 20px 26px; border: 3px solid var(--maize); border-radius: 24px; background: var(--surface); color: var(--ink); font-size: 26px; font-weight: 950; overflow-wrap: anywhere; }
.request-sent-voice { width: min(100%, 360px); }
.request-sent-picture { position: relative; display: grid; place-items: center; }
.request-sent-image { width: 170px; height: 170px; border: 3px solid var(--voice); border-radius: 26px; background: var(--surface); object-fit: contain; box-shadow: 0 7px 0 #d5a900; }
.request-sent-picture > span { position: absolute; z-index: 2; width: 42px; height: 42px; right: -12px; bottom: -10px; display: grid; place-items: center; border: 4px solid var(--surface); border-radius: 50%; background: var(--success); color: white; box-shadow: 0 3px 0 rgb(38 18 33 / 18%); }
.request-sent-picture > span .ui-icon { width: 25px; height: 25px; stroke: currentColor; stroke-width: 3; }
.request-helpers { display: grid; justify-items: center; }
.request-helper-avatars { display: flex; justify-content: center; padding-left: 10px; }
.request-helper-avatar { width: 52px; height: 52px; margin-left: -10px; border: 3px solid var(--surface); border-radius: 50%; background: var(--brand-wash); box-shadow: 0 0 0 2px var(--brand-soft); overflow: hidden; }
.request-helper-avatar img { width: 100%; height: 100%; object-fit: cover; }
.request-ready-note { min-height: 44px; padding: 7px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: 2px solid var(--brand-soft); border-radius: 999px; background: var(--surface); color: var(--brand-action); font-size: 12px; font-weight: 900; }
.request-ready-note .ui-icon { width: 21px; height: 21px; }
.request-keep-learning { display: flex; align-items: center; justify-content: center; gap: 10px; }
.request-keep-learning .ui-icon { width: 26px; height: 26px; }
.request-list-tools { margin: 18px 0 -8px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.request-list-tools label { color: var(--muted); font-size: 11px; font-weight: 850; }
.request-list-tools select { min-height: 36px; padding: 6px 30px 6px 11px; border: 1.5px solid var(--line); border-radius: 12px; background-color: var(--surface); color: var(--ink); font: inherit; font-size: 11px; font-weight: 850; }
.request-list { display: grid; gap: 10px; margin-top: 22px; }
.request-row { width: 100%; min-height: 84px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 11px; padding: 9px 11px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); text-align: left; }
.request-row__open { min-width: 0; min-height: 62px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.request-row small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.request-row__message { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.request-row__message strong { font-size: 15px; line-height: 1.25; }
.request-row__avatar { width: 30px; height: 30px; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand-wash); box-shadow: 0 0 0 1.5px var(--brand-soft); overflow: hidden; }
.request-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.request-row__trailing { min-width: 34px; display: grid; justify-items: end; gap: 5px; }
.request-row__trailing time { color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.request-row__trailing b { color: var(--brand-action); font-size: 22px; }
.request-thumb { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 16px; background: var(--brand-wash); overflow: hidden; font-size: 34px; }
.request-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.request-row__audio { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-action); color: var(--surface); cursor: pointer; }
.request-row__audio .ui-icon, .request-row__audio .speaking-indicator { width: 24px; height: 24px; }
.request-thumb .request-row__audio { width: 52px; height: 52px; }
.request-detail-screen { text-align: center; }
.request-detail-image { width: 230px; height: 230px; margin: 2px auto 12px; display: grid; place-items: center; border-radius: 30px; background: var(--surface); border: 2px solid var(--line); overflow: hidden; font-size: 110px; }
.request-detail-image img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.request-detail-image--prompt { height: auto; min-height: 150px; padding: 24px; box-sizing: border-box; font-size: 48px; }
.request-detail-image--prompt strong { font-size: 25px; line-height: 1.25; overflow-wrap: anywhere; text-align: center; }
.request-source-voice { width: min(100%, 360px); margin: 0 auto 18px; }
.request-by { color: var(--muted); font-size: 13px; font-weight: 900; }
.request-detail-screen h1 { font-size: 30px; }
.existing-word-match { margin: 14px auto 0; padding: 16px; display: grid; gap: 12px; border: 3px solid var(--voice); border-radius: 24px; background: var(--voice-soft); text-align: left; }
.existing-word-match__preview { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 14px; }
.existing-word-match__preview > img,
.existing-word-match__preview > span { width: 82px; height: 82px; display: grid; place-items: center; object-fit: contain; border-radius: 18px; background: var(--surface); font-size: 44px; }
.existing-word-match__preview > div { min-width: 0; display: grid; gap: 3px; }
.existing-word-match__preview strong { color: var(--success); font-size: 19px; }
.existing-word-match__preview span { color: var(--ink); font-size: 17px; font-weight: 900; }
.existing-word-match__preview small { color: var(--muted); font-size: 12px; font-weight: 900; }
.existing-word-match > p { margin: 0; color: var(--ink); font-weight: 800; line-height: 1.35; }
.existing-word-match__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.existing-word-match__actions .primary-button,
.existing-word-match__actions .secondary-button { min-height: 52px; margin: 0; font-size: 13px; }
.existing-word-match__actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.existing-word-match__actions .ui-icon { width: 20px; height: 20px; }
.existing-word-match__different { min-height: 44px; grid-column: 1 / -1; border: 0; background: transparent; color: var(--brand-action); font-weight: 900; cursor: pointer; }

@media (min-width: 700px) {
  body { padding: 30px 0; }
  .app-shell { min-height: calc(100vh - 60px); border-radius: 36px; border: 8px solid var(--ink); }
  .screen { min-height: calc(100vh - 140px); }
}

@media (max-width: 600px) {
  .existing-word-match__actions { grid-template-columns: 1fr; }
  .existing-word-match__different { grid-column: auto; }
  .request-screen h1 { font-size: 27px; }
  .request-screen { gap: 14px; }
  .request-picture-step { gap: 10px; }
  .request-guide { width: 64px; height: 72px; }
  .request-guide .dillo { width: 64px; height: 72px; }
  .request-picture-actions { gap: 10px; }
  .request-picture-action { min-height: 122px; padding: 14px 8px; border-radius: 20px; }
  .request-picture-action .ui-icon { width: 38px; height: 38px; }
  .request-picture-action strong { font-size: 14px; }
  .request-photo-review > img { height: 255px; }
  .request-sent-screen { gap: 9px; }
  .request-sent-screen .dillo { width: 104px; height: 116px; margin-bottom: -12px; }
  .request-sent-screen h1 { font-size: 31px; }
  .request-sent-image { width: 148px; height: 148px; }
  .request-sent-screen p { font-size: 16px; }
}

@media (max-height: 760px) {
  .screen { padding-top: 8px; }
  .focus-object { width: 240px; height: 240px; border-width: 2px; border-radius: 30px; box-shadow: 0 0 0 3px rgb(255 210 26 / 12%); font-size: 155px; }
  .focus-object__visual img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 24px; }
  .today-card { min-height: 200px; }
  .home-screen > .dillo { transform: scale(.8); margin: -20px 0 -28px; }
}

@media (prefers-reduced-motion: reduce) {
  .dillo,
  .dillo *,
  .speaking-row--inviting::before,
  .mic-button--inviting,
  .mic-button.is-recording,
  .voice-checking i { animation: none !important; }
  .dillo__eyelid,
  .dillo__mouth-open,
  .dillo__mouth-tongue { opacity: 0 !important; }
}
/* Private adult-only pilot observation */
.observation-screen { display: grid; align-content: start; gap: 20px; width: 100%; max-width: 1040px; margin: 0 auto; }
.observation-title, .observation-heading { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--border, #ddd7e0); border-radius: 24px; background: #fff; }
.observation-title > span { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; color: #b00060; background: #ffd6ea; border-radius: 50%; }
.observation-title > div, .observation-heading > div { flex: 1; min-width: 0; }
.observation-title h1, .observation-heading h1 { margin: 0 0 6px; font-size: clamp(28px, 7vw, 40px); line-height: 1.05; overflow-wrap: anywhere; }
.observation-title p, .observation-title small, .observation-heading p { margin: 0; color: #625762; }
.observation-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.observation-filters label { display: grid; gap: 6px; font-weight: 700; color: #261221; }
.observation-filters select, .observation-filters input { min-height: 44px; width: 100%; padding: 8px 10px; border: 1px solid #ddd7e0; border-radius: 12px; background: #fff; color: #261221; }
.observation-retention { margin: -10px 0 0; color: #625762; font-size: .9rem; }
.observation-session-list { display: grid; align-content: start; gap: 12px; }
.observation-session-list h2 { margin: 0; }
.observation-session-list > button { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 16px; width: 100%; padding: 18px; text-align: left; color: #261221; background: #fff; border: 1px solid #ddd7e0; border-radius: 18px; }
.observation-session-list > button:hover { border-color: #b00060; }
.observation-session-list span { display: grid; gap: 3px; }
.observation-session-list small, .observation-session-list em { color: #625762; font-style: normal; }
.observation-heading > span { padding: 8px 12px; color: #261221; background: #ffd21a; border-radius: 999px; font-weight: 800; }
.observation-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.observation-metrics span { display: grid; gap: 4px; padding: 18px; background: #f7f7fa; border-radius: 16px; }
.observation-metrics strong { font-size: 1.6rem; }
.observation-metrics small { color: #625762; }
.observation-step-times, .observation-timeline { padding: 22px; background: #fff; border: 1px solid #ddd7e0; border-radius: 20px; }
.observation-step-times h2, .observation-timeline h2 { margin-top: 0; }
.observation-step-times > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #eee9ef; }
.observation-timeline { display: grid; gap: 0; }
.observation-timeline article { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid #eee9ef; }
.observation-timeline time { color: #625762; font-variant-numeric: tabular-nums; }
.observation-timeline article span { display: grid; gap: 3px; }
.observation-timeline article small { color: #625762; }
.observation-back { justify-self: start; min-height: 44px; padding: 8px 14px; color: #b00060; background: transparent; border: 0; font-weight: 800; }
.observation-delete { justify-self: start; }
@media (max-width: 760px) {
  .observation-metrics { grid-template-columns: 1fr 1fr; }
  .observation-heading { display: grid; }
  .observation-timeline article { grid-template-columns: 82px 1fr; gap: 10px; }
}
@media (max-width: 460px) {
  .observation-filters, .observation-metrics { grid-template-columns: 1fr; }
  .observation-session-list > button { grid-template-columns: 1fr auto; }
  .observation-session-list > button > b { display: none; }
}
@media (min-width: 900px) {
  .app-shell:has(.observation-screen) { width: min(100%, 1100px); }
  .observation-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .observation-title h1, .observation-heading h1 { font-size: 40px; }
}

.observation-overview { display: grid; gap: 18px; padding: 20px; border: 1px solid #ddd7e0; border-radius: 24px; background: #fff; }
.observation-overview__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.observation-overview__heading h2, .observation-overview__heading p { margin: 0; }
.observation-overview__heading p { margin-top: 4px; color: #625762; font-size: 13px; }
.observation-overview__heading > small { padding: 6px 9px; border-radius: 999px; background: #f7f7fa; color: #625762; font-weight: 800; white-space: nowrap; }
.observation-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.observation-kpis article { min-height: 108px; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; background: #f7f7fa; text-align: center; }
.observation-kpis article > strong { color: #261221; font-size: 27px; line-height: 1; }
.observation-kpis article > strong small { color: #625762; font-size: 15px; }
.observation-kpis article > span { color: #625762; font-size: 11px; font-weight: 850; }
.observation-completion > div { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#b00060 var(--completion), #eadfe6 0); position: relative; }
.observation-completion > div::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #f7f7fa; }
.observation-completion > div strong { position: relative; z-index: 1; font-size: 15px; }
.observation-chart-grid { display: grid; gap: 12px; }
.observation-chart { min-width: 0; padding: 16px; border: 1px solid #eee9ef; border-radius: 18px; }
.observation-chart h3 { min-height: 36px; margin: 0 0 12px; font-size: 15px; line-height: 1.25; }
.observation-chart > p { margin: 0; color: #625762; font-size: 13px; }
.observation-bar-row { display: grid; grid-template-columns: 72px minmax(50px, 1fr) 38px; align-items: center; gap: 8px; margin: 9px 0; }
.observation-bar-row > span { overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.observation-bar-row > i { height: 9px; overflow: hidden; border-radius: 999px; background: #eee9ef; }
.observation-bar-row > i > b { display: block; height: 100%; border-radius: inherit; background: #b00060; }
.observation-bar-row--stop > i > b { background: #ffd21a; }
.observation-bar-row > strong { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.observation-signals { padding: 16px; border-radius: 18px; background: #fff5fa; }
.observation-signals h3 { margin: 0 0 10px; font-size: 16px; }
.observation-signals p { display: grid; grid-template-columns: 22px 1fr; gap: 7px; margin: 8px 0 0; color: #625762; font-size: 13px; font-weight: 700; line-height: 1.4; }
.observation-signals p span { color: #b00060; font-weight: 950; }
@media (min-width: 700px) {
  .observation-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .observation-chart-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .observation-overview { padding: 15px; }
  .observation-overview__heading { display: grid; }
  .observation-overview__heading > small { justify-self: start; white-space: normal; }
}

/* Adult-only visual session story */
.observation-session-story { display: grid; gap: 22px; padding: 22px; border: 1px solid #ddd7e0; border-radius: 24px; background: #fff; }
.observation-story-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.observation-story-heading h2, .observation-story-heading p { margin: 0; }
.observation-story-heading p { margin-top: 4px; color: #625762; font-size: 13px; }
.observation-story-heading > small { padding: 6px 10px; border-radius: 999px; background: #f7f7fa; color: #625762; font-weight: 800; white-space: nowrap; }
.observation-flow { display: grid; gap: 15px; }
.observation-flow__bar { height: 22px; display: flex; overflow: hidden; border: 3px solid #261221; border-radius: 999px; background: #eee9ef; }
.observation-flow__bar > span { min-width: 2px; height: 100%; }
.observation-step-color--hear_it { background: #e90072; }
.observation-step-color--find_it { background: #ffd21a; }
.observation-step-color--speak_it { background: #7d1751; }
.observation-step-color--check_it { background: #67bb78; }
.observation-step-color--keep_it { background: #261221; }
.observation-flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.observation-flow__steps > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.observation-flow__steps i { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; font-style: normal; font-weight: 950; }
.observation-flow__steps i.observation-step-color--find_it { color: #261221; }
.observation-flow__steps span { min-width: 0; display: grid; gap: 2px; }
.observation-flow__steps strong, .observation-flow__steps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-flow__steps strong { font-size: 12px; }
.observation-flow__steps small { color: #625762; font-size: 10px; font-weight: 750; }
.observation-word-journeys { display: grid; gap: 12px; }
.observation-word-journeys h3, .observation-story-signals h3, .observation-support h3 { margin: 0; font-size: 19px; }
.observation-word-journeys > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.observation-word-journeys article { min-width: 0; display: grid; gap: 11px; padding: 14px; border: 1px solid #eee9ef; border-radius: 18px; background: #fff; }
.observation-word-journeys header { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 9px; }
.observation-word-visual { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff5fa; font-size: 25px; }
.observation-word-visual img { width: 100%; height: 100%; object-fit: contain; }
.observation-word-journeys header > span:nth-child(2) { display: grid; gap: 2px; }
.observation-word-journeys header small { color: #625762; font-size: 11px; }
.observation-word-journeys header > b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #e9f7ec; color: #26763a; }
.observation-word-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.observation-word-flow > span { min-width: 0; min-height: 43px; display: grid; place-content: center; gap: 2px; padding: 4px 2px; border-radius: 8px; color: #fff; text-align: center; }
.observation-word-flow > span.observation-step-color--find_it { color: #261221; }
.observation-word-flow small { overflow: hidden; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.observation-word-flow strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.observation-word-journeys footer { display: flex; flex-wrap: wrap; gap: 5px; }
.observation-word-journeys footer span { padding: 4px 7px; border-radius: 999px; background: #f7f7fa; color: #625762; font-size: 9px; font-weight: 800; }
.observation-story-grid { display: grid; gap: 14px; }
.observation-story-signals, .observation-support { display: grid; align-content: start; gap: 9px; padding: 16px; border-radius: 18px; background: #f7f7fa; }
.observation-story-signals article, .observation-support article { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 10px; border-radius: 13px; background: #fff; }
.observation-story-signals article > span, .observation-support article > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff0f7; color: #b00060; font-weight: 950; }
.observation-story-signals article.is-smooth > span { background: #e9f7ec; color: #26763a; }
.observation-story-signals article.is-review > span { background: #fff5c7; color: #6b5700; }
.observation-story-signals strong { display: block; margin-bottom: 3px; font-size: 11px; color: #625762; }
.observation-story-signals p, .observation-support p { margin: 0; color: #261221; font-size: 12px; font-weight: 720; line-height: 1.42; }
.observation-support article > span { background: #ffd21a; color: #261221; }
.observation-timeline-details { overflow: hidden; border: 1px solid #ddd7e0; border-radius: 20px; background: #fff; }
.observation-timeline-details > summary { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 22px; cursor: pointer; list-style: none; }
.observation-timeline-details > summary::-webkit-details-marker { display: none; }
.observation-timeline-details > summary span { display: grid; gap: 3px; }
.observation-timeline-details > summary small { color: #625762; }
.observation-timeline-details > summary b { color: #b00060; font-size: 22px; transition: transform .2s ease; }
.observation-timeline-details[open] > summary b { transform: rotate(180deg); }
.observation-timeline-details .observation-timeline { border: 0; border-top: 1px solid #eee9ef; border-radius: 0; }
@media (min-width: 800px) {
  .observation-story-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .observation-story-heading { display: grid; }
  .observation-story-heading > small { justify-self: start; white-space: normal; }
  .observation-flow__steps { grid-template-columns: 1fr 1fr; }
  .observation-word-journeys > div { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .observation-session-story { padding: 15px; }
  .observation-flow__steps { grid-template-columns: 1fr; }
}

/* Oral-First, Literacy-Aware Learning: writing stays quiet beside the family voice. */
.written-form-entry { width: min(100%, 520px); margin: 16px auto 4px; border: 2px solid var(--brand-soft); border-radius: 20px; background: var(--brand-wash); overflow: hidden; text-align: left; }
.written-form-entry summary { min-height: 54px; padding: 13px 16px; display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 900; cursor: pointer; list-style: none; }
.written-form-entry summary::-webkit-details-marker { display: none; }
.written-form-entry summary svg { color: var(--brand); }
.written-form-entry summary small { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; }
.written-form-entry label { padding: 0 16px 16px; display: grid; gap: 7px; color: var(--ink); font-weight: 900; }
.written-form-entry input { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 20px; font-weight: 850; }
.written-form-entry label small { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.35; }
.written-form-screen { text-align: center; }
.written-form-panel { width: min(100%, 560px); margin: 0 auto; padding: 20px; display: grid; gap: 16px; border: 2px solid var(--brand-soft); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-soft); text-align: left; }
.written-form-panel > div:first-child small { color: var(--brand-action); font-size: 11px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.written-form-panel h2 { margin: 3px 0 5px; color: var(--ink); font-size: 25px; }
.written-form-panel p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.45; }
.written-form-panel label { display: grid; gap: 7px; color: var(--ink); font-weight: 900; }
.written-form-panel input { min-height: 54px; padding: 11px 14px; border: 2px solid var(--line); border-radius: 15px; color: var(--ink); font: inherit; font-size: 21px; font-weight: 850; }
.written-form-panel label small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.current-written-form { padding: 12px 14px; display: grid; gap: 3px; border-radius: 15px; background: var(--brand-wash); }
.current-written-form small { color: var(--muted); font-size: 10px; font-weight: 850; }
.current-written-form strong { color: var(--ink); font-size: 20px; overflow-wrap: anywhere; }
.written-form-panel--complete { justify-items: center; padding: 28px 20px; text-align: center; }
.written-form-panel--complete > div { display: grid; gap: 7px; }
.written-form-panel--complete h2 { margin: 0; font-size: 22px; }
.written-form-panel--complete p { padding: 8px 16px; border-radius: 999px; background: var(--brand-wash); color: var(--ink); font-size: 20px; font-weight: 900; }
.written-form-panel--complete .primary-button { width: min(100%, 320px); }
.written-form-success-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: white; }
.written-form-success-icon svg { width: 28px; height: 28px; }
@media (max-width: 560px) {
  .written-form-action { align-items: stretch; flex-direction: column; }
  .written-form-action .secondary-button { width: 100%; justify-content: center; }
}
.learner-written-form { position: absolute; z-index: 3; right: 18px; bottom: 16px; max-width: calc(100% - 36px); padding: 5px 11px 6px; border-radius: 10px; background: rgb(255 255 255 / 86%); color: var(--ink); font-family: inherit; font-size: clamp(16px, 4vw, 22px); font-weight: 700; line-height: 1.1; letter-spacing: normal; overflow-wrap: anywhere; text-align: right; box-shadow: 0 2px 7px rgb(38 18 33 / 10%); backdrop-filter: blur(3px); pointer-events: none; }
.focus-object--medium .learner-written-form,
.keep-word-hero .learner-written-form { right: 14px; bottom: 13px; font-size: clamp(15px, 3.4vw, 19px); }
.object-card .learner-written-form { right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px 5px; border-radius: 8px; font-size: clamp(13px, 3.2vw, 17px); }
.word-display-preference { min-width: 0; margin: 0; padding: 14px; border: 2px solid var(--brand-soft); border-radius: 20px; background: var(--brand-wash); }
.word-display-preference legend { padding: 0 6px; color: var(--ink); font-weight: 900; }
.word-display-options { display: grid; gap: 8px; }
.word-display-option { position: relative; min-height: 62px; padding: 11px 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); cursor: pointer; }
.word-display-option:has(input:checked) { border-color: var(--brand-action); background: var(--brand-wash); box-shadow: 0 3px 0 rgb(180 0 96 / 12%); }
.word-display-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.word-display-option__mark { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: transparent; }
.word-display-option:has(input:checked) .word-display-option__mark { border-color: var(--brand-action); background: var(--brand-action); color: white; }
.word-display-option__mark .ui-icon { width: 15px; height: 15px; stroke-width: 3; }
.word-display-option > span:last-child { min-width: 0; display: grid; gap: 3px; }
.word-display-option strong { font-size: 14px; line-height: 1.2; }
.word-display-option small { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.3; }
.word-display-option:focus-within { outline: 3px solid rgb(230 0 126 / 20%); outline-offset: 2px; }