.slider-container{display:flex;flex-direction:column;max-width:360px;padding:8px 10px;border:1px solid var(--ui-border-color);border-radius:var(--ui-border-radius);background-color:var(--ui-background-color)}.slider-container>div{display:flex;justify-content:space-between;column-gap:24px;flex-wrap:wrap}.slider-description{margin-top:8px;font-size:14px}.slider{width:100%;height:6px;margin:8px 0;border-radius:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--ui-void-color);cursor:pointer}.slider::-webkit-slider-thumb{height:16px;width:16px;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cell-color);box-shadow:none}.slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cell-color);box-shadow:none}.switch{width:39px;height:26px;margin:0;flex-shrink:0;border-radius:72px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--ui-void-color);position:relative;cursor:pointer}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background-color:var(--ui-background-color);border-radius:50%}.switch,.switch:after{transition:all .1s ease-in-out}.switch:checked{background-color:var(--cell-color)}.switch:checked:after{left:16px;background-color:#fff}.switch-container{display:flex;align-items:center;gap:10px}.select-container{position:relative;align-self:flex-start;border:1px solid var(--ui-border-color);border-radius:var(--ui-border-radius);background-color:var(--ui-background-color)}.select-container:after{content:"";position:absolute;top:40%;right:10px;width:0;height:0;padding:3px;border:solid var(--text-color);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}.select-container label{position:absolute;top:6px;padding:0 10px;font-size:12px;text-wrap:nowrap;color:var(--text-color);cursor:pointer;pointer-events:none}select{padding:22px 34px 10px 10px;box-sizing:content-box;border:0px;border-radius:var(--ui-border-radius);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px;text-align:left;color:var(--text-color);background-color:transparent;cursor:pointer}option{color:initial}:root{--backdrop-color: #fff;--cell-color: #5cceee;--cell-highlight-color: #a33111;--cell-debug-color: #eee75c;--cell-debug-highlight-color: #ea7b21;--draw-guide: #ff0000;--grid-line-color: #d4d4d4;--text-color: #000;--ui-background-color: #fdfdfd;--ui-border-color: #d1d5db;--ui-void-color: #d0d4de;--github-mark: url(/pixel-shape-generator/github-mark.svg);--ui-border-radius: 8px}@media (prefers-color-scheme: dark){:root{--backdrop-color: rgb(9 9 11);--cell-color: #1186a6;--cell-highlight-color: #942c10;--cell-debug-color: #8e8e0e;--cell-debug-highlight-color: #875310;--draw-guide: #ff0000;--grid-line-color: #2f2f2f;--text-color: #dadada;--ui-background-color: rgb(24 24 27);--ui-border-color: #606060;--ui-void-color: #4e4e4e;--github-mark: url(/pixel-shape-generator/github-mark-white.svg)}}#repo-link{position:absolute;top:0;right:0;width:32px;height:32px;margin:16px;background-size:32px;background-image:var(--github-mark);background-repeat:no-repeat;border-radius:50%;text-indent:-99999px}span,label,p{color:var(--text-color)}html{width:100%;height:100%;font-family:system-ui,sans-serif}body{width:100%;height:100%;margin:0;background-color:var(--backdrop-color);scrollbar-color:var(--ui-void-color) var(--ui-background-color)}#root{display:flex;width:100%;height:100%}#output-container{position:relative;box-sizing:border-box;margin:16px;border:1px solid var(--ui-border-color);border-radius:var(--ui-border-radius);overflow:hidden;background-color:var(--ui-background-color);-webkit-user-select:none;user-select:none}#output-container>svg{position:absolute}#output-container>svg:not([data-layer-name=cells]){pointer-events:none}.cell{fill:var(--cell-color)}.cell.debug{fill:var(--cell-debug-color)}rect.highlighted{fill:var(--cell-highlight-color)}.cell.debug.highlighted{fill:var(--cell-debug-highlight-color)}.draw-guide{stroke:var(--draw-guide);stroke-width:.1;fill:none;pointer-events:none}.grid-line{stroke:var(--grid-line-color)}#scale{position:absolute;bottom:0;left:0;margin:4px;line-height:16px;font-size:16px;pointer-events:none;transition:opacity .2s}button:hover{touch-action:manipulation}button{width:fit-content;padding:10px;border:1px solid var(--ui-border-color);border-radius:var(--ui-border-radius);background-color:var(--ui-background-color);color:var(--text-color);font-size:16px;cursor:pointer}#zoom-controls{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;margin:16px}#zoom-controls>button{margin:0;padding:4px 10px;border:1px solid var(--ui-border-color);border-radius:0;font-size:24px;background-color:var(--ui-background-color);color:var(--text-color)}#zoom-controls>button:first-child{border-bottom-width:0;border-radius:var(--ui-border-radius) var(--ui-border-radius) 0 0}#zoom-controls>button:last-child{border-radius:0 0 var(--ui-border-radius) var(--ui-border-radius)}#pointer-coords{position:absolute;top:0;left:0;margin:4px;line-height:16px;font-size:16px;pointer-events:none}#cell-count{position:absolute;top:0;right:0;margin:4px;line-height:16px;font-size:16px;pointer-events:none;transition:opacity .2s}#settings-container{display:flex;flex-direction:column;flex:1;gap:16px;position:relative;padding:16px;overflow-y:auto;overscroll-behavior:contain}#download-buttons{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}@media (orientation: landscape){#root{flex-direction:row}#output-container{flex:2;max-width:60%;margin-right:0}}@media (orientation: portrait){#root{flex-direction:column}#output-container{width:100%;aspect-ratio:1;max-height:60%;margin:0;border-width:1px 0 1px 0;border-radius:0}}