:root{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#203b2f;background:#f8f8f0;--green:#265941;--muted:#587063;--line:#e5e7dc;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ba713d;outline-offset:3px}
.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100svh}.rail{position:sticky;top:0;height:100svh;padding:35px 23px 24px;background:#fcfcf6;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;font:700 33px/1 var(--serif);letter-spacing:-1px}.brand img{width:49px;height:49px}.brand span{display:block;font:600 10px/1.5 system-ui;letter-spacing:1px;color:var(--muted);margin-top:4px}.rail-label{margin:46px 0 11px 11px;font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}.nav{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;margin:4px 0;font-size:14px;font-weight:700}.nav svg,.btn svg,.icon-btn svg{width:19px;height:19px;flex:none}.nav:hover,.nav.current{background:#e9f1e5;color:#285941}.rail-note{margin-top:auto;padding:14px;background:#f2f0e3;display:flex;align-items:flex-start;gap:10px;border-radius:14px;font-size:13px}.rail-note p{margin:3px 0 0;color:var(--muted);font-size:12px}.tiny-spark{color:#95623b}
main{width:min(100%,1260px);padding:30px clamp(18px,4vw,64px) 56px;margin-inline:auto;outline:none}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#426752}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;background:#fffdf5;border:1px solid #e9e5d6;border-radius:999px;font-size:12px;color:#536b5b;font-weight:700;white-space:nowrap}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4.5vw,56px);letter-spacing:-.05em;line-height:1.08;margin-bottom:14px}h2{font-size:24px;letter-spacing:-.035em;margin-bottom:8px}h3{margin-bottom:7px}p{line-height:1.6}.hero{background:#e5efdc;border:1px solid #d3e4cb;border-radius:26px;display:grid;grid-template-columns:1fr .95fr;align-items:center;overflow:hidden;min-height:287px}.hero-copy{padding:33px 0 33px 35px;position:relative;z-index:1}.hero-copy p{font-size:14px;color:#3e6250;max-width:340px}.hero .eyebrow{display:block;margin-bottom:14px}.hero-img{width:110%;margin-left:-5%;min-width:250px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:12px;background:var(--green);color:white;font-weight:750;font-size:14px;padding:10px 16px;min-height:44px}.btn:hover{filter:brightness(1.09)}.btn.secondary{color:#27553e;background:#fffdf7;border-color:#dce4d6}.btn.soft{background:#e8f1e5;color:var(--green)}.btn.small{font-size:13px;padding:8px 13px;min-height:39px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:31px 0 14px}.section-head h2,.section-head p{margin-bottom:0}.muted{color:var(--muted);font-size:14px}.link{font-size:13px;font-weight:800;color:#265941;white-space:nowrap}.two,.families,.lesson-grid,.word-grid{display:grid;gap:13px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.families{grid-template-columns:repeat(6,minmax(0,1fr))}.tile{background:#fffef9;border:1px solid var(--line);border-radius:17px;transition:transform .15s,border-color .15s}.tile:hover{border-color:#8dac8f;transform:translateY(-2px)}.module{padding:19px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.module h3,.module p{margin:0}.module p{font-size:13px;color:var(--muted);margin-top:4px}.module-icon{width:53px;height:53px;display:grid;place-items:center;border-radius:14px;background:#f7e7b8;color:#71491f;font:700 23px var(--serif)}.module:nth-child(2) .module-icon{background:#e3ddef;color:#65487f}.family{padding:13px 7px;text-align:center}.family strong{font:700 25px var(--serif);display:block;margin-bottom:3px}.family span{font-size:11px;color:var(--muted)}.family:nth-child(3n+1){background:#fff6db}.family:nth-child(3n+2){background:#eaf2e2}.family:nth-child(3n){background:#f2eafa}.footer{margin-top:27px;font-size:12px;color:#5b6b62;line-height:1.6}.footer a{text-decoration:underline;text-underline-offset:2px}.page-head{margin:19px 0 20px}.page-head h1{font-size:clamp(32px,5vw,49px)}.page-head p{margin-bottom:0}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.tab{background:#fffef9;border:1px solid var(--line);border-radius:999px;padding:9px 14px;min-height:41px;font-size:13px;font-weight:750}.tab[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}.stage-intro{padding:20px;background:#e9f1e2;border:1px solid #dbe8d4;border-radius:18px}.stage-intro h2,.stage-intro p{margin-bottom:0}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:15px}.lesson-tile{padding:17px}.lesson-tile h3{font-size:18px}.lesson-tile p{font-size:13px;margin:0;color:var(--muted)}.lesson-tile .tag{margin-top:12px}.tag{display:inline-block;border-radius:7px;background:#ece8f4;color:#624b78;padding:4px 8px;font-size:11px;font-weight:750}.tag.video{background:#f7ebcf;color:#78562d}
.search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0}.search{border:1px solid #cdd9cd;background:#fffefb;padding:10px 13px;border-radius:12px;min-height:44px;width:min(100%,340px);color:inherit}.word-grid{grid-template-columns:repeat(auto-fill,minmax(111px,1fr))}.word-btn{border:1px solid var(--line);background:#fffefa;min-height:70px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:12px;font:700 23px var(--serif);overflow-wrap:anywhere}.word-btn:hover,.word-btn.selected{border-color:#8dac8f;background:#eaf2e7}.word-btn small{font:700 12px system-ui;color:#426752}.flash{margin:0 0 18px;padding:18px;border:1px solid #e0d9e9;background:#f1ebf7;border-radius:17px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.flash strong{font:700 clamp(35px,7vw,60px) var(--serif)}.flash div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.player-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}.player-box,.practice{background:#fffef9;border:1px solid var(--line);border-radius:19px;padding:16px;min-width:0}.player-box video{width:100%;display:block;background:#dfeada;border-radius:12px;aspect-ratio:16/9}.player-box p{font-size:13px;color:var(--muted);margin:9px 0 0}.word-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 15px}.word-tabs .tab{font:700 17px var(--serif);padding:6px 13px}.focus-card{display:grid;place-items:center;background:#e9f2e4;border-radius:15px;min-height:133px;margin-bottom:12px;padding:15px}.focus-word{font:700 clamp(46px,8vw,76px)/1 var(--serif);letter-spacing:.01em}.focus-word .vowel{color:#a5512a}.focus-card p{margin:8px 0 0;text-align:center}.sounds{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}.sound{min-width:53px;padding:9px 10px;background:#fff9e7;border:1px solid #e8d9a9;border-radius:11px;font:700 23px var(--serif)}.sound small{display:block;margin-top:3px;font:12px system-ui;color:#75572e}.sound.active{background:#f8d4a1;border-color:#ab6735;transform:translateY(-2px)}.actions{display:flex;gap:7px;flex-wrap:wrap}.status{min-height:22px;margin:10px 0 4px;font-size:13px;color:#41654f;font-weight:700}.inline-note{font-size:12px;color:#556c5f;margin:7px 0 0}.notice{background:#fff8de;border-radius:13px;padding:12px;color:#624b2d}
@media(max-width:1040px){.shell{grid-template-columns:185px 1fr}.rail{padding:28px 15px}.module{gap:9px;padding:14px}.module-icon{width:42px;height:42px}.families{grid-template-columns:repeat(3,minmax(0,1fr))}.player-layout{grid-template-columns:1fr}}
@media(max-width:680px){.shell{display:block}.rail{position:sticky;top:0;z-index:5;height:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.brand{font-size:25px;gap:5px}.brand img{width:34px;height:34px}.brand span,.rail-label,.rail-note,.nav svg{display:none}#nav{display:flex;gap:2px}.nav{font-size:12px;padding:9px 8px;margin:0}.top{margin-bottom:15px}main{padding:17px 14px 32px}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:24px 22px 0}.hero-copy p{margin-bottom:12px}.hero-img{width:min(100%,340px);margin:-3px auto 0}.two{grid-template-columns:1fr}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{margin-top:22px}.section-head h2{font-size:20px}.word-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.word-btn{font-size:19px;min-height:59px;padding:9px}.pill{font-size:11px}.actions .btn{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Lily mini classroom */
:root{color:#292140;background:#faf8ff;--green:#5539b4;--muted:#675e7d;--line:#e9e3f2}
body{background:radial-gradient(ellipse at 100% 0%,#f4eeff 0,transparent 48%),#faf8ff}
.shell{display:block}
.rail{z-index:10;position:sticky;top:0;flex-direction:row;align-items:center;justify-content:space-between;height:auto;padding:13px max(28px,calc((100vw - 1140px)/2));border:0;border-bottom:1px solid #eae2f4;background:#faf8fff2;backdrop-filter:blur(12px)}
.brand{color:#302455;font-size:31px;letter-spacing:-.06em}.brand span{letter-spacing:.12em;color:#6f6482}.brand img{width:44px;height:44px}.rail-label,.rail-note{display:none}
#nav{display:flex;gap:8px}.nav{color:#605471;margin:0;padding:9px 15px;min-height:42px}.nav:hover,.nav.current{background:#eee7ff;color:#4e32a9}
main{max-width:1190px;padding:28px 25px 52px}
.eyebrow{color:#665195;letter-spacing:.15em}.pill{background:#fff;border-color:#e8def6;color:#604a83}
.hero{position:relative;background:linear-gradient(112deg,#eee3ff 0%,#efe7ff 50%,#e9dcfb 100%);border:1px solid #e5d7f9;border-radius:32px;grid-template-columns:1fr 1.05fr;min-height:322px}
.hero-copy{padding:36px 0 36px 38px}.hero-copy h1{color:#302058;line-height:1.03;font-size:clamp(36px,5.7vw,70px);margin-bottom:14px}.hero-copy h1 em{font-style:normal;color:#6448c2}.hero-copy p{color:#625180;max-width:345px;font-size:15px}.hero-img{width:100%;margin:0;max-height:355px;object-fit:contain}
.hero-kicker{display:inline-flex!important;align-items:center;gap:7px;color:#5c4590;background:#ffffffb8;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:780;letter-spacing:.09em}
.hero-kicker i{display:block;width:7px;height:7px;border-radius:50%;background:#9771e5}
.btn{border-radius:13px;background:#6042c3;box-shadow:0 3px 0 #45279625}.btn.secondary{color:#553e94;background:#fff;border-color:#e4d9f1;box-shadow:none}.btn.soft{background:#eee7fb;color:#5437ab;box-shadow:none}
.section-head{align-items:center;margin-top:32px}.section-head h2{font-size:23px}
.two,.families{gap:14px}.module{padding:20px 19px;background:#fff;gap:13px;border-color:#ebe1f4}.module-icon{background:#eee6ff;color:#6447bd;border-radius:16px}.module:nth-child(2) .module-icon{background:#e4f5ed;color:#267554}
.tile:hover{border-color:#ab92df}.family{position:relative;padding:18px 7px;background:#fff!important;border-color:#eae2f4;border-radius:16px}.family strong{color:#5435a6;font-size:27px}.family span{color:#6a5b80}.family:hover{background:#f6f0ff!important}
.link{color:#5736b0}.footer{color:#72677f}.page-head h1{color:#332452}.muted{color:var(--muted)}
.stage-intro{background:linear-gradient(110deg,#ede3ff,#f7efff);border-color:#e6d8f9}.tab{background:#fff;border-color:#e7def2}.tab[aria-pressed=true]{background:#5b3dbb;border-color:#5b3dbb}.lesson-tile{background:#fff}.tag{background:#eee8fb;color:#62469a}.tag.video{background:#fff0d5;color:#785026}
.player-box,.practice{background:white;border-radius:21px}.player-box video{background:#eee5ff}.focus-card{background:#f2eaff}.focus-word{color:#362257}.focus-word .vowel{color:#aa4d69}.sound{background:#fcf7ff;border-color:#e9dcfa;color:#392950}.sound small{color:#6e5787}.sound.active{background:#e7d2ff;border-color:#8f62d7}.status{color:#5e448a}
.word-btn{background:#fff}.word-btn:hover,.word-btn.selected{border-color:#ad90e0;background:#f1e9ff}.word-btn small{color:#6d51b5}.flash{background:#eee5ff;border-color:#e6daf7}.search{background:#fff;border-color:#e5daef}
.path-progress{margin-top:10px;display:flex;align-items:center;gap:8px;color:#796890;font-size:11px}.path-progress meter{width:70px;height:7px;appearance:none}.path-progress meter::-webkit-meter-bar{background:#f0e8fc;border:none}.path-progress meter::-webkit-meter-optimum-value{background:#8f73d5}
.jump{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.jump button{min-height:36px;border:1px solid #e8dff2;background:#f9f5ff;border-radius:9px;padding:5px 10px;font:700 15px var(--serif)}.jump button:hover{background:#e9dcfb}
@media(max-width:870px){.rail{padding-inline:24px}.hero-copy{padding-left:27px}.module{padding:14px}.hero{min-height:280px}}
@media(max-width:680px){
  .rail{position:sticky;top:0;padding:10px 15px;min-height:54px;background:#faf8fff3}.brand{font-size:26px}.brand img{width:34px;height:34px}.brand span{display:inline-block;margin:0 0 0 9px;vertical-align:middle;font-size:9px}
  #nav{position:fixed;bottom:0;left:0;right:0;background:#fffcffef;backdrop-filter:blur(16px);border-top:1px solid #ece2f4;display:grid;grid-template-columns:repeat(3,1fr);padding:4px 12px calc(4px + env(safe-area-inset-bottom));gap:4px}
  .nav{flex-direction:column;justify-content:center;gap:2px;font-size:11px;min-height:50px;padding:4px;border-radius:11px}.nav svg{display:block;width:19px;height:19px}.nav.current{background:#f0e8fc}
  main{padding:14px 14px calc(79px + env(safe-area-inset-bottom))}.top{margin-bottom:11px}.hero{grid-template-columns:1fr;border-radius:23px;min-height:0}.hero-copy{padding:20px 20px 0}.hero-copy h1{font-size:clamp(34px,9vw,51px);margin-bottom:7px}.hero-copy h1 br{display:none}.hero-copy p{font-size:13px;margin-bottom:11px}.hero-img{width:68%;min-width:0;max-width:268px;margin:-9px 10px 0 auto}
  .hero-kicker{margin-bottom:10px!important}.hero .btn{min-height:39px;padding:8px 12px;font-size:13px}.section-head{margin:22px 0 10px}.section-head h2{font-size:20px}
  .two{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.module{grid-template-columns:1fr auto;align-items:start;gap:8px;padding:12px}.module-icon{grid-column:1;grid-row:1;width:38px;height:38px;font-size:19px}.module>div:nth-child(2){grid-column:1/-1;grid-row:2}.module>span{grid-column:2;grid-row:1;color:#786599}.module h3{font-size:16px}.module p{font-size:11px}.path-progress{margin-top:6px}.path-progress meter{width:45px}.families{gap:9px}.family{padding:12px 4px}.family strong{font-size:22px}
  .player-box,.practice{padding:12px}.jump button{flex:1}.page-head{margin:15px 0}.tabs{gap:5px}.tab{padding:7px 10px;min-height:39px}.lesson-tile{padding:13px}
}
@media(max-width:680px){.rail{backdrop-filter:none}}
.hero-img{height:auto}
@media(max-width:680px){
  .hero-copy h1 br{display:block}
  .hero-img{margin:-27px 8px -3px auto;width:61%}
}

.vowel-families{grid-template-columns:repeat(5,minmax(0,1fr))}
.vowel-tabs .tab{padding-inline:16px}
.vowel-head{margin-top:18px}
.vowel-head h2 span{margin-left:5px;color:#6f51b6;font:700 19px var(--serif)}
@media(max-width:680px){
  .vowel-families{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vowel-tabs .tab{padding-inline:10px}
}

.cvc-card{gap:8px;min-height:0;padding:15px 12px 11px}
.cvc-card>p{margin:0;font-size:11px}
.cvc-card .focus-word{position:relative;font-size:clamp(52px,11vw,84px);line-height:1.04;padding-bottom:5px}
.picture-slot{display:grid;place-items:center;width:clamp(142px,47vw,190px);aspect-ratio:224/166;background:#fff;border:1px solid #e7dbf4;border-radius:15px;overflow:hidden;font-size:12px;color:#675e7d}
.picture-slot img{width:100%;height:100%;object-fit:contain}
.picture-toggle{min-height:32px;border:0;border-radius:9px;padding:3px 10px;background:#fff8ff;color:#553e94;font-size:11px;font-weight:750}
.picture-toggle:hover{background:#f4ddfd}
.cvc-steps{display:flex;justify-content:center;gap:6px;align-items:center;font-size:12px;font-weight:750;color:#523681;margin:13px 0 0}
.cvc-steps span{color:#866dad}
.cvc-card .focus-word.blending::after{content:"";position:absolute;bottom:1px;left:0;width:100%;height:4px;border-radius:99px;background:#815ac9;transform-origin:left;animation:blend-sweep .62s ease-out both}
@keyframes blend-sweep{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.cvc-card .focus-word.blending::after{animation:none}}

.cvc-card .focus-word{display:flex;justify-content:center;gap:.025em;align-items:center}
.cvc-letter{display:grid;place-items:center;width:.72em;height:1.04em;border:2px solid transparent;border-radius:.19em;transition:transform .18s,background .18s,border-color .18s,width .32s,color .18s}
.focus-word[data-mode="split"] .cvc-letter{width:.87em;background:#fff9ff;border-color:#e8dbf8;color:#675e7d}
.focus-word[data-mode="split"] .current-letter{transform:translateY(-.07em);background:#fad4e5;color:#6e315e;border-color:#b97bb6;box-shadow:0 4px 0 #e5b5dc}
.focus-word[data-mode="joined"] .cvc-letter{width:.55em;border-color:transparent;background:transparent}
.picture-slot{width:clamp(154px,50vw,205px)}
.guide-panel{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.guide-panel[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.cvc-letter{transition:none}}