*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0f;--sidebar-bg: #13131a;--sidebar-border: #222230;--text: #c8c8d8;--text-dim: #666678;--accent: #5b8dee;--accent-dim: #2a3d6e;--danger: #ee5b5b;--section-gap: 20px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:SF Mono,Fira Code,Menlo,monospace;font-size:12px}body{display:flex;flex-direction:column;height:100vh;overflow:hidden}#tab-bar{display:flex;flex-shrink:0;height:36px;background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border);padding:0 16px;align-items:flex-end}.tab-btn{padding:6px 18px;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;color:var(--text-dim);font:inherit;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;position:relative;top:1px;transition:color .15s}.tab-btn:hover{color:var(--text)}.tab-btn.active{background:var(--bg);border-color:var(--sidebar-border);border-bottom-color:var(--bg);color:var(--accent)}#app-row{display:flex;flex:1;min-height:0;overflow:hidden}#sidebar{width:240px;min-width:240px;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;gap:var(--section-gap);padding:20px 16px;overflow-y:auto}#sidebar h1{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:12px;border-bottom:1px solid var(--sidebar-border)}.control-group h2{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}.control{margin-bottom:10px}.control label{display:flex;justify-content:space-between;margin-bottom:4px;color:var(--text);font-size:11px}.control label span{color:var(--accent);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sidebar-border);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.mode-toggle{display:flex;gap:6px}.mode-btn{flex:1;padding:7px 0;background:transparent;border:1px solid var(--sidebar-border);border-radius:4px;color:var(--text-dim);font-family:inherit;font-size:11px;cursor:pointer;transition:all .15s}.mode-btn:hover{border-color:var(--accent-dim);color:var(--text)}.mode-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}#chaosBtn.active{background:var(--accent);color:#fff}#toggleSources{flex:none;padding:4px 10px}.actions{display:flex;flex-direction:column;gap:8px}.color-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.color-row label{font-size:11px;color:var(--text)}input[type=color]{width:32px;height:20px;border:1px solid var(--sidebar-border);border-radius:3px;background:none;cursor:pointer;padding:1px 2px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.undo-redo{display:flex;gap:8px}.undo-redo button{flex:1}button#randomize,button#chaosBtn,button#exportSvg,button#exportDirectionalSvg,button#exportMagneticPng,button#exportDirectionalPng,button#undoBtn,button#redoBtn,button#clear{width:100%;padding:8px 0;border-radius:4px;border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent);font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:all .15s}button#randomize:hover,button#chaosBtn:hover,button#exportSvg:hover,button#exportDirectionalSvg:hover,button#exportMagneticPng:hover,button#exportDirectionalPng:hover,button#undoBtn:hover,button#redoBtn:hover{background:var(--accent);color:#fff}button#randomize,button#chaosBtn,button#exportSvg,button#exportDirectionalSvg,button#exportMagneticPng,button#exportDirectionalPng{border-color:var(--accent);background:transparent;color:var(--accent)}.export-section{padding-top:16px;border-top:1px solid var(--sidebar-border);display:flex;flex-direction:column}.export-row{display:flex;gap:6px}.export-row button{flex:1}button#clear{border-color:var(--sidebar-border);background:transparent;color:var(--text-dim)}button#clear:hover{border-color:var(--danger);color:var(--danger)}.hint{font-size:10px;color:var(--text-dim);line-height:1.5;margin-top:8px}#canvas-container,#canvas-container-directional{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)}#canvas-container canvas,#canvas-container-directional canvas{display:block;cursor:crosshair}@media(max-width:700px){body{height:auto;overflow:auto}#app-row{flex-direction:column}#sidebar{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--sidebar-border);flex-direction:row;flex-wrap:wrap;gap:12px;padding:12px}#sidebar h1{width:100%;padding-bottom:8px}.control-group{min-width:140px}#canvas-container,#canvas-container-directional{min-height:400px}}