*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252832;background:#f7f8fa;font-synthesis:none;--line:#e3e5e9;--muted:#5f6673;--accent:#4169dc}body{margin:0;font-size:.875rem;line-height:1.5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[role=slider]:focus-visible{outline:.1875rem solid #809ff2;outline-offset:.1875rem}button{color:inherit}header{height:5.125rem;display:flex;align-items:center;justify-content:space-between;padding:0 2.25rem;border-bottom:.0625rem solid var(--line);background:#fff}.brand{display:flex;gap:.75rem;align-items:center;color:#252832;text-decoration:none;font-size:1.75rem;font-weight:700;letter-spacing:-.09375rem}.brand-caption{font-size:.625rem;letter-spacing:.1125rem;font-weight:500;margin-left:1.375rem;color:var(--muted)}.brand-mark{position:relative;width:1.75rem;height:1.875rem;display:block}.brand-mark i{position:absolute;width:1.3125rem;height:1.3125rem;background:#436bdf;border-radius:50%;left:0;top:0}.brand-mark i+i{top:.625rem;left:.5625rem;background:#e59c78;mix-blend-mode:multiply}.header-right{display:flex;align-items:center;gap:1.625rem}.local-label{font-size:.75rem;color:var(--muted)}.button{display:inline-flex;align-items:center;gap:.9375rem;justify-content:center;padding:.625rem 1rem;background:#fff;border:.0625rem solid #d9dce3;border-radius:.4375rem;font-size:.8125rem;font-weight:550;white-space:nowrap;transition:.15s}.button:hover{background:#f1f3f7}.primary{background:#292e3a;color:white;border-color:#292e3a}.primary:hover{background:#414958}.workspace{display:grid;grid-template-columns:16.5625rem minmax(0,1fr)}aside{padding:2.125rem 1.5625rem;background:#fff;border-right:.0625rem solid var(--line)}.section-kicker{margin:0;font-size:.625rem;letter-spacing:.10625rem;font-weight:650;color:#59616e}h1,h2,p{margin:0}h1{font-size:1.8125rem;letter-spacing:-.0625rem;font-weight:580;margin:.4375rem 0}h2{font-size:1.1875rem;letter-spacing:-.03125rem;font-weight:580;margin:.5625rem 0}.muted{color:var(--muted);font-size:.875rem}aside .muted{line-height:1.6}label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;font-weight:550}output{font-family:ui-monospace,SFMono-Regular,monospace;font-weight:400;color:#5f6673;font-size:.6875rem}.settings{margin-top:2.1875rem}.settings>label:not(:first-child){margin-top:1.75rem}.hint{font-size:.6875rem;color:var(--muted);line-height:1.65}.settings .hint{margin-top:.5625rem}input[type=range]{width:100%;height:.25rem;margin:1.125rem 0 .375rem;accent-color:#4b6bd5;cursor:pointer}input[type=range]::-webkit-slider-thumb{height:.8125rem;width:.8125rem}select,input[type=text]{background:#fff;border:.0625rem solid #dce0e7;border-radius:.3125rem;min-height:2.25rem;padding:.4375rem .5625rem;font-size:.75rem;color:#353c4a;width:100%;margin-top:.5625rem}select{cursor:pointer}.control{margin-top:1.5rem}.sidebar-note{display:flex;gap:.625rem;border-top:.0625rem solid var(--line);margin-top:2.1875rem;padding-top:1.5rem;color:#5f6673;font-size:.6875rem;line-height:1.7}.tiny-icon{font-size:1.375rem;color:#566176}.text-button{background:none;border:none;padding:0;font-size:.6875rem;color:#5c6474}.text-button:hover{text-decoration:underline}#method-open{margin-top:1.0625rem}#save-status{margin-top:2.1875rem;font-size:.625rem}main{padding:2rem 2.25rem 1rem;max-width:109.375rem;width:100%;margin:0 auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5625rem}.page-heading .muted{font-size:.8125rem}.palette-toolbar{display:flex;justify-content:space-between;margin:1.9375rem 0 1.0625rem;font-size:.6875rem;color:#5f6673}.separator{margin:0 .5625rem;color:#c2c7d0}.palette-row{display:grid;grid-template-columns:5.5625rem minmax(0,1fr);gap:1rem;padding:.8125rem 0}.palette-select{border:0;background:none;text-align:left;align-self:center;padding:.5625rem 0;display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:550}.palette-select .dot{height:.5rem;width:.5rem;border-radius:50%;flex-shrink:0}.palette-select .edit-dot{margin-left:auto;color:#8b94a5;opacity:0}.palette-row.selected .palette-select .edit-dot{opacity:1}.palette-row.selected .palette-select{color:#3d62cc}.swatches{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:.25rem;min-width:0}.swatch{border:0;padding:0;background:none;min-width:0;position:relative;text-align:left}.swatch-color{height:4.125rem;border-radius:.3125rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;box-shadow:inset 0 0 0 .0625rem #00000004;transition:transform .12s}.swatch-color .copy-icon{width:1.5rem;height:1.5rem;display:block;opacity:0;fill:currentColor;transition:opacity .12s ease}.swatch:hover .swatch-color{transform:translateY(-.1875rem)}.swatch:hover .swatch-color .copy-icon,.swatch:focus-visible .swatch-color .copy-icon{opacity:1}.swatch-label{font-size:.625rem;display:block;margin-top:.4375rem;color:#59616e}.swatch-hex{font-size:.5625rem;font-family:ui-monospace,SFMono-Regular,monospace;color:#9096a0;display:block;margin-top:.125rem;overflow:hidden;text-overflow:ellipsis}.editor{background:#fff;border:.0625rem solid var(--line);border-radius:.5625rem;margin-top:1.6875rem;padding:1.3125rem 1.4375rem}.editor-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1875rem}.editor-heading h2{margin:.125rem 0 0;font-size:1.125rem}.editor-heading .section-kicker{font-size:.5625rem}.editor-actions{display:flex;align-items:center;gap:1.3125rem}.icon-button{border:0;background:transparent;font-size:1.3125rem;color:#8590a0;padding:.1875rem .5rem}.editor-grid{display:grid;grid-template-columns:1fr 1.25fr .9fr;gap:1.625rem}.edit-column+.edit-column{border-left:.0625rem solid var(--line);padding-left:1.625rem}.edit-column .control{margin-top:1.0625rem}.dual-control{display:grid;grid-template-columns:1fr 1fr;gap:.9375rem;margin-top:1.0625rem}.dual-control label{font-size:.625rem}.hue-range{appearance:none;background:linear-gradient(to right,#e45278,#d99c38,#74af40,#36ad90,#378dcc,#9565d8,#e45278);border-radius:.3125rem}.hue-preview{height:.3125rem;margin-top:.9375rem;border-radius:.3125rem}.tag{border:.0625rem solid #e4e7ec;border-radius:.25rem;font-size:.5625rem;padding:.125rem .375rem;color:#5f6673;font-weight:400}#curve{width:100%;height:7.1875rem;margin-top:.5625rem;overflow:visible;touch-action:none}#curve circle{cursor:ns-resize;stroke:#fff;stroke-width:3}#curve circle:hover{stroke:#ccd6f5;stroke-width:5}.curve-labels{display:flex;justify-content:space-between;font-size:.5625rem;color:#59616e;margin-bottom:.9375rem}.chroma-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.chroma-controls label{font-size:.625rem}.chroma-controls output{font-size:.5625rem}.chroma-controls input{margin-top:.5625rem}.curve-column .hint{margin-top:.625rem;font-size:.625rem}.edit-column>.hint{margin-top:.8125rem;font-size:.625rem}.gamut-note{border:.0625rem solid #e3e8f0;border-radius:.375rem;margin-top:1.3125rem;padding:.75rem;font-size:.6875rem;line-height:1.65;color:#5f6673;background:#f8faff}.comparison{margin-top:2.0625rem}.comparison-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.125rem}.comparison-heading h2{margin:.25rem 0 0;font-size:1.1875rem}.compare-controls{display:flex;align-items:center;gap:.625rem}.compare-controls label{font-size:.6875rem;color:#5f6673}.compare-controls select{width:4.25rem;margin:0}.segmented{display:flex;border:.0625rem solid #dce0e7;padding:.1875rem;border-radius:.375rem;background:#eceff3;margin-left:.625rem}.segmented button{border:0;background:transparent;border-radius:.25rem;padding:.3125rem .625rem;color:#5f6673;font-size:.6875rem}.segmented button[aria-pressed=true]{background:#fff;color:#303744;box-shadow:0 .0625rem .1875rem #0001}#compare-cards{display:grid;grid-template-columns:repeat(var(--palettes),minmax(0,1fr));gap:.75rem}.compare-card{border:.0625rem solid var(--line);border-radius:.4375rem;background:#fff;overflow:hidden}.compare-surface{padding:1.375rem 1.125rem;min-height:7.8125rem}.compare-sample{display:flex;align-items:center;gap:.8125rem}.compare-sample span{font-size:2.3125rem;letter-spacing:-.09375rem;font-weight:600}.compare-block{width:2.6875rem;height:2.6875rem;border-radius:.5625rem;flex-shrink:0}.compare-surface p{font-size:.6875rem;margin-top:.625rem}.compare-meta{padding:.75rem .875rem;display:flex;align-items:center;justify-content:space-between;font-size:.6875rem;gap:.3125rem}.compare-meta strong{font-size:.8125rem;font-family:ui-monospace,SFMono-Regular,monospace;font-weight:500}.badge{font-size:.5625rem;color:#516070;background:#edf2f6;padding:.1875rem .375rem;border-radius:.25rem;white-space:nowrap}.badge.pass{color:#277253;background:#e9f4ed}.compare-values{padding:0 .875rem .6875rem;color:#5f6673;font-size:.5625rem;font-family:ui-monospace,SFMono-Regular,monospace}#compare-note{margin-top:.75rem;font-size:.625rem}footer{display:flex;justify-content:space-between;border-top:.0625rem solid var(--line);margin-top:1.875rem;padding-top:1rem;font-size:.625rem;color:#5f6673}#toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,.9375rem);background:#272e3a;color:#fff;box-shadow:0 .3125rem 1.5625rem #0002;border-radius:.5rem;padding:.75rem 1.375rem;opacity:0;pointer-events:none;transition:.2s;z-index:10;font-size:.8125rem}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(38.75rem,calc(100% - 2rem));max-height:85vh;border:.0625rem solid var(--line);padding:1.75rem;border-radius:.75rem;box-shadow:0 1.5625rem 6.25rem #0003;color:#454e5c}dialog::backdrop{background:#202c4855;backdrop-filter:blur(.1875rem)}.dialog-top{display:flex;justify-content:space-between;align-items:center}dialog p{font-size:.875rem;line-height:1.7;margin-top:1.125rem}.sources{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:1.375rem}.sources a{color:#3e63cb;font-size:.75rem}@media(min-width:93.75rem){.swatch-color{height:5.3125rem}main{padding-left:3rem;padding-right:3rem}.swatch-hex{font-size:.6875rem}.editor{margin-top:2rem}#curve{height:8.4375rem}}@media(max-width:71.875rem){.workspace{grid-template-columns:14.375rem minmax(0,1fr)}main{padding:1.75rem 1.5rem}.brand-caption{display:none}.page-heading{align-items:flex-start}h1{font-size:1.5rem}.page-heading .button{font-size:.6875rem;padding:.5625rem}.editor-grid{grid-template-columns:1fr 1.2fr}.edit-column:last-child{grid-column:1/-1;border-left:0;border-top:.0625rem solid var(--line);padding:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}.edit-column:last-child input{grid-column:1}.edit-column:last-child .gamut-note{grid-column:2;grid-row:1/4;margin:0}.edit-column:last-child>.hint:last-child{grid-column:1/-1}.palette-row{grid-template-columns:4.0625rem minmax(0,1fr);gap:.625rem}.swatch-hex{display:none}#compare-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-heading{gap:.9375rem;align-items:flex-start;flex-direction:column}.swatch-color{height:3.5625rem}}@media(max-width:47.5rem){header{height:4.125rem;padding:0 1.125rem}.local-label{display:none}.brand{font-size:1.5625rem}.header-right .button{font-size:.6875rem}.workspace{display:flex;flex-direction:column}aside{order:2;padding:1.5rem;border-right:0;border-top:.0625rem solid var(--line)}main{padding:1.5625rem 1.125rem;order:1}.page-heading{flex-direction:column;gap:.9375rem}.page-heading .button{font-size:.75rem}h1{font-size:1.5625rem}.page-heading .muted{font-size:.75rem}.palette-toolbar{margin-top:1.5rem}.palette-row{grid-template-columns:1fr;gap:.3125rem;padding:.625rem 0}.palette-select{padding:0}.palette-select .edit-dot{margin-left:.25rem}.swatch-color{height:3.3125rem}.swatches{gap:.1875rem;overflow-x:auto;padding-top:.25rem;padding-bottom:.1875rem;grid-template-columns:repeat(var(--count),minmax(1.5625rem,1fr))}.swatch-label{font-size:.5625rem}.editor{padding:1.125rem .9375rem}.editor-grid{grid-template-columns:1fr;gap:1.4375rem}.edit-column+.edit-column{padding:1.25rem 0 0;border-left:0;border-top:.0625rem solid var(--line)}.edit-column:last-child{display:block;grid-column:auto}.edit-column:last-child .gamut-note{margin-top:.9375rem}#curve{height:8.75rem}.compare-surface{padding:1.0625rem .75rem}.compare-meta{padding:.625rem}.compare-meta strong{font-size:.6875rem}.compare-values{padding:0 .625rem .625rem}.comparison-heading{gap:1.125rem}footer{font-size:.5625rem;gap:.9375rem}.settings{display:grid;grid-template-columns:1fr;max-width:31.25rem}.sidebar-note{max-width:31.25rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Readable working controls; compact typography is reserved for swatch metadata. */
body{font-size:1rem}label,.button,.text-button,select,input[type=text],.palette-select{font-size:.875rem}output,.hint,.local-label,.sidebar-note,.settings .hint,.edit-column>.hint,.curve-column .hint,.gamut-note,.compare-controls label,.compare-controls select,.segmented button,.compare-meta,.compare-values,#compare-note,.palette-toolbar,#save-status,footer{font-size:.75rem}.section-kicker,.brand-caption,.editor-heading .section-kicker{font-size:.75rem}.dual-control label,.chroma-controls label{font-size:.75rem}.chroma-controls output{font-size:.75rem}.swatch-label,.swatch-hex{font-size:.75rem}.curve-labels,.tag,.badge{font-size:.75rem}.compare-surface p{font-size:.875rem}.compare-surface{min-height:9rem}.compare-meta{flex-wrap:wrap}.page-heading .muted{font-size:.875rem}.edit-column label{flex-wrap:wrap;row-gap:.125rem}.sources a{font-size:.875rem}.muted{line-height:1.6}.editor-grid{column-gap:1.375rem}.edit-column+.edit-column{padding-left:1.375rem}.hue-preview{margin-top:1.125rem}
@media(max-width:84.375rem) and (min-width:71.9375rem){.editor-grid{grid-template-columns:1fr 1.2fr}.edit-column:last-child{grid-column:1/-1;border-left:0;border-top:.0625rem solid var(--line);padding:1.125rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}.edit-column:last-child input{grid-column:1}.edit-column:last-child .gamut-note{grid-column:2;grid-row:1/4;margin:0}.edit-column:last-child>.hint:last-child{grid-column:1/-1}}
@media(max-width:71.875rem){.swatch-hex{display:none}.page-heading{flex-wrap:wrap}.page-heading .button{font-size:.875rem}.edit-column:last-child{padding-left:0}}
@media(max-width:47.5rem){.edit-column+.edit-column{padding-left:0}.page-heading .button{font-size:.875rem}.header-right .button{font-size:.75rem}.swatch-label{font-size:.75rem}.swatches{grid-template-columns:repeat(var(--count),minmax(2rem,1fr))}.compare-meta strong{font-size:.875rem}.compare-values{font-size:.75rem}footer{font-size:.75rem}.chroma-controls label{font-size:.875rem}.comparison-heading h2{font-size:1.25rem}}

