.tp-host{--tp-tone-rgb:0, 0, 0;--tp-fg:#454545;--tp-ease:cubic-bezier(.4, 0, .2, 1);width:100%;min-width:0;position:relative}.appearance-dark .tp-host{--tp-tone-rgb:255, 255, 255;--tp-fg:#f2f2f2}.tp-panel{box-sizing:border-box;width:356px;height:508px;color:var(--tp-fg);-webkit-user-select:none;user-select:none;font:13px/1.4 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.tp-panel *,.tp-panel :before,.tp-panel :after{box-sizing:border-box}.tp-panel button{font:inherit;margin:0}.tp-squircle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'%3E%3Cpath d='M32,0 C43.75,0 49.15,0 53.65,1.44 C58.15,2.88 61.12,5.85 62.56,10.35 C64,14.85 64,20.25 64,32 C64,43.75 64,49.15 62.56,53.65 C61.12,58.15 58.15,61.12 53.65,62.56 C49.15,64 43.75,64 32,64 C20.25,64 14.85,64 10.35,62.56 C5.85,61.12 2.88,58.15 1.44,53.65 C0,49.15 0,43.75 0,32 C0,20.25 0,14.85 1.44,10.35 C2.88,5.85 5.85,2.88 10.35,1.44 C14.85,0 20.25,0 32,0Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='none'%3E%3Cpath d='M32,0 C43.75,0 49.15,0 53.65,1.44 C58.15,2.88 61.12,5.85 62.56,10.35 C64,14.85 64,20.25 64,32 C64,43.75 64,49.15 62.56,53.65 C61.12,58.15 58.15,61.12 53.65,62.56 C49.15,64 43.75,64 32,64 C20.25,64 14.85,64 10.35,62.56 C5.85,61.12 2.88,58.15 1.44,53.65 C0,49.15 0,43.75 0,32 C0,20.25 0,14.85 1.44,10.35 C2.88,5.85 5.85,2.88 10.35,1.44 C14.85,0 20.25,0 32,0Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tp-press{transition:scale .15s var(--tp-ease);display:inline-flex}button:active>.tp-press,button:active>svg.tp-press{scale:.9}.tp-canvas-wrap{width:340px;height:339px;position:absolute;top:8px;left:8px}.tp-canvas{cursor:crosshair;touch-action:none;background-color:rgba(var(--tp-tone-rgb), .02);border-radius:6px;width:100%;height:100%;position:relative;overflow:hidden}.tp-canvas-dots{pointer-events:none;background-image:radial-gradient(circle, rgba(var(--tp-tone-rgb), .2) .55px, transparent .8px);background-size:4px 4px;position:absolute;inset:0}.tp-handle{z-index:20;opacity:.9;cursor:grab;transform-origin:50%;border:3.5px solid #fffc;border-radius:9999px;width:36px;height:36px;transition:scale .18s cubic-bezier(.16,1,.3,1);animation:.32s cubic-bezier(.22,1,.36,1) backwards tp-dot-spring;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 6px #0003}.tp-handle.is-active{opacity:1;border:4.5px solid #ffffffe6;width:45px;height:45px}.tp-handle:hover{opacity:1;scale:1.08;box-shadow:0 2px 8px #0000003d,0 1px 2px #00000014}.tp-handle:active{cursor:grabbing;scale:.96}@keyframes tp-dot-spring{0%{opacity:0;scale:0}60%{opacity:1;scale:1.08}80%{opacity:1;scale:.97}to{opacity:1;scale:1}}.tp-dragging,.tp-dragging *{cursor:grabbing!important}.tp-overlay{z-index:21;pointer-events:none;align-items:center;display:flex;position:absolute;left:50%;transform:translate(-50%)}.tp-overlay-top{gap:8px;top:24px}.tp-overlay-bottom{gap:12px;bottom:16.5px}.tp-overlay>*{pointer-events:auto}.tp-mode-btn,.tp-icon-btn,.tp-chevron{cursor:pointer;transition-property:color,background-color,border-color,fill,stroke;transition-duration:.15s;transition-timing-function:var(--tp-ease);background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.tp-mode-btn{width:32px;height:32px;color:color-mix(in oklab, var(--tp-fg) 55%, transparent)}.tp-mode-btn:hover{background-color:color-mix(in oklab, var(--tp-fg) 8%, transparent);color:color-mix(in oklab, var(--tp-fg) 85%, transparent)}.tp-mode-btn.is-active{background-color:color-mix(in oklab, var(--tp-fg) 10%, transparent);color:color-mix(in oklab, var(--tp-fg) 62%, transparent)}.tp-icon-btn{width:28px;height:28px;color:color-mix(in oklab, var(--tp-fg) 50%, transparent)}.tp-icon-btn:hover{background-color:color-mix(in oklab, var(--tp-fg) 8%, transparent);color:var(--tp-fg)}.tp-icon-btn:active{background-color:color-mix(in oklab, var(--tp-fg) 12%, transparent)}.tp-icon-btn:disabled{cursor:default}.tp-icon-btn:disabled:hover{color:color-mix(in oklab, var(--tp-fg) 50%, transparent);background-color:#0000}@keyframes tp-sparkle-pulse{0%,to{transform:scale(.7)}50%{transform:scale(1.15)}}@keyframes tp-sun-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tp-swatch-row{align-items:center;height:36px;padding:0 1.5px;display:flex;position:absolute;top:361.75px;left:8px;right:8px}.tp-chevron{width:28px;height:36px;color:color-mix(in oklab, var(--tp-fg) 40%, transparent)}.tp-chevron:hover{color:color-mix(in oklab, var(--tp-fg) 75%, transparent);background-color:color-mix(in oklab, var(--tp-fg) 8%, transparent)}.tp-swatch-clip{flex:1;min-width:0;height:100%;overflow-x:clip}.tp-swatches{justify-content:center;align-items:center;gap:5.5px;height:100%;display:flex}.tp-swatch{cursor:pointer;width:24px;height:24px;transition:scale .15s var(--tp-ease);border:0;border-radius:9999px;flex:none;padding:0;position:relative;box-shadow:inset 0 0 0 1.5px #0000001a}.tp-swatch:hover{scale:1.12}.tp-swatch.is-selected{scale:1.1}.tp-mode-btn:focus-visible,.tp-icon-btn:focus-visible,.tp-chevron:focus-visible,.tp-swatch:focus-visible,.tp-wave:focus-visible,.tp-dial:focus-visible{outline:2px solid color-mix(in oklab, var(--tp-fg) 50%, transparent);outline-offset:1px}.tp-slide-right{animation:.2s tp-slide-from-right}.tp-slide-left{animation:.2s tp-slide-from-left}@keyframes tp-slide-from-right{0%{opacity:0;translate:32px}}@keyframes tp-slide-from-left{0%{opacity:0;translate:-32px}}.tp-controls{width:356px;height:80px;position:absolute;top:412px;left:0}.tp-wave{cursor:pointer;touch-action:none;outline:none;width:224.5px;height:64px;position:absolute;top:8px;left:17.5px}.tp-wave svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.tp-wave svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}.tp-wave-done{stroke:rgba(var(--tp-tone-rgb), .47)}.tp-wave-rest{stroke:rgba(var(--tp-tone-rgb), .17)}.tp-wave-track{background-color:rgba(var(--tp-tone-rgb), .06);pointer-events:none;border-radius:9999px;height:16px;position:absolute;top:24px;left:0;right:0}.tp-wave-thumb{pointer-events:none;background-color:#ffffffeb;border-radius:9999px;width:24px;height:56px;position:absolute;top:4px;box-shadow:0 1px 4px #00000038}.tp-dial{cursor:pointer;touch-action:none;outline:none;width:80px;height:80px;position:absolute;top:0;left:258px}.tp-dial svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.tp-dial-dot{fill:rgba(var(--tp-tone-rgb), .16)}.tp-dial-dot.is-passed{fill:rgba(var(--tp-tone-rgb), .55)}.tp-dial-pill{fill:#fff}.tp-dial-track{fill:none;stroke:rgba(var(--tp-tone-rgb), .025);stroke-width:4px}.tp-dial-disc{border:1px solid rgba(var(--tp-tone-rgb), .16);pointer-events:none;border-radius:9999px;position:absolute;inset:20px;overflow:hidden}.tp-dial-texture{transition:transform .15s ease-out;position:absolute;inset:0}body.theme-panel-page,body.theme-panel-page #root{background:0 0;margin:0;overflow:hidden}.tp-window{padding:32px}.tp-float{isolation:isolate;background:#f4f4f4;border-radius:16px;width:356px;height:508px;animation:.14s cubic-bezier(.16,1,.3,1) tp-float-in;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000038,0 1px 3px #0000001f}@keyframes tp-float-in{0%{opacity:0;scale:.98}}.tp-float.appearance-dark,.appearance-dark .tp-float{background:#262626}.tp-backdrop{z-index:-1;filter:blur(28px);pointer-events:none;position:absolute;inset:0;transform:scale(1.06)}.tp-backdrop img{display:block;position:absolute}.tp-float:before{content:"";z-index:0;background:#f8f8f8d6;position:absolute;inset:0}.tp-float .tp-host{--tp-tone-rgb:0, 0, 0;--tp-fg:#1d1d1f}.appearance-dark .tp-float .tp-host,.tp-float.appearance-dark .tp-host{--tp-tone-rgb:255, 255, 255;--tp-fg:#f2f2f2}.tp-float:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #fff9,0 0 0 .5px #00000024}.appearance-dark .tp-float:after{box-shadow:inset 0 0 0 1px #ffffff1a}.tp-float .tp-host{z-index:1}.space-editor .tp-host .tp-panel{background:rgba(var(--tp-tone-rgb), .04);border-radius:16px}.appearance-dark .tp-swatch{filter:saturate(.72)brightness(.96)}.tp-moon .tp-star{transform-box:fill-box;transform-origin:50%}.tp-moon.is-active .tp-star{animation:1.8s ease-in-out infinite tp-twinkle}.tp-moon.is-active .tp-star.is-small{animation-delay:-.9s}@keyframes tp-twinkle{0%,to{opacity:1;transform:scale(1)rotate(0)}45%{opacity:.5;transform:scale(.45)rotate(20deg)}60%{opacity:1;transform:scale(1.12)rotate(0)}}@media (prefers-reduced-motion:reduce){.tp-moon.is-active .tp-star{animation:none}}.tp-float:before{background:#ececec94}.appearance-dark .tp-float:before{background:#60606080}.tp-float{background:0 0}.tp-float:not(:has(.tp-backdrop img)){background:#f2f2f2}.tp-backdrop{filter:blur(26px)saturate(1.3);transform:scale(1.1)}.tp-float{transform-origin:50% 0;animation:.24s linear tp-arc-open}@keyframes tp-arc-open{0%{opacity:0;transform:scale(.55)}10%{opacity:1;transform:scale(.64)}25%{transform:scale(.76)}42%{transform:scale(.9)}60%{transform:scale(.98)}75%{transform:scale(1.012)}to{opacity:1;transform:none}}.tp-float.is-closing{animation:.15s cubic-bezier(.4,0,1,1) forwards tp-arc-close}@keyframes tp-arc-close{to{opacity:0;transform:scale(.82)}}@media (prefers-reduced-motion:reduce){.tp-float,.tp-float.is-closing{animation-duration:1ms}}.arc-tooltip{z-index:2147483000;box-sizing:border-box;background:color-mix(in oklab, var(--accent-ink,#3f2a24) 6%, #fafafa);max-width:260px;height:28px;color:color-mix(in oklab, var(--accent-ink,#3f2a24) 12%, #161616);white-space:nowrap;pointer-events:none;border-radius:3px 14px 14px;align-items:center;gap:6px;padding:0 12px;font:500 13px/1 system-ui,-apple-system,sans-serif;animation:.14s ease-out both tip-in;display:flex;position:fixed;box-shadow:0 0 0 .5px #0000001f,0 3px 10px #00000024}.arc-tooltip.is-above{border-radius:14px 14px 14px 3px;transform:translateY(-100%)}.arc-keys{gap:3px;margin-left:4px;display:inline-flex}.arc-tooltip kbd{box-sizing:border-box;color:#1d1d1f9e;background:linear-gradient(#fff,#efeeeb);border-radius:5px;place-items:center;min-width:18px;height:18px;padding:0 4px;font:600 10.5px/1 system-ui,-apple-system,sans-serif;display:inline-grid;box-shadow:0 0 0 .5px #00000038,0 1.5px #00000024,inset 0 1px #ffffffe6}.appearance-dark .arc-tooltip{color:#f2f2f2;background:#2c2c2ef7;box-shadow:0 0 0 .5px #ffffff1f,0 3px 10px #0006}.appearance-dark .arc-tooltip kbd{color:#f2f2f2b3;background:linear-gradient(#4a4a4c,#3a3a3c);box-shadow:0 0 0 .5px #ffffff24,0 1.5px #00000080,inset 0 1px #ffffff1f}@keyframes tip-in{0%{opacity:0;margin-top:-2px}}
