:root{font-family:DM Sans,Noto Sans SC,sans-serif;color:#263d33;background:#f8f9f5;font-synthesis:none;font-weight:400;--green: #286448;--muted: #87918a;--line: #e5e9e1}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,select,summary{cursor:pointer}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:11px 17px;background:#fff;color:inherit;transition:.18s}button:hover{border-color:#7b9c85;transform:translateY(-1px)}button:disabled{cursor:default;transform:none;opacity:.7}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a4b994;outline-offset:3px}h1,h2,h3,h4,p{margin:0}p{color:#7b877d;line-height:1.8}select{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;color:inherit}small{font-size:12px;color:var(--muted)}.app{display:flex;min-height:100vh}.sidebar{width:246px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:40px 25px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;padding-left:9px}.brand-icon{width:45px;height:48px;background:var(--green);color:#eef7dd;border-radius:15px;display:inline-flex;align-items:center;justify-content:center}.brand-icon svg{width:28px;height:28px}.brand small{font-size:9px;letter-spacing:2px;display:block;margin-top:2px;color:#59725e}.side-caption{font-size:11px;letter-spacing:2px;color:#96a08f;margin:26px 0 29px 12px}.sidebar nav{display:grid;gap:9px}.sidebar nav button{justify-content:flex-start;padding:15px 17px;border:0;color:#849085;font-size:14px}.sidebar nav button.active{background:#edf3e8;color:#315f3f;font-weight:600}.sidebar nav b{margin-left:auto;font-size:10px;background:#dce7d3;padding:3px 6px;border-radius:5px}.sidebar-bottom{margin-top:auto;padding:36px 13px 31px}.seed-mark{font-size:47px;color:#aabc91;margin-bottom:13px}.sidebar-bottom h4{font-size:17px;line-height:1.8;font-weight:500}.sidebar-bottom p{font-size:11px;margin-top:12px}.sidebar-bottom>span{display:block;font-size:11px;letter-spacing:5px;color:#92a283;margin-top:19px}.guest{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:20px;font-size:12px}.guest>div{background:#eee9dc;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;color:#8a8f6c}.guest small{display:block;font-size:9px;margin-top:4px}main{margin-left:246px;padding:31px 48px 0;width:calc(100% - 246px);max-width:1650px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line)}.eyebrow{font-size:9px;letter-spacing:2.1px;color:#7c917b}header p{font-size:11px;margin-top:6px}.direction{display:flex;align-items:center;gap:7px;background:#fff;padding:5px 11px;border-radius:9px;border:1px solid var(--line)}.direction select{padding:6px 2px;font-size:11px;border:0;background:transparent}.page-heading{display:flex;justify-content:space-between;align-items:center;margin:32px 0 26px}.overline{font-size:10px;letter-spacing:2px;color:#819477;margin-bottom:10px}h1{font-size:30px;letter-spacing:-1px;font-weight:600;line-height:1.4}h1 span{color:#89a26a}.page-heading p{font-size:12px;margin-top:11px}.edition{font-size:9px;letter-spacing:1.6px;color:#97a38d;border:1px solid #dce3d4;border-radius:20px;padding:7px 12px}.hero{display:flex;position:relative;overflow:hidden;min-height:334px;border:1px solid #dce7d3;border-radius:18px;background:#eef3e5}.hero-copy{padding:31px 35px;width:56%;z-index:1}.pill{font-size:10px;background:#e0eacc;border:1px solid #d8e3c4;color:#627c43;border-radius:20px;padding:6px 11px;display:inline-block}.hero h2{font-size:31px;line-height:1.6;font-weight:600;letter-spacing:.4px;margin:14px 0 10px}.hero p{font-size:12px;color:#81906f}.primary{background:#286448;color:#fff;border-color:#286448;padding:13px 21px;font-size:13px;box-shadow:0 4px 9px #25472e0a}.primary:hover{background:#1d5138}.hero .primary{margin-top:23px;gap:28px}.hero-copy>small{display:block;margin-top:12px;font-size:10px;color:#829175}.hero-art{position:relative;flex:1;min-height:330px}.orbit{border:1px solid #d9e3cb;border-radius:50%;position:absolute;left:-2%;top:9%;width:320px;height:320px}.orbit-two{width:252px;height:252px;left:7%;top:18%;border-style:dashed}.plant{position:absolute;width:185px;height:205px;left:23%;bottom:32px}.stem{position:absolute;width:8px;height:119px;background:#47764b;left:93px;top:0;transform:rotate(-8deg);border-radius:50%}.leaf{position:absolute;background:#81a75b;width:72px;height:40px;box-shadow:inset -5px -4px #72984e20}.l1{left:92px;top:7px;border-radius:80% 5% 80% 0;transform:rotate(-24deg)}.l2{left:24px;top:32px;border-radius:5% 80% 0;transform:rotate(20deg);background:#4d7a4d}.l3{left:93px;top:68px;border-radius:80% 5% 80% 0;transform:rotate(-13deg);width:57px;height:31px;background:#aac17c}.pot{position:absolute;top:114px;left:47px;width:103px;height:89px;background:#d7ad80;border-radius:8px 8px 34px 34px;box-shadow:inset -14px 0 #cba175;transform:perspective(90px) rotateX(-8deg);display:grid;place-items:center}.pot:before{content:"";position:absolute;top:-5px;left:-6px;width:115px;height:15px;border-radius:8px;background:#e3be94}.pot span{font-size:30px;color:#fae8c9}.art-word{position:absolute;z-index:2;background:#fffdf6;border:1px solid #e4e6d8;padding:13px 19px;box-shadow:0 6px 12px #344a2805;border-radius:10px;font-size:20px}.word-ja{left:0;top:34px;transform:rotate(-7deg)}.word-ja small{display:block;font-size:9px;margin-top:5px;letter-spacing:1px}.word-en{right:13px;top:147px;font-size:16px;transform:rotate(9deg)}.spark{position:absolute;color:#99ab66;font-size:30px}.s1{right:55px;top:49px}.s2{left:10px;bottom:86px;font-size:22px}.art-label{position:absolute;bottom:18px;left:22%;font-size:7px;color:#95a17e;letter-spacing:2px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0 35px}.metrics>div{background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;gap:13px;align-items:center;padding:20px 17px;position:relative}.metric-icon{display:grid;place-items:center;width:39px;height:42px;border-radius:12px}.metric-icon svg{width:20px}.metrics strong{font-size:25px;display:block;margin-top:4px;font-weight:600}.metrics strong small{font-size:10px;font-weight:400;margin-left:4px}.metrics div>span:not(.metric-icon){font-size:11px;color:#8d958a}.metrics .icon-btn{margin-left:auto}.icon-btn{padding:5px;border:0;background:transparent;color:#82907b}.tiny-progress{position:absolute;right:17px;width:54px;height:4px;border-radius:3px;background:#edf1e9}.tiny-progress i{display:block;height:100%;background:#95b676;border-radius:3px}.mint{background:#e8efdd;color:#6d8654}.peach{background:#f4e8de;color:#ad8d76}.blue{background:#e5eced;color:#79929b}.lavender{background:#eeebf4;color:#9a8cac}.yellow{background:#f3eedb;color:#a29865}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title h2,.section-heading{font-size:19px;font-weight:600}.section-title p{font-size:11px;margin-top:7px}.text-btn{padding:3px 0;border:0;background:transparent;font-size:11px;gap:7px;color:#63795c}.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.scene-card{padding:0;display:block;text-align:left;overflow:hidden;border-radius:12px}.scene-art{height:127px;position:relative;display:flex;align-items:center;justify-content:center}.scene-art>span{font-size:62px;font-family:Georgia,serif;transform:rotate(-10deg)}.scene-art small{position:absolute;bottom:13px;left:16px;font-size:8px;color:inherit;letter-spacing:1.5px}.scene-art svg{position:absolute;right:13px;top:14px;color:inherit;opacity:.7}.scene-body{padding:18px 17px 14px}.scene-body h3{font-size:15px;font-weight:600}.scene-body p{font-size:10px;margin-top:7px}.scene-body footer{display:flex;justify-content:space-between;font-size:9px;color:#8f9b89;border-top:1px solid #f0f2ec;margin-top:16px;padding-top:12px}.scene-body footer span{display:flex;gap:4px;align-items:center}.gentle-note{display:flex;gap:12px;align-items:center;margin:28px 0 20px;padding:17px;background:#f1f3eb;border-radius:9px}.gentle-note>span:first-child{font-size:23px;color:#9ca781}.gentle-note p{font-size:10px}.gentle-note>span:last-child{margin-left:auto;font-size:8px;letter-spacing:2px;color:#a0aa90}.main-footer{display:flex;align-items:center;justify-content:space-between;padding:23px 0;border-top:1px solid var(--line);color:#98a08e;font-size:9px;margin-top:34px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.chips button{font-size:12px}.chips .selected{background:#286448;color:#fff;border-color:#286448}.expression-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.expression{border:1px solid var(--line);background:#fff;border-radius:13px;padding:24px}.expression>div{display:flex;justify-content:space-between}.expression-title{border:0;padding:8px 0;font-size:20px;text-align:left;background:none;justify-content:flex-start}.expression p{font-size:13px}.expression footer{display:flex;justify-content:space-between;margin-top:25px}.gold{color:#b4a153}.review-banner{background:#ecf1e4;padding:30px;border-radius:16px;display:flex;align-items:center;gap:24px;margin:24px 0;color:#5c7d4c}.review-banner h2{font-size:21px}.review-banner p{font-size:12px;margin-top:10px}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:35px}.mode-grid button{display:block;text-align:left;padding:26px}.mode-grid h3{font-size:16px;margin:17px 0 8px}.mode-grid p{font-size:12px}.mode-grid button>svg:last-child{float:right}.history-list{margin:20px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 22px}.history-list>div{padding:16px 0;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:13px}.history-list small{margin-left:auto}.settings-panel{max-width:800px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 30px}.settings-panel>label,.settings-panel>div{padding:25px 0;border-bottom:1px solid var(--line)}.settings-panel label{display:flex;justify-content:space-between;align-items:center;font-size:14px}.settings-panel h3{font-size:16px;margin-bottom:12px}.settings-panel p{font-size:13px;margin-bottom:15px}.settings-panel button{font-size:12px;margin-right:10px}.danger{color:#a64b3c;border-color:#e9c8bc;background:#fff9f5}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#152d2377;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;display:flex;align-items:center;justify-content:center;padding:24px}.overlay.top{z-index:20}.modal{background:#fafbf7;border:1px solid #fff;border-radius:22px;padding:32px;max-width:590px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 90px #12301d30}.modal h2{font-size:25px;line-height:1.6}.modal p{font-size:14px;margin:15px 0}.modal small{display:block;line-height:1.8}.modal-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#85917c;gap:15px;margin-bottom:22px}.modal label{display:flex;justify-content:space-between;align-items:center;margin:20px 0;font-size:14px}.welcome{text-align:center;padding:42px}.welcome .overline{margin-top:23px}.welcome .primary{width:100%;margin:15px 0}.practice-progress{height:5px;background:#e6ebde;border-radius:8px;overflow:hidden}.practice-progress i{height:100%;background:#91ac70;display:block}.practice-meta{display:flex;justify-content:space-between;margin-top:20px;font-size:12px;color:#89947e}.question{text-align:center;margin:40px 0}.question h2{margin-bottom:16px}.sound-circle{border-radius:50%;width:100px;height:100px;background:#e8eedf;color:#4b7449}.answers{display:grid;gap:10px}.answers button{padding:17px;justify-content:space-between;font-size:14px}.answers .correct{background:#e3eddd;border-color:#7e9d6a;opacity:1}.answers .wrong{background:#f7e8df;border-color:#c28d79;opacity:1}.feedback-panel{padding:22px;background:#ecf2e4;border-radius:12px;margin-top:20px}.feedback-panel h3{font-size:17px}.feedback-panel p{font-size:13px}.feedback-panel .primary{margin-top:18px;width:100%}.practice-bottom{display:flex;justify-content:space-between;margin-top:28px}.ratings{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ratings button{font-size:12px;padding:10px}.record-area{text-align:center}.record-area p{font-size:12px}.record-area audio{display:block;max-width:100%;margin:20px auto}.secondary{width:100%;margin-top:15px}.completion{text-align:center;padding:30px 10px}.completion>svg{color:#85a366;margin-bottom:20px}.completion .primary{margin-top:18px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}textarea{width:100%;min-height:130px;padding:15px;border:1px solid #d5decb;border-radius:10px;resize:vertical}.modal form .primary,form.modal>.primary{margin-top:20px;width:100%}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);z-index:30;background:#294c39;color:#fff;border-radius:12px;padding:15px 20px;display:flex;align-items:center;gap:20px;max-width:90vw;font-size:13px;box-shadow:0 6px 30px #0002}.toast button{padding:0;border:0;background:transparent;color:#fff}.empty{padding:40px;text-align:center;color:#89947f}@media(min-width:1500px){main{padding-left:65px;padding-right:65px}.hero-art{max-width:460px;margin:auto}.hero{min-height:365px}.hero-copy{padding:40px}.hero-art{height:330px}}@media(max-width:1100px){.sidebar{width:205px;padding:30px 15px}.sidebar-bottom{padding-left:12px}main{margin-left:205px;width:calc(100% - 205px);padding:25px}.edition{display:none}.hero h2{font-size:27px}.hero-copy{padding:27px}.hero-art{transform:scale(.9);transform-origin:center}.tiny-progress{display:none}.metrics>div{padding:16px 12px;gap:10px}.metric-icon{width:32px}.scene-grid{gap:12px}}@media(max-width:780px){.sidebar{inset:auto 0 0;width:100%;height:66px;padding:6px 10px;z-index:5;border-top:1px solid var(--line)}.sidebar .brand,.side-caption,.sidebar-bottom,.guest{display:none}.sidebar nav{display:flex;justify-content:space-around}.sidebar nav button{flex-direction:column;gap:4px;font-size:10px;padding:7px 15px}.sidebar nav b{display:none}main{margin-left:0;width:100%;padding:20px 19px 70px}header{padding-bottom:20px}.eyebrow{font-size:7px;letter-spacing:1px}.direction{padding:4px;gap:2px}.direction>svg:first-child{display:none}.direction select{font-size:10px}.page-heading{margin:25px 0 20px}h1{font-size:25px}.hero{min-height:310px}.hero-copy{width:70%;padding:25px 22px}.hero h2{font-size:25px}.hero-art{position:absolute;right:-120px;top:18px;width:300px;opacity:.55;transform:scale(.77)}.hero .pill{font-size:8px}.hero .primary{margin-top:20px}.hero-copy>small{font-size:9px}.metrics{gap:8px;margin-bottom:28px}.metrics>div{display:block;padding:13px 10px}.metric-icon{width:29px;height:30px;margin-bottom:11px}.metrics strong{font-size:22px}.metrics strong small{font-size:8px;margin:0}.metrics div>span:not(.metric-icon){font-size:9px}.metrics .icon-btn{display:none}.section-title h2{font-size:17px}.section-title p,.section-title .text-btn{font-size:10px}.scene-grid{grid-template-columns:1fr}.scene-card{display:flex;text-align:left}.scene-art{height:152px;width:38%;flex-shrink:0}.scene-body{flex:1}.gentle-note>span:last-child{display:none}.gentle-note p{font-size:10px}.main-footer{font-size:8px;gap:8px}.main-footer>span:nth-child(2){display:none}.expression-grid,.mode-grid{grid-template-columns:1fr}.modal{padding:24px;border-radius:17px}.welcome{padding:28px}.modal h2{font-size:22px}.review-banner{padding:20px}.review-banner h2{font-size:18px}.settings-panel{padding:0 20px}.history-list small{font-size:9px}.history-list span{font-size:12px}}.learning-app .header-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}.learning-app .interface-language,.learning-app .difficulty-selector{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px}.learning-app .interface-language select,.learning-app .difficulty-selector select{max-width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff}.learning-app .course-levels{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 22px}.learning-app .course-levels>small{color:#76856b;line-height:1.7;max-width:500px}.learning-app .difficulty-badge{color:#61744e;font-size:12px;line-height:1.7;margin:10px 0}.learning-app .course-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;font-size:12px}.learning-app .brand{font-size:clamp(18px,1.5vw,26px)}.learning-app .brand-icon{flex-shrink:0}.learning-app .history-list small{text-align:right}.learning-app .hero-copy{min-width:0}@media(max-width:1100px){.learning-app main>header{flex-wrap:wrap;gap:15px}.learning-app .hero-copy{width:65%}}@media(max-width:640px){.learning-app .header-controls{width:100%;justify-content:space-between}.learning-app .interface-language,.learning-app .difficulty-selector{font-size:11px}.learning-app .hero-copy{width:100%}.learning-app .hero-art{opacity:.14;pointer-events:none}.learning-app .hero h2{font-size:24px}.learning-app .history-list>div{flex-wrap:wrap}.learning-app .history-list small{flex-basis:100%;text-align:left}.learning-app .course-pagination{flex-wrap:wrap;justify-content:center}}.legal-links{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}.legal-links a,.main-footer a{color:inherit;text-underline-offset:3px}.speech-spinner{animation:speech-spin 1s linear infinite}.speech-playing{animation:speech-pulse .8s ease-in-out infinite alternate}.sound-circle{position:relative;margin-bottom:2.5rem}.speech-status{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);white-space:nowrap;font-size:13px;font-weight:600}@keyframes speech-spin{to{transform:rotate(360deg)}}@keyframes speech-pulse{0%{opacity:.45}to{opacity:1}}@media(prefers-reduced-motion:reduce){.speech-spinner,.speech-playing{animation:none}}