.app{gap:var(--gap);height:calc(100vh - var(--topbar) - var(--gap)*3);grid-template-columns:380px minmax(0,1fr) 340px;min-height:640px;display:grid}.create{flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.scroll-hint{border-radius:0 0 var(--r-lg) var(--r-lg);height:140px;font-size:var(--fs-sm);background:linear-gradient(to bottom,#14141600,#141416d9 55%,var(--panel));opacity:0;visibility:hidden;pointer-events:none;color:var(--ink);justify-content:center;align-items:flex-end;gap:6px;padding-bottom:18px;font-weight:600;transition:opacity .25s,visibility .25s;display:flex;position:absolute;bottom:0;left:0;right:0}.scroll-hint:before{content:"";border-radius:inherit;background:var(--cta);opacity:.5;position:absolute;inset:0;-webkit-mask-image:radial-gradient(70% 40% at 50% 100%,#000 0%,#0000008c 45%,#0000 100%);mask-image:radial-gradient(70% 40% at 50% 100%,#000 0%,#0000008c 45%,#0000 100%)}.scroll-hint span,.scroll-hint svg{position:relative}.scroll-hint.show{opacity:1;visibility:visible}.scroll-hint.show span,.scroll-hint.show svg{pointer-events:auto;cursor:pointer}.scroll-hint:hover:before{opacity:.65}.scroll-hint svg{width:18px;height:18px;animation:1.6s ease-in-out infinite hint-bob}@keyframes hint-bob{50%{transform:translateY(3px)}}@media (prefers-reduced-motion:reduce){.scroll-hint svg{animation:none}}.create-scroll{flex-direction:column;flex:1;gap:10px;padding:22px 18px 18px;display:flex;overflow-y:auto}.create-head{padding:0 4px 8px}.create-head h1{font-size:var(--fs-xl);letter-spacing:-.01em;font-weight:700;line-height:1.25}.create-head p{color:var(--ink-3);font-size:var(--fs-sm);margin-top:6px}.block{padding:4px 14px 14px}.block>summary{cursor:pointer;font-size:var(--fs-md);align-items:center;gap:8px;padding:12px 0 6px;font-weight:600;list-style:none;display:flex}.block>summary::-webkit-details-marker{display:none}.block>summary:before{content:"";border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);width:7px;height:7px;margin:0 4px 0 2px;transition:transform .15s;transform:rotate(-45deg)}.block[open]>summary:before{transform:rotate(45deg)}.block>summary .hint{font-weight:400;font-size:var(--fs-xs);color:var(--ink-3);margin-left:auto}.ctl{margin-top:14px}.ctl label{font-size:var(--fs-sm);color:var(--ink-2);justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.ctl label b{font-family:var(--mono);color:var(--ink);font-weight:500;font-size:var(--fs-sm)}.ctl small{font-size:var(--fs-xs);color:var(--ink-3);margin-top:7px;line-height:1.45;display:block}input[type=range]{appearance:none;cursor:pointer;background:linear-gradient(90deg,var(--ink) var(--p,50%),var(--card-hi) var(--p,50%));border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:0;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000080}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:16px;height:16px}.sw{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.sw button{border-radius:50%;width:30px;height:30px;box-shadow:inset 0 0 0 2px #00000040}.sw button.on{outline:2px solid var(--ink);outline-offset:2px}.color-row{font-size:var(--fs-sm);color:var(--ink-2);align-items:center;gap:10px;margin-top:12px;display:flex}input[type=color]{border-radius:var(--r-sm);cursor:pointer;background:0 0;border:0;width:44px;height:32px;padding:0}.selects{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.selects label{font-size:var(--fs-xs);color:var(--ink-3);flex-direction:column;gap:6px;display:flex}select{appearance:none;border-radius:var(--r-md);background:var(--field);border:1px solid var(--line);width:100%;height:42px;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-repeat:no-repeat;background-size:5px 5px;padding:0 34px 0 14px}.render{border-radius:var(--r-md);background:var(--card);flex-direction:column;gap:10px;padding:14px;display:flex}.render .selects{margin-top:0}.render-btns{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;display:grid}.render-btns .btn-ghost{text-align:center;height:54px;padding:0 14px;line-height:1.25}.prog{background:var(--card-hi);border-radius:2px;height:4px;overflow:hidden}.prog b{background:var(--cta);width:0;height:100%;transition:width .15s;display:block}#expStatus{font-family:var(--mono);font-size:var(--fs-xs);color:var(--mint);min-height:18px;line-height:1.45}.foot-hint{font-size:var(--fs-xs);color:var(--ink-3);text-align:center}.seg.off,.ctl.off{opacity:.4}.seg.off button,.ctl.off input{cursor:not-allowed}.work{flex-direction:column;gap:14px;min-height:0;padding:18px 22px 22px;display:flex;overflow-y:auto;container-type:inline-size}.work-top{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.crumbs{font-size:var(--fs-md);font-weight:600}.crumbs span{color:var(--ink-3);font-weight:500}.crumbs span:before{content:"›";color:var(--ink-3);margin:0 8px}.env{border-radius:var(--r-pill);background:var(--card);height:36px;font-size:var(--fs-xs);color:var(--ink-2);align-items:center;gap:8px;margin-left:auto;padding:0 14px;display:inline-flex}.env .dot{background:var(--ink-3);border-radius:50%;width:8px;height:8px}.env .dot.ok{background:var(--mint)}.env .dot.bad{background:var(--danger)}.env .sep{color:var(--ink-3)}.count{font-size:var(--fs-sm);color:var(--ink-3)}.stage{border-radius:var(--r-md);min-height:180px;box-shadow:inset 0 0 0 1px var(--line);background:#000;flex:0 56.25cqw;position:relative;overflow:hidden}.stage canvas{object-fit:contain;width:100%;height:100%;display:block}.badge{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-2);border-radius:var(--r-pill);background:#0a0a0bbf;padding:4px 10px;position:absolute;top:10px;right:10px}.transport{border-radius:var(--r-md);background:var(--card);align-items:center;gap:14px;padding:12px 14px;display:flex}.play{color:#0a0a0b;background:#f5f5f6;border-radius:50%;flex:none;place-items:center;width:48px;height:48px;display:grid}.play svg{fill:currentColor;width:22px;height:22px}.now{flex:0 240px;min-width:0}.now b{font-size:var(--fs-md);white-space:nowrap;text-overflow:ellipsis;font-weight:600;display:block;overflow:hidden}#status{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}#status[data-tone=ok]{color:var(--mint)}#status[data-tone=err]{color:var(--danger);white-space:normal}.seek{flex:1;align-items:center;gap:10px;min-width:180px;display:flex}.time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);min-width:38px}.time.cur{color:var(--ink)}.rail{cursor:pointer;flex:1;align-items:center;height:22px;display:flex;position:relative}.rail:before{content:"";background:var(--card-hi);border-radius:2px;height:4px;position:absolute;left:0;right:0}.rail .fill{background:var(--ink);border-radius:2px;width:0;height:4px;position:absolute;left:0}.rail .head{background:#fff;border-radius:50%;width:13px;height:13px;position:absolute;left:0;transform:translate(-50%)}.drop{border:1.5px dashed var(--line-hi);border-radius:var(--r-md);text-align:center;width:100%;color:var(--ink-2);cursor:pointer;font-size:var(--fs-sm);flex-direction:column;flex:none;align-items:center;gap:6px;padding:20px 14px;transition:border-color .15s,background .15s;display:flex}.drop-main{white-space:nowrap;border-radius:var(--r-pill);color:#0a0a0b;height:40px;font-size:var(--fs-sm);background:#f5f5f6;flex:none;align-items:center;gap:8px;padding:0 18px;font-weight:600;display:inline-flex}.drop-main svg{width:16px;height:16px}.drop small{font-size:var(--fs-xs);color:var(--ink-3)}.drop:hover,.drop.over,.drop:focus-visible{border-color:var(--amber);background:#ffb4540d}.drop:hover .drop-main{background:#fff}.drop.compact{flex-direction:row;justify-content:center;gap:10px;padding:10px 12px}.drop.compact small{display:none}.drop.compact .drop-sub{text-align:left;min-width:0;font-size:var(--fs-xs);line-height:1.35}.tracks-panel{flex-direction:column;gap:12px;min-height:0;padding:18px 16px 16px;display:flex;overflow:hidden}.tp-head{align-items:baseline;gap:10px;padding:0 4px;display:flex}.tp-head h2{font-size:var(--fs-lg);font-weight:700}.tp-head .count{margin-left:auto}.tracks{flex-direction:column;flex:1;gap:4px;min-height:0;margin:0 -6px;padding:0 6px;display:flex;overflow-y:auto}.trk{border-radius:var(--r-md);cursor:pointer;align-items:center;gap:12px;padding:7px;display:flex}.trk:hover{background:var(--card)}.trk.sel{background:var(--card-hi)}.trk .thumb{border-radius:var(--r-sm);background:linear-gradient(140deg,#2a2a30,#1a1a1d);flex-direction:column;flex:none;justify-content:space-between;width:52px;height:52px;padding:6px 8px;display:flex;position:relative}.trk.sel .thumb{background:var(--cta)}.trk .no{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500}.trk .dur{font-family:var(--mono);color:#ffffffd9;align-self:flex-end;font-size:12px}.trk .body{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.trk .nm{font-size:var(--fs-md);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.trk .meta{font-size:var(--fs-xs);color:var(--ink-3)}.trk .acts{gap:2px;display:flex}.trk .acts button{width:34px;height:34px;color:var(--ink-3);border-radius:50%;font-size:13px}.trk .acts button[data-a=rm]{font-size:20px}.trk .acts button:hover:not(:disabled){background:var(--card-hi);color:var(--ink)}@media (max-width:1280px){.app{grid-template-columns:340px minmax(0,1fr) 300px}}@media (max-width:1100px){.app{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:340px minmax(0,1fr);height:auto}.create{max-height:calc(100vh - var(--topbar) - var(--gap)*3);top:calc(var(--topbar) + var(--gap)*2);grid-row:1/3;position:sticky}.work{overflow:visible}.tracks-panel{grid-column:2;overflow:visible}.tracks{overflow:visible}}@media (max-width:900px){.app{grid-template-rows:none;grid-template-columns:1fr;gap:0;height:auto;min-height:0}.work{order:0;padding:16px;overflow:visible}.tracks-panel{order:1;grid-column:auto;padding:16px}.create{order:2;grid-row:auto;max-height:none;position:static;overflow:visible}.create-scroll{padding:16px;overflow:visible}.render-btns{grid-template-columns:1fr}.render-btns .btn-cta{order:-1}.transport{flex-wrap:wrap}.now{flex:1 1 0}.seek{flex-basis:100%}.env{flex-wrap:wrap;row-gap:2px;max-width:100%;height:auto;min-height:36px;margin-left:0;padding:8px 14px}}