:root { --ink:#09264c; --aqua:#08c9b5; --aqua-dark:#00aa97; --paper:#fbfdfc; --soft:#edf8f6; --line:#dce9e6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.landing-shell { min-height:100vh; overflow:clip; }

.site-header { width:min(1180px,calc(100% - 48px)); height:96px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.header-brand { display:block; width:70px; height:58px; overflow:hidden; }
.header-brand img { width:72px; height:auto; }
.auth-nav { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:750; }
.login-link,.signup-link { min-height:44px; display:inline-flex; align-items:center; border-radius:999px; padding:0 20px; transition:transform .2s,background .2s; }
.login-link:hover { background:#eef5f3; }
.signup-link { color:white; background:var(--ink); }
.login-link:hover,.signup-link:hover,.primary-cta:hover,.join a:hover { transform:translateY(-2px); }

.hero { width:min(1180px,calc(100% - 48px)); min-height:calc(100svh - 96px); margin:0 auto; padding:70px 0 105px; display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:100px; align-items:center; position:relative; }
.hero-kicker,.section-kicker,.path-intro p,.join-step { margin:0; color:var(--aqua-dark); font-size:10px; font-weight:850; letter-spacing:.2em; }
.hero h1 { margin:22px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(58px,7vw,96px); font-weight:400; line-height:.94; letter-spacing:-.06em; }
.hero h1 span { color:var(--aqua-dark); font-style:italic; }
.hero-korean { margin:38px 0 0; font-size:clamp(22px,2.3vw,32px); font-weight:800; letter-spacing:-.04em; word-break:keep-all; }
.hero-description { max-width:570px; margin:18px 0 31px; color:#40586f; font-size:16px; line-height:1.85; word-break:keep-all; }
.hero-actions { display:flex; align-items:center; gap:20px; }
.primary-cta { min-height:58px; padding:0 24px; border-radius:16px; background:var(--aqua); color:#052e38; display:inline-flex; align-items:center; gap:34px; font-weight:800; box-shadow:0 13px 30px rgba(8,201,181,.2); transition:transform .2s; }
.primary-cta span,.join a span { font-size:20px; }
.no-level { color:#73828e; font-size:12px; }

.level-rail { position:relative; padding:14px 0 14px 55px; }
.rail-progress { position:absolute; left:17px; top:26px; bottom:26px; width:1px; background:#d7e6e3; }
.rail-progress span { position:absolute; left:-2px; top:0; width:5px; height:38%; border-radius:99px; background:var(--aqua); animation:railPulse 3.8s ease-in-out infinite alternate; }
.rail-level { min-height:108px; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; border-bottom:1px solid var(--line); position:relative; }
.rail-level:last-child { border-bottom:0; }
.rail-level::before { content:""; position:absolute; left:-42px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid #b7cac6; }
.rail-level:first-of-type::before { background:var(--aqua); border-color:var(--aqua); box-shadow:0 0 0 7px rgba(8,201,181,.12); }
.rail-number { color:#87949e; font-size:11px; font-weight:800; }
.rail-level > div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.rail-label { font-size:9px; font-weight:850; letter-spacing:.16em; }
.rail-level strong { font-family:Georgia,serif; font-size:34px; font-style:italic; font-weight:400; letter-spacing:-.04em; }
.scroll-cue { position:absolute; bottom:26px; left:0; display:flex; align-items:center; gap:12px; color:#7b8993; font-size:9px; font-weight:800; letter-spacing:.18em; }
.scroll-cue i { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-style:normal; }

.path { min-height:100svh; background:var(--ink); color:white; }
.path-sticky { min-height:100svh; padding:80px max(24px,calc((100vw - 1180px)/2)) 42px; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
.path-intro { display:flex; justify-content:space-between; align-items:start; gap:40px; }
.path-intro h2 { margin:0; font-size:clamp(34px,4.4vw,60px); line-height:1.25; letter-spacing:-.055em; text-align:right; word-break:keep-all; }
.path-stage { position:relative; min-height:390px; }
.path-track { position:absolute; left:5%; right:5%; top:50%; height:1px; background:rgba(255,255,255,.14); }
.path-track span { display:block; width:100%; height:3px; margin-top:-1px; background:var(--aqua); box-shadow:0 0 30px rgba(8,201,181,.5); }
.path-card { width:220px; height:260px; padding:23px; border-radius:22px; position:absolute; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 28px 70px rgba(0,0,0,.24); }
.path-card small { font-size:10px; font-weight:800; letter-spacing:.16em; }
.path-card strong { font-family:Georgia,serif; font-size:52px; font-weight:400; font-style:italic; letter-spacing:-.05em; }
.path-card span { font-size:11px; letter-spacing:.12em; }
.card-sound { left:2%; top:18%; background:#eef8f6; color:var(--ink); transform:rotate(-5deg); }
.card-word { left:calc(50% - 110px); top:33%; background:var(--aqua); color:#052e38; transform:rotate(3deg); }
.card-idea { right:2%; top:10%; background:white; color:var(--ink); transform:rotate(-2deg); }
.path-caption { display:grid; grid-template-columns:repeat(3,1fr); padding-top:17px; border-top:1px solid rgba(255,255,255,.16); color:#91a5b7; font-size:11px; }
.path-caption span:nth-child(2) { text-align:center; }.path-caption span:last-child { text-align:right; }

.explanation { min-height:100vh; padding:120px max(24px,calc((100vw - 1180px)/2)); background:var(--soft); border-top:12px solid var(--aqua); display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:center; }
.explanation-mark { font-family:Georgia,serif; font-size:clamp(180px,22vw,320px); font-style:italic; color:transparent; -webkit-text-stroke:1px rgba(9,38,76,.2); letter-spacing:-.11em; }
.explanation-content h2 { margin:23px 0 28px; font-size:clamp(40px,4.8vw,65px); line-height:1.23; letter-spacing:-.06em; word-break:keep-all; }
.explanation-content > p { max-width:650px; margin:0; color:#405a70; font-size:17px; line-height:1.95; word-break:keep-all; }
.explanation-content > a { margin-top:34px; padding-bottom:8px; display:inline-flex; gap:45px; border-bottom:2px solid var(--ink); font-size:14px; font-weight:800; }

.join { min-height:72vh; padding:100px 24px; background:var(--aqua); color:#052e38; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.join-step { color:#076a64; }
.join h2 { margin:24px 0 38px; font-size:clamp(46px,6vw,78px); line-height:1.17; letter-spacing:-.065em; word-break:keep-all; }
.join a { min-height:60px; padding:0 27px; border-radius:17px; background:white; display:inline-flex; align-items:center; gap:36px; font-weight:800; box-shadow:0 16px 40px rgba(5,46,56,.14); transition:transform .2s; }
.site-footer { padding:30px max(24px,calc((100vw - 1180px)/2)) 38px; background:#061f3d; color:#90a1b2; display:flex; justify-content:space-between; gap:20px; font-size:12px; }
.site-footer p { margin:0; }.app-status { display:flex; align-items:center; gap:8px; }.app-status span { width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(8,201,181,.13); }
:focus-visible { outline:3px solid rgba(8,201,181,.55); outline-offset:3px; }

@keyframes railPulse { to{height:92%} }
@supports (animation-timeline:scroll()) {
  .rail-progress span { animation:railScroll linear both; animation-timeline:scroll(root); animation-range:0 90vh; }
  @keyframes railScroll { from{height:8%} to{height:100%} }
}

@media (max-width:850px) {
  .hero { grid-template-columns:1fr; gap:70px; padding-top:50px; }
  .level-rail { width:min(100%,520px); }
  .path-intro { display:block; }.path-intro h2 { margin-top:20px; text-align:left; }
  .explanation { grid-template-columns:1fr; gap:35px; }.explanation-mark { font-size:170px; }
}
@media (max-width:600px) {
  .site-header { width:calc(100% - 32px); height:80px; }.header-brand{width:55px;height:47px}.header-brand img{width:56px}
  .auth-nav{gap:2px}.login-link,.signup-link{min-height:40px;padding:0 14px;font-size:13px}
  .hero { width:calc(100% - 40px); min-height:auto; padding:64px 0 105px; }
  .hero h1 { font-size:54px; }.hero-korean { font-size:23px; line-height:1.42; }.hero-description { font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:11px; }.primary-cta { width:100%; justify-content:space-between; }
  .level-rail { padding-left:42px; }.rail-progress{left:12px}.rail-level{min-height:86px}.rail-level::before{left:-34px}.rail-level strong{font-size:28px}
  .path { min-height:100svh; }.path-sticky { min-height:100svh; padding:72px 20px 38px; }.path-intro h2 { font-size:37px; }
  .path-stage { min-height:400px; }.path-card{width:142px;height:184px;padding:17px;border-radius:17px}.path-card strong{font-size:37px}.path-card span{font-size:8px}
  .card-sound{left:0;top:20%}.card-word{left:calc(50% - 71px);top:40%}.card-idea{right:0;top:12%}
  .path-caption{font-size:9px}.explanation{min-height:auto;padding:88px 20px 100px;border-top-width:9px}.explanation-mark{font-size:120px}
  .explanation-content h2{font-size:38px}.explanation-content>p{font-size:15px}.join{min-height:66vh;padding:85px 20px}.join h2{font-size:44px}
  .site-footer{padding:26px 20px 32px;flex-direction:column-reverse}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} }

/* Onboarding flow */
.flow-shell { min-height:100svh; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; }
.flow-shell-mint { background:#edf9f7; }
.flow-shell-navy { background:var(--ink); color:white; }
.flow-header { width:min(1180px,calc(100% - 48px)); height:92px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; position:relative; z-index:5; }
.flow-brand { width:66px; height:54px; display:block; overflow:hidden; }
.flow-brand img { width:68px; height:auto; }
.flow-step { justify-self:center; color:#71818d; font-size:10px; font-weight:800; letter-spacing:.08em; }
.flow-shell-navy .flow-step { color:#8ba0b4; }
.flow-exit { justify-self:end; min-height:42px; display:inline-flex; align-items:center; gap:11px; color:#627483; font-size:12px; font-weight:750; }
.flow-exit span { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:17px; font-weight:400; }
.flow-shell-navy .flow-exit { color:#a8b5c2; }.flow-shell-navy .flow-exit span { border-color:rgba(255,255,255,.2); }
.flow-kicker { margin:0; color:var(--aqua-dark); font-size:10px; font-weight:850; letter-spacing:.2em; }

.choice-screen { width:min(960px,calc(100% - 48px)); flex:1; margin:0 auto; padding:68px 0 46px; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.choice-intro h1 { margin:22px 0 24px; font-size:clamp(38px,4.3vw,58px); line-height:1.28; letter-spacing:-.06em; word-break:keep-all; }
.choice-grid { display:grid; gap:16px; }
.choice-card { min-height:176px; padding:26px 27px; display:grid; grid-template-columns:42px 1fr 38px; gap:12px; align-items:start; background:white; border:1px solid #dce9e6; border-radius:22px; box-shadow:0 14px 45px rgba(9,38,76,.06); transition:transform .2s,border-color .2s,box-shadow .2s; }
.choice-card:hover { transform:translateY(-4px); border-color:var(--aqua); box-shadow:0 20px 50px rgba(9,38,76,.1); }
.choice-can-read { background:var(--ink); color:white; border-color:var(--ink); }
.choice-number { color:#7c8d99; font-size:10px; font-weight:850; letter-spacing:.1em; }
.choice-can-read .choice-number { color:#83a0b5; }
.choice-card strong { display:block; margin:23px 0 10px; font-size:21px; letter-spacing:-.035em; word-break:keep-all; }
.choice-card p { margin:0; color:#667c8d; font-size:13px; line-height:1.6; word-break:keep-all; }
.choice-can-read p { color:#a6b7c5; }
.choice-arrow { width:36px; height:36px; display:grid; place-items:center; align-self:center; border-radius:50%; background:#edf7f5; color:var(--ink); font-size:17px; }
.choice-can-read .choice-arrow { background:var(--aqua); }

.route-screen { width:min(1100px,calc(100% - 48px)); flex:1; margin:0 auto; padding:55px 0 84px; display:grid; grid-template-columns:.82fr 1.18fr; gap:105px; align-items:center; }
.route-visual { width:min(100%,390px); aspect-ratio:1; border-radius:36px; background:var(--ink); color:white; padding:32px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(-3deg); box-shadow:0 28px 70px rgba(9,38,76,.16); }
.route-level { font-size:9px; font-weight:850; letter-spacing:.2em; color:#81e7dd; }
.sound-pair { display:flex; align-items:end; justify-content:center; gap:23px; }
.sound-pair strong { font-family:Georgia,serif; font-size:150px; font-weight:400; line-height:.75; }
.sound-pair span { margin-bottom:9px; color:var(--aqua); font-family:Georgia,serif; font-size:30px; font-style:italic; }
.route-visual > p { margin:0; color:#9db0c0; font-size:10px; letter-spacing:.14em; }
.route-copy h1,.placement-copy h1 { margin:22px 0 24px; font-size:clamp(38px,4.4vw,60px); line-height:1.28; letter-spacing:-.06em; word-break:keep-all; }
.route-description { max-width:590px; margin:0; color:#496276; font-size:16px; line-height:1.85; word-break:keep-all; }
.route-list { margin:32px 0 0; padding:0; list-style:none; border-top:1px solid #cfdfdc; }
.route-list li { min-height:52px; display:flex; align-items:center; gap:18px; border-bottom:1px solid #cfdfdc; font-size:13px; font-weight:700; }
.route-list li span { color:#80918e; font-size:9px; letter-spacing:.1em; }
.route-actions { margin-top:34px; display:flex; align-items:center; gap:24px; }
.flow-primary { min-height:58px; padding:0 25px; border:0; border-radius:16px; background:var(--aqua); color:#052e38; display:inline-flex; align-items:center; justify-content:center; gap:35px; font:inherit; font-size:14px; font-weight:850; box-shadow:0 13px 30px rgba(8,201,181,.2); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.flow-primary:hover { transform:translateY(-2px); box-shadow:0 17px 36px rgba(8,201,181,.27); }
.flow-primary span { font-size:19px; }
.flow-back { color:#607383; font-size:12px; font-weight:750; }
.route-note { margin:14px 0 0; color:#798b95; font-size:11px; }

.placement-screen { width:min(1100px,calc(100% - 48px)); flex:1; margin:0 auto; padding:55px 0 84px; display:grid; grid-template-columns:1.18fr .82fr; gap:100px; align-items:center; }
.placement-copy > p:not(.flow-kicker):not(.route-note) { max-width:590px; margin:0; color:#a2b2c0; font-size:16px; line-height:1.85; word-break:keep-all; }
.placement-facts { margin-top:33px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.17); }
.placement-facts article { min-height:150px; padding:22px 18px 20px 0; border-right:1px solid rgba(255,255,255,.17); }
.placement-facts article:not(:first-child) { padding-left:18px; }
.placement-facts article:last-child { border-right:0; }
.placement-facts span { color:var(--aqua); font-size:9px; font-weight:850; }
.placement-facts strong { display:block; margin:21px 0 9px; font-size:14px; }
.placement-facts p { margin:0; color:#8ea0b1; font-size:11px; line-height:1.6; word-break:keep-all; }
.placement-actions { margin-top:30px; }
.flow-primary-light { background:white; color:var(--ink); box-shadow:none; }
.flow-primary:disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
.flow-shell-navy .flow-back { color:#a5b4c1; }
.placement-note { color:#74899c; }
.placement-preview { aspect-ratio:.78; padding:28px; border-radius:28px; background:#f8fbfa; color:var(--ink); transform:rotate(3deg); box-shadow:0 35px 75px rgba(0,0,0,.25); display:flex; flex-direction:column; }
.preview-top { display:flex; justify-content:space-between; color:#738590; font-size:8px; font-weight:850; letter-spacing:.15em; }
.preview-word { margin:auto 0 8px; font-family:Georgia,serif; font-size:56px; font-style:italic; letter-spacing:-.05em; }
.preview-definition { max-width:260px; margin:0; color:#526a79; font-family:Georgia,serif; font-size:14px; line-height:1.5; }
.preview-lines { margin-top:38px; display:grid; gap:11px; }
.preview-lines span { display:block; height:1px; background:#d8e4e1; }.preview-lines span:nth-child(2){width:87%}.preview-lines span:nth-child(3){width:70%}
.preview-progress { height:4px; margin-top:30px; border-radius:4px; background:#dfe9e7; }.preview-progress span { display:block; width:27%; height:100%; border-radius:4px; background:var(--aqua); }

.placeholder-screen { width:min(680px,calc(100% - 48px)); flex:1; margin:0 auto; padding:70px 0 100px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.placeholder-icon { width:64px; height:64px; margin-bottom:28px; display:grid; place-items:center; border-radius:50%; background:#def7f3; color:var(--aqua-dark); font-size:24px; }
.placeholder-screen h1 { margin:20px 0 16px; font-size:clamp(36px,4.4vw,58px); line-height:1.25; letter-spacing:-.055em; word-break:keep-all; }
.placeholder-screen > p:not(.flow-kicker) { margin:0 0 32px; color:#647987; font-size:15px; }

@media (max-width:850px) {
  .choice-screen,.route-screen,.placement-screen { grid-template-columns:1fr; }
  .choice-screen { gap:48px; padding-top:50px; }
  .route-screen { gap:58px; }.route-visual { justify-self:center; }
  .placement-screen { gap:65px; }.placement-preview { width:min(100%,400px); justify-self:center; }
}

@media (max-width:600px) {
  .flow-header { width:calc(100% - 32px); height:76px; }.flow-brand { width:51px; height:43px; }.flow-brand img { width:53px; }.flow-step { display:none; }
  .flow-exit { font-size:11px; }.flow-exit span { width:26px; height:26px; }
  .choice-screen,.route-screen,.placement-screen { width:calc(100% - 40px); }
  .choice-screen { padding:48px 0 36px; align-items:start; }.choice-intro h1 { font-size:37px; }
  .choice-card { min-height:160px; padding:22px 20px; grid-template-columns:30px 1fr 32px; }.choice-card strong { margin-top:16px; font-size:18px; }.choice-card p { font-size:12px; }.choice-arrow { width:32px; height:32px; }
  .route-screen,.placement-screen { padding:42px 0 70px; }.route-visual { width:270px; border-radius:28px; }.sound-pair strong { font-size:105px; }.sound-pair span { font-size:23px; }
  .route-copy h1,.placement-copy h1 { font-size:36px; }.route-description,.placement-copy > p:not(.flow-kicker):not(.route-note) { font-size:14px; }
  .route-actions { align-items:flex-start; flex-direction:column; gap:18px; }.flow-primary { width:100%; justify-content:space-between; }
  .placement-facts { grid-template-columns:1fr; }.placement-facts article,.placement-facts article:not(:first-child) { min-height:unset; padding:19px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.17); }.placement-facts article:last-child { border-bottom:0; }.placement-facts strong { margin:8px 0 5px; }
  .placement-preview { width:280px; padding:23px; }.preview-word { font-size:45px; }
  .placeholder-screen { width:calc(100% - 40px); padding-top:45px; }.placeholder-screen h1 { font-size:37px; }
}

/* Foundation learning path */
.placeholder-home-link { margin-top:18px; color:#6d7f8c; font-size:12px; font-weight:750; }

/* Voice selection */
.voice-shell { background:#f7fbfa; }
.voice-screen { width:min(1120px,calc(100% - 48px)); flex:1; margin:0 auto; padding:54px 0 74px; }
.voice-intro { text-align:center; }
.voice-intro > p { margin:0 0 15px; color:var(--aqua-dark); font-size:9px; font-weight:850; letter-spacing:.2em; }
.voice-intro h1 { margin:0; font-size:clamp(36px,4.4vw,56px); line-height:1.2; letter-spacing:-.055em; word-break:keep-all; }
.voice-intro > span { display:block; margin-top:17px; color:#667b88; font-size:13px; }
.voice-grid { margin-top:46px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.voice-card { min-width:0; padding:0; position:relative; overflow:hidden; border:2px solid #d8e5e2; border-radius:24px; background:white; color:var(--ink); text-align:left; font:inherit; cursor:pointer; box-shadow:0 14px 40px rgba(9,38,76,.05); transition:transform .2s,border-color .2s,box-shadow .2s; }
.voice-card:hover { transform:translateY(-4px); border-color:#9bcfc8; box-shadow:0 20px 48px rgba(9,38,76,.1); }
.voice-card.selected { border-color:var(--aqua); box-shadow:0 0 0 4px rgba(8,201,181,.12),0 20px 48px rgba(9,38,76,.1); }
.voice-portrait { aspect-ratio:1/1.08; display:block; position:relative; overflow:hidden; background:#f6efe5; }
.voice-portrait img { object-fit:cover; object-position:center top; }
.voice-card-copy { min-height:128px; padding:18px 20px 21px; display:block; }
.voice-card-copy small { display:block; color:var(--aqua-dark); font-size:8px; font-weight:850; letter-spacing:.08em; }
.voice-card-copy strong { display:block; margin:7px 0 6px; font-family:Georgia,serif; font-size:27px; font-weight:400; }
.voice-card-copy > span { color:#70828c; font-size:10px; }
.voice-play { width:35px; height:35px; display:grid; place-items:center; position:absolute; right:16px; bottom:18px; border-radius:50%; background:#e5f7f4; color:#087f75; font-size:11px; }
.voice-card.selected .voice-play { background:var(--aqua); color:#043039; }
.voice-actions { margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.voice-actions .lesson-primary { min-width:245px; }
.voice-actions > p { margin:0; color:#819099; font-size:10px; }
.voice-test-shell { background:#f3f8f7; }
.voice-test-screen { width:min(1040px,calc(100% - 48px)); margin:0 auto; padding:54px 0 90px; }
.voice-test-intro { max-width:720px; }
.voice-test-intro > p { margin:0 0 14px; color:var(--aqua-dark); font-size:9px; font-weight:850; letter-spacing:.2em; }
.voice-test-intro h1 { margin:0; font-size:clamp(38px,5vw,62px); line-height:1.08; letter-spacing:-.055em; }
.voice-test-intro > span { max-width:620px; display:block; margin-top:18px; color:#667b88; font-size:13px; line-height:1.7; }
.voice-test-tabs { margin:42px 0 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.voice-test-tabs button { padding:20px; border:1px solid #d3e0dd; border-radius:18px; background:white; color:var(--ink); text-align:left; font:inherit; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; }
.voice-test-tabs button:hover { transform:translateY(-2px); border-color:#91cfc7; }
.voice-test-tabs button.selected { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(8,201,181,.12); }
.voice-test-tabs strong,.voice-test-tabs span,.voice-test-tabs small { display:block; }
.voice-test-tabs strong { font-family:Georgia,serif; font-size:25px; font-weight:400; }
.voice-test-tabs span { margin:8px 0; color:#637781; font-size:10px; line-height:1.45; }
.voice-test-tabs small { color:#93a2a7; font-size:7px; }
.voice-test-panel { margin-top:18px; padding:32px; border:1px solid #dce7e4; border-radius:24px; background:white; box-shadow:0 16px 48px rgba(9,38,76,.05); }
.voice-test-panel-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-bottom:24px; border-bottom:1px solid #e3ecea; }
.voice-test-panel-heading small { color:var(--aqua-dark); font-size:8px; font-weight:850; letter-spacing:.16em; }
.voice-test-panel-heading h2 { margin:6px 0 0; font-size:26px; letter-spacing:-.035em; }
.voice-test-panel-heading p { max-width:460px; margin:0; color:#6d7f87; font-size:11px; line-height:1.65; }
.voice-test-table { margin-top:10px; }
.voice-test-row { min-height:62px; display:grid; grid-template-columns:1fr 145px 145px; align-items:center; gap:10px; border-bottom:1px solid #edf2f1; }
.voice-test-row:last-child { border-bottom:0; }
.voice-test-row > strong { font-family:Georgia,serif; font-size:24px; font-weight:400; }
.voice-test-row button,.voice-test-phonemes button { border:1px solid #d7e4e1; border-radius:999px; background:#f8fbfa; color:var(--ink); font:inherit; cursor:pointer; }
.voice-test-row button { padding:10px 14px; font-size:10px; font-weight:750; }
.voice-test-row button span { margin-right:7px; color:var(--aqua-dark); }
.voice-test-row button:hover,.voice-test-phonemes button:hover { border-color:var(--aqua); background:#effbf8; }
.voice-test-phonemes { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.voice-test-phonemes button { min-height:115px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:1fr 1fr; align-items:end; padding:20px; border-radius:18px; text-align:left; }
.voice-test-phonemes button > span { width:32px; height:32px; display:grid; place-items:center; grid-row:1/3; align-self:center; border-radius:50%; background:var(--aqua); color:#05353b; font-size:9px; }
.voice-test-phonemes strong { align-self:end; font-family:Georgia,serif; font-size:27px; font-weight:400; }
.voice-test-phonemes small { align-self:start; color:#788b92; font-size:9px; }
.voice-test-note { margin:18px 0 0; color:#75878e; font-size:10px; line-height:1.6; }
@media (max-width:760px) {
  .voice-test-screen { width:calc(100% - 32px); padding:40px 0 64px; }
  .voice-test-intro h1 { font-size:38px; }
  .voice-test-tabs { margin-top:30px; grid-template-columns:1fr 1fr; }
  .voice-test-tabs button { padding:16px; }
  .voice-test-panel { padding:22px 16px; border-radius:20px; }
  .voice-test-panel-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .voice-test-row { grid-template-columns:1fr 1fr; padding:12px 0; }
  .voice-test-row > strong { grid-column:1/-1; }
  .voice-test-row button { padding:10px 8px; }
  .voice-test-phonemes { grid-template-columns:1fr; }
}
.learn-voice { width:max-content; margin-top:20px; padding:9px 12px; display:flex; align-items:center; gap:9px; border:1px solid #d2e2df; border-radius:999px; background:white; }
.learn-voice span { color:#7b8b93; font-size:9px; }.learn-voice strong { font-family:Georgia,serif; font-size:14px; font-weight:400; }.learn-voice small { color:var(--aqua-dark); font-size:8px; font-weight:800; }
.learn-shell { min-height:100svh; padding-bottom:90px; background:#edf8f6; color:var(--ink); }
.learn-header { height:82px; padding:0 max(24px,calc((100vw - 1050px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.84); border-bottom:1px solid #d9e8e5; backdrop-filter:blur(14px); }
.learn-brand { width:57px; height:47px; overflow:hidden; }.learn-brand img { width:59px; height:auto; }
.learn-header nav { display:flex; align-items:center; gap:26px; color:#647986; font-size:11px; font-weight:780; }
.learn-header nav span:first-child { color:var(--ink); }.learn-header nav span:nth-child(2) { color:var(--aqua-dark); }
.learn-header nav a { min-height:38px; padding:0 15px; display:inline-flex; align-items:center; border:1px solid #cfdfdc; border-radius:999px; }
.learn-summary { width:min(920px,calc(100% - 48px)); margin:0 auto; padding:70px 0 45px; display:grid; grid-template-columns:1fr 310px; gap:70px; align-items:end; }
.learn-summary > div:first-child > p { margin:0 0 13px; color:var(--aqua-dark); font-size:9px; font-weight:850; letter-spacing:.2em; }
.learn-summary h1 { margin:0 0 11px; font-size:clamp(36px,4.5vw,54px); letter-spacing:-.055em; }
.learn-summary > div:first-child > span { color:#647987; font-size:14px; }
.learn-progress-card { padding:22px; border:1px solid #d3e3e0; border-radius:18px; background:white; box-shadow:0 15px 40px rgba(9,38,76,.05); }
.learn-progress-card > div:first-child { display:flex; align-items:end; justify-content:space-between; }.learn-progress-card span { color:#71838e; font-size:10px; font-weight:750; }.learn-progress-card strong { font-size:25px; }
.learn-progress-track { height:7px; margin:16px 0 10px; border-radius:99px; background:#e2ecea; overflow:hidden; }.learn-progress-track span { display:block; height:100%; border-radius:inherit; background:var(--aqua); transition:width 1.05s cubic-bezier(.22,1,.36,1) .15s; }
.learn-progress-card p { margin:0; color:#83919a; font-size:10px; }
.curriculum-path { width:min(760px,calc(100% - 48px)); margin:0 auto; }
.level-section { position:relative; scroll-margin-top:28px; }
.level-banner { min-height:150px; padding:28px 34px; display:grid; grid-template-columns:64px 1fr auto; gap:23px; align-items:center; position:relative; z-index:3; border-radius:26px; }
.level-banner .level-number { width:64px; height:64px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:Georgia,serif; font-size:22px; font-style:italic; }
.level-banner small { display:block; margin-bottom:8px; font-size:8px; font-weight:850; letter-spacing:.19em; }
.level-banner h2 { margin:0 0 7px; font-size:27px; letter-spacing:-.04em; }
.level-banner p { margin:0; font-size:11px; line-height:1.5; word-break:keep-all; }
.level-banner > strong { padding:8px 11px; border:1px solid currentColor; border-radius:999px; font-size:9px; letter-spacing:.05em; }
.level-section-active > .level-banner { background:var(--ink); color:white; box-shadow:0 18px 45px rgba(9,38,76,.14); }
.level-section-active > .level-banner small { color:#66d8cc; }.level-section-active > .level-banner p { color:#aec0c9; }.level-section-active > .level-banner > strong { color:#7de2d7; }
.level-one-lessons { width:min(100%,580px); margin:0 auto; padding:50px 0 30px; display:grid; gap:28px; position:relative; }
.level-one-rail { width:6px; position:absolute; z-index:0; top:91px; bottom:71px; left:50%; border-radius:99px; background:#d3dedd; transform:translateX(-50%); overflow:hidden; }
.level-one-rail span { width:100%; display:block; border-radius:inherit; background:var(--aqua); box-shadow:0 0 12px rgba(8,201,181,.4); transition:height 1.15s cubic-bezier(.22,1,.36,1) .18s; }
.path-lesson { min-height:98px; display:grid; grid-template-columns:1fr 96px 1fr; align-items:center; position:relative; scroll-margin-top:calc(50vh - 49px); color:var(--ink); }
.path-lesson-node { width:82px; height:82px; display:grid; place-items:center; grid-column:2; justify-self:center; position:relative; z-index:2; border:7px solid #edf8f6; border-radius:50%; background:#b8c4c7; color:white; font-family:Georgia,serif; font-size:24px; font-style:italic; box-shadow:0 0 0 2px #aebdc0,0 7px 0 #9eafb2; transition:transform .2s,box-shadow .2s; }
a.path-lesson:hover .path-lesson-node { transform:translateY(-3px); }
.path-lesson.complete .path-lesson-node { background:var(--aqua); color:#05353b; font-family:inherit; font-style:normal; font-weight:900; box-shadow:0 0 0 2px #21ad9f,0 7px 0 #159f91; }
.path-lesson.just-completed .path-lesson-node { animation:lesson-node-complete .72s cubic-bezier(.22,1,.36,1) .75s both; }
.path-lesson.active .path-lesson-node { box-shadow:0 0 0 3px white,0 0 0 6px var(--aqua),0 7px 0 #9eafb2; }
.path-lesson.locked { color:#8c9a9f; }
.path-lesson-copy { width:205px; padding:13px 16px; display:flex; flex-direction:column; position:relative; z-index:2; border:1px solid #d5e2df; border-radius:15px; background:rgba(255,255,255,.94); box-shadow:0 9px 24px rgba(9,38,76,.04); }
.path-lesson-left .path-lesson-copy { grid-column:1; grid-row:1; justify-self:end; text-align:right; }
.path-lesson-right .path-lesson-copy { grid-column:3; grid-row:1; justify-self:start; }
.path-lesson-copy small { color:#83949b; font-size:7px; font-weight:850; letter-spacing:.14em; }
.path-lesson-copy strong { margin:5px 0 4px; font-size:13px; line-height:1.3; }
.path-lesson-copy > span { color:#849399; font-size:8px; line-height:1.4; }
.path-lesson.complete .path-lesson-copy { border-color:#a6ddd6; }.path-lesson.complete .path-lesson-copy small,.path-lesson.complete .path-lesson-copy > span { color:#078d80; }
.path-lesson.locked .path-lesson-copy { opacity:.56; box-shadow:none; }
.level-gate { width:max-content; max-width:calc(100% - 30px); min-height:44px; margin:2px auto 38px; padding:0 16px 0 7px; display:flex; align-items:center; gap:10px; position:relative; z-index:2; border:1px solid #cad8d6; border-radius:999px; background:#e3ecea; color:#75868c; }
.level-gate > span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#bdc9c8; color:white; font-size:11px; font-weight:850; }.level-gate p { margin:0; font-size:9px; font-weight:750; }
.level-gate.open { border-color:#82d9cf; background:#e0f7f3; color:#087f75; }.level-gate.open > span { background:var(--aqua); color:#04333a; }
.level-section-future { padding-top:64px; }
.between-level-line { width:3px; height:72px; position:absolute; z-index:0; top:-4px; left:50%; background:#cbd7d6; transform:translateX(-50%); }
.level-section-future .level-banner { border:1px solid #ccd6d6; background:#dde5e4; color:#829095; box-shadow:none; }
.level-section-future .level-banner p { color:#8e9a9e; }.level-section-future .level-banner > strong { color:#8a979b; }
.level-section-future.next .level-banner { border-color:#9fdad3; background:#e2f3f0; color:#315b5d; }.level-section-future.next .level-banner > strong { color:#078d80; }
.future-lesson-preview { width:260px; height:42px; margin:22px auto 0; display:flex; align-items:center; justify-content:center; }
.future-lesson-preview span { width:32px; height:32px; flex:0 0 auto; border:5px solid #edf8f6; border-radius:50%; background:#b9c5c6; box-shadow:0 0 0 1px #aebbbc; }.future-lesson-preview i { width:60px; height:3px; background:#ccd7d6; }
.level-section-future.next .future-lesson-preview span { background:#9fcfc9; }
.level-lock-copy { margin:8px 0 0; color:#8b999e; text-align:center; font-size:9px; }
.prototype-note { margin:28px auto 0; color:#8a979d; text-align:center; font-size:10px; }

@keyframes lesson-node-complete {
  0% { transform:scale(.88); box-shadow:0 0 0 2px #21ad9f,0 7px 0 #159f91; }
  55% { transform:scale(1.12); box-shadow:0 0 0 9px rgba(8,201,181,.16),0 7px 0 #159f91; }
  100% { transform:scale(1); box-shadow:0 0 0 2px #21ad9f,0 7px 0 #159f91; }
}

@media (prefers-reduced-motion:reduce) {
  .learn-progress-track span,.level-one-rail span { transition:none; }
  .path-lesson.just-completed .path-lesson-node { animation:none; }
}

/* Lesson player */
.lesson-shell { min-height:100svh; background:#fbfdfc; color:var(--ink); display:grid; grid-template-rows:74px minmax(0,1fr) auto; }
.lesson-header { width:min(900px,calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:36px 1fr 40px; gap:18px; align-items:center; }
.lesson-header > a { width:34px; height:34px; display:grid; place-items:center; border:1px solid #d8e5e2; border-radius:50%; color:#6c7e88; font-size:18px; }
.lesson-header > span { color:#778892; text-align:right; font-size:10px; font-weight:800; }
.lesson-progress { height:7px; border-radius:99px; background:#e2ecea; overflow:hidden; }.lesson-progress span { display:block; height:100%; border-radius:inherit; background:var(--aqua); transition:width .35s ease; }
.lesson-stage { width:min(780px,calc(100% - 40px)); margin:0 auto; padding:45px 0 55px; display:flex; flex-direction:column; justify-content:center; }
.lesson-prompt { text-align:center; }.lesson-prompt > p { margin:0 0 14px; color:var(--aqua-dark); font-size:9px; font-weight:850; letter-spacing:.2em; }.lesson-prompt h1 { margin:0; font-size:clamp(29px,4vw,45px); line-height:1.3; letter-spacing:-.05em; word-break:keep-all; }.lesson-prompt > span { display:block; margin-top:12px; color:#70818c; font-size:12px; }
.sound-model { max-width:570px; margin:44px auto 0; padding:32px; display:grid; grid-template-columns:170px 1fr; gap:0 32px; align-items:center; border:1px solid #d8e5e2; border-radius:28px; background:white; box-shadow:0 20px 55px rgba(9,38,76,.07); }
.sound-letter { grid-row:span 2; min-height:170px; display:grid; place-items:center; border-radius:22px; background:var(--ink); color:white; font-family:Georgia,serif; font-size:112px; line-height:1; }
.sound-meta { align-self:end; display:flex; align-items:baseline; justify-content:space-between; gap:14px; }.sound-meta strong { color:var(--aqua-dark); font-family:Georgia,serif; font-size:28px; font-weight:400; }.sound-meta > span { font-family:Georgia,serif; font-size:35px; }.sound-meta b { color:var(--aqua-dark); font-weight:inherit; }
.sound-model > p { align-self:start; margin:12px 0 0; color:#617886; font-size:12px; line-height:1.65; word-break:keep-all; }
.audio-button { grid-column:1/-1; min-height:50px; margin-top:24px; border:1px solid #cfe0dd; border-radius:14px; background:#edf8f6; color:var(--ink); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }.audio-button > span { margin-right:8px; color:var(--aqua-dark); }.audio-button small { margin-left:8px; color:#89999f; font-size:8px; font-weight:700; }
.audio-button:disabled { opacity:.7; cursor:wait; }
.choice-activity { margin-top:40px; display:flex; flex-direction:column; align-items:center; }
.audio-disc { width:112px; height:112px; margin-bottom:35px; display:grid; place-items:center; align-content:center; gap:8px; border:0; border-radius:50%; background:var(--aqua); color:#043039; cursor:pointer; box-shadow:0 17px 38px rgba(8,201,181,.2); }.audio-disc > span { font-size:24px; transform:translateX(2px); }.audio-disc small { font-size:9px; font-weight:800; }
.audio-disc:disabled { opacity:.72; cursor:wait; }
.blend-display { margin:0 0 30px; color:var(--ink); font-family:Georgia,serif; font-size:46px; letter-spacing:.18em; }
.lesson-choices { width:min(100%,650px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lesson-choices button { min-height:112px; padding:18px; border:2px solid #d6e3e0; border-radius:18px; background:white; color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }.lesson-choices button:hover { transform:translateY(-2px); border-color:#9fcac4; }.lesson-choices button strong { display:block; font-family:Georgia,serif; font-size:31px; font-weight:400; }.lesson-choices button span { display:block; margin-top:6px; color:#718590; font-size:12px; }.lesson-choices button.correct { border-color:var(--aqua); background:#e3f8f4; }.lesson-choices button.incorrect { border-color:#e59c8e; background:#fff2ef; }
.lesson-choices button:disabled { opacity:.45; cursor:not-allowed; }.lesson-choices button:disabled:hover { transform:none; border-color:#d6e3e0; }
.lesson-feedback { min-height:122px; padding:22px max(20px,calc((100vw - 780px)/2)); display:grid; grid-template-columns:1fr 190px; gap:30px; align-items:center; border-top:1px solid #dce8e5; background:white; }.lesson-feedback.success { background:#e7f9f6; border-color:#b9e9e2; }.lesson-feedback.try-again { background:#fff4f0; border-color:#efd1c8; }.lesson-feedback strong { display:block; margin-bottom:5px; font-size:14px; }.lesson-feedback p { margin:0; color:#667c89; font-size:11px; line-height:1.5; }.lesson-primary { min-height:54px; padding:0 22px; border:0; border-radius:15px; background:var(--aqua); color:#052e38; display:inline-flex; align-items:center; justify-content:space-between; gap:25px; font:inherit; font-size:13px; font-weight:850; cursor:pointer; }.lesson-primary:disabled { opacity:.38; cursor:not-allowed; }.lesson-primary span { font-size:18px; }
.lesson-finished { display:flex; align-items:center; justify-content:center; background:#edf8f6; }
.lesson-result { width:min(680px,calc(100% - 40px)); padding:62px 50px; border:1px solid #d4e4e1; border-radius:30px; background:white; text-align:center; box-shadow:0 25px 70px rgba(9,38,76,.08); }.result-mark { width:70px; height:70px; margin:0 auto 23px; display:grid; place-items:center; border-radius:50%; background:var(--aqua); color:#043039; font-size:27px; font-weight:900; }.lesson-result > p:first-of-type { margin:0; color:var(--aqua-dark); font-size:9px; font-weight:850; letter-spacing:.2em; }.lesson-result h1 { margin:16px 0 13px; font-size:38px; letter-spacing:-.045em; }.result-objective { max-width:500px; margin:0 auto; color:#657a87; font-size:13px; line-height:1.7; word-break:keep-all; }.result-stats { margin:34px 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce7e5; border-bottom:1px solid #dce7e5; }.result-stats > div { padding:20px 8px; border-right:1px solid #dce7e5; }.result-stats > div:last-child { border-right:0; }.result-stats span { display:block; margin-bottom:8px; color:#7d8d95; font-size:9px; }.result-stats strong { font-size:19px; }.result-actions { display:flex; flex-direction:column; align-items:center; gap:18px; }.result-actions .lesson-primary { min-width:210px; }.lesson-secondary { color:#657985; font-size:11px; font-weight:750; }
.lesson-result.failed .result-mark { background:#f2c9bd; color:#8d3f30; }.lesson-result.failed > p:first-of-type { color:#a65343; }

/* Level 1 discovery lesson */
.discovery-lesson-shell { background:radial-gradient(circle at 50% 16%,#f0fbf8 0,#fbfdfc 38%); }
.discovery-lesson-shell .lesson-progress span { background:linear-gradient(90deg,#08c9b5,#52ddcd); }
.discovery-sound { position:relative; overflow:hidden; }
.discovery-sound::after { content:""; width:170px; height:170px; position:absolute; left:32px; top:32px; border:1px solid rgba(8,201,181,.32); border-radius:50%; opacity:0; pointer-events:none; }
.discovery-sound.heard::after { animation:sound-wave 1.15s ease-out; }
.discovery-sound.heard .sound-letter { background:linear-gradient(145deg,var(--ink),#11477c); box-shadow:0 0 0 8px rgba(8,201,181,.1); }
.anchor-meaning { margin-top:8px; display:block; color:#078d80; font-size:10px; font-weight:850; }
.word-emoji { display:grid; place-items:center; width:100%; height:100%; font-family:system-ui,sans-serif; font-size:clamp(42px,6vw,78px); line-height:1; }
.word-illustration-frame { position:relative; display:block; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
.word-illustration { object-fit:contain; object-position:center; }
.visual-choices button { min-height:188px; padding:13px 13px 17px; }
.visual-choices button strong { margin-top:6px; font-size:20px; }
.choice-visual { height:120px; margin:0!important; display:grid!important; place-items:center; overflow:hidden; border-radius:14px; background:#f2f9f7; color:#f3ad28!important; }
.choice-visual svg { width:100%; height:100%; max-width:145px; }
.visual-choices button:nth-child(2) .choice-visual { color:#08a895!important; }
.visual-choices button:nth-child(3) .choice-visual { color:#d68978!important; }
.meaning-reveal { width:min(100%,580px); margin:42px auto 0; display:grid; gap:14px; }
.meaning-word-audio { min-height:70px; padding:10px 20px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; border:1px solid #cfe0dd; border-radius:18px; background:white; color:var(--ink); font:inherit; cursor:pointer; }
.meaning-word-audio > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#def7f3; color:#078d80; font-size:10px; }
.meaning-word-audio strong { font-family:Georgia,serif; font-size:31px; font-weight:400; text-align:left; }
.meaning-word-audio strong i { display:inline-block; min-width:32px; margin-right:5px; padding:5px 7px; border-radius:8px; background:#eef8f6; color:var(--ink); font-style:normal; text-align:center; }
.meaning-word-audio small { color:#82939a; font-size:9px; font-weight:750; }
.meaning-word-audio:disabled { opacity:.7; cursor:wait; }
.meaning-curtain { min-height:250px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border:1px dashed #9ecdc7; border-radius:25px; background:linear-gradient(145deg,#e9f8f5,#f7fcfb); color:var(--ink); font:inherit; cursor:pointer; }
.meaning-curtain:disabled { opacity:.55; cursor:not-allowed; }
.meaning-curtain span { color:#60808a; font-size:11px; font-weight:800; }
.meaning-curtain strong { width:66px; height:66px; display:grid; place-items:center; border-radius:50%; background:var(--aqua); color:#04343a; font-family:Georgia,serif; font-size:31px; font-weight:400; box-shadow:0 15px 30px rgba(8,201,181,.23); }
.meaning-card { min-height:250px; padding:25px 38px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:32px; border:2px solid var(--aqua); border-radius:25px; background:white; box-shadow:0 20px 55px rgba(9,38,76,.08); animation:meaning-reveal .55s cubic-bezier(.22,1,.36,1) both; }
.meaning-visual { height:190px; display:grid; place-items:center; overflow:hidden; border-radius:21px; background:#eff9f7; color:#f3ad28; }
.meaning-visual svg { width:100%; height:100%; }
.meaning-card small,.discovery-unlocks small { color:var(--aqua-dark); font-size:8px; font-weight:900; letter-spacing:.16em; }
.meaning-card strong { display:block; margin:9px 0 5px; font-family:Georgia,serif; font-size:49px; font-weight:400; }
.meaning-card p { margin:0; font-size:22px; font-weight:850; }
.word-match-board { width:min(100%,640px); margin:45px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.match-column { display:grid; gap:13px; }
.match-column button { min-height:104px; padding:15px 20px; display:flex; align-items:center; gap:15px; border:2px solid #d5e3e0; border-radius:19px; background:white; color:var(--ink); font:inherit; cursor:pointer; transition:transform .15s,border-color .15s,opacity .2s; }
.match-column button:hover { border-color:#96cec7; transform:translateY(-2px); }
.match-column button.active { border-color:var(--aqua); background:#e8f9f6; box-shadow:0 0 0 4px rgba(8,201,181,.1); }
.match-column button.matched { border-color:#9ad8cf; background:#e4f8f4; opacity:.58; pointer-events:none; }
.match-column:not(.meanings) button > span { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#e2f7f3; color:#078d80; font-size:9px; }
.match-column button > strong { font-family:Georgia,serif; font-size:28px; font-weight:400; }
.match-column.meanings button > strong { font-family:inherit; font-size:16px; font-weight:850; }
.mini-visual { width:72px; height:68px; display:grid; place-items:center; overflow:hidden; flex:0 0 auto; border-radius:13px; background:#eff8f6; color:#f3ad28; }
.mini-visual svg { width:100%; height:100%; }
.mini-visual .word-emoji { font-size:35px; }
.word-builder { width:min(100%,600px); margin:42px auto 0; display:flex; flex-direction:column; align-items:center; }
.builder-audio { min-height:48px; padding:0 20px; display:flex; align-items:center; gap:11px; border:1px solid #cfe1de; border-radius:999px; background:#ecf8f6; color:var(--ink); font:inherit; font-size:11px; font-weight:850; cursor:pointer; }
.builder-audio span { color:#078d80; font-size:10px; }
.builder-slots { margin:32px 0 24px; display:flex; justify-content:center; gap:10px; }
.builder-slots button { width:76px; height:82px; padding:0; display:grid; place-items:center; border:2px dashed #bdd0cc; border-radius:17px; background:white; color:var(--ink); font-family:Georgia,serif; font-size:39px; cursor:pointer; }
.builder-slots button:disabled { color:var(--ink); cursor:default; opacity:1; }
.builder-slots.complete button { border-style:solid; border-color:var(--aqua); background:#e5f8f5; animation:builder-pop .38s cubic-bezier(.22,1,.36,1) both; }
.builder-slots.wrong button { border-color:#e39c8d; background:#fff1ed; }
.builder-tiles { display:flex; justify-content:center; gap:12px; }
.builder-tiles button { width:68px; height:68px; border:0; border-radius:15px; background:var(--ink); color:white; font-family:Georgia,serif; font-size:31px; cursor:pointer; box-shadow:0 6px 0 #061a34; transition:transform .15s,opacity .15s; }
.builder-tiles button:hover { transform:translateY(-2px); }
.builder-tiles button[data-used="true"] { opacity:.18; pointer-events:none; transform:translateY(3px); }
.builder-tiles button:disabled { opacity:.38; cursor:not-allowed; }
.builder-reset { margin-top:22px; padding:8px 13px; border:0; background:transparent; color:#a55242; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.discovery-result { width:min(760px,calc(100% - 40px)); padding-top:46px; }
.discovery-result .result-mark { font-family:Georgia,serif; }
.discovery-unlocks { margin:30px 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.discovery-unlocks article { min-height:145px; padding:14px 22px 14px 14px; display:grid; grid-template-columns:130px 1fr; align-items:center; gap:17px; border:1px solid #cfe3df; border-radius:20px; background:#f8fcfb; text-align:left; }
.unlock-visual { height:115px; display:grid; place-items:center; overflow:hidden; border-radius:15px; background:white; color:#f3ad28; }
.unlock-visual svg { width:100%; height:100%; }
.discovery-unlocks strong { display:block; margin:6px 0 2px; font-family:Georgia,serif; font-size:32px; font-weight:400; }
.discovery-unlocks p { margin:0; font-size:14px; font-weight:850; }

@keyframes sound-wave { 0%{transform:scale(.6);opacity:0} 22%{opacity:.75} 100%{transform:scale(1.55);opacity:0} }
@keyframes meaning-reveal { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }
@keyframes builder-pop { from{transform:translateY(5px) scale(.93)} to{transform:none} }

@media (max-width:700px) {
  .voice-screen { width:calc(100% - 32px); padding:42px 0 55px; }.voice-intro h1 { font-size:36px; }.voice-intro > span { padding:0 18px; font-size:12px; line-height:1.6; }.voice-grid { margin-top:34px; grid-template-columns:1fr 1fr; gap:11px; }.voice-card { border-radius:18px; }.voice-card-copy { min-height:110px; padding:14px 14px 17px; }.voice-card-copy strong { font-size:23px; }.voice-card-copy > span { padding-right:26px; display:block; font-size:9px; }.voice-play { right:11px; bottom:13px; width:30px; height:30px; }.voice-actions .lesson-primary { width:100%; }.voice-actions > p { text-align:center; }
  .learn-header { height:72px; padding:0 16px; }.learn-header nav { gap:10px; }.learn-header nav span:not(:first-child) { display:none; }.learn-header nav a { padding:0 12px; }
  .learn-summary { width:calc(100% - 40px); padding:48px 0 35px; grid-template-columns:1fr; gap:28px; }.learn-summary h1 { font-size:37px; }.learn-progress-card { padding:18px; }
  .curriculum-path { width:calc(100% - 28px); }.level-banner { min-height:132px; padding:22px 19px; grid-template-columns:48px 1fr; gap:14px; border-radius:21px; }.level-banner .level-number { width:48px; height:48px; font-size:17px; }.level-banner h2 { font-size:22px; }.level-banner p { font-size:10px; }.level-banner > strong { grid-column:2; width:max-content; margin-top:-6px; }
  .level-one-lessons { width:100%; padding-top:42px; gap:24px; }.level-one-rail { top:81px; bottom:65px; }.path-lesson { grid-template-columns:1fr 80px 1fr; min-height:88px; }.path-lesson-node { width:70px; height:70px; border-width:6px; font-size:20px; }.path-lesson-copy { width:calc((100vw - 116px)/2); min-width:0; padding:10px 9px; }.path-lesson-copy strong { font-size:11px; }.path-lesson-copy > span { font-size:7px; }.path-lesson-left .path-lesson-copy { margin-right:3px; }.path-lesson-right .path-lesson-copy { margin-left:3px; }.level-section-future { padding-top:52px; }.between-level-line { height:59px; }.future-lesson-preview { width:220px; }
  .lesson-stage { padding:35px 0 42px; }.lesson-prompt h1 { font-size:29px; }
  .sound-model { width:100%; margin-top:32px; padding:22px; grid-template-columns:118px 1fr; gap:0 20px; }.sound-letter { min-height:125px; font-size:80px; }.sound-meta { align-items:flex-start; flex-direction:column; gap:6px; }.sound-meta strong { font-size:21px; }.sound-meta > span { font-size:28px; }.sound-model > p { font-size:11px; }
  .audio-disc { width:94px; height:94px; }.blend-display { font-size:36px; }.lesson-choices { grid-template-columns:1fr; gap:10px; }.lesson-choices button { min-height:72px; }.lesson-choices button strong { font-size:25px; }
  .lesson-feedback { min-height:150px; padding:18px 20px; grid-template-columns:1fr; gap:15px; }.lesson-feedback .lesson-primary { width:100%; }
  .lesson-result { padding:42px 22px; }.lesson-result h1 { font-size:31px; }.result-stats strong { font-size:16px; }
  .visual-choices { grid-template-columns:repeat(3,1fr); }.visual-choices button { min-height:135px; padding:8px; }.choice-visual { height:82px; }.visual-choices button strong { font-size:14px; }
  .meaning-reveal { margin-top:30px; }.meaning-card { min-height:220px; padding:18px; grid-template-columns:1fr 1fr; gap:17px; }.meaning-visual { height:155px; }.meaning-card strong { font-size:38px; }.meaning-card p { font-size:18px; }
  .word-match-board { margin-top:30px; gap:10px; }.match-column button { min-height:88px; padding:10px; gap:7px; flex-direction:column; justify-content:center; }.match-column:not(.meanings) button > span { width:25px; height:25px; }.match-column button > strong { font-size:23px; }.match-column.meanings button > strong { font-size:14px; }.mini-visual { width:60px; height:45px; }
  .builder-slots { margin-top:26px; }.builder-slots span { width:62px; height:68px; font-size:32px; }.builder-tiles button { width:58px; height:58px; font-size:27px; }
  .discovery-result { padding:35px 18px; }.discovery-unlocks { gap:8px; }.discovery-unlocks article { min-height:190px; padding:10px; grid-template-columns:1fr; gap:8px; text-align:center; }.unlock-visual { height:100px; }.discovery-unlocks strong { font-size:27px; }
}