* { box-sizing: border-box;}
[hidden] { display: none !important;}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 1rem/1.5 ui-rounded, "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);}
button, input, select { font: inherit;}
a { color: inherit;}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);}
h1, h2, h3, h4, p { margin-top: 0;}
h1, h2, h3, h4 { line-height: 1.15;}
.small { font-size: .875rem; color: var(--muted);}

.top, main { width: min(100%, 1120px); margin: 0 auto; padding-inline: clamp(12px, 4vw, 32px);}
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;}
main { flex: 1; padding-bottom: 24px;}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none;}

.accent-tag { border-radius: 99px; font-weight: 700;}
.card { border-radius: var(--radius); background: var(--white); padding: clamp(16px, 4vw, 30px); border: 1px solid var(--line);}

.eyebrow { text-transform: uppercase; font-weight: 800; margin-bottom: 6px;}
h1 { max-width: 24ch; font-size: clamp(1.9rem, 4.5vw, 3.15rem); letter-spacing: -.04em; margin-bottom: 8px; overflow-wrap: anywhere;}
.lead { margin: 0;}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  text-decoration: none; font-weight: 700; cursor: pointer;}

.btn.sm { font-size: .875rem;}
.btn.big { padding-inline: 18px;}
.btn:disabled { cursor: default;}

.search-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 235px); gap: 8px;}
.search input, #catFilter {
  width: 100%; min-height: 44px; border: 1px solid #c8b8df; border-radius: 12px;
  padding: 8px 12px; color: var(--ink); background: var(--white);}
@media (max-width: 480px) {
  .search-row { grid-template-columns: minmax(0, 1fr); }
}
.toolbar-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; align-items: center;}
.check { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer;}
.check input { width: 17px; height: 17px;}
.count { color: var(--muted); font-size: .875rem; margin: 12px 4px 8px; overflow-wrap: anywhere;}
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px;}
.wcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; border: 1px solid var(--line); background: var(--white);}

.word-card-copy { min-width: 0;}
.audio-slot .btn { white-space: nowrap;}
.wcard h3 { font-size: 1.08rem; margin: 0; overflow-wrap: anywhere;}
.wcard h3 a { display: inline-block; padding-block: 7px; text-decoration: none;}
.wcard h3 a span::after { content: " →";}
.wcard h3 a:hover { text-decoration: underline;}
.card-meta { margin: 0; font-size: .76rem;}
.done-label { font-weight: 700;}
.controls, .practice-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}

.practice-nav .sentence-link { background: var(--mint); border-color: var(--green); color: var(--green);}

.badge { display: inline-block; border-radius: 99px; padding: 3px 8px; font-size: .75rem; font-weight: 700;}
.badge.soon { background: var(--yellow); color: #633d16;}
.resp { font-weight: 800;}
.ipa { font-family: "Doulos SIL", "Charis SIL", "Lucida Sans Unicode", serif; overflow-wrap: anywhere;}
.empty { text-align: center; color: var(--muted); padding: 20px;}

.detail-nav, .detail { max-width: 790px; margin-inline: auto;}
.detail-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.spacer { flex: 1;}
.word-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;}
.word-heading > div { min-width: 0;}
.d-word { margin: 0; overflow-wrap: anywhere;}
.d-say { margin: 6px 0;}
.syll { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 14px;}

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 224px), 1fr)); gap: 10px; margin-bottom: 14px;}
.note-box, .review { border-radius: 12px; padding: 12px;}
.note-box h3 { font-size: .91rem; margin-bottom: 4px;}
.note-box p { margin: 0; font-size: .92rem;}

.review { background: var(--yellow);}
.compare, .shadow { border-radius: 18px; padding: clamp(12px, 3vw, 20px);}
.compare { background: var(--lilac);}
.shadow { margin-top: 14px;}
.compare h3, .shadow h3 { font-size: 1.24rem; margin-bottom: 6px;}
.step-number { display: inline-grid; place-items: center; width: 1.55em;}

.practice-intro { margin: 6px 0;}
.controls { margin: 6px 0;}

mark.target { font-weight: 800; border-radius: 5px; padding: 0 .14em; box-decoration-break: clone;}
.rec-timer { font-weight: 800; font-variant-numeric: tabular-nums;}

