*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1a1a1a;background:#fafafa;height:100vh;overflow:hidden}#loading{text-align:center;padding:4rem 1rem;color:#666;font-size:1.1rem}.layout{display:grid;grid-template-columns:300px 1fr;height:100vh}.controls-panel{padding:1.5rem;border-right:1px solid #e0e0e0;overflow-y:auto;height:100vh;background:#fff;display:flex;flex-direction:column}.controls-panel h1{font-size:1.15rem;font-weight:600;margin-bottom:1.25rem;color:#1a1a1a}.control-section{margin-bottom:1.25rem}.section-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888;margin-bottom:.5rem}.control-row{display:flex;gap:.75rem;align-items:flex-end}.size-preset-group{flex:1}.size-preset-label{font-size:.8rem;font-weight:500;color:#444}.size-toggle{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem}.size-option{min-width:0;padding:.35rem .2rem .3rem;border:1px solid #d2d2d2;border-radius:6px;background:#fff;color:#555;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.05rem;font-size:.9rem;font-weight:650;line-height:1.1;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}.size-option small{color:#999;font-size:.65rem;font-weight:500}.size-option:hover{border-color:#4a90d9}.size-option.active{border-color:#4a90d9;background:#eef6ff;color:#2169a8;box-shadow:inset 0 0 0 1px #4a90d9}.size-option.active small{color:#4a90d9}.size-dimensions{color:#777;font-size:.72rem;line-height:1.2}.piece-count-row{margin-bottom:.5rem}.piece-count-row input[type=number]{width:100%}.pill-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;vertical-align:middle}.pill-toggle input[type=checkbox]{display:none}svg.pill-icon{width:14px;height:14px;opacity:.4;color:currentColor;transition:opacity .15s;flex-shrink:0}.pill-toggle.active svg.pill-icon{opacity:.85}.pill-toggle .lock-shackle{transform:translateY(0);transition:transform .2s}.pill-toggle.active .lock-shackle{transform:translateY(-1px)}.pill-toggle-sm svg.pill-icon{width:12px;height:12px}.pill-track{position:relative;width:26px;height:14px;background:#ccc;border-radius:7px;transition:background .2s}.pill-toggle.active .pill-track{background:#4a90d9}.pill-knob{position:absolute;top:2px;left:2px;width:10px;height:10px;background:#fff;border-radius:50%;transition:left .2s}.pill-toggle.active .pill-knob{left:14px}.pill-toggle-sm .pill-track{width:22px;height:12px;border-radius:6px}.pill-toggle-sm .pill-knob{width:8px;height:8px;top:2px;left:2px}.pill-toggle-sm.active .pill-knob{left:12px}.label-with-toggle{display:inline-flex;align-items:center;gap:6px}.piece-size-warning{font-size:.75rem;color:#e67e22;margin-top:.35rem;line-height:1.3;list-style:disc;padding-left:1.25rem}.piece-size-warning:empty{display:none}.input-group{display:flex;flex-direction:column;gap:.25rem}.input-group label{font-size:.8rem;font-weight:500;color:#444}input[type=number]{width:80px;padding:.4rem .5rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#fff;color:#1a1a1a}input[type=number]:focus{outline:none;border-color:#4a90d9;box-shadow:0 0 0 2px #4a90d933}input[type=text]{padding:.4rem .5rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#fff;color:#1a1a1a}input[type=text]:focus{outline:none;border-color:#4a90d9;box-shadow:0 0 0 2px #4a90d933}select{padding:.4rem .5rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#fff;color:#1a1a1a;cursor:pointer}select:focus{outline:none;border-color:#4a90d9;box-shadow:0 0 0 2px #4a90d933}.slider-group{margin-bottom:.75rem}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.slider-label label{font-size:.8rem;font-weight:500;color:#444}.readout{font-size:.8rem;font-variant-numeric:tabular-nums;color:#555;min-width:3ch;text-align:right}input[type=range]{width:100%;accent-color:#4a90d9;cursor:pointer}.range-slider-container{position:relative;height:1.5rem}.range-slider-container:before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;background:var(--range-bg, #ddd);border-radius:2px;pointer-events:none}.range-slider-container input[type=range]{position:absolute;width:100%;top:50%;transform:translateY(-50%);margin:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;z-index:1}.range-slider-container input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent}.range-slider-container input[type=range]::-moz-range-track{height:4px;background:transparent}.range-slider-container input[type=range]::-webkit-slider-thumb{pointer-events:all;-webkit-appearance:none;appearance:none;height:16px;width:16px;border-radius:50%;background:#4a90d9;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px #0003;position:relative;z-index:2}.range-slider-container input[type=range]::-moz-range-thumb{pointer-events:all;height:16px;width:16px;border-radius:50%;background:#4a90d9;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px #0003}.seed-row{display:flex;gap:.5rem}.seed-row input[type=text]{flex:1;min-width:0}.seed-row button{padding:.4rem .65rem;font-size:1rem;flex-shrink:0}.actions{margin-top:auto;padding-top:1rem;display:flex;flex-direction:column;gap:.5rem}.btn-primary{width:100%;padding:.55rem 1rem;border:none;border-radius:6px;background:#4a90d9;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#3a7bc8}.btn-primary:active{background:#2d6bb5}.btn-secondary{width:100%;padding:.55rem 1rem;border:1px solid #ccc;border-radius:6px;background:#fff;color:#444;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}.btn-secondary:hover{background:#f5f5f5;border-color:#bbb}.btn-secondary:active{background:#eee}.preview-area{display:flex;flex-direction:column;padding:1rem 2rem;overflow:hidden;background:#fafafa;height:100vh}.ruler-grid{display:grid;grid-template-columns:var(--ruler-size) 1fr;grid-template-rows:var(--ruler-size) 1fr;flex:1;min-height:0;--ruler-size: 26px}.ruler-corner{grid-column:1;grid-row:1;background:#f4f4f4;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0}.ruler-h,.ruler-v{display:block;background:#f4f4f4;user-select:none}.ruler-h{grid-column:2;grid-row:1;width:100%;height:var(--ruler-size);border-bottom:1px solid #d0d0d0}.ruler-v{grid-column:1;grid-row:2;width:var(--ruler-size);height:100%;border-right:1px solid #d0d0d0}#svg-viewport{flex:1;overflow:hidden;position:relative;cursor:grab;border:1px solid #e8e8e8;border-radius:4px;background:#fff;contain:layout style paint}#svg-viewport:active{cursor:grabbing}#puzzle-canvas{display:block;width:100%;height:100%}.preview-footer{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 0;flex-shrink:0}#zoom-controls{display:flex;align-items:center;gap:.35rem}#zoom-controls button{width:28px;height:28px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#444;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}#zoom-controls button:hover{background:#f5f5f5;border-color:#bbb}#zoom-level{font-size:.75rem;color:#666;min-width:3.5ch;text-align:center;font-variant-numeric:tabular-nums}#piece-count{font-size:.85rem;color:#555}#piece-count:empty{display:none}#error-display{color:#c0392b;font-weight:500;font-size:.9rem;margin-top:.5rem;display:none}.section-header{display:flex;align-items:center;gap:.5rem}.section-add-btn{margin-left:auto;width:22px;height:22px;border:1px solid #ccc;border-radius:50%;background:#fff;color:#444;font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .15s,border-color .15s,color .15s}.toggle-row{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.8rem;color:#555}.toggle-row-label{flex:1;cursor:pointer}.section-add-btn:hover{background:#4a90d9;border-color:#4a90d9;color:#fff}.whimsy-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.whimsy-list:empty:before{content:"No whimsies — click + to add one.";display:block;font-size:.75rem;color:#999;font-style:italic;padding:.25rem 0}.whimsy-card{border:1px solid #e0e0e0;border-radius:6px;padding:.5rem .65rem;background:#fafafa}.whimsy-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.whimsy-name{font-weight:500;font-size:.85rem;text-transform:capitalize;flex:1}.whimsy-delete{background:transparent;border:none;color:#999;font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px;transition:background .15s,color .15s}.whimsy-delete:hover{background:#fde5e5;color:#c0392b}.whimsy-control{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.75rem;color:#555}.whimsy-control label{flex:0 0 5.5rem}.whimsy-control input[type=range]{flex:1}.whimsy-control input[type=number]{width:4.5rem}.whimsy-control .value-readout{min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums;color:#666}.shape-picker{border:none;border-radius:10px;padding:0;box-shadow:0 10px 30px #00000040;background:#fff;max-width:420px;width:90vw}.shape-picker::backdrop{background:#0006}.shape-picker-form{display:flex;flex-direction:column}.shape-picker-header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #eee}.shape-picker-header h3{margin:0;font-size:1rem;font-weight:500;flex:1}.close-btn{background:transparent;border:none;font-size:1.3rem;color:#888;cursor:pointer;line-height:1;padding:4px 8px;border-radius:4px}.close-btn:hover{background:#f0f0f0}.shape-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:1rem}.shape-option{aspect-ratio:1;border:1px solid #ddd;border-radius:8px;background:#fff;color:#333;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s}.shape-option:hover{background:#eff6ff;border-color:#4a90d9;color:#4a90d9}.shape-option:active{transform:scale(.97)}@media(max-width:768px){body{overflow:auto;height:auto}.layout{grid-template-columns:1fr;height:auto}.controls-panel{height:auto;border-right:none;border-bottom:1px solid #e0e0e0}.preview-area{height:auto;min-height:50vh;padding:1rem}#svg-viewport{min-height:40vh}.preview-footer{flex-wrap:wrap;gap:.5rem}.actions{margin-top:1rem}}