:root{--bg:#101014;--panel:#18181f;--border:#2a2a35;--text:#e8e8ee;--text-dim:#9a9aa8;--accent:#6366f1}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,sans-serif;font-size:14px}.app{min-height:100vh;display:flex}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:20px;width:320px;height:100vh;padding:16px;transition:width .2s;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar.collapsed{width:48px;padding:12px 8px;overflow:hidden}.brand-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.sidebar-toggle{border-radius:6px}.brand-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.brand{margin:0;font-family:Caesar Dressing,system-ui,sans-serif;font-size:30px;font-weight:400}.help-open,.sidebar-toggle{flex-shrink:0;width:24px;height:24px;padding:0;font-weight:700;line-height:1}.help-open{border-radius:50%}.help-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.help-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:100%;max-width:460px;max-height:calc(100vh - 48px);padding:24px;position:relative;overflow-y:auto}.help-close{border-radius:6px;width:28px;height:28px;padding:0;font-size:18px;line-height:1;position:absolute;top:12px;right:12px}.help-intro{margin:0 0 20px;padding-right:28px}.help-group{margin-top:16px}.help-group h3{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:0 0 4px;font-size:11px;font-weight:700}.help-group p{color:var(--text-dim);margin:0;line-height:1.5}.help-group strong{color:var(--text);font-weight:600}.help-group code{color:var(--text)}.main{flex:1;min-width:0;padding:16px}.toolbar{align-items:center;gap:16px;margin-bottom:16px;display:flex}.slot-number{color:var(--text-dim);margin-right:auto;padding-left:4px}button{background:var(--panel);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:5px 10px;font-size:13px}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);font-weight:600}button.locked{border-color:var(--accent)}.stepper{color:var(--text-dim);align-items:center;gap:8px;display:flex}.stepper-value{color:var(--text);text-align:center;min-width:20px}.section{flex-direction:column;gap:8px;display:flex}.section h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0;font-size:11px}.row{align-items:center;gap:8px;display:flex}label.control{color:var(--text-dim);flex-direction:column;gap:4px;font-size:12px;display:flex}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;width:28px;height:28px;padding:0}input[type=text],input[type=number],textarea,select{background:var(--bg);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:6px;width:100%;padding:5px 8px}input[type=number]{appearance:textfield}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.swatch-item{flex-direction:column;align-items:center;gap:4px;display:flex}.swatch-lock{width:28px;padding:2px 0;font-size:11px;line-height:1}.swatch-row{flex-wrap:wrap;gap:6px;display:flex}.swatch{border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:0;display:flex;overflow:hidden}.swatch span{width:16px;height:24px}.sidebar-footer{border-top:1px solid var(--border);color:var(--text-dim);margin-top:auto;padding-top:12px;font-size:12px;line-height:1.5}.sidebar-footer>div+div{margin-top:4px}.sidebar-footer a{color:var(--text-dim);text-decoration:underline}.sidebar-footer a:hover{color:var(--text)}.sidebar-footer .version{opacity:.6;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.deletable{position:relative}.delete-badge{background:var(--panel);border:1px solid var(--border);width:16px;height:16px;color:var(--text-dim);cursor:pointer;z-index:2;border-radius:50%;justify-content:center;align-items:center;padding:0 0 2px;font-size:12px;line-height:1;display:flex;position:absolute}.delete-badge:hover{border-color:var(--accent);color:var(--text)}.swatch-item>.delete-badge{top:-6px;right:-6px}@media (hover:hover){.delete-badge{opacity:0;transition:opacity .12s}.deletable:hover>.delete-badge{opacity:1}}.size-rows{flex-direction:column;gap:6px;display:flex}.size-row{background:var(--bg);border:1px solid var(--border);border-radius:6px;align-items:center;gap:6px;padding:8px 10px;font-size:12px;display:flex}.size-text{flex-direction:column;gap:2px;margin-right:auto;display:flex}.size-name{color:var(--text)}.size-dims{color:var(--text-dim)}.size-row button{color:var(--text-dim);background:0 0;border:none;padding:0 4px;line-height:1}.size-row button:hover{color:var(--text)}.hint,.grid-hint{color:var(--text-dim);margin:0;font-size:12px}.slot-scroll{overflow-x:auto}.size-header,.slot-row{align-items:center;gap:12px;width:max-content;display:flex}.slot-rows{flex-direction:column;gap:12px;display:flex}.slot-row-controls{flex:0 0 132px;align-items:center;gap:4px;width:132px;display:flex}.slot-row-cells{gap:12px;display:flex}.size-header{padding-bottom:6px}.size-label{text-align:center;color:var(--text-dim);font-size:11px;display:inline-block}.slot-cell{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex:none;position:relative;overflow:hidden}.cell-preview{background:var(--bg);width:100%;height:100%;display:block}.cell-actions{opacity:0;background:linear-gradient(#0000,#0009);justify-content:center;gap:4px;padding:6px;transition:opacity .12s;display:flex;position:absolute;bottom:0;left:0;right:0}.slot-cell:hover .cell-actions,.slot-cell:focus-within .cell-actions{opacity:1}@media (hover:none){.cell-actions{opacity:1}}.cell-actions button{padding:3px 8px;font-size:11px}
