/* ∞FX OS (gm-fxos). Reuses pedalboard.css + wood.css; this file adds the creator, cyclers, previewer, board and feed. */
@property --wa{syntax:'<color>';inherits:true;initial-value:#dcb07a}
@property --wb{syntax:'<color>';inherits:true;initial-value:#c7955c}
@property --pc{syntax:'<color>';inherits:true;initial-value:#7c3aed}
.fx-tabs{display:flex;gap:6px;margin:18px 0 16px;padding:0;list-style:none}
.fx-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2,#43474c);color:var(--text,#e2eef9);text-decoration:none;font:700 14px/1 var(--body,system-ui)}
.fx-tabs a[aria-current=page]{background:#f9b60f;border-color:#f9b60f;color:#1a1206}
.fx-tabs a:hover{border-color:#f9b60f}
.fx-tabs a:focus-visible,.fx-sec a:focus-visible,.fx-card:focus-visible{outline:3px solid #f9b60f;outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fxos-page .pb-hero h1 em{font-style:normal}
.fx-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.fx-jump a{color:#f9b60f;font-weight:700}
.fx-famtable{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;color:var(--text-2,#c3cfdb);font-size:14px}
.fx-famtable strong{color:#fff}
.fx-sec{margin:34px 0 0;padding:clamp(16px,2.6vw,26px);border-radius:18px;background:rgba(14,10,7,.72);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.fx-sec>h2{margin:0 0 6px;font-family:var(--display,"Archivo Black",Impact,sans-serif);font-size:clamp(22px,3vw,30px);line-height:1.1}
.fx-sec>h2 small{display:block;margin-top:6px;font:500 15px/1.45 var(--body,system-ui);color:var(--text-2,#c3cfdb)}
.fx-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:22px;margin-top:16px;align-items:start}
.fx-col h3{margin:22px 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#f9b60f}
.fx-col h3:first-child{margin-top:0}
.fx-pv{position:sticky;top:84px}
.fx-pv-stage{display:grid;place-items:center;padding:18px 10px;border-radius:14px;background:radial-gradient(120% 90% at 50% 0,rgba(255,255,255,.06),rgba(0,0,0,.35))}
.fx-pedal{width:min(100%,250px);min-height:270px;--led:#ff2a2a}
.fx-pedal .kw{min-width:44px;text-align:center}
.fx-pedal .kl{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-pedal .knobs{justify-content:flex-start}
.fx-pedal .pedal-name{font-size:19px;overflow-wrap:anywhere}
.fx-pedal .pedal-name small{display:block;font:700 10px/1.3 var(--body,system-ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.fx-pedal .fx-finish{margin:0;font:600 11px/1.3 var(--body,system-ui);color:var(--ink2,rgba(255,255,255,.85))}
body.pb-page .fx-pedal.is-on .led,.fx-pedal.is-on .led{background:var(--led);box-shadow:0 0 10px 3px color-mix(in srgb,var(--led) 70%,transparent),0 0 0 2px rgba(0,0,0,.25) inset}
.fx-pedal.foot-square .pb-foot{border-radius:10px;width:60px;height:52px}
.fx-pedal.foot-latch .pb-foot{border-radius:999px;width:84px;height:40px;background:radial-gradient(circle at 40% 35%,#ffe9a8,#d8a422 55%,#7a5a10);color:#1a1206}
body.pb-page .pedal[data-wood=prince]{--wa:#6a2bb0;--wb:#3e0f74;--ink:#fff;--ink2:#efe3ff;--sh:.42;--fig:radial-gradient(120% 60% at 30% 10%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%)}
body.pb-page .pedal[data-wood=satin]{--wa:#2b2b2e;--wb:#121214;--ink:#f3f3f3;--ink2:#d9d9d9;--sh:.08;--fig:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}
.fxos-page .pedal[data-wood]{transition:--wa .9s,--wb .9s,--pc .9s,box-shadow .2s}
.fx-status{min-height:1.5em;margin:12px 0 0;color:var(--text-2,#c3cfdb);font-size:14px}
.fx-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pb-chip.sm{min-height:32px;padding:0 10px;font-size:12px}
.pb-chip[aria-pressed=true]{background:#f9b60f;border-color:#f9b60f;color:#1a1206}
.pb-chip span{opacity:.75;font-weight:500}
.pb-chip:disabled{opacity:.4;cursor:default}
.fx-load{font:700 12px/1 var(--body,system-ui);padding:6px 10px;border-radius:999px;background:rgba(34,197,94,.16);color:#bff5d0}
.fx-load.warn{background:rgba(255,61,100,.18);color:#ffc7d3}
.fx-cyclers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;margin-top:12px}
.fx-cg{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line-2,#43474c);font:700 12px/1 var(--body,system-ui);letter-spacing:.06em;text-transform:uppercase}
.fx-cg:focus-within{border-color:#f9b60f}
.fx-cg button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--text,#e2eef9);font-size:15px;cursor:pointer}
.fx-cg button:focus-visible{outline:3px solid #f9b60f;outline-offset:1px}
.fx-search{display:flex;gap:8px;align-items:center;margin-top:8px}
.fx-search input,.fx-field input,.fx-field select,#fx-import-t,.fx-knobs input,.fx-knobs select,.fx-feedbar input{width:100%;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2,#43474c);background:#14100c;color:var(--text,#e2eef9);font:500 15px var(--body,system-ui)}
#fx-import-t{min-height:64px;padding:10px 12px;resize:vertical}
.fx-search input:focus-visible,.fx-field input:focus-visible,.fx-field select:focus-visible,#fx-import-t:focus-visible,.fx-knobs input:focus-visible,.fx-knobs select:focus-visible,.fx-feedbar input:focus-visible,.fx-p input:focus-visible,.fx-sw input:focus-visible{outline:3px solid #f9b60f;outline-offset:1px}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fx-mods{list-style:none;margin:10px 0 0;padding:0 4px 0 0;max-height:520px;overflow:auto;border-top:1px solid rgba(255,255,255,.08)}
.fx-fam h4{position:sticky;top:0;z-index:1;margin:0;padding:10px 0 6px;background:#120d09;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#f9b60f}
.fx-fam ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.fx-mod{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text,#e2eef9);text-align:left;cursor:pointer;font:inherit}
.fx-mod:hover{border-color:rgba(249,182,15,.6)}
.fx-mod:focus-visible{outline:3px solid #f9b60f;outline-offset:1px}
.fx-mod[aria-pressed=true]{border-color:#f9b60f;background:rgba(249,182,15,.14)}
.fx-mod .nm{display:flex;gap:6px;align-items:baseline;font-weight:800;font-size:15px}
.fx-mod .nm abbr{font-size:10px;text-decoration:none;padding:1px 4px;border-radius:4px;background:rgba(168,85,247,.35)}
.fx-mod .cost{margin-left:auto;font-size:9px;letter-spacing:2px;color:#f9b60f}
.fx-mod .ds{font-size:13px;line-height:1.4;color:var(--text-2,#c3cfdb)}
.fx-slot{display:flex;flex-direction:column;gap:6px;padding:12px;border:2px dashed rgba(249,182,15,.55);border-radius:12px;color:var(--text-2,#c3cfdb);font-size:14px;line-height:1.45}
.fx-slot strong{color:#f9b60f}
.fx-slot code,.fx-code{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#ffe9a8;overflow-wrap:anywhere}
.fx-chain,.fx-knobs,.fx-saved,.fx-board,.fx-roadmap{list-style:none;margin:8px 0 0;padding:0}
.fx-slotc{padding:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.fx-slotc+.fx-slotc{margin-top:8px}
.fx-slot-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fx-slot-b{display:flex;gap:4px;margin-left:auto}
.fx-fam-tag{display:inline-block;padding:3px 8px;border-radius:999px;font:800 10px/1.2 var(--body,system-ui);letter-spacing:.06em;text-transform:uppercase;background:#2a2a2e;color:#fff}
.fx-fam-tag[data-f=gain]{background:#9f1239}.fx-fam-tag[data-f=mod]{background:#0e7490}.fx-fam-tag[data-f=time]{background:#1d4ed8}.fx-fam-tag[data-f=filter]{background:#854d0e}
.fx-fam-tag[data-f=dyn]{background:#166534}.fx-fam-tag[data-f=pitch]{background:#6b21a8}.fx-fam-tag[data-f=spectral]{background:#9d174d}.fx-fam-tag[data-f=util]{background:#475569}
.fx-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px;margin-top:10px}
.fx-p{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-2,#c3cfdb)}
.fx-p span{display:flex;justify-content:space-between;gap:6px}
.fx-p output{color:#fff;font-variant-numeric:tabular-nums}
.fx-p input{width:100%;accent-color:#f9b60f;min-height:28px}
.fx-sw{display:flex;align-items:center;gap:8px;font-size:13px;min-height:32px}
.fx-sw input{width:20px;height:20px;accent-color:#f9b60f}
.fx-loop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.fx-loop-s{font-size:13px;color:#ffe9a8}
.fx-empty{padding:12px;border-radius:10px;border:1px dashed rgba(255,255,255,.2);color:var(--text-2,#c3cfdb);font-size:14px}
.fx-knobs li{display:grid;grid-template-columns:64px minmax(0,1fr) 110px;gap:6px;align-items:center;margin-top:6px;font-size:13px}
.fx-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-2,#c3cfdb);margin-top:8px}
.fx-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.fx-swatch{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:var(--c);cursor:pointer}
.fx-swatch[aria-checked=true]{border-color:#fff;box-shadow:0 0 0 3px #f9b60f}
.fx-swatch:focus-visible{outline:3px solid #f9b60f;outline-offset:2px}
.fx-swatches input[type=color]{width:42px;height:34px;padding:0;border:1px solid var(--line-2,#43474c);border-radius:8px;background:none;cursor:pointer}
.fx-wood-line{margin:6px 0 0;font-size:13px;color:var(--text-2,#c3cfdb)}
.fx-scope{display:block;width:100%;height:80px;margin-top:12px;border-radius:10px;background:rgba(0,0,0,.35)}
.fx-util{margin-top:10px;padding:10px;border-radius:10px;background:rgba(0,0,0,.35)}
.fx-util h4{margin:0 0 6px;font-size:13px;color:#f9b60f}
.fx-util canvas{display:block;width:100%;height:90px}
.fx-util p{margin:6px 0 0;font-size:13px;font-variant-numeric:tabular-nums}
.fx-share{width:100%;min-height:38px;margin-top:8px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2,#43474c);background:#14100c;color:var(--text-2,#c3cfdb);font:12px ui-monospace,Menlo,monospace}
.fx-saved li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.fx-saved .sw{width:12px;height:36px;border-radius:4px;background:var(--pc)}
.fx-saved .nm{display:flex;flex-direction:column;flex:1 1 180px;min-width:0}
.fx-saved small{color:var(--text-2,#c3cfdb);overflow-wrap:anywhere}
.fx-saved .bt,.fx-bslot .bt{display:flex;flex-wrap:wrap;gap:4px}
.fx-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.fx-board .fx-empty{grid-column:1/-1}
.fx-bslot{display:flex;flex-direction:column;align-items:center;gap:8px}
.fx-bslot .fx-pedal{min-height:0;width:100%}
.fx-roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.fx-roadmap li{padding:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.45;color:var(--text-2,#c3cfdb)}
.fx-roadmap strong{display:block;color:#fff;margin-bottom:4px}
.fx-roadmap .why{display:block;margin-top:6px;font-size:12px;color:#ffe9a8}
.fx-feedbar{position:sticky;top:var(--fx-top,65px);z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0;padding:8px 10px;border-radius:12px;background:#120d09;border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.fx-feedbar .n{font:700 12px/1 var(--body,system-ui);color:var(--text-2,#c3cfdb);margin-right:auto}
.fx-feed-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:10px}
.fx-feed-list{position:relative;margin-top:16px;contain:layout paint;--cw:300px;--rh:360px}
.fx-card{position:absolute;left:0;top:0;width:var(--cw);height:var(--rh);display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);box-sizing:border-box;overflow:hidden;contain:strict}
.fx-card[hidden]{display:none}
.fx-cm{display:flex;align-items:flex-start;justify-content:center}
.fx-cm .fx-pedal{width:150px;min-height:0;padding:12px 10px 10px;gap:6px}
.fx-cm .fx-pedal .knob{width:30px;height:30px}
.fx-cm .fx-pedal .kw{min-width:30px;font-size:8px}
.fx-cm .fx-pedal .knobs{gap:6px}
.fx-cm .fx-pedal .pedal-name{font-size:15px}
.fx-cm .fx-pedal .pb-foot{width:44px;height:44px;font-size:8px}
.fx-cm .fx-pedal.foot-latch .pb-foot{width:62px;height:30px}
.fx-cm .fx-pedal.foot-square .pb-foot{width:46px;height:38px}
.fx-cb{display:flex;flex-direction:column;gap:6px;min-width:0}
.fx-ctags{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.fx-ck{font-size:11px;color:var(--text-2,#c3cfdb);align-self:center}
.fx-cb h3{margin:2px 0 0;font-size:18px;line-height:1.15;overflow-wrap:anywhere}
.fx-cd{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2,#c3cfdb);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.fx-cbt{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
#fx-feed-sentinel{position:absolute;left:0;bottom:0;width:1px}
.fx-sub{margin:22px 0 4px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#f9b60f}
.fx-cbt .pb-b{min-height:40px}
.fx-aud[aria-pressed=true]{background:#f9b60f;color:#1a1206;border-color:#f9b60f}
.fx-feed-end{margin:16px 0 0;color:var(--text-2,#c3cfdb)}
#fx-feed-sentinel{height:1px}
@media (max-width:980px){.fx-grid{grid-template-columns:1fr}.fx-pv{position:static}.fx-cyclers{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-cyclers [data-inf]{grid-column:1/-1}}
@media (max-width:560px){
 .fx-sec{padding:14px;border-radius:14px}
 .fx-card{grid-template-columns:116px minmax(0,1fr);gap:10px;padding:10px}
 .fx-cm .fx-pedal{width:116px;padding:10px 8px 8px}
 .fx-cm .fx-pedal .knob{width:24px;height:24px}
 .fx-cm .fx-pedal .kw{min-width:24px;font-size:7px}
 .fx-cm .fx-pedal .kl{max-width:40px}
 .fx-cm .fx-pedal .pedal-name{font-size:13px}
 .fx-cm .fx-pedal .fx-finish{font-size:9px}
 .fx-cb h3{font-size:16px}
 .fx-cd{font-size:13px;-webkit-line-clamp:4}
 .fx-cbt .pb-b,.fx-cbt .pb-chip{flex:1 1 calc(50% - 6px);justify-content:center;min-height:40px;padding:0 6px;font-size:12.5px}
 .fx-knobs li{grid-template-columns:52px minmax(0,1fr);}
 .fx-knobs li input{grid-column:2}
 .fx-mods{max-height:420px}
 .fx-feedbar{gap:6px;padding:6px 8px}
 .fx-feedbar .pb-chip{min-height:34px;padding:0 10px;font-size:12px}
 .fx-feed-tools{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fxos-page .pedal[data-wood]{transition:none}.fx-pedal{transition:none}}
@media (forced-colors:active){.fx-card,.fx-sec,.fx-mod,.fx-slotc{border:1px solid CanvasText}.fx-swatch{forced-color-adjust:none}}
