.creator-loop-pedal {
  display: grid; gap: 16px; padding: 20px;
  border-color: color-mix(in srgb, #e7a1bf 48%, var(--line));
  background: radial-gradient(circle at 90% 0%, rgba(231,161,191,.12), transparent 38%), linear-gradient(145deg, color-mix(in srgb,#8e5f87 12%,var(--panel)),var(--panel2));
}
.creator-loop-pedal__heading { display:flex; justify-content:space-between; gap:18px; }
.creator-loop-pedal h2 { margin:.1em 0 .25em; font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.04em; }
.creator-loop-pedal p { margin:.2em 0; color:var(--muted); }
.creator-loop-pedal__live { height:max-content; padding:7px 10px; border:1px solid rgba(104,217,154,.35); border-radius:999px; color:#8de4ae; font-size:.55rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.creator-loop-pedal__live i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#68d99a; box-shadow:0 0 9px #68d99a; }
.creator-loop-pedal__setup { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.creator-loop-pedal__setup label { display:grid; gap:5px; color:var(--muted); font-size:.58rem; font-weight:850; }
.creator-loop-pedal__setup input,.creator-loop-pedal__setup select { margin:0; min-height:39px; padding:8px 10px; }
.creator-loop-pedal__setup .creator-loop-pedal__auto-sync { display:flex; align-items:center; gap:7px; min-height:39px; padding:0 10px; border:1px solid var(--line); border-radius:10px; }
.creator-loop-pedal__auto-sync input { min-height:auto; }
.creator-loop-pedal__length { margin-left:auto; padding:10px 12px; color:#f4b6d1; font:700 .58rem/1 ui-monospace,monospace; }
.creator-loop-pedal__transport { display:grid; grid-template-columns:50px 1fr auto; gap:12px; align-items:center; padding:15px; border:1px solid rgba(231,161,191,.25); border-radius:17px; background:#100e18; }
.creator-loop-pedal__transport strong,.creator-loop-pedal__transport small { display:block; }
.creator-loop-pedal__transport small { margin-top:4px; color:var(--muted); font-size:.6rem; }
.creator-loop-pedal__transport time { min-width:188px; color:#f4b6d1; font:800 .68rem/1 ui-monospace,monospace; text-align:right; }
.creator-loop-pedal__beat { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#170f19; background:#f4b6d1; font-size:.8rem; font-weight:950; box-shadow:0 0 0 0 rgba(231,161,191,.35); }
.creator-loop-pedal.is-beat .creator-loop-pedal__beat { animation:loop-pedal-pulse .18s ease-out; }
.creator-loop-pedal__position { position:relative; height:50px; overflow:hidden; border:1px solid rgba(231,161,191,.34); border-radius:12px; background:linear-gradient(180deg,#17111f,#0e0c13); cursor:pointer; }
.creator-loop-pedal__position:focus-visible { outline:3px solid color-mix(in srgb,#e7a1bf 70%,white); outline-offset:3px; }
.creator-loop-pedal__position>span { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,rgba(231,161,191,.12),rgba(169,111,192,.3)); }
.creator-loop-pedal__position>i { position:absolute; z-index:3; top:0; bottom:0; left:0; width:3px; border-radius:3px; background:#fff1f7; box-shadow:0 0 12px #e7a1bf; transform:translateX(-1px); }
.creator-loop-pedal__position>div { position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.creator-loop-pedal__position>div b { display:flex; align-items:end; padding:0 0 5px 5px; border-left:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.45); font:700 .48rem/1 ui-monospace,monospace; }
.creator-loop-pedal__position>div b:nth-child(4n+1) { border-left-color:rgba(231,161,191,.62); color:#f4b6d1; }
.creator-loop-pedal__position>div b.is-current { background:rgba(231,161,191,.12); color:white; }
.creator-loop-pedal__actions { display:flex; gap:8px; flex-wrap:wrap; }
.creator-loop-pedal__actions .button { min-height:46px; }
.creator-loop-pedal__record { min-width:162px; }
.creator-loop-pedal__import { position:relative; overflow:hidden; }
.creator-loop-pedal__import input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.creator-loop-pedal__visualizer { padding:13px; border:1px solid var(--line); border-radius:16px; background:rgba(7,6,12,.46); }
.creator-loop-pedal__visualizer>header { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.creator-loop-pedal__visualizer>header small,.creator-loop-pedal__visualizer>header strong { display:block; }
.creator-loop-pedal__visualizer>header small { margin-top:3px; color:var(--muted); font-size:.55rem; }
.creator-loop-pedal__visualizer>header>div:last-child { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.creator-loop-pedal__visualizer label { display:grid; gap:4px; color:var(--muted); font-size:.55rem; font-weight:800; }
.creator-loop-pedal__visualizer select { min-width:210px; margin:0; }
.creator-loop-pedal__visualizer-stage { position:relative; min-height:250px; margin-top:12px; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 28% 44%,rgba(240,77,255,.62),transparent 24%),radial-gradient(circle at 67% 58%,rgba(95,251,241,.48),transparent 30%),linear-gradient(135deg,#17102d,#070a12 58%,#182634); }
.creator-loop-pedal__visualizer-stage canvas { display:block; width:100%; height:clamp(250px,38vw,430px); }
.creator-loop-pedal__visualizer-stage span { position:absolute; left:12px; bottom:12px; padding:6px 9px; border-radius:999px; color:white; background:rgba(5,5,9,.72); backdrop-filter:blur(8px); font-size:.54rem; font-weight:800; }
.creator-loop-pedal__tracks { --loop-layer-pointer-x:-100%; display:grid; gap:2px; }
.creator-loop-pedal__recovery { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; }
.creator-loop-pedal__recovery[hidden] { display:none; }
.creator-loop-pedal__recovery p { margin-top:4px; font-size:.6rem; }
.creator-loop-pedal__empty,.creator-loop-track { padding:13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.creator-loop-pedal__empty strong,.creator-loop-pedal__empty span { display:block; }
.creator-loop-pedal__empty span { margin-top:4px; color:var(--muted); font-size:.59rem; }
.creator-loop-track { display:grid; grid-template-columns:28px minmax(145px,.55fr) minmax(260px,1.45fr) minmax(315px,auto); gap:5px; align-items:center; min-height:50px; padding:3px 5px; border-radius:7px; background:linear-gradient(110deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.creator-loop-track.is-reference { border-color:rgba(104,217,154,.48); box-shadow:inset 3px 0 #68d99a; }
.creator-loop-track.is-muted { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.012); }
.creator-loop-track.is-muted .creator-loop-track__number,.creator-loop-track.is-muted .creator-loop-track__identity,.creator-loop-track.is-muted .creator-loop-track__wave,.creator-loop-track.is-muted .creator-loop-track__effects { opacity:.48; }
.creator-loop-track__number { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#f7c4da; background:rgba(231,161,191,.13); font-size:.58rem; font-weight:900; }
.creator-loop-track__identity strong,.creator-loop-track__identity small { display:block; }
.creator-loop-track__identity small { overflow:hidden; margin-top:1px; color:var(--muted); font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-loop-track__bpm { display:flex; align-items:center; gap:4px; margin-top:3px; flex-wrap:nowrap; }
.creator-loop-track__bpm label { color:var(--muted); font-size:.52rem; font-weight:800; }
.creator-loop-track__bpm input { width:62px; min-height:25px; margin:0; padding:3px 5px; }
.creator-loop-track__badge { padding:4px 6px; border-radius:999px; color:#92e7b4; background:rgba(104,217,154,.1); font-size:.48rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.creator-loop-track__live-bpm { color:#b9ddff; background:rgba(77,157,223,.14); }
.creator-loop-track__wave { position:relative; height:44px; overflow:hidden; border:1px solid rgba(244,182,209,.2); border-radius:5px; background-color:#0b0911; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 L10 21 L20 25 L30 12 L40 34 L50 18 L60 23 L70 7 L80 38 L90 17 L100 27 L110 10 L120 35 L130 19 L140 24 L150 8 L160 37 L170 15 L180 29 L190 12 L200 33 L210 18 L220 25 L230 9 L240 36 L250 16 L260 30 L270 11 L280 34 L290 20 L300 23 L310 15 L320 22' fill='none' stroke='%23f4b6d1' stroke-opacity='.32' stroke-width='2'/%3E%3C/svg%3E"); background-size:100% 100%; cursor:crosshair; transition:opacity .18s ease,border-color .18s ease; }
.creator-loop-track__wave canvas { display:block; width:100%; height:100%; }
.creator-loop-track__wave>i { position:absolute; z-index:2; top:0; bottom:0; left:0; width:2px; transform:translateX(-1px); background:#fff; box-shadow:0 0 8px #ff77ad,0 0 18px 5px rgba(255,119,173,.34); pointer-events:none; }
.creator-loop-track__wave>i::before { content:""; position:absolute; inset:0 auto 0 50%; width:18px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(255,119,173,.2),transparent); }
.creator-loop-track__wave::after { content:""; position:absolute; z-index:3; top:0; bottom:0; left:var(--loop-layer-pointer-x); width:1px; transform:translateX(-.5px); border-left:1px dashed rgba(134,201,255,.92); background:rgba(134,201,255,.22); box-shadow:0 0 9px 2px rgba(134,201,255,.32); opacity:0; pointer-events:none; }
.creator-loop-track__pointer { position:absolute; z-index:4; top:0; bottom:0; left:-100%; width:2px; transform:translateX(-1px); background:#8dd3ff; box-shadow:0 0 0 1px rgba(7,10,18,.72),0 0 12px 3px rgba(75,174,255,.72); opacity:0; pointer-events:none; }
.creator-loop-track__pointer::before { content:""; position:absolute; top:0; left:50%; width:9px; height:9px; transform:translate(-50%,-1px) rotate(45deg); border:1px solid rgba(7,10,18,.82); background:#8dd3ff; }
.creator-loop-pedal__tracks.is-pointer-tracking .creator-loop-track__wave::after { opacity:1; }
.creator-loop-pedal__tracks.is-pointer-tracking .creator-loop-track__pointer { opacity:1; }
.creator-loop-pedal__tracks.is-pointer-tracking .creator-loop-track__wave { border-color:rgba(134,201,255,.42); }
.creator-loop-track__controls { display:flex; justify-content:flex-end; align-items:center; gap:3px; flex-wrap:nowrap; }
.creator-loop-track__controls button { min-width:27px; min-height:26px; padding:3px 6px; font-size:.47rem; white-space:nowrap; }
.creator-loop-track__toggle[aria-pressed=true] { color:#102017; border-color:rgba(104,217,154,.7); background:#8de4ae; }
.creator-loop-track__toggle[aria-pressed=false] { color:#d8cad2; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.creator-loop-track__shift { min-width:42px; color:#f4b6d1; font:750 .45rem/1 ui-monospace,monospace; text-align:center; }
.creator-loop-pedal__save-note { padding:10px 12px; border-left:2px solid #e7a1bf; background:rgba(231,161,191,.06); font-size:.62rem; }
.creator-loop-pedal--standalone { margin-bottom:28px; }
.creator-loop-pedal__performance { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:14px; }
.creator-loop-pedal__wave,.creator-loop-pedal__layers,.creator-loop-pedal__sessions,.creator-loop-pedal__export,.creator-loop-pedal__shows { padding:13px; border:1px solid var(--line); border-radius:16px; background:rgba(7,6,12,.46); }
.creator-loop-pedal__wave>header,.creator-loop-pedal__layers>header,.creator-loop-pedal__sessions>header,.creator-loop-pedal__export>header,.creator-loop-pedal__shows>header { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.creator-loop-pedal__wave>header strong,.creator-loop-pedal__wave>header span,.creator-loop-pedal__layers>header small,.creator-loop-pedal__sessions>header small { display:block; }
.creator-loop-pedal__wave>header span,.creator-loop-pedal__layers>header small,.creator-loop-pedal__sessions>header small { color:var(--muted); font-size:.55rem; }
.creator-loop-pedal__wave-stage { position:relative; min-height:250px; margin-top:12px; overflow:hidden; border-radius:12px; background:#08070d; }
.creator-loop-pedal__wave-stage canvas { display:block; width:100%; height:clamp(250px,38vw,430px); }
.creator-loop-pedal__record-overlay { position:fixed; z-index:1100; inset:max(84px,10vh) auto auto 50%; display:grid; gap:8px; width:min(82vw,420px); min-width:min(82vw,340px); padding:24px 30px; transform:translateX(-50%); border:2px solid rgba(255,255,255,.82); border-radius:24px; color:white; background:rgba(190,24,65,.94); box-shadow:0 14px 60px rgba(255,32,84,.52),0 0 0 9999px rgba(3,2,7,.14); text-align:center; cursor:pointer; backdrop-filter:blur(8px); }
.creator-loop-pedal__record-overlay[hidden] { display:none; }
.creator-loop-pedal__record-overlay strong { font-size:clamp(1.5rem,4vw,2.8rem); letter-spacing:.03em; }
.creator-loop-pedal__record-overlay span { font-size:.65rem; font-weight:800; }
.creator-loop-pedal__record-overlay.is-waiting { color:#17101b; border-color:#ffe5f0; background:rgba(244,182,209,.94); box-shadow:0 14px 60px rgba(231,161,191,.34); }
.creator-loop-pedal__show-overlay { position:absolute; z-index:4; top:12px; left:12px; display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid rgba(255,100,132,.58); border-radius:999px; color:#fff; background:rgba(154,18,55,.84); box-shadow:0 8px 30px rgba(255,38,85,.22); backdrop-filter:blur(8px); }
.creator-loop-pedal__show-overlay[hidden] { display:none; }
.creator-loop-pedal__show-overlay strong { font-size:.52rem; letter-spacing:.08em; }
.creator-loop-pedal__show-overlay time { font:850 .62rem/1 ui-monospace,monospace; }
.creator-loop-pedal__show-overlay.is-paused { color:#201622; border-color:#f4d88b; background:rgba(244,216,139,.92); box-shadow:none; }
.creator-loop-pedal__show-start { border-color:rgba(255,91,126,.58)!important; background:linear-gradient(135deg,#a81e48,#d54e72)!important; }
.creator-loop-pedal.is-recording .creator-loop-pedal__wave { border-color:rgba(255,89,125,.72); box-shadow:inset 0 0 0 1px rgba(255,89,125,.28); }
.creator-loop-pedal__visualizer-stage:fullscreen { width:100vw; height:100vh; margin:0; border-radius:0; background:#030408; }
.creator-loop-pedal__visualizer-stage:fullscreen canvas { width:100vw; height:100vh; }
.creator-loop-pedal__fullscreen-exit { position:absolute; z-index:8; top:14px; right:14px; }
.creator-loop-pedal__layers>header h3,.creator-loop-pedal__sessions>header h3 { margin:.1em 0 .2em; }
.creator-loop-track__name { width:100%; min-height:34px; margin:0; padding:5px 8px; font-weight:850; }
.creator-loop-track__effects { position:relative; flex:0 0 auto; }
.creator-loop-track__effects summary { min-height:26px; padding:6px 8px; border:1px solid var(--line); border-radius:999px; color:#f4b6d1; background:rgba(255,255,255,.035); font-size:.48rem; font-weight:900; line-height:1; cursor:pointer; list-style:none; }
.creator-loop-track__effects summary::-webkit-details-marker { display:none; }
.creator-loop-track__effect-grid { position:absolute; z-index:20; top:calc(100% + 6px); right:0; display:grid; grid-template-columns:repeat(3,minmax(135px,1fr)); gap:8px 12px; width:min(720px,calc(100vw - 44px)); padding:12px; border:1px solid rgba(244,182,209,.28); border-radius:12px; background:#17111f; box-shadow:0 16px 42px rgba(0,0,0,.55); }
.creator-loop-track__effect-grid label { display:grid; grid-template-columns:1fr auto; gap:4px 8px; color:var(--muted); font-size:.5rem; font-weight:800; }
.creator-loop-track__effect-grid output { color:#f4b6d1; font-family:ui-monospace,monospace; }
.creator-loop-track__effect-grid input[type=range] { grid-column:1/-1; width:100%; min-height:20px; margin:0; padding:0; }
.creator-loop-track__effect-reset { align-self:end; justify-self:start; }
.creator-loop-pedal__sessions>header { align-items:center; }
.creator-loop-pedal__session-save { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.creator-loop-pedal__session-save label { display:grid; gap:4px; color:var(--muted); font-size:.55rem; font-weight:800; }
.creator-loop-pedal__session-save input { min-width:220px; margin:0; }
.creator-loop-pedal__save-status { padding:9px 11px; border-radius:10px; color:#a7e9bf!important; background:rgba(104,217,154,.08); font-size:.58rem; }
.creator-loop-pedal__save-status.is-error { color:#ffb4c3!important; background:rgba(255,89,125,.09); }
.creator-loop-pedal__saved { display:grid; gap:7px; }
.creator-loop-session { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.creator-loop-session strong,.creator-loop-session small { display:block; }
.creator-loop-session small { margin-top:3px; color:var(--muted); font-size:.53rem; }
.creator-loop-session>div:last-child { display:flex; gap:6px; }
.creator-loop-pedal__export-actions { display:flex; align-items:end; gap:9px; flex-wrap:wrap; margin-top:12px; }
.creator-loop-pedal__export-actions label { display:grid; gap:4px; min-width:min(100%,330px); color:var(--muted); font-size:.55rem; font-weight:800; }
.creator-loop-pedal__export-actions select { margin:0; }
.creator-loop-pedal__export>p { padding:9px 11px; border-radius:10px; color:var(--muted); background:rgba(255,255,255,.035); font-size:.58rem; }
.creator-loop-pedal__shows>[data-loop-shows] { display:grid; gap:8px; margin-top:11px; }
.creator-loop-show { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.creator-loop-show strong,.creator-loop-show small { display:block; }
.creator-loop-show small { margin-top:3px; color:var(--muted); font-size:.52rem; }
.creator-loop-show audio { width:100%; }
.creator-loop-show>div:last-child { display:flex; gap:6px; }
.creator-loop-midi { width:min(1320px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:22px; overflow:auto; border:2px solid rgba(244,182,209,.55); border-radius:20px; color:#fff7fb; background:#15101d; box-shadow:0 26px 100px rgba(0,0,0,.72); }
.creator-loop-midi::backdrop { background:rgba(3,2,7,.78); backdrop-filter:blur(8px); }
.creator-loop-midi>form>header { display:flex; justify-content:space-between; gap:16px; }
.creator-loop-midi h2 { margin:.1em 0 .2em; color:#fff; }
.creator-loop-midi p { margin:.2em 0; color:#e0d0da; }
.creator-loop-midi .eyebrow { color:#ffb8d5; }
.creator-loop-midi .button.secondary { color:#fff!important; border-color:rgba(255,255,255,.32)!important; background:#2b2436!important; }
.creator-loop-midi .button:not(.secondary) { color:#24131b!important; border-color:#ffd166!important; background:#ffd98a!important; }
.creator-loop-midi__setup { display:flex; gap:10px; flex-wrap:wrap; margin:15px 0; }
.creator-loop-midi__setup label { display:grid; gap:6px; min-width:230px; color:#f7dfeb; font-size:.7rem; font-weight:850; }
.creator-loop-midi__setup input,.creator-loop-midi__setup select { margin:0; color:#fff!important; border-color:rgba(244,182,209,.42)!important; background:#0c0912!important; }
.creator-loop-midi__map { margin:16px 0 18px; padding:12px; border:1px solid rgba(244,182,209,.42); border-radius:14px; background:#0b0811; }
.creator-loop-midi__map>header { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:9px; }
.creator-loop-midi__map>header strong,.creator-loop-midi__map>header small { display:block; }
.creator-loop-midi__map>header strong { color:#fff; font-size:.78rem; }
.creator-loop-midi__map>header small { margin-top:3px; color:#e1ced9; font-size:.61rem; }
.creator-loop-midi__map>header>span { color:#ffd98a; font:750 .59rem/1.3 ui-monospace,monospace; text-align:right; }
.creator-loop-midi__map-stage { position:relative; height:190px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:#090711; cursor:crosshair; }
.creator-loop-midi__map-stage canvas,.creator-loop-midi__map-points { position:absolute; inset:0; width:100%; height:100%; }
.creator-loop-midi__map-points { z-index:2; pointer-events:none; }
.creator-loop-midi__map-point { position:absolute; width:14px!important; min-width:14px!important; height:14px!important; min-height:14px!important; padding:0!important; transform:translate(-50%,-50%); border:2px solid #fff!important; border-radius:50%!important; background:#ff77ad!important; box-shadow:0 0 0 3px rgba(0,0,0,.48),0 0 13px rgba(255,119,173,.8)!important; pointer-events:auto; cursor:pointer; }
.creator-loop-midi__map-point.row-1 { background:#ffd166!important; box-shadow:0 0 0 3px rgba(0,0,0,.48),0 0 13px rgba(255,209,102,.75)!important; }
.creator-loop-midi__map-point.row-2 { background:#75e6b1!important; box-shadow:0 0 0 3px rgba(0,0,0,.48),0 0 13px rgba(117,230,177,.75)!important; }
.creator-loop-midi__map-point.row-3 { background:#86c9ff!important; box-shadow:0 0 0 3px rgba(0,0,0,.48),0 0 13px rgba(134,201,255,.75)!important; }
.creator-loop-midi__map-point.row-4 { background:#c9a0ff!important; box-shadow:0 0 0 3px rgba(0,0,0,.48),0 0 13px rgba(201,160,255,.75)!important; }
.creator-loop-midi__map-point:focus-visible { width:19px!important; height:19px!important; outline:3px solid #fff; outline-offset:3px; }
.creator-loop-midi__map-playhead { position:absolute; z-index:3; top:0; bottom:0; left:0; width:3px; transform:translateX(-1px); background:#fff; box-shadow:0 0 12px #ff77ad; pointer-events:none; }
.creator-loop-midi__beats,.creator-loop-midi__grid>div { display:grid; grid-template-columns:72px repeat(16,minmax(26px,1fr)); gap:4px; align-items:center; }
.creator-loop-midi__beats { margin-bottom:7px; color:#f5dce8; font:800 .6rem/1 ui-monospace,monospace; text-align:center; }
.creator-loop-midi__grid { display:grid; gap:5px; min-width:720px; }
.creator-loop-midi__grid>div>strong { overflow:hidden; color:#ffd4e7; font-size:.68rem; text-overflow:ellipsis; }
.creator-loop-midi__grid button { display:grid; place-items:center; min-height:42px; padding:0; border:1px solid rgba(255,255,255,.35)!important; border-radius:7px; color:#f7eaf0!important; background:#241b2e!important; box-shadow:none!important; cursor:pointer; }
.creator-loop-midi__grid button:nth-of-type(4n+1) { border-left:3px solid #ff9fc4!important; }
.creator-loop-midi__grid button:hover { border-color:#fff!important; background:#332640!important; }
.creator-loop-midi__grid button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.creator-loop-midi__grid button.is-active { color:#20131a!important; border-color:#fff0b8!important; background:#ffd166!important; box-shadow:0 0 13px rgba(255,209,102,.45)!important; }
.creator-loop-midi>footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; }
.creator-loop-midi>footer span { margin-right:auto; color:#f2dce7; font-size:.68rem; }
@keyframes loop-pedal-pulse { 0% { transform:scale(.88); box-shadow:0 0 0 0 rgba(231,161,191,.55); } 100% { transform:scale(1); box-shadow:0 0 0 12px rgba(231,161,191,0); } }
@media(max-width:760px) {
  .creator-loop-pedal { padding:15px; }
  .creator-loop-pedal__heading,.creator-loop-pedal__visualizer>header { display:grid; }
  .creator-loop-pedal__length { margin-left:0; }
  .creator-loop-pedal__transport { grid-template-columns:46px 1fr; }
  .creator-loop-pedal__transport time { grid-column:2; min-width:0; text-align:left; }
  .creator-loop-pedal__recovery { display:grid; }
  .creator-loop-pedal__recovery[hidden] { display:none; }
  .creator-loop-track { grid-template-columns:28px 1fr; }
  .creator-loop-track__wave { grid-column:1/-1; height:42px; }
  .creator-loop-track__controls { grid-column:1/-1; justify-content:flex-start; flex-wrap:wrap; }
  .creator-loop-pedal__performance { grid-template-columns:1fr; }
  .creator-loop-pedal__wave>header,.creator-loop-pedal__layers>header,.creator-loop-pedal__sessions>header,.creator-loop-session { display:grid; }
  .creator-loop-track__effect-grid { right:auto; left:0; grid-template-columns:repeat(2,minmax(120px,1fr)); width:calc(100vw - 44px); }
  .creator-loop-pedal__session-save { display:grid; }
  .creator-loop-pedal__session-save input { min-width:0; width:100%; }
  .creator-loop-pedal__export-actions { display:grid; }
  .creator-loop-midi>form>header,.creator-loop-midi>footer { display:grid; }
  .creator-loop-midi>footer span { margin-right:0; }
  .creator-loop-show { grid-template-columns:1fr; }
  .creator-loop-pedal__record-overlay { inset:72px auto auto 50%; width:calc(100vw - 30px); min-width:0; padding:20px 18px; }
}
@media(prefers-reduced-motion:reduce) { .creator-loop-pedal * { animation:none!important; transition-duration:.01ms!important; } }

/* Stable, inline layer controls leave room to hold faders on separate layers. */
.creator-loop-pedal__control-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:14px 0; }
.creator-loop-pedal__control-tools label { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }
.creator-loop-pedal__control-tools select { min-height:44px; margin:0; }
.creator-loop-pedal__control-tools small { flex:1 1 240px; font-size:12px; color:var(--muted); }
.creator-loop-pedal__fine { cursor:pointer; }
.creator-loop-pedal__fine input { width:22px; height:22px; margin:0; }
.creator-loop-track { grid-template-columns:28px minmax(140px,.65fr) minmax(160px,1fr); }
.creator-loop-track__controls { grid-column:1/-1; flex-wrap:wrap; justify-content:flex-start; gap:6px; }
.creator-loop-track__controls button { min-width:44px; min-height:44px; padding:6px 10px; font-size:12px; }
.creator-loop-track__effects { grid-column:1/-1; min-width:0; }
.creator-loop-track__effects summary { display:flex; align-items:center; width:max-content; min-height:44px; padding:8px 14px; font-size:13px; }
.creator-loop-track__effect-grid { position:static; width:auto; margin-top:8px; grid-template-columns:repeat(6,minmax(0,1fr)); padding:10px; gap:12px; box-shadow:none; }
.creator-loop-track__effect-grid label { min-width:0; font-size:12px; }
.creator-loop-track__effect-grid output { min-height:20px; white-space:nowrap; }
.creator-loop-track__effect-reset { min-height:44px; grid-column:1/-1; justify-self:start; }
.creator-loop-track__effect-grid input[type=range] { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:100%; height:48px; min-height:48px; border:1px solid transparent; border-radius:8px; padding:0; touch-action:none; background:linear-gradient(#f5c7dc,#f5c7dc) var(--performance-detent-x,50%) 50% / 2px 22px no-repeat,linear-gradient(#816a7d,#816a7d) center / calc(100% - 26px) 4px no-repeat; background-origin:border-box; }
.creator-loop-track__effect-grid input[type=range]::-webkit-slider-runnable-track { height:100%; background:transparent; }
.creator-loop-track__effect-grid input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:9px; border:2px solid #ffe5f0; border-radius:50%; background:#b97599; }
.creator-loop-track__effect-grid input[type=range]::-moz-range-track { height:4px; background:transparent; }
.creator-loop-track__effect-grid input[type=range]::-moz-range-thumb { box-sizing:border-box; width:28px; height:28px; border:2px solid #ffe5f0; border-radius:50%; background:#b97599; }
.creator-loop-track__effect-grid input[type=range]:focus-visible { outline:2px solid #f8d6e5; outline-offset:2px; }
.creator-loop-track__effect-grid input[data-performance-dragging] { background-color:rgba(231,161,191,.12); }
[data-loop-pedal][data-performance-orientation=vertical] .creator-loop-track__effect-grid label { grid-template-columns:1fr; justify-items:center; align-content:start; text-align:center; }
[data-loop-pedal][data-performance-orientation=vertical] .creator-loop-track__effect-grid input[type=range] { grid-column:auto; writing-mode:vertical-lr; direction:rtl; width:48px; height:144px; background:linear-gradient(#f5c7dc,#f5c7dc) 50% var(--performance-detent-y,50%) / 22px 2px no-repeat,linear-gradient(#816a7d,#816a7d) center / 4px calc(100% - 26px) no-repeat; background-origin:border-box; }
[data-loop-pedal][data-performance-orientation=vertical] .creator-loop-track__effect-grid input[type=range]::-webkit-slider-thumb { margin-top:0; margin-left:9px; }
@media(max-width:1000px) { .creator-loop-track__effect-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .creator-loop-track { grid-template-columns:28px minmax(0,1fr); }
  .creator-loop-track__effect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:8px; }
  [data-loop-pedal][data-performance-orientation=vertical] .creator-loop-track__effect-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .creator-loop-track__effect-grid label { grid-template-columns:1fr; gap:2px; }
}