@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@600;700;800;900&display=swap');
:root{--navy:#132949;--blue:#225aca;--paper:#f5f8fc;--ink:#1c304c;--muted:#52647b;--line:#d7e1ee;--yellow:#ffcf43;--mint:#dbf5ed;--red:#a22332;--green:#126346}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.6}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}header{background:white;border-bottom:1px solid var(--line);padding:17px 4%;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--navy);font-family:Nunito,sans-serif;font-size:22px;font-weight:900}.brand small{display:block;font:14px 'DM Sans',sans-serif;color:var(--muted)}.logo{width:48px;height:48px;background:var(--navy);color:var(--yellow);border-radius:14px;display:grid;place-content:center;position:relative;font-size:30px}.logo span{position:absolute;right:4px;bottom:1px;font-size:14px;color:white}.header-tools{display:flex;gap:10px}.quiet{background:transparent;color:var(--navy);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:15px;font-weight:600}.shell{max-width:1450px;margin:auto;display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 150px)}aside{padding:34px 24px 25px;border-right:1px solid var(--line);background:#edf3fa}.unit-label,.eyebrow{font-size:14px;font-weight:800;letter-spacing:.09em;color:var(--blue)}h1,h2,h3{font-family:Nunito,sans-serif;line-height:1.17}h1{font-size:35px;letter-spacing:-.025em;margin:12px 0 20px}.underline{display:block;width:80px;height:6px;background:var(--yellow);border-radius:6px;margin-top:15px}.aside-description{font-size:16px;color:var(--muted);margin:0 0 24px}.progress-label{display:flex;justify-content:space-between;font-size:14px}.progress-track{height:7px;background:#d7e1ee;border-radius:10px;margin:10px 0 20px}.progress-track>div{height:100%;background:var(--blue);border-radius:10px;transition:width .3s}nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:12px;padding:10px;background:transparent;color:var(--ink);font-size:15px;line-height:1.3;width:100%}.nav-item:hover{background:#e0eaf7}.nav-item.active{background:var(--navy);color:white}.nav-num{flex:none;background:white;color:var(--blue);border:1px solid var(--line);border-radius:8px;width:29px;height:29px;display:grid;place-content:center;font-size:13px;font-weight:700}.nav-item.done .nav-num{background:var(--mint);color:var(--green)}.storage-note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:24px;padding-top:15px}main{padding:34px 5%;min-width:0}h2{font-size:36px;margin:10px 0 15px;letter-spacing:-.025em}h3{font-size:23px;margin:0 0 12px}p{margin-top:0}.topline{display:flex;justify-content:space-between;align-items:center;gap:15px}.badge{background:var(--yellow);font-size:14px;font-weight:800;padding:5px 12px;border-radius:20px;white-space:nowrap}.lead{color:var(--muted);max-width:710px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.card{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 5px 16px #15395e06}.primary{background:var(--navy);color:white;border:0;padding:12px 20px;border-radius:12px;font-weight:700}.primary:hover{background:#204476}.secondary{background:white;border:1px solid var(--line);border-radius:12px;padding:11px 18px;color:var(--navy);font-weight:700}.yellow-card{background:var(--yellow);border:0}.yellow-card p{color:#253144}.mini-stats{display:flex;gap:23px;margin:18px 0 22px}.mini-stats b{font-size:26px;font-family:Nunito,sans-serif;display:block}.mini-stats span{font-size:14px}.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.route-card{padding:18px;text-align:left;display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:white;color:var(--ink)}.route-card:hover{border-color:var(--blue);transform:translateY(-1px)}.route-card strong{display:block;font-family:Nunito,sans-serif;font-size:19px}.route-card small{color:var(--muted);font-size:14px}.route-number{font-weight:800;color:var(--blue);padding:7px;background:#eef3fc;border-radius:10px}.levels{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.level{border:1px solid var(--line);padding:10px 16px;border-radius:12px;background:white;color:var(--ink);font-size:16px;font-weight:600}.level.selected{background:var(--blue);color:white;border-color:var(--blue)}details.theory{background:#e7f5fa;border:1px solid #bcdde9;border-radius:16px;margin:20px 0;padding:16px 20px}summary{cursor:pointer;font-weight:700}.theory-content{margin-top:16px}.theory-content ul{padding-left:23px}.theory-content li{margin:8px 0}.reading{border-left:5px solid var(--yellow);background:#fffdf4;padding:20px 23px;border-radius:0 14px 14px 0;margin:20px 0}.reading p:last-child{margin-bottom:0}.reading h3{font-size:22px}.book-link{font-size:14px;color:var(--blue)}.question-card{background:white;border:1px solid var(--line);border-radius:20px;padding:26px;margin:18px 0}.question-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);margin-bottom:15px}.question-title{font-size:23px;line-height:1.4;letter-spacing:0;margin-bottom:18px}.options{display:grid;gap:10px}.option{text-align:left;border:2px solid var(--line);border-radius:12px;background:white;color:var(--ink);padding:12px 16px;display:flex;gap:12px;align-items:center}.option:hover{border-color:#97b4e3}.option.chosen{border-color:var(--blue);background:#eef4ff}.option.right{border-color:var(--green);background:#ecf9f3}.option.wrong{border-color:var(--red);background:#fff0f1}.option-index{font-size:14px;font-weight:700;border:1px solid var(--line);border-radius:7px;padding:2px 7px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.feedback{padding:16px 20px;border-radius:12px;margin-top:18px;border-left:4px solid var(--blue);background:#eef4ff}.feedback.success{background:#ecf9f3;border-color:var(--green)}.feedback.error{background:#fff1f2;border-color:var(--red)}.feedback strong{display:block}.hint{background:#fff6d3;color:#574512;padding:12px 16px;border-radius:10px;margin-top:14px}input[type=text],textarea,select{width:100%;border:2px solid var(--line);border-radius:12px;background:white;padding:12px;color:var(--ink)}textarea{min-height:170px;resize:vertical;line-height:1.7}label{display:block;margin:12px 0 7px;font-weight:600}.classify-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(160px,1fr);gap:15px;align-items:center;padding:8px 0;border-bottom:1px solid #edf1f7}.classify-row label{margin:0}.classify-row select{font-size:16px;padding:8px}.sequence{display:grid;gap:9px}.sequence-item{border:1px solid var(--line);padding:10px 14px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.sequence-controls{display:flex;gap:5px;flex:none}.sequence-controls button{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:2px 10px;color:var(--navy)}.check-list label{font-weight:400;display:flex;gap:10px;align-items:start}.check-list input{margin-top:7px;width:18px;height:18px;flex:none}.word-count{color:var(--muted);font-size:14px;margin-top:7px}.audio-panel{background:#e7f5fa;padding:15px;border-radius:12px;margin-bottom:15px}.audio-panel small{display:block;margin-top:10px;font-size:14px}.finish{background:var(--navy);color:white;border-radius:20px;padding:30px}.finish h3{font-size:29px}.finish .secondary{background:var(--yellow);border:0}.progress-list{display:grid;gap:12px}.progress-row{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}.progress-row span:last-child{text-align:right;color:var(--muted);font-size:14px}.reflection{display:grid;gap:14px}.reflection select{margin:8px 0}footer{padding:18px 4%;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:white}footer button{border:0;background:transparent;color:var(--blue);text-decoration:underline;font-size:13px}dialog{border:1px solid var(--line);border-radius:20px;padding:30px;max-width:740px;width:calc(100% - 32px);max-height:85vh;overflow:auto;color:var(--ink);background:white}dialog::backdrop{background:#13294999}.close{float:right;margin-bottom:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.contrast{--muted:#233950;--line:#91a2b9}.contrast .storage-note{color:#233950}.pill{display:inline-block;background:var(--mint);color:var(--green);font-size:14px;padding:4px 10px;border-radius:20px}.wrong-field{border-color:var(--red)!important}.correct-field{border-color:var(--green)!important}a{color:var(--blue)}.muted{color:var(--muted)}@media(max-width:900px){.shell{grid-template-columns:230px minmax(0,1fr)}aside{padding:25px 16px}h1{font-size:29px}main{padding:28px 4%}.intro-grid,.route-grid{grid-template-columns:1fr}}@media(max-width:650px){header{padding:12px 16px}.brand{font-size:18px}.logo{width:39px;height:39px}.header-tools{gap:6px}.header-tools button{font-size:13px;padding:7px}.shell{display:block}aside{border-right:0;border-bottom:1px solid var(--line);padding:20px}aside h1{font-size:26px;margin:6px 0}aside h1 br{display:none}.underline,.aside-description{display:none}.unit-label{font-size:12px}.progress-label{margin-top:13px}nav{display:flex;overflow-x:auto;gap:7px;padding-bottom:5px}.nav-item{flex:0 0 190px}.storage-note{font-size:12px;margin-top:10px;padding-top:8px}main{padding:24px 18px}h2{font-size:29px}.question-card{padding:20px}.classify-row{grid-template-columns:1fr}.topline{align-items:flex-start}.badge{font-size:12px}.question-title{font-size:21px}.card{padding:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.reference-banner{background:#e1f0ff;border:1px solid #bad4f2;border-radius:18px;padding:23px;margin:25px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}.reference-banner h3{margin:8px 0}.reference-banner p{margin:0;max-width:600px}.reference-banner button{flex:none}.general-nav{border-top:2px solid #bacce3!important;border-radius:0 0 12px 12px!important;margin-top:15px;padding-top:18px!important}.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}.reference-card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;align-self:start}.reference-card summary{padding:18px;display:list-item;list-style-position:inside;color:var(--navy);font-family:Nunito,sans-serif;font-size:19px}.reference-card summary small{display:block;font:14px 'DM Sans',sans-serif;color:var(--muted);margin-top:5px}.reference-body{padding:0 20px 20px;font-size:16px}.reference-body li{margin:10px 0}.reference-body ul{padding-left:21px}.example-box{background:#fff8df;border-radius:10px;padding:14px;margin-top:16px}.example-box p{margin-bottom:9px}.example-box p:last-child{margin-bottom:0}.reference-jumps{display:flex;gap:7px;flex-wrap:wrap}.reference-jumps button{background:white;font-size:14px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:9px;border-bottom:1px solid var(--line)}th{background:#edf3fa}dialog .reference-grid{grid-template-columns:1fr}.reference-card[open]{border-color:#8bb7ec}.reference-card[open] summary{background:#eef5ff;margin-bottom:18px}@media(max-width:900px){.reference-grid{grid-template-columns:1fr}.reference-banner{align-items:flex-start;flex-direction:column}.header-tools{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:650px){header{align-items:flex-start}.header-tools{max-width:190px}.header-tools button{font-size:12px}.reference-card summary{font-size:18px}}

.nav-divider{font-size:11px;font-weight:800;letter-spacing:1px;margin:25px 14px 10px;color:#c3d2df}.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.reading-card{display:flex;align-items:center;justify-content:space-between;text-align:left}.reading-card small{display:block;margin:8px 0}.map-figure{margin:20px 0}.map-figure svg{width:100%;max-width:650px;height:auto}.map-figure figcaption{font-size:13px;margin-top:8px}.topic-picker{margin:24px 0;padding:22px;background:var(--paper,#f5f3ed);border-radius:14px}.topic-picker select{width:100%;max-width:450px;margin-top:8px}.reading table{margin:15px 0}.reading li{margin:10px 0}#readingSearch{width:100%;max-width:500px} .reference-banner{gap:18px}@media(max-width:650px){.reading-grid{grid-template-columns:1fr}}

.unit-switch{display:flex;gap:8px;margin:15px 0}.unit-switch button{padding:9px 14px;font-size:14px}.authentic-media{margin:22px 0}.authentic-media img{display:block;max-width:100%;max-height:680px;width:auto;margin:auto;border:1px solid #dbe3e8;background:white}.authentic-media figcaption{font-size:14px;margin-top:12px;line-height:1.7}.authentic-media a{color:#195d91;text-decoration:underline}aside h1{line-height:1.15}.reading details{margin-top:16px}
