:root{--bg:#f5f6fb;--primary:#6250df;--primary2:#8974ee;--soft:#eeebff;--text:#242139;--muted:#67667a;--shadow:0 5px 20px rgba(37,28,77,.045)}
body{background:#f5f6fb;font-size:16px;line-height:1.55}
#app{max-width:1120px;padding:36px 32px 110px}.brand h1{font-size:30px;letter-spacing:0}.brand p{font-size:14px}.top{margin-bottom:26px}.hero{background:linear-gradient(115deg,#5540c5,#8670e8);border-radius:26px;padding:28px 32px;box-shadow:none}.hero .title{font-size:36px}.hero .sub{font-size:16px}.hero .eyebrow,.herofoot{font-size:14px}.hero:after{display:none}.cta{max-width:340px;box-shadow:0 4px 0 #dcd7ff}.stat{border:1px solid #e7e5f0;box-shadow:none;padding:20px 10px}.stat span{font-size:14px}.stat b{font-size:28px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.quick-actions button{text-align:left;font-size:18px;border:1px solid #e7e5f0;padding:20px}.quick-actions span{display:block;font-size:14px;color:var(--muted);font-weight:400;margin-top:5px}.sectionhead h2{font-size:21px}.sectionhead small{font-size:14px}#unitList{display:grid;grid-template-columns:1fr 1fr;gap:14px}.unit{margin:0;min-height:115px;border:1px solid #e7e5f0;border-radius:20px;padding:20px 16px;transition:transform .15s,border-color .15s}.unit:hover{transform:translateY(-3px);border-color:#b5a6f2}.unit b{font-size:16px}.unit small,.unit .pct{font-size:14px}.unit b{line-height:1.4;margin-bottom:5px}.unit:nth-child(2) .uicon{background:#fff0dd}.unit:nth-child(3) .uicon{background:#e1f2f6}.unit:nth-child(4) .uicon{background:#ffe6ee}.unit:nth-child(5) .uicon{background:#eaf2dd}.unit:nth-child(6) .uicon{background:#fff0dd}.bottom{width:min(760px,100%);bottom:14px;border:1px solid #e7e5f0;border-radius:24px;padding:12px 16px;background:rgba(255,255,255,.96);box-shadow:0 8px 30px #28223a14}.nav{font-size:14px;min-height:50px;min-width:80px}.nav.on{background:var(--soft);border-radius:14px}.screen:not(#home){max-width:760px;margin:auto}.screen#learn,.screen#quiz,.screen#result{max-width:660px}.card{border:1px solid #e7e5f0;padding:30px}.bigword{font-size:clamp(30px,6vw,52px);line-height:1.3}.memory{font-size:16px;line-height:1.8;padding:18px}.tag,.pill,.tab,.badge{font-size:14px}.row small{font-size:14px}.row .grow{min-width:0;overflow-wrap:anywhere}.row .sound{flex-shrink:0}.parentCard p{font-size:16px}.setting small{font-size:14px}.setting{gap:15px}.sound,.back,.btn,.tab{min-height:44px}.btn{transition:filter .15s,transform .15s}.btn:hover,.cta:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.65}.btn.primary{box-shadow:0 4px 0 #4835af}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f2a900;outline-offset:4px}.toast{font-size:14px;max-width:calc(100% - 24px);white-space:normal;text-align:center;bottom:110px}.week-row{display:grid;grid-template-columns:90px 1fr 80px;gap:12px;align-items:center;margin:10px 0;font-size:14px}.week-track{background:#eeeaf8;height:12px;border-radius:10px;overflow:hidden}.week-track i{display:block;background:var(--primary);height:100%}.help-note{font-size:14px;color:var(--muted);line-height:1.8;margin-top:16px}.feedback{min-height:32px}.resultSub{font-size:16px}.quiz-footer{font-size:14px;color:var(--muted);margin-top:12px}.correction-letter{color:#ac2639;background:#ffe4e8;padding:2px 3px;border-radius:4px}.backrow .pill{text-align:right;max-width:65%}.search{border:1px solid #e7e5f0;font-size:16px}.parentCard{border:1px solid #e7e5f0}
@media(min-width:900px){#home.active{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}#home .top,#home>.section,#home>.quick-actions{grid-column:1/-1}#home .hero{grid-column:1}#home>.statgrid{margin:0;grid-template-columns:1fr;gap:12px}#home>.statgrid .stat{display:flex;align-items:center;justify-content:space-between;padding:12px 26px}#home>.statgrid .stat b{order:2}#home>.statgrid .stat span{font-size:16px}.quick-actions{margin-top:24px}}
@media(max-width:600px){#app{padding:20px 16px 110px}.brand h1{font-size:25px}.hero{padding:24px}.hero .title{font-size:30px}.hero .sub{font-size:14px}.cta{max-width:none}#unitList{grid-template-columns:1fr}.bottom{bottom:0;border-radius:20px 20px 0 0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.nav{min-width:60px}.stat{padding:14px 4px}.stat span{font-size:14px}.quick-actions{gap:10px}.quick-actions button{padding:14px 12px;font-size:16px}.quick-actions span{font-size:14px}.card{padding:24px 18px}.row{padding:14px 10px;gap:8px}.row .badge{font-size:12px}.unit{padding:17px 13px}.setting{align-items:flex-start}.sectionhead h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* V4 word-to-sentence learning layer */
.word-details{margin:10px auto 16px;max-width:430px}.ipa{font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;color:#4235a8;letter-spacing:.02em}.chunks{display:inline-block;margin-top:7px;padding:5px 10px;border-radius:999px;background:#fff5d7;color:#835b00;font-size:.82rem;font-weight:850;letter-spacing:.06em}.phrase{margin:12px auto 0;font-size:.9rem;color:#666174;font-weight:700}.example-line{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;border:1px solid #ded9fb;border-radius:14px;background:#f7f5ff;color:#37304f;padding:10px 12px;text-align:left;font-size:.92rem;font-weight:750}.example-line i,.story-line i{font-style:normal;flex:none}.v4-unit-actions{margin-top:14px}.reader-card,.writing-card{background:linear-gradient(155deg,#fff 0%,#f5f2ff 100%);border:1px solid #e2ddfb;border-radius:28px;padding:28px 22px;box-shadow:0 10px 35px rgba(70,48,159,.08)}.reader-label{display:inline-block;border-radius:999px;background:#e9e4ff;color:#5540bf;padding:5px 10px;font-size:.74rem;font-weight:900;letter-spacing:.08em}.reader-card h1,.writing-card h1{margin:13px 0 0;font-size:2rem;line-height:1.2}.reader-cn{margin:4px 0 16px;color:var(--muted)}.story-art,.writing-art{text-align:center;font-size:76px;line-height:1;margin:13px 0 18px;filter:drop-shadow(0 8px 8px rgba(69,44,158,.16))}.story-lines{display:grid;gap:9px}.story-line{display:grid;grid-template-columns:28px 1fr 24px;align-items:center;gap:9px;width:100%;border:1px solid #e7e3f6;background:#fff;border-radius:15px;padding:11px 10px;text-align:left;color:#332d4f;font-size:1rem}.story-line b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eeeaff;color:#5a46c4;font-size:.78rem}.writing-card label{display:block;margin:17px 0 7px;font-size:.98rem;color:#3c3653}.write-input{width:100%;min-height:46px;border:2px solid #e2ddf4;border-radius:13px;background:#fff;padding:10px 12px;color:#2f2a43;font-size:1rem}.write-input:focus{outline:none;border-color:#7565e6}.word-bank{margin-top:18px;border-radius:16px;background:#fff9e9;padding:12px;color:#685429;font-size:.85rem;line-height:2}.word-bank b{display:block}.word-bank span{display:inline-block;margin:2px 4px 2px 0;padding:1px 7px;border-radius:8px;background:#fff;color:#5a46b6;font-weight:700}.writing-preview{white-space:pre-line;margin-top:16px;padding:16px;border-radius:16px;background:#2f2853;color:#fff;line-height:1.8;font-size:1rem}@media(max-width:600px){.reader-card,.writing-card{padding:23px 16px}.reader-card h1,.writing-card h1{font-size:1.65rem}.story-art,.writing-art{font-size:64px}}
.wordicon{min-height:176px;display:grid;place-items:center}.learn-visual{display:block;width:min(100%,300px);aspect-ratio:1;object-fit:cover;border-radius:22px;box-shadow:0 10px 24px rgba(55,43,120,.15)}.wordicon>.visual-fallback{font-size:72px}.row-visual{width:42px;height:42px;flex:none;display:grid;place-items:center}.row-image{width:42px;height:42px;object-fit:cover;border-radius:12px}.row-visual .visual-fallback{font-size:26px}.visual-fallback{display:inline-block}.visual-placeholder{display:grid;place-items:center;width:min(100%,300px);aspect-ratio:1;border:2px dashed #cfc8eb;border-radius:22px;background:linear-gradient(135deg,#faf9ff,#f0edff);color:#8079a4;font-size:.85rem;font-weight:800;letter-spacing:.08em}.row-visual .visual-placeholder{width:42px;height:42px;border-radius:12px;font-size:9px;letter-spacing:0;line-height:1.2;text-align:center}@media(max-width:600px){.wordicon{min-height:138px}.learn-visual{width:min(100%,230px);border-radius:18px}}