.swatch-container{grid-template-rows:repeat(var(--rows), 1fr);grid-template-columns:repeat(var(--columns), 1fr);grid-column:7/13;gap:1px;display:grid}.swatch{cursor:pointer;background-color:var(--color);will-change:background-color;border-radius:1px;width:100%;height:100%}.palette-details{grid-template-rows:repeat(var(--items), 1fr);grid-column:7/13;grid-auto-columns:1fr 1fr;grid-auto-flow:column;display:grid;container:palette-details/size}.palette-detail{height:calc(100cqh / var(--items));padding:var(--box-padding);color:var(--color);letter-spacing:-.03px;cursor:pointer;background-color:var(--bg);opacity:0;flex-direction:column;justify-items:center;gap:.25em;display:flex}.palette-detail p:first-child{font-weight:600}.palette-detail p:last-child{font-size:var(--small)}.palette-details:has(.palette-detail:nth-child(24)) .palette-detail{padding:.5em}.palette-details:has(.palette-detail:nth-child(24)) .palette-detail p{font-size:var(--x-small)}.circle{flex-shrink:0;align-items:center;display:flex}.circle svg{display:block}.circle text{text-transform:uppercase;fill:#ddd;padding-block-end:5px;font-size:14px}.circle-item{will-change:cx, cy, fill}.palette-display{flex:1}.palette-name{height:32px;color:var(--white);justify-content:center;align-items:center;gap:.3em;font-size:1.2rem;font-weight:400;line-height:1.4;display:flex}.palette-name svg{flex-shrink:0}.circle-container{aspect-ratio:1;width:130px;margin-inline:auto}.palette-type,.palette-style{text-overflow:ellipsis;color:var(--text-muted);text-transform:uppercase;white-space:nowrap;font-size:.8rem;font-weight:400;line-height:1.4;overflow:hidden}.current-color-display{grid-column:1/7}.current-color-display .header-container{flex:1;align-items:start;gap:2rem;width:100%;display:flex}.current-color-display .header{width:50%;min-width:200px;height:50px;color:var(--white);margin-block-end:1rem}.current-color-display h1{white-space:nowrap;font-size:max(2.45cqi,24px);font-weight:400}.color-dot{background-color:var(--color);border-radius:1px;flex-shrink:0;width:1rem;height:100%}.color-details{gap:1px var(--spacing-05);width:100%;color:var(--text-muted);text-transform:uppercase;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(3,1fr);grid-auto-flow:column;font-size:12px;display:grid}.color-detail{white-space:nowrap;align-items:center;gap:.5em;line-height:1.4;display:flex;overflow:hidden}.color-detail svg{flex-shrink:0}.color-detail p[data-value]{text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;cursor:pointer;overflow:hidden}.color-text{gap:3px;display:flex}.color-label-wide,.color-label{width:50px}svg+.color-text>.color-label{width:30px}.lch .lch,.oklch .oklch,.lab .lab,.oklab .oklab,.p3 .p3,.hsl .hsl,.rgb .rgb,.hex .hex{color:var(--white)}@container synth (width<600px){.color-details{display:none}.current-color-display .header{min-width:30cqi}.current-color-display h1{font-size:5cqi}.current-color-display p{font-size:3cqi}}.button-container.inverse{--icon-gradient-center:#969696;--icon-gradient-top:#e2e2e4}.button-container.inverse button{color:var(--inverse-element);background-image:var(--inverse-button-background)}[data-mode=dark] .button-container.inverse{--icon-gradient-top:#000;--icon-gradient-center:#8b8b8d}.button-container{background-color:var(--button-container);min-width:40px;height:40px;box-shadow:none;border:2px solid #0000;border-radius:1px;justify-content:center;align-items:center;display:flex}.button-container:has(button:active,button.active){box-shadow:var(--button-active-shadow)}.button-container button{width:100%;height:100%;font-size:var(--x-small);color:var(--element);text-transform:uppercase;background-image:var(--button-background);box-shadow:var(--button-shadow);border-radius:6px;justify-content:center;align-items:center;display:flex;position:relative}.button-container button:active,.button-container button.active{filter:brightness(.9);translate:0 .5px;box-shadow:inset 0 1px 5px #000000e2}.color-space-selector{grid-column:1/7}.color-space-selector-buttons{gap:var(--spacing-02);grid-template-columns:repeat(8,minmax(0,1fr));display:grid}.color-space-selector-header{gap:var(--spacing-02);width:90%;color:var(--element-dim);text-transform:uppercase;justify-content:center;align-items:center;margin-block-end:var(--spacing-03);margin-inline:auto;font-size:.6rem;font-weight:400;line-height:1.4;display:flex}.color-space-selector-header p{text-wrap:nowrap;width:max-content}.divider{background-color:var(--element-dim);width:100%;height:1px;position:relative}.divider:first-child:before{width:1px;height:var(--spacing-03);content:"";background-color:var(--element-dim);position:absolute;top:0;left:0}.divider:last-child:before{width:1px;height:var(--spacing-03);content:"";background-color:var(--element-dim);position:absolute;top:0;right:0}@container synth (width<900px){.color-space-selector{grid-area:1/1/auto/-1}}@container synth (width<600px){.color-space-selector{display:none}}.display-info-container{height:40px;padding:var(--spacing-02);font-size:var(--x-small);color:#fff;text-transform:uppercase;background-color:#000;border-radius:4px;grid-area:5/span 2/auto/-1}.display-info-container p{text-box:trim-both cap alphabetic}.display-info-default{gap:var(--spacing-03);justify-content:center;align-items:center;height:100%;display:flex}.display-info-message{gap:var(--spacing-03);height:100%;padding-inline:var(--spacing-04);text-transform:none;letter-spacing:.1px;justify-content:center;align-items:center;font-weight:600;display:flex}.display-info-success{color:var(--success)}.display-info-error{color:var(--error)}.display-info-info{color:var(--warning)}@container synth (width<900px){.display-info-container{grid-area:6/11/auto/-1}.display-info-default>div:nth-child(2){display:none}}@container synth (width<600px){.display-info-container{display:none}}.synth-display{min-height:269px;padding:var(--box-padding);background-color:#000}@container synth (width<900px){.synth-display.col-12{grid-template-columns:repeat(6,minmax(0,1fr))}.synth-display.col-12 .current-color-display,.synth-display.col-12 .swatch-container{grid-column:1/-1}.synth-display.col-12 .header-container{margin-bottom:var(--base-gap)}.synth-display.col-12 .swatch-container{height:150px}}.slider-group{grid-template-columns:subgrid;gap:var(--base-gap);will-change:clip-path;grid-area:3/1/6/7;display:grid;transform:translateZ(0)}.slider{grid-column:1/7}.slider label{text-transform:uppercase;font-size:12px}.slider:last-child{padding-block-end:3px}.slider input[type=range]{appearance:none;cursor:pointer;background:0 0;border:none;outline:none;width:100%;padding:0}.slider input[type=range]::-webkit-slider-runnable-track{border:1px solid var(--slider-border-color);height:10px;box-shadow:inset 0 2px var(--slider-shadow);border-radius:1000px}.slider input[type=range]::-moz-range-track{border:1px solid var(--slider-border-color);height:10px;box-shadow:inset 0 2px var(--slider-shadow);border-radius:1000px}.slider input[type=range]::-webkit-slider-thumb{--shadow-color:var(--slider-shadow-color);appearance:none;border-radius:50%;width:18px;height:18px;margin-top:-5px;position:relative}.slider input[type=range]::-moz-range-thumb{--shadow-color:var(--slider-shadow-color);appearance:none;border-radius:50%;width:18px;height:18px;margin-top:-5px;position:relative}.slider-inputs{color:var(--white);background:var(--black);border-radius:4px;justify-content:space-between;align-items:center;gap:2px;padding:2px;display:flex}.slider-inputs button{height:16px}.slider-inputs input{width:4em;color:var(--white);text-align:center;background:0 0;border:none;outline:none;padding:0;font-size:10px}@container synth (width<900px){.slider-group{grid-area:4/1/7/9}.slider{grid-column:1/-1}}@container synth (width<600px){.slider-group{grid-area:3/1/auto/-1}}.input-color-container{gap:var(--base-gap);grid-area:2/1/auto/7;display:flex}.input-color-container-input{width:100%;height:40px;color:var(--input-color);background-color:var(--input-bg);grid-column:span 4;font-size:1.2rem;box-shadow:inset 2px 2px .5em #00000026,inset -2px -2px .5em #ffffff26}@container synth (width<900px){.input-color-container{grid-area:3/1/auto/9}}@container synth (width<600px){.input-color-container{grid-area:2/1/auto/-1}.input-color-container-input{font-size:1rem}}.knobs{grid-template-rows:subgrid;grid-template-columns:subgrid;grid-area:2/7/7/9;display:grid}@container synth (width<900px){.knobs{display:none}}.knob-container{flex-direction:column;grid-row:span 2;justify-content:center;align-items:center;gap:10px;display:flex}.knob-outer{aspect-ratio:1;cursor:ns-resize;background:var(--knob-background);width:100%;max-width:60px;box-shadow:var(--knob-shadow);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.knob-outer.dragging{cursor:ns-resize}.knob-inner{aspect-ratio:1;background:var(--knob-inner-background);border-radius:50%;width:30px;position:relative}.knob-inner-shadow{aspect-ratio:1;width:30px;box-shadow:var(--knob-inner-shadow);border-radius:50%;position:absolute;inset:0;translate:50% 50%}.knob-display{font-size:var(--x-small);color:#fff;background:#000;border-radius:5px;justify-content:center;align-items:center;gap:5px;padding:4px;display:flex}.knob-display input{color:#fff;padding:0}.knob-indicator{--radius:10px;--dot:4px;top:calc(50% - var(--dot) / 2);left:calc(50% - var(--dot) / 2);width:var(--dot);height:var(--dot);background:var(--knob-indicator-background);transform-origin:50%;translate:calc(sin(var(--angle) * -1) * var(--radius)) calc(cos(var(--angle)) * var(--radius));border-radius:50%;position:absolute}.palette-style-container{gap:var(--base-gap);grid-column:9/13;display:flex}.palette-style-container>*{flex:1}@container synth (width<900px){.palette-style-container{grid-area:3/9/auto/-1}}@container synth (width<600px){.palette-style-container{display:none}}.palette-tool-container{grid-template-columns:subgrid;gap:var(--base-gap);grid-area:3/9/auto/13;display:grid}@container synth (width<900px){.palette-tool-container{grid-area:4/9/auto/-1}}@container synth (width<600px){.palette-tool-container{display:none}}.synth-brand{padding:var(--box-padding);align-items:center}.synth-brand .brand{font-family:var(--font-brand);color:var(--element);text-transform:uppercase;grid-column:1/7;font-size:1.25rem;font-weight:400}.synth-brand .brand span{font-weight:700}.vibrancy-module{background:linear-gradient(#fff,#494949);border:2px solid #000;border-radius:1000px;grid-column:7/13;height:10px;padding:1px;position:relative;box-shadow:inset 0 -2px 0 5px #0000002a}.vibrancy-module-inner{border-radius:1000px;width:100%;height:100%;padding:1px;box-shadow:inset 1px 1px 1px .5px #00000049}.vibrancy-module-blur{opacity:.75;filter:blur(5px)brightness(2.5);border-radius:1000px;width:100%;height:100%;position:absolute;inset:0}@container synth (width<600px){.synth-brand .brand{font-size:3.5cqi}}.bg{background-image:var(--bg);place-items:center;min-height:100svh;padding:1vw 1.5vw 1.5vw;display:grid}.synth-container{background-image:url(/noise.svg), var(--synth-body);border-radius:var(--radius);width:90vw;max-width:1180px;box-shadow:inset 0 1px 1px #eaeaf2, var(--shadow-elevation-high);background-size:200px 200px,auto;container:synth/inline-size}[data-mode=dark] .synth-container{box-shadow:inset 0 1px 1px #524f63, var(--shadow-elevation-high)}.synth-body{gap:var(--spacing-08);padding:var(--box-padding);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@container synth (width<900px){.synth-body{padding-block:var(--spacing-07)}}@font-face{font-family:Arimo Variable;font-style:normal;font-weight:400 700;src:url(/assets/arimo-latin-wght-normal-B-VRLyOh.woff2)format("woff2-variations");font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Orbitron Variable;font-style:normal;font-weight:400 900;src:url(/assets/orbitron-latin-wght-normal-Du7j2Vp2.woff2)format("woff2-variations");font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}html{font-family:Arimo Variable,Helvetica,Helvetica Neue,sans-serif}body{color:var(--element);background-color:var(--surface-2)}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.3}button{color:inherit;font-family:inherit}*,:after,:before{box-sizing:border-box;margin:0;padding:0}button{cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}input,textarea{padding:var(--button-padding);font-family:inherit;font-size:inherit;color:var(--element);background-color:var(--surface-3);border:1px solid var(--border-1);outline:none;line-height:1}input:hover,textarea:hover{border-color:var(--border-2)}input:focus-visible,textarea:focus-visible{border-color:var(--border-3)}a{color:inherit;text-decoration:none}:root{--spacing-01:.125rem;--spacing-02:.25rem;--spacing-03:.5rem;--spacing-04:.75rem;--spacing-05:1rem;--spacing-06:1.5rem;--spacing-07:2rem;--spacing-08:2.5rem;--spacing-09:3rem;--spacing-10:4rem;--spacing-11:5rem;--spacing-12:6rem;--spacing-13:10rem;--gap:var(--spacing-06);--base-gap:20px;--button-padding:.4em .8em;--box-padding:1rem;--space-after:2rem;--max-viewport:65rem;--font-brand:"Orbitron Variable", system-ui, sans-serif;--letter-spacing:.3px;--small:.833rem;--x-small:min(.75rem, 12px);--radius:12px;--radius-sm:2px;--border-color:#80808073;--border:#9f9cb0bf;--white:#fff;--black:#000;--text-muted:#cbcbcb;--dimmed:#333;--success:oklch(100% .4 150);--error:oklch(100% .4 21);--warning:orange;--element:#23222a;--element-dim:#17171c99;--bg:linear-gradient(to bottom, #f8f8f8, #e3e0dc);--paper:#f8f8f8;--synth-body:linear-gradient(to bottom in oklab, #e3e0dc, #afaeac);--icon-element:linear-gradient(to bottom, #0d0d0d, #e3e0dc, #0d0d0d);--shadow-color:0 2% 32%;--shadow-md:.3px .5px .7px var(--shadow-color), .8px 1.6px 2px -.8px var(--shadow-color), 2.1px 4.1px 5.2px -1.7px var(--shadow-color), 5px 10px 12.6px -2.5px var(--shadow-color);--shadow-sm:.3px .5px .7px var(--shadow-color), .4px .8px 1px -1.2px var(--shadow-color), 1px 2px 2.5px -2.5px var(--shadow-color);--shadow-elevation-high:0px .5px .6px hsl(var(--shadow-color) / 34%), 0px 2.9px 3.3px -.4px hsl(var(--shadow-color) / 34%), 0px 5.5px 6.2px -.7px hsl(var(--shadow-color) / 34%), -.1px 9px 10.1px -1.1px hsl(var(--shadow-color) / 34%), -.1px 14.4px 16.2px -1.4px hsl(var(--shadow-color) / 34%), -.2px 22.5px 25.3px -1.8px hsl(var(--shadow-color) / 34%), -.2px 34.2px 38.5px -2.1px hsl(var(--shadow-color) / 34%), -.4px 50.4px 56.7px -2.5px hsl(var(--shadow-color) / 34%);--button-background-color:#c8c6d2;--button-background-color-active:#c2c1cd;--button-light-shadow-color:#f1f1f4;--button-dark-shadow-color:#0c0b0e;--button-container:var(--black);--button-background:linear-gradient(to bottom, #cdcccb, #ccc);--button-rim:linear-gradient(to bottom, var(--white), var(--black));--button-active:linear-gradient(to bottom, #c1bfbe, #bfbfbf);--button-shadow:inset 0 1px 1px #ffffffed, inset 0 -1px 1px #000000d4, var(--shadow-elevation-high);--button-active-shadow:0 1px 1px var(--white);--inverse-button-background:linear-gradient(to bottom, #4d4d4d, #404040);--inverse-element:var(--white);--active-button-text-shadow:0 0 .5px color-mix(in oklch, var(--base-color) 55%, var(--element));--active-button-text-color:color-mix(in oklch, var(--base-color) 25%, var(--element));--icon-gradient-top:#000;--icon-gradient-center:#8b8b8d;--knob-background:linear-gradient(#ececec, #bcbcbc);--knob-shadow:0 -1px 0 1px #f5f5f5, 0 2px 2px #00000059;--knob-inner-background:linear-gradient(#eee, #e3e2e2);--knob-inner-shadow:0 -1px 0 1px var(--white), 0 2px 2px #00000059, var(--shadow-elevation-high);--knob-indicator-background:var(--black);--slider-shadow-color:40deg 2% 44%;--slider-border-color:#535353;--slider-shadow:#00000068;--manual-bg:#fcfbfe;--manual-paper:#ebebee;--manual-element:#030304;--manual-border:#636367}[data-mode=dark]{--synth-body:linear-gradient(to bottom in oklab, #23222a, #17171c);--element:#d6d5dd;--element-dim:#acaabb99;--border:#524f63;--paper:#252527;--bg:linear-gradient(to bottom in oklab, #3b3947, #020203);--button-background:linear-gradient(to bottom, #23222a, #23222a);--manual-bg:#030304;--manual-paper:#121113;--manual-element:#dedde0;--manual-border:#2e2d32;--shadow-color:0 2% 5%;--shadow-elevation-high:0px .5px .6px hsl(var(--shadow-color) / 34%), 0px 2.9px 3.3px -.4px hsl(var(--shadow-color) / 34%), 0px 5.5px 6.2px -.7px hsl(var(--shadow-color) / 34%), -.1px 9px 10.1px -1.1px hsl(var(--shadow-color) / 34%), -.1px 14.4px 16.2px -1.4px hsl(var(--shadow-color) / 34%), -.2px 22.5px 25.3px -1.8px hsl(var(--shadow-color) / 34%), -.2px 34.2px 38.5px -2.1px hsl(var(--shadow-color) / 34%), -.4px 50.4px 56.7px -2.5px hsl(var(--shadow-color) / 34%);--button-rim:linear-gradient(to bottom, var(--black), var(--white));--button-active:linear-gradient(to bottom, #41403e, #404040);--button-shadow:inset 0 1px 1px #ffffff54, inset 0 -1px 1px #000000d4, var(--shadow-elevation-high);--button-active-shadow:0 1px 1px #ffffff54;--inverse-button-background:linear-gradient(to bottom, #d9d9d9, #bab8c6);--icon-gradient-center:#969696;--icon-gradient-top:#e2e2e4;--knob-background:linear-gradient(#2f2d39, #1c1b22);--knob-shadow:0 -1px 0 1px #4d4b5d, 0 2px 2px #00000059;--knob-inner-background:linear-gradient(#2f2d39, #26242d);--knob-inner-shadow:0 -1px 0 1px #524f63, 0 2px 2px #00000059, var(--shadow-elevation-high);--knob-indicator-background:var(--white)}.relative{position:relative}.relative:after{content:"";position:absolute;inset:0}.flex{justify-content:space-between;align-items:center;display:flex}.flex.col{flex-direction:column}.flex.align-start{align-items:flex-start}.flex.justify-start{justify-content:flex-start}.icon{stroke:currentColor;width:100%;height:100%}.mb-6{margin-block:var(--spacing-06)}.gap-01{gap:var(--spacing-01)}.gap-02{gap:var(--spacing-02)}.gap-03{gap:var(--spacing-03)}.gap-04{gap:var(--spacing-04)}.gap-05{gap:var(--spacing-05)}.flex-1{flex:1}.small{font-size:.8rem}.x-small{font-size:var(--x-small)}.sr-only{white-space:nowrap!important;clip:rect(1px, 1px, 1px, 1px)!important;clip-path:inset(50%)!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.box-padding{padding:var(--box-padding)}.col-12{gap:var(--base-gap);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.export-options-container{grid-template-columns:subgrid;gap:var(--base-gap);grid-area:4/span 4/auto/-1;display:grid}@container synth (width<900px){.export-options-container{grid-area:5/9/auto/-1}}@container synth (width<600px){.export-options-container{display:none}}.options-container{grid-template-columns:subgrid;gap:var(--base-gap);grid-area:5/9/auto/11;display:grid}@container synth (width<900px){.options-container{grid-area:6/9/auto/span 2}}@container synth (width<600px){.options-container{display:none}}.palette-type-container{grid-column:7/13;gap:0;display:grid}.palette-type-buttons{gap:var(--base-gap);display:flex}.palette-type-buttons>*{flex:1}@container synth (width<900px){.palette-type-container{grid-area:2/1/auto/-1}}@container synth (width<600px){.palette-type-container{grid-area:1/1/auto/-1}}