.arr{--ar-gutter:35px;--ar-frame:#31392f;--ar-ink:#cbd4c2;border:1px solid var(--ar-frame);border-radius:8px;overflow:hidden;color:var(--ar-ink);background:#141813;user-select:none;-webkit-user-select:none}
.arr [hidden]{display:none!important}
.arr-tools,.arr-zoom,.arr-scroll,.arr-row,.arr-clock{display:flex;align-items:center}
.arr-tools{gap:10px;padding:7px 10px;min-height:36px;background:#1a1e19;border-bottom:1px solid var(--ar-frame);font-size:11px}
.arr-clock{gap:6px;color:#9aa493;white-space:nowrap}.arr-clock output,.arr-ratio{font:11px ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;color:#d5dfca}
.arr-scroll{gap:6px;margin-left:auto;color:#a8b1a0;white-space:nowrap}.arr .arr-scroll input{width:clamp(65px,12vw,160px);--tint:#afc69b}
.arr-zoom{gap:3px}.arr-zoom button{min-height:22px;min-width:25px;padding:1px 6px;background:#272e24;border:1px solid #3b4536;border-radius:4px;font:13px ui-monospace,Consolas,monospace;color:#d7ddcf}
.arr-zoom button:hover:not(:disabled){background:#35402e;color:#d1fab1}.arr-zoom button:disabled{opacity:.36}.arr .arr-fit{font-size:10px;letter-spacing:.03em;margin-left:4px}.arr-ratio{min-width:31px;text-align:center;color:#b8d3a1}
.arr-view{position:relative;touch-action:none}.arr-row{position:relative;min-width:0;border-bottom:1px solid #2c342b}.arr-row:last-of-type{border-bottom:0}
.arr-gutter{width:var(--ar-gutter);flex:none;align-self:stretch;background:#191e18;border-right:1px solid #30382e;display:grid;place-items:center;font:700 11px ui-monospace,Consolas,monospace;color:#9caa92}
.arr-gutter span{display:grid;place-items:center;width:20px;height:19px;border-radius:4px;background:#443429;color:#f6c391}
.arr-row[data-deck=b] .arr-gutter span{background:#233b35;color:#94dcd0}
.arr-ruler,.arr-lane{flex:1;min-width:0;position:relative;overflow:hidden}.arr-ruler{height:24px;cursor:pointer}
.arr-ruler canvas,.arr-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arr-ruler-window{position:absolute;bottom:0;height:3px;background:#b6d990;pointer-events:none}
.arr-lane{height:42px;background:#161b16}.arr-row[data-deck=a]{--ar-clip:#e1a56e;--ar-border:#976642;--ar-body:rgba(121,74,42,.23);--ar-shade:#34281e}
.arr-row[data-deck=b]{--ar-clip:#8ed0c4;--ar-border:#57877b;--ar-body:rgba(53,106,89,.23);--ar-shade:#20332e}
.arr-body,.arr-ltrim,.arr-rtrim{position:absolute;top:3px;bottom:3px;touch-action:none;margin:0;padding:0;border-radius:3px}
.arr-body{z-index:2;cursor:grab;border:1px solid var(--ar-border);background:var(--ar-body);overflow:hidden;text-align:left;color:var(--ar-clip)}.arr-body:hover{box-shadow:inset 0 0 0 1px var(--ar-border)}
.arr button:active:not(:disabled){transform:none}.arr-body:active,.arr-view.arr-grabbed,.arr-view.arr-grabbed *{cursor:grabbing}
.arr-label{position:absolute;top:3px;left:12px;display:flex;align-items:center;gap:5px;max-width:calc(100% - 24px);padding:0 4px 1px;border-radius:3px;white-space:nowrap;line-height:15px;font-size:10px;background:var(--ar-shade);pointer-events:none}
.arr-title{overflow:hidden;text-overflow:ellipsis}.arr-grip{width:6px;height:8px;flex:none;background:radial-gradient(circle,var(--ar-clip) 1px,transparent 1.1px) 0 0/3px 3px;opacity:.8}
.arr-ltrim,.arr-rtrim{z-index:4;display:grid;place-items:center;min-width:0;cursor:ew-resize;background:var(--ar-border);color:#131b12}
.arr-ltrim{border-radius:3px 0 0 3px}.arr-rtrim{border-radius:0 3px 3px 0}
.arr-ltrim::after,.arr-rtrim::after{content:"";width:2px;height:13px;background:var(--ar-clip);border-radius:2px}
.arr-ltrim:hover,.arr-rtrim:hover,.arr-view.arr-trimming .arr-ltrim:focus,.arr-view.arr-trimming .arr-rtrim:focus{background:var(--ar-clip)}.arr-ltrim:hover::after,.arr-rtrim:hover::after{background:#3a4834}
.arr-window{z-index:3;pointer-events:none;position:absolute;top:0;bottom:0;background:repeating-linear-gradient(125deg,transparent 0,transparent 7px,#c9ef9f19 7px,#c9ef9f19 8px),#c9ef9f0d}
.arr-window.arr-start{border-left:1px dashed #c7eba2a8}.arr-window.arr-end{border-right:1px dashed #c7eba2a8}
.arr-head-layer{position:absolute;z-index:5;pointer-events:none;overflow:hidden;inset:0 0 0 var(--ar-gutter)}.arr-head{position:absolute;top:0;bottom:0;width:1px;background:#c1f787;box-shadow:0 0 5px #b4ea7c4d}.arr-head::before{content:"";display:block;width:8px;height:8px;background:#c1f787;clip-path:polygon(0 0,100% 0,100% 48%,50% 100%,0 48%);transform:translateX(-3.5px)}
.arr button:focus-visible,.arr-ruler:focus-visible{outline:2px solid #dafcb5;outline-offset:-2px}
@media(max-width:650px){.arr{--ar-gutter:25px}.arr-tools{gap:5px;padding:5px 6px;flex-wrap:wrap}.arr-clock{font-size:10px}.arr-clock output{font-size:9px}.arr-scroll{gap:3px;font-size:10px}.arr .arr-scroll input{width:55px}.arr-ratio{font-size:10px;min-width:26px}.arr-zoom button{min-width:22px}.arr-row[data-deck] .arr-gutter span{width:16px;font-size:9px}.arr-label{font-size:9px}}
@media(max-width:420px){.arr-clock{order:1;flex:1 0 100%}.arr-scroll{margin-left:0}.arr-zoom{margin-left:auto}}