.guide-page{--cone-l: #ff5555;--cone-m: #55cc77;--cone-s: #5588ff;--plot-bg: #000000;--plot-grid: #1c1c1e;--plot-axis: #3a3a3d}.guide-page .headline{font-size:1.3rem;line-height:1.45;font-weight:600;color:var(--fg);margin:0 0 1.5rem}.guide-page h2+.headline{margin-top:-.25rem}.guide-figure-wide{max-width:var(--measure-wide)}.cs-controls{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:1rem}.cs-controls label{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint)}.cs-controls input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:240px;max-width:100%;height:20px;margin:0}.cs-controls input[type=range].wide{flex:1 1 240px;width:auto}.cs-controls input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--plot-axis)}.cs-controls input[type=range]::-moz-range-track{height:2px;background:var(--plot-axis)}.cs-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fg);margin-top:-6px;cursor:pointer;border:0}.cs-controls input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fg);cursor:pointer;border:0}.cs-controls input[type=range]:focus{outline:none}.cs-controls input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #d9775759}.cs-controls input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #d9775759}.cs-readout{font-family:var(--font-mono);font-size:.82rem;color:var(--fg);margin:0}.cs-readout .dim,.cs-readout.dim{color:var(--fg-dim)}.cs-readout .num{display:inline-block;min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}.cs-pill-btn{background:transparent;color:var(--fg-dim);border:1px solid var(--rule);padding:.4rem .8rem;font-family:var(--font-mono);font-size:.75rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:color .12s ease,border-color .12s ease,background .12s ease}.cs-pill-btn:hover{color:var(--fg);border-color:var(--fg-dim)}.cs-pill-btn[aria-pressed=true]{color:var(--fg);border-color:var(--pill-color, var(--accent));background:#ffffff0a}.cs-pill-btn .swatch{width:9px;height:9px;border-radius:2px;background:var(--pill-color, var(--fg-dim));flex-shrink:0}.cs-pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.cs-figure-title{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-dim);margin:0 2.5rem .9rem 0}.cs-demo-btn{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);color:var(--fg-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;z-index:5;transition:background .15s ease,border-color .15s ease,color .15s ease}.cs-demo-btn:hover{border-color:var(--accent);color:var(--accent)}.cs-demo-btn[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}.cs-demo-btn:disabled{opacity:.35;cursor:default}.cs-demo-btn .icon-play{display:inline-flex}.cs-demo-btn .icon-stop,.cs-demo-btn[aria-pressed=true] .icon-play{display:none}.cs-demo-btn[aria-pressed=true] .icon-stop{display:inline-flex}.cs-plot{display:block;width:100%;height:auto;background:var(--plot-bg);border:1px solid var(--rule);border-radius:4px}.cs-svg text{font-family:var(--font-mono);fill:var(--fg-dim)}.cs-svg .axis-label{fill:var(--fg-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.cs-svg .tick-label{fill:var(--fg-faint);font-size:11px}.cs-svg .grid{stroke:var(--plot-grid);stroke-width:1}.cs-svg .axis{stroke:var(--plot-axis);stroke-width:1}.cs-svg .cone-l{stroke:var(--cone-l)}.cs-svg .cone-m{stroke:var(--cone-m)}.cs-svg .cone-s{stroke:var(--cone-s)}.cs-svg .cone{fill:none;stroke-width:2;stroke-linejoin:round}.cs-svg .cone-label{font-size:12px;font-weight:500}.cs-svg .cone-label.l{fill:var(--cone-l)}.cs-svg .cone-label.m{fill:var(--cone-m)}.cs-svg .cone-label.s{fill:var(--cone-s)}.cs-svg .marker{stroke:var(--fg);stroke-width:1;opacity:.6}.cs-svg .ball{fill:#fff;stroke:#000;stroke-width:1.5}.cs-cie-stage{position:relative;width:100%;max-width:560px;aspect-ratio:660 / 780;margin:0 auto;background:var(--plot-bg);border:1px solid var(--rule);border-radius:4px;overflow:hidden}.cs-cie-canvas,.cs-cie-svg{position:absolute;inset:0;width:100%;height:100%}.cs-cie-svg{pointer-events:none}.cs-cie-svg .locus{fill:none;stroke:#ffffff8c;stroke-width:1.5}.cs-cie-svg .wl-tick{stroke:#ffffff8c;stroke-width:1}.cs-cie-svg .wl-label{font-size:11px;fill:var(--fg-dim);paint-order:stroke;stroke:#000;stroke-width:3px}.cs-cie-svg .gamut-tri{fill:none;stroke-width:2;stroke-linejoin:round}.cs-cie-svg .gamut-tri.hi{stroke-width:3}.cs-cie-svg .wp-label{font-size:11px;fill:var(--fg);paint-order:stroke;stroke:#000000d9;stroke-width:3px}.cs-bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.45rem .75rem;align-items:center;font-family:var(--font-mono);font-size:.8rem}.cs-bars .name{color:var(--fg-dim)}.cs-bars .val{color:var(--fg);min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}.cs-bar{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}.cs-bar>i{display:block;height:100%;width:0;background:var(--bar-color, var(--fg));transition:width 50ms linear}.cs-bar.l>i{background:var(--cone-l)}.cs-bar.m>i{background:var(--cone-m)}.cs-bar.s>i{background:var(--cone-s)}.cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cs-mono{font-family:var(--font-mono)}@media(max-width:639px){.cs-controls input[type=range]{width:100%}}