:root{--bg-main:#131417;--text-light:white;--text-dark:#131417;--accent:#f9de60;--button-bg:#333;--button-hover:#444;--input-bg:#222;--border-light:#444;--border-dark:#2f2f2f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}.no-select{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.scale-150{transform:scale(1.5)}.highlight{color:var(--accent)}body{background-color:var(--bg-main);color:var(--text-light);height:100dvh;margin:0}#app{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.canvas-container{aspect-ratio:5/4;width:100%;max-width:500px;margin:16px 0;position:relative}.static-canvas,.dynamic-canvas{width:100%;height:100%;position:absolute;inset:0}.toggle-button{border:none;width:76px;padding:10px 0}:is(.toggle-button,.curve-picker,.duration>button){text-transform:capitalize;background-color:var(--button-bg);cursor:pointer;color:var(--text-light);border-radius:5px;font-size:15px;transition:background-color .3s,border-color .3s}:is(.toggle-button,.curve-picker,.duration>button):hover{background-color:var(--button-hover)}:is(.toggle-button,.curve-picker,.duration>button):active{opacity:.8}.controls{justify-content:center;gap:12px;display:flex}.curve-title{text-transform:capitalize;margin:0 0 8px;padding:0}.curve-picker{appearance:none;background-color:var(--input-bg);border:1px solid var(--border-light);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-chevron-down-icon%20lucide-chevron-down'%3e%3cpath%20d='m6%209%206%206%206-6'/%3e%3c/svg%3e");background-position:right 10px center;background-repeat:no-repeat;background-size:1.1rem;padding:10px 35px 10px 15px}.progress{color:var(--accent);font-weight:600;transition:transform .2s ease-in-out}.main-header{justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;top:16px;right:16px}.onboard-button{cursor:pointer;background:0 0;border:none;margin:0;padding:0}.onboard-button>img{width:26px;height:26px}.github-link>img{width:24px;height:24px}.duration{justify-content:center;align-items:center;gap:4px;display:flex}.duration-display{border:1px solid var(--border-dark);border-radius:5px;justify-content:center;align-items:center;width:48px;padding:8px 0;font-size:15px;display:flex}.duration>button{border:none;place-items:center;padding:10px;display:grid}.duration>button:disabled{opacity:.5;pointer-events:none}.progress,.control-points{font-family:Source Code Pro,Consolas,monospace;font-style:italic}.control-points{color:#696969;grid-template-rows:repeat(3,1em);grid-template-columns:repeat(2,minmax(98px,1fr));gap:6px;padding-top:20px;font-size:12px;display:grid}.control-points span{transition:color .1s ease-in-out}.css-output-container{width:min(100%,348px);position:relative}.css-output{color:var(--accent);background-color:var(--input-bg);border:1px solid var(--border-light);-webkit-user-select:none;user-select:none;cursor:pointer;text-align:center;border-radius:5px;padding:10px 4px;font-family:Source Code Pro,Consolas,monospace;font-size:14px;transition:background-color .2s ease-in-out;display:block}.css-output:hover{background-color:var(--button-hover)}.css-output:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.css-copied-indicator{min-height:14.4px;color:var(--accent);opacity:0;pointer-events:none;padding-bottom:4px;font-size:12px;line-height:1.2;transition:opacity .3s;display:block}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:.2s ease-in-out animate-fade-in}.driver-fade .driver-popover{animation:.2s animate-fade-in}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,Apple Color Emoji,Helvetica,Arial,sans-serif}.driver-popover-title{zoom:1;margin:0;font:700 19px/1.5 sans-serif;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font:400 14px/1.5 sans-serif}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer button{all:unset;box-sizing:border-box;text-shadow:1px 1px #fff;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font:12px/1.3 sans-serif;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{margin-top:-5px;top:50%}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{margin-left:-5px;left:50%}.driver-popover-arrow-none{display:none}.control-point-popover{translate:0 40px}@media (hover:none) and (pointer:coarse){.control-point-popover{translate:0 -30px}.curve-picker-popover .driver-popover-arrow{right:auto;translate:48px}}.onboard-theme.driver-popover{background-color:var(--accent);color:var(--text-dark)}.onboard-theme .driver-popover-arrow-side-left{border-left-color:var(--accent)}.onboard-theme .driver-popover-arrow-side-right{border-right-color:var(--accent)}.onboard-theme .driver-popover-arrow-side-top{border-top-color:var(--accent)}.onboard-theme .driver-popover-arrow-side-bottom{border-bottom-color:var(--accent)}.onboard-theme .driver-popover-close-btn{color:var(--text-dark)}.onboard-theme .driver-popover-footer button{background-color:var(--bg-main);color:var(--text-light);text-shadow:none;border:none;padding:6px 8px}.onboard-theme .driver-popover-footer button:hover{opacity:.9;background-color:var(--bg-main)}.onboard-theme .driver-popover-progress-text{color:var(--text-dark)}