:root{--ink:#16212b;--muted:#66717b;--paper:#f3f4ef;--card:#fffefa;--line:#dce0dc;--coral:#ef5b5b;--cyan:#00a8a8;--navy:#102a43}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #ef5b5b4d}.app-shell{min-height:100vh}.topbar{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:50;background:#fffefaf2;grid-template-columns:300px minmax(260px,600px) 1fr;align-items:center;gap:28px;height:76px;padding:0 30px;display:grid;position:sticky;top:0}.brand{color:var(--ink);align-items:center;gap:12px;text-decoration:none;display:flex}.brand-wave{background:var(--navy);color:#5ce1e6;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-family:Georgia,serif;font-size:28px;font-weight:800;display:flex;position:relative}.brand-wave:after{background:var(--coral);content:"";border-radius:50%;width:8px;height:8px;position:absolute;top:-3px;right:-3px}.brand b,.brand small{display:block}.brand b{letter-spacing:.08em;font-size:17px}.brand small{color:var(--muted);letter-spacing:.16em;margin-top:3px;font-size:8px;font-weight:700}.search{position:relative}.search>span{color:#77818b;z-index:2;font-size:24px;position:absolute;top:8px;left:15px;transform:rotate(-18deg)}.search input{background:#eaede9;border:1px solid #0000;border-radius:10px;width:100%;height:43px;padding:0 18px 0 45px}.search input:focus{background:#fff;border-color:#c8cfca;box-shadow:0 9px 25px #102a4314}.search-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;position:absolute;top:50px;left:0;right:0;box-shadow:0 18px 46px #102a4321}.search-panel button{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px;display:flex}.search-panel button:hover{background:#eef1ed}.search-panel small{color:var(--coral);font-family:monospace}.search-panel p{color:var(--muted);text-align:center;font-size:12px}.top-progress{justify-self:end;align-items:center;gap:10px;width:100%;max-width:270px;display:flex}.top-progress>span{color:var(--muted);white-space:nowrap;font-size:11px}.top-progress>div{background:#dfe4df;border-radius:10px;width:100%;height:6px;overflow:hidden}.top-progress i{background:var(--coral);height:100%;transition:width .35s;display:block}.top-progress b{font-family:monospace;font-size:12px}.menu-button{cursor:pointer;background:0 0;border:0;font-size:20px;display:none}.study-layout{grid-template-columns:284px minmax(0,1fr) 250px;max-width:1600px;min-height:calc(100vh - 76px);margin:auto;display:grid}.sidebar{border-right:1px solid var(--line);background:#e9ede9;min-height:calc(100vh - 76px);padding:25px 17px}.course-summary{padding:0 10px 21px}.course-summary>span{color:var(--coral);letter-spacing:.14em;font-size:9px;font-weight:800}.course-summary h2{margin:8px 0 5px;font-size:19px}.course-summary p{color:var(--muted);margin:0;font-size:10px}.chapter{border-top:1px solid #d0d6d1}.chapter:last-child{border-bottom:1px solid #d0d6d1}.chapter-title{cursor:pointer;text-align:left;background:0 0;border:0;grid-template-columns:34px 1fr 20px;align-items:center;gap:10px;width:100%;min-height:66px;padding:10px 8px;display:grid}.chapter-title>span{color:var(--chapter);font-family:monospace;font-size:11px;font-weight:800}.chapter-title b,.chapter-title small{display:block}.chapter-title b{font-size:13px}.chapter-title small{color:var(--muted);margin-top:4px;font-size:9px}.chapter-title i{color:#7f8981;font-style:normal}.chapter.active .chapter-title{color:var(--chapter)}.lesson-menu{padding:0 0 11px 40px}.lesson-menu button{color:#626d66;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;width:100%;padding:8px;font-size:11px;line-height:1.4;display:flex}.lesson-menu button:hover,.lesson-menu button.current{background:var(--card);color:var(--ink)}.lesson-menu button.current{font-weight:700;box-shadow:0 6px 18px #102a430f}.lesson-menu button>span{border:1px solid #c0c8c1;border-radius:50%;flex:0 0 20px;justify-content:center;align-items:center;height:20px;font-family:monospace;font-size:9px;display:flex}.lesson-menu button>span.done{background:var(--cyan);border-color:var(--cyan);color:#fff}.sidebar-tip{background:var(--navy);color:#fff;border-radius:10px;margin:25px 4px 0;padding:17px}.sidebar-tip span{color:#5ce1e6;letter-spacing:.12em;font-size:9px;font-weight:800}.sidebar-tip p{margin:9px 0 0;font-size:11px;line-height:1.7}.lesson-page{background:var(--card);min-width:0}.hero{border-bottom:1px solid var(--line);background:linear-gradient(90deg,#fffffff5,#ffffffbd),repeating-linear-gradient(0deg,#0000 0 31px,#102a430b 32px),repeating-linear-gradient(90deg,#0000 0 31px,#102a430b 32px);grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);align-items:center;gap:38px;min-height:450px;padding:55px clamp(32px,6vw,82px);display:grid;position:relative}.hero:before{background:var(--accent);content:"";width:100%;height:7px;position:absolute;top:0;left:0}.crumb{color:var(--muted);letter-spacing:.08em;margin-bottom:24px;font-size:10px;font-weight:700}.crumb i{color:#b3bab4;margin:0 6px;font-style:normal}.tags{gap:8px;margin-bottom:15px;display:flex}.tags span{background:color-mix(in srgb, var(--accent) 10%, white);border:1px solid color-mix(in srgb, var(--accent) 27%, white);color:color-mix(in srgb, var(--accent) 72%, black);border-radius:999px;padding:5px 10px;font-size:9px;font-weight:800}.hero h1{letter-spacing:-.055em;margin:0;font-size:clamp(35px,4vw,58px);line-height:1.08}.hero-copy>p{color:#53606a;max-width:700px;margin:22px 0 27px;font-size:14px;line-height:1.95}.complete{background:var(--navy);color:#fff;cursor:pointer;border:0;border-radius:8px;padding:13px 18px;font-size:11px;font-weight:800}.complete.done{background:var(--cyan)}.visual-board{box-shadow:22px 24px 0 color-mix(in srgb, var(--accent) 20%, #e8ece7);color:#fff;background:#102a43;border:8px solid #173b5c;border-radius:18px;height:260px;padding:28px;position:relative;overflow:hidden;transform:rotate(1.3deg)}.visual-board:after{content:"";pointer-events:none;border:1px dashed #ffffff2e;border-radius:11px;position:absolute;inset:9px}.axis{background:#7e96a8;position:absolute}.x-axis{height:1px;top:55%;left:25px;right:25px}.y-axis{width:1px;top:24px;bottom:24px;left:50%}.signal-curve{justify-content:center;align-items:flex-end;gap:0;width:76%;height:90px;display:flex;position:absolute;bottom:45%;left:12%}.signal-curve i{height:55px;transform:rotate(var(--r,0deg));border-top:3px solid #5ce1e6;width:14%;display:block}.signal-curve i:first-child{--r:-18deg;height:18px}.signal-curve i:nth-child(2){--r:-28deg;height:52px}.signal-curve i:nth-child(3){--r:-14deg;height:84px}.signal-curve i:nth-child(4){--r:14deg;height:96px}.signal-curve i:nth-child(5){--r:27deg;height:67px}.signal-curve i:nth-child(6){--r:20deg;height:31px}.signal-curve i:nth-child(7){--r:4deg;height:8px}.axis-t,.axis-x{color:#a9bbc8;font-family:Georgia,serif;font-style:italic;position:absolute}.axis-t{top:58%;right:23px}.axis-x{top:20px;left:52%}.board-note{color:#93a8b6;letter-spacing:.12em;text-align:center;width:calc(100% - 56px);font-size:9px;position:absolute;bottom:25px}.operation-board,.system-board,.state-board{justify-content:center;align-items:center;gap:15px;display:flex}.mini-plot{border-bottom:1px solid #7e96a8;border-left:1px solid #7e96a8;width:115px;height:105px;position:relative}.mini-plot span{color:#a9bbc8;font-size:10px;position:absolute;top:-22px;left:5px}.ramp{border-top:4px solid #5ce1e6;border-left:4px solid #5ce1e6;width:70px;height:70px;position:absolute;bottom:0}.ramp.original{left:35px;transform:skewY(-35deg)}.ramp.flipped{left:10px;transform:skewY(35deg)}.operation-board>b{color:var(--accent);font-size:25px}.operation-board>small,.state-board>small{color:#93a8b6;text-align:center;width:100%;font-size:9px;position:absolute;bottom:27px;left:0}.wire{background:#7e96a8;width:35px;height:2px;display:block}.input-tag,.output-tag{color:#ffd166;font-family:Georgia,serif;font-style:italic;font-weight:700}.system-box{background:var(--accent);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:120px;height:120px;display:flex}.system-box small{letter-spacing:.12em;font-size:9px}.system-box b{font-size:35px}.system-box em{font-family:Georgia,serif;font-size:11px}.system-formula{color:#5ce1e6;font-family:Georgia,serif;font-size:11px;position:absolute;bottom:27px}.convolution-board{padding:32px 35px}.conv-row{align-items:center;gap:15px;margin:18px 0;display:flex}.conv-row b{color:#a9bbc8;width:55px;font-family:Georgia,serif;font-size:11px}.rect{border-top:3px solid #5ce1e6;border-left:3px solid #5ce1e6;border-right:3px solid #5ce1e6;width:150px;height:35px;display:block}.rect.r2{border-color:#ffd166;margin-left:55px}.overlap{justify-content:center;align-items:center;gap:10px;margin-top:-64px;display:flex}.overlap i{background:#ef5b5b9e;width:22px;height:48px}.overlap strong{color:#ff9f9f;writing-mode:vertical-rl;font-size:9px}.convolution-board>small{color:#93a8b6;text-align:center;width:100%;font-size:9px;position:absolute;bottom:24px;left:0}.spectrum-axis,.sample-axis,.stem-axis{background:#7e96a8;height:1px;position:absolute;top:65%;left:25px;right:25px}.spectrum-bars{justify-content:center;align-items:flex-end;gap:18px;width:100%;display:flex;position:absolute;bottom:35%;left:0}.spectrum-bars i{background:#5ce1e6;border-radius:3px 3px 0 0;width:3px;display:block;position:relative}.spectrum-bars i:after{content:"";background:#5ce1e6;border-radius:50%;width:9px;height:9px;position:absolute;top:-4px;left:-3px}.spectrum-board>span{color:#91a7b6;text-align:center;width:100%;font-family:Georgia,serif;font-size:8px;position:absolute;bottom:60px;left:0}.spectrum-board>small{color:#ffd166;text-align:center;width:100%;font-size:9px;position:absolute;bottom:24px;left:0}.sampling-board{flex-direction:column;justify-content:center;display:flex}.sample-row{justify-content:center;align-items:flex-end;gap:27px;height:80px;display:flex}.sample-row i{background:#5ce1e6;width:2px;height:62px;position:relative}.sample-row i:before{content:"";background:#5ce1e6;border-radius:50%;width:7px;height:7px;position:absolute;top:-3px;left:-2px}.sample-axis{top:49%}.replicas{justify-content:center;gap:38px;margin-top:18px;display:flex}.replicas span{color:#ffd166;font-family:Georgia,serif;font-size:46px;transform:rotate(180deg)}.sampling-board>small{color:#93a8b6;text-align:center;width:100%;font-size:9px;position:absolute;bottom:21px;left:0}.c-axis{background:#7e96a8;position:absolute}.c-x{height:1px;top:50%;left:28px;right:28px}.c-y{width:1px;top:25px;bottom:25px;left:50%}.roc-ring{border:28px solid #5c7cfa33;border-radius:50%;width:150px;height:150px;position:absolute;top:45px;left:calc(50% - 75px)}.pole,.zero{z-index:2;font-family:monospace;font-size:25px;font-weight:800;position:absolute}.pole{color:#ff7a7a}.zero{color:#5ce1e6}.p1{top:35%;left:36%}.p2{top:61%;left:36%}.z1{top:35%;right:34%}.z2{top:61%;right:34%}.complex-board small{color:#93a8b6;text-align:center;width:100%;font-size:9px;position:absolute;bottom:20px;left:0}.stems{justify-content:center;align-items:flex-end;gap:28px;width:100%;display:flex;position:absolute;bottom:35%;left:0}.stems i{background:#5ce1e6;width:2px;display:block;position:relative}.stems b{background:#5ce1e6;border-radius:50%;width:9px;height:9px;position:absolute;top:-4px;left:-3px}.sequence-board>span{color:#93a8b6;text-align:center;width:100%;font-family:monospace;font-size:9px;position:absolute;bottom:58px;left:0}.sequence-board>small{color:#ffd166;text-align:center;width:100%;font-size:9px;position:absolute;bottom:24px;left:0}.state-input,.state-output{color:#ffd166;font-family:Georgia,serif;font-style:italic;font-weight:700}.state-board>i{color:#7e96a8;font-style:normal}.state-core{background:var(--accent);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:165px;height:115px;display:flex}.state-core b{font-family:Georgia,serif;font-size:15px}.state-core span{letter-spacing:.15em;margin-top:10px;font-size:9px}.section{border-bottom:1px solid var(--line);padding:65px clamp(32px,6vw,82px)}.section-label{color:var(--muted);letter-spacing:.15em;align-items:center;gap:10px;font-size:9px;font-weight:800;display:flex}.section-label span{background:var(--navy);color:#fff;letter-spacing:0;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.section>h2{letter-spacing:-.04em;margin:18px 0 34px;font-size:clamp(25px,3vw,38px)}.goals{background:#eef1ec}.goal-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.goal-grid>div{background:var(--card);border:1px solid #d4dad5;border-radius:10px;min-height:108px;padding:20px}.goal-grid b{color:var(--coral);font-family:monospace;font-size:10px}.goal-grid p{margin:14px 0 0;font-size:12px;font-weight:700;line-height:1.6}.knowledge-list{gap:17px;display:grid}.knowledge{border:1px solid var(--line);border-radius:12px;grid-template-columns:45px 1fr;gap:19px;padding:27px;transition:all .2s;display:grid}.knowledge:hover{border-color:#b9c2bb;transform:translateY(-2px);box-shadow:0 13px 32px #102a430f}.knowledge .index{color:#bdc6bf;padding-top:4px;font-family:monospace;font-size:12px;font-weight:800}.knowledge h3{margin:0 0 11px;font-size:18px}.knowledge>div>p{color:#59666f;margin:0;font-size:13px;line-height:1.9}.formula{background:var(--navy);color:#fff;border-radius:7px;align-items:center;gap:18px;margin-top:17px;padding:14px 17px;display:flex;overflow-x:auto}.formula span{color:#5ce1e6;letter-spacing:.1em;flex:none;font-size:9px;font-weight:800}.formula b{white-space:nowrap;font-family:Georgia,PingFang SC,serif;font-size:14px}.pitfall{border-left:3px solid var(--coral);background:#fff0ee;align-items:flex-start;gap:12px;margin-top:13px;padding:12px 15px;display:flex}.pitfall b{color:#b53c46;flex:none;font-size:10px}.pitfall p{color:#754f52;margin:0;font-size:11px;line-height:1.6}.example-section{background:#edf0ec}.example-card{background:var(--card);border:1px solid #d2d8d2;border-radius:14px;padding:clamp(25px,4vw,42px);box-shadow:0 17px 45px #102a4312}.example-tag{background:var(--coral);color:#fff;letter-spacing:.12em;border-radius:5px;padding:5px 9px;font-size:9px;font-weight:800;display:inline-block}.example-card>h3{margin:17px 0 28px;font-size:19px;line-height:1.6}.solution-line{color:var(--muted);letter-spacing:.12em;align-items:center;gap:12px;font-size:9px;display:flex}.solution-line i{background:#dde2dd;flex:1;height:1px}.example-card ol{gap:15px;margin:23px 0;padding:0;list-style:none;display:grid}.example-card li{align-items:flex-start;gap:14px;display:flex}.example-card li span{background:#e9eeea;border-radius:50%;flex:0 0 26px;justify-content:center;align-items:center;height:26px;font-family:monospace;font-size:10px;font-weight:800;display:flex}.example-card li p{color:#56636c;margin:1px 0 0;font-size:13px;line-height:1.8}.answer{background:#e7f4f2;border:1px solid #c5dfda;border-radius:8px;grid-template-columns:44px 1fr;gap:14px;padding:17px;display:grid}.answer b{color:#087f7f;font-size:11px}.answer p{margin:0;font-size:12px;font-weight:700;line-height:1.7}.quiz-section{background:var(--navy);color:#fff}.section-label.light{color:#9bb0c0}.section-label.light span{color:var(--navy);background:#5ce1e6}.quiz-card{background:#173b5c;border:1px solid #28506f;border-radius:14px;padding:clamp(25px,4vw,42px)}.quiz-meta{justify-content:space-between;align-items:center;display:flex}.quiz-meta span{color:#ff9f9f;letter-spacing:.12em;font-size:9px;font-weight:800}.quiz-meta small{color:#92a8b7}.quiz-card>h3{margin:20px 0 24px;font-size:18px;line-height:1.6}.options{gap:10px;display:grid}.options button{color:#eaf2f6;cursor:pointer;text-align:left;background:#1e4666;border:1px solid #345b78;border-radius:8px;align-items:center;gap:13px;padding:13px;display:flex}.options button:hover,.options button.selected{border-color:#5ce1e6}.options button.correct{background:#10514e;border-color:#5ce1c6}.options button.wrong{background:#642c3a;border-color:#ff7a89}.options button span{background:#315a76;border-radius:5px;flex:0 0 27px;justify-content:center;align-items:center;height:27px;font-family:monospace;display:flex}.submit{background:var(--coral);color:#fff;cursor:pointer;border:0;border-radius:7px;margin-top:20px;padding:12px 22px;font-size:11px;font-weight:800}.submit:disabled{cursor:not-allowed;opacity:.45}.feedback{background:#5b2936;border-left:3px solid #ff7a89;margin-top:20px;padding:17px}.feedback.right{background:#10514e;border-color:#5ce1c6}.feedback b{font-size:12px}.feedback p{color:#d7e2e7;margin:8px 0 0;font-size:11px;line-height:1.7}.feedback button{color:#5ce1e6;cursor:pointer;background:0 0;border:0;margin-top:10px;padding:0;font-size:10px}.lesson-footer{justify-content:space-between;align-items:center;padding:38px clamp(32px,6vw,82px) 70px;display:flex}.lesson-footer p{color:var(--muted);margin:0;font-size:10px}.lesson-footer>button{background:var(--navy);color:#fff;cursor:pointer;border:0;border-radius:8px;padding:13px 18px;font-weight:800}.lesson-footer>button span{color:#5ce1e6;margin-left:8px}.right-rail{border-left:1px solid var(--line);padding:24px 18px}.rail-card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;padding:18px}.rail-label{color:var(--muted);letter-spacing:.12em;margin-bottom:18px;font-size:9px;font-weight:800;display:block}.ring{background:conic-gradient(var(--coral) var(--angle), #dfe5e0 0deg);border-radius:50%;justify-content:center;align-items:center;width:116px;height:116px;margin:auto;display:flex;position:relative}.ring:before{background:var(--card);content:"";border-radius:50%;position:absolute;inset:10px}.ring>div{text-align:center;position:relative}.ring b,.ring span{display:block}.ring b{font-family:monospace;font-size:23px}.ring span{color:var(--muted);margin-top:3px;font-size:9px}.rail-card>p{color:var(--muted);text-align:center;margin:17px 0 0;font-size:10px}.route{padding-bottom:10px}.route button{cursor:pointer;text-align:left;background:0 0;border:0;border-top:1px solid #e6ebe7;grid-template-columns:24px 1fr;align-items:center;gap:10px;width:100%;padding:12px 0;display:grid}.route button>span{border:1px solid #cbd3cc;border-radius:50%;justify-content:center;align-items:center;height:23px;font-family:monospace;font-size:9px;display:flex}.route button.active>span{background:var(--coral);border-color:var(--coral);color:#fff}.route button b,.route button small{display:block}.route button b{font-size:10px;line-height:1.4}.route button small{color:var(--muted);margin-top:3px;font-size:8px}.rail-quote{background:var(--navy);color:#fff;border-radius:10px;padding:18px}.rail-quote span{color:#5ce1e6;font-size:9px;font-weight:800}.rail-quote p{margin:12px 0 0;font-family:Georgia,PingFang SC,serif;font-size:12px;line-height:1.8}@media (width<=1180px){.topbar{grid-template-columns:250px minmax(250px,1fr) 180px}.study-layout{grid-template-columns:260px minmax(0,1fr)}.right-rail{display:none}}@media (width<=860px){.topbar{grid-template-columns:38px 1fr 1fr;gap:14px;padding:0 16px}.menu-button{display:block}.top-progress{display:none}.study-layout{display:block}.sidebar{z-index:40;width:284px;transition:left .25s;position:fixed;top:76px;bottom:0;left:-295px;overflow-y:auto;box-shadow:12px 0 32px #102a432b}.sidebar.open{left:0}.hero{grid-template-columns:1fr}.visual-board{max-width:560px}}@media (width<=620px){.brand b{font-size:14px}.brand small{display:none}.search input{font-size:11px}.hero,.section{padding-left:20px;padding-right:20px}.hero{min-height:0;padding-top:40px;padding-bottom:44px}.hero h1{font-size:35px}.visual-board{box-shadow:12px 14px 0 color-mix(in srgb, var(--accent) 18%, #e8ece7);height:225px}.goal-grid{grid-template-columns:1fr}.knowledge{grid-template-columns:1fr;gap:7px;padding:21px}.formula,.pitfall{flex-direction:column;align-items:flex-start;gap:8px}.answer{grid-template-columns:1fr}.lesson-footer{flex-direction:column;align-items:flex-start;gap:20px;padding-left:20px;padding-right:20px}.lesson-footer button{width:100%}.spectrum-bars{gap:13px}.state-core{width:130px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}