:root{--ink:#16283f;--muted:#55677e;--line:#dce3ec;--navy:#152947;--accent:#087d72;--accent-soft:#e4f4f0;--paper:#fff;--ground:#f3f6fa;--warn:#9a4f12;--radius:12px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--ground);font-size:16px;line-height:1.7}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,textarea,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:var(--accent);text-underline-offset:4px}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #db9900;outline-offset:3px}.skip-link{position:absolute;top:-80px;left:16px;background:white;padding:12px;z-index:50}.skip-link:focus{top:8px}.topbar{height:auto;min-height:76px;padding:16px 3.5%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:10}.brand{font-size:1.05rem;font-weight:650;color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;border:1px solid #638297;width:36px;height:36px;border-radius:8px;font-family:Georgia,serif;font-size:1.35rem;color:#9ee0d6}.topbar nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top-link,.site-link{background:none;color:#d5e0ec;padding:8px 12px;border-radius:7px;text-decoration:none;font-size:.9rem}.top-link.active{background:#29425e;color:#fff}.site-link{border-left:1px solid #45607b;border-radius:0;margin-left:6px}.workspace{display:grid;grid-template-columns:260px minmax(0,790px) 220px;max-width:1400px;margin:auto;min-height:calc(100vh - 76px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:30px 24px;position:sticky;top:76px;height:calc(100vh - 76px);overflow:auto}.eyebrow{font-size:.875rem;color:var(--accent);font-weight:600;letter-spacing:.04em}.course-summary h2{font-size:1.25rem;line-height:1.5;margin:12px 0}.course-summary p{font-size:.88rem;color:var(--muted);margin:8px 0 20px}.progress-label{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted)}progress{appearance:none;width:100%;height:6px;border:0;background:#e9eef4;display:block;margin:8px 0 24px}progress::-webkit-progress-bar{background:#e9eef4;border-radius:5px}progress::-webkit-progress-value{background:var(--accent);border-radius:5px}progress::-moz-progress-bar{background:var(--accent)}.module-label{font-size:.875rem;letter-spacing:.04em;color:var(--muted);margin:24px 0 8px}.lesson-link{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:transparent;padding:12px 10px;border-radius:8px;color:var(--ink);line-height:1.45;margin:4px 0;font-size:.9rem}.lesson-link.active{background:var(--accent-soft);color:#086b62;box-shadow:inset 3px 0 var(--accent)}.lesson-num{font-size:.875rem;font-weight:650;font-variant-numeric:tabular-nums;padding-top:2px}.lesson-link small{display:block;font-size:.875rem;color:var(--muted);margin-top:4px}.sidebar-note{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:24px}main{padding:36px 38px 60px;min-width:0}.lesson-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.9rem;margin-bottom:12px}h1{font-size:clamp(1.65rem,2.5vw,2.2rem);line-height:1.4;letter-spacing:-.02em;margin:6px 0 14px}h2{font-size:1.3rem;line-height:1.45}h3{font-size:1.08rem;line-height:1.5;margin:8px 0 12px}p{margin:12px 0}ul,ol{padding-left:1.45em}li{margin:7px 0}.goal{color:var(--muted);margin:0 0 26px}.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:26px}.step-button{font-size:.88rem;line-height:1.45;padding:12px 6px;background:#e9eef4;border-radius:8px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px}.step-button.active{background:var(--navy);color:white}.step-button.done{color:var(--accent)}.step-button span{font-size:.875rem;font-weight:650}.panel{background:#fff;padding:28px;border:1px solid var(--line);border-radius:var(--radius);margin:20px 0}.problem-panel{border-top:4px solid var(--accent);margin-top:0}.panel-tag{font-size:.875rem;color:var(--accent);font-weight:650;display:flex;align-items:center;gap:8px}.scenario{font-size:1.12rem;line-height:1.85;margin:14px 0 20px}.label{display:block;font-weight:600;font-size:.95rem;margin:20px 0 8px}.hint,.muted{color:var(--muted);font-size:.9rem}textarea,input[type=text],select{border:1px solid #b9c7d8;border-radius:8px;background:#fff;color:var(--ink);width:100%;padding:12px;font-size:1rem}textarea{resize:vertical;min-height:125px;line-height:1.65}textarea:focus,input:focus{border-color:var(--accent)}.confidence{border:0;padding:0;margin:18px 0}.confidence legend{font-size:.9rem;color:var(--muted);margin-bottom:10px}.confidence label{font-size:.9rem;display:inline-flex;gap:6px;align-items:center;margin-right:14px}.confidence input{accent-color:var(--accent);width:17px;height:17px}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}.button{padding:11px 18px;background:var(--navy);color:#fff;border-radius:8px;font-size:.95rem;font-weight:550;min-height:44px}.button.secondary{background:#eef2f7;color:var(--ink);border:1px solid var(--line)}.button.accent{background:var(--accent)}.button.subtle{background:none;padding:8px;color:var(--muted)}.context-rail{padding:34px 22px;border-left:1px solid var(--line);font-size:.9rem}.context-rail h3{font-size:.93rem}.context-rail p{color:var(--muted)}.context-item{border-bottom:1px solid var(--line);padding:16px 0}.context-item:first-child{padding-top:0}.source{font-size:.875rem;line-height:1.8;margin-top:22px;color:var(--muted)}.source a{color:var(--muted)}.flow{display:flex;align-items:stretch;gap:8px;margin:20px 0;overflow:auto}.flow-item{flex:1;min-width:105px;background:var(--accent-soft);border-left:3px solid var(--accent);padding:13px 11px;font-size:.9rem;line-height:1.5}.flow-item small{display:block;color:var(--muted);font-size:.875rem;margin-top:4px}.contrast{border-left:3px solid #ba7a32;background:#fff7ec;padding:18px;border-radius:0 8px 8px 0;margin:20px 0}.example{background:#f5f8fc;border:1px solid #e0e7f0;padding:20px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.checklist{list-style:none;padding:0}.checklist label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.checklist input{margin-top:6px;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}.checkpoint{padding:18px;background:var(--accent-soft);border-radius:8px}.question{margin:22px 0}.question-title{font-size:1rem;font-weight:600}.error{color:#a2342d;font-size:.9rem;margin-top:10px}.feedback-item{border-top:1px solid var(--line);padding:16px 0}.feedback-item:first-child{border-top:0}.feedback-item strong{font-size:.95rem}.feedback-item p{font-size:.95rem}.badge{font-size:.875rem;background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:3px 8px}.view-title{margin-bottom:24px}.draft-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.draft-grid .full{grid-column:1/-1}.code-preview{background:var(--navy);color:#e7f0fb;border-radius:8px;padding:22px;overflow:auto;font-size:.9rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:520px}.note-strip{border-left:3px solid var(--accent);padding:12px 18px;background:var(--accent-soft);font-size:.9rem}.review-card{display:grid;grid-template-columns:95px 1fr;gap:18px;border-top:1px solid var(--line);padding:22px 0}.review-card .days{font-size:1.05rem;font-weight:600;color:var(--accent)}.review-card p{margin:4px 0;color:var(--muted);font-size:.9rem}.skill-table{width:100%;border-collapse:collapse;font-size:.9rem}.skill-table td,.skill-table th{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.table-wrap{overflow:auto}.lesson-end{background:var(--navy);color:#fff;padding:26px;border-radius:var(--radius)}.lesson-end p{color:#d3dfed}.lesson-end .button{background:#fff;color:var(--navy)}details{border-bottom:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-size:.95rem;font-weight:550}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90vw;padding:12px 20px;background:var(--navy);color:white;border-radius:8px;font-size:.9rem;z-index:100;display:none}#toast.visible{display:block}.noscript{padding:24px}.save-state{font-size:.875rem;color:var(--muted)}.storage-warning{background:#fff4de;border:1px solid #ddb56a;padding:14px;border-radius:8px;font-size:.9rem;margin-bottom:20px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.title-row button{flex-shrink:0}.folded-note{font-size:.9rem;color:var(--muted)}@media(min-width:1450px){.workspace{grid-template-columns:270px minmax(0,850px) 230px;max-width:1450px}}@media(max-width:1100px){.workspace{grid-template-columns:235px minmax(0,1fr)}.context-rail{display:none}main{padding:28px}}@media(max-width:740px){.topbar{position:relative;padding:15px 18px;display:block}.topbar nav{margin-top:13px;gap:3px}.top-link,.site-link{font-size:.875rem;padding:8px}.brand{font-size:1rem}.workspace{display:block}.sidebar{position:relative;top:0;height:auto;padding:20px;border-right:0;border-bottom:1px solid var(--line)}.course-summary h2{font-size:1.1rem;margin:8px 0}.course-summary h2 br{display:none}.course-summary p{margin:8px 0 12px}.sidebar-note{display:none}#lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px}.module-label{grid-column:1/-1;margin:14px 0 2px}.lesson-link{margin:0;font-size:.87rem;padding:9px 8px}main{padding:24px 18px 48px}.panel{padding:22px 18px}.scenario{font-size:1.03rem}.step-button{font-size:.875rem;padding:10px 4px}.steps{gap:4px}.draft-grid{display:block}.title-row{align-items:flex-start}h1{font-size:1.6rem}.flow{flex-wrap:wrap}.flow-item{min-width:120px}.review-card{grid-template-columns:75px 1fr;gap:10px}.button{padding:11px 14px}.site-link{margin-left:0}progress{margin-bottom:12px}.title-row .button{font-size:.875rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}@media print{.topbar,.sidebar,.context-rail,.steps,.actions,#toast{display:none}.workspace{display:block}main{padding:0}.panel{break-inside:avoid;border:0;padding:12px 0}textarea{min-height:70px}.code-preview{color:black;background:white;max-height:none}}

.course-intro{margin:0 0 24px;color:var(--muted);font-size:.9rem}.course-intro summary{color:var(--ink)}.course-footer{color:var(--muted);font-size:.875rem;margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}.skill-table small{font-size:.875rem;overflow-wrap:anywhere}.skill-table caption{text-align:left;font-weight:600;padding:10px 0}.checklist label{min-height:44px}.confidence label{min-height:44px}.lesson-link{min-height:54px}main:focus{outline:none}textarea{scroll-margin-top:100px}

.download-ready:not(:empty){border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft);padding:16px;margin:24px 0}.download-ready p{overflow-wrap:anywhere}