:root{color-scheme:dark;--bg:#0d1328;--panel:#161f3c;--line:#2a3560;--muted:#9ba7c7;--text:#eef1f8;--accent:#bfdcf2;--aside-w:224px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button,.file-button{border:1px solid #3a4674;border-radius:7px;padding:10px 15px;background:#1e2849;color:var(--text);cursor:pointer;font-weight:600;transition:background .15s}button:hover:not(:disabled),.file-button:hover{background:#2a3766}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--accent);color:#0f1a36;border-color:var(--accent)}.primary:hover:not(:disabled){background:#d9ecfa}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input{border:1px solid var(--line);background:#0f1630;color:var(--text);padding:10px 12px;border-radius:7px;min-width:0}h1,h2,h3,p{margin:0}h1{font-size:42px;line-height:1.2;letter-spacing:-1.7px;font-weight:650}h2{font-size:18px;letter-spacing:-.35px}h3{font-size:16px}p,small{color:var(--muted)}small{font-size:12px}.app-shell{display:grid;grid-template-columns:var(--aside-w) 1fr;min-height:100vh}aside{border-right:1px solid var(--line);padding:32px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:-.7px;color:var(--text);text-decoration:none}.brand-mark{display:grid;place-items:center;width:30px;height:34px;border-radius:6px;background:var(--accent);color:#0f1a36;margin-right:9px;font-size:23px}.workspace-label{font-size:10px;letter-spacing:1.7px;color:#7482a8;margin:52px 12px 14px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;color:var(--muted);margin:3px 0}.nav-item.active{background:#243263;color:var(--accent)}.nav-count,.soon{margin-left:auto;font-size:11px;opacity:.8}.aside-foot{margin-top:auto;font-size:12px;color:#aeb8d2}.aside-foot small{display:block;margin-top:8px;max-width:165px}.local-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}.workspace>header{height:80px;border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.breadcrumb span{margin:0 15px;color:#4a5680}.breadcrumb strong{font-size:12px;letter-spacing:0;color:var(--text);font-weight:500}.device-label{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:22px}.repo-link{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.6px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:6px 11px;transition:color .15s,border-color .15s,background .15s}.repo-link:hover{color:var(--text);border-color:#44507e;background:#1c2646}.repo-link svg{width:15px;height:15px;flex:none}main{max-width:1250px;margin:auto;padding:32px 40px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:25px}.connection{display:flex;align-items:center;gap:17px;padding:20px 23px}.device-icon{width:42px;height:50px;background:#2a3560;border:1px solid #44507e;border-radius:7px;display:grid;place-items:center;font-size:30px;color:var(--accent)}.connection h2{font-size:15px;display:flex;gap:12px;align-items:center}.connection p{font-size:12px;margin-top:5px}.connection-copy{flex:1}.connection-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.badge{font-size:10px;font-weight:500;letter-spacing:0;color:#b3bdd6;background:#253057;border-radius:20px;padding:3px 9px}.badge.ready{color:var(--accent);background:#233a5e}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:39px 0 25px;gap:16px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);margin-bottom:9px}.page-heading p{margin-top:9px}.tag{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:6px 12px;white-space:nowrap;color:#b3bdd6}.heading-aside{display:flex;align-items:center;gap:10px}.help-toggle{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:6px 12px;white-space:nowrap;color:#b3bdd6;background:none;cursor:pointer}.help-toggle:hover{color:var(--accent);border-color:var(--accent)}.help-toggle[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}.backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:25px}.card-kicker{font-size:10px;letter-spacing:1.3px;color:#9fb6d6;margin-bottom:22px}#patch-backup h2{margin-bottom:13px}#patch-backup button{margin:3px 8px 8px 0}#patch-backup p,#bundle-controls p{font-size:12px;margin:7px 0}progress{width:100%;height:5px;accent-color:var(--accent);margin-top:14px;border:0}progress::-webkit-progress-bar{background:#2a3560;border-radius:3px}progress::-webkit-progress-value{background:var(--accent);border-radius:3px}.bundle-card p{font-size:13px;margin:10px 0 18px}.bundle-card small{display:block;margin-top:14px}#bundle-controls button{background:var(--accent);color:#0f1a36;border-color:var(--accent)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.section-heading p{font-size:12px;margin-top:5px}.section-heading input{width:200px}/* A count beside a heading, not a control. The filled rounded pill read as a button people then tried to press; an outline matches .tag and says label. */.count{font-size:11px;padding:2px 7px;margin-left:7px;border-radius:20px;border:1px solid var(--line);background:none;color:var(--muted);vertical-align:middle}.empty{text-align:center;padding:40px 10px 48px}div.empty>span{font-size:32px;color:#5d6e9a;display:block;margin-bottom:12px}div.empty p{margin-top:8px;font-size:13px}.patch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.patch-item{padding:15px;background:#1c2646;border:1px solid #2c3862;border-radius:8px}.patch-number{color:#8594ba;font:11px monospace;display:block;margin-bottom:7px}.patch-name{font-size:14px;font-weight:600;overflow-wrap:anywhere}.patch-meta{font-size:11px;color:#8594ba;margin-top:5px}.effects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.effect-item{padding:15px;border:1px solid var(--line);border-radius:8px}.effect-item strong{font-size:13px;display:block;overflow-wrap:anywhere}.effect-item small{display:block;margin-top:5px}.upload-card{text-align:center;max-width:650px;margin:0 auto;padding:45px}.upload-symbol{font-size:42px;color:var(--accent);margin-bottom:16px}.upload-card p{margin:10px 0 22px}.file-button{display:inline-block}.file-button input{display:block;margin-top:10px;max-width:100%;font-size:12px}.notice{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin:25px 0 18px}#fx-preview{margin-top:20px;overflow-wrap:anywhere}.debug{border:1px solid var(--line);border-radius:9px;margin-top:28px;background:#111a33}.debug summary{cursor:pointer;padding:16px 20px;font-size:12px;font-weight:600}.debug summary span{font-weight:400;color:#7482a8;margin-left:15px}.debug-content{padding:0 20px 20px}.debug label{display:block;font-size:12px;color:var(--muted);margin:15px 0}.debug label input{display:block;width:100%;margin-top:7px;font-family:monospace}.debug-actions{display:flex;gap:8px;margin:12px 0}#log{font:11px/1.65 monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#0a0f22;padding:15px;border-radius:6px;max-height:360px;overflow:auto;color:#9fb6d6}footer{display:flex;justify-content:space-between;margin-top:28px;color:#5d6a90;font-size:11px;padding:0 2px}[hidden]{display:none!important}@media(min-width:1400px){main{padding-top:40px}}@media(max-width:1050px){:root{--aside-w:190px}.app-shell{grid-template-columns:var(--aside-w) 1fr}main{padding:25px}.workspace>header{padding:0 25px}.connection{flex-wrap:wrap}.connection-actions{width:100%;justify-content:flex-start;margin-left:59px}.patch-grid,.effects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-grid{grid-template-columns:1fr}}@media(max-width:680px){.app-shell{display:block;position:relative}aside{position:static;height:auto;padding:18px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:19px}.workspace-label,.aside-foot{display:none}nav{display:flex;margin-top:16px;gap:5px}.nav-item{font-size:12px;padding:9px;gap:6px;justify-content:center}.nav-count,.soon{display:none}.workspace>header{position:absolute;top:0;right:0;height:auto;width:auto;padding:16px 18px;border-bottom:0;justify-content:flex-end;z-index:2}.breadcrumb{display:none}.brand{align-self:flex-start;max-width:60%}main{padding:20px 15px}.device-label{font-size:9px}.repo-link{padding:6px 8px}.repo-link span{display:none}.header-right{gap:12px}h1{font-size:34px}.page-heading{margin-top:28px;flex-wrap:wrap}.tag{font-size:10px}.card{padding:20px}.connection{padding:16px}.connection-actions{margin-left:0}.section-heading{align-items:flex-start;flex-direction:column}.section-heading input{width:100%}.patch-grid,.effects-grid{grid-template-columns:1fr 1fr}.debug summary span{display:none}footer{font-size:10px}.upload-card{padding:30px 20px}}
/* Narrowest phones: the brand and the header's own links share one row, and
   at 320px they meet. The device tag is the redundant half -- the sidebar
   names the pedal immediately below it. */
@media(max-width:380px){.device-label{display:none}.header-right{gap:0}}

.nav-item>span:first-of-type{white-space:nowrap}@media(min-width:681px) and (max-width:1050px){.soon{display:none}}

/* Theme: MS-100BT navy body, LCD-blue accent, LED red for warnings. */
/* --- patch editor --------------------------------------------------------
   Built from the tokens at the top of this file. An earlier version invented
   its own palette and referenced a --card variable that does not exist, so the
   panel fell back to white on a dark app. Everything below uses --panel,
   --line, --text, --muted and --accent, and leaves buttons to the base rule
   rather than restyling them. */
.patch-item.editable{cursor:pointer;transition:border-color .15s,background .15s}
.patch-item.editable:hover{border-color:var(--accent);background:#212d55}
.patch-item.editable:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.pe-overlay{position:fixed;inset:0;background:rgba(5,8,20,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.pe-panel{background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:12px;width:min(820px,100%);max-height:min(86vh,760px);
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55)}

.pe-head{display:flex;align-items:center;gap:12px;padding:20px 23px;border-bottom:1px solid var(--line)}
.pe-head h2{flex:1}
.pe-slotno{font:11px monospace;color:var(--accent);background:#253057;border-radius:5px;padding:3px 7px}
.pe-close{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:2px 6px;font-weight:400}
.pe-close:hover:not(:disabled){background:none;color:var(--text)}

.pe-body{padding:22px 23px;overflow:auto;flex:1}
.pe-name-row{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.pe-name-row label{font-size:10px;letter-spacing:1.3px;color:#9fb6d6}
.pe-name-row input{flex:1;font-family:monospace;letter-spacing:.5px}
.pe-counter{font:11px monospace;color:var(--muted);min-width:3.4em;text-align:right}

.pe-slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pe-slot{display:flex;align-items:center;gap:12px;padding:11px 13px;background:#1c2646;
  border:1px solid #2c3862;border-radius:8px}
.pe-slot.empty{background:transparent;border-style:dashed;border-color:var(--line)}
.pe-slot.bypassed{background:#141c38}
.pe-slot.bypassed .pe-info strong{color:var(--muted);text-decoration:line-through}
.pe-pos{font:11px monospace;color:#8594ba;width:1.5em;flex:none}
.pe-info{flex:1;min-width:0}
.pe-title{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.pe-tags{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.pe-info strong{font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-info small{display:block;margin-top:4px;font-family:monospace;font-size:11px}
.pe-family{font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:#9fb6d6;
  background:#223058;border:1px solid #34426e;border-radius:4px;padding:2px 6px;
  white-space:nowrap;flex:none}
.pe-family.bass{color:var(--accent);border-color:#4a6a9a;background:#233a5e}
.pe-byp{font-size:9px;letter-spacing:1.1px;color:#8594ba;border:1px solid #34426e;
  border-radius:4px;padding:2px 6px;white-space:nowrap;flex:none}
.pe-chain{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pe-chain-end{font-size:9px;letter-spacing:1.4px;color:#7482a8}
.pe-chain-line{flex:1;height:1px;background:linear-gradient(90deg,#34426e,#223058)}

.pe-actions{display:flex;gap:6px;align-items:center;flex:none}
.pe-actions button{padding:6px 10px;font-size:12px;border-radius:6px}
.pe-toggle[aria-pressed="true"]{background:var(--accent);color:#0f1a36;border-color:var(--accent)}
.pe-toggle[aria-pressed="true"]:hover:not(:disabled){background:#d9ecfa}
.pe-move{min-width:2.2em;padding:6px 8px}
.pe-pick{border:1px solid var(--line);background:#0f1630;color:var(--text);
  border-radius:6px;padding:6px 8px;font-size:12px;max-width:15em;cursor:pointer}
.pe-slot.empty .pe-pick{border-style:dashed}

.pe-foot{display:flex;align-items:center;gap:11px;padding:17px 23px;border-top:1px solid var(--line);flex-wrap:wrap}.pe-full{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer}.pe-full input{margin:0;accent-color:var(--accent);cursor:pointer}/* A quiet text link, not a button: the footer already has three of those and a round one among them reads as a mistake. `.pe-foot button` sets the padding for the real buttons, so this has to out-specify it. */.pe-foot button.pe-help{border:0;background:none;padding:4px 2px;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25);white-space:nowrap}.pe-foot button.pe-help:hover:not(:disabled){background:none;color:var(--text);text-decoration-color:currentColor}.pe-foot button.pe-help[aria-expanded="true"]{color:var(--accent);text-decoration-color:currentColor}.pe-help-text{margin:0;padding:14px 23px;font-size:12px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.pe-status{flex:1;font-size:12px;margin:0}
.pe-foot button{padding:9px 15px}

@media(max-width:680px){
  .pe-overlay{padding:0;align-items:stretch}
  .pe-panel{max-height:100vh;max-height:100dvh;border-radius:0;border:0;width:100%}.pe-foot{padding-bottom:calc(17px + env(safe-area-inset-bottom,0px))}
  .pe-slot{flex-wrap:wrap}
  .pe-actions{width:100%;justify-content:flex-end}
  .pe-pick{max-width:none;flex:1}
  .pe-title{flex-wrap:wrap}
}

/* --- patches page: load bar, library, transfer ---------------------------- */
.load-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 23px;margin-bottom:18px}
.load-copy{flex:1;min-width:210px}
.load-copy strong{font-size:15px;display:block}
.load-copy p{font-size:12px;margin-top:4px}
.load-bar #backup-controls{display:flex;gap:8px;flex:none}
.load-bar #backup-status-slot{flex-basis:100%;font-size:12px;margin:0;order:4}
.load-bar progress{order:5;margin-top:10px}
.patch-library{margin-bottom:18px}
.patch-chain{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.chain-node{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#9fb6d6;
  background:#223058;border:1px solid #34426e;border-radius:4px;padding:2px 5px;white-space:nowrap}
.chain-node.off{color:#67739a;border-style:dashed;background:transparent;text-decoration:line-through}
.patch-chain-empty{font-size:11px;color:#67739a;font-style:italic}
.transfer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.transfer-item h3{font-size:14px;margin-bottom:7px}
.transfer-item p{font-size:12px;margin-bottom:13px}
.transfer-item small{display:block;margin-top:11px}
.transfer-item .action-status{font-size:12px;margin-top:9px}
.restore-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
@media(max-width:1050px){.transfer-grid{grid-template-columns:1fr;gap:22px}}
@media(max-width:680px){.load-bar{padding:16px}.load-bar #backup-controls{width:100%}
  .load-bar #backup-controls button{flex:1}}
.restore-picker{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.restore-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.restore-picker-head strong{font-size:12px}
.linkish{background:none;border:0;padding:0 0 0 12px;color:var(--accent);font-size:11px;font-weight:600}
.linkish:hover:not(:disabled){background:none;text-decoration:underline}
#restore-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--line);border-radius:7px;padding:5px;background:#0f1630}
.restore-pick{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:5px;cursor:pointer}
.restore-pick:hover{background:#1a2344}
.restore-pick input{margin:0;flex:none;min-width:0;padding:0;width:13px;height:13px;accent-color:var(--accent)}
.restore-pick-no{font:11px monospace;color:#8594ba;flex:none}
.restore-pick-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- work-in-progress notice ---------------------------------------------
   Blocks the page until accepted. Built from the same tokens as everything
   else; z-index sits above the patch editor's overlay so the notice cannot be
   buried by anything the app opens. */
.risk-locked{overflow:hidden}
.risk-panel::backdrop{background:rgba(5,8,20,.86);backdrop-filter:blur(4px)}
.risk-panel{background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:12px;width:min(560px,100%);padding:28px;margin:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.risk-panel h2{font-size:20px;margin-bottom:14px}
.risk-lead{color:var(--text);font-size:14px;margin-bottom:18px}
.risk-points{margin:0 0 24px;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.risk-points li{color:var(--muted);font-size:13px;line-height:1.6}
.risk-foot{display:flex;justify-content:flex-end}
.risk-foot button{padding:11px 20px}
@media(max-width:680px){
  .risk-panel{padding:22px}
  .risk-foot button{width:100%}
}

/* Soft enclosure gradient: LCD glow top-right, deeper navy toward the foot. */
body{background:
  radial-gradient(90% 60% at 85% -10%, rgba(191,220,242,.10), transparent 60%),
  radial-gradient(70% 50% at 0% 110%, rgba(232,57,46,.05), transparent 60%),
  linear-gradient(180deg,#131b36 0%,#0d1328 55%,#0a0f22 100%) fixed}
aside{background:linear-gradient(180deg,rgba(22,31,60,.55),rgba(13,19,40,0))}
.card{background:linear-gradient(180deg,#19234a 0%,#161f3c 100%)}