@layer reset,tokens,base,layout;@layer components{.tool{display:block;container-type:inline-size}.tool--gradient{--tool-preview:linear-gradient(in oklch 135deg, #e0674b 0%, #f2c14e 45%, #3f7cc8 100%)}.tool--shadow{--tool-shadow:0 1px 2px #0003, 0 12px 32px -8px #00000040}.tool__layout{gap:var(--space-6);grid-template-columns:minmax(0,1fr);display:grid}.tool__controls{gap:var(--space-5);padding:var(--space-5);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);align-content:start;align-self:start;display:grid}.tool__fieldset{gap:var(--space-2);border:0;min-inline-size:0;margin:0;padding:0;display:grid}.tool__field{gap:var(--space-2);display:grid}.tool__field[hidden]{display:none}.tool__legend{font-family:var(--font-label);font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:var(--letter-spacing-caps);text-transform:uppercase;padding:0}.tool__segments{display:flex}.tool__segment{padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-sm);text-align:center;cursor:pointer;background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);flex:1;position:relative}.tool__segment+.tool__segment{margin-inline-start:calc(var(--border-width) * -1)}.tool__segment:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.tool__segment:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.tool__segment:has(:checked){z-index:var(--z-raised);color:var(--color-accent);background-color:var(--color-accent-surface);border-color:var(--color-accent)}.tool__segment:has(:focus-visible){outline:var(--focus-ring-width) solid var(--color-focus);outline-offset:var(--focus-ring-offset)}.tool__segment-input{opacity:0;position:absolute}.tool__check{gap:var(--space-2);font-family:var(--font-mono);font-size:var(--font-size-sm);align-items:center;display:flex}.tool__checkbox,.tool__range{accent-color:var(--color-accent);margin:0}.tool__range-row{gap:var(--space-3);align-items:center;display:flex}.tool__range{flex:1;inline-size:0}.tool__output{min-inline-size:3.5rem;font-family:var(--font-mono);font-size:var(--font-size-sm);text-align:end}.tool__select,.tool__number{min-block-size:2.25rem;padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md)}.tool__stops{gap:var(--space-2);margin:0;padding:0;list-style:"";display:grid}.tool__stop{gap:var(--space-2);align-items:center;display:flex}.tool__color{block-size:2.25rem;inline-size:2.75rem;padding:var(--space-1);cursor:pointer;background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md)}.tool__number{inline-size:5rem}.tool__unit{font-family:var(--font-label);font-size:var(--font-size-sm);color:var(--color-text-muted)}.tool__remove{block-size:2.25rem;inline-size:2.25rem;color:var(--color-text-muted);border-radius:var(--radius-md);background:0 0;border:0;place-items:center;margin-inline-start:auto;padding:0;display:grid}.tool__remove:hover{color:var(--color-danger);background-color:var(--color-danger-surface)}.tool__presets{gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.tool__preset{aspect-ratio:1;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);padding:0}.tool__preset:hover{border-color:var(--color-text)}.tool__preset--sunset{background-image:linear-gradient(in oklch 135deg, #e0674b 0%, #f2c14e 100%)}.tool__preset--sea{background-image:linear-gradient(in oklch 135deg, #1d6fa5 0%, #7fd3c7 100%)}.tool__preset--forest{background-image:linear-gradient(in oklch 135deg, #25533a 0%, #a7c957 100%)}.tool__preset--ink{background-image:linear-gradient(#1c1917 0%,#57534e 100%)}.tool__preset--spot{background-image:radial-gradient(in oklch circle at 30% 30%, #fff4d6 0%, #e0674b 55%, #3b1c32 100%)}.tool__preset--wheel{background-image:conic-gradient(#ff4d6d 0%,#ffd166 25%,#06d6a0 50%,#118ab2 75%,#ff4d6d 100%)}.tool__output-panel{gap:var(--space-4);order:-1;grid-template-columns:minmax(0,1fr);align-content:start;min-inline-size:0;display:grid}.tool__preview{aspect-ratio:16/9;background-image:var(--tool-preview);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md)}.tool__actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.tool__status{font-size:var(--font-size-sm);color:var(--color-text-muted)}.tool__status:empty{display:none}.tool__explain{max-inline-size:var(--width-text)}.tool__layers{gap:var(--space-4);margin:0;padding:0;list-style:"";display:grid}.tool__layer{border-block-start:var(--border-width) solid var(--color-border);padding-block-start:var(--space-4)}.tool__layer-head{gap:var(--space-2);justify-content:space-between;align-items:center;display:flex}.tool__slider{gap:var(--space-2);font-size:var(--font-size-sm);grid-template-columns:8.25rem minmax(0,1fr) auto;align-items:center;display:grid}.tool__slider-label{display:contents}.tool__slider .tool__range{inline-size:100%}.tool__slider[hidden],.tool__check[hidden]{display:none}.tool__color-row{gap:var(--space-3);font-size:var(--font-size-sm);align-items:center;display:flex}.tool__stage{aspect-ratio:16/9;padding:var(--space-6);--tool-sample-bg:#fff;color:#1c1917;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background-color:#f4f1ea;place-items:center;display:grid}.tool__stage--dark{--tool-sample-bg:#2e2a27;color:#f4f1ea;background-color:#1c1917}.tool__stage--color{color:#fff;background-color:#3f7cc8}.tool__sample{aspect-ratio:3/2;background-color:var(--tool-sample-bg);inline-size:min(60%,16rem);box-shadow:var(--tool-shadow);border-radius:12px}.tool__sample-text{font-size:clamp(2rem,8cqi,4rem);font-weight:var(--font-weight-bold);text-shadow:var(--tool-shadow)}.tool__canvas{block-size:24rem;padding:var(--space-8) var(--space-3) var(--space-3) var(--space-8);visibility:hidden;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);position:relative;overflow:auto}.tool--ready .tool__canvas{visibility:visible}.tool__axis{color:var(--color-border-strong);background-color:currentColor;position:absolute}.tool__axis:after{content:"";border:5px solid #0000;position:absolute}.tool__axis--x{inset-block-start:var(--space-4);inset-inline:var(--space-8) var(--space-3);block-size:2px}.tool__axis--y{inset-block:var(--space-8) var(--space-3);inline-size:2px;inset-inline-start:var(--space-4)}.tool__axis--main{color:var(--color-accent)}.tool__axis--right:after{border-inline-start-color:currentColor;inset-block-start:-4px;inset-inline-end:-4px}.tool__axis--left:after{border-inline-end-color:currentColor;inset-block-start:-4px;inset-inline-start:-4px}.tool__axis--down:after{border-block-start-color:currentColor;inset-block-end:-4px;inset-inline-start:-4px}.tool__axis--up:after{border-block-end-color:currentColor;inset-block-start:-4px;inset-inline-start:-4px}.tool__legend-row{gap:var(--space-2) var(--space-5);font-size:var(--font-size-sm);color:var(--color-text-muted);flex-wrap:wrap;display:flex}.tool__key{block-size:2px;inline-size:1.25rem;vertical-align:middle;background-color:var(--color-border-strong);margin-inline-end:var(--space-2);display:inline-block}.tool__key--main{background-color:var(--color-accent)}.tool__flex{box-sizing:border-box;border:var(--border-width) dashed var(--color-border-strong);min-block-size:100%}.tool__flex-item{min-inline-size:0;padding:var(--space-3) var(--space-5);font:inherit;font-family:var(--font-mono);color:var(--color-text);cursor:pointer;background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-sm)}.tool__flex-item:nth-child(3n+2){padding-block:var(--space-6)}.tool__flex-item:nth-child(3n){font-size:var(--font-size-xl)}.tool__flex-item[aria-pressed=true]{color:var(--color-accent);background-color:var(--color-accent-surface);border-color:var(--color-accent)}.tool__hint{font-size:var(--font-size-sm);color:var(--color-text-muted)}.tool__pair{gap:var(--space-2);font-size:var(--font-size-sm);grid-template-columns:minmax(0,1fr) auto;align-items:center;display:grid}.tool__buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.tool__grid{box-sizing:border-box;touch-action:none;user-select:none;min-block-size:100%;display:grid}.tool__cell{min-block-size:3rem;font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:crosshair;background-color:var(--color-surface-raised);border:var(--border-width) dashed var(--color-border-strong);border-radius:var(--radius-sm);padding:0}.tool__cell--selected{background-color:var(--color-accent-surface);border-color:var(--color-accent);border-style:solid}.tool__area{z-index:var(--z-raised);padding:var(--space-1);font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);pointer-events:none;background-color:color-mix(in oklab, var(--color-accent) 18%, var(--color-surface-raised));border:2px solid var(--color-accent);border-radius:var(--radius-sm);place-items:center;display:grid;overflow:hidden}.tool__track{gap:var(--space-2);align-items:center;display:flex}.tool__input{min-block-size:2.25rem;min-inline-size:0;padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);flex:1}.tool--bezier{--tool-easing:cubic-bezier(.25, .1, .25, 1);--tool-duration:.8s}.tool__canvas--short{block-size:14rem;padding:var(--space-4);place-items:center;display:grid}.tool__textarea{min-block-size:12rem;inline-size:100%;padding:var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);resize:vertical;background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);line-height:1.6}.tool__input[aria-invalid=true]{border-color:var(--color-danger)}.tool__facts{gap:var(--space-2);font-size:var(--font-size-sm);grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));margin:0;display:grid}.tool__fact{padding:var(--space-2) var(--space-3);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md)}.tool__fact-term{color:var(--color-text-muted)}.tool__fact-value{font-family:var(--font-mono);font-weight:var(--font-weight-medium);margin:0}.tool__clamp-sample{text-align:center;line-height:1.2;overflow:hidden}.tool__clamp-box{background-color:var(--color-accent);border-radius:var(--radius-sm)}.tool__results{gap:var(--space-3);margin:0;padding:0;list-style:"";display:grid}.tool__result{gap:var(--space-2);padding:var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);display:grid}.tool__result--top{border-color:var(--color-success)}.tool__result-head{gap:var(--space-2) var(--space-4);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.tool__result-selector{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);overflow-wrap:anywhere}.tool__score{gap:var(--space-1);display:inline-flex}.tool__score-cell{min-inline-size:2rem;padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-weight:var(--font-weight-semibold);text-align:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-sm)}.tool__result-rank{font-size:var(--font-size-sm);color:var(--color-text-muted)}.tool__result-rank:empty{display:none}.tool__result--top .tool__result-rank{font-weight:var(--font-weight-medium);color:var(--color-success)}.tool__parts{gap:var(--space-1);font-size:var(--font-size-sm);margin:0;padding:0;list-style:"";display:grid}.tool__part{border-inline-start:3px solid var(--color-border);padding-inline-start:var(--space-3)}.tool__part--id{border-color:var(--color-danger)}.tool__part--class{border-color:var(--color-warning)}.tool__part--type{border-color:var(--color-info)}.tool__formats{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);margin:0;padding:0;list-style:"";display:grid}.tool__format{gap:var(--space-3);padding:var(--space-2) var(--space-3);grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;display:grid}.tool__format+.tool__format{border-block-start:var(--border-width) solid var(--color-border)}.tool__format-name{font-family:var(--font-label);font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:var(--letter-spacing-caps);text-transform:uppercase}.tool__format-value{overflow-wrap:anywhere}.tool__copy{padding:var(--space-1) var(--space-2);font-family:var(--font-label);font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:0 0}.tool__copy:hover{color:var(--color-text);border-color:var(--color-border-strong)}.tool__color-field{gap:var(--space-2);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.tool__error{font-size:var(--font-size-sm);color:var(--color-danger)}.tool__error:empty{display:none}.tool__color-sample{gap:var(--space-2);block-size:100%;inline-size:100%;padding:var(--space-4);text-align:center;border-radius:var(--radius-sm);place-items:center;display:grid}.tool__color-sample-large{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:1.2}.tool__ratio{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.tool__verdicts{gap:var(--space-1);font-size:var(--font-size-sm);margin:0;padding:0;list-style:"";display:grid}.tool__verdict{border-inline-start:3px solid var(--color-border);padding-inline-start:var(--space-3)}.tool__verdict--pass{border-color:var(--color-success)}.tool__verdict--fail{border-color:var(--color-danger)}.tool__apca{font-size:var(--font-size-sm)}.tool__warning{padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);background-color:var(--color-warning-surface);border-inline-start:3px solid var(--color-warning)}.tool__warning:empty{display:none}.tool__subtitle{font-size:var(--font-size-lg)}.tool__curve{touch-action:none;user-select:none;inline-size:min(100%,15rem);margin-inline:auto;display:block;overflow:visible}.tool__curve-frame{fill:var(--color-surface);stroke:var(--color-border-strong)}.tool__curve-guide{stroke:var(--color-border-strong);stroke-dasharray:4 4}.tool__curve-path{fill:none;stroke:var(--color-text);stroke-width:3px;stroke-linecap:round}.tool__curve-arm{stroke:var(--color-accent);stroke-width:1.5px}.tool__curve-handle{cursor:grab;fill:var(--color-surface-raised);stroke:var(--color-accent);stroke-width:3px}.tool__curve-handle:focus-visible{stroke:var(--color-focus);stroke-width:5px;outline:none}.tool__lane{block-size:2rem;margin-block:var(--space-2);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);position:relative}.tool__ball{background-color:var(--color-accent);block-size:1.5rem;inline-size:1.5rem;transition:inset-inline-start var(--tool-duration) var(--tool-easing);border-radius:50%;position:absolute;inset-block-start:.25rem;inset-inline-start:.25rem}.tool__ball--linear{background-color:var(--color-border-strong);transition-timing-function:linear}.tool__lanes--end .tool__ball{inset-inline-start:calc(100% - 1.75rem)}.tool__preset-list{gap:var(--space-2);flex-wrap:wrap;display:flex}.tool__chip{padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text);cursor:pointer;background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md)}.tool__chip:hover{border-color:var(--color-text)}@container (width>=48rem){.tool__layout{grid-template-columns:22rem minmax(0,1fr)}.tool__output-panel{order:0}}}@layer utilities,overrides;