/* Friendly learning interface. Formula graphics and established reading styles stay legible. */
:root{--bg:#fcfdf9;--ink:#263725;--muted:#697466;--line:#e1e7db;--green:#3d9200;--lime:#eefbd9;--orange:#af6400;--radius:20px;--shadow:0 3px 0 #e2e8dc}
body{background:var(--bg);color:var(--ink)}.shell{max-width:1320px}.app-header{background:var(--bg);height:92px}.brand-mark{background:#58cc02;border-radius:13px;box-shadow:0 4px 0 #46a302;font-size:0;padding:0}.brand-mark:after{content:'';display:block;width:35px;height:39px;background:url('mascot.svg') center/contain no-repeat}.brand{font-weight:750}.brand small{font-weight:500}.intro h1{font-weight:780;letter-spacing:-1px;font-size:34px}.intro{padding:27px 0 22px}.eyebrow{text-transform:none;font-weight:650;color:#6b7961}.nav-item{font-weight:650;border:2px solid transparent;border-radius:13px;padding:10px 11px}.nav-item.active{background:#eefbdc;color:#397c0b;border-color:#bce88c}.nav-item.active .ui-icon{filter:invert(41%) sepia(86%) saturate(844%) hue-rotate(43deg) brightness(86%)}
.primary{background:#58cc02;color:#173700;border:2px solid #58cc02;box-shadow:0 4px 0 #43a000;font-weight:750;border-radius:13px;min-height:46px;transition:transform .12s,box-shadow .12s,background .12s}.primary:hover{background:#65d90a;border-color:#65d90a;filter:none}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #43a000}.primary .ui-icon{filter:none}.subtle,.hint-btn,.nav-button{border:2px solid #e0e5da;box-shadow:0 3px 0 #e0e5da;background:#fff;border-radius:12px;font-weight:650}.subtle:hover,.nav-button:hover{background:#f7fbea;border-color:#c9ddaf}.subtle:active,.hint-btn:active,.nav-button:active{transform:translateY(2px);box-shadow:0 1px 0 #dce3d5}.hint-btn{background:#fff9df;border-color:#f3dda0;box-shadow:0 3px 0 #edce7a;color:#725118}.primary:disabled,.subtle:disabled{box-shadow:none}.text-link{color:#397c0b;font-weight:650}.ui-icon{stroke-width:2;flex-shrink:0}#openAwards{min-width:43px;height:43px;display:grid;place-items:center;background:#fff5cc;color:#a36b00;border:2px solid #f1d77d;border-radius:13px;box-shadow:0 3px 0 #ebcd67;flex-shrink:0}#openAwards img{width:24px;height:24px}#openAwards:hover{background:#ffedaa}
.panel-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:#617054}.panel-label .ui-icon{width:19px;height:19px}.journey-overview{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;margin-bottom:28px}.mastery-panel,.day-summary,.today-plan-panel,.next-step-panel,.review-suggestion{border:2px solid var(--line);border-radius:22px;background:white;box-shadow:0 3px 0 var(--line);padding:24px}.mastery-main{display:flex;align-items:center;gap:26px;margin:18px 0}.progress-orbit{width:145px;height:145px;flex:0 0 145px;border-radius:50%;background:conic-gradient(#58cc02 0 var(--good),#ffbd35 var(--good) var(--rated),#edf0e8 var(--rated) 100%);padding:13px;transform:rotate(-.001deg)}.progress-orbit>div{height:100%;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:white}.progress-orbit strong{font-size:34px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-1px}.progress-orbit small{font-size:17px}.progress-orbit span{font-size:11px;color:var(--muted);margin-top:5px}.mastery-numbers strong{display:block;font-size:37px;line-height:1.2;letter-spacing:-1px;font-variant-numeric:tabular-nums}.mastery-numbers strong small{font-size:18px;font-weight:500;color:var(--muted)}.mastery-numbers span{font-size:12px;color:var(--muted)}.mastery-numbers p{font-size:13px;margin:12px 0}.mastery-numbers .text-link{font-size:12px}.progress-legend{display:flex;gap:17px;border-top:1px solid var(--line);padding-top:15px;align-items:center;flex-wrap:wrap}.progress-legend>span{display:flex;gap:6px;align-items:center;font-size:12px}.progress-legend small{font-size:10px;color:var(--muted);margin-left:auto}.green-dot,.orange-dot{display:inline-block;width:10px;height:10px;border-radius:4px;background:#58cc02}.orange-dot{background:#ffbd35}.day-summary{background:#f2fce5;border-color:#cce8ae;box-shadow:0 3px 0 #cce8ae;display:flex;flex-direction:column;justify-content:space-between}.day-summary-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.day-summary h2{font-size:28px;margin:12px 0 7px;font-weight:780}.day-summary p{font-size:14px;margin:0;color:#5d7351}.chem-mascot{flex-shrink:0;width:102px;height:112px;transform:rotate(6deg)}.day-plan-meter{height:15px;border-radius:20px;background:#d8edbf;overflow:hidden;margin:20px 0}.day-plan-meter>div{background:#58cc02;height:100%;border-radius:20px;transition:width .25s}.day-summary-bottom{display:flex;gap:18px;justify-content:space-between;align-items:center}.day-summary-bottom>span{font-size:11px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.day-summary-bottom .primary{font-size:12px;padding:10px 12px;display:flex;align-items:center;gap:7px}.journey-columns{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px}.today-plan-panel{padding:22px}.today-plan-panel .section-label{margin:0 0 18px}.section-label h2{font-weight:750;font-size:22px;display:flex;align-items:center;gap:9px}.section-label h2 .ui-icon{width:24px;height:24px}.journey-aside{display:flex;flex-direction:column;gap:20px}.next-step-panel{background:#eef7ff;border-color:#d0e5f6;box-shadow:0 3px 0 #d0e5f6}.next-step-panel h2{font-size:23px;line-height:1.3;margin:18px 0 12px}.next-step-panel p{font-size:12px;color:#5f6f78;line-height:1.75;margin-bottom:20px}.next-step-panel .action-link{display:flex;font-size:12px;margin-bottom:17px;background:#1cb0f6;border-color:#1cb0f6;box-shadow:0 4px 0 #1296d5;color:#063954}.next-step-panel .text-link{font-size:11px;color:#146d95}.review-suggestion{padding:21px}.review-suggestion h3{font-size:18px;line-height:1.45;margin:14px 0 10px}.review-suggestion p{font-size:12px;color:var(--muted);line-height:1.75}.review-suggestion .text-link{font-size:11px}.topic-journey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.journey-topic{display:grid;grid-template-columns:46px minmax(0,1fr) 15px;gap:13px;align-items:center;border:2px solid #e2e7dc;box-shadow:0 3px 0 #e2e7dc;border-radius:18px;padding:18px;background:#fff;transition:transform .12s,border-color .12s}.journey-topic:hover{transform:translateY(-2px);border-color:#9bd85e}.journey-topic>.ui-icon{width:15px;height:15px}.topic-emblem{display:grid;place-items:center;border-radius:15px;background:#edfad9;border:2px solid #d1eca9;width:46px;height:50px}.topic-emblem img{width:28px;height:28px}.journey-topic h3{font-size:15px;line-height:1.4;margin:0 0 13px;font-weight:700}.topic-meters>div>span{display:flex;justify-content:space-between;font-size:10px;color:#697466;gap:6px}.topic-meters b{color:#33472c;font-weight:650;white-space:nowrap}.mini-meter{height:8px;background:#edf0e8;overflow:hidden;border-radius:20px;margin-top:7px}.mini-meter i{display:block;height:100%;border-radius:20px;background:#58cc02}.topic-meters small{display:block;font-size:9px;line-height:1.6;color:#75806c;margin-top:8px}.topic-salts .topic-emblem,.topic-salts .topic-symbol{background:#e2f5ff;border-color:#b6e4fa}.topic-acids .topic-emblem,.topic-acids .topic-symbol{background:#ffedf2;border-color:#ffd1df}.topic-bases .topic-emblem,.topic-bases .topic-symbol{background:#e1f9ee;border-color:#b6e5d2}.topic-amphoteric .topic-emblem,.topic-amphoteric .topic-symbol{background:#f1eaff;border-color:#d9c9fa}.topic-special-salts .topic-emblem,.topic-special-salts .topic-symbol{background:#fff4ce;border-color:#f4dda0}.topic-elements .topic-emblem,.topic-elements .topic-symbol{background:#ffebdd;border-color:#ffd0ac}.topic-binary .topic-emblem,.topic-binary .topic-symbol{background:#e4f4f6;border-color:#bae2e7}.topic-tile{border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:20px}.topic-symbol{border:2px solid #d1eca9;background:#edfad9;position:relative}.topic-symbol .ui-icon{width:30px;height:30px}.topic-symbol .symbol-label{position:absolute;right:-8px;bottom:-7px;background:white;border:1px solid #dee6d6;padding:1px 5px;border-radius:6px;font-size:11px;color:#567345;line-height:1.5}.topic-open{color:#3d9200;font-weight:700}.topic-overview{border:2px solid #cce8ae;background:#f5fce9;box-shadow:0 3px 0 #cce8ae;border-radius:22px}.chapter-index{border:1px solid #dde8d2;border-bottom-width:3px;background:#f0f8e5}.chapter-index.read{background:#dff7bb;border-color:#abd66f;color:#397c0b}.level-actions button{border:2px solid #e1e7da;border-bottom-width:4px;background:white;font-weight:650}.mode-tile{border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:20px}.mode-icon{background:#ebf9d6;border:2px solid #d6ecb7}.task-card{border:2px solid var(--line);box-shadow:0 4px 0 var(--line);border-radius:22px}.tags .tag{border-radius:8px;font-weight:600}.tag.level{background:#f1f8e7}.answer-box{background:#f3fce6;border-color:#d4eab7}.hint-box{background:#fff9e6;border-color:#f1dfab}.self-actions button.selected-good{background:#e6f8ce;border:2px solid #a9d773;color:#397c0b}.selected-retry{background:#fff4d5!important;color:#886114!important}.filters select{border:2px solid #dce5d4;border-radius:12px;min-height:45px}.tabs{border:2px solid #e4e9df;background:#eff3e9;border-radius:13px}.tabs button.active{background:white;box-shadow:0 2px 0 #dce5d4}.guide-reader{border:2px solid var(--line);border-radius:20px}.reader-mode{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.reader-mode>a,.reader-mode>span{display:flex;align-items:center;gap:7px;padding:10px 13px;border:2px solid #e1e8d8;border-radius:12px;font-size:12px;font-weight:650;background:white}.reader-mode>.active{background:#ecfad8;border-color:#bce38c;color:#3c7c17}.reader-mode .ui-icon{width:18px;height:18px}.recall-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px}.recall-toolbar>.subtle{display:flex;gap:7px;font-size:12px;align-items:center}.recall-lead{font-size:15px;line-height:1.85;max-width:850px;color:#65705d}.recall-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.recall-map,.recall-traps{display:flex;flex-direction:column;gap:14px}.recall-item{padding:23px;border:2px solid #dee8d3;border-radius:18px;background:white;scroll-margin-top:20px}.recall-item.trap{background:#fffaf0;border-color:#f1dfb3}.recall-item[data-related]{outline:3px solid #71bd2c;outline-offset:3px}.recall-item-head{display:flex;gap:12px;align-items:flex-start}.recall-number{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#e7f8ce;color:#447823;flex-shrink:0;font-weight:750;font-size:12px}.trap .recall-number{background:#ffebac}.recall-item h3{font-size:18px;line-height:1.4;margin:2px 0 0;font-weight:750}.recall-item p{font-size:13px;line-height:1.9;margin:15px 0}.recall-examples summary{font-size:12px;font-weight:650;color:#487b25;cursor:pointer;display:flex;gap:8px;align-items:center;min-height:37px}.recall-examples summary:after{content:'+';margin-left:auto;font-size:20px}.recall-examples[open] summary:after{content:'−'}.recall-equation{margin-top:12px;border-top:1px solid #dce7d3;padding-top:8px}.recall-equation .equation{padding:13px 7px;margin:8px 0;min-height:80px;background:#f7faf2}.recall-equation .species img{height:43px}.recall-equation .arrow{font-size:25px;min-width:30px}.recall-equation .condition{font-size:10px}.recall-equation .text-link{font-size:11px}.recall-checklist{border:2px solid #cde5aa;border-radius:21px;padding:28px;background:#f4fbe9;margin-top:30px}.recall-checklist h2{font-size:23px;display:flex;gap:10px;align-items:center}.recall-checklist ul{list-style:none;padding:0;margin:20px 0 25px}.recall-checklist li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.8;margin-bottom:12px}.recall-checklist li .ui-icon{margin-top:2px;width:19px;height:19px}.recall-checklist .panel-actions{flex-wrap:wrap}.recall-checklist .action-link{font-size:12px}.recall-checklist .text-link{font-size:12px;padding:10px}.guide-quick-entry{background:#f3fbe7;border:1px solid #dcebc7;border-radius:13px;display:flex;gap:15px;align-items:center;justify-content:space-between;padding:16px;margin:0 0 25px;font-size:12px}.guide-quick-entry .text-link{flex-shrink:0}.study-reaction{font-size:13px!important;font-weight:650;color:#467e23!important;padding:13px 16px;border-radius:12px;background:#f1fbe4;margin-top:14px!important}.study-next-actions{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.study-next-actions button,.study-next-actions a{font-size:11px;border:1px solid #d8e7c7;border-radius:9px;padding:8px 10px;display:flex;gap:6px;align-items:center;color:#3e781b;background:#fbfef8}.study-next-actions .ui-icon{width:15px;height:15px}.study-next-actions h4{width:100%;font-size:12px;margin:0 0 4px}.progress-top-actions{display:flex;gap:10px;margin-bottom:22px}.progress-top-actions .action-link{font-size:12px}
@media(max-width:1100px){.journey-columns{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.topic-journey-grid{grid-template-columns:1fr}.mastery-main{gap:16px}.progress-orbit{width:125px;height:125px;flex-basis:125px}.mastery-numbers strong{font-size:31px}.day-summary-bottom{align-items:flex-start;flex-direction:column;gap:12px}.day-summary h2{font-size:25px}.app-header{gap:16px}.nav-item{font-size:12px;padding:9px}.nav-item .ui-icon{width:18px}.brand{font-size:16px}}
@media(max-width:760px){.shell{padding:0 17px}.app-header{height:78px;gap:10px}.brand-mark{width:38px;height:40px}.brand-mark:after{width:31px;height:34px}.brand small{font-size:8px}.brand{font-size:15px}#appNav{grid-template-columns:repeat(5,minmax(0,1fr));height:calc(72px + env(safe-area-inset-bottom));padding:6px 5px calc(6px + env(safe-area-inset-bottom));gap:3px;background:#fff;border-top:2px solid #e4e9dd}.nav-item{font-size:9px;padding:6px 1px;gap:4px;min-height:56px;border-radius:12px}.nav-item .ui-icon{width:21px;height:21px}.nav-item.active{background:#effbdf;border-color:#c9eaa5}#openAwards{margin-left:auto;height:39px;min-width:39px;border-radius:12px}.app-header:has(#openMap:not([hidden])) #openAwards{display:none}.intro h1{font-size:28px}.intro p{font-size:12px}.intro{padding:24px 0 19px}.journey-overview{grid-template-columns:1fr;gap:17px;margin-bottom:22px}.mastery-panel,.day-summary{padding:21px;border-radius:20px}.mastery-main{gap:25px;margin:17px 0}.progress-orbit{width:124px;height:124px;flex-basis:124px;padding:11px}.progress-orbit strong{font-size:31px}.mastery-numbers strong{font-size:32px}.mastery-numbers strong small{font-size:15px}.mastery-numbers span{font-size:11px}.mastery-numbers p{font-size:12px;margin:9px 0}.progress-legend{gap:11px}.progress-legend>span{font-size:11px}.progress-legend small{font-size:9px;margin-left:0}.day-summary-head>.panel-label,.day-summary .panel-label{font-size:10px;line-height:1.6}.day-summary h2{font-size:25px;margin-top:9px}.day-summary p{font-size:12px}.chem-mascot{width:78px;height:94px}.day-summary-bottom{flex-direction:row;align-items:center;gap:10px}.day-summary-bottom>span{font-size:10px;max-width:130px}.day-summary-bottom .primary{font-size:11px;padding:10px}.day-plan-meter{margin:18px 0}.journey-columns{grid-template-columns:1fr;gap:23px}.today-plan-panel{padding:18px}.today-plan-panel .section-label{align-items:flex-start;gap:10px}.today-plan-panel .section-label h2{font-size:19px;max-width:180px;line-height:1.4}.today-plan-panel .section-label>a{font-size:10px;line-height:1.5;white-space:nowrap}.section-label h2{font-size:22px}.topic-journey-grid{grid-template-columns:1fr;gap:13px}.journey-topic{padding:18px;grid-template-columns:48px minmax(0,1fr) 15px;gap:14px}.journey-topic h3{font-size:16px}.topic-meters>div>span{font-size:11px}.topic-meters small{font-size:10px}.journey-aside{gap:17px}.next-step-panel .action-link{max-width:270px}.next-step-panel h2{font-size:24px}.next-step-panel p{font-size:13px}.review-suggestion p{font-size:13px}.topic-symbol .ui-icon{width:27px;height:27px}.topic-tile{border-radius:18px}.task-card{border-radius:20px}.recall-toolbar{align-items:stretch;flex-direction:column;gap:12px}.recall-toolbar>.subtle{align-self:flex-start}.reader-mode>a,.reader-mode>span{font-size:10px;padding:9px 10px;gap:6px}.reader-mode .ui-icon{width:16px;height:16px}.recall-layout{grid-template-columns:1fr;gap:7px}.recall-lead{font-size:13px}.recall-item{padding:19px}.recall-item h3{font-size:17px}.recall-item p{font-size:13px}.recall-equation .species img{height:41px}.recall-equation .equation{column-gap:6px}.recall-equation .arrow{min-width:27px;font-size:23px}.recall-checklist{padding:21px}.recall-checklist h2{font-size:20px;line-height:1.4}.recall-checklist li{font-size:12px}.recall-checklist .panel-actions{flex-direction:column;align-items:stretch}.guide-quick-entry{flex-direction:column;align-items:flex-start;gap:9px;font-size:11px}.study-next-actions a,.study-next-actions button{font-size:10px}.study-reaction{font-size:12px!important}.progress-top-actions{flex-wrap:wrap}.progress-top-actions .action-link{font-size:11px}footer{padding-bottom:calc(102px + env(safe-area-inset-bottom))}#toast{bottom:calc(89px + env(safe-area-inset-bottom))}}
@media(max-width:370px){.mastery-main{gap:16px}.progress-orbit{width:108px;height:108px;flex-basis:108px}.mastery-numbers strong{font-size:28px}.day-summary-bottom{flex-direction:column;align-items:stretch}.day-summary-bottom>span{max-width:none}.chem-mascot{width:65px}.day-summary h2{font-size:22px}.nav-item{font-size:8px}.journey-topic{padding:15px;gap:11px}.today-plan-panel .section-label{flex-direction:column}.reader-mode{gap:5px}.reader-mode>a,.reader-mode>span{font-size:9px;padding:8px}.primary:active,.subtle:active,.nav-button:active{transform:none}}
@media(prefers-reduced-motion:reduce){.primary,.subtle,.nav-button,.journey-topic,.day-plan-meter>div{transition:none!important;transform:none!important}}

.recall-jumps{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 8px}.recall-jumps button{font-size:12px;font-weight:650;color:#487b25;background:#f1f8e7;border:1px solid #d3e5b9;border-radius:10px;padding:10px 14px;min-height:44px}.recall-jumps button:hover{background:#e4f3ce}.recall-map,.recall-traps,.recall-checklist{scroll-margin-top:20px}@media(max-width:760px){.recall-jumps{gap:6px}.recall-jumps button{font-size:10px;padding:9px 10px}}