:root{color:#f3efe6;background:#241f1b;font-family:Avenir Next,Segoe UI,sans-serif;--control-height: 40px;--control-font: 600 12px "Avenir Next", "Segoe UI", sans-serif;--rail: calc(var(--control-height) + 17px)}*{box-sizing:border-box}html,body{background:#241f1b;overscroll-behavior:none}body{margin:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}input{-webkit-user-select:text;user-select:text}#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}header{position:relative;z-index:5;display:flex;align-items:center;height:60px;padding:0 16px 0 0;flex-shrink:0;min-width:0;border-bottom:1px solid #3d342c}#logo-holder{position:relative;flex-shrink:0}#logo-button{display:block;padding:0;background:transparent;border:0;cursor:pointer}#logo-menu{position:absolute;top:calc(100% + 6px);left:8px;display:flex;flex-direction:column;gap:2px;min-width:190px;padding:6px;background:#241f1b;border:1px solid #3d342c;border-radius:8px;box-shadow:0 8px 24px #00000059}#logo-menu[hidden]{display:none}#logo-menu button,#logo-menu a{display:flex;align-items:center;height:36px;padding:0 12px;color:#f3efe6;background:transparent;border:0;border-radius:6px;font:600 14px Avenir Next,Segoe UI,sans-serif;text-align:left;text-decoration:none;cursor:pointer}#logo-menu button:hover,#logo-menu a:hover{background:#3d342c}#logo-menu button:disabled{opacity:.5;cursor:progress}#logo-menu a{margin-top:4px;border-top:1px solid #3d342c;border-radius:0 0 6px 6px}#logo{display:block;width:46px;height:46px;margin-left:calc((var(--rail) - 46px) / 2);object-fit:contain;flex-shrink:0}#banner{display:flex;align-items:center;gap:6px;height:var(--control-height);margin-left:8px;padding-left:12px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-left:1px solid #3d342c}#banner::-webkit-scrollbar{display:none}#banner>*{flex-shrink:0}#banner [data-banner-probe]{position:absolute;display:flex;gap:6px;visibility:hidden;pointer-events:none}#banner button{height:var(--control-height);padding:0 12px;color:#f3efe6;background:transparent;border:1px solid transparent;border-radius:6px;font:var(--control-font);cursor:pointer}#banner button:hover,#banner select:hover{background-color:#3d342c}#banner button[aria-pressed=true]{color:#1c1916;background:#fff;border-color:#fff}#banner button[aria-pressed=true]:hover{background:#fff}#banner [data-banner-group]{display:flex;align-items:center;gap:6px;margin-left:8px;padding-left:12px;border-left:1px solid #3d342c}#banner [data-banner-group]:first-child{margin-left:0;padding-left:0;border-left:0}#banner select{height:var(--control-height);margin:0;padding:0 30px 0 12px;color:#f3efe6;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f3efe6' stroke-width='1.6' d='M1 1.5 L6 6.5 L11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px;border:1px solid #3d342c;border-radius:6px;font:var(--control-font);cursor:pointer;appearance:none}#banner select option{color:#1c1916;background:#fff}#workspace{flex:1;min-height:0;display:flex}#tools{display:flex;flex-direction:column;gap:6px;width:var(--rail);padding:8px;flex-shrink:0;overflow-y:auto;scrollbar-width:none;border-right:1px solid #3d342c}#tools button{flex-shrink:0;width:var(--control-height);height:var(--control-height);padding:0;display:grid;place-items:center;color:#f3efe6;background:transparent;border:1px solid transparent;border-radius:6px;font:var(--control-font);cursor:pointer}#tools button[aria-pressed=true]{color:#1c1916;background:#fff}#tool-gap{height:1px;margin:8px 4px;background:#3d342c}#spacing,#leave,#resize{max-width:calc(100vw - 32px);padding:20px;color:#f3efe6;background:#241f1b;border:1px solid #3d342c;border-radius:8px}#spacing::backdrop,#leave::backdrop,#resize::backdrop{background:#00000059}#spacing form,#leave form,#resize form{display:flex;flex-direction:column;gap:12px;min-width:min(280px,100%)}#leave form{max-width:320px}#spacing label,#spacing p,#leave p,#resize label,#resize p{margin:0}#resize label:not(:has(input[type=checkbox])){display:flex;align-items:center;justify-content:space-between;gap:12px}#resize input[type=checkbox],#spacing input[type=radio],#spacing input[type=checkbox]{margin-right:8px}#spacing label:has(input:disabled){opacity:.45}#spacing input[name=holes],#resize input[inputmode]{height:32px;padding:0 8px;color:#1c1916;background:#fff;border:1px solid #3d342c;border-radius:4px}#resize input[inputmode]{width:8em}#spacing-error,#resize-error{min-height:1.2em;color:#e7b3a2}#spacing form>div,#leave form>div,#resize form>div{display:flex;justify-content:center;gap:8px}#spacing button,#leave button,#resize button{height:32px;padding:0 14px;color:#f3efe6;background:transparent;border:1px solid #3d342c;border-radius:6px;cursor:pointer}#spacing-apply,#leave #leave-go,#resize #resize-apply{color:#1c1916;background:#fff}#canvas{flex:1;min-width:0;background:#fff;overflow:hidden;touch-action:none}#canvas svg{width:100%;height:100%;display:block;background:#fff;cursor:crosshair;touch-action:none}#preview{pointer-events:none}@media(pointer:coarse){:root{--control-height: 44px}#logo-menu button,#logo-menu a,#spacing button,#spacing input[name=holes],#resize button,#resize input[inputmode]{height:44px}#spacing input[name=holes]{font-size:16px}}@media(max-width:640px){header{height:52px;padding-right:8px}#logo{width:36px;height:36px;margin-left:calc((var(--rail) - 36px) / 2)}#banner{margin-left:6px;padding-left:8px}#banner button{padding:0 10px}}#debug-badge{position:fixed;left:calc(8px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));z-index:4;padding:2px 8px;color:#1c1916;background:#f0c36a;border-radius:4px;font:600 12px Avenir Next,Segoe UI,sans-serif;pointer-events:none}#object-actions,#hole-match{position:fixed;z-index:3;display:flex;gap:4px;padding:4px;background:#241f1b;border:1px solid #3d342c;border-radius:calc(var(--control-height) / 2 + 5px);box-shadow:0 2px 8px #00000040}#object-actions[hidden],#hole-match[hidden]{display:none}#object-actions button,#hole-match button{height:var(--control-height);padding:0 12px;color:#f3efe6;background:transparent;border:0;border-radius:calc(var(--control-height) / 2);font:var(--control-font);cursor:pointer}#object-actions button:hover,#hole-match button:hover{background:#3d342c}#finish-path{position:fixed;z-index:3;height:var(--control-height);padding:0 14px;color:#f3efe6;background:#241f1b;border:1px solid #3d342c;border-radius:calc(var(--control-height) / 2);box-shadow:0 2px 8px #00000040;font:var(--control-font);cursor:pointer}#finish-path[hidden]{display:none}@media(pointer:coarse){input,select,textarea{font-size:16px}}@media(orientation:portrait)and (max-width:820px){:root{--topbar: 60px}#workspace{flex-direction:column-reverse}header{order:1;border-bottom:0;border-top:1px solid #3d342c;height:calc(var(--topbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}#tools{flex-direction:row;justify-content:space-evenly;align-items:center;gap:0;width:auto;padding:6px 4px;border-right:0;border-top:1px solid #3d342c;overflow-x:auto;overflow-y:hidden}#tools button{width:40px}#tool-gap{flex-shrink:0;width:1px;height:28px;margin:0 2px}#logo-menu{top:auto;bottom:calc(100% + 6px)}}@media(orientation:portrait)and (max-width:640px){:root{--topbar: 52px}}#canvas [data-merged-hidden]{visibility:hidden}#banner [data-banner=close],#object-actions [data-action=close]{color:#4ade80}