html,body{margin:0;height:100%;overflow:hidden;background:var(--app-bg)}#root{height:100dvh;box-sizing:border-box;color:var(--darkest);max-width:900px;margin:0 auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}:root{--darkest: #2d232e;--darker: #474448;--dark: #534b52;--transparent-dark: #323232d2;--middle: #ebebeb;--light: #eeeeee;--lighter: #f4f4f4;--lightest: #f7f7f7;--highlight: orange;--app-bg: var(--lighter);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(hover:hover){a:hover{color:var(--darker)}}button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:600;font-size:1em;padding:8px;border-radius:4px;font-style:italic;background:#fff;color:var(--darkest);border:1px solid var(--dark);box-shadow:2px 2px #000}button>svg{min-width:18px;max-width:18px;margin-right:6px}button.active{background:var(--lightest);border:2px solid var(--dark);box-shadow:none}@media(hover:hover){button:hover{cursor:pointer;background:var(--lighter);color:var(--darkest)}}*{user-select:none;-webkit-user-select:none}.tile{--border-color: var(--darkest);--background-color: white;display:grid;place-items:center;aspect-ratio:1/1;font-family:monospace;font-size:32px;border-radius:4px;background-color:var(--background-color);box-shadow:2px 2px 0 var(--border-color);border:3px solid var(--border-color)}.tile.active{--border-color: var(--highlight);--background-color: var(--lighter)}@media(hover:hover){.tile:hover{--background-color: var(--lighter) }}#root{text-align:center;height:100dvh;display:flex;flex-direction:column}#header{display:flex;padding-left:12px;padding-right:12px;text-align:left}#header>.back-button{display:flex;align-items:center;margin-left:auto;color:var(--dark)}#header>.back-button:hover{text-decoration:underline;cursor:pointer}#header>.back-button>svg{margin-right:4px;width:16px}h1{font-size:1.8em;margin-block-start:.2em;margin-block-end:.4em;font-family:monospace}#tool-container{display:flex;flex:1;flex-direction:column;width:100%;height:100%;align-items:center;justify-content:center}.tool-container{height:95%;width:95%}.tool-container.hidden{display:none}.tool-footer{display:flex;flex-direction:row;justify-content:center;gap:12px;padding:12px 12px 24px}.form{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.form-label{font-weight:700;font-size:1.2em;margin-bottom:4px}.form input{position:relative;letter-spacing:4px;width:90%;max-width:450px;border:none;border-bottom:2px solid var(--dark);text-align:center;font-size:1.8em;font-weight:700;line-height:1.4em;text-transform:uppercase;font-family:monospace;margin-bottom:8px;caret-color:var(--darkest);background-color:inherit}input:focus{outline:none}.tool-picker-container{display:flex;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:700}.tool-picker{--gap: 12px;display:flex;justify-content:center;align-items:center;gap:var(--gap);margin-bottom:8px;color:var(--darkest);background:var(--lightest);padding:4px;border-radius:8px;border:1px solid var(--darkest);box-shadow:0 1px 0 1px #000}.tool-picker-tool{position:relative;padding:8px;border-radius:4px;color:#777;cursor:pointer}@media(hover:hover){.tool-picker-tool:hover{color:var(--darkest);text-decoration:underline}}.tool-picker-tool:not(:last-child):after{content:"";position:absolute;right:calc(-1 * var(--gap) / 2);top:50%;width:1px;height:80%;background-color:#ddd;transform:translateY(-50%)}.tool-picker-tool.active{background-color:var(--middle);color:#000}.draggable-tile{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;transition:transform .1s ease;height:40px;width:40px}.draggable-tile.dragging{cursor:grabbing;background-color:var(--lighter);box-shadow:4px 4px #000;transition:none;z-index:999}.tile-canvas-container{position:relative;width:100%;height:100%}.tile-canvas{container-type:size;background-color:#f9f9f9;border-radius:4px;position:absolute;width:100%;height:100%}.tile-canvas .tile{position:absolute}#shadow-canvas{visibility:hidden;background:#7482ff77;position:absolute;width:100%;height:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:10px;color:#00f}.line-tool-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%;line-height:1}.line-tool-tile{--tile-size: 44px;flex-basis:var(--tile-size);min-width:0;margin-left:-3px;font-size:min(calc((100vw - 2 * var(--tile-size)) / var(--tile-count)),36px)}.line-tool-tile:not(:last-child){box-shadow:0 2px 0 0 var(--border-color)}.line-tool-tile.active{z-index:999!important}.line-tool-tile.dragging{box-shadow:2px 2px 0 var(--border-color);--tile-size: 50px}:root{--wheel-tile-width: 40px;--wheel-outline-width: calc(var(--wheel-tile-width) * 1.33)}.wheel-tool-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.wheel-boundary{position:relative;width:70%;max-width:400px;aspect-ratio:1/1}.wheel-boundary:before{content:"";position:absolute;width:calc(100% - var(--wheel-outline-width));aspect-ratio:1/1;border:var(--wheel-outline-width) solid lightgrey;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.wheel-tool-tile{position:absolute;translate:-50% -50%;width:var(--wheel-tile-width);height:var(--wheel-tile-width)}.wheel-tool-tile.active{z-index:999}.floating-tool-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.floating-tool-box{container-type:size;position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:500px;height:auto;aspect-ratio:1/1;background-color:var(--lightest);border:1px solid;border-color:var(--dark);border-radius:4px}.floating-tool-tile{width:40px;height:40px;position:absolute;will-change:translate}