@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#172e4d;--blue:#3869e8;--blue-dark:#2452c7;--ink:#1b2b42;--muted:#65758a;--line:#e3e9f1;--paper:#f7f9fc;--white:#fff;--mint:#bff3dc;--peach:#ffe0cc;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:#fff;font-family:'DM Sans',Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button,textarea{font:inherit}.hero{background:var(--navy);color:#fff;min-height:610px;position:relative;overflow:hidden;padding:0 max(6vw,24px) 52px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;position:relative;z-index:2}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:19px;display:flex;align-items:center;gap:10px;letter-spacing:-.5px}.brand-mark{width:35px;height:35px;border-radius:12px;background:var(--mint);color:var(--navy);display:grid;place-items:center;font-size:21px}.nav-links{display:flex;gap:34px;font-size:14px;color:#d4ddeb}.nav-links a:hover,.text-link:hover{color:var(--mint)}.menu-toggle{display:none;background:transparent;color:white;border:0;font-size:25px}.hero-content{max-width:1240px;margin:65px auto 0;position:relative;z-index:1;width:58%}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--mint);margin-bottom:16px}.eyebrow.dark{color:var(--blue)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-1.2px}h1{font-size:clamp(40px,5vw,66px);line-height:1.13;margin-bottom:22px}h1 span{color:var(--mint)}.hero-content>p{max-width:550px;color:#c7d3e2;font-size:17px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:29px}.btn{border:0;border-radius:12px;padding:13px 19px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:15px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-light{background:var(--mint);color:var(--navy)}.btn-primary{background:var(--blue);color:white}.btn-primary:hover{background:var(--blue-dark)}.btn-outline{border:1px solid #d9e1ec;background:white;color:var(--ink)}.text-link{font-weight:600;font-size:14px;color:#d4ddeb}.hero-stats{display:flex;gap:42px;margin-top:48px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-family:Manrope;font-size:18px}.hero-stats span{font-size:12px;color:#aebed1}.hero-art{position:absolute;width:430px;height:430px;right:7%;top:135px;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #60738e;border-radius:50%;opacity:.5}.orbit-one{width:400px;height:400px}.orbit-two{width:330px;height:330px;border-style:dashed}.fraction-pie{width:245px;height:245px;border-radius:50%;background:conic-gradient(var(--mint) 0 25%,#8bc8ff 25% 50%,#f7c89e 50% 75%,#5479ee 75%);position:relative;transform:rotate(-25deg);box-shadow:0 24px 65px #0d1c32}.fraction-pie:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(130deg,#fff2,transparent 55%)}.pie-center{position:absolute;inset:76px;border-radius:50%;background:var(--navy);display:grid;place-items:center;font:800 43px Manrope;color:white;transform:rotate(25deg);z-index:1}.float-card{position:absolute;display:flex;gap:12px;align-items:center;padding:13px 17px;border-radius:16px;background:white;color:var(--ink);box-shadow:0 14px 35px #0d1c3240;font-size:26px}.float-card span{display:flex;flex-direction:column;line-height:1.35}.float-card b{font-size:14px}.float-card small{font-size:11px;color:var(--muted)}.card-top{top:37px;right:0}.card-bottom{bottom:35px;left:0}.section{max-width:1240px;margin:auto;padding:85px 28px}.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px;align-items:center;border-bottom:1px solid var(--line)}h2{font-size:clamp(29px,3vw,42px);line-height:1.2;margin-bottom:14px}.intro-copy p,.section-heading>p{color:var(--muted);font-size:15px;line-height:1.9}.goal-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.goal-chips span{background:#eff5ff;color:#3458a7;border-radius:30px;padding:7px 12px;font-size:12px;font-weight:700}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:34px}.section-heading>p{max-width:450px;margin-bottom:4px}.learning-section{padding-top:75px}.learning-layout{display:grid;grid-template-columns:300px 1fr;gap:25px;align-items:start}.topic-list{display:flex;flex-direction:column;gap:9px}.topic-button{width:100%;display:grid;grid-template-columns:38px 1fr 16px;gap:12px;align-items:center;text-align:left;border:1px solid transparent;background:#f7f9fc;padding:15px 13px;border-radius:14px;cursor:pointer;color:var(--ink)}.topic-button.active{background:#edf3ff;border-color:#cfddff}.topic-number{font-size:12px;font-weight:800;color:var(--blue);background:white;width:35px;height:35px;display:grid;place-items:center;border-radius:11px}.topic-button b,.topic-button small{display:block}.topic-button b{font-size:13px}.topic-button small{font-size:11px;color:var(--muted);margin-top:3px}.topic-button>span:last-child{color:var(--blue)}.lesson-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:0 12px 35px #172e4d08}.lesson-meta{display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:1px;font-weight:800;color:var(--blue)}.lesson-card h3{font-size:29px;margin:15px 0 20px}.context-box{display:flex;gap:16px;align-items:center;padding:17px;background:#f1f7ff;border-radius:15px}.context-icon{font-size:31px;background:white;border-radius:12px;width:54px;height:54px;display:grid;place-items:center;flex-shrink:0}.context-box b{font-size:14px}.context-box p{font-size:13px;color:var(--muted);margin:3px 0 0}.lesson-body{padding:20px 0 8px;font-size:14px}.lesson-body p{margin-bottom:12px}.lesson-body ul{padding-left:21px}.math-display{display:block;text-align:center;padding:15px;background:#f7f9fc;border-radius:12px;font:700 22px Manrope;color:var(--blue);margin:14px 0}.example-box{background:#fff9f1;border-left:3px solid #f0b777;padding:15px 18px;border-radius:0 12px 12px 0;font-size:13px}.example-label{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#a86a22;margin-bottom:5px}.example-box p{margin:0}.lesson-footer{display:flex;justify-content:space-between;gap:12px;margin-top:25px}.lesson-footer .btn{font-size:13px}.practice-section{background:var(--paper);max-width:none;padding-left:max(28px,calc((100% - 1184px)/2));padding-right:max(28px,calc((100% - 1184px)/2))}.practice-card{max-width:850px;margin:auto;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;box-shadow:0 14px 45px #172e4d08}.practice-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.pill{background:#edf3ff;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1px;padding:7px 11px;border-radius:50px}.progress-track{height:5px;background:#edf0f5;border-radius:10px;margin:17px 0 27px;overflow:hidden}.progress-fill{height:100%;width:16.67%;background:var(--blue);transition:width .3s}.practice-card h3{font-size:22px;line-height:1.5;margin-bottom:20px}.answer-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-option{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:white;cursor:pointer;color:var(--ink);font-size:14px}.answer-option .letter{width:27px;height:27px;border-radius:8px;background:#f0f3f8;display:grid;place-items:center;font-weight:800;font-size:12px}.answer-option.selected{border-color:var(--blue);background:#f2f6ff}.answer-option.correct{border-color:#20a56b;background:#effbf5}.answer-option.wrong{border-color:#e46a6a;background:#fff3f3}.feedback{margin-top:16px;font-size:13px;padding:0;border-radius:10px}.feedback:not(:empty){padding:13px 15px;background:#f4f7fb}.feedback.good{background:#effbf5!important;color:#16754c}.feedback.bad{background:#fff3f3!important;color:#a33333}.practice-footer{display:flex;align-items:center;gap:10px;margin-top:23px}.practice-footer span{margin-right:auto;color:var(--muted);font-size:13px;font-weight:700}.practice-footer .btn{font-size:13px}.hidden{display:none!important}.assignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.assignment-card{border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;align-items:flex-start}.assignment-icon{width:55px;height:55px;border-radius:16px;display:grid;place-items:center;font-size:28px;margin-bottom:19px}.peach{background:#fff0e5}.blue{background:#e8f2ff}.green{background:#e6f8ef}.assignment-tag{font-size:10px;letter-spacing:1.2px;font-weight:800;color:var(--blue);margin-bottom:9px}.assignment-card h3{font-size:22px;margin-bottom:10px}.assignment-card p,.assignment-card li{font-size:13px;color:var(--muted);line-height:1.8}.assignment-card ol{padding-left:20px;margin-top:0;margin-bottom:20px}.assignment-action{border:0;background:transparent;color:var(--blue);font-weight:800;font-size:13px;cursor:pointer;padding:8px 0;margin-top:auto}.assignment-action span{margin-left:8px}.task-workspace{margin-top:25px;border:1px solid #d4e0fb;background:#f8faff;border-radius:20px;padding:25px}.workspace-heading{display:flex;justify-content:space-between;align-items:start}.workspace-heading h3{font-size:24px;margin:12px 0}.close-workspace{border:0;background:white;border-radius:10px;width:38px;height:38px;font-size:25px;cursor:pointer}.task-workspace>p{font-size:14px;color:var(--muted)}.task-workspace label{display:block;font-weight:700;font-size:13px;margin:18px 0 8px}.task-workspace textarea{width:100%;resize:vertical;border:1px solid #d7e0ee;border-radius:12px;padding:14px;background:white;outline:none}.task-workspace textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3869e81c}.workspace-actions{display:flex;align-items:center;gap:15px;margin-top:12px}.workspace-actions span{font-size:11px;color:var(--muted);margin-right:auto}.workspace-actions .btn{font-size:13px}.self-check{margin-top:20px;padding:15px;background:#edf5ff;border-radius:12px;font-size:13px}.self-check p{margin:4px 0 0;color:var(--muted)}.challenge-section{background:#3869e8;color:white;border-radius:25px;margin-bottom:80px;display:flex;justify-content:space-between;align-items:center;padding:50px 65px;max-width:1184px;overflow:hidden;position:relative}.challenge-copy{max-width:570px;position:relative;z-index:1}.challenge-copy h2{font-size:36px}.challenge-copy p{color:#e1e9ff;max-width:500px;font-size:14px;line-height:1.9;margin:18px 0 25px}.challenge-visual{width:230px;height:230px;position:relative;display:grid;place-items:center;flex-shrink:0}.big-fraction{width:145px;height:170px;background:#fff;color:var(--navy);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 55px Manrope;transform:rotate(8deg);box-shadow:0 20px 50px #193a9e50}.big-fraction i{width:75px;height:5px;background:var(--blue);margin:0}.mini-note{position:absolute;bottom:0;right:-12px;background:var(--mint);color:var(--navy);padding:12px 16px;border-radius:13px;font-size:11px;font-weight:800;line-height:1.6;transform:rotate(-5deg)}footer{max-width:1240px;margin:auto;padding:0 28px 35px;display:flex;align-items:center;gap:25px}footer p{font-size:11px;color:var(--muted);margin:0;margin-right:auto}.footer-brand{font-size:15px}.footer-brand .brand-mark{width:29px;height:29px;font-size:17px}.back-top{font-size:12px;font-weight:700;color:var(--blue)}
@media(max-width:900px){.hero{min-height:660px}.hero-content{width:65%;margin-top:45px}.hero-art{right:-130px;top:200px;opacity:.55;transform:scale(.8)}.intro-grid{gap:35px}.learning-layout{grid-template-columns:1fr}.topic-list{display:grid;grid-template-columns:1fr 1fr}.assignment-grid{grid-template-columns:1fr 1fr}.challenge-section{margin-left:20px;margin-right:20px;padding:40px}.challenge-visual{transform:scale(.85)}}
@media(max-width:620px){.hero{padding:0 21px 38px;min-height:720px}.topbar{height:72px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:65px;right:0;background:#fff;color:var(--ink);padding:15px;border-radius:14px;box-shadow:0 12px 30px #0002;flex-direction:column;gap:12px;min-width:160px}.nav-links.open{display:flex}.nav-links a{color:var(--ink)}.hero-content{width:100%;margin-top:40px}.hero-content>p{font-size:15px;max-width:440px}.hero-art{top:405px;right:calc(50% - 185px);width:370px;height:300px;transform:scale(.7);opacity:.85}.fraction-pie{width:220px;height:220px}.pie-center{inset:68px;font-size:38px}.orbit-one{width:360px;height:360px}.orbit-two{width:300px;height:300px}.card-top{top:0;right:-15px}.card-bottom{bottom:-8px;left:-10px}.hero-stats{gap:22px;margin-top:32px}.hero-stats strong{font-size:15px}.hero-stats span{font-size:10px}.section{padding:58px 20px}.intro-grid{grid-template-columns:1fr;gap:12px}.section-heading{display:block}.section-heading>p{margin-top:12px}.topic-list{grid-template-columns:1fr 1fr;gap:7px}.topic-button{grid-template-columns:29px 1fr;gap:8px;padding:10px 8px}.topic-button>span:last-child{display:none}.topic-number{width:28px;height:28px;font-size:10px}.topic-button b{font-size:11px}.topic-button small{font-size:9px;line-height:1.3}.lesson-card{padding:21px 17px}.lesson-card h3{font-size:24px}.lesson-meta{font-size:9px}.context-box{padding:12px;gap:10px}.context-icon{width:45px;height:45px;font-size:25px}.lesson-footer .btn{padding:11px 10px;font-size:11px}.practice-card{padding:22px 17px}.practice-card h3{font-size:19px}.answer-options{grid-template-columns:1fr}.practice-footer{flex-wrap:wrap}.practice-footer span{width:100%;margin-bottom:4px}.practice-footer .btn{flex:1}.assignment-grid{grid-template-columns:1fr}.assignment-card{padding:21px}.challenge-section{margin:0 14px 50px;padding:32px 24px;display:block}.challenge-copy h2{font-size:29px}.challenge-visual{margin:18px auto 0}.workspace-actions{align-items:stretch;flex-direction:column}.workspace-actions span{margin:0}.workspace-actions .btn{align-self:flex-start}footer{padding:0 20px 30px;flex-wrap:wrap;gap:12px}footer p{order:3;width:100%}}
/* ===== Perbaikan: keterbacaan, interaktif, mobile ===== */
html{-webkit-text-size-adjust:100%}body{font-size:16px;overflow-x:hidden}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 .15em;font-weight:700}
.fr b{display:block;padding:0 .25em;font-size:.9em}.fr b:first-child{border-bottom:2px solid currentColor}
.lesson-body{font-size:16px}.lesson-body p,.lesson-body li{line-height:1.75}.lesson-body ol{padding-left:22px}
.c1{color:#d9480f}.c2{color:#1c7ed6}
.math-display{font-size:clamp(17px,4.5vw,22px);overflow-x:auto}
.example-box{font-size:15px;margin-top:18px}.mistake-box{margin-top:14px;background:#fff1f1;border-left:3px solid #e46a6a;padding:14px 18px;border-radius:0 12px 12px 0;font-size:15px}.mistake-box .example-label{color:#a33333}.mistake-box p{margin:0}
.mini-check{margin-top:14px;background:#f2f9f5;border:1px solid #cfeedd;border-radius:14px;padding:16px}.mini-check .example-label{color:#16754c}.mini-check>p{font-weight:600;font-size:15px}
.done-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.done-bar .progress-track{flex:1;margin:0}.done-bar small{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.topic-button.done .topic-number{background:#20a56b;color:#fff;font-size:0}.topic-button.done .topic-number:before{content:"✓";font-size:14px}
.viz{margin:18px 0;padding:18px;background:#f5f8ff;border:1px dashed #b9cbf7;border-radius:16px}
.rg{display:block;margin:12px 0 4px;font-size:13px;font-weight:700}.rg input[type=range]{width:100%;height:36px;accent-color:var(--blue)}.rg select,.calc input,.calc select{font:inherit;font-size:16px;padding:10px;border:1px solid #cdd8ea;border-radius:10px;background:#fff}
.bar{display:grid;grid-template-columns:repeat(var(--d),1fr);gap:3px;margin:10px 0}.bar i{height:34px;background:#e3e9f1;border-radius:6px;transition:background .25s}.bar i.on{background:var(--blue)}
.viz-out{font-weight:600;margin:8px 0 0;font-size:15px}
.calc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.calc input{width:64px;text-align:center}
.hint-s{color:var(--muted);font-size:12px}.steps{padding-left:20px;margin:12px 0 0;font-size:15px}.steps li{margin-bottom:6px}
.meter{height:16px;background:#e3e9f1;border-radius:10px;overflow:hidden;margin:12px 0}.meter i{display:block;height:100%;background:linear-gradient(90deg,#8bc8ff,var(--blue));transition:width .2s}
.hint-box{margin:12px 0 0;padding:12px 14px;background:#fff9f1;border-left:3px solid #f0b777;border-radius:0 10px 10px 0;font-size:14px}
.answer-option{min-height:48px;font-size:16px;transition:transform .15s,border-color .2s}.answer-option:active{transform:scale(.98)}.btn{min-height:46px}
.assignment-card p,.assignment-card li{font-size:14px}.feedback{font-size:14px;line-height:1.6}
.task-workspace textarea{font-size:16px}
@media(max-width:900px){.topic-list{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:8px;-webkit-overflow-scrolling:touch}.topic-button{flex:0 0 190px;scroll-snap-align:start}}
@media(max-width:620px){
 .hero{min-height:0;padding-bottom:44px}.hero-art{display:none}.hero-content{margin-top:28px}.hero-stats{flex-wrap:wrap}
 .topic-button{flex-basis:165px;grid-template-columns:29px 1fr}.topic-button b{font-size:13px}.topic-button small{font-size:11px}
 .lesson-card{padding:18px 14px}.lesson-footer{position:sticky;bottom:0;background:#fff;margin:20px -14px -18px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:0 0 22px 22px}.lesson-footer .btn{flex:1;font-size:14px}
 .calc input{width:56px}.viz{padding:14px}.practice-footer .btn{min-width:45%}
 .nav-links a{padding:6px 4px;font-size:15px}.practice-section{padding-left:14px;padding-right:14px}
}
/* ===== Tambahan modul Persamaan Linear Dua Variabel ===== */
.gr{display:block;width:100%;max-width:340px;margin:10px auto;background:#fff;border:1px solid #dde5f2;border-radius:14px}
.tb{border-collapse:collapse;width:100%;font-size:15px;margin-top:10px;background:#fff}.tb td,.tb th{border:1px solid #dde5f2;padding:8px 4px;text-align:center}.tb th{background:#edf3ff}.tb tr.ok{background:#effbf5}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:700;margin-top:6px}
.calc.rows{display:block}.calc.rows div{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-weight:700;flex-wrap:wrap}
.hero-art .pie-center{font-size:34px}