.color-editor canvas { display: block; width: 100%; max-width: 288px; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
.color-editor-fields label { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 8px 0; color: var(--ink2); font: 12px var(--mono); }
.color-editor-fields input[type=range] { grid-column: 1/-1; width: 100%; accent-color: #ca4; }
.color-editor-fields input[type=text] { width: 90px; color: var(--ink); background: var(--codebg); border: 1px solid #777; border-radius: 4px; }
.shade-editor .color-editor canvas { margin: 0 auto; }

.studio-silk-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.studio-silk-line { position: absolute; overflow: hidden; }
.studio-silk-line::before { content: ''; position: absolute; background: var(--line); }
.studio-silk-horizontal::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, #666, #ca4 56%, #666); }
.studio-silk-vertical::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.studio-silk-line canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: lighten; }
.studio-silk-vertical canvas { clip-path: inset(1px 0 0); }
.studio-silk-line[data-silk-ready] canvas { opacity: 1; transition: opacity 180ms ease-out; }
.studio-silk-line[hidden] { display: none; }
.studio-silk-mounted .topbar::before { display: none; }
@media (min-width: 701px) {
  .studio-silk-mounted .workspace > [data-workspace-column] { border-right: 0 !important; }
}

.color-grid.canvas-colors { grid-template-columns: repeat(3, minmax(0, 145px)); max-width: 459px; }

@media (max-width: 1000px) { .color-grid.canvas-colors { grid-template-columns: repeat(2, minmax(0, 145px)); max-width: 302px; } }

.edit-column .canvas-colors { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 145px)); }