.waves { display: grid; margin: 8px 0;}
.wave { min-width: 0; margin: 0; border-radius: 12px;}
.wave figcaption { font-size: .82rem; font-weight: 800;}
.wave canvas { width: 100%; display: block;}
.wave-note { margin: 0;}
.wave-note:empty { display: none;}
.status { margin: 6px 0; color: var(--muted); font-size: .875rem;}
.status:empty { margin: 0;}
.alert { border-radius: 12px; padding: 12px; margin: 8px 0;}
.alert p { margin: 4px 0;}

.foot { text-align: center; padding: 12px;}
.feedback { border-radius: 14px; margin: 8px 0;}
.feedback h4, .fb-msg { margin-bottom: 6px;}
.fb-msg { font-weight: 700;}
.fb-msg.unclear { background: var(--yellow); padding: 8px; border-radius: 8px;}
.fb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px;}
.fb { display: flex; gap: 8px; border-radius: 8px;}

.fb.tip { background: var(--yellow);}
.fb-icon { font-weight: 800; min-width: 1.2em; text-align: center;}
.honest { margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 8px;}
/* Say it with Liz — a practice-first studio. */
:root { --radius:24px;}

.top,main { max-width:1120px;}
.top { padding-block:22px;}
.brand { letter-spacing:-.5px;}

.accent-tag { background:transparent; padding:0; font-size:.73rem;}
h1,h2,h3 { font-family:"Avenir Next", "Trebuchet MS", system-ui,sans-serif;}
.home-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; padding:30px 0 32px;}
.eyebrow { font-size:.68rem; letter-spacing:.13em;}
.hero-copy h1 { font-size:clamp(3.2rem,6vw,5.6rem); line-height:1.02; margin:20px 0;}
.hero-copy h1 em { font-family:Georgia,serif; font-weight:400;}
.lead { font-size:1.08rem; max-width:27ch;}
.hero-doodle { height:170px; position:relative; margin-top:28px;}
.sound-caption { position:absolute; font-size:.78rem;}

.card-kicker { display:flex; justify-content:space-between; gap:12px; align-items:center; font-weight:800; font-size:.65rem; letter-spacing:.12em;}
.card-kicker > span:last-child { font-size:1.5rem;}
.try-card h2 { font-size:clamp(2rem,3.7vw,3rem); letter-spacing:-.055em; margin:15px 0 1px; overflow-wrap:anywhere;}
.featured-resp { font-size:.95rem; margin:0 0 17px;}
.btn { min-height:46px;}

.home-listen { font-size:.88rem;}
.preview-waves { border-radius:16px; padding:14px 15px 10px; margin:20px 0;}
.preview-waves > div { display:flex; gap:16px; align-items:center;}
.preview-waves b { width:28px; font-size:.75rem;}
.mini-wave { flex:1; height:45px; display:flex; align-items:center; justify-content:center; gap:3px;}
.mini-wave i { display:block; flex:1; max-width:5px; border-radius:5px;}

.preview-waves p { font-size:.75rem; margin:8px 0 0;}
.sample-label { font-size:.59rem;}
.start-practice { display:flex; justify-content:space-between; width:100%; padding:12px 18px;}
.practice-promise { text-align:center; font-size:.65rem; margin:10px 0 0;}
.browse-card { display:flex; align-items:center; gap:16px; padding:20px 24px; text-decoration:none;}