.hue-curvature{border-top:.0625rem solid var(--line);margin-top:1.375rem;padding-top:1.125rem}.hue-curve-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;font-weight:550}.hue-curve-heading .text-button{font-size:.75rem}#hue-curve{width:100%;height:6.875rem;display:block;margin-top:.625rem}.hue-anchors{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}.hue-anchors span:nth-child(2){text-align:center}.hue-anchors span:last-child{text-align:right}.hue-anchors strong{font-weight:500;font-family:ui-monospace,SFMono-Regular,monospace;color:#515d70}.hue-curvature .hue-preview{height:.5625rem;margin-top:.625rem}.hue-curvature .control{margin-top:1rem}.hue-curvature label{font-size:.8125rem}.hue-curvature output{font-size:.75rem}.hue-curvature .hint{margin-top:.875rem;font-size:.75rem}

/* Keep HEX and HSL readable at every width; dense ramps scroll within their row. */
.swatches{grid-template-columns:repeat(var(--count),minmax(4.125rem,1fr));overflow-x:auto;padding-top:.25rem;padding-bottom:.5rem}.swatch-hex{display:block;white-space:nowrap;color:#687384}.swatch-hsl{display:flex;flex-direction:column;gap:.125rem;margin-top:.4375rem;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.75rem;line-height:1.45;color:#687384;white-space:nowrap}.swatch-hsl span{display:block}.palette-select{align-self:start;margin-top:.9375rem}

.saturation-control{margin-top:1.5rem;padding-top:1.25rem;border-top:.0625rem solid var(--line)}.saturation-inputs{display:flex;align-items:center;gap:1rem;margin-top:.75rem}.saturation-inputs input[type=range]{flex:1;min-width:0;margin:0}.saturation-inputs input[type=number]{width:5.125rem;border:.0625rem solid #dce0e7;border-radius:.3125rem;padding:.4375rem .5625rem;background:white;color:#353c4a;font-size:.875rem}#saturation-result{color:#53657d}

.header-right{gap:.75rem}@media(max-width:26.25rem){header{padding:0 .75rem}.header-right{gap:.375rem}.header-right .button{padding:.5rem .625rem}.brand{font-size:1.3125rem;gap:.5625rem}}

.sr-only{position:absolute!important;width:.0625rem!important;height:.0625rem!important;padding:0!important;margin:-.0625rem!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.settings{margin-top:1.6875rem}.page-heading{min-height:2.5rem}.editor-title-row{display:flex;align-items:center;gap:.75rem;margin-top:.25rem}.editor-title-row h2{margin:0}.editor-title-row select{width:auto;min-width:8.125rem;margin:0;padding:.3125rem 1.875rem .3125rem .5625rem;min-height:2rem}.editor-preview{display:grid;grid-template-columns:repeat(var(--preview-count,10),minmax(1.625rem,1fr));overflow:hidden;border-radius:.4375rem;margin:-.1875rem 0 1.5rem;border:.0625rem solid #0000000a}.editor-preview-swatch{height:2.75rem;border:0;padding:0;display:flex;align-items:flex-end;justify-content:center}.editor-preview-swatch span{font-size:.5625rem;padding:.1875rem .125rem;text-shadow:0 .0625rem .125rem #0005}.hue-range{height:.5rem!important;margin:2.875rem 0 2.375rem!important}.hue-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--hue-thumb,#4169dc);border:.25rem solid #fff;box-shadow:0 0 0 .0625rem #9da6b4,0 .1875rem .5rem #0004}.hue-range::-moz-range-thumb{width:3.75rem;height:3.75rem;border-radius:50%;background:var(--hue-thumb,#4169dc);border:.25rem solid #fff;box-shadow:0 0 0 .0625rem #9da6b4,0 .1875rem .5rem #0004}.hex-control{display:flex;align-items:center;gap:.375rem}.hex-control input[type=text]{width:5.75rem;margin:0;min-height:2.125rem;font-family:ui-monospace,SFMono-Regular,monospace}.hex-control input[type=color]{width:2.375rem;height:2.125rem;border:.0625rem solid #dce0e7;border-radius:.3125rem;background:#fff;padding:.1875rem;cursor:pointer}.compare-controls{flex-wrap:wrap}.comparison-heading>.section-kicker{align-self:center}@media(max-width:47.5rem){.editor-heading{align-items:flex-start}.editor-title-row{align-items:flex-start;flex-direction:column;gap:.375rem}.editor-title-row select{min-width:10rem}.editor-preview{overflow-x:auto;grid-template-columns:repeat(var(--preview-count,10),minmax(2.75rem,1fr))}.compare-controls{width:100%}.segmented{margin-left:0}}

/* Application theme. Dark is the default and never uses a surface below #222222. */
:root{color-scheme:light}.theme-toggle{width:2.625rem;height:2.625rem;padding:0;gap:0}.theme-icon{font-size:1.125rem;line-height:1}.figma-button{gap:.5625rem}.header-right>.figma-button{width:2.625rem;height:2.625rem;padding:0;gap:0}.figma-icon{width:1.5rem;height:1.5rem;flex:0 0 auto}.figma-icon path{fill:currentColor}
:root[data-theme=dark]{color-scheme:dark;color:#f2f2f2;background:#222222;--line:#44464b;--muted:#afb2ba;--accent:#8ca7ff}
:root[data-theme=dark] body{background:#222222;color:#f2f2f2}
:root[data-theme=dark] header,:root[data-theme=dark] aside{background:#292929}
:root[data-theme=dark] .brand{color:#f7f7f7}
:root[data-theme=dark] .brand-mark i+i{mix-blend-mode:normal}
:root[data-theme=dark] .button,:root[data-theme=dark] select,:root[data-theme=dark] input[type=text],:root[data-theme=dark] input[type=number]{background:#303030;border-color:#505258;color:#f2f2f2}
:root[data-theme=dark] .button:hover{background:#3a3a3a}
:root[data-theme=dark] .primary{background:#5574d4;border-color:#5574d4;color:#ffffff}
:root[data-theme=dark] .primary:hover{background:#6683dc}
:root[data-theme=dark] .editor,:root[data-theme=dark] .compare-card{background:#292929}
:root[data-theme=dark] .section-kicker,:root[data-theme=dark] output,:root[data-theme=dark] .hint,:root[data-theme=dark] .muted,:root[data-theme=dark] .palette-toolbar,:root[data-theme=dark] footer,:root[data-theme=dark] .compare-controls label{color:#afb2ba}
:root[data-theme=dark] .text-button{color:#c5c8d0}
:root[data-theme=dark] .tiny-icon,:root[data-theme=dark] .icon-button{color:#b7bdca}
:root[data-theme=dark] .palette-row.selected .palette-select{color:#9bb1ff}
:root[data-theme=dark] .palette-select .edit-dot{color:#aeb5c3}
:root[data-theme=dark] .swatch-label,:root[data-theme=dark] .swatch-hex,:root[data-theme=dark] .swatch-hsl{color:#b7bac1}
:root[data-theme=dark] .tag{border-color:#4b4d52;color:#b7bac1}
:root[data-theme=dark] .curve-labels,:root[data-theme=dark] .hue-anchors{color:#afb2ba}
:root[data-theme=dark] .hue-anchors strong{color:#e2e3e7}
:root[data-theme=dark] .gamut-note{background:#2d3139;border-color:#454b57;color:#bdc5d3}
:root[data-theme=dark] .segmented{background:#252525;border-color:#4a4c51}
:root[data-theme=dark] .segmented button{color:#b9bcc4}
:root[data-theme=dark] .segmented button[aria-pressed=true]{background:#3a3a3a;color:#f5f5f5;box-shadow:0 .0625rem .1875rem #222222}
:root[data-theme=dark] .compare-values{color:#b3b7c0}
:root[data-theme=dark] .badge{color:#c4ccd8;background:#363b44}
:root[data-theme=dark] .badge.pass{color:#9ed9ba;background:#294238}
:root[data-theme=dark] #saturation-result{color:#bac7dc}
:root[data-theme=dark] .saturation-inputs input[type=number]{background:#303030;border-color:#505258;color:#f2f2f2}
:root[data-theme=dark] .hex-control input[type=color]{background:#303030;border-color:#505258}
:root[data-theme=dark] #toast{background:#343434;color:#ffffff;box-shadow:0 .3125rem 1.5625rem #222222}
:root[data-theme=dark] dialog{background:#292929;border-color:#4b4d52;color:#e2e3e7;box-shadow:0 1.5625rem 6.25rem #222222}
:root[data-theme=dark] dialog::backdrop{background:#222222cc}
:root[data-theme=dark] .sources a{color:#9bb1ff}
:root[data-theme=dark] #curve line,:root[data-theme=dark] #hue-curve line{stroke:#44464b!important}
:root[data-theme=dark] #curve circle,:root[data-theme=dark] #hue-curve circle{stroke:#292929!important}
:root[data-theme=dark] .hue-range::-webkit-slider-thumb{border-color:#292929;box-shadow:0 0 0 .0625rem #858b98,0 .125rem .3125rem #222222}
:root[data-theme=dark] .hue-range::-moz-range-thumb{border-color:#292929;box-shadow:0 0 0 .0625rem #858b98,0 .125rem .3125rem #222222}
@media(max-width:35rem){.theme-toggle{width:2.375rem;height:2.375rem;padding:0!important}}

/* Inline palette editor and optional swatch metadata. */
.palette-group{min-width:0}.palette-chevron{margin-left:auto;font-size:1.0625rem;line-height:1;transition:transform .18s}.palette-select[aria-expanded=true] .palette-chevron{transform:rotate(180deg)}.palette-group>.editor-slot>.editor{margin:.5rem 0 1.4375rem 6.5625rem}.editor[hidden],#editor-parking{display:none!important}
.display-options{display:flex;align-items:center;gap:.3125rem;flex-wrap:wrap;justify-content:flex-end}.display-options>span{margin-right:.25rem;color:var(--muted)}.display-options button{border:.0625rem solid #dce0e7;border-radius:.3125rem;background:#ffffff;color:#6d7480;font-size:.6875rem;line-height:1;padding:.375rem .5rem}.display-options button:hover{background:#f1f3f7}.display-options button[aria-pressed=true]{border-color:#7996eb;background:#eaf0ff;color:#3157c4}
.swatch-label,.swatch-hex,.swatch-hsl,.swatch-rgb{display:none!important}.show-levels .swatch-label{display:block!important}.show-hex .swatch-hex{display:block!important}.show-hsl .swatch-hsl,.show-rgb .swatch-rgb{display:flex!important}.swatch-rgb{flex-direction:column;gap:.125rem;margin-top:.4375rem;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.75rem;line-height:1.45;color:#687384;white-space:nowrap}.swatch-rgb span{display:block}.swatches{grid-template-columns:repeat(var(--count),minmax(2.375rem,1fr))}.has-metadata .swatches{grid-template-columns:repeat(var(--count),minmax(4.125rem,1fr))}
:root[data-theme=dark] .display-options button{background:#303030;border-color:#505258;color:#b9bcc4}:root[data-theme=dark] .display-options button:hover{background:#3a3a3a}:root[data-theme=dark] .display-options button[aria-pressed=true]{background:#35405e;border-color:#718ddd;color:#dbe4ff}:root[data-theme=dark] .swatch-rgb{color:#b7bac1}
@media(max-width:47.5rem){.palette-group>.editor-slot>.editor{margin-left:0}.palette-toolbar{align-items:flex-start;gap:.75rem;flex-direction:column}.display-options{justify-content:flex-start}.palette-select{width:max-content;min-width:7.5rem}}

/* Editable values paired with range controls. */
.value-field{width:4.5rem;min-height:1.9375rem;margin:0;padding:.25rem .375rem;border:.0625rem solid #dce0e7;border-radius:.3125rem;background:#fff;color:#353c4a;font:400 .75rem ui-monospace,SFMono-Regular,monospace;text-align:right}
.dual-control .value-field{width:3.9375rem}.chroma-controls .value-field{width:4.25rem;margin-top:0}
.value-field:disabled{cursor:not-allowed;opacity:.45}
:root[data-theme=dark] .value-field{background:#303030;border-color:#505258;color:#f2f2f2}

/* Unified palette and settings card. */
.palette-group.open{width:100%;max-width:none;margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
.palette-group.open .palette-row{padding:.8125rem 0}.palette-group.open .palette-select{color:inherit}
.palette-group.open>.editor-slot{width:100%}.palette-group.open>.editor-slot>.editor{width:100%;max-width:none;margin:.5rem 0 1.4375rem;padding:1.3125rem 1.4375rem;border:.0625rem solid var(--line);border-radius:.5625rem;background:#fff}
.editor{display:flex;flex-direction:column}.editor-grid{order:1}.editor-actions{order:2;justify-content:flex-end;gap:.5rem;margin:1.25rem 0 0;padding-top:1.25rem;border-top:.0625rem solid var(--line)}
.editor-action-button{min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.4375rem .75rem;border:.0625rem solid #d9dce3;border-radius:.4375rem;background:#fff;color:#222;font-size:.8125rem;font-weight:550}
.editor-action-button:hover{background:#f1f3f7}.editor-action-button svg{width:1.125rem;height:1.125rem;fill:currentColor;stroke:none}
.editor-action-button.icon-only{width:2.25rem;padding:.4375rem}
#add,#add:hover{background:#fff;border-color:#d9dce3;color:#222}
input[type=range]:not(.hue-range){accent-color:#222}
:root[data-theme=dark] input[type=range]:not(.hue-range){accent-color:#fff}
:root[data-theme=dark] .palette-group.open{background:transparent}:root[data-theme=dark] .palette-group.open>.editor-slot>.editor{background:#292929}
:root[data-theme=dark] .editor-action-button{background:#303030;border-color:#505258;color:#f2f2f2}
:root[data-theme=dark] .editor-action-button:hover{background:#3a3a3a}
:root[data-theme=dark] #add,:root[data-theme=dark] #add:hover{background:#fff;border-color:#fff;color:#222}
@media(max-width:47.5rem){.palette-group.open .palette-row{padding:.625rem 0}.palette-group.open>.editor-slot>.editor{margin:.5rem 0 1.125rem;padding:1.125rem .9375rem}}

/* Collapsible system sidebar. */
.workspace{min-height:calc(100vh - 5.125rem);min-height:calc(100svh - 5.125rem);transition:grid-template-columns .2s ease}.workspace.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr)}
.aside-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.panel-close-button{width:2.625rem;height:2.625rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 2.625rem;padding:0;border:.0625rem solid #d9dce3;border-radius:62.4375rem;background:#fff;color:#222}
.panel-close-button:hover{background:#f1f3f7}.panel-close-button svg{width:1.5rem;height:1.5rem;fill:currentColor;stroke:none}
.workspace.sidebar-collapsed aside{padding:0;border:0;min-width:0}.workspace.sidebar-collapsed .aside-heading .section-kicker,.workspace.sidebar-collapsed aside>:not(.aside-heading){display:none}.workspace.sidebar-collapsed .aside-heading{position:sticky;top:2.1875rem;z-index:20;width:0;height:2.625rem;margin-top:2.1875rem}.workspace.sidebar-collapsed .sidebar-toggle{position:static;margin-left:1rem;box-shadow:0 .3125rem 1.125rem #0002}.workspace.sidebar-collapsed main{padding-left:5.625rem}
:root[data-theme=dark] .panel-close-button{background:#303030;border-color:#505258;color:#f2f2f2}:root[data-theme=dark] .panel-close-button:hover{background:#3a3a3a}
@media(max-width:47.5rem){.workspace{min-height:calc(100vh - 4.125rem);min-height:calc(100svh - 4.125rem)}.workspace.sidebar-collapsed aside{order:0;height:0;padding:0;border:0}.workspace.sidebar-collapsed .aside-heading{top:1.0625rem;margin-top:1.0625rem}.workspace.sidebar-collapsed .sidebar-toggle{margin-left:.75rem}.workspace.sidebar-collapsed main{padding-left:3.875rem}}

/* Palette name above its swatches. */
.palette-row{grid-template-columns:1.75rem minmax(0,1fr);gap:.75rem;align-items:center}.palette-content{min-width:0}.palette-select{width:max-content;align-self:start;padding:.25rem 0}

/* Explicit palette edit toggle. */
.palette-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2rem}.palette-title{min-width:0;margin:0;font:inherit}.palette-name-control{display:inline-flex;align-items:center;gap:.375rem;min-width:0}.palette-name{padding:.1875rem 0;border:0;background:transparent;color:inherit;font-size:.875rem;font-weight:550;text-align:left}.palette-name:hover{text-decoration:underline;text-underline-offset:.1875rem}.palette-name-input{width:min(13.75rem,50vw);height:2rem;margin:0;padding:.3125rem .5rem;border:.0625rem solid #9aa2b1;border-radius:.3125rem;background:#fff;color:#222;font-size:.875rem;font-weight:550}.palette-name-control .palette-name-input{margin:0!important;align-self:center}.palette-name-input[hidden]{display:none}.palette-magic-name{width:2rem;height:2rem;flex:0 0 2rem;align-self:center;display:inline-grid;place-items:center;padding:0;border:0;background:#F6F7F9;color:#5c6474}.palette-magic-name[hidden]{display:none}.palette-magic-name:hover{background:#eceef2;color:#222}.palette-magic-name svg{width:1.125rem;height:1.125rem;fill:currentColor;stroke:none}:root[data-theme=dark] .palette-magic-name{background:#222;color:#d7d8dc}:root[data-theme=dark] .palette-magic-name:hover{background:#333;color:#fff}
.palette-edit-toggle{min-width:3.25rem;padding:.375rem .625rem;border:.0625rem solid #d9dce3;border-radius:.375rem;background:#fff;color:#5c6474;font-size:.75rem;font-weight:550}
.palette-edit-toggle:hover{background:#f1f3f7}.palette-edit-toggle[aria-pressed=true]{background:#222;color:#fff;border-color:#222}
:root[data-theme=dark] .palette-edit-toggle{background:#303030;border-color:#505258;color:#d7d8dc}:root[data-theme=dark] .palette-edit-toggle:hover{background:#3a3a3a}:root[data-theme=dark] .palette-edit-toggle[aria-pressed=true]{background:#fff;border-color:#fff;color:#222}
:root[data-theme=dark] .palette-name-input{background:#303030;border-color:#686b72;color:#f2f2f2}

/* Palette actions and delete confirmation. */
.palette-heading-actions{display:inline-flex;align-items:center;gap:.4375rem}.palette-delete-toggle{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;padding:0;border:.0625rem solid #d9dce3;border-radius:.375rem;background:#fff;color:#5c6474}.palette-delete-toggle:hover{background:#f1f3f7}.palette-delete-toggle svg{width:1.125rem;height:1.125rem;fill:currentColor;stroke:none}
.palette-order-controls{width:1.75rem;height:3.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.palette-order-button{width:1.75rem;height:1.75rem;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#5f6673}.palette-order-button:hover:not(:disabled){background:transparent;color:#252832}.palette-order-button svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.palette-group{position:relative}
.dialog-actions{display:flex;justify-content:flex-end;gap:.5625rem;margin-top:1.5rem}.danger-button{background:#b53636;border-color:#b53636;color:#fff}.danger-button:hover{background:#972d2d}
:root[data-theme=dark] .palette-delete-toggle{background:#303030;border-color:#505258;color:#d7d8dc}:root[data-theme=dark] .palette-delete-toggle:hover{background:#3a3a3a}
:root[data-theme=dark] .palette-order-button{background:transparent;color:#b9bcc4}:root[data-theme=dark] .palette-order-button:hover:not(:disabled){background:transparent;color:#f2f2f2}
:root[data-theme=dark] .danger-button{background:#c64a4a;border-color:#c64a4a;color:#fff}:root[data-theme=dark] .danger-button:hover{background:#d35a5a}

/* Base-hue handle; specificity overrides the generic range thumb. */
input[type=range].hue-range{margin:1.75rem 0 1.25rem!important}
input[type=range].hue-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--hue-thumb,#4169dc);border:.25rem solid #fff;box-shadow:0 0 0 .0625rem #9da6b4,0 .1875rem .5rem #0004}
input[type=range].hue-range::-moz-range-thumb{width:1.875rem;height:1.875rem;border-radius:50%;background:var(--hue-thumb,#4169dc);border:.25rem solid #fff;box-shadow:0 0 0 .0625rem #9da6b4,0 .1875rem .5rem #0004}

/* Three-circle Nuance mark. */
.brand-mark{width:1.875rem;height:1.875rem;display:block;flex:0 0 1.875rem}
.brand-mark svg,.brand-mark img{display:block;width:100%;height:100%;overflow:visible}

/* Editable chart title centered independently from the header actions. */
header{display:grid;grid-template-columns:1fr auto 1fr;position:relative}
.brand{justify-self:start}.header-right{justify-self:end}
.chart-title-control{position:relative;justify-self:center;min-width:0;max-width:20rem;margin:0;font:inherit}
.chart-name-button{display:block;max-width:20rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:transparent;color:inherit;padding:.5rem .75rem;border-radius:.375rem;font-size:.875rem;font-weight:650;letter-spacing:.01em}
.chart-name-button[hidden]{display:none!important}
.chart-name-button:hover{background:#0000000a}
.chart-name-input{width:16.25rem;max-width:32vw;min-height:2.125rem!important;margin:0!important;text-align:center;font-size:.875rem!important;font-weight:650}
:root[data-theme=dark] .chart-name-button:hover{background:#ffffff0c}
@media(max-width:47.5rem){header{grid-template-columns:auto minmax(5.625rem,1fr) auto;gap:.5rem}.chart-name-button{max-width:11.25rem;padding-inline:.375rem}.chart-name-input{width:11.25rem}}
.palette-toolbar{justify-content:flex-end}
.saved-charts-list{display:grid;gap:.5625rem;margin-top:1.375rem}.saved-chart-item{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;width:100%;padding:.8125rem .875rem;border:.0625rem solid var(--line);border-radius:.4375rem;background:#fff;color:inherit;text-align:left}.saved-chart-item:hover{background:#f1f3f7}.saved-chart-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-chart-item span{color:var(--muted);font-size:.6875rem}.saved-charts-empty{color:var(--muted);font-size:.8125rem;padding:.75rem 0}:root[data-theme=dark] .saved-chart-item{background:#292929;border-color:#454545}:root[data-theme=dark] .saved-chart-item:hover{background:#333}

/* Chart actions menu. */
.chart-menu-wrap{position:relative}.chart-menu-toggle{width:2.625rem;height:2.625rem;padding:0;gap:0}.chart-menu-toggle svg{width:1.25rem;height:1.25rem;fill:currentColor}.chart-menu{position:absolute;z-index:20;top:calc(100% + .5rem);right:0;display:grid;width:11.25rem;padding:.375rem;border:.0625rem solid var(--line);border-radius:1.625rem;background:#fff;box-shadow:0 .875rem 2.5rem #15192224}.chart-menu[hidden]{display:none}.chart-menu-item{width:100%;padding:.625rem .6875rem;border:0;border-radius:.375rem;background:transparent;color:inherit;text-align:left;font-size:.8125rem;font-weight:550}.chart-menu-item:hover,.chart-menu-item:focus-visible{background:#f1f3f7}.chart-menu-item.danger{color:#a72f2f}.chart-menu-item.danger:hover,.chart-menu-item.danger:focus-visible{background:#fff0f0;color:#8f2020}:root[data-theme=dark] .chart-menu{background:#292929;border-color:#505258;box-shadow:0 .875rem 2.5rem #111a}:root[data-theme=dark] .chart-menu-item:hover,:root[data-theme=dark] .chart-menu-item:focus-visible{background:#3a3a3a}:root[data-theme=dark] .chart-menu-item.danger{color:#f18181}:root[data-theme=dark] .chart-menu-item.danger:hover,:root[data-theme=dark] .chart-menu-item.danger:focus-visible{background:#432929;color:#ff9a9a}

/* Editable fields use quiet filled surfaces. */
input[type=text],input[type=number],select,.value-field,.palette-name-input{border:0!important;background:#e9ebef!important;color:#252832}
:root[data-theme=dark] input[type=text],:root[data-theme=dark] input[type=number],:root[data-theme=dark] select,:root[data-theme=dark] .value-field,:root[data-theme=dark] .palette-name-input{border:0!important;background:#222222!important;color:#f2f2f2}



/* Keep the reorder handle aligned with the color chips, below the scale heading. */
.palette-row{--swatch-height:4.125rem;grid-template-columns:1.75rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:.75rem;row-gap:0;align-items:stretch}
.palette-content{display:contents}
.palette-heading{grid-column:2;grid-row:1;margin-bottom:.25rem}
.swatches{grid-column:2;grid-row:2}
.palette-order-controls{grid-column:1;grid-row:2;align-self:center}
@media(min-width:93.75rem){.palette-row{--swatch-height:5.3125rem}}
@media(max-width:71.875rem){.palette-row{--swatch-height:3.5625rem}}
@media(max-width:47.5rem){.palette-row{--swatch-height:3.3125rem}}

/* Visual comparison uses the same surface as the scale editor. */
.comparison{margin-top:2.0625rem;padding:1.3125rem 1.4375rem;border:.0625rem solid var(--line);border-radius:.5625rem;background:#fff}
:root[data-theme=dark] .comparison{background:#292929}

/* Quiet, borderless editing fields in both themes. */
input[type=text],input[type=number],input[type=color],select,.value-field,.palette-name-input{border:0!important;background:#e9ebef!important;color:#252832}
:root[data-theme=dark] input[type=text],:root[data-theme=dark] input[type=number],:root[data-theme=dark] input[type=color],:root[data-theme=dark] select,:root[data-theme=dark] .value-field,:root[data-theme=dark] .palette-name-input{border:0!important;background:#222222!important;color:#f2f2f2}
@media(max-width:47.5rem){.comparison{padding:1.125rem .9375rem}}

/* Custom select chevron with balanced vertical and right-side spacing. */
select{-webkit-appearance:none;appearance:none;padding-right:1.875rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5' fill='none' stroke='%23687180' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right .5rem center!important;background-size:.75rem .5rem!important}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5' fill='none' stroke='%23BFC3CB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right .5rem center!important;background-size:.75rem .5rem!important}

/* Fully rounded interactive controls. */
button,.button,input:not([type=range]),select,textarea,.value-field{border-radius:62.4375rem!important}
input[type=range]{border-radius:62.4375rem}

/* Scale editor opening and closing motion. */
.editor-slot{display:flow-root}
.editor-slot.editor-transitioning{overflow:hidden;will-change:height,opacity,transform}

/* Align the wordmark baseline with the bottom edge of the symbol. */
.brand{align-items:baseline}

/* Match keyboard focus to the visible color chip instead of the pill-shaped button. */
.swatch:focus-visible{outline:none}
.swatch:focus-visible .swatch-color{box-shadow:inset 0 0 0 .0625rem #00000004,0 0 0 .1875rem #809ff2}

/* Guided Figma export. */
.figma-dialog{width:min(38.75rem,calc(100% - 2rem))}.figma-dialog .dialog-top{align-items:flex-start}.figma-dialog h2{margin:0;font-size:1.5rem}.figma-download-link{display:inline-flex;align-items:center;gap:.4375rem;margin-top:1.125rem;color:inherit;font-size:.8125rem;font-weight:650;text-underline-offset:.25rem}.figma-download-link span{font-size:1rem}.figma-install{margin-top:1.125rem;border-top:.0625rem solid var(--line);border-bottom:.0625rem solid var(--line)}.figma-install summary{display:flex;align-items:center;justify-content:space-between;padding:.8125rem 0;cursor:pointer;font-size:.75rem;font-weight:650;list-style:none}.figma-install summary::-webkit-details-marker{display:none}.figma-install summary::after{content:'+';font-size:1.125rem;font-weight:400;line-height:1;transition:transform .18s}.figma-install[open] summary::after{transform:rotate(45deg)}.figma-install-body{padding:0 0 .9375rem}.figma-install ol{margin:0;padding-left:1.25rem;color:var(--muted);font-size:.75rem;line-height:1.75}.figma-install code{font:500 .6875rem ui-monospace,SFMono-Regular,monospace}.figma-naming{margin-top:1.375rem}.figma-naming>label{justify-content:flex-start;font-size:.75rem}.figma-name-editor{display:flex;align-items:center;width:max-content;max-width:100%;margin-top:.625rem;padding:.4375rem .625rem;border-radius:62.4375rem;background:#F6F7F9;font:600 1.0625rem/1.2 ui-monospace,SFMono-Regular,monospace}.figma-name-editor span{white-space:nowrap}.figma-name-editor input{width:3ch!important;min-width:3ch;max-width:13ch;min-height:1.875rem!important;margin:0!important;padding:.25rem!important;border-radius:.375rem!important;background:#fff!important;color:inherit!important;font:inherit!important;text-align:center}.figma-naming p{margin-top:.5rem;color:var(--muted);font-size:.6875rem}.figma-info{margin-top:1.125rem;padding:.75rem .875rem;border-radius:.875rem;background:#F6F7F9;color:var(--muted);font-size:.75rem;line-height:1.55}:root[data-theme=dark] .figma-install{border-color:#4b4d52}:root[data-theme=dark] .figma-name-editor,:root[data-theme=dark] .figma-info{background:#222;color:#b7bac1}:root[data-theme=dark] .figma-name-editor input{background:#303030!important;color:#f2f2f2!important}@media(max-width:38.75rem){.figma-dialog .dialog-actions{flex-wrap:wrap}.figma-dialog .dialog-actions .button{flex:1}}

/* Keep notifications above the active modal and its backdrop. */
#toast{z-index:100}

/* Shade labels in chart settings and their editor. */
.shade-values-control{display:grid;grid-template-columns:minmax(0,1fr) 1.875rem;align-items:start;gap:.5rem;margin-top:.5rem}.shade-values-control>span{color:var(--muted);font:500 .625rem/1.65 ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere}.shade-edit-button{width:1.875rem;height:1.875rem;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--muted)}.shade-edit-button:hover{background:#F6F7F9;color:inherit}.shade-edit-button svg{width:1.125rem;height:1.125rem;fill:currentColor;stroke:none}.shade-dialog{width:min(38.75rem,calc(100% - 2rem))}.shade-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.625rem;margin-top:1.375rem;max-height:42vh;overflow:auto;padding:.1875rem}.shade-fields label{display:grid;gap:.3125rem;color:var(--muted);font-size:.5625rem}.shade-field{width:100%!important;min-width:0;min-height:2.375rem!important;margin:0!important;padding:.4375rem!important;text-align:center;font:600 .8125rem ui-monospace,SFMono-Regular,monospace!important}.shade-error{min-height:1.25rem;margin-top:.75rem!important;color:#b53636;font-size:.75rem!important}.shade-dialog-actions .shade-defaults{margin-right:auto}:root[data-theme=dark] .shade-edit-button:hover{background:#303030;color:#f2f2f2}:root[data-theme=dark] .shade-error{color:#ff9292}@media(max-width:32.5rem){.shade-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.shade-dialog-actions{flex-wrap:wrap}.shade-dialog-actions .shade-defaults{width:100%;margin-right:0}.shade-dialog-actions .button:not(.shade-defaults){flex:1}}

/* Hue-shift controls live with their curve and preview. */
.hue-curvature .hue-preview{height:.84375rem;border-radius:62.4375rem}.hue-shift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.0625rem}.hue-shift-pair{min-width:0}.hue-shift-pair>div>input[type=range]{width:100%}.hue-curvature .hue-shift-pair .control{margin-top:1rem}

/* Full-height product-preview drawer. */
.header-icon-button{width:2.625rem;height:2.625rem;display:inline-flex;align-items:center;justify-content:center;padding:0}.header-icon-button svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.header-icon-button[aria-expanded=true]{background:#222;color:#fff;border-color:#222}:root[data-theme=dark] .header-icon-button[aria-expanded=true]{background:#fff;color:#222;border-color:#fff}
.preview-panel{position:fixed;z-index:70;inset:0 0 0 auto;width:25rem;height:100svh;padding:0 0 2.25rem;overflow-y:auto;overflow-x:hidden;border-left:.0625rem solid var(--line);background:#f7f8fa}.preview-panel[hidden]{display:none}.preview-panel.preview-opening{animation:preview-enter .28s cubic-bezier(.2,.8,.2,1)}body{transition:padding-right .28s cubic-bezier(.2,.8,.2,1)}body.preview-open{padding-right:25rem}
.preview-drawer-header{position:sticky;z-index:10;top:0;height:4.125rem;display:flex;align-items:center;padding:0 1.25rem;border-bottom:.0625rem solid var(--line);background:#f7f8fa}.preview-drawer-header .section-kicker{margin:0}.preview-close{margin-left:auto}.preview-settings{padding:1.125rem 1.25rem 1.75rem}.preview-mode{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.1875rem;padding:.1875rem;border-radius:62.4375rem;background:#e9ebef}.preview-mode button{min-height:2.125rem;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.3125rem .625rem;border:0;background:transparent;color:#5f6673;font-size:.6875rem;font-weight:650}.preview-mode button[aria-pressed=true]{background:#fff;color:#222;box-shadow:0 .0625rem .3125rem #171b2415}.preview-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .625rem;width:100%;margin-top:.875rem}.preview-role-grid label{display:grid;grid-template-columns:2.6875rem minmax(0,1fr);align-items:center;min-width:0;gap:.375rem;color:#5f6673;font-size:.5625rem;font-weight:650}.preview-role-grid label>span:first-child{white-space:nowrap}.preview-role-field{display:grid;grid-template-columns:1.125rem minmax(0,1fr);align-items:center;gap:.4375rem;min-width:0}.preview-role-field svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.preview-role-field .preview-role-icon-filled{fill:currentColor;stroke:none}.preview-role-field .preview-role-icon-strong{stroke-width:2.35}.preview-role-grid select{width:100%;min-width:0;min-height:2.125rem;margin:0!important;padding:.3125rem 1.8125rem .3125rem .625rem!important;background-color:#e9ebef!important;color:#252832!important;font-size:.6875rem!important;font-weight:600}
:root[data-theme=dark] .preview-panel{background:#222;border-color:#44464b}:root[data-theme=dark] .preview-drawer-header{background:#222;border-color:#44464b}:root[data-theme=dark] .preview-mode{background:#303030}:root[data-theme=dark] .preview-mode button{color:#aeb1b7}:root[data-theme=dark] .preview-mode button[aria-pressed=true]{background:#444;color:#fff}:root[data-theme=dark] .preview-role-grid label{color:#aeb1b7}:root[data-theme=dark] .preview-role-grid select{background-color:#303030!important;color:#f2f2f2!important}
.preview-phone{--pv-bg:#f7f7f7;--pv-surface:#fff;--pv-raised:#fff;--pv-text:#222;--pv-muted:#687180;--pv-line:#e8e8ea;--pv-accent:#5866dc;--pv-accent-soft:#e7e9ff;--pv-action:#5866dc;--pv-status:#2c9b6f;--pv-status-soft:#e1f6ed;--pv-on-accent:#fff;--pv-on-action:#fff;--pv-on-status:#fff;position:relative;width:20.375rem;height:40.625rem;margin:0 auto;padding:.5rem;border:.0625rem solid #4a4a4a;border-radius:3.25rem;background:#222;box-shadow:inset 0 0 0 .0625rem #5a5a5a,0 1.375rem 3.4375rem #1115;color:var(--pv-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif}.preview-phone::after{content:"";position:absolute;inset:.1875rem;border:.0625rem solid #6b6b6b;border-radius:3rem;pointer-events:none;opacity:.7}.preview-phone-buttons{position:absolute;inset:0;pointer-events:none}.preview-phone-buttons span{position:absolute;left:-.1875rem;width:.1875rem;border-radius:.125rem 0 0 .125rem;background:#444}.preview-phone-buttons span:nth-child(1){top:6rem;height:1.75rem}.preview-phone-buttons span:nth-child(2){top:8.9375rem;height:3rem}.preview-phone-buttons span:nth-child(3){top:12.625rem;height:3rem}.preview-island{position:absolute;z-index:6;top:1.125rem;left:50%;width:5.5625rem;height:1.5625rem;transform:translateX(-50%);border-radius:62.4375rem;background:#222;box-shadow:inset 0 0 0 .0625rem #303030}.preview-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2.6875rem;background:var(--pv-bg);color:var(--pv-text);transition:background .22s,color .22s}.preview-statusbar{position:absolute;z-index:5;top:0;left:0;right:0;height:2.6875rem;display:flex;align-items:center;justify-content:space-between;padding:.25rem 1.375rem 0;font-size:.625rem;font-weight:750}.preview-status-icons{display:flex;align-items:center;gap:.25rem}.preview-status-icons svg{width:.875rem;height:.625rem;fill:var(--pv-text);stroke:var(--pv-text);stroke-width:1.2}.preview-status-icons svg:nth-child(2){fill:none;stroke-linecap:round}.preview-status-icons svg:nth-child(3){width:1.1875rem;fill:none}.preview-status-icons .preview-battery-fill{fill:var(--pv-text);stroke:none}.preview-appbar{position:absolute;z-index:3;top:2.6875rem;left:0;right:0;height:4rem;display:flex;align-items:center;justify-content:space-between;padding:.3125rem 1.125rem .625rem;background:linear-gradient(var(--pv-bg) 72%,transparent)}.preview-appbar>div{display:grid;gap:.0625rem}.preview-appbar span,.preview-card-heading span,.preview-section-heading span,.preview-toggle-card>div>span{color:var(--pv-muted);font-size:.5625rem;line-height:1.2}.preview-appbar strong{font-size:1.125rem;line-height:1.15}.preview-appbar button{position:relative;width:2.125rem;height:2.125rem;display:grid;place-items:center;padding:0;border:.0625rem solid var(--pv-line);background:var(--pv-surface);color:var(--pv-text)}.preview-appbar button svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.preview-appbar button i{position:absolute;top:.125rem;right:.125rem;width:.4375rem;height:.4375rem;border:.125rem solid var(--pv-bg);border-radius:50%;background:var(--pv-status)}
.preview-scroll{position:absolute;inset:6.3125rem 0 3.9375rem;padding:.25rem .9375rem 1.5rem;overflow:auto;scrollbar-width:none}.preview-scroll::-webkit-scrollbar,.preview-carousel::-webkit-scrollbar{display:none}.preview-hero{position:relative;overflow:hidden;padding:1.125rem;border-radius:1.5625rem;background:linear-gradient(145deg,var(--pv-accent-soft),var(--pv-accent));color:var(--pv-on-accent)}.preview-hero::after{content:"";position:absolute;right:-1.6875rem;top:-2.1875rem;width:7.1875rem;height:7.1875rem;border:.0625rem solid currentColor;border-radius:50%;opacity:.17;box-shadow:0 0 0 1.125rem transparent,0 0 0 1.1875rem currentColor}.preview-pill{display:inline-flex;padding:.3125rem .5rem;border:.0625rem solid currentColor;border-radius:62.4375rem;font-size:.5rem;font-weight:700;letter-spacing:.03em;opacity:.9}.preview-hero h3{position:relative;z-index:1;max-width:14.0625rem;margin:.8125rem 0 .4375rem;font-size:1.375rem;line-height:1.02;letter-spacing:-.035em}.preview-hero p{position:relative;z-index:1;max-width:14.375rem;margin:0;font-size:.5625rem;line-height:1.5;opacity:.78}.preview-primary{position:relative;z-index:1;min-height:2.0625rem;display:flex;align-items:center;gap:.875rem;margin-top:.9375rem;padding:.375rem .8125rem;border:0;background:var(--pv-action);color:var(--pv-on-action);font-size:.5625rem;font-weight:720}.preview-primary span{font-size:.875rem}.preview-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5625rem;margin-top:.5625rem}.preview-metrics article,.preview-chart-card,.preview-toggle-card{border:.0625rem solid var(--pv-line);background:var(--pv-surface)}.preview-metrics article{display:grid;gap:.3125rem;padding:.8125rem;border-radius:1.1875rem}.preview-metrics span{color:var(--pv-muted);font-size:.5rem}.preview-metrics strong{font-size:1.1875rem;letter-spacing:-.03em}.preview-metrics small{color:var(--pv-muted);font-size:.5rem}.preview-metrics b{color:var(--pv-status)}.preview-chart-card{margin-top:.5625rem;padding:.875rem .75rem .625rem;border-radius:1.375rem}.preview-card-heading,.preview-section-heading{display:flex;align-items:center;justify-content:space-between}.preview-card-heading>div,.preview-section-heading>div{display:grid;gap:.125rem}.preview-card-heading strong,.preview-section-heading strong{font-size:.6875rem}.preview-card-heading button{width:1.625rem;height:1.625rem;padding:0;border:0;background:transparent;color:var(--pv-muted);font-size:.625rem}.preview-chart-card>svg{display:block;width:100%;height:6.125rem;margin-top:.25rem;overflow:visible}.preview-chart-grid{fill:none;stroke:var(--pv-line);stroke-width:1;stroke-dasharray:2 4}.preview-chart-area{fill:url(#preview-chart-gradient)}.preview-chart-line{fill:none;stroke:var(--pv-accent);stroke-width:2.2;stroke-linecap:round}.preview-chart-days{display:flex;justify-content:space-between;padding:0 .3125rem;color:var(--pv-muted);font-size:.4375rem}.preview-section-heading{margin:1rem .125rem .5625rem}.preview-section-heading button{padding:.1875rem;border:0;background:transparent;color:var(--pv-action);font-size:.5rem;font-weight:700}.preview-carousel{display:flex;gap:.5625rem;margin:0 -.9375rem;padding:0 .9375rem;overflow:auto;scroll-snap-type:x proximity}.preview-carousel article{flex:0 0 7rem;display:grid;gap:.4375rem;padding:.75rem;border:.0625rem solid var(--pv-line);border-radius:1.25rem;background:var(--pv-surface);scroll-snap-align:start}.preview-carousel-icon{width:2.125rem;height:2.125rem;display:grid;place-items:center;border-radius:.8125rem;background:var(--pv-accent-soft);color:var(--pv-accent)}.preview-carousel-icon svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.preview-carousel strong{font-size:.5625rem}.preview-carousel small{color:var(--pv-muted);font-size:.5rem}.preview-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:.625rem;margin-top:.625rem;padding:.8125rem;border-radius:1.3125rem}.preview-toggle-card>div{display:grid;gap:.1875rem}.preview-toggle-card strong{font-size:.625rem}.preview-toggle-card small{color:var(--pv-muted);font-size:.5rem}.preview-switch{width:2.375rem;height:1.375rem;flex:0 0 2.375rem;padding:.125rem;border:0;background:var(--pv-line);transition:background .18s}.preview-switch span{display:block;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--pv-raised);box-shadow:0 .0625rem .25rem #1114;transition:transform .18s}.preview-switch.is-on{background:var(--pv-status)}.preview-switch.is-on span{transform:translateX(1rem)}.preview-bottom-space{height:.3125rem}.preview-tabbar{position:absolute;z-index:4;left:0;right:0;bottom:0;height:4rem;display:grid;grid-template-columns:repeat(4,1fr);padding:.4375rem .75rem .5625rem;border-top:.0625rem solid var(--pv-line);background:color-mix(in srgb,var(--pv-bg) 92%,transparent);backdrop-filter:blur(.625rem)}.preview-tabbar button{display:grid;place-items:center;align-content:center;gap:.1875rem;padding:0;border:0;background:transparent;color:var(--pv-muted);font-size:.4375rem}.preview-tabbar button.active{color:var(--pv-action)}.preview-tabbar svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
@keyframes preview-enter{from{transform:translateX(100%)}to{transform:none}}@media(prefers-reduced-motion:reduce){.preview-panel.preview-opening{animation:none}.preview-screen,.preview-switch,.preview-switch span{transition:none}}
@media(max-width:56.25rem){.header-right{gap:.4375rem}.figma-button{width:2.625rem;height:2.625rem;padding:0;font-size:0;gap:0}.figma-button .figma-icon{width:.8125rem;height:1.1875rem;margin:0}.preview-panel{width:22.5rem}.preview-settings{padding-left:1rem;padding-right:1rem}.preview-drawer-header{padding-left:1rem;padding-right:1rem}.preview-phone{width:19.75rem;height:39.375rem}body.preview-open{padding-right:22.5rem}}
@media(max-width:47.5rem){body.preview-open{padding-right:0}}
@media(max-width:37.5rem){.preview-panel{width:21rem;max-width:100vw}.preview-phone{width:19rem;height:37.75rem;border-radius:3rem}.preview-screen{border-radius:2.4375rem}.preview-role-grid{gap:.625rem .5rem}.preview-role-grid select{font-size:.625rem!important}}

/* Visual-test cards wrap once they reach a readable 18.75rem width. */
#compare-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,18.75rem),1fr))}.compare-card{min-width:min(100%,18.75rem)}

/* Interactive states inside the mobile preview. */
.preview-phone button,.preview-metrics article,.preview-chart-card,.preview-carousel article{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,filter .16s ease}.preview-appbar button:hover{transform:translateY(-.0625rem);border-color:var(--pv-accent);color:var(--pv-accent);box-shadow:0 .3125rem .875rem color-mix(in srgb,var(--pv-accent) 18%,transparent)}.preview-primary:hover{transform:translateY(-.125rem);filter:saturate(1.12) brightness(1.04);box-shadow:0 .5rem 1.125rem color-mix(in srgb,var(--pv-action) 28%,transparent)}.preview-primary:active{transform:translateY(0) scale(.98);box-shadow:none}.preview-metrics article:hover,.preview-chart-card:hover{transform:translateY(-.125rem);border-color:color-mix(in srgb,var(--pv-accent) 42%,var(--pv-line));box-shadow:0 .5rem 1.25rem color-mix(in srgb,var(--pv-text) 8%,transparent)}.preview-card-heading button:hover,.preview-section-heading button:hover{color:var(--pv-accent);background:var(--pv-accent-soft)}.preview-carousel article:hover{transform:translateY(-.1875rem);border-color:var(--pv-accent);box-shadow:0 .5625rem 1.25rem color-mix(in srgb,var(--pv-accent) 17%,transparent)}.preview-carousel article:hover .preview-carousel-icon{transform:rotate(-4deg) scale(1.06)}.preview-carousel-icon{transition:transform .18s cubic-bezier(.2,.8,.2,1)}.preview-switch:hover{box-shadow:0 0 0 .25rem var(--pv-status-soft)}.preview-switch:active span{transform:scale(.86)}.preview-switch.is-on:active span{transform:translateX(1rem) scale(.86)}.preview-switch[aria-checked=false]{background:var(--pv-line)}.preview-tabbar button:hover{color:var(--pv-action);background:var(--pv-action-soft,var(--pv-accent-soft));transform:translateY(-.0625rem)}.preview-tabbar button:active{transform:translateY(.0625rem)}.preview-tabbar button.active svg{fill:color-mix(in srgb,var(--pv-action) 16%,transparent)}

/* Mobile layout: compact header, overlay settings drawer, and edge-to-edge scale editor. */
#sidebar-backdrop{display:none}
@media(max-width:47.5rem){
  body{overflow-x:hidden}
  #display-options{display:none}
  header{grid-template-columns:1.875rem minmax(0,1fr) 2.625rem;gap:.5rem;padding:0 1rem}
  .brand{width:1.875rem;gap:0;font-size:0;letter-spacing:0}.brand-mark{width:1.875rem;height:1.875rem;flex-basis:1.875rem}
  .header-right{gap:0}.header-right>.mobile-menu-action{display:none}
  .chart-menu{width:13.75rem;padding:.375rem}.chart-menu>button{text-align:left}.chart-menu>.mobile-menu-action{display:grid;width:100%;min-height:2.375rem;grid-template-columns:minmax(0,1fr) 1.125rem;align-items:center;column-gap:.625rem;padding:.5625rem .6875rem;border:0;background:transparent!important;color:inherit;font-size:0;font-weight:550;text-align:left;box-shadow:none}.chart-menu>.mobile-menu-action::after{content:attr(data-menu-label);grid-column:1;grid-row:1;justify-self:start;font-size:.8125rem;line-height:1.25rem}.chart-menu>.mobile-menu-action:hover,.chart-menu>.mobile-menu-action:focus-visible{background:#f1f3f7!important}.chart-menu>#preview-toggle[aria-expanded=true]{background:transparent!important;color:inherit}.chart-menu>.figma-button .figma-icon{width:1.125rem;height:1.125rem;fill:currentColor}.chart-menu>.header-icon-button svg{width:1.125rem;height:1.125rem}.chart-menu>.mobile-menu-action>svg,.chart-menu>.mobile-menu-action>#theme-icon{grid-column:2;grid-row:1;justify-self:center;margin:0}.chart-menu>.mobile-menu-action>#theme-icon{display:grid;width:1.125rem;height:1.125rem;place-items:center;font-size:1.125rem;line-height:1.125rem}.chart-menu>.theme-toggle{height:2.375rem;padding:.5625rem .6875rem!important}.mobile-menu-separator{height:.0625rem;margin:.375rem .3125rem;background:var(--line)}
  :root[data-theme=dark] .chart-menu>.mobile-menu-action:hover,:root[data-theme=dark] .chart-menu>.mobile-menu-action:focus-visible{background:#3a3a3a!important;color:#f2f2f2}:root[data-theme=dark] .chart-menu>#preview-toggle[aria-expanded=true]{background:transparent!important;color:inherit}
  .workspace{display:block;min-height:calc(100svh - 4.125rem)}
  #sidebar-backdrop{position:fixed;z-index:49;inset:var(--mobile-header-offset,4.125rem) 0 0;width:100%;height:auto;padding:0;border:0;border-radius:0!important;background:#1118;backdrop-filter:blur(.125rem)}.workspace:not(.sidebar-collapsed)>#sidebar-backdrop{display:block}
  .workspace>aside#system-panel{position:fixed;z-index:50;top:var(--mobile-header-offset,4.125rem);bottom:0;left:0;width:min(21.25rem,calc(100vw - 2rem));height:auto;max-height:calc(100svh - var(--mobile-header-offset,4.125rem));order:unset;padding:1.5rem;overflow:auto;border-top:0;border-right:.0625rem solid var(--line);box-shadow:1rem 0 2.625rem #1113;transition:width .22s ease,box-shadow .22s ease,top .16s ease,max-height .16s ease}
  .workspace.sidebar-collapsed>aside#system-panel{width:0;height:calc(100svh - 4.125rem);padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
  .workspace.sidebar-collapsed>aside#system-panel .aside-heading{position:fixed;z-index:52;top:5.125rem;left:1rem;width:2.625rem;height:2.625rem;margin:0;transition:opacity .14s}.workspace.sidebar-collapsed>aside#system-panel .sidebar-toggle{position:static;margin:0;pointer-events:auto;box-shadow:0 .3125rem 1.125rem #0002}.workspace.scale-row-stuck.sidebar-collapsed>aside#system-panel .aside-heading{opacity:0;pointer-events:none}
  main,.workspace.sidebar-collapsed main{width:100%;max-width:none;margin:0;padding:1.5rem 1rem 1rem}.workspace.sidebar-collapsed .page-heading{padding-left:4.625rem}
  .palette-row{grid-template-columns:3.5rem minmax(0,1fr);width:100%;column-gap:.5rem}.palette-order-controls{grid-column:1;grid-row:1;flex-direction:row;width:3.5rem;height:2rem;align-self:center}.palette-heading{grid-column:2;grid-row:1}.swatches{grid-column:1/-1;grid-row:2}.swatches{width:100vw;margin-left:-1rem;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:.0625rem;overflow:visible;padding:.25rem 0 .1875rem}.palette-group.open .palette-row{position:sticky;z-index:18;top:0;width:100vw;margin-left:-1rem;padding:.625rem 1rem;background:#f7f8fa;box-shadow:none}:root[data-theme=dark] .palette-group.open .palette-row{background:#222}
  .palette-group.open>.editor-slot{width:100vw;max-width:none;margin-left:-1rem}.palette-group.open>.editor-slot>.editor{width:100%;max-width:none;margin:.5rem 0 1.125rem;padding:1.25rem 1rem;border:0;border-top:.0625rem solid var(--line);border-bottom:.0625rem solid var(--line);border-radius:0!important}
}

/* Semantic headings keep the established visual hierarchy. */
.aside-heading>.section-kicker,.page-heading>.section-kicker,.comparison-heading>.section-kicker{margin:0;font-size:.75rem}

/* Persistent validation feedback for editable chart and scale names. */
.field-error{color:#9b2929;font-size:.75rem;font-weight:550;line-height:1.35}
.field-error[hidden]{display:none}
.chart-name-error{position:absolute;top:calc(100% + .1875rem);left:50%;z-index:30;width:max-content;max-width:min(20rem,80vw);transform:translateX(-50%);padding:.25rem .5rem;border-radius:62.4375rem;background:#fff;box-shadow:0 .1875rem .75rem #15192218}
.palette-name-error{display:block;margin-top:.25rem}
input[aria-invalid=true]{box-shadow:0 0 0 .125rem #b53636!important}
:root[data-theme=dark] .field-error{color:#ff9a9a}
:root[data-theme=dark] .chart-name-error{background:#292929;box-shadow:0 .1875rem .75rem #1118}
:root[data-theme=dark] input[aria-invalid=true]{box-shadow:0 0 0 .125rem #ff9292!important}

/* Circular background-color thumbnail in the visual test. */
#compare-color{width:2.125rem;height:2.125rem;flex:0 0 2.125rem;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;overflow:hidden;box-shadow:0 0 0 .0625rem var(--line)}
#compare-color::-webkit-color-swatch-wrapper{padding:0}
#compare-color::-webkit-color-swatch{border:0;border-radius:50%}
#compare-color::-moz-color-swatch{border:0;border-radius:50%}

.preview-panel{--preview-phone-width:20.375rem}
.preview-phone{width:var(--preview-phone-width)}
.preview-role-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.preview-role-grid label,.preview-role-grid select{min-width:0}
@media(max-width:56.25rem){.preview-panel{--preview-phone-width:19.75rem}}
@media(max-width:37.5rem){.preview-panel{--preview-phone-width:19rem}}

/* Preview role labels sit above their fields; icons appear inside each select. */
.preview-role-grid label{grid-template-columns:minmax(0,1fr);align-items:stretch}
.preview-role-field{position:relative;display:block}
.preview-role-field svg{position:absolute;z-index:1;top:50%;left:.625rem;transform:translateY(-50%);pointer-events:none}
.preview-role-grid select{padding-left:2.1875rem!important}

/* Floating translucent navigation inside the phone preview. */
.preview-scroll{inset:0;padding:6.5625rem .9375rem 5.5rem}
.preview-tabbar{left:.875rem;right:.875rem;bottom:.75rem;height:3.25rem;padding:.3125rem .4375rem;border:.0625rem solid rgba(255,255,255,.72);border-radius:62.4375rem;background:rgba(255,255,255,.42);box-shadow:0 .5rem 1.5rem rgba(20,24,32,.16),inset 0 .0625rem 0 rgba(255,255,255,.78);-webkit-backdrop-filter:blur(1.125rem) saturate(170%);backdrop-filter:blur(1.125rem) saturate(170%);overflow:hidden}
.preview-tabbar::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,0) 48%,rgba(255,255,255,.16));pointer-events:none}
.preview-tabbar button{position:relative;z-index:1;border-radius:62.4375rem}
.preview-tabbar button.active{background:rgba(255,255,255,.48);box-shadow:0 .0625rem .4375rem rgba(20,24,32,.1),inset 0 .0625rem 0 rgba(255,255,255,.72)}
.preview-phone[data-preview-theme=dark] .preview-tabbar{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1);box-shadow:0 .5rem 1.625rem rgba(0,0,0,.3),inset 0 .0625rem 0 rgba(255,255,255,.24)}
.preview-phone[data-preview-theme=dark] .preview-tabbar button.active{background:rgba(255,255,255,.16);box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.2)}

/* Sticky preview header with a blur that fades into the scrolling content. */
.preview-appbar{isolation:isolate;background:none}
.preview-appbar::before{content:"";position:absolute;z-index:0;inset:-2.6875rem 0 -1.25rem;background:transparent;-webkit-backdrop-filter:blur(1.25rem) saturate(145%);backdrop-filter:blur(1.25rem) saturate(145%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.72) 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.72) 58%,transparent 100%);pointer-events:none}
.preview-appbar>*{position:relative;z-index:1}
/* Feedback */
.footer-feedback{padding:.125rem .5rem;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.1875rem}.footer-feedback:hover{color:var(--accent)}.feedback-dialog{width:min(37.5rem,calc(100% - 2rem))}.feedback-dialog h2{margin:0}.feedback-fields{display:grid;margin-top:1.375rem}.feedback-fields label{display:block;margin:1rem 0 .4375rem;font-size:.75rem}.feedback-fields label:first-child{margin-top:0}.feedback-fields input,.feedback-fields textarea{width:100%;margin:0;border:0;background:#e8eaee;color:#252832;padding:.6875rem .875rem}.feedback-fields input{min-height:2.75rem}.feedback-fields textarea{min-height:10.625rem;resize:vertical;border-radius:1.375rem!important;line-height:1.5}.feedback-fields input:focus-visible,.feedback-fields textarea:focus-visible{outline:.1875rem solid #809ff2;outline-offset:.1875rem}.feedback-hint,.feedback-count{margin-top:.375rem;color:var(--muted);font-size:.6875rem}.feedback-count{text-align:right}.feedback-honeypot{position:absolute!important;left:-625rem!important;width:.0625rem!important;height:.0625rem!important;overflow:hidden!important}.feedback-status{margin-top:1rem!important;padding:.625rem .8125rem;border-radius:.875rem;background:#fff0f0;color:#8f2020;font-size:.75rem!important}.feedback-dialog .dialog-actions{margin-top:1.375rem}:root[data-theme=dark] .feedback-fields input,:root[data-theme=dark] .feedback-fields textarea{background:#222;color:#f2f2f2}:root[data-theme=dark] .footer-feedback:hover{color:#dbe4ff}:root[data-theme=dark] .feedback-status{background:#432929;color:#ff9292}@media(max-width:47.5rem){footer{display:grid;grid-template-columns:1fr auto;align-items:center}footer .footer-feedback{grid-column:1/-1;grid-row:1;justify-self:start;margin-bottom:.625rem}footer>span:first-child{grid-column:1;grid-row:2}footer>span:last-child{grid-column:2;grid-row:2}.feedback-dialog{padding:1.375rem}.feedback-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1fr}.feedback-dialog .dialog-actions .button{width:100%}}
.feedback-fields textarea{font:inherit}
.local-storage-note{margin-top:.5rem;color:var(--muted);font-size:.6875rem;line-height:1.55}:root[data-theme=dark] .local-storage-note{color:#afb2ba}

/* Search-friendly product summary, visible to visitors and crawlers. */
.product-intro{width:100%;max-width:none;margin-top:2.625rem;padding-top:1.5rem;border-top:.0625rem solid var(--line)}.product-intro .section-kicker{margin:0 0 .75rem}.product-intro p{width:100%;max-width:none;color:var(--muted);font-size:.8125rem;line-height:1.7}.product-intro p+p{margin-top:.5rem}:root[data-theme=dark] .product-intro p{color:#afb2ba}@media(max-width:47.5rem){.product-intro{margin-top:2.125rem}.product-intro p{font-size:.75rem}}

/* Light mode icon supplied for the interface and preview controls. */
.light-mode-icon,.dark-mode-icon{display:block;width:1.5rem;height:1.5rem;fill:currentColor;flex:0 0 auto}#theme-toggle .light-mode-icon,#theme-toggle .dark-mode-icon{display:none}:root[data-theme=light] #theme-toggle .dark-mode-icon{display:block}:root[data-theme=dark] #theme-toggle .light-mode-icon{display:block}.theme-icon .light-mode-icon[hidden],.theme-icon .dark-mode-icon[hidden]{display:none!important}.theme-icon{display:grid;place-items:center;width:1.5rem;height:1.5rem}.preview-mode .light-mode-icon,.preview-mode .dark-mode-icon{width:1rem;height:1rem}@media(max-width:47.5rem){.chart-menu .theme-icon .light-mode-icon,.chart-menu .theme-icon .dark-mode-icon{width:1.125rem;height:1.125rem}}

/* Footer legal links, feedback privacy notice and standalone legal pages. */
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.footer-links a,.legal-footer a,.feedback-privacy-note a{color:inherit;text-decoration:underline;text-underline-offset:.1875rem}.footer-links a:hover,.legal-footer a:hover,.feedback-privacy-note a:hover{color:var(--accent)}.feedback-privacy-note{margin-top:1.125rem!important;padding-top:1rem;border-top:.0625rem solid var(--line);color:var(--muted);font-size:.6875rem!important;line-height:1.6!important}.legal-header h1{justify-self:center;margin:0;font-size:.875rem;letter-spacing:.01em}.legal-page{max-width:56.25rem;padding-top:3.25rem;padding-bottom:3.25rem}.legal-page>header{display:block;height:auto;padding:0;border:0;background:transparent}.legal-page>header h1{margin:0;font-size:2.125rem;line-height:1.15;letter-spacing:-.0625rem}.legal-page .legal-updated{margin-top:.75rem;color:var(--muted);font-size:.75rem}.legal-content{margin-top:2.625rem}.legal-content section+section{margin-top:2.125rem;padding-top:1.875rem;border-top:.0625rem solid var(--line)}.legal-content h2{margin:0 0 .75rem;font-size:1.125rem}.legal-content h3{margin:1.25rem 0 .5rem;font-size:.9375rem}.legal-content p,.legal-content li{color:var(--muted);font-size:.875rem;line-height:1.75}.legal-content p+p{margin-top:.625rem}.legal-content ul{margin:.625rem 0 0;padding-left:1.25rem}.legal-content a{color:var(--accent)}.legal-content address{font-style:normal;color:var(--muted);font-size:.875rem;line-height:1.75}.legal-note{margin-top:.875rem;padding:.875rem 1rem;border:.0625rem solid var(--line);border-radius:1.125rem;background:#e8eaee}.legal-footer{max-width:56.25rem;margin:0 auto 2.25rem;padding:1.25rem 2.25rem 0}.legal-footer nav{display:flex;gap:1.125rem;flex-wrap:wrap}:root[data-theme=dark] .legal-note{background:#222}:root[data-theme=dark] .legal-content p,:root[data-theme=dark] .legal-content li,:root[data-theme=dark] .legal-content address{color:#afb2ba}@media(max-width:47.5rem){footer{display:flex;flex-direction:column;align-items:flex-start;gap:.875rem}.footer-links{gap:.75rem 1rem}footer .footer-feedback{margin:0}.legal-header{grid-template-columns:auto 1fr!important}.legal-header h1{justify-self:end;font-size:.8125rem}.legal-page{padding:2.25rem 1rem}.legal-page>header h1{font-size:1.75rem}.legal-content{margin-top:2rem}.legal-footer{padding:1.125rem 1rem 0;margin-bottom:1.75rem}}

/* Filled preview eye icon supplied for the preview toggle. */
#preview-toggle svg{width:1.5rem;height:1.5rem;fill:currentColor;stroke:none}@media(max-width:47.5rem){.chart-menu>#preview-toggle svg{width:1.125rem;height:1.125rem}}

/* Keep all editable input values aligned consistently. */
input:not([type=range]):not([type=color]){text-align:left!important}

/* Give editable values balanced breathing room inside their pill-shaped fields. */
input:not([type=range]):not([type=color]){padding-left:.625rem!important;padding-right:.625rem!important}
.feedback-fields input{padding-left:.875rem!important;padding-right:.875rem!important}


/* Persistent correction notices keep an explicit, accessible dismissal action. */
#toast{display:flex;align-items:center;gap:.75rem;max-width:min(35rem,calc(100vw - 2rem));padding:.625rem .625rem .625rem 1rem;line-height:1.45}#toast.persistent.show{pointer-events:auto}.toast-close{display:inline-grid;width:2rem;height:2rem;flex:0 0 2rem;place-items:center;padding:0;border:0;background:transparent;color:inherit}.toast-close:hover{background:#ffffff1a}.toast-close svg{width:1.125rem;height:1.125rem;fill:currentColor}.toast-close[hidden]{display:none!important}


/* North-east arrow supplied for the calculation explainer. */
#method-open{display:inline-flex;align-items:center;gap:.375rem}#method-open svg{width:1.125rem;height:1.125rem;flex:0 0 1.125rem;fill:currentColor}

/* Calculation method: scan-friendly semantic sections. */
#method .dialog-top{align-items:center}
.method-content{margin-top:1.5rem}
.method-section+.method-section{margin-top:1.625rem;padding-top:1.5rem;border-top:.0625rem solid var(--line)}
.method-section h3{margin:0;font-size:.875rem;line-height:1.45;font-weight:700;letter-spacing:0;color:inherit}
.method-section p{margin-top:.5625rem;font-size:.875rem;line-height:1.7}
.method-section p+p{margin-top:.625rem}
.method-section strong{font-weight:700;color:inherit}
@media(max-width:38.75rem){.method-content{margin-top:1.25rem}.method-section+.method-section{margin-top:1.375rem;padding-top:1.25rem}}

/* Equal visual inset on every side of the calculation dialog. */
#method{--method-inset:2rem;padding:var(--method-inset)}
#method .dialog-top,#method .method-content,#method .sources{width:100%}
@media(max-width:38.75rem){#method{--method-inset:1.5rem}}

/* A collapsed chart-settings panel exposes only its reopen control. */
.workspace.sidebar-collapsed #system-panel>#method-open{display:none}

/* Slightly wider chart-settings column on non-mobile layouts. */
@media(min-width:47.5625rem){.workspace{grid-template-columns:21.25rem minmax(0,1fr)}}

/* Keep the preview drawer header aligned with the global app header. */
.preview-drawer-header{height:5.125rem;min-height:5.125rem}
@media(max-width:47.5rem){.preview-drawer-header{height:4.125rem;min-height:4.125rem}}

/* Center the shade-value edit action against one or multiple lines of values. */
.shade-values-control{align-items:center}


/* Align the first editor-column heading with its desktop neighbours. */
.edit-column .base-hue-control{margin-top:0}


/* Semantic toast variants: confirmation and warning. */
#toast-message{min-width:0;flex:1}
.toast-status-icon{display:none;width:1.375rem;height:1.375rem;flex:0 0 1.375rem;align-items:center;justify-content:center}
.toast-status-icon svg{display:none;width:1.375rem;height:1.375rem;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#toast[data-type="success"] .toast-status-icon,#toast[data-type="warning"] .toast-status-icon{display:inline-flex}
#toast[data-type="success"] .toast-success-icon,#toast[data-type="warning"] .toast-warning-icon{display:block}
#toast[data-type="warning"]{background:#9a4d08;color:#fff;box-shadow:0 .3125rem 1.5625rem #58250045}
:root[data-theme=dark] #toast[data-type="warning"]{background:#9a4d08;color:#fff;box-shadow:0 .3125rem 1.5625rem #1118}


/* Edit action icon supplied alongside its label. */
.palette-edit-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.375rem}
.palette-edit-icon{width:1rem;height:1rem;flex:0 0 1rem;fill:currentColor}
/* Desktop chart settings follow the viewport after the global header scrolls away. */
@media(min-width:47.5625rem){
  #system-panel{position:sticky;top:0;align-self:start;height:100vh;height:100svh;max-height:100vh;max-height:100svh;overflow-y:auto;overscroll-behavior:contain}
  .workspace.sidebar-collapsed #system-panel{overflow:visible}
}

/* Preview drawer hugs the phone while the page uses the remaining width. */
:root{--preview-drawer-width:22.5rem}
.preview-panel{width:var(--preview-drawer-width)}
body.preview-open{padding-right:var(--preview-drawer-width)}
body{min-height:100svh;transform-origin:center var(--konami-origin-y,50%);transition:padding-right .28s cubic-bezier(.2,.8,.2,1),transform 600ms ease-in-out}
body.konami-flipped{transform:rotate(180deg)}
.analytics-consent{position:fixed;z-index:120;inset:auto 1rem 1rem;max-width:38rem;margin:0 auto;padding:1.25rem;background:#fff;color:#252832;border:.0625rem solid var(--line);border-radius:.75rem;box-shadow:0 .75rem 2rem #0003}
.analytics-consent[hidden]{display:none}
.analytics-consent h2{margin:0 0 .5rem;font-size:1rem;letter-spacing:0}
.analytics-consent p{font-size:.8125rem;line-height:1.55}
.analytics-consent a{color:inherit;text-decoration:underline}
.analytics-consent-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1rem}
.analytics-consent-actions button{min-height:2.5rem;padding:.5rem .875rem;border:.0625rem solid #252832;border-radius:.375rem;background:#fff;color:#252832;font-weight:600}
.analytics-consent-actions #analytics-allow{background:#252832;color:#fff}
:root[data-theme=dark] .analytics-consent{background:#303030;color:#f2f2f2}
:root[data-theme=dark] .analytics-consent-actions button{border-color:#f2f2f2;background:#303030;color:#f2f2f2}
:root[data-theme=dark] .analytics-consent-actions #analytics-allow{background:#f2f2f2;color:#252832}

/* First-level rounded surfaces use one consistent corner radius. */
:root{--surface-radius:1.625rem}
dialog,.editor,.palette-group.open>.editor-slot>.editor,.comparison,.chart-menu{border-radius:var(--surface-radius)}

/* The mobile scale editor remains edge-to-edge, as designed. */
@media(max-width:47.5rem){.palette-group.open>.editor-slot>.editor{border-radius:0!important}}

/* Keep mobile chart-settings gestures inside the drawer. */
@media(max-width:47.5rem){
  html:has(.workspace:not(.sidebar-collapsed)),
  body:has(.workspace:not(.sidebar-collapsed)){overflow:hidden;overscroll-behavior:none}
  .workspace:not(.sidebar-collapsed)>aside#system-panel{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
}

/* Settings button shows the action for its current expanded state. */
.sidebar-toggle[aria-expanded="true"] .sidebar-open-icon,.sidebar-toggle[aria-expanded="false"] .sidebar-close-icon{display:none}

/* Keep the visual-test heading left-aligned at every breakpoint. */
.comparison-heading>.section-kicker{align-self:flex-start;text-align:left}

/* Full-width divider below the chart-settings heading. */
#system-panel{--settings-heading-padding:2rem;padding-top:var(--settings-heading-padding)}
#system-panel>.aside-heading{position:relative;min-height:2.625rem;padding-bottom:var(--settings-heading-padding)}
#system-panel>.aside-heading::after{content:"";position:absolute;right:-1.5625rem;bottom:0;left:-1.5625rem;height:.0625rem;background:var(--line)}
.workspace.sidebar-collapsed #system-panel>.aside-heading{padding-bottom:0}
.workspace.sidebar-collapsed #system-panel>.aside-heading::after{display:none}
.page-heading{min-height:2.625rem}
@media(max-width:47.5rem){#system-panel{--settings-heading-padding:1.5rem}#system-panel>.aside-heading::after{right:-1.5rem;left:-1.5rem}}

/* Give the collapsed trigger equal top and left offsets and center it on the scales title. */
.workspace.sidebar-collapsed main{padding-top:2rem}
.workspace.sidebar-collapsed .page-heading{align-items:center}
.workspace.sidebar-collapsed #system-panel>.aside-heading{position:fixed;top:var(--collapsed-trigger-top,7.125rem);left:2rem;width:2.625rem;height:2.625rem;margin:0}
.workspace.sidebar-collapsed #system-panel>.aside-heading .sidebar-toggle{margin-left:0}
@media(max-width:47.5rem){.workspace.sidebar-collapsed main{padding-top:1.75rem}.workspace.sidebar-collapsed .page-heading{align-items:flex-start}.workspace.sidebar-collapsed>aside#system-panel .aside-heading{top:var(--collapsed-trigger-top,5.125rem);left:1rem;margin:0}}

/* A rotated body is the containing block for fixed panels. Mirror the viewport's
   scroll position so drawers and the collapsed trigger remain in view. */
body.konami-flipped .preview-panel{top:var(--konami-fixed-top,0);bottom:auto;overscroll-behavior-y:contain}
@media(min-width:47.5625rem){
  body.konami-flipped .workspace:not(.sidebar-collapsed)>main{grid-column:2}
  body.konami-flipped .workspace:not(.sidebar-collapsed)>#system-panel{position:fixed;top:var(--konami-panel-top,0);bottom:auto;left:0;width:21.25rem;height:var(--konami-panel-height,100svh);max-height:none;overflow-y:auto;overscroll-behavior-y:contain}
}
@media(max-width:47.5rem){
  body.konami-flipped .workspace:not(.sidebar-collapsed)>#system-panel{top:var(--konami-panel-top,0);bottom:auto;height:var(--konami-panel-height,100svh);max-height:none}
}
body.konami-flipped .workspace.sidebar-collapsed #system-panel>.aside-heading{top:var(--konami-trigger-top,0)}