:root{--color-bg0-h:#1d2021;--color-bg0:#282828;--color-bg1:#3c3836;--color-bg2:#504945;--color-bg3:#665c54;--color-bg4:#7c6f64;--color-fg0-h:#f9f5d7;--color-fg0:#fbf1c7;--color-fg1:#ebdbb2;--color-fg2:#d5c4a1;--color-fg3:#bdae93;--color-fg4:#a89984;--color-ac0:#cc241d;--color-ac0-h:#fb4934;--color-ac1:#98971a;--color-ac1-h:#b8bb26;--color-ac2:#d79921;--color-ac2-h:#fabd2f;--color-ac3:#458588;--color-ac3-h:#83a598;--color-ac4:#b16286;--color-ac4-h:#d3869b;--color-ac5:#689d6a;--color-ac5-h:#8ec07c;--color-ac6:#d65d0e;--color-ac6-h:#fe8019}.container{position:relative}.canvas-container{position:relative;width:100%;height:600px;flex-grow:1}canvas{display:block;background-color:#f9f5d7;border:1px solid #a89984;border-radius:15px;position:absolute;top:0;left:0;width:100%;height:100%}.btn{align-items:center;background-color:#282828;border:1px solid rgba(0,0,0,.1);border-radius:.75rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:iosevka;font-size:12px;font-weight:600;justify-content:center;line-height:1;margin:0;min-height:1rem;padding:calc(.875rem - 1px)calc(1.5rem - 1px);position:relative;text-decoration:none;transition:all 250ms;user-select:none;-webkit-user-select:none;touch-action:manipulation;vertical-align:baseline;width:auto}.btn:hover,.btn:focus{border-color:rgba(0,0,0,.15);box-shadow:rgba(0,0,0,.1)0 4px 12px;color:rgba(0,0,0,.65)}.btn:hover{transform:translateY(-1px)}.btn:active{background-color:#fbf1c7;border-color:rgba(0,0,0,.15);box-shadow:rgba(0,0,0,6%)0 2px 4px;color:rgba(0,0,0,.65);transform:translateY(0)}.button-container{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;margin-top:10px}.slider-group{display:grid;gap:30px;width:100%;grid-template-columns:1fr}.toggle-group{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}.toggle-btn{flex:none}input[type=range]{font-size:1.5rem;width:8.5em}input[type=range]{--thumb-height:1.125em;--track-height:0.125em;--track-color:rgba(0, 0, 0, 0.2);--brightness-hover:180%;--brightness-down:80%;--clip-edges:0.125em}.slider-container{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.slider-container label{display:inline-block;width:100px;text-align:left}.slider{flex:1;min-width:0}.slider-value{text-align:right;min-width:60px}.number-input{width:60px;margin-right:10px}input[type=range].slider{-webkit-appearance:none;appearance:none;width:200px;height:8px;background:0 0;cursor:pointer;--value-percent:70%}input[type=range].slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#cc241d 0%,#cc241d var(--value-percent),#a89984 var(--value-percent),#a89984 100%);border-radius:4px;border:none}input[type=range].slider::-moz-range-track{width:100%;height:8px;background:#ccc;border-radius:4px;border:none}input[type=range].slider::-moz-range-progress{height:8px;background-color:#cc241d;border-radius:4px;border:none}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-5px}input[type=range].slider::-moz-range-thumb{border:none}input[type=range].slider::-webkit-slider-thumb{height:16px;width:16px;background:#cc241d;border-radius:50%;border:none}input[type=range].slider::-moz-range-thumb{height:16px;width:16px;background:#555;border-radius:50%}