/* gm-guitar-fx: /pedalboard/ page */
.pb-page{--pb-purple:#7c3aed;--pb-purple-2:#a855f7}
.pb-page main{padding-bottom:120px}
.pb-hero{padding:clamp(28px,5vw,56px) 0 12px}
.pb-hero .eyebrow{font:700 12px/1 var(--body,Inter,system-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pb-purple-2);margin:0 0 12px}
.pb-hero h1{font-family:var(--display,"Archivo Black",Impact,sans-serif);font-size:clamp(34px,6vw,64px);line-height:1;margin:0 0 14px;letter-spacing:-.01em}
.pb-hero h1 em{font-style:normal;background:linear-gradient(90deg,#a855f7,#ff3d64 55%,#f9b60f);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-hero p{max-width:68ch;color:var(--muted);margin:0 0 10px}
.pb-rig{position:sticky;top:calc(var(--hdr-h,64px) + 8px);z-index:20;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:18px 0 8px;padding:12px;border-radius:18px;border:1px solid rgba(168,85,247,.35);background:rgba(18,12,30,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px -24px rgba(124,58,237,.7)}
.pb-transport{display:flex;flex-wrap:wrap;gap:8px}
.pb-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2,#43474c);background:var(--panel-2,#212528);color:var(--text,#e2eef9);font:700 14px/1 var(--body,system-ui);cursor:pointer}
.pb-b:hover{border-color:var(--pb-purple-2)}
.pb-b:focus-visible,.knob:focus-visible,.pb-foot:focus-visible,.pb-chip:focus-visible{outline:3px solid var(--sun,#f9b60f);outline-offset:3px}
.pb-b.primary{background:linear-gradient(135deg,#7c3aed,#ff3d64);border-color:transparent;color:#fff}
.pb-b[aria-pressed=true]{border-color:var(--pb-purple-2);box-shadow:0 0 0 2px rgba(168,85,247,.35) inset}
.pb-b.primary[aria-pressed=true]{background:linear-gradient(135deg,#ff3d64,#f9b60f);color:#120a1f}
.pb-b svg{width:16px;height:16px;flex:none}
.pb-scope{width:100%;height:52px;border-radius:12px;background:#0b0714;border:1px solid #2a2140;display:block;min-width:0}
.pb-status{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted);min-height:1.4em}
.pb-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:14px 0 4px;font-size:14px;color:var(--muted)}
.pb-chips{display:flex;flex-wrap:wrap;gap:6px}
.pb-chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2,#43474c);background:transparent;color:var(--text);font:600 13px/1 var(--body,system-ui);cursor:pointer}
.pb-chip[aria-checked=true]{background:rgba(168,85,247,.22);border-color:var(--pb-purple-2)}
.pb-cat{margin:34px 0 0}
.pb-cat h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--display,"Archivo Black",Impact,sans-serif);font-size:clamp(22px,3vw,30px);margin:0 0 4px}
.pb-cat h2 small{font:600 14px/1.3 var(--body,system-ui);color:var(--muted)}
.pb-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:14px}
.pedal{--pc:#22c55e;--pc2:#14532d;position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 14px 14px;border-radius:16px 16px 20px 20px;background:linear-gradient(170deg,var(--pc) 0%,var(--pc2) 100%);color:#fff;box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 -6px 0 rgba(0,0,0,.25) inset,0 16px 30px -14px rgba(0,0,0,.8);border:1px solid rgba(0,0,0,.5);transition:box-shadow .2s,transform .2s}
.pedal::before{content:"";position:absolute;inset:6px;border-radius:12px 12px 16px 16px;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.pedal.is-on{box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 -6px 0 rgba(0,0,0,.25) inset,0 0 0 2px rgba(255,255,255,.35),0 0 34px -4px var(--pc)}
.pedal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.knobs{display:flex;gap:10px;flex-wrap:wrap}
.kw{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 10px/1 var(--body,system-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.knob{--v:.5;position:relative;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4a52,#141418 70%);box-shadow:0 3px 6px rgba(0,0,0,.6),0 0 0 3px rgba(0,0,0,.35);cursor:grab;touch-action:none}
.knob::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:#fff;transform-origin:50% 17px;transform:rotate(calc(-135deg + var(--v)*270deg))}
.knob::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from -135deg,rgba(255,255,255,.75) calc(var(--v)*270deg),rgba(0,0,0,.25) 0 270deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 25px,#000 26px);mask:radial-gradient(circle,transparent 25px,#000 26px)}
.knob.is-drag{cursor:grabbing}
.led{flex:none;width:12px;height:12px;border-radius:50%;margin-top:2px;background:#3b0a0a;box-shadow:0 0 0 2px rgba(0,0,0,.45) inset}
.pedal.is-on .led{background:#ff2a2a;box-shadow:0 0 10px 3px rgba(255,42,42,.75),0 0 0 2px rgba(0,0,0,.25) inset}
.pedal-name{margin:4px 0 0;font-family:var(--display,"Archivo Black",Impact,sans-serif);font-size:20px;line-height:1.05;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pedal-name small{display:block;font:700 10px/1.4 var(--body,system-ui);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.pedal-desc{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92);flex:1}
.pb-foot{align-self:center;display:grid;place-items:center;width:64px;height:64px;margin-top:4px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 40% 35%,#f4f4f6,#9a9aa3 55%,#55555c);box-shadow:0 0 0 6px rgba(0,0,0,.35),0 6px 10px rgba(0,0,0,.5);color:#222;font:800 10px/1 var(--body,system-ui);letter-spacing:.12em;text-transform:uppercase;transition:transform .08s}
.pb-foot:active,.pb-foot[aria-pressed=true]{transform:translateY(2px) scale(.97)}
.pb-why{margin:42px 0 0;padding:18px;border-radius:16px;border:1px solid var(--line,#313336);background:var(--panel,#171a1c);color:var(--muted);font-size:14px}
.pb-why h2{font-size:18px;color:var(--text);margin:0 0 6px}
/* FX drawer (compact, sticky bottom) */
.fx-drawer{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;width:min(760px,calc(100% - 20px));display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:18px;background:rgba(14,9,24,.94);border:1px solid rgba(168,85,247,.45);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fx-drawer .lbl{font:800 11px/1 var(--body,system-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--pb-purple-2);margin-right:2px}
.fx-drawer .pb-b{min-height:38px;padding:0 12px;font-size:13px}
.fx-drawer .qs{display:flex;gap:6px;flex-wrap:wrap}
.fx-drawer .q{min-height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2,#43474c);background:#1b1426;color:var(--text);font:700 12px/1 var(--body,system-ui);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fx-drawer .q::before{content:"";width:8px;height:8px;border-radius:50%;background:#3b0a0a}
.fx-drawer .q[aria-pressed=true]::before{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a}
.fx-drawer .n{margin-left:auto;font-size:12px;color:var(--muted)}
@media (max-width:600px){.pb-rig{grid-template-columns:1fr;position:static}.pb-row{grid-template-columns:1fr 1fr;gap:10px}.pedal{padding:12px 10px}.knob{width:38px;height:38px}.knob::after{transform-origin:50% 14px;height:11px}.knob::before{-webkit-mask:radial-gradient(circle,transparent 22px,#000 23px);mask:radial-gradient(circle,transparent 22px,#000 23px)}.knobs{gap:6px;justify-content:center}.pedal-top{flex-direction:column-reverse;align-items:center}.pedal-name{font-size:17px;text-align:center}.pedal-desc{font-size:12px}.pb-foot{width:56px;height:56px}.fx-drawer .n,.fx-drawer .lbl{display:none}.fx-drawer{gap:6px;flex-wrap:nowrap;padding:6px 8px}.fx-drawer .qs{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.fx-drawer .qs::-webkit-scrollbar{display:none}.fx-drawer .q{flex-shrink:0}.fx-drawer .pb-b{padding:0 11px;flex-shrink:0}.fx-drawer .pb-b .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media (max-width:360px){.pb-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pedal,.pb-foot{transition:none}}
@media (forced-colors:active){.pedal{border:2px solid CanvasText}.pedal.is-on{outline:3px solid Highlight}}

/* gm-gfx-pad */body.pb-page{padding-bottom:84px}