/* ==========================================================================
   ColorTool — "print proof" design system
   Paper + ink neutrals let every swatch carry the color. CMYK and
   registration motifs come from press proof sheets. Logical properties only,
   so the whole layout mirrors for RTL locales.
   ========================================================================== */

:root {
    --paper: #f4f1ea;
    --paper-2: #ebe6db;
    --paper-3: #e2dccf;
    --card: #fbfaf6;
    --ink: #16130f;
    --ink-2: #4a443b;
    --ink-3: #857d70;
    --rule: #d6cfbf;
    --accent: #e8452c;
    --accent-ink: #ffffff;
    --pass: #1f7a4d;
    --fail: #b3261e;
    --cyan: #00a3d9;
    --magenta: #d6007e;
    --yellow: #ffd400;
    --key: #16130f;
    --shadow: 0 1px 0 rgb(22 19 15 / 0.04), 0 10px 30px -12px rgb(22 19 15 / 0.18);
    --radius: 14px;
    --radius-sm: 8px;
    --gap: clamp(16px, 2.4vw, 28px);
    --font-sans: "Bricolage Grotesque", "Noto Naskh Arabic", "Noto Nastaliq Urdu", "Noto Sans Devanagari", "Noto Sans Bengali", "Hiragino Sans", "PingFang SC", "Microsoft YaHei", "Apple SD Gothic Neo", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #14120f; --paper-2: #1c1915; --paper-3: #26221d; --card: #1a1814;
        --ink: #f1ece2; --ink-2: #c3bbab; --ink-3: #8a8274; --rule: #36312a;
        --accent: #ff6a4d; --accent-ink: #14120f; --pass: #4cc38a; --fail: #ff7b6e;
        --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 14px 34px -14px rgb(0 0 0 / 0.6);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --paper: #14120f; --paper-2: #1c1915; --paper-3: #26221d; --card: #1a1814;
    --ink: #f1ece2; --ink-2: #c3bbab; --ink-3: #8a8274; --rule: #36312a;
    --accent: #ff6a4d; --accent-ink: #14120f; --pass: #4cc38a; --fail: #ff7b6e;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 14px 34px -14px rgb(0 0 0 / 0.6);
    color-scheme: dark;
}

