:root{--application-max-width:72rem;--content-max-width:48rem;--breakout-size:12rem;--space-xxs:.2361rem;--space-xs:.382rem;--space-s:.618rem;--space-m:1rem;--space-l:1.618rem;--space-xl:2.6179rem;--space-xxl:4.2358rem;--font-size-xs:clamp(.75rem,.125vw + .725rem,.7813rem);--font-size-s:clamp(.875rem,.25vw + .825rem,.9375rem);--font-size-m:clamp(1rem,.5vw + .9rem,1.125rem);--font-size-l:clamp(1.125rem,.75vw + .975rem,1.3125rem);--font-size-xl:clamp(1.3125rem,1vw + 1.1125rem,1.5625rem);--font-size-xxl:clamp(1.5rem,1.5vw + 1.2rem,1.875rem);--font-size-xxxl:clamp(1.75rem,2vw + 1.35rem,2.25rem);--line-height-xs:1;--line-height-s:1.2;--line-height-m:1.414;--line-height-l:1.618;--line-height-xl:2;--color-white:white;--color-black:black;--color-neutral-100:#f3f3f1;--color-neutral-200:#e5e4e0;--color-neutral-300:#d5d2cd;--color-neutral-400:#c0bdb7;--color-neutral-500:#a8a49e;--color-neutral-600:#8a8781;--color-neutral-700:#686661;--color-neutral-800:#41403d;--color-neutral-900:#171716;--color-sky-100:#daf0fe;--color-sky-200:#aae0fe;--color-sky-300:#72cdfc;--color-sky-400:#2eb5f0;--color-sky-500:#0099d7;--color-sky-600:#0079b1;--color-sky-700:#005780;--color-sky-800:#00334b;--color-sky-900:#010f18;--color-blue-100:#ccdcfb;--color-blue-200:#96b9fe;--color-blue-300:#6095ff;--color-blue-400:#316ff6;--color-blue-500:#0849dc;--color-blue-600:#002ab1;--color-blue-700:#00157a;--color-blue-800:#000941;--color-blue-900:#000211;--color-purple-100:#e1d0e2;--color-purple-200:#c7a3cb;--color-purple-300:#af77b5;--color-purple-400:#954f9d;--color-purple-500:#782d81;--color-purple-600:#581361;--color-purple-700:#39053f;--color-purple-800:#1b021f;--color-purple-900:#040005;--color-red-100:#ffdbd8;--color-red-200:#ffb1ad;--color-red-300:#ff827f;--color-red-400:#ff4e55;--color-red-500:#e30d31;--color-red-600:#b70018;--color-red-700:#82000c;--color-red-800:#4a0007;--color-red-900:#160102;--color-gold-100:#fdf1dd;--color-gold-200:#fbe1b0;--color-gold-300:#f5cc7c;--color-gold-400:#e9b444;--color-gold-500:#d29a00;--color-gold-600:#b07e00;--color-gold-700:#845f00;--color-gold-800:#523c0b;--color-gold-900:#1d1506;--color-green-100:#dff8dc;--color-green-200:#b4f1b0;--color-green-300:#83e57e;--color-green-400:#4bd349;--color-green-500:#00b90d;--color-green-600:#009700;--color-green-700:#006f00;--color-green-800:#064307;--color-green-900:#041604;--color-primary:var(--color-purple-700);--color-primary-hover:var(--color-purple-800);--color-primary-active:var(--color-purple-900);--color-primary-text:var(--color-purple-100);--color-secondary:var(--color-neutral-200);--color-secondary-hover:var(--color-neutral-300);--color-secondary-active:var(--color-neutral-400);--color-link:var(--color-blue-700);--color-link-hover:var(--color-blue-800);--color-link-active:var(--color-blue-900);--color-error:var(--color-red-700);--color-error-hover:var(--color-red-800);--color-error-active:var(--color-red-900);--color-error-text:var(--color-red-100);--color-error-invalid:var(--color-red-500);--color-success:var(--color-green-700);--color-success-hover:var(--color-green-800);--color-success-active:var(--color-green-900);--color-success-text:var(--color-green-100);--color-selection-hover:var(--color-sky-200);--color-selection:var(--color-sky-500);--color-selection-selected:var(--color-sky-700);--color-selection-active:var(--color-sky-800);--color-input:var(--color-white);--color-background:var(--color-neutral-100);--color-background-alt:var(--color-neutral-200);--color-border:var(--color-neutral-500);--color-border-soft:var(--color-neutral-300);--color-text:var(--color-neutral-900);--color-text-soft:var(--color-neutral-800);--color-text-inverted:var(--color-white);--color-shadow:#0000001a;--color-overlay-hover:#0000000d;--color-overlay-active:#0000001a;--font-family-sans:"Helvetica Neue",Arial,Roboto,sans-serif;--font-family-mono:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--font-weight-regular:400;--font-weight-bold:700;--opacity-transparent:0;--opacity-translucent:.4;--opacity-dimmed:.8;--opacity-solid:1;--transition-short:.2s;--transition-medium:.5s;--transition-long:1.25s;--easing-linear:linear;--easing-in:ease-in;--easing-out:ease-out;--easing-inout:ease-in-out;--input-height:2rem}@media screen and (min-width:45em) and (max-width:75em){:root{--font-size-xs:clamp(.7813rem,.1042vw + .7344rem,.8125rem);--font-size-s:clamp(.9375rem,.2083vw + .8438rem,1rem);--font-size-m:clamp(1.125rem,.4167vw + .9375rem,1.25rem);--font-size-l:clamp(1.3125rem,.8333vw + .9375rem,1.5625rem);--font-size-xl:clamp(1.5625rem,1.4583vw + .9063rem,2rem);--font-size-xxl:clamp(1.875rem,2.0833vw + .9375rem,2.5rem);--font-size-xxxl:clamp(2.25rem,2.9167vw + .9375rem,3.125rem)}}@media screen and (min-width:75em){:root{--font-size-xs:.8125rem;--font-size-s:1rem;--font-size-m:1.25rem;--font-size-l:1.5625rem;--font-size-xl:2rem;--font-size-xxl:2.5rem;--font-size-xxxl:3.125rem}}@media (prefers-color-scheme:dark){:root{--color-selection-hover:var(--color-sky-800);--color-selection-selected:var(--color-sky-300);--color-selection-active:var(--color-sky-200);--color-input:var(--color-black);--color-background:var(--color-neutral-900);--color-background-alt:var(--color-neutral-800);--color-primary:var(--color-purple-300);--color-primary-hover:var(--color-purple-200);--color-primary-active:var(--color-purple-100);--color-primary-text:var(--color-purple-900);--color-secondary:var(--color-neutral-800);--color-secondary-hover:var(--color-neutral-700);--color-secondary-active:var(--color-neutral-600);--color-link:var(--color-blue-300);--color-link-hover:var(--color-blue-200);--color-link-active:var(--color-blue-100);--color-error:var(--color-red-300);--color-error-hover:var(--color-red-200);--color-error-active:var(--color-red-100);--color-error-text:var(--color-red-900);--color-success:var(--color-green-300);--color-success-hover:var(--color-green-200);--color-success-active:var(--color-green-100);--color-success-text:var(--color-green-900);--color-border-soft:var(--color-neutral-700);--color-text:var(--color-neutral-100);--color-text-soft:var(--color-neutral-200);--color-text-inverted:var(--color-black);--color-shadow:#0006;--color-overlay-hover:#ffffff0d;--color-overlay-active:#ffffff1a}}@media (prefers-reduced-transparency){:root{--opacity-translucent:.7;--opacity-dimmed:.9}}html{-webkit-text-size-adjust:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;font-family:var(--font-family-sans);scroll-padding-top:var(--space-xl);scroll-behavior:smooth}input,textarea,button,select,option,optgroup{font-family:var(--font-family-sans)}body{line-height:inherit;color:var(--color-text);background:var(--color-background);margin:0;padding:0}:focus-visible{outline:none;box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}::selection{background-color:color-mix(in srgb,var(--color-selection)50%,transparent)}mark{background:color-mix(in srgb,var(--color-selection)20%,transparent);color:color-mix(in srgb,var(--color-selection)20%,currentColor)}h1{font-size:var(--font-size-xxxl);line-height:var(--line-height-xs)}h2{font-size:var(--font-size-xxl);line-height:var(--line-height-s)}h3{font-size:var(--font-size-xl);line-height:var(--line-height-s)}h4{font-size:var(--font-size-l);line-height:var(--line-height-m)}h5,h6{font-size:var(--font-size-m);line-height:var(--line-height-m)}p,li,dt,dd,pre,input{font-size:var(--font-size-m);line-height:var(--line-height-l)}small,th,td{font-size:var(--font-size-s);line-height:var(--line-height-m)}table{border-collapse:collapse;width:100%}tr{border-bottom:1px solid var(--color-border-soft)}thead tr,tfoot tr{border-bottom:1px solid var(--color-border)}th,td{text-align:left;vertical-align:top;padding:var(--space-s)var(--space-m)var(--space-s)0}dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-s)var(--space-m)}dl dt{font-weight:var(--font-weight-bold);color:var(--color-text-soft)}dl dd{margin:0}hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-l)0}details summary{height:var(--input-height);line-height:var(--line-height-xl);border-radius:var(--space-xs)}details[open] summary{margin-block-end:var(--space-m)}section{margin-block:var(--space-xl)}section.blog-posts{display:flex;gap:var(--space-xl);flex-direction:column}section h3{margin-block-start:var(--space-xl);margin-block-end:var(--space-l)}.content-grid,main{display:grid;grid-template-columns:[fullwidth-start]minmax(var(--space-l),1fr)[breakout-start]minmax(0,var(--breakout-size))[content-start]min(var(--content-max-width),calc(100% - 2*var(--space-l)))[content-end]minmax(0,var(--breakout-size))[breakout-end]minmax(var(--space-l),1fr)[fullwidth-end]}:is(.content-grid,main)>.content{grid-column:content}:is(.content-grid,main)>section{grid-column:content}:is(.content-grid,main) .breakout{grid-column:breakout}h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre{margin-block-start:0;margin-block-end:var(--space-l)}ol,ul{display:flex;gap:var(--space-s);flex-direction:column}:is(ol,ul)>li>ol{margin-block-start:var(--space-s)}:is(ol,ul)>li>ul{margin-block-start:var(--space-s)}code{font-family:var(--font-family-mono);font-size:.9em;line-height:.9}p code,li code,dt code,dd code,td code{background-color:var(--color-background-alt);border-radius:var(--space-xxs);padding:var(--space-xs)var(--space-xxs)var(--space-xxs)}a[href]:not(.anchor){text-decoration:none;color:var(--color-link)}a[href]:not(.anchor):hover{color:var(--color-link-hover)}a[href]:not(.anchor):active{color:var(--color-link-active)}a[href].anchor{color:inherit;display:flex;gap:var(--space-xs);text-decoration:none;align-items:baseline}a[href].anchor .permalink{opacity:var(--opacity-transparent)}a[href].anchor:hover .permalink{opacity:var(--opacity-translucent)}[aria-hidden=true],[hidden]{display:none!important}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;top:auto;left:-10000px}.skiplink:focus{display:inline-block;padding:var(--space-s);text-decoration:none;width:auto;height:auto;top:0;left:50%;transform:translate(-50%)}basic-colorswatch{display:inline-block;position:relative;background:var(--color-swatch);width:var(--swatch-size);height:var(--swatch-size);border-radius:var(--space-xxs);overflow:hidden}basic-colorswatch:before{position:absolute;content:"";display:block;border-left:var(--swatch-size)solid transparent;border-bottom:var(--swatch-size)solid var(--color-fallback);width:0;height:0}basic-button{position:relative;display:inline-block;flex:0}basic-button button{height:var(--input-height);min-inline-size:var(--input-height);border-radius:var(--space-xs);background-color:var(--color-secondary);border:1px solid var(--color-border);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;opacity:var(--opacity-dimmed);transition:all var(--transition-shorter)var(--easing-inout)}basic-button button:disabled{opacity:var(--opacity-translucent)}basic-button button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}basic-button button:not(:disabled):hover{background-color:var(--color-secondary-hover)}basic-button button:not(:disabled):active{background-color:var(--color-secondary-active)}basic-button button.primary{color:var(--color-primary-text);background-color:var(--color-primary);border-color:var(--color-primary-active)}basic-button button.primary:not(:disabled){opacity:var(--opacity-solid)}basic-button button.primary:not(:disabled):hover{background-color:var(--color-primary-hover)}basic-button button.primary:not(:disabled):active{background-color:var(--color-primary-active)}basic-button button.destructive{color:var(--color-error-text);background-color:var(--color-error);border-color:var(--color-error-active)}basic-button button.destructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.destructive:not(:disabled):hover{background-color:var(--color-error-hover)}basic-button button.destructive:not(:disabled):active{background-color:var(--color-error-active)}basic-button button.constructive{color:var(--color-success-text);background-color:var(--color-success);border-color:var(--color-success-active)}basic-button button.constructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.constructive:not(:disabled):hover{background-color:var(--color-success-hover)}basic-button button.constructive:not(:disabled):active{background-color:var(--color-success-active)}basic-button button.tertiary{padding:var(--space-xs);color:var(--color-primary);background:0 0;border:none;height:auto}basic-button button.tertiary:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary:not(:disabled):hover{background-color:var(--color-overlay-hover);color:var(--color-primary-hover)}basic-button button.tertiary:not(:disabled):active{background-color:var(--color-overlay-active);color:var(--color-primary-active)}basic-button button.tertiary.constructive{color:var(--color-success)}basic-button button.tertiary.constructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary.constructive:not(:disabled):hover{color:var(--color-success-hover)}basic-button button.tertiary.constructive:not(:disabled):active{color:var(--color-success-active)}basic-button button.tertiary.destructive{color:var(--color-error)}basic-button button.tertiary.destructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary.destructive:not(:disabled):hover{color:var(--color-error-hover)}basic-button button.tertiary.destructive:not(:disabled):active{color:var(--color-error-active)}basic-button button.small{--input-height:var(--space-l);font-size:var(--font-size-xs);padding-inline:var(--space-xs)}basic-button button.large{--input-height:var(--space-xl);font-size:var(--font-size-m);padding-inline:var(--space-m)}basic-button .badge{position:absolute;box-sizing:border-box;top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));font-size:var(--font-size-xs);line-height:var(--line-height-xs);background-color:var(--color-primary);color:var(--color-text-inverted);padding:var(--space-xxs)var(--space-xs);height:calc(2*var(--space-s));min-width:calc(2*var(--space-s));border-radius:var(--space-s)}basic-button .badge:empty{display:none}card-colorscale{--scale-max-size:18rem;--scale-padding:.5em;--color-text:white;display:inline-flex;margin:0 auto}card-colorscale ol{display:grid;list-style:none;grid-template-areas:"lighten80 lighten60 lighten40 lighten20" "base base base base" "darken20 darken40 darken60 darken80";grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 4fr 1fr;aspect-ratio:2/3;min-height:min(100%,150cqw,100cqh,var(--scale-max-size));max-width:calc(2*var(--scale-max-size)/3);overflow:hidden;object-fit:contain;container-type:inline-size;border-radius:6%/4%;align-self: center;gap:0;margin:0 auto;padding:0}card-colorscale strong{display:block;color:var(--color-text);font-size:15cqi;font-weight:700}card-colorscale small{display:block;color:var(--color-text-soft);font-size:10cqi;font-weight:400}card-colorscale.tiny ol{height:3rem}card-colorscale.tiny .label{display:none}card-colorscale.small ol{height:7.5rem}card-colorscale.small .label small{display:none}card-colorscale.medium ol{height:12rem}card-colorscale.large ol{height:18rem}card-colorscale li{margin:0}card-colorscale .lighten80{grid-area:lighten80;background:var(--color-lighten80)}card-colorscale .lighten60{grid-area:lighten60;background:var(--color-lighten60)}card-colorscale .lighten40{grid-area:lighten40;background:var(--color-lighten40)}card-colorscale .lighten20{grid-area:lighten20;background:var(--color-lighten20)}card-colorscale .base{grid-area:base;background:var(--color-base)}card-colorscale .darken20{grid-area:darken20;background:var(--color-darken20)}card-colorscale .darken40{grid-area:darken40;background:var(--color-darken40)}card-colorscale .darken60{grid-area:darken60;background:var(--color-darken60)}card-colorscale .darken80{grid-area:darken80;background:var(--color-darken80)}card-colorscale .base{display:flex;padding:var(--scale-padding);flex-direction:column;justify-content:flex-end;align-items: flex-start;line-height:1}@container (width<5rem) or (height<7.5rem){card-colorscale .label{display:none}}@container (width<8rem) or (height<12rem){card-colorscale .label small{display:none}}card-palette{display:flex;border-radius:var(--space-xs);border:1px solid var(--color-border-soft);padding:var(--space-s);aspect-ratio:4/5;overflow:hidden;background:var(--color-background);transition:box-shadow var(--transition-short)var(--easing-inout),border-color var(--transition-short)var(--easing-inout);flex-direction:column-reverse;justify-content:space-between}card-palette>h2{font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--line-height-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}card-palette>ol{display:grid;list-style:none;grid-template-columns:repeat(var(--grid-cols,2),1fr);aspect-ratio:1;gap:0;margin:0;padding:0}card-palette>ol>li{background-color:var(--cell-color,var(--color-background-alt));aspect-ratio:1;padding:0}form-colorgraph{--color-base:transparent;--step-size:1.25rem;display:flex;gap:var(--space-s);flex-direction:column}form-colorgraph .graph{--canvas-size:400px;position:relative;display:flex;user-select:none;transition:opacity var(--transition-medium)var(--easing-inout);width:100%}form-colorgraph .graph canvas{width:var(--canvas-size);height:var(--canvas-size);aspect-ratio:1;user-select:none}form-colorgraph .graph .knob{position:absolute;width:var(--input-height);height:var(--input-height);background-color:var(--color-base);border:1px solid var(--color-border);box-shadow:0 0 var(--space-xxs)2px var(--color-shadow);cursor:move;user-select:none;touch-action:none;transform:translate(calc(var(--input-height)/-2),calc(var(--input-height)/-2));border-radius:50%;top:0;left:0}form-colorgraph .graph .knob:focus-visible{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-colorgraph .graph ol{list-style:none;user-select:none;margin:0;padding:0}form-colorgraph .graph li{position:absolute;box-sizing:border-box;width:var(--step-size);height:var(--step-size);transform:translate(calc(var(--step-size)/-2),calc(var(--step-size)/-2));opacity:var(--opacity-dimmed);user-select:none;background-color:#0000;border:1px solid #000;border-radius:100%;top:0;left:0}form-colorgraph .graph .lighten80{background:var(--color-lighten80)}form-colorgraph .graph .lighten60{background:var(--color-lighten60)}form-colorgraph .graph .lighten40{background:var(--color-lighten40)}form-colorgraph .graph .lighten20{background:var(--color-lighten20)}form-colorgraph .graph .darken20{background:var(--color-darken20)}form-colorgraph .graph .darken40{background:var(--color-darken40)}form-colorgraph .graph .darken60{background:var(--color-darken60)}form-colorgraph .graph .darken80{background:var(--color-darken80)}form-colorgraph label{grid-area:label;display:block;font-size:var(--font-size-s);color:var(--color-text);margin:var(--space-xxs)0 0;opacity:var(--opacity-dimmed);transition:all var(--transition-short)var(--easing-inout)}form-colorgraph>.lightness{display:grid;align-items: center;column-gap:var(--space-xs);grid-template-areas:"label ." "input buttons" "error error";grid-template-columns:1fr auto;max-width:12rem}form-colorgraph>.lightness:focus-within label{opacity:var(--opacity-solid);margin:0 0 var(--space-xxs)}form-colorgraph>.chroma{display:grid;align-items: center;column-gap:var(--space-xs);grid-template-areas:"label ." "input buttons" "error error";grid-template-columns:1fr auto;max-width:12rem}form-colorgraph>.chroma:focus-within label{opacity:var(--opacity-solid);margin:0 0 var(--space-xxs)}form-colorgraph>.hue{display:grid;align-items: center;column-gap:var(--space-xs);grid-template-areas:"label ." "input buttons" "error error";grid-template-columns:1fr auto;max-width:12rem}form-colorgraph>.hue:focus-within label{opacity:var(--opacity-solid);margin:0 0 var(--space-xxs)}form-colorgraph input{display:inline-block;box-sizing:border-box;color:var(--color-text);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);text-align:right;height:var(--input-height);transition:all var(--transition-short)var(--easing-inout);appearance:textfield;-moz-appearance:textfield;background:0 0;border:none;border-bottom:1px solid #0000;width:100%}form-colorgraph input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}form-colorgraph input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}form-colorgraph input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-colorgraph input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-colorgraph input:hover{background:var(--color-input)}form-colorgraph input:focus{background:var(--color-input);border-bottom-color:var(--color-border)}form-colorgraph .input{grid-area:input;display:inline-flex;align-items: center}form-colorgraph .error{grid-area:error;margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s);color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-colorgraph .error:empty{display:none}form-colorgraph .slider{--slider-width:400px;--slider-height:40px;--track-width:360px;--track-height:8px;--track-offset:20px;position:relative;display:inline-block;height:var(--slider-height);user-select:none;transition:opacity var(--transition-medium)var(--easing-inout)}form-colorgraph .slider canvas{width:calc(100% - 2*var(--track-offset));height:var(--track-height);margin:calc(var(--track-offset) - var(--track-height)/2)var(--track-offset);user-select:none}form-colorgraph .thumb{position:absolute;top:calc(var(--slider-height)/2);left:var(--track-offset);width:var(--input-height);height:var(--input-height);background-color:var(--color-base);box-sizing:border-box;border:1px solid var(--color-border);box-shadow:0 0 var(--space-xxs)2px var(--color-shadow);cursor:ew-resize;user-select:none;touch-action:none;opacity:var(--opacity-dimmed);transform:translate(calc(var(--input-height)/-2),calc(var(--input-height)/-2));border-radius:50%}form-colorgraph .buttons{grid-area:buttons;display:flex;align-items: center}form-colorgraph .buttons button{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;cursor:pointer;transition:all var(--transition-short)var(--easing-inout);flex-grow:0}form-colorgraph .buttons button:disabled{opacity:var(--opacity-translucent)}form-colorgraph .buttons button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}form-colorgraph .buttons button:not(:disabled):hover{background-color:var(--color-secondary-hover)}form-colorgraph .buttons button:not(:disabled):active{background-color:var(--color-secondary-active)}form-colorgraph .buttons button:first-of-type{border-right-width:0;border-radius:50% 0 0 50%}form-colorgraph .buttons button:last-of-type{border-radius:0 50% 50% 0}form-colorgraph .buttons button:focus{z-index:1}@container (width>27rem){form-colorgraph{display:grid;grid-template-areas:"graph graph graph" "graph graph graph" "graph graph graph" "slider slider slider";grid-template-columns:4rem 1fr 1fr;gap:var(--space-s)var(--space-m);align-items: start;justify-items:end}form-colorgraph label{text-align:right}form-colorgraph .graph{grid-area:graph}form-colorgraph .slider{grid-area:slider}form-colorgraph .lightness{z-index:1;grid-row:2;grid-column:3}form-colorgraph .chroma{z-index:1;grid-row:3;grid-column:3}form-colorgraph .hue{z-index:1;grid-row:3;grid-column:2}}form-checkbox{display:inline-block;flex-grow:1}form-checkbox input:focus{outline:none;box-shadow:none}form-checkbox label{font-size:var(--font-size-s);border-radius:var(--space-xs)}form-checkbox:has(input:focus-visible) label{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-checkbox.checkbox label{display:inline-flex;gap:var(--space-s);line-height:var(--input-height);cursor:pointer;align-items: center}form-checkbox.checkbox label:before{display:inline-block;box-sizing:border-box;content:" ";text-align:center;width:var(--space-l);height:var(--space-l);border:1px solid var(--color-border);border-radius:var(--space-xs);background-color:var(--color-secondary);line-height:1.5}form-checkbox.checkbox label:hover:before{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}form-checkbox.checkbox label:active:before{background-color:var(--color-secondary-active)}form-checkbox.checkbox[checked] label:before{color:var(--color-text-inverted);background-color:var(--color-selection-selected);border-color:var(--color-selection-active);text-shadow:0 0 var(--space-xs)var(--color-success-active);content:"✔︎"}form-checkbox.checkbox[checked] label:hover:before{background-color:var(--color-selection-active)}form-checkbox.checkbox[checked] label:active:before{background-color:var(--color-selection-active)}form-checkbox.todo label{display:inline-flex;gap:var(--space-s);line-height:var(--input-height);cursor:pointer;align-items: center}form-checkbox.todo label:before{display:inline-block;box-sizing:border-box;content:" ";text-align:center;width:var(--space-l);height:var(--space-l);border:1px solid var(--color-border);border-radius:var(--space-xs);background-color:var(--color-secondary);line-height:1.5}form-checkbox.todo label:hover:before{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}form-checkbox.todo label:active:before{background-color:var(--color-secondary-active)}form-checkbox.todo[checked] label{opacity:var(--opacity-translucent)}form-checkbox.todo[checked] label span{text-decoration:line-through}form-checkbox.todo[checked] label:before{color:var(--color-text-inverted);background-color:var(--color-success);border-color:var(--color-success-active);text-shadow:0 0 var(--space-xs)var(--color-success-active);content:"✔︎"}form-checkbox.todo[checked] label:hover:before{background-color:var(--color-success-hover)}form-checkbox.todo[checked] label:active:before{background-color:var(--color-success-active)}form-checkbox.toggle label{--toggle-knob-size:calc(var(--space-l)*2);display:inline-flex;gap:var(--space-s);line-height:var(--input-height);cursor:pointer;align-items: center}form-checkbox.toggle label:before{display:inline-block;box-sizing:border-box;content:" ";width:calc(var(--space-l)*2);height:var(--space-l);padding-left:var(--space-l);border-radius:calc(var(--input-height)/2);background-color:var(--color-secondary);color:var(--color-text-inverted);border:1px solid var(--color-border);background-image:radial-gradient(circle,var(--color-input)35%,transparent 36%);background-position:left calc(-.5*var(--space-l))center;transition:background-color var(--transition-short)var(--easing-inout),border-color var(--transition-short)var(--easing-inout),background-position var(--transition-short)var(--easing-inout);background-repeat:no-repeat;flex-shrink:0;line-height:1.5}form-checkbox.toggle label:hover:before{background-color:var(--color-secondary-hover)}form-checkbox.toggle label:active:before{background-color:var(--color-secondary-active)}form-checkbox.toggle[checked] label:before{background-color:var(--color-selection-selected);border-color:var(--color-selection-active);content:"✔︎";text-shadow:0 0 var(--space-xs)var(--color-success-active);padding-left:var(--space-s);background-position:left calc(.5*var(--space-l))center}form-checkbox.toggle[checked] label:hover:before{background-color:var(--color-selection-active)}form-checkbox.toggle[checked] label:active:before{background-color:var(--color-selection-active)}form-textbox{width:100%}form-textbox label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox button{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox label{display:block;font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs)}form-textbox input{display:inline-block;box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%}form-textbox input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox textarea{display:inline-block;box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%}form-textbox textarea[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox textarea::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox input{height:var(--input-height)}form-textbox[clearable] .input{position:relative}form-textbox[clearable] .input input{padding-right:var(--input-height)}form-textbox[clearable] .input .clear{position:absolute;font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--color-input);background-color:var(--color-text-soft);width:calc(.6*var(--input-height));height:calc(.6*var(--input-height));margin:calc(.2*var(--input-height));border:0;border-radius:50%;padding:0;bottom:0;right:0}form-textbox[clearable] .input .clear:hover{background-color:var(--color-text)}form-textbox .error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .error:empty{display:none}form-textbox .description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .description:empty{display:none}form-textbox .error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-textbox .description{color:var(--color-text-soft)}form-textbox:focus-within label{opacity:var(--opacity-solid)}form-textbox:focus-within p{opacity:var(--opacity-solid)}form-textbox:focus-within button{opacity:var(--opacity-solid)}module-codeblock{--color-shiki-monokai-bg:#272822;--color-shadow:#0006;position:relative;display:block;margin:0 0 var(--space-l);background:var(--color-shiki-monokai-bg);border-radius:var(--space-s)}module-codeblock .meta{display:flex;padding:var(--space-xs)var(--space-s)0;font-size:var(--font-size-s);color:var(--color-neutral-200);margin-bottom:0}module-codeblock .language{text-transform:uppercase;margin-left:auto}module-codeblock pre{font-size:var(--font-size-s);padding-block:var(--space-s);border-radius:var(--space-s)}module-codeblock code{padding-inline:var(--space-s);display:block;line-height:var(--line-height-l)}module-codeblock .copy{position:absolute;right:var(--space-s);bottom:var(--space-s)}module-codeblock .overlay{display:none}module-codeblock[collapsed]{overflow:hidden;border-radius:var(--space-s)var(--space-s)0 0;max-height:12rem}module-codeblock[collapsed]:after{content:"";display:block;position:absolute;height:var(--space-m);background:linear-gradient(-135deg,var(--color-secondary).5rem,transparent 0)0 .5rem,linear-gradient(135deg,var(--color-secondary).5rem,var(--color-background)0)0 .5rem;background-color:var(--color-secondary);background-size:var(--space-m)var(--space-m);background-position:bottom;width:100%;bottom:0}module-codeblock[collapsed] .copy{display:none}module-codeblock[collapsed] .overlay{display:flex;position:absolute;color:var(--color-text);background:linear-gradient(transparent,var(--color-secondary));cursor:pointer;padding:var(--space-xs)var(--space-s);margin-bottom:var(--space-m);font-size:var(--font-size-s);transition:background-color var(--transition-short)var(--easing-inout);text-shadow:var(--color-background)1px 0 var(--space-xs);border:0;flex-direction:column-reverse;align-items: center;width:100%;height:6rem;bottom:0;left:0}module-codeblock[collapsed] .overlay:hover{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-codeblock[collapsed] .overlay:active{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-coloreditor{display:grid;grid-template-areas:"scale name" "scale value" "graph graph" "info info" "code code";grid-template-columns:4rem 1fr;gap:var(--space-m)}module-coloreditor>form-colorgraph{grid-area:graph;align-self: start}module-coloreditor>.scale{grid-area:scale;container-type:inline-size;width:4rem}module-coloreditor>.name{grid-area:name}module-coloreditor>.value{grid-area:value}module-coloreditor>.info{grid-area:info;display:flex;gap:var(--space-xs);flex-direction:column}module-coloreditor>module-codeblock{grid-area:code}@container (width>27rem){module-coloreditor{grid-template-areas:"scale name value" "graph graph graph" "info info info" "code code code";grid-template-columns:4rem 1fr 1fr;grid-template-rows:6rem 1fr auto auto}module-coloreditor>.name,module-coloreditor>.value{margin-block-start:var(--space-s)}}@container (width>45rem){module-coloreditor{grid-template-areas:"scale name value info" "graph graph graph info" "code code code info";grid-template-columns:4rem 1fr 1fr 1fr;grid-template-rows:6rem auto auto}}@container (width>60rem){module-coloreditor{grid-template-columns:4rem 2fr 2fr 3fr}}module-colorinfo{--swatch-size:var(--input-height);--color-fallback:transparent;display:block;gap:var(--space-l)}module-colorinfo summary{cursor:pointer;display:flex;padding:var(--space-xs);justify-content:space-between;align-items: center;height:auto;margin:0}module-colorinfo summary:after{content:"+";color:var(--color-text-soft);font-size:var(--font-size-m);padding-inline:var(--space-xs);line-height:1}module-colorinfo summary:hover{background-color:var(--color-background-alt)}module-colorinfo details[open] summary{margin-bottom:var(--space-xs)}module-colorinfo details[open] summary:after{content:"−"}module-colorinfo .summary{display:inline-flex;align-items: center;gap:var(--space-s);vertical-align:middle}module-colorinfo basic-colorswatch{flex-shrink:0}module-colorinfo .label{display:inline-block;line-height:1}module-colorinfo .warning{display:inline-block;font-size:var(--font-size-m)}module-colorinfo strong{display:block}module-colorinfo small{display:block}module-colorinfo strong{font-size:var(--font-size-m)}module-colorinfo small{color:var(--color-text-soft);font-size:var(--font-size-xs)}module-colorinfo .details{display:flex;gap:0 var(--space-m);margin-left:var(--space-l);flex-wrap:wrap}module-colorinfo dt{grid-column:1;color:var(--color-text-soft);display:inline-block;text-align:right;font-size:var(--font-size-s);font-weight:400;line-height:var(--line-height-s)}module-colorinfo dd{grid-column:2;display:inline-block;font-size:var(--font-size-s);line-height:var(--line-height-s);margin:0}module-colorinfo dl{margin:0 0 var(--space-s);display:inline-grid;grid-template-rows:auto auto;gap:var(--space-xxs)var(--space-xs)}module-colorinfo dl:last-of-type dt{display:none}module-paletteeditor{--swatch-size:3rem;display:flex;gap:var(--space-l);container-type:inline-size;flex-direction:column}module-paletteeditor>header{display:flex;align-items: start;gap:var(--space-m);flex-direction:column}module-paletteeditor>header>a{display:flex;gap:var(--space-xs);align-items: center}module-paletteeditor>header>a:before{content:"←";display:inline-block}module-paletteeditor>header>p.save-error{font-size:var(--font-size-s);color:var(--color-error)}module-paletteeditor>header>p.palette-name-readonly{display:none;font-weight:700}module-paletteeditor[data-readonly]>header>form-textbox{display:none}module-paletteeditor[data-readonly]>header>form-checkbox{display:none}module-paletteeditor[data-readonly]>header>p.save-error{display:none}module-paletteeditor[data-readonly]>header>p.palette-name-readonly{display:block}module-paletteeditor[data-readonly] .placeholder{display:none}module-paletteeditor[data-readonly] .remove{display:none}module-paletteeditor[data-readonly] module-coloreditor form-textbox{display:none}module-paletteeditor[data-readonly] form-colorgraph{display:none}module-paletteeditor>ol{display:flex;gap:var(--space-xs);list-style:none;flex-flow:wrap;margin:0;padding:0}module-paletteeditor>ol>li{display:inline-block;position:relative;padding:0}module-paletteeditor>ol>li>button.remove{display:none;position:absolute;border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text-soft);cursor:pointer;font-size:var(--font-size-s);width:calc(2*var(--space-s));height:calc(2*var(--space-s));top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));z-index:1;border-radius:50%;justify-content:center;align-items: center;padding:0 0 3px;line-height:1}module-paletteeditor>ol>li>button.remove:hover{background-color:var(--color-background-alt)}module-paletteeditor>ol>li.selected{outline:2px solid var(--color-selection);border-radius:var(--space-xxs)}module-paletteeditor>ol>li.selected>button.remove{display:flex}module-paletteeditor>ol>li.dragging{position:fixed;z-index:100;box-sizing:border-box;opacity:var(--opacity-dimmed);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow);background-color:#0000}module-paletteeditor>ol>li.drop-marker{border:2px dashed var(--color-selection);border-radius:var(--space-xxs);background-color:var(--color-selection-hover);padding:0}module-paletteeditor>ol>li>button{cursor:pointer;display:flex;border-radius:var(--space-xxs);border:none;padding:0}module-paletteeditor>ol>li.placeholder>button{width:var(--swatch-size);height:var(--swatch-size);border:2px dashed var(--color-border);font-size:var(--font-size-l);color:var(--color-text-soft);padding-bottom:var(--space-xxs);background:0 0;justify-content:center;align-items: center;line-height:1}module-paletteeditor>ol>li.placeholder>button:hover{background-color:var(--color-background-alt)}@container (width>27rem){module-paletteeditor header{display:grid;grid-template-columns:1fr 2fr 1fr;align-items: center}}module-login{display:block;padding:var(--space-xl)var(--space-l);max-width:24rem;margin-inline-start:auto;margin-inline-end:auto}module-login h1{font-size:var(--font-size-xxl);line-height:var(--line-height-s);margin:0 0 var(--space-l)}module-login form{display:flex;gap:var(--space-m);flex-direction:column}module-login .error.global{font-size:var(--font-size-s);color:var(--color-error);min-height:1lh}module-login .register-link{font-size:var(--font-size-s);color:var(--color-text-soft);margin:0}module-profile{display:block;padding:var(--space-xl)var(--space-l);max-width:32rem;margin-inline-start:auto;margin-inline-end:auto}module-profile h1{font-size:var(--font-size-xxl);line-height:var(--line-height-s);margin:0 0 var(--space-xl)}module-profile section{display:flex;gap:var(--space-m);padding-block:var(--space-l);border-top:1px solid var(--color-border);flex-direction:column}module-profile section h2{font-size:var(--font-size-l);margin:0}module-profile section form{display:flex;gap:var(--space-m);flex-direction:column}module-profile section .success{font-size:var(--font-size-s);color:var(--color-success);min-height:1lh}module-profile section .error.global{font-size:var(--font-size-s);color:var(--color-error);min-height:1lh}module-profile section.danger{border-color:var(--color-error)}module-profile section.danger h2{color:var(--color-error)}module-profile section.danger p.warning{font-size:var(--font-size-s);color:var(--color-text-soft);margin:0}module-register{display:block;padding:var(--space-xl)var(--space-l);max-width:24rem;margin-inline-start:auto;margin-inline-end:auto}module-register h1{font-size:var(--font-size-xxl);line-height:var(--line-height-s);margin:0 0 var(--space-l)}module-register form{display:flex;gap:var(--space-m);flex-direction:column}module-register .error.global{font-size:var(--font-size-s);color:var(--color-error);min-height:1lh}module-register .login-link{font-size:var(--font-size-s);color:var(--color-text-soft)}module-palettechooser{display:block;padding:var(--space-l)}module-palettechooser>h1{margin:0 0 var(--space-l);font-size:var(--font-size-xxxl);line-height:var(--line-height-s)}module-palettechooser>ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--space-m);list-style:none;margin:0 0 var(--space-l);padding:0}module-palettechooser>ol>li{position:relative}module-palettechooser>ol>li>a{display:block;text-decoration:none;border-radius:var(--space-xs)}module-palettechooser>ol>li>a:hover card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-palettechooser>ol>li>a:focus-visible card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-palettechooser>ol>li>button.remove{position:absolute;top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text-soft);cursor:pointer;width:calc(2*var(--space-s));height:calc(2*var(--space-s));padding:0 0 var(--space-xxs);display:none;line-height:1;font-size:var(--font-size-s);z-index:1;border-radius:50%;justify-content:center;align-items: center}module-palettechooser>ol>li>button.remove:hover{background-color:var(--color-background-alt)}module-palettechooser>ol>li:hover>button.remove{display:block}module-palettechooser>ol>li:focus-within>button.remove{display:block}module-palettechooser>ol>li.placeholder>button{aspect-ratio:4/5;border:2px dashed var(--color-border);border-radius:var(--space-xs);display:flex;font-size:var(--font-size-l);color:var(--color-text-soft);cursor:pointer;padding-bottom:var(--space-xxs);background:0 0;justify-content:center;align-items: center;width:calc(100% - 4px);line-height:1}module-palettechooser>ol>li.placeholder>button:hover{background-color:var(--color-background-alt)}module-palettechooser p.error{font-size:var(--font-size-s);color:var(--color-error)}module-palettechooser .user-nav{display:flex;align-items: center;gap:var(--space-s);margin-top:var(--space-m);font-size:var(--font-size-s)}module-publicgallery{display:block;padding:var(--space-l)}module-publicgallery>h1{margin:0 0 var(--space-m);font-size:var(--font-size-xxxl);line-height:var(--line-height-s)}module-publicgallery>nav.auth-nav{display:flex;align-items: center;gap:var(--space-m);margin:0 0 var(--space-l);font-size:var(--font-size-s)}module-publicgallery>nav.auth-nav .for-guest{display:none}module-publicgallery>nav.auth-nav .for-user{display:none}module-publicgallery[data-guest]>nav.auth-nav .for-guest{display:revert}module-publicgallery:not([data-guest])>nav.auth-nav .for-user{display:revert}module-publicgallery>p.loading{font-size:var(--font-size-s);color:var(--color-text-soft);margin-bottom:var(--space-l)}module-publicgallery>p.error{font-size:var(--font-size-s);color:var(--color-error);margin-bottom:var(--space-l)}module-publicgallery>p.empty{font-size:var(--font-size-s);color:var(--color-text-soft);margin-bottom:var(--space-l)}module-publicgallery>ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--space-m);list-style:none;margin:0 0 var(--space-l);padding:0}module-publicgallery>ol>li>a{display:block;text-decoration:none;border-radius:var(--space-xs)}module-publicgallery>ol>li>a:hover card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-publicgallery>ol>li>a:focus-visible card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-publicgallery>nav.pagination{display:flex;align-items: center;gap:var(--space-m)}module-publicgallery>nav.pagination>span.page{font-size:var(--font-size-s);color:var(--color-text-soft)}module-scrollarea{display:block;position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch}module-scrollarea:before{content:"";position:sticky;display:block;height:var(--space-m);opacity:0;pointer-events:none;transition:opacity var(--transition-short);z-index:1;width:100%}module-scrollarea:after{content:"";position:sticky;display:block;height:var(--space-m);opacity:0;pointer-events:none;transition:opacity var(--transition-short);z-index:1;width:100%}module-scrollarea:before{background:linear-gradient(180deg,var(--color-shadow),transparent);top:0}module-scrollarea:after{background:linear-gradient(0deg,var(--color-shadow),transparent);bottom:0}module-scrollarea.overflow-start:before{opacity:1}module-scrollarea.overflow-end:after{opacity:1}module-scrollarea[orientation=horizontal]{overflow-x:auto;overflow-y:clip}module-scrollarea[orientation=horizontal]:before{width:var(--space-m);height:1000vh;margin-block-end:-1000vh}module-scrollarea[orientation=horizontal]:after{width:var(--space-m);height:1000vh;margin-block-end:-1000vh}module-scrollarea[orientation=horizontal]:before{background:linear-gradient(90deg,var(--color-shadow),transparent);left:0}module-scrollarea[orientation=horizontal]:after{left:calc(100% - var(--space-m));background:linear-gradient(270deg,var(--color-shadow),transparent)}context-auth{display:contents}context-router{display:contents}section-main{display:block;padding:var(--space-l);max-width:var(--application-max-width);margin-inline-start:auto;margin-inline-end:auto}