@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");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}:root{--page:#000;--panel:#0b0b0bc7;--row:#131313;--row-hover:#181818;--fill:#262626;--thumb:#2a2a2a;--text:#a3a3a3;--strong:#e6e6e6;--muted:#7a7a7a;--faint:#2a2a2a;--line:#ffffff0f;--display:"Archivo Variable", Archivo, "Helvetica Neue", Arial, sans-serif;--sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-pill:cubic-bezier(.16, 1, .3, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1);--lift:inset 0 1px 0 0 #ffffff0a, inset 0 0 0 1px #ffffff08, 0 0 0 1px #00000040, 0 1px 1px -.5px #00000029, 0 3px 3px -1.5px #00000029, 0 6px 6px -3px #00000029, 0 12px 12px -6px #00000029, 0 24px 24px -12px #00000029;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--page);height:100%;color:var(--text);font:400 12px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;margin:0;overflow:hidden}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}a{color:inherit;text-decoration:none}button,a,[role=button],[role=radio],[role=slider]{touch-action:manipulation}button,[role=button],[role=radio],[role=slider]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:focus-visible{outline:1px solid var(--strong);outline-offset:2px}canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;opacity:0;width:100%;height:100%;transition:opacity .9s var(--ease-out);transform-origin:0 0;display:block;position:fixed;inset:0}canvas:active{cursor:grabbing}.ready canvas{opacity:1}.wordmark{font:500 17px/1.15 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--strong);margin:0;font-stretch:125%}.wordmark .dim{color:var(--muted)}.logo{line-height:0}.pure-art{aspect-ratio:1200/363;background:var(--strong);height:30px;display:block;-webkit-mask:url(/pure-art.png) 50%/contain no-repeat;mask:url(/pure-art.png) 50%/contain no-repeat}.loader .logo{--h:48px;position:relative}.loader .pure-art{height:var(--h)}.pure-art.name{-webkit-mask-image:url(/pure-art-name.png);mask-image:url(/pure-art-name.png)}.flight{transform-origin:82%;animation:2.6s ease-in-out -1.3s infinite alternate soar;position:absolute;inset:0}.flight i{width:calc(var(--h) * 1200 / 363);left:0;top:calc(var(--i) * var(--h) / 24);height:calc(var(--h) / 24 + .5px);background:var(--strong);-webkit-mask:url(/pure-art-dragon.png) no-repeat 0 calc(var(--i) * var(--h) / -24) / calc(var(--h) * 1200 / 363) var(--h);-webkit-mask:url(/pure-art-dragon.png) no-repeat 0 calc(var(--i) * var(--h) / -24) / calc(var(--h) * 1200 / 363) var(--h);mask:url(/pure-art-dragon.png) no-repeat 0 calc(var(--i) * var(--h) / -24) / calc(var(--h) * 1200 / 363) var(--h);animation:1.4s ease-in-out infinite alternate sway;animation-delay:calc(var(--i) * .11s - 6s);position:absolute}@keyframes sway{0%{transform:translate(-2px)}to{transform:translate(2px)}}@keyframes soar{0%{transform:translateY(1.5px)rotate(-1.5deg)}to{transform:translateY(-1.5px)rotate(1.5deg)}}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.micro{font:600 9px/12px var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0;font-stretch:125%}.micro b,.micro-strong{color:var(--strong);font-weight:600}.loader{z-index:20;background:var(--page);transition:opacity .4s var(--ease-out), visibility 0s linear .4s;place-content:center;justify-items:center;gap:14px;display:grid;position:fixed;inset:0}.loaded .loader,.no-webgl .loader{opacity:0;visibility:hidden;pointer-events:none}.bar{background:#222;width:160px;height:1px;overflow:hidden}.bar i{background:var(--strong);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.loader .bar i{animation:2.4s cubic-bezier(.23,1,.32,1) forwards creep}@keyframes creep{to{transform:scaleX(.1)}}.brand{top:max(20px, env(safe-area-inset-top));left:max(20px, env(safe-area-inset-left));pointer-events:none;gap:8px;display:grid;position:fixed}.credit{left:0;right:var(--reserve-x,0px);bottom:max(20px, env(safe-area-inset-bottom));pointer-events:none;justify-items:center;gap:6px;width:fit-content;margin-inline:auto;display:grid;position:fixed}.credit a,.foot a{pointer-events:auto;transition:opacity .2s}.foot{left:max(20px, env(safe-area-inset-left));bottom:max(20px, env(safe-area-inset-bottom));position:fixed}.credit-stacked .foot{left:0;right:var(--reserve-x,0px);width:fit-content;margin-inline:auto}.credit-stacked .credit{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 18px)}.credit-stacked .toast{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 76px)}.sheet-credit{display:none}.sheet-credit a{transition:opacity .2s}.designed{align-items:center;gap:8px;display:inline-flex}.studio-logo{aspect-ratio:552/61;background:var(--strong);height:11px;display:block;-webkit-mask:url(/pure-studio.svg) 50%/contain no-repeat;mask:url(/pure-studio.svg) 50%/contain no-repeat}.credit .hint{margin-bottom:8px}.hint [data-hint]{vertical-align:top;align-items:center;gap:5px;transition:color .4s;display:inline-flex}.hint svg{fill:none;stroke:currentColor;stroke-width:1.2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:10px;height:10px}.hint [data-hint].lit{color:var(--strong);transition-duration:.1s}@media (hover:none){.hint .by-mouse{display:none}}.out{align-items:center;gap:3px;display:inline-flex}.out svg{fill:none;stroke:currentColor;stroke-width:1.2px;stroke-linecap:round;stroke-linejoin:round;width:7px;height:7px;color:var(--strong);transition:transform .16s var(--ease-out)}.brand,.credit,.foot,.panel{opacity:0;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);transform:translateY(6px)}.ready .brand,.ready .credit,.ready .foot{opacity:1;transform:none}.ready .brand{transition-delay:.12s}.ready .credit,.ready .foot{transition-delay:.24s}.settled .brand,.settled .credit,.settled .foot{transition:opacity .2s var(--ease-out), transform .2s var(--ease-out)}.ready .credit a:active,.ready .foot a:active,.sheet-credit a:active{opacity:.7;transition-duration:.1s}.panel{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));overscroll-behavior:contain;scrollbar-width:none;background:var(--panel);-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%);width:288px;max-height:calc(100% - 32px);box-shadow:var(--lift);transform-origin:100% 0;border-radius:16px;gap:18px;padding:14px;display:grid;position:fixed;overflow-y:auto}.panel::-webkit-scrollbar{display:none}.ready .panel{opacity:1;transition:opacity .6s var(--ease-out) .18s, transform .6s var(--ease-out) .18s;transform:none}.ready .panel[data-hidden]{opacity:0;pointer-events:none;transition:opacity .24s var(--ease-drawer), transform .24s var(--ease-drawer);transform:scale(.95)}.settled .panel{transition:opacity .2s var(--ease-out), transform .26s var(--ease-drawer)}.settled .panel[data-hidden]{transition:opacity .22s var(--ease-drawer), transform .22s var(--ease-drawer)}.ready .panel:not([data-hidden]).instant,.ready .panel[data-hidden].instant{transition:none}.ready .panel.record-panel[data-hidden]{transform:translate(16px)}.record-mode .panel:not(.record-panel)[data-hidden]{transform:translate(-16px)}.paging .panel[data-hidden]{transition:opacity .12s var(--ease-out), transform .2s var(--ease-out)}.paging .panel:not([data-hidden]){transition:opacity .2s var(--ease-out) 80ms, transform .26s var(--ease-out)}.record-panel:focus{outline:none}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding:2px 2px 0;display:flex}.panel-head-actions{gap:14px;display:flex}.text-button{transition:opacity .2s ease, transform .16s var(--ease-pill);position:relative}.text-button:after{content:"";position:absolute;inset:-8px}@media (pointer:coarse){.text-button:after{inset:-12px}}.text-button:active{transform:scale(.95)}.panel section{gap:8px;min-width:0;display:grid}.panel h2{padding:0 2px}.rows{gap:4px;display:grid}.slider{background:var(--row);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:7px;justify-content:space-between;align-items:center;height:28px;padding:0 10px;transition:opacity .2s;display:flex;position:relative;overflow:hidden}.slider-fill{background:var(--fill);position:absolute;inset:0}.gliding .slider-fill{transition:transform .24s var(--ease-out);will-change:transform}.slider.jump .slider-fill{transition:transform .2s var(--ease-out)}.slider-fill:after{content:"";background:0 0;width:1px;position:absolute;top:0;bottom:0;right:0}.slider.dragging .slider-fill:after{background:#ffffff8c}.slider.dragging .slider-fill{will-change:transform}.slider-label,.slider-value{pointer-events:none;position:relative}.slider-value{font-variant-numeric:tabular-nums;color:var(--strong)}.slider.dragging{background:var(--row-hover)}.slider.dragging .slider-label{color:var(--strong)}.slider.dragging .slider-fill{background:#2e2e2e}.row{background:var(--row);border-radius:7px;grid-template-columns:56px 1fr;align-items:center;height:28px;padding-left:10px;display:grid}.choice{height:100%;padding:3px;display:flex;position:relative}.choice-option{white-space:nowrap;min-width:0;color:var(--muted);border-radius:5px;position:relative}.choice-lit{background:var(--thumb);color:var(--strong);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;transition:clip-path .22s var(--ease-out);border-radius:5px;align-items:center;display:flex;position:absolute;inset:3px;box-shadow:inset 0 1px #ffffff0d}.choice-lit span{text-align:center;min-width:0}.choice-option:active{background:#ffffff0d}.row.bare{grid-template-columns:1fr;padding-left:0}.chips{flex-wrap:wrap;gap:4px;display:flex}.chip,.pill{white-space:nowrap;text-transform:lowercase;background:var(--row);height:24px;color:var(--text);transition:transform .16s var(--ease-pill), opacity .2s ease;border-radius:32px;align-items:center;gap:6px;padding:0 9px;display:inline-flex}.chip[aria-pressed=true]{background:var(--strong);color:#0b0b0b}.chip:active,.pill:active{transform:scale(.97)}.mine{transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);gap:2px;display:inline-flex}@starting-style{.mine{opacity:0;transform:scale(.95)}}.chip-remove{padding:0 7px}.chip-remove[hidden]{display:none}.mine .chip[aria-pressed=true]{border-radius:6px 0 0 6px}.mine .chip-get{background:var(--strong);color:#0b0b0b;border-radius:0 6px 6px 0;margin-left:-2px;padding:0 8px 0 7px;box-shadow:inset 1px 0 #00000024}.mine .chip-get[hidden]{display:none}.chip-get .look-icon{opacity:1}.chip-get.done .look-icon{display:none}.chip-save,.chip-add{background:0 0;box-shadow:inset 0 0 0 1px #ffffff2e}.chip-look{border-radius:6px;gap:6px;padding:0 9px 0 7px}.chip-look.chip-remove{padding:0 7px}.chip-save{color:var(--strong)}.chip-save[hidden]{display:none}.look-icon{opacity:.75;flex:none;width:12px;height:12px;display:block}.look-icon svg{display:block}.chip[aria-pressed=true] .look-icon{opacity:1}.chip-name{font:inherit;background:var(--strong);color:#0b0b0b;text-transform:lowercase;cursor:text;border:0;outline:none}.head-actions{gap:16px;display:flex;position:relative}.tip{z-index:3;width:max-content;max-width:200px;box-shadow:var(--lift);color:var(--strong);font:400 11px/1.4 var(--sans);text-transform:none;letter-spacing:0;pointer-events:none;opacity:0;visibility:hidden;transform-origin:calc(100% - var(--arrow,30px) - 4px) -6px;transition:opacity .12s var(--ease-out), transform .12s var(--ease-out), visibility 0s linear .12s;background:#1f1f1f;border-radius:8px;padding:8px 10px;position:absolute;top:calc(100% + 10px);right:-4px;transform:scale(.97)}.tip:before{content:"";top:-4px;right:calc(var(--arrow,30px) + 4px - 4px);background:inherit;border-radius:1px;width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tip.open{opacity:1;visibility:visible;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);transform:none}@media (pointer:coarse){.head-actions{gap:24px}}.text-button .face{gap:4px}.icon-button{place-items:center;min-width:12px;height:12px;display:inline-grid}.icon-button .look-icon{opacity:1}.icon-button.done .look-icon,.words:empty{display:none}.head-title{align-items:center;gap:8px;display:flex}.on-phone{display:none}@media (width<=720px){.look-icon.on-wide{display:none}.look-icon.on-phone{display:block}}.text-button .tick,.text-button .tick svg{width:8px;height:8px}.chip:disabled{opacity:.4;cursor:default}.actions{grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;display:grid}.actions .pill{justify-content:center;padding:0 8px}.quick{grid-template-columns:1fr auto;gap:6px;display:grid}.quick .pill{justify-content:center}.pill-randomize{color:var(--strong);background:0 0;position:relative;box-shadow:inset 0 0 0 1px #ffffff38}.die{transition:transform .28s cubic-bezier(.34,1.3,.64,1);display:inline-flex}.key{display:none}@media (hover:hover) and (pointer:fine){.key{text-align:center;color:#6a6a6a;border-radius:4px;min-width:15px;padding:1px 3px 0;display:block;position:absolute;top:50%;right:10px;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #ffffff24}}.pill{height:28px;color:var(--strong);background:#1a1a1a;padding:0 13px}.pill-primary{color:#0b0b0b;background:#f2f2f2}.pill:disabled{opacity:.4;cursor:default}.pill[aria-busy=true]{opacity:1;cursor:progress}.pill-primary.recording{color:var(--strong);background:#1a1a1a}.rec-dot{opacity:.7;background:#e5262b;border-radius:50%;width:6px;height:6px;transition:opacity .2s}.recording .rec-dot{opacity:1;animation:1s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}.face{align-items:center;gap:6px;display:inline-flex}.tick{width:10px;height:10px;display:none}.tick svg,.done .tick{display:block}.done .rec-dot{display:none}.keys{color:#555;padding:0 2px}.tune-section{border-top:1px solid var(--line);padding-top:16px}.tune{gap:18px;padding-top:6px;display:grid}.panel h3{padding:0 2px}.slider.resting{opacity:.4;pointer-events:none}@media (hover:hover) and (pointer:fine){.slider:hover{background:var(--row-hover)}.slider:hover .slider-label{color:var(--strong)}.row:hover .choice-option:not([aria-checked=true]):hover{color:var(--text)}.chip:hover{color:var(--strong);background:#1c1c1c}.chip[aria-pressed=true]:hover,.mine .chip-get:hover{color:#0b0b0b;background:#fff}.pill:hover{background:#222}.pill-randomize:hover{background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff59}.pill-primary:hover{background:#fff}.pill-primary.recording:hover{background:#222}.text-button:hover{color:var(--strong)}.toast-action:hover{background:#363636}.credit a:hover,.foot a:hover,.sheet-credit a:hover{opacity:.7}.out:hover svg{transform:translate(1px,-1px)}}.reopen{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));opacity:0;transform-origin:100% 0;pointer-events:none;transition:none;position:fixed;transform:scale(.95)}.reopen[data-shown]{opacity:1;pointer-events:auto;transition:opacity .18s var(--ease-out) 80ms, transform .2s var(--ease-out) 80ms;transform:none}.reopen.instant{transition:none}.framed canvas{outline:1px solid #ffffff24;inset:auto}.pill-start,.pill-wide{justify-content:center;height:34px}.record-status{transition:opacity .2s var(--ease-out);gap:8px;padding:2px 2px 0;display:grid}.record-status[hidden]{display:none}@starting-style{.record-status{opacity:0}}.record-status .micro{color:var(--strong);font-variant-numeric:tabular-nums}.record-status .bar{width:100%}.record-panel .rows{transition:opacity .2s}.record-panel .rows[inert]{opacity:.4}.text-button:disabled{opacity:.4;cursor:default}.rendering .reopen,.rendering .credit,.rendering .foot{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease-out), visibility 0s linear .2s}.rendering canvas{pointer-events:none}.section-head{justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:0 2px;display:flex}.panel .section-head h2{padding:0}.colour-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.colour-row{align-items:center;gap:10px;padding:3px 2px;display:flex}.orbs{align-items:center;gap:10px;display:flex}.orb{width:26px;height:26px;transition:transform .16s var(--ease-pill);border-radius:50%;flex:none;position:relative}.orb[hidden]{display:none}.orb:active{transform:scale(.95)}.orb[role=radio]:before{content:"";box-shadow:inset 0 0 0 1.5px var(--strong);opacity:0;border-radius:50%;position:absolute;inset:-4px}.orb[aria-checked=true]:before{opacity:1}.orb:focus-visible{outline-offset:6px}.orb-fill{background:#2a2a2a;border-radius:50%;position:absolute;inset:0;overflow:hidden}.orb-fill:after{content:"";border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 0 0 .5px #ffffff29}.orb-white .orb-fill,.orb-edge-white .orb-fill{background:#f2f2f2}.orb-dusk .orb-fill{background:linear-gradient(90deg,#dec9abb3,#dec9ab00 24% 76%,#dec9abb3),linear-gradient(#33160f,#914d48 12%,#c589a0 25%,#caaec1 38%,#cac1c9 50%,#cacacd 62%,#cacece 75%,#c6d0d0 88%,#bfd0d1)}.orb-pearl .orb-fill{background:linear-gradient(142deg,#f7f4f9,#f9f8fb 17%,#f0eef5 33%,#dfdaec 50%,#cac1e3 67%,#aba2ca 83%,#867da6)}.orb-split{background:#ffffff1f;width:1px;height:16px}.edge-orbs{align-items:center;gap:12px;padding-left:4px;display:flex;position:relative}.orb-edge{width:16px;height:16px}.orb-edge-colour .orb-fill{background:var(--edge,#8ab4ff)}.orb-edge-off .orb-fill{background:0 0;box-shadow:inset 0 0 0 1px #ffffff59}.orb-edge-off .orb-fill:after{box-shadow:none;background:linear-gradient(135deg,#0000 45%,#ffffff80 45% 55%,#0000 55%)}@media (pointer:coarse){.orb{width:30px;height:30px}.orb-edge{width:20px;height:20px}}.picker{z-index:10;background:var(--panel);-webkit-backdrop-filter:blur(20px)saturate(140%);backdrop-filter:blur(20px)saturate(140%);width:232px;box-shadow:var(--lift);opacity:0;pointer-events:none;transition:opacity .12s var(--ease-out), transform .12s var(--ease-out);border-radius:14px;gap:12px;padding:12px;display:grid;position:fixed;transform:scale(.96)}.picker[hidden]{display:none}.picker.open{opacity:1;pointer-events:auto;transition-duration:.16s;transform:none}.picker.instant{transition:none}.picker-square{background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue));cursor:crosshair;touch-action:none;border-radius:8px;height:168px;position:relative;box-shadow:inset 0 0 0 .5px #ffffff1f}.picker,.picker-colour{grid-template-columns:minmax(0,1fr)}.picker-colour{gap:12px;display:grid}.picker .section-head{padding:0}.picker-row{align-items:center;gap:10px;display:flex}.picker-drop{width:24px;height:24px;color:var(--text);transition:transform .16s var(--ease-pill);border-radius:6px;flex:none;place-items:center;margin-left:-4px;display:grid}.picker-drop[hidden]{display:none}.picker-drop:active{transform:scale(.95)}.picker-hue{cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red);border-radius:6px;flex:1;height:12px;position:relative}.picker-hue:after{content:"";position:absolute;inset:-8px 0}.picker-knob{z-index:1;pointer-events:none;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 2px #fff,0 0 0 2.5px #0000004d,0 1px 4px #00000080}.picker-square .picker-knob{background:var(--now)}.picker-hue .picker-knob{background:var(--hue);top:50%}.picker-field{background:var(--row);cursor:text;border-radius:7px;align-items:center;gap:10px;height:28px;padding:0 10px;display:flex}.picker-field:focus-within{box-shadow:inset 0 0 0 1px #ffffff29}.picker-hex{min-width:0;color:var(--strong);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;background:0 0;border:0;outline:none;flex:1;padding:0}@media (hover:hover) and (pointer:fine){.picker-drop:hover{color:var(--strong);background:var(--row-hover)}}.kind{background:var(--row);border-radius:7px;gap:2px;padding:2px;display:flex}.kind-option{width:30px;height:22px;color:var(--muted);transition:transform .16s var(--ease-pill);border-radius:5px;place-items:center;display:grid}.kind-option svg{display:block}.kind-option[aria-checked=true]{color:var(--strong);background:var(--thumb);box-shadow:inset 0 1px #ffffff0d}.kind-option:active{transform:scale(.95)}@media (hover:hover) and (pointer:fine){.kind-option:not([aria-checked=true]):hover{color:var(--text)}}@media (pointer:coarse){.kind-option{width:38px;height:28px}}.grad[hidden]{display:none}.grad{padding:14px 0 18px;position:relative}.grad-bar{cursor:copy;touch-action:none;border-radius:4px;height:24px;box-shadow:inset 0 0 0 .5px #ffffff24}.grad-stop{cursor:grab;touch-action:none;width:18px;height:20px;transition:opacity .12s var(--ease-out);margin-left:-9px;position:absolute;top:33px}.grad-stop svg{width:100%;height:100%;display:block;overflow:visible}.grad-stop path{fill:var(--stop);stroke:#ffffffb8;stroke-width:1.25px;filter:drop-shadow(0 1px 2px #00000080)}.grad-stop.chosen{z-index:1;transform-origin:50% 0;transform:scale(1.1)}.grad-stop.chosen path{stroke:#fff;stroke-width:2px}.grad-stop.leaving{opacity:.35}.grad-stop:active{cursor:grabbing}.grad-bar.full{cursor:default}.grad-stop:focus-visible{outline-offset:3px}.grad-mid{cursor:ew-resize;touch-action:none;background:#8f8f8f;border-radius:1.5px;width:9px;height:9px;margin-left:-4.5px;position:absolute;top:4px;transform:rotate(45deg);box-shadow:0 0 0 1px #0000008c,inset 0 0 0 1px #ffffff4d}.grad-mid:after{content:"";position:absolute;inset:-7px}@media (hover:hover) and (pointer:fine){.grad-mid:hover{background:#b5b5b5}}@media (pointer:coarse){.grad{padding-bottom:22px}.grad-stop{width:22px;height:24px;margin-left:-11px}}.chip-add[hidden]{display:none}@media (height<=640px){.picker-square{height:104px}}@media (pointer:coarse){.chip-name,.picker-hex{font-size:16px}.picker-hue{border-radius:8px;height:16px}}.swatches[hidden]{display:none}.swatches{border-radius:3px;gap:1px;height:6px;display:flex;overflow:hidden}.swatches i{min-width:2px;display:block}.dropzone{pointer-events:none;opacity:0;transition:opacity .15s var(--ease-out);background:#00000059;border:1px dashed #ffffff47;border-radius:18px;place-items:center;display:grid;position:fixed;inset:12px}.dropping .dropzone{opacity:1;transition:opacity .2s var(--ease-out)}.toast{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 58px);left:calc((100% - var(--reserve-x,0px)) / 2);width:max-content;max-width:calc(100% - 32px);min-height:28px;color:var(--strong);box-shadow:var(--lift);text-transform:lowercase;opacity:0;pointer-events:none;transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);background:#1a1a1a;border-radius:14px;align-items:center;padding:5px 13px;line-height:18px;display:flex;position:fixed;transform:translate(-50%,6px)}.toast.show{opacity:1;transition:opacity .2s var(--ease-out), transform .24s var(--ease-out);transform:translate(-50%)}.toast.show.instant{transition:none}.toast-body{align-items:center;gap:8px;min-width:0;display:flex}.toast-body>span{min-width:0}.toast-mark,.toast-action{flex:none}.toast-mark{width:14px;height:14px;font:600 9px/1 var(--sans);color:#e5262b;border-radius:50%;place-items:center;font-style:normal;display:grid;box-shadow:inset 0 0 0 1px}.toast.actionable{pointer-events:auto;touch-action:none;padding-right:5px}.toast-action{height:20px;color:var(--strong);text-transform:lowercase;transition:transform .16s var(--ease-pill);background:#2c2c2c;border-radius:10px;padding:0 9px}.toast-action:active{transform:scale(.95)}.fallback{display:none}.no-webgl .fallback{text-align:center;place-content:center;gap:12px;padding:24px;display:grid;position:fixed;inset:0}.no-webgl .panel,.no-webgl .brand,.no-webgl canvas{display:none}.embed .panel,.embed .reopen,.embed .brand,.embed .credit,.embed .foot,.embed .toast,.embed .tip{display:none!important}.embed canvas{touch-action:pan-y}.embed-credit{z-index:2;opacity:.6;transition:opacity .2s;position:fixed;bottom:10px;right:12px}.embed-credit:active{opacity:1}@media (hover:hover) and (pointer:fine){.embed-credit:hover{opacity:1}}@media (width<=720px){.panel{top:auto;left:max(8px, env(safe-area-inset-left));right:max(8px, env(safe-area-inset-right));bottom:max(8px, env(safe-area-inset-bottom));gap:14px;width:auto;max-height:46%}.ready .panel[data-hidden]{transform:translateY(calc(100% + 24px))}.record-panel{max-height:64%}.foot,.keys{display:none}.brand{top:max(16px, env(safe-area-inset-top));justify-items:center;left:0;right:0}.brand .pure-art{height:28px}.credit{display:none}.sheet-credit{justify-content:center;padding:2px 0;display:flex}.reopen{top:auto;bottom:max(16px, env(safe-area-inset-bottom));transform-origin:100% 100%}.toast{bottom:calc(var(--sheet,0px) + max(8px, env(safe-area-inset-bottom)) + 12px);left:50%}.panel .grabber{display:block}.panel-head{touch-action:none}}.grabber{background:#ffffff2e;border-radius:2px;width:36px;height:4px;margin-left:-18px;display:none;position:absolute;top:5px;left:50%}@media (prefers-reduced-transparency:reduce){.panel,.picker{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0d0d0d}}@media (prefers-contrast:more){:root{--text:#d0d0d0;--muted:#a8a8a8;--line:#ffffff38}.panel,.picker{box-shadow:var(--lift), inset 0 0 0 1px #ffffff4d;background:#0b0b0b}}@media (prefers-reduced-motion:reduce){.brand,.credit,.foot,.panel,.ready .panel[data-hidden],.toast,.reopen{transform:none!important}.recording .rec-dot,.flight,.flight i{animation:none}.die{transform:none!important}.choice-lit,.gliding .slider-fill,.slider.jump .slider-fill{transition:none}.mine,.picker,.grad-stop,.tip{transform:none!important}}