/* Control system for both themes, in the surface-field demo's language: raised 12px buttons,
   wells cut into the panel for inputs, filled sliders with a ringed thumb, switches and
   segmented tabs. Loaded after orbix-field.css; every rule is scoped to body.field-host. */
:root {
  --sf-radius-control: 12px;
  --sf-radius-card: 16px;
  --sf-btn: var(--sf-card);
  --sf-btn-hover: var(--sf-accent);
  --sf-raised: var(--sf-card);
  --sf-track: color-mix(in oklab, var(--sf-secondary) 55%, transparent);
  --sf-track-fill: color-mix(in oklab, var(--sf-secondary) 92%, var(--sf-fg) 8%);
  --sf-thumb-ring: var(--sf-card);
  --sf-thumb-shadow: 0 1px 2px oklch(0 0 0 / 28%);
  --sf-ring: oklch(0.24 0 0);
  --sf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
html[data-theme=dark] {
  --sf-btn: color-mix(in oklab, var(--sf-fg) 7%, var(--sf-float));
  --sf-btn-hover: color-mix(in oklab, var(--sf-fg) 13%, var(--sf-float));
  --sf-raised: color-mix(in oklab, var(--sf-fg) 8%, var(--sf-accent));
  --sf-track: color-mix(in oklab, var(--sf-well) 70%, transparent);
  --sf-track-fill: color-mix(in oklab, var(--sf-secondary) 80%, var(--sf-fg) 20%);
  --sf-thumb-ring: var(--sf-fg);
  --sf-thumb-shadow: 0 1px 2px oklch(0 0 0 / 45%);
  --sf-ring: oklch(0.97 0 0);
  --sf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c8c8c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.field-host button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; vertical-align: middle;
  min-height: 36px;
  border: 1px solid var(--sf-hairline);
  border-radius: var(--sf-radius-control);
  background: var(--sf-btn);
  color: var(--sf-fg);
  font-size: 12.75px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--sf-shadow-e1), var(--sf-hl-top);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease, color 160ms ease;
}
/* Centre on the letters, not the line box (Chrome 133+; older browsers keep line-box centring). */
.field-host button:not(.object-handle), .field-host :is(input:not([type=range], [type=checkbox], [type=color], [type=file]), select, .house-slider-value, .artboard-tag) { text-box: trim-both cap alphabetic; }
.field-host button:hover { background: var(--sf-btn-hover); border-color: color-mix(in oklab, var(--sf-fg) 22%, transparent); color: var(--sf-fg); box-shadow: var(--sf-shadow-e2), var(--sf-hl-top); transform: translateY(-1px); }
.field-host button:active { transform: translateY(0); box-shadow: var(--sf-shadow-e1); transition-duration: 60ms; }
.field-host button:disabled { opacity: .45; cursor: default; transform: none; }
.field-host :is(button.primary, .primary, .save-button, button[aria-pressed=true], button[aria-current=true], form button, button.active) {
  background: var(--sf-primary); color: var(--sf-primary-fg); border-color: var(--sf-primary); box-shadow: var(--sf-shadow-e1);
}
.field-host :is(button.primary, .primary, .save-button, button[aria-pressed=true], button[aria-current=true], form button, button.active):hover {
  background: color-mix(in oklab, var(--sf-primary) 90%, var(--sf-fg)); border-color: transparent; color: var(--sf-primary-fg); box-shadow: var(--sf-shadow-e2);
}
.field-host :is(#startLiveShare, #copyLiveLink) { background: var(--sf-primary); color: var(--sf-primary-fg); border-color: var(--sf-primary); }
.field-host :is(.text-button, .quiet, .upload-hint button, .canvas-heading button, .close, #closeDialog, #closeLiveShare, .media-tools button, .emojis button:last-child, .dialog-head button) {
  background: transparent; border-color: transparent; box-shadow: none; color: color-mix(in oklab, var(--sf-fg) 78%, var(--sf-muted));
}
.field-host :is(.text-button, .quiet, .upload-hint button, .canvas-heading button, .close, #closeDialog, #closeLiveShare, .media-tools button, .emojis button:last-child, .dialog-head button):hover {
  background: color-mix(in oklab, var(--sf-fg) 9%, transparent); border-color: transparent; color: var(--sf-fg); box-shadow: none; transform: none;
}
.field-host :is(.text-button, .quiet, .upload-hint button, .canvas-heading button, .close, #closeDialog, #closeLiveShare, .media-tools button, .emojis button:last-child, .dialog-head button):active {
  background: color-mix(in oklab, var(--sf-fg) 14%, transparent); transform: none;
}
/* The live-preview badge is a secondary action, not a muted tag. */
.field-host .preview-badge { background: var(--sf-btn); border-color: var(--sf-hairline); color: var(--sf-fg); font-size: 12px; letter-spacing: 0; padding: 7px 12px; box-shadow: var(--sf-shadow-e1), var(--sf-hl-top); }
.field-host .preview-badge:hover { background: var(--sf-btn-hover); }
html[data-theme] #shareLive { background: var(--sf-btn); color: var(--sf-fg); border-color: var(--sf-hairline); }
html[data-theme] #shareLive:hover { background: var(--sf-btn-hover); color: var(--sf-fg); border-color: color-mix(in oklab, var(--sf-fg) 22%, transparent); }
.field-host .upload-hint button { min-height: 0; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; }
.field-host .upload-hint button:hover { background: transparent; }
/* Tiles, swatches and chips keep their own shapes. */
.field-host .device-grid button { flex-direction: column; justify-content: center; gap: 4px; }
.field-host .device-grid .device-thumb { margin: 0 4px; }
.field-host #boards button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.field-host .layer-row > button:first-child, .field-host .add-grid button, .field-host .project-item button { justify-content: flex-start; }
.field-host .layer-toggle { width: 32px; min-width: 32px; height: 32px; min-height: 0; padding: 0; color: var(--sf-muted); }
.field-host .layer-toggle .icon { width: 15px; height: 15px; }
.field-host .layer-toggle:hover { color: var(--sf-fg); }
.field-host .project-item button { justify-content: space-between; }
.field-host button > .icon { flex: none; }
.field-host :is(.template-grid, .device-grid, .emoji-results, .add-grid, .pattern-grid) button { box-shadow: none; background: var(--sf-well); }
.field-host :is(.template-grid, .device-grid, .emoji-results, .add-grid, .pattern-grid) button:hover { background: var(--sf-btn-hover); border-color: color-mix(in oklab, var(--sf-fg) 35%, transparent); box-shadow: var(--sf-shadow-e2); transform: translateY(-1px); }
.field-host .template-grid button:hover img { transform: scale(1.04); }
.field-host :is(.template-grid, .device-grid, .emojis, .emoji-results, .pattern-grid, #boards) button[aria-pressed=true] {
  background: var(--sf-raised); color: var(--sf-fg); border-color: var(--sf-fg); box-shadow: 0 0 0 1px var(--sf-fg), var(--sf-shadow-e1); outline-color: var(--sf-fg);
}
.field-host .template-grid button[aria-pressed=true]:after { background: var(--sf-fg); color: var(--sf-bg); }
.field-host :is(.swatches button, .swatches .color-picker, .emojis button, .pin) { border-radius: 50%; }
.field-host :is(.swatches, .emojis) button { min-height: 0; box-shadow: none; }
.field-host :is(.swatches, .emojis) button:hover { transform: scale(1.12); box-shadow: 0 0 0 2px color-mix(in oklab, var(--sf-fg) 25%, transparent); }
.field-host .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--sf-shadow-e2), var(--sf-hl-top); }
.field-host .object-handle:hover { transform: none; }
.field-host .move-handle:hover { transform: translateX(-50%); }
.field-host .swatches button[aria-pressed=true] { outline: 2px solid var(--sf-fg); outline-offset: 3px; box-shadow: none; border-color: transparent; }
.field-host #resizeHandle { min-height: 0; border-radius: 3px; box-shadow: none; }
.field-host .pin { min-height: 0; box-shadow: var(--sf-shadow-e1); }
.field-host #boards button { align-items: flex-start; }

