@media (width >=48rem) and (height >=36rem){.designer{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden;position:relative}.designer:has(>.designer-preview[hidden]){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.designer>section{min-block-size:0;overflow-y:auto}.designer-preview iframe{flex:1 1 0;min-block-size:0}}@media (width >=64rem) and (height >=36rem){.designer{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:minmax(0,1fr)}}.designer--previewing{display:flex;flex-direction:column}.designer--previewing .designer-preview,.designer--previewing .designer-preview iframe{flex:1 1 0;min-block-size:0}.designer--previewing .designer-section,.designer--previewing .designer-bar .tab-list{display:none}.designer--previewing .designer-bar{justify-content:end}.designer-preview{display:flex;flex-direction:column;position:relative}.designer-preview iframe{align-self:center;border:0;inline-size:100%;max-inline-size:100%}.designer-preview__width{flex-wrap:nowrap}.designer-preview__width>input{flex:1 1 8rem}.designer-preview__bar{border-block-end:1px solid var(--border-color-quiet, currentColor);box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:center;min-block-size:3rem;padding:var(--spacing-xs, .5rem) var(--spacing-cushion, 1rem)}.designer-preview--expanded{background:var(--surface, Canvas);top:0;right:0;bottom:0;left:0;position:fixed;z-index:var(--z-index-overlay, 1000)}.designer-preview--expanded iframe{flex:1 1 0;min-block-size:0}.designer-preview__tools{min-inline-size:0}.designer-preview iframe[style*=inline-size]{box-shadow:0 0 0 1px var(--border-color-muted, currentColor)}:is(.designer-dialog,.designer-header){--foreground-accent: var(--foreground);--foreground-accent-hover: var(--foreground-muted);--foreground-accent-pressed: var(--foreground-muted)}.designer-bar{align-items:center;background:var(--surface, Canvas);border-block-end:1px solid var(--border-color-quiet, currentColor);display:flex;gap:var(--spacing-cushion, 1rem);inset-block-start:0;min-block-size:3rem;padding:var(--spacing-xs, .5rem) var(--spacing-cushion, 1rem);position:sticky;z-index:3}.designer-bar .tab-list{flex:1;min-inline-size:0}@media (width < 48rem) or (height < 36rem){.designer-bar{inset-block-start:var(--header-clearance, 0px);padding-block:var(--spacing-sm)}}.designer-panel{padding-inline:var(--spacing-cushion, 1rem);padding-block:var(--spacing-sm, .5rem)}.designer-global{--split-side-width: 46rem;--split-main-min-width: 36rem;--gap: var(--spacing-lg, 2rem)}.designer-curve-tools{--grid-min: 14rem;--gap: var(--spacing-lg, 2rem)}.designer-ramps{display:grid;gap:var(--spacing-xs, .5rem);list-style:none;margin:0;padding:0}.designer-ramp-row{align-items:center;display:grid;gap:var(--spacing-sm, .5rem);grid-template-columns:1.25rem 11rem minmax(8rem,1fr) auto auto 2rem}.designer-ramp-row__name{display:grid;min-inline-size:0}.designer-ramp-row__label{align-items:center;display:grid;gap:var(--spacing-2xs, .25rem);grid-template-columns:1fr 2rem;min-inline-size:0}.designer-ramp-row__label:has(.input){grid-template-columns:minmax(0,1fr) 2rem}.designer-about{--popover-max-width: 18rem}.designer-strip{block-size:2.5rem;border-radius:var(--radius-sm, .25rem);display:grid;grid-template-columns:repeat(var(--columns, 9),minmax(0,1fr));list-style:none;margin:0;overflow:hidden;padding:0;position:relative}.designer-strip:after{border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent);content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:1}.designer-strip--single{background:var(--swatch)}.designer-strip__step{background:var(--swatch);position:relative}.designer-strip__step--seed:after{border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #000;content:"";inline-size:.625rem;aspect-ratio:1;inset:50% auto auto 50%;position:absolute;translate:-50% -50%}.designer-chip{background:var(--swatch);border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);display:block;block-size:1.5rem;inline-size:3rem}.designer-curve__plot{inline-size:100%;max-inline-size:20rem;overflow:visible;touch-action:none}.designer-curve__frame{fill:none;stroke:var(--border-color, currentColor);stroke-opacity:.4}.designer-curve__arm{stroke:var(--foreground-muted, currentColor);stroke-dasharray:4 3}.designer-curve__line{fill:none;stroke:var(--foreground, currentColor);stroke-width:3}.designer-curve__step{fill:var(--foreground, currentColor)}.designer-curve__line--shape{stroke:var(--foreground-muted, currentColor);stroke-dasharray:6 4;stroke-width:1.5}.designer-curve__step--pin{fill:var(--foreground-accent, currentColor);stroke:var(--surface-card, Canvas);stroke-width:2}.designer-curve__label{fill:var(--foreground-muted, currentColor);font-size:11px}.designer-curve__handle{cursor:grab;fill:var(--foreground-accent, currentColor);stroke:var(--surface-card, Canvas);stroke-width:3}.designer-curve__handle:active{cursor:grabbing}.designer-hex{inline-size:11ch}.designer-actions{inset-block-end:0;position:sticky;z-index:2}.designer-details>*{flex-shrink:0}.designer-role-cell{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm, .75rem)}.designer-role-color{justify-content:start;min-inline-size:9.5rem}.designer-chip--wide{inline-size:6rem}.designer-tiles{display:flex;flex-wrap:wrap;gap:var(--spacing-sm, .5rem);list-style:none;margin:0;padding:0}.designer-tile{align-items:center;background:none;border:0;border-radius:var(--radius-sm, .25rem);color:inherit;cursor:pointer;display:inline-flex;gap:.25rem;padding:2px;position:relative}.designer-tile svg{display:block}.designer-tile:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:var(--focus-ring-offset, 2px)}.designer-tile--fail{outline:1px solid var(--border-color-danger, currentColor)}.designer-tile--warn{outline:1px dashed var(--border-color-warning, currentColor)}.designer-tile__ratio{align-items:center;display:inline-flex;gap:.125rem}.designer-picker{--popover-max-width: 34rem}.designer-swatch-grid{align-items:center;display:grid;gap:var(--spacing-2xs, .25rem);grid-template-columns:max-content repeat(var(--steps),1.75rem);justify-items:center}.designer-swatch-grid>.font-mono:not(.text-muted){justify-self:start;padding-inline-end:var(--spacing-xs, .5rem)}.designer-swatch{--_mark: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;aspect-ratio:1;background:var(--_mark),var(--swatch);border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);cursor:pointer;inline-size:1.75rem;margin:0}.designer-swatch:checked{box-shadow:0 0 0 2px var(--surface-card, Canvas),0 0 0 4px var(--foreground, CanvasText)}.designer-swatch:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:5px}.designer-swatch--fail{--_mark: linear-gradient(to top right, transparent calc(50% - 2px) , black calc(50% - 2px) , black 50%, white 50%, white calc(50% + 2px) , transparent calc(50% + 2px) )}.designer-swatch--warn{--_mark: radial-gradient(circle, black 0 3px, white 3px 5px, transparent 5px)}.designer-section{display:contents}.designer-type-global{align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}.designer-type-wide{grid-column:1 / -1}.designer-type-fields{--grid-min: 11rem}.designer-number{inline-size:100%}.designer-font__family{overflow-wrap:anywhere}.designer-font__weights{--gap: var(--spacing-md, 1rem)}.designer-family{align-items:center;display:grid;gap:var(--spacing-2xs, .25rem) var(--spacing-sm, .75rem);grid-template-columns:5rem 1fr}.designer-family .designer-family__sample{grid-column:1 / -1;overflow-wrap:anywhere}.designer-code pre{margin:0}.designer-ladder__sample{display:block;line-height:1;white-space:nowrap}.designer-ladder td .icon{vertical-align:-.125em}.designer-check{align-items:center;display:flex;gap:var(--spacing-xs, .5rem)}.designer-check>.icon{flex-shrink:0;font-size:.7em;vertical-align:middle}.designer-styles{grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));list-style:none;margin:0;padding:0}.designer-style__specimen{margin:0;overflow-wrap:anywhere}.designer-style__fields{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}.designer-space__scale{min-inline-size:8rem}.designer-space__scale span{display:block;block-size:var(--spacing-sm);border-radius:var(--radius-full);background:var(--foreground-muted, currentColor)}.designer-space__scale span+span{margin-block-start:var(--spacing-xs);background:var(--foreground-accent, currentColor)}.designer-export{background:var(--surface-subtle, Canvas);border-radius:var(--radius-sm, .25rem);margin:0;max-block-size:16rem;overflow:auto;padding:var(--spacing-md, 1rem);white-space:pre}.designer-shape__sample{border:var(--border-width-thin) solid var(--foreground-muted, currentColor);block-size:2rem;display:block;inline-size:3rem}[data-sample^=border-]{border-width:0 0 var(--border-width-thin);block-size:1rem}