:root{--bg:#0f0e17;--panel:#16151f;--panel-2:#1c1a28;--panel-3:#24212f;--line:#2b2839;--line-2:#3a3650;--text:#e8e6f2;--muted:#8f8aa8;--accent:#ffd34d;--accent-soft:#ffd34d24;--primary:#4a6cf7;--primary-hover:#5b7bff;--danger:#e5484d;--ok:#46a758;--front:#f5a524;--back:#4cb4f5;--radius:8px;--font:"Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:13px/1.45 var(--font);margin:0;overflow:hidden}#app{--left-size:300px;--right-size:300px;--tl-size:250px;grid-template-columns:var(--left-size) minmax(0, 1fr) var(--right-size);grid-template-rows:50px 30px minmax(0, 1fr) var(--tl-size) 26px;grid-template-areas:"top top top""tabs tabs tabs""left stage right""left tl right""status status status";height:100vh;display:grid}#app.no-left{grid-template-columns:0 minmax(0, 1fr) var(--right-size)}#app.no-right{grid-template-columns:var(--left-size) minmax(0, 1fr) 0}#app.no-left.no-right{grid-template-columns:0 minmax(0,1fr) 0}#app.no-timeline{grid-template-rows:50px 30px minmax(0,1fr) 0 26px}.resizer{z-index:20;background:0 0;transition:background .12s;position:absolute}.resizer:hover,.resizer.dragging{background:#ffd34d73}.resizer.v{cursor:col-resize;width:6px;top:0;bottom:0}.resizer.h{cursor:row-resize;height:6px;left:0;right:0}#app{position:relative}.resizer.left{top:80px;bottom:26px;left:calc(var(--left-size) - 3px)}.resizer.right{top:80px;bottom:26px;right:calc(var(--right-size) - 3px)}.resizer.tl{left:var(--left-size);right:var(--right-size);bottom:calc(26px + var(--tl-size) - 3px)}#app.no-left .resizer.left,#app.no-right .resizer.right,#app.no-timeline .resizer.tl{display:none}#app.no-left .resizer.tl{left:0}#app.no-right .resizer.tl{right:0}body.resizing,body.resizing *{-webkit-user-select:none;user-select:none}#app.no-left aside.left,#app.no-right aside.right,#app.no-timeline .timeline{display:none}#app.no-timeline .toast{bottom:60px}button{font:inherit;color:var(--text);background:var(--panel-3);border:1px solid var(--line-2);cursor:pointer;white-space:nowrap;border-radius:6px;padding:4px 10px;transition:background .12s,border-color .12s,color .12s}button:hover:not(:disabled){background:#2e2a3d;border-color:#4a4566}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}button.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}button.danger{color:#ff9b9e;background:#e5484d14;border-color:#e5484d73}button.danger:hover:not(:disabled){border-color:var(--danger);background:#e5484d33}button.ghost{color:#c9c5da;background:0 0;border-color:#0000}button.ghost:hover:not(:disabled){background:var(--panel-3);border-color:var(--line-2)}button.active{background:var(--accent-soft);color:var(--accent);border-color:#ffd34d8c}button.icon{padding:2px 8px;font-size:15px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--primary);outline-offset:1px}input[type=text],input[type=number],select{font:inherit;color:var(--text);border:1px solid var(--line-2);background:#11101a;border-radius:6px;min-width:0;padding:3px 7px}input.num{text-align:right;font-variant-numeric:tabular-nums;width:64px}input[type=color]{border:1px solid var(--line-2);cursor:pointer;background:0 0;border-radius:6px;width:34px;height:26px;padding:0}input[type=range]{accent-color:var(--accent);min-width:0}input[type=checkbox]{accent-color:var(--primary)}.spacer{flex:1}.grow{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.sub{color:var(--muted);font-size:11.5px}.hint{color:var(--muted);margin:6px 0;font-size:12px}.hint.pad{padding:14px}.hint.pad p{margin:0 0 6px}.hint.warn{color:#f5c46b}.topbar{background:var(--panel);border-bottom:1px solid var(--line);grid-area:top;align-items:center;gap:10px;padding:0 12px;display:flex}.brand{align-items:center;gap:8px;margin-right:6px;display:flex}.brand b{font-size:14px;line-height:1.1;display:block}.brand small{color:var(--muted);letter-spacing:.14em;font-size:9.5px;display:block}.logo{background:linear-gradient(135deg, #7c66dc, var(--primary));color:#fff;border-radius:8px;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.project-name{width:190px;font-weight:600;background:0 0!important;border-color:#0000!important}.project-name:hover,.project-name:focus{border-color:var(--line-2)!important;background:#11101a!important}.seg{border:1px solid var(--line);background:#11101a;border-radius:8px;gap:2px;padding:2px;display:flex}.seg button{background:0 0;border-color:#0000;padding:3px 12px}.seg button.active{background:var(--panel-3);border-color:var(--line-2);color:var(--accent)}.grp{align-items:center;gap:3px;display:flex}.saved{color:var(--muted);font-size:11.5px}aside.left,aside.right{background:var(--panel);flex-direction:column;min-height:0;display:flex;position:relative}aside.left{border-right:1px solid var(--line);grid-area:left}aside.right{border-left:1px solid var(--line);grid-area:right}.tabs{border-bottom:1px solid var(--line);gap:2px;padding:8px 8px 0;display:flex}.tabs button{color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;border-radius:6px 6px 0 0;flex:1;padding:7px 4px}.tabs button.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-soft)}.panel-body{flex:1;padding:4px 0 20px;overflow-y:auto}.panel-body::-webkit-scrollbar{width:8px}.panel-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}.sec{border-bottom:1px solid var(--line);padding:10px 12px}.sec h3{cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:11px;font-weight:700}.sec h3:before{content:"▾";width:12px;transition:transform .15s;display:inline-block}.sec.collapsed h3{margin-bottom:0}.sec.collapsed h3:before{transform:rotate(-90deg)}.sec.collapsed>:not(h3){display:none!important}.sec h4{color:var(--accent);margin:10px 0 6px;font-size:12px}.row{align-items:center;gap:6px;min-height:26px;margin:5px 0;display:flex}.row>label{color:#c9c5da;text-overflow:ellipsis;white-space:nowrap;flex:0 0 92px;overflow:hidden}.row>input[type=text],.row>select,.row .slider{flex:1}.row .suffix{color:var(--muted);white-space:nowrap;min-width:10px;font-size:11px}.row.check{cursor:pointer;color:#c9c5da}.row.check>span{flex:1}.btn-row{flex-wrap:wrap;gap:5px;margin:8px 0 2px;display:flex}.btn-col{flex-direction:column;gap:6px;display:flex}.btn-col button{text-align:left;padding:7px 10px}.sec>button{width:100%;margin-top:6px}.thumb{object-fit:contain;background:repeating-conic-gradient(#2a2838 0 25%, #211f2d 0 50%) 0 0 / 10px 10px;border-radius:5px;flex:none}.thumb.empty{border:1px dashed var(--line-2);width:34px;height:34px;color:var(--muted);background:#11101a;place-items:center;display:inline-grid}.thumb.empty.big{width:52px;height:52px;font-size:20px}.slot-list,.bone-tree,.anim-list,.outfit-list{flex-direction:column;gap:2px;display:flex}.slot-item,.bone-item,.anim-item,.outfit{cursor:pointer;border:1px solid #0000;border-radius:6px;align-items:center;gap:8px;padding:4px 8px;display:flex}.slot-item:hover,.bone-item:hover,.anim-item:hover{background:var(--panel-2)}.slot-item.sel,.bone-item.sel,.anim-item.sel{background:var(--accent-soft);border-color:#ffd34d59}.slot-item .name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mini-btns{gap:2px;display:flex}.mini-btns button{padding:1px 5px;font-size:11px}.bone-item{padding-top:3px;padding-bottom:3px}.diamond{font-size:10px}.keyed{color:var(--accent);font-size:9px}.outfit{cursor:default;background:var(--panel-2)}.outfit button{padding:2px 8px}.variant-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;display:grid}.variant{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 4px 4px;display:flex}.variant span:last-child{color:#c9c5da;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;overflow:hidden}.variant:hover{border-color:#4a4566}.variant.current{border-color:var(--accent);background:var(--accent-soft)}.variant.sel{box-shadow:0 0 0 2px var(--primary)}.mesh-tools{border:1px solid var(--line);background:#11101a;border-radius:8px;margin-top:10px;padding:8px}.all-bones .row>label{flex-basis:84px}.curve-preview{color:var(--accent);background:#11101a;border-radius:6px;padding:4px}.curve-preview svg{width:100%;height:64px;display:block}.tabbar{border-bottom:1px solid var(--line);background:#0b0a12;grid-area:tabs;align-items:flex-end;gap:2px;padding:0 8px;display:flex;overflow:auto hidden}.tab{background:var(--panel-2);border:1px solid var(--line);max-width:200px;height:26px;color:var(--muted);cursor:pointer;border-bottom:none;border-radius:7px 7px 0 0;flex:none;align-items:center;gap:4px;padding:0 4px 0 12px;display:flex}.tab:hover{color:var(--text)}.tab.active{background:var(--panel);color:var(--accent);border-color:var(--line-2)}.tab-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tab-close{color:inherit;opacity:.6;background:0 0;border:none;padding:0 5px;font-size:11px}.tab-close:hover:not(:disabled){opacity:1;background:#e5484d40}.tab-new{height:24px;margin-bottom:1px;padding:0 10px}.tab-count{color:var(--muted);align-self:center;margin-left:auto;font-size:11px}.file-list{flex-direction:column;gap:6px;max-height:55vh;display:flex;overflow:auto}.file-card{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:6px 8px;display:flex}.file-card:hover{border-color:var(--accent)}.file-thumb{object-fit:contain;background:#11101a;border-radius:6px;flex:none;width:56px;height:56px}.file-thumb.empty{color:var(--muted);place-items:center;font-weight:700;display:grid}.dlg-h{color:var(--muted);margin:14px 0 6px;font-size:12px}.prop-item{cursor:pointer;margin:2px 0}.prop-item.sel{background:var(--accent-soft);border-color:#ffd34d73}.view-kinds{grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;display:grid}.wear-item.has{border-color:#46a75880}.add-bar{padding:4px 12px 8px}.add-bar button{width:100%}.wear-group h4{color:var(--muted);margin:12px 0 6px;font-size:12px}.wear-items{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;display:grid}.wear-item{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:6px 8px;display:flex}.wear-item:hover{border-color:var(--accent)}.wear-targets{flex-direction:column;gap:4px;margin-bottom:10px;display:flex}.wear-target{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:flex}.wear-target.on{background:var(--accent-soft);border-color:#ffd34d80}.wear-count{text-align:center;font-variant-numeric:tabular-nums;min-width:18px}.wear-import{background:#11101a;border-radius:8px;margin-top:14px;padding:8px}.wear-import>summary{cursor:pointer;color:var(--accent)}.card-bar{gap:4px;margin:-2px 0 6px;display:flex}.variant.add{color:var(--muted);border-style:dashed}.variant.add:hover{border-color:var(--accent);color:var(--accent)}.chips{flex-wrap:wrap;gap:4px;padding:10px 12px 4px;display:flex}.chips button{border-radius:999px;padding:2px 10px;font-size:12px}.swatches{flex-wrap:wrap;flex:1;gap:4px;display:flex}.swatch-btn{border:2px solid #ffffff2e;border-radius:50%;width:20px;height:20px;padding:0}.swatch-btn:hover:not(:disabled){border-color:#fff;transform:scale(1.12)}.swatch-btn.reset{background:var(--panel-3);place-items:center;font-size:12px;display:grid}.nudge-pad{flex-wrap:wrap;gap:3px;display:flex}.nudge-pad button{width:26px;padding:2px 0}details.fine{margin:4px 0}details.fine>summary{cursor:pointer;color:var(--muted);font-size:12px}.panel-title{letter-spacing:.12em;color:var(--text);justify-content:space-between;align-items:baseline;padding:10px 12px 2px;font-size:11px;font-weight:700;display:flex}.panel-title span{letter-spacing:0;color:var(--muted);font-weight:400}.key-count{color:var(--accent);background:#11101a;border-radius:6px;justify-content:space-between;gap:8px;margin-bottom:6px;padding:6px 8px;font-weight:600;display:flex}.key-count span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-weight:400;overflow:hidden}.curve-select{min-width:0}button.small{padding:2px 7px;font-size:11.5px}.bone-group{background:var(--panel-2);border-radius:8px;margin:0 -4px 6px;padding:0 4px}.bone-group>summary{cursor:pointer;color:#c9c5da;padding:6px 4px;font-weight:600;list-style:none}.bone-group>summary:before{content:"▸";width:14px;color:var(--muted);transition:transform .15s;display:inline-block}.bone-group[open]>summary:before{transform:rotate(90deg)}.bone-group .row{margin:2px 0}.bone-group .row>label{flex-basis:96px;align-items:center;gap:5px;display:flex}.bone-group .row.sel>label{color:var(--accent)}.kdot{border:1.5px solid var(--c,#888);border-radius:50%;flex:none;width:7px;height:7px}.kdot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px #ffd34d99}.seg.wide{width:100%;margin-bottom:6px}.seg.wide button{white-space:normal;flex:1;padding:4px;font-size:11.5px;line-height:1.25}.dir-badge{width:20px;height:20px;color:var(--back);background:#4cb4f526;border-radius:5px;flex:none;place-items:center;font-size:12px;display:inline-grid}.compass{grid-template-columns:repeat(3,1fr);gap:5px;margin:4px 0 8px;display:grid}.compass .dir{border-radius:8px;flex-direction:column;align-items:center;gap:0;padding:6px 2px;display:flex}.compass .dir .arrow{font-size:18px;line-height:1.1}.compass .dir .lbl{color:var(--muted);font-size:11px}.compass .dir.have{background:#46a75824;border-color:#46a75880}.compass .dir.mirror{background:#4cb4f51a;border-color:#4cb4f573}.compass .dir.missing{color:var(--muted);background:0 0;border-style:dashed}.compass .dir.cur{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.compass .dir.cur .lbl{color:var(--accent)}.compass-mid{border:1px solid var(--line);color:var(--muted);background:#11101a;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;min-width:0;font-size:11px;display:flex;overflow:hidden}.compass-mid b{color:var(--text);text-overflow:ellipsis;max-width:100%;font-size:12px;overflow:hidden}.stage{grid-area:stage;min-height:0;position:relative;overflow:hidden}.viewport{position:absolute;inset:0}.viewport canvas{width:100%;height:100%;position:absolute;inset:0}.view-toolbar{border:1px solid var(--line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#16151feb;border-radius:10px;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:4px;display:flex;position:absolute;top:10px;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 6px 20px #00000059}.view-toolbar .grp+.grp{border-left:1px solid var(--line-2);padding-left:8px}.view-toolbar button{background:0 0;border-color:#0000;padding:3px 8px}.view-toolbar button.active{background:var(--accent-soft);border-color:#ffd34d73}.view-toolbar .zoom{width:90px}.view-toolbar.mini{left:10px;transform:none}.topbar .panels{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 6px}.topbar .panel-toggle{color:var(--muted);background:0 0;border-color:#0000}.topbar .panel-toggle.active{color:var(--accent);background:var(--accent-soft)}.legend{color:var(--muted);pointer-events:none;align-items:center;gap:6px;font-size:11px;display:flex;position:absolute;bottom:10px;right:12px}.legend i{border-radius:50%;width:8px;height:8px;margin-left:6px}.timeline{background:var(--panel);border-top:1px solid var(--line);flex-direction:column;grid-area:tl;min-height:0;display:flex;position:relative}.transport{border-bottom:1px solid var(--line);align-items:center;gap:4px;padding:6px 10px;display:flex;overflow-x:auto}.transport button{padding:3px 8px}.transport button.play{color:#17161f;background:#fff;border:none;border-radius:50%;width:34px;height:30px;font-weight:700}.transport .time{color:#c9c5da;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:6px}.tl-canvas{flex:1;min-height:0;position:relative}.tl-canvas canvas{cursor:pointer;position:absolute;inset:0}.statusbar{border-top:1px solid var(--line);color:var(--muted);white-space:nowrap;background:#0b0a12;grid-area:status;align-items:center;gap:14px;padding:0 12px;font-size:11.5px;display:flex;overflow:hidden}.pill{border-radius:10px;padding:0 8px;font-weight:600}.pill.setup{color:var(--back);background:#4cb4f526}.pill.animate{background:var(--accent-soft);color:var(--accent)}.busy{color:var(--accent)}.modal-back{z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#05040a99;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;flex-direction:column;width:min(440px,100vw - 32px);max-height:calc(100vh - 40px);display:flex;box-shadow:0 20px 60px #00000080}.modal.wide{width:min(1100px,100vw - 32px)}.modal header{border-bottom:1px solid var(--line);align-items:center;padding:12px 16px;display:flex}.modal header h2{flex:1;margin:0;font-size:15px}.modal header button{background:0 0;border:none}.modal-body{padding:14px 16px;overflow:auto}.modal-body p{margin:0 0 8px}.modal footer{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.wide-input{width:100%}.export-form .row>label{flex-basis:110px}.sheet-editor{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;display:grid}.sheet-left .checker{background:repeating-conic-gradient(#d8d8de 0 25%, #c4c4cc 0 50%) 0 0 / 16px 16px;border-radius:8px;max-height:60vh;padding:8px;overflow:auto}.sheet-preview{cursor:crosshair;max-width:100%;margin:0 auto;display:block}.sheet-right h3{color:var(--accent);margin:4px 0 6px;font-size:13px}.sheet-right .row>input[type=range]{flex:1}.row.btns{flex-wrap:wrap}.swatch{border:1px solid var(--line-2);border-radius:5px;width:26px;height:22px}.parts-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:36vh;margin-top:8px;display:grid;overflow:auto}.part-card{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;flex-direction:column;gap:4px;padding:6px;display:flex}.part-thumb{object-fit:contain;background:repeating-conic-gradient(#2a2838 0 25%, #211f2d 0 50%) 0 0 / 10px 10px;border-radius:5px;width:100%;height:72px}.part-card select{width:100%;font-size:11.5px}.toast{z-index:60;border:1px solid var(--line-2);opacity:0;pointer-events:none;background:#23203a;border-radius:10px;max-width:min(560px,100vw - 32px);padding:9px 16px;transition:opacity .2s,transform .2s;position:fixed;bottom:300px;left:50%;transform:translate(-50%,10px);box-shadow:0 10px 30px #0006}.toast.show{opacity:1;transform:translate(-50%)}.toast.error{border-color:var(--danger);color:#ffc2c4}@media (max-width:1100px){#app{--left-size:250px;--right-size:250px}.keys{display:none}}.sp-left,.sp-right,.sp-stage,.sp-strip,#app.sprite-mode>aside.left,#app.sprite-mode>aside.right,#app.sprite-mode>.stage,#app.sprite-mode>.timeline{display:none!important}#app.sprite-mode .sp-left,#app.sprite-mode .sp-right{background:var(--panel);min-height:0;overflow-y:auto;display:block!important}#app.sprite-mode .sp-left{border-right:1px solid var(--line);grid-area:left}#app.sprite-mode .sp-right{border-left:1px solid var(--line);grid-area:right}#app.no-left.sprite-mode .sp-left,#app.no-right.sprite-mode .sp-right,#app.no-timeline.sprite-mode .sp-strip{display:none!important}#app.sprite-mode .sp-stage{grid-area:stage;min-height:0;position:relative;overflow:hidden;display:block!important}.sp-canvas{position:absolute;inset:0}.sp-canvas canvas{cursor:crosshair;width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}#app.sprite-mode .sp-strip{background:var(--panel);border-top:1px solid var(--line);flex-direction:column;grid-area:tl;min-height:0;display:flex!important}.seg.ws button{padding:3px 10px}.pill.sprite{color:#5ee08a;background:#5ee08a29}.sp-clips{flex-direction:column;gap:3px;margin-bottom:8px;display:flex}.sp-clip{background:var(--panel-2);cursor:pointer;border:1px solid #0000;border-radius:6px;grid-template-columns:1fr auto auto;align-items:center;gap:2px 6px;padding:6px 8px;display:grid}.sp-clip:hover{border-color:var(--line-2)}.sp-clip.active{border-color:var(--accent);background:var(--accent-soft)}.sp-clip small{color:var(--muted);grid-column:1/-1;font-size:11px}.sp-clip .acts{grid-area:1/3;gap:2px;display:flex}.sp-clip .tag{color:var(--muted);font-size:11px}.col-btns{flex-direction:column;gap:5px;display:flex}.col-btns button{text-align:left}.sp-tools .tool.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)!important}.sp-color{border:1px solid var(--line-2);cursor:pointer;background:0 0;border-radius:6px;width:44px;height:30px;padding:0}.sp-hex{width:80px;font-family:ui-monospace,monospace}.sp-palette{grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:3px;margin-top:6px;display:grid}.sp-palette .sw{aspect-ratio:1;border-radius:4px;min-width:0;padding:0;border:1px solid #ffffff1f!important}.sp-palette .sw.active{outline:2px solid var(--accent);outline-offset:1px}.sp-palette .sw.add{background:var(--panel-3);color:var(--muted)}.sp-transport{border-bottom:1px solid var(--line);align-items:center;gap:4px;padding:6px 10px;display:flex}.sp-transport .sep{background:var(--line-2);width:1px;height:18px;margin:0 6px}.sp-transport .spacer{flex:1}.sp-pos{text-align:center;font-variant-numeric:tabular-nums;min-width:90px}.sp-grid{flex:1;min-height:0;overflow:auto}.sp-row{align-items:stretch;min-width:max-content;display:flex}.sp-row .lname{z-index:2;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;flex:none;align-items:center;gap:3px;width:270px;padding:2px 6px;display:flex;position:sticky;left:0}.sp-row.active .lname{background:var(--panel-3);color:var(--accent)}.sp-row .lname .nm{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.sp-row .lname .op{width:40px}.sp-row.head .lname{cursor:default}.fcol{border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;flex-direction:column;flex:none;align-items:center;gap:2px;width:64px;padding:4px 2px;display:flex}.fcol canvas{max-width:56px;max-height:56px;image-rendering:pixelated;background:repeating-conic-gradient(#2c2a3a 0 25%, #363347 0 50%) 0 0 / 8px 8px}.fcol.active{background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}.fcol.playing{background:#5ee08a29}.fmeta{color:var(--muted);align-items:center;gap:2px;font-size:11px;display:flex}.fmeta .num{width:34px;padding:0 2px;font-size:11px}.cel{border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;flex:none;width:64px;height:26px;position:relative}.cel.full:after{content:"";background:var(--text);border-radius:50%;width:9px;height:9px;margin:-4.5px;position:absolute;top:50%;left:50%}.cel:not(.full):after{content:"";border:1px solid var(--line-2);border-radius:50%;width:7px;height:7px;margin:-3.5px;position:absolute;top:50%;left:50%}.cel.active{background:var(--accent-soft)}.sp-row.active .cel.active{background:#ffd34d4d}.sheet-preview{max-width:100%;image-rendering:pixelated;background:repeating-conic-gradient(#2c2a3a 0 25%, #363347 0 50%) 0 0 / 12px 12px;margin-bottom:8px;display:block}.ico{flex:none;display:block}button.icon-btn{justify-content:center;align-items:center;width:32px;height:30px;padding:0;display:inline-flex}button.icon-btn.small{width:28px;height:26px}button.icon-btn.active{background:var(--accent-soft);color:var(--accent);border-color:#ffd34d8c!important}.view-toolbar button.icon-btn{width:32px;padding:0}.view-toolbar .grp{gap:2px}.tip{z-index:1000;pointer-events:none;border:1px solid var(--line-2);opacity:0;background:#0b0a12;border-radius:7px;max-width:280px;padding:6px 9px;font-size:12px;line-height:1.4;transition:opacity .1s,transform .1s;position:fixed;transform:translateY(-2px);box-shadow:0 8px 24px #00000073}.tip.show{opacity:1;transform:none}.tip-head{align-items:center;gap:6px;display:flex}.tip-head b{font-weight:600}.tip kbd{border:1px solid var(--line-2);background:var(--panel-3);color:var(--accent);border-bottom-width:2px;border-radius:4px;margin-left:auto;padding:0 6px;font:600 11px/18px ui-monospace,monospace}.tip kbd+kbd{margin-left:0}.tip-desc{color:var(--muted);margin-top:2px}.seg.ws .ws-btn{align-items:center;gap:6px;padding:3px 12px;display:inline-flex}.seg.ws .ws-btn .ico{width:16px;height:16px}.preset-row{flex-wrap:wrap;gap:4px;margin:4px 0 6px;display:flex}.row .preset-row{flex:1;margin:0}.preset-row button{font-variant-numeric:tabular-nums;min-width:34px;padding:2px 8px}.preset-row button.active{background:var(--accent-soft);color:var(--accent);border-color:#ffd34d8c!important}h4.sub{letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin:12px 0 4px;font-size:11.5px;font-weight:600}.sp-tools{flex-wrap:wrap;align-items:center;gap:3px;margin-bottom:8px;display:flex}.sp-tools-sep{background:var(--line-2);width:1px;height:22px;margin:0 3px}.sp-transport button.icon-btn{width:30px;height:28px}