/* Custom pickers (preset, resolution, safe zones). */
.field-host :is(#presetTrigger, #safePresetTrigger, #resolutionTrigger) { background: var(--sf-btn); border-color: var(--sf-hairline); border-radius: var(--sf-radius-control); color: var(--sf-fg); box-shadow: var(--sf-shadow-e1), var(--sf-hl-top); }
.field-host :is(#presetTrigger, #safePresetTrigger, #resolutionTrigger):hover { background: var(--sf-btn-hover); }
.field-host :is(#presetTrigger, #safePresetTrigger, #resolutionTrigger)[aria-expanded=true] { background: var(--sf-btn-hover); color: var(--sf-fg); border-color: color-mix(in oklab, var(--sf-fg) 22%, transparent); }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) {
  border: 1px solid var(--sf-hairline); border-radius: var(--sf-radius-card); background: var(--sf-float); color: var(--sf-fg);
  -webkit-backdrop-filter: var(--sf-blur); backdrop-filter: var(--sf-blur); box-shadow: var(--sf-shadow-e3), var(--sf-hl-top); padding: 6px;
}
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) { width: max-content; min-width: 100%; max-width: min(320px, calc(100vw - 32px)); max-height: min(70dvh, 560px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sf-border) transparent; }
.field-host #resolutionMenu { width: 296px; }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) [role=option] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; white-space: normal;
  background: transparent; color: var(--sf-fg); border-radius: 10px; box-shadow: none; border-color: transparent; outline-offset: -2px;
}
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) [role=option] > span:first-child { display: grid; gap: 2px; min-width: 0; }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) [role=option] strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) [role=option] small { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) .resolution-check { flex: none; width: 18px; text-align: center; color: var(--sf-fg); }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) [role=option]:is(:hover, :focus-visible, [aria-selected=true]) { background: var(--sf-btn-hover); color: var(--sf-fg); }
.field-host :is(#presetMenu, #resolutionMenu, #safePresetMenu) :is(small, .safe-ratio) { color: var(--sf-muted); }

/* ---------- Segmented tabs ---------- */
.field-host :is(.segments, .library-tabs) {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--sf-radius-control);
  background: var(--sf-well); border: 1px solid var(--sf-hairline);
}
.field-host :is(.segments, .library-tabs) button {
  flex: 1; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 9px; background: transparent; box-shadow: none;
  color: var(--sf-muted); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; transition: color 180ms ease, background 180ms ease;
}
.field-host :is(.segments, .library-tabs) button:hover { color: var(--sf-fg); background: color-mix(in oklab, var(--sf-fg) 7%, transparent); box-shadow: none; transform: none; border: 0; }
.field-host :is(.segments, .library-tabs) button:active { background: color-mix(in oklab, var(--sf-fg) 11%, transparent); transform: none; }
.field-host :is(.segments, .library-tabs) button[aria-pressed=true] {
  background: var(--sf-raised); color: var(--sf-fg); border: 0; box-shadow: var(--sf-shadow-e1), var(--sf-hl-top);
}
.field-host .library-tabs { background: var(--sf-well); }
.field-host :is(.segments, .library-tabs) button { white-space: nowrap; }
/* Background modes: None and Image side by side, the video upload on its own row. */
.field-host .segments.background-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.field-host .segments.background-modes #bgVideo { grid-column: 1 / -1; order: 3; min-height: 34px; }
.field-host .segments.background-modes #bgVideo .icon { width: 15px; height: 15px; }

