:root{--bg: #0b0d12;--bg2: #11141b;--panel: #161a23;--panel2: #1c212d;--border: #262c3a;--text: #e6e9f0;--muted: #8a93a6;--accent: #7c9cff;--accent2: #ff7ca8;--good: #5fd39b;--warn: #ffb454;--bad: #ff6b6b;--radius: 8px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}.brand{display:flex;align-items:baseline;gap:8px;font-weight:700}.logo{color:var(--accent)}.brand-sub{color:var(--muted);font-weight:400;font-size:12px}.header-hints{color:var(--muted);font-size:12px}kbd{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}.layout{flex:1;display:grid;grid-template-columns:320px 1fr 340px;min-height:0}.sidebar{overflow-y:auto;padding:10px;background:var(--bg2);border-left:1px solid var(--border);border-right:1px solid var(--border)}.sidebar.left{border-left:none}.sidebar.right{border-right:none}.canvas-area{display:flex;align-items:center;justify-content:center;min-height:0;padding:16px;background:radial-gradient(120% 120% at 50% 0%,#0e1118,#05060a 80%)}.stage{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;max-height:100%}.stage-inner{max-width:100%;max-height:calc(100vh - 110px);aspect-ratio:var(--ar, 9 / 16);height:100%;display:flex}.canvas-wrap{position:relative;width:100%;height:100%}.gl-canvas{width:100%;height:100%;display:block;border-radius:6px;box-shadow:0 20px 60px #0009}.stage-info{color:var(--muted);font-size:12px}.imprint-overlay{position:absolute;inset:0;pointer-events:none}.imprint-box{position:absolute;pointer-events:auto;cursor:move;border:1.5px solid var(--accent);border-radius:2px;box-shadow:0 0 0 1px #0006}.imprint-handle{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--accent);border-radius:2px}.imprint-handle.tl{left:-6px;top:-6px;cursor:nwse-resize}.imprint-handle.tr{right:-6px;top:-6px;cursor:nesw-resize}.imprint-handle.bl{left:-6px;bottom:-6px;cursor:nesw-resize}.imprint-handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}.imprint-rotate{position:absolute;left:50%;top:-26px;transform:translate(-50%);width:12px;height:12px;background:var(--accent2);border-radius:50%;border:1.5px solid #fff;cursor:grab}.section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px}.section>summary{cursor:pointer;padding:9px 12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;list-style:none}.section>summary::-webkit-details-marker{display:none}.section>summary:before{content:"▸";color:var(--muted);margin-right:6px;transition:transform .15s}.section[open]>summary:before{transform:rotate(90deg)}.section-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}.section-actions{display:flex;gap:6px}.ctl{display:flex;flex-direction:column;gap:4px}.ctl-row{display:flex;justify-content:space-between;align-items:center}.ctl-label{font-size:12px;color:var(--muted)}.ctl-value{font:12px ui-monospace,monospace;color:var(--text)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{width:28px;height:28px;border:1px solid var(--border);border-radius:5px;background:none;padding:0;cursor:pointer}input[type=text],input[type=number],select{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:6px 8px;font:13px inherit}select{cursor:pointer}.ctl.toggle{flex-direction:row;align-items:center;justify-content:space-between}.ctl.toggle button{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:4px 10px;cursor:pointer}.ctl.toggle button.on{background:var(--accent);color:#0b0d12;border-color:var(--accent)}.ctl.color .color-wrap{display:flex;align-items:center;gap:8px}.color-hex{font:12px ui-monospace,monospace;color:var(--muted)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.param-block{display:flex;flex-direction:column;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--border)}.param-block:last-child{border-bottom:none}.lfo{border:1px solid var(--border);border-radius:5px;padding:4px 6px;background:var(--panel2)}.lfo.lfo-on{border-color:var(--accent)}.lfo-head{display:flex;align-items:center;justify-content:space-between}.lfo-expand{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 6px}.lfo-body{display:flex;flex-direction:column;gap:8px;padding:6px 0 2px}.btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;font:inherit}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#0b0d12;border-color:var(--accent);font-weight:600}.btn-ghost{background:transparent}.btn-ghost:hover{background:var(--panel2)}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.style-card{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--text)}.style-card:hover{border-color:var(--accent)}.style-card.active{border-color:var(--accent);background:#1a2233}.style-name{font-weight:600}.style-desc{font-size:11px;color:var(--muted)}.palette-editor{display:flex;flex-direction:column;gap:6px}.palette-row{display:flex;align-items:center;gap:8px}.palette-idx{font:11px ui-monospace,monospace;color:var(--muted);width:14px}.palette-spacer{flex:1}.palette-del{background:none;border:none;color:var(--bad);cursor:pointer;padding:2px 6px}.palette-del:disabled{color:var(--muted);opacity:.5}.lospec{margin-top:6px;display:flex;flex-direction:column;gap:4px}.lospec-head{font-size:12px;color:var(--muted)}.text-card{background:var(--panel2);border:1px solid var(--border);border-radius:6px;margin-bottom:8px}.text-card>summary{cursor:pointer;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;list-style:none}.text-card>summary::-webkit-details-marker{display:none}.tcard-text{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-card[open]>summary{border-bottom:1px solid var(--border)}.text-card .section-body{padding:10px}.export-row{display:flex;gap:8px}.progress{position:relative;height:18px;background:var(--panel2);border-radius:5px;overflow:hidden}.progress-bar{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .1s}.progress span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:11px ui-monospace,monospace;color:#0b0d12;mix-blend-mode:difference}.loop-result{font:12px ui-monospace,monospace;padding:6px 8px;background:var(--panel2);border-radius:5px}.note{font-size:12px;color:var(--warn);padding:4px 0}.muted{color:var(--muted)}.small{font-size:12px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-card{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--text);position:relative}.preset-card:hover{border-color:var(--accent)}.preset-card.custom{padding:0}.preset-card.custom button{background:none;border:none;padding:8px;cursor:pointer;text-align:left;color:var(--text);flex:1}.preset-card-actions{display:flex;align-items:center;gap:2px;padding-right:4px}.preset-rename-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;font-size:12px}.preset-rename-btn:hover{color:var(--accent)}.preset-rename{padding:6px}.preset-rename input{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--accent);border-radius:5px;padding:4px 6px;font:12px inherit}.preset-name{font-weight:600;font-size:12px}.preset-meta{font-size:10px;color:var(--muted)}.preset-swatches{display:flex;gap:2px;height:10px}.preset-swatches span{flex:1;border-radius:2px}.preset-save{display:flex;flex-direction:column;gap:8px;margin-top:8px}.preset-actions{display:flex;gap:6px;flex-wrap:wrap}.shader-list{display:flex;flex-direction:column;gap:4px}.shader-row{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:6px 8px;display:flex;gap:8px;align-items:center}.shader-name{font:12px ui-monospace,monospace}.gesture-card,.imprint-card{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.imprint-card{cursor:pointer}.imprint-card.selected{border-color:var(--accent)}.gesture-head,.imprint-head{display:flex;align-items:center;justify-content:space-between}code{background:var(--panel2);padding:1px 4px;border-radius:3px;font:12px ui-monospace,monospace}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:4px}@media (max-width: 1100px){.layout{grid-template-columns:1fr;grid-auto-rows:auto}.sidebar{max-height:40vh}}