/* Color Flow Designer — a canvas and floating instruments. */
body[data-route="ramps"] {background:#f0f0f0;}
body[data-route="ramps"] main {max-width:none;padding:0;}
body[data-route="ramps"] .site-header {position:fixed;top:22px;left:28px;padding:0;background:none;border:0;backdrop-filter:none;z-index:20;}
body[data-route="ramps"] .site-title,body[data-route="ramps"] .site-tagline {display:none;}
body[data-route="ramps"] .module-nav {gap:12px;margin:0;}
body[data-route="ramps"] .module-nav a {font-size:11px;font-weight:400;padding:0 0 4px;color:#777a72;border:0;}
body[data-route="ramps"] .module-nav a[aria-current] {color:#252924;border-bottom:1px solid currentColor;}
body[data-route="ramps"] .nav-num {display:none;}
body:has(#inst-ramps[data-dark="true"])[data-route="ramps"] .module-nav a {color:#969a91;}
body:has(#inst-ramps[data-dark="true"])[data-route="ramps"] .module-nav a[aria-current] {color:#e3e6dd;}
body[data-route="ramps"] .module-next,body[data-route="ramps"] .site-footer {display:none;}
#inst-ramps {--flow-background:#f0f0f0;--paper:#faf9f5f5;--ink:#30352e;--muted:#757b70;--line:#343d2826;--well:#535e3e0c;--active:#525d3d18;--sc-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;position:fixed;inset:0;background:var(--flow-background);color:var(--ink);font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;isolation:isolate;}
#inst-ramps[data-dark="true"] {--paper:#22251fee;--ink:#e1e5d9;--muted:#9a9f91;--line:#dbe2ce25;--well:#dce3d30b;--active:#dce3d320;}
#inst-ramps * {box-sizing:border-box;}
#inst-ramps [hidden] {display:none!important;}
#inst-ramps button,#inst-ramps input,#inst-ramps select {font:inherit;color:inherit;}
#inst-ramps button {cursor:pointer;}
#inst-ramps button:disabled {opacity:.35;cursor:default;}
#inst-ramps button:focus-visible,#inst-ramps input:focus-visible,#inst-ramps select:focus-visible,#inst-ramps summary:focus-visible,#sc-volume:focus-visible {outline:2px solid var(--muted);outline-offset:3px;}
.sc-heading {position:absolute;left:28px;top:24px;z-index:3;pointer-events:none;}
.sc-heading h1 {font-size:20px;font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0;}
.sc-heading>p {color:var(--muted);font-size:11px;margin:7px 0 0;}
.sc-eyebrow {display:none;}
.sc-workbench {display:contents;}
.sc-stage {position:absolute;inset:0;}
#sc-volume {display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
#sc-volume.sc-dragging {cursor:grabbing!important;}
.sc-stage-head {position:absolute;left:28px;bottom:245px;z-index:2;display:flex;align-items:center;gap:24px;}
.sc-stage-head>div:first-child {display:flex;flex-direction:column;gap:2px;}
.sc-label {font:10px/1.5 var(--sc-mono);letter-spacing:.045em;color:var(--muted);}
.sc-stage-sub {color:var(--muted);font-size:10px;}
.sc-view-actions {display:flex;gap:4px;}
#inst-ramps .sc-view-actions button {background:transparent;border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:11px;}
#inst-ramps .sc-view-actions button[aria-pressed=true] {background:var(--active);}
.sc-scene-caption {position:absolute;bottom:20px;left:28px;display:flex;gap:24px;align-items:center;z-index:2;}
.sc-coordinate>span:first-child {display:none;}
.sc-coordinate>span:last-child {font-size:11px;color:var(--muted);}
.sc-shell {font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
#inst-ramps input[type=checkbox] {accent-color:#737c61;width:12px;height:12px;margin:0;}
.sc-stage-key {position:absolute;left:28px;top:132px;display:flex;flex-wrap:wrap;gap:14px;font-size:10px;color:var(--muted);pointer-events:none;}
.sc-stage-key>span {display:flex;align-items:center;gap:6px;}
.sc-line {display:inline-block;width:15px;border-top:1px solid var(--muted);}
.sc-dash {border-top-style:dashed;}
.sc-controls {position:absolute;right:24px;top:24px;bottom:82px;width:280px;max-height:820px;overflow:auto;scrollbar-width:thin;z-index:5;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 8px 28px #17200c08;padding:0 14px 15px;backdrop-filter:blur(20px);}
.sc-control-heading {display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:14px;}
#inst-ramps .sc-text-button {border:0;background:transparent;color:var(--muted);padding:0;font-size:11px;}
#inst-ramps .sc-text-button:hover {color:var(--ink);text-decoration:underline;}
.sc-inputs {display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 15px;}
.sc-inputs>div {display:none;}
.sc-inputs label {display:flex;align-items:center;gap:8px;background:var(--well);padding:6px 8px;border-radius:5px;grid-column:1;}
.sc-inputs label:nth-of-type(2) {grid-row:2;}
#inst-ramps .sc-inputs input[type=color],#inst-ramps .sc-color-entry input[type=color] {appearance:none;width:22px;height:22px;border:0;border-radius:3px;background:transparent;padding:0;cursor:pointer;}
#inst-ramps input[type=color]::-webkit-color-swatch-wrapper {padding:0;}
#inst-ramps input[type=color]::-webkit-color-swatch {border:1px solid var(--line);border-radius:3px;}
#inst-ramps .sc-inputs input[type=text] {width:74px;min-width:0;border:0;background:none;padding:0;font:11px var(--sc-mono);margin-left:auto;}
#inst-ramps #sc-reverse {grid-column:2;grid-row:1/3;align-self:center;border:1px solid var(--line);background:none;border-radius:4px;padding:4px 6px;font-size:17px;}
#inst-ramps input[aria-invalid=true] {outline:1px solid #bf614e;}
.sc-field {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:13px;}
#inst-ramps select {background:var(--well);border:1px solid var(--line);border-radius:5px;padding:7px 6px;min-width:0;font-size:11px;color-scheme:light;}
#inst-ramps[data-dark=true] select {color-scheme:dark;}
.sc-field select {max-width:174px;}
.sc-path-field {margin:0 0 12px;padding:0;border:0;min-width:0;}
.sc-path-field legend {font-size:11px;margin-bottom:7px;padding:0;}
.sc-segments {display:flex;gap:3px;background:var(--well);border-radius:5px;padding:3px;}
#inst-ramps .sc-segments button {flex:1;border:0;border-radius:3px;background:transparent;padding:6px 3px;font-size:11px;color:var(--muted);}
#inst-ramps .sc-segments button[aria-pressed=true] {color:var(--ink);background:var(--active);}
.sc-path-field p {font-size:10px;line-height:1.5;color:var(--muted);margin:7px 0 0;}
.sc-anchor-head {display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;font-size:11px;}
.sc-anchors {display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;}
#inst-ramps .sc-anchors button {display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border:1px solid var(--line);border-radius:4px;background:none;font:10px var(--sc-mono);}
#inst-ramps .sc-anchors button[aria-pressed=true] {border-color:var(--muted);}
.sc-anchors i {display:block;width:19px;height:19px;border-radius:2px;}
.sc-selected-head {display:flex;justify-content:space-between;color:var(--muted);font-size:10px;}
.sc-color-entry {display:flex;gap:8px;align-items:center;margin:8px 0 13px;}
#inst-ramps .sc-color-entry input[type=text] {border:0;border-bottom:1px solid var(--line);border-radius:0;padding:3px 0;background:transparent;font:11px var(--sc-mono);width:84px;}
.sc-color-entry>span {margin-left:auto;color:var(--muted);font-size:9px;}
.sc-range {display:grid;grid-template-columns:1fr auto;gap:5px;padding:8px 9px 5px;border-radius:5px;background:var(--well);font-size:11px;margin-bottom:6px;}
.sc-range output {font:11px var(--sc-mono);color:var(--muted);}
.sc-range input {grid-column:1/-1;}
#inst-ramps input[type=range] {appearance:none;height:12px;width:100%;min-width:0;background:none;margin:0;cursor:pointer;}
#inst-ramps input[type=range]::-webkit-slider-runnable-track {height:2px;background:var(--line);}
#inst-ramps input[type=range]::-webkit-slider-thumb {appearance:none;width:7px;height:10px;margin-top:-4px;border-radius:1px;background:var(--muted);border:0;}
#inst-ramps input[type=range]::-moz-range-track {height:2px;background:var(--line);}
#inst-ramps input[type=range]::-moz-range-thumb {width:7px;height:10px;border-radius:1px;background:var(--muted);border:0;}
.sc-hint {font-size:10px;color:var(--muted);line-height:1.5;margin:11px 0 15px;}
.sc-environment {display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;font-size:11px;}
.sc-environment>div {display:flex;gap:7px;align-items:center;}
#inst-ramps .sc-environment button {background:var(--chip);width:22px;height:22px;padding:0;border:1px solid #88907b70;border-radius:50%;}
#inst-ramps .sc-environment button[aria-pressed=true] {outline:1px solid var(--muted);outline-offset:2px;}
#inst-ramps .sc-environment input {width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;}
.sc-palette-section {position:absolute;bottom:57px;left:24px;right:328px;z-index:4;background:var(--paper);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:10px;padding:13px 15px 10px;}
.sc-palette-head {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px;}
.sc-palette-head>div {display:flex;gap:12px;align-items:center;}
#sc-ramp-desc {font-size:10px;color:var(--muted);}
.sc-step-control {display:flex;align-items:center;gap:8px;font-size:10px;}
#inst-ramps .sc-step-control input {width:65px;}
.sc-step-control output {font:10px var(--sc-mono);}
.sc-spacing {display:flex;gap:10px;margin-bottom:10px;align-items:center;}
.sc-spacing label {display:flex;gap:6px;align-items:center;font-size:10px;}
#sc-spacing-note {display:none;}
.sc-gradient {height:7px;margin-bottom:5px;border-radius:2px;}
.sc-palette {display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));gap:4px;}
.sc-step {display:flex;flex-direction:column;gap:3px;min-width:0;}
#inst-ramps .sc-step-select {padding:0;border:0;background:none;border-radius:2px;}
.sc-step-color {display:flex;align-items:flex-end;justify-content:space-between;position:relative;height:39px;padding:5px;border-radius:2px;font:9px var(--sc-mono);}
.sc-step-select[aria-pressed=true] .sc-step-color:after {content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:1px;opacity:.8;}
#inst-ramps .sc-step-hex {background:none;border:0;padding:3px 0;font:9px var(--sc-mono);color:var(--muted);border-radius:2px;}
#inst-ramps .sc-step-hex:hover {text-decoration:underline;color:var(--ink);}
.sc-step-contrast {font:9px/1.5 var(--sc-mono);color:var(--muted);text-align:center;}
.sc-palette-foot {display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);margin-top:5px;}
.sc-palette-foot label {display:flex;gap:5px;align-items:center;}
.sc-path-note {position:absolute;bottom:100%;left:0;max-width:540px;margin-bottom:8px;font-size:10px;color:var(--muted);}
.sc-path-note summary {cursor:pointer;}
.sc-path-note[open] {padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:7px;}
.sc-path-note p {margin:7px 0 0;font-size:11px;line-height:1.6;}
.sc-toolbar {position:absolute;bottom:18px;right:24px;z-index:8;display:flex;gap:6px;}
#inst-ramps .sc-toolbar button {padding:9px 14px;border:1px solid var(--line);border-radius:24px;background:var(--paper);backdrop-filter:blur(15px);font-size:11px;}
#inst-ramps .sc-toolbar button:hover {background:var(--active);}
#inst-ramps #sc-export-open {background:var(--ink);color:var(--flow-background);border-color:var(--ink);}
.sc-panels-hidden .sc-controls,.sc-panels-hidden .sc-palette-section,.sc-panels-hidden .sc-stage-head,.sc-panels-hidden .sc-stage-key {visibility:hidden;pointer-events:none;}
.sc-dialog {width:min(620px,calc(100vw - 40px));max-height:80dvh;overflow:auto;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 24px 100px #0002;}
.sc-dialog:not([open]) {display:none;}
.sc-dialog::backdrop {background:#11151035;backdrop-filter:blur(5px);}
.sc-dialog>header {display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:20px;}
#inst-ramps .sc-dialog [data-close] {background:none;border:0;font-size:24px;padding:0 5px;line-height:1;}
.sc-export {margin:0;padding:0;border:0;}
.sc-export>.sc-label {display:none;}
.sc-export-toolbar {display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;}
.sc-export-toolbar label {display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;}
#inst-ramps .sc-export-toolbar input,#inst-ramps .sc-export-toolbar select {width:100%;padding:9px;border:1px solid var(--line);border-radius:4px;background:var(--well);font-size:12px;}
#inst-ramps .sc-copy-button,#inst-ramps .sc-download {border:1px solid var(--line);border-radius:5px;padding:10px;font-size:12px;}
#inst-ramps .sc-copy-button {background:var(--ink);color:var(--flow-background);}
#inst-ramps .sc-download {background:none;}
#sc-export-note {font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0;}
.sc-code summary {cursor:pointer;font-size:11px;}
.sc-code pre {background:var(--well);color:var(--ink);font:11px/1.6 var(--sc-mono);max-height:250px;overflow:auto;padding:12px;border-radius:4px;}
.sc-explainer,.sc-value,.sc-legacy {border-top:1px solid var(--line);margin:0;padding:0;}
.sc-explainer summary,.sc-value summary,.sc-legacy summary {list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;cursor:pointer;font-size:12px;}
.sc-explainer summary::-webkit-details-marker,.sc-value summary::-webkit-details-marker,.sc-legacy summary::-webkit-details-marker {display:none;}
.sc-explainer[open] summary span,.sc-value[open] summary span,.sc-legacy[open] summary span {transform:rotate(45deg);}
.sc-explainer p,.sc-value p,.sc-value li {font-size:13px;line-height:1.7;color:var(--muted);}
.sc-value>div,.sc-explainer>div {padding-bottom:14px;}
.sc-value ul {padding-left:18px;}
.sc-legacy .instrument {background:#171b1e;color:#e4e8e5;padding:16px;margin-bottom:16px;overflow:auto;}
.sc-live {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
@media(max-width:1000px){.sc-palette{overflow-x:auto;grid-template-columns:repeat(var(--steps),minmax(48px,1fr));}.sc-palette-foot>span{display:none;}.sc-heading>p{display:none;}.sc-stage-key>span:last-child{flex-basis:100%;}.sc-palette-head>div{display:block;}#sc-ramp-desc{display:block;}}
@media(max-height:750px) and (min-width:760px){.sc-controls{bottom:76px;}.sc-stage-head{bottom:248px;}.sc-scene-caption .sc-shell{display:none;}}
@media(max-width:759px){body[data-route=ramps] .site-header{left:16px;top:15px;}body[data-route=ramps] .module-nav{gap:10px;}body[data-route=ramps] .module-nav a{font-size:10px;}.sc-heading{left:16px;top:47px;}.sc-heading h1{font-size:17px;}.sc-controls{right:12px;top:89px;bottom:260px;max-height:50vh;width:230px;}.sc-palette-section{left:12px;right:12px;bottom:62px;padding:10px;}.sc-stage-key{left:16px;top:75px;max-width:calc(100% - 265px);}.sc-stage-key>span{display:none;}.sc-stage-head{left:16px;bottom:262px;display:block;}.sc-stage-head>div:first-child{display:none;}.sc-scene-caption{display:none;}.sc-toolbar{right:12px;bottom:14px;}.sc-toolbar button{padding:8px 12px!important;}.sc-palette-foot{display:none;}.sc-controls .sc-hint{display:none;}.sc-palette-head{margin-bottom:6px;}.sc-step-color{height:34px;}.sc-spacing{margin-bottom:7px;}.sc-path-note{left:0;}.sc-dialog{padding:16px;}.sc-palette-head>div{display:flex;}}
@media(prefers-reduced-motion:reduce){#inst-ramps *{scroll-behavior:auto;}}

/* Keep the view tools clear of the palette's transition disclosure. */
.sc-stage-head {bottom:282px;}
.sc-path-note {margin-bottom:7px;}
@media(max-width:759px){.sc-stage-head{bottom:280px;}}

/* Video feedback: hierarchy, full-size ramp preview, and a common baseline. */
#inst-ramps {--panel-bottom:24px;--palette-height:210px;}
.sc-stage-key {top:103px;flex-direction:column;align-items:flex-start;gap:5px;}
.sc-stage-key>span:last-child {flex-basis:auto;}
.sc-controls {bottom:var(--panel-bottom);max-height:none;}
.sc-palette-section {bottom:var(--panel-bottom);}
.sc-gradient {height:39px;}
.sc-stage-head {bottom:calc(var(--panel-bottom) + var(--palette-height) + 36px);}
.sc-plane-controls {border-top:1px solid var(--line);padding-top:12px;margin-top:12px;}
.sc-plane-controls p {font-size:10px;line-height:1.5;color:var(--muted);margin:7px 0 12px;}
.sc-mapping {border-top-style:solid;border-image:linear-gradient(90deg,#b24cab,#d298b4) 1;}
@media(max-width:759px){#inst-ramps{--panel-bottom:62px;}.sc-gradient{height:34px;}.sc-controls{bottom:calc(var(--panel-bottom) + var(--palette-height) + 35px);max-height:50vh;}.sc-stage-key{top:82px;}.sc-stage-key>span{display:flex;}.sc-stage-head{bottom:calc(var(--panel-bottom) + var(--palette-height) + 36px);}}

/* View tools share a row above the palette, wrapping only when needed. */
.sc-view-tools {position:absolute;left:28px;right:328px;bottom:calc(var(--panel-bottom) + var(--palette-height) + 32px);z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;}
.sc-view-tools .sc-stage-head {position:static;flex:0 1 auto;}
.sc-view-tools .sc-scene-caption {position:static;display:flex;flex:0 1 auto;margin-left:auto;justify-content:flex-end;flex-wrap:wrap;text-align:right;gap:5px 16px;}
.sc-scene-caption .sc-shell {display:flex;}
.sc-panels-hidden .sc-view-tools {visibility:hidden;pointer-events:none;}
/* Grow only as far as the content requires, then scroll at the palette edge. */
.sc-controls {bottom:auto;max-height:calc(100% - 24px - var(--panel-bottom));}
@media(max-width:759px){
  .sc-view-tools {left:16px;right:16px;}
  .sc-controls {bottom:auto;max-height:min(50vh,calc(100% - 89px - var(--panel-bottom) - var(--palette-height) - 35px));}
}

/* Filled sliders share the neutral palette of the floating controls. */
#inst-ramps .filled-slider {--slider-well:var(--well);--slider-ink:color-mix(in srgb,var(--ink) 13%,var(--well));font-size:11px;color:var(--ink);}
#inst-ramps .sc-range.filled-slider {display:flex;padding:0 10px;margin-bottom:6px;gap:10px;}
#inst-ramps .sc-step-control.filled-slider {width:145px;flex-shrink:0;}
#inst-ramps .filled-slider input[type=range] {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:ew-resize;}
#inst-ramps .filled-slider output {font:11px var(--sc-mono);color:var(--ink);margin-left:auto;}
/* Controls panel refined in Figma: compact, consistent rows. */
.sc-controls .sc-control-heading .sc-label {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;font-weight:600;letter-spacing:.45px;}
.sc-controls .sc-field {position:relative;min-height:31px;margin:0 0 10px;padding:0 11px;background:var(--well);border-radius:5px;gap:8px;}
#inst-ramps .sc-controls .sc-field select {appearance:none;max-width:none;flex:1;width:0;padding:8px 19px 8px 0;background:transparent;border:0;text-align:right;cursor:pointer;}
.sc-controls .sc-field::after {content:'';position:absolute;right:11px;top:13px;width:10px;height:6px;background:var(--ink);mask:url('../assets/controls-chevron.svg') center/contain no-repeat;pointer-events:none;}
.sc-controls .sc-anchor-head {margin-top:13px;}
.sc-controls .sc-anchors {display:flex;flex-direction:column;gap:10px;margin:10px 0 15px;}
.sc-anchor-row {display:flex;height:31px;flex-shrink:0;border-radius:5px;overflow:hidden;background:var(--well);}
.sc-anchor-row[data-selected=true] {outline:2px solid var(--line);outline-offset:-2px;}
#inst-ramps .sc-anchor-row button {border:0;border-radius:0;background:transparent;font:11px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:0 11px;}
#inst-ramps .sc-anchor-row button[data-anchor-action=select] {flex:1;text-align:left;}
#inst-ramps .sc-anchor-row .sc-anchor-more {width:28px;justify-content:center;padding:0;font-size:19px;color:var(--muted);}
#inst-ramps .sc-anchor-row .sc-anchor-swatch {width:72px;flex-shrink:0;padding:0;border-radius:2px;}
#inst-ramps .sc-anchor-row button:focus-visible {outline:2px solid var(--ink);outline-offset:-3px;}
#inst-ramps #sc-add {display:block;margin-bottom:17px;}
.sc-controls .sc-anchor-editor {margin:0;}
.sc-controls .sc-environment {margin-top:15px;}
.sc-anchor-popup {position:fixed;inset:auto;margin:0;width:252px;max-width:calc(100vw - 24px);padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 10px 40px #0003;font:11px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.sc-anchor-popup::backdrop {background:#0000000a;}
.sc-anchor-popup header {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
#inst-ramps .sc-anchor-popup button {background:var(--well);border:0;border-radius:5px;padding:6px 9px;}
.sc-anchor-popup label {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sc-anchor-popup .sc-visual-color {margin-bottom:12px;}
#inst-ramps .sc-anchor-popup input[type=color] {width:95px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;}
#inst-ramps .sc-anchor-popup input[type=text],#inst-ramps .sc-anchor-popup input[type=number] {width:100%;min-width:0;border:1px solid var(--line);background:var(--well);padding:7px;border-radius:5px;font:11px var(--sc-mono);}
#inst-ramps .sc-picker-hex input {max-width:150px;}
.sc-rgb-inputs {display:flex;gap:8px;margin-top:12px;}
.sc-rgb-inputs label {flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;}
.sc-anchor-menu {width:180px;display:none;}
.sc-anchor-menu[open] {display:grid;gap:6px;}
.sc-anchor-menu p {font-size:10px;color:var(--muted);margin:0 0 5px;}

.sc-picker-field {position:relative;height:150px;border-radius:5px;margin-bottom:10px;touch-action:none;cursor:crosshair;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);}
.sc-picker-field i {position:absolute;width:10px;height:10px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0008;transform:translate(-50%,-50%);pointer-events:none;}
.sc-picker-field:focus-visible {outline:2px solid var(--ink);outline-offset:3px;}
.sc-anchor-popup .sc-visual-color {margin-top:10px;}

/* Legend, view readout and actions form one column beside the volume. */
.sc-view-tools {top:62px;bottom:auto;left:28px;right:auto;width:190px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;max-height:calc(100% - var(--panel-bottom) - var(--palette-height) - 138px);overflow:auto;scrollbar-width:thin;}
.sc-view-tools .sc-stage-key {position:static;max-width:none;gap:5px;flex-shrink:0;}
.sc-view-tools>div:nth-child(2) {display:flex;flex-direction:column;gap:4px;}
.sc-view-tools .sc-stage-sub {max-width:180px;line-height:1.5;}
.sc-view-tools .sc-coordinate {max-width:180px;line-height:1.7;}
.sc-view-toggles {display:flex;flex-direction:column;gap:10px;}
.sc-view-tools .sc-view-actions {display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.sc-panels-hidden .sc-view-tools {visibility:hidden;}
@media(max-width:759px){.sc-view-tools{left:16px;top:82px;width:160px;gap:12px;max-height:calc(100% - var(--panel-bottom) - var(--palette-height) - 115px);}}

.sc-view-tools #sc-scene-note {white-space:pre-line;}
.sc-view-tools {flex-wrap:nowrap;}
.sc-view-tools>div {flex-shrink:0;}
@media(max-height:800px){.sc-view-tools{gap:8px;}.sc-view-tools .sc-coordinate{line-height:1.5;}}

/* View settings live with the color controls. */
.sc-settings {margin-top:15px;padding-top:13px;border-top:1px solid var(--line);}
.sc-settings h2 {font:11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0 0 13px;color:var(--ink);}
.sc-settings-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;}
#inst-ramps .sc-settings-grid button {min-height:31px;text-align:left;padding:8px 10px;background:var(--well);border:0;border-radius:5px;font-size:11px;line-height:1.4;}
#inst-ramps .sc-settings-grid button[aria-pressed=true] {background:color-mix(in srgb,var(--ink) 13%,var(--well));}
#inst-ramps .sc-settings-grid button:focus-visible {outline:2px solid var(--muted);outline-offset:2px;}
#inst-ramps .sc-settings-grid button:disabled {opacity:.4;cursor:default;}
.sc-settings .sc-plane-controls {margin-top:12px;padding-top:0;border:0;}

/* Quiet, non-interactive locator for the current lightness cross-section. */
.sc-plane-indicator {position:absolute;left:28px;bottom:calc(var(--panel-bottom) + var(--palette-height) + 28px);width:180px;height:174px;z-index:2;pointer-events:none;user-select:none;color:#656565;}
.sc-plane-indicator svg {display:block;width:100%;height:100%;overflow:visible;}
.sc-plane-indicator text {fill:currentColor;font:9px var(--sc-mono);}
.sc-plane-indicator .sc-mini-title {font-size:8px;letter-spacing:.5px;}
#inst-ramps[data-dark=true] .sc-plane-indicator {color:#b0b0b0;}
.sc-panels-hidden .sc-plane-indicator {visibility:hidden;}
@media(max-height:800px){.sc-plane-indicator{width:140px;height:135px;bottom:calc(var(--panel-bottom) + var(--palette-height) + 8px);}}
@media(max-width:759px){.sc-plane-indicator{left:16px;width:125px;height:121px;}}

/* Palette follows the Controls panel's header, wells and state buttons. */
.sc-palette-section {border-radius:12px;padding:0 14px 15px;box-shadow:0 8px 28px #17200c08;}
.sc-palette-head {min-height:46px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:15px;gap:12px;}
.sc-palette-head .sc-label {font:600 12px/15px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.45px;color:var(--muted);}
#sc-ramp-desc {font:11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--muted);text-align:right;}
.sc-palette-actions {display:flex;align-items:stretch;gap:8px;border-top:1px solid var(--line);margin-top:13px;padding-top:13px;flex-wrap:wrap;}
#inst-ramps .sc-palette-actions .filled-slider {width:145px;min-height:38px;font-size:11px;}
#inst-ramps .sc-palette-actions button {min-height:38px;padding:8px 11px;border:0;border-radius:7px;background:var(--well);color:var(--ink);font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:left;}
#inst-ramps .sc-palette-actions button[aria-pressed=true] {background:color-mix(in srgb,var(--ink) 13%,var(--well));}
#inst-ramps .sc-palette-actions button:focus-visible {outline:2px solid var(--muted);outline-offset:2px;}
@media(max-width:759px){.sc-palette-section{padding:0 10px 10px;}.sc-palette-head{padding:10px 0;min-height:38px;margin-bottom:10px;}.sc-palette-actions{gap:6px;margin-top:9px;padding-top:9px;}#inst-ramps .sc-palette-actions .filled-slider{width:100%;}#inst-ramps .sc-palette-actions button{flex:1;}}

/* Keep the palette sections separated by spacing only. */
.sc-palette-head {border-bottom:0;}
.sc-palette-actions {border-top:0;}
.sc-palette-head {min-height:38px;padding:10px 0;margin-bottom:8px;}
.sc-palette-actions {margin-top:8px;padding-top:0;}

/* Match the dropdown spacing around the hue-arc-only slider. */
#inst-ramps #sc-bow-field {margin:0 0 10px;}

/* Author credit and inline palette gamut status. */
.sc-credit {line-height:1.5;}
.sc-credit a {color:inherit;text-decoration:none;pointer-events:auto;}
.sc-credit a:hover {text-decoration:underline;}
.sc-palette-actions #sc-gamut-note {align-self:center;padding:8px 11px;color:var(--muted);font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

/* Align desktop actions with the palette, retaining their clearance below Controls. */
@media(min-width:760px){
  .sc-toolbar {bottom:var(--panel-bottom);}
  .sc-controls {max-height:calc(100% - 24px - var(--panel-bottom) - 64px);}
}

/* A consistent desktop inset around the workspace. */
@media(min-width:760px){
  .sc-heading,.sc-view-tools,.sc-plane-indicator {left:24px;}
}