:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1a1a1a;--bg-hover: #222222;--border-color: #2a2a2a;--border-hover: #3a3a3a;--text-primary: #e5e4e4;--text-secondary: #bebebe;--text-tertiary: #bababa;--text-muted: #707070;--accent: #dbdbdb;--success: #10b981}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden;background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#canvas-container{width:100vw;height:100vh;touch-action:none}#canvas-container canvas{touch-action:none}#controls{position:fixed;top:10px;left:10px;z-index:100;background:var(--bg-secondary);padding:16px;border-radius:12px;color:var(--text-primary);min-width:220px;width:220px;max-height:calc(100vh - 80px);overflow-y:auto;box-shadow:0 4px 20px #0006;border:1px solid var(--border-color);font-size:13px;contain:layout style}#view-buttons,#export-buttons{contain:layout style}#controls h1{font-size:1.1em;font-weight:600;margin-bottom:4px;color:var(--text-primary);display:flex;align-items:center;gap:6px}#controls .subtitle{font-size:.7em;color:var(--text-secondary);margin-bottom:12px}#controls .specs{font-size:.75em;color:var(--text-tertiary);padding:10px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:12px;border:1px solid var(--border-color)}#controls .specs div{margin:3px 0}#controls .specs strong{color:var(--text-primary)}#controls hr{border:none;border-top:1px solid var(--border-color);margin:12px 0}#controls label{display:block;font-size:.8em;margin-bottom:6px;color:var(--text-tertiary);font-weight:500}#controls select,#controls input[type=range]{width:100%;padding:12px 14px;margin-top:8px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:1em;cursor:pointer;transition:all .2s ease}#controls select:hover,#controls input[type=range]:hover{border-color:var(--border-hover);background:var(--bg-hover)}#controls select:focus,#controls input:focus{outline:none;border-color:var(--text-muted)}#controls .bay-display{text-align:center;font-size:1.1em;font-weight:600;color:var(--text-primary);margin:8px 0}#controls .length-display{text-align:center;font-size:.75em;color:var(--text-secondary)}.toggle-group{display:flex;gap:8px;margin-top:8px}.toggle-btn{flex:1;padding:8px 10px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-muted);border-radius:8px;cursor:pointer;font-size:.8em;font-weight:500;transition:all .2s ease}.toggle-btn.active{background:var(--bg-tertiary);border-color:#4caf50;color:var(--text-primary)}.toggle-btn:hover:not(.active){background:var(--bg-hover);border-color:var(--border-hover);color:var(--text-secondary)}#view-buttons{position:fixed;top:10px;right:10px;display:flex;gap:6px;max-width:320px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px}#view-buttons::-webkit-scrollbar{display:none}.view-btn{padding:8px 14px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.view-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--text-primary)}.view-btn.active{background:var(--bg-secondary);border-color:#4caf50;color:var(--text-primary)}.step-dot{width:20px;height:20px;border-radius:50%;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-muted);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.step-dot:hover{background:var(--bg-hover);border-color:var(--border-hover)}.step-dot.active{background:#4fc3f7;border-color:#4fc3f7;color:#000}.step-dot.completed{background:#81c784;border-color:#81c784;color:#000}.step-panel{box-sizing:border-box}.step-nav-btn{padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;cursor:pointer;font-size:.7em;transition:all .2s ease}.step-nav-btn:hover{background:var(--bg-hover);border-color:#4fc3f7;color:#4fc3f7}#packageUnitScroller::-webkit-scrollbar{display:none}#export-buttons{position:fixed;bottom:10px;left:10px;display:flex;gap:8px}.export-btn{padding:10px 18px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.export-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.export-btn:active{transform:scale(.98)}.export-btn.primary{background:var(--bg-tertiary);border-color:#4caf50;color:var(--text-primary)}.export-btn.primary:hover{background:var(--bg-hover);border-color:#81c784}.export-btn:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;border-color:var(--border-color);transform:none}.share-link-container{position:fixed;bottom:70px;right:10px;background:var(--bg-secondary);border:1px solid #4caf50;border-radius:8px;padding:12px;min-width:280px;max-width:400px;box-shadow:0 4px 20px #0006;z-index:1000}.share-link-box{display:flex;flex-direction:column;gap:8px}.share-label{font-size:12px;color:var(--success);font-weight:500}.share-input{width:100%;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:11px;font-family:monospace}.share-input:focus{outline:none;border-color:var(--text-muted)}.share-actions{display:flex;gap:8px;margin-top:4px}.copy-btn{flex:1;padding:8px 12px;background:var(--text-primary);border:none;border-radius:8px;color:var(--bg-primary);cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease}.copy-btn:hover{background:var(--text-secondary)}.close-share-btn{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:12px}.close-share-btn:hover{background:var(--bg-hover);border-color:var(--border-hover)}.share-message{color:var(--success);text-align:center;padding:8px;font-size:13px}#controls::-webkit-scrollbar{width:6px}#controls::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}#controls::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}#controls::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.website-link{display:block;text-align:center;color:var(--text-secondary);text-decoration:none;font-size:.8em;padding:10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;transition:all .2s ease}.website-link:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--text-primary)}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #4da6ff;outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:1024px){#controls{min-width:200px;padding:12px;font-size:.9em}#controls h1{font-size:1em}.toggle-btn,.view-btn,.export-btn{padding:6px 10px;font-size:.75em}}@media(max-width:768px){body{touch-action:pan-x pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#canvas-container{touch-action:manipulation}#controls{position:fixed;inset:auto 10px 0;width:auto;max-height:280px;min-width:unset;border-radius:16px 16px 0 0;padding:12px 16px;z-index:100;overflow-y:auto;font-size:13px;box-shadow:0 -4px 20px #00000080}#controls:before{content:"";display:block;width:40px;height:4px;background:var(--border-hover);border-radius:2px;margin:0 auto 10px}#controls h1{font-size:1.1em;margin-bottom:4px;text-align:center}#controls .subtitle{font-size:.75em;margin-bottom:8px;text-align:center}#controls .specs{font-size:.8em;padding:8px 10px;margin-bottom:10px}#controls hr{margin:10px 0}#controls label{font-size:.85em;margin-bottom:4px}#controls select{padding:10px 12px;font-size:1em}#view-buttons{position:fixed;inset:10px auto auto 10px;flex-direction:row;flex-wrap:nowrap;gap:4px;max-width:none;overflow-x:auto}.view-btn{padding:8px 12px;font-size:.8em;white-space:nowrap}#export-buttons{position:fixed;inset:10px 10px auto auto;flex-direction:row;gap:4px}.export-btn{padding:6px 10px;font-size:.7em;white-space:nowrap}.toggle-group{flex-wrap:wrap;gap:6px;margin-top:6px}.toggle-btn{flex:1 1 45%;min-width:70px;padding:10px 8px;font-size:.85em}#linearBayControls,#gridBayControls{padding:6px 0}.bay-display{font-size:1.1em!important;margin:6px 0!important}.length-display{font-size:.85em!important}select{width:100%}.share-link-container{position:fixed;bottom:300px;left:10px;right:10px;z-index:101}.website-link{padding:10px;font-size:.85em}#viewBack{display:none}}@media(max-width:480px){#controls{left:5px;right:5px;max-height:260px;padding:10px 12px}#controls h1{font-size:1em}.toggle-btn{flex:1 1 45%;padding:8px 6px;font-size:.8em}#view-buttons{gap:3px}.view-btn{padding:6px 10px;font-size:.75em}#export-buttons{top:10px;right:10px;gap:3px}.export-btn{padding:5px 8px;font-size:.65em}#viewTop{display:none}}@media(hover:none)and (pointer:coarse){.toggle-btn,.view-btn,.export-btn,select{min-height:44px}.toggle-btn:hover,.view-btn:hover,.export-btn:hover{background:inherit}.toggle-btn.active:hover{background:var(--bg-tertiary)}.toggle-btn:active,.view-btn:active,.export-btn:active{transform:scale(.96);opacity:.85}*{touch-action:manipulation}}