/* Knobs (shared with the Live mixer) and the hardware front panels. */
.kb { position: relative; width: 2.5em; height: 2.5em; border-radius: 50%; flex: none; cursor: ns-resize; touch-action: none; outline: none;
  background: conic-gradient(from var(--from, -135deg), var(--c, #fff) var(--len, 0deg), transparent 0), conic-gradient(from 225deg, rgba(255,255,255,.15) 270deg, transparent 0); }
.kb::before { content: ''; position: absolute; inset: 11%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #41435a, #1a1b26 72%); box-shadow: 0 .12em .35em rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.09); }
.kb i { position: absolute; inset: 11%; border-radius: 50%; }
.kb i::after { content: ''; position: absolute; left: 50%; top: 7%; width: 9%; height: 30%; min-width: 1.5px; transform: translateX(-50%); border-radius: 1em; background: #fff; }
.kb:hover::before { filter: brightness(1.25); }
.kb:focus-visible { box-shadow: 0 0 0 2px #fff; }
.kb-l { display: grid; justify-items: center; gap: .35em; font-size: 1em; }
.kb-l span { font-size: .72em; letter-spacing: .04em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.kb-l b { font: 500 .72em 'JetBrains Mono', ui-monospace, monospace; opacity: .9; }

#hw { position: fixed; inset: 0; z-index: 26; pointer-events: none; display: grid; justify-items: center; align-items: end; padding: 0 12px clamp(12px, 3vh, 34px); }
#hw[hidden] { display: none; }
.hw-panel { pointer-events: auto; font-size: clamp(10.5px, .82vw, 15px); color: #e9e6f2; width: min(64em, 100%); border-radius: 1em; padding: .7em .9em .9em;
  background: rgba(13, 12, 20, .82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); box-shadow: 0 1.6em 4em rgba(0,0,0,.6);
  opacity: 0; transform: translateY(1.4em) scale(.985); transition: opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
.hw-panel.on { opacity: 1; transform: none; }
.hw-panel button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.hw-head, .hw-row { display: flex; align-items: center; gap: .5em; }
.hw-head { margin-bottom: .7em; }
.hw-sp { flex: 1; }
.hw-note { font-size: .86em; opacity: .6; margin-left: .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hw-cap { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin: 0 .2em 0 .7em; }
.hw-panel .hw-tab { padding: .38em .9em; border-radius: .55em; font-weight: 600; background: rgba(255,255,255,.07); box-shadow: inset 0 -2px 0 transparent; }
.hw-panel .hw-tab.on { background: rgba(255,255,255,.14); box-shadow: inset 0 -2px 0 var(--c); }
.hw-panel .hw-x { width: 1.9em; height: 1.9em; border-radius: 50%; font-size: 1.15em; line-height: 1; background: rgba(255,255,255,.08); }
.hw-panel .hw-x:hover, .hw-panel .hw-tab:hover { background: rgba(255,255,255,.2); }
.hw-panel .hw-btn { padding: .42em .8em; border-radius: .45em; font-size: .86em; font-weight: 600; background: rgba(255,255,255,.1); box-shadow: inset 0 -.14em 0 rgba(0,0,0,.35); white-space: nowrap; }
.hw-panel .hw-btn:hover { background: rgba(255,255,255,.2); }
.hw-panel .hw-btn.on { background: var(--led); color: #14060a; }
.hw-panel .hw-play { min-width: 4.4em; }
.hw-panel .hw-play.on { background: #3ddc84; color: #06210f; }
.hw-panel .hw-snd { background: #ff3d9a; color: #fff; }
.hw-dev { --led: #ff5a3c; border-radius: .8em; padding: 1em 1.1em 1.1em; display: grid; gap: .9em; }
.hw-knobs { display: flex; gap: 1.5em; align-items: start; }
.hw-dev .kb { width: 3.1em; height: 3.1em; --c: var(--led); }

/* Digitakt: charcoal, white print, red-orange lights */
.hw-dt { background: linear-gradient(#2b2c31, #1c1d21); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(0,0,0,.6); }
.hw-dt-top { display: flex; gap: 1.6em; align-items: center; }
.hw-dt-lcd { flex: 1; min-width: 0; max-width: 24em; border-radius: .5em; padding: .6em .8em; background: #08090b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-family: 'JetBrains Mono', ui-monospace, monospace; color: #f1ede4; }
.hw-dt-lcd-top { display: flex; justify-content: space-between; gap: 1em; font-size: .86em; margin-bottom: .5em; white-space: nowrap; }
.hw-dt-lcd-top span { opacity: .6; }
.hw-dt-bars { display: grid; gap: .28em; }
.hw-dt-bars div { display: grid; grid-template-columns: 4.2em 1fr 4.6em; align-items: center; gap: .6em; font-size: .74em; }
.hw-dt-bars span { opacity: .6; }
.hw-dt-bars i { height: .4em; border-radius: 1em; background: linear-gradient(90deg, #f1ede4 calc(var(--v) * 100%), rgba(255,255,255,.14) 0); }
.hw-dt-bars em { font-style: normal; text-align: right; }
.hw-dt-mid { display: grid; gap: .8em; }
.hw-dt-pads { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5em; }
.hw-panel .hw-dt-pad { position: relative; height: 3em; border-radius: .45em; background: #3a3b42; box-shadow: inset 0 -.2em 0 rgba(0,0,0,.4); font-size: .82em; font-weight: 600; overflow: hidden; }
.hw-panel .hw-dt-pad.sel { background: #f1ede4; color: #17181c; }
.hw-dt-pad i { position: absolute; inset: 0; background: var(--led); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.hw-dt-pad span { position: relative; }
.hw-dt-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: .4em; }
.hw-panel .hw-dt-step { position: relative; height: 3.2em; border-radius: .4em; background: #34353b; box-shadow: inset 0 -.2em 0 rgba(0,0,0,.4); display: grid; align-content: space-between; justify-items: center; padding: .4em 0 .35em; font-size: .78em; color: rgba(255,255,255,.5); }
.hw-dt-step:nth-child(4n+1) { background: #44454d; }
.hw-dt-step i { width: 55%; height: .32em; border-radius: 1em; background: #111; }
.hw-dt-step.on i { background: var(--led); box-shadow: 0 0 .7em var(--led); }
.hw-dt-step.now { outline: 2px solid #f1ede4; outline-offset: -2px; }
.hw-dt-step.now i { background: #fff; box-shadow: 0 0 .7em #fff; }

/* TB-03: silver top with the knobs, black strip with the sequencer */
.hw-tb { --led: #ff4a3a; padding: 0; gap: 0; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.hw-tb-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding: 1em 1.2em; color: #1b1c20; background: linear-gradient(#d9dbe0, #b9bcc4); box-shadow: inset 0 1px 0 #fff; }
.hw-tb-top .kb { background: conic-gradient(from var(--from, -135deg), #ff4a3a var(--len, 0deg), transparent 0), conic-gradient(from 225deg, rgba(0,0,0,.28) 270deg, transparent 0); }
.hw-tb-top .kb::before { background: radial-gradient(circle at 35% 28%, #5a5c66, #24252b 72%); }
.hw-tb-top .kb-l span { opacity: .85; font-weight: 600; }
.hw-tb-side { display: grid; gap: .6em; justify-items: stretch; }
.hw-tb-led { font: 600 1.25em 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; color: #ff4a3a; background: #1a0605; border-radius: .35em; padding: .3em .7em; text-shadow: 0 0 .5em rgba(255,74,58,.8); white-space: nowrap; text-align: center; }
.hw-panel .hw-tb-wave { background: #24252b; color: #e9e6f2; }
.hw-tb-strip { display: grid; gap: .8em; padding: 1em 1.2em 1.1em; }
.hw-tb-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: .4em; }
.hw-panel .hw-tb-step { position: relative; height: 3.9em; border-radius: .4em; background: #2c2d33; box-shadow: inset 0 -.2em 0 rgba(0,0,0,.45); display: grid; align-content: space-between; justify-items: center; padding: .4em 0 .3em; }
.hw-tb-step:nth-child(4n+1) { background: #3a3b43; }
.hw-tb-step i { width: .5em; height: .5em; border-radius: 50%; background: #0c0c0e; }
.hw-tb-step.now i { background: var(--led); box-shadow: 0 0 .7em var(--led); }
.hw-tb-step b { font: 600 .86em 'JetBrains Mono', ui-monospace, monospace; }
.hw-tb-step em { font-style: normal; font-size: .58em; letter-spacing: .03em; text-transform: uppercase; height: 1.2em; color: #ffd23f; white-space: nowrap; }
.hw-tb-step.rest b { opacity: .35; }
.hw-tb-step.acc b { color: #ff7a6a; }
.hw-tb-step.sel { outline: 2px solid #f1ede4; outline-offset: -2px; }
.hw-tb-keys { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: .3em; }
.hw-panel .hw-tb-key { height: 2.5em; border-radius: .3em; background: #e9e9ee; color: #17181c; font-size: .78em; font-weight: 600; box-shadow: inset 0 -.25em 0 rgba(0,0,0,.25); }
.hw-panel .hw-tb-key.black { background: #17181c; color: #e9e6f2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.hw-panel .hw-tb-key.on { background: var(--led); color: #fff; }
@media (max-width: 760px) { .hw-note, .hw-cap { display: none; } .hw-knobs { gap: .7em; } .hw-row { flex-wrap: wrap; } }