/* ---------- Text inputs, selects, textareas ---------- */
.field-host :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button]), select, textarea) {
  min-height: 36px; padding: 7px 12px; border: 1px solid var(--sf-input); border-radius: var(--sf-radius-control);
  background: var(--sf-well); color: var(--sf-fg); font-size: 12.75px; line-height: 1.4; box-shadow: inset 0 1px 1px oklch(0 0 0 / 0.04);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.field-host :is(input, select, textarea)::placeholder { color: var(--sf-muted); }
.field-host :is(input:not([type=checkbox], [type=range], [type=color], [type=file]), select, textarea):hover { border-color: color-mix(in oklab, var(--sf-fg) 22%, transparent); }
.field-host textarea { min-height: 84px; resize: vertical; }
.field-host select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: var(--sf-chevron); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.field-host select option { color: var(--sf-fg); background: var(--sf-card); }
.field-host :is(#projectName, .canvas-heading input, #boardName) { background: transparent; border-color: transparent; box-shadow: none; }
.field-host :is(#projectName, .canvas-heading input, #boardName):hover { border-color: var(--sf-hairline); }
.field-host :is(button, input, select, textarea, a, [tabindex]):focus-visible { outline: 2px solid color-mix(in oklab, var(--sf-ring) 55%, transparent); outline-offset: 3px; }
.field-host input[type=color] {
  appearance: none; -webkit-appearance: none; width: 32px; height: 32px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--sf-hairline); border-radius: 50%;
  background: none; overflow: hidden; cursor: pointer; box-shadow: var(--sf-shadow-e1);
}
.field-host input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.field-host input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.field-host input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
/* Custom colour: a soft rainbow ring around the chosen colour, like the reference accent picker. */
.field-host .swatches .color-picker {
  position: relative; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 90deg, #f08a8a, #f2c46b, #a7dd8f, #7fd3d9, #7fa6f2, #c99bea, #f08a8a);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sf-fg) 10%, transparent), var(--sf-shadow-e1);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.field-host .swatches .color-picker:hover { transform: scale(1.12); box-shadow: 0 0 0 2px color-mix(in oklab, var(--sf-fg) 25%, transparent); }
.field-host .swatches .color-picker input {
  opacity: 1; width: 58%; height: 58%; min-height: 0; border: 0; border-radius: 50%; background: none;
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--sf-bg) 80%, transparent);
}

/* ---------- Switches ---------- */
.field-host input[type=checkbox] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 32px; height: 18px; min-height: 0; margin: 0; padding: 0;
  border: 1px solid var(--sf-input); border-radius: 999px; background: var(--sf-well); cursor: pointer; vertical-align: middle;
  transition: background 160ms ease, border-color 160ms ease; box-shadow: inset 0 1px 1px oklch(0 0 0 / 0.06);
}
.field-host input[type=checkbox]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sf-fg); opacity: .55; box-shadow: var(--sf-thumb-shadow); transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), background 160ms ease, opacity 160ms ease;
}
.field-host input[type=checkbox]:hover { border-color: color-mix(in oklab, var(--sf-fg) 25%, transparent); }
.field-host input[type=checkbox]:checked { background: var(--sf-primary); border-color: var(--sf-primary); }
.field-host input[type=checkbox]:checked::before { transform: translateX(14px); background: var(--sf-primary-fg); opacity: 1; }
.field-host input[type=checkbox]:focus-visible { outline-offset: 2px; }
.field-host .toggle-row, .field-host label.field:has(> input[type=checkbox]), .field-host label.field:has(> input[type=color]) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.field-host label.field > :is(input[type=checkbox], input[type=color]) { margin-top: 0; width: auto; }
.field-host label.field > input[type=checkbox] { width: 32px; }