.browse-card strong { font-size:1.02rem;}
.browse-card small { display:block; margin-top:3px; font-size:.8rem;}
.browse-card > span:last-child { margin-left:auto; font-size:1.8rem;}
.browse-icon { font-family:Georgia,serif; font-size:2.1rem; border-right:1px solid #ad8e36; padding-right:17px;}
.home-progress { display:flex; justify-content:space-between; gap:15px; font-size:.73rem; padding:22px 4px;}
#homeProgress { font-weight:800;}
.browse-heading { padding:16px 0 10px;}
.text-link { display:inline-block; margin-bottom:25px; text-decoration:none; font-size:.85rem;}
.browse-heading h1 { font-size:clamp(2.7rem,5vw,4.5rem);}
.toolbar { padding:16px; border-radius:18px; margin-bottom:20px;}

.wcard { border-color:var(--ink); border-width:1.5px; border-radius:16px; padding:14px; box-shadow:0 3px 0 #e3d7bd;}

.wcard .btn { font-size:.75rem;}
.detail { padding:26px;}
.detail-nav { margin-top:8px;}

.word-heading { align-items:center;}
.d-word { font-size:clamp(2.6rem,7vw,4rem); font-weight:800; letter-spacing:-.055em;}
#practisedBtn { font-size:.75rem; padding:6px 10px; min-height:40px;}
.d-say { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:1.1rem; margin-top:17px;}
.practice-nav { display:grid; grid-template-columns:1fr 1fr; border:3px solid var(--ink); border-radius:15px; gap:3px; margin:20px 0 16px;}
.practice-nav .btn { border:0; background:transparent; border-radius:11px; min-height:48px; font-size:.9rem;}

.practice-nav .btn:hover { text-decoration:none;}
.syl { font-size:.85rem;}
.syll .small { font-size:.75rem;}
.pronunciation-notes { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:16px 0 22px;}
.pronunciation-notes summary { cursor:pointer; display:flex; justify-content:space-between; padding:13px 0; font-weight:700; font-size:.84rem; list-style:none;}.pronunciation-notes summary::-webkit-details-marker { display:none;}
.pronunciation-notes[open] summary span { transform:rotate(45deg);}
.notes { margin-top:0;}
.compare,.shadow { padding:20px; border-radius:20px; border:0; margin-top:0;}
.s-compare { padding:0;}
.compare h3,.shadow h3 { font-size:1.05rem; line-height:1.4; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.step-number { background:var(--ink); color:var(--yellow); border-radius:8px; font-size:.65rem; min-width:27px; height:27px;}.shadow .step-number { color:var(--yellow);}
.practice-intro { font-size:.8rem; margin-bottom:16px;}
#wordAudioRow,#sentenceAudioRow { margin-bottom:14px;}
#recBtn,#sRecBtn { width:100%; min-height:54px; margin:3px 0;}
#wordAudioRow .btn:first-child,#sentenceAudioRow .btn:first-child { flex:1;}

.waves { grid-template-columns:1fr; gap:8px;}
.wave { padding:12px;}.wave canvas { height:64px;}
.result { margin-top:20px; border-top:1px solid #bdaccc; padding-top:15px;}
#playBothBtn,#sPlayBothBtn { width:100%;}
.feedback { border:1px solid #c2b2d6; padding:16px; margin-top:15px;}.feedback h4 { font-size:1.1rem;}.fb { font-size:.85rem; padding:10px;}.honest { font-size:.72rem; line-height:1.5;}
.shadow-sentence { font-size:1.5rem; line-height:1.45; margin:14px 0 20px;}
.foot { font-size:.7rem; padding-block:22px;}
@media (max-width:700px) {
  .top,main { padding-inline:20px; }.top { padding-block:17px; }.brand { font-size:.85rem; }.accent-tag { font-size:.61rem; }
  .home-hero { grid-template-columns:1fr; gap:16px; padding-top:16px; }
  .hero-copy { position:relative; }.hero-copy h1 { font-size:3.15rem; margin:12px 0; }.hero-copy .eyebrow { font-size:.59rem; }.lead { font-size:.94rem; max-width:26ch; }
  .hero-doodle { position:absolute; right:-3px; top:78px; width:80px; height:100px; margin:0; }.sound-caption { display:none; }
  .try-card { padding:21px; border-radius:22px; box-shadow:5px 5px 0 var(--ink); transform:rotate(-.6deg); margin-top:8px; }.try-card h2 { font-size:2.35rem; }.preview-waves { margin:16px 0; }.browse-card { padding:16px;gap:12px; }.browse-card strong { font-size:.87rem; }.browse-card small { font-size:.69rem; }.browse-icon { font-size:1.7rem; padding-right:11px; }.home-progress { flex-direction:column; gap:5px; padding-block:18px; }
  .detail { padding:18px 15px; border-radius:22px; }.detail-nav { gap:6px; }.detail-nav .btn { font-size:.8rem; padding:7px 12px; }.d-word { font-size:2.6rem; }.word-heading { gap:12px; }.word-heading > div { width:100%; }.word-heading #practisedBtn { order:2; }.d-say { margin-top:13px; }.practice-nav { margin:16px 0; }.practice-nav .btn { font-size:.82rem; }.compare,.shadow { padding:16px 13px; }.s-compare { padding:0; }.compare h3,.shadow h3 { font-size:.93rem; }.controls { gap:7px; }.controls .btn { font-size:.81rem; }.search-row { grid-template-columns:1fr; }.toolbar-row { gap:0; }.check { font-size:.78rem; }.grid { gap:11px; }.foot { padding-inline:20px; }
}
@media (prefers-reduced-motion:no-preference) { .btn,.browse-card { transition:background .15s, transform .15s; }.btn:active { transform:translateY(2px); } }
/* Word Garden family: purple canvas, midnight stage, sunflower actions. */
:root { --bg:#532fb6; --ink:#fdfcff; --muted:#cecbe4; --purple:#532fb6; --purple-dark:#242b52; --lilac:#353e6a; --mint:#d8f0be; --green:#254c37; --yellow:#f7d147; --peach:#ffe3d1; --red:#a82142; --line:#515a83; --white:#fff; --navy:#22294e;}
body { font-family:"Avenir Next",Arial,system-ui,sans-serif;}
:focus-visible { outline:3px solid var(--yellow); outline-offset:4px;}
.brand { color:#fff;}.wordmark { font-family:Arial,sans-serif;font-size:1.55rem;font-weight:800;letter-spacing:-1.5px;}.wordmark > span { color:var(--yellow);}
.accent-tag { color:#e3dafa;}.eyebrow { color:var(--yellow);}.hero-copy h1 { color:#fff;font-weight:800;letter-spacing:.025em;}.hero-copy h1 em { font:inherit;color:var(--yellow);}.lead { color:#e8defa;}
.hero-doodle { display:flex;gap:10px;align-items:flex-start;padding:12px 5px;}
.voice-tile { display:grid;place-items:center;width:62px;height:65px;background:white;color:var(--navy);font-size:2rem;font-weight:800;border-radius:8px;box-shadow:0 6px 0 #bcb8dc;}
.voice-tile:nth-child(2) { transform:translateY(-7px);}.voice-spark { color:var(--yellow);font-size:3rem;margin-left:8px;}.sound-caption { top:110px;left:5px;color:#e4dbf7;transform:none;}
.try-card { background:var(--navy); border:0; box-shadow:none;transform:none;border-radius:24px;padding:30px;}
.card-kicker { color:var(--yellow);}.try-card h2 { color:#fff;}.featured-resp { color:#d1cee5;}
.btn { background:#3b446c;border:1px solid #6c76a1;color:#fff;border-radius:10px;box-shadow:0 3px 0 #151b38;}
.btn:hover { background:#4a5484;color:#fff;}.btn.primary { background:var(--yellow);border-color:var(--yellow);color:#22294e;box-shadow:0 4px 0 #bd9f16;}.btn.primary:hover { background:#ffe457;border-color:#ffe457;color:#22294e;}.btn.ghost { border-color:#66709b;color:#fff;}.btn:disabled { opacity:.5;}.btn.recording { background:#b12d4b;border-color:#ef8ba0;color:white;}.btn.playing { background:#427c5a;color:white;border-color:#8ac8a0;}
.home-listen { background:#3b446c;color:white;border-color:#7480aa;}.preview-waves { background:#30395f;}.mini-wave i { background:var(--yellow);}.you-mini i { background:#c6b7ff;}.preview-waves p { color:#fff;}.sample-label { color:#c6c4da;}.practice-promise { color:#ccc9de;}
.browse-card { background:var(--navy);border:1px solid #8170bf;color:white;border-radius:18px;}.browse-card:hover { background:#30365d;}.browse-icon { color:var(--yellow);border-right-color:#62658b;}.browse-card small { color:#cdc9e2;}.home-progress { color:#e1d6f6;}#homeProgress { color:var(--yellow);}
.toolbar { background:var(--navy);}.search input,#catFilter { background:#fff;color:#22294e;border-color:#fff;box-shadow:0 3px 0 #bcb8dc;}.check input { accent-color:var(--yellow);}.count,.empty { color:#e1d6f6;}
.wcard {
  position: relative;
  isolation: isolate;
  color: #22294e;
  background: #ffdf72;
  border: 1px solid #fff1b4;
  box-shadow: 0 3px 0 #372176;
}
.wcard:nth-child(4n + 2) { background: #e5d7ff; border-color: #f0e9ff; }
.wcard:nth-child(4n + 3) { background: #b9eddb; border-color: #e4fff5; }
.wcard:nth-child(4n + 4) { background: #ffcbd4; border-color: #ffe7ed; }
.wcard h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
}
.wcard h3 a:hover { text-decoration-color: #532fb6; }
.wcard h3 a:hover::after { box-shadow: inset 0 0 0 2px #532fb6; }
.wcard h3 a:focus-visible::after { outline: 3px solid #fff; outline-offset: 3px; }
.wcard h3 a span::after { color: #532fb6; }
.wcard .audio-slot button { position: relative; z-index: 1; border-radius: 10px; }
.wcard.done { border-color: #226048; }
.done-label { color: #20543f; }
.card-meta { color: #3e395b; }
.detail { background:var(--navy);border:0;box-shadow:none;}.detail-nav .btn { background:#43258c;}.d-word { color:white;}#practisedBtn { color:white;background:#364169;border-color:#717ba1;}#practisedBtn[aria-pressed="true"] { background:#d8f0be;border-color:#d8f0be;color:#254c37;}.resp { color:#fff;}.ipa { color:#c9c5df;}
.practice-nav { background:#151c3a;border-color:#151c3a;}.practice-nav .btn { box-shadow:none;color:#eeebf8;}.practice-nav .btn[aria-pressed="true"] { background:var(--yellow);color:#22294e;box-shadow:0 3px 0 #bd9f16;}.practice-nav .btn:hover { background:#3d466f;}.practice-nav .btn[aria-pressed="true"]:hover { background:#ffe457;}
.syl { background:white;color:#22294e;padding:6px 12px;border-radius:6px;box-shadow:0 4px 0 #bcb8dc;font-weight:800;margin-bottom:4px;}.syl.stressed { background:var(--yellow);color:#22294e;box-shadow:0 4px 0 #a98f1e;}.syll { gap:7px;}.syll .small { margin-left:5px;color:#d6d1e7;}
.pronunciation-notes { border-color:#4e567b;}.pronunciation-notes summary { color:#ece9f6;}.note-box.mistake { background:#353f67;color:white;}.note-box.tip,.review { background:#41416a;color:white;}.note-box h3 { color:var(--yellow);}
.compare,.shadow { background:#30395f;}.s-compare { background:transparent;}.step-number,.shadow .step-number { background:var(--yellow);color:#22294e;}.practice-intro,.status,.small { color:#cecbe4;}
#wordAudioRow .btn:first-child,#sentenceAudioRow .btn:first-child { background:white;color:#22294e;border-color:white;box-shadow:0 4px 0 #bcb8dc;}#wordAudioRow .btn:last-child,#sentenceAudioRow .btn:last-child { color:white;background:#3d476f;border-color:#6d78a3;}
.wave { background:#fff;color:#22294e;}.wave .small { color:#625b78;}.result { border-color:#60698e;}.shadow-sentence { font-family:inherit;font-weight:600;color:white;}mark.target { background:var(--yellow);color:#22294e;}
.feedback { background:#22294e;border-color:#56628e;}.fb { background:#353e66;color:white;}.fb.ok { background:#d8f0be;color:#254c37;}.fb.tip,.fb-msg.unclear { background:#fff0b0;color:#38304c;}.alert { background:#ffe4da;color:#532b42;}.alert .btn { color:white;}.rec-timer { color:#ffb7c4;}.foot { color:#e2d7f8;}
@media(max-width:700px) {
 .wordmark { font-size:1.3rem; }.top { padding-block:20px; }.home-hero { padding-top:12px;gap:18px; }.hero-copy h1 { font-size:2.85rem; }.hero-copy .eyebrow { font-size:.58rem; }.hero-doodle { display:none; }.hero-copy .lead { max-width:none;font-size:.9rem; }.try-card { padding:21px;border-radius:21px;margin-top:0;transform:none;box-shadow:none; }.try-card h2 { font-size:2.35rem; }.preview-waves { margin:15px 0; }.home-progress { padding-top:18px; }.detail { border-radius:20px; }.d-word { font-size:2.55rem; }.detail-nav .btn { background:#43258c; }
}

@media (max-width: 360px) { .hero-copy h1 { font-size: 2.4rem; } }