:root{--bg: #1b1d23;--panel: #24262e;--panel-2: #2c2f39;--line: #3a3e4a;--text: #e7e9ee;--muted: #9aa0ad;--accent: #6ec1e4;--accent-2: #ff9fb2}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,Hiragino Sans,Noto Sans JP,system-ui,sans-serif;-webkit-text-size-adjust:100%}.app{display:grid;grid-template-columns:1fr 6px 380px;height:100vh}.stage-col{display:flex;flex-direction:column;min-width:0}.side{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto}.resizer{background:var(--line);cursor:col-resize;touch-action:none}.resizer:hover{background:var(--accent)}.edit-stage{flex:1;display:flex;flex-direction:column;min-height:0}.edit-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}.edit-rows{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(45deg,#20222a 25%,transparent 25%) 0 0/24px 24px,linear-gradient(-45deg,#20222a 25%,transparent 25%) 0 12px/24px 24px,linear-gradient(45deg,transparent 75%,#20222a 75%) 12px -12px/24px 24px,linear-gradient(-45deg,transparent 75%,#20222a 75%) -12px 0/24px 24px,#262932}.ind-row{border:1px solid var(--line);border-radius:10px;background:#24262eeb;padding:8px 10px;cursor:pointer;transition:border-color .12s}.ind-row.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.ind-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.ind-head .dot{width:10px;height:10px;border-radius:99px;background:var(--line)}.ind-row.sel .ind-head .dot{background:var(--accent)}.ind-name{flex:1;min-width:0;font-weight:600;background:transparent;border:1px solid transparent}.ind-name:hover,.ind-name:focus{border-color:var(--line)}.previews{display:flex;gap:10px;align-items:flex-end}.preview{position:relative;background:#0e142080;border-radius:8px;padding:4px}.preview canvas{display:block}.preview .plabel{position:absolute;top:4px;left:6px;font-size:11px;color:var(--muted);background:#00000073;padding:1px 6px;border-radius:99px}.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{font-weight:700;letter-spacing:.02em}.brand small{color:var(--muted);font-weight:400;margin-left:6px}.stage-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;background:linear-gradient(45deg,#20222a 25%,transparent 25%) 0 0/24px 24px,linear-gradient(-45deg,#20222a 25%,transparent 25%) 0 12px/24px 24px,linear-gradient(45deg,transparent 75%,#20222a 75%) 12px -12px/24px 24px,linear-gradient(-45deg,transparent 75%,#20222a 75%) -12px 0/24px 24px,#262932}canvas.stage{image-rendering:auto;box-shadow:0 6px 30px #0006;border-radius:6px;background:transparent}.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel)}.timeline{display:flex;gap:3px;flex:1;min-width:200px}.fcell{flex:1;height:26px;border-radius:4px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fcell.on{outline:2px solid var(--accent);color:var(--text)}.fcell.seg-idle{border-bottom:3px solid #6ec1e4}.fcell.seg-turn{border-bottom:3px solid #ffd166}.fcell.seg-loop{border-bottom:3px solid #ff9fb2}button,select,input[type=number]{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#10222b;border-color:transparent;font-weight:600}button.ghost{background:transparent}.seg-toggle button.active{background:var(--accent);color:#10222b;border-color:transparent}.section{border-bottom:1px solid var(--line);padding:12px 14px}.section h3{margin:0 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.row{display:flex;align-items:center;gap:8px;margin:6px 0}.row .grow{flex:1}.swatch{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);padding:0;cursor:pointer}.muted{color:var(--muted)}.warn{background:#3a2a1c;border:1px solid #6b4a2a;color:#ffce9e;padding:8px 10px;border-radius:6px;font-size:12px}label.lbl{width:92px;color:var(--muted);font-size:13px}input[type=range]{width:100%;accent-color:var(--accent)}.layer{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px}.layer-head{display:flex;align-items:center;gap:8px}.layer-head .name{flex:1;font-weight:600}.chip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 7px;white-space:nowrap}.fill-box{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}details summary{cursor:pointer;color:var(--muted)}.stops .row input[type=color]{width:36px}.hint{font-size:12px;color:var(--muted);margin-top:4px}.layer.custom{border-color:#3c4a63}.cl-thumb{width:30px;height:30px;object-fit:contain;border-radius:5px;background:linear-gradient(45deg,#2a2d36 25%,transparent 25%) 0 0/10px 10px,linear-gradient(-45deg,#2a2d36 25%,transparent 25%) 0 5px/10px 10px,linear-gradient(45deg,transparent 75%,#2a2d36 75%) 5px -5px/10px 10px,linear-gradient(-45deg,transparent 75%,#2a2d36 75%) -5px 0/10px 10px,#1c1e25}.reorder{display:flex;flex-direction:column;gap:1px}.reorder button{padding:1px 6px;line-height:1;min-height:0;font-size:10px}.upload-btn{display:block;text-align:center;border:1px dashed var(--line);border-radius:8px;padding:10px;margin:4px 0 10px;color:var(--accent);cursor:pointer}.upload-btn:hover{border-color:var(--accent);background:#6ec1e40f}.swatch{position:relative}.cp-hexlabel{font-variant-numeric:tabular-nums;color:var(--muted)}.copyhex{padding:4px 8px}.cp-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90}.cp-pop{position:fixed;z-index:91;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:0 10px 40px #00000080;width:232px}.cp{display:flex;flex-direction:column;gap:8px}.cp-sv{position:relative;width:212px;height:132px;border-radius:6px;overflow:hidden;touch-action:none;cursor:crosshair}.cp-sv-white{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff,transparent)}.cp-sv-black{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000,transparent)}.cp-hue{position:relative;height:16px;border-radius:8px;touch-action:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-knob{position:absolute;width:14px;height:14px;border-radius:99px;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;transform:translate(-50%,-50%);pointer-events:none}.cp-knob.hue{top:50%}.cp-row{display:flex;align-items:center;gap:6px}.cp-preview{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);flex:none}.cp-hex{flex:1;width:0;text-transform:uppercase;font-variant-numeric:tabular-nums}.cp-recent{display:flex;flex-wrap:wrap;gap:4px}.cp-swatch{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);padding:0}@media (pointer: coarse){body{font-size:15px}button,select,input[type=number],input[type=text],.ind-name{min-height:42px;padding:9px 14px}.seg-toggle button{min-height:38px}.swatch{width:34px;height:34px}input[type=color]{width:40px;height:36px}input[type=range]{height:30px}input[type=checkbox]{width:22px;height:22px}.chip,.hint{font-size:13px}label.lbl{font-size:14px}.resizer{width:14px}.fill-box button[title]{min-height:40px!important}}@media (max-width: 1024px){html,body,#root{height:auto;min-height:100%}.app{grid-template-columns:1fr!important;height:auto}.resizer{display:none}.stage-col{min-height:78vh}.side{border-left:none;border-top:2px solid var(--line)}.topbar{position:sticky;top:0;z-index:5}.edit-rows{overflow-y:visible}.previews{flex-wrap:wrap}}