:root[data-locale="ur"] { --font-sans: "Bricolage Grotesque", "Noto Nastaliq Urdu", "Noto Naskh Arabic", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Noto Nastaliq Urdu", "Noto Naskh Arabic", system-ui, ui-monospace, monospace; }
:root[data-locale="ar"] { --font-sans: "Bricolage Grotesque", "Noto Naskh Arabic", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Noto Naskh Arabic", system-ui, ui-monospace, monospace; }
:root[data-locale="hi"] { --font-sans: "Bricolage Grotesque", "Noto Sans Devanagari", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Noto Sans Devanagari", system-ui, ui-monospace, monospace; }
:root[data-locale="bn"] { --font-sans: "Bricolage Grotesque", "Noto Sans Bengali", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Noto Sans Bengali", system-ui, ui-monospace, monospace; }
:root[data-locale="ja"] { --font-sans: "Bricolage Grotesque", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, ui-monospace, monospace; }
:root[data-locale="ko"] { --font-sans: "Bricolage Grotesque", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, ui-monospace, monospace; }
:root[data-locale="zh-cn"] { --font-sans: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, ui-monospace, monospace; }
:root[data-locale="zh-tw"] { --font-sans: "Bricolage Grotesque", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, ui-monospace, monospace; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 90px; }

body {
    margin: 0;
    min-block-size: 100vh;
    background: var(--paper) var(--grain);
    color: var(--ink);
    font: 400 16px/1.55 var(--font-sans);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

:root[data-locale="ur"] body { line-height: 2.1; }

img, svg, canvas { max-inline-size: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--yellow); color: #16130f; }

.mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; unicode-bidi: isolate; }
[dir="rtl"] .mono { direction: ltr; }
/* Hex codes in color links: "#" is bidi-neutral, so let the first strong character pick the direction. */
[dir="rtl"] a[href*="/color/"], [dir="rtl"] :is(.strip__code, .chip__code, .color-hero__code) { unicode-bidi: plaintext; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { inset-block-start: 12px; }

.eyebrow {
    margin: 0;
    font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---------- Proof bar: CMYK + gray step registration strip ---------- */
.proof-bar { display: grid; grid-template-columns: repeat(10, 1fr); block-size: 5px; }
.proof-bar i:nth-child(1) { background: var(--cyan); }
.proof-bar i:nth-child(2) { background: var(--magenta); }
.proof-bar i:nth-child(3) { background: var(--yellow); }
.proof-bar i:nth-child(4) { background: var(--key); }
.proof-bar i:nth-child(5) { background: #5b9a3a; }
.proof-bar i:nth-child(6) { background: #e8452c; }
.proof-bar i:nth-child(7) { background: #3f51b5; }
.proof-bar i:nth-child(8) { background: #9e9e9e; }
.proof-bar i:nth-child(9) { background: #cfcfcf; }
.proof-bar i:nth-child(10) { background: #f4f4f4; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; inset-block-start: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--rule);
}
.site-header__inner {
    max-inline-size: 1280px; margin-inline: auto; padding: 10px var(--gap);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__mark { inline-size: 34px; block-size: 34px; color: var(--ink); }
.brand__name { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.brand__name b { font-weight: 800; }

.omnibox { position: relative; display: flex; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 4px; max-inline-size: 560px; inline-size: 100%; }
.omnibox:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.omnibox input { flex: 1; min-inline-size: 0; border: 0; background: transparent; padding: 8px 12px; outline: none; }
.omnibox__chip { inline-size: 22px; block-size: 22px; border-radius: 50%; margin-inline-start: 6px; background: conic-gradient(var(--cyan), var(--magenta), var(--yellow), var(--cyan)); flex: none; transition: background .2s; }
.omnibox__submit { border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); padding: 7px 16px; font-weight: 600; cursor: pointer; }
.omnibox__list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50; max-block-size: 360px; overflow: auto; }
.omnibox__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.omnibox__list li[aria-selected="true"], .omnibox__list li:hover { background: var(--paper-2); }
.omnibox__list .dot { inline-size: 18px; block-size: 18px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__group { position: relative; }
.nav__group > summary, .nav__premium { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nav__group > summary::-webkit-details-marker { display: none; }
.nav__group > summary:hover, .nav__group[open] > summary { background: var(--paper-2); }
.nav__menu { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 8px); min-inline-size: 230px; padding: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; z-index: 60; }
.nav__menu a { padding: 9px 12px; border-radius: 8px; text-decoration: none; }
.nav__menu a:hover { background: var(--paper-2); color: var(--ink); }
.nav__premium { background: var(--yellow); color: #16130f; }
.nav__premium:hover { color: #16130f; filter: brightness(0.96); }
.badge { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/1 var(--font-mono); letter-spacing: 0.06em; padding: 4px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); text-transform: uppercase; white-space: nowrap; }
.badge--pass { background: color-mix(in srgb, var(--pass) 16%, transparent); color: var(--pass); }
.badge--fail { background: color-mix(in srgb, var(--fail) 14%, transparent); color: var(--fail); }

.header-tools { display: flex; align-items: center; gap: 6px; }
.locale-select { border: 1px solid var(--rule); background: var(--card); border-radius: 999px; block-size: 38px; padding: 0 12px; line-height: normal; max-inline-size: 150px; }
.icon-button { inline-size: 38px; block-size: 38px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--card); border-radius: 50%; cursor: pointer; text-decoration: none; }
.icon-button svg { inline-size: 18px; block-size: 18px; }
.text-button { border: 0; background: none; padding: 6px 8px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Layout ---------- */
.main { max-inline-size: 1280px; margin-inline: auto; padding: clamp(20px, 4vw, 48px) var(--gap) 64px; outline: none; }
.layout-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; margin-block-start: var(--gap); }
.aside { position: sticky; inset-block-start: 92px; display: grid; gap: var(--gap); }
.genui-zone { display: flex; flex-direction: column; gap: var(--gap); min-inline-size: 0; }
.genui-zone > * { order: var(--order, 50); }

.page-head { max-inline-size: 820px; margin-block-end: calc(var(--gap) * 1.2); }
.page-head__title { margin: 8px 0 10px; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.page-head__lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-inline-size: 64ch; }
.section-title { font-size: 22px; letter-spacing: -0.02em; margin: 36px 0 14px; }
.subhead { font: 600 13px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 10px; }
.subhead:first-child { margin-block-start: 0; }
.prose { max-inline-size: 72ch; font-size: 17px; color: var(--ink-2); }
.prose--page { margin-block: 32px; }
.prose h2 { color: var(--ink); font-size: 22px; margin-block: 28px 8px; }
.flash { padding: 12px 16px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--pass) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--pass) 40%, transparent); margin-block-end: 20px; }
.flash--error { background: color-mix(in srgb, var(--fail) 12%, var(--card)); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero__title { font-size: clamp(44px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 800; margin: 14px 0 18px; }
.hero__title em { font-style: normal; background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); padding-inline: 4px; }
.hero__lead { font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-2); max-inline-size: 46ch; margin: 0; }
[data-density="compact"] .hero__title { font-size: clamp(36px, 5vw, 64px); }
[data-density="compact"] .hero__lead { display: none; }

/* Proof: big swatch with crop marks */
.proof { position: relative; padding: 18px; background: var(--card); border-radius: 4px; box-shadow: var(--shadow); animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.proof__swatch { position: relative; aspect-ratio: 5 / 4; border-radius: 2px; background: var(--c); color: var(--t); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; transition: background-color .25s ease; overflow: hidden; }
.proof--inline .proof__swatch { aspect-ratio: 16 / 7; }
.proof__crop { position: absolute; inline-size: 18px; block-size: 18px; border-color: var(--ink); border-style: solid; border-width: 0; }
.proof__crop--tl { inset-block-start: 4px; inset-inline-start: 4px; border-block-start-width: 1px; border-inline-start-width: 1px; }
.proof__crop--tr { inset-block-start: 4px; inset-inline-end: 4px; border-block-start-width: 1px; border-inline-end-width: 1px; }
.proof__crop--bl { inset-block-end: 4px; inset-inline-start: 4px; border-block-end-width: 1px; border-inline-start-width: 1px; }
.proof__crop--br { inset-block-end: 4px; inset-inline-end: 4px; border-block-end-width: 1px; border-inline-end-width: 1px; }
.proof__input-wrap { display: block; }
.proof__input { inline-size: 100%; background: transparent; border: 0; border-block-end: 2px solid currentColor; color: inherit; font-size: clamp(30px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.02em; padding: 4px 0; outline: none; }
.proof__input[aria-invalid="true"] { border-block-end-style: dashed; opacity: .75; }
.proof__picker { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 44px; block-size: 44px; border: 2px solid currentColor; border-radius: 50%; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.proof__picker::-webkit-color-swatch-wrapper { padding: 0; }
.proof__picker::-webkit-color-swatch { border: 0; border-radius: 50%; }
.proof__name { margin: 8px 0 0; font-weight: 600; font-size: 18px; opacity: .9; }
.proof__hint { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.proof__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s; white-space: nowrap; }
.button:hover { background: var(--paper-2); color: var(--ink); }
.button:active { transform: translateY(1px); }
.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover { background: var(--ink-2); color: var(--paper); }
.button--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button--accent:hover { filter: brightness(1.05); background: var(--accent); color: var(--accent-ink); }
.button[disabled] { opacity: .5; cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-start: 16px; }
.link-arrow { display: inline-flex; gap: 6px; margin-block-start: 16px; font-weight: 600; }
.link-arrow::after { content: "→"; }
[dir="rtl"] .link-arrow::after { content: "←"; }
:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn)) :is(.eyebrow, .subhead, .badge, .formats__row dt, .harmony__name, .spec-table th[scope="row"], .names-table thead th, .field__label, .ad-zone__label) { letter-spacing: 0; text-transform: none; }

/* ---------- Panels (Generative UI) ---------- */
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); animation: rise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--order, 0) * 40ms); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--rule); }
.panel__title { margin: 0; font-size: 20px; letter-spacing: -0.02em; flex: 1; min-inline-size: 0; }
.panel__toggle { all: unset; display: flex; align-items: center; gap: 12px; cursor: pointer; inline-size: 100%; }
.panel__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.panel__toggle .eyebrow { color: var(--accent); }
.panel__chevron { inline-size: 16px; block-size: 16px; margin-inline-start: auto; transition: transform .2s; }
.panel__actions { display: flex; align-items: center; gap: 8px; }
.panel__body { padding: 20px; }
[data-density="compact"] .panel__body { padding: 14px 16px; }
[data-density="compact"] .panel__head { padding: 12px 16px; }
.panel[data-state="collapsed"] .panel__body { display: none; }
.panel[data-state="collapsed"] .panel__head { border-block-end: 0; }
.panel[data-state="collapsed"] .panel__chevron { transform: rotate(-90deg); }
[dir="rtl"] .panel[data-state="collapsed"] .panel__chevron { transform: rotate(90deg); }
.panel.is-adapted { animation: pulse-ring 1.2s ease-out 1; }

.help-dot { inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); font: 700 13px/1 var(--font-mono); cursor: pointer; flex: none; }
.help-dot:hover { border-color: var(--ink); }
.help-popover { position: absolute; z-index: 80; inline-size: min(360px, calc(100vw - 32px)); background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); font-size: 14px; }
.help-popover h3 { margin: 0 0 6px; font-size: 15px; }
.help-popover p { margin: 0 0 10px; color: color-mix(in srgb, var(--paper) 82%, transparent); }
.help-popover p:last-child { margin: 0; }
.help-popover__close { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }

/* ---------- Formats ---------- */
.formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 0; }
.formats__row { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.formats__row dt { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.formats__row dd { margin: 0; min-inline-size: 0; }
.copy-value { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; max-inline-size: 100%; border-radius: 6px; padding: 2px 4px; margin-inline: -4px; }
.copy-value:hover { background: var(--paper-2); }
.copy-value:focus-visible { outline: 2px solid var(--accent); }
.copy-value__label { font: 600 11px/1 var(--font-mono); color: var(--ink-3); }
.copy-value__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.copy-value__icon { inline-size: 14px; block-size: 14px; opacity: .45; flex: none; }
.copy-value.is-copied .copy-value__icon { opacity: 1; color: var(--pass); }
.copy-inline { all: unset; cursor: pointer; }
.copy-inline:hover { color: var(--accent); }

/* ---------- Strips, chips, swatches ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--rule); }
.strip__cell { position: relative; background: var(--c); color: var(--t); min-block-size: 92px; display: flex; }
.strip--compact .strip__cell { min-block-size: 64px; }
.strip__cell.is-base { box-shadow: inset 0 0 0 3px var(--t); }
.strip__link { flex: 1; display: flex; align-items: flex-end; padding: 8px; text-decoration: none; color: inherit; min-inline-size: 0; }
.strip__link:hover { color: inherit; }
.strip__code { font-size: 11px; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .9; }
.strip__copy { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: 24px; block-size: 24px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--t) 18%, transparent); color: inherit; opacity: 0; cursor: pointer; display: grid; place-items: center; transition: opacity .15s; }
.strip__copy svg { inline-size: 13px; block-size: 13px; }
.strip__cell:hover .strip__copy, .strip__copy:focus-visible { opacity: 1; }
@media (min-width: 900px) { .strip__code { writing-mode: horizontal-tb; transform: none; } }
@media (min-width: 900px) and (max-width: 1180px) { .strip--compact .strip__code { font-size: 9px; } }

.chip { position: relative; display: grid; grid-template-rows: 1fr auto; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 6px; transition: transform .2s ease, box-shadow .2s; }
.chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.chip__ink { display: block; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.chip--lg .chip__ink { aspect-ratio: 1; min-inline-size: 180px; }
.chip__code { font-size: 12px; padding: 8px 4px 0; }
.chip__label { font-size: 13px; font-weight: 600; padding: 2px 4px 4px; line-height: 1.25; }
.chip__meta { font: 500 11px var(--font-mono); color: var(--ink-3); padding: 0 4px 4px; }
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.chip-grid--wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.dot { display: inline-block; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); vertical-align: middle; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px; }
.chip-link { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); text-decoration: none; font-size: 14px; }
.chip-link:hover { border-color: var(--ink); color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0; }
.tags li { padding: 5px 10px; border-radius: 999px; background: var(--paper-2); font-size: 13px; }

/* ---------- Harmony ---------- */
.harmony-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.harmony__name { font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 0 0 8px; }
.harmony__swatches { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: var(--radius-sm); overflow: hidden; min-block-size: 72px; border: 1px solid var(--rule); }
.harmony__swatches a { background: var(--c); color: var(--t); display: flex; align-items: flex-end; padding: 6px; font: 500 11px var(--font-mono); text-decoration: none; }
.harmony__swatches a:hover { color: var(--t); filter: brightness(1.04); }

/* ---------- Color page ---------- */
.color-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.color-hero__swatch { position: relative; aspect-ratio: 4 / 3; background: var(--c); color: var(--t); border-radius: 4px; box-shadow: var(--shadow), 0 0 0 14px var(--card), 0 0 0 15px var(--rule); margin: 15px; animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.color-hero__swatch .proof__crop { border-color: var(--t); opacity: .55; }
.color-hero__reg { position: absolute; inset-block-start: 22px; inset-inline-start: 22px; inline-size: 30px; block-size: 30px; border: 1px solid var(--t); border-radius: 50%; opacity: .6; }
.color-hero__reg::before, .color-hero__reg::after { content: ""; position: absolute; background: var(--t); }
.color-hero__reg::before { inset-inline-start: 50%; inset-block: -6px; inline-size: 1px; }
.color-hero__reg::after { inset-block-start: 50%; inset-inline: -6px; block-size: 1px; }
.color-hero__code { position: absolute; inset-block-end: 20px; inset-inline-end: 22px; font-size: clamp(22px, 3vw, 34px); font-weight: 600; }
.color-hero__title { margin: 10px 0 0; display: grid; gap: 4px; font-size: clamp(38px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.color-hero__name { font-size: .5em; font-weight: 600; color: var(--ink-2); letter-spacing: -0.02em; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); }
.breadcrumb a { text-decoration: none; }
.quick-copy { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px; border: 1px dashed var(--rule); border-radius: var(--radius-sm); }
.description { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 10px; }

.table-wrap { overflow-x: auto; }
.spec-table, .names-table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td, .names-table th, .names-table td { padding: 10px 12px; border-block-end: 1px solid var(--rule); text-align: start; vertical-align: middle; }
.spec-table th[scope="row"] { font: 500 12px var(--font-mono); letter-spacing: .06em; color: var(--ink-2); inline-size: 34%; white-space: nowrap; }
.spec-table tr:hover td, .names-table tbody tr:hover { background: var(--paper); }
.names-table thead th { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); position: sticky; inset-block-start: 63px; background: var(--paper); }
.names-table th[scope="row"] a { text-decoration: none; font-weight: 600; }

.contrast-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contrast-sample { display: grid; gap: 6px; padding: 18px; border-radius: var(--radius-sm); background: var(--bg, var(--c)); color: var(--fg); }
.contrast-sample__text { font-size: 30px; font-weight: 700; line-height: 1.1; }
.contrast-sample__ratio { font-size: 22px; font-weight: 600; }
.contrast-sample__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.contrast-sample .badge { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }
.contrast-sample .badge--fail { text-decoration: line-through; opacity: .75; }

.cvd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cvd { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); }
.cvd__pair { display: grid; grid-template-columns: 1fr 1fr; block-size: 72px; }
.cvd-grid--large .cvd__pair { block-size: 120px; }
.cvd__pair span { background: var(--c); }
.cvd figcaption { display: grid; gap: 2px; padding: 10px 12px; }

.css-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block-end: 14px; }
.css-preview { margin: 0; padding: 14px; border-radius: var(--radius-sm); font-weight: 600; border: 3px solid transparent; background: var(--paper); }
.css-preview--border { border-color: inherit; }
.code-block { border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; margin-block-start: 10px; }
.code-block__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 6px 14px; background: var(--paper-2); font: 500 12px var(--font-mono); }
.code-block pre, .export-text { margin: 0; padding: 14px; overflow-x: auto; font: 13px/1.6 var(--font-mono); background: var(--paper); text-align: left; }
.export-text { border: 1px solid var(--rule); border-radius: var(--radius-sm); max-block-size: 260px; }

/* ---------- Tools ---------- */
.tool-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin-block-end: var(--gap); }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .filters select, .filters input { border: 1px solid var(--rule); background: var(--paper); border-radius: var(--radius-sm); padding: 9px 12px; font-weight: 400; color: var(--ink); min-inline-size: 0; }
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; }
.field--range { min-inline-size: 220px; }
.field-error { color: var(--fail); font-size: 13px; margin: -6px 0 0; }
.color-field { display: flex; align-items: center; gap: 6px; }
.color-field input[type="color"] { inline-size: 42px; block-size: 40px; padding: 2px; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--paper); cursor: pointer; }
.color-field input[type="text"], .color-field input:not([type]) { inline-size: 120px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--paper); }
.toggle:has(input:checked) { border-color: var(--ink); background: var(--card); }
.relation-filters, .format-picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.converter-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.converter-fields { display: grid; gap: 10px; }
.field--format { grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 6px 6px 6px 14px; }
.field--format input { border: 0; background: transparent; font-size: 15px; }
.field--format input[aria-invalid="true"] { color: var(--fail); }
.field__label { font: 500 12px var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.field__copy { inline-size: 34px; block-size: 34px; border: 0; background: var(--paper-2); border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.field__copy svg { inline-size: 14px; block-size: 14px; }

.gradient-bar { block-size: 140px; border-radius: var(--radius); margin-block-end: 14px; box-shadow: var(--shadow); }
.equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 16px; align-items: center; }
.equation__op { font: 300 44px/1 var(--font-mono); color: var(--ink-3); }

.contrast-stage { background: var(--bg); color: var(--fg); border-radius: var(--radius); padding: clamp(24px, 5vw, 56px); margin-block-end: var(--gap); box-shadow: var(--shadow); }
.contrast-stage__ratio { font-size: clamp(64px, 12vw, 140px); font-weight: 600; line-height: .9; margin: 0 0 16px; letter-spacing: -0.04em; }
.contrast-stage__ratio span { font-size: .4em; }
.contrast-stage__large { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.contrast-stage__normal { font-size: 16px; margin: 0; max-inline-size: 60ch; }
.suggestion { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-block-start: var(--gap); padding: 16px; border: 1px dashed var(--accent); border-radius: var(--radius); }
.suggestion .chip { inline-size: 160px; }

.websafe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 3px; }
.websafe-grid__cell { aspect-ratio: 1; background: var(--c); color: var(--t); display: grid; place-items: end start; padding: 5px; font-size: 10px; text-decoration: none; border-radius: 3px; transition: transform .15s; }
.websafe-grid__cell:hover { transform: scale(1.12); z-index: 2; color: var(--t); box-shadow: var(--shadow); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 20px; align-items: flex-end; }
.filters label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.filters__search { flex: 1; min-inline-size: 200px; }

/* ---------- AI: search, image, graph, workspace ---------- */
.ai-prompt { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 6px; }
.ai-prompt input { flex: 1; min-inline-size: 0; border: 0; background: transparent; padding: 10px 14px; outline: none; font-size: 16px; }
.ai-prompt--large { padding: 8px; box-shadow: var(--shadow); }
.ai-prompt--large input { font-size: clamp(17px, 2vw, 22px); }
.ai-prompt:focus-within { border-color: var(--ink); }
.rag-results { margin-block-start: var(--gap); }
.rag-status { color: var(--ink-3); font: 500 13px var(--font-mono); }
.rag-status.is-loading::after { content: ""; display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-start: 8px; border-radius: 50%; background: var(--accent); animation: blink .8s infinite alternate; }
.rag-suggested { margin-block: 18px; padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.palette-hero { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; block-size: clamp(120px, 18vw, 200px); border-radius: var(--radius-sm); overflow: hidden; margin-block: 10px; }
.palette-hero a { background: var(--c); color: var(--t); display: flex; align-items: flex-end; padding: 12px; font: 600 13px var(--font-mono); text-decoration: none; }
.palette-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.palette-cards--large { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.palette-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.palette-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.palette-card__colors { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; block-size: 84px; }
.palette-card__colors a, .palette-card__colors span { background: var(--c); }
.palette-card__body { padding: 10px 12px 12px; }
.palette-card__name { margin: 0; font-size: 15px; padding: 10px 12px 0; }
.palette-card__body .palette-card__name { padding: 0; }
.palette-card__desc { margin: 4px 0 8px; font-size: 13px; color: var(--ink-2); }
.palette-card__actions { display: flex; gap: 4px; flex-wrap: wrap; }
.score { font: 500 11px var(--font-mono); color: var(--ink-3); }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.insight { padding: 16px; border-inline-start: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
[dir="rtl"] .insight { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.insight h3 { margin: 4px 0 6px; font-size: 16px; }
.insight p { margin: 0; font-size: 14px; color: var(--ink-2); }
.mini-palette { display: inline-flex; border-radius: 4px; overflow: hidden; margin-block-start: 8px; }
.mini-palette span { inline-size: 22px; block-size: 16px; background: var(--c); }

.dropzone { position: relative; display: grid; justify-items: center; gap: 8px; padding: 36px 20px; border: 2px dashed var(--rule); border-radius: var(--radius); text-align: center; cursor: pointer; background: var(--card); text-decoration: none; transition: border-color .2s, background .2s; }
.dropzone svg { inline-size: 54px; block-size: 54px; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.is-dragging, .dropzone:hover { border-color: var(--ink); background: var(--paper-2); }
.dropzone--large { padding: 64px 20px; }
.dropzone--teaser { padding: 26px; }
.image-result { margin-block-start: var(--gap); }
.image-result__previews { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.image-result__previews figure { margin: 0; }
.image-result__previews img { inline-size: 100%; border-radius: var(--radius-sm); background: var(--paper-2); }
.image-result__previews figcaption { font-size: 13px; color: var(--ink-3); margin-block-start: 6px; }
.lighting { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.lighting .tags li strong { font-weight: 700; }
.proportion-bar { display: flex; block-size: 90px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--rule); }
.proportion-bar a { background: var(--c); color: var(--t); flex: var(--w) 1 0; min-inline-size: 26px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px; text-decoration: none; font: 500 11px var(--font-mono); }
.image-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ui-preview { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); background: var(--h-bg); color: var(--h-text); padding: 22px; display: grid; gap: 14px; }
.ui-preview__card { background: var(--h-surface); border-radius: 10px; padding: 16px; }
.ui-preview__button { display: inline-block; background: var(--h-primary); color: var(--h-on-primary); padding: 9px 14px; border-radius: 999px; font-weight: 700; }
.ui-preview__accent { color: var(--h-accent); font-weight: 700; }
.ui-preview__swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-preview__swatches span { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-mono); padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--h-surface); }
.ui-preview__swatches i { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--c); }

.image-sim { margin-block-start: 40px; }
.image-sim__canvases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.image-sim__canvases figure { margin: 0; }
.image-sim__canvases canvas { inline-size: 100%; block-size: auto; border-radius: var(--radius-sm); }

.graph-tool { display: grid; gap: var(--gap); }
.graph-canvas-wrap { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.graph-canvas { inline-size: 100%; block-size: min(70vh, 640px); touch-action: none; cursor: grab; }
.graph-canvas:active { cursor: grabbing; }
.graph-canvas .node circle { stroke: var(--card); stroke-width: 2; cursor: pointer; transition: r .2s; }
.graph-canvas .node.is-center circle { stroke: var(--ink); stroke-width: 3; }
.graph-canvas .node.is-virtual circle { stroke-dasharray: 3 2; stroke: var(--ink-3); }
.graph-canvas .node text { font: 500 10px var(--font-mono); fill: var(--ink-2); pointer-events: none; }
.graph-canvas line { stroke-opacity: .55; }
.graph-legend { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.legend { font: 500 11px var(--font-mono); padding: 3px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); display: inline-flex; align-items: center; gap: 6px; }
.legend::before { content: ""; inline-size: 14px; block-size: 3px; border-radius: 2px; background: var(--rel); }
.legend--co_occurrence, .toggle--co_occurrence { --rel: #e8452c; }
.legend--similar, .toggle--similar { --rel: #8a8274; }
.legend--complementary, .toggle--complementary { --rel: #00a3d9; }
.legend--analogous, .toggle--analogous { --rel: #5b9a3a; }
.legend--triadic, .toggle--triadic { --rel: #d6007e; }
.legend--split_complementary, .toggle--split_complementary { --rel: #c9a000; }
.graph-inspector { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 240px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; box-shadow: var(--shadow); font-size: 14px; }
.analytics { margin-block-start: 40px; }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); margin-block-start: var(--gap); }
.pair-list, .community-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pair-list li, .community-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pair-list li > span:nth-last-child(2) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 0; }
.stats div { padding: 12px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--rule); }
.stats dt { font-size: 12px; color: var(--ink-3); }
.stats dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card__title { margin: 0 0 10px; font-size: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }

.workspace .genui-zone { gap: var(--gap); }
.palette-list { display: grid; gap: 14px; }
.palette-editor { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; background: var(--paper); }
.palette-editor.is-selected { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.palette-editor__head { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; flex-wrap: wrap; }
.palette-editor__name { flex: 1; min-inline-size: 140px; border: 0; border-block-end: 1px dashed var(--rule); background: transparent; font-weight: 700; font-size: 16px; padding: 4px 0; }
.palette-editor__name:focus { outline: none; border-color: var(--ink); }
.palette-editor__colors { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.palette-editor__colors li { position: relative; display: grid; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); background: var(--card); }
.palette-editor__colors .swatch-input { block-size: 64px; inline-size: 100%; border: 0; padding: 0; cursor: pointer; background: none; }
.palette-editor__colors .swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.palette-editor__colors .swatch-input::-webkit-color-swatch { border: 0; }
.palette-editor__colors .hex-input { border: 0; background: transparent; font: 500 12px var(--font-mono); padding: 6px; inline-size: 100%; text-align: center; }
.palette-editor__colors .remove { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .35); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; }
.palette-editor__colors li:hover .remove { opacity: 1; }
.save-state[data-state="saving"] { color: var(--accent); }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-block-size: 420px; overflow: auto; }
.history-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--rule); font-size: 13px; }
.history-list li.is-current { border-color: var(--ink); }
.recent { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recent a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; font: 500 12px var(--font-mono); }

.quick-actions { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; }
.quick-actions ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.quick-actions a, .quick-actions button { all: unset; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; font-weight: 600; font-size: 14px; }
.quick-actions a:hover, .quick-actions button:hover { background: var(--paper-2); }
.quick-actions a::after, .quick-actions button::after { content: "→"; color: var(--ink-3); }
[dir="rtl"] .quick-actions a::after, [dir="rtl"] .quick-actions button::after { content: "←"; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); max-inline-size: 920px; }
.plan { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.plan--premium { border: 2px solid var(--ink); position: relative; background: linear-gradient(160deg, color-mix(in srgb, var(--yellow) 16%, var(--card)), var(--card) 46%); }
.plan__name { margin: 6px 0; font-size: 26px; }
.plan__price { font-size: 30px; font-weight: 800; margin: 4px 0 12px; }
.plan__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan__list li { padding-inline-start: 26px; position: relative; }
.plan__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .45em; inline-size: 12px; block-size: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--cyan), var(--magenta)); }

.feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.feature__index { color: var(--accent); font-weight: 600; }
.feature__title { margin: 8px 0; font-size: 19px; }
.feature p { margin: 0; color: var(--ink-2); }

.auth { max-inline-size: 460px; margin-inline: auto; }
.form { display: grid; gap: 14px; }
.form .field input, .form .field select { inline-size: 100%; }

.not-found { text-align: center; display: grid; justify-items: center; gap: 10px; padding-block: 40px; }
.not-found__code { font-size: clamp(96px, 20vw, 220px); font-weight: 600; line-height: .9; margin: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.not-found .chip { inline-size: 200px; }

/* ---------- Ads ---------- */
.ad-zone { position: relative; display: grid; place-items: center; min-block-size: 100px; background: repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--rule) 40%, transparent) 8px 9px); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.ad-zone__label { position: absolute; inset-block-start: 4px; inset-inline-start: 8px; font: 500 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ad-zone ins { inline-size: 100%; min-block-size: 90px; }
.ad-zone--header { max-inline-size: 1280px; margin: 12px auto 0; min-block-size: 90px; inline-size: calc(100% - var(--gap) * 2); }
.ad-zone--footer { max-inline-size: 1280px; margin: 0 auto 24px; inline-size: calc(100% - var(--gap) * 2); }
.ad-zone--sidebar { min-block-size: 600px; }
.ad-zone--in_content { min-block-size: 250px; order: 3; }
.ad-zone--mobile_sticky { display: none; }
.ad-zone__close { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink-3); }
.ad-zone.is-unfilled ins { display: none; }
.adblock-prompt { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 90; max-inline-size: 380px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); animation: rise .5s both; }
.adblock-prompt p { margin: 0 0 12px; }
.adblock-prompt .button { border-color: var(--paper); color: var(--paper); }
.adblock-prompt .button--accent { color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Footer & toasts ---------- */
.site-footer { border-block-start: 1px solid var(--rule); background: var(--paper-2); }
.site-footer__inner { max-inline-size: 1280px; margin-inline: auto; padding: 40px var(--gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.site-footer__cols div { display: grid; gap: 8px; align-content: start; }
.site-footer__cols a { text-decoration: none; color: var(--ink-2); font-size: 14px; }
.site-footer__cols .eyebrow { margin-block-end: 6px; }
.site-footer__base { max-inline-size: 1280px; margin-inline: auto; padding: 14px var(--gap) 24px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); border-block-start: 1px solid var(--rule); }
.toast-region { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; display: grid; gap: 8px; z-index: 100; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); animation: rise .25s both; display: flex; align-items: center; gap: 10px; }
.toast .dot { inline-size: 16px; block-size: 16px; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blink { to { opacity: .2; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); } 100% { box-shadow: 0 0 0 14px transparent, var(--shadow); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
    .nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
    .layout-with-aside { grid-template-columns: minmax(0, 1fr); }
    .aside { position: static; }
    .ad-zone--sidebar { min-block-size: 250px; }
}
@media (max-width: 820px) {
    .hero, .color-hero, .converter-tool, .image-columns { grid-template-columns: minmax(0, 1fr); }
    .site-header__inner { grid-template-columns: auto auto; }
    .omnibox { grid-column: 1 / -1; grid-row: 3; max-inline-size: none; }
    .header-tools { justify-self: end; }
    .locale-select { max-inline-size: 110px; }
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
    .css-samples { grid-template-columns: minmax(0, 1fr); }
    .equation { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .equation > :last-child { grid-column: 1 / -1; }
    .equation__op:nth-of-type(2) { display: none; }
    .ad-zone--header { display: none; }
    .ad-zone--mobile_sticky { display: grid; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; min-block-size: 60px; border-radius: 0; background: var(--card); }
    .ad-zone--device-desktop { display: none; }
}
@media (min-width: 821px) { .ad-zone--device-mobile { display: none; } }
@media (max-width: 480px) {
    .brand__name { display: none; }
    .header-tools .text-button { padding-inline: 4px; }
}
@media (max-width: 560px) {
    .contrast-duo, .image-result__previews, .image-sim__canvases { grid-template-columns: minmax(0, 1fr); }
    .site-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .field--format { grid-template-columns: 80px minmax(0, 1fr) auto; }
    .harmony-grid { grid-template-columns: minmax(0, 1fr); }
    .site-footer__base { flex-direction: column; gap: 6px; }
}

@media print {
    .site-header, .site-footer, .ad-zone, .aside, .proof-bar, .toast-region { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; break-inside: avoid; }
    .panel[data-state="collapsed"] .panel__body { display: block; }
}