:root{--color-bg: #ffffff;--color-surface: #fafafa;--color-border: #e8e8e8;--color-border-strong: #d0d0d0;--color-text-primary: #111111;--color-text-secondary: #555555;--color-text-tertiary: #999999;--color-accent: #4070ff;--color-accent-hover: #2855dd;--color-danger: #e24b4a;--color-canvas-bg: #f0f0f0;--palette-black: #000000;--palette-magenta: #FF13F0;--palette-red: #FF2C2C;--palette-orange: #FF7518;--palette-yellow: #FFEF00;--palette-green: #0BDA51;--palette-blue: #0000CD;--palette-violet: #7F00FF;--palette-white: #FFFFFF;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--font-sans: system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, monospace;--text-xs: 11px;--text-sm: 12px;--text-base: 14px;--text-lg: 16px;--sidebar-width: 280px;--bottombar-height: 44px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 9999px;--transition-fast: .12s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary);height:100vh;display:flex;flex-direction:column;overflow:hidden}.section{border-bottom:1px solid var(--color-border)}.section-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--color-surface)}.section-hd:hover{background:#f3f3f3}.section-title{font-size:var(--text-xs);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em}.section-chevron{font-size:10px;color:#aaa;transition:transform .18s}.section-chevron.open{transform:rotate(90deg)}.section-body{padding:10px var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);background:var(--color-bg)}.section-body.hidden{display:none}.layer-row{display:flex;flex-direction:column;padding:7px var(--space-2);border-radius:7px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;position:relative}.layer-row:hover{background:#f8f8ff}.layer-row.active{border-color:var(--color-accent);background:#f0f4ff}.layer-row.dragging{opacity:.4}.layer-row.drag-over{border-color:var(--color-accent);border-style:dashed}.layer-top{display:flex;align-items:center;gap:7px;width:100%}.drag-handle{display:flex;align-items:center;cursor:grab;flex-shrink:0;color:#ccc;padding:0 1px}.drag-handle:active{cursor:grabbing}.drag-handle svg{display:block}.layer-thumb{width:36px;height:36px;border-radius:5px;border:1px solid #eee;flex-shrink:0;overflow:hidden;background:var(--color-bg);display:flex;align-items:center;justify-content:center}.layer-thumb svg{display:block}.layer-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.layer-label{font-size:var(--text-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-sub{font-size:10px;color:var(--color-text-tertiary);margin-top:2px}.layer-btns{display:flex;gap:2px;flex-shrink:0;align-items:center}.lbtn{width:24px;height:24px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#bbb;padding:0}.lbtn:hover{background:#eee;color:var(--color-text-secondary)}.lbtn svg{display:block;pointer-events:none}.lbtn.vis-off{opacity:.4}.layer-expand{border-top:1px solid #f0f0f0;margin-top:var(--space-2);padding-top:var(--space-2);display:flex;flex-direction:column;gap:7px}.slabel{font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;display:flex;align-items:center;gap:6px}.srow{display:flex;align-items:center;gap:6px}.srow label{font-size:var(--text-xs);color:#777;min-width:40px;flex-shrink:0}.v{font-size:var(--text-xs);font-weight:700;min-width:28px;text-align:right;color:var(--color-text-primary)}input[type=range]{flex:1;accent-color:var(--color-accent);height:3px}select{font-size:var(--text-xs);padding:3px 6px;border:1px solid #ddd;border-radius:5px;background:var(--color-bg);color:var(--color-text-primary);width:100%}.hex-row{display:flex;align-items:center;gap:5px}.hex-in{flex:1;font-size:var(--text-xs);padding:3px 6px;border:1px solid #ddd;border-radius:5px;font-family:var(--font-mono);min-width:0}.crow{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.sw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0}.sw.on{border-color:#111}.bgsw{width:18px;height:18px;border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid #ccc;flex-shrink:0}.bgsw.on{border-color:#111;box-shadow:0 0 0 1px #888}.sw:hover{border-color:#666}.bgsw:hover{border-color:#888}.toggle-row{display:flex;align-items:center;gap:7px}.toggle{width:30px;height:17px;border-radius:9px;background:#ddd;cursor:pointer;position:relative;flex-shrink:0;transition:background var(--transition-fast)}.toggle.on{background:var(--color-accent)}.toggle:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left var(--transition-fast)}.toggle.on:after{left:15px}.toggle:hover{background:#c8c8c8}.toggle.on:hover{background:var(--color-accent-hover)}.acard{border:1px solid #e0e0e0;border-radius:var(--radius-md);padding:5px var(--space-2);cursor:pointer;background:var(--color-bg)}.acard:hover{background:#f8f8f8}.acard.on{background:#e8f0ff;border-color:var(--color-accent)}.acard .at{font-size:var(--text-xs);font-weight:600;color:#333}.acard.on .at{color:#2050cc}.acard .ad{font-size:10px;color:var(--color-text-tertiary);margin-top:1px}.acard.on .ad{color:#5580ff}.agrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.blend-row{display:flex;gap:4px}.blend-btn{font-size:10px;padding:3px 7px;border:1px solid #ddd;border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;color:#666}.blend-btn.on{background:#111;color:#fff;border-color:#111}.tag{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600}.tag.global{background:#e8f0ff;color:var(--color-accent)}.tag.custom{background:#fff3e0;color:#b85c00}.arc-badge{font-size:10px;padding:1px 5px;border-radius:3px;font-weight:600}.arc-badge.closed{background:#e6f4ea;color:#1a7a3a}.arc-badge.open{background:#fff3e0;color:#b85c00}.ring-override{display:flex;align-items:center;gap:6px;margin-bottom:4px}.ring-override select{flex:1}.range-pair{display:flex;align-items:center;gap:4px}.rval{font-size:var(--text-xs);font-weight:700;min-width:18px;color:var(--color-text-primary)}.divider{height:1px;background:#f0f0f0}.add-layer-btn{width:100%;font-size:var(--text-xs);padding:6px;border:1px dashed #ccc;border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;color:#888;display:flex;align-items:center;justify-content:center;gap:5px}.add-layer-btn:hover{background:#f5f8ff;border-color:var(--color-accent);color:var(--color-accent)}.bbtn{font-size:var(--text-sm);padding:5px var(--space-3);border:1px solid #ccc;border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;display:flex;align-items:center;gap:5px}.bbtn:hover{background:#f0f0f0}.bbtn.pri{background:#111;color:#fff;border-color:#111}.bbtn.pri:hover{background:#333}.bbtn.pri:active{background:#000}.exp-btn{width:100%;font-size:var(--text-xs);padding:6px 10px;border:1px solid #ddd;border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;color:#333}.exp-btn:hover{background:#f5f5f5;border-color:#bbb}.exp-btn .exp-label{font-weight:600}.exp-btn .exp-desc{font-size:10px;color:var(--color-text-tertiary);margin-top:1px}.exp-inner{display:flex;flex-direction:column}#studio-tabs{display:flex;border-bottom:2px solid var(--color-border);background:var(--color-bg);padding:0 var(--space-4);flex-shrink:0}.studio-tab{padding:10px var(--space-4);font-size:13px;font-weight:500;cursor:pointer;color:#aaa;border-bottom:2px solid transparent;margin-bottom:-2px;-webkit-user-select:none;user-select:none;letter-spacing:.01em}.studio-tab.on{color:var(--color-text-primary);border-bottom-color:var(--color-text-primary)}.studio-tab:hover{color:var(--color-text-secondary)}#outer-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.studio-content{display:none;flex:1;min-height:0;overflow-y:auto}.studio-content.on{display:flex}#studio-bookmarks.on,#studio-guide.on{display:block}#app{display:flex;flex:1;min-height:0}#sidebar{width:var(--sidebar-width);flex-shrink:0;border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--color-surface)}#sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden}#canvas-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--color-canvas-bg);position:relative}#spiro-svg{display:block;border-radius:10px;box-shadow:0 2px 16px #0000001a;cursor:grab}#spiro-svg:active{cursor:grabbing}#canvas-stat{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:var(--text-xs);color:var(--color-text-tertiary);pointer-events:none}#bottombar{height:var(--bottombar-height);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);background:var(--color-bg);flex-shrink:0}#status{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-left:auto}.save-row{border-top:1px solid var(--color-border);padding:6px var(--space-3);background:var(--color-bg);display:flex;gap:6px;flex-shrink:0}.save-row input{flex:1;font-size:var(--text-xs);padding:4px var(--space-2);border:1px solid #ddd;border-radius:5px;outline:none;min-width:0}.save-row button{font-size:var(--text-xs);padding:4px 10px;border:1px solid #ddd;border-radius:5px;background:var(--color-bg);cursor:pointer;white-space:nowrap;flex-shrink:0}#layer-list{display:flex;flex-direction:column;gap:4px}