/* Hallmark · macrostructure: Workbench · tone: public-interface editorial · anchor hue: indigo
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · readable typography and attributed palette discovery
 */
@import url('./tokens.css');
@import url('./creation.css');
html:has(body.color-studio-page),body.color-studio-page { overflow-x:clip; }
html:has(body.color-studio-page) { scrollbar-gutter:stable; }
html.cs-modal-open:has(body.color-studio-page) { overflow-y:hidden!important; overscroll-behavior:none; }
.cs-dialog { overscroll-behavior:contain; }
body.color-studio-page { background:var(--cs-color-paper)!important; color:var(--cs-color-ink); font-family:var(--cs-font-body); }
.color-studio-page .cs-main,.cs-dialog { font-size:var(--cs-text-base); line-height:1.5; }
.color-studio-page .cs-main { padding:28px 0 0; }
.cs-rail { width:var(--pi-rail); margin-inline:auto; }
.cs-main *, .cs-dialog * { box-sizing:border-box; }
.cs-main h1,.cs-main h2,.cs-main h3,.cs-main h4,.cs-dialog h2,.cs-dialog h3 { margin:0; font-style:normal; color:var(--cs-color-ink); }
.cs-main button,.cs-main input,.cs-main select,.cs-dialog button,.cs-dialog input,.cs-dialog select,.cs-dialog textarea { font-family:var(--cs-font-body); font-size:var(--cs-text-base); }
.cs-main button,.cs-dialog button { cursor:pointer; }
.cs-main [hidden],.cs-dialog [hidden] { display:none!important; }
.cs-main :is(button,a,input,select,summary):focus-visible,.cs-dialog :is(button,a,input,select,summary,textarea):focus-visible { outline:var(--cs-rule-focus) solid var(--cs-color-focus); outline-offset:3px; }
.cs-main button:disabled,.cs-dialog button:disabled { opacity:.45; cursor:not-allowed; }
.cs-main img,.cs-dialog img { width:17px; height:17px; flex-shrink:0; }
.cs-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:clip; clip-path:inset(50%); white-space:nowrap; border:0; }
.cs-topline { display:flex; justify-content:space-between; align-items:center; color:var(--cs-color-muted); font-size:var(--cs-text-sm); }
.cs-topline nav { display:flex; gap:var(--cs-space-md); }
.cs-topline a { text-decoration:none; color:inherit; white-space:nowrap; }
.cs-local-note { display:flex; align-items:center; gap:var(--cs-space-sm); }
.cs-local-note::before { content:''; width:6px; height:6px; background:var(--cs-color-positive); border-radius:50%; }
.cs-masthead { display:flex; align-items:center; justify-content:space-between; gap:var(--cs-space-xl); margin:var(--cs-space-xl) 0 28px; }
.cs-masthead h1 { min-width:0; font-family:var(--cs-font-display); font-size:var(--cs-text-display); font-weight:750; letter-spacing:-.065em; line-height:1.22; overflow-wrap:anywhere; }
.cs-title-color { color:var(--cs-color-accent); }
.cs-masthead p { margin:10px 0 0; color:var(--cs-color-muted); font-size:var(--cs-text-base); }
.cs-mast-actions { display:flex; gap:var(--cs-space-sm); }
.cs-btn,.cs-icon-btn,.cs-text-btn { display:inline-flex; justify-content:center; align-items:center; gap:var(--cs-space-sm); white-space:nowrap; text-decoration:none; color:var(--cs-color-ink); border:var(--cs-rule-hair) solid var(--cs-color-line); background:var(--cs-color-surface); border-radius:var(--cs-radius-control); min-height:var(--cs-control-height); padding:0 14px; font-weight:600; line-height:1.25; position:relative; isolation:isolate; transition:transform var(--cs-dur-short) var(--cs-ease-out); }
.cs-btn::before,.cs-icon-btn::before,.cs-text-btn::before { content:''; position:absolute; z-index:-1; inset:0; background:var(--cs-color-soft); border-radius:inherit; opacity:0; transition:opacity var(--cs-dur-short) var(--cs-ease-out); }
.cs-btn:active,.cs-icon-btn:active,.cs-text-btn:active { transform:translateY(1px); }
.cs-primary { color:var(--cs-color-action-ink); background:var(--cs-color-accent); border-color:var(--cs-color-accent); }
.cs-primary img { filter:brightness(0) invert(1); }
.cs-primary::before { background:var(--cs-color-ink); }
.cs-text-btn { border:0; background:transparent; min-height:36px; padding:0 7px; font-size:var(--cs-text-sm)!important; color:var(--cs-color-muted); font-weight:500; }
.cs-icon-btn { width:var(--cs-control-height); padding:0; flex-shrink:0; }
.cs-icon-btn[aria-pressed="true"] { border-color:var(--cs-color-accent); color:var(--cs-color-accent); }
.cs-btn[data-state="copied"],.cs-text-btn[data-state="copied"] { color:var(--cs-color-positive); }
@media(hover:hover) { .cs-btn:hover::before,.cs-icon-btn:hover::before,.cs-text-btn:hover::before { opacity:1; } .cs-primary:hover::before { opacity:.12; } }
.cs-workspace { display:grid; grid-template-columns:250px minmax(0,1fr) 288px; grid-template-areas:"library editor inspector"; gap:20px; align-items:start; }
.cs-library { grid-area:library; }
.cs-editor { grid-area:editor; container-type:inline-size; }
.cs-inspector { grid-area:inspector; }
.cs-library { background:var(--cs-color-surface); border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-panel); padding:18px 12px 10px; min-width:0; }
.cs-library-head { display:flex; justify-content:space-between; align-items:center; margin:0 6px var(--cs-space-lg); }
.cs-library-head h2 { font-size:var(--cs-text-lg); font-weight:700; }
.cs-library-head > span { font-family:var(--cs-font-code); font-size:var(--cs-text-sm); color:var(--cs-color-muted); }
.cs-search { display:flex; align-items:center; gap:var(--cs-space-sm); min-height:var(--cs-control-height); padding:0 10px; margin-bottom:var(--cs-space-md); border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); background:var(--cs-color-paper); }
.cs-search input { width:100%; min-width:0; border:0; padding:0; color:var(--cs-color-ink); background:transparent; box-shadow:none; font-size:var(--cs-text-sm); height:38px; }
.cs-search input:focus { outline:none; }
.cs-search:focus-within { outline:var(--cs-rule-focus) solid var(--cs-color-focus); outline-offset:2px; }
.cs-segment { display:flex; gap:var(--cs-space-xs); padding:var(--cs-space-xs); background:var(--cs-color-paper); border-radius:var(--cs-radius-control); }
.cs-segment button { flex:1; min-height:32px; padding:0 8px; white-space:nowrap; font-size:var(--cs-text-sm); font-weight:600; color:var(--cs-color-muted); background:transparent; border:0; border-radius:var(--cs-radius-sm); }
.cs-segment button[aria-selected="true"] { color:var(--cs-color-ink); background:var(--cs-color-surface); box-shadow:0 1px 4px var(--cs-color-shade); }
.cs-library-tabs button span { margin-left:5px; font:12px var(--cs-font-code); }
.cs-type-filter { display:flex; justify-content:space-between; gap:2px; margin:var(--cs-space-md) 0; }
.cs-type-filter button { padding:7px 5px; border:0; background:transparent; color:var(--cs-color-muted); font-size:var(--cs-text-xs); border-radius:var(--cs-radius-sm); white-space:nowrap; }
.cs-type-filter button[aria-pressed="true"] { background:var(--cs-color-soft); color:var(--cs-color-accent); font-weight:700; }
.cs-catalog { max-height:628px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--cs-color-line) transparent; overscroll-behavior:contain; padding:3px; margin:0 -3px; }
.cs-catalog-item { display:block; position:relative; text-align:left; width:100%; border:var(--cs-rule-hair) solid transparent; border-radius:var(--cs-radius-control); color:var(--cs-color-ink); background:transparent; padding:11px 9px 9px; margin:0 0 4px; transition:transform var(--cs-dur-short) var(--cs-ease-out); }
.cs-catalog-item[aria-pressed="true"] { background:var(--cs-color-soft); border-color:var(--cs-color-line); }
.cs-catalog-title { display:flex; gap:var(--cs-space-sm); align-items:center; justify-content:space-between; font-size:var(--cs-text-sm); font-weight:650; }
.cs-catalog-title > span { color:var(--cs-color-accent); font-size:14px; }
.cs-catalog-meta { display:flex; justify-content:space-between; gap:var(--cs-space-sm); margin:4px 0 7px; color:var(--cs-color-muted); font-size:12px; font-weight:400; }
.cs-mini-swatches { display:flex; min-width:0; height:20px; border-radius:4px; overflow:clip; }
.cs-mini-swatches i { flex:1; display:block; background:var(--swatch); }
@media(hover:hover) { .cs-catalog-item:hover { background:var(--cs-color-paper); transform:translateX(2px); } }
.cs-library-foot { margin:10px 6px 0; font-size:12px; line-height:1.6; color:var(--cs-color-muted); }
.cs-empty { padding:32px 8px; text-align:center; color:var(--cs-color-muted); font-size:var(--cs-text-sm); line-height:1.8; }
.cs-empty strong { display:block; color:var(--cs-color-ink); font-size:var(--cs-text-base); margin-bottom:6px; }
.cs-editor { min-width:0; display:grid; gap:var(--cs-space-lg); }
body.color-studio-page .cs-palette-panel,body.color-studio-page .cs-preview-panel { border-radius:var(--cs-radius-panel)!important; }
body.color-studio-page :is(.cs-btn,.cs-icon-btn,.cs-dialog select,.cs-dialog input[type="text"]) { border-radius:var(--cs-radius-control)!important; }
body.color-studio-page .cs-text-btn { border-radius:var(--cs-radius-sm)!important; }
.cs-palette-panel,.cs-preview-panel { min-width:0; border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-panel); background:var(--cs-color-surface); padding:var(--cs-space-xl); }
.cs-palette-head { display:flex; justify-content:space-between; align-items:center; gap:var(--cs-space-md); margin-bottom:18px; }
.cs-current-source { font-size:var(--cs-text-xs); font-weight:500; color:var(--cs-color-muted); margin-bottom:6px; }
.cs-palette-head h2 { font-family:var(--cs-font-display); font-size:var(--cs-text-title); font-weight:700; letter-spacing:-.03em; overflow-wrap:anywhere; }
.cs-history-controls { display:flex; gap:4px; flex-shrink:0; }
.cs-history-controls .cs-icon-btn { width:32px; min-height:32px; border-color:transparent; background:transparent; }
.cs-history-controls .cs-icon-btn[aria-pressed="true"] { background:var(--cs-color-soft); }
.cs-swatches { display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)); gap:4px; }
.cs-swatch { position:relative; min-width:0; border-radius:var(--cs-radius-sm); background:var(--swatch); color:var(--swatch-ink); }
.cs-swatch-edit { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; width:100%; height:146px; padding:12px 8px; border:0; border-radius:inherit; color:inherit; background:transparent; text-align:left; position:relative; }
.cs-swatch-edit > small { font:12px var(--cs-font-code); opacity:.72; }
.cs-swatch-edit > strong { font:13px var(--cs-font-code); letter-spacing:-.05em; white-space:nowrap; }
.cs-swatch-edit::after { content:'编辑'; font:12px var(--cs-font-body); position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:opacity var(--cs-dur-short) var(--cs-ease-out),transform var(--cs-dur-short) var(--cs-ease-out); }
.cs-swatch:focus-within .cs-swatch-edit::after { opacity:.9; transform:none; }
.cs-swatch-actions { position:absolute; top:8px; right:4px; display:flex; flex-direction:column; gap:3px; opacity:0; transform:translateY(5px); transition:opacity var(--cs-dur-short) var(--cs-ease-out),transform var(--cs-dur-short) var(--cs-ease-out); }
.cs-swatch-actions button { display:grid; place-items:center; width:25px; height:25px; background:transparent; color:inherit; border:0; border-radius:4px; }
.cs-swatch-actions svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; }
.cs-swatch-actions button:hover { background:color-mix(in srgb,var(--swatch-ink) 14%,transparent); }
.cs-swatch:focus-within .cs-swatch-actions,.cs-swatch.is-locked .cs-swatch-actions { opacity:1; transform:none; }
.cs-swatch.is-locked .cs-swatch-actions button:not([data-action="lock"]) { opacity:0; }
.cs-swatch.is-locked:focus-within .cs-swatch-actions button { opacity:1; }
@media(hover:hover) { .cs-swatch:hover .cs-swatch-edit::after,.cs-swatch:hover .cs-swatch-actions,.cs-swatch.is-locked:hover .cs-swatch-actions button { opacity:1; transform:none; } }
.cs-swatches.is-many .cs-swatch-edit { height:108px; padding:10px 5px; }
.cs-swatches.is-many .cs-swatch-edit strong { font-size:12px; }
.cs-palette-tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--cs-space-sm); padding-block:12px 16px; }
.cs-palette-tools > div { display:flex; gap:4px; }
.cs-count-control { display:flex; align-items:center; gap:10px; color:var(--cs-color-muted); font-size:var(--cs-text-sm); }
.cs-count-control input { width:86px; margin:0; accent-color:var(--cs-color-accent); }
.cs-count-control output { color:var(--cs-color-ink); width:18px; font:600 var(--cs-text-sm) var(--cs-font-code); }
.cs-create-bar { display:flex; align-items:flex-end; gap:var(--cs-space-sm); border-top:var(--cs-rule-hair) solid var(--cs-color-line); padding-top:var(--cs-space-lg); }
.cs-seed { min-width:0; flex:1; }
.cs-seed label { display:block; color:var(--cs-color-muted); font-size:var(--cs-text-xs); margin-bottom:6px; }
.cs-seed > span { display:flex; align-items:center; height:var(--cs-control-height); gap:var(--cs-space-sm); border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); padding:0 8px; background:var(--cs-color-paper); }
.cs-seed input[type="color"] { border:0; background:transparent; padding:0; width:22px; min-width:22px; height:24px; cursor:pointer; }
.cs-seed input[type="text"] { border:0; background:transparent; padding:0; min-width:0; width:100%; font:var(--cs-text-sm) var(--cs-font-code); color:var(--cs-color-ink); box-shadow:none; }
.cs-seed input[type="text"]:focus { outline:none; }
.cs-seed > span:focus-within { outline:var(--cs-rule-focus) solid var(--cs-color-focus); outline-offset:2px; }
.cs-main select,.cs-dialog select { border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); background:var(--cs-color-surface); color:var(--cs-color-ink); height:var(--cs-control-height); padding:0 25px 0 10px; min-width:0; }
.cs-mode select { width:116px; font-size:var(--cs-text-sm); }
.cs-create-bar .cs-btn { font-size:var(--cs-text-sm); padding:0 12px; }
.cs-inline-status { min-height:18px; margin:6px 0; font-size:var(--cs-text-xs); line-height:1.6; color:var(--cs-color-muted); }
.cs-inline-status[data-error="true"] { color:var(--cs-color-error); }
.cs-import-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px; }
.cs-upload { cursor:pointer; }
.cs-upload:focus-within { outline:var(--cs-rule-focus) solid var(--cs-color-focus); outline-offset:3px; }
.cs-upload input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.cs-preview-head { display:flex; align-items:center; justify-content:space-between; gap:var(--cs-space-md); margin-bottom:var(--cs-space-lg); }
.cs-preview-head h2 { font-size:var(--cs-text-lg); font-weight:650; }
.cs-preview-head p { font-size:var(--cs-text-xs); color:var(--cs-color-muted); margin:5px 0 0; }
.cs-alpha { display:flex; align-items:center; gap:6px; color:var(--cs-color-muted); font-size:12px; white-space:nowrap; }
.cs-alpha input { width:54px; accent-color:var(--cs-color-accent); }
.cs-alpha output { min-width:30px; font-family:var(--cs-font-code); }
.cs-chart-tabs { display:flex; gap:16px; border-bottom:var(--cs-rule-hair) solid var(--cs-color-line); }
.cs-chart-tabs button { position:relative; border:0; background:transparent; color:var(--cs-color-muted); padding:0 0 12px; font-size:var(--cs-text-sm); white-space:nowrap; }
.cs-chart-tabs button::after { content:''; position:absolute; height:2px; background:var(--cs-color-accent); bottom:-1px; left:0; right:0; transform:scaleX(0); transform-origin:left; transition:transform var(--cs-dur-switch) var(--cs-ease-out); }
.cs-chart-tabs button[aria-selected="true"] { color:var(--cs-color-accent); font-weight:700; }
.cs-chart-tabs button[aria-selected="true"]::after { transform:scaleX(1); }
.cs-vision-bar { display:flex; align-items:center; gap:var(--cs-space-sm); margin:var(--cs-space-lg) 0 var(--cs-space-sm); font-size:var(--cs-text-xs); color:var(--cs-color-muted); }
.cs-vision-bar select { font-size:var(--cs-text-xs); height:32px; border:0; background:var(--cs-color-paper); max-width:190px; }
.cs-pattern { margin-left:auto; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cs-pattern input { accent-color:var(--cs-color-accent); }
.cs-chart-stage { position:relative; background:var(--cs-color-chart-paper); border:var(--cs-rule-hair) solid var(--cs-color-chart-line); border-radius:var(--cs-radius-control); min-width:0; isolation:isolate; }
.cs-chart-stage svg { display:block; width:100%; height:auto; aspect-ratio:720/356; border-radius:inherit; }
.cs-chart-ghost { position:absolute; inset:0; pointer-events:none; background:var(--cs-color-chart-paper); border-radius:inherit; }
.cs-preview-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--cs-space-sm); margin-top:var(--cs-space-sm); color:var(--cs-color-muted); font-size:12px; }
.cs-preview-foot > span { max-width:45em; line-height:1.6; }
.cs-inspector { background:var(--cs-color-surface); border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-panel); padding:20px 18px; min-width:0; }
.cs-inspector section + section { border-top:var(--cs-rule-hair) solid var(--cs-color-line); padding-top:20px; margin-top:20px; }
.cs-section-title { display:flex; align-items:center; gap:7px; margin-bottom:var(--cs-space-lg); }
.cs-section-title h2 { font-size:var(--cs-text-sm); font-weight:700; }
.cs-kind-label { display:inline-block; padding:3px 7px; font-size:12px; border-radius:4px; background:var(--cs-color-soft); color:var(--cs-color-accent); font-weight:600; }
.cs-advice > p { font-size:var(--cs-text-sm); line-height:1.9; color:var(--cs-color-muted); margin:10px 0; }
.cs-source-link { display:flex; align-items:center; gap:var(--cs-space-sm); min-height:28px; font-size:var(--cs-text-xs); text-decoration:none; color:var(--cs-color-accent); font-weight:600; }
.cs-advice p.cs-source-version { font-size:12px; line-height:1.6; opacity:.8; margin-top:5px; }
.cs-check-result { display:grid; gap:5px; font-size:var(--cs-text-xs); line-height:1.7; color:var(--cs-color-muted); }
.cs-check-result strong { display:flex; align-items:center; gap:6px; font-weight:600; color:var(--cs-color-ink); font-size:var(--cs-text-sm); }
.cs-check-result[data-warning="true"] strong { color:var(--cs-color-warning); }
.cs-lightness { margin:var(--cs-space-md) 0; padding:10px 0 4px; }
.cs-lightness svg { width:100%; height:auto; display:block; }
.cs-contrast-details { margin-top:14px; }
.cs-contrast-details summary { cursor:pointer; display:flex; justify-content:space-between; font-size:var(--cs-text-xs); color:var(--cs-color-ink); padding-block:8px; list-style:none; }
.cs-contrast-details summary::-webkit-details-marker { display:none; }
.cs-contrast-details[open] summary span { transform:rotate(45deg); }
.cs-contrast-details p,.cs-check-note { font-size:12px; line-height:1.8; color:var(--cs-color-muted); margin:12px 0 0; }
.cs-contrast-row { display:flex; gap:6px; align-items:center; justify-content:space-between; min-height:26px; font:12px var(--cs-font-code); border-top:var(--cs-rule-hair) solid var(--cs-color-line); }
.cs-contrast-row > span { display:flex; align-items:center; gap:5px; }
.cs-contrast-row i { width:10px; height:10px; border-radius:2px; background:var(--swatch); }
.cs-quick-code pre { padding:12px; border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); background:var(--cs-color-paper); white-space:pre-wrap; word-break:break-word; color:var(--cs-color-ink); font:12px/1.9 var(--cs-font-code); max-height:205px; overflow:auto; margin:12px 0; }
.cs-quick-code .cs-btn { width:100%; font-size:var(--cs-text-sm); }
.cs-share { width:100%; margin-top:4px; color:var(--cs-color-accent); }
.cs-comparison { border-top:var(--cs-rule-hair) solid var(--cs-color-line); margin-top:var(--cs-space-lg); padding-top:var(--cs-space-lg); }
.cs-comparison > header { display:flex; align-items:center; justify-content:space-between; gap:var(--cs-space-lg); margin-bottom:10px; }
.cs-comparison h3 { font-size:var(--cs-text-base); font-weight:650; }
.cs-comparison header .cs-icon-btn { width:28px; min-height:28px; border:0; background:transparent; }
.cs-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cs-space-md); }
.cs-compare-grid h4 { margin:0 0 8px; font-size:var(--cs-text-xs); color:var(--cs-color-muted); font-weight:500; }
.cs-compare-grid svg { display:block; width:100%; height:auto; border:var(--cs-rule-hair) solid var(--cs-color-chart-line); border-radius:var(--cs-radius-sm); background:var(--cs-color-chart-paper); }
.cs-notes { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:60px; margin:var(--cs-space-3xl) 0 64px; padding-top:var(--cs-space-2xl); border-top:var(--cs-rule-hair) solid var(--cs-color-line); }
.cs-notes h2 { font:650 24px/1.4 var(--cs-font-display); letter-spacing:-.03em; }
.cs-notes p { font-size:var(--cs-text-sm); line-height:1.85; color:var(--cs-color-muted); max-width:40em; margin:12px 0 0; }
.cs-notes nav { display:grid; align-content:start; }
.cs-notes nav a { display:flex; gap:var(--cs-space-lg); align-items:center; justify-content:space-between; padding:10px 0; font-size:var(--cs-text-sm); color:var(--cs-color-ink); text-decoration:none; border-bottom:var(--cs-rule-hair) solid var(--cs-color-line); white-space:nowrap; }
.cs-notes nav a span { font-size:12px; color:var(--cs-color-muted); }
.cs-dialog { position:fixed; inset:0; margin:auto; height:fit-content; max-height:calc(100dvh - 48px); width:min(480px,calc(100vw - 28px)); max-width:700px; padding:28px; border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-dialog); color:var(--cs-color-ink); background:var(--cs-color-surface); box-shadow:var(--cs-shadow-popover); overflow:auto; }
.cs-dialog::backdrop { background:var(--cs-color-backdrop); backdrop-filter:blur(4px); }
.cs-dialog header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--cs-space-lg); margin-bottom:var(--cs-space-xl); }
.cs-dialog h2 { font:700 23px/1.4 var(--cs-font-display); letter-spacing:-.035em; }
.cs-dialog header .cs-icon-btn { width:30px; min-height:30px; border:0; }
.cs-dialog footer { display:flex; justify-content:flex-end; gap:var(--cs-space-sm); margin-top:var(--cs-space-xl); padding-top:var(--cs-space-lg); border-top:var(--cs-rule-hair) solid var(--cs-color-line); }
.cs-dialog p { color:var(--cs-color-muted); font-size:var(--cs-text-sm); line-height:1.8; }
.cs-dialog .cs-inline-status { font-size:var(--cs-text-xs); }
.cs-dialog .cs-helper { font-size:var(--cs-text-xs); }
.cs-color-editor { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:var(--cs-space-lg); }
.cs-color-editor > input[type="color"] { grid-row:span 2; width:100px; height:108px; border:0; background:transparent; padding:0; cursor:pointer; }
.cs-color-editor label { display:block; font-size:var(--cs-text-sm); }
.cs-dialog input[type="text"] { margin-top:8px; width:100%; background:var(--cs-color-paper); color:var(--cs-color-ink); border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); height:44px; padding:0 10px; font-family:var(--cs-font-code); }
#editValues { font:12px/1.8 var(--cs-font-code); color:var(--cs-color-muted); }
.cs-field-label { display:block; font-size:var(--cs-text-sm); font-weight:500; margin-bottom:var(--cs-space-sm); }
.cs-dialog textarea { width:100%; resize:vertical; background:var(--cs-color-paper); color:var(--cs-color-ink); padding:12px; border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-control); line-height:1.8; font-family:var(--cs-font-code); }
.cs-dialog #customKind { width:100%; }
.cs-export-dialog { width:min(620px,calc(100vw - 28px)); }
.cs-export-dialog header p { margin:8px 0 0; font-size:var(--cs-text-sm); }
.cs-export-swatches { display:flex; height:44px; overflow:clip; border-radius:var(--cs-radius-control); margin-bottom:var(--cs-space-xl); }
.cs-export-swatches i { flex:1; background:var(--swatch); }
.cs-export-formats { display:flex; flex-wrap:wrap; gap:var(--cs-space-sm); margin-bottom:var(--cs-space-lg); }
.cs-export-formats button { border:var(--cs-rule-hair) solid var(--cs-color-line); color:var(--cs-color-muted); background:var(--cs-color-surface); font-size:var(--cs-text-sm); padding:8px 12px; border-radius:var(--cs-radius-sm); }
.cs-export-formats button[aria-pressed="true"] { border-color:var(--cs-color-accent); color:var(--cs-color-accent); background:var(--cs-color-soft); }
.cs-export-dialog pre { font:13px/1.8 var(--cs-font-code); background:var(--cs-color-paper); border:var(--cs-rule-hair) solid var(--cs-color-line); padding:var(--cs-space-lg); border-radius:var(--cs-radius-control); max-height:260px; min-height:130px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.cs-sources-dialog { width:min(640px,calc(100vw - 28px)); }
.cs-sources-dialog dl { margin:var(--cs-space-xl) 0; }
.cs-sources-dialog dl > div { border-top:var(--cs-rule-hair) solid var(--cs-color-line); padding-block:var(--cs-space-lg); }
.cs-sources-dialog dt { font-weight:650; font-size:var(--cs-text-base); }
.cs-sources-dialog dd { margin:6px 0 0; font-size:var(--cs-text-sm); color:var(--cs-color-muted); line-height:1.85; }
.cs-sources-dialog a { color:var(--cs-color-accent); text-decoration:none; }
.cs-sources-dialog summary { font-size:var(--cs-text-sm); cursor:pointer; }
.cs-inspiration { border-top:var(--cs-rule-hair) solid var(--cs-color-line); padding-top:var(--cs-space-lg); margin-top:var(--cs-space-xl); }
.cs-inspiration h3 { font-size:var(--cs-text-base); }
.cs-boot { padding:60px 20px; text-align:center; border:var(--cs-rule-hair) solid var(--cs-color-line); border-radius:var(--cs-radius-panel); background:var(--cs-color-surface); color:var(--cs-color-muted); font-size:var(--cs-text-base); }
.cs-boot button { margin:10px auto; }
html[data-theme="dark"] .cs-main img,html[data-theme="dark"] .cs-dialog img { filter:invert(.88); }
html[data-theme="dark"] .cs-primary img { filter:none; }
@media(max-width:1320px) { .cs-workspace { grid-template-columns:220px minmax(0,1fr) 264px; gap:var(--cs-space-lg); } .cs-catalog { max-height:590px; } }
/* On tablets, keep the sticky catalogue in its own track across both rows. */
@media(max-width:1000px) { .cs-workspace { grid-template-columns:220px minmax(0,1fr); grid-template-areas:"library editor" "library inspector"; } }
@media(max-width:800px) { .cs-workspace { grid-template-columns:200px minmax(0,1fr); gap:var(--cs-space-md); } .cs-palette-panel,.cs-preview-panel { padding:var(--cs-space-lg); } .cs-create-bar { flex-wrap:wrap; } .cs-seed { flex-basis:40%; } .cs-mode { flex:1; } .cs-mode select { width:100%; } .cs-section-title img { display:none; } .cs-palette-tools { gap:0; } .cs-count-control input { width:60px; } .cs-swatch-edit strong { font-size:9px; } .cs-chart-tabs { gap:12px; } .cs-preview-head { flex-wrap:wrap; } .cs-notes { gap:28px; } }
@media(max-width:640px) {
 .color-studio-page .cs-main { padding-top:20px; } .cs-local-note { display:none; }
 .cs-masthead { margin:22px 0; align-items:flex-start; flex-direction:column; gap:var(--cs-space-lg); } .cs-masthead h1 { font-size:36px; } .cs-masthead p { font-size:14px; } .cs-mast-actions { width:100%; } .cs-mast-actions .cs-btn { flex:1; min-height:44px; font-size:var(--cs-text-sm); }
 .cs-workspace { display:flex; flex-direction:column; gap:var(--cs-space-lg); } .cs-library { width:100%; padding:14px; } .cs-library-head { margin:0 0 12px; } .cs-search { margin-bottom:8px; } .cs-library-tabs { position:relative; inset:auto; width:auto; background:var(--cs-color-paper); } .cs-library { position:relative; }
 .cs-type-filter { justify-content:flex-start; gap:14px; margin:8px 0; } .cs-type-filter button { padding:6px; font-size:14px; }
 .cs-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-height:176px; padding:4px; margin:0 -4px; } .cs-catalog-item { padding:9px; margin:0; } .cs-catalog-meta { font-size:9px; } .cs-catalog-title { font-size:13px; } .cs-mini-swatches { height:18px; } .cs-library-foot { display:none; }
 .cs-editor { width:100%; } .cs-palette-head h2 { font-size:19px; } .cs-current-source { font-size:12px; } .cs-history-controls { gap:0; }
 .cs-swatches { grid-template-columns:repeat(var(--mobile-cols),minmax(0,1fr)); gap:3px; } .cs-swatch-edit { height:130px; padding:10px 5px; } .cs-swatch-edit strong { font-size:13px; letter-spacing:-.05em; }
 .cs-swatch-actions { opacity:1; transform:none; } .cs-swatch-actions button:not([data-action="lock"]) { display:none; } .cs-swatch-actions { right:2px; } .cs-swatch-actions button { height:32px; width:32px; } .cs-swatch-actions svg { width:13px; height:13px; }
 .cs-swatches.is-many .cs-swatch-edit { height:95px; } .cs-swatches.is-many .cs-swatch-edit strong { font-size:12px; }
 .cs-palette-tools > div { gap:0; } .cs-count-control { gap:6px; font-size:13px; } .cs-count-control input { width:56px; } .cs-palette-tools .cs-text-btn { font-size:12px!important; gap:4px; padding:0 4px; } .cs-palette-tools .cs-text-btn img { width:13px; height:13px; }
 .cs-create-bar { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:var(--cs-space-sm); align-items:end; } .cs-seed { grid-column:1/-1; } .cs-mode { grid-column:1; } #generatePalette { grid-row:3; min-height:44px; } #shufflePalette { grid-column:2; grid-row:3; min-height:44px; width:40px; } .cs-mode select { width:100%; }
 .cs-import-actions { gap:4px; } .cs-import-actions .cs-text-btn { font-size:12px!important; padding-inline:4px; gap:4px; min-height:40px; } .cs-import-actions img { width:14px; height:14px; }
 .cs-preview-head { align-items:flex-start; gap:12px; } .cs-preview-head h2 { font-size:15px; } .cs-alpha { margin-left:0; } .cs-chart-tabs { justify-content:space-between; gap:8px; } .cs-chart-tabs button { font-size:13px; padding-bottom:12px; min-height:40px; } .cs-vision-bar { flex-wrap:wrap; gap:6px; } .cs-vision-bar > label:first-child { display:none; } .cs-vision-bar select { max-width:165px; padding-left:8px; font-size:12px; } .cs-pattern { font-size:12px; } .cs-chart-stage svg { min-height:0; }
 .cs-inspector { width:100%; display:block; padding:var(--cs-space-xl); } .cs-inspector section + section { border-left:0; border-top:var(--cs-rule-hair) solid var(--cs-color-line); padding:24px 0 0; margin-top:24px; } .cs-section-title img { display:block; } .cs-section-title h2 { font-size:var(--cs-text-base); } .cs-lightness { max-width:300px; } .cs-quick-code pre { font-size:13px; } .cs-inspector .cs-btn { min-height:44px; }
 .cs-notes { grid-template-columns:minmax(0,1fr); gap:var(--cs-space-xl); margin:36px 0 40px; padding-top:24px; } .cs-notes h2 { font-size:22px; } .cs-notes nav a { display:block; white-space:normal; line-height:1.5; } .cs-notes nav a span { display:block; margin-top:5px; }
 .cs-dialog { padding:22px; } .cs-dialog h2 { font-size:21px; } .cs-dialog .cs-btn { min-height:44px; font-size:14px; } .cs-color-editor { grid-template-columns:72px minmax(0,1fr); gap:12px; } .cs-color-editor > input[type="color"] { width:72px; height:100px; } .cs-export-formats { gap:6px; } .cs-export-formats button { padding:8px 10px; } .cs-compare-grid { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .cs-main *, .cs-dialog * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Scoped input surfaces override the shared deep-page form treatment. */
html[data-theme] body.color-studio-page :is(.cs-search input,.cs-seed input[type="text"]) { background:transparent!important; color:var(--cs-color-ink)!important; border:0!important; }
html[data-theme] body.color-studio-page .cs-main select { background:var(--cs-color-surface)!important; color:var(--cs-color-ink)!important; }

body.color-studio-page :is(.cs-segment button,.cs-catalog-item,.cs-type-filter button,.cs-export-formats button) { border-radius:var(--cs-radius-sm)!important; }
body.color-studio-page .cs-swatch-edit { border-radius:inherit!important; }
body.color-studio-page :is(.cs-main select,.cs-dialog select) { border-radius:var(--cs-radius-control)!important; }

@media(min-width:641px) {
 /* Hallmark · component: palette library · locked public interface
  * pre-emit critique: P4 H4 E4 S5 R5 V4 · reserve readable list space.
  */
 .cs-library { position:relative; top:auto; max-height:none; display:flex; flex-direction:column; }
 .cs-library :is(.cs-library-head,.cs-search,.cs-library-tabs,.cs-type-filter,.cs-source-filter,.cs-journal-area,.cs-library-browse,.cs-library-foot) { flex-shrink:0; }
 .cs-catalog { height:clamp(240px,36dvh,480px); max-height:none; flex:none; }
}
@media(min-width:641px) and (min-height:850px) {
 .cs-library { position:sticky; top:calc(var(--site-header-height,60px) + 24px); }
}

/* Colour is the workspace. Transitions follow edits rather than restarting the canvas. */
.cs-masthead { margin-top:28px; margin-bottom:24px; }
.cs-masthead h1 { letter-spacing:-.055em; }
.cs-masthead p { font-size:15px; }
.cs-library { border-color:transparent; background:transparent; padding-inline:0; }
.cs-library-head { margin-inline:9px; }
.cs-search { margin-inline:3px; background:var(--cs-color-surface); }
.cs-library-tabs { margin-inline:3px; background:var(--cs-color-soft); }
.cs-catalog-item { padding-block:13px; }
.cs-catalog-title { font-size:14px; }
.cs-mini-swatches { height:24px; }
.cs-palette-panel { box-shadow:var(--cs-shadow-panel); }
.cs-palette-head h2 { font-size:24px; }
.cs-swatch-edit { height:132px; padding:14px 10px; }
.cs-swatch-edit strong { font-size:14px; letter-spacing:-.035em; }
.cs-swatch-edit::after { font-size:14px; }
.cs-swatch { isolation:isolate; }
.cs-swatch::before { content:''; position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--swatch-ink) 8%,transparent); border-radius:inherit; pointer-events:none; }
.cs-swatch-actions { top:10px; right:6px; gap:4px; }
.cs-swatch-actions button { width:28px; height:28px; }
.cs-swatch-actions svg { width:15px; height:15px; }
.cs-swatch[draggable="true"] { cursor:grab; }
.cs-swatch.is-dragging { opacity:.45; cursor:grabbing; }
.cs-swatch.is-drop-target::before { border:3px solid var(--swatch-ink); }
.cs-preview-actions { display:flex; align-items:center; gap:16px; }
.cs-preview-actions .cs-icon-btn { min-height:32px; width:32px; border:0; }
.cs-chart-tabs,.cs-segment { position:relative; isolation:isolate; }
.cs-chart-tabs button { z-index:1; }
.cs-chart-tabs .cs-tab-indicator { position:absolute; height:2px; bottom:-1px; left:0; background:var(--cs-color-accent); transform-origin:left; pointer-events:none; }
.cs-chart-tabs:has(.cs-tab-indicator) button::after { display:none; }
.cs-segment .cs-tab-indicator { position:absolute; top:4px; bottom:4px; left:0; z-index:-1; background:var(--cs-color-surface); border-radius:var(--cs-radius-sm); box-shadow:0 1px 4px var(--cs-color-shade); pointer-events:none; }
.cs-segment:has(.cs-tab-indicator) button[aria-selected="true"] { background:transparent; box-shadow:none; }
.cs-tooltip { position:fixed; z-index:9999; max-width:min(280px,calc(100vw - 24px)); padding:9px 12px; color:var(--cs-color-tooltip-text); background:var(--cs-color-tooltip); border-radius:var(--cs-radius-control); font:12px/1.55 var(--cs-font-body); box-shadow:var(--cs-shadow-popover); pointer-events:none; text-align:center; }
.cs-tooltip[hidden] { display:none; }
.cs-tooltip kbd { display:inline-block; margin-left:8px; padding:0 4px; border:1px solid currentColor; border-radius:3px; font:12px var(--cs-font-code); opacity:.7; }
.cs-edit-dialog { width:min(650px,calc(100vw - 28px)); }
.cs-edit-dialog header p { margin:6px 0 0; }
.cs-picker-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; }
.cs-sv-plane { position:relative; width:100%; height:205px; padding:0; border:0; border-radius:var(--cs-radius-control)!important; background:linear-gradient(0deg,var(--cs-color-picker-black),transparent),linear-gradient(90deg,var(--cs-color-picker-white),transparent),var(--picker-hue); touch-action:none; cursor:crosshair!important; overflow:clip; }
.cs-sv-handle { position:absolute; width:18px; height:18px; border:2px solid var(--cs-color-picker-white); border-radius:50%; box-shadow:0 0 0 1px var(--cs-color-picker-black); transform:translate(-50%,-50%); pointer-events:none; }
.cs-hue-control { display:flex; align-items:center; gap:10px; margin-top:18px; font-size:14px; }
.cs-hue-control input { min-width:0; width:100%; height:14px; border:0; border-radius:7px; background:var(--cs-picker-spectrum); appearance:none; cursor:ew-resize; margin:0; }
.cs-hue-control input::-webkit-slider-thumb { appearance:none; width:18px; height:18px; background:var(--cs-color-picker-white); border:2px solid var(--cs-color-surface); box-shadow:0 0 0 1px var(--cs-color-ink); border-radius:50%; }
.cs-hue-control input::-moz-range-thumb { width:16px; height:16px; background:var(--cs-color-picker-white); border:1px solid var(--cs-color-ink); border-radius:50%; }
.cs-hue-control output { min-width:34px; font:13px var(--cs-font-code); text-align:right; }
.cs-hue-control > span { flex-shrink:0; white-space:nowrap; }
body.color-studio-page .cs-dialog .cs-sv-plane { border-radius:var(--cs-radius-control)!important; }
.cs-picker-controls > p { margin-top:15px; }
.cs-edit-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.cs-edit-pair span { display:block; height:65px; border-radius:var(--cs-radius-sm); background:var(--preview-color); border:1px solid var(--cs-color-line); }
.cs-edit-pair small { display:block; color:var(--cs-color-muted); font-size:13px; margin-top:6px; }
.cs-picker-info input[type="text"] { font-size:16px; margin-top:7px; }
html[data-theme] body.color-studio-page .cs-dialog input[type="text"] { background:var(--cs-color-paper)!important; color:var(--cs-color-ink)!important; border:1px solid var(--cs-color-line)!important; }
html[data-theme] body.color-studio-page .cs-dialog input[type="text"]:focus { border-color:var(--cs-color-accent)!important; box-shadow:none!important; }
html[data-theme] body.color-studio-page .cs-dialog input[type="text"][aria-invalid="true"] { border-color:var(--cs-color-error)!important; }
.cs-picker-info #editValues { margin-block:14px; font-size:13px; white-space:pre-line; }
.cs-edit-contrast { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:10px 0; border-top:1px solid var(--cs-color-line); }
.cs-edit-contrast strong { font:600 13px var(--cs-font-code); }
.cs-focus-dialog { width:min(1120px,calc(100vw - 40px)); max-width:1120px; padding:28px; }
.cs-focus-dialog header { margin-bottom:20px; }
.cs-focus-dialog header p { margin:6px 0 0; }
.cs-focus-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.cs-focus-toolbar .cs-chart-tabs { flex:1; }
.cs-focus-toolbar select { font-size:14px; max-width:175px; height:32px; }
.cs-focus-swatches { display:flex; gap:5px; margin-top:20px; }
.cs-focus-swatches span { display:grid; place-items:center; min-width:0; flex:1; height:40px; border-radius:var(--cs-radius-sm); background:var(--swatch); color:var(--swatch-ink); font:13px var(--cs-font-code); }
.cs-focus-swatches.is-many span { font-size:9px; }
.cs-focus-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; color:var(--cs-color-muted); font-size:13px; }
.cs-focus-foot .cs-btn { font-size:14px; }
.cs-shortcuts-dialog { width:min(520px,calc(100vw - 28px)); }
.cs-shortcuts-dialog dl { margin:0; }
.cs-shortcuts-dialog dl > div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:15px; border-bottom:1px solid var(--cs-color-line); font-size:14px; }
.cs-shortcuts-dialog dd { margin:0; white-space:nowrap; }
.cs-shortcuts-dialog kbd { display:inline-block; padding:4px 6px; border:1px solid var(--cs-color-line); border-radius:4px; background:var(--cs-color-paper); font:12px var(--cs-font-code); }
.cs-export-formats button { transition:background-color var(--cs-dur-short) var(--cs-ease-out),color var(--cs-dur-short) var(--cs-ease-out); }
#exportSourceDetails { margin-top:12px; }
#exportSourceDetails summary { cursor:pointer; padding-block:8px; color:var(--cs-color-accent); font-size:14px; }
#exportSourceDetails summary[hidden] { display:none; }
#exportBinaryInfo { white-space:pre-line; }
#exportVisual { margin-top:8px; }
.cs-dialog :is(#editError,#exportError):empty { display:none; }
/* Native dialog keeps its top-layer surface during the short exit transition. */
.cs-dialog { transition:opacity 180ms var(--cs-ease-out),transform 180ms var(--cs-ease-out),overlay 180ms allow-discrete,display 180ms allow-discrete; }
.cs-dialog:not([open]) { opacity:0; transform:translateY(5px) scale(.98); }
.cs-dialog[open] { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) { .cs-dialog { transition:none!important; } }
@container(max-width:560px) {
 .cs-swatches { grid-template-columns:repeat(var(--mobile-cols),minmax(0,1fr)); }
 .cs-create-bar { flex-wrap:wrap; }
 .cs-seed { flex-basis:50%; }
 .cs-mode { flex:1; }
 .cs-mode select { width:100%; }
}
@media(max-width:800px) { .cs-swatch-edit { padding:12px 5px; } .cs-swatch-edit strong { font-size:9px; } .cs-swatch-actions { right:3px; } .cs-preview-actions { gap:6px; } }
@media(max-width:640px) {
 .cs-masthead { margin:24px 0; } .cs-masthead p { font-size:14px; }
 .cs-mast-actions { gap:6px; } .cs-mast-actions #openShortcuts { display:none; }
 .cs-library { border:1px solid var(--cs-color-line); background:var(--cs-color-surface); padding:14px; }
 .cs-library-head { margin-inline:0; } .cs-library-tabs { margin-inline:0; }
 .cs-catalog-item { padding:9px; } .cs-catalog-title { font-size:13px; } .cs-mini-swatches { height:18px; }
 .cs-palette-head h2 { font-size:20px; } .cs-swatch-edit { height:130px; padding:10px 6px; } .cs-swatch-edit strong { font-size:13px; }
 .cs-swatch-actions { top:6px; right:2px; } .cs-swatch-actions button { width:28px; height:28px; }
 .cs-preview-actions { width:100%; justify-content:space-between; }
 .cs-picker-layout { grid-template-columns:minmax(0,1fr); gap:18px; } .cs-sv-plane { height:190px; }
 .cs-edit-pair { margin-bottom:16px; } .cs-edit-pair span { height:44px; }
 .cs-edit-dialog { padding:20px; } .cs-picker-info #editValues { font-size:12px; }
 .cs-focus-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:16px; }
 .cs-focus-dialog h2 { font-size:21px; } .cs-focus-toolbar { display:block; } .cs-focus-toolbar select { margin-top:15px; width:100%; max-width:100%; }
 .cs-focus-swatches { display:grid; grid-template-columns:repeat(var(--mobile-cols,3),minmax(0,1fr)); gap:3px; margin-top:16px; } .cs-focus-swatches span { font-size:12px; height:36px; }
 .cs-focus-foot { gap:10px; flex-wrap:wrap; } .cs-focus-foot .cs-btn { width:100%; }
}

