html,body,#root{background:#e9e6e0;height:100%;margin:0;overflow:hidden}:root{--ui-font:Inter, "Helvetica Neue", Helvetica, Arial, sans-serif}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}canvas{touch-action:none;cursor:grab;display:block}canvas.grabbing{cursor:grabbing}.back{color:#111;opacity:.5;font:12px ui-monospace,Menlo,monospace;text-decoration:none;position:fixed;bottom:12px;left:12px}.back:hover{opacity:1}.reticle{box-sizing:border-box;pointer-events:none;border:1.5px solid #868583;border-radius:50%;width:20px;height:20px;transition:opacity .2s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff80,inset 0 0 0 1px #ffffff80}.reticle:before,.reticle:after{content:"";background:#868583;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle.erasing{border-style:dashed}.reticle:before{width:7px;height:1px}.reticle:after{width:1px;height:7px}.ft-media{user-select:none;-webkit-backdrop-filter:blur(30px)saturate(1.8)brightness(1.04);background:linear-gradient(#ffffff8c,#ffffff40);border-radius:999px;gap:0;padding:6px 8.5px;display:flex;position:fixed;bottom:88px;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffffe6,inset 0 0 0 1px #ffffff80}.ft-media:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.ft-media button{color:#868583;cursor:pointer;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;padding:0;display:flex}.ft-media button:hover{color:#111;background:#0000000d}.ft-media button.on{color:#fff;background:#111}.ft-media svg{display:block}.ft-sep{background:#0000001f;width:1px;margin:10px 8.5px}.ft-knob{display:flex;position:relative}.ft-knob button{touch-action:none}.ft-fit{flex:none;display:block;overflow:visible}.ft-fit *{vector-effect:non-scaling-stroke}.ft-ramp{--empty:#d6d5d2}.ft-media button.on .ft-ramp{--empty:#4a4a4a}.ft-ramp path{fill:currentColor}.ft-ramp .ft-ramp-bg{fill:var(--empty)}.ft-swatch{border-radius:50%;width:24px;height:24px;display:block;box-shadow:inset 0 0 0 1px #0000001f,0 0 0 2px #fff}.ft-knob button.on .ft-swatch{transform:scale(1.1)}.ft-gauge{pointer-events:none;-webkit-backdrop-filter:blur(18px)saturate(1.6);opacity:0;transform:translate(calc(-50% + var(--dx,0px)), 6px) scale(.96);transform-origin:calc(50% - var(--dx,0px)) 100%;background:#ffffff80;border-radius:999px;padding:6px;transition:opacity .16s ease-out,transform .2s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:calc(100% + 14px);left:50%;box-shadow:inset 0 0 0 1px #fff9,0 8px 24px #0000001a}.ft-gauge.open{opacity:1;transform:translate(calc(-50% + var(--dx,0px)), 0) scale(1)}.ft-gauge-track{background:#00000014;border-radius:999px;width:34px;height:140px;position:relative;overflow:hidden}.ft-fill{height:calc(17px + var(--t) * (100% - 17px));background:#111;border-radius:999px;position:absolute;bottom:0;left:0;right:0}.ft-gauge-track b{text-align:center;color:#fff;font:500 10px/1 var(--ui-font);font-variant-numeric:tabular-nums;position:absolute;bottom:10px;left:0;right:0}.ft-pick{border-radius:29px;flex-direction:column-reverse;gap:2px;display:flex}.ft-pick button{transition:background .1s,color .1s;position:relative}.ft-pick button span{opacity:0;pointer-events:none;font:500 10px/1 var(--ui-font);letter-spacing:.06em;text-transform:uppercase;color:#111;white-space:nowrap;transition:opacity .12s,transform .12s;position:absolute;top:50%;left:calc(100% + 14px);transform:translate(-4px,-50%)}.ft-pick button.on span,.ft-pick button:hover span{opacity:1;transform:translateY(-50%)}.ft-knob.swatches .ft-pick button.on{background:#0000000f}.ft-knob.swatches .ft-pick button.on .ft-ball{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #111}.ft-ball{border-radius:50%;width:24px;height:24px;display:block;box-shadow:0 0 0 2px #fff}.ft-ball.matte{background:radial-gradient(circle at 35% 30%,#a6a5a2,#8a8986 55%,#737270)}.ft-ball.gloss{background:radial-gradient(circle at 34% 28%,#fff 0 7%,#fff0 16%),radial-gradient(circle at 50% 95%,#ffffff73,#fff0 35%),radial-gradient(circle at 40% 35%,#a09f9c,#7a7976 60%,#64635f)}.ft-ball.metal{background:radial-gradient(circle at 34% 26%,#ffffffe6 0 6%,#fff0 18%),linear-gradient(#f2f1ee 0%,#b7b6b3 44%,#64635f 50%,#8c8b88 68%,#dddcd9 100%)}.ft-pick.open,.ft-popover.open,.ft-gauge.pinned{pointer-events:auto}.ft-menu{box-sizing:border-box;user-select:none;width:max-content;min-width:200px;font:12px/16px var(--ui-font);color:#111;border-radius:20px;flex-direction:column;padding:6px;display:flex}.ft-menu hr{background:#0000001a;border:0;width:calc(100% - 20px);height:1px;margin:4px auto}.ft-media .ft-menu .ft-row{width:100%;height:34px;font:inherit;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:14px;align-items:center;gap:8px;padding:0 10px;display:flex}.ft-media .ft-menu .ft-row:hover{background:#0000000d}.ft-row span{flex:1}.ft-row kbd{font:500 10px/1 var(--ui-font);color:#0006}.ft-switch{background:#00000024;border-radius:999px;width:28px;height:16px;transition:background .15s;position:relative}.ft-switch:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .18s cubic-bezier(.3,1.4,.5,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000040}.ft-switch.on{background:#111}.ft-switch.on:after{transform:translate(12px)}.ft-help{white-space:nowrap;color:#00000073;gap:6px;width:auto;padding:12px 14px}.ft-help p{margin:0}.ft-help h5:first-child,.ft-dos>h5:first-child{margin-top:0}.ft-dos{grid-template-columns:auto 1fr;align-items:center;gap:7px 14px;display:grid}.ft-how{color:#555;align-items:center;gap:4px;display:inline-flex}.ft-what{letter-spacing:.06em;text-transform:uppercase;color:#00000073;font-size:10px}.ft-key{box-sizing:border-box;vertical-align:1px;min-width:18px;height:18px;font:500 11px/1 var(--ui-font);color:#111;background:#e2e1de;border:0;border-radius:5px;justify-content:center;align-items:center;padding:0 5px;display:inline-flex}.ft-key.wide{padding:0 9px}.ft-help h5{font:400 10px/1 var(--ui-font);letter-spacing:.08em;text-transform:uppercase;color:#111;grid-column:1/-1;align-items:center;gap:8px;margin:10px 0 1px;display:flex}.ft-help h5:after{content:"";background:#0000001f;flex:1;height:1px}.ft-help h5 span{letter-spacing:0;text-transform:none;color:#00000073;margin-left:-2px;font-size:11px}[data-theme=dark] .ft-key{color:#eee;background:#3a3937}[data-theme=dark] .ft-help h5,[data-theme=dark] .ft-how{color:#eee}[data-theme=dark] .ft-help h5:after{background:#ffffff24}[data-theme=dark] .ft-what{color:#ffffff80}.ft-actions{flex-direction:column;gap:4px;padding:4px;display:flex}.ft-media .ft-actions button{color:#111;width:100%;height:32px;font:500 12px/1 var(--ui-font);white-space:nowrap;background:#e6e5e2;border-radius:999px;justify-content:flex-start;align-items:center;gap:8px;padding:0 12px;display:flex}.ft-media .ft-actions button:hover{color:#fff;background:#111}.ft-actions svg{flex:none}.ft-gauge.pinned .ft-gauge-track{cursor:ns-resize;touch-action:none}.ft-pick.flip button span{left:auto;right:calc(100% + 14px);transform:translate(4px,-50%)}.ft-pick.flip button.on span,.ft-pick.flip button:hover span{transform:translateY(-50%)}.ft-tip{z-index:2;white-space:nowrap;color:#fff;font:500 11px/1 var(--ui-font);pointer-events:none;opacity:0;background:#777673;border-radius:999px;align-items:center;gap:6px;padding:5px 6px 5px 10px;transition:opacity .12s,transform .12s;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,4px);box-shadow:0 4px 12px #0000001f}.ft-tip:not(:has(kbd)){padding-right:10px}.ft-tip kbd{box-sizing:border-box;color:#fff;min-width:16px;height:16px;font:inherit;background:#9a9996;border-radius:5px;justify-content:center;align-items:center;padding:0 4px;font-size:10px;display:inline-flex}@media (hover:hover){.ft-media .ft-knob>button:hover:not(.on) .ft-tip{opacity:1;transition-delay:.35s;transform:translate(-50%)}}.ft-actions kbd{color:#6b6a67;height:16px;font:500 9px/1 var(--ui-font);background:#d2d1ce;border-radius:5px;align-items:center;margin-left:auto;padding:0 4px;display:inline-flex}.ft-media .ft-actions button:hover kbd{color:#e6e6e6;background:#3a3a3a}.ft-toast{color:#fff;font:500 12px/1 var(--ui-font);pointer-events:none;opacity:0;z-index:10;background:#777673;border-radius:999px;padding:8px 14px;transition:opacity .15s,transform .2s;position:fixed;top:20px;left:50%;transform:translate(-50%,-6px)}.ft-toast.on{opacity:1;transform:translate(-50%)}.ft-media .ft-knob>button{isolation:isolate;width:auto;min-width:41px;padding:0 8.5px;position:relative}.ft-media .ft-knob>button,.ft-media .ft-knob>button:hover,.ft-media .ft-knob>button.on,.ft-media .ft-knob.swatches>button.on{background:0 0}.ft-media .ft-knob>button:before{content:"";z-index:-1;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;transition:background .1s;position:absolute;top:50%;left:50%}.ft-media .ft-knob>button:hover:before{background:#0000000d}.ft-media .ft-knob>button.on:before{background:#111}.ft-media .ft-knob.swatches>button.on:before{background:#0000000f}.ft-media.ft-corner{box-shadow:none;-webkit-backdrop-filter:none;background:0 0;inset:16px 16px auto auto;transform:none}.ft-media.ft-corner:before{display:none}.ft-corner .ft-knob>button .ft-fit{width:30px;height:30px}.ft-corner .ft-gauge{transform-origin:calc(50% - var(--dx,0px)) 0;transform:translate(calc(-50% + var(--dx,0px)), -6px) scale(.96);top:calc(100% + 14px);bottom:auto}.ft-corner .ft-gauge.open{transform:translate(calc(-50% + var(--dx,0px)), 0) scale(1)}.ft-corner .ft-knob>button .ft-tip{top:calc(100% + 12px);bottom:auto}.ft-corner .ft-help{white-space:normal;width:min(340px,100vw - 24px)}@media (width<=600px){.ft-media:not(.ft-corner){bottom:40px}}:root[data-theme=dark]{color-scheme:dark}[data-theme=dark] body,[data-theme=dark] #root,:root[data-theme=dark]{background:#000}[data-theme=dark] .back{color:#eee}[data-theme=dark] .reticle{box-shadow:0 0 0 1px #00000073,inset 0 0 0 1px #00000073}[data-theme=dark] .ft-media{background:linear-gradient(#3433319e,#22222066);box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #ffffff0f,0 10px 30px #00000073}[data-theme=dark] .ft-media button{color:#8f8e8b}[data-theme=dark] .ft-media button:hover{color:#fff}[data-theme=dark] .ft-sep{background:#ffffff1f}[data-theme=dark] .ft-media .ft-knob>button:hover:before{background:#ffffff12}[data-theme=dark] .ft-media .ft-knob>button.on{color:#111}[data-theme=dark] .ft-media .ft-knob>button.on:before{background:#f2f1ee}[data-theme=dark] .ft-media .ft-knob.swatches>button.on:before{background:#ffffff1a}[data-theme=dark] .ft-ramp{--empty:#4a4947}[data-theme=dark] .ft-media button.on .ft-ramp{--empty:#bdbcb9}[data-theme=dark] .ft-swatch{box-shadow:inset 0 0 0 1px #ffffff1f,0 0 0 2px #2c2b29}[data-theme=dark] .ft-ball{box-shadow:0 0 0 2px #2c2b29}[data-theme=dark] .ft-knob.swatches .ft-pick button.on .ft-ball{box-shadow:0 0 0 2px #2c2b29,0 0 0 3.5px #f2f1ee}[data-theme=dark] .ft-gauge{background:#282826b8;box-shadow:inset 0 0 0 1px #ffffff14,0 8px 24px #0006}[data-theme=dark] .ft-gauge-track{background:#ffffff1a}[data-theme=dark] .ft-fill{background:#f2f1ee}[data-theme=dark] .ft-gauge-track b{color:#111}[data-theme=dark] .ft-padmark{box-shadow:0 0 0 3px #2c2b29,0 2px 6px #00000080}[data-theme=dark] .ft-pick button{color:#8f8e8b}[data-theme=dark] .ft-pick button:hover{color:#fff;background:#ffffff12}[data-theme=dark] .ft-pick button.on{color:#111;background:#f2f1ee}[data-theme=dark] .ft-knob.swatches .ft-pick button.on{background:#ffffff1a}[data-theme=dark] .ft-pick button span,[data-theme=dark] .ft-menu{color:#eee}[data-theme=dark] .ft-menu hr{background:#ffffff1f}[data-theme=dark] .ft-media .ft-menu .ft-row:hover{background:#ffffff12}[data-theme=dark] .ft-row kbd{color:#fff6}[data-theme=dark] .ft-switch{background:#ffffff2e}[data-theme=dark] .ft-switch.on{background:#f2f1ee}[data-theme=dark] .ft-switch.on:after{background:#1b1b1a}[data-theme=dark] .ft-help{color:#ffffff80}[data-theme=dark] .ft-media .ft-actions button{color:#eee;background:#32312f}[data-theme=dark] .ft-media .ft-actions button:hover{color:#111;background:#f2f1ee}[data-theme=dark] .ft-actions kbd{color:#b5b4b1;background:#454442}[data-theme=dark] .ft-media .ft-actions button:hover kbd{color:#444;background:#d2d1ce}[data-theme=dark] .ft-tip{background:#5f5e5b}[data-theme=dark] .ft-tip kbd{background:#7a7976}[data-theme=dark] .ft-toast{background:#5f5e5b}.ft-select{cursor:default;box-sizing:border-box}.ft-select select{-webkit-appearance:none;appearance:none;color:#111;height:24px;font:500 11px/1 var(--ui-font);cursor:pointer;background:#e6e5e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23868583' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center no-repeat;border:0;border-radius:999px;outline:none;padding:0 24px 0 10px}.ft-select select:hover{background-color:#dcdbd8}[data-theme=dark] .ft-select select{color:#eee;background-color:#32312f}.ft-media .ft-knob.ft-toggle>button.on{color:#111}.ft-media .ft-knob.ft-toggle>button.on:before{background:#d3d2cf}[data-theme=dark] .ft-media .ft-knob.ft-toggle>button.on{color:#eee}[data-theme=dark] .ft-media .ft-knob.ft-toggle>button.on:before{background:#3a3937}.ft-padpop{border-radius:18px}.ft-pad{cursor:crosshair;touch-action:none;border-radius:12px;width:180px;height:140px;position:relative;box-shadow:inset 0 0 0 1px #00000014}.ft-padmark{pointer-events:none;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;box-shadow:0 0 0 3px #fff,0 2px 6px #00000059}