/* ---------- Sliders ---------- */
.field-host .house-slider { position: relative; display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 22px; --slider-progress: 0; }
.field-host .house-slider-track { position: absolute; inset: 0; border: 1px solid var(--sf-hairline); border-radius: 999px; background: var(--sf-track); }
.field-host .house-slider-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(11px + var(--slider-progress) * (100% - 22px) + 9px); border-radius: 999px; background: var(--sf-track-fill); pointer-events: none; }
.field-host .house-slider input[type=range] {
  position: absolute; top: 0; bottom: 0; left: 2px; width: calc(100% - 4px); height: 100%; min-height: 0; margin: 0; padding: 0; border: 0;
  background: transparent; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: none;
}
.field-host .house-slider input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.field-host .house-slider input[type=range]::-moz-range-track { height: 100%; background: transparent; }
.field-host .house-slider input[type=range]::-webkit-slider-thumb {
  box-sizing: border-box; width: 18px; height: 18px; margin-top: 2px; border: 3px solid var(--sf-thumb-ring); border-radius: 50%;
  background: color-mix(in oklab, var(--sf-card) 40%, transparent); box-shadow: var(--sf-thumb-shadow);
  -webkit-backdrop-filter: blur(2px) saturate(1.08); backdrop-filter: blur(2px) saturate(1.08); appearance: none; -webkit-appearance: none;
}
.field-host .house-slider input[type=range]::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px; border: 3px solid var(--sf-thumb-ring); border-radius: 50%;
  background: color-mix(in oklab, var(--sf-card) 40%, transparent); box-shadow: var(--sf-thumb-shadow);
}
.field-host .house-slider input[type=range]:focus-visible { outline: 2px solid color-mix(in oklab, var(--sf-ring) 55%, transparent); outline-offset: 3px; border-radius: 999px; }
.field-host .house-slider input[type=range]:disabled { cursor: default; }
.field-host .house-slider:has(input:disabled) { opacity: .5; }
/* A range that has not been wrapped yet still gets the well and thumb. */
.field-host input[type=range]:not(.house-slider input) { appearance: none; -webkit-appearance: none; height: 22px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.field-host input[type=range]:not(.house-slider input)::-webkit-slider-runnable-track { height: 22px; border: 1px solid var(--sf-hairline); border-radius: 999px; background: var(--sf-track); }
.field-host input[type=range]:not(.house-slider input)::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: 1px; border: 3px solid var(--sf-thumb-ring); border-radius: 50%; background: var(--sf-card); box-shadow: var(--sf-thumb-shadow); }
/* Slider rows: label left, value right, track below. */
.field-host label.field:has(> .house-slider), .field-host .screen-fit label:has(> .house-slider) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 8px;
}
.field-host :is(label.field, .screen-fit label) > .house-slider { grid-column: 1 / -1; }
.field-host .house-slider-value { color: var(--sf-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.field-host :is(.mockup-position, .safe-margin-grid, .screen-fit) label { color: var(--sf-fg); font-size: 12.75px; font-weight: 500; }
.field-host :is(.mockup-position, .safe-margin-grid) output, .field-host .timeline output { color: var(--sf-muted); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 400; }
.field-host .mockup-position label { margin: 14px 0 9px; }
.field-host .playback, .field-host .timeline { align-items: center; }
.field-host .playback output, .field-host .timeline output { font-variant-numeric: tabular-nums; }

/* ---------- Labels, headings, progress ---------- */
.field-host :is(label.field, .toggle-row, .safe-preset-label, .control-line label) { color: var(--sf-fg); font-size: 12.75px; font-weight: 500; }
.field-host label.field > :is(input, select, textarea):not([type=checkbox], [type=color]) { margin-top: 7px; font-weight: 400; }
.field-host :is(h2, .panel-title) { color: var(--sf-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
.field-host :is(h2 > span, h2 small, .panel-title span) { color: var(--sf-muted); }
.field-host progress { accent-color: var(--sf-fg); height: 6px; border-radius: 999px; overflow: hidden; }

/* ---------- Dialogs and toast ---------- */
.field-host dialog { border: 1px solid var(--sf-hairline); border-radius: 22px; background: var(--sf-card); color: var(--sf-fg); box-shadow: var(--sf-shadow-e3); }
.field-host #toast { border-radius: var(--sf-radius-control); }

/* The main editor's artboard column must not grow with its content, or the artboard cannot refit. */
.field-host .workspace:has(#stage) { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .field-host :is(button, input, select, textarea, input[type=checkbox]::before) { transition: none; }
}

/* Corner radius field: icon, label, number and unit on one line, like a design tool's radius input. */
.field-host .radius-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--sf-muted); }
.field-host .radius-field > .icon { width: 16px; height: 16px; flex: none; }
.field-host .radius-field > input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; padding: 7px 10px; font-size: 12.5px; color: var(--sf-fg); font-variant-numeric: tabular-nums; }
.field-host .radius-field > .unit { font-size: 11px; }

/* ---------- Colour popover (custom picker driving the native colour input) ---------- */
.field-host .color-popover { position: fixed; z-index: 1200; width: 236px; padding: 12px; border-radius: 16px; display: grid; gap: 10px; }
.field-host .cp-area { position: relative; height: 150px; border-radius: 10px; cursor: crosshair; touch-action: none; outline: none; box-shadow: inset 0 0 0 1px var(--sf-hairline);
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--cp-hue, 0) 100% 50%)); }
.field-host .cp-area:focus-visible { box-shadow: inset 0 0 0 1px var(--sf-hairline), 0 0 0 2px color-mix(in oklab, var(--sf-ring) 55%, transparent); }
.field-host .cp-cursor { position: absolute; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 1px 4px rgb(0 0 0 / .4); pointer-events: none; }
.field-host .cp-row { display: flex; align-items: center; gap: 8px; }
.field-host .cp-hue { flex: 1 1 auto; width: auto; appearance: none; -webkit-appearance: none; height: 12px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.field-host .cp-hue::-webkit-slider-runnable-track { height: 12px; background: transparent; }
.field-host .cp-hue::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -2px; border-radius: 50%; border: 2px solid #fff; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.field-host .cp-hue::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.field-host .cp-eyedrop { flex: none; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 9px; }
.field-host .cp-eyedrop svg { width: 15px; height: 15px; }
.field-host .cp-preview { flex: none; width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--sf-hairline); }
.field-host .cp-hex { flex: 1 1 auto; width: auto; min-height: 32px; padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; text-transform: lowercase; }
.field-host .cp-hex.is-invalid { border-color: oklch(0.72 0.17 25); }
.field-host .cp-recent { display: flex; gap: 6px; flex-wrap: wrap; }
.field-host .cp-swatch { width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--sf-hairline); box-shadow: none; transition: transform 120ms ease; }
.field-host .cp-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px color-mix(in oklab, var(--sf-fg) 25%, transparent); }
.field-host .swatches .color-picker input { pointer-events: none; }
.field-host .swatches .color-picker:focus-visible { outline: 2px solid var(--sf-fg); outline-offset: 3px; }