.page-tools .top-chrome .nav button[data-tab="loop"]{--tool-icon:url('/static/img/tool-icons/loop.svg')}
.loop-lock[hidden],#loopPanel[hidden],.loop-empty[hidden],.loop-result[hidden],.loop-result video[hidden],.loop-result img[hidden],.loop-source[hidden],.loop-source video[hidden],.loop-source img[hidden],#loopGifNote[hidden]{display:none!important}
.loop-tool{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:16px;align-items:start}.loop-tool .card{border-radius:2px}.loop-tool__controls{padding:25px}.loop-kicker{color:#50d8ff;font:700 10px Consolas,monospace;letter-spacing:.18em}.loop-tool__controls h2{margin:10px 0 12px;font-size:32px;text-transform:uppercase}.loop-tool__controls>p{margin:0 0 18px;color:#8799aa;line-height:1.55}.loop-tool__controls .field{display:flex;flex-direction:column;gap:7px;margin-top:12px}.loop-tool__controls .btn{width:100%;margin-top:17px}.loop-drop{position:relative;display:grid;width:100%;min-height:150px;place-content:center;gap:7px;border:1px dashed rgba(80,216,255,.36);background:repeating-linear-gradient(135deg,rgba(80,216,255,.025) 0 12px,transparent 12px 24px);color:#d8f6ff;text-align:center;cursor:pointer}.loop-drop:hover,.loop-drop:focus-visible{border-color:#50d8ff;background-color:rgba(80,216,255,.045);outline:0}.loop-drop i{display:block;width:34px;height:34px;margin:0 auto;background:#50d8ff;mask:url('/static/img/tool-icons/loop.svg') center/contain no-repeat}.loop-drop span{color:#718899;font:10px Consolas,monospace}.loop-file{min-height:24px;padding-top:8px;color:#8ddff4;font:11px Consolas,monospace;overflow-wrap:anywhere}.loop-lock{display:grid;gap:5px;padding:18px;border-left:3px solid #ffc857;background:rgba(255,200,87,.07)}.loop-lock span{color:#9badba}.loop-progress{height:3px;margin-top:14px;background:#132230;overflow:hidden}.loop-progress i{display:block;width:0;height:100%;background:#50d8ff;box-shadow:0 0 12px #50d8ff;transition:width .3s}.loop-tool__stage{min-height:650px;padding:24px;overflow:hidden}.loop-empty{display:grid;min-height:600px;place-content:center;text-align:center}.loop-empty>span{color:#50d8ff;font:300 120px/1 Mulish,sans-serif;filter:drop-shadow(0 0 22px rgba(80,216,255,.25))}.loop-empty small{color:#4f7184;font:700 9px Consolas,monospace;letter-spacing:.2em}.loop-empty b{margin-top:12px;color:#b8c8d3}.loop-empty p{max-width:410px;color:#64798a}
.loop-source__label,.loop-editor__head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#8599a8;font:700 10px Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.loop-source__label{margin-bottom:12px}.loop-source__label b,.loop-editor__head b{color:#79e3ff}.loop-viewer{position:relative;display:grid;min-height:430px;place-items:center;overflow:hidden;border:1px solid rgba(80,216,255,.17);background:radial-gradient(circle at 50% 45%,rgba(25,52,67,.25),transparent 58%),#03070b}.loop-viewer video,.loop-viewer img{display:block;width:100%;max-height:58vh;object-fit:contain}.loop-play{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border:1px solid rgba(80,216,255,.45);background:rgba(4,13,20,.86);color:#8ce9ff;font:700 15px Consolas,monospace;cursor:pointer}.loop-play:hover,.loop-play:focus-visible{border-color:#50d8ff;box-shadow:0 0 18px rgba(80,216,255,.18);outline:0}
.loop-editor{margin-top:16px;padding:18px;border:1px solid rgba(80,216,255,.18);background:#061019}.loop-timeline{position:relative;height:82px;margin-top:14px;border:1px solid #1c3544;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(109,148,167,.12) calc(10% - 1px) 10%),linear-gradient(180deg,#0a1822,#071019);cursor:crosshair;touch-action:none;user-select:none}.loop-timeline:before{content:"";position:absolute;top:39px;right:0;left:0;height:2px;background:#203b4b}.loop-timeline__ticks{position:absolute;inset:0;pointer-events:none}.loop-timeline__ticks span{position:absolute;top:8px;transform:translateX(-50%);color:#577284;font:9px Consolas,monospace}.loop-timeline__ticks i{position:absolute;top:31px;width:1px;height:18px;background:#345365}.loop-timeline__selection{position:absolute;top:27px;height:28px;border-block:1px solid #50d8ff;background:rgba(80,216,255,.2);box-shadow:0 0 18px rgba(80,216,255,.12);pointer-events:none}.loop-timeline__playhead{position:absolute;top:18px;bottom:10px;width:2px;transform:translateX(-1px);background:#e9fbff;box-shadow:0 0 8px #50d8ff;pointer-events:none;z-index:3}.loop-handle{position:absolute;top:20px;bottom:8px;width:17px;transform:translateX(-50%);border:1px solid #76e6ff;background:#0a2532;box-shadow:0 0 13px rgba(80,216,255,.28);cursor:ew-resize;touch-action:none;z-index:4}.loop-handle span{position:absolute;top:17px;left:5px;width:5px;height:15px;border-inline:1px solid rgba(202,247,255,.8)}.loop-handle:focus-visible{outline:1px solid #fff;outline-offset:2px}.loop-editor__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:10px;background:#17303f}.loop-editor__meta>span{display:grid;gap:4px;padding:10px 12px;background:#08131c}.loop-editor__meta small{color:#587080;font:8px Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.loop-editor__meta b{color:#cfeaf2;font:11px Consolas,monospace}.loop-editor__meta>span:nth-child(2){text-align:center}.loop-editor__meta>span:last-child{text-align:right}.loop-editor>p{margin:10px 0 0;color:#60798a;font-size:10px}
.loop-result__badge{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:#8fffd2;font:700 10px Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}.loop-result__badge i{width:8px;height:8px;background:#66f2bd;box-shadow:0 0 10px #66f2bd}.loop-result video,.loop-result img{display:block;width:100%;max-height:64vh;object-fit:contain;background:#03070b;border:1px solid rgba(80,216,255,.15)}.loop-result__actions{display:flex;gap:10px;margin-top:14px}.loop-result__actions .btn{margin:0;text-decoration:none}.loop-result>p{color:#64798a;font-size:11px}.loop-tool[data-busy="1"] .loop-drop{pointer-events:none;opacity:.55}
@media(max-width:900px){.loop-tool{grid-template-columns:1fr}.loop-tool__stage{min-height:420px}.loop-empty{min-height:370px}.loop-viewer{min-height:300px}}@media(max-width:560px){.loop-tool__controls,.loop-tool__stage{padding:16px}.loop-viewer{min-height:240px}.loop-editor{padding:12px}.loop-timeline{height:76px}.loop-editor__meta small{letter-spacing:0}.loop-result__actions{flex-direction:column}}