@import "tailwindcss";

:root {
  --ink: #151515;
  --muted: #66645f;
  --paper: #fffdf8;
  --paper-2: #f6f0e6;
  --surface: #ffffff;
  --line: #ded8cd;
  --blue: #2563eb;
  --pink: #ff4d8d;
  --yellow: #ffd60a;
  --mint: #2dd4bf;
  --purple: #8b5cf6;
  --orange: #ff8a3d;
  --red: #ef4444;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow-play: 6px 6px 0 var(--ink);
  --shadow-soft: 0 20px 60px rgba(33, 27, 19, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.announcement { background: var(--ink); color: white; text-align: center; padding: 8px 16px; font-size: 12px; font-weight: 760; letter-spacing: .03em; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(21,21,21,.08); background: rgba(255,253,248,.92); backdrop-filter: blur(16px); }
.nav-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 950; letter-spacing: -.045em; }
.brand-mark { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.main-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 850; }
.nav-top-link, .nav-dropdown > summary { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 999px; color: rgba(21,21,21,.72); cursor: pointer; white-space: nowrap; transition: color .16s ease, background .16s ease; }
.nav-top-link:hover, .nav-dropdown > summary:hover, .nav-dropdown[open] > summary { color: var(--ink); background: rgba(255,255,255,.88); }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary svg, .nav-summary-chevron { transition: transform .16s ease; }
.nav-dropdown[open] > summary svg, .nav-dropdown[open] .nav-summary-chevron { transform: rotate(180deg); }
.nav-mega { --nav-menu-width: 720px; position: absolute; top: calc(100% + 12px); z-index: 80; width: min(var(--nav-menu-width), calc(100vw - 32px)); display: grid; gap: 12px; padding: 14px; border: 2px solid var(--ink); border-radius: 20px; background: rgba(255,255,255,.98); box-shadow: 8px 8px 0 var(--ink); backdrop-filter: blur(18px); }
.nav-mega-left { left: 0; }
.nav-mega-center { left: 50%; transform: translateX(-50%); }
.nav-mega-right { right: 0; }
.nav-mega-columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.nav-mega-columns-3 { --nav-menu-width: 820px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.nav-mega-columns-4 { --nav-menu-width: 1040px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.nav-mega-group { min-width: 0; padding: 10px; border-radius: 14px; background: var(--paper); }
.nav-mega-group h2 { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.nav-mega-links { display: grid; gap: 2px; }
.nav-mega-links a { display: grid; gap: 1px; padding: 8px 9px; border-radius: 10px; color: var(--ink); transition: background .15s ease, transform .15s ease; }
.nav-mega-links a:hover { background: white; transform: translateX(2px); }
.nav-mega-links strong { font-size: 12px; line-height: 1.3; }
.nav-mega-links small { color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.35; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-button { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 13px; background: white; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.menu-icon-close { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-open { display: none; }
.menu-button[aria-expanded="true"] .menu-icon-close { display: inline; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 999px; background: white; font-weight: 900; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.button:active { transform: translate(4px, 4px); box-shadow: none; }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .58; transform: none; box-shadow: 2px 2px 0 #8f8a82; }
.button-primary { background: var(--yellow); }
.button-blue { background: var(--blue); color: white; }
.button-dark { background: var(--ink); color: white; }
.button-ghost { background: var(--paper-2); border-color: transparent; box-shadow: none; }
.button-small { min-height: 42px; padding-inline: 15px; font-size: 13px; }
.button-full { width: 100%; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px; background: white; display: inline-grid; place-items: center; cursor: pointer; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; font-weight: 900; color: var(--muted); }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 13px 0 0 var(--yellow), 26px 0 0 var(--mint); margin-right: 27px; }
.hero { position: relative; overflow: hidden; padding: 88px 0 76px; background-image: radial-gradient(#d9d3c7 1px, transparent 1px); background-size: 18px 18px; }
.hero::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,214,10,.25); right: -110px; top: -160px; filter: blur(2px); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 68px; align-items: center; }
.hero h1 { margin: 18px 0 22px; font-size: clamp(54px, 7vw, 96px); line-height: .9; letter-spacing: -.075em; max-width: 760px; }
.hero h1 em { font-style: normal; position: relative; z-index: 0; }
.hero h1 em::after { content: ""; position: absolute; left: -4px; right: -5px; bottom: 5px; height: 22%; background: var(--pink); z-index: -1; transform: rotate(-1deg); opacity: .82; }
.hero-copy { max-width: 620px; font-size: 18px; color: #45423d; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; color: #57534e; font-size: 13px; font-weight: 800; }
.trust-row span { display: inline-flex; gap: 6px; align-items: center; }
.trust-row span::before { content: "✓"; font-weight: 950; color: #15803d; }
.hero-art { min-height: 510px; position: relative; isolation: isolate; }
.palette-deck { position: absolute; z-index: 3; inset: 44px 18px 35px 34px; border: 3px solid var(--ink); border-radius: 28px; background: white; box-shadow: 14px 14px 0 var(--ink); transform: rotate(-2deg); overflow: hidden; }
.palette-deck .deck-colors { height: 66%; display: grid; grid-template-columns: 1.25fr .85fr 1fr .8fr; }
.palette-deck .deck-colors i:nth-child(1) { background: #2563eb; }
.palette-deck .deck-colors i:nth-child(2) { background: #2dd4bf; }
.palette-deck .deck-colors i:nth-child(3) { background: #ffd60a; }
.palette-deck .deck-colors i:nth-child(4) { background: #ff4d8d; }
.deck-meta { padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.deck-meta strong { font-size: 20px; letter-spacing: -.03em; }
.deck-code { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.deck-code span { padding: 5px 8px; background: var(--paper-2); border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; }
.floating-chip { position: absolute; z-index: 6; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 999px; background: white; box-shadow: 4px 4px 0 var(--ink); font-weight: 900; font-size: 12px; white-space: nowrap; pointer-events: none; }
.floating-chip.one { left: 0; top: 20px; background: var(--mint); transform: rotate(-8deg); }
.floating-chip.two { right: -10px; top: 94px; background: var(--yellow); transform: rotate(8deg); }
.floating-chip.three { left: -4px; bottom: 18px; background: var(--pink); color: white; transform: rotate(5deg); }
.mini-card { position: absolute; z-index: 7; width: 180px; border: 2px solid var(--ink); border-radius: 18px; background: white; padding: 12px; box-shadow: 7px 7px 0 var(--ink); transform: rotate(7deg); right: -4px; bottom: 0; }
.mini-card-colors { display: grid; grid-template-columns: repeat(4,1fr); height: 62px; border-radius: 12px; overflow: hidden; }
.mini-card-colors i:nth-child(1) { background:#0f172a}.mini-card-colors i:nth-child(2){background:#8b5cf6}.mini-card-colors i:nth-child(3){background:#ff4d8d}.mini-card-colors i:nth-child(4){background:#ffd60a}
.mini-card strong { display: block; margin-top: 10px; font-size: 13px; }

.section { padding: 82px 0; }
.section-soft { background: var(--paper-2); }
.section-dark { background: var(--ink); color: white; }
.section-head { display: flex; justify-content: space-between; gap: 36px; align-items: end; margin-bottom: 30px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.055em; }
.section-head p { max-width: 520px; color: var(--muted); margin: 0; }
.section-dark .section-head p, .section-dark .eyebrow { color: rgba(255,255,255,.65); }

.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.feature-card { position: relative; overflow: hidden; grid-column: span 4; min-height: 260px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: white; padding: 24px; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; justify-content: space-between; transition: transform .16s ease, box-shadow .16s ease; }
.feature-card:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); }
.feature-card:nth-child(1), .feature-card:nth-child(6) { background: #dbeafe; }
.feature-card:nth-child(2), .feature-card:nth-child(7) { background: #fce7f3; }
.feature-card:nth-child(3), .feature-card:nth-child(8) { background: #fef3c7; }
.feature-card:nth-child(4), .feature-card:nth-child(9) { background: #ccfbf1; }
.feature-card:nth-child(5) { background: #ede9fe; }
.feature-card h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.04em; }
.feature-card p { margin: 0; color: #4d4943; max-width: 320px; }
.feature-card .feature-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 17px; background: white; box-shadow: 3px 3px 0 var(--ink); }
.feature-link { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

.palette-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.palette-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 9px 30px rgba(35,30,24,.06); transition: transform .18s ease, box-shadow .18s ease; }
.palette-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.palette-swatches { display: grid; grid-template-columns: repeat(5,1fr); height: 150px; }
.palette-swatch { border: 0; cursor: pointer; position: relative; }
.palette-swatch::after { content: attr(data-color); position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(17,17,17,.82); color: white; border-radius: 999px; padding: 4px 7px; font: 700 9px ui-monospace, monospace; opacity: 0; transition: opacity .15s ease; }
.palette-swatch:hover::after, .palette-swatch:focus-visible::after { opacity: 1; }
.palette-card-body { padding: 17px; }
.palette-title-row { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.palette-card h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.palette-category { padding: 5px 8px; background: var(--paper-2); border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.palette-card p { color: var(--muted); font-size: 13px; min-height: 41px; }
.palette-card-actions { display: flex; gap: 8px; }
.palette-card-actions .button { flex: 1; min-width: 0; }

.workflow { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.workflow-card { border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 23px; background: rgba(255,255,255,.07); }
.workflow-number { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-weight: 950; }
.workflow-card h3 { font-size: 22px; margin: 22px 0 7px; }
.workflow-card p { color: rgba(255,255,255,.68); margin: 0; }

.ad-slot { width: min(970px, calc(100% - 32px)); min-height: 122px; margin: 42px auto; border: 1px dashed #b9b1a4; border-radius: 18px; background: #f7f3eb; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #847c71; padding: 20px; }
.ad-slot span { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; font-weight: 900; }
.ad-slot p { margin: 6px 0 0; font-size: 12px; }
.ad-slot-compact { min-height: 90px; }

.page-hero { padding: 64px 0 40px; background-image: radial-gradient(#ddd7cb 1px, transparent 1px); background-size: 18px 18px; }
.page-hero h1 { font-size: clamp(48px, 7vw, 82px); line-height: .94; letter-spacing: -.07em; margin: 12px 0 18px; }
.page-hero p { max-width: 720px; font-size: 18px; color: #4f4a44; }

.playground-shell { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; padding: 28px 0 76px; }
.tool-panel { border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 12px 36px rgba(35,30,24,.07); }
.tool-panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.tool-panel-head h2, .tool-panel-head h3 { margin: 0; letter-spacing: -.035em; }
.tool-panel-body { padding: 20px; }
.tool-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.tool-tab { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: white; padding: 9px 13px; font-size: 12px; font-weight: 900; cursor: pointer; }
.tool-tab.active { background: var(--ink); color: white; border-color: var(--ink); }
.picker-grid { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 22px; align-items: start; }
.color-preview { min-height: 260px; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.color-preview input[type="color"] { width: 62px; height: 62px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.preview-code { font: 950 26px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.04em; }
.form-stack { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 12px; font-weight: 900; color: #4f4a44; }
.text-input, .select-input, .number-input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; background: white; }
.range-row { display: grid; grid-template-columns: 42px 1fr 54px; gap: 10px; align-items: center; }
.range-row strong { font-size: 12px; }
.range-row input[type="range"] { width: 100%; accent-color: var(--blue); }
.range-row output { min-height: 36px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; font: 800 11px ui-monospace, monospace; }
.palette-output { display: grid; grid-template-columns: repeat(5,1fr); min-height: 230px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.palette-output button { border: 0; padding: 14px 10px; cursor: pointer; display: flex; align-items: end; justify-content: center; font: 850 11px ui-monospace, monospace; }
.value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.value-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #faf9f6; }
.value-card small { display: block; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.value-card code { display: block; margin-top: 5px; font-size: 12px; word-break: break-word; }
.sticky-column { display: grid; gap: 16px; align-content: start; position: sticky; top: 112px; }
.status-message { min-height: 22px; font-size: 12px; color: #166534; font-weight: 800; }
.variation-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.variation-swatch { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.contrast-demo { border-radius: 18px; padding: 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.contrast-ratio { font-size: 42px; font-weight: 950; letter-spacing: -.055em; }
.badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.badge { border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 950; }
.badge-pass { background: #dcfce7; color: #166534; }
.badge-fail { background: #fee2e2; color: #991b1b; }
.gradient-preview { height: 260px; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); }
.gradient-colors { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.gradient-color-input { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 8px; }
.gradient-color-input input[type="color"] { width: 38px; height: 38px; border: 0; padding: 0; background: transparent; }
.code-block { background: #101828; color: #f8fafc; border-radius: 14px; padding: 14px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; }

.library-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 26px 0; }
.library-search { flex: 1; min-width: 240px; }
.category-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.category-chip { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 12px; font-weight: 900; cursor: pointer; }
.category-chip.active { background: var(--ink); color: white; }
.library-note { border: 1px solid #f0d987; background: #fffbeb; border-radius: 18px; padding: 15px 18px; font-size: 13px; color: #6b5520; }

.content-page { padding: 58px 0 86px; }
.content-narrow { width: min(780px, 100%); }
.content-page h1 { font-size: clamp(46px,6vw,76px); line-height: .95; letter-spacing: -.065em; margin: 12px 0 20px; }
.content-page h2 { font-size: 30px; letter-spacing: -.04em; margin-top: 42px; }
.content-page p, .content-page li { color: #4b4741; }
.content-page ul { padding-left: 22px; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.contact-card { border: 1px solid var(--line); background: white; border-radius: 22px; padding: 24px; }
.contact-form { display: grid; gap: 14px; }
.contact-form textarea { min-height: 160px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; resize: vertical; }


.playground-donation-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.playground-tool-column { min-width: 0; }
.playground-donation-sidebar { top: 108px; }

.donation-widget { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 24px; background: #fff6bf; padding: 22px; box-shadow: 6px 6px 0 var(--ink); }
.donation-widget::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,77,141,.18); right: -46px; bottom: -56px; }
.donation-sticker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--pink); color: white; font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-2deg); }
.donation-swatches { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); height: 48px; margin: 17px 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 13px; }
.donation-swatches i:nth-child(1) { background: var(--blue); }
.donation-swatches i:nth-child(2) { background: var(--mint); }
.donation-swatches i:nth-child(3) { background: var(--yellow); }
.donation-swatches i:nth-child(4) { background: var(--pink); }
.donation-widget h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 23px; line-height: 1.05; letter-spacing: -.045em; }
.donation-widget p { position: relative; z-index: 1; margin: 0 0 17px; color: #514b3f; font-size: 13px; }
.donation-widget small { position: relative; z-index: 1; display: block; margin-top: 13px; color: #6d6454; font-size: 10px; font-weight: 800; }
.donation-button { position: relative; z-index: 1; width: 100%; min-height: 44px; padding-inline: 14px; font-size: 12px; }
.donation-widget-compact .donation-swatches { height: 34px; }

.contact-email-card { margin: 30px 0; border: 2px solid var(--ink); border-radius: 24px; background: #dbeafe; padding: 24px; box-shadow: 6px 6px 0 var(--ink); }
.contact-email-card small { display: block; margin-bottom: 7px; color: #475569; font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.contact-email-card > a { display: inline-block; font-size: clamp(24px,4vw,38px); line-height: 1.05; font-weight: 950; letter-spacing: -.045em; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-email-card p { margin: 16px 0 0; font-size: 13px; }
.contact-topic-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 30px 0; }
.contact-topic-card { border: 1px solid var(--line); border-radius: 20px; background: white; padding: 20px; }
.contact-topic-card > span { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: var(--mint); box-shadow: 3px 3px 0 var(--ink); }
.contact-topic-card:nth-child(2n) > span { background: var(--yellow); }
.contact-topic-card h2 { margin: 20px 0 7px; font-size: 20px; }
.contact-topic-card p { margin: 0; font-size: 13px; }

.site-footer { background: var(--ink); color: white; padding: 58px 0 22px; }
.site-footer .brand { color: white; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 34px; }
.footer-grid h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.footer-grid a { display: block; color: rgba(255,255,255,.68); margin: 9px 0; font-size: 14px; }
.footer-grid a:hover { color: white; }
.footer-brand p { max-width: 420px; font-weight: 800; margin-top: 18px; }
.footer-brand small { color: rgba(255,255,255,.58); display: block; max-width: 420px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.13); margin-top: 38px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.5); font-size: 12px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: .2s ease; background: var(--ink); color: white; padding: 11px 16px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.empty-state { grid-column: 1 / -1; border: 1px dashed #b9b1a4; border-radius: 22px; padding: 44px; text-align: center; color: var(--muted); }

@media (max-width: 980px) {
  .main-nav { position: absolute; top: 72px; left: 16px; right: 16px; display: none; max-height: calc(100vh - 104px); overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; background: white; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--ink); padding: 12px; }
  .main-nav.is-open { display: flex; }
  .nav-top-link, .nav-dropdown > summary { width: 100%; min-height: 46px; justify-content: space-between; padding: 0 12px; border-radius: 12px; color: var(--ink); }
  .nav-dropdown { width: 100%; }
  .nav-mega, .nav-mega-left, .nav-mega-center, .nav-mega-right { position: static; width: 100%; transform: none; grid-template-columns: 1fr; gap: 8px; margin: 4px 0 8px; padding: 8px; border-width: 1px; border-radius: 14px; box-shadow: none; background: var(--paper-2); }
  .nav-mega-group { padding: 8px; background: white; }
  .nav-mega-links a { padding: 9px; }
  .nav-mega-links strong { font-size: 13px; }
  .nav-mega-links small { font-size: 11px; }
  .menu-button { display: inline-flex; }
  .desktop-cta { display: none; }
  .hero-grid, .playground-shell, .contact-layout, .playground-donation-layout { grid-template-columns: 1fr; }
  .hero-art { min-height: 480px; }
  .feature-card { grid-column: span 6; }
  .workflow { grid-template-columns: repeat(2,1fr); }
  .palette-grid { grid-template-columns: repeat(2,1fr); }
  .sticky-column { position: static; }
  .playground-donation-sidebar { order: 2; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 22px, 1180px); }
  .announcement { font-size: 10px; }
  .nav-row { min-height: 64px; }
  .main-nav { top: 64px; }
  .hero { padding: 56px 0 48px; }
  .hero h1 { font-size: 56px; }
  .hero-copy { font-size: 16px; }
  .hero-art { min-height: 350px; }
  .palette-deck { inset: 34px 5px 28px 10px; box-shadow: 8px 8px 0 var(--ink); }
  .deck-meta { padding: 16px; }
  .floating-chip { padding: 8px 11px; font-size: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .floating-chip.one { left: 8px; top: 15px; }
  .floating-chip.two { right: 6px; top: 72px; }
  .floating-chip.three { left: 5px; bottom: 4px; }
  .mini-card { width: 150px; right: 0; }
  .section { padding: 58px 0; }
  .section-head { display: block; }
  .section-head p { margin-top: 14px; }
  .feature-card { grid-column: span 12; min-height: 230px; }
  .palette-grid { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .page-hero { padding-top: 42px; }
  .page-hero h1 { font-size: 54px; }
  .picker-grid { grid-template-columns: 1fr; }
  .color-preview { min-height: 220px; }
  .form-row, .value-grid { grid-template-columns: 1fr; }
  .palette-output { grid-template-columns: 1fr; }
  .palette-output button { min-height: 72px; align-items: center; justify-content: space-between; padding-inline: 16px; }
  .variation-grid { grid-template-columns: repeat(5,1fr); }
  .gradient-colors { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v0.2 interactive tools */
.tool-section { padding-top: 34px; }
.tool-page-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.playground-page { padding: 28px 0 70px; }
.playground-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 16px; margin-bottom: 14px; }
.playground-tabs button, .segmented-control button { flex: 0 0 auto; border: 1px solid var(--line); background: white; border-radius: 999px; min-height: 42px; padding: 0 15px; font-weight: 900; font-size: 12px; cursor: pointer; }
.playground-tabs button.active, .segmented-control button.active { background: var(--ink); color: white; border-color: var(--ink); }
.segmented-control { display: flex; gap: 8px; overflow-x: auto; }
.toolbar-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.align-end { align-content: end; align-items: end; }
.helper-text { margin: 0; color: var(--muted); font-size: 13px; }
.subhead-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.subhead-row h3, .subhead-row p { margin: 0; }
.subhead-row p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.range-row { grid-template-columns: 72px minmax(80px,1fr) 78px; }
.range-row input[type="number"] { width: 78px; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font: 800 12px ui-monospace,monospace; }
.large-color-preview span { font: 700 11px ui-monospace,monospace; opacity: .82; }
.channel-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.channel-tabs details { border: 1px solid var(--line); border-radius: 16px; background: #faf9f6; overflow: hidden; }
.channel-tabs summary { cursor: pointer; list-style: none; padding: 13px 15px; font-size: 13px; font-weight: 900; }
.channel-tabs summary::-webkit-details-marker { display:none; }
.channel-panel { padding: 0 14px 14px; display: grid; gap: 10px; }
.editable-palette { display: grid; grid-template-columns: repeat(var(--palette-count,5),minmax(0,1fr)); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); min-height: 280px; }
.editable-palette article { position: relative; min-width: 0; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.editable-palette input[type="color"] { opacity: 0; position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.palette-control-row { position: relative; z-index: 2; display:flex; justify-content:space-between; pointer-events:none; }
.palette-control-row > * { pointer-events:auto; }
.mini-icon { width:32px;height:32px;border:1px solid rgba(255,255,255,.5);background:rgba(17,17,17,.28);color:white;border-radius:9px;display:inline-grid;place-items:center;cursor:pointer; }
.mini-icon:disabled { opacity:.35; cursor:not-allowed; }
.palette-code-button { position:relative; z-index:2; border:0; background:rgba(17,17,17,.34); color:white; border-radius:999px; padding:7px 9px; font:800 10px ui-monospace,monospace; cursor:pointer; }
.conversion-grid { grid-template-columns: repeat(5,1fr); }
.export-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.export-grid article { min-width:0;border:1px solid var(--line);border-radius:18px;padding:15px;background:#faf9f6; }
.export-grid h3 { margin-top:0; }
.large-code { max-height: 380px; }

.gradient-context { min-height: 330px; border:3px solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 var(--ink); display:grid; place-items:center; overflow:hidden; padding:32px; }
.gradient-context-button, .gradient-context-card { background:#f8fafc !important; }
.gradient-context-text { background:#fff !important; }
.gradient-demo-button { border:0;border-radius:999px;padding:16px 24px;font-weight:900;background:inherit;color:white;box-shadow:0 12px 30px rgba(0,0,0,.2); }
.gradient-demo-card { width:min(420px,100%);padding:28px;border-radius:22px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.18); }
.gradient-demo-card h3 { font-size:32px;line-height:1;margin:8px 0; }
.gradient-demo-text { font-size:clamp(48px,8vw,96px);line-height:.9;font-weight:950;letter-spacing:-.07em;background-clip:text;-webkit-background-clip:text;color:transparent; }
.gradient-stop-track { position:relative;height:62px;border:2px solid var(--ink);border-radius:15px;margin:20px 12px 8px; }
.gradient-stop-handle { position:absolute;top:50%;width:30px;height:42px;border:3px solid white;border-radius:9px;box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%);cursor:ew-resize; }
.gradient-stop-list { display:grid;gap:10px; }
.gradient-stop-row { display:grid;grid-template-columns:46px minmax(120px,1fr) 150px 150px 44px;gap:8px;align-items:end;border:1px solid var(--line);border-radius:15px;padding:10px;background:#faf9f6; }
.gradient-stop-row input[type="color"] { width:42px;height:42px;border:0;background:transparent; }
.gradient-stop-row label { font-size:10px;font-weight:900;color:var(--muted); }
.gradient-stop-row label input { width:100%;min-height:36px;margin-top:4px;border:1px solid var(--line);border-radius:9px;padding:0 8px; }
.compact-palette { grid-template-columns:1fr;min-height:0; }

.tailwind-scale { display:grid;grid-template-columns:repeat(11,minmax(70px,1fr));border-radius:20px;overflow:auto;border:1px solid var(--line); }
.tailwind-shade { min-height:310px;padding:12px;display:flex;flex-direction:column;justify-content:space-between; }
.tailwind-shade div { display:grid;gap:2px; }
.tailwind-shade button { color:inherit;border:0;background:transparent;text-align:left;padding:0;font:800 10px ui-monospace,monospace;cursor:pointer; }
.tailwind-shade input[type="color"] { width:38px;height:38px;border:2px solid currentColor;border-radius:10px;padding:0;background:transparent; }
.ui-preview-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.ui-preview-card { border:1px solid var(--line);border-radius:20px;padding:22px;background:white; }
.ui-preview-card h3 { font-size:27px;line-height:1.05;margin:12px 0; }
.ui-preview-card p { color:var(--muted); }
.ui-preview-card > button { border:0;border-radius:12px;padding:12px 16px;font-weight:900; }
.status-pill { display:inline-block;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900; }
.dark-preview { color:white; }
.mini-bars { height:120px;display:flex;align-items:end;gap:12px;margin-top:28px; }
.mini-bars i { flex:1;border-radius:8px 8px 2px 2px; }

.contrast-input-grid { display:grid;grid-template-columns:1fr 50px 1fr;gap:12px;align-items:end; }
.color-input-combo { display:grid;grid-template-columns:50px 1fr;gap:8px; }
.color-input-combo input[type="color"] { width:50px;height:46px;border:1px solid var(--line);border-radius:11px;padding:3px;background:white; }
.swap-button { margin-bottom:2px; }
.contrast-stage { border:3px solid var(--ink);border-radius:24px;min-height:330px;padding:32px;display:grid;align-content:center;gap:18px;box-shadow:8px 8px 0 var(--ink); }
.contrast-stage p { margin:0; }
.contrast-stage > button { justify-self:start;border:2px solid;border-radius:11px;padding:11px 16px;font-weight:900; }
.contrast-score { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; }
.contrast-score strong { font-size:58px;letter-spacing:-.06em;line-height:1; }
.contrast-badges { display:flex;gap:7px;flex-wrap:wrap; }
.suggestion-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.suggestion-card { display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:12px; }
.suggestion-swatch { width:76px;height:76px;border-radius:14px;display:grid;place-items:center;font-weight:950;font-size:24px; }
.suggestion-card small,.suggestion-card strong,.suggestion-card span { display:block; }
.suggestion-card small,.suggestion-card span { color:var(--muted);font-size:11px; }

.privacy-banner { display:flex;gap:8px;flex-wrap:wrap;border:1px solid #86efac;background:#f0fdf4;color:#14532d;border-radius:16px;padding:14px 16px;font-size:13px; }
.image-dropzone { width:100%;min-height:300px;border:2px dashed #9f978b;border-radius:22px;background:#faf9f6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:var(--ink); }
.image-dropzone > span:not(.button),.image-dropzone small { color:var(--muted); }
.image-workspace { display:none;position:relative;border:1px solid var(--line);border-radius:20px;background:#f2f2f2;overflow:hidden; }
.image-workspace.visible { display:block; }
.image-canvas-wrap { position:relative;display:flex;justify-content:center; }
.image-canvas-wrap canvas { display:block;max-width:100%;max-height:620px;cursor:crosshair; }
.image-picker-hint { position:absolute;left:12px;bottom:12px;background:rgba(17,17,17,.82);color:white;border-radius:999px;padding:7px 10px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800; }
.image-reset { position:absolute;right:12px;top:12px; }
.check-row { display:flex;gap:16px;align-items:center;flex-wrap:wrap; }
.check-row label,.toggle-field { display:flex;gap:7px;align-items:center;font-size:12px;font-weight:850; }
.extracted-color-list { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.extracted-color-list article { min-height:100px;border-radius:16px;padding:10px;display:flex;justify-content:space-between;align-items:end; }
.extracted-color-list article button { border:0;background:transparent;color:inherit;text-align:left;cursor:pointer; }
.extracted-color-list strong,.extracted-color-list small { display:block; }

.comparison-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:15px; }
.vision-preview { padding:0;overflow:hidden; }
.vision-preview nav { display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line); }
.vision-preview nav span { width:24px;height:24px;border-radius:8px; }
.vision-preview nav button { margin-left:auto;border:0;border-radius:9px;padding:8px 12px;font-weight:900; }
.vision-content { display:grid;grid-template-columns:150px 1fr;min-height:300px; }
.vision-content aside { padding:20px; }
.vision-content main { padding:20px; }
.vision-cards { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.vision-cards div { border:2px solid;border-radius:14px;padding:14px; }
.vision-cards span { display:block;width:34px;height:34px;border-radius:10px;margin-bottom:8px; }
.vision-cards p { font-size:12px;margin-bottom:0; }

.semantic-token-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }
.semantic-token { border:1px solid var(--line);border-radius:14px;background:white;padding:9px;text-align:left;cursor:pointer; }
.semantic-token > span { display:block;height:42px;border-radius:9px;margin-bottom:7px; }
.semantic-token small,.semantic-token code { display:block; }
.semantic-token small { text-transform:capitalize;font-weight:900; }
.semantic-token code { font-size:10px;color:var(--muted); }
.semantic-preview { border:2px solid var(--ink);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:190px 1fr;min-height:430px; }
.semantic-preview aside { padding:22px;border-right:1px solid;display:flex;flex-direction:column;gap:16px; }
.semantic-preview main { padding:22px; }
.semantic-preview header { display:flex;justify-content:space-between;align-items:center;gap:15px; }
.semantic-preview header h3 { margin:4px 0;font-size:30px; }
.semantic-preview header button,.semantic-preview article button { border:0;border-radius:10px;padding:10px 13px;font-weight:900; }
.semantic-cards { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px; }
.semantic-cards article { border:1px solid;border-radius:16px;padding:18px; }
.semantic-cards input { width:100%;min-height:42px;border:1px solid;border-radius:9px;padding:0 10px;margin:7px 0 14px; }
.semantic-cards article div { display:flex;gap:8px; }

.print-sheet { width:min(100%,850px);margin:auto;background:white;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.1);padding:38px; }
.print-sheet header { display:flex;justify-content:space-between;gap:24px;border-bottom:3px solid var(--ink);padding-bottom:22px;margin-bottom:22px; }
.print-sheet header h2 { font-size:38px;line-height:1;margin:5px 0; }
.print-sheet header p,.print-sheet header small,.print-sheet time { color:var(--muted); }
.print-color-table { display:grid;gap:13px; }
.print-color-table > section { display:grid;grid-template-columns:180px 1fr;gap:20px;border:1px solid var(--line);padding:12px; }
.print-swatch { min-height:130px;border-radius:10px;display:flex;align-items:end;padding:12px;font:900 13px ui-monospace,monospace; }
.print-color-table h3 { margin:3px 0 8px; }
.print-color-table dl { display:grid;grid-template-columns:repeat(2,1fr);gap:4px 20px;margin:0; }
.print-color-table dl div { display:grid;grid-template-columns:70px 1fr;gap:6px; }
.print-color-table dt { color:var(--muted);font-size:10px;font-weight:900; }
.print-color-table dd { margin:0;font:700 11px ui-monospace,monospace;word-break:break-word; }
.print-sheet footer { margin-top:22px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:11px; }
.print-settings-row { grid-template-columns:minmax(230px,1.45fr) minmax(110px,.55fr) minmax(170px,.8fr) minmax(150px,.7fr); align-items:end; }
.print-change-palette-field .button { width:100%; min-height:44px; justify-content:center; white-space:nowrap; }
.footer-grid-wide { grid-template-columns:2fr repeat(4,1fr); }

@media (max-width: 1100px) {
  .tool-page-layout { grid-template-columns:1fr; }
  .tool-page-layout .sticky-column { position:static; }
  .channel-tabs { grid-template-columns:1fr; }
  .conversion-grid { grid-template-columns:repeat(3,1fr); }
  .semantic-token-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid-wide { grid-template-columns:1.6fr repeat(2,1fr); }
  .print-settings-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .tool-panel-head { align-items:flex-start; }
  .editable-palette { grid-template-columns:1fr; min-height:0; }
  .editable-palette article { min-height:110px; }
  .conversion-grid,.export-grid,.ui-preview-grid,.suggestion-grid,.comparison-grid,.semantic-cards { grid-template-columns:1fr; }
  .gradient-stop-row { grid-template-columns:42px 1fr 1fr; }
  .gradient-stop-row label:nth-of-type(2),.gradient-stop-row .icon-button { grid-column:auto; }
  .tailwind-scale { grid-template-columns:1fr; overflow:visible; }
  .tailwind-shade { min-height:90px;flex-direction:row;align-items:center; }
  .contrast-input-grid { grid-template-columns:1fr; }
  .swap-button { justify-self:center;transform:rotate(90deg); }
  .extracted-color-list,.semantic-token-grid { grid-template-columns:repeat(2,1fr); }
  .semantic-preview { grid-template-columns:1fr; }
  .semantic-preview aside { border-right:0;border-bottom:1px solid;flex-direction:row;overflow:auto; }
  .vision-content { grid-template-columns:1fr; }
  .vision-content aside { display:none; }
  .vision-cards { grid-template-columns:1fr; }
  .print-sheet { padding:20px; }
  .print-sheet header { display:block; }
  .print-color-table > section { grid-template-columns:1fr; }
  .print-color-table dl { grid-template-columns:1fr; }
  .footer-grid-wide { grid-template-columns:1fr; }
  .contact-topic-grid { grid-template-columns:1fr; }
  .print-settings-row { grid-template-columns:1fr; }
}

@media print {
  .announcement,.site-header,.site-footer,.page-hero,.playground-tabs,.tool-panel-head,.toolbar-wrap,.ad-slot,.donation-widget,.toast { display:none !important; }
  body { background:white; }
  .shell,.playground-page,.tool-panel,.tool-panel-body { width:100%;max-width:none;margin:0;padding:0;border:0;box-shadow:none; }
  .print-sheet { width:100%;max-width:none;border:0;box-shadow:none;padding:10mm; }
  .print-color-table > section { break-inside:avoid; }
}

/* Color system intelligence */
.intelligence-stack { gap: 26px; }
.readiness-hero { display: grid; grid-template-columns: 170px minmax(0,1fr); align-items: center; gap: 28px; padding: 24px; border: 2px solid var(--ink); border-radius: 24px; background: linear-gradient(135deg,#fff6bf,#fff); box-shadow: 6px 6px 0 var(--ink); }
.readiness-hero h2 { margin: 9px 0 8px; font-size: clamp(32px,5vw,54px); line-height: .95; letter-spacing: -.055em; }
.readiness-hero p { margin: 0; color: #514c44; }
.readiness-ring { --score: 0; width: 146px; height: 146px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blue) calc(var(--score) * 1%), #e7e1d6 0); position: relative; }
.readiness-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: white; border: 2px solid var(--ink); }
.readiness-ring > div { position: relative; z-index: 1; display: flex; align-items: baseline; }
.readiness-ring strong { font-size: 48px; letter-spacing: -.07em; line-height: 1; }
.readiness-ring span { font-size: 14px; color: var(--muted); font-weight: 900; }
.score-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.score-card { border: 1px solid var(--line); border-radius: 16px; background: #faf9f6; padding: 14px; }
.score-card > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.score-card span { color: var(--muted); font-weight: 900; }
.score-card progress { width: 100%; height: 9px; margin-top: 11px; accent-color: var(--blue); }
.tool-subsection { border-top: 1px solid var(--line); padding-top: 24px; }
.tool-subsection h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 24px; letter-spacing: -.04em; }
.issue-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.issue-card { border: 1px solid var(--line); border-radius: 18px; padding: 17px; background: white; }
.issue-card > span { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .09em; }
.issue-card h4 { margin: 12px 0 7px; }
.issue-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.issue-card > strong { font-size: 12px; }
.issue-critical { border-color: #f7a6a6; background: #fff7f7; }
.issue-critical > span { background: #fee2e2; color: #991b1b; }
.issue-warning { border-color: #f0d987; background: #fffdf1; }
.issue-warning > span { background: #fef3c7; color: #92400e; }
.issue-info > span { background: #dbeafe; color: #1d4ed8; }
.fix-list { display: grid; gap: 10px; }
.fix-list > article { display: grid; grid-template-columns: 30px 106px minmax(0,1fr) auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 17px; padding: 14px; background: white; }
.fix-list > article.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.fix-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.fix-checkbox span { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 7px; background: white; }
.fix-checkbox input:checked + span { background: var(--blue); }
.fix-checkbox input:checked + span::after { content: "✓"; color: white; font-size: 13px; font-weight: 950; }
.fix-swatches { display: grid; grid-template-columns: 36px 20px 36px; align-items: center; justify-content: center; gap: 4px; }
.fix-swatches i { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); }
.fix-swatches span { text-align: center; font-weight: 950; }
.fix-list h4 { margin: 2px 0 3px; }
.fix-list p { margin: 0; color: var(--muted); font-size: 12px; }
.fix-list small { text-transform: uppercase; color: var(--muted); font-weight: 950; letter-spacing: .08em; }
.fix-list code { font-size: 11px; }
.success-panel { display: flex; gap: 12px; align-items: start; border: 1px solid #86efac; background: #f0fdf4; border-radius: 17px; padding: 17px; color: #166534; }
.success-panel p { margin: 3px 0 0; }
.dna-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dna-grid article { min-height: 100px; border-radius: 18px; padding: 16px; border: 1px solid var(--line); background: var(--paper-2); display: flex; flex-direction: column; justify-content: space-between; }
.dna-grid small { color: var(--muted); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.dna-grid strong { font-size: 18px; }
.dna-metrics { display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.dna-metrics > div { padding: 13px; border-right: 1px solid var(--line); background: white; }
.dna-metrics > div:last-child { border-right: 0; }
.dna-metrics span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 900; }
.dna-metrics strong { font-size: 17px; }
.matrix-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.matrix-filters button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 900; text-transform: capitalize; cursor: pointer; }
.matrix-filters button.active { background: var(--ink); color: white; border-color: var(--ink); }
.matrix-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 18px; }
.matrix-table { width: 100%; border-collapse: collapse; min-width: 930px; font-size: 12px; }
.matrix-table th, .matrix-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.matrix-table th { position: sticky; top: 0; background: #f8f6f1; z-index: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.pair-preview { width: 120px; min-height: 62px; border-radius: 12px; padding: 9px; display: flex; align-items: end; justify-content: space-between; gap: 7px; border: 1px solid rgba(0,0,0,.12); }
.pair-preview span { font-size: 25px; font-weight: 950; }
.pair-preview code { font-size: 8px; text-align: right; }
.pass-icon { color: #16a34a; }
.fail-icon { color: #dc2626; }

/* Role mapper and design-system export */
.role-workspace { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 16px; align-items: start; }
.palette-source-tray { border: 1px solid var(--line); border-radius: 19px; padding: 16px; background: var(--paper-2); position: sticky; top: 118px; }
.palette-source-tray h3 { margin: 0 0 4px; }
.palette-source-tray p { color: var(--muted); font-size: 12px; }
.palette-source-tray > div { display: grid; gap: 8px; }
.palette-source-tray button { min-height: 52px; border: 1px solid rgba(0,0,0,.15); border-radius: 13px; cursor: grab; padding: 8px 11px; text-align: left; font: 850 11px ui-monospace,monospace; }
.role-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.role-grid article { display: grid; grid-template-columns: 36px minmax(0,1fr) 140px; gap: 10px; align-items: center; border: 1px dashed #b9b1a4; border-radius: 15px; padding: 10px; background: white; }
.role-grid article:hover { border-style: solid; border-color: var(--blue); }
.role-color-dot { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); background-size: 10px 10px; background-position: 0 0,0 5px,5px -5px,-5px 0; }
.role-grid strong, .role-grid small { display: block; }
.role-grid small { color: var(--muted); font: 10px ui-monospace,monospace; }
.role-grid select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; background: white; font-size: 11px; }
.context-preview { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); }
.context-preview aside { border-right: 1px solid; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.context-preview aside strong { margin-bottom: 15px; }
.context-preview main { padding: 25px; }
.context-preview main header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.context-preview h3 { margin: 2px 0; font-size: 28px; }
.context-preview button { border: 0; border-radius: 11px; min-height: 42px; padding: 0 14px; font-weight: 850; }
.context-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.context-cards article { border: 1px solid; border-radius: 17px; padding: 18px; }
.context-cards article > span { display: block; width: 46px; height: 8px; border-radius: 999px; }
.context-cards input { width: 100%; min-height: 42px; border: 1px solid; border-radius: 10px; padding: 0 10px; display: block; margin: 7px 0 13px; }

/* Print lab */
.compact-field { min-width: 200px; }
.print-risk-banner { display: flex; justify-content: space-between; gap: 18px; border-radius: 17px; padding: 15px 17px; }
.risk-low { background: #ecfdf5; color: #166534; }
.risk-moderate { background: #fffbeb; color: #92400e; }
.risk-high { background: #fef2f2; color: #991b1b; }
.print-comparison-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.print-comparison-grid > article { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; }
.print-comparison-grid article > header { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.print-preview-row { display: grid; grid-template-columns: repeat(3,1fr); padding: 10px; gap: 7px; }
.print-preview-row > div { min-height: 110px; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(0,0,0,.1); }
.print-preview-row small { font-weight: 900; text-transform: uppercase; font-size: 9px; }
.print-preview-row strong { font: 800 10px ui-monospace,monospace; }
.print-comparison-grid dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 12px 14px; gap: 10px; }
.print-comparison-grid dt { font-size: 9px; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.print-comparison-grid dd { margin: 0; font-weight: 850; font-size: 12px; }
.print-comparison-grid ul { margin: 0; padding: 0 30px 15px; color: var(--muted); font-size: 11px; }

/* Palette compare */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.compare-card { border: 1px solid var(--line); border-radius: 20px; padding: 17px; background: white; }
.compare-card header { display: flex; justify-content: space-between; align-items: center; }
.compare-card h3 { margin: 0; }
.compare-card header > strong { font-size: 24px; }
.compare-swatches { display: grid; grid-template-columns: repeat(auto-fit,minmax(40px,1fr)); height: 115px; overflow: hidden; border-radius: 14px; margin: 15px 0; }
.compare-card dl { display: grid; gap: 5px; margin: 0; }
.compare-card dl div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.compare-card dt { text-transform: capitalize; color: var(--muted); }
.compare-card dd { margin: 0; font-weight: 900; }
.compare-verdict { border: 2px solid var(--ink); border-radius: 20px; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); padding: 20px; }
.compare-verdict span { text-transform: uppercase; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.compare-verdict h3 { margin: 4px 0 3px; font-size: 32px; }
.compare-verdict p { margin: 0; }
.merge-panel { border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: var(--paper-2); }
.merge-panel h3 { margin: 0; }
.merged-swatches { display: grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); overflow: hidden; border-radius: 14px; margin: 16px 0; }
.merged-swatches span { min-height: 90px; display: grid; place-items: end center; padding: 10px; font: 800 10px ui-monospace,monospace; }

/* Sharing and local projects */
.share-project-grid { display: grid; grid-template-columns: 1fr 350px; gap: 16px; align-items: start; }
.save-project-card, .qr-transfer-card { border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: white; }
.save-project-card h3, .qr-transfer-card h3 { margin: 0 0 14px; }
.inline-folder-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; }
.local-storage-note { color: var(--muted); font-size: 11px; }
.qr-transfer-card { text-align: center; background: #fffdf1; }
.qr-heading { display: flex; text-align: left; gap: 10px; }
.qr-heading h3 { margin: 0; }
.qr-heading p { margin: 2px 0 12px; color: var(--muted); font-size: 12px; }
.qr-transfer-card img { width: min(280px,100%); border: 2px solid var(--ink); border-radius: 16px; background: white; padding: 8px; }
.qr-placeholder { min-height: 260px; display: grid; place-items: center; }
.qr-transfer-card details { margin: 12px 0; text-align: left; }
.share-url-code { display: block; max-height: 90px; overflow: auto; word-break: break-all; background: #111827; color: white; border-radius: 10px; padding: 10px; font-size: 9px; }
.privacy-proof { border: 2px solid #14532d; border-radius: 20px; background: #f0fdf4; padding: 17px; color: #14532d; }
.privacy-proof > div { display: flex; gap: 10px; align-items: center; }
.privacy-proof strong, .privacy-proof span { display: block; }
.privacy-proof span { font-size: 11px; opacity: .8; }
.privacy-proof ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.privacy-proof li { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 800; }
.projects-page-shell { padding: 30px 0 80px; }
.projects-app { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; }
.project-folders { position: sticky; top: 110px; border: 1px solid var(--line); border-radius: 20px; padding: 15px; background: white; }
.project-folders h2 { margin: 0 0 12px; }
.project-folders > button, .project-folders > div > button:first-child { width: 100%; display: flex; justify-content: space-between; border: 0; border-radius: 11px; background: transparent; min-height: 40px; padding: 0 10px; font-weight: 800; cursor: pointer; }
.project-folders button.active { background: var(--ink); color: white; }
.project-folders > div { display: grid; grid-template-columns: 1fr 34px; align-items: center; }
.folder-delete { border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.new-folder { margin-top: 12px; grid-template-columns: 1fr 40px !important; }
.new-folder input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; }
.new-folder button { border: 1px solid var(--line); border-radius: 10px; background: var(--yellow); cursor: pointer; }
.project-main > .subhead-row h1 { margin: 0; font-size: 44px; letter-spacing: -.055em; }
.project-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 22px 0; }
.project-card-grid > article { border: 1px solid var(--line); border-radius: 20px; background: white; overflow: hidden; }
.project-palette-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(30px,1fr)); height: 105px; }
.project-card-body { padding: 16px; }
.project-card-body > span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 950; color: var(--muted); }
.project-card-body h3 { margin: 4px 0; }
.project-card-body p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.project-role-preview { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.project-role-preview span { padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; }
.empty-projects { min-height: 360px; border: 1px dashed #b9b1a4; border-radius: 22px; display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; }
.empty-projects h2 { margin: 12px 0 4px; }
.empty-projects p { color: var(--muted); max-width: 460px; }
.danger-text-button { border: 0; background: none; color: #b91c1c; text-decoration: underline; cursor: pointer; margin-top: 20px; }

/* Daily challenges */
.challenge-page-shell { padding: 30px 0 82px; }
.challenge-app { display: grid; gap: 20px; }
.challenge-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.challenge-header h1 { margin: 12px 0 5px; font-size: 48px; line-height: 1; letter-spacing: -.055em; }
.challenge-header p { margin: 0; color: var(--muted); }
.challenge-mode { display: flex; gap: 6px; border: 1px solid var(--line); background: white; border-radius: 999px; padding: 5px; }
.challenge-mode button { border: 0; background: transparent; border-radius: 999px; padding: 9px 14px; font-weight: 900; cursor: pointer; }
.challenge-mode button.active { background: var(--ink); color: white; }
.challenge-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.challenge-stats article { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: white; border-radius: 16px; padding: 14px; }
.challenge-stats strong, .challenge-stats span { display: block; }
.challenge-stats strong { font-size: 22px; }
.challenge-stats span { color: var(--muted); font-size: 11px; }
.percent-icon { font-weight: 950; font-size: 20px; }
.challenge-card { border: 2px solid var(--ink); background: white; border-radius: 25px; box-shadow: 7px 7px 0 var(--ink); padding: 25px; }
.challenge-card h2 { margin: 0; font-size: 34px; letter-spacing: -.045em; }
.challenge-card p { color: var(--muted); }
.match-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.match-preview > div { min-height: 220px; border: 2px solid var(--ink); border-radius: 18px; padding: 15px; display: flex; align-items: end; justify-content: space-between; }
.match-preview span { background: rgba(255,255,255,.85); color: #111; border-radius: 999px; padding: 5px 8px; font-weight: 900; }
.live-match-score { border-radius: 14px; background: var(--paper-2); padding: 13px; margin: 12px 0; }
.live-match-score strong { font-size: 23px; float: right; }
.text-challenge-preview { min-height: 220px; border-radius: 20px; padding: 30px; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.45); margin: 18px 0; }
.text-challenge-preview h3 { font-size: 34px; margin: 0; }
.text-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.text-options button { min-height: 110px; border: 2px solid var(--ink); border-radius: 16px; display: flex; align-items: end; justify-content: space-between; padding: 13px; cursor: pointer; }
.text-options span { font-size: 29px; font-weight: 950; }
.contrast-challenge-canvas { min-height: 250px; display: grid; place-items: center; align-content: center; background: white; border: 1px solid var(--line); border-radius: 20px; margin: 18px 0; gap: 12px; }
.contrast-challenge-canvas button { border: 0; border-radius: 12px; min-height: 52px; padding: 0 20px; font-weight: 900; }
.contrast-challenge-canvas strong { font-size: 28px; }
.challenge-result { display: flex; align-items: center; gap: 9px; margin-top: 16px; border-radius: 14px; background: #dcfce7; color: #166534; padding: 13px; }
.challenge-complete-note { font-weight: 800; color: #166534 !important; }

.palette-card-actions-wrap { flex-wrap: wrap; }
.palette-card-actions-wrap .palette-download-button { flex: 0 1 auto; }

@media (max-width: 980px) {
  .score-grid, .issue-grid { grid-template-columns: repeat(2,1fr); }
  .dna-metrics { grid-template-columns: repeat(3,1fr); }
  .dna-metrics > div:nth-child(3n) { border-right: 0; }
  .role-workspace, .projects-app { grid-template-columns: 1fr; }
  .palette-source-tray, .project-folders { position: static; }
  .share-project-grid { grid-template-columns: 1fr; }
  .project-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .project-folders h2 { width: 100%; }
  .project-folders > button, .project-folders > div { width: auto; }
  .new-folder { width: 240px !important; }
}

@media (max-width: 720px) {
  .readiness-hero { grid-template-columns: 1fr; text-align: center; }
  .readiness-ring { margin-inline: auto; }
  .score-grid, .issue-grid, .dna-grid, .compare-grid, .print-comparison-grid, .project-card-grid, .challenge-stats, .text-options { grid-template-columns: 1fr; }
  .fix-list > article { grid-template-columns: 28px 90px 1fr; }
  .fix-list > article > .button { grid-column: 2 / -1; }
  .dna-metrics { grid-template-columns: repeat(2,1fr); }
  .dna-metrics > div { border-bottom: 1px solid var(--line); }
  .role-grid { grid-template-columns: 1fr; }
  .role-grid article { grid-template-columns: 34px 1fr; }
  .role-grid select { grid-column: 1 / -1; }
  .context-preview { grid-template-columns: 1fr; }
  .context-preview aside { display: none; }
  .context-cards { grid-template-columns: 1fr; }
  .print-risk-banner, .challenge-header { flex-direction: column; align-items: stretch; }
  .privacy-proof ul { grid-template-columns: 1fr; }
  .match-preview { grid-template-columns: 1fr; }
  .match-preview > div { min-height: 160px; }
  .project-main > .subhead-row h1 { font-size: 36px; }
  .palette-card-actions-wrap .button { flex: 1 1 calc(50% - 8px); }
}
.workflow-five { grid-template-columns: repeat(5,1fr); }
@media (max-width: 1100px) { .workflow-five { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 680px) { .workflow-five { grid-template-columns: 1fr; } }
.project-move-field { margin: 16px 0 12px; }
.project-move-field label { font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }

/* Non-interactive controls shown inside visual previews. */
.preview-action,
.gradient-demo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 850;
  cursor: default;
  user-select: none;
}
.vision-preview nav .preview-action { margin-left: auto; border-radius: 9px; min-height: 0; padding: 8px 12px; font-weight: 900; }
.ui-preview-card > .preview-action { border-radius: 12px; padding: 12px 16px; font-weight: 900; }
.semantic-preview header .preview-action,
.semantic-preview article .preview-action { border-radius: 10px; padding: 10px 13px; font-weight: 900; }
.context-preview .preview-action { border-radius: 11px; min-height: 42px; padding: 0 14px; font-weight: 850; }
.contrast-challenge-canvas .preview-action { border-radius: 12px; min-height: 52px; padding: 0 20px; font-weight: 900; }

.library-sort { min-width: 180px; }
.library-result-count { align-self: end; padding-bottom: 13px; color: var(--muted); font-weight: 800; }
.palette-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.palette-tag-row span { padding: 5px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: capitalize; }
@media (max-width: 680px) { .library-sort { min-width: 0; width: 100%; } .library-result-count { align-self: start; padding-bottom: 0; } }
.donation-link-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--muted); font-weight: 800; text-align: center; }

/* v0.7 layout, interaction, and animation refinements */
.playground-donation-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
  gap: 16px;
}
.playground-tool-column,
.playground-tool-column > *,
.playground-tool-column .tool-panel,
.playground-tool-column .tool-panel-body,
.intelligence-stack,
.intelligence-stack > *,
.tool-subsection {
  min-width: 0;
  max-width: 100%;
}
.readiness-hero {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}
.readiness-hero h2 {
  font-size: clamp(28px, 3.25vw, 42px);
  line-height: 1;
}
.readiness-ring { width: 112px; height: 112px; }
.readiness-ring::after { inset: 11px; }
.readiness-ring strong { font-size: 39px; }
.readiness-ring span { font-size: 12px; }
.score-card { padding: 12px; }
.score-card > div { gap: 7px; font-size: 11px; }
.matrix-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.matrix-table { min-width: 760px; font-size: 11px; }
.matrix-table th,
.matrix-table td { padding: 8px 7px; }
.pair-preview { width: 104px; min-height: 56px; padding: 7px; }
.pair-preview span { font-size: 22px; }
.pair-preview code { font-size: 7px; }

.animated-hero-palette .deck-colors i,
.animated-hero-palette .mini-card-colors i {
  transition: background-color .65s ease, transform .65s ease;
}
.animated-hero-palette .deck-meta strong,
.animated-hero-palette .deck-code span,
.animated-hero-palette .mini-card strong {
  transition: color .3s ease, opacity .3s ease;
}
.hero-palette-dots {
  position: absolute;
  left: 24px;
  bottom: 13px;
  display: flex;
  gap: 6px;
}
.hero-palette-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d6d0c5;
  transition: width .25s ease, background .25s ease;
}
.hero-palette-dots span.active { width: 22px; background: var(--ink); }

.semantic-interaction-lab { display: grid; gap: 14px; }
.semantic-state-switcher { display: flex; flex-wrap: wrap; gap: 6px; }
.semantic-state-switcher button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  text-transform: capitalize;
  cursor: pointer;
}
.semantic-state-switcher button.active { background: var(--ink); color: white; border-color: var(--ink); }
.semantic-nav-link {
  border: 0;
  background: transparent;
  padding: 2px 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: color .16s ease, transform .16s ease;
}
.semantic-nav-link:hover { transform: translateX(3px); }
.semantic-nav-link.active { color: var(--nav-active); font-weight: 850; }
.semantic-live-action {
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease, opacity .16s ease;
}
.semantic-live-action:hover,
.semantic-live-action.is-hover { background: var(--ui-hover); transform: translateY(-2px); }
.semantic-live-action:active,
.semantic-live-action.is-active { background: var(--ui-active); transform: translateY(1px) scale(.985); }
.semantic-live-action:focus-visible,
.semantic-live-action.is-focus { box-shadow: 0 0 0 4px var(--ui-focus); outline: 2px solid var(--ink); outline-offset: 2px; }
.semantic-live-action[aria-disabled="true"],
.semantic-live-action.is-disabled { background: var(--ui-disabled); color: #64748b; cursor: not-allowed; opacity: .75; transform: none; box-shadow: none; }
.semantic-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.semantic-preview-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 11px 13px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 12px;
}
.semantic-preview-status span { text-align: right; }
.semantic-preview input {
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.semantic-preview input:focus,
.semantic-preview input.is-focus { border-color: var(--input-focus) !important; box-shadow: 0 0 0 3px var(--input-focus); }

@media (max-width: 1080px) {
  .playground-donation-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .readiness-hero { grid-template-columns: 112px minmax(0, 1fr); }
  .readiness-ring { width: 100px; height: 100px; }
  .readiness-ring strong { font-size: 34px; }
}
@media (max-width: 980px) {
  .playground-donation-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .readiness-hero { grid-template-columns: 1fr; text-align: center; }
  .semantic-preview-status { align-items: flex-start; flex-direction: column; }
  .semantic-preview-status span { text-align: left; }
  .semantic-state-switcher { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-hero-palette .deck-colors i,
  .animated-hero-palette .mini-card-colors i { transition: none; }
}

/* v0.8 readiness, upload, recommendations, and feedback */
.palette-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
}
.palette-import-panel > div { min-width: 0; }
.palette-import-panel .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.palette-import-panel strong,
.palette-import-panel small { display: block; }
.palette-import-panel small { margin-top: 4px; color: var(--muted); }
.palette-import-success {
  grid-column: 1 / -1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 900;
}
.optimization-summary {
  border: 1px solid #86efac;
  border-radius: 16px;
  background: #f0fdf4;
  padding: 14px 16px;
  color: #14532d;
}
.optimization-summary ul { margin: 8px 0 0; padding-left: 20px; }
.optimization-summary li { margin: 4px 0; font-size: 12px; }

.role-map-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.role-completion { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 11px; font-weight: 900; }
.role-completion.complete { background: #dcfce7; color: #166534; }
.role-map-pulse .role-grid article { animation: role-map-confirm .75s ease both; }
.role-map-pulse .role-grid article:nth-child(2n) { animation-delay: .04s; }
@keyframes role-map-confirm {
  0% { transform: translateY(0); box-shadow: none; }
  45% { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(37,99,235,.16); border-color: var(--blue); }
  100% { transform: translateY(0); box-shadow: none; }
}

.image-dropzone { cursor: default; padding: 28px; text-align: center; }
.image-source-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 7px 0; }

.contrast-recommendations { display: grid; gap: 12px; }
.contrast-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contrast-pair-grid > article {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: white;
  min-width: 0;
}
.contrast-pair-preview { min-height: 88px; border-radius: 13px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(0,0,0,.08); }
.contrast-pair-preview strong { font-size: 28px; }
.contrast-pair-preview span { font-size: 9px; font-weight: 900; }
.contrast-pair-grid h4 { margin: 3px 0 5px; }
.contrast-pair-grid small { color: var(--muted); font-weight: 800; }
.contrast-pair-grid code { display: block; overflow-wrap: anywhere; font-size: 10px; }
.pair-ratio { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; color: #166534; font-size: 11px; font-weight: 900; }
.contrast-pair-actions { display: flex; flex-direction: column; gap: 7px; }

.scale-regenerate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.scale-profile-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 900; }

.footer-feedback-widget {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr);
  gap: 26px;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(244,63,123,.18));
}
.footer-feedback-heading > span { display: inline-flex; align-items: center; gap: 6px; color: #fde047; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.footer-feedback-widget h3 { margin: 8px 0 8px; font-size: 26px; text-transform: none; letter-spacing: -.035em; }
.footer-feedback-widget p { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; }
.footer-feedback-widget form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
.footer-feedback-widget label { display: grid; gap: 6px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 900; }
.footer-feedback-widget select,
.footer-feedback-widget textarea { width: 100%; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(255,255,255,.96); color: var(--ink); padding: 10px 11px; font: inherit; }
.footer-feedback-widget select { min-height: 44px; }
.footer-feedback-widget textarea { min-height: 92px; resize: vertical; }
.footer-feedback-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-feedback-actions > span { margin-left: auto; color: rgba(255,255,255,.55); font-size: 10px; }
.footer-copy-button { background: transparent; color: white; border-color: rgba(255,255,255,.4); box-shadow: none; }
.footer-copy-button:hover { background: rgba(255,255,255,.1); }
.footer-feedback-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: #bfdbfe !important; }
.footer-feedback-widget form > small { grid-column: 1 / -1; color: rgba(255,255,255,.5); }

@media (max-width: 820px) {
  .contrast-pair-grid { grid-template-columns: 1fr; }
  .footer-feedback-widget { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .palette-import-panel { grid-template-columns: 1fr; }
  .palette-import-panel > button { width: 100%; }
  .contrast-pair-grid > article { grid-template-columns: 82px minmax(0,1fr); }
  .contrast-pair-actions { grid-column: 1 / -1; flex-direction: row; }
  .footer-feedback-widget form { grid-template-columns: 1fr; }
  .footer-feedback-actions,
  .footer-feedback-status,
  .footer-feedback-widget form > small { grid-column: 1; }
  .footer-feedback-actions > span { margin-left: 0; }
  .role-map-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .role-map-pulse .role-grid article { animation: none; }
}

/* Spot Color Lab */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.spot-page-hero { background-color: #f7f5ff; }
.spot-lab-page { padding: 34px 0 80px; }
.spot-lab { display: grid; grid-template-columns: 210px minmax(0,1fr) 250px; gap: 18px; align-items: start; min-width: 0; }
.spot-lab-embedded { grid-template-columns: 190px minmax(0,1fr); }
.spot-lab-embedded .spot-lab-aside { display: none; }
.spot-lab-nav { display: grid; gap: 8px; position: sticky; top: 112px; min-width: 0; }
.spot-lab-brand { display: flex; gap: 10px; align-items: flex-start; padding: 12px 10px 16px; border-bottom: 1px solid var(--line); }
.spot-lab-brand strong, .spot-lab-brand small { display: block; }
.spot-lab-brand strong { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.spot-lab-brand small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.spot-lab-nav > button { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; width: 100%; border: 0; border-radius: 13px; padding: 11px; background: transparent; text-align: left; cursor: pointer; }
.spot-lab-nav > button:hover { background: #f4f1ff; }
.spot-lab-nav > button.active { background: #ece9ff; color: #4338ca; }
.spot-lab-nav > button strong, .spot-lab-nav > button small { display: block; }
.spot-lab-nav > button strong { font-size: 12px; }
.spot-lab-nav > button small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.spot-license-note { display: flex; gap: 9px; margin-top: 14px; padding: 13px; border: 1px solid #d9d4f5; border-radius: 15px; background: #faf9ff; }
.spot-license-note strong { font-size: 11px; }
.spot-license-note p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.spot-lab-main { min-width: 0; display: grid; gap: 16px; }
.spot-lab-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.spot-lab-heading h2 { margin: 5px 0 5px; font-size: clamp(28px,3vw,42px); line-height: 1; letter-spacing: -.045em; }
.spot-lab-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; }
.spot-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.spot-manual-card { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 14px; border: 1px solid #c7d2fe; border-radius: 17px; background: #f8faff; }
.spot-manual-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.spot-input-card, .spot-results, .spot-library-view, .spot-compare-view, .spot-export-view { border: 1px solid var(--line); border-radius: 20px; background: white; padding: 17px; min-width: 0; }
.spot-input-card { display: grid; gap: 16px; }
.spot-color-entry { display: grid; grid-template-columns: 145px minmax(220px,1fr) minmax(230px,.9fr); gap: 14px; align-items: stretch; }
.spot-target-preview { min-height: 154px; border-radius: 17px; border: 1px solid rgba(0,0,0,.12); display: grid; place-items: end center; padding: 12px; font: 900 15px ui-monospace,monospace; }
.spot-value-stack { display: grid; gap: 7px; }
.spot-value-stack > div { display: grid; grid-template-columns: 44px minmax(0,1fr) 32px; gap: 7px; align-items: center; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 10px; }
.spot-value-stack small { font-size: 9px; font-weight: 900; color: var(--muted); }
.spot-value-stack code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.spot-value-stack button, .spot-selected-chip button { border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.spot-search-input { position: relative; }
.spot-search-input > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.spot-search-input .text-input { padding-left: 40px; }
.subhead-row { display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.subhead-row h3 { margin: 0; }
.subhead-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.spot-count { border-radius: 999px; padding: 5px 9px; background: #f0edff; color: #4338ca; font-size: 10px; font-weight: 900; }
.spot-match-list { display: grid; gap: 8px; margin-top: 13px; }
.spot-match-list > article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 8px; background: #fff; }
.spot-match-list > article.selected { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(99,102,241,.12); background: #fbfbff; }
.spot-match-main { display: grid; grid-template-columns: 26px 42px minmax(130px,1.2fr) 90px 72px minmax(94px,.7fr); gap: 9px; align-items: center; border: 0; background: transparent; text-align: left; min-width: 0; cursor: pointer; }
.spot-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; font-size: 10px; font-weight: 900; }
.spot-match-swatch { width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); }
.spot-match-name strong, .spot-match-name small, .spot-delta small, .spot-delta strong, .spot-values code, .spot-values small { display: block; }
.spot-match-name { min-width: 0; }
.spot-match-name strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-match-name small, .spot-values small { color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-delta small { color: var(--muted); font-size: 8px; }
.spot-delta strong { font-size: 12px; }
.spot-grade { display: inline-flex; width: fit-content; border-radius: 999px; padding: 2px 6px; font-size: 8px; font-style: normal; font-weight: 900; }
.spot-grade.excellent { background: #dcfce7; color: #166534; }
.spot-grade.good { background: #dbeafe; color: #1d4ed8; }
.spot-grade.fair { background: #fef3c7; color: #92400e; }
.spot-grade.poor { background: #fee2e2; color: #991b1b; }
.spot-pair-preview { display: grid; grid-template-columns: repeat(2,1fr); height: 30px; overflow: hidden; border-radius: 7px; border: 1px solid var(--line); }
.spot-values code { font-size: 9px; }
.spot-match-actions { display: flex; gap: 6px; }
.spot-match-actions .button { white-space: nowrap; }
.spot-lab-aside { display: grid; gap: 12px; position: sticky; top: 112px; min-width: 0; }
.spot-side-card { border: 1px solid var(--line); border-radius: 17px; background: white; padding: 14px; }
.spot-side-card h3 { margin: 0 0 11px; font-size: 13px; }
.spot-selected-chip { display: grid; grid-template-columns: 42px minmax(0,1fr) 28px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.spot-selected-chip i { width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); }
.spot-selected-chip strong { font-size: 12px; }
.spot-reference-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 9px; align-items: center; }
.spot-reference-card i { width: 48px; height: 48px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); }
.spot-reference-card strong, .spot-reference-card span, .spot-reference-card small { display: block; }
.spot-reference-card strong { font-size: 11px; }
.spot-reference-card span { font-size: 10px; }
.spot-reference-card small { color: var(--muted); font-size: 8px; }
.spot-side-delta { display: flex; gap: 7px; align-items: center; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.spot-side-delta span { font-size: 9px; color: var(--muted); }
.spot-side-delta strong { font-size: 14px; }
.spot-delta-guide p { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 10px; }
.spot-delta-guide i { width: 8px; height: 8px; border-radius: 50%; }
.spot-delta-guide i.excellent { background: #22c55e; }.spot-delta-guide i.good { background: #3b82f6; }.spot-delta-guide i.fair { background: #f59e0b; }.spot-delta-guide i.poor { background: #ef4444; }
.spot-delta-guide > small { display: block; color: var(--muted); font-size: 8px; margin-top: 9px; }
.spot-library-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }
.spot-library-summary article { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #faf9ff; }
.spot-library-summary strong, .spot-library-summary span { display: block; }
.spot-library-summary strong { font-size: 26px; }
.spot-library-summary span { color: var(--muted); font-size: 10px; }
.spot-library-table { display: grid; gap: 6px; margin-top: 13px; max-height: 570px; overflow: auto; }
.spot-library-row { display: grid; grid-template-columns: 48px minmax(140px,1.2fr) minmax(110px,1fr) 90px 54px; gap: 9px; align-items: center; min-width: 580px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; font-size: 10px; }
.spot-library-row.header { position: sticky; top: 0; z-index: 1; background: #f6f4ff; font-weight: 900; }
.spot-library-row strong, .spot-library-row small { display: block; }
.spot-library-row small { color: var(--muted); font-size: 8px; }
.spot-table-swatch { width: 40px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); }
.spot-compare-swatches { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.spot-compare-swatches article { min-height: 190px; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(0,0,0,.12); }
.spot-compare-swatches small, .spot-compare-swatches span { font-size: 10px; }
.spot-compare-swatches strong { font-size: 22px; }
.spot-compare-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 13px; }
.spot-compare-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.spot-compare-grid span, .spot-compare-grid strong { display: block; }
.spot-compare-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.spot-compare-grid strong { margin: 5px 0; font-size: 18px; }
.spot-compare-grid p { margin: 0; color: var(--muted); font-size: 10px; }
.spot-surface-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 13px; }
.spot-surface-grid > div { min-height: 120px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; }
.spot-surface-grid strong, .spot-surface-grid span { display: block; }
.spot-surface-grid span { font-size: 10px; }
.spot-warning { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; padding: 12px; border: 1px solid #f5d07d; border-radius: 13px; background: #fffbeb; color: #7c5714; }
.spot-warning p { margin: 0; font-size: 10px; }
.spot-export-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.spot-export-grid article { border: 1px solid var(--line); border-radius: 16px; padding: 17px; background: #faf9ff; }
.spot-export-grid h3 { margin: 11px 0 5px; }
.spot-export-grid p { min-height: 55px; margin: 0 0 12px; color: var(--muted); font-size: 11px; }

@media (max-width: 1100px) {
  .spot-lab { grid-template-columns: 180px minmax(0,1fr); }
  .spot-lab-aside { grid-column: 2; position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spot-lab-aside .spot-delta-guide { grid-column: span 2; }
  .spot-color-entry { grid-template-columns: 130px minmax(0,1fr); }
  .spot-value-stack { grid-column: 1 / -1; grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .spot-lab, .spot-lab-embedded { grid-template-columns: 1fr; }
  .spot-lab-nav { position: static; display: flex; overflow-x: auto; padding-bottom: 4px; }
  .spot-lab-brand, .spot-license-note { display: none; }
  .spot-lab-nav > button { flex: 0 0 auto; width: 155px; }
  .spot-lab-aside { grid-column: 1; grid-template-columns: 1fr; }
  .spot-lab-aside .spot-delta-guide { grid-column: 1; }
  .spot-lab-embedded .spot-lab-aside { display: none; }
  .spot-lab-heading { display: grid; }
  .spot-heading-actions { justify-content: flex-start; }
  .spot-manual-card { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spot-match-main { grid-template-columns: 26px 42px minmax(120px,1fr) 78px; }
  .spot-pair-preview, .spot-values { display: none; }
  .spot-export-grid { grid-template-columns: 1fr; }
  .spot-export-grid p { min-height: 0; }
}
@media (max-width: 620px) {
  .spot-lab-page { width: min(100% - 18px,1180px); }
  .spot-color-entry { grid-template-columns: 1fr; }
  .spot-target-preview { min-height: 120px; }
  .spot-value-stack { grid-column: 1; grid-template-columns: 1fr; }
  .spot-match-list > article { grid-template-columns: 1fr; }
  .spot-match-main { grid-template-columns: 24px 38px minmax(0,1fr) 66px; }
  .spot-match-actions { justify-content: flex-end; }
  .spot-match-actions .button { flex: 1; }
  .spot-manual-card { grid-template-columns: 1fr; }
  .spot-compare-swatches { grid-template-columns: 1fr; }
  .spot-compare-swatches > svg { transform: rotate(90deg); justify-self: center; }
  .spot-compare-grid, .spot-surface-grid, .spot-library-summary { grid-template-columns: 1fr; }
  .spot-library-table { overflow-x: auto; }
}

/* Color Pick Spot Color System v1.0 */
.cps-lab { display:grid; grid-template-columns:210px minmax(0,1fr) 270px; gap:18px; align-items:start; min-width:0; }
.cps-lab-embedded { grid-template-columns:190px minmax(0,1fr); }
.cps-lab-embedded .cps-aside { display:none; }
.cps-nav { display:grid; gap:8px; position:sticky; top:112px; min-width:0; }
.cps-brand { display:flex; gap:10px; align-items:flex-start; padding:12px 10px 16px; border-bottom:1px solid var(--line); }
.cps-brand strong,.cps-brand small { display:block; }
.cps-brand strong { font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.cps-brand small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4; }
.cps-nav > button { display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; width:100%; padding:11px; border:0; border-radius:13px; background:transparent; text-align:left; cursor:pointer; }
.cps-nav > button:hover { background:#f4f1ff; }
.cps-nav > button.active { background:#ece9ff; color:#4338ca; }
.cps-nav > button strong,.cps-nav > button small { display:block; }
.cps-nav > button strong { font-size:12px; }
.cps-nav > button small { margin-top:2px; color:var(--muted); font-size:9px; line-height:1.35; }
.cps-system-note { display:flex; gap:9px; margin-top:14px; padding:13px; border:1px solid #d9d4f5; border-radius:15px; background:#faf9ff; }
.cps-system-note strong { font-size:11px; }
.cps-system-note p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.cps-main { display:grid; gap:16px; min-width:0; }
.cps-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.cps-heading h2 { margin:5px 0 6px; font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.045em; }
.cps-heading p { max-width:760px; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.cps-total-badge { display:inline-flex; align-items:center; justify-content:center; min-width:max-content; padding:7px 11px; border-radius:999px; background:#ede9fe; color:#4338ca; font-size:10px; font-weight:900; }
.cps-filter-panel { display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(125px,.65fr)); gap:9px; padding:12px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.cps-search { position:relative; }
.cps-search > svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.cps-search .text-input { padding-left:40px; }
.cps-results-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.cps-results-head strong { font-size:12px; }
.cps-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.cps-color-grid > article { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.cps-color-grid > article:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(36,29,74,.08); }
.cps-color-grid > article.selected { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.cps-card-select { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.cps-card-swatch { display:flex; flex-direction:column; justify-content:space-between; min-height:116px; padding:13px; }
.cps-card-swatch strong { font-size:12px; }
.cps-card-swatch small { font:800 10px ui-monospace,monospace; opacity:.86; }
.cps-card-copy { display:block; padding:11px 12px 8px; }
.cps-card-copy strong,.cps-card-copy small { display:block; }
.cps-card-copy strong { font-size:12px; }
.cps-card-copy small { margin-top:3px; color:var(--muted); font-size:9px; }
.cps-card-footer { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:7px 11px 10px; }
.cps-card-footer span { color:var(--muted); font-size:9px; font-weight:800; }
.cps-card-footer button { display:inline-flex; gap:4px; align-items:center; border:0; background:transparent; color:#4f46e5; font-size:9px; font-weight:900; cursor:pointer; }
.cps-load-more { justify-self:center; min-width:210px; }
.cps-match-layout,.cps-create-layout,.cps-export-view,.cps-collections-view { display:grid; gap:14px; }
.cps-input-panel { display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; padding:15px; border:1px solid var(--line); border-radius:19px; background:white; }
.cps-target { min-height:205px; border-radius:16px; border:1px solid rgba(0,0,0,.12); display:flex; flex-direction:column; justify-content:flex-end; padding:15px; position:relative; }
.cps-target input,.cps-create-preview input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.cps-target strong { font:900 22px ui-monospace,monospace; }
.cps-target small { margin-top:3px; font-size:10px; }
.cps-input-groups { display:grid; gap:12px; align-content:start; }
.cps-mini-fields { display:grid; grid-template-columns:44px repeat(3,minmax(0,1fr)); gap:8px; align-items:end; }
.cps-mini-fields.four { grid-template-columns:44px repeat(4,minmax(0,1fr)); }
.cps-mini-fields > span { align-self:center; font-size:10px; font-weight:900; color:var(--muted); }
.cps-mini-fields label { display:grid; gap:4px; color:var(--muted); font-size:8px; font-weight:900; }
.cps-mini-fields input { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; padding:0 8px; }
.cps-code-lookup { display:grid; grid-template-columns:minmax(160px,1fr) minmax(220px,.8fr) auto; gap:10px; align-items:center; padding:13px; border:1px solid #ddd6fe; border-radius:16px; background:#faf9ff; }
.cps-code-lookup strong,.cps-code-lookup small { display:block; }
.cps-code-lookup strong { font-size:11px; }
.cps-code-lookup small { margin-top:2px; color:var(--muted); font-size:9px; }
.cps-match-results { display:grid; gap:8px; padding:16px; border:1px solid var(--line); border-radius:19px; background:white; }
.cps-match-results h3 { margin:0; }
.cps-match-results p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.cps-match-results > article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:13px; }
.cps-match-results > article.selected { border-color:#818cf8; background:#fbfbff; box-shadow:0 0 0 2px rgba(99,102,241,.1); }
.cps-match-results > article > button:first-child { display:grid; grid-template-columns:26px 42px minmax(130px,1fr) 66px 74px; gap:9px; align-items:center; border:0; background:transparent; text-align:left; cursor:pointer; }
.cps-match-results i { width:40px; height:40px; border-radius:9px; border:1px solid rgba(0,0,0,.1); }
.cps-match-results span strong,.cps-match-results span small { display:block; }
.cps-match-results span strong { font-size:11px; }
.cps-match-results span small { color:var(--muted); font-size:8px; }
.cps-match-rank { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#f3f4f6; font-size:10px; font-weight:900; }
.cps-match-delta strong { font-size:12px !important; }
.cps-match-delta small { font-size:8px !important; }
.cps-collection-tabs { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; }
.cps-collection-tabs button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:white; font-size:10px; font-weight:900; cursor:pointer; }
.cps-collection-tabs button.active { border-color:#7c3aed; background:#ede9fe; color:#4338ca; }
.cps-collection-intro { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:11px; align-items:center; padding:15px; border:1px solid #ddd6fe; border-radius:17px; background:#faf9ff; }
.cps-collection-intro h3,.cps-collection-intro p { margin:0; }
.cps-collection-intro h3 { font-size:16px; }
.cps-collection-intro p { margin-top:4px; color:var(--muted); font-size:10px; }
.cps-collection-intro > span { font-size:10px; font-weight:900; }
.cps-create-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.cps-create-card,.cps-custom-list { padding:16px; border:1px solid var(--line); border-radius:19px; background:white; }
.cps-create-card { display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; }
.cps-create-preview { min-height:210px; border-radius:16px; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; position:relative; border:1px solid rgba(0,0,0,.12); }
.cps-create-preview strong { font:900 18px ui-monospace,monospace; }
.cps-nearest-note { padding:11px; border:1px solid #ddd6fe; border-radius:13px; background:#faf9ff; }
.cps-nearest-note small,.cps-nearest-note strong,.cps-nearest-note span { display:block; }
.cps-nearest-note small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.cps-nearest-note strong { margin:3px 0; font-size:14px; }
.cps-nearest-note span { color:var(--muted); font-size:9px; }
.cps-custom-list { display:grid; gap:8px; align-content:start; }
.cps-custom-list > article { display:grid; grid-template-columns:42px minmax(0,1fr) auto 38px; gap:9px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:12px; }
.cps-custom-list > article > i { width:40px; height:40px; border-radius:9px; border:1px solid rgba(0,0,0,.1); }
.cps-custom-list article strong,.cps-custom-list article span,.cps-custom-list article small { display:block; }
.cps-custom-list article strong { font-size:11px; }
.cps-custom-list article span { font-size:10px; }
.cps-custom-list article small { color:var(--muted); font-size:8px; }
.empty-card { display:grid; place-items:center; min-height:220px; padding:22px; border:1px dashed #c4b5fd; border-radius:15px; background:#faf9ff; text-align:center; }
.empty-card strong { margin-top:9px; }
.empty-card p { max-width:320px; margin:5px 0 0; color:var(--muted); font-size:10px; }
.cps-export-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cps-export-grid article { padding:17px; border:1px solid var(--line); border-radius:17px; background:white; }
.cps-export-grid h3 { margin:11px 0 5px; }
.cps-export-grid p { min-height:70px; margin:0 0 12px; color:var(--muted); font-size:10px; line-height:1.55; }
.cps-reference-notice { display:flex; gap:12px; padding:15px; border:1px solid #f3d07a; border-radius:16px; background:#fffbeb; color:#765511; }
.cps-reference-notice h3,.cps-reference-notice p { margin:0; }
.cps-reference-notice p { margin-top:4px; font-size:10px; line-height:1.55; }
.cps-aside { display:grid; gap:12px; position:sticky; top:112px; min-width:0; }
.cps-selected-card,.cps-side-card { padding:14px; border:1px solid var(--line); border-radius:17px; background:white; }
.cps-selected-swatch { min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; border-radius:13px; }
.cps-selected-swatch small,.cps-selected-swatch strong,.cps-selected-swatch span { display:block; }
.cps-selected-swatch small { font-size:8px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.cps-selected-swatch strong { margin-top:4px; font-size:18px; }
.cps-selected-swatch span { margin-top:2px; font-size:10px; }
.cps-selected-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:10px 0; }
.cps-selected-meta > div { padding:8px; border:1px solid var(--line); border-radius:10px; }
.cps-selected-meta small,.cps-selected-meta strong { display:block; }
.cps-selected-meta small { color:var(--muted); font-size:8px; }
.cps-selected-meta strong { margin-top:2px; font-size:11px; }
.cps-values { display:grid; gap:6px; margin-bottom:10px; }
.cps-values button { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; gap:7px; align-items:center; width:100%; min-height:36px; padding:5px 7px; border:1px solid var(--line); border-radius:10px; background:white; text-align:left; cursor:pointer; }
.cps-values span { color:var(--muted); font-size:8px; font-weight:900; }
.cps-values code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.cps-side-card h3 { margin:0 0 9px; font-size:12px; }
.cps-side-card .tag-row { display:flex; flex-wrap:wrap; gap:7px; align-items:flex-start; }
.cps-side-card .tag { display:inline-flex; max-width:100%; padding:7px 9px; border:1px solid #e4dfd5; border-radius:999px; background:#f7f4ee; color:#3f3a33; font-size:10px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.cps-subheading { margin-top:13px !important; padding-top:12px; border-top:1px solid var(--line); }
.cps-siblings { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cps-siblings button { aspect-ratio:1; border:1px solid rgba(0,0,0,.1); border-radius:8px; cursor:pointer; }
.cps-independent { display:flex; gap:9px; background:#faf9ff; border-color:#ddd6fe; }
.cps-independent strong { font-size:11px; }
.cps-independent p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
.cps-aside .donation-widget { padding:16px; border-radius:18px; box-shadow:4px 4px 0 var(--ink); }
.cps-aside .donation-widget h3 { font-size:19px; }
.cps-aside .donation-widget p { font-size:11px; line-height:1.5; }
.cps-aside .donation-widget .donation-button { width:100%; justify-content:center; }

@media (max-width:1280px) {
  .cps-lab { grid-template-columns:180px minmax(0,1fr); }
  .cps-aside { grid-column:2; position:static; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
  .cps-selected-card { grid-column:span 2; }
  .cps-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .cps-lab,.cps-lab-embedded { grid-template-columns:1fr; }
  .cps-nav { position:static; display:flex; overflow-x:auto; padding-bottom:4px; }
  .cps-brand,.cps-system-note { display:none; }
  .cps-nav > button { flex:0 0 auto; width:160px; }
  .cps-aside { grid-column:1; grid-template-columns:1fr 1fr; }
  .cps-selected-card { grid-column:1/-1; }
  .cps-lab-embedded .cps-aside { display:none; }
  .cps-filter-panel { grid-template-columns:1fr 1fr; }
  .cps-search { grid-column:1/-1; }
  .cps-heading { display:grid; }
  .cps-input-panel { grid-template-columns:150px minmax(0,1fr); }
  .cps-code-lookup { grid-template-columns:1fr auto; }
  .cps-code-lookup > div { grid-column:1/-1; }
  .cps-create-layout { grid-template-columns:1fr; }
  .cps-export-grid { grid-template-columns:1fr; }
  .cps-export-grid p { min-height:0; }
}
@media (max-width:560px) {
  .cps-heading h2 { font-size:31px; }
  .cps-filter-panel { grid-template-columns:1fr; }
  .cps-search { grid-column:1; }
  .cps-color-grid { grid-template-columns:1fr; }
  .cps-input-panel { grid-template-columns:1fr; }
  .cps-target { min-height:140px; }
  .cps-mini-fields,.cps-mini-fields.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cps-mini-fields > span { grid-column:1/-1; }
  .cps-code-lookup { grid-template-columns:1fr; }
  .cps-match-results > article { grid-template-columns:1fr; }
  .cps-match-results > article > button:first-child { grid-template-columns:24px 38px minmax(0,1fr) 60px; }
  .cps-match-results em { display:none; }
  .cps-match-results > article > .button { width:100%; }
  .cps-create-card { grid-template-columns:1fr; }
  .cps-create-preview { min-height:140px; }
  .cps-custom-list > article { grid-template-columns:42px minmax(0,1fr) 38px; }
  .cps-custom-list > article > .button { grid-column:1/-1; }
  .cps-aside { grid-template-columns:1fr; }
  .cps-selected-card { grid-column:1; }
}

/* Color Pick v1.1 refinements */
.hero-brand-pair { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.hero-brand-chip { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:8px 14px 8px 10px; border:2px solid var(--ink); border-radius:16px; background:white; box-shadow:4px 4px 0 var(--ink); }
.hero-brand-chip .brand-mark { width:42px; height:42px; flex-basis:42px; }
.hero-brand-chip strong { font-size:16px; letter-spacing:-.035em; }
.button-cps { background:var(--blue); color:white; }
.button-cps:hover { background:#1d4ed8; }
.button-cps:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }

.feedback-section { padding:64px 0; border-top:1px solid var(--line); background:linear-gradient(145deg,#f7f5ff,#fff7da 52%,#ecfeff); }
.feedback-section .footer-feedback-widget { margin-top:0; border:2px solid var(--ink); background:white; color:var(--ink); box-shadow:8px 8px 0 var(--ink); }
.feedback-section .footer-feedback-heading > span { color:#5b21b6; }
.feedback-section .footer-feedback-widget p { color:var(--muted); }
.feedback-section .footer-feedback-widget label { color:#45413b; }
.feedback-section .footer-feedback-widget select,
.feedback-section .footer-feedback-widget textarea { border-color:var(--line); background:#fffdf8; }
.feedback-section .footer-feedback-actions > span { color:var(--muted); }
.feedback-section .footer-copy-button { background:white; color:var(--ink); border-color:var(--ink); }
.feedback-section .footer-copy-button:hover { background:var(--paper-2); }
.feedback-section .footer-feedback-status { color:#1d4ed8 !important; }
.feedback-section .footer-feedback-widget form > small { color:var(--muted); }

.cps-embedded-selection { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px; border:1px solid #c4b5fd; border-radius:16px; background:linear-gradient(135deg,#faf9ff,#fff); }
.cps-embedded-selection > i { width:50px; height:50px; border:1px solid rgba(0,0,0,.12); border-radius:12px; }
.cps-embedded-selection small,
.cps-embedded-selection strong,
.cps-embedded-selection span { display:block; }
.cps-embedded-selection small { color:var(--muted); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.cps-embedded-selection strong { margin-top:2px; font-size:13px; }
.cps-embedded-selection span { color:var(--muted); font-size:9px; }
.cps-embedded-selection .toolbar-wrap { justify-content:flex-end; }
.cps-card-footer button:hover,
.cps-siblings button:hover { transform:translateY(-1px); }
.cps-values button:hover { border-color:#8b5cf6; background:#faf9ff; }
.cps-code-lookup .button:disabled { box-shadow:none; }

.challenge-loading { min-height:280px; display:grid; place-items:center; border:1px solid var(--line); border-radius:22px; background:white; color:var(--muted); font-weight:900; }
.challenge-product-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.challenge-product-tabs > button { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; min-height:72px; padding:13px 16px; border:2px solid var(--ink); border-radius:18px; background:white; box-shadow:4px 4px 0 var(--ink); text-align:left; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.challenge-product-tabs > button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.challenge-product-tabs > button.active { background:#ede9fe; }
.challenge-product-tabs span,
.challenge-product-tabs strong,
.challenge-product-tabs small { display:block; }
.challenge-product-tabs strong { font-size:13px; }
.challenge-product-tabs small { margin-top:2px; color:var(--muted); font-size:9px; }

.vision-quiz,
.vision-quiz-results { display:grid; gap:20px; padding:25px; border:2px solid var(--ink); border-radius:25px; background:white; box-shadow:7px 7px 0 var(--ink); }
.vision-quiz-intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.vision-quiz-intro h2,
.vision-quiz-results h2 { margin:8px 0 7px; font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.05em; }
.vision-quiz-intro p,
.vision-quiz-results p { margin:0; color:var(--muted); }
.vision-quiz-meta { flex:0 0 auto; display:grid; gap:2px; min-width:190px; padding:12px 14px; border:1px solid #c4b5fd; border-radius:15px; background:#faf9ff; }
.vision-quiz-meta strong { font-size:11px; }
.vision-quiz-meta span,
.vision-quiz-meta small { color:var(--muted); font-size:9px; }
.vision-progress { overflow:hidden; height:9px; border-radius:999px; background:#ece7dd; }
.vision-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8b5cf6,#2563eb,#2dd4bf); transition:width .3s ease; }
.vision-quiz-stage { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); gap:26px; align-items:center; }
.vision-plate-wrap { display:grid; justify-items:center; gap:8px; }
.vision-plate { width:min(100%,380px); filter:drop-shadow(0 14px 24px rgba(29,25,18,.12)); }
.vision-plate-label { color:var(--muted); font-size:10px; font-weight:900; }
.vision-question-panel { display:grid; gap:13px; align-content:center; }
.vision-question-count { color:#5b21b6; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.1em; }
.vision-question-panel h3 { margin:0; font-size:34px; letter-spacing:-.045em; }
.vision-question-panel p { margin:0; color:var(--muted); }
.vision-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.vision-options button { min-height:62px; display:flex; align-items:center; justify-content:center; gap:8px; border:2px solid var(--ink); border-radius:15px; background:white; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
.vision-options button:hover:not(:disabled) { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.vision-options button:disabled { cursor:default; opacity:1; }
.vision-options button strong { font-size:22px; }
.vision-options button.correct { background:#dcfce7; border-color:#166534; color:#166534; box-shadow:3px 3px 0 #166534; }
.vision-options button.incorrect { background:#fee2e2; border-color:#991b1b; color:#991b1b; box-shadow:3px 3px 0 #991b1b; }
.vision-answer-note { padding:10px 12px; border-radius:12px; font-size:11px; font-weight:900; }
.vision-answer-note.correct { background:#dcfce7; color:#166534; }
.vision-answer-note.incorrect { background:#fee2e2; color:#991b1b; }
.vision-disclaimer { display:flex; gap:10px; align-items:flex-start; padding:13px; border:1px solid #f3d07a; border-radius:14px; background:#fffbeb; color:#765511; }
.vision-disclaimer p { margin:0; color:inherit; font-size:10px; line-height:1.55; }
.vision-result-score { display:grid; justify-items:center; justify-self:start; min-width:190px; padding:20px; border:2px solid var(--ink); border-radius:22px; background:#ede9fe; box-shadow:5px 5px 0 var(--ink); }
.vision-result-score strong { font-size:52px; line-height:1; letter-spacing:-.06em; }
.vision-result-score span { margin-top:5px; color:var(--muted); font-size:10px; font-weight:900; }
.vision-category-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.vision-category-results article { display:flex; justify-content:space-between; gap:10px; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }
.vision-category-results span { color:var(--muted); font-size:11px; font-weight:800; }
.vision-result-actions { display:flex; flex-wrap:wrap; gap:9px; }

@media (max-width:860px) {
  .cps-embedded-selection { grid-template-columns:52px minmax(0,1fr); }
  .cps-embedded-selection .toolbar-wrap { grid-column:1/-1; justify-content:flex-start; }
  .vision-quiz-stage { grid-template-columns:1fr; }
  .vision-plate { width:min(100%,340px); }
}
@media (max-width:680px) {
  .hero-brand-pair { align-items:stretch; }
  .hero-brand-chip { flex:0 1 auto; }
  .hero-actions .hero-primary-action { flex:1 1 100%; }
  .hero-actions .hero-secondary-action { flex:1 1 calc(50% - 6px); min-width:0; padding-inline:12px; font-size:12px; }
  .feedback-section { padding:44px 0; }
  .challenge-product-tabs { grid-template-columns:1fr; }
  .vision-quiz,.vision-quiz-results { padding:17px; box-shadow:5px 5px 0 var(--ink); }
  .vision-quiz-intro { display:grid; }
  .vision-quiz-meta { min-width:0; }
  .vision-options { grid-template-columns:1fr 1fr; }
  .vision-category-results { grid-template-columns:1fr; }
  .cps-embedded-selection .toolbar-wrap .button { flex:1 1 auto; }
}
@media print {
  .feedback-section { display:none !important; }
}

/* v1.5 support, trust, and policy pages */
.support-page { padding-top: 50px; }
.support-shell { width: min(1120px, calc(100% - 32px)); }
.support-hero { max-width: 900px; padding: 12px 0 34px; }
.support-hero h1 { max-width: 880px; }
.support-intro { max-width: 790px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; }
.support-intro p { color: #34312d; }
.support-updated { margin-top: 18px; font-size: 13px; color: var(--muted) !important; }
.support-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.support-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); gap: 56px; align-items: start; }
.support-toc { position: sticky; top: 105px; border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: white; box-shadow: 4px 4px 0 rgba(17,17,17,.07); }
.support-toc > strong { display: block; margin-bottom: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.support-toc nav { display: grid; gap: 4px; }
.support-toc nav a { border-radius: 9px; padding: 8px 9px; color: #57534e; font-size: 13px; line-height: 1.25; }
.support-toc nav a:hover { background: var(--paper-2); color: var(--ink); }
.support-toc-note { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 4px; font-size: 12px; }
.support-toc-note span { color: var(--muted); }
.support-toc-note a { font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.support-article { min-width: 0; }
.support-article section { scroll-margin-top: 120px; padding: 0 0 32px; border-bottom: 1px solid var(--line); }
.support-article section + section { padding-top: 4px; }
.support-article section:last-of-type { border-bottom: 0; }
.support-article h2 { margin: 34px 0 14px; font-size: clamp(27px, 3.2vw, 36px); line-height: 1.08; }
.support-article h3 { margin: 18px 0 7px; font-size: 20px; letter-spacing: -.025em; }
.support-article p, .support-article li { font-size: 16px; line-height: 1.75; }
.support-article a:not(.button):not(.support-link-card) { font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.support-article ul, .support-article ol { padding-left: 23px; }
.support-article li + li { margin-top: 7px; }
.support-callout { margin: 24px 0; border: 2px solid var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 5px 5px 0 var(--ink); }
.support-callout > strong { display: block; margin-bottom: 7px; font-size: 14px; }
.support-callout p { margin: 0; color: #302d29; }
.support-callout-blue { background: #dbeafe; }
.support-callout-yellow { background: #fff3b0; }
.support-callout-mint { background: #ccfbf1; }
.support-callout-pink { background: #fce7f3; }
.support-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.support-link-card { min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: white; display: grid; gap: 6px; transition: transform .15s ease, box-shadow .15s ease; }
.support-link-card:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.support-link-card strong { font-size: 17px; }
.support-link-card span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.faq-list { display: grid; gap: 12px; margin-bottom: 34px; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; background: white; overflow: hidden; }
.faq-list summary { cursor: pointer; list-style: none; padding: 17px 52px 17px 18px; font-weight: 900; font-size: 17px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 18px; top: 13px; font-size: 25px; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 18px 18px; }
.footer-grid-wide { grid-template-columns: 2fr repeat(5, minmax(110px, 1fr)); }

@media (max-width: 1060px) {
  .support-layout { grid-template-columns: 200px minmax(0,1fr); gap: 32px; }
  .footer-grid-wide { grid-template-columns: 1.7fr repeat(3, 1fr); }
  .footer-grid-wide > div:nth-child(5),
  .footer-grid-wide > div:nth-child(6) { grid-column: auto; }
}

@media (max-width: 760px) {
  .support-shell { width: min(100% - 24px, 1120px); }
  .support-page { padding-top: 34px; }
  .support-layout { grid-template-columns: 1fr; gap: 20px; }
  .support-toc { position: static; }
  .support-toc nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .support-link-grid { grid-template-columns: 1fr; }
  .support-article p, .support-article li { font-size: 15px; }
  .footer-grid-wide { grid-template-columns: 1fr 1fr; }
  .footer-grid-wide .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .support-toc nav { grid-template-columns: 1fr; }
  .support-actions .button { width: 100%; justify-content: center; }
  .footer-grid-wide { grid-template-columns: 1fr; }
  .footer-grid-wide .footer-brand { grid-column: auto; }
}
.trust-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.trust-card { min-width:0; border:2px solid var(--ink); border-radius:22px; padding:22px; background:white; box-shadow:6px 6px 0 var(--ink); display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:start; }
.trust-card strong { font-size:21px; letter-spacing:-.035em; }
.trust-card span { grid-column:1 / -1; color:var(--muted); line-height:1.55; }
.trust-card svg { margin-top:4px; }
.trust-card:hover { transform:translate(-1px,-1px); box-shadow:8px 8px 0 var(--ink); }
@media (max-width:760px) { .trust-card-grid { grid-template-columns:1fr; } }

/* v1.6 search-intent landing pages, educational content, and CMYK tool */
.tool-seo-section { padding: 84px 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fffdf8 0%, #f7f2e9 100%); }
.tool-seo-shell { display: grid; gap: 36px; }
.tool-seo-intro { max-width: 820px; }
.tool-seo-intro h2, .tool-related-block h2, .tool-faq-block h2 { margin: 9px 0 14px; font-size: clamp(34px, 4.8vw, 54px); line-height: 1; letter-spacing: -.055em; }
.tool-seo-intro p { margin: 0; max-width: 760px; color: var(--muted); font-size: 18px; }
.tool-seo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-seo-card { border: 2px solid var(--ink); border-radius: 22px; padding: 22px; background: white; box-shadow: 5px 5px 0 var(--ink); }
.tool-seo-card-wide { grid-column: 1 / -1; }
.tool-seo-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tool-seo-card-heading h3 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.tool-seo-card > p { margin: 0; color: var(--muted); }
.tool-step-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tool-step-list li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fffdf8; }
.tool-step-list li > span { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 10px; background: var(--yellow); font-weight: 950; box-shadow: 2px 2px 0 var(--ink); }
.tool-step-list strong { display: block; font-size: 14px; }
.tool-step-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tool-check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tool-check-list li { position: relative; padding-left: 24px; }
.tool-check-list li::before { content: "✓"; position: absolute; left: 0; color: #15803d; font-weight: 950; }
.tool-limitations { border-left: 6px solid var(--orange); border-radius: 18px; padding: 20px 22px; background: #fff7ed; }
.tool-limitations h3 { margin: 0 0 8px; font-size: 20px; }
.tool-limitations ul { margin: 0; padding-left: 20px; color: #5f4a32; }
.tool-faq-block { max-width: 900px; }
.tool-related-block { display: grid; gap: 18px; }
.tool-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.tool-related-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; align-items: center; border: 2px solid var(--ink); border-radius: 20px; padding: 19px; background: white; box-shadow: 4px 4px 0 var(--ink); transition: transform .16s ease, box-shadow .16s ease; }
.tool-related-card:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.tool-related-card strong { font-size: 18px; letter-spacing: -.03em; }
.tool-related-card span { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }

.cmyk-tool-layout { align-items: start; }
.cmyk-tool-body { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 22px; }
.cmyk-preview { min-height: 310px; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); padding: 20px; display: flex; align-items: end; }
.cmyk-preview small, .cmyk-preview strong, .cmyk-preview span { display: block; }
.cmyk-preview small { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.cmyk-preview strong { margin-top: 6px; font: 950 30px ui-monospace, SFMono-Regular, Menlo, monospace; }
.cmyk-preview span { margin-top: 4px; font-size: 12px; font-weight: 800; }
.cmyk-channel { display: grid; grid-template-columns: minmax(0,1fr) 76px; gap: 7px 12px; align-items: center; }
.cmyk-channel > div { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; }
.cmyk-channel strong { font-size: 13px; }
.cmyk-channel output { color: var(--muted); font: 800 12px ui-monospace, monospace; }
.cmyk-channel input[type="range"] { width: 100%; accent-color: var(--blue); }
.cmyk-channel .number-input { min-height: 40px; }
.cmyk-hex-row { align-items: end; grid-template-columns: minmax(0,1fr) auto; }
.cmyk-values { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.cmyk-values .value-card { position: relative; text-align: left; cursor: pointer; }
.cmyk-values .value-card svg { position: absolute; right: 11px; top: 11px; }

@media (max-width: 980px) {
  .tool-step-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-related-grid { grid-template-columns: 1fr; }
  .cmyk-tool-body { grid-template-columns: 220px minmax(0,1fr); }
  .cmyk-values { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .tool-seo-section { padding: 58px 0; }
  .tool-seo-grid { grid-template-columns: 1fr; }
  .tool-seo-card-wide { grid-column: auto; }
  .tool-step-list { grid-template-columns: 1fr; }
  .tool-seo-intro p { font-size: 16px; }
  .cmyk-tool-body { grid-template-columns: 1fr; }
  .cmyk-preview { min-height: 220px; }
  .cmyk-values { grid-template-columns: 1fr 1fr; }
  .cmyk-hex-row { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .cmyk-values { grid-template-columns: 1fr; }
}

/* v1.8 numeric CPS codes, expanded families, CPS Everywhere, mockups, and footer refinement */
.universal-color-input { display:grid; gap:8px; min-width:0; }
.universal-color-input > label { font-size:12px; font-weight:900; color:var(--muted); }
.universal-color-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; }
.universal-color-input.is-compact .universal-color-row { grid-template-columns:34px minmax(0,1fr) auto; gap:7px; }
.universal-color-swatch { width:42px; height:42px; border:2px solid var(--ink); border-radius:13px; box-shadow:3px 3px 0 var(--ink); }
.universal-color-input.is-compact .universal-color-swatch { width:34px; height:34px; border-radius:10px; }
.universal-color-field-wrap { position:relative; min-width:0; }
.cps-autocomplete { position:absolute; z-index:45; top:calc(100% + 7px); left:0; right:0; display:grid; gap:4px; padding:8px; border:2px solid var(--ink); border-radius:15px; background:white; box-shadow:7px 7px 0 var(--ink); max-height:310px; overflow:auto; }
.cps-autocomplete button { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; border:0; border-radius:10px; background:transparent; padding:8px; text-align:left; cursor:pointer; }
.cps-autocomplete button:hover,.cps-autocomplete button:focus-visible { background:#f5f0e8; }
.cps-autocomplete i { width:28px; height:28px; border:1px solid var(--ink); border-radius:8px; }
.cps-autocomplete span { display:grid; min-width:0; }
.cps-autocomplete strong,.cps-autocomplete small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cps-autocomplete small { color:var(--muted); }
.universal-color-meta { display:flex; flex-wrap:wrap; gap:7px 12px; align-items:center; color:var(--muted); font-size:11px; }
.universal-color-meta button { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:#1d4ed8; font-weight:850; cursor:pointer; padding:0; }
.universal-color-meta .is-error { color:#b42318; }
.universal-color-meta .is-success { color:#166534; }
.cps-global-bar { margin:0 0 18px; display:grid; grid-template-columns:minmax(180px,.8fr) minmax(320px,1.5fr) auto; gap:16px; align-items:center; border:2px solid var(--ink); border-radius:22px; padding:15px 17px; background:linear-gradient(135deg,#dbeafe,#eff6ff 48%,#f5f3ff); box-shadow:5px 5px 0 var(--ink); }
.cps-global-copy span { display:flex; align-items:center; gap:7px; font-weight:950; }
.cps-global-copy p { margin:3px 0 0; color:#475569; font-size:11px; line-height:1.4; }
.cps-global-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cps-global-actions .button { min-height:38px; padding-inline:13px; font-size:11px; }
.palette-code-button { display:grid!important; gap:2px; }
.palette-code-button strong { font-size:11px; }
.palette-code-button small { font-size:9px; opacity:.76; }
.readiness-cps-strip { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.readiness-cps-strip span { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:white; font-size:9px; font-weight:850; }
.readiness-cps-strip i { width:12px; height:12px; border:1px solid var(--ink); border-radius:50%; }
.palette-source-tray button span { display:grid; gap:1px; }
.palette-source-tray button span strong { font-size:10px; }
.palette-source-tray button span small { font-size:8px; opacity:.74; }
.gradient-stop-row .universal-color-input { min-width:240px; }
.gradient-stop-row .universal-color-input label { display:none; }
.gradient-stop-row .universal-color-meta { display:none; }
.gradient-stop-row .universal-color-row { grid-template-columns:minmax(0,1fr) auto; }
.gradient-stop-row .universal-color-swatch { display:none; }
.extracted-color-list article button em { display:block; margin-top:4px; font-size:9px; font-style:normal; opacity:.8; }
.image-cps-action { border:1px solid currentColor!important; border-radius:999px!important; padding:5px 8px!important; font-size:9px!important; font-weight:900!important; width:auto!important; }
.palette-output button small { display:block; font-size:8px; opacity:.75; }
.contrast-universal-grid { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; }
.semantic-source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.semantic-token em { font-style:normal; font-size:9px; opacity:.7; }
.semantic-preview-controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.semantic-state-switcher button { display:inline-flex; align-items:center; gap:5px; }
.semantic-phone-shell { width:min(390px,100%); min-height:690px; margin-inline:auto; border:10px solid var(--ink); border-radius:38px; overflow:hidden; box-shadow:10px 10px 0 rgba(21,21,21,.18); display:grid; grid-template-rows:auto auto 1fr auto; position:relative; }
.semantic-phone-notch { width:110px; height:22px; background:var(--ink); border-radius:0 0 14px 14px; margin:0 auto; }
.semantic-mobile-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid; padding:12px 16px; }
.semantic-mobile-top span { width:10px; height:10px; border-radius:50%; }
.semantic-phone-shell main { padding:16px; display:grid; gap:14px; overflow:hidden; }
.semantic-phone-shell main > header { display:grid; gap:12px; }
.semantic-phone-shell .semantic-cards { grid-template-columns:1fr; }
.semantic-mobile-nav { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid; padding:8px; }
.semantic-mobile-nav button { border:0; background:transparent; font-size:10px; font-weight:850; }
.semantic-mini-chart { height:54px; display:flex; gap:6px; align-items:end; margin-top:14px; }
.semantic-mini-chart i { flex:1; border-radius:6px 6px 2px 2px; min-height:8px; }
.tailwind-web-mockup { display:grid; gap:16px; border:1px solid var(--line); border-radius:22px; padding:18px; background:#f8fafc; }
.compact-segmented { width:auto; }
.tw-browser { --tw-50:#eff6ff; --tw-100:#dbeafe; --tw-200:#bfdbfe; --tw-500:#3b82f6; --tw-600:#2563eb; --tw-700:#1d4ed8; --tw-900:#1e3a8a; --tw-950:#172554; border:2px solid var(--ink); border-radius:18px; overflow:hidden; background:white; box-shadow:7px 7px 0 var(--ink); }
.tw-browser-bar { height:36px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#f1f5f9; border-bottom:1px solid #cbd5e1; }
.tw-browser-bar i { width:9px; height:9px; border-radius:50%; background:var(--tw-500); }
.tw-browser-bar i:nth-child(2){background:var(--tw-200)} .tw-browser-bar i:nth-child(3){background:var(--tw-700)}
.tw-browser-bar span { margin-left:7px; color:#64748b; font-size:9px; }
.tw-site-nav { min-height:58px; display:flex; align-items:center; gap:24px; padding:0 22px; border-bottom:1px solid var(--tw-200); color:var(--tw-950); }
.tw-site-nav nav { display:flex; gap:18px; margin-left:auto; font-size:10px; color:var(--tw-700); }
.tw-site-nav button,.tw-app-shell header button,.tw-landing button { border:0; border-radius:9px; background:var(--tw-600); color:white; padding:9px 13px; font-weight:850; font-size:10px; }
.tw-landing { min-height:390px; display:grid; align-content:center; justify-items:start; gap:13px; padding:44px; background:radial-gradient(circle at 82% 22%,var(--tw-100),transparent 36%),linear-gradient(135deg,var(--tw-50),white); }
.tw-landing > span { color:var(--tw-700); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.tw-landing h4 { max-width:620px; margin:0; color:var(--tw-950); font-size:clamp(28px,5vw,56px); line-height:.96; letter-spacing:-.055em; }
.tw-landing p { max-width:520px; margin:0; color:var(--tw-700); }
.tw-landing > div { display:flex; gap:10px; }
.tw-landing button.secondary { background:white; color:var(--tw-700); border:1px solid var(--tw-200); }
.tw-app-shell { min-height:420px; display:grid; grid-template-columns:150px minmax(0,1fr); }
.tw-app-shell aside { display:grid; align-content:start; gap:7px; padding:18px 12px; background:var(--tw-950); color:var(--tw-100); }
.tw-app-shell aside strong { margin:0 8px 12px; }
.tw-app-shell aside span { padding:8px; border-radius:8px; font-size:10px; color:var(--tw-200); }
.tw-app-shell aside span.active { background:var(--tw-700); color:white; }
.tw-app-shell main { padding:20px; background:var(--tw-50); min-width:0; }
.tw-app-shell header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.tw-app-shell header small { color:var(--tw-700); }
.tw-app-shell header h4 { margin:2px 0 0; color:var(--tw-950); font-size:22px; }
.tw-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.tw-stat-grid article,.tw-chart-card { border:1px solid var(--tw-200); border-radius:12px; background:white; padding:14px; }
.tw-stat-grid article { display:grid; gap:4px; }
.tw-stat-grid small { color:var(--tw-700); }
.tw-stat-grid strong { color:var(--tw-950); font-size:20px; }
.tw-stat-grid span { color:var(--tw-600); font-size:9px; font-weight:850; }
.tw-chart-card { margin-top:10px; display:grid; gap:14px; }
.tw-chart-card > div:first-child { display:flex; justify-content:space-between; color:var(--tw-900); }
.tw-chart-bars { height:170px; display:flex; align-items:end; gap:8px; }
.tw-chart-bars i { flex:1; background:linear-gradient(var(--tw-500),var(--tw-700)); border-radius:5px 5px 2px 2px; min-height:10px; }
.tailwind-mockup-legend { display:flex; gap:8px 14px; flex-wrap:wrap; font-size:10px; color:#475569; }
.tailwind-mockup-legend span { display:inline-flex; align-items:center; gap:5px; }
.tailwind-mockup-legend i { width:13px; height:13px; border:1px solid var(--ink); border-radius:4px; }
.footer-brand { min-width:0; }
.footer-logo-row { display:flex; align-items:center; min-height:42px; overflow:visible; }
.site-footer .footer-logo-row .brand { display:inline-flex; flex-wrap:nowrap; align-items:center; gap:14px; width:max-content; max-width:100%; line-height:1; white-space:nowrap; }
.site-footer .footer-logo-row .brand-mark { flex:0 0 auto; width:42px; height:42px; margin:0 2px 0 1px; }
.site-footer .footer-logo-row .brand > span:last-child { display:block; padding-top:1px; }
.footer-brand p { margin:20px 0 8px; overflow-wrap:anywhere; }

@media (max-width: 900px) {
  .cps-global-bar { grid-template-columns:1fr; }
  .cps-global-actions { justify-content:flex-start; }
  .semantic-source-grid { grid-template-columns:1fr; }
  .gradient-stop-row .universal-color-input { min-width:180px; }
}
@media (max-width: 680px) {
  .universal-color-row,.universal-color-input.is-compact .universal-color-row { grid-template-columns:34px minmax(0,1fr); }
  .universal-color-row > .button { grid-column:1 / -1; width:100%; }
  .contrast-universal-grid { grid-template-columns:1fr; }
  .contrast-universal-grid .swap-button { justify-self:center; transform:rotate(90deg); }
  .semantic-preview-controls { justify-content:flex-start; }
  .semantic-phone-shell { min-height:620px; }
  .tw-site-nav nav { display:none; }
  .tw-app-shell { grid-template-columns:92px minmax(0,1fr); }
  .tw-app-shell aside { padding:14px 7px; }
  .tw-stat-grid { grid-template-columns:1fr; }
  .tw-chart-bars { height:110px; }
  .tw-landing { padding:28px 20px; }
  .gradient-stop-row .universal-color-input { min-width:100%; grid-column:1 / -1; }
  .site-footer .footer-logo-row .brand { gap:11px; font-size:19px; }
}

/* v1.9 research hub, citation-ready data pages, and CPS input editing fix */
.research-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0; }
.research-stat-grid article { min-width:0; border:2px solid var(--ink); border-radius:18px; padding:17px; background:#fff; box-shadow:4px 4px 0 var(--ink); display:grid; gap:5px; }
.research-stat-grid strong { font-size:clamp(25px,3vw,38px); letter-spacing:-.05em; line-height:1; }
.research-stat-grid span { color:var(--muted); font-size:11px; font-weight:850; line-height:1.45; }
.citation-box { margin:18px 0; border:1px solid var(--line); border-left:6px solid var(--blue); border-radius:14px; padding:15px 17px; background:#eff6ff; overflow:auto; }
.citation-box code { display:block; white-space:normal; overflow-wrap:anywhere; font-size:13px; line-height:1.65; }
.code-anatomy { display:grid; grid-template-columns:1.25fr .75fr 1fr .65fr; gap:8px; margin:20px 0; }
.code-anatomy span { display:grid; place-items:center; min-height:96px; border:2px solid var(--ink); border-radius:17px; background:white; box-shadow:4px 4px 0 var(--ink); }
.code-anatomy strong { font:950 clamp(22px,4vw,36px) ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-anatomy small { color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.family-registry { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.family-registry article { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center; border:1px solid var(--line); border-radius:13px; padding:10px 11px; background:#fff; }
.family-registry strong { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--ink); color:white; font:900 11px ui-monospace,monospace; }
.family-registry span { min-width:0; font-weight:900; }
.family-registry code { color:var(--muted); font-size:10px; }
.registry-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:white; }
.research-table { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }
.research-table th,.research-table td { padding:12px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.5; }
.research-table th { background:#f7f2e9; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.research-table tr:last-child td { border-bottom:0; }
.download-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.download-card { min-width:0; border:2px solid var(--ink); border-radius:18px; padding:17px; background:white; box-shadow:4px 4px 0 var(--ink); display:grid; gap:6px; text-decoration:none!important; }
.download-card:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink); }
.download-card strong { font-size:17px; }
.download-card span { color:var(--muted); font-size:12px; }
.download-card code { overflow-wrap:anywhere; font-size:10px; }
.dataset-sample-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0; }
.dataset-sample-grid article { min-width:0; border:1px solid var(--line); border-radius:16px; padding:12px; background:white; display:grid; gap:5px; }
.dataset-sample-grid i { display:block; height:72px; border:1px solid rgba(0,0,0,.14); border-radius:11px; }
.dataset-sample-grid strong { font:900 12px ui-monospace,monospace; }
.dataset-sample-grid span { min-height:34px; font-size:12px; font-weight:800; }
.dataset-sample-grid code { color:var(--muted); font-size:10px; }
.trust-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:980px) {
  .research-stat-grid,.dataset-sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .family-registry { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .download-card-grid { grid-template-columns:1fr; }
  .trust-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .research-stat-grid,.dataset-sample-grid,.family-registry,.trust-card-grid { grid-template-columns:1fr; }
  .code-anatomy { grid-template-columns:1fr 1fr; }
  .code-anatomy span { min-height:82px; }
}

/* Color Converter and Palette Readiness v2.0 */
.converter-page{padding-top:34px;padding-bottom:72px}.breadcrumbs{display:flex;gap:9px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:22px}.breadcrumbs a{color:inherit}.tool-page-hero{max-width:920px;margin-bottom:28px}.tool-page-hero h1{font-size:clamp(2.5rem,6vw,4.8rem);letter-spacing:-.06em;line-height:.95;margin:9px 0 18px}.tool-page-hero p{font-size:1.08rem;line-height:1.75;color:var(--muted)}
.converter-shell{display:block}.converter-stack{display:grid;gap:22px}.converter-input-card,.converter-results,.converter-cps-card,.converter-print-card,.converter-batch-card,.benchmark-card,.before-after-panel{border:1px solid var(--line);border-radius:28px;background:var(--surface);padding:24px;box-shadow:0 12px 36px rgba(35,30,24,.07)}.converter-input-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fffdfd 0%,#fffef9 100%)}.converter-input-card::before{content:"";position:absolute;inset:auto -80px -110px auto;width:220px;height:220px;border-radius:50%;background:rgba(37,99,235,.10)}.converter-input-card::after{content:"";position:absolute;inset:-90px auto auto -70px;width:180px;height:180px;border-radius:50%;background:rgba(255,77,141,.10)}.converter-input-card>*{position:relative;z-index:1}.converter-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 22px}.converter-guide-grid article{border:2px solid var(--ink);border-radius:18px;padding:15px 16px;background:#fff;box-shadow:4px 4px 0 var(--ink)}.converter-guide-grid strong{display:block;font-size:.95rem;letter-spacing:-.02em}.converter-guide-grid p{margin:5px 0 0;color:var(--muted);font-size:.86rem}.converter-entry-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.converter-entry-main{display:grid;gap:0}.converter-picker-card{border:2px solid var(--ink);border-radius:22px;background:linear-gradient(135deg,#eef6ff 0%,#fff5fb 100%);padding:18px;box-shadow:6px 6px 0 var(--ink);display:grid;gap:16px}.converter-picker-card small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}.converter-picker-card strong{display:block;font-size:1.08rem;letter-spacing:-.03em;margin-top:2px}.converter-picker-card p{margin:6px 0 0;color:#4f4a44;font-size:.9rem}.converter-picker-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center}.converter-picker-row input[type="color"]{width:78px;height:78px;border:2px solid var(--ink);border-radius:20px;padding:4px;background:#fff;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}.converter-picker-row span{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.converter-picker-row code{display:block;margin-top:4px;font-size:1rem;font-weight:900}.converter-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.converter-input-row input,.converter-batch-card textarea,.converter-profile-controls select,.readiness-controls select{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:16px;padding:15px 16px;font:inherit}.field-label{display:block;font-weight:850;font-size:.86rem;margin:0 0 8px}.converter-help-text{margin:10px 0 0;color:var(--muted);font-size:.85rem}.converter-example-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.converter-example-chip{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;font-size:.78rem;font-weight:800;cursor:pointer;transition:transform .15s ease, background .15s ease}.converter-example-chip:hover{transform:translateY(-1px);background:#f8fafc}.converter-alpha{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:18px;font-size:.85rem}.converter-alpha input{width:100%;accent-color:var(--blue)}.converter-detected{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.converter-detected small{display:block;color:var(--muted)}.converter-swatch{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .25)}.converter-error{margin-top:16px;border-radius:14px;padding:13px 15px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.converter-preview-grid{display:grid;grid-template-columns:1fr 1fr .72fr;gap:16px}.converter-preview-grid article{min-height:190px;border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;justify-content:center;border:1px solid var(--line);overflow:hidden;box-shadow:0 8px 24px rgba(35,30,24,.05)}.converter-preview-light{background:#fff}.converter-preview-dark{background:#111827}.converter-preview-grid button{border:0;border-radius:10px;padding:11px 14px;font-weight:750;width:max-content}.converter-mobile-card{display:flex;gap:10px;align-items:center;border:2px solid;border-radius:14px;padding:12px;background:rgb(255 255 255 / .08)}.converter-mobile-card span{width:28px;height:28px;border-radius:9px}.converter-preview-alpha{background-image:linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.converter-preview-alpha div{height:86px;border-radius:14px}.converter-group{margin-top:22px}.converter-group-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.converter-group-head h4{margin:0}.converter-group-head span{padding:6px 10px;border-radius:999px;background:#faf4d0;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.converter-output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.converter-output-grid article{display:grid;grid-template-columns:44px 126px minmax(0,1fr) 34px;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:13px;background:#fff}.format-preview{width:44px;height:44px;border-radius:14px;border:1px solid rgba(21,21,21,.08);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .25)}.converter-output-grid small{display:block;color:var(--muted);font-size:.68rem;line-height:1.35}.converter-output-grid code{white-space:nowrap;overflow:auto;padding-bottom:3px;font-size:.88rem}.converter-output-grid button{border:0;background:transparent;color:var(--muted);cursor:pointer}.converter-cps-card,.converter-print-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}.converter-cps-compare{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.converter-cps-compare>div{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fffaf0}.converter-cps-compare small,.converter-cps-compare code{grid-column:2}.converter-cps-compare span{grid-row:1 / span 2;width:38px;height:38px;border-radius:12px;border:1px solid var(--line)}.converter-match-score{min-width:170px;text-align:center;padding:18px;border-radius:20px;background:linear-gradient(180deg,#fff8dd 0%,#fff1b2 100%);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}.converter-match-score strong{display:block;font-size:2.4rem}.converter-match-score span,.converter-match-score small{display:block;color:#5b5344}.converter-profile-controls{min-width:280px;display:grid;gap:10px}.converter-profile-controls label{font-size:.8rem;font-weight:700}.converter-profile-controls select{margin-top:5px}.converter-cmyk-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.cmyk-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:999px;font-size:.74rem;font-weight:900;border:1px solid rgba(21,21,21,.1)}.cmyk-chip-c{background:#cffafe;color:#155e75}.cmyk-chip-m{background:#fce7f3;color:#9d174d}.cmyk-chip-y{background:#fef3c7;color:#92400e}.cmyk-chip-k{background:#e5e7eb;color:#111827}.converter-actions,.readiness-export-actions{display:flex;flex-wrap:wrap;gap:10px}.converter-batch-meta{display:flex;flex-wrap:wrap;gap:8px}.converter-batch-meta span{padding:7px 10px;border-radius:999px;background:#eef6ff;font-size:.73rem;font-weight:900}.converter-batch-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.converter-batch-card textarea{resize:vertical}.converter-batch-table{display:grid;margin-top:14px;border:1px solid var(--line);border-radius:18px;overflow:auto}.converter-batch-table>div{display:grid;grid-template-columns:110px 1fr .95fr 1.3fr .9fr;gap:12px;padding:12px 14px;min-width:880px;border-bottom:1px solid var(--line);align-items:center}.converter-batch-table>div:last-child{border-bottom:0}.converter-batch-head{background:#f9fafb;font-weight:850}.converter-batch-preview{display:flex;align-items:center;gap:10px}.converter-batch-preview span{display:block;width:54px;height:54px;border-radius:16px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3)}.privacy-inline{display:flex;gap:12px;align-items:flex-start;border-radius:16px;background:#ecfdf5;color:#065f46;padding:16px;border:1px solid #bbf7d0}.converter-support{margin-top:48px}.related-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.related-links a{border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:700;background:#fff}.notice-card{border-left:4px solid var(--primary);padding:16px 18px;background:var(--soft);border-radius:12px}
@media(max-width:900px){.converter-guide-grid,.converter-entry-layout,.converter-preview-grid{grid-template-columns:1fr}.converter-output-grid{grid-template-columns:1fr}.converter-cps-card,.converter-print-card{grid-template-columns:1fr}.readiness-controls{grid-template-columns:1fr 1fr}.readiness-hero-v2{grid-template-columns:auto 1fr}.readiness-summary-stats{grid-column:1/-1}.readiness-web-preview header nav{display:none}.readiness-web-body{grid-template-columns:1fr}.readiness-web-body aside{display:none}.history-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.converter-input-row{grid-template-columns:1fr}.converter-output-grid article{grid-template-columns:42px 1fr 28px;align-items:start}.converter-output-grid article>div{grid-column:2}.converter-output-grid code{grid-column:1/-2;grid-row:2;padding-top:4px}.format-preview{grid-row:1 / span 2}.converter-actions .button,.readiness-export-actions .button{width:100%;justify-content:center}.related-links,.support-card-grid,.readiness-dimension-grid{grid-template-columns:1fr}.readiness-controls{grid-template-columns:1fr}.readiness-hero-v2{grid-template-columns:1fr;text-align:center}.readiness-ring{margin:auto}.readiness-summary-stats{grid-template-columns:1fr 1fr}.evidence-list article{grid-template-columns:1fr}.evidence-swatches{justify-content:flex-start}.readiness-web-preview header{flex-wrap:wrap}.readiness-web-preview header button{width:100%}.readiness-web-cards{grid-template-columns:1fr}.component-state-grid{grid-template-columns:1fr}.before-after-panel{grid-template-columns:1fr}.before-after-arrow{transform:rotate(90deg)}.fix-plan article{grid-template-columns:32px 1fr}.fix-plan em{grid-column:2}.history-list{grid-template-columns:1fr}.converter-profile-controls{min-width:0}.converter-guide-grid article,.converter-picker-card{box-shadow:3px 3px 0 var(--ink)}.converter-batch-table>div{grid-template-columns:90px 1fr .95fr 1.1fr .9fr;min-width:760px}}
.readiness-v2{gap:22px}.readiness-controls{display:grid;grid-template-columns:1fr 1fr auto auto;gap:12px;align-items:end}.readiness-controls label{font-size:.78rem;font-weight:750}.readiness-controls select{display:block;margin-top:6px}.readiness-hero-v2{grid-template-columns:auto minmax(0,1fr) auto}.readiness-summary-stats{display:grid;grid-template-columns:repeat(2,minmax(105px,1fr));gap:8px}.readiness-summary-stats span{padding:11px;border-radius:13px;background:var(--soft);font-size:.72rem}.readiness-summary-stats strong{display:block;font-size:1.05rem}.score-cap-notice{border:1px solid #fdba74;background:#fff7ed;color:#9a3412;border-radius:16px;padding:14px 16px}.score-cap-notice p{margin:4px 0 0}.readiness-dimension-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.readiness-dimension-grid article{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:15px}.readiness-dimension-grid article>div{display:flex;justify-content:space-between;gap:10px}.readiness-dimension-grid progress{width:100%;margin:10px 0}.readiness-dimension-grid small{color:var(--muted)}.evidence-list{display:grid;gap:11px}.evidence-list article{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;border:1px solid var(--line);border-radius:16px;padding:15px}.evidence-label{text-transform:uppercase;font-size:.67rem;font-weight:850;letter-spacing:.08em}.evidence-critical{border-left:5px solid #dc2626!important}.evidence-high{border-left:5px solid #f97316!important}.evidence-medium{border-left:5px solid #eab308!important}.evidence-low{border-left:5px solid #3b82f6!important}.evidence-pass{border-left:5px solid #16a34a!important}.evidence-swatches{display:flex;gap:5px}.evidence-swatches i{width:30px;height:30px;border-radius:9px;border:1px solid var(--line)}.readiness-preview-tabs{display:flex;flex-wrap:wrap;gap:7px}.readiness-preview-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 11px;text-transform:capitalize;cursor:pointer}.readiness-preview-tabs button.active{background:var(--text);color:var(--surface)}.readiness-web-preview{border:1px solid var(--line);border-radius:22px;overflow:hidden}.readiness-web-preview header{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid}.readiness-web-preview header nav{margin-left:auto;font-size:.78rem}.readiness-web-preview header button{border:0;border-radius:9px;padding:9px 12px}.readiness-web-body{display:grid;grid-template-columns:190px 1fr;min-height:320px}.readiness-web-body aside{padding:18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid rgb(127 127 127 / .18)}.readiness-web-body main{padding:28px}.readiness-web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.readiness-web-cards article{border:1px solid rgb(127 127 127 / .2);border-radius:14px;padding:16px}.readiness-web-cards strong{font-size:1.8rem}.readiness-phone{width:min(360px,100%);margin:auto;border:10px solid #111827;border-radius:38px;min-height:590px;overflow:hidden;box-shadow:0 24px 70px rgb(15 23 42 / .22)}.readiness-phone-notch{width:110px;height:22px;background:#111827;border-radius:0 0 16px 16px;margin:auto}.readiness-phone header{display:flex;justify-content:space-between;padding:16px}.readiness-phone main{padding:22px}.readiness-phone article{margin-top:18px;border-radius:18px;padding:18px}.readiness-phone button{border:0;border-radius:12px;padding:12px 14px;width:100%;font-weight:750}.readiness-mobile-actions{position:relative;margin-top:210px;display:flex;justify-content:space-between;font-size:.7rem;border-top:1px solid rgb(127 127 127 / .25);padding-top:14px}.component-state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.component-state-grid article{border:1px solid var(--line);border-radius:15px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}.component-state-grid button{border:0;border-radius:9px;padding:10px 13px}.state-ready,.status-pass{color:#15803d}.state-risk,.status-risk{color:#b45309}.state-missing{color:#b91c1c}.vision-audit-table{overflow:auto;border:1px solid var(--line);border-radius:16px}.vision-audit-table>div{display:grid;grid-template-columns:1.5fr repeat(5,.75fr);gap:10px;padding:11px 13px;min-width:720px;border-bottom:1px solid var(--line)}.vision-audit-table>div:first-child{background:var(--soft)}.role-coverage-list{display:flex;flex-wrap:wrap;gap:8px}.role-coverage-list span{border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:.75rem}.semantic-conflicts{display:grid;gap:9px;margin-top:14px}.semantic-conflicts article{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px}.semantic-conflicts i{width:38px;height:38px;border-radius:11px}.before-after-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}.before-after-panel>div:not(.before-after-arrow){text-align:center}.before-after-panel strong{display:block;font-size:2rem}.before-after-panel p{grid-column:1/-1;text-align:center}.mini-palette{display:flex;justify-content:center;margin-top:8px}.mini-palette i{width:28px;height:28px}.before-after-arrow{font-size:2rem}.fix-plan{display:grid;gap:10px}.fix-plan article{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:13px;align-items:start;border:1px solid var(--line);border-radius:15px;padding:14px}.fix-plan article>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:800}.fix-plan small,.fix-plan strong{display:block}.fix-plan em{font-style:normal;font-size:.72rem;color:var(--muted)}.benchmark-card{display:grid;gap:14px}.benchmark-meter{height:12px;background:var(--soft);border-radius:999px;overflow:hidden}.benchmark-meter i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#8b5cf6);border-radius:inherit}.history-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.history-list article{border:1px solid var(--line);border-radius:14px;padding:13px}.history-list time,.history-list span{display:block;font-size:.72rem;color:var(--muted)}.history-list strong{font-size:1.3rem}.support-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.support-card-grid article{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface)}
@media(max-width:900px){.converter-preview-grid{grid-template-columns:1fr}.converter-output-grid{grid-template-columns:1fr}.converter-cps-card,.converter-print-card{grid-template-columns:1fr}.readiness-controls{grid-template-columns:1fr 1fr}.readiness-hero-v2{grid-template-columns:auto 1fr}.readiness-summary-stats{grid-column:1/-1}.readiness-web-preview header nav{display:none}.readiness-web-body{grid-template-columns:1fr}.readiness-web-body aside{display:none}.history-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.converter-input-row{grid-template-columns:1fr}.converter-output-grid article{grid-template-columns:72px minmax(0,1fr) 28px}.converter-actions .button,.readiness-export-actions .button{width:100%;justify-content:center}.related-links,.support-card-grid,.readiness-dimension-grid{grid-template-columns:1fr}.readiness-controls{grid-template-columns:1fr}.readiness-hero-v2{grid-template-columns:1fr;text-align:center}.readiness-ring{margin:auto}.readiness-summary-stats{grid-template-columns:1fr 1fr}.evidence-list article{grid-template-columns:1fr}.evidence-swatches{justify-content:flex-start}.readiness-web-preview header{flex-wrap:wrap}.readiness-web-preview header button{width:100%}.readiness-web-cards{grid-template-columns:1fr}.component-state-grid{grid-template-columns:1fr}.before-after-panel{grid-template-columns:1fr}.before-after-arrow{transform:rotate(90deg)}.fix-plan article{grid-template-columns:32px 1fr}.fix-plan em{grid-column:2}.history-list{grid-template-columns:1fr}.converter-profile-controls{min-width:0}}

/* v2.0.3 converter inputs, compatibility cards, and sitewide donation */
:root {
  --border: var(--line);
  --text: var(--ink);
  --soft: var(--paper-2);
  --primary: var(--blue);
}

.converter-method-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 14px;
}
.converter-method-tabs button {
  min-width: 0;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: white;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.converter-method-tabs button:hover { transform: translateY(-2px); border-color: var(--ink); }
.converter-method-tabs button.active {
  border: 2px solid var(--ink);
  background: #fff4b8;
  box-shadow: 4px 4px 0 var(--ink);
}
.converter-method-tabs strong,
.converter-method-tabs small { display: block; }
.converter-method-tabs strong { font-size: .92rem; letter-spacing: -.02em; }
.converter-method-tabs small { margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.converter-method-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
  padding: 18px;
}
.converter-code-entry { min-width: 0; }
.converter-channel-section { display: grid; gap: 14px; }
.converter-method-copy strong { display: block; font-size: 1.05rem; }
.converter-method-copy p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; }
.converter-channel-grid { display: grid; gap: 10px; }
.converter-rgb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.converter-cmyk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.converter-channel-field {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 9px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  overflow: hidden;
}
.converter-channel-field::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--channel-color, var(--blue));
}
.converter-channel-field > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--channel-soft, #dbeafe);
  color: var(--channel-ink, #1e40af);
  font-weight: 950;
}
.converter-channel-field input {
  min-width: 0;
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 10px;
  background: #fff;
  font-weight: 850;
}
.converter-channel-field small { grid-column: 2; color: var(--muted); font-size: .68rem; }
.channel-r { --channel-color:#ef4444; --channel-soft:#fee2e2; --channel-ink:#991b1b; }
.channel-g { --channel-color:#22c55e; --channel-soft:#dcfce7; --channel-ink:#166534; }
.channel-b { --channel-color:#2563eb; --channel-soft:#dbeafe; --channel-ink:#1e40af; }
.channel-c { --channel-color:#06b6d4; --channel-soft:#cffafe; --channel-ink:#155e75; }
.channel-m { --channel-color:#ec4899; --channel-soft:#fce7f3; --channel-ink:#9d174d; }
.channel-y { --channel-color:#eab308; --channel-soft:#fef3c7; --channel-ink:#854d0e; }
.channel-k { --channel-color:#111827; --channel-soft:#e5e7eb; --channel-ink:#111827; }
.converter-live-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 13px;
  background: #111827;
  color: white;
  padding: 11px 13px;
}
.converter-live-code span { color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.converter-live-code code { overflow-wrap: anywhere; text-align: right; }
.converter-modern-picker {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: stretch;
}
.converter-picker-stage {
  position: relative;
  min-height: 210px;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(135deg, #dbeafe, #fce7f3 48%, #fef3c7);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.converter-picker-stage input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.converter-picker-orb {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: white;
  box-shadow: 5px 5px 0 var(--ink), inset 0 0 0 7px rgba(255,255,255,.25);
  margin-bottom: 15px;
}
.converter-picker-stage strong { font-size: 1rem; }
.converter-picker-stage small { margin-top: 4px; color: #4f4a44; }
.converter-picker-details {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.converter-picker-details > span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.converter-picker-details > code { margin-top: 4px; font-size: clamp(1.6rem, 4vw, 2.55rem); font-weight: 950; letter-spacing: -.06em; }
.converter-picker-details p { margin: 14px 0 0; color: var(--muted); font-size: .84rem; }
.converter-picker-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.converter-picker-presets button {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: transform .15s ease;
}
.converter-picker-presets button:hover { transform: translateY(-3px) rotate(-3deg); }
.converter-example-row > span { align-self: center; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

.readiness-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 42px;
  border: 2px solid;
  border-radius: 12px;
  padding: 9px 14px;
  font-size: .84rem;
  font-weight: 900;
  box-shadow: 3px 3px 0 currentColor;
}
.readiness-primary-action-full { width: 100%; margin-top: 10px; box-shadow: none; }
.readiness-preview-section {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
  padding: 20px;
}
.readiness-preview-section > .subhead-row { align-items: center; }
.readiness-preview-tabs button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 850;
}
.readiness-preview-tabs button.active {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.readiness-web-preview { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.readiness-web-preview header { min-width: 0; }
.readiness-web-preview header > strong,
.readiness-web-preview header nav { min-width: 0; }
.readiness-web-cards article { min-width: 0; }

.compatibility-section {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  padding: 20px;
}
.compatibility-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 15px;
  background: #eff6ff;
}
.compatibility-summary strong { font-size: 1.45rem; }
.compatibility-summary span { font-weight: 900; }
.compatibility-summary small { margin-left: auto; color: var(--muted); }
.compatibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.compatibility-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 7px 20px rgba(35,30,24,.05);
}
.compatibility-card.is-safe { border-top: 5px solid #16a34a; }
.compatibility-card.is-limited { border-top: 5px solid #eab308; }
.compatibility-card.is-unsafe { border-top: 5px solid #ef4444; }
.compatibility-pair-preview {
  min-height: 116px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  border-bottom: 1px solid rgba(21,21,21,.1);
}
.compatibility-pair-preview strong { font-size: 2.45rem; line-height: 1; }
.compatibility-pair-preview > span { font-size: 1rem; font-weight: 950; }
.compatibility-pair-preview small {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #111827;
  padding: 5px 8px;
  font: 750 .65rem ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.compatibility-card-body { display: grid; gap: 12px; padding: 14px; }
.compatibility-ratio,
.compatibility-use { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compatibility-ratio span,
.compatibility-use span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.compatibility-ratio strong { font-size: 1.4rem; }
.compatibility-use strong { text-align: right; font-size: .82rem; }
.compatibility-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.compatibility-badges span { padding: 6px 8px; border-radius: 999px; font-size: .68rem; font-weight: 900; }
.compatibility-badges .pass { background: #dcfce7; color: #166534; }
.compatibility-badges .fail { background: #fee2e2; color: #991b1b; }
.compatibility-copy {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 850;
  cursor: pointer;
}
.compatibility-empty { border: 1px dashed var(--line); border-radius: 18px; padding: 28px; text-align: center; color: var(--muted); }

.sitewide-donation-section {
  padding: 28px 0 54px;
  background: linear-gradient(180deg, transparent 0%, #f6f0e6 100%);
}
.donation-widget-sitewide {
  display: grid;
  grid-template-columns: auto 190px minmax(0, 1fr) auto;
  grid-template-areas:
    "sticker swatches title button"
    "sticker swatches copy button"
    "sticker swatches note button";
  align-items: center;
  gap: 4px 20px;
  padding: 20px 22px;
  background: linear-gradient(105deg, #fff5b8 0%, #fff9d8 54%, #ffe5f0 100%);
}
.donation-widget-sitewide .donation-sticker { grid-area: sticker; writing-mode: vertical-rl; transform: rotate(180deg); }
.donation-widget-sitewide .donation-swatches { grid-area: swatches; width: 190px; margin: 0; }
.donation-widget-sitewide h3 { grid-area: title; margin: 0; }
.donation-widget-sitewide p { grid-area: copy; margin: 2px 0; max-width: 620px; }
.donation-widget-sitewide .donation-button,
.donation-widget-sitewide .donation-link-status { grid-area: button; width: auto; min-width: 210px; }
.donation-widget-sitewide small { grid-area: note; margin: 2px 0 0; }

@media (max-width: 1100px) {
  .converter-method-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donation-widget-sitewide { grid-template-columns: 160px minmax(0, 1fr) auto; grid-template-areas: "swatches title button" "swatches copy button" "swatches note button"; }
  .donation-widget-sitewide .donation-sticker { display: none; }
  .donation-widget-sitewide .donation-swatches { width: 160px; }
}
@media (max-width: 900px) {
  .converter-modern-picker { grid-template-columns: 1fr; }
  .converter-picker-stage { min-height: 190px; }
  .compatibility-grid { grid-template-columns: 1fr; }
  .readiness-web-preview header { flex-wrap: wrap; }
  .readiness-primary-action { margin-left: auto; }
  .donation-widget-sitewide { grid-template-columns: 130px minmax(0, 1fr); grid-template-areas: "swatches title" "swatches copy" "button button" "note note"; }
  .donation-widget-sitewide .donation-swatches { width: 130px; }
  .donation-widget-sitewide .donation-button,
  .donation-widget-sitewide .donation-link-status { width: 100%; margin-top: 10px; }
}
@media (max-width: 680px) {
  .converter-method-tabs { grid-template-columns: 1fr 1fr; }
  .converter-method-tabs button { min-height: 70px; padding: 11px; }
  .converter-rgb-grid,
  .converter-cmyk-grid { grid-template-columns: 1fr 1fr; }
  .converter-live-code { align-items: flex-start; flex-direction: column; }
  .converter-live-code code { text-align: left; }
  .converter-modern-picker { gap: 12px; }
  .converter-picker-details { padding: 16px; }
  .converter-example-row > span { width: 100%; }
  .readiness-preview-section,
  .compatibility-section { padding: 14px; border-radius: 20px; }
  .readiness-preview-section > .subhead-row,
  .compatibility-section > .subhead-row { align-items: flex-start; flex-direction: column; }
  .readiness-preview-tabs { width: 100%; overflow-x: auto; padding: 3px 3px 7px; flex-wrap: nowrap; }
  .readiness-preview-tabs button { flex: 0 0 auto; }
  .readiness-primary-action { width: 100%; margin-left: 0; }
  .readiness-web-preview header nav { display: none; }
  .readiness-web-body main { padding: 18px; }
  .compatibility-summary { align-items: flex-start; flex-wrap: wrap; }
  .compatibility-summary small { width: 100%; margin-left: 0; }
  .compatibility-pair-preview { min-height: 104px; }
  .donation-widget-sitewide { display: block; padding: 18px; }
  .donation-widget-sitewide .donation-swatches { width: 100%; height: 42px; margin: 14px 0; }
  .donation-widget-sitewide h3 { font-size: 22px; }
  .donation-widget-sitewide .donation-button,
  .donation-widget-sitewide .donation-link-status { min-width: 0; }
}
@media (max-width: 420px) {
  .converter-method-tabs { grid-template-columns: 1fr; }
  .converter-rgb-grid,
  .converter-cmyk-grid { grid-template-columns: 1fr; }
  .converter-channel-field { grid-template-columns: 38px 1fr; }
  .compatibility-ratio,
  .compatibility-use { align-items: flex-start; flex-direction: column; }
  .compatibility-use strong { text-align: left; }
}

/* Homepage hierarchy refresh — v2.0.4 */
.home-hero-actions{align-items:center}.home-hero-quick-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px}.home-hero-quick-links a{display:inline-flex;align-items:center;gap:7px;color:#4f4a44;font-size:13px;font-weight:850;text-decoration:underline;text-decoration-color:rgba(79,74,68,.28);text-underline-offset:4px}.home-hero-quick-links a:hover{text-decoration-color:currentColor}
.home-essential-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-essential-card{grid-column:auto;min-height:245px}.home-essential-card:nth-child(1){background:#dbeafe}.home-essential-card:nth-child(2){background:#fef3c7}.home-essential-card:nth-child(3){background:#ccfbf1}.home-essential-card:nth-child(4){background:#fce7f3}.home-essential-card:nth-child(5){background:#ede9fe}.home-essential-card:nth-child(6){background:#ffedd5}
.home-tool-directory{margin-top:28px;border:2px solid var(--ink);border-radius:26px;background:#fff;padding:24px;box-shadow:7px 7px 0 var(--ink)}.home-directory-intro{display:flex;align-items:end;justify-content:space-between;gap:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}.home-directory-intro h3{margin:5px 0 0;font-size:clamp(25px,3vw,36px);letter-spacing:-.045em}.home-tool-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}.home-tool-link{min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.home-tool-link:nth-last-child(-n+3){border-bottom:0}.home-tool-link-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2)}.home-tool-link strong,.home-tool-link small{display:block}.home-tool-link strong{font-size:14px;letter-spacing:-.015em}.home-tool-link small{margin-top:2px;color:var(--muted);font-size:11px;line-height:1.35}.home-tool-link>svg{color:var(--muted);transition:transform .16s ease}.home-tool-link:hover>svg{transform:translateX(3px)}
.home-section-action{margin-top:16px}.home-palettes-section .palette-card{box-shadow:0 9px 30px rgba(35,30,24,.06)}
.home-workflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid rgba(255,255,255,.18);border-radius:26px;background:rgba(255,255,255,.07);overflow:hidden}.home-workflow li{position:relative;min-width:0;padding:24px 42px 24px 20px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;border-right:1px solid rgba(255,255,255,.14)}.home-workflow li:last-child{border-right:0}.home-workflow-number{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-weight:950}.home-workflow strong{display:block;font-size:19px}.home-workflow p{margin:5px 0 0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.5}.home-workflow-arrow{position:absolute;right:12px;top:33px;color:rgba(255,255,255,.46)}.home-workflow-action{margin-top:28px}
.home-projects-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:start}.home-projects-layout h2{font-size:clamp(38px,5vw,58px);line-height:1.02;letter-spacing:-.055em;margin:10px 0 0}.home-projects-layout>p{margin:8px 0 0;color:#4b4741;font-size:17px;line-height:1.75}
.home-trust-panel{overflow:hidden;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);border:2px solid var(--ink);border-radius:30px;background:#fff;box-shadow:9px 9px 0 var(--ink)}.home-trust-copy{padding:34px;background:linear-gradient(145deg,#fff4bd 0%,#ffe8f1 100%);border-right:2px solid var(--ink)}.home-trust-copy h2{font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.055em;margin:10px 0 16px}.home-trust-copy p{margin:0;color:#4b4741;line-height:1.7}.home-trust-links{display:grid;padding:12px 28px}.home-trust-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:19px 2px;border-bottom:1px solid var(--line)}.home-trust-links a:last-child{border-bottom:0}.home-trust-links strong,.home-trust-links small{display:block}.home-trust-links strong{font-size:18px;letter-spacing:-.025em}.home-trust-links small{margin-top:3px;color:var(--muted);line-height:1.45}.home-trust-links svg{color:var(--muted);transition:transform .16s ease}.home-trust-links a:hover svg{transform:translateX(4px)}
@media(max-width:980px){.home-essential-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-tool-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-tool-link:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.home-tool-link:nth-last-child(-n+2){border-bottom:0}.home-workflow{grid-template-columns:1fr}.home-workflow li{grid-template-columns:42px minmax(0,1fr);padding:18px 54px 18px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.home-workflow li:last-child{border-bottom:0}.home-workflow-arrow{right:20px;top:27px;transform:rotate(90deg)}.home-projects-layout{grid-template-columns:1fr;gap:18px}.home-trust-panel{grid-template-columns:1fr}.home-trust-copy{border-right:0;border-bottom:2px solid var(--ink)}}
@media(max-width:640px){.home-hero-actions{display:grid;grid-template-columns:1fr}.home-hero-actions .hero-primary-action,.home-hero-actions .hero-secondary-action{width:100%;min-width:0}.home-hero-quick-links{display:grid;gap:9px;margin-top:15px}.home-essential-grid{grid-template-columns:1fr}.home-essential-card{min-height:220px}.home-tool-directory{padding:18px;box-shadow:5px 5px 0 var(--ink)}.home-directory-intro{align-items:start;flex-direction:column}.home-directory-intro .button{width:100%}.home-tool-link-grid{grid-template-columns:1fr}.home-tool-link:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.home-tool-link:last-child{border-bottom:0}.home-palettes-section .section-head{align-items:start}.home-workflow li{padding-right:46px}.home-projects-layout>p{font-size:15px}.home-trust-panel{box-shadow:6px 6px 0 var(--ink)}.home-trust-copy{padding:25px 22px}.home-trust-links{padding:8px 20px}.home-trust-links a{padding:17px 0}.home-trust-links strong{font-size:16px}.home-trust-links small{font-size:12px}}

/* v2.0.5 — in-page modern color picker */
.converter-custom-picker-panel { display:grid; gap:16px; }
.converter-custom-picker-copy { max-width:760px; }
.converter-custom-picker-copy h3 { margin:7px 0 5px; font-size:1.25rem; letter-spacing:-.035em; }
.converter-custom-picker-copy p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.55; }
.modern-color-picker { display:grid; grid-template-columns:minmax(300px,1.25fr) minmax(280px,.75fr); gap:18px; align-items:stretch; }
.modern-picker-canvas-wrap,.modern-picker-controls { border:1px solid var(--line); border-radius:22px; background:#fff; padding:16px; }
.modern-picker-canvas-wrap { display:grid; gap:15px; background:linear-gradient(145deg,#f8fbff 0%,#fff 58%,#fff9e6 100%); }
.modern-picker-canvas { position:relative; min-height:290px; border:2px solid var(--ink); border-radius:18px; cursor:crosshair; touch-action:none; overflow:hidden; box-shadow:5px 5px 0 var(--ink); }
.modern-picker-canvas::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px); background-size:14px 14px; pointer-events:none; opacity:.35; }
.modern-picker-cursor { position:absolute; z-index:2; width:26px; height:26px; border:4px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #111827,0 5px 14px rgba(15,23,42,.34); transform:translate(-50%,-50%); pointer-events:none; }
.modern-picker-hue-row { display:grid; grid-template-columns:auto minmax(0,1fr) 46px; gap:12px; align-items:center; }
.modern-picker-hue-row>span { font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.modern-picker-hue-row input[type="range"] { width:100%; height:14px; border-radius:999px; appearance:none; background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:pointer; }
.modern-picker-hue-row input[type="range"]::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border:3px solid #fff; border-radius:50%; background:#111827; box-shadow:0 0 0 2px #111827; }
.modern-picker-hue-row input[type="range"]::-moz-range-thumb { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#111827; box-shadow:0 0 0 2px #111827; }
.modern-picker-hue-row output { text-align:right; font:850 .78rem ui-monospace,monospace; }
.modern-picker-controls { display:grid; align-content:start; gap:15px; }
.modern-picker-selected { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:2px solid var(--ink); border-radius:18px; background:#fff9d9; box-shadow:4px 4px 0 var(--ink); }
.modern-picker-selected-swatch { width:58px; height:58px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:16px; color:#fff; box-shadow:inset 0 0 0 5px rgba(255,255,255,.22); }
.modern-picker-selected small,.modern-picker-selected strong { display:block; }
.modern-picker-selected small { color:var(--muted); font-size:.67rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.modern-picker-selected strong { margin-top:3px; font:950 1.25rem ui-monospace,monospace; letter-spacing:-.04em; }
.modern-picker-hex-field { display:grid; grid-template-columns:52px minmax(0,1fr); gap:9px; align-items:center; }
.modern-picker-hex-field span { font-size:.72rem; font-weight:900; color:var(--muted); }
.modern-picker-hex-field input,.modern-picker-channel-grid input { width:100%; min-width:0; height:42px; border:1px solid var(--line); border-radius:12px; padding:0 11px; background:#fff; font-weight:850; }
.modern-picker-channel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.modern-picker-channel-grid label { display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px; align-items:center; }
.modern-picker-channel-grid span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#f1f5f9; color:#334155; font-size:.72rem; font-weight:950; }
.modern-picker-sliders { display:grid; gap:10px; }
.modern-picker-sliders label { display:grid; gap:6px; }
.modern-picker-sliders label>span { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.72rem; font-weight:800; }
.modern-picker-sliders input[type="range"] { width:100%; accent-color:var(--blue); }
.modern-picker-presets { display:flex; flex-wrap:wrap; gap:9px; padding-top:2px; }
.modern-picker-presets button { position:relative; width:38px; height:38px; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.modern-picker-presets button:hover { transform:translateY(-3px) rotate(-3deg); }
.modern-picker-presets button.active { box-shadow:0 0 0 2px var(--ink),3px 3px 0 var(--ink); }

/* Give the CPS browser enough room before collapsing the selected-color sidebar. */
.spot-lab-page { width:min(1320px,calc(100% - 32px)); }
.cps-lab { grid-template-columns:minmax(180px,210px) minmax(0,1fr) minmax(250px,270px); }
.cps-main,.cps-aside,.cps-filter-panel>* { min-width:0; }
@media (max-width:900px) {
  .modern-color-picker { grid-template-columns:1fr; }
  .modern-picker-canvas { min-height:250px; }
}
@media (max-width:680px) {
  .modern-picker-canvas-wrap,.modern-picker-controls { padding:12px; border-radius:18px; }
  .modern-picker-canvas { min-height:220px; box-shadow:3px 3px 0 var(--ink); }
  .modern-picker-selected { grid-template-columns:50px minmax(0,1fr) auto; box-shadow:3px 3px 0 var(--ink); }
  .modern-picker-selected-swatch { width:50px; height:50px; }
  .modern-picker-channel-grid { grid-template-columns:1fr; }
  .modern-picker-channel-grid label { grid-template-columns:32px minmax(0,1fr); }
}

/* Keep CPS responsive overrides after the widened desktop workspace rule. */
@media (max-width:1280px) {
  .cps-lab { grid-template-columns:180px minmax(0,1fr); }
  .cps-aside { grid-column:2; position:static; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
  .cps-selected-card { grid-column:span 2; }
  .cps-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .cps-lab,.cps-lab-embedded { grid-template-columns:1fr; }
  .cps-aside { grid-column:1; grid-template-columns:1fr 1fr; }
  .cps-selected-card { grid-column:1/-1; }
}
@media (max-width:560px) {
  .spot-lab-page { width:min(100% - 18px,1320px); }
  .cps-aside { grid-template-columns:1fr; }
  .cps-selected-card { grid-column:1; }
}

/* v2.0.6 — reusable modern picker and responsive hardening */
html,body{max-width:100%;overflow-x:clip}
main,section,article,aside,nav,header,footer,div,form,fieldset{min-width:0}
pre,code{max-width:100%}
button,input,select,textarea{max-width:100%}
.tool-panel,.tool-panel-body,.tool-page-layout,.playground-tool-column,.playground-donation-layout,.converter-stack,.cps-main,.cps-aside{min-width:0}

.universal-color-picker-trigger{width:42px;height:42px;display:grid;place-items:center;position:relative;border:0;background:transparent;padding:0;cursor:pointer;border-radius:13px}
.universal-color-picker-trigger .universal-color-swatch{grid-area:1/1;display:block}
.universal-color-picker-trigger>svg{grid-area:1/1;z-index:2;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none}
.universal-color-input.is-compact .universal-color-picker-trigger{width:34px;height:34px;border-radius:10px}
.universal-color-picker-trigger:hover .universal-color-swatch{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

.modern-picker-dialog-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.66);backdrop-filter:blur(8px);overflow:auto}
.modern-picker-dialog{width:min(980px,100%);max-height:min(900px,calc(100dvh - 48px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:3px solid var(--ink);border-radius:30px;background:var(--paper);box-shadow:12px 12px 0 var(--ink)}
.modern-picker-dialog-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#dbeafe,#fff7d6 52%,#fce7f3)}
.modern-picker-dialog-head h2{margin:6px 0 4px;font-size:clamp(24px,3vw,36px);line-height:1;letter-spacing:-.045em}
.modern-picker-dialog-head p{margin:0;max-width:680px;color:#4f4a44}
.modern-picker-dialog-close{flex:0 0 auto;background:#fff}
.modern-picker-dialog-body{overflow:auto;padding:20px}
.modern-picker-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-top:1px solid var(--line);background:#fff}
.modern-picker-dialog-actions>span{display:inline-flex;align-items:center;gap:9px;font:850 .85rem ui-monospace,monospace}
.modern-picker-dialog-actions i{width:26px;height:26px;border:1px solid var(--line);border-radius:8px}
.modern-color-picker.is-compact .modern-picker-canvas{min-height:230px}
.modern-color-picker.is-compact{grid-template-columns:minmax(260px,1.15fr) minmax(250px,.85fr)}

.base-color-modern-trigger,.palette-modern-picker-trigger,.tailwind-modern-picker-trigger,.cps-modern-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:2px solid currentColor;border-radius:999px;background:rgba(255,255,255,.9);color:#111827;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 currentColor}
.base-color-modern-trigger:hover,.palette-modern-picker-trigger:hover,.tailwind-modern-picker-trigger:hover,.cps-modern-picker-trigger:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 currentColor}
.color-preview{position:relative;overflow:hidden}
.color-preview .base-color-modern-trigger{align-self:flex-start}
.editable-palette article{position:relative;isolation:isolate}
.palette-modern-picker-trigger{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);color:#111827}
.palette-modern-picker-trigger:hover{transform:translate(calc(-50% + 1px),calc(-50% + 1px))}
.tailwind-modern-picker-trigger{color:inherit;background:rgba(255,255,255,.92);box-shadow:none;border-width:1px;padding:6px 9px}
.gradient-stop-swatch{width:42px;height:42px;border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.cps-target,.cps-create-preview{position:relative;overflow:hidden}
.cps-target .cps-modern-picker-trigger,.cps-create-preview .cps-modern-picker-trigger{align-self:flex-start;background:rgba(255,255,255,.92);color:#111827}

/* Flexible wrapping prevents toolbars and cards from colliding at intermediate widths. */
.subhead-row,.section-row,.tool-panel-head,.cps-results-head{flex-wrap:wrap}
.toolbar-wrap,.converter-actions,.readiness-export-actions,.palette-card-actions,.cps-global-actions{min-width:0}
.toolbar-wrap>*{min-width:0}
.segmented-control{max-width:100%;overflow-x:auto;padding-bottom:3px}
.text-input,.select-input,.number-input,textarea{min-width:0}
.code-block,.large-code{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

@media(max-width:1100px){
  .playground-donation-layout{grid-template-columns:1fr}
  .playground-donation-sidebar{position:static;order:2}
  .donation-widget{max-width:100%}
  .modern-color-picker,.modern-color-picker.is-compact{grid-template-columns:1fr}
  .modern-picker-canvas{min-height:260px}
}

@media(max-width:760px){
  .modern-picker-dialog-backdrop{padding:10px;align-items:end}
  .modern-picker-dialog{width:100%;max-height:calc(100dvh - 12px);border-radius:24px 24px 12px 12px;box-shadow:6px 6px 0 var(--ink)}
  .modern-picker-dialog-head{padding:17px;gap:12px}
  .modern-picker-dialog-head p{font-size:13px}
  .modern-picker-dialog-body{padding:12px}
  .modern-picker-dialog-actions{padding:12px;flex-wrap:wrap}
  .modern-picker-dialog-actions .button{width:100%}
  .modern-picker-canvas{min-height:220px}
  .modern-picker-canvas-wrap,.modern-picker-controls{padding:12px}
  .modern-picker-selected{grid-template-columns:48px minmax(0,1fr) auto}
  .modern-picker-selected-swatch{width:48px;height:48px}
  .modern-picker-channel-grid{grid-template-columns:1fr 1fr 1fr}
  .universal-color-row,.universal-color-input.is-compact .universal-color-row{grid-template-columns:34px minmax(0,1fr)}
  .universal-color-picker-trigger{width:34px;height:34px}
  .universal-color-picker-trigger .universal-color-swatch{width:34px;height:34px;border-radius:10px}
  .universal-color-row>.button{grid-column:1/-1;width:100%}
  .gradient-stop-row{grid-template-columns:42px minmax(0,1fr) minmax(86px,.55fr)}
  .gradient-stop-row .universal-color-input{grid-column:2/-1;min-width:0}
  .gradient-stop-row .universal-color-row{grid-template-columns:34px minmax(0,1fr)}
  .gradient-stop-row .universal-color-row>.button{grid-column:1/-1}
  .gradient-stop-row label{min-width:0}
  .gradient-stop-row .icon-button{justify-self:end}
  .tailwind-shade{gap:10px;flex-wrap:wrap}
  .tailwind-modern-picker-trigger{margin-left:auto}
  .cps-input-panel,.cps-create-card{min-width:0}
  .cps-target,.cps-create-preview{min-height:180px}
  .cps-modern-picker-trigger{padding:7px 10px}
  .cps-match-results>article>button:first-child{min-width:0}
  .cps-custom-list>article{min-width:0}
}

@media(max-width:480px){
  .shell{width:min(100% - 16px,1180px)}
  .tool-panel-body,.converter-input-card,.converter-results,.converter-cps-card,.converter-print-card,.converter-batch-card{padding:15px}
  .modern-picker-dialog-backdrop{padding:4px}
  .modern-picker-dialog{max-height:calc(100dvh - 4px);border-width:2px;border-radius:20px 20px 8px 8px;box-shadow:none}
  .modern-picker-dialog-head h2{font-size:24px}
  .modern-picker-canvas{min-height:190px}
  .modern-picker-channel-grid{grid-template-columns:1fr}
  .modern-picker-hue-row{grid-template-columns:38px minmax(0,1fr) 38px;gap:7px}
  .modern-picker-presets button{width:34px;height:34px}
  .base-color-modern-trigger,.cps-modern-picker-trigger{padding:7px 9px}
  .editable-palette article{min-height:130px}
  .palette-modern-picker-trigger{top:46%}
  .gradient-stop-row{grid-template-columns:36px minmax(0,1fr)}
  .gradient-stop-swatch{width:36px;height:36px}
  .gradient-stop-row .universal-color-input{grid-column:2}
  .gradient-stop-row label,.gradient-stop-row .icon-button{grid-column:1/-1;width:100%}
  .gradient-stop-row .icon-button{justify-self:stretch}
  .cps-mini-fields,.cps-mini-fields.four{grid-template-columns:1fr 1fr}
  .cps-match-results>article>button:first-child{grid-template-columns:24px 36px minmax(0,1fr)}
  .cps-match-delta,.spot-grade{grid-column:3}
  .converter-output-grid article{min-width:0}
  .converter-output-grid code{white-space:normal;overflow-wrap:anywhere}
}

/* Intermediate tablet safeguards found during viewport audit. */
@media(max-width:860px){
  .challenge-header{flex-direction:column;align-items:stretch}
  .challenge-mode{align-self:flex-start}
  .comparison-grid{grid-template-columns:1fr}
  .palette-output button{min-width:0;overflow-wrap:anywhere;word-break:break-word}
}

/* v2.1 guides hub, editorial pages, and enhanced homepage motion */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.hero{isolation:isolate}.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 20%,rgba(45,212,191,.14),transparent 24%),radial-gradient(circle at 82% 72%,rgba(255,77,141,.12),transparent 26%);z-index:-1;animation:hero-ambient-shift 10s ease-in-out infinite alternate}.hero h1 em::after{transform-origin:left center;animation:hero-highlight-pulse 4.8s ease-in-out infinite}.animated-hero-palette{animation:hero-art-float 6s ease-in-out infinite}.animated-hero-palette .palette-deck{animation:hero-deck-tilt 7s ease-in-out infinite}.animated-hero-palette .mini-card{animation:hero-mini-float 5.2s ease-in-out infinite}.animated-hero-palette .floating-chip.one{animation:hero-chip-one 4.3s ease-in-out infinite}.animated-hero-palette .floating-chip.two{animation:hero-chip-two 4.9s ease-in-out infinite}.animated-hero-palette .floating-chip.three{animation:hero-chip-three 5.4s ease-in-out infinite}.animated-hero-palette .deck-colors i{position:relative;overflow:hidden}.animated-hero-palette .deck-colors i::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(-120%);animation:hero-color-sheen 5.8s ease-in-out infinite}.animated-hero-palette .deck-colors i:nth-child(2)::after{animation-delay:.35s}.animated-hero-palette .deck-colors i:nth-child(3)::after{animation-delay:.7s}.animated-hero-palette .deck-colors i:nth-child(4)::after{animation-delay:1.05s}.hero-color-orbit{position:absolute;z-index:1;inset:0;pointer-events:none;animation:hero-orbit-rotate 18s linear infinite}.hero-color-orbit i{position:absolute;width:18px;height:18px;border:2px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink)}.hero-color-orbit i:nth-child(1){left:8%;top:20%;background:var(--yellow)}.hero-color-orbit i:nth-child(2){right:7%;top:17%;background:var(--pink)}.hero-color-orbit i:nth-child(3){right:3%;bottom:22%;background:var(--mint)}.hero-color-orbit i:nth-child(4){left:4%;bottom:25%;background:var(--blue)}.hero-spark{position:absolute;z-index:8;font-size:20px;font-weight:900;pointer-events:none;animation:hero-sparkle 3s ease-in-out infinite}.hero-spark-one{right:24%;top:2%;color:var(--pink)}.hero-spark-two{left:28%;bottom:3%;color:var(--yellow);animation-delay:.8s}.hero-spark-three{right:2%;bottom:42%;color:var(--blue);animation-delay:1.6s}
@keyframes hero-ambient-shift{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.04)}}
@keyframes hero-highlight-pulse{0%,100%{transform:scaleX(.92) rotate(-1deg);opacity:.7}50%{transform:scaleX(1.04) rotate(.2deg);opacity:.95}}
@keyframes hero-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hero-deck-tilt{0%,100%{transform:rotate(-2deg) translate3d(0,0,0)}50%{transform:rotate(.6deg) translate3d(4px,-3px,0)}}
@keyframes hero-mini-float{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(3deg) translateY(-12px)}}
@keyframes hero-chip-one{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
@keyframes hero-chip-two{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(4deg) translateY(7px)}}
@keyframes hero-chip-three{0%,100%{transform:rotate(5deg) translateX(0)}50%{transform:rotate(1deg) translateX(8px)}}
@keyframes hero-color-sheen{0%,34%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes hero-orbit-rotate{to{transform:rotate(360deg)}}
@keyframes hero-sparkle{0%,100%{transform:scale(.65) rotate(0);opacity:.3}50%{transform:scale(1.25) rotate(25deg);opacity:1}}

.guides-hub-hero{position:relative;overflow:hidden;padding:78px 0 70px;background:radial-gradient(#ddd7cb 1px,transparent 1px),linear-gradient(135deg,#fffdf8,#f5fbff 56%,#fff4fa);background-size:18px 18px,auto}.guides-hub-hero::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,214,10,.22);right:-90px;top:-130px}.guides-hub-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.7fr);gap:70px;align-items:center}.guides-hub-hero h1{max-width:780px;margin:16px 0 20px;font-size:clamp(50px,6.7vw,88px);line-height:.92;letter-spacing:-.07em}.guides-hub-hero p{max-width:700px;margin:0;color:#4f4a44;font-size:18px;line-height:1.7}.guides-hub-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.guides-hub-trust{display:flex;flex-wrap:wrap;gap:15px;margin-top:22px;font-size:12px;font-weight:850;color:#57534e}.guides-hub-trust span{display:inline-flex;align-items:center;gap:6px}.guides-hub-art{position:relative;min-height:420px}.guide-book-stack{position:absolute;inset:58px 28px 44px 40px;transform:rotate(-4deg)}.guide-book-stack i{position:absolute;inset:0;border:3px solid var(--ink);border-radius:30px;background:white;box-shadow:11px 11px 0 var(--ink)}.guide-book-stack i:nth-child(1){transform:translate(-28px,22px) rotate(-7deg);background:#ccfbf1}.guide-book-stack i:nth-child(2){transform:translate(26px,-15px) rotate(7deg);background:#fce7f3}.guide-book-stack i:nth-child(3){background:linear-gradient(145deg,#dbeafe 0 48%,#fef3c7 48% 100%)}.guide-book-stack span{position:absolute;inset:0;display:grid;place-items:center;font-size:92px;font-weight:950;letter-spacing:-.08em}.guide-art-note{position:absolute;padding:9px 13px;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:4px 4px 0 var(--ink);font-size:12px;font-weight:900}.guide-art-note.one{left:0;top:28px;background:var(--mint);transform:rotate(-7deg)}.guide-art-note.two{right:0;top:105px;background:var(--yellow);transform:rotate(7deg)}.guide-art-note.three{left:10px;bottom:25px;background:var(--pink);color:#fff;transform:rotate(4deg)}
.guides-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.guides-featured-grid>a{--guide-card-accent:#2563eb;position:relative;display:flex;min-height:330px;flex-direction:column;padding:24px;border:2px solid var(--ink);border-radius:26px;background:linear-gradient(180deg,color-mix(in srgb,var(--guide-card-accent) 14%,white),white 72%);box-shadow:6px 6px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease}.guides-featured-grid>a:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}.guides-featured-grid small{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#5b5751}.guides-featured-grid h3{margin:34px 0 12px;font-size:27px;line-height:1.05;letter-spacing:-.045em}.guides-featured-grid p{margin:0;color:#4f4a44}.guide-feature-number{position:absolute;right:20px;top:18px;color:var(--guide-card-accent);font-size:32px;font-weight:950}.guide-feature-link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:28px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.guides-directory{display:grid;gap:18px}.guides-directory-controls{display:grid;gap:12px}.guides-search{display:flex;align-items:center;gap:10px;max-width:560px;border:2px solid var(--ink);border-radius:16px;background:#fff;padding:0 14px;box-shadow:4px 4px 0 var(--ink)}.guides-search input{width:100%;min-height:50px;border:0;outline:0;background:transparent}.guide-category-tabs{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 6px}.guide-category-tabs button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:#fff;padding:9px 13px;font-size:12px;font-weight:900;cursor:pointer}.guide-category-tabs button.active{border-color:var(--ink);background:var(--ink);color:#fff}.guides-directory-meta{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}.guides-directory-meta strong{color:var(--ink)}.guide-compact-list{overflow:hidden;border:2px solid var(--ink);border-radius:25px;background:#fff;box-shadow:7px 7px 0 var(--ink)}.guide-compact-item{--guide-accent:#2563eb;display:grid;grid-template-columns:46px 18px minmax(0,1fr) auto 22px;gap:14px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);transition:background .15s ease}.guide-compact-item:last-child{border-bottom:0}.guide-compact-item:hover{background:#fffdf5}.guide-index{font:900 12px ui-monospace,monospace;color:var(--muted)}.guide-compact-color{width:14px;height:44px;border-radius:999px;background:var(--guide-accent)}.guide-compact-copy{min-width:0}.guide-compact-copy small{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.guide-compact-copy strong{display:block;margin-top:2px;font-size:18px;letter-spacing:-.025em}.guide-compact-copy p{margin:3px 0 0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guide-tool-label{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#f7f3eb;font-size:11px;font-weight:850;white-space:nowrap}.guide-compact-arrow{color:var(--guide-accent)}.guides-empty{padding:54px 20px;text-align:center;border:1px dashed var(--line);border-radius:22px;background:#fff}.guides-empty h3{margin:10px 0 4px}.guides-empty p{margin:0;color:var(--muted)}.guides-method-panel{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;padding:32px;border:2px solid var(--ink);border-radius:28px;background:#fff5bf;box-shadow:8px 8px 0 var(--ink)}.guides-method-panel h2{margin:8px 0 12px;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.055em}.guides-method-panel p{margin:0;color:#4f4a44}.guides-method-panel nav{display:grid;align-content:center}.guides-method-panel nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid rgba(21,21,21,.16);font-weight:850}.guides-method-panel nav a:last-child{border-bottom:0}

.guide-page{--guide-accent:#2563eb}.guide-hero{position:relative;overflow:hidden;padding:42px 0 55px;background:radial-gradient(#ded8cd 1px,transparent 1px),linear-gradient(145deg,color-mix(in srgb,var(--guide-accent) 10%,#fffdf8),#fffdf8 68%);background-size:18px 18px,auto}.guide-hero::after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-75px;bottom:-110px;background:color-mix(in srgb,var(--guide-accent) 18%,transparent)}.guide-breadcrumbs{margin-bottom:25px}.guide-category-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.guide-hero h1{position:relative;z-index:1;max-width:980px;margin:20px 0 18px;font-size:clamp(46px,6vw,78px);line-height:.94;letter-spacing:-.065em}.guide-deck{position:relative;z-index:1;max-width:850px;margin:0;color:#46413b;font-size:19px;line-height:1.7}.guide-byline{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;color:#5f5a53;font-size:12px;font-weight:800}.guide-byline span{display:inline-flex;align-items:center;gap:6px}.guide-direct-answer{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;max-width:980px;margin-top:32px;padding:22px;border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:7px 7px 0 var(--ink)}.guide-answer-icon{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:var(--yellow)}.guide-direct-answer h2{margin:0 0 6px;font-size:16px;letter-spacing:-.02em}.guide-direct-answer p{margin:0;font-size:16px;line-height:1.75}.guide-glance{position:relative;z-index:1;max-width:980px;margin-top:28px}.guide-glance>h2{font-size:14px;text-transform:uppercase;letter-spacing:.1em}.guide-glance>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.guide-glance article{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.86)}.guide-glance small,.guide-glance strong{display:block}.guide-glance small{color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.guide-glance strong{margin-top:5px;font-size:14px;line-height:1.35}.guide-layout{display:grid;grid-template-columns:250px minmax(0,800px);gap:55px;align-items:start;padding-top:50px;padding-bottom:85px;justify-content:center}.guide-sidebar{position:sticky;top:108px;display:grid;gap:16px}.guide-toc,.guide-side-tool{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px}.guide-toc{display:grid;max-height:calc(100vh - 240px);overflow:auto}.guide-toc>strong{margin-bottom:8px;font-size:13px}.guide-toc a{padding:7px 0;color:#5b5751;font-size:12px;border-bottom:1px solid #f0ece4}.guide-toc a:last-child{border-bottom:0}.guide-toc a:hover{color:var(--guide-accent)}.guide-side-tool{border:2px solid var(--ink);background:color-mix(in srgb,var(--guide-accent) 10%,white);box-shadow:4px 4px 0 var(--ink)}.guide-side-tool>strong{display:block;margin-top:5px;font-size:18px;line-height:1.15}.guide-side-tool p{margin:7px 0 14px;color:#4f4a44;font-size:12px}.guide-side-tool .button{width:100%}.guide-article{min-width:0}.guide-section{scroll-margin-top:110px;padding:0 0 42px;margin-bottom:42px;border-bottom:1px solid var(--line)}.guide-section h2{margin:0 0 12px;font-size:clamp(30px,4vw,42px);line-height:1.05;letter-spacing:-.045em}.guide-section-summary{margin:0 0 17px;color:#25211e;font-size:18px;font-weight:650;line-height:1.6}.guide-section>p:not(.guide-section-summary){font-size:16px;line-height:1.8;color:#4b4741}.guide-check-list{display:grid;gap:10px;padding:0;margin:20px 0;list-style:none}.guide-check-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start}.guide-check-list svg{color:var(--guide-accent);margin-top:3px}.guide-steps{display:grid;gap:11px;margin:22px 0;padding:0;list-style:none}.guide-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:15px;background:#fff}.guide-steps li>span{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:color-mix(in srgb,var(--guide-accent) 18%,white);font-weight:950}.guide-steps p{margin:0;color:#403b35}.guide-callout{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;margin:22px 0;padding:17px;border-left:5px solid var(--guide-accent);border-radius:14px;background:color-mix(in srgb,var(--guide-accent) 8%,white)}.guide-callout strong{display:block}.guide-callout p{margin:4px 0 0;color:#4f4a44}.guide-table-wrap{max-width:100%;margin:24px 0;overflow-x:auto;border:1px solid var(--line);border-radius:17px;background:#fff}.guide-table-wrap table{width:100%;min-width:620px;border-collapse:collapse}.guide-table-wrap caption{text-align:left;padding:14px 16px;background:#f7f3eb;font-size:12px;font-weight:900}.guide-table-wrap th,.guide-table-wrap td{padding:13px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:13px}.guide-table-wrap thead th{background:#fcfbf8;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.guide-table-wrap tbody th{font-weight:850}.guide-code{margin:24px 0;overflow:hidden;border:2px solid var(--ink);border-radius:17px;background:#101828;color:#f8fafc;box-shadow:4px 4px 0 var(--ink)}.guide-code figcaption{padding:9px 14px;background:#202b3f;color:#cbd5e1;font-size:10px;font-weight:900;letter-spacing:.1em}.guide-code pre{margin:0;padding:18px;overflow:auto;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.guide-tool-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:10px 0 50px;padding:28px;border:2px solid var(--ink);border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--guide-accent) 17%,white),#fff8cc);box-shadow:7px 7px 0 var(--ink)}.guide-tool-cta h2{margin:7px 0 8px;font-size:31px;letter-spacing:-.045em}.guide-tool-cta p{max-width:560px;margin:0;color:#4f4a44}.guide-tool-cta .button{flex:0 0 auto}.guide-faq-list details{background:#fff}.guide-reference-list{display:grid;gap:8px;padding-left:24px}.guide-reference-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#fff}.guide-reference-list strong,.guide-reference-list small{display:block}.guide-reference-list small{margin-top:2px;color:var(--muted)}.guide-related{border-bottom:0}.guide-related-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.guide-related-head a{display:inline-flex;align-items:center;gap:6px;font-weight:850}.guide-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.guide-related-grid>a{--guide-card-accent:#2563eb;display:flex;min-height:220px;flex-direction:column;padding:17px;border:1px solid var(--line);border-top:6px solid var(--guide-card-accent);border-radius:17px;background:#fff}.guide-related-grid small{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.guide-related-grid strong{margin-top:9px;font-size:18px;line-height:1.15}.guide-related-grid p{color:var(--muted);font-size:12px}.guide-related-grid span{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:12px;font-weight:900}.guide-author-note{display:grid;grid-template-columns:64px minmax(0,1fr);gap:17px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#f8fafc}.guide-author-mark{width:60px;height:60px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:18px;background:linear-gradient(135deg,var(--yellow),var(--pink));font-weight:950}.guide-author-note>div>strong{font-size:18px}.guide-author-note p{margin:5px 0 9px;color:var(--muted);font-size:13px}.guide-author-note>div>div{display:flex;flex-wrap:wrap;gap:12px}.guide-author-note a{font-size:12px;font-weight:850;text-decoration:underline}.tool-guide-panel{width:min(1180px,calc(100% - 32px));margin:42px auto;padding:24px;border:2px solid var(--ink);border-radius:25px;background:#f4f0ff;box-shadow:6px 6px 0 var(--ink)}.tool-guide-panel-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center}.tool-guide-icon{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:var(--yellow)}.tool-guide-panel h2{margin:3px 0 0;font-size:26px;letter-spacing:-.04em}.tool-guide-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}.tool-guide-links>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.tool-guide-links strong,.tool-guide-links small{display:block}.tool-guide-links strong{font-size:14px}.tool-guide-links small{margin-top:3px;color:var(--muted);font-size:11px}

@media(max-width:1100px){.guides-hub-hero-grid{grid-template-columns:minmax(0,1fr) 330px;gap:35px}.guide-layout{grid-template-columns:220px minmax(0,1fr);gap:34px}.guide-glance>div{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-related-grid,.tool-guide-links{grid-template-columns:1fr 1fr}.guides-method-panel{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:900px){.guides-hub-hero-grid{grid-template-columns:1fr}.guides-hub-art{min-height:340px;max-width:520px;width:100%;margin:auto}.guides-featured-grid{grid-template-columns:1fr 1fr}.guides-featured-grid>a:last-child{grid-column:1/-1;min-height:280px}.guide-layout{grid-template-columns:1fr;justify-content:stretch}.guide-sidebar{position:static;grid-template-columns:1fr 1fr}.guide-toc{max-height:none}.guide-related-grid{grid-template-columns:1fr 1fr}.guide-related-grid>a:last-child{grid-column:1/-1}.guides-method-panel{grid-template-columns:1fr}.tool-guide-links{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.hero{padding-top:64px}.hero-grid{gap:30px}.hero-art{min-height:390px}.animated-hero-palette{animation-duration:7s}.hero-color-orbit i{width:14px;height:14px}.guides-hub-hero{padding:56px 0}.guides-hub-hero h1{font-size:clamp(44px,15vw,64px)}.guides-hub-actions{display:grid}.guides-hub-actions .button{width:100%}.guides-hub-art{min-height:300px}.guide-book-stack{inset:55px 18px 35px 30px}.guide-art-note.two{right:5px}.guides-featured-grid{grid-template-columns:1fr}.guides-featured-grid>a:last-child{grid-column:auto}.guides-featured-grid>a{min-height:280px}.guides-directory-meta{align-items:flex-start;flex-direction:column}.guide-compact-item{grid-template-columns:34px 12px minmax(0,1fr) 20px;padding:15px 13px}.guide-tool-label{display:none}.guide-compact-copy p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.guide-compact-arrow{grid-column:4}.guides-method-panel{padding:23px;box-shadow:5px 5px 0 var(--ink)}.guide-hero{padding-top:30px}.guide-hero h1{font-size:clamp(41px,13vw,58px)}.guide-deck{font-size:16px}.guide-direct-answer{grid-template-columns:1fr;padding:18px;box-shadow:5px 5px 0 var(--ink)}.guide-glance>div{grid-template-columns:1fr}.guide-layout{padding-top:30px;gap:28px}.guide-sidebar{grid-template-columns:1fr}.guide-toc{display:none}.guide-section{padding-bottom:32px;margin-bottom:32px}.guide-section h2{font-size:31px}.guide-section-summary{font-size:16px}.guide-tool-cta{align-items:stretch;flex-direction:column;padding:21px}.guide-tool-cta .button{width:100%}.guide-related-head{align-items:flex-start;flex-direction:column}.guide-related-grid{grid-template-columns:1fr}.guide-related-grid>a:last-child{grid-column:auto}.guide-author-note{grid-template-columns:1fr}.tool-guide-panel{width:min(100% - 16px,1180px);padding:17px;box-shadow:4px 4px 0 var(--ink)}.tool-guide-panel-head{grid-template-columns:42px minmax(0,1fr)}.tool-guide-panel-head>.button{grid-column:1/-1;width:100%}.tool-guide-links{grid-template-columns:1fr}.guide-table-wrap{margin-inline:-2px}.guide-table-wrap table{min-width:560px}}
@media(max-width:430px){.guide-byline{display:grid;gap:7px}.guide-glance article{padding:12px}.guide-steps li{grid-template-columns:34px minmax(0,1fr)}.guide-steps li>span{width:30px;height:30px}.guide-reference-list{padding-left:18px}.guide-reference-list a{padding:10px}.guide-art-note{font-size:10px}.guide-book-stack span{font-size:72px}}
@media(max-width:420px){.hero-art{min-height:330px}.palette-deck{inset:32px 8px 28px 8px}.floating-chip{padding:7px 9px;font-size:9px}.floating-chip.one{left:4px;top:10px}.floating-chip.two{right:4px;top:68px}.floating-chip.three{left:4px;bottom:2px}.mini-card{width:132px;right:4px;bottom:4px}.hero-spark{font-size:16px}}

@media(prefers-reduced-motion:reduce){.hero::after,.hero h1 em::after,.animated-hero-palette,.animated-hero-palette .palette-deck,.animated-hero-palette .mini-card,.animated-hero-palette .floating-chip,.animated-hero-palette .deck-colors i::after,.hero-color-orbit,.hero-spark{animation:none!important}.guides-featured-grid>a,.guide-compact-item{transition:none}}

/* v2.1.2 hero motion and foreground label reliability */
.animated-hero-palette {
  overflow: visible;
  transform: translateZ(0);
}
.animated-hero-palette .hero-color-orbit { z-index: 2; }
.animated-hero-palette .palette-deck { z-index: 20; }
.animated-hero-palette .mini-card { z-index: 45; }
.animated-hero-palette .hero-label-layer {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  isolation: isolate;
}
.animated-hero-palette .hero-label-layer .floating-chip {
  z-index: 1;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.55));
}
.animated-hero-palette .hero-spark { z-index: 80; }

.animated-hero-palette .hero-color-panel {
  animation: hero-color-panel-enter .72s cubic-bezier(.2,.78,.24,1) both;
}
.animated-hero-palette .deck-meta {
  animation: hero-palette-copy-enter .55s cubic-bezier(.2,.78,.24,1) both;
}
.animated-hero-palette .mini-card-colors i,
.animated-hero-palette .mini-card > strong {
  animation: hero-mini-content-enter .58s cubic-bezier(.2,.78,.24,1) both;
}
.animated-hero-palette .hero-palette-dots .active {
  animation: hero-dot-pulse .55s ease both;
}

@keyframes hero-color-panel-enter {
  0% { opacity: .25; transform: scaleX(.78) translateY(8px); filter: saturate(.7); }
  55% { opacity: 1; transform: scaleX(1.025) translateY(0); filter: saturate(1.08); }
  100% { opacity: 1; transform: scaleX(1) translateY(0); filter: saturate(1); }
}
@keyframes hero-palette-copy-enter {
  0% { opacity: .15; transform: translateY(9px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hero-mini-content-enter {
  0% { opacity: .2; transform: translateY(7px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-dot-pulse {
  0% { transform: scaleX(.45); opacity: .45; }
  100% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 680px) {
  .animated-hero-palette .hero-label-layer .floating-chip.one { left: 5px; top: 12px; }
  .animated-hero-palette .hero-label-layer .floating-chip.two { right: 2px; top: 74px; }
  .animated-hero-palette .hero-label-layer .floating-chip.three { left: 3px; bottom: 5px; }
}

@media (max-width: 420px) {
  .animated-hero-palette .hero-label-layer .floating-chip.one { left: 2px; top: 7px; }
  .animated-hero-palette .hero-label-layer .floating-chip.two { right: 1px; top: 61px; }
  .animated-hero-palette .hero-label-layer .floating-chip.three { left: 2px; bottom: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-hero-palette .hero-color-panel,
  .animated-hero-palette .deck-meta,
  .animated-hero-palette .mini-card-colors i,
  .animated-hero-palette .mini-card > strong,
  .animated-hero-palette .hero-palette-dots .active {
    animation: none !important;
  }
}

/* v2.2.0 guide evidence images */
.guide-example-image{margin:24px 0;border:2px solid var(--ink);border-radius:22px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 var(--ink)}
.guide-example-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.guide-example-image figcaption{padding:12px 15px;border-top:1px solid var(--line);background:#f8f5ee;color:var(--muted);font-size:12px;font-weight:750}

/* v2.2.0 individual palette pages */
.palette-detail-page{overflow:hidden}
.palette-detail-hero{padding:52px 0 64px;background:radial-gradient(circle at 86% 8%,rgba(255,214,10,.2),transparent 26%),radial-gradient(circle at 12% 92%,rgba(37,99,235,.11),transparent 30%),var(--paper);background-image:radial-gradient(#d9d3c7 1px,transparent 1px),radial-gradient(circle at 86% 8%,rgba(255,214,10,.2),transparent 26%),radial-gradient(circle at 12% 92%,rgba(37,99,235,.11),transparent 30%);background-size:18px 18px,auto,auto}
.palette-detail-hero .breadcrumbs{margin-bottom:23px}
.palette-detail-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.palette-detail-hero h1{max-width:900px;margin:18px 0 14px;font-size:clamp(48px,7vw,84px);line-height:.95;letter-spacing:-.065em}
.palette-detail-hero>div>p{max-width:760px;margin:0;color:#4d4943;font-size:18px}
.palette-detail-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:32px 0 24px}
.palette-detail-swatches span{position:relative;min-height:170px;border:2px solid var(--ink);border-radius:19px;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.palette-detail-swatches code{position:absolute;left:12px;bottom:12px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.88);color:#111;font-size:11px;font-weight:900;backdrop-filter:blur(8px)}
.palette-detail-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.palette-detail-actions .toast{position:fixed}
.palette-detail-intro{padding-top:64px}
.palette-detail-two-column{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;align-items:start}
.palette-detail-two-column>article{padding:28px;border:2px solid var(--ink);border-radius:26px;background:#fff8d8;box-shadow:7px 7px 0 var(--ink)}
.palette-detail-two-column h2{margin:8px 0 12px;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.045em}
.palette-detail-two-column p{margin:0;color:#4b4741;font-size:17px;line-height:1.7}
.palette-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.palette-fit-grid article{min-height:100%;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff}
.palette-fit-grid strong{display:block;margin-bottom:12px;font-size:17px}
.palette-fit-grid ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.palette-fit-grid li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;color:#4b4741;font-size:13px}
.palette-fit-grid svg{margin-top:2px;color:#15803d}
.palette-value-table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(35,30,24,.07)}
.palette-value-table-wrap table{width:100%;min-width:980px;border-collapse:collapse}
.palette-value-table-wrap caption{text-align:left;padding:16px 18px;background:#f8f5ee;font-size:13px;font-weight:900}
.palette-value-table-wrap th,.palette-value-table-wrap td{padding:14px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:middle;font-size:13px}
.palette-value-table-wrap thead th{background:#fffdfa;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.palette-value-table-wrap td:last-child strong,.palette-value-table-wrap td:last-child small{display:block}
.palette-value-table-wrap td:last-child small{margin-top:3px;color:var(--muted)}
.palette-value-chip{display:block;width:48px;height:48px;border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink)}
.palette-role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.palette-role-grid article{min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}
.palette-role-grid article>span{display:block;height:84px;border:2px solid var(--ink);border-radius:14px;margin-bottom:14px}
.palette-role-grid small,.palette-role-grid strong{display:block}
.palette-role-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}
.palette-role-grid strong{margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.palette-role-grid p{margin:7px 0 0;color:var(--muted);font-size:12px}
.palette-context-section .section-head p{color:rgba(255,255,255,.68)}
.palette-context-grid{display:grid;grid-template-columns:1fr 1fr 310px;gap:18px;align-items:stretch}
.palette-ui-preview,.palette-mobile-preview{min-width:0;border:2px solid #fff;border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 rgba(255,255,255,.18)}
.palette-ui-preview header{display:flex;gap:6px;padding:12px 15px;border-bottom:1px solid rgba(0,0,0,.1)}
.palette-ui-preview header i{width:8px;height:8px;border-radius:50%;background:var(--preview-action)}
.palette-ui-preview.light{background:var(--preview-bg);color:var(--preview-text)}
.palette-ui-preview.dark{background:#0b1020;color:#f8fafc}
.palette-ui-preview.dark header{border-color:rgba(255,255,255,.12)}
.palette-ui-nav{display:flex;align-items:center;gap:14px;padding:15px 18px}
.palette-ui-nav strong{margin-right:auto}
.palette-ui-nav span{font-size:11px;font-weight:800;opacity:.7}
.palette-ui-content{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;padding:0 18px 18px}
.palette-ui-card{min-height:200px;padding:20px;border-radius:18px;background:#fff;color:#111827;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.palette-ui-preview.dark .palette-ui-card{background:#171b2c;color:#f8fafc;box-shadow:none}
.palette-ui-card small,.palette-ui-card strong{display:block}
.palette-ui-card small{opacity:.65;text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:900}
.palette-ui-card strong{margin-top:10px;font-size:32px;letter-spacing:-.04em}
.palette-ui-card p{font-size:12px;opacity:.72}
.palette-ui-button{display:inline-flex;margin-top:23px;border-radius:999px;background:var(--preview-action);color:#fff;padding:10px 15px;font-weight:900;font-size:12px}
.palette-ui-card.compact strong{font-size:20px}
.palette-ui-status{display:inline-flex;margin-top:18px;padding:7px 10px;border-radius:999px;background:var(--preview-accent);color:#111;font-size:10px;font-weight:900}
.palette-mobile-preview{position:relative;padding:20px 15px;background:var(--preview-bg);color:var(--preview-text)}
.palette-mobile-speaker{width:76px;height:7px;margin:0 auto 20px;border-radius:999px;background:var(--preview-text);opacity:.35}
.palette-mobile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.palette-mobile-card{padding:20px;border-radius:20px;background:#fff;color:#111827;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.palette-mobile-card small,.palette-mobile-card strong{display:block}
.palette-mobile-card small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#64748b}
.palette-mobile-card strong{margin-top:8px;font-size:24px;line-height:1}
.palette-mobile-card p{color:#64748b;font-size:12px}
.palette-mobile-card .palette-ui-button{display:flex;width:100%;justify-content:center;margin-top:16px;padding:11px;border-radius:999px;background:var(--preview-action);color:#fff;font-weight:900}
.palette-mobile-nav{display:flex;justify-content:space-around;margin-top:28px}
.palette-mobile-nav i{width:24px;height:7px;border-radius:99px;background:var(--preview-text);opacity:.45}
.palette-evidence-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:24px;align-items:start}
.palette-evidence-grid h2{margin:8px 0 22px;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.05em}
.palette-pair-list{display:grid;gap:10px}
.palette-pair-list>div{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.palette-pair-sample{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;font-size:21px;font-weight:950}
.palette-pair-list strong,.palette-pair-list small{display:block}
.palette-pair-list small{margin-top:2px;color:var(--muted);font:11px ui-monospace,SFMono-Regular,Menlo,monospace}
.palette-pair-list b{font-size:14px}
.palette-pair-list em{padding:6px 8px;border-radius:999px;font-size:9px;font-style:normal;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.palette-pair-list em.pass{background:#dcfce7;color:#166534}.palette-pair-list em.review{background:#fef3c7;color:#92400e}.palette-pair-list em.fail{background:#fee2e2;color:#991b1b}
.palette-note-stack{display:grid;gap:12px}
.palette-note-stack>div{padding:19px;border:1px solid var(--line);border-radius:18px;background:#fff}
.palette-note-stack strong{font-size:16px}.palette-note-stack p,.palette-note-stack li{color:#4d4943;font-size:13px;line-height:1.65}.palette-note-stack ul{padding-left:18px}
.palette-related-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start}
.palette-related-layout h2{margin:8px 0 20px;font-size:clamp(34px,4vw,50px);letter-spacing:-.05em}
.palette-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.palette-related-grid a{display:flex;min-width:0;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.palette-related-grid img{width:100%;aspect-ratio:1.9/1;object-fit:cover}
.palette-related-grid strong{padding:13px 14px 4px;font-size:15px}.palette-related-grid span{display:flex;align-items:center;gap:5px;margin-top:auto;padding:8px 14px 14px;font-size:11px;font-weight:900}
.palette-related-layout aside{padding:20px;border:2px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--ink)}
.palette-related-layout aside h2{font-size:29px}
.palette-related-layout aside>a{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.palette-related-layout aside>a>span{min-width:0;flex:1}.palette-related-layout aside strong,.palette-related-layout aside small{display:block}.palette-related-layout aside small{margin-top:2px;color:var(--muted);font-size:10px}.palette-related-layout aside .palette-method-link{border:0;padding-bottom:0;font-weight:900;font-size:12px}

@media(max-width:1100px){
  .palette-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .palette-context-grid{grid-template-columns:1fr 1fr}.palette-mobile-preview{grid-column:1/-1;max-width:380px;width:100%;justify-self:center}
  .palette-related-layout{grid-template-columns:1fr}.palette-related-layout aside{max-width:680px}
}
@media(max-width:900px){
  .palette-detail-two-column,.palette-evidence-grid{grid-template-columns:1fr}
  .palette-detail-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.palette-detail-swatches span{min-height:140px}
  .palette-related-grid{grid-template-columns:1fr 1fr}.palette-related-grid a:last-child{grid-column:1/-1}
}
@media(max-width:680px){
  .guide-example-image{border-radius:17px;box-shadow:4px 4px 0 var(--ink)}
  .palette-detail-hero{padding:34px 0 46px}.palette-detail-hero h1{font-size:clamp(42px,14vw,60px)}.palette-detail-hero>div>p{font-size:16px}
  .palette-detail-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.palette-detail-swatches span{min-height:120px}.palette-detail-swatches span:last-child:nth-child(odd){grid-column:1/-1}
  .palette-detail-actions{display:grid;grid-template-columns:1fr 1fr}.palette-detail-actions .button:first-child{grid-column:1/-1}.palette-detail-actions .button{width:100%;padding-inline:12px}
  .palette-fit-grid{grid-template-columns:1fr}.palette-detail-two-column>article{padding:21px;box-shadow:5px 5px 0 var(--ink)}
  .palette-role-grid{grid-template-columns:1fr 1fr}.palette-role-grid article>span{height:70px}
  .palette-context-grid{grid-template-columns:1fr}.palette-mobile-preview{grid-column:auto}.palette-ui-content{grid-template-columns:1fr}.palette-ui-card{min-height:160px}
  .palette-pair-list>div{grid-template-columns:50px minmax(0,1fr) auto}.palette-pair-list em{grid-column:2/-1;justify-self:start}.palette-pair-sample{width:46px;height:46px}
  .palette-related-grid{grid-template-columns:1fr}.palette-related-grid a:last-child{grid-column:auto}
}
@media(max-width:430px){
  .palette-detail-actions{grid-template-columns:1fr}.palette-detail-actions .button:first-child{grid-column:auto}
  .palette-detail-swatches{grid-template-columns:1fr}.palette-detail-swatches span:last-child:nth-child(odd){grid-column:auto}
  .palette-role-grid{grid-template-columns:1fr}
  .palette-ui-nav span{display:none}
  .palette-pair-list>div{grid-template-columns:46px minmax(0,1fr)}.palette-pair-list b{grid-column:2}.palette-pair-list em{grid-column:2}
}

/* v2.3.0 authority evidence, AI retrieval, and responsive comparison blocks */
.evidence-section{padding:74px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fffdf8,#f8fbff)}
.evidence-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:26px;align-items:start;margin-bottom:28px}
.evidence-heading h2{max-width:850px;margin:9px 0 13px;font-size:clamp(36px,5vw,62px);line-height:.98;letter-spacing:-.055em}
.evidence-heading p{max-width:830px;margin:0;color:#47413a;font-size:16px;line-height:1.72}
.evidence-result-card{display:grid;gap:7px;padding:22px;border:2px solid var(--ink);border-radius:22px;background:linear-gradient(135deg,#fff7c7,#f7eaff);box-shadow:6px 6px 0 var(--ink)}
.evidence-result-card small{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.evidence-result-card strong{font-size:24px;line-height:1.05}
.evidence-result-card span{color:#554d45;font-size:12px;line-height:1.5}
.scale-comparison-table,.button-matrix-wrap{max-width:100%;overflow-x:auto;border:2px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--ink)}
.scale-comparison-table table,.button-matrix-wrap table{width:100%;min-width:1050px;border-collapse:collapse}
.scale-comparison-table caption,.button-matrix-wrap caption{padding:13px 16px;border-bottom:1px solid var(--line);background:#f7f3eb;text-align:left;color:var(--muted);font-size:11px;font-weight:800}
.scale-comparison-table th,.scale-comparison-table td,.button-matrix-wrap th,.button-matrix-wrap td{padding:13px;border-top:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;text-align:left;font-size:12px}
.scale-comparison-table thead th,.button-matrix-wrap thead th{border-top:0;background:#fbfaf7;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.scale-comparison-table tbody th{width:190px}
.scale-comparison-table tbody th strong,.scale-comparison-table tbody th small{display:block}
.scale-comparison-table tbody th small{margin-top:4px;color:var(--muted);font-weight:500;line-height:1.45}
.comparison-swatch{display:grid;min-width:105px;min-height:82px;align-content:end;gap:2px;padding:10px;border:1px solid rgba(17,17,17,.22);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.comparison-swatch b{font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace}
.comparison-swatch small{font-size:10px;font-weight:850}
.comparison-ratios{display:block;margin-top:6px;color:var(--muted);font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.scale-comparison-table td:last-child strong,.scale-comparison-table td:last-child small{display:block}
.scale-comparison-table td:last-child strong{font-size:20px}
.scale-comparison-table td:last-child small{max-width:155px;margin-top:4px;color:var(--muted);line-height:1.4}
.evidence-findings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.evidence-findings-grid article{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}
.evidence-findings-grid strong{font-size:15px}
.evidence-findings-grid p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.58}
.evidence-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.evidence-links a{padding:10px 13px;border:1px solid var(--ink);border-radius:999px;background:#fff;font-size:12px;font-weight:850}
.evidence-links a:hover{transform:translateY(-1px);box-shadow:2px 2px 0 var(--ink)}

.button-state-evidence{margin:28px 0;padding:24px;border:2px solid var(--ink);border-radius:23px;background:#fffdf8;box-shadow:6px 6px 0 var(--ink)}
.button-state-evidence>header h3{margin:7px 0 9px;font-size:28px;letter-spacing:-.04em}
.button-state-evidence>header p{max-width:760px;color:var(--muted)}
.button-matrix-wrap{margin-top:18px;box-shadow:none}
.button-matrix-wrap table{min-width:980px}
.button-matrix-wrap tbody th{width:220px}
.button-matrix-wrap td code{display:inline-block;margin-bottom:4px;font-size:10px}
.button-matrix-wrap td strong,.button-matrix-wrap td small{display:block}
.button-matrix-wrap td strong{margin-top:5px;font-size:17px}
.button-matrix-wrap td small{margin-top:4px;color:var(--muted);line-height:1.4}
.button-state-preview-shell{display:inline-flex;padding:13px;border:1px solid var(--line);border-radius:15px}
.button-state-preview{display:inline-flex;min-width:105px;justify-content:center;padding:10px 16px;border:2px solid;border-radius:11px;outline:3px solid;outline-offset:4px;font-size:12px;font-weight:900}
.evidence-status{display:inline-flex;padding:5px 9px;border:1px solid var(--ink);border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase}
.evidence-status.pass{background:#d9fbe8;color:#065f46}.evidence-status.review{background:#fff3bf;color:#7c4a03}.evidence-status.fail{background:#fee2e2;color:#991b1b}
.button-matrix-note{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:start;margin-top:18px;padding:15px;border-left:5px solid #f59e0b;border-radius:14px;background:#fff8d9}
.button-matrix-note p{margin:0;font-size:13px;line-height:1.58}
.button-matrix-sample{width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;font-weight:950}

.privacy-result-card{background:linear-gradient(135deg,#dff9ef,#eaf2ff)}
.privacy-workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.privacy-workflow-grid li{padding:18px;border:1px solid var(--line);border-top:6px solid var(--mint);border-radius:17px;background:#fff}
.privacy-workflow-grid svg{margin-bottom:11px}
.privacy-workflow-grid strong{display:block;font-size:15px}
.privacy-workflow-grid p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.privacy-evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.privacy-evidence-grid article{padding:21px;border:1px solid var(--line);border-radius:18px;background:#fff}
.privacy-evidence-grid h3{margin:0 0 13px;font-size:21px}
.privacy-evidence-grid p{color:var(--muted);font-size:13px;line-height:1.65}
.privacy-evidence-grid dl{display:grid;gap:9px;margin:0}
.privacy-evidence-grid dl>div{display:grid;grid-template-columns:155px minmax(0,1fr);gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.privacy-evidence-grid dt{font-size:11px;font-weight:900}.privacy-evidence-grid dd{margin:0;color:var(--muted);font-size:12px}

@media(max-width:900px){.evidence-heading{grid-template-columns:1fr}.evidence-result-card{max-width:520px}.evidence-findings-grid{grid-template-columns:1fr 1fr}.privacy-workflow-grid{grid-template-columns:1fr 1fr}.privacy-evidence-grid{grid-template-columns:1fr}}
@media(max-width:680px){.evidence-section{padding:52px 0}.evidence-heading h2{font-size:clamp(36px,12vw,52px)}.evidence-result-card{box-shadow:4px 4px 0 var(--ink)}.scale-comparison-table,.button-matrix-wrap{border-radius:16px;box-shadow:4px 4px 0 var(--ink)}.evidence-findings-grid,.privacy-workflow-grid{grid-template-columns:1fr}.button-state-evidence{margin-inline:-2px;padding:17px;box-shadow:4px 4px 0 var(--ink)}.button-state-evidence>header h3{font-size:24px}.privacy-evidence-grid dl>div{grid-template-columns:1fr;gap:3px}.evidence-links{display:grid}.evidence-links a{text-align:center}}
@media(prefers-reduced-motion:reduce){.evidence-links a{transition:none!important}}

/* Design System Doctor v2.4 */
.doctor-hero { background: linear-gradient(135deg, #eef2ff 0%, #fffdf8 54%, #ecfeff 100%); }
.doctor-answer-section { border-block: 1px solid var(--line); }
.doctor-answer-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: start; }
.doctor-answer-grid h2 { margin: 9px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.055em; }
.doctor-answer-grid > p { margin: 0; font-size: 19px; color: #3f3b36; }
.doctor-app { border: 2px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.doctor-topbar { display: flex; justify-content: space-between; gap: 32px; align-items: center; padding: 28px; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(45,212,191,.25), transparent 28%), linear-gradient(135deg, #111827, #312e81 62%, #164e63); }
.doctor-topbar h2 { margin: 6px 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.055em; line-height: 1; }
.doctor-topbar p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); }
.doctor-kicker { display: inline-flex; align-items: center; gap: 7px; color: #a7f3d0; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 900; }
.doctor-score { width: 118px; height: 118px; flex: 0 0 118px; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.72); background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 8px rgba(45,212,191,.14); }
.doctor-score strong { font-size: 42px; line-height: 1; }.doctor-score span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #dbeafe; }
.doctor-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.doctor-notice { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 16px 22px 0; padding: 11px 14px; border: 1px solid #86efac; border-radius: 13px; background: #f0fdf4; color: #166534; font-size: 13px; font-weight: 750; }
.doctor-notice button { border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; }
.doctor-tabs { display: flex; overflow-x: auto; gap: 5px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; scrollbar-width: thin; }
.doctor-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #59616d; font-size: 12px; font-weight: 850; cursor: pointer; }
.doctor-tabs button:hover { background: #f1f5f9; }.doctor-tabs button.is-active { background: #111827; color: white; border-color: #111827; }
.doctor-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 20px; background: #f8fafc; }
.doctor-panel { min-width: 0; border: 1px solid #dbe1e8; border-radius: 20px; background: white; padding: 20px; box-shadow: 0 8px 24px rgba(15,23,42,.045); }
.doctor-wide { grid-column: 1/-1; }.doctor-panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 18px; }
.doctor-panel-head span { color: #6366f1; font-size: 10px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }.doctor-panel-head h3 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.035em; line-height: 1.1; }
.field-label { display: grid; gap: 7px; margin-bottom: 14px; color: #475569; font-size: 12px; font-weight: 850; }
.field-label input, .field-label select, .doctor-panel textarea, .doctor-token-table input, .doctor-brand-row input:not([type=color]) { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; padding: 9px 11px; color: #111827; }
.doctor-panel textarea { display: block; resize: vertical; font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.doctor-color-field { display: grid; grid-template-columns: 1fr 54px; gap: 10px; align-items: end; }.doctor-color-field .field-label { margin: 0; }.doctor-color-field input[type=color] { width: 54px; height: 44px; border: 1px solid #cbd5e1; border-radius: 11px; background: white; padding: 4px; cursor: pointer; }
.doctor-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }.doctor-fineprint { margin: 13px 0 0; color: #64748b; font-size: 11px; }
.doctor-theme-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }.doctor-theme-switch button { min-height: 36px; border: 1px solid #cbd5e1; border-radius: 999px; background: white; padding: 0 12px; font-size: 11px; font-weight: 850; cursor: pointer; }.doctor-theme-switch button.is-active { background: #312e81; color: white; border-color: #312e81; }
.doctor-product { overflow: hidden; min-height: 360px; border: 1px solid var(--d-border); border-radius: 17px; background: var(--d-canvas); color: var(--d-text); box-shadow: 0 10px 26px rgba(15,23,42,.12); }
.doctor-product-nav { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--d-border); background: var(--d-surface); }.doctor-product-nav > span { font-weight: 950; letter-spacing: -.03em; }.doctor-product-nav div { display: flex; gap: 6px; }.doctor-product-nav i { width: 8px; height: 8px; border-radius: 50%; background: var(--d-primary); opacity: .9; }
.doctor-product-body { display: grid; grid-template-columns: 98px 1fr; min-height: 315px; }.doctor-product aside { display: grid; align-content: start; gap: 13px; padding: 16px 12px; border-right: 1px solid var(--d-border); background: var(--d-surface); font-size: 10px; color: var(--d-muted); }.doctor-product aside b { color: var(--d-text); }
.doctor-product-content { padding: 18px; }.doctor-product-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.doctor-product-title small { display: block; color: var(--d-muted); font-size: 9px; }.doctor-product-title strong { display: block; font-size: 17px; }.doctor-product-title button { min-height: 32px; border: 0; border-radius: 8px; background: var(--d-primary); color: var(--d-on-primary); padding: 0 10px; font-size: 9px; font-weight: 850; outline-color: var(--d-focus); }
.doctor-product-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 17px 0; }.doctor-product-cards article { border: 1px solid var(--d-border); border-radius: 10px; background: var(--d-surface); padding: 10px; }.doctor-product-cards small,.doctor-product-cards span { display: block; color: var(--d-muted); font-size: 8px; }.doctor-product-cards strong { display: block; margin: 3px 0; font-size: 20px; }
.doctor-product-table { border: 1px solid var(--d-border); border-radius: 10px; background: var(--d-surface); overflow: hidden; font-size: 9px; }.doctor-product-table > div { display: grid; grid-template-columns: 1fr 74px; padding: 8px 10px; border-bottom: 1px solid var(--d-border); }.doctor-product-table > div:last-child { border: 0; }.doctor-product-table em { color: var(--d-muted); font-style: normal; }
.doctor-metrics,.doctor-coverage-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 15px; }.doctor-metric { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: 10px; }.doctor-metric strong { display: block; font-size: 20px; letter-spacing: -.04em; word-break: break-word; }.doctor-metric span { color: #64748b; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.doctor-token-table { overflow: auto; max-height: 620px; border: 1px solid #e2e8f0; border-radius: 13px; }.doctor-token-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 11px; }.doctor-token-table th { position: sticky; top: 0; z-index: 1; background: #f1f5f9; color: #475569; text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; }.doctor-token-table th,.doctor-token-table td { padding: 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }.doctor-token-table tr:last-child td { border-bottom: 0; }.doctor-token-table td small { display: block; max-width: 360px; color: #64748b; }.doctor-token-table code { font-size: 10px; }.doctor-token-table input { min-width: 180px; min-height: 36px; padding: 5px 8px; font: 10px ui-monospace,monospace; }
.doctor-token-link { border: 0; background: transparent; padding: 0; text-align: left; color: #312e81; font: 800 10px ui-monospace,monospace; cursor: pointer; }.doctor-layer { display: inline-flex; border-radius: 999px; padding: 4px 7px; font-size: 8px; font-weight: 900; text-transform: uppercase; }.doctor-layer-primitive { background: #e0e7ff; color:#3730a3; }.doctor-layer-semantic { background:#ccfbf1;color:#115e59; }.doctor-layer-component{background:#fce7f3;color:#9d174d;}
.doctor-swatch { display: inline-block; width: 24px; height: 24px; margin-right: 7px; border: 1px solid #94a3b8; border-radius: 7px; vertical-align: middle; }.doctor-swatch-large { width: 58px; height: 58px; border-radius: 15px; flex: 0 0 58px; }
.doctor-lineage { display: flex; gap: 13px; align-items: center; margin: 16px 0; padding: 14px; border-radius: 15px; background: #f8fafc; }.doctor-lineage strong,.doctor-lineage small { display: block; }.doctor-lineage small { color:#64748b; }
.doctor-chain { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }.doctor-chain li { display: grid; grid-template-columns: 24px minmax(0,1fr) 18px; gap: 8px; align-items: center; }.doctor-chain li > span { width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#e0e7ff;color:#3730a3;font-size:9px;font-weight:900;}.doctor-chain code { min-width:0; overflow-wrap:anywhere; border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;padding:8px;font-size:10px; }
.doctor-status-row { display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e2e8f0;font-size:12px;}.doctor-status-row:last-of-type{border:0}.doctor-status-row>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%}.doctor-status-row .is-good{background:#dcfce7;color:#166534}.doctor-status-row .is-warning{background:#fee2e2;color:#991b1b}
.doctor-range { display:grid;gap:8px;padding:11px 0;border-bottom:1px solid #e2e8f0;}.doctor-range>span{display:flex;justify-content:space-between;gap:14px;font-size:12px}.doctor-range input{width:100%;accent-color:#4f46e5}.doctor-check{display:flex;gap:10px;align-items:start;margin-top:14px}.doctor-check input{margin-top:4px;accent-color:#4f46e5}.doctor-check strong,.doctor-check small{display:block}.doctor-check small{color:#64748b;font-size:10px}
.doctor-plan-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.doctor-plan{display:flex;flex-direction:column;border:1px solid #cbd5e1;border-radius:16px;padding:15px;background:#fff}.doctor-plan>span{font-size:9px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:#4f46e5}.doctor-plan h4{margin:5px 0;font-size:20px}.doctor-plan p,.doctor-plan li{font-size:11px;color:#64748b}.doctor-plan ul{padding-left:18px}.doctor-plan details{margin:6px 0 13px;border-top:1px solid #e2e8f0;padding-top:9px}.doctor-plan summary{cursor:pointer;font-size:10px;font-weight:850}.doctor-plan .button{margin-top:auto}.doctor-change-row{display:grid;gap:3px;padding:8px 0;border-bottom:1px solid #e2e8f0}.doctor-change-row strong,.doctor-change-row code,.doctor-change-row small{font-size:9px}.doctor-change-row small{color:#64748b}
.doctor-pair{display:inline-flex;margin-right:6px}.doctor-pair i{width:16px;height:24px;border:1px solid #94a3b8}.doctor-pair i:first-child{border-radius:6px 0 0 6px}.doctor-pair i:last-child{border-radius:0 6px 6px 0}.doctor-pass,.doctor-fail{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:950}.doctor-pass{background:#dcfce7;color:#166534}.doctor-fail{background:#fee2e2;color:#991b1b}
.doctor-coverage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.doctor-coverage-grid article{border:1px solid #e2e8f0;border-radius:13px;padding:12px}.doctor-coverage-grid article>div:first-child{display:flex;justify-content:space-between;gap:10px}.doctor-coverage-grid article>div:first-child span{color:#4f46e5;font-weight:900}.doctor-state-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.doctor-state-chips span{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:850}.doctor-state-chips .is-present{background:#ecfdf5;color:#166534}.doctor-state-chips .is-missing{background:#fff1f2;color:#9f1239}
.doctor-migration-list{display:grid;gap:8px;margin-top:16px}.doctor-migration-list article{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:start;border:1px solid #e2e8f0;border-radius:12px;padding:11px}.doctor-migration-list p{margin:2px 0;color:#64748b;font-size:10px}.doctor-migration-list code{font-size:9px}.doctor-migration-list b{color:#b91c1c;font-size:9px}.doctor-change{display:inline-flex;justify-content:center;border-radius:999px;padding:4px 6px;font-size:8px;font-weight:950;text-transform:uppercase}.doctor-change-added{background:#dcfce7;color:#166534}.doctor-change-removed{background:#fee2e2;color:#991b1b}.doctor-change-changed{background:#fef3c7;color:#92400e}.doctor-change-renamed{background:#e0e7ff;color:#3730a3}.doctor-change-deprecated{background:#f1f5f9;color:#475569}
.doctor-brand-row{display:grid;grid-template-columns:1fr 44px 110px 36px;gap:7px;align-items:center;margin-bottom:8px}.doctor-brand-row input{min-width:0}.doctor-brand-row input[type=color]{width:44px;height:42px;border:1px solid #cbd5e1;border-radius:10px;background:white;padding:3px}.doctor-brand-row button{width:36px;height:36px;border:1px solid #cbd5e1;border-radius:10px;background:white;display:grid;place-items:center;cursor:pointer}.doctor-brand-results{display:grid;gap:9px}.doctor-brand-results article{display:grid;grid-template-columns:35px minmax(120px,1.2fr) repeat(3,minmax(80px,.65fr)) 45px;gap:9px;align-items:center;border:1px solid #e2e8f0;border-radius:13px;padding:9px}.doctor-brand-dot{width:32px;height:32px;border:1px solid #94a3b8;border-radius:10px}.doctor-brand-results article>div:nth-child(2) strong,.doctor-brand-results article>div:nth-child(2) code{display:block}.doctor-brand-results article>div:nth-child(2) code{font-size:9px}.doctor-text-chip{width:42px;height:35px;display:grid;place-items:center;border-radius:9px;font-weight:950}
.doctor-export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.doctor-export-grid article{display:flex;flex-direction:column;align-items:start;border:1px solid #e2e8f0;border-radius:15px;padding:15px;background:#f8fafc}.doctor-export-grid h4{margin:9px 0 3px;font-size:17px}.doctor-export-grid p{margin:0 0 14px;color:#64748b;font-size:11px}.doctor-export-grid .button{margin-top:auto}.doctor-callout{display:flex;gap:12px;align-items:start;margin-top:16px;border:1px solid #fcd34d;border-radius:14px;background:#fffbeb;padding:14px}.doctor-callout strong{display:block}.doctor-callout p{margin:3px 0 0;color:#78350f;font-size:11px}
.doctor-capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.doctor-capability-grid article{border:2px solid var(--ink);border-radius:20px;background:white;padding:21px;box-shadow:5px 5px 0 var(--ink)}.doctor-capability-grid article>span{width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:#e0e7ff}.doctor-capability-grid article:nth-child(2)>span,.doctor-capability-grid article:nth-child(5)>span{background:#ccfbf1}.doctor-capability-grid article:nth-child(3)>span,.doctor-capability-grid article:nth-child(6)>span{background:#fef3c7}.doctor-capability-grid h3{margin:17px 0 7px;font-size:20px;letter-spacing:-.035em}.doctor-capability-grid p{margin:0;color:#57534e;font-size:13px}.doctor-method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:45px}.doctor-method-grid h2{font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.05em}.doctor-method-grid p{color:#57534e}.doctor-method-grid pre{overflow:auto;border:2px solid var(--ink);border-radius:16px;background:#111827;color:#dbeafe;padding:18px;box-shadow:5px 5px 0 var(--ink)}

@media (max-width: 900px) {
  .doctor-layout,.doctor-answer-grid,.doctor-method-grid{grid-template-columns:1fr}.doctor-wide{grid-column:auto}.doctor-plan-grid,.doctor-capability-grid,.doctor-export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-brand-results article{grid-template-columns:34px 1fr repeat(2,minmax(70px,.7fr));}.doctor-brand-results article .doctor-metric:nth-of-type(3),.doctor-brand-results article .doctor-text-chip{display:none}
}
@media (max-width: 640px) {
  .doctor-app{border-radius:20px;box-shadow:5px 5px 0 var(--ink)}.doctor-topbar{align-items:flex-start;padding:20px}.doctor-score{width:82px;height:82px;flex-basis:82px}.doctor-score strong{font-size:29px}.doctor-score span{font-size:7px}.doctor-actions,.doctor-layout{padding:12px}.doctor-actions .button{flex:1;min-width:135px}.doctor-panel{padding:15px}.doctor-plan-grid,.doctor-capability-grid,.doctor-export-grid,.doctor-coverage-grid{grid-template-columns:1fr}.doctor-product-body{grid-template-columns:75px 1fr}.doctor-product-content{padding:12px}.doctor-product-cards{grid-template-columns:1fr}.doctor-product-cards article:nth-child(n+2){display:none}.doctor-metrics,.doctor-coverage-summary{grid-template-columns:repeat(2,1fr)}.doctor-brand-row{grid-template-columns:1fr 44px 36px}.doctor-brand-row input:nth-child(3){display:none}.doctor-brand-results article{grid-template-columns:34px 1fr 70px}.doctor-brand-results article .doctor-metric:nth-of-type(n+2),.doctor-brand-results article .doctor-text-chip{display:none}.doctor-migration-list article{grid-template-columns:66px 1fr}.doctor-migration-list b{grid-column:2}.doctor-answer-grid>p{font-size:16px}
}
.home-doctor-section { padding-top: 70px; background: linear-gradient(135deg,#eef2ff,#fffdf8 54%,#ecfeff); }
.home-doctor-card { display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;border:2px solid var(--ink);border-radius:28px;background:white;padding:38px;box-shadow:9px 9px 0 var(--ink); }
.home-doctor-card h2 { margin:8px 0 14px;font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.06em; }.home-doctor-card p{max-width:670px;color:#57534e}
.home-doctor-graph { display:grid;gap:10px;justify-items:center; }.home-doctor-graph span { width:100%;border:2px solid var(--ink);border-radius:14px;background:#e0e7ff;padding:14px;text-align:center;font:800 11px ui-monospace,monospace;box-shadow:4px 4px 0 var(--ink); }.home-doctor-graph span:nth-of-type(2){background:#ccfbf1}.home-doctor-graph span:nth-of-type(3){background:#fce7f3}
@media(max-width:800px){.home-doctor-card{grid-template-columns:1fr;padding:24px}.home-doctor-graph{grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;overflow:auto}.home-doctor-graph svg{transform:rotate(0deg)}}
@media(max-width:560px){.home-doctor-graph{grid-template-columns:1fr}.home-doctor-graph svg{transform:rotate(90deg)}}

/* Design System Doctor v2.5 advanced workspace */
.doctor-theme-toolbar{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end;margin-bottom:16px}.doctor-theme-toolbar label{display:grid;gap:5px;font-size:10px;font-weight:850;color:#475569}.doctor-theme-toolbar input,.doctor-theme-toolbar select{width:100%;min-width:0}
.doctor-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:18px}.doctor-theme-grid article{display:grid;gap:8px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;padding:11px}.doctor-theme-grid article.is-selected{border-color:#4f46e5;box-shadow:0 0 0 2px #c7d2fe}.doctor-theme-select{display:grid;gap:2px;text-align:left;border:0;background:transparent;cursor:pointer;padding:0}.doctor-theme-select strong{font-size:13px}.doctor-theme-select code,.doctor-theme-select span{font-size:9px;color:#64748b}.doctor-theme-grid label{display:grid;gap:4px;font-size:9px;font-weight:800}.doctor-theme-grid input,.doctor-theme-grid select{min-width:0;padding:8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:10px}.doctor-danger-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #fecaca;border-radius:8px;background:#fff1f2;color:#9f1239;padding:7px;font-size:9px;font-weight:900;cursor:pointer}
.doctor-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.doctor-filter-row button{border:1px solid #cbd5e1;border-radius:999px;background:#fff;padding:6px 10px;font-size:9px;font-weight:900;text-transform:capitalize;cursor:pointer}.doctor-filter-row button.is-active{border-color:#312e81;background:#e0e7ff;color:#312e81}
.doctor-lint-list{display:grid;gap:9px;max-height:720px;overflow:auto;padding-right:3px}.doctor-lint-issue{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:11px;align-items:start;border:1px solid #e2e8f0;border-left:5px solid #94a3b8;border-radius:13px;background:#fff;padding:11px}.doctor-lint-issue.is-error{border-left-color:#dc2626}.doctor-lint-issue.is-warning{border-left-color:#d97706}.doctor-lint-issue.is-info{border-left-color:#2563eb}.doctor-lint-issue>span{display:inline-flex;justify-content:center;border-radius:999px;padding:4px 6px;background:#f1f5f9;font-size:8px;font-weight:950;text-transform:uppercase}.doctor-lint-issue strong,.doctor-lint-issue code,.doctor-lint-issue p,.doctor-lint-issue small,.doctor-lint-issue em{display:block}.doctor-lint-issue code{margin-top:3px;font-size:9px;overflow-wrap:anywhere}.doctor-lint-issue p{margin:5px 0 2px;color:#475569;font-size:10px}.doctor-lint-issue small{color:#0f766e;font-size:9px}.doctor-lint-issue em{margin-top:4px;color:#64748b;font-size:8px}.doctor-lint-issue button{border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:6px 8px;font-size:9px;font-weight:850;cursor:pointer}.doctor-empty{display:grid;place-items:center;text-align:center;min-height:220px;border:1px dashed #cbd5e1;border-radius:14px;color:#64748b}.doctor-empty strong{color:#0f172a}
.doctor-selected-token{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;margin:12px 0;padding:10px;border:1px solid #e2e8f0;border-radius:12px}.doctor-selected-token i{width:40px;height:40px;border:1px solid #94a3b8;border-radius:10px}.doctor-selected-token strong,.doctor-selected-token code{display:block;overflow-wrap:anywhere}.doctor-selected-token code{font-size:10px}.doctor-check>span{display:grid;grid-template-columns:auto 1fr;column-gap:6px}.doctor-check>span small{grid-column:1/-1}
.doctor-dependency-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.doctor-dependency-grid button{display:grid;gap:5px;text-align:left;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:10px;cursor:pointer}.doctor-dependency-grid code{font-size:9px;overflow-wrap:anywhere}.doctor-dependency-grid span{font-size:8px;font-weight:900;color:#4f46e5;text-transform:uppercase}
.doctor-rule-list{display:grid;gap:8px;margin-top:12px}.doctor-rule-list article{display:grid;grid-template-columns:minmax(130px,1.2fr) 100px minmax(150px,1fr) minmax(150px,1fr) 90px 70px 76px 36px;gap:6px;align-items:center;border:1px solid #e2e8f0;border-radius:11px;padding:8px;background:#f8fafc}.doctor-rule-list input,.doctor-rule-list select{min-width:0;padding:7px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;font-size:9px}.doctor-rule-list label{display:flex;gap:4px;align-items:center;font-size:8px;font-weight:800}.doctor-rule-list button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #fecaca;border-radius:8px;background:#fff1f2;color:#9f1239;cursor:pointer}
.doctor-change-evidence{display:grid;grid-template-columns:18px 1fr;gap:7px;padding:9px 0;border-bottom:1px solid #e2e8f0;cursor:pointer}.doctor-change-evidence>input{margin-top:3px;accent-color:#4f46e5}.doctor-change-evidence strong,.doctor-change-evidence code,.doctor-change-evidence span,.doctor-change-evidence small{display:block}.doctor-change-evidence code{margin:3px 0;font-size:9px}.doctor-change-evidence span{font-size:10px;font-weight:900;color:#166534}.doctor-change-evidence small{font-size:8px;color:#64748b;line-height:1.5}.doctor-plan details[open]{max-height:440px;overflow:auto;padding-right:3px}
.doctor-regression-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0 14px}.doctor-migration-list article>div:nth-child(2) small{display:block;margin-top:5px;color:#64748b;font-size:8px}.doctor-migration-flags{display:grid;justify-items:end;gap:4px}.doctor-migration-flags b{display:inline-flex;border-radius:999px;background:#111827;color:#fff;padding:4px 7px;text-transform:uppercase}.doctor-migration-flags em{display:inline-flex;border-radius:999px;background:#fee2e2;color:#991b1b;padding:3px 6px;font-size:7px;font-style:normal;font-weight:900}
.doctor-brand-row-advanced{grid-template-columns:minmax(100px,1fr) 44px 100px minmax(100px,.8fr) 36px}.doctor-brand-migration{display:grid;gap:5px;margin-top:12px;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:10px}.doctor-brand-migration strong{font-size:11px}.doctor-brand-migration span{font-size:9px;color:#64748b}.doctor-brand-results article>div:nth-child(2) small{display:block;font-size:8px;color:#64748b}.doctor-theme-matrix{margin-top:14px}.doctor-theme-matrix table{min-width:650px}

@media(max-width:1100px){.doctor-theme-toolbar{grid-template-columns:1fr 1fr}.doctor-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-rule-list article{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-rule-list article button{justify-self:end}.doctor-regression-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.doctor-dependency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-brand-row-advanced{grid-template-columns:1fr 44px 110px 36px}.doctor-brand-row-advanced select{grid-column:1/-1}}
@media(max-width:720px){.doctor-theme-toolbar,.doctor-theme-grid,.doctor-dependency-grid,.doctor-regression-grid{grid-template-columns:1fr}.doctor-lint-issue{grid-template-columns:58px 1fr}.doctor-lint-issue button{grid-column:2;justify-self:start}.doctor-rule-list article{grid-template-columns:1fr}.doctor-rule-list article button{justify-self:start}.doctor-brand-row-advanced{grid-template-columns:1fr 44px 36px}.doctor-brand-row-advanced input:nth-child(3){display:none}.doctor-brand-row-advanced select{grid-column:1/-1}.doctor-migration-flags{grid-column:2;justify-items:start}.doctor-theme-grid article{padding:10px}}
.doctor-loading{min-height:360px;display:grid;place-items:center;align-content:center;gap:8px;border:2px solid var(--ink);border-radius:24px;background:linear-gradient(135deg,#eef2ff,#fffdf8);box-shadow:7px 7px 0 var(--ink);text-align:center;padding:30px}.doctor-loading strong{font-size:22px}.doctor-loading span{color:#64748b;font-size:12px}

/* Design System Doctor import onboarding */
.doctor-import-mode{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 13px}.doctor-import-mode label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;padding:10px;cursor:pointer}.doctor-import-mode label:has(input:checked){border-color:#4f46e5;background:#eef2ff;box-shadow:0 0 0 2px #c7d2fe}.doctor-import-mode input{margin-top:3px;accent-color:#4f46e5}.doctor-import-mode strong,.doctor-import-mode small{display:block}.doctor-import-mode strong{font-size:11px;color:#111827}.doctor-import-mode small{margin-top:3px;color:#64748b;font-size:9px;line-height:1.45}
.doctor-import-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 13px;padding:10px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}.doctor-import-summary.is-ready{border-color:#86efac;background:#f0fdf4}.doctor-import-summary>div{display:grid;gap:2px}.doctor-import-summary>div span{font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#64748b}.doctor-import-summary>div strong{font-size:11px;overflow-wrap:anywhere}.doctor-import-summary>p{grid-column:1/-1;margin:1px 0;color:#475569;font-size:9px;line-height:1.5;overflow-wrap:anywhere}.doctor-import-summary .doctor-import-warning{display:flex;align-items:flex-start;gap:5px;color:#92400e}
.doctor-import-help{margin:13px 0;padding:11px;border:1px dashed #94a3b8;border-radius:12px;background:#fff}.doctor-import-help>strong{font-size:11px}.doctor-import-help>p{margin:5px 0 8px;color:#64748b;font-size:9px;line-height:1.55}.doctor-import-help>div{display:flex;flex-wrap:wrap;gap:6px}.doctor-import-help a{display:inline-flex;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;padding:5px 8px;color:#312e81;font-size:8px;font-weight:900;text-decoration:none}.doctor-import-help a:hover{border-color:#4f46e5;background:#eef2ff}
.doctor-privacy-note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start;margin-top:12px;padding:10px;border-left:4px solid #14b8a6;border-radius:10px;background:#ecfdf5}.doctor-privacy-note p{margin:0;color:#115e59;font-size:9px;line-height:1.55}
@media(max-width:720px){.doctor-import-mode{grid-template-columns:1fr}.doctor-import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.doctor-start-section{padding-top:62px}.doctor-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.doctor-start-grid article{position:relative;border:2px solid var(--ink);border-radius:22px;background:#fff;padding:24px;box-shadow:6px 6px 0 var(--ink)}.doctor-start-grid article>span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#312e81;color:#fff;font-size:12px;font-weight:950}.doctor-start-grid h3{margin:16px 0 8px;font-size:25px;letter-spacing:-.035em}.doctor-start-grid p{color:#64748b}.doctor-start-grid a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:#312e81;font-weight:900;text-decoration:none}.doctor-start-grid article:nth-child(2)>span{background:#0f766e}
@media(max-width:720px){.doctor-start-grid{grid-template-columns:1fr}.doctor-start-grid article{box-shadow:4px 4px 0 var(--ink)}}

/* Accessible Data Visualization Lab */
.viz-hero{background:radial-gradient(circle at 12% 18%,rgba(79,70,229,.18),transparent 30%),radial-gradient(circle at 88% 15%,rgba(15,118,110,.16),transparent 26%),linear-gradient(180deg,#fffaf3 0%,#f8fafc 100%)}
.viz-answer-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}.viz-answer-grid p{font-size:1.08rem;line-height:1.75;color:#334155}
.viz-loading{display:grid;gap:7px;place-items:center;min-height:280px;border:1px solid var(--line);border-radius:24px;background:#fff;padding:32px;text-align:center}.viz-loading span{color:var(--muted)}
.viz-lab{overflow:hidden;border:2px solid #0f172a;border-radius:26px;background:#eef2ff;box-shadow:8px 8px 0 #0f172a;color:#0f172a}
.viz-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#0f172a;color:#fff;padding:15px 18px}.viz-toolbar>div:first-child span,.viz-toolbar>div:first-child strong{display:block}.viz-toolbar>div:first-child span{color:#c7d2fe;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.viz-toolbar>div:first-child strong{margin-top:3px;font-size:1rem}.viz-toolbar>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.viz-toolbar button,.viz-tabs button,.viz-export-grid button{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;padding:8px 11px;font:inherit;font-size:.75rem;font-weight:850;cursor:pointer}.viz-toolbar button.is-primary{background:#4f46e5;border-color:#818cf8}
.viz-tabs{display:flex;gap:6px;overflow:auto;padding:9px 12px;background:#fff;border-bottom:1px solid #cbd5e1}.viz-tabs button{flex:0 0 auto;border-color:#cbd5e1;background:#f8fafc;color:#475569}.viz-tabs button.is-active{background:#eef2ff;border-color:#4f46e5;color:#312e81}
.viz-workspace-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;padding:14px}.viz-main-column{display:grid;gap:14px;align-content:start}.viz-panel{min-width:0;border:1px solid #cbd5e1;border-radius:16px;background:#fff;padding:15px;box-shadow:0 1px 2px rgba(15,23,42,.05)}.viz-panel-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}.viz-panel-head>span{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#312e81;color:#fff;font-size:.7rem;font-weight:950}.viz-panel-head>svg{flex:0 0 auto;padding:7px;width:34px;height:34px;border-radius:10px;background:#e0e7ff;color:#312e81}.viz-panel-head strong,.viz-panel-head small{display:block}.viz-panel-head strong{font-size:.9rem}.viz-panel-head small{margin-top:3px;color:#64748b;font-size:.75rem;line-height:1.45}
.viz-controls{display:grid;gap:12px;align-content:start}.viz-controls>label,.viz-field-row label{display:grid;gap:5px;color:#334155;font-size:.75rem;font-weight:900}.viz-controls>label>span{float:right;color:#4f46e5}.viz-controls input,.viz-controls select,.viz-controls textarea,.viz-preview-head select{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:8px;color:#0f172a;font:inherit;font-size:.78rem}.viz-controls textarea{resize:vertical;line-height:1.45}.viz-controls input[type="range"]{padding:0;accent-color:#4f46e5}.viz-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.viz-color-field{display:grid;grid-template-columns:38px minmax(0,1fr);gap:5px}.viz-modern-color-trigger{display:grid;place-items:center;width:38px;height:34px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:3px;cursor:pointer}.viz-modern-color-trigger>span{display:block;width:100%;height:100%;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}
.viz-chart-kind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.viz-chart-kind-grid button{display:grid;place-items:center;gap:3px;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;padding:7px 3px;color:#475569;font-size:.68rem;font-weight:900;cursor:pointer}.viz-chart-kind-grid button.is-active{border-color:#4f46e5;background:#eef2ff;color:#312e81}.viz-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.viz-check-grid label{display:flex;gap:6px;align-items:center;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;padding:7px;font-size:.7rem;font-weight:850}.viz-check-grid input{width:auto;accent-color:#4f46e5}.viz-regenerate{justify-content:center;width:100%}
.viz-score-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;background:linear-gradient(135deg,#312e81,#0f766e);color:#fff}.viz-score-card>div:first-child span,.viz-score-card>div:first-child small{display:block}.viz-score-card>div:first-child strong{display:block;font-size:3.4rem;line-height:1}.viz-score-card>div:first-child small{margin-top:5px;color:#dbeafe}.viz-score-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.viz-score-details>div{border:1px solid rgba(255,255,255,.22);border-radius:11px;background:rgba(255,255,255,.08);padding:9px}.viz-score-details span,.viz-score-details strong{display:block}.viz-score-details span{font-size:.68rem;color:#dbeafe}.viz-score-details strong{margin-top:3px;font-size:.8rem}
.viz-series-list{display:grid;gap:6px}.viz-series-list article{display:grid;grid-template-columns:34px minmax(120px,1fr) minmax(150px,.8fr) 34px;gap:8px;align-items:center;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:7px}.viz-series-color{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;font-size:.72rem;font-weight:950}.viz-series-list strong,.viz-series-list small{display:block}.viz-series-list strong{font-size:.78rem}.viz-series-list small{margin-top:2px;color:#64748b;font-size:.68rem}.viz-inline-color{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px}.viz-inline-color input{min-width:0;height:31px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:4px;font-size:.72rem}.viz-inline-color .viz-modern-color-trigger{width:34px;height:31px;border-radius:7px}.viz-series-list article>button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer}
.viz-preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.viz-preview-head strong,.viz-preview-head small{display:block}.viz-preview-head small{color:#64748b;font-size:.75rem}.viz-preview-head select{width:auto}.viz-preview-wrap{overflow:auto}.viz-preview{display:block;width:100%;min-width:620px;height:auto}.viz-warning-panel{border-color:#fed7aa;background:#fff7ed}.viz-warning-panel ul{display:grid;gap:7px;margin:0;padding-left:20px;color:#9a3412;font-size:.8rem;line-height:1.5}
.viz-tab-panel{margin:14px}.viz-matrix-scroll{overflow:auto}.viz-matrix{width:100%;min-width:980px;border-collapse:collapse;font-size:.74rem}.viz-matrix th,.viz-matrix td{border-bottom:1px solid #e2e8f0;padding:9px;text-align:left}.viz-matrix thead th{background:#f8fafc}.viz-matrix tbody tr.is-adjacent{background:#eef2ff}.viz-matrix td:first-child{display:flex;align-items:center;gap:5px}.viz-matrix td:first-child>span{width:18px;height:18px;border-radius:5px;border:1px solid #cbd5e1}.viz-matrix em{display:inline-flex;border-radius:999px;padding:4px 8px;font-style:normal;font-weight:900}.viz-matrix em.is-strong{background:#dcfce7;color:#166534}.viz-matrix em.is-review{background:#fef3c7;color:#92400e}.viz-matrix em.is-risk{background:#fee2e2;color:#991b1b}.viz-method-note,.viz-local-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;border-radius:11px;background:#ecfeff;color:#155e75;padding:11px}.viz-method-note p,.viz-local-note p{margin:0;font-size:.76rem;line-height:1.5}
.viz-simulation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.viz-simulation-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.viz-simulation-title span{border-radius:999px;background:#eef2ff;color:#3730a3;padding:4px 8px;font-size:.68rem;font-weight:900}
.viz-screenshot-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px}.viz-upload{display:grid;place-items:center;gap:6px;width:100%;min-height:150px;border:2px dashed #818cf8;border-radius:14px;background:#eef2ff;color:#312e81;cursor:pointer}.viz-upload span{font-size:.7rem;color:#64748b}.viz-busy{display:flex;gap:8px;align-items:center;margin-top:10px}.viz-screenshot-preview{display:block;max-width:100%;max-height:520px;margin:auto;border-radius:12px}.viz-screenshot-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.viz-screenshot-summary>div{border:1px solid #e2e8f0;border-radius:10px;padding:9px}.viz-screenshot-summary span,.viz-screenshot-summary strong{display:block}.viz-screenshot-summary span{font-size:.68rem;color:#64748b}.viz-screenshot-summary strong{margin-top:4px}.viz-screenshot-summary i{display:inline-block;width:16px;height:16px;margin-right:6px;border-radius:4px;vertical-align:middle;border:1px solid #cbd5e1}.viz-candidate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.viz-candidate-grid article{border:1px solid #e2e8f0;border-radius:10px;padding:8px}.viz-candidate-grid i{display:block;height:46px;border-radius:7px;margin-bottom:7px}.viz-candidate-grid strong,.viz-candidate-grid span,.viz-candidate-grid small{display:block}.viz-candidate-grid span,.viz-candidate-grid small{color:#64748b;font-size:.68rem}
.viz-export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.viz-export-grid article>div:first-child strong,.viz-export-grid article>div:first-child small{display:block}.viz-export-grid article>div:first-child small{color:#64748b}.viz-export-grid pre{max-height:260px;overflow:auto;border-radius:10px;background:#0f172a;color:#e2e8f0;padding:11px;font-size:.7rem;white-space:pre-wrap}.viz-export-grid article>div:last-child{display:flex;gap:7px}.viz-export-grid button{border-color:#cbd5e1;background:#fff;color:#334155}.viz-bundle-action{display:flex;justify-content:center;margin-top:16px}
.viz-capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.viz-capability-grid article,.viz-method-grid article{border:1px solid var(--line);border-radius:20px;background:#fff;padding:20px}.viz-capability-grid span{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#eef2ff;color:#4338ca}.viz-capability-grid h3{margin:13px 0 6px}.viz-capability-grid p,.viz-method-grid p{color:var(--muted);line-height:1.6}.viz-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.home-viz-preview{display:flex;align-items:end;gap:13px;min-height:220px;padding:28px;border:2px solid var(--ink);border-radius:24px;background:linear-gradient(180deg,#eef2ff,#fff);box-shadow:6px 6px 0 var(--ink)}.home-viz-preview>span{position:relative;flex:1;min-width:28px;border-radius:10px 10px 4px 4px;background:var(--blue)}.home-viz-preview>span:nth-child(2){background:#d97706}.home-viz-preview>span:nth-child(3){background:#0f766e}.home-viz-preview>span:nth-child(4){background:#9333ea}.home-viz-preview>span:nth-child(5){background:#dc2626}.home-viz-preview>span:nth-child(6){background:#0891b2}.home-viz-preview i{position:absolute;inset:-28px 0 auto;text-align:center;font-style:normal;font-weight:900;color:var(--muted)}
@media(max-width:1000px){.viz-workspace-grid,.viz-screenshot-grid{grid-template-columns:1fr}.viz-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-controls>.viz-panel-head,.viz-controls>.viz-regenerate,.viz-controls>label:has(textarea),.viz-controls>.viz-check-grid,.viz-controls>.viz-chart-kind-grid{grid-column:1/-1}.viz-capability-grid,.viz-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.viz-answer-grid,.viz-score-card,.viz-simulation-grid,.viz-export-grid,.viz-capability-grid,.viz-method-grid{grid-template-columns:1fr}.viz-toolbar{align-items:flex-start}.viz-toolbar,.viz-toolbar>div:last-child{display:grid}.viz-toolbar>div:last-child{grid-template-columns:repeat(3,1fr);width:100%}.viz-workspace-grid{padding:8px}.viz-controls{grid-template-columns:1fr}.viz-controls>*{grid-column:auto!important}.viz-field-row{grid-template-columns:1fr}.viz-series-list article{grid-template-columns:34px minmax(0,1fr) 34px}.viz-inline-color{grid-column:2}.viz-screenshot-summary,.viz-candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-tab-panel{margin:8px}.viz-preview{min-width:560px}}
@media(max-width:480px){.viz-toolbar>div:last-child{grid-template-columns:1fr}.viz-score-details,.viz-screenshot-summary,.viz-candidate-grid{grid-template-columns:1fr}.viz-tabs{padding-inline:7px}.viz-tabs button{font-size:.68rem}.viz-panel{padding:12px}.viz-series-list article{grid-template-columns:30px minmax(0,1fr) 30px}.viz-series-color{width:30px;height:30px}.viz-inline-color{grid-template-columns:32px minmax(0,1fr)}.viz-preview{min-width:520px}}
/* Color Pick v2.7.0 — Accessible Data Visualization Lab Advanced */
.viz-lab-advanced .viz-tabs{scrollbar-width:thin}.viz-data-grid,.viz-strategy-grid,.viz-responsive-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px}.viz-upload-small{min-height:105px}.viz-data-label{display:grid;gap:6px;color:#334155;font-size:.76rem;font-weight:900}.viz-data-label textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit;font-size:.76rem;line-height:1.45;resize:vertical}.viz-inline-actions{display:flex;flex-wrap:wrap;gap:8px}.viz-import-summary,.viz-scale-metrics,.viz-legend-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.viz-import-summary>div,.viz-scale-metrics>div,.viz-legend-summary>div{border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:10px}.viz-import-summary span,.viz-import-summary strong,.viz-scale-metrics span,.viz-scale-metrics strong,.viz-legend-summary span,.viz-legend-summary strong{display:block}.viz-import-summary span,.viz-scale-metrics span,.viz-legend-summary span{color:#64748b;font-size:.68rem}.viz-import-summary strong,.viz-scale-metrics strong,.viz-legend-summary strong{margin-top:3px;font-size:.82rem}.viz-column-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.viz-column-grid article,.viz-edge-chip-grid span{border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;padding:9px}.viz-column-grid strong,.viz-column-grid span,.viz-column-grid small{display:block}.viz-column-grid span,.viz-column-grid small{color:#64748b;font-size:.68rem}.viz-edge-chip-grid{display:flex;flex-wrap:wrap;gap:7px}.viz-edge-chip-grid span{font-size:.7rem;font-weight:800}.viz-warning-list{display:grid;gap:6px;margin:12px 0 0;padding-left:18px;color:#9a3412;font-size:.76rem}.viz-empty-state{display:grid;place-items:center;min-height:260px;text-align:center}.viz-empty-state p{max-width:36rem;color:#64748b}.viz-chart-kind-grid-advanced{grid-template-columns:repeat(4,1fr)}.viz-series-list-advanced article{grid-template-columns:34px minmax(120px,.75fr) minmax(145px,.55fr) minmax(280px,1.25fr) 34px}.viz-encoding-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.viz-encoding-fields select,.viz-encoding-fields input{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:5px;font:inherit;font-size:.65rem}.viz-encoding-fields label{display:grid;gap:2px;color:#64748b;font-size:.6rem;font-weight:800}.viz-series-list article>button.is-locked{border-color:#4f46e5;background:#eef2ff;color:#312e81}.viz-adjacency-editor{display:grid;gap:6px;max-height:780px;overflow:auto}.viz-adjacency-editor article{display:grid;grid-template-columns:minmax(0,1fr) 90px 24px 58px;gap:7px;align-items:center;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;padding:7px}.viz-adjacency-editor label{display:flex;gap:6px;align-items:center;font-size:.68rem;font-weight:850}.viz-adjacency-editor input[type="range"]{width:100%;accent-color:#4f46e5}.viz-adjacency-editor b,.viz-adjacency-editor small{font-size:.65rem}.viz-scale-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.viz-scale-strip{display:flex;overflow:auto;margin-top:12px;border-radius:12px}.viz-scale-strip>span{display:grid;place-items:center;flex:1 0 80px;min-height:86px;font-size:.78rem;font-weight:950}.viz-scale-strip small{display:block;margin-top:4px;font-size:.58rem}.viz-repair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.viz-repair-grid>article{border:1px solid #cbd5e1;border-radius:13px;background:#f8fafc;padding:11px}.viz-repair-grid>article>span{display:inline-flex;border-radius:999px;background:#e0e7ff;color:#3730a3;padding:4px 8px;font-size:.65rem;font-weight:900}.viz-repair-grid h3{margin:8px 0 4px}.viz-repair-grid p{color:#64748b;font-size:.72rem;line-height:1.45}.viz-repair-changes{display:grid;gap:6px;margin:9px 0}.viz-repair-changes label{display:grid;grid-template-columns:18px 20px 20px minmax(0,1fr);gap:5px;align-items:center;border:1px solid #e2e8f0;border-radius:9px;background:#fff;padding:7px}.viz-repair-changes i{width:20px;height:20px;border:1px solid #cbd5e1;border-radius:5px}.viz-repair-changes strong,.viz-repair-changes code,.viz-repair-changes small{display:block;font-size:.63rem}.viz-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.viz-comparison-grid article{position:relative;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:9px}.viz-comparison-grid article>span{position:absolute;right:8px;top:8px;border-radius:999px;background:#0f172a;color:#fff;padding:3px 7px;font-size:.62rem}.viz-comparison-grid article>div{display:flex;margin:7px 0}.viz-comparison-grid i{flex:1;height:34px}.viz-comparison-grid small{display:block;color:#64748b;font-size:.66rem}.viz-comparison-grid button{margin-top:8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:6px 9px;font-size:.66rem;font-weight:850;cursor:pointer}.viz-fineprint{color:#64748b;font-size:.72rem;line-height:1.5}.viz-region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.viz-region-grid article{border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:9px}.viz-region-grid article>span{display:inline-flex;border-radius:999px;background:#e0e7ff;color:#3730a3;padding:3px 7px;font-size:.6rem;font-weight:900}.viz-region-grid strong,.viz-region-grid small,.viz-region-grid em{display:block}.viz-region-grid strong{margin-top:6px;font-size:.75rem}.viz-region-grid small{margin-top:3px;color:#64748b;font-size:.64rem}.viz-region-grid article>div{display:flex;margin-top:7px}.viz-region-grid i{width:24px;height:24px;border:1px solid #fff;border-radius:5px}.viz-region-grid em{margin-top:6px;color:#9a3412;font-size:.62rem;font-style:normal}.viz-responsive-toolbar{display:flex;gap:7px;margin-bottom:12px}.viz-responsive-toolbar button{border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;padding:8px 12px;text-transform:capitalize;font-weight:850;cursor:pointer}.viz-responsive-toolbar button.is-active{border-color:#4f46e5;background:#eef2ff;color:#312e81}.viz-responsive-result{display:grid;gap:4px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;padding:9px;margin-bottom:7px}.viz-responsive-result strong{font-size:.78rem;text-transform:capitalize}.viz-responsive-result span,.viz-responsive-result small{color:#64748b;font-size:.66rem}.viz-legend-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.viz-panel>em{display:block;margin-top:6px;color:#9a3412;font-size:.7rem;font-style:normal}.viz-panel>ul{font-size:.76rem;line-height:1.5}.viz-bundle-action{gap:9px;flex-wrap:wrap}.viz-preview-wrap.is-mobile{max-width:480px;margin:auto}.viz-preview-wrap.is-tablet{max-width:640px;margin:auto}
@media(max-width:1100px){.viz-series-list-advanced article{grid-template-columns:34px minmax(110px,1fr) minmax(140px,.8fr) 34px}.viz-encoding-fields{grid-column:2/4}.viz-scale-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.viz-repair-grid{grid-template-columns:1fr}.viz-region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.viz-data-grid,.viz-strategy-grid,.viz-responsive-grid{grid-template-columns:1fr}.viz-column-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-adjacency-editor{max-height:420px}.viz-import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.viz-chart-kind-grid-advanced{grid-template-columns:repeat(2,1fr)}.viz-series-list-advanced article{grid-template-columns:30px minmax(0,1fr) 30px}.viz-inline-color,.viz-encoding-fields{grid-column:2}.viz-encoding-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-scale-metrics,.viz-legend-summary,.viz-column-grid,.viz-region-grid,.viz-comparison-grid{grid-template-columns:1fr 1fr}.viz-adjacency-editor article{grid-template-columns:minmax(0,1fr) 70px 20px}.viz-adjacency-editor small{grid-column:1/-1}.viz-repair-grid{grid-template-columns:1fr}}
@media(max-width:460px){.viz-scale-metrics,.viz-legend-summary,.viz-column-grid,.viz-region-grid,.viz-comparison-grid,.viz-import-summary{grid-template-columns:1fr}.viz-encoding-fields{grid-template-columns:1fr 1fr}.viz-data-grid,.viz-strategy-grid,.viz-responsive-grid{gap:8px}}

/* v2.7.0 screenshot spatial overlay */
.viz-screenshot-stage { position: relative; overflow: hidden; border-radius: 18px; background: var(--paper-2); }
.viz-screenshot-stage .viz-screenshot-preview { display: block; width: 100%; height: auto; }
.viz-screenshot-overlay { position: absolute; border: 2px solid currentColor; background: color-mix(in srgb, currentColor 9%, transparent); color: #1d4ed8; pointer-events: none; min-width: 2px; min-height: 2px; }
.viz-screenshot-overlay b { position: absolute; left: 4px; top: 4px; max-width: calc(100% - 8px); padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.9); color: #0f172a; font-size: 10px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-screenshot-overlay small { position: absolute; right: 4px; bottom: 3px; padding: 1px 4px; border-radius: 4px; background: rgba(15,23,42,.86); color: white; font-size: 9px; }
.viz-screenshot-overlay.is-legend-candidate { color: #7c3aed; }
.viz-screenshot-overlay.is-axis-label-candidate { color: #d97706; }
.viz-screenshot-overlay.is-title-candidate { color: #0891b2; }
.viz-screenshot-overlay.is-plot { color: #059669; }
@media (max-width: 640px) { .viz-screenshot-overlay b { font-size: 8px; } .viz-screenshot-overlay small { display: none; } }
.viz-example-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; }
.viz-example-links span { font-weight: 800; color: var(--muted); }
.viz-example-links a { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 750; text-decoration: none; }
.viz-example-links a:hover, .viz-example-links a:focus-visible { border-color: var(--blue); }

/* v2.7.0 advanced visualization completion */
.viz-series-actions,.viz-safe-subset-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:10px 0 12px}.viz-series-actions span{color:#64748b;font-size:.7rem;font-weight:800}.viz-check-label{display:flex!important;align-items:center;gap:6px}.viz-check-label input{width:auto!important}.viz-label-contrast-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.viz-label-contrast-grid>div{border:1px dashed #cbd5e1!important;background:#fff!important}.viz-safe-subset-actions .button{flex:0 1 auto}
@media(max-width:680px){.viz-label-contrast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viz-series-actions,.viz-safe-subset-actions{display:grid;grid-template-columns:1fr}.viz-series-actions .button,.viz-safe-subset-actions .button{width:100%;justify-content:center}}
.viz-preview-wrap{position:relative}.viz-source-preview-badge{position:absolute;z-index:2;left:10px;top:10px;padding:4px 7px;border:1px solid #cbd5e1;border-radius:999px;background:rgba(255,255,255,.92);color:#334155;font-size:.62rem;font-weight:850;box-shadow:0 2px 8px rgba(15,23,42,.08)}

/* Modern CSS Color Lab */
.modern-css-hero{background:radial-gradient(circle at 14% 20%,rgba(124,58,237,.16),transparent 25%),radial-gradient(circle at 86% 22%,rgba(45,212,191,.2),transparent 28%),linear-gradient(135deg,#f5f3ff 0%,#fffdf8 52%,#ecfeff 100%)}
.modern-css-answer-section{border-block:1px solid var(--line)}
.modern-css-answer-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:start}
.modern-css-answer-grid h2{margin:9px 0 0;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:-.055em}
.modern-css-answer-grid>p{margin:0;font-size:19px;color:#3f3b36}
.modern-css-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.modern-css-capability-grid article{border:1px solid var(--line);border-radius:20px;background:#fff;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.modern-css-capability-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eef2ff;color:#4338ca}
.modern-css-capability-grid h3{margin:15px 0 7px;font-size:18px}.modern-css-capability-grid p{margin:0;color:var(--muted);font-size:14px}
.modern-css-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.modern-css-method-grid article{border:2px solid var(--ink);border-radius:24px;padding:28px;background:#fff;box-shadow:7px 7px 0 var(--ink)}
.home-modern-css-preview{display:grid;gap:9px;align-content:center}.home-modern-css-preview code{display:block;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(15,23,42,.86);color:#dbeafe;padding:12px 14px;font-size:.82rem}
.modern-css-loading{display:grid;place-items:center;min-height:360px;border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:8px 8px 0 var(--ink);text-align:center}.modern-css-loading strong,.modern-css-loading span{display:block}.modern-css-loading span{margin-top:8px;color:var(--muted)}
.modern-css-app{border:2px solid var(--ink);border-radius:30px;background:#fff;box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.modern-css-topbar{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:28px;color:#fff;background:radial-gradient(circle at 82% 16%,rgba(45,212,191,.28),transparent 26%),linear-gradient(135deg,#111827,#4c1d95 58%,#115e59)}
.modern-css-topbar h2{margin:7px 0;font-size:clamp(30px,5vw,50px);line-height:1;letter-spacing:-.05em}.modern-css-topbar p{max-width:760px;margin:0;color:rgba(255,255,255,.74)}
.modern-css-kicker{display:inline-flex;align-items:center;gap:7px;color:#a7f3d0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.modern-css-score{width:118px;height:118px;flex:0 0 118px;display:grid;place-content:center;text-align:center;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 8px rgba(167,139,250,.18)}
.modern-css-score strong{font-size:42px;line-height:1}.modern-css-score span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#e0e7ff}
.modern-css-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:16px 22px;border-bottom:1px solid var(--line);background:#f8fafc}.modern-css-actions>input{min-width:220px;flex:1;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:9px 11px;font:inherit;font-weight:750}
.modern-css-notice,.modern-css-error{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:15px 22px 0;padding:11px 14px;border-radius:13px;font-size:13px;font-weight:750}.modern-css-notice{border:1px solid #86efac;background:#f0fdf4;color:#166534}.modern-css-error{border:1px solid #fdba74;background:#fff7ed;color:#9a3412}.modern-css-notice button{border:0;background:transparent;color:inherit;cursor:pointer}
.modern-css-tabs{display:flex;gap:5px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff;scrollbar-width:thin}.modern-css-tabs button{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid transparent;border-radius:10px;background:transparent;padding:9px 12px;color:#475569;font:inherit;font-size:.8rem;font-weight:850;cursor:pointer}.modern-css-tabs button:hover{background:#f8fafc}.modern-css-tabs button.is-active{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}
.modern-css-workspace{padding:22px}.modern-css-tab-panel{display:grid;gap:18px}.modern-css-section-head{display:flex;justify-content:space-between;gap:28px;align-items:end;border-bottom:1px solid #e2e8f0;padding-bottom:14px}.modern-css-section-head>div>span{color:#4f46e5;font-size:.69rem;font-weight:950;text-transform:uppercase;letter-spacing:.11em}.modern-css-section-head h3{margin:5px 0 0;font-size:clamp(24px,4vw,38px);letter-spacing:-.04em}.modern-css-section-head>p{max-width:520px;margin:0;color:#64748b;font-size:.84rem}
.modern-css-two-colors,.modern-css-mini-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.modern-css-color-field{display:grid;gap:9px;border:1px solid #dbe3ef;border-radius:18px;background:#f8fafc;padding:13px}.modern-css-field-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.modern-css-field-head code{color:#475569;font-size:.75rem}.modern-css-color-field>input{width:100%;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:8px 10px;font:inherit;font-family:var(--font-mono,monospace)}
.modern-css-control-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:12px}.modern-css-control-grid label,.modern-css-panel>label,.modern-css-feature-explorer>label,.modern-css-gamut-input{display:grid;gap:7px;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;padding:12px}.modern-css-control-grid label span,.modern-css-panel label span,.modern-css-feature-explorer label span,.modern-css-gamut-input span{color:#475569;font-size:.72rem;font-weight:850}.modern-css-control-grid input[type=range],.modern-css-panel input[type=range]{width:100%;accent-color:#4f46e5}.modern-css-control-grid select,.modern-css-panel select,.modern-css-panel input,.modern-css-feature-explorer select,.modern-css-gamut-input textarea{width:100%;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:8px 10px;font:inherit}.modern-css-control-grid output,.modern-css-panel output{font-size:.7rem;font-weight:850;color:#3730a3}
.modern-css-primary-result{display:grid;grid-template-columns:.65fr 1.35fr;gap:14px;align-items:stretch}.modern-css-primary-result>div:first-child{display:grid;place-content:center;min-height:190px;border-radius:18px;text-align:center}.modern-css-primary-result>div:first-child strong,.modern-css-primary-result>div:first-child span{display:block}.modern-css-primary-result>div:first-child strong{font-size:30px}.modern-css-primary-result>div:first-child span{margin-top:5px;font-family:monospace;font-size:.78rem}
.modern-css-code-block{min-width:0;border:1px solid #dbe3ef;border-radius:17px;background:#0f172a;overflow:hidden}.modern-css-code-block>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.13);background:#111827;color:#fff}.modern-css-code-block>div>div{display:flex;align-items:center;gap:8px}.modern-css-code-block>div span{border-radius:999px;background:#312e81;padding:3px 7px;color:#c7d2fe;font-size:.61rem;font-weight:900;text-transform:uppercase}.modern-css-code-block>div strong{font-size:.78rem}.modern-css-code-block button{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;padding:6px 8px;font:inherit;font-size:.67rem;font-weight:850;cursor:pointer}.modern-css-code-block pre{max-height:520px;overflow:auto;margin:0;padding:15px;color:#dbeafe;font-size:.75rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.modern-css-mix-comparison{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.modern-css-mix-comparison article{overflow:hidden;border:1px solid #dbe3ef;border-radius:14px;background:#fff}.modern-css-mix-comparison article>div{display:grid;place-content:center;min-height:115px;text-align:center}.modern-css-mix-comparison article>div strong,.modern-css-mix-comparison article>div code{display:block}.modern-css-mix-comparison article>div code{margin-top:3px;font-size:.7rem}.modern-css-mix-comparison dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:8px}.modern-css-mix-comparison dl div{text-align:center}.modern-css-mix-comparison dt{color:#64748b;font-size:.58rem}.modern-css-mix-comparison dd{margin:2px 0 0;font-size:.68rem;font-weight:850}.modern-css-mix-comparison button{width:100%;border:0;border-top:1px solid #e2e8f0;background:#f8fafc;padding:8px;font:inherit;font-size:.67rem;font-weight:850;cursor:pointer}.modern-css-space-toggles{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.modern-css-space-toggles>span{font-size:.72rem;font-weight:900}.modern-css-space-toggles label{display:flex;align-items:center;gap:5px;border:1px solid #dbe3ef;border-radius:999px;padding:5px 8px;font-size:.68rem}
.modern-css-compiler-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;align-items:start}.modern-css-panel{display:grid;gap:10px;min-width:0;overflow:hidden;border:1px solid #dbe3ef;border-radius:16px;background:#f8fafc;padding:14px}.modern-css-panel h4{margin:0}.modern-css-panel p{margin:0;color:#64748b;font-size:.72rem}.modern-css-compiler-grid .modern-css-mini-colors{grid-template-columns:1fr}.modern-css-compiler-grid .modern-css-panel>label{grid-template-columns:minmax(0,1fr) auto;align-items:center}.modern-css-compiler-grid .modern-css-panel>label>span,.modern-css-compiler-grid .modern-css-panel>label>small{grid-column:1/-1}.modern-css-compiler-grid .modern-css-panel>label>input:not([type=range]){grid-column:1/-1}.modern-css-compiler-grid .modern-css-panel>label>output{min-width:48px;text-align:right;white-space:nowrap}.modern-css-warning-list{display:grid;gap:7px}.modern-css-warning-list p{display:flex;align-items:flex-start;gap:8px;margin:0;border:1px solid #fed7aa;border-radius:11px;background:#fff7ed;padding:9px 11px;color:#9a3412;font-size:.74rem}.modern-css-explanation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.modern-css-explanation-grid article{display:flex;gap:9px;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;padding:11px}.modern-css-explanation-grid span{color:#4f46e5;font-weight:950}.modern-css-explanation-grid p{margin:0;color:#475569;font-size:.72rem}
.modern-css-recipe-list{display:grid;gap:8px}.modern-css-recipe-list article{display:grid;grid-template-columns:48px minmax(110px,.7fr) minmax(140px,.8fr) minmax(180px,.8fr) minmax(250px,1.3fr) 34px;gap:8px;align-items:center;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;padding:9px}.modern-css-recipe-list article.is-disabled{opacity:.55}.modern-css-recipe-enable{display:grid;place-items:center;gap:5px}.modern-css-recipe-enable span{width:32px;height:32px;border:1px solid #cbd5e1;border-radius:9px}.modern-css-recipe-list input,.modern-css-recipe-list select{min-width:0;width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:7px;font:inherit;font-size:.72rem}.modern-css-recipe-list article>label:not(.modern-css-recipe-enable){display:grid;grid-template-columns:1fr 42px;align-items:center;gap:5px}.modern-css-recipe-list output{font-size:.64rem;font-weight:850}.modern-css-recipe-list article>div code,.modern-css-recipe-list article>div small{display:block}.modern-css-recipe-list article>div code{font-size:.7rem}.modern-css-recipe-list article>div small{margin-top:3px;color:#64748b;font-size:.62rem;overflow-wrap:anywhere}.modern-css-recipe-list article>button{display:grid;place-items:center;border:1px solid #fecaca;border-radius:8px;background:#fff;color:#b91c1c;padding:7px;cursor:pointer}.modern-css-state-preview{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.modern-css-state-preview article{display:grid;align-content:end;min-height:130px;border-radius:14px;padding:11px}.modern-css-state-preview span,.modern-css-state-preview strong,.modern-css-state-preview small{display:block}.modern-css-state-preview span{font-size:.65rem;font-weight:850}.modern-css-state-preview strong{margin-top:2px}.modern-css-state-preview small{margin-top:3px;font-size:.58rem}
.modern-css-gamut-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.modern-css-gamut-preview>div{display:grid;place-content:center;min-height:210px;border:1px solid #dbe3ef;border-radius:18px;text-align:center}.modern-css-gamut-preview strong,.modern-css-gamut-preview code{display:block}.modern-css-gamut-preview code{max-width:420px;margin-top:6px;padding-inline:10px;overflow-wrap:anywhere;font-size:.72rem}.modern-css-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.modern-css-metric{display:grid;gap:3px;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;padding:11px}.modern-css-metric span{color:#64748b;font-size:.64rem;font-weight:850}.modern-css-metric strong{font-size:1.15rem}.modern-css-metric small{color:#64748b;font-size:.59rem}.modern-css-metric.is-good{border-color:#86efac;background:#f0fdf4}.modern-css-metric.is-warn{border-color:#fdba74;background:#fff7ed}.modern-css-gamut-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.modern-css-gamut-values article{border:1px solid #dbe3ef;border-radius:12px;background:#f8fafc;padding:10px}.modern-css-gamut-values span,.modern-css-gamut-values code{display:block}.modern-css-gamut-values span{color:#64748b;font-size:.64rem;font-weight:850}.modern-css-gamut-values code{margin-top:5px;overflow-wrap:anywhere;font-size:.7rem}
.modern-css-refactor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.modern-css-refactor-toolbar>span{color:#64748b;font-size:.7rem}.modern-css-source-editor{width:100%;min-height:340px;resize:vertical;border:1px solid #94a3b8;border-radius:14px;background:#0f172a;color:#dbeafe;padding:14px;font-family:monospace;font-size:.76rem;line-height:1.55}.modern-css-refactor-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modern-css-refactor-layout h4{margin:0 0 9px}.modern-css-issue-list,.modern-css-group-list{display:grid;gap:7px;max-height:580px;overflow:auto}.modern-css-issue-list article{border:1px solid #dbe3ef;border-radius:12px;background:#f8fafc;padding:10px}.modern-css-issue-list article>span{display:inline-flex;border-radius:999px;background:#e2e8f0;padding:3px 7px;font-size:.58rem;font-weight:900;text-transform:uppercase}.modern-css-issue-list article.is-warning{border-color:#fdba74;background:#fff7ed}.modern-css-issue-list article.is-info{border-color:#bfdbfe;background:#eff6ff}.modern-css-issue-list article.is-good{border-color:#86efac;background:#f0fdf4}.modern-css-issue-list h5{margin:7px 0 4px}.modern-css-issue-list p,.modern-css-issue-list small{display:block;margin:0;color:#475569;font-size:.7rem}.modern-css-issue-list small{margin-top:5px;color:#64748b}.modern-css-group-list article{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:start;border:1px solid #dbe3ef;border-radius:11px;background:#f8fafc;padding:8px}.modern-css-group-list i{width:40px;height:40px;border:1px solid #cbd5e1;border-radius:9px}.modern-css-group-list strong,.modern-css-group-list code,.modern-css-group-list small,.modern-css-group-list em{display:block}.modern-css-group-list code{font-size:.68rem}.modern-css-group-list small{color:#64748b;font-size:.61rem}.modern-css-group-list em{margin-top:4px;color:#9a3412;font-size:.58rem;font-style:normal}
.modern-css-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.modern-css-support-card{border:1px solid #dbe3ef;border-radius:15px;background:#f8fafc;padding:12px}.modern-css-support-card>div{display:flex;justify-content:space-between;gap:6px;align-items:center}.modern-css-support-card>div span,.modern-css-support-card>div em{border-radius:999px;padding:3px 7px;font-size:.56rem;font-style:normal;font-weight:900;text-transform:uppercase}.modern-css-support-card>div span.is-supported{background:#dcfce7;color:#166534}.modern-css-support-card>div span.is-unsupported{background:#fee2e2;color:#991b1b}.modern-css-support-card>div span.is-unknown{background:#e2e8f0;color:#475569}.modern-css-support-card>div em{background:#ede9fe;color:#5b21b6}.modern-css-support-card h3{margin:10px 0 6px}.modern-css-support-card code{display:block;min-height:42px;overflow-wrap:anywhere;color:#4338ca;font-size:.68rem}.modern-css-support-card p{margin:8px 0 0;color:#64748b;font-size:.69rem}.modern-css-feature-explorer{display:grid;grid-template-columns:.55fr 1.45fr;gap:12px}.modern-css-feature-explorer>article{border:1px solid #dbe3ef;border-radius:14px;background:#f8fafc;padding:13px}.modern-css-feature-explorer>article>div{display:flex;justify-content:space-between;gap:10px}.modern-css-feature-explorer code{display:block;margin:10px 0;padding:10px;border-radius:9px;background:#0f172a;color:#dbeafe;overflow-wrap:anywhere}.modern-css-feature-explorer p{color:#64748b;font-size:.72rem}
.modern-css-export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.modern-css-export-grid button{display:grid;grid-template-columns:42px 1fr;gap:3px 10px;align-items:center;border:1px solid #dbe3ef;border-radius:15px;background:#f8fafc;padding:13px;text-align:left;font:inherit;cursor:pointer}.modern-css-export-grid button:hover{border-color:#818cf8;background:#eef2ff}.modern-css-export-grid button svg{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e0e7ff;color:#4338ca;padding:10px}.modern-css-export-grid strong{font-size:.82rem}.modern-css-export-grid span{color:#64748b;font-size:.66rem}.modern-css-export-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.modern-css-color-field.is-invalid{border-color:#fca5a5;background:#fff7f7}.modern-css-color-field.is-invalid>input,.modern-css-panel input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 2px rgb(220 38 38 / .12)}.modern-css-color-field>small,.modern-css-panel label>small{color:#64748b;font-size:.62rem;line-height:1.4}.modern-css-color-field.is-invalid>small,.modern-css-panel input[aria-invalid="true"]+small{color:#b91c1c}.modern-css-recipe-actions{display:flex;gap:5px;align-items:center}.modern-css-recipe-actions button{display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;padding:7px;cursor:pointer}.modern-css-recipe-actions button:last-child{border-color:#fecaca;color:#b91c1c}.modern-css-recipe-actions button:disabled,.modern-css-export-grid button:disabled{cursor:not-allowed;opacity:.48}.modern-css-gamut-preview.is-invalid .is-native{outline:2px dashed #fca5a5;outline-offset:-6px}.modern-css-error ul{margin:.5rem 0 0;padding-left:1.2rem}.modern-css-error li+li{margin-top:.2rem}
@media(max-width:1100px){.modern-css-capability-grid,.modern-css-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-css-mix-comparison{grid-template-columns:repeat(3,minmax(0,1fr))}.modern-css-explanation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-css-recipe-list article{grid-template-columns:42px minmax(100px,.7fr) minmax(130px,.8fr) minmax(150px,.8fr) 34px}.modern-css-recipe-list article>div{grid-column:2/5}.modern-css-state-preview{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.modern-css-answer-grid,.modern-css-method-grid,.modern-css-primary-result,.modern-css-refactor-layout,.modern-css-feature-explorer{grid-template-columns:1fr}.modern-css-topbar{align-items:flex-start}.modern-css-score{width:96px;height:96px;flex-basis:96px}.modern-css-control-grid{grid-template-columns:1fr}.modern-css-mix-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-css-metrics,.modern-css-export-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-css-export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.modern-css-workspace{padding:13px}.modern-css-topbar{display:grid;padding:21px}.modern-css-score{width:88px;height:88px}.modern-css-section-head{display:grid;gap:8px}.modern-css-two-colors,.modern-css-mini-colors,.modern-css-gamut-preview,.modern-css-gamut-values{grid-template-columns:1fr}.modern-css-mix-comparison,.modern-css-capability-grid,.modern-css-support-grid,.modern-css-state-preview,.modern-css-export-grid{grid-template-columns:1fr}.modern-css-recipe-list article{grid-template-columns:38px minmax(0,1fr) 32px}.modern-css-recipe-list article>select,.modern-css-recipe-list article>label:not(.modern-css-recipe-enable),.modern-css-recipe-list article>div{grid-column:2}.modern-css-recipe-list article>button{grid-column:3;grid-row:1}.modern-css-explanation-grid{grid-template-columns:1fr}.modern-css-code-block>div{align-items:flex-start}.modern-css-code-block>div>div:last-child{display:grid}.modern-css-metrics,.modern-css-export-summary{grid-template-columns:1fr 1fr}}

/* v2.9 Original Color Benchmarks */
.benchmark-bar-chart{display:grid;gap:12px;margin:24px 0}.benchmark-bar-chart>div{display:grid;grid-template-columns:145px minmax(0,1fr) 52px;gap:12px;align-items:center}.benchmark-bar-chart span{font-size:12px;font-weight:850}.benchmark-bar-chart>div>div{height:15px;overflow:hidden;border:1px solid var(--line);border-radius:999px;background:#f3f0e9}.benchmark-bar-chart i{display:block;height:100%;border-radius:999px}.benchmark-bar-chart strong{text-align:right;font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace}.benchmark-method-table th i{display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:50%}.benchmark-best-cell{background:#d9fbe8;color:#065f46;font-weight:950}.benchmark-static-scales{display:grid;gap:16px;margin:22px 0}.benchmark-static-scales>article{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}.benchmark-static-scales article>header{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}.benchmark-static-scales article>header span{color:var(--muted);font-size:11px}.benchmark-static-scales article>div{display:grid;grid-template-columns:repeat(11,minmax(68px,1fr));min-width:748px}.benchmark-static-scales article>div>span{display:grid;gap:4px;padding:0 7px 9px;text-align:center}.benchmark-static-scales i{display:block;height:54px;margin:0 -7px 3px}.benchmark-static-scales b{font-size:10px}.benchmark-static-scales code{font-size:9px}.benchmark-inline-swatch{display:inline-block;width:23px;height:23px;margin-right:7px;border:1px solid var(--line);border-radius:7px;vertical-align:middle}.research-table td small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.benchmark-download-list{display:grid;gap:11px}.benchmark-download-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:17px;padding:16px;background:#fff}.benchmark-download-list article>div{min-width:0}.benchmark-download-list strong,.benchmark-download-list span{display:block}.benchmark-download-list span{margin-top:3px;color:#475569;font-size:11px;font-weight:850}.benchmark-download-list p{margin:7px 0 0!important;color:var(--muted);font-size:12px!important;line-height:1.55!important}.benchmark-definition-list{display:grid;gap:0;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}.benchmark-definition-list>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:13px 16px;border-bottom:1px solid var(--line)}.benchmark-definition-list>div:last-child{border-bottom:0}.benchmark-definition-list dt{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.benchmark-definition-list dd{min-width:0;margin:0;color:#4b5563;font-size:13px;overflow-wrap:anywhere}.benchmark-definition-list code{font-size:11px}.support-article .code-block pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

.benchmark-runner-page{background:linear-gradient(180deg,#fffdf8,#f8fbff 48%,#fffdf8)}.benchmark-page-hero h1{max-width:900px}.benchmark-runner-shell{padding:34px 0 80px}.benchmark-runner-loading{display:grid;gap:5px;min-height:220px;place-content:center;border:2px dashed var(--line);border-radius:24px;background:#fff;text-align:center}.benchmark-runner-loading span{color:var(--muted);font-size:12px}.benchmark-runner{border:2px solid var(--ink);border-radius:28px;background:#fff;padding:24px;box-shadow:8px 8px 0 var(--ink)}.benchmark-runner-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}.benchmark-runner-header h2{margin:7px 0 8px;font-size:clamp(32px,4vw,50px);line-height:1;letter-spacing:-.05em}.benchmark-runner-header p{max-width:700px;margin:0;color:var(--muted)}.benchmark-version-chip{border:1px solid var(--ink);border-radius:999px;background:#fff3b0;padding:7px 10px;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.benchmark-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0 16px}.benchmark-source-grid label{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:14px;background:#faf9f6;cursor:pointer}.benchmark-source-grid label.is-selected{border:2px solid var(--ink);padding:13px;background:#dbeafe;box-shadow:3px 3px 0 var(--ink)}.benchmark-source-grid input{margin-top:3px;accent-color:var(--blue)}.benchmark-source-grid strong,.benchmark-source-grid small{display:block}.benchmark-source-grid strong{font-size:13px}.benchmark-source-grid small{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.45}.benchmark-seed-input{margin:16px 0;padding:17px;border:1px solid var(--line);border-radius:18px;background:#f8fafc}.benchmark-corpus-note{margin:16px 0;border:1px solid #a7f3d0;border-radius:15px;background:#ecfdf5;padding:13px 15px;color:#14532d;font-size:12px}.benchmark-methods{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0;padding:0;border:0}.benchmark-methods legend{width:100%;margin-bottom:2px;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.benchmark-methods label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:#fff;font-size:11px;font-weight:850;cursor:pointer}.benchmark-methods input{accent-color:var(--blue)}.benchmark-run-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:19px}.benchmark-progress{display:grid;gap:8px;margin-top:17px;border:1px solid var(--line);border-radius:15px;background:#faf9f6;padding:12px 14px}.benchmark-progress>div{display:flex;justify-content:space-between;gap:16px;color:#4b5563;font-size:11px}.benchmark-progress strong{white-space:nowrap}.benchmark-progress progress{width:100%;height:10px;accent-color:var(--blue)}.benchmark-results{margin-top:26px;padding-top:25px;border-top:2px solid var(--ink)}.benchmark-results>header{display:flex;justify-content:space-between;gap:22px;align-items:end}.benchmark-results>header h3{margin:7px 0 0;font-size:32px;letter-spacing:-.045em}.benchmark-results>header p{max-width:480px;margin:0;color:var(--muted);font-size:12px}.benchmark-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.benchmark-summary-grid article{min-width:0;border:1px solid var(--line);border-radius:17px;background:#f8fafc;padding:15px}.benchmark-summary-grid article>strong{display:block;min-height:34px;font-size:13px}.benchmark-summary-grid dl{display:grid;gap:7px;margin:11px 0 0}.benchmark-summary-grid dl>div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e2e8f0;padding-top:7px}.benchmark-summary-grid dt{color:#64748b;font-size:9px}.benchmark-summary-grid dd{margin:0;font:850 10px ui-monospace,monospace}.benchmark-result-note{margin:17px 0;border-radius:12px;background:#fff7d6;padding:10px 12px;color:#6b4e00;font-size:11px}.benchmark-seed-result{overflow:hidden;margin-top:14px;border:1px solid var(--line);border-radius:20px;background:#fff}.benchmark-seed-result>header{display:flex;gap:11px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.benchmark-seed-result>header strong,.benchmark-seed-result>header small{display:block}.benchmark-seed-result>header small{margin-top:3px;color:var(--muted);font-size:10px}.benchmark-seed-swatch{width:38px;height:38px;border:1px solid var(--line);border-radius:11px}.benchmark-scale-stack{display:grid}.benchmark-scale-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:13px;padding:13px;border-bottom:1px solid var(--line)}.benchmark-scale-row:last-child{border-bottom:0}.benchmark-scale-row>div:first-child strong,.benchmark-scale-row>div:first-child small{display:block}.benchmark-scale-row>div:first-child strong{font-size:12px}.benchmark-scale-row>div:first-child small{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}.benchmark-swatch-ramp{display:grid;grid-template-columns:repeat(11,minmax(34px,1fr));min-width:440px;overflow:hidden;border:1px solid var(--line);border-radius:11px}.benchmark-swatch-ramp span{display:flex;min-height:50px;align-items:end;justify-content:center;padding:4px}.benchmark-swatch-ramp b{border-radius:5px;background:rgba(255,255,255,.82);padding:2px 3px;color:#111;font-size:7px}.benchmark-runner-guidance{margin-top:34px;border-top:1px solid var(--line);padding-top:30px}.benchmark-runner-guidance h2{font-size:34px;letter-spacing:-.04em}.benchmark-runner-guidance>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.benchmark-runner-guidance article{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px}.benchmark-runner-guidance article p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.benchmark-runner-guidance>p{max-width:850px;color:#4b5563}

@media(max-width:1000px){.benchmark-source-grid,.benchmark-summary-grid,.benchmark-runner-guidance>div{grid-template-columns:repeat(2,minmax(0,1fr))}.benchmark-scale-row{grid-template-columns:1fr}.benchmark-scale-row>div:last-child{overflow-x:auto}.benchmark-static-scales>article{overflow-x:auto}.benchmark-static-scales article>header{position:sticky;left:0;background:#fff;z-index:1}}
@media(max-width:700px){.benchmark-bar-chart>div{grid-template-columns:1fr 48px}.benchmark-bar-chart>div>div{grid-column:1}.benchmark-bar-chart strong{grid-column:2;grid-row:2}.benchmark-download-list article{grid-template-columns:1fr}.benchmark-download-list .button{width:100%;justify-content:center}.benchmark-definition-list>div{grid-template-columns:1fr;gap:4px}.benchmark-runner{padding:17px;border-radius:21px;box-shadow:5px 5px 0 var(--ink)}.benchmark-runner-header{grid-template-columns:1fr}.benchmark-version-chip{justify-self:start}.benchmark-source-grid,.benchmark-summary-grid,.benchmark-runner-guidance>div{grid-template-columns:1fr}.benchmark-run-actions{display:grid}.benchmark-run-actions .button{width:100%;justify-content:center}.benchmark-progress>div,.benchmark-results>header{display:grid}.benchmark-swatch-ramp{min-width:600px}.benchmark-seed-result{overflow-x:hidden}.benchmark-methods{display:grid}.benchmark-methods label{border-radius:13px}.benchmark-static-scales article>header{display:grid}.benchmark-static-scales article>div{min-width:770px}}
@media(prefers-reduced-motion:reduce){.benchmark-source-grid label,.benchmark-bar-chart i{transition:none!important}}
@media print{.benchmark-runner-page,.benchmark-runner{background:#fff}.benchmark-runner,.benchmark-static-scales>article{box-shadow:none}.benchmark-run-actions,.benchmark-source-grid,.benchmark-methods,.benchmark-progress{display:none}.benchmark-static-scales article>div{min-width:0}.benchmark-static-scales code{font-size:7px}}
@media(max-width:420px){.modern-css-metrics,.modern-css-export-summary{grid-template-columns:1fr}.modern-css-actions{display:grid}.modern-css-actions .button,.modern-css-actions>input{width:100%;min-width:0}.modern-css-tabs{padding-inline:9px}}

.modern-css-contrast-pairs{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface)}
.modern-css-contrast-pairs>h4{margin:0 0 .8rem}
.modern-css-contrast-pairs>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.7rem}
.modern-css-contrast-pairs article{display:grid;grid-template-columns:54px minmax(0,1fr);gap:.7rem;align-items:center;padding:.65rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface-elevated)}
.modern-css-contrast-pairs article.is-fail{border-color:color-mix(in srgb,#dc2626 45%,var(--border))}
.modern-css-contrast-pairs article>div{display:grid;place-items:center;min-height:52px;border-radius:.6rem;border:1px solid color-mix(in srgb,currentColor 25%,transparent);font-weight:800}
.modern-css-contrast-pairs article section{min-width:0;display:grid;gap:.18rem}
.modern-css-contrast-pairs article strong,.modern-css-contrast-pairs article code,.modern-css-contrast-pairs article small{overflow-wrap:anywhere}
.modern-css-contrast-pairs>p{margin:.8rem 0 0;color:var(--text-muted);font-size:.86rem}
.modern-css-example-links{display:flex;flex-wrap:wrap;gap:.75rem}

/* v2.8.2 color paste controls and guided advanced-tool flows */
.color-paste-group{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch;min-width:0;max-width:100%}
.color-paste-group>input,.color-paste-group>textarea{min-width:0;width:100%;max-width:100%}
.color-paste-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:74px;min-height:40px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#334155;padding:6px 9px;font:inherit;font-size:.72rem;font-weight:850;cursor:pointer;white-space:nowrap}
.color-paste-button:hover{border-color:#6366f1;background:#eef2ff;color:#3730a3}.color-paste-button:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}.color-paste-button.is-success{border-color:#22c55e;background:#f0fdf4;color:#166534}.color-paste-button.is-error{border-color:#ef4444;background:#fef2f2;color:#991b1b}
.universal-color-field-wrap>.color-paste-group{width:100%}.universal-color-field-wrap>.color-paste-group .text-input{height:100%}
.modern-picker-hex-field label{font-size:.72rem;font-weight:900;color:var(--muted)}
.modern-picker-hex-field .color-paste-button{min-height:42px}
.modern-css-color-field>.color-paste-group>input{border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:8px 10px;font:inherit;font-family:var(--font-mono,monospace)}
.modern-css-color-field.is-invalid>.color-paste-group>input{border-color:#dc2626;box-shadow:0 0 0 2px rgb(220 38 38 / .12)}
.modern-css-gamut-input .color-paste-group{align-items:start}.modern-css-gamut-input .color-paste-button{min-height:58px}
.converter-input-row>.color-paste-group{min-width:0}.converter-input-row>.color-paste-group input{height:100%}
.doctor-brand-color-input{min-width:0}.doctor-brand-color-input .color-paste-button{min-width:40px;padding-inline:7px}.doctor-brand-color-input .color-paste-button span{display:none}
.viz-color-field>.color-paste-group,.viz-inline-color>.color-paste-group{min-width:0}.viz-color-field .color-paste-button,.viz-inline-color .color-paste-button{min-width:34px;min-height:31px;padding:4px}.viz-color-field .color-paste-button span,.viz-inline-color .color-paste-button span{display:none}

.doctor-guided-flow,.viz-guided-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 16px;background:#f8fafc;border-block:1px solid #e2e8f0}
.doctor-guided-flow button,.viz-guided-flow button{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid #cbd5e1;border-radius:12px;background:#fff;padding:9px 11px;color:#475569;text-align:left;cursor:pointer}
.doctor-guided-flow button>span,.viz-guided-flow button>span{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#e2e8f0;font-size:.7rem;font-weight:950}.doctor-guided-flow strong,.viz-guided-flow strong{overflow-wrap:anywhere;font-size:.75rem}.doctor-guided-flow button.is-current,.viz-guided-flow button.is-current{border-color:#6366f1;background:#eef2ff;color:#312e81}.doctor-guided-flow button.is-current>span,.viz-guided-flow button.is-current>span{background:#4f46e5;color:#fff}
.doctor-score-breakdown{margin:12px 16px 0;border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:11px}.doctor-score-breakdown summary{cursor:pointer;font-weight:900;color:#1e293b}.doctor-score-breakdown .doctor-metrics{margin-top:10px}.doctor-score-breakdown p{margin:10px 2px 0;color:#64748b;font-size:.75rem;line-height:1.5}
.doctor-origin-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.doctor-origin-summary span{border:1px solid #dbe3ef;border-radius:9px;background:#f8fafc;padding:7px;color:#64748b;font-size:.68rem}.doctor-origin-summary b{color:#1e293b}
.viz-series-limit-note{display:block;margin-top:4px;color:#64748b;font-size:.66rem;line-height:1.4}.viz-screenshot-boundary,.modern-css-device-boundary{display:flex;gap:9px;align-items:flex-start;border:1px solid #fdba74;border-radius:12px;background:#fff7ed;padding:10px 12px;color:#9a3412}.viz-screenshot-boundary p,.modern-css-device-boundary p{margin:0;font-size:.72rem;line-height:1.5}
.modern-css-score-exclusions{display:grid;gap:6px;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;padding:12px}.modern-css-score-exclusions>span{color:#334155;font-size:.75rem;font-weight:900}.modern-css-score-exclusions textarea{width:100%;max-width:100%;min-width:0;resize:vertical;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:9px 10px;font:inherit;font-family:var(--font-mono,monospace);font-size:.74rem}.modern-css-score-exclusions small{color:#64748b;font-size:.65rem;line-height:1.45}

@media(max-width:760px){.doctor-guided-flow,.viz-guided-flow{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}.doctor-brand-row-advanced{grid-template-columns:minmax(0,1fr) 44px 36px}.doctor-brand-row-advanced .doctor-brand-color-input{grid-column:1/-1}.color-paste-button{min-width:42px;padding-inline:8px}.color-paste-button span{display:none}}
@media(max-width:420px){.doctor-guided-flow,.viz-guided-flow{grid-template-columns:1fr}.color-paste-group{grid-template-columns:minmax(0,1fr) 42px}.doctor-origin-summary{grid-template-columns:1fr}}

/* Responsive input and workspace hardening */
.doctor-app,.viz-lab,.modern-css-app{width:100%;max-width:100%;min-width:0}
.doctor-topbar>div,.doctor-layout>* ,.doctor-panel>* ,.viz-toolbar>div,.viz-workspace-grid>* ,.viz-data-grid>* ,.viz-strategy-grid>* ,.viz-responsive-grid>* ,.viz-panel>* ,.modern-css-topbar>div,.modern-css-workspace>* ,.modern-css-tab-panel>* ,.modern-css-panel>*{min-width:0}
.doctor-panel input,.doctor-panel select,.doctor-panel textarea,.viz-lab input,.viz-lab select,.viz-lab textarea,.modern-css-app input,.modern-css-app select,.modern-css-app textarea{box-sizing:border-box;max-width:100%;min-width:0}
.doctor-code-input textarea,.doctor-code-editor,.viz-data-label textarea,.viz-controls textarea,.modern-css-source-editor,.modern-css-gamut-input textarea{display:block;width:100%;max-width:100%;min-width:0;overflow:auto;overscroll-behavior:contain;white-space:pre;overflow-wrap:normal;word-break:normal;tab-size:2}
.doctor-code-input small,.doctor-input-meta,.viz-input-meta,.modern-css-editor-status{display:block;color:#64748b;font-size:.68rem;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.modern-css-editor-status{display:flex;justify-content:space-between;gap:.75rem;margin-top:-.65rem;padding-inline:.2rem}
.doctor-actions .button,.viz-toolbar button,.viz-inline-actions .button,.viz-series-actions .button,.viz-safe-subset-actions .button,.modern-css-actions .button,.modern-css-refactor-toolbar .button{min-width:0;max-width:100%;white-space:normal;text-align:center;justify-content:center}
.doctor-token-table,.doctor-theme-matrix,.viz-matrix-scroll,.viz-preview-wrap,.modern-css-code-block pre{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.doctor-panel-head>div,.viz-panel-head>div,.modern-css-section-head>div,.modern-css-code-block>div>div{min-width:0}
.doctor-panel-head h3,.doctor-lint-issue p,.doctor-change-evidence code,.doctor-brand-results code,.viz-panel-head strong,.viz-panel-head small,.viz-import-summary strong,.viz-import-summary p,.viz-series-list strong,.viz-series-list small,.viz-responsive-result span,.modern-css-field-head code,.modern-css-issue-list p,.modern-css-group-list code,.modern-css-export-grid span{overflow-wrap:anywhere;word-break:break-word}
.doctor-tabs,.viz-tabs,.modern-css-tabs{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.doctor-tabs button,.viz-tabs button,.modern-css-tabs button{scroll-snap-align:start}
.doctor-lint-issue,.doctor-coverage-grid article,.doctor-migration-list article,.doctor-change-evidence,.doctor-brand-results article{content-visibility:auto;contain-intrinsic-size:auto 92px}
.doctor-plan{contain:layout paint style}.doctor-plan details:not([open])>*:not(summary){display:none}.doctor-app[aria-busy="true"] .doctor-score{cursor:progress}

@media(max-width:760px){
  .doctor-topbar,.modern-css-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
  .doctor-panel-head,.viz-preview-head,.modern-css-section-head{align-items:flex-start}
  .doctor-inline-actions,.viz-inline-actions,.modern-css-refactor-toolbar{align-items:stretch}
  .doctor-inline-actions .button,.viz-inline-actions .button,.modern-css-refactor-toolbar .button{flex:1 1 12rem}
  .doctor-notice,.modern-css-notice,.modern-css-error{margin-inline:12px}
  .modern-css-code-block>div{flex-wrap:wrap}
  .modern-css-code-block>div>div:last-child{margin-left:auto}
}

@media(max-width:620px){
  .doctor-panel textarea,.viz-lab textarea,.modern-css-app textarea,.doctor-panel input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),.viz-lab input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),.modern-css-app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),.doctor-panel select,.viz-lab select,.modern-css-app select{font-size:16px}
  .doctor-panel-head,.viz-preview-head{display:grid;gap:8px}
  .doctor-actions{display:grid;grid-template-columns:1fr}
  .doctor-actions .button{width:100%;min-width:0}
  .doctor-token-table{margin-inline:-3px}
  .viz-toolbar{padding:14px}
  .viz-toolbar>div:last-child{grid-template-columns:1fr}
  .viz-panel-head{align-items:flex-start}
  .viz-panel-head strong{font-size:.84rem}
  .viz-data-label textarea,.doctor-code-input textarea,.doctor-code-editor{min-height:13rem}
  .modern-css-source-editor{min-height:18rem;padding:12px;line-height:1.55}
  .modern-css-recipe-list article{grid-template-columns:38px minmax(0,1fr)}
  .modern-css-recipe-list article>.modern-css-recipe-enable{grid-column:1;grid-row:1}
  .modern-css-recipe-list article>input{grid-column:2;grid-row:1}
  .modern-css-recipe-list article>select{grid-column:2;grid-row:2}
  .modern-css-recipe-list article>label:not(.modern-css-recipe-enable){grid-column:2;grid-row:3}
  .modern-css-recipe-list article>div:not(.modern-css-recipe-actions){grid-column:2;grid-row:4}
  .modern-css-recipe-list article>.modern-css-recipe-actions{grid-column:2;grid-row:5;display:flex;flex-wrap:wrap}
  .modern-css-recipe-actions button{flex:0 0 38px;min-height:38px}
  .modern-css-editor-status{display:grid;gap:.2rem;margin-top:-.5rem}
}

@media(max-width:420px){
  .doctor-topbar,.modern-css-topbar{grid-template-columns:1fr}
  .doctor-score,.modern-css-score{justify-self:start}
  .doctor-product-body{grid-template-columns:1fr}
  .doctor-product aside{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--d-border)}
  .doctor-lineage,.doctor-callout,.viz-method-note,.viz-local-note{display:grid}
  .doctor-status-row{grid-template-columns:28px minmax(0,1fr)}
  .doctor-status-row>b{grid-column:2}
  .viz-screenshot-summary,.viz-candidate-grid,.viz-label-contrast-grid{grid-template-columns:1fr}
  .viz-adjacency-editor article{grid-template-columns:minmax(0,1fr) 60px}
  .viz-adjacency-editor article>*:nth-child(n+3){grid-column:1/-1}
  .modern-css-code-block>div>div,.modern-css-code-block>div>div:last-child{width:100%;margin:0;flex-wrap:wrap}
  .modern-css-code-block button{flex:1;justify-content:center}
  .modern-css-contrast-pairs>div{grid-template-columns:1fr}
}

/* v2.9 benchmark homepage discovery */
.home-benchmark-section{background:linear-gradient(135deg,#eef7ff,#fff8cf 52%,#f7eaff)}
.home-benchmark-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:38px;align-items:center;border:2px solid var(--ink);border-radius:28px;background:rgba(255,255,255,.78);padding:34px;box-shadow:9px 9px 0 var(--ink)}
.home-benchmark-card h2{max-width:680px;margin:10px 0 15px;font-size:clamp(38px,5vw,64px);line-height:.96;letter-spacing:-.055em}
.home-benchmark-card p{max-width:720px;color:#4b5563;line-height:1.7}
.home-benchmark-boundary{display:block;max-width:680px;margin-top:17px;color:#6b5540;font-size:10px;font-weight:800;line-height:1.5}
.home-benchmark-preview{display:grid;gap:14px;border:2px solid var(--ink);border-radius:22px;background:#fff;padding:20px;box-shadow:5px 5px 0 var(--ink)}
.home-benchmark-preview header,.home-benchmark-preview footer{display:flex;justify-content:space-between;gap:12px}
.home-benchmark-preview header{border-bottom:1px solid var(--line);padding-bottom:12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.home-benchmark-preview header span{font-weight:950}.home-benchmark-preview header strong{color:var(--muted);font-size:9px}
.home-benchmark-preview>div{display:grid;grid-template-columns:115px minmax(0,1fr) 42px;gap:9px;align-items:center}
.home-benchmark-preview>div>span{font-size:10px;font-weight:850}
.home-benchmark-preview i{height:13px;overflow:hidden;border-radius:999px;background:#ede9e1}
.home-benchmark-preview b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#14b8a6)}
.home-benchmark-preview>div>strong{text-align:right;font:850 10px ui-monospace,monospace}
.home-benchmark-preview footer{border-top:1px solid var(--line);padding-top:12px;color:#475569;font-size:9px;font-weight:850}
@media(max-width:1000px){.home-benchmark-card{grid-template-columns:1fr}.home-benchmark-preview{max-width:700px}}
@media(max-width:700px){.home-benchmark-card{padding:22px;border-radius:22px;box-shadow:5px 5px 0 var(--ink)}.home-benchmark-preview>div{grid-template-columns:95px minmax(0,1fr) 38px}.home-benchmark-preview footer{display:grid}.home-benchmark-card .button{width:100%;justify-content:center}}