*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--surface: #111111;--surface-2: #181818;--border: #1e1e1e;--text: #e0e0e0;--text-muted: #777;--text-dim: #555;--accent: #c8f135;--accent-bg: rgba(200, 241, 53, .05);--off: #2a2a2a;--radius: 8px;--font: "DM Sans", sans-serif;--mono: "DM Mono", monospace}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh}.viewport-wrap{flex:1;display:flex;flex-direction:column;position:relative;min-width:0}.viewport{flex:1;position:relative;overflow:hidden}.viewport canvas{display:block;width:100%!important;height:100%!important}.viewport-hint{text-align:center;padding:10px 0;font-size:12px;color:var(--text-dim);letter-spacing:.02em;border-top:1px solid var(--border);background:var(--bg)}.sidebar{width:220px;min-width:220px;background:var(--surface);display:flex;flex-direction:column;height:100vh;-webkit-user-select:none;user-select:none}.sidebar--left{border-right:1px solid var(--border)}.sidebar--right{border-left:1px solid var(--border)}.sidebar-header{padding:18px 16px 14px;border-bottom:1px solid var(--border)}.logo{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--text)}.logo em{font-style:italic;color:var(--accent)}.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.sidebar-scroll::-webkit-scrollbar{width:3px}.sidebar-scroll::-webkit-scrollbar-track{background:transparent}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.section{padding:14px 16px;border-bottom:1px solid var(--border)}.section-title{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text);margin-bottom:12px}.control-row{margin-bottom:10px}.control-row:last-child{margin-bottom:0}.control-label{display:block;font-size:11px;font-weight:400;color:var(--text-muted);margin-bottom:6px}.slider-wrap{display:flex;align-items:center;gap:10px}.slider-wrap input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:var(--off);border-radius:1px;outline:none;cursor:pointer}.slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text);border:none;cursor:grab;transition:background .15s}.slider-wrap input[type=range]::-webkit-slider-thumb:hover{background:var(--accent)}.slider-wrap input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;background:var(--accent)}.slider-value{font-family:var(--mono);font-size:11px;color:var(--text-dim);min-width:32px;text-align:right}.toggle-row{display:flex;align-items:center;justify-content:space-between}.toggle-row .control-label{margin-bottom:0}.toggle{position:relative;width:34px;height:18px;border-radius:9px;border:none;background:var(--off);cursor:pointer;padding:0;transition:background .2s;flex-shrink:0}.toggle--on{background:var(--accent)}.toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#111;transition:transform .2s}.toggle--on .toggle-knob{transform:translate(16px)}.light-pad-wrap{display:flex;justify-content:center;padding-top:4px}.light-pad{position:relative;width:100px;height:100px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);cursor:crosshair;overflow:hidden}.light-pad-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--text);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);transform:translate(-50%,-50%);pointer-events:none;transition:box-shadow .15s}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.preset-btn{font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:10px 8px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:6px}.preset-btn:hover{color:var(--text);border-color:var(--text-dim)}.preset-btn--active{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}.preset-icon{font-size:16px;line-height:1}.preset-label{font-size:11px}.bg-swatches{display:flex;gap:8px}.bg-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s;padding:0;outline:none}.bg-swatch:hover{border-color:var(--text-dim)}.bg-swatch--active{border-color:var(--accent)}.bg-swatch--checker{background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#1a1a1a}.res-picker{display:flex;gap:4px;margin-bottom:10px}.res-btn{flex:1;font-family:var(--mono);font-size:11px;color:var(--text-dim);background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:6px 0;cursor:pointer;transition:all .15s;text-align:center}.res-btn:hover{color:var(--text);border-color:var(--text-dim)}.res-btn--active{color:var(--text);border-color:var(--text-muted);background:var(--surface-2)}.export-btn{width:100%;margin-top:10px;padding:12px 0;font-family:var(--font);font-size:13px;font-weight:600;color:#0a0a0a;background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer;letter-spacing:.01em;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px}.export-btn:hover{opacity:.9}.export-btn:active{opacity:.8}.export-btn-icon{font-size:14px;line-height:1}