:root{color:#f3efe6;background:#241f1b;font-family:Avenir Next,Segoe UI,sans-serif;--rail: 57px}*{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{display:flex;align-items:center;height:60px;padding:0 16px 0 0;flex-shrink:0;min-width:0;border-bottom:1px solid #3d342c}#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:36px;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:36px;padding:0 14px;color:#f3efe6;background:transparent;border:1px solid transparent;border-radius:6px;font:600 15px Avenir Next,Segoe UI,sans-serif;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:36px;margin:0;padding:0 32px 0 14px;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:600 15px Avenir Next,Segoe UI,sans-serif;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}#tools button{width:40px;height:40px;padding:0;display:grid;place-items:center;color:#f3efe6;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer}#tools button svg{width:22px;height:22px}#tools button svg *{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#tools button[aria-pressed=true]{color:#1c1916;background:#fff}#tool-gap{height:1px;margin:8px 4px;background:#3d342c}#add-holes svg circle{fill:currentColor;stroke:none}#spacing{max-width:calc(100vw - 32px);padding:20px;color:#f3efe6;background:#241f1b;border:1px solid #3d342c;border-radius:8px}#spacing::backdrop{background:#00000059}#spacing form{display:flex;flex-direction:column;gap:12px;min-width:min(280px,100%)}#spacing label,#spacing p{margin:0}#spacing input[type=radio],#spacing input[type=checkbox]{margin-right:8px}#spacing label:has(input:disabled){opacity:.45}#spacing input[name=holes]{height:32px;padding:0 8px;color:#1c1916;background:#fff;border:1px solid #3d342c;border-radius:4px}#spacing-error{min-height:1.2em;color:#e7b3a2}#spacing form>div{display:flex;justify-content:center;gap:8px}#spacing button{height:32px;padding:0 14px;color:#f3efe6;background:transparent;border:1px solid #3d342c;border-radius:6px;cursor:pointer}#spacing-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}#modifiers{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:6px;z-index:3;padding:6px;background:#241f1b;border-radius:8px}#modifiers button{height:36px;min-width:36px;padding:0 12px;color:#f3efe6;background:transparent;border:1px solid #3d342c;border-radius:6px;font:600 13px Avenir Next,Segoe UI,sans-serif;cursor:pointer}#modifiers button[aria-pressed=true]{color:#1c1916;background:#fff;border-color:#fff}#modifiers svg{display:block;width:20px;height:20px}#modifiers svg *{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#modifiers button.history{display:grid;place-items:center}@media(pointer:coarse){:root{--rail: 61px}#tools button{width:44px;height:44px}#banner,#banner button,#banner select{height:44px}#modifiers button{height:44px;min-width:44px}#spacing button,#spacing input[name=holes]{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;font-size:14px}#banner select{font-size:14px}}#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{position:fixed;z-index:3;display:flex;gap:4px;padding:4px;background:#241f1b;border:1px solid #3d342c;border-radius:22px;box-shadow:0 2px 8px #00000040}#object-actions[hidden]{display:none}#object-actions button{height:36px;padding:0 14px;color:#f3efe6;background:transparent;border:0;border-radius:18px;font:600 14px Avenir Next,Segoe UI,sans-serif;cursor:pointer}#object-actions button:hover{background:#3d342c}@media(pointer:coarse){#object-actions button{height:40px}}#finish-path{position:fixed;z-index:3;height:44px;padding:0 16px;color:#f3efe6;background:#241f1b;border:1px solid #3d342c;border-radius:22px;box-shadow:0 2px 8px #00000040;font:600 15px Avenir Next,Segoe UI,sans-serif;cursor:pointer}#finish-path[hidden]{display:none}@media(pointer:coarse){#banner select,input,select,textarea{font-size:16px}}