@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/barlow-condensed-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/doto-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/doto-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/fonts/doto-latin-ext-900-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/fonts/doto-latin-900-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/saira-condensed-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/saira-condensed-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/saira-condensed-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/saira-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* TONE:96 effect cards, from bonkmachines.nl, colours re-pointed at the Bonk Machines tokens */
.t96-fx{--band:var(--slab);--band-raised:var(--slab-raised);--band-rule:#4a4747;--band-ink:var(--on-slab);--band-soft:var(--on-slab-muted);--band-faint:#a9a39c;--device:"Barlow Condensed","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--body:var(--font-sans);background:var(--slab);color:var(--band-ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.t96-fx .unit{display:grid;gap:14px;align-content:start;min-width:0}
.t96-fx .device{position:relative;width:100%;background:#050506;border-radius:22px;padding:8px;box-shadow:0 0 0 1px #20232a,0 16px 34px rgba(0,0,0,.6);transition:box-shadow .25s ease}
.t96-fx .unit.is-live .device{box-shadow:0 0 0 2px var(--acc),0 0 40px -6px var(--acc),0 16px 34px rgba(0,0,0,.6)}
.t96-fx .device svg{display:block;width:100%;height:auto;aspect-ratio:450/600;border-radius:14px;background:#000;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.t96-fx .device svg:focus{outline:none}
.t96-fx .live-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--acc);border-radius:4px;padding:5px 8px;opacity:0;transition:opacity .2s;pointer-events:none}
.t96-fx .unit.is-live .live-badge{opacity:1}
.t96-fx .controls{contain:layout style;display:grid;gap:12px}
.t96-fx .controls-row{display:flex;gap:10px;align-items:stretch}
.t96-fx .fx-btn{flex:none;font:700 15px/1 var(--device);letter-spacing:.08em;text-transform:uppercase;color:var(--band-soft);background:var(--band-raised);border:1px solid var(--band-rule);border-radius:10px;padding:0 16px;min-height:44px;cursor:pointer}
.t96-fx .fx-btn[aria-pressed=true]{color:#000;background:var(--acc);border-color:var(--acc)}
.t96-fx .lock-btn{flex:none;width:46px;min-height:44px;display:grid;place-items:center;background:var(--band-raised);border:1px solid var(--band-rule);border-radius:10px;cursor:pointer;color:var(--band-soft)}
.t96-fx .lock-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t96-fx .lock-btn[aria-pressed=true]{color:#000;background:var(--acc);border-color:var(--acc)}
.t96-fx .mode{flex:1;min-width:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:var(--band-raised);border:1px solid var(--band-rule);border-radius:10px;min-height:44px}
.t96-fx .mode-step{height:100%;font:400 24px/1 var(--body);color:var(--band-soft);background:none;border:0;cursor:pointer}
.t96-fx .mode-name,.t96-fx .mode-step:hover{color:var(--band-ink)}
.t96-fx .mode-name{text-align:center;font:700 18px/1 var(--device);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t96-fx .knobs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t96-fx .knob{contain:layout paint style;display:flex;align-items:center;gap:12px;background:var(--band-raised);border:1px solid var(--band-rule);border-radius:10px;padding:8px 12px}
.t96-fx .knob svg{width:52px;height:52px;flex:none;cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
.t96-fx .knob svg:focus{outline:none}
.t96-fx .knob-track{stroke:#2a2d34}
.t96-fx .knob-arc,.t96-fx .knob-track{fill:none;stroke-width:5;stroke-linecap:round}
.t96-fx .knob-cap{fill:#1d2027;stroke:#34373f;stroke-width:1}
.t96-fx .knob-tick{stroke:#e9eaec;stroke-width:2.5;stroke-linecap:round}
.t96-fx .knob-label{display:grid;gap:2px}
.t96-fx .knob-label span{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--band-faint)}
.t96-fx .knob-label b{font:700 24px/1 var(--device);color:var(--band-ink);font-variant-numeric:tabular-nums}
.t96-fx button:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}
.t96-fx .fx-btn,.t96-fx .lock-btn{touch-action:none}