.swatch-container{display:grid;grid-template-rows:repeat(var(--rows),1fr);grid-template-columns:repeat(var(--columns),1fr);grid-column:7 / 13;gap:1px}.swatch{width:100%;height:100%;cursor:pointer;background-color:var(--color);border-radius:1px;transition:background-color .2s ease-in-out}.palette-details{display:grid;grid-template-rows:repeat(var(--items),1fr);grid-column:7 / 13;grid-auto-columns:1fr 1fr;grid-auto-flow:column;container-name:palette-details;container-type:size}.palette-detail{display:flex;flex-direction:column;gap:.25em;justify-items:center;height:calc(100cqh / var(--items));padding:var(--box-padding);color:var(--color);letter-spacing:-.03px;cursor:pointer;background-color:var(--bg);opacity:0}.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{display:flex;flex-shrink:0;align-items:center}.circle svg{display:block}.circle text{padding-block-end:5px;font-size:14px;text-transform:uppercase;fill:#ddd}.palette-display{flex:1}.palette-name{display:flex;gap:.3em;align-items:center;justify-content:center;height:32px;font-size:1.2rem;font-weight:400;line-height:1.4;color:var(--white)}.palette-name svg{flex-shrink:0}.circle-container{width:130px;aspect-ratio:1/1;margin-inline:auto}.palette-type,.palette-style{overflow:hidden;text-overflow:ellipsis;font-size:.8rem;font-weight:400;line-height:1.4;color:var(--text-muted);text-transform:uppercase;white-space:nowrap}.current-color-display{grid-column:1 / 7}.current-color-display .header-container{display:flex;flex:1;gap:2rem;align-items:start;width:100%}.current-color-display .header{min-width:200px;height:50px;margin-block-end:1rem;color:var(--white)}.current-color-display h1{font-weight:400}.color-dot{width:1rem;height:100%;background-color:var(--color);border-radius:1px}.color-details{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(3,1fr);grid-auto-flow:column;gap:1px var(--spacing-05);width:100%;font-size:12px;color:var(--text-muted);text-transform:uppercase}.color-detail{display:flex;gap:.5em;align-items:center;overflow:hidden;line-height:1.4;white-space:nowrap}.color-detail svg{flex-shrink:0}.color-detail p[data-value]{overflow:hidden;text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;cursor:pointer}.color-text{display:flex;gap:3px}.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: hsl(0deg 0% 59%);--icon-gradient-top: hsl(260deg 5% 89%)}.button-container.inverse button{color:var(--inverse-element);background-image:var(--inverse-button-background)}[data-mode=dark] .button-container.inverse{--icon-gradient-top: hsl(249deg 50% 0%);--icon-gradient-center: hsl(240deg 1% 55%)}.button-container{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;background-color:var(--button-container);border:2px solid transparent;border-radius:1px;box-shadow:none}.button-container:has(button:active,button.active){box-shadow:var(--button-active-shadow)}.button-container button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--x-small);color:var(--element);text-transform:uppercase;background-image:var(--button-background);border-radius:6px;box-shadow:var(--button-shadow)}.button-container button:active,.button-container button.active{box-shadow:inset 0 1px 5px #000000e2;filter:brightness(.9);translate:0 .5px}.color-space-selector{grid-column:1 / 7}.color-space-selector-buttons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--spacing-02)}.color-space-selector-header{display:flex;gap:var(--spacing-02);align-items:center;justify-content:center;width:90%;margin-block-end:var(--spacing-03);margin-inline:auto;font-size:.6rem;font-weight:400;line-height:1.4;color:var(--element-dim);text-transform:uppercase}.color-space-selector-header p{width:max-content;text-wrap:nowrap}.divider{position:relative;width:100%;height:1px;background-color:var(--element-dim)}.divider:first-child:before{position:absolute;top:0;left:0;width:1px;height:var(--spacing-03);content:"";background-color:var(--element-dim)}.divider:last-child:before{position:absolute;top:0;right:0;width:1px;height:var(--spacing-03);content:"";background-color:var(--element-dim)}@container synth (width < 900px){.color-space-selector{grid-row:1;grid-column:1 / -1}}@container synth (width < 600px){.color-space-selector{display:none}}.display-info-container{grid-row:5;grid-column:span 2 / -1;height:40px;padding:var(--spacing-02);font-size:var(--x-small);color:#fff;text-transform:uppercase;background-color:#000;border-radius:4px}.display-info-container p{text-box:trim-both cap alphabetic}.display-info-default{display:flex;gap:var(--spacing-03);align-items:center;justify-content:center;height:100%}.display-info-message{display:flex;gap:var(--spacing-03);align-items:center;justify-content:center;height:100%;padding-inline:var(--spacing-04);font-weight:600;text-transform:none;letter-spacing:.1px}.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-row:6;grid-column:11 / -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{display:grid;grid-template-columns:subgrid;grid-row:3 / 6;grid-column:1 / 7;gap:var(--base-gap)}.slider{grid-column:1/ 7}.slider label{font-size:12px;text-transform:uppercase}.slider:last-child{padding-block-end:3px}.slider input[type=range]{width:100%;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;background:transparent;border:none}.slider input[type=range]::-webkit-slider-runnable-track{height:10px;border:1px solid var(--slider-border-color);border-radius:1000px;box-shadow:inset 0 2px var(--slider-shadow)}.slider input[type=range]::-moz-range-track{height:10px;border:1px solid var(--slider-border-color);border-radius:1000px;box-shadow:inset 0 2px var(--slider-shadow)}.slider input[type=range]::-webkit-slider-thumb{--shadow-color: var(--slider-shadow-color);position:relative;width:18px;height:18px;margin-top:-5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%}.slider input[type=range]::-moz-range-thumb{--shadow-color: var(--slider-shadow-color);position:relative;width:18px;height:18px;margin-top:-5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%}.slider-inputs{display:flex;gap:2px;align-items:center;justify-content:space-between;width:5rem;padding:2px;color:var(--white);background:var(--black);border-radius:4px}.slider-inputs button{height:16px}.slider-inputs input{padding:0;font-size:10px;color:var(--white);text-align:center;outline:none;background:transparent;border:none}@container synth (width < 900px){.slider-group{grid-row:4 / 7;grid-column:1 / 9}.slider{grid-column:1 / -1}}@container synth (width < 600px){.slider-group{grid-row:2;grid-column:1 / -1}}.input-color-container{display:flex;grid-row:2;grid-column:1 / 7;gap:var(--base-gap)}.input-color-container-input{grid-column:span 4;width:100%;height:40px;font-size:1.2rem;color:var(--input-color);background-color:var(--input-bg);box-shadow:inset 2px 2px .5em #00000026,inset -2px -2px .5em #ffffff26}@container synth (width < 900px){.input-color-container{grid-row:3;grid-column:1 / 9}}@container synth (width < 600px){.input-color-container{grid-row:1;grid-column:1 / -1}.input-color-container-input{font-size:1rem}}.knobs{display:grid;grid-template-rows:subgrid;grid-template-columns:subgrid;grid-row:2 / 7;grid-column:7 / 9}@container synth (width < 900px){.knobs{display:none}}.knob-container{display:flex;flex-direction:column;grid-row:span 2;gap:10px;align-items:center;justify-content:center}.knob-outer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:60px;aspect-ratio:1;cursor:ns-resize;background:var(--knob-background);border-radius:50%;box-shadow:var(--knob-shadow)}.knob-outer.dragging{cursor:ns-resize}.knob-inner{position:relative;width:30px;aspect-ratio:1;background:var(--knob-inner-background);border-radius:50%}.knob-inner-shadow{position:absolute;top:0;right:0;bottom:0;left:0;width:30px;aspect-ratio:1;border-radius:50%;box-shadow:var(--knob-inner-shadow);translate:50% 50%}.knob-display{display:flex;gap:5px;align-items:center;justify-content:center;padding:4px;font-size:var(--x-small);color:#fff;background:#000;border-radius:5px}.knob-display input{padding:0;color:#fff}.knob-indicator{--radius: 10px;--dot: 4px;position:absolute;top:calc(50% - var(--dot) / 2);left:calc(50% - var(--dot) / 2);width:var(--dot);height:var(--dot);background:var(--knob-indicator-background);border-radius:50%;transform-origin:center;translate:calc(sin(var(--angle) * -1) * var(--radius)) calc(cos(var(--angle)) * var(--radius))}.palette-style-container{display:flex;grid-column:9 / 13;gap:var(--base-gap)}.palette-style-container>*{flex:1}@container synth (width < 900px){.palette-style-container{grid-row:3;grid-column:9 / -1}}@container synth (width < 600px){.palette-style-container{display:none}}.palette-tool-container{display:grid;grid-template-columns:subgrid;grid-row:3;grid-column:9 / 13;gap:var(--base-gap)}@container synth (width < 900px){.palette-tool-container{grid-row:4;grid-column:9 / -1}}@container synth (width < 600px){.palette-tool-container{display:none}}.synth-brand{align-items:center;padding:var(--box-padding)}.synth-brand .brand{grid-column:1 / 7;font-family:var(--font-brand);font-size:1.25rem;font-weight:400;color:var(--element);text-transform:uppercase}.synth-brand .brand span{font-weight:700}.vibrancy-module{position:relative;grid-column:7 / 13;height:10px;padding:1px;background:linear-gradient(to bottom,#fff,#494949);border:2px solid #000;border-radius:1000px;box-shadow:inset 0 -2px 0 5px #0000002a}.vibrancy-module-inner{width:100%;height:100%;padding:1px;border-radius:1000px;box-shadow:inset 1px 1px 1px .5px #00000049}.vibrancy-module-blur{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:1000px;opacity:.75;filter:blur(5px) brightness(2.5)}@container synth (width < 600px){.synth-brand .brand{font-size:3.5cqi}}.bg{display:grid;place-items:center;min-height:100svh;padding:1vw 1.5vw 1.5vw;background-image:var(--bg)}.synth-container{width:90vw;max-width:1180px;container:synth / inline-size;background-image:url(/noise.svg),var(--synth-body);background-size:200px 200px,auto;border-radius:var(--radius);box-shadow:inset 0 1px 1px #eaeaf2,var(--shadow-elevation-high)}[data-mode=dark] .synth-container{box-shadow:inset 0 1px 1px #524f63,var(--shadow-elevation-high)}.synth-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-08);padding:var(--box-padding)}@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+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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{font-family:inherit;color:inherit}*,*:after,*:before{box-sizing:border-box;padding:0;margin:0}button{padding:0;font-family:inherit;cursor:pointer;background:none;border:none}input,textarea{padding:var(--button-padding);font-family:inherit;font-size:inherit;line-height:1;color:var(--element);outline:none;background-color:var(--surface-3);border:1px solid var(--border-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: hsl(0deg 0% 50% / 45%);--border: hsl(248deg 11% 65% / 75%);--white: #fff;--black: #000;--text-muted: #cbcbcb;--dimmed: #333;--success: oklch(100% .4 150deg);--error: oklch(100% .4 21deg);--warning: rgb(255 165 0);--element: hsl(248deg 11% 15%);--element-dim: hsl(248deg 11% 10% / 60%);--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, hsl(0deg 0% 5%), #e3e0dc, hsl(0deg 0% 5%));--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: hsl(248deg 11% 80%);--button-background-color-active: hsl(248deg 11% 78%);--button-light-shadow-color: hsl(248deg 11% 95%);--button-dark-shadow-color: hsl(248deg 11% 5%);--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, hsl(30deg 2% 75%), hsl(0deg 0% 75%));--button-shadow: inset 0 1px 1px rgb(255 255 255 / 92.8%), inset 0 -1px 1px rgb(0 0 0 / 83.3%), var(--shadow-elevation-high);--button-active-shadow: 0 1px 1px var(--white);--inverse-button-background: linear-gradient(to bottom, hsl(248deg 0 30%), hsl(248deg 0 25%));--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: hsl(249deg 50% 0%);--icon-gradient-center: hsl(240deg 1% 55%);--knob-background: linear-gradient(rgb(236 236 236), rgb(188 188 188));--knob-shadow: 0 -1px 0 1px rgb(245 245 245), 0 2px 2px hsl(0deg 0% 0% / 35%);--knob-inner-background: linear-gradient(rgb(238 238 238), rgb(227 226 226));--knob-inner-shadow: 0 -1px 0 1px var(--white), 0 2px 2px hsl(0deg 0% 0% / 35%), var(--shadow-elevation-high);--knob-indicator-background: var(--black);--slider-shadow-color: 40deg 2% 44%;--slider-border-color: rgb(83 83 83);--slider-shadow: #00000068;--manual-bg: hsl(246deg 65.1% 99.1%);--manual-paper: hsl(246deg 7.63% 92.6%);--manual-element: hsl(247deg 12.4% 1.43%);--manual-border: hsl(246deg 2.44% 39.6%)}[data-mode=dark]{--synth-body: linear-gradient(to bottom in oklab, hsl(248deg 11% 15%), hsl(248deg 11% 10%));--element: hsl(248deg 11% 85%);--element-dim: hsl(248deg 11% 70% / 60%);--border: hsl(248deg 11% 35%);--paper: hsl(248deg 03% 15%);--bg: linear-gradient(to bottom in oklab, hsl(248deg 11% 25%), hsl(248deg 11% 1%));--button-background: linear-gradient(to bottom, hsl(248deg 11% 15%), hsl(248deg 11% 15%));--manual-bg: hsl(247deg 12.4% 1.43%);--manual-paper: hsl(247deg 5.2% 7.15%);--manual-element: hsl(246deg 4.43% 87.4%);--manual-border: hsl(247deg 4.55% 18.6%);--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, hsl(30deg 2% 25%), hsl(0deg 0% 25%));--button-shadow: inset 0 1px 1px rgb(255 255 255 / 32.8%), inset 0 -1px 1px rgb(0 0 0 / 83.3%), var(--shadow-elevation-high);--button-active-shadow: 0 1px 1px rgb(255 255 255 / 32.8%);--inverse-button-background: linear-gradient(to bottom, hsl(0deg 0% 85%), hsl(248deg 11% 75%));--icon-gradient-center: hsl(0deg 0% 59%);--icon-gradient-top: hsl(260deg 5% 89%);--knob-background: linear-gradient(hsl(248deg 11% 20%), hsl(248deg 11% 12%));--knob-shadow: 0 -1px 0 1px hsl(248deg 11% 33%), 0 2px 2px hsl(0deg 0% 0% / 35%);--knob-inner-background: linear-gradient(hsl(248deg 11% 20%), hsl(248deg 11% 16%));--knob-inner-shadow: 0 -1px 0 1px hsl(248deg 11% 35%), 0 2px 2px hsl(0deg 0% 0% / 35%), var(--shadow-elevation-high);--knob-indicator-background: var(--white)}.relative{position:relative}.relative:after{position:absolute;top:0;right:0;bottom:0;left:0;content:""}.flex{display:flex;align-items:center;justify-content:space-between}.flex.col{flex-direction:column}.flex.align-start{align-items:flex-start}.flex.justify-start{justify-content:flex-start}.icon{width:100%;height:100%;stroke:currentcolor}.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{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;white-space:nowrap!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important}.box-padding{padding:var(--box-padding)}.col-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--base-gap)}.export-options-container{display:grid;grid-template-columns:subgrid;grid-row:4;grid-column:span 4 / -1;gap:var(--base-gap)}@container synth (width < 900px){.export-options-container{grid-row:5;grid-column:9 / -1}}@container synth (width < 600px){.export-options-container{display:none}}.options-container{display:grid;grid-template-columns:subgrid;grid-row:5;grid-column:9 / 11;gap:var(--base-gap)}@container synth (width < 900px){.options-container{grid-row:6;grid-column:9 / span 2}}@container synth (width < 600px){.options-container{display:none}}.palette-type-container{display:grid;grid-column:7 / 13;gap:0}.palette-type-buttons{display:flex;gap:var(--base-gap)}.palette-type-buttons>*{flex:1}@container synth (width < 900px){.palette-type-container{grid-row:2;grid-column:1 / -1}}@container synth (width < 600px){.palette-type-container{display:none}}