*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:system-ui,sans-serif;font-size:13px;background:#f5f5f5;color:#222}#app{display:flex;height:100vh}#controls-panel{width:280px;flex-shrink:0;overflow-y:auto;background:#fff;border-right:1px solid #ddd;padding:16px 14px 24px;display:flex;flex-direction:column;gap:4px}#controls-panel h2{font-size:15px;font-weight:700;margin-bottom:8px;color:#111}.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-top:14px;margin-bottom:4px}.section-spacer{margin-top:8px}.slider-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;margin-bottom:6px}.slider-label{font-size:12px;color:#444;white-space:nowrap}.slider{width:100%;accent-color:#333;cursor:pointer}.slider-value{font-size:11px;color:#666;min-width:36px;text-align:right}.layers-control{display:flex;flex-direction:column;gap:8px}.seg-control{display:flex;gap:2px}.seg-btn{flex:1;padding:4px 0;border:1px solid #ccc;background:#f5f5f5;font-size:12px;cursor:pointer;border-radius:3px}.seg-btn.active{background:#333;color:#fff;border-color:#333}.layer-rows{display:flex;flex-direction:column;gap:4px}.layer-row{display:flex;align-items:center;gap:8px}.colour-swatch{width:28px;height:22px;border:1px solid #ccc;border-radius:3px;padding:0;cursor:pointer}.layer-label{flex:1;font-size:12px}.eye-btn{background:none;border:none;cursor:pointer;padding:2px;color:#555;line-height:0}.eye-btn.hidden{color:#bbb}.toggle-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.toggle-opt{font-size:12px;color:#888}.toggle-opt.active{color:#222;font-weight:600}.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.slider-thumb{position:absolute;top:0;right:0;bottom:0;left:0;background:#ccc;border-radius:20px;cursor:pointer;transition:background .2s}.slider-thumb:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}.switch input:checked+.slider-thumb{background:#333}.switch input:checked+.slider-thumb:before{transform:translate(16px)}.join-control{display:flex;flex-direction:column;gap:4px}.seed-control{margin-bottom:4px;display:flex;gap:6px;align-items:stretch}.seed-input{flex:1;padding:5px 7px;border:1px solid #ccc;border-radius:4px;font-size:12px;font-family:monospace}.copy-btn{background:#f5f5f5;border:1px solid #ccc;border-radius:4px;padding:4px 8px;cursor:pointer;color:#555;line-height:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;white-space:nowrap;transition:background .15s}.copy-btn:hover{background:#e8e8e8}.actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}.btn-primary,.btn-secondary{width:100%;padding:9px;border:none;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer}.btn-primary{background:#222;color:#fff}.btn-primary:hover{background:#444}.btn-secondary{background:#eee;color:#333;border:1px solid #ccc}.btn-secondary:hover{background:#ddd}#canvas-container{flex:1;overflow:hidden;background:#fafafa;display:flex;align-items:stretch}#canvas-container svg{width:100%;height:100%}