:root{--navy:#111713;--navy2:#19221b;--ink:#e9ecdf;--muted:#a4aea2;--paper:#111713;--card:#18211a;--line:#344036;--blue:#bccca9;--cyan:#bccca9;--coral:#d1a08a;--yellow:#d9cea7;--green:#a7c4a5;--purple:#c3b29e;--shadow:none}
html{color-scheme:dark}body{background:#111713;color:var(--ink)}.shell{display:block;min-height:100vh}.sidebar{position:sticky;top:0;z-index:20;height:72px;overflow:visible;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,66px);background:rgba(17,23,19,.97);border-bottom:1px solid #303b32}.brand{padding:0;gap:10px;border:0;background:transparent;color:#eef0e6;text-align:left}.brand-mark{width:32px;height:32px;border:1px solid #718272;border-radius:5px;background:#222f25;color:#d8e5cb;font-size:12px}.brand-name{font-size:17px;font-weight:500;letter-spacing:-.06em}.brand-name small{display:block;color:#8e9e8c;font-size:9px;letter-spacing:.17em}.mobile-menu-button{display:flex;align-items:center;gap:12px;border:1px solid #4a594a;border-radius:6px;background:#1c261e;color:#e8ebdf;padding:9px 12px;font:500 11px 'DM Mono';letter-spacing:.02em}.mobile-menu-button:hover,.mobile-menu-button[aria-expanded="true"]{background:#2a392c;border-color:#aabda0}.mobile-menu-button>span:first-child{font-size:15px}.menu-chevron{color:#aabda0}.side-caption,.side-progress{display:none}.sidebar nav{display:none;position:absolute;right:clamp(20px,4vw,66px);top:62px;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow:auto;padding:9px;background:#18221b;border:1px solid #4a594a;border-radius:7px;box-shadow:0 22px 50px rgba(0,0,0,.35)}.sidebar.menu-open nav{display:block}.nav-link{display:flex;width:100%;padding:10px 11px;border-radius:4px;color:#b5c0b1;font-size:12px;font-weight:500}.nav-link:hover,.nav-link.active{background:#29392b;color:#f5f6ef}.nav-link.active .nav-num{background:#afc19d;color:#172218}.nav-num{background:#223026;color:#9dad9a;border:1px solid #3c4d3f;border-radius:3px}.nav-link.overview-link{margin-bottom:7px;border-bottom:1px solid #3a473b;border-radius:0 0 4px 4px;padding-bottom:14px}.nav-link .done{color:#c5d9b5}.topbar{max-width:1320px;margin:auto;height:58px;padding:0 clamp(24px,4vw,66px);background:transparent;border:0}.breadcrumb{color:#879687;font:500 10px 'DM Mono';letter-spacing:.03em}.breadcrumb strong{color:#c6d3bf;font-weight:500}.top-right{color:#879687;font-size:9px}.top-dot{background:#adc5a4}.content{max-width:1320px;padding:28px clamp(24px,4vw,66px) 85px}.eyebrow,.box-label{color:#b5c8a9;font-size:10px;letter-spacing:.16em}.hero{position:relative;grid-template-columns:1.05fr .95fr;min-height:480px;padding:clamp(35px,5vw,70px);border:1px solid #3b493d;border-radius:8px;background:#19241c;box-shadow:none}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 78% 40%,rgba(96,122,89,.14),transparent 48%);pointer-events:none}.hero>*{position:relative}.hero h1{max-width:630px;font-weight:500;letter-spacing:-.065em;color:#f1f2e9}.hero .lead{color:#b4c0b0;font-size:16px;line-height:1.7}.hero-viz{border:1px solid #4b5a4b;border-radius:6px;background:#151d19;box-shadow:none}.hero-viz-label{background:#202d23;color:#d4decf;border:1px solid #4a5b49;border-radius:3px}.hero-viz-foot{background:#c7d6b8;color:#18221b;border-radius:3px}.button{border-radius:5px;font-weight:600;box-shadow:none}.button:hover{transform:none;filter:brightness(1.1)}.button.primary,.button.accent{background:#c6d5b6;color:#172019}.button.secondary{background:#212d23;color:#e5eadf;border:1px solid #526252}.button.ghost{background:#253127;color:#d6ded0;border:1px solid #3b4b3e}.section-heading{margin:53px 0 20px}.section-heading h2{font-weight:500;color:#eef0e6}.section-heading p{color:#9daa9e}.path-grid{gap:12px}.path-card{min-height:178px;padding:22px;background:#18221b;border:1px solid #39483b;border-radius:6px;box-shadow:none}.path-card:hover{transform:translateY(-2px);background:#1d2a20;border-color:#8da18a;box-shadow:none}.path-card .number{color:#a9bda0}.path-card .icon{color:#c5d3b9;font-size:23px}.path-card h3{color:#ecf0e7;font-size:17px;font-weight:500}.path-card p,.path-card .card-foot{color:#a0afa0}.arrow{color:#bdccb1}.note-band{background:#1d2920;border:1px solid #3a4c3d;border-radius:5px;color:#b5c2b2}.note-icon{background:#2d4231;color:#c8d8bd;border-radius:4px}.lesson-head{position:relative;display:flex;min-height:218px;padding:35px 42px;align-items:center;border:1px solid #3d4b3e;border-radius:7px;background:#1b261e;margin-bottom:15px;overflow:hidden}.lesson-head:after{content:'';position:absolute;right:-55px;top:-115px;width:360px;height:360px;border:1px solid rgba(164,189,155,.17);border-radius:50%;box-shadow:0 0 0 56px rgba(164,189,155,.04),0 0 0 112px rgba(164,189,155,.035);pointer-events:none}.lesson-head h1{font-size:clamp(36px,4vw,56px);font-weight:500;color:#f1f3e9;max-width:780px;position:relative;z-index:1}.lesson-head .lead{color:#b7c3b6;font-size:15px;line-height:1.65;max-width:770px;position:relative;z-index:1}.lesson-count{position:relative;z-index:1;background:#26372a;border:1px solid #4a624d;border-radius:4px;color:#bfd2b5}.lesson-strip{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.concept-box,.question-box{padding:19px 23px;background:#18221b;border:1px solid #37473a;border-radius:6px}.concept-box{border-left:2px solid #b8cba9}.question-box{background:#1a251d;border-color:#37473a}.concept-box p,.question-box p{color:#b2beb0;font-size:12px;line-height:1.6}.experiment,.nn-grid,.simple-lab{gap:12px}.panel,.info-card,.topic-card{background:#18211b;border:1px solid #39483b;border-radius:6px;box-shadow:none}.panel-head{border-bottom:1px solid #344337}.panel-title{font-weight:500;color:#e9eee2}.panel-tag{background:#27372a;color:#b9cfb0;border:1px solid #3d5140;border-radius:3px;font-size:9px}.chart-wrap canvas,.nn-chart canvas{background:#151d19;border:1px solid #2c3a2e;border-radius:3px}.metric{background:#1e2a21;border:1px solid #354638;border-radius:4px}.metric span{color:#97a894}.metric strong{color:#edf0e5;font-weight:500}.metric small{color:#9aaa99}.controls h3{font-weight:500;color:#edf0e5}.control label{color:#d4dfd0;font-weight:500}.control output{color:#c7d6b8}input[type=range]{accent-color:#b8cba9}.control small{color:#95a694}select{background:#202b22;color:#e4ebdd;border:1px solid #425344;border-radius:4px}.insight{background:#24382b;border:1px solid #3b5541;border-radius:4px;color:#b9cab7}.insight strong{color:#d2e3c8}.source-row{color:#8b9b8c}.source-row code{color:#b2c4ad}.lesson-bottom{border-top:1px solid #344236}.lesson-bottom .muted{color:#9daf9e}.info-card .step{color:#abc29f}.info-card h3,.topic-card h3{color:#e9eee3;font-weight:500}.info-card p,.topic-card p{color:#a7b6a8}.topic-card .source{color:#b8cba9}.confusion .head{background:#233026;color:#b3c0b0}.confusion .cell{background:#27362a}.confusion .cell.pos{background:#294535}.confusion .cell.err{background:#49352e}.bayes-cell{background:#26342b}.bayes-cell.tp{background:#b8c7a5}.bayes-cell.fp{background:#d5a08b}.bayes-cell.fn{background:#617d69}.bayes-cell.tn{background:#26342b}.footer{max-width:1320px;color:#6f806f}.chart-hint{background:#1d2820;color:#bdcab9;border-radius:3px}
@media(max-width:1050px){.hero{grid-template-columns:1fr 1fr}.hero h1{font-size:48px}.experiment{grid-template-columns:1fr}.nn-grid{grid-template-columns:1fr}.nn-grid .wide{grid-column:auto}}
@media(max-width:700px){.sidebar{height:62px;padding:0 16px}.sidebar nav{top:56px;right:12px}.brand-name small{display:none}.brand-name{font-size:16px}.mobile-menu-button{padding:8px 10px}.topbar{height:35px;padding:0 17px}.top-right{display:none}.content{padding:13px 14px 55px}.hero{padding:34px 25px;min-height:0;grid-template-columns:1fr}.hero h1{font-size:42px}.hero .lead{font-size:14px}.hero-viz{display:none}.path-grid{grid-template-columns:1fr 1fr;gap:8px}.path-card{min-height:154px;padding:14px}.path-card h3{font-size:15px;margin-top:27px}.path-card p{font-size:11px}.path-card .icon{right:13px;top:13px;font-size:18px}.section-heading{margin-top:38px}.lesson-head{padding:24px 21px;min-height:0;display:block}.lesson-head h1{font-size:35px;margin:8px 0 9px}.lesson-head .lead{font-size:13px;line-height:1.5}.lesson-count{display:inline-block;margin-top:15px}.lesson-strip{grid-template-columns:1fr 1fr;gap:8px}.concept-box,.question-box{padding:13px 14px}.concept-box p,.question-box p{font-size:11px;line-height:1.5}.box-label{font-size:9px}.chart-wrap{padding:11px;min-height:300px}.chart-wrap canvas{height:285px}.chart-wrap.compact{min-height:205px}.chart-wrap.compact canvas{height:195px}.nn-controls{grid-template-columns:repeat(2,1fr)}.nn-metrics,.nn-explain{grid-template-columns:repeat(2,1fr)}.metric-row{grid-template-columns:repeat(3,1fr)}.metric{padding:9px}.metric strong{font-size:16px}.topic-grid,.simple-lab{grid-template-columns:1fr}.source-row{display:block}.source-row span{display:block;margin-bottom:9px}.lesson-bottom{display:flex}.lesson-bottom .muted{max-width:130px}.footer{padding:0 17px 20px}}
@media(max-width:420px){.path-grid,.lesson-strip{grid-template-columns:1fr}.question-box{display:none}.lesson-head h1{font-size:31px}.nn-metrics{grid-template-columns:repeat(2,1fr)}.metric-row{grid-template-columns:repeat(3,1fr)}.metric strong{font-size:14px}}
.header-actions{display:flex;align-items:center;gap:10px}.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #425144;border-radius:5px;background:#172119}.lang-switch button{border:0;border-radius:3px;background:transparent;color:#879a86;padding:6px 8px;font:500 10px 'DM Mono'}.lang-switch button.active{background:#334535;color:#e8eee1}.lang-switch button:hover{color:#f0f2e9}
@media(max-width:700px){.header-actions{gap:6px}.lang-switch button{padding:5px 6px}}
.nn-decision-panel .nn-chart canvas{height:350px}.decision-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 16px 16px;padding:10px 12px;border:1px solid #3a4b3d;border-radius:4px;background:#1d2920}.decision-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:#b2bfb1;font:500 10px 'DM Mono'}.decision-legend span{display:inline-flex;align-items:center;gap:5px}.swatch{display:inline-block;width:10px;height:10px;border-radius:2px}.swatch.class-a{background:#d5a08b}.swatch.class-b{background:#b8c7a5}.probe-readout{color:#e9eee1;font:500 11px 'DM Mono'}.nn-network-hint{margin:0 16px 16px;padding:11px;font-size:10px}.nn-network-hint .note-icon{flex-basis:25px;height:25px;font-size:11px}.nn-timeline{margin:0 20px;padding:14px 0 4px;border-top:1px solid #354437}.nn-timeline label{font-size:11px;font-weight:600;color:#d6e0d0}.nn-timeline output{font:500 11px 'DM Mono';color:#c7d6b8}.nn-timeline small{display:block;margin-top:6px;color:#8ea18d;font-size:10px;line-height:1.45}.nn-controls{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:20px}.nn-controls .action-row,.nn-controls .insight{grid-column:1/-1}.nn-compare{min-width:0}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}.compare-grid>div{min-width:0}.compare-grid canvas{display:block;width:100%;height:180px;background:#151d19;border:1px solid #3b4d3d;border-radius:3px}.compare-caption,.compare-accuracy{color:#becfba;font:500 10px 'DM Mono';padding:0 0 8px}.compare-accuracy{padding:8px 0 0;color:#e6eddf}
@media(max-width:700px){.nn-decision-panel .nn-chart canvas{height:300px}.nn-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.decision-readout{margin:0 11px 11px}.nn-timeline{margin:0 14px}.compare-grid{gap:8px;padding:10px}.compare-grid canvas{height:150px}.compare-caption,.compare-accuracy{font-size:9px}}
/* Compact experiment workspace: controls live with their visualization. */
.sidebar{height:56px;padding:0 24px}.topbar{height:34px;max-width:1800px;padding:0 24px}.content{max-width:1800px;padding:8px 24px 24px}.lesson-head{min-height:0;padding:0 0 14px;border:0;border-radius:0;background:none;margin:0;gap:28px;align-items:center}.lesson-head:after{display:none}.lesson-head h1{font-size:26px;line-height:1.2;margin:5px 0 0}.lesson-head>p{max-width:610px;font-size:12px;color:#aab9ad;margin:0 0 0 auto;line-height:1.5}.lesson-head .eyebrow{font-size:9px}.lesson-help{margin:12px 0;border-top:1px solid var(--line);padding:12px 0;color:#acb9ae;font-size:12px;line-height:1.6}.lesson-help summary{cursor:pointer;color:#d6e2d3}.lesson-help p{max-width:900px;margin:10px 0}.lesson-help small{overflow-wrap:anywhere;color:#809583}.lesson-bottom{padding-top:10px;margin-top:0}.lesson-bottom .button{padding:8px 12px;font-size:11px}.footer{padding:0 24px 14px;font-size:9px}.experiment{display:block}.panel-head{padding:12px 14px;min-height:42px}.panel-title{font-size:13px}.plot-controls{display:flex;flex-wrap:wrap;gap:12px;padding:12px 14px;background:#1d2821;border-bottom:1px solid #344337;align-items:center}.plot-controls .control{margin:0;min-width:115px;flex:1}.plot-controls .control-top{margin-bottom:5px}.plot-controls label,.plot-controls output{font-size:11px}.plot-controls select{padding:7px;font-size:11px;height:32px}.plot-controls input[type=range]{display:block;width:100%;height:22px;margin:0}.plot-controls .action-row{margin:0;display:flex;gap:6px;flex-wrap:wrap}.button{font-size:11px;padding:9px 11px;min-height:32px}.chart-wrap,.chart-wrap.compact{padding:10px 14px;min-height:0}.chart-wrap canvas,.chart-wrap.compact canvas{height:clamp(230px,40vh,390px)}.metric-row{padding:0 14px 12px;gap:8px}.metric{padding:8px 12px}.metric span{font-size:9px}.metric strong{font-size:20px}.experiment>.panel>.insight{margin:0 14px 12px;padding:9px 12px;font-size:11px;line-height:1.5}.confusion{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0 14px 10px}.confusion .cell{font-size:11px;padding:8px;text-align:left;border:1px solid #405246;border-radius:4px}.confusion strong{display:inline-block;margin:0 0 0 12px;font-size:20px}.nn-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.8fr);align-items:start;gap:10px}.nn-grid>.panel{min-width:0}.nn-grid .wide{grid-column:1/-1}.nn-chart{padding:10px}.nn-chart canvas,.nn-decision-panel .nn-chart canvas{height:clamp(190px,29vh,310px)}.nn-chart.learning canvas{height:clamp(140px,23vh,220px)}.nn-metrics{grid-template-columns:repeat(2,1fr);padding:0 10px 10px;gap:6px}.decision-readout{margin:0 10px 10px;padding:7px;gap:5px}.decision-legend{font-size:9px;gap:8px}.probe-readout{font-size:10px}.nn-network-hint{padding:8px;margin:0 10px 10px;font-size:11px;line-height:1.5}.nn-network-hint .note-icon{display:none}.nn-timeline{padding:9px 0;margin:0 10px}.nn-timeline input{width:100%}.nn-training-panel .plot-controls .action-row{flex-basis:100%}.nn-compare[hidden]{display:none}.nn-compare canvas{height:150px}.rl-status{padding:4px 14px 12px;color:#efdba1;font:12px system-ui;min-height:30px}.bayes-grid{max-height:300px;overflow:auto}.lesson-head+.experiment .chart-wrap canvas{max-height:390px}
@media(min-width:1100px){.experiment{max-width:1400px;margin:auto}.nn-grid .plot-controls{min-height:126px}.nn-training-panel .plot-controls{min-height:126px}}
@media(max-width:1000px){.nn-grid{grid-template-columns:1fr 1fr}.nn-training-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.nn-training-panel .panel-head{grid-column:1/-1}.nn-training-panel .plot-controls{grid-row:2/4;display:flex;align-content:start}.nn-training-panel .nn-chart.learning canvas{height:140px}.nn-timeline{grid-column:2}.lesson-head>p{max-width:45%}.content{padding:8px 14px 20px}}
@media(max-width:600px){.sidebar{padding:0 12px}.topbar{padding:0 14px}.lesson-head{display:block}.lesson-head>p{max-width:none;margin:9px 0 0;font-size:11px}.lesson-head h1{font-size:23px}.nn-grid{grid-template-columns:1fr}.nn-training-panel{display:block;grid-column:auto}.nn-grid .nn-network-panel{order:1}.nn-grid .nn-training-panel{order:2}.nn-grid .nn-compare{order:3}.plot-controls{gap:8px}.plot-controls .control{min-width:120px}.confusion{grid-template-columns:repeat(2,1fr)}.chart-wrap canvas,.chart-wrap.compact canvas{height:250px}.nn-chart canvas,.nn-decision-panel .nn-chart canvas{height:230px}.metric strong{font-size:17px}.lesson-bottom .muted{font-size:10px}.panel-tag{font-size:8px}.lesson-head+.experiment .chart-wrap canvas{max-height:none}}
@media(min-width:1001px){.nn-grid .plot-controls{min-height:100px;padding:10px}.nn-grid .plot-controls .control{min-width:95px}.nn-grid .nn-chart canvas{height:clamp(170px,25vh,280px)}.nn-grid .nn-chart.learning canvas{height:clamp(145px,23vh,230px)}.nn-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.nn-metrics .metric{padding:7px}.nn-metrics .metric span{font-size:8px;min-height:20px;display:block}.nn-metrics .metric strong{font-size:18px}.nn-grid .panel-head{height:50px}.nn-grid .panel-title{font-size:12px}.nn-training-panel .plot-controls{height:126px}.nn-grid .decision-readout{font-size:9px}.nn-grid .button{padding:7px 9px}.nn-grid .nn-timeline small{font-size:9px}.lesson-head{padding-bottom:12px}}
@media(min-width:1001px){.chart-wrap canvas,.chart-wrap.compact canvas{height:clamp(220px,34vh,360px)}.plot-controls .action-row{flex-shrink:0}}
/* Teaching views: explicit relationships, aligned panels and readable explanations. */
.lesson-help{border:1px solid #3e5346;border-radius:8px;background:#19251f;padding:0;overflow:hidden;margin-top:16px}.lesson-help summary{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font-weight:600;font-size:14px;list-style:none}.lesson-help summary:hover{background:#223329}.help-summary{font-size:11px;color:#9db2a4;font-weight:400}.lesson-help[open] summary{border-bottom:1px solid #3e5346}.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:20px 0}.help-grid article{padding:0 22px;border-right:1px solid #344b3b}.help-grid article:last-child{border:0}.help-grid h3{font-size:17px;margin:10px 0}.help-grid p{font:13px/1.75 system-ui;color:#c0cec3;margin:0}.help-source{font:10px/1.6 monospace;padding:10px 20px;background:#142019;color:#90a595;overflow-wrap:anywhere}.split-guide{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;padding:10px 14px;margin-bottom:12px;background:#182720;border:1px solid #365345;border-radius:5px;font:11px/1.4 system-ui}.split-guide b{display:block}.split-guide span{color:#b3c5b8}.split-guide small{grid-column:1/-1;font-size:9px;color:#8ba093}.nn-grid{align-items:stretch}.nn-grid>.panel:not(.nn-compare){display:flex;flex-direction:column}.nn-grid .plot-controls{height:160px;min-height:160px;align-content:center}.nn-grid .nn-chart{flex:none}.nn-grid .nn-chart canvas{height:190px}.nn-grid .nn-metrics,.nn-grid .nn-network-hint,.nn-grid .nn-timeline{margin-top:auto}button:disabled{opacity:.35;cursor:not-allowed}.nn-network-panel .plot-controls>.control{flex-basis:100%}.nn-network-panel .plot-controls>.control .control-top{display:inline-block;margin-right:10px}.nn-network-panel .plot-controls>.control select{width:100px;height:25px;padding:2px 5px}.plot-explanation{padding:12px 16px;color:#b9cbbc;font:12px/1.6 system-ui;background:#1b2b22;border:1px solid #354d3d;border-radius:5px;margin:8px 0}.plot-explanation b{color:#e5ebda}.plot-explanation p{margin:8px 0 0}.distance-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.distance-list span{font:11px monospace;padding:6px 8px;border:1px solid #425648;background:#14221a;border-radius:3px}.chart-wrap:has(#knn-details),.chart-wrap:has(#cluster-details){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:16px}.chart-wrap:has(#knn-details) canvas,.chart-wrap:has(#cluster-details) canvas{height:330px}.chart-wrap:has(#knn-details) .plot-explanation,.chart-wrap:has(#cluster-details) .plot-explanation{margin:0;max-height:330px;overflow:auto}.confusion{display:block;padding:0 14px 10px}.matrix{border-collapse:separate;border-spacing:5px;width:100%;font:12px system-ui;text-align:center}.matrix caption{text-align:left;color:#b1c9b4;padding:6px;font-weight:600}.matrix th{font-size:11px;color:#adc2b1;padding:7px}.matrix td{border:1px solid #45644d;border-radius:5px;padding:7px}.matrix .pos{background:#254334}.matrix .err{background:#4b332a;border-color:#775540}.matrix b{font-size:23px;margin-left:10px}.matrix small{display:block;font-size:10px;color:#d0d9c8;margin-top:3px}.formula{font:11px/1.5 system-ui;color:#adbeaf;margin:7px 0 0}.encoding-view{padding:24px}.word-buttons{display:flex;flex-wrap:wrap;gap:8px}.encoding-arrow{font:24px/1.5 monospace;color:#dbe9c1;margin:24px 0;overflow-wrap:anywhere}.vector-cells{display:flex;gap:8px;flex-wrap:wrap}.vector-cell{display:flex;flex-direction:column;gap:10px;text-align:center;padding:10px 14px;border:1px solid #40594a;border-radius:5px;min-width:70px}.vector-cell.hot{background:#38593c;border-color:#bdd5a4}.vector-cell b{font:32px monospace}.vector-cell span{font-size:12px}.vector-cell small{color:#93ac96}.encoding-view p{color:#adc2b1;font:13px/1.6 system-ui}.plot-controls input[type=text],#word-input{background:#122018;color:#e4ecdb;border:1px solid #50684f;border-radius:5px;padding:10px;font-size:15px;width:100%}.cnn-stage{display:grid;grid-template-columns:1fr .8fr 1fr;gap:35px;padding:20px;align-items:center;max-width:1050px;margin:auto}.cnn-stage article{min-width:0}.cnn-stage h3{font:13px system-ui;color:#bcd3be;margin:0 0 12px}.cnn-stage p{font:11px system-ui;color:#99b09d}.pixel-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;max-width:280px}.pixel{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--shade);font:12px monospace;color:#e0e7d7;border:1px solid transparent;min-width:0}.pixel.active{border-color:#f4d985;box-shadow:inset 0 0 0 1px #f4d985;color:#fff0af}.pixel.empty{color:#546d5b}.cnn-stage article:nth-child(2) .pixel-grid{max-width:170px}.convolution-sum{font:13px/1.8 monospace;padding:12px 0;overflow-wrap:anywhere}.panel>#gradient-readout,.panel>#cnn-math{margin:0 14px 14px}.metric-row:has(#m-outcomes){grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.nn-grid .plot-controls{height:auto;min-height:160px}.nn-training-panel{display:flex!important;grid-column:1/-1}.nn-training-panel .plot-controls{min-height:80px}.nn-training-panel .nn-timeline{width:calc(100% - 20px)}.help-grid{grid-template-columns:1fr;gap:20px}.help-grid article{border:0}.chart-wrap:has(#knn-details),.chart-wrap:has(#cluster-details){grid-template-columns:1fr}.chart-wrap:has(#knn-details) .plot-explanation,.chart-wrap:has(#cluster-details) .plot-explanation{max-height:none}.metric-row:has(#m-outcomes){grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.help-summary{display:none}.split-guide{grid-template-columns:1fr}.cnn-stage{gap:12px;padding:12px;grid-template-columns:1fr}.cnn-stage article{max-width:280px;margin:auto;width:100%}.cnn-stage article:nth-child(2) .pixel-grid{max-width:160px}.matrix th{font-size:9px;padding:3px}.matrix td{padding:5px}.matrix b{font-size:20px}.nn-grid .plot-controls{height:auto}.encoding-view{padding:14px}.encoding-arrow{font-size:17px}.nn-grid .nn-chart canvas{height:240px}.layer-row button{width:26px;height:26px}}
@media(min-width:1001px){.nn-grid .plot-controls{height:132px;min-height:132px;padding:7px 10px;gap:5px}.layer-editor-head{margin-bottom:3px}.layer-list{gap:3px}.layer-row{padding:2px 4px}.layer-editor small{margin-top:2px;font-size:8px}.nn-grid .nn-chart canvas{height:170px}.nn-grid .nn-chart.learning canvas{height:170px}.nn-grid .panel-head{height:42px;min-height:42px}.nn-grid .nn-chart{padding:8px}.nn-grid .decision-readout{padding:5px;margin-bottom:6px}.split-guide{padding:7px 12px;gap:3px 16px;margin-bottom:10px;font-size:10px}.split-guide small{font-size:8px}body:has(.nn-grid) .topbar{height:24px}.nn-grid .nn-timeline{padding:7px 0}.nn-grid .nn-metrics{padding-bottom:8px}}
@media(min-width:1001px){.panel:has(>#confusion){display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.panel:has(>#confusion)>.panel-head,.panel:has(>#confusion)>.plot-controls,.panel:has(>#confusion)>.metric-row,.panel:has(>#confusion)>.insight{grid-column:1/-1}.panel:has(>#confusion)>.confusion{align-self:center;padding:10px 14px 10px 0}.matrix th{max-width:140px}.cnn-stage{padding:14px 20px;gap:32px;max-width:950px}.cnn-stage .pixel-grid{max-width:210px}.cnn-stage article:nth-child(2) .pixel-grid{max-width:140px}.cnn-stage .pixel{font-size:12px}}
/* The kernel is applied visibly at each pixel, then summed in a calculation lens. */
.cnn-stage{grid-template-columns:1fr 1.18fr 1fr;gap:32px;max-width:1180px;padding:18px}.cnn-stage h3{font-size:12px;line-height:1.5}.cnn-lens{position:relative;border:1px solid #736442;background:#262c20;padding:12px;border-radius:8px}.cnn-lens:before,.cnn-lens:after{position:absolute;top:50%;color:#ecd18c;font-size:24px}.cnn-lens:before{content:'→';left:-27px}.cnn-lens:after{content:'→';right:-27px}.lens-key{font:10px system-ui;color:#b5c6b7;margin-bottom:10px}.lens-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.lens-cell{padding:8px 3px;text-align:center;background:#18271e;border:1px solid #4c5943;border-radius:4px;font:12px monospace}.lens-cell strong{display:block;margin-top:7px;font-size:15px;color:#d9e8d7}.lens-cell.positive{background:#2c4937}.lens-cell.negative{background:#54392c}.input-number{color:#8ce0d4}.kernel-number{color:#ffce84}.times{color:#7e9484}.lens-sum{font:11px/1.7 monospace;color:#d5ddc8;padding:10px 0 0;overflow-wrap:anywhere}.lens-sum b{display:block;color:#ffdf8d;font-size:21px}.weighted-pixel{flex-direction:column;gap:2px}.weighted-pixel>span{color:#8ce0d4}.weighted-pixel small{font:9px monospace;color:#ffce84;background:#142119c9;width:100%;text-align:center}.cnn-stage .pixel-grid{max-width:240px}.cnn-stage .cnn-output .pixel.active{background:#68572d!important;color:#ffedaf;border-width:2px}.cnn-stage p{line-height:1.5}
@media(max-width:600px){.cnn-stage{grid-template-columns:1fr;gap:28px}.cnn-stage article{max-width:310px}.cnn-stage .pixel-grid{max-width:280px}.cnn-lens:before{content:'↓';left:50%;top:-27px}.cnn-lens:after{content:'↓';left:50%;right:auto;top:auto;bottom:-27px}.weighted-pixel small{font-size:10px}}
.rl-workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(350px,1fr);gap:12px;padding:12px 14px}.rl-workspace .chart-wrap{padding:0}.rl-workspace .chart-wrap canvas{height:365px!important;max-height:none!important}.lake-legend{font:11px/1.5 system-ui;color:#adc3b3;margin-top:7px}.qtable-panel{border:1px solid #3b5544;border-radius:5px;background:#14221a;padding:8px}.q-table{width:100%;border-collapse:collapse;font:10px monospace;text-align:right}.q-table caption{text-align:left;font:600 11px system-ui;color:#c6dcc7;padding:3px 0 7px}.q-table th,.q-table td{padding:3px 6px;border-bottom:1px solid #2b3f32}.q-table thead th{color:#dbe8ce;font-size:14px}.q-table th:first-child{text-align:left;color:#a4bcab}.q-table th small{color:#edcb88}.q-table td{color:#b8cdbd}.q-table .current-state{background:#294a36;outline:1px solid #73a181}.q-table .terminal-state td{color:#6a7d70}.q-table td.q-changed{background:#6d5926;color:#ffecaa;outline:1px solid #d4b75b}.q-update{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 14px 10px;padding:10px 12px;border:1px solid #4e5938;background:#232b1e;font:12px/1.5 monospace;color:#e1d49b;border-radius:5px}.q-update small{flex-basis:100%;font:10px/1.5 system-ui;color:#aabdac}.rl-workspace .chart-wrap{min-width:0}
@media(max-width:900px){.rl-workspace{grid-template-columns:1fr}.q-table{font-size:12px}.q-table th,.q-table td{padding:5px}.rl-workspace .chart-wrap canvas{height:300px!important}}
/* Visible introductory cards, followed by explicit parameter groups. */
.lesson-help{margin:0 0 16px}.help-heading{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid #354d3d;font-size:13px;font-weight:600}.help-grid{padding:14px 0}.help-grid h3{font-size:14px;margin:7px 0}.help-grid p{font-size:12px;line-height:1.6}.help-grid article{padding:0 16px}.help-source{padding:6px 16px;font-size:9px}.plot-controls .control output{background:#293b2c;border:1px solid #455b45;border-radius:4px;padding:2px 6px;min-width:28px;text-align:center;font:11px monospace}.plot-controls input[type=range]{appearance:none;-webkit-appearance:none;height:5px;margin:12px 0;border-radius:8px;background:linear-gradient(to right,#c2d3ad 0%,#c2d3ad var(--range-pct,50%),#435247 var(--range-pct,50%),#435247 100%);cursor:pointer}.plot-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;background:#d6e6bf;border:2px solid #a2ba92;border-radius:50%;box-shadow:0 0 0 3px #a8c28c12}.plot-controls input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#d6e6bf;border:2px solid #a2ba92;border-radius:50%}.plot-controls input[type=range]:focus-visible{outline:2px solid #b6d2b5;outline-offset:5px}.plot-controls.grouped-settings{display:grid;grid-template-columns:1.2fr 1.2fr .7fr;gap:12px;padding:14px;align-items:stretch}.setting-group{border:1px solid #3f5745;border-radius:6px;margin:0;padding:10px 12px;min-width:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.setting-group legend{font:10px monospace;letter-spacing:.1em;color:#b9cdad;padding:0 6px}.setting-group:last-of-type{grid-template-columns:1fr}.grouped-settings .control{min-width:0}.grouped-settings>.action-row{grid-column:1/-1;padding-top:8px;border-top:1px solid #354a3b}.setting-group .control label{font-size:10px}.setting-group select{max-width:100%;font-size:10px}.fashion-status{padding:10px 16px;color:#c3d4be;font:12px system-ui}.fashion-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:0 16px 16px}.latent-panel h3{font:12px system-ui;color:#b4c8af;margin:5px 0}.latent-panel canvas{width:100%;height:360px;display:block;background:#101b17;border:1px solid #35503c;border-radius:5px;cursor:crosshair;touch-action:none}.latent-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px}.latent-legend span{font:9px system-ui;color:#aec2b1;display:flex;align-items:center;gap:4px}.latent-legend i{width:7px;height:7px;border-radius:50%}.fashion-output{padding:18px;background:#14231a;border:1px solid #36503d;border-radius:6px}.fashion-output canvas{width:120px;height:120px;background:#050806;image-rendering:pixelated;border:1px solid #4b644a;border-radius:4px}.image-pair{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 20px}.fashion-output figure{margin:0;min-width:0;text-align:center}.fashion-output figcaption{font:10px/1.4 system-ui;color:#9eb59d;margin-top:7px;max-width:150px}.latent-code{padding:12px;border:1px solid #526943;background:#273824;border-radius:5px;color:#d1e0bc;line-height:1.6}.latent-code b{font:16px/1.6 monospace;display:block}.latent-code small{font:9px system-ui;color:#9fb596}.encode-arrow{color:#cfdfa9;font-size:24px}.fashion-output p{font:12px/1.7 system-ui;color:#acc2ac}.generated-fashion canvas{width:190px;height:190px}.generated-fashion figcaption{max-width:none}.decode-flow{text-align:center;color:#a8bf9c;font:12px system-ui;padding:15px}.panel>#fashion-note{margin:0 16px 16px}.fashion-output a,.plot-explanation a{color:#c4d9ac}
@media(max-width:1000px){.plot-controls.grouped-settings{grid-template-columns:1fr 1fr}.setting-group:last-of-type{grid-column:1/-1;grid-template-columns:1fr}.help-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.help-grid article{border-right:1px solid #354b3b}.help-grid p{font-size:11px}.fashion-workspace{gap:12px}.image-pair{flex-wrap:wrap}}
@media(max-width:650px){.plot-controls.grouped-settings,.fashion-workspace{grid-template-columns:1fr}.setting-group{grid-template-columns:repeat(2,minmax(0,1fr))}.setting-group .control:last-child{grid-column:1/-1}.help-grid{grid-template-columns:1fr;gap:16px}.help-grid article{border:0}.help-grid p{font-size:12px}.latent-panel canvas{height:310px}.fashion-output{padding:12px}.image-pair{gap:8px}.fashion-output canvas{width:105px;height:105px}.generated-fashion canvas{width:190px;height:190px}}

/* Direct manipulation of the architecture, aligned with the activation maps. */
.content,.topbar,.footer{max-width:none;width:100%}
.experiment,.simple-lab,.nn-grid{max-width:none;width:100%;margin-left:0;margin-right:0}
.nn-grid .nn-network-panel .plot-controls{height:52px;min-height:52px;flex:none}
.nn-network-stage{position:relative;width:100%}
.nn-grid .nn-network-stage canvas{display:block;height:320px;width:100%}
.nn-network-editor{position:absolute;inset:0;pointer-events:none}
.network-target,.network-layer-title{position:absolute;transform:translate(-50%,-50%)}
.network-target{pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;font-family:system-ui;cursor:pointer}
.network-layer-title{font:11px system-ui;white-space:nowrap;color:#d2dfc8}
.network-layer-title small{font:9px monospace;color:#91a68f}
.network-remove-layer{width:22px;height:20px;border:0;background:transparent;color:#9eafa0;font-size:17px;border-radius:3px}
.network-remove-neuron{border:1px solid transparent;background:transparent;border-radius:1px}
.network-remove-neuron span{position:absolute;right:-4px;top:-6px;width:13px;height:13px;display:grid;place-items:center;border-radius:50%;background:#493028;color:#ffd2b8;font-size:12px;opacity:0;transition:opacity .12s}
.network-remove-neuron:hover,.network-remove-neuron:focus-visible{border-color:#ffc0a1;background:#613e3840}
.network-remove-neuron:hover span,.network-remove-neuron:focus-visible span{opacity:1}
.network-remove-layer:hover{color:#ffc0a1;background:#493028}
.network-add-neuron{width:28px;height:28px;border:1px dashed #8da783;border-radius:2px;background:#1b2b1e;color:#d9e7c3;font-size:20px}
.network-insert-layer{width:24px;height:34px;border:1px dashed #526f59;border-radius:12px;background:#17261ce8;color:#b4d3aa;font-size:17px}
.network-add-neuron:hover,.network-insert-layer:hover{background:#38513a;border-color:#d1e8b9;color:#fff}
.network-target:focus-visible{outline:2px solid #e7d58e;outline-offset:3px}
.network-target:disabled{pointer-events:none;opacity:.3}
.network-add-neuron:disabled{font:9px monospace}
@media(hover:none){.network-remove-neuron:not(:disabled) span{opacity:1}}
/* Give the experiments room; every outer panel uses the same page width. */
.chart-wrap canvas,.chart-wrap.compact canvas{height:clamp(340px,52vh,580px);max-height:none}
.lesson-head+.experiment .chart-wrap canvas{max-height:none}
.chart-wrap:has(#knn-details) canvas,.chart-wrap:has(#cluster-details) canvas{height:clamp(360px,52vh,560px)}
.chart-wrap:has(#knn-details) .plot-explanation,.chart-wrap:has(#cluster-details) .plot-explanation{max-height:none}
.nn-grid .plot-controls,.nn-grid .nn-network-panel .plot-controls{height:100px;min-height:100px;align-content:center}
.nn-grid .nn-chart canvas,.nn-grid .nn-chart.learning canvas,.nn-grid .nn-network-stage canvas{height:clamp(320px,39vh,480px)}
.orbit-canvas{touch-action:none;cursor:grab}.orbit-canvas:active{cursor:grabbing}.orbit-canvas:focus-visible{outline:2px solid #d4c381;outline-offset:2px}
.orbit-help{font:11px/1.6 system-ui;color:#acc2ac;padding:8px 14px}
.chart-wrap:has(#pca-details) canvas{height:480px}
.bayes-workspace{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(260px,1fr);gap:18px;padding:18px}
.bayes-tree{width:100%;background:#132019;border:1px solid #344d3c;border-radius:6px}
.bayes-tree svg{display:block;width:100%;font-family:system-ui}
.tree-leaf{cursor:pointer}.tree-leaf:hover rect,.tree-leaf:focus-visible rect{stroke:#fff0af;stroke-width:3}
.tree-caption{font:11px/1.6 system-ui;color:#9cb7a2;margin:10px 0 0}
.bayes-explanation{background:#1d2f23;border:1px solid #3d5842;border-radius:6px;padding:22px}
.bayes-explanation h3{font:600 20px/1.3 system-ui;margin:14px 0;color:#e2ead9}
.bayes-explanation p{font:13px/1.75 system-ui;color:#bcd0bd}
.bayes-question{border-top:1px solid #3d5842;padding-top:15px}
.bayes-path{padding:13px;background:#102219;display:grid;gap:9px;border:1px solid #63794a;border-radius:5px;font:12px system-ui}.bayes-path code{color:#f0d58d;font-size:15px}
.bayes-result{margin:0 18px 18px;padding:20px;border:1px solid #6b7750;background:#283a26;border-radius:6px;display:grid;grid-template-columns:1fr 2fr;gap:24px;color:#d9e6cc}
.bayes-result strong{display:block;font:500 44px system-ui;color:#e9e7ad;margin:4px 0}.bayes-result p{font:13px/1.6 system-ui}.bayes-result small{font:10px/1.5 system-ui;color:#b0c4a6}.bayes-result span{font:12px system-ui}
.cnn-stage{grid-template-columns:1fr .7fr 1.25fr 1fr;max-width:none;gap:32px}
.cnn-stage .cnn-kernel .pixel-grid{max-width:180px}.cnn-kernel .pixel{font:600 20px monospace}.cnn-kernel .pixel span{color:#ffdf99}
.feature-lab{margin-top:20px}.feature-maps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:20px}.feature-maps figure{margin:0;background:#142019;padding:16px;border:1px solid #36503d;border-radius:6px}.feature-maps h3{font:13px system-ui;margin:0 0 12px;color:#cfdfc6}.feature-maps canvas{width:100%;max-width:260px;aspect-ratio:1;image-rendering:pixelated;display:block;margin:auto}.feature-maps figcaption{font:11px/1.6 system-ui;color:#abc2ad;margin-top:13px}.feature-lab .plot-explanation{margin:0 20px 20px}
.latent-panel canvas{height:clamp(380px,55vh,620px)}
@media(max-width:1000px){.bayes-workspace{grid-template-columns:1fr}.cnn-stage{grid-template-columns:1fr 1fr}.cnn-lens:before,.cnn-lens:after{display:none}.feature-maps{grid-template-columns:1fr 1fr}.nn-grid .plot-controls,.nn-grid .nn-network-panel .plot-controls{height:auto;min-height:100px}}
@media(max-width:600px){.cnn-stage{grid-template-columns:1fr}.cnn-stage article{max-width:340px}.feature-maps{gap:10px;padding:10px}.feature-maps figure{padding:8px}.feature-maps h3{font-size:11px}.bayes-result{grid-template-columns:1fr}.bayes-workspace{padding:10px}.bayes-explanation{padding:16px}.chart-wrap:has(#pca-details) canvas{height:560px}.nn-grid .nn-chart canvas,.nn-grid .nn-chart.learning canvas,.nn-grid .nn-network-stage canvas{height:340px}.latent-panel canvas{height:380px}}
.nn-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.matrix-business{padding:12px 8px;font:11px/1.6 system-ui;color:#bdceba}.matrix-business b{font-size:12px;color:#e0e6ce}.matrix-business p{margin:8px 0}.matrix-business ul{padding-left:18px}.matrix-business li{margin:6px 0}
.panel:has(>#gradient-readout) .chart-wrap canvas{height:480px}
.gradient-camera{display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid #35483a;background:#16251c;flex-wrap:wrap}.gradient-camera .control{margin:0;flex:1;min-width:130px;max-width:260px}.gradient-camera .control-top{font-size:11px;margin-bottom:3px}.gradient-camera input{width:100%}.gradient-camera>span{font:11px system-ui;color:#9db49d}.gradient-legend{display:flex;gap:18px;flex-wrap:wrap;padding:2px 18px 14px;font:12px/1.6 system-ui}.gradient-lab .chart-wrap canvas{height:540px!important;cursor:grab}.gradient-lab .chart-wrap canvas:active{cursor:grabbing}
@media(max-width:600px){.gradient-lab .chart-wrap canvas{height:600px!important}.gradient-camera{gap:10px}.gradient-camera .control{min-width:90px}}
.nn-network-editor{z-index:2}.network-remove-layer{width:54px;height:38px;display:flex;flex-direction:column;gap:2px;background:#1c2e22;border:1px solid #405a45;border-radius:5px;font:10px system-ui}.network-remove-layer b{font-size:17px;line-height:17px}.network-remove-layer:hover,.network-remove-layer:focus-visible{border-color:#ffb48b;background:#4a3028;color:#ffe1b5}.knn-purpose{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #3c5842}.knn-purpose h3{font:600 19px/1.3 system-ui;color:#dfebd8;margin:8px 0}.knn-purpose>b{display:block;background:#2e4027;padding:10px;border:1px solid #697a4e;border-radius:4px;color:#f2e3a5}

/* Keep convolution readable as one input → calculation → output workflow. */
.cnn-stage{grid-template-columns:minmax(0,1fr) minmax(260px,1.1fr) minmax(0,1fr);align-items:start;gap:26px;padding:22px;width:100%;max-width:none}
.cnn-stage article{margin:0;max-width:none;width:100%}
.cnn-stage .cnn-input,.cnn-stage .cnn-output{padding:14px;border:1px solid #344c3e;border-radius:7px;background:#14221b}
.cnn-stage .pixel-grid{width:100%;max-width:340px;margin:16px auto}
.cnn-stage .pixel{font-size:clamp(11px,1.2vw,18px)}
.cnn-stage .weighted-pixel small{font-size:clamp(9px,.85vw,12px)}
.cnn-calculation{display:flex;flex-direction:column;gap:12px;min-width:0}
.cnn-stage .cnn-kernel{display:grid;grid-template-columns:108px minmax(0,1fr);gap:0 14px;padding:12px;border:1px solid #4a5740;border-radius:7px;background:#1c2b20;align-items:center}
.cnn-stage .cnn-kernel h3{grid-column:1/-1;margin-bottom:8px}
.cnn-stage .cnn-kernel .pixel-grid{width:108px;max-width:108px;margin:0}
.cnn-stage .cnn-kernel .pixel{font-size:16px}
.cnn-stage .cnn-kernel p{margin:0;font-size:11px}
.cnn-stage .cnn-lens{padding:12px}
.cnn-stage .cnn-lens:before,.cnn-stage .cnn-lens:after{display:block;top:40%;font-size:22px}
.cnn-stage .cnn-lens:before{content:'→';left:-25px}
.cnn-stage .cnn-lens:after{content:'→';right:-25px;left:auto;bottom:auto}
.cnn-stage .lens-cell{padding:5px 2px;font-size:11px}
.cnn-stage .lens-cell strong{font-size:15px;margin-top:3px}
.cnn-stage .lens-key{margin-bottom:7px}
.cnn-stage .lens-sum{padding-top:7px;font-size:10px}
.cnn-stage .lens-sum b{font-size:22px}
.cnn-stage h3{font-weight:600;font-size:12px;margin-bottom:8px}
.cnn-stage p{margin:9px 0 0;font-size:11px}
@media(min-width:1500px){.cnn-stage{grid-template-columns:1fr minmax(330px,.85fr) 1fr;gap:36px}.cnn-stage .pixel-grid{max-width:390px}.cnn-stage .lens-cell{padding:9px 3px;font-size:13px}}
@media(max-width:740px){.cnn-stage{grid-template-columns:1fr;gap:16px;padding:12px}.cnn-stage .cnn-input,.cnn-stage .cnn-output{max-width:none}.cnn-stage .pixel-grid{max-width:280px}.cnn-stage .cnn-lens:before,.cnn-stage .cnn-lens:after{display:none}.cnn-stage .pixel{font-size:14px}.cnn-stage .weighted-pixel small{font-size:10px}.cnn-stage .lens-cell{padding:8px 3px;font-size:13px}}

.fashion-instructions{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 16px 10px}
.fashion-instructions>div{padding:12px 14px;border:1px solid #3d5746;border-radius:6px;background:#1b2b22}
.fashion-instructions b{display:block;font-size:13px;color:#d7e8c7;margin-bottom:6px}.fashion-instructions span{font:12px/1.5 system-ui;color:#b0c4b3}
.fashion-examples{display:flex;gap:9px;overflow-x:auto;padding:18px 16px 12px;scrollbar-color:#526b53 #14221a}
.fashion-example{flex:0 0 78px;padding:5px;border:1px solid #3b5140;border-radius:6px;background:#16251d;color:#bdd0bd;cursor:pointer;min-width:0}
.fashion-example canvas{width:60px;height:60px;image-rendering:pixelated;display:block;margin:auto;transition:transform .15s;border-radius:3px}
.fashion-example span{display:block;font:9px/1.4 system-ui;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fashion-example:hover canvas,.fashion-example:focus-visible canvas{transform:scale(1.25);outline:2px solid #d2e5b4}
.fashion-example.selected{border-color:#ffe49a;background:#34432a}
.latent-map-wrap{position:relative}.latent-example{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;padding:0;background:var(--class-color);border:2px solid #f3f5e8;border-radius:50%;cursor:pointer;z-index:2}
.latent-example.selected{border-color:#ffe49a;box-shadow:0 0 0 3px #ffe49a66}.latent-example:hover,.latent-example:focus-visible{z-index:5;outline:3px solid #ffe49a}
.latent-preview{display:none;position:absolute;left:var(--tip-x);top:var(--tip-y);width:108px;padding:7px;background:#14231c;border:1px solid #9aaf82;border-radius:6px;box-shadow:0 8px 24px #0008;pointer-events:none;color:#e2eacb;text-align:center}
.latent-example:hover .latent-preview,.latent-example:focus-visible .latent-preview{display:block}.latent-preview img{display:block;width:92px;height:92px;image-rendering:pixelated;background:#fff}.latent-preview b,.latent-preview small{display:block;font:10px/1.4 system-ui;margin-top:5px}.latent-preview small{color:#a8c0aa}
@media(max-width:650px){.fashion-instructions{grid-template-columns:1fr;gap:8px}.fashion-example{flex-basis:70px}}
/* Generator: one coordinate selection, one decoder output, one replayable journey. */
.generator-intro{padding:16px 20px;display:flex;gap:12px;align-items:baseline;border-bottom:1px solid #344b3c}.generator-intro b{font-size:14px;color:#dfebce}.generator-intro span{font:12px/1.6 system-ui;color:#acc2b0;max-width:670px}
.generator-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;padding:0 18px 18px}.generator-map,.generator-result{min-width:0;border:1px solid #3c5444;border-radius:7px;background:#13221b;padding:14px}.generator-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:#dfebd5}.generator-heading span{font:11px/1.4 system-ui;color:#9fb7a6}.generator-map>canvas{display:block;width:100%;height:clamp(320px,48vh,510px);touch-action:none;cursor:crosshair;margin-top:8px}.generator-lab p{font:12px/1.6 system-ui;color:#abc0af;margin:10px 0 0}.generator-result{display:flex;flex-direction:column;align-items:stretch}.generator-pipeline{display:flex;gap:10px;justify-content:center;align-items:center;margin:18px 0;color:#c0d4b6;font:12px monospace}.generator-pipeline b{padding:8px 12px;border:1px solid #577154;border-radius:5px;background:#263c2d}.generator-result>canvas{display:block;width:clamp(150px,19vw,250px);height:auto;aspect-ratio:1;image-rendering:pixelated;background:white;border-radius:5px;margin:auto;box-shadow:0 0 0 1px #54684a}.generator-axes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:15px 0 0}.generator-axes label{font:12px monospace;color:#c6d8be}.generator-axes output{float:right}.generator-axes input{display:block;width:100%;accent-color:#c4d7a8;margin-top:10px}.generator-result .action-row{margin-top:14px}.generator-result .button{flex:1;font-size:11px;padding:9px 8px}
.generator-journey{padding:16px 18px;border-top:1px solid #3a5141}.generator-film{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:14px 0}.generator-film button{padding:8px;min-width:0;background:#17291f;border:1px solid #3e5946;border-radius:6px;color:#b6c8b3}.generator-film button.selected{border-color:#ffe3a0;background:#35442b}.generator-film canvas{width:100%;max-width:90px;aspect-ratio:1;image-rendering:pixelated;display:block;margin:auto;border-radius:3px}.generator-film span{display:block;font:11px monospace;margin-top:6px}.generator-playback{display:grid;grid-template-columns:auto 1fr 150px;align-items:center;gap:20px}.generator-playback .control{min-width:0}.generator-playback input{width:100%;accent-color:#c5d4af}.generator-note{font:11px/1.6 system-ui;color:#91aa98;padding:12px 18px;background:#142019;border-top:1px solid #334a3b}.generator-lab .fashion-status{padding:10px 18px}
.confusion .matrix-business{text-align:left;margin:14px 4px 0;font:12px/1.6 system-ui;color:#aec2b1}.confusion .matrix-business h3{font:600 15px/1.4 system-ui;letter-spacing:0;color:#dbe8ce;margin:0 0 8px}.confusion .matrix-business p{margin:7px 0}.matrix-priorities{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.matrix-priorities article{padding:12px;border:1px solid #415d48;border-radius:6px;background:#192c21}.matrix-priorities article>span{font:9px/1.4 monospace;letter-spacing:.05em;color:#a5c5b1}.matrix-priorities h4{font:600 16px/1.4 system-ui;color:#dce9cd;letter-spacing:0;margin:5px 0}.matrix-priorities small{font:11px/1.5 system-ui;color:#c5d6af}.matrix-takeaway{padding-top:10px;border-top:1px solid #36503f}
@media(max-width:740px){.generator-intro{display:block}.generator-intro span{display:block;margin-top:8px}.generator-workspace{grid-template-columns:1fr;padding:0 12px 12px}.generator-map>canvas{height:360px}.generator-result>canvas{width:210px}.generator-film{gap:5px}.generator-film button{padding:4px}.generator-playback{grid-template-columns:auto 1fr;gap:12px}.generator-playback>.control:last-child{grid-column:1/-1}.generator-journey{padding:12px}.generator-pipeline{gap:6px;font-size:11px}}
@media(max-width:480px){.matrix-priorities{grid-template-columns:1fr}.generator-heading{align-items:start}.generator-heading span{max-width:115px}}
.bayes-scenario{padding:16px 20px;border-bottom:1px solid #3b5140}.bayes-scenario b{font:600 15px/1.5 system-ui;color:#dbe8c9}.bayes-scenario p{font:13px/1.6 system-ui;color:#adc3af;margin:6px 0 0;max-width:950px}.bayes-tree-title{padding:10px 20px 0;color:#c0d4b9;font:600 13px/1.5 system-ui}
.bayes-lab .bayes-result{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;margin:16px 18px 0;padding:18px;background:#1b3024;border:1px solid #526c43;border-radius:7px}.bayes-answer small{font:10px/1.5 monospace;letter-spacing:.06em;color:#b2c9a5}.bayes-answer h3{font:600 clamp(17px,2vw,24px)/1.4 system-ui;letter-spacing:0;margin:8px 0 14px;color:#ecf2dd}.alarm-bar{height:24px;display:flex;overflow:hidden;border-radius:4px;outline:1px solid #69816a}.alarm-bar span:first-child{background:#72cbb5}.alarm-bar span:last-child{background:#d18d6d}.alarm-key{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:9px;font:12px system-ui}.alarm-key span:first-child{color:#85ddc7}.alarm-key span:last-child{color:#efb08c}.bayes-lab .bayes-result p{font:12px/1.6 system-ui;color:#b8cbb5;margin:10px 0 0}.bayes-answer-number{padding:16px;background:#14271c;border:1px solid #435d3d;border-radius:6px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px}.bayes-answer-number span{font:12px/1.5 system-ui;color:#c0d1b5}.bayes-answer-number strong{font:600 36px/1.2 system-ui;color:#e3eaa7}.bayes-answer-number code{color:#bbcda7;font-size:13px}.bayes-aha{grid-column:1/-1;border-top:1px solid #40563e;padding-top:12px}.bayes-aha b{font-size:13px;color:#dae6cb}.bayes-aha small{display:block;font:10px system-ui;color:#8fa48b;margin-top:8px}
@media(max-width:600px){.bayes-lab .bayes-result{grid-template-columns:1fr;margin:12px;padding:12px}.bayes-answer-number{flex-direction:row;align-items:center;justify-content:space-between;padding:12px;gap:12px}.bayes-answer-number span{max-width:140px}.bayes-answer-number strong{font-size:26px}.bayes-answer-number code{display:none}}

.confusion .matrix-priorities{padding:0;text-align:left}