:root{--paper:#f5f4ef;--surface:#fff;--ink:#26332f;--muted:#66716b;--border:#dcded5;--accent:#28644d;--soft:#eaf0e6;--shadow:0 12px 35px #26332f07;--chart:#fff;color-scheme:light;scroll-behavior:smooth}
:root[data-theme=dark]{--paper:#161d1b;--surface:#202a25;--ink:#e5ebe4;--muted:#a9b6ab;--border:#38463d;--accent:#a5cfaf;--soft:#2b3a30;--shadow:0 12px 35px #0002;--chart:#25312a;color-scheme:dark}
*{box-sizing:border-box}body{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);font-size:14px}button,a,select,input{-webkit-tap-highlight-color:transparent}a{color:var(--accent)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.workspace-scroll:focus-visible{outline:3px solid #d4984d;outline-offset:4px}button{cursor:pointer}p{color:var(--muted)}
.portal-bar{height:84px;max-width:1440px;margin:auto;padding:0 48px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--border)}.portal-brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:650;letter-spacing:.03em}.portal-brand span{font-size:15px}.portal-brand small{display:block;font-size:9px;font-weight:500;letter-spacing:.14em;color:var(--muted);margin-top:5px}.portal-bar nav{display:flex;margin-left:auto;gap:26px}.portal-bar nav a{font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}.portal-bar nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:7px}#theme-toggle{border:1px solid var(--border);border-radius:50%;height:34px;width:34px;background:var(--surface);color:var(--ink);font-size:21px;flex:none}
.teaching-hero{background:transparent;box-shadow:none;border:0;max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr 340px;align-items:center;gap:60px;padding:56px 48px 40px;overflow:visible}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-size:11px;font-weight:700}.teaching-hero h1{font-family:inherit;color:var(--ink);font-size:clamp(30px,3.2vw,47px);font-weight:400;text-align:left;line-height:1.35;margin:18px 0 16px;letter-spacing:-.04em}.teaching-hero h1 b{font-weight:650;color:var(--ink)}.teaching-hero p{font-size:14px;line-height:1.9;margin:0}.hero-tags{display:flex;gap:18px;margin-top:23px;color:var(--muted);font-size:11px}.hero-tags span:before{content:"";display:inline-block;background:var(--accent);width:4px;height:4px;border-radius:50%;margin-right:7px;vertical-align:middle}.hero-note{background:var(--soft);padding:25px 28px 25px;border-radius:5px;border-left:3px solid #7ba084}.hero-note h2{font-family:inherit;font-size:21px;font-weight:600;color:var(--ink);line-height:1.5;margin:12px 0 8px}.note-kicker{font-size:11px;color:var(--accent);letter-spacing:.06em}.hero-note p{font-size:13px}.hero-note a{display:inline-block;font-size:12px;margin-top:18px;text-decoration:none}
.lesson-toolbar{max-width:1344px;margin:0 auto 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:17px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}.presets,.lesson-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.presets>span{font-size:12px;color:var(--muted);margin-right:10px}.presets button,.lesson-actions button{border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted);padding:8px 11px;font-size:12px}.presets button:hover,.presets button[aria-pressed=true]{background:var(--accent);color:var(--paper)}.lesson-actions button{border-color:var(--border);color:var(--ink);background:var(--surface)}.lesson-actions button:hover{border-color:var(--accent)}.experiment-context{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1344px;margin:0 auto 24px}.experiment-context p{font-size:12px;margin:0}.experiment-context span{font-size:11px;color:var(--muted);white-space:nowrap}
#top-controls{background:var(--surface);box-shadow:none;border:1px solid var(--border);border-radius:7px;max-width:1344px;margin:auto;padding:21px 25px}#top-controls .container{width:auto;margin:0;display:flex;gap:20px;align-items:center;justify-content:space-between}#top-controls .timeline-controls{width:auto;flex:none;margin-right:6px;gap:10px}#top-controls .control{min-width:90px}#top-controls .control .label,#top-controls .control label{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:7px;display:block}#top-controls .control .value{color:var(--ink);font-family:ui-monospace,Consolas,monospace;font-size:21px;letter-spacing:-.04em}#top-controls .control select{background:var(--surface);color:var(--ink);font-size:14px;border:0;border-bottom:1px solid var(--border);height:30px;padding-right:18px;min-width:85px;appearance:auto}#top-controls .control .select::after{display:none}.material-icons{font-family:Arial,sans-serif!important;font-style:normal!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important}#play-pause-button{background:var(--accent);color:var(--paper);width:44px;height:44px;min-width:44px;box-shadow:none}#play-pause-button .material-icons{transform:none;position:static;font-size:22px;line-height:44px;color:var(--paper)}#reset-button,#next-step-button{color:var(--muted)}#reset-button i,#next-step-button i{position:static;transform:none;font-size:23px;line-height:32px}.mdl-button .material-icons{transform:none;position:static;line-height:inherit}
.workspace-scroll{max-width:1440px;padding:0 48px;margin:24px auto 0;overflow-x:auto;overflow-y:hidden}.workspace-scroll:focus{outline-offset:-4px}#main-part.l--page{min-width:1100px;width:100%;margin:0;padding:25px 0 35px;gap:0;min-height:640px}#main-part .data.column{width:180px;padding-right:30px;flex:none}#main-part .features.column{width:120px;margin-left:30px;flex:none}#main-part .hidden-layers.column{flex:1;width:auto;margin:0 45px 0 20px}#main-part .output.column{width:300px;flex:none;margin-left:30px}#main-part h4{font-family:inherit;font-size:12px;font-weight:650;color:var(--ink);letter-spacing:.02em;border-bottom:1px solid var(--border);padding-bottom:14px;min-height:38px;margin-bottom:17px}#main-part .hidden-layers h4{gap:6px}#main-part p,#main-part .column .label,#main-part .column label{color:var(--muted);font-weight:400;font-size:11px;line-height:1.65}#main-part .column.features>p{white-space:nowrap;font-size:10px;margin-top:0}#network{margin-top:95px}#main-part .mdl-button{background:var(--soft);border-radius:50%;width:25px;height:25px;min-width:25px;line-height:25px;color:var(--ink)}#main-part .mdl-button .material-icons{font-size:18px;color:var(--ink);line-height:25px}.data.column .dataset-list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:19px 0 25px;overflow:visible}.data.column .dataset{float:none;width:57px;height:72px;margin:0!important}.data.column .data-thumbnail{width:57px;height:54px;opacity:.5;border-radius:4px;background:var(--surface);border:1px solid var(--border)}.data.column .data-thumbnail.selected{opacity:1;border:2px solid var(--accent);background:var(--surface);box-shadow:0 3px 12px #24332412}.data.column .dataset:after{content:attr(title);font-size:10px;display:block;color:var(--muted);text-align:center;margin-top:3px;white-space:nowrap}.data.column label{display:block}.data.column p.slider{margin:9px 0 22px!important}.mdl-slider__container{margin:0!important;width:100%}.mdl-slider{margin:0!important;width:100%!important;accent-color:var(--accent)}.mdl-slider.is-upgraded{color:#5b8566}.mdl-slider__background-flex{margin:0!important;width:100%!important}.mdl-slider__background-lower{background:#62866a}.mdl-slider::-webkit-slider-thumb{background:#62866a}#main-part .basic-button{font-family:inherit;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:11px;height:36px;margin-top:8px;border-radius:4px}.features.column .plus-minus-neurons{width:82px;left:0;color:var(--muted);font-size:10px}.features.column .callout{width:100px;opacity:.9}#main-part .features.column .callout .label{font-size:10px;color:var(--muted)}.features.column .callout svg path{stroke:var(--muted)}#main-part .node text{fill:var(--muted);font-size:11px}#main-part .node.inactive text{fill:var(--muted)}#main-part .node rect{stroke:var(--border);fill:var(--surface)}#main-part .node.active rect{stroke:var(--accent)}#hovercard{background:var(--surface);color:var(--ink);border:1px solid var(--border);padding:10px;width:175px;box-shadow:var(--shadow);font-size:11px}#hovercard input{color:var(--ink);background:var(--paper);border:1px solid var(--border)}.output .metrics{display:flex;flex-wrap:wrap;gap:14px}.output .output-stats{float:none;width:calc(50% - 7px)}#main-part .output-stats span{font-size:11px;color:var(--muted)}#main-part .output-stats .value{font-family:ui-monospace,Consolas,monospace;font-size:25px;color:var(--ink);margin-top:7px}#linechart{width:100%;height:55px;margin:1px 0 9px;background:var(--soft);border-radius:3px}#heatmap{margin-top:10px}#heatmap .tick text{fill:var(--muted)}#heatmap .tick:nth-child(7) text{fill:var(--ink)}#colormap text{fill:var(--muted)}#colormap{flex:none}.mdl-checkbox__label{font-family:inherit}#main-part .mdl-checkbox__box-outline{border-color:var(--muted)}.mdl-checkbox.is-checked .mdl-checkbox__box-outline{border-color:#5b8566}.mdl-checkbox.is-checked .mdl-checkbox__tick-outline{background:#5b8566}#colormap{width:150px}#main-part .output>div:last-child{margin-top:20px!important}#main-part .output>div:last-child>div:last-child{flex-wrap:wrap;gap:14px}
.learning-guide{max-width:1344px;margin:10px auto 0;padding:44px 0 35px;border-top:1px solid var(--border)}.section-heading h2{font-family:inherit;font-size:29px;font-weight:550;line-height:1.5;color:var(--ink);margin:13px 0 10px;letter-spacing:-.025em}.section-heading p{font-size:13px;line-height:1.9}.lesson-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:28px}.lesson-card{width:auto;margin:0;padding:24px 21px;background:var(--surface);border:1px solid var(--border);border-radius:5px;box-shadow:var(--shadow)}.lesson-index{font-size:10px;letter-spacing:.07em;color:var(--accent)}.lesson-card h3{font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);line-height:1.5;margin:13px 0}.lesson-card p{font-size:12px;line-height:1.9;margin:0}.lesson-card button{border:0;background:none;padding:0;color:var(--accent);font-size:11px;margin-top:21px;text-align:left}.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin:40px 0}.explain-grid h3{font-size:17px;color:var(--ink);font-weight:600;font-family:inherit}.explain-grid p{font-size:12px;line-height:2}.classroom-controls{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:19px 0}.classroom-controls summary{cursor:pointer;font-size:13px;color:var(--ink)}.classroom-controls p,.classroom-controls a{font-size:12px;line-height:1.9}.hide-controls{display:flex;flex-wrap:wrap;gap:12px 24px;margin:18px 0}.hide-controls label{width:auto;min-width:120px;font-size:12px}.hide-controls .mdl-checkbox__label{font-size:12px;color:var(--muted)}.save-note{font-size:11px;line-height:1.9;margin:24px 0 0}.teaching-footer{background:var(--soft);padding:28px max(24px,calc((100% - 1344px)/2));border-top:1px solid var(--border);color:var(--muted)}.teaching-footer>span{font-size:12px;color:var(--ink);font-weight:600}.teaching-footer p{font-size:10px;line-height:1.9;margin:9px 0 0;max-width:1050px}.teaching-footer a{color:var(--accent)}#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:12px 20px;border-radius:5px;font-size:12px;box-shadow:var(--shadow);z-index:2000;display:none;max-width:90vw}.more{display:none}
@media(max-width:1439px){.lesson-toolbar,.experiment-context,.learning-guide{margin-left:48px;margin-right:48px}#top-controls{margin-left:48px;margin-right:48px}.lesson-actions{flex:none}.lesson-toolbar{flex-wrap:wrap}#top-controls .container{gap:14px}#top-controls .control{min-width:80px}#top-controls .control select{min-width:75px}}
@media(max-width:1100px){.portal-bar{padding:0 28px;gap:20px}.portal-bar nav{gap:15px}.portal-brand span{font-size:13px}.teaching-hero{padding:40px 28px 30px;grid-template-columns:1fr 300px;gap:35px}.workspace-scroll{padding:0 28px}.lesson-toolbar,.experiment-context,.learning-guide{margin-left:28px;margin-right:28px}#top-controls{margin-left:28px;margin-right:28px}#top-controls .container{flex-wrap:wrap;justify-content:flex-start;gap:18px 23px}.lesson-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.portal-bar{height:auto;min-height:74px;padding:16px 20px;flex-wrap:wrap;gap:14px}.portal-brand{flex:1}.portal-brand span{font-size:12px}.portal-brand small{font-size:8px}.portal-brand img{width:32px;height:32px}.portal-bar nav{order:3;width:100%;margin:0;justify-content:space-between;gap:10px;padding-top:8px}.portal-bar nav a{font-size:11px}.teaching-hero{padding:32px 22px 26px;display:block}.teaching-hero h1{font-size:33px;margin:16px 0}.teaching-hero p{font-size:12px}.hero-tags{gap:8px;flex-wrap:wrap;font-size:10px}.hero-note{margin-top:27px;padding:19px 21px}.hero-note h2{font-size:19px}.hero-note a{margin-top:11px}.lesson-toolbar,.experiment-context,.learning-guide{margin-left:22px;margin-right:22px}.lesson-toolbar{padding:13px 0}.presets{gap:6px}.presets>span{width:100%;margin-bottom:4px}.presets button{font-size:11px;padding:7px 9px;border-color:var(--border)}.lesson-actions{width:100%;margin-top:3px}.lesson-actions button{font-size:11px}.experiment-context{display:block;margin-bottom:18px}.experiment-context p{font-size:11px}.experiment-context span{display:block;margin-top:6px}#top-controls{margin-left:22px;margin-right:22px;padding:16px}#top-controls .container{gap:17px 16px}#top-controls .control{flex:1 1 85px}.workspace-scroll{padding:0 22px;position:relative;margin-top:17px}.workspace-scroll:before{content:"← 横向滑动查看完整网络与输出 →";font-size:10px;color:var(--muted);position:sticky;left:0;display:block}#main-part.l--page{padding-top:19px;min-height:630px}.learning-guide{padding-top:32px}.section-heading h2{font-size:24px}.lesson-grid{grid-template-columns:1fr}.lesson-card{padding:22px}.explain-grid{grid-template-columns:1fr;gap:20px;margin:30px 0}.teaching-footer{padding:24px 22px}.eyebrow{font-size:10px}}
.output .metrics{height:auto;min-height:121px;position:relative}.output .output-stats .value{display:block!important}#linechart{position:relative;top:auto;right:auto;flex:1 0 100%;height:55px}#main-part .output .output-stats{position:relative;z-index:1}#play-pause-button.mdl-button{background:var(--accent)!important}.teaching-footer{height:auto;min-height:106px}#main-part .hidden-layers.column h4:before{content:"03 · ";font-size:11px;white-space:nowrap;margin-right:5px}#main-part .hidden-layers.column h4{font-size:11px;white-space:nowrap}.workspace-scroll{padding-bottom:8px}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}
.portal-header{padding:0;margin:0;box-shadow:none;height:auto;width:100%;max-width:none;overflow:visible}.portal-header .portal-brand{letter-spacing:normal}.portal-header .portal-brand span{font-size:inherit}.portal-header .portal-brand small{font-weight:400}.portal-header .theme-button{font-size:inherit}.teaching-breadcrumb{max-width:1440px;margin:auto;padding:22px 48px 0;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.teaching-breadcrumb a:last-child{margin-left:auto}.teaching-breadcrumb a{color:var(--accent);text-decoration:none}@media(max-width:1100px){.teaching-breadcrumb{padding-inline:28px}}@media(max-width:700px){.teaching-breadcrumb{padding-inline:22px;font-size:10px}}
.lesson-card p{color:var(--muted)}#main-part .basic-button:hover,#main-part .basic-button:focus,#main-part .basic-button:active{background:var(--soft);color:var(--ink)}#training-status{max-width:1344px;margin:0 auto 18px;padding:12px 16px;border:1px solid #ba783e;border-radius:4px;background:var(--surface);color:var(--ink);font-size:13px;line-height:1.8}#training-status[hidden]{display:none}@media(max-width:1439px){#training-status{margin-left:48px;margin-right:48px}}@media(max-width:1100px){#training-status{margin-left:28px;margin-right:28px}}@media(max-width:700px){#training-status{margin-left:22px;margin-right:22px}}