/* Readable labels and focused palette discovery. Shared site chrome is unchanged. */
.cs-library-head { gap:8px; margin-bottom:16px; }
.cs-library-head > span { margin-left:auto; white-space:nowrap; font-size:var(--cs-text-xs); }
.cs-library-head .cs-icon-btn { width:30px; min-height:30px; border:0; background:transparent; }
.cs-source-filter { display:block; margin:10px 3px 0; }
.cs-source-filter select { width:100%; height:38px; background:transparent; font-size:var(--cs-text-sm); }
.cs-library-browse { width:100%; justify-content:space-between; color:var(--cs-color-accent); margin-top:10px; padding-inline:9px; min-height:40px; }
.cs-catalog-title { font-size:var(--cs-text-base); line-height:1.45; }
.cs-catalog-meta { font-size:var(--cs-text-xs); line-height:1.5; }
.cs-library-foot { font-size:var(--cs-text-xs); }
.cs-library-tabs button { min-height:38px; font-size:var(--cs-text-sm); }
.cs-library-tabs button span { font-size:var(--cs-text-xs); }
.cs-type-filter button { font-size:var(--cs-text-sm); min-height:36px; }
.cs-current-source { font-size:var(--cs-text-sm); }
.cs-section-title h2 { font-size:var(--cs-text-base); line-height:1.5; }
.cs-advice > p { font-size:var(--cs-text-sm); line-height:1.85; }
.cs-advice p.cs-source-version { font-size:var(--cs-text-xs); opacity:1; }
.cs-check-note { font-size:var(--cs-text-xs); }
.cs-check-result { font-size:var(--cs-text-sm); }
.cs-check-result strong { font-size:var(--cs-text-sm); }
.cs-quick-code pre { font:var(--cs-text-xs)/1.8 var(--cs-font-code); }
.cs-masthead { margin-block:24px; }
.cs-masthead p { font-size:var(--cs-text-base); }
.cs-palette-panel { padding:22px; }
.cs-palette-head { margin-bottom:16px; }
.cs-palette-tools { padding-block:12px; }
.cs-inline-status:empty { display:none; }
.cs-inline-status { min-height:0; }
.cs-import-actions { margin-top:8px; }
.cs-preview-head h2 { font-size:var(--cs-text-lg); }
.cs-alpha { font-size:var(--cs-text-xs); }
.cs-preview-foot { font-size:var(--cs-text-xs); }
.cs-history-controls .cs-icon-btn { min-height:36px; width:36px; }
.cs-generator { border-top:1px solid var(--cs-color-line); }
.cs-generator > summary { display:flex; align-items:center; gap:12px; min-height:48px; color:var(--cs-color-ink); font-size:var(--cs-text-sm); list-style:none; cursor:pointer; font-weight:600; }
.cs-generator > summary::-webkit-details-marker { display:none; }
.cs-generator-seed { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--cs-color-muted); font:var(--cs-text-xs) var(--cs-font-code); font-weight:400; }
.cs-generator-seed i { width:14px; height:14px; background:var(--swatch); border-radius:3px; }
.cs-disclosure { color:var(--cs-color-muted); font-size:20px; font-weight:400; transition:transform var(--cs-dur-short) var(--cs-ease-out); }
.cs-generator[open] .cs-disclosure { transform:rotate(45deg); }
.cs-generator .cs-create-bar { border-top:0; padding-top:0; padding-bottom:10px; }
.cs-journal-note { color:var(--cs-color-accent); background:var(--cs-color-soft); font-size:var(--cs-text-xs); border-radius:var(--cs-radius-sm); padding:9px 10px; line-height:1.65; margin-block:12px; }
/* component: journal reference guidance · Hallmark P4 H4 E4 S5 R4 V4 */
.cs-journal-area { min-width:0; }
.cs-journal-area select { width:100%; min-width:0; font-size:var(--cs-text-sm); }
.cs-library .cs-journal-area { display:block; margin:10px 0; }
.cs-gallery-filterbar { flex-wrap:wrap; }
.cs-gallery-filterbar .cs-journal-area { flex:1; max-width:240px; }
.cs-journal-plans { display:grid; gap:8px; margin:14px 0; color:var(--cs-color-ink); font-size:var(--cs-text-sm); }
.cs-journal-plans > span { font-weight:650; }
.cs-journal-plans select { width:100%; min-width:0; font-size:var(--cs-text-sm); }
.cs-journal-guide-info { border-top:1px solid var(--cs-color-line); padding-top:14px; margin-block:16px; overflow-wrap:anywhere; }
.cs-journal-guide-info > strong { display:block; font-size:var(--cs-text-base); line-height:1.5; }
.cs-journal-guide-info > span { display:block; font-size:var(--cs-text-sm); color:var(--cs-color-muted); margin-top:5px; }
.cs-journal-guide-info p { font-size:var(--cs-text-sm); line-height:1.75; margin:10px 0; }
.cs-journal-guide-info p.cs-journal-method { color:var(--cs-color-accent); font-size:var(--cs-text-xs); }
.cs-journal-guide-info nav { display:grid; justify-items:start; gap:8px; }
.cs-journal-guide-info a { color:var(--cs-color-accent); font-size:var(--cs-text-sm); text-decoration:none; white-space:nowrap; }
.cs-journal-guide-info small { color:var(--cs-color-muted); font-size:var(--cs-text-xs); line-height:1.65; }
.cs-journal-guide-info button { margin-top:12px; font-size:var(--cs-text-sm); }
@media(max-width:640px) {
 .cs-gallery-filterbar .cs-journal-area { max-width:none; margin-top:8px; }
}
.cs-gallery-dialog { width:min(1180px,calc(100vw - 40px)); max-width:1180px; height:min(850px,calc(100dvh - 48px)); padding:28px; overflow:hidden; flex-direction:column; }
.cs-gallery-dialog[open] { display:flex; }
.cs-gallery-dialog > header { margin-bottom:20px; flex-shrink:0; }
.cs-gallery-dialog h2 { font-size:28px; line-height:1.35; }
.cs-gallery-dialog header p { margin:6px 0 0; }
.cs-gallery-dialog p.cs-gallery-eyebrow { font:600 var(--cs-text-xs)/1.5 var(--cs-font-code); letter-spacing:.08em; color:var(--cs-color-accent); margin:0 0 6px; }
.cs-gallery-search { display:flex; gap:12px; flex-shrink:0; }
.cs-gallery-search .cs-search { flex:1; margin:0; background:var(--cs-color-paper); }
.cs-gallery-search input { font-size:var(--cs-text-base); height:44px; }
.cs-gallery-search select { height:46px; font-size:var(--cs-text-sm); }
.cs-gallery-filterbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-block:16px; flex-shrink:0; }
.cs-gallery-filterbar .cs-segment { width:min(480px,100%); }
.cs-gallery-filterbar button { min-height:38px; }
#galleryCount { color:var(--cs-color-muted); font-size:var(--cs-text-sm); white-space:nowrap; }
.cs-gallery-body { display:grid; grid-template-columns:minmax(0,1fr) 284px; gap:24px; min-height:0; flex:1; }
.cs-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; align-content:start; overflow:auto; padding:4px 8px 4px 4px; scrollbar-width:thin; overscroll-behavior:contain; }
.cs-gallery-card { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0; text-align:left; color:var(--cs-color-ink); border:0; background:transparent; border-radius:var(--cs-radius-control); padding:0 0 6px; }
.cs-gallery-card-colors { display:flex; height:96px; overflow:hidden; border-radius:var(--cs-radius-control); }
.cs-gallery-card-colors i { display:flex; align-items:center; justify-content:center; min-width:0; flex:1; background:var(--swatch); color:var(--swatch-ink); font-style:normal; transition:flex var(--cs-dur-switch) var(--cs-ease-out); }
.cs-gallery-card-colors i > span { font:var(--cs-text-xs) var(--cs-font-code); opacity:0; transition:opacity var(--cs-dur-short) var(--cs-ease-out); }
.cs-gallery-card-title { display:flex; justify-content:space-between; gap:8px; margin:11px 0 4px; padding-inline:2px; font-size:var(--cs-text-base); line-height:1.45; }
.cs-gallery-card-title strong { font-weight:650; overflow-wrap:anywhere; }
.cs-gallery-selected { opacity:0; color:var(--cs-color-accent); }
.cs-gallery-card[aria-pressed="true"] .cs-gallery-selected { opacity:1; }
.cs-gallery-card[aria-pressed="true"] .cs-gallery-card-colors { outline:2px solid var(--cs-color-accent); outline-offset:2px; }
.cs-gallery-card-meta { display:flex; flex-wrap:wrap; gap:4px 8px; justify-content:space-between; color:var(--cs-color-muted); font-size:var(--cs-text-xs); padding-inline:2px; line-height:1.5; }
/* Hallmark · component: gallery card alignment · locked public interface
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · shared tracks retain complete names.
 */
