:root{color-scheme:light;--bg:#fff;--ink:#1b1e28;--muted:#7d8190;--line:#e6e7ec;--blue:#bfc9ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #6c88ff;outline-offset:5px}button{border:0}button:disabled{opacity:.5;cursor:default}.masthead{display:flex;align-items:center;justify-content:space-between;padding:25px 4vw;border-bottom:1px solid var(--line);gap:24px}.wordmark{font-size:26px;font-weight:800;letter-spacing:-1.5px}.wordmark span{font:11px ui-monospace,SFMono-Regular,monospace;letter-spacing:2px;margin-left:12px;color:#7d8190}.masthead nav{display:flex;gap:30px;font-size:12px;color:#5b6070}.masthead nav a:hover{color:#1b1e28}.edition,.eyebrow{font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.7px;color:var(--muted)}main{padding:0 4vw}.laboratory{padding:42px 0 35px}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:29px;gap:24px}.eyebrow{margin:0 0 17px}h1{font-size:clamp(23px,2.55vw,40px);font-weight:500;letter-spacing:-1.1px;margin:0;line-height:1.4}.intro-note{font-size:12px;line-height:1.9;color:#747986;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 272px;background:#fff;color:#1b1e28;border:1px solid #dcdee6}.viewer{min-width:0;display:flex;flex-direction:column}.canvas-meta{display:flex;justify-content:space-between;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.6px;color:#747986;padding:21px 25px 0}.art{height:330px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:white}.art svg,.art img{display:block;width:100%;height:auto;max-height:330px;overflow:visible}.canvas-caption{display:flex;justify-content:space-between;align-items:center;padding:0 25px 20px;font-size:10px;color:#747986}.tiny-cross{font:25px ui-monospace,monospace}.transport{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid #efeff2}.icon-button{background:none;color:#242735;width:24px;height:24px;padding:0;font-size:19px}.transport input{flex:1;min-width:30px}.transport output{font:10px ui-monospace,monospace;white-space:nowrap;color:#626776;width:99px;text-align:right}.stage-tabs{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #e8e8ed;margin-top:auto}.stage-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:49px;background:#fafafa;color:#888c98;font-size:11px;position:relative;transition:background .15s,color .15s}.stage-tabs b{font:9px ui-monospace,monospace;color:#a6aab3}.stage-tabs button[aria-pressed=true]{background:#eeeef5;color:#1b1d28}.stage-tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;width:100%;height:2px;background:#313b78}.stage-tabs button:hover{background:#f0f0f5;color:#1b1e28}.inspector{border-left:1px solid #e8e8ec;padding:23px 23px 16px;background:#f8f8fa}.inspector-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.inspector h2{font-size:13px;font-weight:600;margin:0}.text-button{font-size:10px;background:none;color:#858998;padding:0}.palette-field{border:0;padding:0;margin:0 0 19px}.palette-field legend{font:9px ui-monospace,monospace;letter-spacing:1.2px;color:#8b8e98;margin-bottom:12px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatches button{padding:0;background:none;color:#7d8190;font-size:9px}.swatches i{display:block;width:30px;height:30px;border-radius:50%;margin:1px auto 8px;box-shadow:0 0 0 3px #f8f8fa,0 0 0 4px transparent;transition:box-shadow .15s}.swatches [aria-pressed=true]{color:#171b29}.swatches [aria-pressed=true] i{box-shadow:0 0 0 3px #f8f8fa,0 0 0 4px #737988}.original{background:linear-gradient(135deg,#030e40 18%,#05b2fe 40%,#f8e7d1 54%,#ff581a 68%,#ed89f8 78%,white 90%)}.silver{background:linear-gradient(135deg,#101826,#638396 40%,#fff 48%,#465464 58%,#dbe9ef 78%)}.lava{background:linear-gradient(135deg,#2f060b,#d9360a 40%,#ffad0d 55%,#fff3c5 76%)}.violet{background:linear-gradient(135deg,#221343,#7e53ed 40%,#a4ffff 52%,#fa50cd 68%,#eeccf9 84%)}.control{margin-bottom:15px}.control label{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:8px}.control output{font:10px ui-monospace,monospace;color:#777e8e}.control small{font-size:9px;line-height:1.6;display:block;color:#8d929f;margin-top:6px}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:3px;background:#d9dce4;border-radius:0;cursor:pointer;accent-color:#303c6c}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#394360;box-shadow:0 0 0 1px #b4b8c4}input[type=range]::-moz-range-thumb{width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#394360}.extensions{border-top:1px solid #dedfe7;padding:13px 0 10px;margin-top:21px}.extensions summary{font-size:10px;cursor:pointer;display:flex;justify-content:space-between;list-style:none;color:#4d5365}.extensions summary::-webkit-details-marker{display:none}.extensions[open] summary span{transform:rotate(45deg)}.extensions p{font-size:9px;line-height:1.6;color:#9095a2;margin-bottom:16px}.check{font-size:10px;display:flex;gap:6px;align-items:center;color:#777d8b}.check input{accent-color:#343c5c}.download{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 14px;margin-top:12px;background:#1b2132;color:#fff;font-size:11px;transition:background .2s}.download:hover{background:#343e60}.export-note{color:#979ca7;font-size:9px;line-height:1.7;text-align:center;margin:11px 0 0}.under-note{font:9px ui-monospace,monospace;letter-spacing:.5px;color:#757987;display:flex;justify-content:space-between;gap:20px;margin:14px 0 0;line-height:1.8}.explanation{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.2fr;gap:9vw;padding:77px 0 72px}.section-lead h2,.limits h2{font-size:clamp(26px,3vw,44px);font-weight:450;letter-spacing:-1.5px;line-height:1.4;margin:25px 0}.section-lead>p:last-child{font-size:13px;line-height:2.1;color:#5f6473;max-width:350px}.essay article{display:flex;gap:23px;margin-bottom:32px}.number{color:#8a90a3;font:11px ui-monospace,monospace;margin-top:7px}.essay h3{font-size:16px;font-weight:500;margin:0 0 12px}.essay p{font-size:12px;line-height:2;color:#5f6473;margin:0 0 12px}.essay code{font:9px ui-monospace,monospace;color:#4a5aa8;line-height:1.8}.spectrum{margin-left:33px}.spectrum-bar{height:17px;background:linear-gradient(to right,#000 0%,#000 18.33%,#001465 28.33%,#00aaff 40%,#e1e1fe 45%,#ffcb5c 50%,#ff4400 55%,#f384ff 60%,#fff 66.67%,#fff)}.spectrum>div:last-child{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#7c8296;margin-top:10px;gap:10px}.essay .important{border-left:1px solid #c5c9d6;padding-left:18px;margin:31px 0 0 33px;color:#2c3040}.reference{border-top:1px solid var(--line);padding:68px 0}.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:28px}.section-header h2{font-size:30px;font-weight:450;margin:0}.section-header>p{font-size:11px;color:#6b7080;line-height:1.9;margin:0}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px}figure{margin:0;min-width:0}.video-crop{background:#6b6e82;aspect-ratio:1.65;display:flex;align-items:center;justify-content:center}.video-crop video{display:block;width:100%;max-height:100%;aspect-ratio:1.84/1.2}.replica-poster{aspect-ratio:1.65;background:white;border:1px solid #dcdee6;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.replica-poster img{width:100%;height:auto}.replica-poster p{font-size:10px;color:#969ba6;margin:5px 0 0}figcaption{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;letter-spacing:.5px;color:#878e9e;margin-top:13px}figcaption a{color:#3d4a8a}.limits{padding:68px 0 80px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.2fr;gap:9vw}.limits h2{margin-top:0}.limits>div>p{font-size:13px;color:#5f6473;line-height:2}.notes-link{display:inline-block;font-size:11px;border-bottom:1px solid #627098;padding-bottom:7px;margin-top:18px;color:#3d4a8a}footer{padding:26px 4vw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#7d8292;font:9px ui-monospace,monospace}footer p{font-family:inherit;line-height:1.8;margin:0}footer a{text-decoration:underline;text-underline-offset:3px}footer a:hover{color:#1b1e28}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){main{max-width:1600px;margin:auto}.art{height:420px}.art svg{max-height:420px}.workspace{grid-template-columns:minmax(0,1fr) 310px}.inspector{padding:28px}.control{margin-bottom:22px}.laboratory{padding-top:50px}}
@media(max-width:960px){.edition{display:none}.workspace{grid-template-columns:minmax(0,1fr) 236px}.inspector{padding:20px 17px}.art{height:305px}.intro-note{font-size:10px}.explanation,.limits{gap:6vw;grid-template-columns:.85fr 1.2fr}.stage-tabs button{gap:5px}.under-note span:last-child{display:none}.section-header>p{max-width:285px}.canvas-meta{font-size:9px}.canvas-caption{font-size:9px}.transport{padding:14px}}
@media(max-width:680px){.masthead{padding:20px 5vw}.masthead nav{gap:20px;font-size:11px}.masthead nav a:last-child{display:none}.wordmark{font-size:24px}.wordmark span{font-size:9px;margin-left:6px;letter-spacing:1px}main{padding:0 5vw}.laboratory{padding-top:30px}.intro{margin-bottom:22px}.intro-note{display:none}.eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:27px}.workspace{grid-template-columns:1fr}.art{height:235px}.art svg{max-height:235px}.canvas-meta{padding:18px 16px 0;font-size:8px}.canvas-meta span:last-child{font-size:7px}.canvas-caption{padding:0 16px 13px;font-size:8px}.stage-tabs button{flex-direction:column;gap:4px;font-size:10px;padding:10px 0}.inspector{border-left:0;border-top:1px solid #e5e5ee;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.inspector-top,.palette-field,.extensions,.download,.export-note{grid-column:1/-1}.inspector-top{margin-bottom:20px}.swatches{max-width:260px}.palette-field{margin-bottom:26px}.control{margin-bottom:22px}.control label{font-size:11px}.control small{font-size:9px}.extensions{margin-top:0}.extensions .control{margin-top:18px}.explanation,.limits{display:block;padding:45px 0}.section-lead h2,.limits h2{font-size:31px}.section-lead>p:last-child{max-width:none;margin-bottom:35px}.essay article{gap:17px}.essay h3{font-size:15px}.spectrum,.essay .important{margin-left:28px}.section-header{display:block}.section-header>p{margin-top:16px;max-width:none}.reference{padding:44px 0}.comparison{grid-template-columns:1fr;gap:30px}.section-header h2{font-size:28px}.limits>.eyebrow{margin-bottom:28px}footer{flex-wrap:wrap;padding:24px 5vw}footer p{order:3;width:100%;margin:0}.under-note{font-size:8px}.transport output{font-size:9px;width:91px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}
picture{display:block;width:100%}
.type-field{border-bottom:1px solid #dedfe7;margin-bottom:19px;padding-bottom:4px}.type-field input[type=text],.type-field select{display:block;width:100%;height:30px;padding:0 8px;border:1px solid #d5d8e1;border-radius:0;background:#fff;color:#1b1e28;font-size:12px}.type-field input[type=text]:focus,.type-field select:focus{outline:0;border-color:#394360}.font-actions{display:flex;justify-content:space-between;gap:10px;margin-top:8px}.font-actions .text-button{display:inline;margin:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.font-actions label:focus-within{outline:2px solid #6c88ff;outline-offset:3px}.art svg text{font-synthesis:weight style}
@media(max-width:680px){.type-field{grid-column:1/-1}}

.wordmark,.masthead nav a{white-space:nowrap}
@media(max-width:960px){.wordmark span{display:none}}
@media(max-width:680px){.wordmark{font-size:20px;letter-spacing:-1px}.masthead nav{gap:14px}}