/* Canvas colors use the same row treatment as palette assignments. */
.canvas-colors { display: grid; gap: 5px; }
.canvas-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px; border: 1px solid #ffffff1c; border-radius: 6px; background: #ffffff08; color: var(--ink); text-align: left; font: 12px/1.3 var(--mono); }
.canvas-row:hover { border-color: #888; background: #ffffff10; }
.canvas-swatch { width: 26px; height: 26px; border: 1px solid #ffffff66; border-radius: 4px; }
.canvas-value { color: var(--ink2); text-transform: uppercase; }

.edit-column .canvas-colors { grid-template-columns: minmax(0, 1fr); max-width: none; }

.shade-editor[hidden] { display: none; }
.shade-editor { position: fixed; z-index: 30; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; margin: 0; padding: 12px; background: #292929; border: 1px solid #777; border-radius: 6px; box-shadow: 0 12px 32px #0009; }
.shade-editor-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 12px var(--mono); }
.shade-editor-heading strong { flex: 1; text-transform: capitalize; }
.shade-editor-heading button { padding: 4px 7px; background: var(--codebg); border: 1px solid #777; border-radius: 4px; color: var(--ink); font: 12px var(--mono); }
.shade-editor-heading button[hidden] { display: none; }
.shade-editor-hint { margin: 8px 0; color: var(--ink3); font-size: 12px; }
.shade-editor-hint[hidden] { display: none; }

.assignment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.assignment-actions button:disabled { opacity: .45; }
.tray-swatch { width: 20px; height: 20px; border: 1px solid #ffffff66; border-radius: 4px; cursor: grab; }
.token-column { margin-top: 24px; }
.token-column > .token-details { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.token-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.token-heading h2 { margin: 0; font: 400 18px/1.3 'Radio Canada', system-ui, sans-serif; }
.token-heading .assignment-actions { margin: 0; gap: 5px; }
.token-column > .token-details > p { margin: 10px 0 14px; }
.token-column .token-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.token-column .shade-tray { gap: 4px; }
.shade-chip { position: relative; display: inline-flex; }
.tray-swatch { display: block; padding: 0; width: 26px; height: 26px; cursor: grab; }
.tray-swatch:active { cursor: grabbing; }
.tray-swatch[aria-expanded="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.shade-override-dot { position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; padding: 0; border-radius: 50%; background: #f1d780; border: 1px solid #292929; cursor: pointer; }
.shade-rows { display: grid; gap: 5px; margin-top: 14px; }
.shade-row { display: grid; grid-template-columns: minmax(105px, 125px) minmax(0, 1fr); align-items: start; gap: 10px; min-height: 44px; padding: 7px; border: 1px solid #ffffff1c; border-radius: 6px; background: #ffffff08; }
.shade-row.is-drop-target { border-color: #e7ca77; background: #e7ca771c; outline: 1px solid #e7ca77; }
.shade-identity { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.shade-identity .tray-swatch { cursor: pointer; }
.shade-name { color: var(--ink2); font: 11px/1.3 var(--mono); overflow-wrap: anywhere; text-transform: capitalize; }
.shade-tokens { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; min-height: 28px; }
.shade-tokens:empty::before { content: 'Drop token here'; color: var(--ink3); opacity: .65; font: 11px/28px var(--mono); }
.token-chip { position: relative; }
.token-chip > summary { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-height: 28px; padding: 4px 7px; border: 1px solid #727272; border-radius: 5px; background: var(--codebg); color: var(--ink); cursor: grab; font: 12px/1.3 var(--mono); list-style: none; text-transform: none; }
.token-chip > summary::-webkit-details-marker { display: none; }
.token-chip > summary:active { cursor: grabbing; }
.token-chip > summary .token-handle, .token-chip > summary .token-caret { color: var(--ink3); }
.token-chip[open] { flex: 0 1 200px; min-width: min(100%, 140px); }
@media (max-width: 400px) { .shade-row { grid-template-columns: minmax(85px, 100px) minmax(0, 1fr); gap: 6px; } .shade-name { font-size: 10px; } .token-chip > summary { font-size: 11px; }}


.token-chip { min-height: 25px; padding: 3px 7px; border: 1px solid #727272; border-radius: 5px; background: var(--codebg); color: var(--ink); cursor: grab; font: 12px/1.3 var(--mono); }
.token-chip:active { cursor: grabbing; }
.shade-rows.is-selecting .token-chip:not([aria-pressed="true"]) { opacity: .35; }
.shade-rows.is-selecting .token-chip[aria-pressed="true"] { border-color: #e7ca77; outline: 1px solid #e7ca77; }
.shade-rows.is-selecting .shade-tokens { cursor: pointer; background: #ffffff0a; border-radius: 4px; }
.shade-rows.is-selecting .shade-row:hover { border-color: #e7ca77; }
.shade-tokens:focus-visible { outline: 2px solid #e7ca77; outline-offset: 2px; }

.topbar {
position: relative; height: 72px; display: flex; align-items: center;
justify-content: space-between; gap: 20px; padding: 0 22px;
}
.topbar::before {
content: ''; position: absolute; z-index: 0; left: 40px; right: 26px; top: 50%;
height: 1px; background: linear-gradient(90deg, #666, #ca4 56%, #666);
}
.topbar::after {
content: ''; position: absolute; right: 22px; top: calc(50% - 4px);
width: 8px; height: 8px; border: 1px solid #aaa; border-radius: 50%; background: var(--bg);
}
.topbar > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink2); text-decoration: none; }
.brand-mark {
display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
background: #000; border: 2px solid var(--bg); overflow: hidden;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand > span:nth-child(2) {
border: 2px solid #888; border-radius: 20px; background: #000;
padding: 1px 12px; font: 14px/20px var(--mono); white-space: nowrap;
}
.brand-dot { color: #ca4; }
.brand-product { display: none; }
.topbar-right { display: flex; align-items: center; gap: 8px; background: var(--bg); padding-left: 10px; }
.draft-indicator { color: var(--ink3); font: 12px/1.3 var(--mono); margin-right: 8px; }
.button {
display: inline-block; color: var(--ink2); border: 1px solid #777;
background: var(--codebg); border-radius: 6px; padding: 7px 12px;
font: 13px/1.4 var(--mono);
}
.button:hover, .button:focus-visible { color: var(--ink); border-color: #aaa; }
.button-primary { color: var(--ink); background: #111; border-color: #888; }
.button-primary span { margin-left: 8px; }
.export-menu { position: relative; }
.export-menu summary { list-style: none; white-space: nowrap; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-popover {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 270px;
padding: 6px; background: #252525; border: 1px solid #777; border-radius: 6px;
box-shadow: 0 12px 24px #0008;
}
.export-heading { padding: 9px; font: 11px var(--mono); color: var(--ink3); }
.export-popover button { display: block; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 9px; background: transparent; color: var(--ink); }
.export-popover button:hover { background: var(--codebg); }
.export-popover b, .export-popover small { display: block; }
.export-popover b { font: 13px var(--mono); }
.export-popover small { font-size: 12px; line-height: 1.4; color: var(--ink3); margin-top: 3px; }
@media (max-width: 700px) {
.topbar { height: 64px; padding: 0 14px; gap: 8px; }
.topbar::after, .draft-indicator { display: none; }
.brand-mark { width: 36px; height: 36px; font-size: 20px; }
.brand > span:nth-child(2) { font-size: 12px; padding: 1px 8px; }
.topbar-right { gap: 4px; }
.button { padding: 7px; font-size: 11px; }}

@media (max-width: 420px) {
.topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.topbar::before { top: 28px; }
.topbar-right { width: 100%; justify-content: flex-end; }}


.nav-action-icon { display: none; }
@media (max-width: 700px) {
.studio .topbar { position: fixed; inset: 0 0 auto; z-index: 5; height: 64px; min-height: 64px; flex-wrap: nowrap; padding: 0 14px; background: var(--bg); }
.topbar .brand > span:nth-child(2) { display: none; }
.topbar .topbar-right { width: auto; }
.topbar .nav-action-label { display: none; }
.topbar .nav-action-icon { display: inline; }
.topbar :is(.history-button, [data-action="reset"]) { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; font-size: 21px; }
}
.history-button:disabled { opacity: .45; cursor: default; }

.ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding: 20px 0 0; }
.ranges > details { grid-column: 1 / -1; }
.range-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--ink2); font: 12px var(--mono); }
.range-heading output { color: #e3ca79; }
.range-field input { display: block; width: 100%; height: 4px; accent-color: #ca4; margin: 12px 0 0; }
.check-field { display: flex; align-items: center; gap: 7px; color: var(--ink2); font: 12px var(--mono); margin-top: 14px; }
.check-field input { accent-color: #ca4; }

.edit-column .palette-title { align-items: flex-start; flex-wrap: wrap; }
.edit-column .palette-dots { justify-content: flex-start; }

.palette-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: end; }
.palette-actions label { display: grid; gap: 4px; font: 12px var(--mono); color: var(--ink2); }
.palette-actions input { width: 180px; max-width: 100%; background: var(--codebg); color: var(--ink); border: 1px solid #777; border-radius: 4px; padding: 6px; }
.palette-actions button, .palette-section select { background: var(--codebg); color: var(--ink); border: 1px solid #777; border-radius: 5px; padding: 6px 8px; font: 12px var(--mono); }

.palette-list { display:grid; gap:5px; }
.palette-row { width:100%; display:flex; gap:10px; align-items:center; min-height:46px; padding:7px 9px; background:#ffffff08; border:1px solid #ffffff1c; border-radius:6px; color:var(--ink); text-align:left; font:12px var(--mono); }
.palette-row:hover { border-color:#999; background:#ffffff12; }
.palette-row[aria-expanded="true"] { border-color:#ca4; }
.palette-row-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palette-grid { width:34px; height:26px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:1px; flex:none; }
.palette-grid i { border-radius:1px; }
.palette-add-icon { width:34px; height:26px; display:grid; place-items:center; font:22px/1 var(--mono); color:#d3bc70; }
.palette-editor { position:fixed; z-index:35; width:min(340px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:14px; background:#292929; border:1px solid #888; border-radius:6px; box-shadow:0 12px 32px #0009; }
.palette-editor[hidden] { display:none; }
.palette-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.palette-editor-heading h2 { font:16px/1.3 var(--mono); margin:0; }
.palette-editor button { background:var(--codebg); color:var(--ink); border:1px solid #777; border-radius:5px; padding:6px 9px; font:12px var(--mono); }
.palette-editor-name { display:grid; gap:5px; color:var(--ink2); font:12px var(--mono); margin:14px 0; }
.palette-editor-name input { min-width:0; width:100%; background:var(--codebg); color:var(--ink); border:1px solid #777; border-radius:4px; padding:8px; }
.palette-engine-tabs { display:flex; gap:5px; }
.palette-engine-tabs button[aria-pressed="true"] { background:#000; border-color:#ca4; }
.palette-engine-note { color:var(--ink3); font-size:12px; line-height:1.4; }
.palette-editor-preview { display:flex; flex-wrap:wrap; gap:3px; margin:12px 0; }
.palette-editor-preview i { width:18px; height:18px; border:1px solid #ffffff66; border-radius:3px; }
.palette-editor .ranges { grid-template-columns:1fr; }
.palette-editor-actions { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.palette-create { margin-top:16px; }

@media (max-width: 1000px) { .ranges { grid-template-columns: 1fr; } }

.sample-select { display: none; }
.sample-tabs { display: flex; flex-wrap: nowrap; width: max-content; max-width: 100%; overflow-x: auto; gap: 3px; scrollbar-width: thin; }
.sample-tabs button { flex: 0 0 auto; white-space: nowrap; }
/* Recess the canvas into the pane; the sample picker floats above it. */
.workspace > .preview-area.workspace-column { position: relative; padding: 0 14px 14px; overflow: hidden; }
.preview-area .editor-preview { position: relative; padding: 0; min-height: 0; overflow: hidden; border-radius: 20px; background: var(--editor-bg, #222); }
.preview-area .editor-preview::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 3px 14px #0008, inset 0 0 24px color-mix(in srgb, var(--editor-fg, #fff) 5%, transparent), inset 0 -1px 0 #ffffff12; }
.preview-area .sample-card { position: relative; min-width: 0; overflow: hidden; background: var(--editor-bg, #222); }
.preview-area .preview-toolbar { position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 60px); padding: 5px; border: 0; border-radius: 10px; background: #292929ee; backdrop-filter: blur(12px); }
.preview-area .sample-tabs { width: max-content; }
.preview-area .sample-tabs button { border: 0; }
.sample-content { min-height: 195px; overflow: auto; color: var(--editor-fg, #fff); }
.sample-content pre { min-width: max-content; margin: 0 !important; padding: 68px 24px 54px !important; background: transparent !important; font: 13px/1.55 var(--mono) !important; tab-size: 2; }
.sample-content code { font: inherit; }
.empty-preview { padding: 50px; color: var(--ink3); font: 13px var(--mono); }
@media (min-width: 701px) {
.sample-card { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.sample-content { min-height: 0; flex: 1; overflow: auto; }}

@media (max-width: 1099px) {
.workspace > .preview-area.workspace-column { height: min(75dvh, 700px); min-height: 400px; padding: 0 14px 14px; }
.preview-area .sample-content { max-height: none; }}


.preview-token-info { position: absolute; z-index: 1; bottom: 12px; right: 18px; pointer-events: none; display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; color: var(--editor-fg, #fff); font: 10px/1.25 var(--mono); }
.preview-token-text { display: grid; min-width: 0; text-align: right; }
.preview-token-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-token-text span:first-child { opacity: .6; }
.preview-token-swatch { flex: none; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--editor-fg, #fff) 35%, transparent); border-radius: 4px; }
.preview-token-info:not([data-active]) { display: none; }
/* Keep a small live reference visible while editing on a phone. */
@media (max-width: 700px) {
.studio { padding-top: 264px; }
.workspace > .preview-area.workspace-column {
  position: fixed; inset: 64px 0 auto; z-index: 4;
  height: 200px; min-height: 0; max-height: 200px;
  padding: 0; background: var(--bg);
}
.preview-area .editor-preview { border-radius: 0; }
.workspace .preview-area .sample-content { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }

.preview-area .sample-content pre {
  min-width: 0; width: 100%; overflow: clip; white-space: pre;
  padding: 12px 14px 40px !important; font-size: 12.8px !important; line-height: 1.4 !important;
}
.preview-area .preview-toolbar { display: none; }
.preview-area .sample-select { display: block; position: absolute; z-index: 2; bottom: 10px; right: 12px; max-width: calc(100% - 24px); border: 0; border-radius: 6px; padding: 7px 10px; background: #292929ee; color: var(--ink); font: 11px var(--mono); }
.preview-area .sample-tabs { gap: 1px; }
.preview-area .sample-tabs button { padding: 5px 4px; font-size: 9px; }
.preview-token-info { display: none; }
}

:root {
font-family: 'Radio Canada', system-ui, sans-serif;
color: hsl(204 0% 90%);
background: #444;
--ink: hsl(204 0% 90%);
--ink2: hsl(204 0% 80%);
--ink3: hsl(204 0% 70%);
--chalk: hsl(204 0% 35%);
--surface: hsl(204 0% 30%);
--line: hsl(44 44% 44%);
--codebg: hsl(204 5% 22%);
--bg: #444;
--mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, select, input[type=color], input[type=range], summary { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
outline: 2px solid #e7ca77; outline-offset: 3px;
}
::selection { background: #4cc6ff; color: #000; }
.studio { min-height: 100vh; background: var(--bg); }
.draft-indicator i, .live-badge span, .preview-bottom i {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: #ca4; margin-right: 7px;
}
.workspace { min-height: calc(100vh - 72px); }
.sidebar { min-width: 0; padding: 34px clamp(24px, 4vw, 60px) 0; border-right: 1px solid var(--line); }
.eyebrow, .section-index, .section-hint, .preset-block > label, .palette-title > div > span,
.preview-label, .live-badge, .sidebar-footer, .preview-bottom {
font: 12px/1.4 var(--mono); letter-spacing: 0; color: var(--ink3);
}
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 7px; height: 7px; border: 1px solid #aaa; border-radius: 50%; background: #ca4; }
.sidebar-intro h1, .preview-heading h2 { margin: 10px 0 8px; color: var(--ink); font: normal clamp(27px, 2.6vw, 38px)/1.15 'Radio Canada', system-ui, sans-serif; }
.sidebar-intro h1 span, .preview-heading h2 span { color: #ca4; }
.sidebar-intro p, .preview-heading p, .section-copy { color: var(--ink2); font-size: 14px; line-height: 1.5; margin: 0; }
.preset-block { margin-top: 26px; }
.preset-block > label { display: block; margin-bottom: 8px; }
.select-wrap { position: relative; width: min(100%, 300px); }
.select-wrap select, .language-section select {
background: var(--codebg); color: var(--ink); border: 1px solid #777;
border-radius: 6px; padding: 9px 32px 9px 11px; font: 13px var(--mono);
}
.select-wrap select { width: 100%; appearance: none; }
.language-section select { max-width: min(100%, 300px); }
.select-wrap > span { position: absolute; right: 13px; top: 8px; pointer-events: none; color: var(--ink2); }
.preset-note { color: var(--ink3); font-size: 12px; margin-top: 8px; }
.control-section { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 22px; }
.section-header, .section-header > div { display: flex; align-items: center; gap: 10px; }
.section-header { justify-content: space-between; margin-bottom: 15px; }
.section-index { color: #d0b96c; }
.section-header h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 400; }
.color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.color-field { position: relative; min-width: 0; }
.color-field:has(.color-editor-host) { grid-column: 1 / -1; }
.color-label { display: block; color: var(--ink2); font: 12px var(--mono); margin-bottom: 7px; text-transform: capitalize; }
.color-label button { padding: 0 3px; border: 0; color: #e2c879; background: transparent; }
.color-control { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px; border: 1px solid #666; border-radius: 6px; background: var(--codebg); }
.color-control:focus-within { border-color: #cfb65c; }
.color-control button { padding: 3px; color: var(--ink2); border: 0; background: transparent; }
.color-control input[type=color] { width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: none; }
.color-control input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-control input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.color-control input[type=text] { min-width: 0; width: 100%; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 12px var(--mono); text-transform: uppercase; }
.language-section .section-header { margin-bottom: 7px; }
.language-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0 18px; }
.language-tab, .sample-tabs button {
border: 1px solid transparent; border-radius: 6px; padding: 7px 10px;
background: transparent; color: var(--ink2); font: 12px/1.3 var(--mono);
}
.language-tab:hover, .sample-tabs button:hover { color: var(--ink); background: var(--codebg); }
.language-tab.active, .sample-tabs button.active { color: var(--ink); background: #000; border-color: #777; }
.palette-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid #666; }
.palette-title h3 { margin: 0 0 4px; font-size: 16px; font-weight: 400; }
.palette-title > div > span { font-size: 11px; }
.palette-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.palette-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #ffffff50; }
.language-section > label.section-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.token-details { margin-top: 20px; padding: 15px 0 0; border-top: 1px solid #666; }
.token-details summary { display: flex; justify-content: space-between; list-style: none; color: var(--ink); font: 13px var(--mono); }
.token-details summary::-webkit-details-marker { display: none; }
.token-details summary span { color: #d3bc70; }
.token-details p { color: var(--ink3); font-size: 13px; line-height: 1.45; }
.ramp-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 7px 16px;
margin-top: 12px;
}
.ramp-grid .color-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ramp-grid .color-label { flex: 0 0 76px; margin: 0; font-size: 11px; }
.ramp-grid .color-control { flex: 1 1 110px; max-width: 160px; padding: 2px 4px; }
.ramp-grid .color-control input[type=color] { width: 20px; height: 20px; flex-basis: 20px; }
.ramp-grid .color-editor-host { flex: 1 0 100%; }

.color-editor-host { position: relative; z-index: 3; margin-top: 6px; padding: 12px; background: #292929; border: 1px solid #888; border-radius: 6px; }
.assignment-actions button, .token-cycle { color: var(--ink2); background: var(--codebg); border: 1px solid #777; border-radius: 5px; padding: 5px 9px; font: 12px var(--mono); }
.assignment-actions button:hover:not(:disabled), .token-cycle:hover { color: var(--ink); border-color: #aaa; }
.shade-tray { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 18px; }
.token-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: start; gap: 4px 18px; }
.token-list .token-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ffffff1a; }
.token-grip { color: var(--ink3); cursor: grab; }
.token-picker { flex: 1; min-width: 0; }
.token-picker summary { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); }
.token-picker summary i { width: 16px; height: 16px; flex: none; border: 1px solid #ffffff66; border-radius: 4px; }
.token-picker summary small { margin-left: auto; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shade-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 12px 0; }
.shade-option { min-width: 0; height: 26px; border: 1px solid #ffffff66; border-radius: 4px; }
.shade-option[aria-pressed=true] { outline: 2px solid #eee; outline-offset: 2px; }
.token-cycle { padding: 4px 8px; }
.sidebar-footer { margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.sidebar-footer span { color: #ca4; font-size: 16px; }
.preview-area { min-width: 0; padding: 34px clamp(24px, 4vw, 60px) 24px; background: #444; }
.preview-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.live-badge { padding: 4px 10px; color: var(--ink2); background: #111; border: 1px solid #777; border-radius: 20px; }
.live-badge span { width: 6px; height: 6px; }
.preview-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; }
.preview-bottom b { color: #ca4; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; color: var(--ink); background: #111; border-radius: 6px; font: 13px var(--mono); }
.toast:not(:empty) { padding: 12px 15px; border: 1px solid #888; box-shadow: 0 8px 24px #0005; }
@media (min-width: 701px) {
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100dvh - 72px); min-height: 0; overflow: hidden; }
.sidebar, .preview-area { min-width: 0; min-height: 0; overflow-y: auto; }
.preview-area { display: flex; flex-direction: column; }
.editor-preview { min-height: 0; flex: 1; display: flex; flex-direction: column; }
}
@media (max-width: 1000px) {
.color-grid:not(.ramp-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.workspace { display: flex; flex-direction: column-reverse; }
.sidebar { border-right: 0; border-top: 1px solid var(--line); padding: 28px 20px 0; }
.preview-area { padding: 28px 20px; }
.preview-bottom { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Keep controls on the content tracks; let the preview reach the viewport edge. */
.column-heading {
margin: 0 0 18px;
color: var(--ink);
font: 400 18px/1.3 'Radio Canada', system-ui, sans-serif;
}
.workspace-column, .edit-column { min-width: 0; padding: 28px clamp(20px, 3vw, 40px); }
.edit-column .preset-block { margin-top: 0; }
.edit-column .control-section { margin-top: 24px; }
.edit-column .language-tabs { gap: 3px; }
.edit-column .language-tab { padding: 6px 7px; }
.preview-area { display: flex; flex-direction: column; }
.preview-area .editor-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.preview-area .sample-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.preview-area .sample-content { flex: 1; min-height: 0; overflow: auto; }
@media (min-width: 701px) {
.workspace {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; margin-inline: 0;
  height: calc(100dvh - 72px); min-height: 0; overflow: hidden;
}
.workspace > [data-workspace-column] { min-height: 0; overflow-y: auto; }
.workspace > [data-workspace-column]:first-child { border-right: 1px solid var(--line); }
}
@media (max-width: 700px) {
.workspace { display: flex; flex-direction: column; width: 100%; margin-inline: 0; height: auto; overflow: visible; }
.workspace > [data-workspace-column] { padding: 24px 20px; overflow: visible; border: 0; }
.edit-column { border-bottom: 1px solid var(--line) !important; }
.preview-area { min-height: 450px; }
.preview-area .sample-content { max-height: 60vh; }
}

/* Palette controls, preview, and token assignments. */
.shade-tray { align-items: center; gap: 6px; }
.shade-override-dot[hidden], .shade-editor[hidden] { display: none; }
/* Arrange roles by the palette color they use. */
.token-move-menu { position: static; width: 100%; max-height: 220px; overflow: auto; margin-top: 4px; padding: 5px; border: 1px solid #888; border-radius: 6px; background: #292929; }
.token-move-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; text-transform: capitalize; font: 12px var(--mono); }
.token-move-menu button:hover, .token-move-menu button[aria-pressed="true"] { background: #505050; }
.token-move-menu i { display: block; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #ffffff66; border-radius: 3px; }

@media (hover: hover) { :is(.sample-content .a .t0:hover, .sample-content .a .t1:hover, .sample-content .a .t2:hover, .sample-content .a .t3:hover, .sample-content .a .t4:hover, .sample-content .a .t5:hover, .sample-content .a .t6:hover, .sample-content .a .t7:hover, .sample-content .a .t8:hover, .sample-content .a .t9:hover, .sample-content .a .t10:hover, .sample-content .a .t11:hover, .sample-content .a .t12:hover, .sample-content .a .t13:hover, .sample-content .a .t14:hover, .sample-content .a .t15:hover, .sample-content .a .t16:hover, .sample-content .a .t17:hover, .sample-content .a .t18:hover, .sample-content .a .t19:hover, .sample-content .a .t20:hover) { outline: 1px solid currentColor; outline-offset: 1px; } }

.language-column { min-width: 0; padding: 28px clamp(18px, 2vw, 30px); }
.language-column .control-section { margin-top: 0; border-top: 0; padding-top: 0; }
@media (min-width: 1100px) {
.workspace {
  /* Preserve the controls' proportions within the original 1800px workspace. */
  --content-width: min(100%, 1800px);
  grid-template-columns:
    [full-start] max(0px, calc((100% - 1800px) / 2))
    [content-start] minmax(245px, calc(var(--content-width) * 9 / 37))
    [language-start] minmax(280px, calc(var(--content-width) * 10 / 37))
    [preview-start] minmax(0, 1fr) [full-end];
}
.workspace > [data-workspace-column="edit"] { grid-column: content-start / language-start; }
.workspace > [data-workspace-column="language"] { grid-column: language-start / preview-start; border-right: 1px solid var(--line); }
.workspace > [data-workspace-column="preview"] { grid-column: preview-start / full-end; }
}
@media (min-width: 701px) and (max-width: 1099px) { .workspace { height: auto; overflow: visible; grid-template-columns: repeat(2,minmax(0,1fr)); } .workspace > [data-workspace-column] { overflow: visible; } .preview-area { grid-column: 1 / -1; min-height: 500px; } }

/* Keep the readout anchored to the right as token names change. */

/* Stable semantic classes emitted by the build-time Argiope renderer. */
.a { background:var(--editor-bg); color:var(--editor-fg); margin:0; white-space:pre; overflow:auto; }
.a code { font: inherit; }
.a .i{font-style:italic}.a .b{font-weight:bold}.a .u{text-decoration:underline}.a .strike{text-decoration:line-through}
.a.j,.a .j{--a-t0:var(--j-plain,var(--editor-fg));--a-t1:var(--j-variable,var(--editor-fg));--a-t2:var(--j-property,var(--editor-fg));--a-t3:var(--j-constant,var(--editor-fg));--a-t4:var(--j-string,var(--editor-fg));--a-t5:var(--j-escape,var(--editor-fg));--a-t6:var(--j-number,var(--editor-fg));--a-t7:var(--j-type,var(--editor-fg));--a-t8:var(--j-function,var(--editor-fg));--a-t9:var(--j-call,var(--editor-fg));--a-t10:var(--j-operator,var(--editor-fg));--a-t11:var(--j-keyword,var(--editor-fg));--a-t12:var(--j-control,var(--editor-fg));--a-t13:var(--j-return,var(--editor-fg));--a-t14:var(--j-punctuation,var(--editor-fg));--a-t15:var(--j-bracket,var(--editor-fg));--a-t16:var(--j-comment,var(--editor-fg));--a-t17:var(--j-builtin,var(--j-call,var(--editor-fg)));--a-t18:var(--j-const_binding,var(--j-variable,var(--editor-fg)));--a-t19:var(--j-method_call,var(--j-call,var(--editor-fg)));--a-t20:var(--j-member,var(--j-property,var(--editor-fg)));color:var(--j-plain,var(--editor-fg))}
.a.e,.a .e{--a-t0:var(--e-plain,var(--editor-fg));--a-t1:var(--e-variable,var(--editor-fg));--a-t2:var(--e-property,var(--editor-fg));--a-t3:var(--e-constant,var(--editor-fg));--a-t4:var(--e-string,var(--editor-fg));--a-t5:var(--e-escape,var(--editor-fg));--a-t6:var(--e-number,var(--editor-fg));--a-t7:var(--e-type,var(--editor-fg));--a-t8:var(--e-function,var(--editor-fg));--a-t9:var(--e-call,var(--editor-fg));--a-t10:var(--e-operator,var(--editor-fg));--a-t11:var(--e-keyword,var(--editor-fg));--a-t12:var(--e-control,var(--editor-fg));--a-t13:var(--e-return,var(--editor-fg));--a-t14:var(--e-punctuation,var(--editor-fg));--a-t15:var(--e-bracket,var(--editor-fg));--a-t16:var(--e-comment,var(--editor-fg));--a-t17:var(--e-builtin,var(--e-call,var(--editor-fg)));--a-t18:var(--e-const_binding,var(--e-variable,var(--editor-fg)));--a-t19:var(--e-method_call,var(--e-call,var(--editor-fg)));--a-t20:var(--e-member,var(--e-property,var(--editor-fg)));color:var(--e-plain,var(--editor-fg))}
.a.h,.a .h{--a-t0:var(--h-plain,var(--editor-fg));--a-t1:var(--h-variable,var(--editor-fg));--a-t2:var(--h-property,var(--editor-fg));--a-t3:var(--h-constant,var(--editor-fg));--a-t4:var(--h-string,var(--editor-fg));--a-t5:var(--h-escape,var(--editor-fg));--a-t6:var(--h-number,var(--editor-fg));--a-t7:var(--h-type,var(--editor-fg));--a-t8:var(--h-function,var(--editor-fg));--a-t9:var(--h-call,var(--editor-fg));--a-t10:var(--h-operator,var(--editor-fg));--a-t11:var(--h-keyword,var(--editor-fg));--a-t12:var(--h-control,var(--editor-fg));--a-t13:var(--h-return,var(--editor-fg));--a-t14:var(--h-punctuation,var(--editor-fg));--a-t15:var(--h-bracket,var(--editor-fg));--a-t16:var(--h-comment,var(--editor-fg));--a-t17:var(--h-builtin,var(--h-call,var(--editor-fg)));--a-t18:var(--h-const_binding,var(--h-variable,var(--editor-fg)));--a-t19:var(--h-method_call,var(--h-call,var(--editor-fg)));--a-t20:var(--h-member,var(--h-property,var(--editor-fg)));color:var(--h-plain,var(--editor-fg))}
.a.c,.a .c{--a-t0:var(--c-plain,var(--editor-fg));--a-t1:var(--c-variable,var(--editor-fg));--a-t2:var(--c-property,var(--editor-fg));--a-t3:var(--c-constant,var(--editor-fg));--a-t4:var(--c-string,var(--editor-fg));--a-t5:var(--c-escape,var(--editor-fg));--a-t6:var(--c-number,var(--editor-fg));--a-t7:var(--c-type,var(--editor-fg));--a-t8:var(--c-function,var(--editor-fg));--a-t9:var(--c-call,var(--editor-fg));--a-t10:var(--c-operator,var(--editor-fg));--a-t11:var(--c-keyword,var(--editor-fg));--a-t12:var(--c-control,var(--editor-fg));--a-t13:var(--c-return,var(--editor-fg));--a-t14:var(--c-punctuation,var(--editor-fg));--a-t15:var(--c-bracket,var(--editor-fg));--a-t16:var(--c-comment,var(--editor-fg));--a-t17:var(--c-builtin,var(--c-call,var(--editor-fg)));--a-t18:var(--c-const_binding,var(--c-variable,var(--editor-fg)));--a-t19:var(--c-method_call,var(--c-call,var(--editor-fg)));--a-t20:var(--c-member,var(--c-property,var(--editor-fg)));color:var(--c-plain,var(--editor-fg))}
.a.m,.a .m{--a-t0:var(--m-plain,var(--editor-fg));--a-t1:var(--m-variable,var(--editor-fg));--a-t2:var(--m-property,var(--editor-fg));--a-t3:var(--m-constant,var(--editor-fg));--a-t4:var(--m-string,var(--editor-fg));--a-t5:var(--m-escape,var(--editor-fg));--a-t6:var(--m-number,var(--editor-fg));--a-t7:var(--m-type,var(--editor-fg));--a-t8:var(--m-function,var(--editor-fg));--a-t9:var(--m-call,var(--editor-fg));--a-t10:var(--m-operator,var(--editor-fg));--a-t11:var(--m-keyword,var(--editor-fg));--a-t12:var(--m-control,var(--editor-fg));--a-t13:var(--m-return,var(--editor-fg));--a-t14:var(--m-punctuation,var(--editor-fg));--a-t15:var(--m-bracket,var(--editor-fg));--a-t16:var(--m-comment,var(--editor-fg));--a-t17:var(--m-builtin,var(--m-call,var(--editor-fg)));--a-t18:var(--m-const_binding,var(--m-variable,var(--editor-fg)));--a-t19:var(--m-method_call,var(--m-call,var(--editor-fg)));--a-t20:var(--m-member,var(--m-property,var(--editor-fg)));color:var(--m-plain,var(--editor-fg))}
.a.s,.a .s{--a-t0:var(--s-plain,var(--editor-fg));--a-t1:var(--s-variable,var(--editor-fg));--a-t2:var(--s-property,var(--editor-fg));--a-t3:var(--s-constant,var(--editor-fg));--a-t4:var(--s-string,var(--editor-fg));--a-t5:var(--s-escape,var(--editor-fg));--a-t6:var(--s-number,var(--editor-fg));--a-t7:var(--s-type,var(--editor-fg));--a-t8:var(--s-function,var(--editor-fg));--a-t9:var(--s-call,var(--editor-fg));--a-t10:var(--s-operator,var(--editor-fg));--a-t11:var(--s-keyword,var(--editor-fg));--a-t12:var(--s-control,var(--editor-fg));--a-t13:var(--s-return,var(--editor-fg));--a-t14:var(--s-punctuation,var(--editor-fg));--a-t15:var(--s-bracket,var(--editor-fg));--a-t16:var(--s-comment,var(--editor-fg));--a-t17:var(--s-builtin,var(--s-call,var(--editor-fg)));--a-t18:var(--s-const_binding,var(--s-variable,var(--editor-fg)));--a-t19:var(--s-method_call,var(--s-call,var(--editor-fg)));--a-t20:var(--s-member,var(--s-property,var(--editor-fg)));color:var(--s-plain,var(--editor-fg))}
.a.l,.a .l{--a-t0:var(--g-plain,var(--editor-fg));--a-t1:var(--g-variable,var(--editor-fg));--a-t2:var(--g-property,var(--editor-fg));--a-t3:var(--g-constant,var(--editor-fg));--a-t4:var(--g-string,var(--editor-fg));--a-t5:var(--g-escape,var(--editor-fg));--a-t6:var(--g-number,var(--editor-fg));--a-t7:var(--g-type,var(--editor-fg));--a-t8:var(--g-function,var(--editor-fg));--a-t9:var(--g-call,var(--editor-fg));--a-t10:var(--g-operator,var(--editor-fg));--a-t11:var(--g-keyword,var(--editor-fg));--a-t12:var(--g-control,var(--editor-fg));--a-t13:var(--g-return,var(--editor-fg));--a-t14:var(--g-punctuation,var(--editor-fg));--a-t15:var(--g-bracket,var(--editor-fg));--a-t16:var(--g-comment,var(--editor-fg));--a-t17:var(--g-builtin,var(--g-call,var(--editor-fg)));--a-t18:var(--g-const_binding,var(--g-variable,var(--editor-fg)));--a-t19:var(--g-method_call,var(--g-call,var(--editor-fg)));--a-t20:var(--g-member,var(--g-property,var(--editor-fg)));color:var(--g-plain,var(--editor-fg))}
.a.w,.a .w{--a-t0:var(--w-plain,var(--editor-fg));--a-t1:var(--w-variable,var(--editor-fg));--a-t2:var(--w-property,var(--editor-fg));--a-t3:var(--w-constant,var(--editor-fg));--a-t4:var(--w-string,var(--editor-fg));--a-t5:var(--w-escape,var(--editor-fg));--a-t6:var(--w-number,var(--editor-fg));--a-t7:var(--w-type,var(--editor-fg));--a-t8:var(--w-function,var(--editor-fg));--a-t9:var(--w-call,var(--editor-fg));--a-t10:var(--w-operator,var(--editor-fg));--a-t11:var(--w-keyword,var(--editor-fg));--a-t12:var(--w-control,var(--editor-fg));--a-t13:var(--w-return,var(--editor-fg));--a-t14:var(--w-punctuation,var(--editor-fg));--a-t15:var(--w-bracket,var(--editor-fg));--a-t16:var(--w-comment,var(--editor-fg));--a-t17:var(--w-builtin,var(--w-call,var(--editor-fg)));--a-t18:var(--w-const_binding,var(--w-variable,var(--editor-fg)));--a-t19:var(--w-method_call,var(--w-call,var(--editor-fg)));--a-t20:var(--w-member,var(--w-property,var(--editor-fg)));color:var(--w-plain,var(--editor-fg))}
.a .t0{color:var(--a-t0)}
.a .t1{color:var(--a-t1)}
.a .t2{color:var(--a-t2)}
.a .t3{color:var(--a-t3)}
.a .t4{color:var(--a-t4)}
.a .t5{color:var(--a-t5)}
.a .t6{color:var(--a-t6)}
.a .t7{color:var(--a-t7)}
.a .t8{color:var(--a-t8)}
.a .t9{color:var(--a-t9)}
.a .t10{color:var(--a-t10)}
.a .t11{color:var(--a-t11)}
.a .t12{color:var(--a-t12)}
.a .t13{color:var(--a-t13)}
.a .t14{color:var(--a-t14)}
.a .t15{color:var(--a-t15)}
.a .t16{color:var(--a-t16)}
.a::selection, .a *::selection { background:var(--editor-selection); }

.a .t17{color:var(--a-t17)}
.a .t18{color:var(--a-t18)}

.a .t19{color:var(--a-t19)}
.a .t20{color:var(--a-t20)}