@supports(grid-template-rows:subgrid) {
 .cs-gallery-dialog .cs-gallery-grid { row-gap:0; }
 .cs-gallery-card { display:grid; grid-row:span 4; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; row-gap:0; align-content:start; justify-content:stretch; padding-bottom:26px; }
 .cs-gallery-card-meta { display:contents; }
 .cs-gallery-card-meta > span { padding-inline:2px; overflow-wrap:anywhere; }
 .cs-gallery-card-meta > span:last-child { margin-top:4px; }
}
.cs-gallery-detail { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:4px 0 4px 20px; border-left:1px solid var(--cs-color-line); min-width:0; }
.cs-gallery-detail-head > span { color:var(--cs-color-accent); font-size:var(--cs-text-xs); }
.cs-gallery-detail h3 { font-size:22px; font-weight:650; line-height:1.4; margin:5px 0; }
.cs-gallery-detail-head p { font-size:var(--cs-text-xs); margin:0 0 16px; }
.cs-gallery-detail .cs-chart-stage { overflow:hidden; }
.cs-gallery-count-control { display:flex; align-items:center; gap:8px; font-size:var(--cs-text-sm); margin-block:16px; }
.cs-gallery-count-control input { flex:1; width:60px; min-width:30px; accent-color:var(--cs-color-accent); }
.cs-gallery-count-control output { font:600 var(--cs-text-sm) var(--cs-font-code); min-width:16px; }
.cs-gallery-swatches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.cs-gallery-swatches span { display:flex; align-items:center; justify-content:center; background:var(--swatch); color:var(--swatch-ink); font:var(--cs-text-xs) var(--cs-font-code); border-radius:4px; min-height:32px; }
.cs-gallery-detail > p { font-size:var(--cs-text-sm); line-height:1.8; margin:16px 0 10px; }
.cs-gallery-detail > a { font-size:var(--cs-text-sm); color:var(--cs-color-accent); text-decoration:none; }
.cs-gallery-dialog > footer { align-items:center; justify-content:space-between; flex-shrink:0; margin-top:20px; }
.cs-gallery-dialog footer p { margin:0; font-size:var(--cs-text-sm); line-height:1.6; }
.cs-gallery-grid .cs-empty { grid-column:1/-1; }
@media(hover:hover) { .cs-gallery-card-colors i:hover { flex:4; } .cs-gallery-card-colors i:hover span { opacity:1; } .cs-gallery-card:hover .cs-gallery-card-title strong { color:var(--cs-color-accent); } }
@media(max-width:1000px) { .cs-gallery-body { grid-template-columns:minmax(0,1fr) 240px; gap:16px; } .cs-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cs-gallery-detail { padding-left:16px; } }
@media(max-width:800px) { .cs-type-filter { gap:0; } .cs-type-filter button { padding-inline:4px; font-size:var(--cs-text-xs); } .cs-catalog-title { font-size:var(--cs-text-sm); } .cs-swatch-edit strong { font-size:11px; } }
@media(max-width:640px) {
 .cs-main { font-size:var(--cs-text-base); }
 .cs-local-note { font-size:var(--cs-text-xs); }
 .cs-masthead p { font-size:var(--cs-text-sm); }
 .cs-mast-actions .cs-btn { font-size:var(--cs-text-sm); }
 .cs-library-head { margin-bottom:10px; }
 .cs-source-filter { margin-top:8px; }
 .cs-source-filter select { font-size:var(--cs-text-sm); min-height:40px; }
 .cs-library-browse { margin:4px 0 0; }
 .cs-type-filter { gap:10px; margin-block:8px; }
 .cs-catalog-title { font-size:var(--cs-text-sm); }
 .cs-catalog-meta { font-size:var(--cs-text-xs); flex-wrap:wrap; }
 .cs-palette-panel { padding:16px; }
 .cs-palette-head h2 { font-size:22px; }
 .cs-current-source { font-size:var(--cs-text-xs); }
 .cs-swatch-edit strong { font-size:12px; }
 .cs-swatches.is-many .cs-swatch-edit strong { font-size:10px; }
 .cs-palette-tools { row-gap:2px; }
 .cs-count-control { font-size:var(--cs-text-xs); }
 .cs-palette-tools .cs-text-btn { font-size:var(--cs-text-xs)!important; }
 .cs-import-actions { flex-wrap:wrap; justify-content:flex-start; gap:4px 8px; }
 .cs-import-actions .cs-text-btn { font-size:var(--cs-text-xs)!important; }
 .cs-chart-tabs button { font-size:var(--cs-text-xs); }
 .cs-vision-bar select,.cs-pattern { font-size:var(--cs-text-xs); }
 .cs-dialog .cs-btn { font-size:var(--cs-text-sm); }
 .cs-gallery-dialog { width:calc(100vw - 20px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); padding:18px 14px; }
 .cs-gallery-dialog > header { margin-bottom:14px; gap:8px; }
 .cs-gallery-dialog h2 { font-size:22px; }
 .cs-gallery-dialog header p { font-size:var(--cs-text-xs); }
 .cs-gallery-search { flex-wrap:wrap; gap:8px; }
 .cs-gallery-search .cs-search { flex-basis:100%; }
 .cs-gallery-search input { font-size:16px; }
 .cs-gallery-search > label:last-child,.cs-gallery-search select { width:100%; }
 .cs-gallery-search select { height:40px; }
 .cs-gallery-filterbar { display:block; margin-block:12px; }
 .cs-gallery-filterbar .cs-segment { gap:0; padding:3px; }
 .cs-gallery-filterbar button { padding-inline:6px; font-size:var(--cs-text-xs); }
 #galleryCount { display:block; font-size:var(--cs-text-xs); margin-top:8px; }
 .cs-gallery-body { display:block; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
 .cs-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; gap:16px 12px; padding:4px; }
 .cs-gallery-card-colors { height:78px; }
 .cs-gallery-card-title { font-size:var(--cs-text-sm); }
 .cs-gallery-card-meta { font-size:var(--cs-text-xs); }
 .cs-gallery-detail { border-left:0; border-top:1px solid var(--cs-color-line); overflow:visible; padding:20px 0 0; margin-top:20px; }
 .cs-gallery-detail .cs-chart-stage { max-width:420px; margin-inline:auto; }
 .cs-gallery-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .cs-gallery-dialog > footer { margin-top:12px; gap:10px; align-items:center; }
 .cs-gallery-dialog footer p { font-size:var(--cs-text-xs); min-width:0; }
 .cs-gallery-dialog footer .cs-btn { font-size:var(--cs-text-sm); padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) { .cs-gallery-card-colors i,.cs-gallery-card-colors i span,.cs-disclosure { transition:none!important; } }
.cs-gallery-footer-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#galleryPreviewToggle { display:none; }
@media(max-width:640px) {
 #galleryPreviewToggle { display:inline-flex; }
 .cs-gallery-dialog > footer { display:block; }
 .cs-gallery-footer-actions { display:flex; margin-top:8px; }
 .cs-gallery-footer-actions > button { flex:1; }
 .cs-gallery-dialog[data-view="grid"] .cs-gallery-detail,.cs-gallery-dialog[data-view="preview"] .cs-gallery-grid { display:none; }
 .cs-gallery-dialog[data-view="preview"] .cs-gallery-detail { display:block; margin:0; border:0; padding:4px; }
 .cs-gallery-dialog[data-view="preview"] .cs-gallery-detail .cs-chart-stage { margin:12px 0 0; }
}
@media(max-width:640px) {
 .cs-library-tabs { position:relative; inset:auto; width:auto; margin:10px 3px; }
 .cs-type-filter { gap:8px; justify-content:space-between; }
 .cs-library-foot { display:block; margin-top:6px; }
 .cs-swatch-edit strong { font-size:11px; }
}

/* Hallmark · component: swatch controls · locked public interface
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · separate editing and action regions.
 */
.cs-swatch { container-type:inline-size; --cs-swatch-height:144px; --cs-swatch-footer:40px; }
.cs-swatches .cs-swatch .cs-swatch-edit { height:var(--cs-swatch-height); padding:12px 8px calc(var(--cs-swatch-footer) + 12px); }
.cs-swatches .cs-swatch .cs-swatch-edit > strong { align-self:center; text-align:center; font-size:clamp(10px,14cqi,14px); }
.cs-swatches .cs-swatch .cs-swatch-edit::after { inset:36px 8px calc(var(--cs-swatch-footer) + 32px); font-size:var(--cs-text-xs); }
.cs-swatch-lock { position:absolute; top:6px; right:3px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:var(--cs-radius-sm); background:transparent; color:inherit; }
.cs-swatch-lock svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.cs-swatch .cs-swatch-actions { inset:auto 4px 4px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; padding-top:4px; border-top:1px solid color-mix(in srgb,var(--swatch-ink) 16%,transparent); pointer-events:none; transform:translateY(2px); }
.cs-swatch:focus-within .cs-swatch-actions { pointer-events:auto; }
@media(hover:hover) { .cs-swatch:hover .cs-swatch-actions { pointer-events:auto; } }
.cs-swatch .cs-swatch-actions button { display:grid; width:100%; min-width:0; height:28px; padding:0; }
.cs-swatch-lock:hover,.cs-swatch-lock[aria-pressed="true"] { background:color-mix(in srgb,var(--swatch-ink) 14%,transparent); }
.cs-swatch :is(.cs-swatch-lock,.cs-swatch-edit,.cs-swatch-actions button):focus-visible { outline-color:var(--swatch-ink); }
@container(max-width:84px) {
 .cs-swatches .cs-swatch .cs-swatch-edit { height:156px; --cs-swatch-footer:72px; padding-inline:6px; }
 .cs-swatches .cs-swatch .cs-swatch-edit::after { inset:34px 4px 104px; }
 .cs-swatch .cs-swatch-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .cs-swatch-actions [data-action="copy"] { grid-column:1/-1; }
}
@media(hover:none) {
 .cs-swatch .cs-swatch-actions,.cs-swatch.is-locked .cs-swatch-actions button { opacity:1; transform:none; pointer-events:auto; }
}