@charset "UTF-8";
:root{--ink:#20382e;--muted:#69776f;--green:#24563f;--accent:#df7c43;--paper:#f6f5ef;--line:#dedfd4;--pale:#eaf0df;--white:#fffefa;--mono:Consolas,"SFMono-Regular",monospace;--sans:"Segoe UI","Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.75;word-break:keep-all}a{color:inherit}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.45}p+p{margin-top:14px}input[type="range"]{width:100%;accent-color:var(--green);cursor:pointer;margin:10px 0;height:20px}input[type="number"]{width:78px;min-width:0;height:38px;text-align:right;border:1px solid #cbd1c6;background:var(--white);border-radius:5px;padding:5px 8px;font-family:var(--mono);font-size:15px;color:var(--ink)}button{border:0;background:none}code,output{font-family:var(--mono)}code{font-size:.92em}small,.small{font-size:12px;line-height:1.8}em{font-style:normal;color:var(--green)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:var(--ink);color:white;padding:10px 20px}.skip-link:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;padding:36px 22px 28px;background:#eeefe6;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;gap:13px;text-decoration:none;align-items:center;font-size:15px;line-height:1.5;letter-spacing:-.6px}.brand strong{font-size:22px;font-weight:750}.brand-mark{width:42px;height:42px;background:var(--green);display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:4px;place-content:center;border-radius:10px}.brand-mark i{background:#d6e4bc}.brand-mark i:nth-child(3){opacity:.4}.side-caption{font-size:11px;color:var(--muted);margin:30px 0 22px;letter-spacing:.5px}.search-label{font-size:11px;color:var(--muted)}.search-box{display:flex;align-items:center;border-bottom:1px solid #c5cbbf;margin:4px 0 28px;gap:8px}.search-box>span{font-size:25px}.search-box input{min-width:0;width:100%;border:0;background:none;padding:9px 0;font-size:13px;color:var(--ink)}.lesson-nav{display:flex;flex-direction:column;gap:9px}.lesson-nav a{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid transparent;padding:13px 10px;border-radius:7px;font-size:13px}.nav-index{font-family:var(--mono);font-size:12px;color:var(--muted);align-self:flex-start;padding-top:2px}.lesson-nav b{display:block;font-weight:650}.lesson-nav small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.nav-arrow{margin-left:auto;opacity:0}.lesson-nav a:hover{background:#e2e7d8}.lesson-nav a[aria-current="page"]{background:var(--white);border-color:#d9ddcf;box-shadow:0 2px 4px #223c2110}.lesson-nav a[aria-current="page"] .nav-index{color:var(--green)}.lesson-nav a[aria-current="page"] .nav-arrow{opacity:1}.search-empty{font-size:12px;color:var(--muted)}.side-bottom{margin-top:auto;padding:26px 9px 0;border-top:1px solid #d3d9cb}.tiny-label{display:block;font-size:10px;font-weight:650;letter-spacing:1px;color:var(--muted)}.side-bottom p{font-size:20px;font-weight:600;line-height:1.55;margin-top:12px;letter-spacing:-.8px}.mini-route{display:flex;gap:12px;font-size:12px;margin:20px 0 7px}.mini-route span{color:#a3ae9c}.side-bottom small{color:var(--muted);font-size:10px}.page-shell{margin-left:250px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;height:70px;padding:0 48px;border-bottom:1px solid var(--line);font-size:12px}.slash{color:#a8afa3;margin:0 16px}.edition{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.edition i,.live-dot{background:var(--green);width:6px;height:6px;border-radius:50%;display:inline-block}.edition i{box-shadow:0 0 0 4px #e3e9d8}main{max-width:1296px;margin:auto;padding:42px 48px 30px;outline:none}.lesson-heading{padding:0 0 28px}.eyebrow{display:flex;gap:15px;align-items:center;font-family:var(--mono);font-size:13px;color:var(--green);margin-bottom:17px}.eyebrow span{font-size:10px;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(31px,3vw,46px);letter-spacing:-1.8px;font-weight:650;line-height:1.35}.intro{color:var(--muted);margin-top:18px;font-size:14px;line-height:1.95}.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:21px}.tags span,.tags a{border:1px solid var(--line);padding:3px 10px;border-radius:4px;font-size:10px;color:var(--muted);text-decoration:none}.tags a:hover{border-color:var(--green);color:var(--green)}.prediction{display:flex;gap:24px;align-items:center;margin:8px 0 18px;border-left:3px solid var(--accent);padding:12px 18px;background:#f2eade}.step-label{font-size:11px;font-weight:650;white-space:nowrap;color:#8c4c2a}.prediction p{font-size:13px}.workbench{background:var(--white);border:1px solid #d4dace;border-radius:11px;box-shadow:0 8px 22px #384c2b05;overflow:hidden}.bench-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 23px;border-bottom:1px solid var(--line)}.bench-header h2{font-size:14px;font-weight:650;display:flex;align-items:center;gap:10px}.reset-button{font-size:11px;padding:5px 8px;border:1px solid transparent;white-space:nowrap;border-radius:4px;color:var(--muted)}.reset-button:hover{border-color:#d4dace;background:var(--paper)}.pixel-workarea{display:grid;grid-template-columns:minmax(0,1fr) 238px}.pixel-panels{padding:23px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.figure-caption{display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:11px}.figure-caption b{font-weight:600}.figure-caption span{font-family:var(--mono);font-size:10px;color:var(--muted)}.pixel-stage{height:220px;display:flex;align-items:center;justify-content:center;background-color:#f4f4ec;background-image:radial-gradient(#d9ded1 .8px,transparent .8px);background-size:12px 12px;margin-top:15px;border:1px solid #e4e7db;border-radius:5px}.pixel-grid{display:grid;grid-template-columns:repeat(3,var(--cell-size,64px));grid-template-rows:repeat(2,var(--cell-size,64px));gap:0}.pixel-cell{padding:0;min-width:0;min-height:0;position:relative;border:1px solid #00000012}.pixel-cell[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:3px;z-index:1}.pixel-cell[aria-pressed="true"]:after{content:"";width:7px;height:7px;position:absolute;right:4px;top:4px;background:var(--accent);border:1px solid white}.pixel-cell:focus-visible{outline:3px solid #df7c43;z-index:2}.scale-caption{font-size:10px;color:var(--muted);margin-top:12px}.number-stage{height:220px;display:flex;flex-direction:column;justify-content:center}.axis-top,.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.axis-top{font-family:var(--mono);font-size:10px;color:#7f8c80;text-align:center;margin-bottom:10px}.number-grid button{background:#f1f3e8;border:1px solid #e0e5d6;height:49px;border-radius:4px;font-family:var(--mono);font-size:17px}.number-grid button[aria-pressed="true"]{background:var(--green);color:white;border-color:var(--green)}.axis-foot{font-size:10px;color:var(--muted);text-align:center;margin-top:12px}.controls-panel{border-left:1px solid var(--line);padding:22px;background:#fafbf5}.selected-label{font-size:11px;color:var(--muted)}.selected-label strong{display:block;font-family:var(--mono);font-weight:400;color:var(--ink);margin-top:3px}.number-hero{display:flex;align-items:baseline;gap:9px;margin:7px 0 10px}.number-hero output{font-size:43px;line-height:1.4;letter-spacing:-2px}.number-hero span{font-size:11px;color:var(--muted);font-family:var(--mono)}.input-pair{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px}.input-pair label{font-size:12px;display:flex;align-items:center;gap:9px}.full-row{grid-column:1/-1}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.zoom-control{margin-top:22px;border-top:1px solid var(--line);padding-top:17px}.zoom-control label{display:flex;justify-content:space-between;font-size:12px}.zoom-control output{font-size:11px}.constant{border-top:1px solid var(--line);margin-top:16px;padding-top:13px;display:grid;grid-template-columns:1fr auto;align-items:center}.constant>span{font-size:11px}.constant strong{font-family:var(--mono);font-size:24px;font-weight:400}.constant small{font-size:10px}.constant p{grid-column:1/-1;font-size:10px;color:var(--muted);margin-top:1px}.calculation-strip{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:15px 24px;background:#f2f5e9;font-size:12px}.calculation-strip>span{font-size:10px;white-space:nowrap;color:var(--muted)}.calculation-strip code{overflow-wrap:anywhere;word-break:normal;font-size:12px}.reading-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:42px;padding:40px 0}.reading-grid h2{font-size:21px;letter-spacing:-.6px;margin-bottom:17px}.reading-grid p{font-size:13px;line-height:1.95;color:#536359}.research-note{border-left:1px solid #ced6c2;padding:3px 0 0 25px}.research-note h3{font-size:17px;margin:10px 0 14px;letter-spacing:-.4px}.note-rule{height:1px;background:var(--line);margin:20px 0 12px}.research-note p.small{font-size:11px;color:var(--muted)}details{border-top:1px solid var(--line);margin-top:22px;padding-top:12px}summary{cursor:pointer;font-size:12px;font-weight:600;width:fit-content}details p{margin-top:14px;font-size:13px}details code{background:#e9eddc;padding:2px 4px}details[open] summary{margin-bottom:12px}.teachback{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:38px;padding:28px 0}.teachback .step-label{color:var(--green)}.teachback h2{font-size:18px;margin-top:10px;letter-spacing:-.4px}.teachback details{border-top:0;margin-top:12px;padding:0}.teachback details p{font-size:12px;color:var(--muted)}.note-fields>label{font-size:11px;display:block;margin-bottom:7px}.note-fields textarea{width:100%;resize:vertical;min-height:90px;background:#fffefa;border:1px solid #ced6c2;border-radius:5px;padding:10px 12px;font-size:12px;color:var(--ink);line-height:1.8}.note-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:8px}.note-actions select{font-size:11px;background:transparent;border:1px solid #cdd5c5;border-radius:4px;padding:6px;min-width:0;max-width:65%;color:var(--ink)}.secondary{border:1px solid var(--green);color:var(--green);font-size:11px;white-space:nowrap;padding:5px 12px;border-radius:4px}.secondary:hover{background:var(--green);color:white}.save-status{display:block;font-size:10px;color:var(--muted);margin-top:8px}.lesson-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:var(--muted);padding:24px 0}.lesson-footer a{text-decoration:none;color:var(--green);font-size:12px}.lesson-footer a:hover{text-decoration:underline}.lesson-footer a span{margin-left:15px}.site-footer{padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}.site-footer b{margin:0 8px;font-weight:400}.site-footer details{width:100%;font-size:10px;margin-top:5px;border-top:0;padding-top:0}.site-footer summary{font-size:10px;color:var(--muted)}.site-footer p{font-size:11px}.notice{padding:14px;background:#f2eade;margin-bottom:20px}.error{font-size:12px;color:#a02e23;margin:8px 0}.inset{margin:0 24px 20px;background:#fff0e9;padding:10px 14px;border-left:3px solid #b0472c}.button-row{display:flex;gap:5px}.levels-controls{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:24px 28px 12px}.endpoint-dot{width:12px;height:12px;border-radius:50%;border:1px solid #738471;display:inline-block}.endpoint-dot.black{background:#1c2d23}.endpoint-dot.white{background:white}.levels-visual{padding:16px 28px 24px}.sample-comparison{display:grid;grid-template-columns:1fr 24px 1fr;gap:17px;align-items:center}.samples{display:grid;grid-template-columns:repeat(6,1fr);margin-top:12px;gap:4px}.sample{height:56px;display:flex;align-items:center;justify-content:center;border:1px solid #1b322118;font-family:var(--mono);font-size:12px;border-radius:3px}.compare-arrow{font-size:22px;color:#99a68c;text-align:center;padding-top:25px}.charts-row{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;margin-top:35px}.charts-row figure{min-width:0}.charts-row figcaption,.spaces figcaption{font-size:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.charts-row figcaption span,.spaces figcaption span{font-size:10px;color:var(--muted)}.charts-row svg{width:100%;display:block;font-family:var(--mono);font-size:10px;overflow:visible}.chart-legend{display:flex;gap:17px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{height:7px;width:13px;display:inline-block}.original{background:#a3ac96}.converted{background:var(--green)}.color-overview{display:flex;gap:17px;align-items:center;padding:23px 26px;border-bottom:1px solid var(--line)}.color-swatch{height:62px;width:62px;border-radius:7px;background:#f00;border:1px solid #0002;flex-shrink:0}.swatch-text{display:flex;flex-direction:column;gap:3px}.swatch-text strong{font-family:var(--mono);font-size:20px;line-height:1.25;font-weight:400}.swatch-text>span:last-child{font-family:var(--mono);font-size:11px;color:var(--muted)}.color-presets{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto;max-width:290px;justify-content:flex-end}.color-presets button{display:flex;align-items:center;gap:6px;border:1px solid #d8ddcf;background:#fafbf4;border-radius:4px;padding:5px 9px;font-size:11px}.color-presets i{background:var(--chip);display:block;width:10px;height:10px;border-radius:50%;border:1px solid #0001}.color-presets button:hover{border-color:var(--green)}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:23px 26px 15px}.color-controls fieldset{border:0;padding:0;margin:0;min-width:0}.color-controls legend{font-size:17px;font-family:var(--mono);margin-bottom:12px;width:100%;display:flex;justify-content:space-between;align-items:baseline}.color-controls legend span{font-size:10px;color:var(--muted);font-family:var(--sans)}.channel-control{display:grid;grid-template-columns:68px 1fr 67px;gap:10px;align-items:center;margin-bottom:8px}.channel-control label{font-size:11px}.channel-control b{font-family:var(--mono);margin-right:4px;font-size:13px}.channel-control input[type=number]{width:67px;font-size:12px;height:33px}.channel-control input[type=range]{min-width:0}.r-channel{color:#b94b38}.g-channel{color:#2c7139}.b-channel{color:#4765a1}.color-meaning{margin:0 26px 20px;padding:9px 12px;background:#f0f3e7;border-radius:4px;font-size:11px;color:var(--green)}.space-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 26px 5px;border-top:1px solid var(--line);gap:15px}.segmented{display:flex;border:1px solid #d4dccb;border-radius:5px;overflow:hidden}.segmented button{font-size:10px;padding:7px 12px;white-space:nowrap}.segmented button[aria-pressed=true]{background:var(--green);color:white}#rotate-control{display:flex;gap:8px;align-items:center;font-size:10px}#rotate-control input{width:110px}#rotation-label{width:38px;text-align:right}.spaces{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:22px 26px 8px}.spaces figure{min-width:0}.spaces svg{display:block;width:100%;height:270px;font-family:var(--sans);font-size:11px}.spaces figure+figure{border-left:1px solid var(--line);padding-left:22px}.plane-spaces figure{min-height:270px}#hsv-wheel{display:block;max-width:100%;width:200px;height:200px;margin:15px auto 0}.plane-spaces figure>p{text-align:center;margin:0;color:var(--muted)}#rgb-bars{display:flex;flex-direction:column;gap:25px;justify-content:center;min-height:230px}.color-bar{display:grid;grid-template-columns:25px 1fr 35px;gap:12px;align-items:center;font-family:var(--mono);font-size:13px}.color-bar-track{height:17px;border-radius:3px;background:#f0f1e8;overflow:hidden;border:1px solid #dce2d4}.color-bar-track i{height:100%;display:block;width:0;background:var(--bar-color)}.bench-footnote{padding:10px 24px 13px;color:var(--muted);font-size:10px;background:#f2f5e9;border-top:1px solid #e4e8d9}.lesson:not([hidden]){animation:appear .2s ease-out}@keyframes appear{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(min-width:1550px){.pixel-stage{height:245px}.number-stage{height:245px}}
@media(max-width:1250px){.sidebar{width:218px;padding:28px 16px}.page-shell{margin-left:218px}.topbar{padding:0 30px}main{padding:34px 30px 24px}.pixel-workarea{grid-template-columns:1fr 210px}.pixel-panels{padding:20px 16px;gap:13px}.controls-panel{padding:18px}.pixel-grid{--cell-max:50px;grid-template-columns:repeat(3,min(var(--cell-size),var(--cell-max)));grid-template-rows:repeat(2,min(var(--cell-size),var(--cell-max)))}.figure-caption{flex-wrap:wrap;gap:2px}.channel-control{grid-template-columns:56px 1fr 62px;gap:6px}.channel-control input[type=number]{width:62px}.color-controls{gap:24px}.charts-row figcaption{display:block}.charts-row figcaption span{display:block}.spaces figcaption{display:block}.spaces figcaption span{display:block}}
@media(max-width:1000px){.sidebar{width:190px;padding:25px 13px}.page-shell{margin-left:190px}.lesson-nav a{gap:8px;padding:11px 7px;font-size:11px}.lesson-nav small{font-size:9px}.brand{gap:9px}.side-caption{font-size:10px}.topbar{padding:0 22px}main{padding:28px 22px}.pixel-workarea{grid-template-columns:1fr}.controls-panel{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.number-hero{grid-row:2;grid-column:1;margin:0}.controls-panel>.input-pair{grid-row:1/3;grid-column:2}.controls-panel>.range-ends{grid-row:3;grid-column:2}.zoom-control{grid-column:1;margin-top:0}.constant{grid-column:2;margin-top:0}.pixel-grid{--cell-max:80px}.pixel-stage,.number-stage{height:210px}.reading-grid{gap:25px;grid-template-columns:1.3fr 1fr}.color-presets{max-width:175px}.color-controls{gap:23px;padding:22px 20px}.channel-control{grid-template-columns:55px 1fr 60px}.channel-control input[type=number]{width:60px}.space-toolbar{padding:15px 20px 0}.segmented button{padding:6px 9px}#rotate-control input{width:80px}.spaces{padding:20px;gap:15px}.spaces figure+figure{padding-left:15px}.spaces svg{height:230px}.teachback{gap:25px}.charts-row{gap:20px}}
@media(max-width:760px){.sidebar{position:relative;width:100%;padding:20px 20px 0;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:10px;line-height:1.3}.brand strong{font-size:16px}.brand-mark{height:35px;width:35px;border-radius:8px}.side-caption{position:absolute;top:23px;right:20px;margin:0;font-size:10px}.search-label{display:none}.search-box{margin:14px 0 10px;max-width:100%;border:1px solid #d2d9ca;border-radius:5px;padding:0 10px;height:34px}.search-box input{font-size:12px}.lesson-nav{flex-direction:row;gap:4px;padding-bottom:12px}.lesson-nav a{flex:1;min-width:0;gap:6px;font-size:11px;padding:10px 8px}.lesson-nav small,.nav-arrow{display:none}.nav-index{font-size:9px}.side-bottom{display:none}.page-shell{margin-left:0}.topbar{height:47px;padding:0 20px;font-size:10px}.edition{font-size:9px}.slash{margin:0 9px}main{padding:28px 20px 20px}.eyebrow{margin-bottom:14px}.intro{font-size:12px;margin-top:16px}.intro br{display:none}.tags{margin-top:17px}.prediction{display:block;padding:12px 15px;margin-top:0}.prediction p{font-size:12px;margin-top:4px}.bench-header{padding:15px}.bench-header h2{font-size:12px;gap:7px}.reset-button{font-size:10px;padding:4px 5px}.pixel-panels{padding:20px 15px;gap:15px}.pixel-grid{--cell-max:60px}.number-grid button{font-size:15px;height:42px}.figure-caption{font-size:11px;display:block}.figure-caption span{display:block;font-size:9px;margin-top:2px}.scale-caption{font-size:9px}.pixel-stage,.number-stage{height:180px}.calculation-strip{padding:13px 15px;gap:7px;display:block}.calculation-strip code{font-size:11px;display:block;margin-top:5px}.reading-grid{display:block;padding:29px 0}.reading-grid h2{font-size:20px}.reading-grid p{font-size:12px}.research-note{margin-top:25px;padding:18px;border-left:3px solid #a3b191;background:#edf0e5}.research-note h3{font-size:16px}.note-rule{margin-top:15px}.teachback{display:block;padding:24px 0}.teachback h2{font-size:17px}.note-fields{margin-top:22px}.lesson-footer{font-size:10px;gap:10px}.lesson-footer a{font-size:11px}.lesson-footer>span:last-child{max-width:55%}.site-footer{font-size:9px;display:block}.site-footer>span{display:block}.levels-controls{padding:20px 16px 10px;gap:20px}.levels-controls .input-pair input[type=number]{width:62px;font-size:13px}.levels-visual{padding:10px 16px 20px}.sample-comparison{gap:10px;grid-template-columns:1fr 18px 1fr}.samples{grid-template-columns:repeat(3,1fr);gap:3px}.sample{height:40px;font-size:10px}.charts-row{grid-template-columns:1fr;gap:25px}.charts-row figure:last-child{max-width:300px;margin:0 auto;width:100%}.charts-row figcaption{display:flex;font-size:11px}.charts-row figcaption span{font-size:9px}.charts-row figure:first-child svg{height:auto}.color-overview{padding:18px 16px;flex-wrap:wrap;gap:12px}.color-swatch{width:54px;height:54px}.swatch-text strong{font-size:18px}.color-presets{max-width:none;width:100%;justify-content:flex-start;margin-left:0}.color-presets button{font-size:10px;padding:4px 8px}.color-controls{grid-template-columns:1fr;gap:20px;padding:20px 16px 15px}.color-controls fieldset+fieldset{border-top:1px solid var(--line);padding-top:18px}.channel-control{grid-template-columns:75px 1fr 70px;gap:14px}.channel-control input[type=number]{width:70px;font-size:13px}.channel-control label{font-size:12px}.color-meaning{margin:0 16px 16px;font-size:10px}.space-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:14px 16px}.spaces{grid-template-columns:1fr;gap:10px;padding:10px 16px 16px}.spaces figure+figure{padding:15px 0 0;border-left:0;border-top:1px solid var(--line)}.spaces figcaption{display:flex}.spaces svg{max-width:350px;height:265px;margin:auto}.bench-footnote{padding:10px 16px}.error.inset{margin:0 16px 15px}.plane-spaces figure{min-height:0}#rgb-bars{min-height:190px}.color-overview .tiny-label{font-size:9px}}
@media(max-width:400px){main{padding:23px 14px}.sidebar{padding:16px 14px 0}.side-caption{right:14px;top:20px;font-size:9px}.lesson-nav a{padding:9px 6px;font-size:10px;gap:5px}.topbar{padding:0 14px}.edition{font-size:8px}h1{font-size:30px}.pixel-panels{gap:10px;padding:16px 12px}.pixel-grid{--cell-max:40px}.pixel-stage,.number-stage{height:150px}.number-grid{gap:4px}.number-grid button{height:36px;font-size:13px}.axis-foot{font-size:9px}.controls-panel{padding:16px;gap:10px 18px}.input-pair label{font-size:11px}.input-pair input[type=number]{width:62px;font-size:13px}.levels-controls{gap:15px}.button-row{gap:0}.reset-button{font-size:9px}.bench-header h2{font-size:11px}.levels-controls .input-pair label{font-size:10px}.lesson-footer a{font-size:10px}.note-actions{gap:6px}.note-actions select{font-size:10px}.secondary{padding:5px 9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lesson:not([hidden]){animation:none}}