.loop-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.loop-title h1{letter-spacing:0;margin:0;font-size:26px}.loop-layout{grid-template-columns:minmax(0,1fr) 280px;gap:24px;display:grid}.loop-layout *{letter-spacing:0}.loop-view{min-width:0}.loop-screen{background:#141719;justify-content:center;align-items:center;height:min(65dvh,640px);min-height:280px;display:flex}.loop-screen canvas{object-fit:contain;max-width:100%;max-height:100%}.loop-empty{justify-items:center;gap:20px;display:grid}.loop-transport{align-items:center;gap:10px;padding:12px 0;display:flex}.loop-transport input{flex:1;min-width:0}.loop-file{overflow-wrap:anywhere;color:#a7b1bb;font-size:12px}.loop-controls{border-left:1px solid var(--line-strong);min-width:0;padding-left:24px}.loop-controls fieldset{border:0;min-width:0;margin:0;padding:0}.loop-controls legend{margin-bottom:16px;font-weight:700}.loop-controls label{color:#d4dadd;margin-bottom:18px;display:block}.loop-controls output{float:right;color:#f0c373}.loop-controls input,.loop-controls select{accent-color:#edb96b;width:100%;min-height:44px;margin-top:6px;display:block}.loop-controls select{background:#202526;border:1px solid #465054;border-radius:4px;padding:8px}.loop-controls progress{width:100%}.loop-layout .btn,.loop-title .btn{white-space:normal;border-radius:6px;min-height:44px}.loop-controls [role=alert]{color:#ffb2a8}.loop-controls .btn{width:100%}@media (width<=760px){.loop-layout{grid-template-columns:1fr}.loop-controls{border-left:0;border-top:1px solid var(--line-strong);padding:20px 0}.loop-screen{height:44dvh;min-height:240px}.loop-controls input,.loop-controls select{font-size:16px}.loop-title{align-items:flex-start}}body:has(.loop-layout){--bg:#0b151c;--panel:#12222d;--line-strong:#29414e;--text:#e7f1f4;--accent:#55eadf;background:#0b151c}.loop-title{border-bottom:1px solid #29414e;padding-bottom:18px}.loop-title h1{color:#efffff;font-size:30px;font-weight:650}.loop-title .btn:last-child{color:#09272a;background:#55eadf;border-color:#55eadf}.loop-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}.loop-screen{background:#071015;border:1px solid #29414e;border-radius:12px;height:min(62vh,590px);min-height:290px;overflow:hidden}.loop-transport{gap:12px;padding:16px 0}.loop-transport input,.loop-controls input{accent-color:#55eadf}.loop-transport .btn{color:#aafff5;background:#17343d}.loop-controls{background:#101e28;border:1px solid #29414e;border-radius:12px;align-self:start;padding:20px}.loop-controls label{color:#b3c9d3;font-size:13px}.loop-controls output{color:#55eadf}.loop-controls select{color:#e7f1f4;background:#142832;border-color:#304a57;border-radius:8px}.loop-controls .btn{background:#17303c;margin-top:8px}.loop-file{color:#91b1bf;margin:14px 0}.loop-strip{background:#101e28;border:1px solid #29414e;border-radius:12px;padding:14px}.strip-heading{color:#c4dbe4;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px;display:flex}.strip-heading span{color:#55eadf}.strip-frames{border:2px solid #55eadf;border-radius:8px;min-height:65px;display:flex;overflow:hidden}.strip-frames img{object-fit:cover;aspect-ratio:1.6;width:16.666%;min-width:0}.loop-strip p{color:#91b1bf;margin:12px 0 0;font-size:12px}.loop-layout button:disabled,.loop-title button:disabled{opacity:.4}.loop-layout [role=alert]{color:#ffb8aa}@media (width<=900px){.loop-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.loop-controls{padding:16px}}@media (width<=760px){.loop-layout{grid-template-columns:1fr}.loop-screen{height:40vh;min-height:220px}.loop-title .btn-row{flex-wrap:wrap;gap:8px;display:flex}.loop-title .btn{padding:9px 11px;font-size:12px}.loop-controls{border:1px solid #29414e;padding:18px}.loop-strip{padding:10px}.strip-frames img{aspect-ratio:1}.loop-transport{gap:7px}}.loop-time{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:96px;font-size:12px}@media (width<=600px){body:has(.loop-layout) .tool-topbar{grid-template-columns:minmax(0,1fr);position:relative}body:has(.loop-layout) .tool-switcher{flex-wrap:nowrap;grid-row:auto;justify-content:flex-start;min-width:0;overflow-x:auto}body:has(.loop-layout) .tool-switcher a{flex:none}body:has(.loop-layout) .tool-actions{flex-wrap:wrap;justify-content:flex-start}}