:root{--application-max-width:72rem;--content-max-width:48rem;--narrow-max-width:24rem;--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}[data-accent=indigo]{--accent-bg:oklch(.37 .15 293);--accent-text:white}[data-accent=purple]{--accent-bg:oklch(.44 .15 323);--accent-text:white}[data-accent=rouge]{--accent-bg:oklch(.51 .15 353);--accent-text:white}[data-accent=rose]{--accent-bg:oklch(.58 .15 23);--accent-text:white}[data-accent=orange]{--accent-bg:oklch(.65 .15 53);--accent-text:white}[data-accent=gold]{--accent-bg:oklch(.72 .15 83);--accent-text:black}[data-accent=linden]{--accent-bg:oklch(.79 .15 113);--accent-text:black}[data-accent=green]{--accent-bg:oklch(.68 .15 143);--accent-text:white}[data-accent=turquoise]{--accent-bg:oklch(.72 .15 173);--accent-text:black}[data-accent=cyan]{--accent-bg:oklch(.76 .15 203);--accent-text:black}[data-accent=sky]{--accent-bg:oklch(.64 .15 233);--accent-text:white}[data-accent=blue]{--accent-bg:oklch(.48 .15 263);--accent-text:white}@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);display:flex;flex-direction:column;justify-content:space-between;min-height:100dvh;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-avatar{--avatar-size:24px;display:inline-flex;width:var(--avatar-size);height:var(--avatar-size);overflow:hidden;background:var(--accent-bg,oklch(.48 .15 263));color:var(--accent-text,white);font-size:calc(var(--avatar-size)*.5);font-weight:var(--font-weight-bold);user-select:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;line-height:1}basic-avatar>img{object-fit:cover;object-position:center;width:100%;height:100%}basic-avatar>span{text-transform:uppercase}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.icon{--scale-padding:0}card-colorscale.icon ol{height:1.5rem}card-colorscale.icon .label{display:none}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-input);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,transparent);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);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%;padding:0}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:not(:disabled):hover{background:var(--color-input)}form-colorgraph input:not(:disabled):focus{background:var(--color-input);border-bottom-color:var(--color-border);padding:var(--space-xs)var(--space-xxs)}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}form-colorgraph[readonly] .knob{cursor:default}form-colorgraph[readonly] .thumb{cursor:default}form-colorgraph[readonly]>.lightness:focus-within label{opacity:var(--opacity-dimmed);margin:0}form-colorgraph[readonly]>.chroma:focus-within label{opacity:var(--opacity-dimmed);margin:0}form-colorgraph[readonly]>.hue:focus-within label{opacity:var(--opacity-dimmed);margin:0}form-colorgraph[readonly] .buttons button{display:none}@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)}form-textbox[readonly] label{margin-bottom:0}form-textbox[readonly] .description{margin-top:var(--space-xxs)}form-textbox[readonly] input{background:0 0;border-bottom:0;padding:0}form-textbox[readonly] textarea{background:0 0;border-bottom:0;padding:0}module-about{display:block;max-width:var(--content-max-width);margin-inline-start:auto;margin-inline-end:auto}module-about h1{font-size:var(--font-size-xl);line-height:var(--line-height-s);margin:0 0 var(--space-l)}module-about p{margin:0 0 var(--space-s);line-height:var(--line-height-m)}module-about ul{gap:var(--space-xs)}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>h1{font-size:var(--font-size-xl);margin:0}module-paletteeditor>header>p.save-error{font-size:var(--font-size-s);color:var(--color-error)}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)}module-paletteeditor[readonly]>header>form-textbox{display:none}module-paletteeditor[readonly]>header>form-checkbox{display:none}module-paletteeditor[readonly]>header>p.save-error{display:none}module-paletteeditor[readonly] .placeholder{display:none}module-paletteeditor[readonly]>ol>li.selected button.remove{display:none}@container (width>27rem){module-paletteeditor header{display:grid;grid-template-columns:2fr 1fr;align-items: end}}module-login{display:block;max-width:var(--narrow-max-width);margin-inline-start:auto;margin-inline-end:auto}module-login h1{font-size:var(--font-size-xl);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;margin:0}module-login .error.global:empty{display:none}module-login .register-link{font-size:var(--font-size-s);color:var(--color-text-soft);margin:0}module-profile{display:block;max-width:var(--narrow-max-width);margin-inline-start:auto;margin-inline-end:auto}module-profile h1{font-size:var(--font-size-xl);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 .avatar-controls{display:flex;align-items: center;gap:var(--space-m)}module-profile .avatar-controls basic-avatar{--avatar-size:48px}module-profile .avatar-actions{display:flex;align-items: flex-start;gap:var(--space-s);flex-direction:column}module-profile .avatar-actions .hint{font-size:var(--font-size-xs);color:var(--color-text-soft);margin:0}module-profile .avatar-actions .avatar-error{font-size:var(--font-size-s);color:var(--color-error);margin:0}module-profile .accent-grid{display:flex;gap:var(--space-s);flex-wrap:wrap}module-profile .accent-grid label{cursor:pointer;position:relative}module-profile .accent-grid label input[type=radio]{opacity:0;position:absolute;width:0;height:0;margin:0}module-profile .accent-grid label .swatch{display:block;width:var(--space-xl);height:var(--space-xl);background:var(--accent-bg,oklch(.48 .15 263));outline:2px solid #0000;outline-offset:2px;transition:outline-color var(--transition-short)var(--easing-inout);border-radius:50%}module-profile .accent-grid label:hover .swatch{outline-color:var(--color-text-soft)}module-profile .accent-grid label input:checked~.swatch{outline-color:var(--color-primary);outline-width:3px}module-profile .accent-grid label input:focus-visible~.swatch{outline-color:var(--color-primary)}module-profile details.danger{padding-top:var(--space-l);border-top:1px solid var(--color-error)}module-profile details.danger>summary{cursor:pointer;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);color:var(--color-error);list-style:none;padding:var(--space-xs)0}module-profile details.danger>summary::-webkit-details-marker{display:none}module-profile details.danger>.danger-body{display:flex;gap:var(--space-xl);padding-top:var(--space-l);flex-direction:column}module-profile details.danger .danger-item{display:flex;gap:var(--space-m);flex-direction:column}module-profile details.danger .danger-item h2{font-size:var(--font-size-l);color:var(--color-error);margin:0}module-profile details.danger .danger-item form{display:flex;gap:var(--space-m);flex-direction:column}module-profile details.danger .danger-item p.warning{font-size:var(--font-size-s);color:var(--color-text-soft);margin:0}module-register{display:block;max-width:var(--narrow-max-width);margin-inline-start:auto;margin-inline-end:auto}module-register h1{font-size:var(--font-size-xl);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;margin:0}module-register .error.global:empty{display:none}module-register .login-link{font-size:var(--font-size-s);color:var(--color-text-soft)}module-toast{position:fixed;z-index:20;width:min(20rem,calc(100vw - 2*var(--space-m)));pointer-events:none;top:3rem}module-toast:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-m)}module-toast:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-m)}module-toast:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:var(--space-m)}module-toast:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-m)}module-toast:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-m)}module-toast:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--space-m)}module-toast ol{list-style:none;gap:var(--space-xs);margin:0;padding:0}module-toast .toast{display:flex;align-items: flex-start;gap:var(--space-s);padding:var(--space-s)var(--space-s)var(--space-s)var(--space-m);border-radius:var(--space-xs);border:1px solid var(--color-border-soft);background-color:var(--color-background);box-shadow:0 var(--space-xs)var(--space-m)var(--color-shadow);pointer-events:auto}module-toast .toast.toast--success{border-color:var(--color-success)}module-toast .toast.toast--error{border-color:var(--color-error)}module-toast .toast-message{font-size:var(--font-size-s);line-height:var(--line-height-m);flex:1;margin:0}module-toast .toast-close{cursor:pointer;padding:0 var(--space-xxs);font-size:var(--font-size-m);line-height:var(--line-height-xs);color:var(--color-text-soft);border-radius:var(--space-xxs);background:0 0;border:none;flex-shrink:0}module-toast .toast-close:hover{color:var(--color-text);background:var(--color-secondary-hover)}module-legal{display:block;max-width:var(--content-max-width);margin-inline-start:auto;margin-inline-end:auto}module-legal h1{font-size:var(--font-size-xl);line-height:var(--line-height-s);margin:0 0 var(--space-l)}module-legal h2{font-size:var(--font-size-l);line-height:var(--line-height-s);margin:0 0 var(--space-m)}module-legal address{font-style:normal;line-height:var(--line-height-s);margin:0 0 var(--space-m)}module-legal p{margin:0 0 var(--space-s);line-height:var(--line-height-m)}module-legal dl{gap:var(--space-xs)var(--space-m);line-height:var(--line-height-m)}module-legal dt{color:var(--color-text-soft);font-weight:400}module-palettechooser{display:block}module-palettechooser>h1{font-size:var(--font-size-xl);line-height:var(--line-height-s);margin:0 0 var(--space-l)}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-publicgallery{display:block}module-publicgallery>h1{font-size:var(--font-size-xl);line-height:var(--line-height-s);margin:0 0 var(--space-m)}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{display:flex;gap:var(--space-xxs);flex-direction:column}module-publicgallery>ol>li>a.palette-link{display:block;text-decoration:none;border-radius:var(--space-xs)}module-publicgallery>ol>li>a.palette-link: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.palette-link:focus-visible card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-publicgallery>ol>li>p.byline{font-size:var(--font-size-xs);color:var(--color-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}module-publicgallery>ol>li>p.byline>a{color:inherit}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-userprofile{display:block}module-userprofile>.profile-header{display:flex;align-items: center;gap:var(--space-m);margin-bottom:var(--space-xl)}module-userprofile>.profile-header>basic-avatar{--avatar-size:48px}module-userprofile>.profile-header>.profile-info>h1{font-size:var(--font-size-xl);line-height:var(--line-height-s);margin:0 0 var(--space-xxs)}module-userprofile>.profile-header>.profile-info>p.joined{font-size:var(--font-size-s);color:var(--color-text-soft);margin:0}module-userprofile>p.error-header{font-size:var(--font-size-s);color:var(--color-error);margin-bottom:var(--space-l)}module-userprofile>p.loading{font-size:var(--font-size-s);color:var(--color-text-soft);margin-bottom:var(--space-l)}module-userprofile>h2.palettes-heading{font-size:var(--font-size-l);margin:0 0 var(--space-m)}module-userprofile>p.error-palettes{font-size:var(--font-size-s);color:var(--color-error);margin-bottom:var(--space-l)}module-userprofile>p.empty{font-size:var(--font-size-s);color:var(--color-text-soft);margin-bottom:var(--space-l)}module-userprofile>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-userprofile>ol>li>a{display:block;text-decoration:none;border-radius:var(--space-xs)}module-userprofile>ol>li>a:hover card-palette{border-color:var(--color-border);box-shadow:0 var(--space-xxs)var(--space-s)var(--color-shadow)}module-userprofile>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-userprofile>nav.pagination{display:flex;align-items: center;gap:var(--space-m)}module-userprofile>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-header{display:block;border-bottom:1px solid var(--color-border-soft);background-color:var(--color-background-alt)}section-header header{display:flex;justify-content:space-between;align-items: center;gap:var(--space-l);padding:var(--space-xs)var(--space-m);max-width:var(--application-max-width);margin-inline-start:auto;margin-inline-end:auto}section-header summary{cursor:pointer;list-style:none;height:auto}section-header summary::-webkit-details-marker{display:none}section-header summary basic-avatar{--avatar-size:24px}section-header details.user-menu{position:relative}section-header details.user-menu[open] summary{background-color:var(--color-secondary-active);margin-block-end:0}section-header nav{display:flex;align-items: center;gap:var(--space-xs);margin:0}section-header nav a{display:inline-block;padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);border-radius:var(--space-xs);text-align:start;color:var(--color-link);background-color:#0000;border:none}section-header nav a:hover{background:var(--color-secondary-hover)}section-header nav summary{display:inline-block;padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);border-radius:var(--space-xs);text-align:start;color:var(--color-link);background-color:#0000;border:none}section-header nav summary:hover{background:var(--color-secondary-hover)}section-header nav button{display:inline-block;padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);border-radius:var(--space-xs);text-align:start;color:var(--color-link);background-color:#0000;border:none}section-header nav button:hover{background:var(--color-secondary-hover)}section-header nav summary{display:inline-flex;gap:var(--space-xxs);align-items: center}section-header nav a.active{background:color-mix(in srgb,var(--color-selection)20%,transparent);color:color-mix(in srgb,var(--color-selection)20%,currentColor)}section-header a.home{font-weight:var(--font-weight-bold);display:inline-flex;gap:var(--space-xxs);align-items: center}section-header .for-guest{display:none}section-header[guest] .for-guest{display:revert}section-header[guest] .for-user{display:none}section-header .menu{position:absolute;top:calc(100% + var(--space-xxs));display:flex;gap:var(--space-xs);padding:var(--space-xs);background:var(--color-background);border:1px solid var(--color-border-soft);border-radius:var(--space-xs);box-shadow:0 var(--space-xs)var(--space-m)var(--color-shadow);z-index:10;flex-direction:column;min-width:12rem}section-header .menu:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}section-header .menu:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}section-header .menu:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}section-header .menu:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}section-header .menu:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}section-header .menu:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}section-header .menu hr{border:none;border-top:1px solid var(--color-border-soft);margin:0}section-footer{display:block;border-top:1px solid var(--color-border-soft);background-color:var(--color-background-alt)}section-footer footer{display:flex;justify-content:space-between;align-items: center;gap:var(--space-l);padding:var(--space-xs)var(--space-m);max-width:var(--application-max-width);margin-inline-start:auto;margin-inline-end:auto}section-footer p{font-size:inherit;margin:0}section-footer nav{display:flex;align-items: center;gap:var(--space-xs);margin:0}section-footer nav a{display:inline-block;padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);border-radius:var(--space-xs);text-align:start;color:var(--color-link);background-color:#0000;border:none}section-footer nav a:hover{background:var(--color-secondary-hover)}section-footer nav a.active{background:color-mix(in srgb,var(--color-selection)20%,transparent);color:color-mix(in srgb,var(--color-selection)20%,currentColor)}section-main{display:block;padding:var(--space-l);width:min(calc(100% - 2*var(--space-l)),var(--application-max-width));flex-grow:1;margin-inline-start:auto;margin-inline-end:auto}