:root{--ink:#141614;--muted:#66706a;--paper:#f4f7f5;--surface:#fff;--line:#d8e1dc;--teal:#007c73;--teal-soft:#d6f2ee;--poppy:#e24b36;--gold:#f2b63f;--sky:#cdebf4;--shadow:0 20px 60px #1416141f;--ornament:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20800'%3e%3cdefs%3e%3cg%20id='bodom'%3e%3cpath%20d='M%200,0%20C%20-40,-60%20-80,-100%20-80,-160%20C%20-80,-230%20-20,-280%2040,-280%20C%2090,-280%20130,-240%20130,-190%20C%20130,-130%2080,-100%2040,-40%20C%2020,-10%205,0%200,0%20Z'%20fill='%230099B5'%20stroke='%23E2B13C'%20stroke-width='6'/%3e%3cpath%20d='M%2015,-60%20C%2040,-110%2070,-140%2070,-180%20C%2070,-210%2050,-230%2020,-230%20C%20-20,-230%20-50,-190%20-50,-150'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='4'%20stroke-linecap='round'/%3e%3ccircle%20cx='15'%20cy='-140'%20r='12'%20fill='%23E2B13C'/%3e%3c/g%3e%3cg%20id='flower'%3e%3ccircle%20cx='0'%20cy='0'%20r='25'%20fill='%23E2B13C'%20stroke='%23FFFFFF'%20stroke-width='3'/%3e%3cpath%20d='M%200,-25%20C%20-20,-50%2020,-50%200,-25%20Z'%20fill='%23D32F2F'/%3e%3cpath%20d='M%200,25%20C%20-20,50%2020,50%200,25%20Z'%20fill='%23D32F2F'/%3e%3cpath%20d='M%20-25,0%20C%20-50,-20%20-50,20%20-25,0%20Z'%20fill='%23D32F2F'/%3e%3cpath%20d='M%2025,0%20C%2050,-20%2050,20%2025,0%20Z'%20fill='%23D32F2F'/%3e%3c/g%3e%3c/defs%3e%3crect%20width='800'%20height='800'%20fill='%230F2C59'/%3e%3crect%20x='20'%20y='20'%20width='760'%20height='760'%20fill='none'%20stroke='%23E2B13C'%20stroke-width='12'%20rx='15'/%3e%3crect%20x='40'%20y='40'%20width='720'%20height='720'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20rx='10'/%3e%3cg%20transform='translate(400,%20400)'%3e%3ccircle%20cx='0'%20cy='0'%20r='60'%20fill='none'%20stroke='%23E2B13C'%20stroke-width='4'/%3e%3cg%20transform='rotate(0)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.8)'/%3e%3c/g%3e%3cg%20transform='rotate(90)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.8)'/%3e%3c/g%3e%3cg%20transform='rotate(180)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.8)'/%3e%3c/g%3e%3cg%20transform='rotate(270)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.8)'/%3e%3c/g%3e%3cg%20transform='rotate(45)%20translate(0,%20-220)'%3e%3cuse%20href='%23flower'%20transform='scale(0.7)'/%3e%3c/g%3e%3cg%20transform='rotate(135)%20translate(0,%20-220)'%3e%3cuse%20href='%23flower'%20transform='scale(0.7)'/%3e%3c/g%3e%3cg%20transform='rotate(225)%20translate(0,%20-220)'%3e%3cuse%20href='%23flower'%20transform='scale(0.7)'/%3e%3c/g%3e%3cg%20transform='rotate(315)%20translate(0,%20-220)'%3e%3cuse%20href='%23flower'%20transform='scale(0.7)'/%3e%3c/g%3e%3c/g%3e%3cg%20transform='translate(80,%2080)%20rotate(-45)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.5)'/%3e%3c/g%3e%3cg%20transform='translate(720,%2080)%20rotate(45)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.5)'/%3e%3c/g%3e%3cg%20transform='translate(80,%20720)%20rotate(-135)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.5)'/%3e%3c/g%3e%3cg%20transform='translate(720,%20720)%20rotate(135)'%3e%3cuse%20href='%23bodom'%20transform='scale(0.5)'/%3e%3c/g%3e%3c/svg%3e")}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% 0%, #007c7329, transparent 32rem), linear-gradient(135deg, #cdebf4a3, transparent 22rem), var(--paper);margin:0;font-family:IBM Plex Sans,Segoe UI,sans-serif}body:before{content:"";z-index:0;aspect-ratio:1;pointer-events:none;background:var(--ornament) center / contain no-repeat;filter:saturate(.94);opacity:.08;width:min(54vw,560px);position:fixed;inset:auto -8vw -20vh auto}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app-shell{z-index:1;width:min(1180px,100% - 32px);margin:0 auto;padding:28px 0 56px;position:relative}.hero-band{min-height:360px;box-shadow:var(--shadow);background:linear-gradient(120deg,#ffffffeb,#ffffffa8),repeating-linear-gradient(45deg,#0000 0 18px,#007c7312 18px 20px);border:1px solid #14161424;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);align-items:stretch;gap:28px;padding:34px;display:grid;position:relative;overflow:hidden}.hero-band:after{content:"";border:34px solid #e24b362e;width:240px;height:240px;position:absolute;bottom:-70px;right:34%;transform:rotate(18deg)}.hero-band:before{content:"";z-index:0;pointer-events:none;background:var(--ornament) center / contain no-repeat;opacity:.1;mix-blend-mode:multiply;width:min(38%,320px);position:absolute;inset:18px 24px 18px auto}.product-mark,.section-heading span,.quiz-topline span{color:var(--teal);letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;font-weight:700}.hero-copy{z-index:1;flex-direction:column;justify-content:center;max-width:720px;display:flex;position:relative}.hero-copy h1,.section-heading h2{letter-spacing:0;font-family:Literata,Georgia,serif}.hero-copy h1{max-width:780px;margin:14px 0 18px;font-size:clamp(2.45rem,6vw,5.75rem);line-height:.93}.hero-copy p{color:#39423e;max-width:690px;margin:0;font-size:1.08rem;line-height:1.65}.hero-actions,.feedback-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hero-actions{margin-top:28px}.primary-action,.ghost-action,.danger-action,.next-button,.listen-action{border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 18px;font-weight:700;display:inline-flex}.primary-action,.next-button{color:#fff;background:var(--ink)}.ghost-action{color:var(--ink);border-color:var(--line);background:#fff}.danger-action{color:var(--poppy);background:#fff4f1;border-color:#e24b3647}.listen-action{color:var(--ink);background:var(--gold);border-color:#1416141f}.listen-action.compact{min-height:40px;padding:0 14px}.listen-action:disabled{opacity:.62}.number-totem{z-index:1;color:#fff;background:linear-gradient(160deg, #141614cc, #14161447), conic-gradient(from 150deg, var(--teal), var(--gold), var(--poppy), var(--teal));flex-direction:column;justify-content:flex-end;min-height:290px;padding:28px;display:flex;position:relative;overflow:hidden}.number-totem:before{content:"";pointer-events:none;background:var(--ornament) center / 118% no-repeat;opacity:.16;position:absolute;inset:0}.number-totem>*{z-index:1;position:relative}.number-totem span{font-size:clamp(4rem,11vw,8.7rem);font-weight:700;line-height:.82}.number-totem strong{margin-top:18px;font-size:1.24rem}.number-totem small{color:#ffffffc7;margin-top:8px;font-size:1rem}.status-strip,.tabbar,.learn-grid,.quiz-layout,.progress-layout{margin-top:22px}.status-strip{border:1px solid var(--line);background:#ffffffc7;grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.status-strip div{border-right:1px solid var(--line);flex-direction:column;justify-content:center;min-height:88px;padding:18px 20px;display:flex}.status-strip div:last-child{border-right:0}.status-strip span,.level-row span,.audio-row,.history-note,.quiz-panel p,.progress-meter p{color:var(--muted)}.status-strip strong{margin-top:4px;font-size:1.72rem}.tabbar{border:1px solid var(--line);background:#fff;gap:8px;width:fit-content;padding:7px;display:flex}.tabbar button{min-height:40px;color:var(--muted);background:0 0;border:0;align-items:center;gap:8px;padding:0 14px;font-weight:700;display:inline-flex}.tabbar button.active{color:#fff;background:var(--teal)}.learn-grid,.quiz-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;gap:22px;display:grid}.lookup-panel,.sample-board,.quiz-panel,.progress-meter,.level-table,.history-note{border:1px solid var(--line);background:#ffffffe6;box-shadow:0 10px 34px #14161414}.lookup-panel,.sample-board,.quiz-panel,.progress-meter{padding:24px}.section-heading h2{margin:6px 0 18px;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.05}.input-label{color:var(--muted);margin-bottom:8px;font-weight:700;display:block}input{border:1px solid var(--line);width:100%;height:58px;color:var(--ink);background:#fff;border-radius:0;outline:none;padding:0 16px;font-size:1.25rem;font-weight:700}input:focus{border-color:var(--teal);box-shadow:0 0 0 4px #007c731f}.answer-slab{color:#fff;background:var(--ink);flex-direction:column;justify-content:center;min-height:172px;margin-top:16px;padding:22px;display:flex}.answer-slab.invalid{color:var(--ink);background:var(--sky)}.answer-slab span{color:#ffffffb8;font-weight:700}.answer-slab.invalid span{color:#38535b}.answer-slab strong{letter-spacing:0;margin-top:8px;font-family:Literata,Georgia,serif;font-size:clamp(1.85rem,5vw,3.55rem);line-height:1.02}.answer-slab em{color:#ffffffad;margin-top:10px;font-size:1.15rem;font-style:normal}.audio-row,.history-note{align-items:center;gap:10px;margin-top:16px;font-weight:600;display:flex}.audio-row span{color:var(--muted)}.audio-error{color:var(--poppy);margin-top:10px;font-weight:700}.sample-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.sample-list button{border:1px solid var(--line);min-height:78px;color:var(--ink);text-align:left;background:#fff;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:12px 14px;display:flex}.sample-list button:hover,.choice-button:hover,.level-pill:hover:not(:disabled){border-color:var(--teal);transform:translateY(-1px)}.sample-list b{font-size:1.25rem}.sample-list span{color:var(--muted);font-size:.92rem}.quiz-layout{grid-template-columns:310px minmax(0,1fr);scroll-margin-top:12px}.level-rail{flex-direction:column;gap:10px;display:flex}.level-pill{border:1px solid var(--line);min-height:76px;color:var(--ink);text-align:left;background:#ffffffe0;justify-content:space-between;align-items:center;gap:12px;padding:14px;display:flex}.level-pill.active{border-color:var(--ink);background:var(--teal-soft)}.level-pill:disabled{color:#96a19b;background:#ffffff70}.level-pill span{flex-direction:column;gap:4px;font-weight:800;display:flex}.level-pill small{color:var(--muted);font-weight:600}.quiz-panel{min-height:520px}.quiz-topline{justify-content:space-between;gap:16px;display:flex}.question-number{color:var(--ink);letter-spacing:0;margin:20px 0 12px;font-family:Literata,Georgia,serif;font-size:clamp(4.8rem,14vw,10rem);font-weight:700;line-height:.86}.quiz-prompt-row{justify-content:space-between;align-items:center;gap:14px;display:flex}.quiz-prompt-row p{margin:0}.choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;display:grid}.choice-button{border:1px solid var(--line);min-height:74px;color:var(--ink);text-align:left;background:#fff;padding:14px 16px;font-size:1.03rem;font-weight:800}.choice-button.correct{background:#dbf6e7;border-color:#0f8d5b}.choice-button.wrong{border-color:var(--poppy);background:#fff0ec}.feedback-row{border-top:1px solid var(--line);justify-content:space-between;padding-top:10px}.feedback{color:#0f6f4a;font-weight:800}.feedback.wrong{color:var(--poppy)}.progress-layout{gap:16px;display:grid}.progress-meter{grid-template-columns:210px minmax(0,1fr);align-items:center;gap:28px;display:grid}.meter-ring{aspect-ratio:1;background:radial-gradient(circle, white 58%, transparent 59%), conic-gradient(var(--teal) var(--value), #e5ebe7 0);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:188px;display:flex}.meter-ring strong{font-size:2.4rem}.meter-ring span{color:var(--muted);font-weight:700}.level-table{overflow:hidden}.level-row{border-bottom:1px solid var(--line);grid-template-columns:190px minmax(0,1fr) 74px;align-items:center;gap:18px;min-height:74px;padding:14px 18px;display:grid}.level-row:last-child{border-bottom:0}.level-row div:first-child{flex-direction:column;gap:4px;display:flex}.row-track{background:#e5ebe7;height:12px}.row-track i{background:linear-gradient(90deg, var(--teal), var(--gold));height:100%;display:block}.history-note{margin-top:0;padding:18px}@media (width<=820px){.app-shell{width:min(100% - 20px,680px);padding-top:8px;padding-bottom:36px}.hero-band,.learn-grid,.quiz-layout,.progress-meter{grid-template-columns:1fr}.hero-band{gap:18px;min-height:0;padding:20px}.hero-band:after{border-width:24px;width:180px;height:180px;bottom:170px;right:-78px}.hero-copy{justify-content:flex-start}.hero-copy h1{max-width:100%;margin:10px 0 12px;font-size:clamp(2.05rem,10.4vw,3.7rem);line-height:.96}.hero-copy p{font-size:.98rem;line-height:1.48}.hero-actions{gap:10px;margin-top:18px}.primary-action,.ghost-action,.danger-action,.next-button,.listen-action{min-height:44px;padding:0 15px}.number-totem{min-height:176px;padding:20px}.number-totem span{font-size:clamp(4.25rem,25vw,7.2rem)}.number-totem strong{margin-top:12px;font-size:1.06rem}.number-totem small{font-size:.94rem}.status-strip,.tabbar,.learn-grid,.quiz-layout,.progress-layout{margin-top:14px}.status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.status-strip div{min-height:76px;padding:14px 16px}.status-strip strong{font-size:1.45rem}.status-strip div:nth-child(2){border-right:0}.status-strip div:nth-child(3),.status-strip div:nth-child(4){border-top:1px solid var(--line)}.tabbar{width:100%}.tabbar button{flex:1;justify-content:center;padding:0 8px}.lookup-panel,.sample-board,.quiz-panel,.progress-meter{padding:18px}.section-heading h2{margin-bottom:14px}.answer-slab{min-height:142px;padding:18px}.sample-list,.choices{grid-template-columns:1fr}.audio-row{flex-direction:column;align-items:flex-start}.quiz-layout{grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:10px;height:calc(100svh - 18px)}.level-rail{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;flex-direction:row;gap:8px;min-width:0;padding-bottom:2px;overflow-x:auto}.level-pill{scroll-snap-align:start;flex:0 0 min(212px,72vw);min-height:48px;padding:8px 10px}.level-pill small,.level-pill b{font-size:.78rem}.quiz-panel{flex-direction:column;min-height:0;display:flex;overflow-y:auto}.quiz-topline{font-size:.92rem}.question-number{margin:10px 0 6px;font-size:clamp(3.2rem,18vw,5.4rem);line-height:.9}.quiz-prompt-row{align-items:center;gap:8px}.quiz-prompt-row p{font-size:.92rem;line-height:1.35}.choices{flex:1;align-content:start;gap:8px;margin:14px 0 10px}.choice-button{overflow-wrap:anywhere;align-items:center;min-height:52px;padding:10px 12px;font-size:.96rem;line-height:1.2;display:flex}.feedback-row{gap:8px;padding-top:8px}.feedback{font-size:.92rem;line-height:1.25}.level-row{grid-template-columns:1fr;gap:10px}}@media (width<=430px){.app-shell{width:min(100% - 16px,680px)}.hero-band{padding:18px}.hero-band:after{display:none}.hero-copy h1{font-size:clamp(1.92rem,10vw,2.55rem);line-height:.98}.hero-copy p{font-size:.94rem}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions button{width:100%}.number-totem{min-height:156px;padding:18px}.number-totem span{font-size:clamp(3.75rem,23vw,5.7rem)}.number-totem strong{font-size:1rem}.status-strip div{min-height:70px;padding:12px 14px}.tabbar{gap:4px;padding:5px}.tabbar button{gap:6px;min-height:38px;font-size:.92rem}.lookup-panel,.sample-board,.quiz-panel,.progress-meter,.history-note{padding:16px}.quiz-layout{height:calc(100svh - 12px)}.quiz-topline{flex-wrap:wrap;row-gap:4px}.question-number{font-size:clamp(2.85rem,17vw,4.55rem)}.quiz-prompt-row p{font-size:.86rem}.listen-action.compact{min-height:36px;padding:0 11px;font-size:.9rem}.choice-button{min-height:48px;font-size:.92rem}.next-button{min-height:38px;padding:0 12px}input{height:52px}}@media (width<=360px){.tabbar{gap:2px;padding:4px}.tabbar button{gap:4px;min-width:0;padding:0 4px;font-size:.78rem}.tabbar svg{flex:none;width:15px;height:15px}}