:root{--cream:#f4ebdd;--paper:#fffaf2;--paper2:#fffcf7;--green:#47785b;--green-dark:#2d5e46;--green-pale:#e5eee3;--clay:#a84435;--clay-pale:#f5e2da;--lavender:#e5e0f0;--yellow:#f0d895;--ink:#283b31;--muted:#788178;--line:#e8dfd1;--white:#fffdf8;--shadow:0 12px 32px rgba(64,74,57,.07);--radius:24px;--font:system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6}.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;max-width:1600px;margin:auto}.sidebar{background:var(--paper);border-left:1px solid #e6ddcf;padding:30px 20px 20px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 29px;text-decoration:none;color:inherit}.brand-mark{width:45px;height:45px;border-radius:15px;background:var(--green);color:#fff8ea;display:grid;place-items:center;font-size:19px;font-weight:850;letter-spacing:-1px;box-shadow:0 5px 12px #47785b27;direction:ltr}.brand-copy{display:flex;flex-direction:column;line-height:1.25}.brand-copy strong{font-size:21px;font-weight:850;letter-spacing:-.8px;direction:ltr;text-align:right}.brand-copy small{color:var(--muted);font-size:11px;margin-top:5px}.side-caption,.section-kicker{font-size:10px;font-weight:850;letter-spacing:1.7px;color:#8b9487}.side-caption{padding:7px 12px 12px}.side-nav{display:grid;gap:6px}.nav-item{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;min-height:48px;text-align:right;border-radius:14px;color:#68766c;cursor:pointer;font:inherit;font-size:13px;font-weight:650;transition:background .2s,color .2s,transform .2s}.nav-item:hover{background:#f4f0e7;color:var(--green-dark)}.nav-item.active{background:var(--green-pale);color:var(--green-dark);font-weight:800}.nav-icon,.nav-item .nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto}.nav-icon svg,.nav-item svg,.top-actions svg,.daily-symbol svg,.skill-icon svg,.settings-symbol svg,.preview-disclaimer svg,.notice-strip svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-count{margin-right:auto;font-size:10px;background:#fffaf2;padding:2px 7px;border-radius:9px;color:var(--green)}.soon-dot{width:6px;height:6px;border-radius:50%;background:#c8a56a;margin-right:auto}.sidebar-bottom{margin-top:auto}.side-note{display:flex;gap:12px;align-items:center;background:#f5eee1;border:1px solid #eee3d2;border-radius:17px;padding:14px;margin:20px 0 18px}.note-sun{background:#f0d895;color:#6f5e34;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex-shrink:0}.side-note strong{font-size:12px}.side-note p{margin:2px 0 0;font-size:11px;color:var(--muted)}.settings-link{margin-bottom:10px}.version-note{padding:5px 13px;color:#a2a89e;font-size:10px}.main-area{min-width:0;padding:0 45px 25px;max-width:1230px;width:100%;margin:0 auto}.topbar{height:86px;border-bottom:1px solid rgba(204,192,174,.55);display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.crumb{font-size:12px;color:#778076;display:flex;align-items:center;gap:9px}.crumb-dot{width:7px;height:7px;border-radius:50%;background:var(--green)}.top-actions{display:flex;align-items:center;gap:13px}.goal-chip{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #e5dac8;border-radius:13px;background:#f8f0e3;font-size:11px;color:#777e72}.goal-chip strong{font-size:11px;color:var(--green-dark);font-weight:800}.goal-chip-icon{display:grid;place-items:center;color:var(--green)}.goal-chip-icon svg{width:16px;height:16px}.avatar-button{border:0;width:39px;height:39px;border-radius:13px;background:var(--green);color:#fff7e7;font-size:21px;cursor:pointer}.mobile-brand{display:none}.view{display:none;animation:fade-in .28s ease}.view.active{display:block}@keyframes fade-in{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.welcome-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:10px 0 27px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--clay);font-size:9px;font-weight:900;letter-spacing:2px;margin-bottom:13px}.eyebrow-line{width:25px;height:2px;background:var(--clay);border-radius:2px}.welcome-row h1,.page-heading h1{font-size:clamp(26px,3vw,36px);line-height:1.35;letter-spacing:-1.1px;margin:0;font-weight:850}.welcome-row h1 span{color:var(--green)}.welcome-copy,.page-heading>p{font-size:13px;color:#738076;margin:12px 0 0;max-width:590px;line-height:1.9}.welcome-stamp{width:116px;height:116px;flex:0 0 116px;border:1px dashed #c7b79e;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(7deg);color:var(--green);position:relative;background:#f6efe3}.stamp-spark{font-size:23px;color:var(--clay);line-height:1}.stamp-word{font-family:Georgia,serif;font-size:23px;font-weight:bold;font-style:italic;direction:ltr}.stamp-sub{font-size:6px;letter-spacing:1px;color:#989184;margin-top:3px}.hero-card{min-height:290px;border-radius:27px;background:var(--green);color:#fbf5e7;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.72fr);position:relative;overflow:hidden;box-shadow:0 16px 30px rgba(45,94,70,.13)}.hero-copy{padding:30px 33px 29px;z-index:1;max-width:530px}.pill{display:inline-flex;align-items:center;gap:7px;border-radius:20px;font-size:10px;font-weight:700;padding:5px 10px}.pill-light{background:#ffffff1c;color:#fff8e9;border:1px solid #ffffff29}.pill-dot{width:6px;height:6px;border-radius:50%;background:#f0d895}.hero-kicker{font-size:9px;letter-spacing:2px;color:#d2dfcc;margin:20px 0 2px;font-weight:800}.hero-card h2{font-family:Georgia,serif;font-size:38px;line-height:1.15;direction:ltr;text-align:right;margin:0;font-weight:700;letter-spacing:-.7px}.hero-translation{font-size:12px;color:#e0e7d5;margin:5px 0 10px}.hero-description{font-size:12px;color:#dce5d8;line-height:1.9;max-width:390px;margin:0 0 20px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:12px 16px;border:0;border-radius:12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.button-light{background:#fff8e9;color:var(--green-dark)}.button-primary{background:var(--green);color:#fff9eb;box-shadow:0 8px 18px #47785b22}.button-arrow{font-size:17px;line-height:1}.hero-art{position:relative;min-height:290px;overflow:hidden;background:linear-gradient(145deg,#518464,#396c4f)}.sun-disc{position:absolute;width:176px;height:176px;border-radius:50%;background:#efcf85;left:calc(50% - 75px);top:30px;box-shadow:0 0 0 13px #ffffff0b}.art-orbit{position:absolute;border:1px solid #ffffff40;border-radius:50%;transform:rotate(-30deg)}.orbit-one{width:300px;height:126px;left:1%;top:78px}.orbit-two{width:280px;height:190px;left:9%;top:40px;transform:rotate(53deg)}.art-book{position:absolute;border-radius:9px 10px 10px 9px;box-shadow:5px 12px 22px #1b4f3536;transform:rotate(-8deg)}.book-back{height:120px;width:148px;left:calc(50% - 44px);top:108px;background:#b45b43;border:4px solid #d18a66}.book-front{height:129px;width:146px;left:calc(50% - 62px);top:91px;background:#fff3d9;border-left:8px solid #eddfc5;display:flex;align-items:center;flex-direction:column;padding-top:17px;color:var(--green);transform:rotate(-4deg)}.book-front span{font:italic bold 27px Georgia,serif;direction:ltr}.book-front i{height:3px;width:52px;background:#d7d1b6;border-radius:5px;margin-top:8px}.book-front i:nth-of-type(2){width:68px}.book-front i:nth-of-type(3){width:40px}.art-leaf{width:22px;height:55px;background:#8ab18a;position:absolute;border-radius:100% 0 100% 0;transform:rotate(-34deg);opacity:.95}.leaf-one{right:14%;top:54px}.leaf-two{right:24%;top:42px;transform:rotate(35deg) scale(.8);background:#c2d0a2}.art-flower{position:absolute;font-size:33px;line-height:1;color:#f0d895}.flower-one{top:46px;left:15%}.flower-two{bottom:26px;right:16%;color:#f4d9bf;font-size:25px}.art-note{position:absolute;font-family:Georgia,serif;font-style:italic;font-weight:bold;direction:ltr;background:#fff8e9;color:var(--clay);padding:5px 9px;border-radius:8px;box-shadow:0 5px 12px #1a51362b;font-size:12px}.note-one{top:54px;right:17%;transform:rotate(8deg)}.note-two{bottom:38px;left:11%;transform:rotate(-9deg);color:var(--green)}.hero-index{position:absolute;bottom:17px;left:22px;display:flex;align-items:center;gap:9px;font-size:9px;font-weight:800;color:#e3eadc}.hero-index-line{width:35px;height:1px;background:#ffffff75}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.goal-heading{margin:31px 0 15px}.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:5px 0 0;font-weight:850}.soft-label{display:inline-flex;align-items:center;background:#ece5d8;border-radius:15px;padding:5px 10px;color:#7c7f6f;font-size:10px;font-weight:750}.daily-grid{display:grid;grid-template-columns:1.08fr 1fr 1fr 1fr;gap:12px}.daily-card{min-height:177px;background:var(--paper);border:1px solid #eae0d1;border-radius:19px;padding:16px;display:flex;flex-direction:column;min-width:0;box-shadow:0 4px 18px #6c67490a}.daily-total{background:#fff8e9}.daily-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.daily-symbol{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.daily-symbol svg{width:17px;height:17px}.symbol-green{background:var(--green-pale);color:var(--green)}.symbol-clay{background:var(--clay-pale);color:var(--clay)}.symbol-lavender{background:var(--lavender);color:#766d99}.symbol-yellow{background:#f7edcb;color:#947439}.mini-tag,.step-count{font-size:9px;color:#899083;font-weight:750;background:#f0ece3;border-radius:9px;padding:4px 7px}.goal-numbers{display:flex;align-items:baseline;gap:8px;margin:12px 0 10px}.goal-numbers strong{font:700 32px Georgia,serif;color:var(--green-dark);direction:ltr}.goal-numbers span{font-size:10px;color:#7b8175}.goal-track,.lesson-mini-track{height:5px;background:#e8e4d9;border-radius:9px;overflow:hidden}.goal-track span,.lesson-mini-track span{display:block;height:100%;background:var(--green);border-radius:9px}.goal-foot{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8e9388;margin-top:7px}.goal-foot strong{color:var(--green);font-size:9px}.daily-card h3{font-size:12px;line-height:1.5;margin:14px 0 5px;font-weight:850}.daily-card p{color:#82877b;font-size:10px;line-height:1.7;margin:0 0 12px}.card-bottom-label{display:flex;align-items:center;gap:7px;margin-top:auto;color:#9b9d8e;font-size:9px}.tiny-line{width:18px;height:2px;background:#c8c8b1;border-radius:2px}.path-heading{margin:31px 0 13px}.path-heading>div>p{margin:4px 0 0;color:#868a7d;font-size:11px}.text-button{background:none;border:0;color:var(--green);font:inherit;font-size:11px;font-weight:850;cursor:pointer;padding:9px 0}.text-button span{font-size:16px;margin-right:5px}.start-card{display:flex;align-items:center;gap:17px;background:var(--paper);border:1px solid #e8dece;border-radius:19px;padding:17px 20px;box-shadow:0 4px 18px #6c674908}.start-number{font:700 23px Georgia,serif;color:#beccba;background:#edf0e4;border-radius:13px;min-width:51px;height:51px;display:grid;place-items:center;direction:ltr}.start-info{flex:1;min-width:0}.status-label{display:flex;align-items:center;gap:7px;color:#9b8b63;font-size:9px;font-weight:800}.status-circle{width:6px;height:6px;border-radius:50%;background:#d4b86e}.start-info h3{font-size:13px;margin:4px 0;color:var(--ink)}.start-info p{font-size:10px;color:#82887c;margin:0 0 8px}.lesson-mini-track{max-width:360px;height:4px}.lesson-mini-track span{width:0;background:var(--green)}.start-info small{display:block;font-size:9px;color:#a19f91;margin-top:6px}.round-arrow{height:38px;width:38px;border:1px solid #e2e5d8;border-radius:50%;background:#f6f4e9;color:var(--green);font-size:21px;cursor:pointer;flex:0 0 auto}.preview-disclaimer{display:flex;align-items:flex-start;gap:9px;color:#8d8c7f;font-size:10px;line-height:1.8;padding:13px 15px;background:#eee8db8c;border:1px solid #e7ddce;border-radius:13px;margin:17px 0 0}.preview-disclaimer svg,.notice-strip svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:#a99059}.page-heading{padding:9px 0 23px}.page-heading .section-kicker{display:block;margin-bottom:7px}.page-heading h1{font-size:31px}.path-summary{display:flex;align-items:center;gap:15px;background:var(--green);color:#fff8e8;padding:19px 22px;border-radius:19px;margin-bottom:15px;box-shadow:var(--shadow)}.path-summary-icon{width:51px;height:51px;display:grid;place-items:center;background:#ffffff1b;border:1px solid #ffffff28;border-radius:15px;font:700 22px Georgia,serif;direction:ltr}.path-summary>div:nth-child(2){flex:1}.path-summary .section-kicker{color:#ccddc9}.path-summary h2{font:700 25px Georgia,serif;direction:ltr;text-align:right;margin:1px 0 3px}.path-summary p{font-size:11px;color:#dae4d4;margin:0}.path-summary-count{display:flex;flex-direction:column;align-items:center;gap:0;border-right:1px solid #ffffff30;padding-right:20px;min-width:77px}.path-summary-count strong{font:700 26px Georgia,serif}.path-summary-count span{font-size:9px;color:#dce6d7}.lesson-list{display:grid;gap:10px}.path-lesson{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid #e8dece;border-radius:17px;padding:14px 17px;min-height:91px}.lesson-first{border-color:#d0ddca;background:#fffaf0}.lesson-final{margin-top:4px}.lesson-step{width:33px;color:#a4ab9c;font:700 17px Georgia,serif;direction:ltr}.lesson-first .lesson-step{color:var(--green)}.lesson-symbol{width:43px;height:43px;border-radius:14px;background:var(--clay-pale);color:var(--clay);display:grid;place-items:center;flex:0 0 auto}.lesson-symbol svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.symbol-peach{background:#f5e2da;color:#a84435}.symbol-green-bg{background:#e5eee3;color:#47785b}.symbol-yellow-bg{background:#f7edcb;color:#947439}.symbol-lavender-bg{background:#e5e0f0;color:#766d99}.lesson-details{flex:1;min-width:0}.lesson-details h3{font-size:12px;margin:0 0 3px;font-weight:850}.lesson-details p{font-size:10px;color:#7e897e;margin:0 0 6px;direction:ltr;text-align:right}.lesson-badge{font-size:9px;color:#99978a;background:#f0ece3;border-radius:7px;padding:3px 7px;display:inline-block}.badge-design{color:#47785b;background:#e5eee3}.lesson-lock{color:#a9ad9f;padding:7px}.lesson-lock svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.empty-state{min-height:430px;background:var(--paper);border:1px solid #e8dece;border-radius:23px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;margin-top:7px}.empty-illustration{width:146px;height:136px;position:relative;margin-bottom:18px}.empty-book{position:absolute;left:25px;top:18px;width:96px;height:105px;border-radius:9px 14px 14px 9px;background:#e5eee3;border-left:9px solid #c5d6c1;display:grid;place-items:center;color:var(--green);font:700 39px Georgia,serif;transform:rotate(-7deg);box-shadow:8px 9px 0 #d2c5ad}.empty-star{position:absolute;right:3px;top:7px;color:var(--clay);font-size:27px}.empty-leaf{position:absolute;bottom:0;left:12px;color:#b1bd8b;font-size:30px}.empty-state h2{font-size:20px;margin:13px 0 6px}.empty-state p{max-width:450px;font-size:12px;color:#80877d;line-height:1.9;margin:0 0 20px}.conversation-teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.conversation-card{background:var(--paper);border:1px solid #e8dece;border-radius:19px;padding:15px;display:flex;flex-direction:column;gap:15px;min-width:0}.conversation-art{height:125px;border-radius:14px;display:grid;place-items:center;font-size:45px}.art-cafe{background:#f5e2da;color:var(--clay)}.art-work{background:#e5eee3;color:var(--green)}.art-hotel{background:#e5e0f0;color:#766d99}.conversation-card h3{font-size:14px;margin:4px 0}.conversation-card p{font:italic 14px Georgia,serif;direction:ltr;text-align:right;color:var(--green);margin:0 0 9px}.notice-strip{display:flex;gap:9px;background:#eee8db8c;border:1px solid #e7ddce;border-radius:13px;padding:13px 15px;margin-top:16px}.notice-strip p{margin:0;color:#8d8c7f;font-size:11px;line-height:1.8}.progress-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--paper);border:1px solid #e8dece;border-radius:20px;padding:24px;margin-bottom:15px}.progress-intro h2{font-size:19px;margin:7px 0}.progress-intro p{font-size:12px;color:#81877b;margin:0}.progress-ring{width:105px;height:105px;border-radius:50%;border:8px solid #e9e5d9;border-right-color:#91ab91;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto}.progress-ring span{font:700 29px Georgia,serif;color:#8d9789}.progress-ring small{font-size:8px;color:#9da093}.skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.skill-grid article{padding:18px 15px;background:var(--paper);border:1px solid #e8dece;border-radius:17px}.skill-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:13px}.skill-green{background:#e5eee3;color:var(--green)}.skill-clay{background:#f5e2da;color:var(--clay)}.skill-yellow{background:#f7edcb;color:#947439}.skill-lavender{background:#e5e0f0;color:#766d99}.skill-grid h3{font-size:12px;margin:0 0 4px}.skill-grid p{font-size:10px;color:#99988b;margin:0 0 13px}.measure-line{display:block;width:100%;height:4px;background:#e9e4d8;border-radius:5px}.settings-panel{background:var(--paper);border:1px solid #e8dece;border-radius:20px;padding:0 20px}.settings-row{display:flex;align-items:center;gap:14px;padding:19px 0;border-bottom:1px solid #eee5d8}.settings-row:last-child{border:0}.settings-symbol{width:41px;height:41px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--green-pale);color:var(--green)}.settings-row h3{font-size:12px;margin:0 0 4px}.settings-row p{font-size:10px;color:#838a7f;margin:0;line-height:1.8}.settings-row>div{flex:1}.settings-status{font-size:9px;font-weight:800;padding:5px 9px;border-radius:9px;color:var(--green);background:var(--green-pale);white-space:nowrap}.settings-status.pending{background:#f3ead5;color:#9b8250}.app-footer{display:flex;align-items:center;gap:9px;color:#9a9b8d;font-size:9px;padding:27px 0 0;margin-top:26px;border-top:1px solid #e4dacb}.footer-mark{font-weight:900;font-size:13px;color:var(--green);direction:ltr}.footer-stage{margin-right:auto}.mobile-nav{display:none}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,16px);opacity:0;background:#294f3c;color:#fff8e9;border-radius:12px;padding:11px 16px;font-size:12px;box-shadow:var(--shadow);pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:calc(100% - 28px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}button:focus-visible,a:focus-visible{outline:3px solid #c28a45;outline-offset:3px}button:disabled{cursor:not-allowed}@media(min-width:1400px){.main-area{padding-inline:60px}.hero-card{min-height:310px}.hero-art{min-height:310px}}@media(max-width:1120px){.main-area{padding-inline:28px}.sidebar{width:230px}.app-shell{grid-template-columns:230px minmax(0,1fr)}.daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.daily-card{min-height:153px}.hero-card{grid-template-columns:minmax(0,1fr) minmax(205px,.68fr)}.conversation-teasers{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.app-shell{display:block}.sidebar{display:none}.main-area{padding:0 22px 100px;max-width:720px}.topbar{height:70px;margin-bottom:23px}.mobile-brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--ink);font:inherit;font-size:17px;font-weight:900;cursor:pointer}.mobile-brand .brand-mark{width:36px;height:36px;border-radius:12px;font-size:16px}.crumb{display:none}.goal-chip{gap:6px;padding:8px 10px}.goal-chip>span:nth-child(2){display:none}.top-actions{margin-right:auto}.avatar-button{width:36px;height:36px}.welcome-stamp{width:88px;height:88px;flex-basis:88px}.stamp-word{font-size:18px}.stamp-sub{font-size:5px}.stamp-spark{font-size:17px}.welcome-row h1{font-size:27px}.welcome-copy{font-size:12px}.hero-card{grid-template-columns:minmax(0,1fr) 220px;min-height:265px}.hero-copy{padding:23px}.hero-art{min-height:265px}.hero-card h2{font-size:33px}.hero-description{font-size:11px}.daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.conversation-teasers{grid-template-columns:1fr}.conversation-card{flex-direction:row;align-items:center}.conversation-art{width:110px;height:100px;flex:0 0 auto}.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-nav{position:fixed;bottom:0;right:0;left:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 9px calc(8px + env(safe-area-inset-bottom));background:#fffaf2f2;border-top:1px solid #e6ddcf;backdrop-filter:blur(14px)}.mobile-nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 0;color:#899083;font:inherit;cursor:pointer;min-width:0}.mobile-nav-item span{height:22px;display:grid;place-items:center}.mobile-nav-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-nav-item small{font-size:9px;font-weight:700}.mobile-nav-item.active{color:var(--green-dark)}.mobile-nav-item.active span{background:var(--green-pale);width:40px;border-radius:10px}.app-footer{padding-bottom:5px}.toast{bottom:90px}}@media(max-width:520px){.main-area{padding:0 15px 105px}.topbar{height:65px;margin-bottom:20px}.goal-chip{font-size:10px;padding:7px 8px}.goal-chip strong{font-size:10px}.welcome-row{align-items:flex-start;gap:8px;margin-bottom:20px}.welcome-stamp{width:64px;height:64px;flex-basis:64px;margin-top:8px}.stamp-word{font-size:14px}.stamp-spark{font-size:14px}.stamp-sub{font-size:4px;letter-spacing:.3px}.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:9px}.welcome-row h1{font-size:24px;letter-spacing:-.6px;max-width:310px}.welcome-copy{font-size:11px;line-height:1.8}.hero-card{display:block;min-height:0}.hero-copy{padding:23px 20px 24px}.hero-kicker{margin-top:15px}.hero-card h2{font-size:34px}.hero-description{max-width:100%;font-size:11px;margin-bottom:17px}.hero-art{min-height:155px}.sun-disc{width:116px;height:116px;top:6px;left:calc(50% - 58px)}.book-back{width:100px;height:86px;top:51px;left:calc(50% - 26px)}.book-front{width:103px;height:89px;top:42px;left:calc(50% - 43px);padding-top:10px}.book-front span{font-size:21px}.book-front i{height:2px;margin-top:5px;width:38px}.book-front i:nth-of-type(2){width:48px}.book-front i:nth-of-type(3){width:30px}.art-note{font-size:9px;padding:4px 6px}.note-one{top:19px;right:15%}.note-two{bottom:14px;left:12%}.leaf-one{top:18px;right:19%;transform:scale(.7) rotate(-34deg)}.leaf-two{top:20px;right:31%;transform:scale(.6) rotate(35deg)}.flower-one{top:12px;left:12%;font-size:24px}.flower-two{bottom:12px;right:15%;font-size:19px}.hero-index{bottom:10px;left:13px}.goal-heading{margin-top:24px}.section-heading h2{font-size:16px}.soft-label{font-size:9px;padding:4px 7px}.daily-grid{gap:9px}.daily-card{padding:12px;border-radius:16px;min-height:159px}.daily-symbol{width:31px;height:31px;border-radius:10px}.step-count,.mini-tag{font-size:8px;padding:4px 5px}.daily-card h3{font-size:11px;margin-top:12px}.daily-card p{font-size:9px}.goal-numbers strong{font-size:29px}.goal-numbers span{font-size:9px}.section-heading.path-heading{margin-top:25px}.start-card{padding:13px;gap:10px}.start-number{min-width:40px;height:42px;font-size:20px}.start-info h3{font-size:11px}.start-info p{font-size:9px}.start-info small{font-size:8px}.round-arrow{width:32px;height:32px}.preview-disclaimer{font-size:9px;padding:11px;margin-top:13px}.page-heading{padding-top:5px}.page-heading h1{font-size:27px}.page-heading>p{font-size:11px}.path-summary{gap:10px;padding:15px}.path-summary-icon{width:43px;height:43px}.path-summary h2{font-size:20px}.path-summary p{font-size:9px}.path-summary-count{padding-right:11px;min-width:58px}.path-summary-count strong{font-size:23px}.path-summary-count span{font-size:8px}.path-lesson{gap:9px;padding:12px 10px;min-height:83px}.lesson-step{width:24px;font-size:14px}.lesson-symbol{width:36px;height:36px;border-radius:11px}.lesson-details h3{font-size:10px}.lesson-details p{font-size:8px;letter-spacing:-.2px}.lesson-badge{font-size:8px}.lesson-lock{padding:2px}.empty-state{padding:20px;min-height:420px}.empty-state h2{font-size:17px}.empty-state p{font-size:11px}.progress-intro{padding:17px;gap:12px}.progress-intro h2{font-size:15px}.progress-intro p{font-size:10px;line-height:1.8}.progress-ring{width:83px;height:83px;border-width:6px}.progress-ring span{font-size:23px}.progress-ring small{font-size:7px}.skill-grid{gap:9px}.skill-grid article{padding:14px 12px}.skill-grid h3{font-size:11px}.conversation-card{padding:11px;gap:12px}.conversation-art{width:83px;height:83px;font-size:32px}.conversation-card h3{font-size:12px}.conversation-card p{font-size:12px}.settings-panel{padding-inline:13px}.settings-row{gap:10px}.settings-symbol{width:34px;height:34px}.settings-row p{font-size:9px}.settings-status{font-size:8px;padding:4px 6px}.footer-stage{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Milestone 1.1 — persistent preferences, onboarding, accessible controls, and themes */ :root{color-scheme:light;--focus:#bd8744;--control-bg:#fffdf8;--control-border:#d9cebc;--control-hover:#eef2e9} [hidden]{display:none!important} button,select,input{font:inherit} button{touch-action:manipulation} .goal-chip{cursor:pointer;font:inherit;border:1px solid #e5dac8;text-align:inherit} .goal-chip:hover{border-color:#b3c7b0;background:#f1eddf} .setting-copy{min-width:130px;flex:1} .setting-select{width:min(265px,44%);min-height:43px;border:1px solid var(--control-border);border-radius:12px;background:var(--control-bg);color:var(--ink);padding:8px 12px;cursor:pointer;outline-offset:3px} .setting-select:focus-visible{outline:3px solid var(--focus)} .theme-settings-row{align-items:flex-start;flex-wrap:wrap} .theme-options{display:flex;gap:7px;flex-wrap:wrap} .theme-options button{display:flex;align-items:center;gap:7px;border:1px solid var(--control-border);background:var(--control-bg);color:var(--ink);border-radius:12px;padding:8px 11px;cursor:pointer;font-size:11px;min-height:40px} .theme-options button[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-pale);color:var(--green-dark);font-weight:800} .theme-swatch{display:inline-block;width:17px;height:17px;border-radius:6px;border:1px solid #aaa9a1;flex:0 0 auto} .theme-swatch-light{background:linear-gradient(135deg,#fffaf2 0 50%,#47785b 50%)} .theme-swatch-dark{background:linear-gradient(135deg,#17221b 0 50%,#9bc6a5 50%)} .theme-swatch-system{background:linear-gradient(90deg,#fffaf2 0 50%,#17221b 50%)} .button-secondary{background:var(--green-pale);color:var(--green-dark);border:1px solid var(--control-border);white-space:nowrap} .button-secondary:hover{filter:brightness(.97)} .button-quiet{background:transparent;border:1px solid var(--control-border);color:var(--clay);white-space:nowrap} .button-quiet:hover{background:var(--clay-pale)} .settings-feedback{font-size:11px;color:var(--muted);padding:0 0 18px;margin:0} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .onboarding-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(32,45,35,.58);backdrop-filter:blur(8px);overflow:auto} .onboarding-card{position:relative;width:min(100%,610px);max-height:min(94dvh,900px);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:28px;padding:28px clamp(18px,4vw,36px) 22px;box-shadow:0 25px 90px rgba(22,35,25,.26)} .onboarding-decoration{height:84px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:4px;overflow:hidden;border-radius:18px;background:linear-gradient(115deg,#e8efe2,#f6eadb 58%,#eee7f3)} .onboarding-sun{position:absolute;width:86px;height:86px;border-radius:50%;background:#f0d895;right:calc(50% - 43px);top:-21px;opacity:.9} .onboarding-leaf{position:absolute;right:calc(50% - 89px);top:18px;font-size:39px;color:#47785b;transform:rotate(18deg)} .onboarding-spark{position:absolute;left:calc(50% - 93px);top:16px;font-size:29px;color:#a84435} .onboarding-book{position:relative;z-index:1;direction:ltr;background:#fffaf2;color:#47785b;border:2px solid #d8dfd1;box-shadow:4px 5px 0 #a8443533;transform:rotate(-4deg);font:700 23px Georgia,serif;padding:8px 16px;border-radius:8px} .onboarding-kicker{display:block;color:var(--clay);letter-spacing:1.8px;font-weight:900;font-size:10px;margin-top:15px} .onboarding-card h1{font-size:clamp(24px,4vw,31px);line-height:1.35;margin:4px 0 8px;letter-spacing:-.6px} .onboarding-card>p:not(.onboarding-privacy){font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 17px} #onboarding-form fieldset{border:0;border-top:1px solid var(--line);padding:13px 0 0;margin:0 0 12px;min-width:0} #onboarding-form legend{padding:0 0 8px;font-size:12px;font-weight:850} .choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .choice-card{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;border:1px solid var(--line);background:var(--paper2);border-radius:14px;padding:10px;cursor:pointer;transition:border-color .18s,background .18s} .choice-card input{position:absolute;top:9px;left:9px;accent-color:var(--green)} .choice-card:has(input:checked){background:var(--green-pale);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)} .choice-emoji{font-size:22px;margin-bottom:3px} .choice-card strong{font-size:11px} .choice-card small{font-size:9px;color:var(--muted)} .select-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:7px 0;background:var(--paper2);cursor:pointer} .select-choice:has(input:checked){border-color:var(--green);background:var(--green-pale)} .select-choice input,.time-options input{accent-color:var(--green);margin-top:4px;flex:0 0 auto} .select-choice span{display:flex;flex-direction:column;gap:2px} .select-choice strong{font-size:11px} .select-choice small{color:var(--muted);font-size:10px} .time-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .time-options label{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 7px;border:1px solid var(--line);background:var(--paper2);border-radius:12px;cursor:pointer;font-size:11px} .time-options label:has(input:checked){border-color:var(--green);background:var(--green-pale);font-weight:800} .onboarding-submit{width:100%;justify-content:center;min-height:46px;margin-top:4px} .onboarding-skip{display:block;margin:8px auto 0;background:none;border:0;color:var(--muted);font-size:11px;padding:6px 12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .onboarding-privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:var(--muted);margin:13px 0 0} .onboarding-privacy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8} body.onboarding-open{overflow:hidden} /* Dark mode uses semantic tokens and readable surfaces across every screen. */ :root[data-theme="dark"]{color-scheme:dark;--cream:#111813;--paper:#1b261f;--paper2:#222f27;--green:#9bc6a5;--green-dark:#c4e3cc;--green-pale:#2b4433;--clay:#f0a493;--clay-pale:#49302b;--lavender:#c9bdec;--yellow:#dfc274;--ink:#e8eee8;--muted:#a7b3a8;--line:#35433a;--white:#202a23;--shadow:0 12px 32px rgba(0,0,0,.23);--focus:#e9bb70;--control-bg:#202b24;--control-border:#48574b;--control-hover:#2b3c2f} :root[data-theme="dark"] body{background:var(--cream);color:var(--ink)} :root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .settings-panel,:root[data-theme="dark"] .daily-card,:root[data-theme="dark"] .start-card,:root[data-theme="dark"] .path-summary,:root[data-theme="dark"] .path-lesson,:root[data-theme="dark"] .empty-state,:root[data-theme="dark"] .progress-intro,:root[data-theme="dark"] .skill-grid article,:root[data-theme="dark"] .conversation-card{background:var(--paper);border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .sidebar{border-left-color:var(--line)} :root[data-theme="dark"] .side-caption,:root[data-theme="dark"] .section-kicker,:root[data-theme="dark"] .crumb,:root[data-theme="dark"] .welcome-copy,:root[data-theme="dark"] .page-heading>p,:root[data-theme="dark"] .hero-description,:root[data-theme="dark"] .daily-card p,:root[data-theme="dark"] .start-info p,:root[data-theme="dark"] .start-info small,:root[data-theme="dark"] .preview-disclaimer,:root[data-theme="dark"] .lesson-details p,:root[data-theme="dark"] .lesson-badge,:root[data-theme="dark"] .empty-state p,:root[data-theme="dark"] .progress-intro p,:root[data-theme="dark"] .skill-grid p,:root[data-theme="dark"] .settings-row p,:root[data-theme="dark"] .notice-strip p,:root[data-theme="dark"] .app-footer,:root[data-theme="dark"] .version-note,:root[data-theme="dark"] .side-note p{color:var(--muted)} :root[data-theme="dark"] .topbar,:root[data-theme="dark"] .app-footer,:root[data-theme="dark"] .settings-row,:root[data-theme="dark"] #onboarding-form fieldset{border-color:var(--line)} :root[data-theme="dark"] .goal-chip{background:var(--paper2);border-color:var(--line);color:var(--muted)} :root[data-theme="dark"] .goal-chip strong{color:var(--green-dark)} :root[data-theme="dark"] .goal-chip:hover{background:var(--green-pale)} :root[data-theme="dark"] .nav-item{color:#b0bcb1} :root[data-theme="dark"] .nav-item:hover{background:#29382e;color:var(--green-dark)} :root[data-theme="dark"] .nav-item.active{background:var(--green-pale);color:var(--green-dark)} :root[data-theme="dark"] .nav-count{background:var(--paper2);color:var(--green-dark)} :root[data-theme="dark"] .side-note{background:#26342a;border-color:var(--line)} :root[data-theme="dark"] .note-sun{background:#5c4d29;color:#f5db94} :root[data-theme="dark"] .mobile-brand{color:var(--ink)} :root[data-theme="dark"] .mobile-nav{background:rgba(27,38,31,.96);border-color:var(--line)} :root[data-theme="dark"] .mobile-nav-item{color:#a7b3a8} :root[data-theme="dark"] .mobile-nav-item.active{color:var(--green-dark)} :root[data-theme="dark"] .mobile-nav-item.active span{background:var(--green-pale)} :root[data-theme="dark"] .settings-symbol,:root[data-theme="dark"] .settings-status{background:var(--green-pale);color:var(--green-dark)} :root[data-theme="dark"] .settings-status.pending{background:#403821;color:#e6ce8c} :root[data-theme="dark"] .preview-disclaimer,:root[data-theme="dark"] .notice-strip{background:#222e26;border-color:var(--line)} :root[data-theme="dark"] .status-label{color:var(--green-dark)} :root[data-theme="dark"] .measure-line,:root[data-theme="dark"] .goal-track{background:#354239} :root[data-theme="dark"] .progress-ring{border-color:#354239;border-right-color:var(--green)} :root[data-theme="dark"] .goal-numbers strong,:root[data-theme="dark"] .goal-numbers span,:root[data-theme="dark"] .step-count,:root[data-theme="dark"] .mini-tag{color:var(--ink)} :root[data-theme="dark"] .step-count,:root[data-theme="dark"] .mini-tag{background:var(--paper2)} :root[data-theme="dark"] .lesson-badge.badge-design{background:#403821;color:#e6ce8c} :root[data-theme="dark"] .round-arrow{background:var(--green-pale);color:var(--green-dark)} :root[data-theme="dark"] .conversation-art{filter:brightness(.78) saturate(.85)} :root[data-theme="dark"] .art-hotel{background:#3b334e;color:#d0c4f1} :root[data-theme="dark"] .onboarding-card{background:var(--paper);border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .onboarding-decoration{background:linear-gradient(115deg,#273b2e,#46352d 58%,#302a40)} :root[data-theme="dark"] .onboarding-book{background:#f7f0e4;color:#335e43} :root[data-theme="dark"] .choice-card,:root[data-theme="dark"] .select-choice,:root[data-theme="dark"] .time-options label{background:var(--paper2);border-color:var(--line);color:var(--ink)} :root[data-theme="dark"] .choice-card:has(input:checked),:root[data-theme="dark"] .select-choice:has(input:checked),:root[data-theme="dark"] .time-options label:has(input:checked){background:var(--green-pale);border-color:var(--green)} :root[data-theme="dark"] .theme-options button{background:var(--control-bg);color:var(--ink);border-color:var(--control-border)} :root[data-theme="dark"] .theme-options button[aria-pressed="true"]{background:var(--green-pale);color:var(--green-dark);border-color:var(--green)} :root[data-theme="dark"] .button-secondary{background:var(--green-pale);color:var(--green-dark);border-color:var(--line)} :root[data-theme="dark"] .button-quiet{border-color:var(--line);color:var(--clay)} :root[data-theme="dark"] .button-quiet:hover{background:var(--clay-pale)} :root[data-theme="dark"] .brand-mark,:root[data-theme="dark"] .avatar-button{background:var(--green);color:#142018} :root[data-theme="dark"] .hero-card{box-shadow:var(--shadow)} :root[data-theme="dark"] .sun-disc{background:#ddc879} :root[data-theme="dark"] .book-front{background:#25372b;border-color:#5f8566;color:#b7dfbd} :root[data-theme="dark"] .book-back{background:#603c34} :root[data-theme="dark"] .art-note{background:#283b30;color:#c3e4c7} :root[data-theme="dark"] .leaf-one,:root[data-theme="dark"] .leaf-two{background:#547a5d} :root[data-theme="dark"] .flower-one,:root[data-theme="dark"] .flower-two{color:#dfb58c} :root[data-theme="dark"] .goal-chip-icon{color:var(--green)} @media(max-width:800px){.setting-select{width:100%;max-width:none;margin-top:7px}.settings-row{flex-wrap:wrap}.settings-row .setting-copy{flex-basis:calc(100% - 60px)}.settings-row>.settings-symbol{align-self:flex-start}.settings-row .setting-select,.settings-row .theme-options,.settings-row>#install-app,.settings-row>#reset-settings{margin-inline-start:50px}.settings-reset-row>.settings-symbol{margin-bottom:0}.theme-options{width:100%}.theme-options button{flex:1;justify-content:center}.onboarding-card{padding-top:18px;border-radius:22px}.onboarding-decoration{height:70px}} @media(max-width:430px){.onboarding-overlay{padding:8px}.onboarding-card{max-height:98dvh;padding-inline:15px}.choice-grid{gap:6px}.choice-card{padding:8px 7px}.choice-card strong{font-size:10px}.choice-card small{font-size:8px}.choice-emoji{font-size:19px}.time-options label{font-size:10px;padding-inline:3px}} @media(prefers-reduced-motion:reduce){.onboarding-overlay,.choice-card{transition:none}} /* Dark-theme contrast fixes for large branded panels and primary actions. */ :root[data-theme="dark"] .hero-card,:root[data-theme="dark"] .path-summary{background:#285a3d;color:#f7f3e9} :root[data-theme="dark"] .hero-card .button-light{color:#285a3d;background:#fffaf2} :root[data-theme="dark"] .button-primary{background:#326844;color:#fffaf2;border-color:#326844} :root[data-theme="dark"] .brand-mark,:root[data-theme="dark"] .avatar-button{background:#326844;color:#fffaf2} :root[data-theme="dark"] .start-number{background:#2b4433;color:#c4e3cc} /* Milestone 1.2 — viewport safety, focus, mobile navigation, and clear app status */ .skip-link{position:fixed;top:10px;right:10px;z-index:1000;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:var(--paper);color:var(--ink);border:2px solid var(--green);box-shadow:var(--shadow);font-weight:800;text-decoration:none} .skip-link:focus{transform:translateY(0)} :focus-visible{outline:3px solid var(--focus,#bd8744);outline-offset:3px} button,select,input,summary,a{-webkit-tap-highlight-color:transparent} .view[aria-hidden="true"]{display:none!important} .toast{overflow-wrap:anywhere;max-width:min(560px,calc(100% - 28px));padding:11px 16px;line-height:1.55;box-shadow:0 12px 32px rgba(0,0,0,.18);bottom:calc(20px + env(safe-area-inset-bottom));} .settings-row .setting-copy{overflow-wrap:anywhere} .settings-status{flex:0 0 auto;max-width:100%;white-space:normal;text-align:center;line-height:1.5} .settings-status.status-error{background:var(--clay-pale);color:var(--clay)} .settings-status.status-ok{background:var(--green-pale);color:var(--green-dark)} .about-details{margin:0 0 18px;padding:15px 17px;border:1px solid var(--line);border-radius:15px;background:var(--paper2);color:var(--ink)} .about-details summary{cursor:pointer;font-size:12px;font-weight:850;min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:10px} .about-details summary::marker{color:var(--green)} .about-details-content{border-top:1px solid var(--line);margin-top:10px;padding-top:9px} .about-details-content p{font-size:11px;line-height:1.9;color:var(--muted);margin:7px 0} .about-details-content strong{color:var(--ink)} #offline-status{padding:9px 11px;border-radius:10px;background:var(--green-pale);color:var(--green-dark)} body.onboarding-open .mobile-nav{visibility:hidden} .onboarding-card{overscroll-behavior:contain;scrollbar-gutter:stable} .onboarding-card input:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .mobile-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom));} @media(max-width:800px){ .main-area{padding-bottom:calc(112px + env(safe-area-inset-bottom))} .mobile-nav{padding-bottom:calc(9px + env(safe-area-inset-bottom));min-height:66px} .toast{bottom:calc(82px + env(safe-area-inset-bottom));} .mobile-nav-item{min-height:44px;gap:3px} .mobile-nav-item small{font-size:10px;line-height:1.2} .settings-row .setting-copy{overflow-wrap:anywhere} } @media(max-width:520px){ .main-area{padding-inline:14px;padding-bottom:calc(118px + env(safe-area-inset-bottom))} .top-actions{gap:7px} .toast{width:calc(100% - 24px);max-width:480px} .settings-row .setting-copy{min-width:0;flex-basis:calc(100% - 54px)} .settings-row .setting-select,.settings-row .theme-options,.settings-row>#install-app,.settings-row>#reset-settings{margin-inline-start:0} .settings-row .button{max-width:100%;white-space:normal} .about-details{padding:13px} } @media(max-height:650px) and (max-width:800px){ .onboarding-overlay{place-items:start center;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))} .onboarding-card{max-height:calc(100dvh - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } :root[data-theme="dark"] .about-details{background:var(--paper);border-color:var(--line)} :root[data-theme="dark"] .about-details-content{border-color:var(--line)} :root[data-theme="dark"] .about-details-content strong{color:var(--ink)} :root[data-theme="dark"] .skip-link{background:var(--paper);color:var(--ink);border-color:var(--green)} /* Notifications stay in document flow near the related control, never over inputs. */ .toast{position:relative;inset:auto;display:none;width:100%;max-width:100%;margin:0 0 13px;padding:11px 15px;transform:none;opacity:0;text-align:start;line-height:1.6;overflow-wrap:anywhere;box-shadow:var(--shadow);pointer-events:none;z-index:2} .toast.show{display:block;opacity:1;transform:none;margin-block:9px 13px} /* Light-theme small-text contrast adjustments (especially captions and helper text). */ :root[data-theme="light"]{--muted:#60695e} :root[data-theme="light"] .side-caption, :root[data-theme="light"] .section-kicker, :root[data-theme="light"] .crumb, :root[data-theme="light"] .welcome-copy, :root[data-theme="light"] .page-heading>p, :root[data-theme="light"] .daily-card p, :root[data-theme="light"] .start-info p, :root[data-theme="light"] .start-info small, :root[data-theme="light"] .lesson-details p, :root[data-theme="light"] .preview-disclaimer, :root[data-theme="light"] .progress-intro p, :root[data-theme="light"] .skill-grid p, :root[data-theme="light"] .settings-row p, :root[data-theme="light"] .notice-strip p, :root[data-theme="light"] .app-footer, :root[data-theme="light"] .version-note, :root[data-theme="light"] .side-note p, :root[data-theme="light"] .settings-feedback, :root[data-theme="light"] .mini-tag, :root[data-theme="light"] .step-count, :root[data-theme="light"] .stamp-sub{color:#60695e} :root[data-theme="light"] .soft-label{color:#60695e} :root[data-theme="light"] .goal-chip{color:#60695e} :root[data-theme="light"] .status-label{color:#2d5e46} :root[data-theme="light"] .onboarding-card>p:not(.onboarding-privacy), :root[data-theme="light"] .choice-card small, :root[data-theme="light"] .select-choice small, :root[data-theme="light"] .onboarding-privacy{color:#60695e} .stamp-sub{font-size:7px} #offline-status{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:var(--green-pale);color:var(--green-dark);font-size:10px;line-height:1.7;overflow-wrap:anywhere} :root[data-theme="dark"] #offline-status{background:#263a2c;color:#c4e3cc} @media(max-width:430px){ .choice-card strong{font-size:11px} .choice-card small{font-size:10px} .choice-emoji{font-size:18px} .choice-card{padding:9px 7px} .time-options label{font-size:11px} } /* Milestone 1.3 — direction isolation, diagnostics, backup controls, and update flow. */ .spanish-heading, .spanish-copy, [lang="es"][dir="ltr"], bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: left; } .spanish-heading { width: 100%; } .brand-copy strong[lang="es"] { display: block; direction: ltr; unicode-bidi: isolate; text-align: right; } .mobile-nav-item { min-width: 0; padding-inline: 2px; overflow-wrap: anywhere; } .mobile-nav-item small { max-width: 100%; } .main-area { min-width: 0; } .view { scroll-margin-block-end: calc(100px + env(safe-area-inset-bottom)); } .settings-panel > .settings-row { min-width: 0; } .settings-row .setting-copy { min-width: 0; } .settings-row .button { flex-shrink: 0; } .update-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px; border: 1px solid #b9d0bc; border-radius: 16px; background: var(--green-pale); color: var(--green-dark); } .update-banner[hidden] { display: none !important; } .update-banner p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; } .update-actions,.backup-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .diagnostics-details { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper2); color: var(--ink); } .diagnostics-details summary { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 850; font-size: 12px; } .diagnostics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; } .diagnostics-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); } .diagnostics-grid dt { margin-bottom: 5px; font-size: 10px; color: var(--muted); font-weight: 750; } .diagnostics-grid dd { margin: 0; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; } .diagnostic-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.7; } :root[data-theme="dark"] .update-banner { background: #263a2c; border-color: #496d50; color: #d7efda; } :root[data-theme="dark"] .diagnostics-details { background: var(--paper); border-color: var(--line); } :root[data-theme="dark"] .diagnostics-grid > div { background: var(--paper2); border-color: var(--line); } .backup-row .backup-actions { margin-inline-start: auto; } @media(max-width:800px) { .diagnostics-row #refresh-diagnostics { margin-inline-start: 50px; } .backup-row .backup-actions { width: 100%; margin-inline-start: 50px; } .update-actions { width: 100%; } .update-actions .button { flex: 1; } } @media(max-width:520px) { .diagnostics-grid { grid-template-columns: minmax(0,1fr); } .diagnostics-row #refresh-diagnostics,.backup-row .backup-actions { margin-inline-start: 0; } .backup-actions .button { flex: 1; } .update-banner { align-items: stretch; } } /* Milestone 1.4 — app information, privacy, and safe local-data deletion. */ .about-link-row .button { flex-shrink: 0; } .about-page-panel { padding: clamp(18px, 3vw, 30px); } .about-version-block { display: flex; align-items: center; gap: 15px; padding: 5px 0 22px; border-bottom: 1px solid var(--line); } .about-version-block .brand-mark { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; border-radius: 18px; background: var(--green); color: #fffaf2; font-weight: 950; font-size: 19px; } .about-version-block h2 { margin: 0 0 4px; font-size: 22px; } .about-version-block p { margin: 0; color: var(--muted); line-height: 1.8; font-size: 13px; } .about-section { padding: 20px 0; border-bottom: 1px solid var(--line); } .about-section h2 { margin: 0 0 9px; font-size: 16px; } .about-section p, .about-section li { color: var(--muted); line-height: 1.9; font-size: 13px; overflow-wrap: anywhere; } .about-section p { margin: 0 0 12px; } .about-section p:last-child { margin-bottom: 0; } .about-section ul { margin: 8px 0 0; padding-inline-start: 24px; } .about-section li + li { margin-top: 5px; } .about-danger-zone { border-bottom: 0; } .about-danger-zone h2 { color: var(--clay); } .button-danger { min-height: 42px; padding: 10px 15px; border: 1px solid #a84435; border-radius: 12px; background: #a84435; color: #fffaf2; font: inherit; font-weight: 800; cursor: pointer; } .button-danger:hover { background: #87392e; } .button-danger:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .about-page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.8; } .about-page-footer strong { color: var(--ink); } :root[data-theme="dark"] .about-version-block .brand-mark { background: #326844; color: #fffaf2; } :root[data-theme="dark"] .button-danger { background: #8f4439; border-color: #bd766b; color: #fff5f1; } @media (max-width: 520px) { .about-link-row .button { margin-inline-start: 50px; } .about-page-panel { padding: 16px; } .about-section { padding: 16px 0; } .about-section p, .about-section li { font-size: 12px; } .about-page-footer { flex-direction: column; } } /* Light-surface contrast pass (dark mode retains its semantic muted tokens). */ :root:not([data-theme="dark"]) .welcome-copy, :root:not([data-theme="dark"]) .page-heading > p, :root:not([data-theme="dark"]) .about-version-block p, :root:not([data-theme="dark"]) .about-section p, :root:not([data-theme="dark"]) .about-section li, :root:not([data-theme="dark"]) .settings-row p, :root:not([data-theme="dark"]) .app-footer, :root:not([data-theme="dark"]) .version-note, :root:not([data-theme="dark"]) .side-caption, :root:not([data-theme="dark"]) .section-kicker, :root:not([data-theme="dark"]) .crumb { color: #5e6a60; } /* Milestone 1.5 — complete dark-theme palette for icon families and illustrations. */ :root { --tone-green-bg: #e5eee3; --tone-green-fg: #47785b; --tone-clay-bg: #f5e2da; --tone-clay-fg: #a84435; --tone-lavender-bg: #e5e0f0; --tone-lavender-fg: #766d99; --tone-gold-bg: #f7edcb; --tone-gold-fg: #80622d; --tone-peach-bg: #f5e2da; --tone-peach-fg: #a84435; --tone-soft-bg: #ece5d8; --tone-soft-fg: #60695e; --tone-daily-total: #fff8e9; --tone-badge-bg: #f0ece3; --tone-badge-fg: #6c7167; --tone-stamp-bg: #f6efe3; --tone-stamp-border: #c7b79e; --tone-empty-book: #e5eee3; --tone-empty-book-edge: #c5d6c1; --tone-empty-shadow: #d2c5ad; --tone-hero-start: #518464; --tone-hero-end: #396c4f; --tone-hero-sun: #efcf85; --tone-hero-book: #fff3d9; --tone-hero-book-edge: #eddfc5; --tone-hero-lines: #d7d1b6; --tone-hero-book-back: #b45b43; --tone-hero-book-back-edge: #d18a66; --tone-hero-leaf: #8ab18a; --tone-hero-leaf-alt: #c2d0a2; --tone-hero-flower: #f0d895; --tone-hero-flower-alt: #f4d9bf; --tone-hero-note-bg: #fff8e9; --tone-hero-note-fg: #a84435; --tone-hero-note-alt-fg: #47785b; --tone-onboard-start: #e8efe2; --tone-onboard-mid: #f6eadb; --tone-onboard-end: #eee7f3; --tone-onboard-book: #fffaf2; --tone-onboard-book-fg: #47785b; --tone-onboard-book-edge: #d8dfd1; --tone-onboard-shadow: #a8443533; } :root[data-theme="dark"] { --tone-green-bg: #263d2e; --tone-green-fg: #b8dfc1; --tone-clay-bg: #452e2b; --tone-clay-fg: #f1aa9a; --tone-lavender-bg: #332d45; --tone-lavender-fg: #d4c8f0; --tone-gold-bg: #3e3521; --tone-gold-fg: #f0d88f; --tone-peach-bg: #452e2a; --tone-peach-fg: #f1ad9c; --tone-soft-bg: #2a362e; --tone-soft-fg: #bdc8bd; --tone-daily-total: #202c24; --tone-badge-bg: #29362e; --tone-badge-fg: #bdc8bd; --tone-stamp-bg: #202d24; --tone-stamp-border: #506956; --tone-empty-book: #26392d; --tone-empty-book-edge: #577860; --tone-empty-shadow: #090f0b; --tone-hero-start: #2d4d37; --tone-hero-end: #1b3023; --tone-hero-sun: #cbb56f; --tone-hero-book: #26392d; --tone-hero-book-edge: #66876e; --tone-hero-lines: #6b8970; --tone-hero-book-back: #633d34; --tone-hero-book-back-edge: #a56d56; --tone-hero-leaf: #52785a; --tone-hero-leaf-alt: #71885c; --tone-hero-flower: #d8b477; --tone-hero-flower-alt: #c99378; --tone-hero-note-bg: #25372b; --tone-hero-note-fg: #f0b5a3; --tone-hero-note-alt-fg: #c4e1c5; --tone-onboard-start: #203729; --tone-onboard-mid: #302c28; --tone-onboard-end: #302941; --tone-onboard-book: #25372b; --tone-onboard-book-fg: #c6e3c9; --tone-onboard-book-edge: #5e8065; --tone-onboard-shadow: #00000066; } /* Every colored icon family uses theme tokens instead of fixed light swatches. */ .symbol-green, .symbol-green-bg, .skill-green { background: var(--tone-green-bg); color: var(--tone-green-fg); } .symbol-clay, .symbol-peach, .skill-clay { background: var(--tone-clay-bg); color: var(--tone-clay-fg); } .symbol-lavender, .symbol-lavender-bg, .skill-lavender { background: var(--tone-lavender-bg); color: var(--tone-lavender-fg); } .symbol-yellow, .symbol-yellow-bg, .skill-yellow { background: var(--tone-gold-bg); color: var(--tone-gold-fg); } .daily-total { background: var(--tone-daily-total); } .soft-label { background: var(--tone-soft-bg); color: var(--tone-soft-fg); } .lesson-badge { background: var(--tone-badge-bg); color: var(--tone-badge-fg); } .welcome-stamp { background: var(--tone-stamp-bg); border-color: var(--tone-stamp-border); } .stamp-sub { color: var(--tone-soft-fg); } .empty-book { background: var(--tone-empty-book); border-left-color: var(--tone-empty-book-edge); box-shadow: 8px 9px 0 var(--tone-empty-shadow); } .empty-star { color: var(--tone-clay-fg); } .empty-leaf { color: var(--tone-green-fg); } .preview-disclaimer { background: var(--tone-soft-bg); border-color: var(--line); color: var(--tone-soft-fg); } .preview-disclaimer svg, .notice-strip svg { color: var(--tone-gold-fg); } /* The hero artwork is drawn in CSS; all its illustrated pieces get a matching dark palette. */ .hero-art { background: linear-gradient(145deg, var(--tone-hero-start), var(--tone-hero-end)); } .sun-disc { background: var(--tone-hero-sun); } .book-front { background: var(--tone-hero-book); border-left-color: var(--tone-hero-book-edge); color: var(--tone-green-fg); } .book-front i { background: var(--tone-hero-lines); } .book-back { background: var(--tone-hero-book-back); border-color: var(--tone-hero-book-back-edge); } .art-leaf { background: var(--tone-hero-leaf); } .leaf-two { background: var(--tone-hero-leaf-alt); } .art-flower { color: var(--tone-hero-flower); } .flower-two { color: var(--tone-hero-flower-alt); } .art-note { background: var(--tone-hero-note-bg); color: var(--tone-hero-note-fg); } .note-two { color: var(--tone-hero-note-alt-fg); } /* Conversation cards use deliberately designed dark colors, not a global dimming filter. */ .conversation-art { filter: none !important; } .art-cafe { background: var(--tone-clay-bg); color: var(--tone-clay-fg); } .art-work { background: var(--tone-green-bg); color: var(--tone-green-fg); } .art-hotel { background: var(--tone-lavender-bg); color: var(--tone-lavender-fg); } /* The first-run illustration is also retinted; the old version kept a bright cream book at night. */ .onboarding-decoration { background: linear-gradient(115deg, var(--tone-onboard-start), var(--tone-onboard-mid) 58%, var(--tone-onboard-end)); } .onboarding-leaf { color: var(--tone-green-fg); } .onboarding-spark { color: var(--tone-clay-fg); } .onboarding-book { background: var(--tone-onboard-book); color: var(--tone-onboard-book-fg); border-color: var(--tone-onboard-book-edge); box-shadow: 4px 5px 0 var(--tone-onboard-shadow); } /* Dark theme refinements: no pale icon tiles or paper illustrations are left behind. */ :root[data-theme="dark"] .conversation-art { filter: none !important; } :root[data-theme="dark"] .daily-symbol.symbol-yellow, :root[data-theme="dark"] .daily-symbol.symbol-lavender, :root[data-theme="dark"] .daily-symbol.symbol-clay { border: 1px solid #ffffff0b; } :root[data-theme="dark"] .lesson-symbol.symbol-peach, :root[data-theme="dark"] .lesson-symbol.symbol-lavender, :root[data-theme="dark"] .lesson-symbol.symbol-yellow-bg, :root[data-theme="dark"] .lesson-symbol.symbol-green-bg { border: 1px solid #ffffff0b; } :root[data-theme="dark"] .lesson-first .lesson-step { color: #b8dfc1; } :root[data-theme="dark"] .empty-illustration { filter: saturate(.9); } :root[data-theme="dark"] .art-orbit { border-color: #d8e6d933; } :root[data-theme="dark"] .hero-card .hero-art { box-shadow: inset 0 0 0 1px #d1e8d00a; } :root[data-theme="dark"] .onboarding-sun { background: #ad9654; } :root[data-theme="dark"] .stamp-spark { color: var(--tone-clay-fg); } :root[data-theme="dark"] .soft-label { border: 1px solid #ffffff0a; } :root[data-theme="dark"] .status-label { color: #e3cc8c; } :root[data-theme="dark"] .lesson-badge.badge-design { background: #3d3421; color: #f0d88f; } /* Final precedence fixes: ensure legacy dark overrides use the same illustration tokens. */ :root[data-theme="dark"] .daily-total { background: var(--tone-daily-total); } :root[data-theme="dark"] .sun-disc { background: var(--tone-hero-sun); } :root[data-theme="dark"] .book-front { background: var(--tone-hero-book); border-left-color: var(--tone-hero-book-edge); color: var(--tone-green-fg); } :root[data-theme="dark"] .book-front i { background: var(--tone-hero-lines); } :root[data-theme="dark"] .book-back { background: var(--tone-hero-book-back); border-color: var(--tone-hero-book-back-edge); } :root[data-theme="dark"] .art-note { background: var(--tone-hero-note-bg); color: var(--tone-hero-note-fg); } :root[data-theme="dark"] .note-two { color: var(--tone-hero-note-alt-fg); } :root[data-theme="dark"] .leaf-one { background: var(--tone-hero-leaf); } :root[data-theme="dark"] .leaf-two { background: var(--tone-hero-leaf-alt); } :root[data-theme="dark"] .art-flower { color: var(--tone-hero-flower); } :root[data-theme="dark"] .flower-two { color: var(--tone-hero-flower-alt); } :root[data-theme="dark"] .art-hotel { background: var(--tone-lavender-bg); color: var(--tone-lavender-fg); } :root[data-theme="dark"] .onboarding-decoration { background: linear-gradient(115deg, var(--tone-onboard-start), var(--tone-onboard-mid) 58%, var(--tone-onboard-end)); } :root[data-theme="dark"] .onboarding-book { background: var(--tone-onboard-book); color: var(--tone-onboard-book-fg); border-color: var(--tone-onboard-book-edge); box-shadow: 4px 5px 0 var(--tone-onboard-shadow); } /* Conversational illustrations are line icons now, so their colors follow currentColor. */ .conversation-art > span[data-icon] { display: grid; place-items: center; width: 100%; height: 100%; } .conversation-art > span[data-icon] svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 520px) { .conversation-art > span[data-icon] svg { width: 36px; height: 36px; } } /* Onboarding goal symbols are vector icons instead of fixed-color platform emoji. */ .choice-emoji[data-icon] { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 3px; color: var(--tone-green-fg); } .choice-work .choice-emoji { color: var(--tone-clay-fg); } .choice-travel .choice-emoji { color: var(--tone-lavender-fg); } .choice-general .choice-emoji { color: var(--tone-green-fg); } .choice-emoji[data-icon] svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 430px) { .choice-emoji[data-icon] { width: 23px; height: 23px; } .choice-emoji[data-icon] svg { width: 20px; height: 20px; } } /* 1.6: honor operating-system accessibility preferences without changing the chosen theme. */ .theme-effective-label{margin-top:5px;font-weight:650;color:var(--muted)} @media (prefers-contrast: more){ :root{--muted:#515b52;--line:#a89a85;--focus:#70420b;--control-border:#827764} :root[data-theme="dark"]{--muted:#d2ded3;--line:#77877a;--focus:#ffe08a;--control-border:#91a095} :focus-visible{outline-width:4px;outline-offset:4px} .button,.theme-options button,.setting-select,.nav-item,.mobile-nav-item{border-width:2px} .lesson-badge,.soft-label,.mini-tag,.step-count{outline:1px solid currentColor;outline-offset:-1px} } @media (forced-colors: active){ :focus-visible{outline:2px solid Highlight;outline-offset:3px} button,select,input,summary,a{forced-color-adjust:auto} .settings-row,.settings-panel,.daily-card,.path-lesson,.conversation-card,.skill-grid article{border:1px solid CanvasText} .mobile-nav{border-top:1px solid CanvasText} } /* 1.6 rendered contrast audit: strengthen small labels and theme-specific text pairs. */ :root[data-theme="light"] .start-number { color: #2d5e46; } :root[data-theme="light"] .lesson-step { color: #536858; } :root[data-theme="light"] .lesson-first .lesson-step { color: #2d5e46; } :root[data-theme="light"] .card-bottom-label { color: #59675c; } :root[data-theme="light"] .goal-foot, :root[data-theme="light"] .goal-foot span { color: #59675c; } :root[data-theme="light"] .goal-foot strong { color: #37674c; } :root[data-theme="light"] .goal-numbers span { color: #58665a; } :root[data-theme="light"] .progress-ring span { color: #58665a; } :root[data-theme="light"] .progress-ring small { color: #60695e; } :root[data-theme="light"] .path-heading > div > p { color: #5e6a60; } :root[data-theme="light"] .empty-state p { color: #5f6b60; } :root[data-theme="light"] .lesson-badge { color: #565f54; } :root[data-theme="light"] .text-button, :root[data-theme="light"] .text-button span, :root[data-theme="light"] .footer-mark { color: #37674c; } :root[data-theme="light"] .path-summary .section-kicker, :root[data-theme="light"] .path-summary p, :root[data-theme="light"] .path-summary-count span { color: #fffaf2; } :root[data-theme="light"] .hero-card .hero-kicker, :root[data-theme="light"] .hero-card .hero-translation, :root[data-theme="light"] .hero-card .hero-description, :root[data-theme="light"] .hero-index { color: #fffaf2; } :root[data-theme="light"] .vocab-empty p { color: #5f6b60; } :root[data-theme="dark"] .sidebar .nav-item:not(.active) { color: #c4d0c6 !important; } :root[data-theme="dark"] .sidebar .nav-item:hover { color: #c4e3cc !important; } :root[data-theme="dark"] .sidebar .nav-item.active { color: #c4e3cc !important; } :root[data-theme="dark"] .sidebar .settings-link { color: #c4d0c6 !important; } :root[data-theme="dark"] .mobile-nav-item:not(.active) { color: #c4d0c6 !important; } :root[data-theme="dark"] .mobile-nav-item.active { color: #c4e3cc !important; } :root[data-theme="dark"] .hero-card .hero-kicker, :root[data-theme="dark"] .hero-card .hero-translation, :root[data-theme="dark"] .hero-card .hero-description, :root[data-theme="dark"] .hero-index { color: #fffaf2; } :root[data-theme="dark"] .path-summary .section-kicker, :root[data-theme="dark"] .path-summary p, :root[data-theme="dark"] .path-summary-count span { color: #fffaf2; } :root[data-theme="dark"] .lesson-step { color: #c4e3cc; } :root[data-theme="dark"] .progress-ring span, :root[data-theme="dark"] .progress-ring small { color: #c4d0c6; } :root[data-theme="dark"] .card-bottom-label, :root[data-theme="dark"] .goal-foot, :root[data-theme="dark"] .goal-foot span, :root[data-theme="dark"] .goal-numbers span { color: #c4d0c6; } :root[data-theme="dark"] .goal-foot strong { color: #c4e3cc; } :root[data-theme="dark"] .path-heading > div > p, :root[data-theme="dark"] .empty-state p, :root[data-theme="dark"] .vocab-empty p { color: #c4d0c6; } :root[data-theme="dark"] .lesson-badge:not(.badge-design) { color: #c4d0c6; } :root[data-theme="dark"] .text-button, :root[data-theme="dark"] .text-button span, :root[data-theme="dark"] .footer-mark { color: #c4e3cc; } /* Respect OS high contrast, while ensuring user-selected themes remain explicit. */ @media (prefers-contrast: more) { :root[data-theme="light"] { --muted: #454f46; --line: #8c9589; } :root[data-theme="dark"] { --muted: #e0e9e1; --line: #8c9b8e; } :root[data-theme="dark"] .nav-item:not(.active), :root[data-theme="dark"] .mobile-nav-item:not(.active) { color: #e0e9e1 !important; } } /* Rendered contrast audit: improve the remaining decorative marker contrast on warm surfaces. */ :root[data-theme="light"] .note-sun { color: #54441f; } /* Mobile readability pass: avoid tiny lesson metadata and helper copy on narrow screens. */ @media (max-width: 520px) { .daily-card p { font-size: 10px; line-height: 1.65; } .step-count, .mini-tag, .soft-label { font-size: 10px; line-height: 1.4; } .goal-numbers span, .goal-foot { font-size: 10px; } .card-bottom-label { font-size: 10px; } .path-heading > div > p { font-size: 10px; line-height: 1.7; } .start-info p { font-size: 10px; line-height: 1.7; } .start-info small { font-size: 10px; line-height: 1.6; } .path-summary p { font-size: 10px; line-height: 1.65; } .path-summary-count span { font-size: 10px; } .lesson-details p { font-size: 10px; line-height: 1.6; letter-spacing: 0; overflow-wrap: anywhere; } .lesson-badge { font-size: 10px; line-height: 1.5; white-space: normal; } .progress-ring small { font-size: 9px; } .settings-row p { font-size: 10px; line-height: 1.75; } .settings-status { font-size: 10px; } .footer-stage { font-size: 10px; } .preview-disclaimer { font-size: 10px; line-height: 1.7; } } /* Milestone 2: interactive lesson player */ .lesson-page-heading{margin-bottom:18px} .lesson-player-root{min-width:0;padding-bottom:20px} .lesson-start-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.75fr);background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px} .lesson-start-copy{padding:clamp(20px,3vw,32px);align-self:center} .lesson-level-pill{display:inline-flex;border-radius:999px;padding:5px 10px;background:var(--green-pale);color:var(--green-dark);font-size:11px;font-weight:800;margin-bottom:16px} .lesson-start-copy .section-kicker{display:block;margin-bottom:7px} .lesson-start-copy h2{direction:ltr;text-align:right;font:700 clamp(25px,3vw,36px)/1.2 Georgia,serif;margin:0;color:var(--green-dark)} .lesson-start-ar{font-size:17px;font-weight:850;margin:7px 0 10px} .lesson-start-copy>p:not(.section-kicker):not(.lesson-start-ar){color:var(--muted);font-size:13px;line-height:1.9;max-width:560px;margin:0} .lesson-start-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px} .lesson-start-meta span{border:1px solid var(--line);border-radius:10px;padding:6px 9px;color:var(--muted);font-size:11px} .lesson-previous-result{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--green-pale);color:var(--green-dark);font-size:11px;line-height:1.8} .lesson-start-art{position:relative;min-height:260px;background:linear-gradient(145deg,#47785b,#315b44);overflow:hidden;display:grid;place-items:center} .lesson-art-sun{position:absolute;width:168px;height:168px;border-radius:50%;background:#e8c982;top:29px;left:calc(50% - 84px);box-shadow:0 0 0 16px #ffffff12} .lesson-art-book{position:absolute;top:78px;left:calc(50% - 61px);height:135px;width:125px;background:#fff4dc;border-left:8px solid #e0cfb1;border-radius:8px 12px 12px 8px;transform:rotate(-7deg);box-shadow:7px 13px 25px #163b2a52;display:flex;align-items:center;flex-direction:column;padding:20px 12px;color:#2d5e46} .lesson-art-book strong{font:italic bold 27px Georgia,serif;direction:ltr} .lesson-art-book span{width:66%;height:3px;border-radius:3px;background:#c8c4a9;margin-top:9px} .lesson-art-book span:nth-of-type(2){width:78%}.lesson-art-book span:nth-of-type(3){width:48%} .lesson-art-star{position:absolute;font-style:normal;font-size:29px;color:#f3d8a0}.star-a{top:31px;left:15%}.star-b{bottom:35px;right:16%;color:#f2c2ad} .lesson-art-note{position:absolute;right:11%;top:68px;padding:5px 9px;background:#fff7e9;border-radius:8px;color:#944332;font:italic bold 11px Georgia,serif;direction:ltr;transform:rotate(7deg);box-shadow:0 4px 12px #153b2944} .lesson-step-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:28px 0 14px} .lesson-step-heading h2{font-size:20px;margin:4px 0 0;line-height:1.4} .lesson-step-heading p{color:var(--muted);font-size:12px;margin:5px 0 0;line-height:1.7} .lesson-teaching-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .lesson-content-card{min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:19px;box-shadow:0 4px 15px #00000006} .lesson-content-card h2{font-size:16px;margin:4px 0 7px} .lesson-content-card>p{color:var(--muted);font-size:12px;line-height:1.9;margin:0} .lesson-card-eyebrow{color:var(--clay);font-size:10px;font-weight:850} .lesson-example-phrase{display:grid;gap:5px;border-radius:13px;background:var(--green-pale);padding:13px;margin-top:13px} .lesson-example-phrase>span:first-child{font-weight:850;font-size:19px;color:var(--green-dark)} .lesson-example-phrase>span:nth-child(2){font-size:12px;color:var(--ink)} .lesson-example-phrase .lesson-speak{justify-self:start;margin-top:5px} .lesson-dialogue-card{grid-column:1/-1} .lesson-dialogue-lines{display:grid;gap:9px;margin-top:15px} .lesson-dialogue-line{display:grid;grid-template-columns:32px minmax(0,1fr) 36px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--paper2)} .lesson-dialogue-number{width:30px;height:30px;display:grid;place-items:center;background:var(--green-pale);color:var(--green-dark);border-radius:10px;font-weight:850;font-size:12px} .lesson-dialogue-line small{font-size:10px;color:var(--muted)} .lesson-dialogue-line p{font-size:14px;font-weight:800;margin:2px 0;color:var(--green-dark);overflow-wrap:anywhere} .lesson-dialogue-line>div>span{font-size:11px;color:var(--muted)} .lesson-line-speak{width:36px;height:36px;border:1px solid var(--line);background:var(--paper);border-radius:11px;color:var(--green-dark);font-size:19px;cursor:pointer} .lesson-vocab-heading{margin-top:31px} .lesson-vocab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .lesson-vocab-card{background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:15px;min-width:0;display:flex;flex-direction:column;gap:7px;box-shadow:0 4px 15px #00000005} .lesson-vocab-top{display:flex;align-items:center;justify-content:space-between;gap:6px} .lesson-vocab-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-pale)} .lesson-vocab-tag{font-size:10px;color:var(--muted)} .lesson-spanish{font-size:19px;line-height:1.4;margin:6px 0 0;color:var(--green-dark);overflow-wrap:anywhere} .lesson-vocab-ar{font-size:13px;font-weight:800;margin:0;color:var(--ink)} .lesson-vocab-note{font-size:11px;line-height:1.7;color:var(--muted);margin:0;flex:1} .lesson-example-mini{display:grid;gap:3px;border-top:1px solid var(--line);padding-top:8px;margin-top:3px} .lesson-example-mini>span{font-size:11px;color:var(--green-dark);font-weight:750;overflow-wrap:anywhere} .lesson-example-mini small{font-size:10px;color:var(--muted)} .lesson-vocab-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px} .lesson-vocab-actions .button{font-size:10px;min-height:38px;padding:8px 10px;gap:5px;flex:1} .lesson-speak{min-width:0} .button-saved{background:var(--green-pale);color:var(--green-dark);border:1px solid var(--green)} .lesson-audio-status{font-size:11px;color:var(--muted);margin:11px 2px 0;min-height:1.6em} .lesson-quiz-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:25px;border-radius:20px;padding:22px;background:var(--green-pale);border:1px solid var(--line)} .lesson-quiz-cta h2{font-size:18px;margin:4px 0} .lesson-quiz-cta p{font-size:12px;line-height:1.8;color:var(--muted);margin:5px 0 0;max-width:600px} .lesson-quiz-cta>.button{flex:0 0 auto;min-height:46px} .lesson-quiz-shell{max-width:850px;margin:0 auto} .lesson-quiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px} .lesson-quiz-top>span{font-size:12px;color:var(--muted);font-weight:800} .lesson-quiz-progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:17px} .lesson-quiz-progress span{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .2s ease} .lesson-question-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,4vw,30px);box-shadow:var(--shadow)} .lesson-question-number{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--green-pale);color:var(--green-dark);font-size:14px;font-weight:900;border-radius:12px} .lesson-question-skill{display:inline-flex;margin-inline-start:9px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);color:var(--muted);font-size:10px;padding:5px 9px} .lesson-question-card h2{font-size:clamp(18px,2.4vw,24px);line-height:1.65;margin:17px 0 20px} .lesson-quiz-options{display:grid;gap:10px} .lesson-quiz-option{width:100%;display:flex;align-items:center;gap:12px;text-align:right;border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--paper2);color:var(--ink);font:inherit;font-size:13px;line-height:1.7;cursor:pointer;min-height:54px} .lesson-quiz-option:hover,.lesson-quiz-option.is-selected{border-color:var(--green);background:var(--green-pale)} .lesson-quiz-option:disabled{cursor:default;opacity:1} .option-letter{width:29px;height:29px;border-radius:9px;background:var(--line);display:grid;place-items:center;flex:0 0 auto;font-size:11px;font-weight:900;direction:ltr} .lesson-quiz-option.is-selected .option-letter{background:var(--green);color:#fff} .lesson-short-answer{display:grid;gap:9px} .lesson-short-answer label{font-size:12px;font-weight:800} .lesson-short-answer input{min-height:50px;border:1px solid var(--line);background:var(--paper2);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px} .lesson-short-answer small{font-size:11px;color:var(--muted)} .lesson-order-list{display:grid;gap:9px;list-style:none;padding:0;margin:0;counter-reset:none} .lesson-order-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;background:var(--paper2);border:1px solid var(--line);border-radius:13px} .lesson-order-line{font-size:12px;color:var(--ink);overflow-wrap:anywhere} .lesson-order-controls{display:flex;gap:5px} .lesson-order-controls button{width:35px;height:35px;border:1px solid var(--line);background:var(--paper);color:var(--green-dark);border-radius:9px;font-size:17px;cursor:pointer} .lesson-order-controls button:disabled{opacity:.35;cursor:not-allowed} .lesson-question-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:22px} .lesson-validation-message{margin:0 auto 0 0;color:var(--clay);font-size:12px} .lesson-feedback{margin-top:17px;padding:14px 15px;border-radius:14px;border:1px solid var(--line)} .lesson-feedback.is-correct{background:var(--green-pale);border-color:var(--green)} .lesson-feedback.is-incorrect{background:color-mix(in srgb,var(--clay-pale) 75%,var(--paper));border-color:var(--clay)} .lesson-feedback>strong{font-size:13px;color:var(--green-dark)} .lesson-feedback.is-incorrect>strong{color:var(--clay)} .lesson-feedback p{font-size:12px;line-height:1.8;margin:5px 0;color:var(--ink)} .lesson-answer-reveal{border-top:1px solid var(--line);padding-top:9px;margin-top:9px;display:grid;gap:5px} .lesson-answer-reveal>span{font-size:10px;font-weight:800;color:var(--muted)} .lesson-answer-reveal>strong{font-size:13px} .lesson-answer-reveal ol{margin:0;padding-inline-start:22px;font-size:12px;line-height:1.8} .lesson-explanation-note{color:var(--muted)!important;font-size:11px!important} .lesson-quiz-reminder{color:var(--muted);font-size:11px;line-height:1.8;margin:12px 4px} .lesson-result-panel{max-width:900px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:23px;padding:clamp(18px,4vw,30px);box-shadow:var(--shadow)} .lesson-result-emblem{width:54px;height:54px;border-radius:18px;background:var(--green-pale);color:var(--green-dark);display:grid;place-items:center;font-size:27px;margin-bottom:15px} .lesson-result-panel>h2{font-size:27px;margin:5px 0} .lesson-result-panel>p{font-size:12px;color:var(--muted);line-height:1.8} .lesson-score-card{display:flex;align-items:center;gap:20px;margin:18px 0;padding:17px;border-radius:18px;background:var(--paper2);border:1px solid var(--line)} .lesson-score-ring{width:98px;height:98px;flex:0 0 98px;border-radius:50%;border:7px solid var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--green-dark)} .lesson-score-ring strong{font-size:23px;line-height:1.2}.lesson-score-ring small{font-size:9px;color:var(--muted)} .lesson-score-details{display:grid;gap:5px}.lesson-score-details strong{font-size:15px}.lesson-score-details span{font-size:11px;line-height:1.7;color:var(--muted)} .lesson-save-notice{padding:9px 12px;border-radius:12px;background:var(--green-pale);color:var(--green-dark)!important} .lesson-review-heading{margin-top:22px}.lesson-review-heading h3{font-size:17px;margin:0}.lesson-review-heading p{font-size:11px;color:var(--muted);margin:4px 0 12px} .lesson-review-list{display:grid;gap:9px} .lesson-review-row{display:grid;grid-template-columns:29px minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px} .lesson-review-mark{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--green-pale);color:var(--green-dark);font-weight:900} .lesson-review-row.is-incorrect .lesson-review-mark{background:var(--clay-pale);color:var(--clay)} .lesson-review-copy>strong{font-size:12px;line-height:1.7;display:block}.lesson-review-copy p{font-size:11px;color:var(--muted);margin:4px 0;line-height:1.7;overflow-wrap:anywhere}.lesson-review-copy .lesson-review-expected{color:var(--clay)}.lesson-review-copy small{font-size:10px;color:var(--muted)} .lesson-result-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} .lesson-content-error{padding:20px;background:var(--paper);border:1px solid var(--clay);border-radius:18px} .saved-vocab-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}.saved-vocab-heading h2{font-size:20px;margin:4px 0}.saved-vocab-heading p{font-size:12px;color:var(--muted);margin:3px 0} .progress-completion-line{font-size:11px!important;font-weight:800;color:var(--green-dark)!important;margin-top:8px!important} .measure-line{position:relative;overflow:hidden}.measure-line.is-measured::after{content:"";display:block;height:100%;width:var(--measure,0%);background:var(--green);border-radius:inherit;transition:width .25s ease} .path-lesson.lesson-first{cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}.path-lesson.lesson-first:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-1px)}.path-lesson.lesson-first:focus-visible{outline:3px solid #c28a45;outline-offset:3px}.lesson-launch-icon{font-size:22px;color:var(--green-dark);font-weight:900} :root[data-theme="dark"] .lesson-art-book{background:#f4e9cf;color:#2d5e46} :root[data-theme="dark"] .lesson-start-art{background:linear-gradient(145deg,#274b35,#1d3828)} :root[data-theme="dark"] .lesson-vocab-dot{background:#9bc6a5;box-shadow:0 0 0 4px #2b4433} :root[data-theme="dark"] .lesson-dialogue-number,:root[data-theme="dark"] .lesson-question-number{background:#2b4433;color:#c4e3cc} :root[data-theme="dark"] .lesson-feedback.is-incorrect{background:#382824;border-color:#7c4b40} :root[data-theme="dark"] .lesson-feedback.is-incorrect>strong,:root[data-theme="dark"] .lesson-review-expected{color:#f0a493} :root[data-theme="dark"] .lesson-quiz-option.is-selected{background:#2b4433;border-color:#9bc6a5} :root[data-theme="dark"] .lesson-quiz-option.is-selected .option-letter{background:#9bc6a5;color:#152319} :root[data-theme="dark"] .lesson-result-emblem{background:#2b4433;color:#c4e3cc} :root[data-theme="dark"] .lesson-score-ring{border-color:#9bc6a5;color:#c4e3cc} :root[data-theme="dark"] .lesson-previous-result,:root[data-theme="dark"] .lesson-save-notice{background:#2b4433;color:#c4e3cc!important} :root[data-theme="dark"] .button-saved{background:#2b4433;color:#c4e3cc;border-color:#588866} :root[data-theme="dark"] .lesson-example-phrase{background:#263d2e} :root[data-theme="dark"] .lesson-example-phrase>span:first-child{color:#c4e3cc} :root[data-theme="dark"] .lesson-example-phrase>span:nth-child(2){color:#e8eee8} :root[data-theme="dark"] .lesson-art-note{background:#2b4433;color:#f0d88f} @media(max-width:1000px){.lesson-vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){.lesson-start-panel{grid-template-columns:minmax(0,1fr) 220px}.lesson-start-art{min-height:240px}.lesson-teaching-grid{gap:10px}.lesson-content-card{padding:16px}.lesson-dialogue-card{grid-column:1/-1}} @media(max-width:600px){.lesson-start-panel{display:flex;flex-direction:column}.lesson-start-copy{padding:20px}.lesson-start-art{min-height:150px;order:-1}.lesson-art-sun{width:110px;height:110px;top:3px;left:calc(50% - 55px)}.lesson-art-book{top:34px;width:99px;height:104px;left:calc(50% - 49px);padding-top:12px}.lesson-art-book strong{font-size:23px}.lesson-art-book span{margin-top:6px}.lesson-art-note{top:21px;right:12%;font-size:10px}.star-a{top:12px;left:12%}.star-b{bottom:11px;right:13%}.lesson-start-copy h2{font-size:27px}.lesson-step-heading{align-items:flex-start}.lesson-step-heading h2{font-size:17px}.lesson-step-heading .soft-label{font-size:9px;white-space:nowrap}.lesson-teaching-grid{grid-template-columns:1fr}.lesson-dialogue-card{grid-column:auto}.lesson-content-card{padding:15px}.lesson-vocab-grid{grid-template-columns:1fr}.lesson-vocab-card{padding:14px}.lesson-vocab-actions .button{min-height:42px;font-size:11px}.lesson-quiz-cta{display:grid;padding:17px;gap:13px}.lesson-quiz-cta>.button{justify-self:stretch}.lesson-quiz-top .button{font-size:10px;padding:9px}.lesson-question-card{padding:17px}.lesson-question-card h2{font-size:18px}.lesson-quiz-option{font-size:12px;padding:11px}.lesson-score-card{align-items:flex-start;gap:13px;padding:12px}.lesson-score-ring{width:78px;height:78px;flex-basis:78px;border-width:5px}.lesson-score-ring strong{font-size:19px}.lesson-score-ring small{font-size:8px}.lesson-score-details strong{font-size:13px}.lesson-score-details span{font-size:10px}.lesson-result-actions{display:grid;grid-template-columns:1fr}.saved-vocab-heading{align-items:flex-start;flex-direction:column}.lesson-dialogue-line{grid-template-columns:28px minmax(0,1fr) 32px;gap:7px;padding:8px}.lesson-dialogue-line p{font-size:12px}.lesson-dialogue-line>div>span{font-size:10px}.lesson-line-speak{width:32px;height:32px}} @media(max-width:360px){.lesson-question-skill{display:inline-flex;margin-inline-start:5px;font-size:9px}.lesson-vocab-actions{flex-direction:column}.lesson-vocab-actions .button{width:100%}.lesson-quiz-top{align-items:flex-start}.lesson-score-card{flex-direction:column}.lesson-score-ring{align-self:center}}