/* TD-3-MO előlap — a csatolt fotó elrendezése: sötét antracit panel, fehér
   feliratok, a szekvenszer-sor palaszürke-kék címkéi, piros LED-ek. */
.td3-root { --panel: #1d1f22; --panel-2: #26282c; --edge: #0c0d0f; --ink: #e9ebee; --ink-dim: #a9adb5;
  --slate: #6d7f95; --slate-ink: #0e1116; --led: #ff2a1a; --led-off: #4a1410; --red-btn: #e8352a;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; color: var(--ink);
  background: #101113; min-height: 100vh; padding: 16px; box-sizing: border-box; }
.td3 { max-width: 1500px; margin: 0 auto; background: linear-gradient(#232529, var(--panel));
  border: 3px solid var(--edge); border-radius: 18px; padding: 14px 18px 10px; box-shadow: 0 20px 60px #000a, inset 0 1px 0 #ffffff14;
  user-select: none; -webkit-user-select: none; }
.td3-row { display: flex; align-items: flex-start; gap: 10px; }
.td3-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.td3-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.td3-label-sm { font-size: 9px; color: var(--ink-dim); }
.td3-boxlabel { display: inline-block; border: 1.5px solid var(--ink); border-radius: 5px; padding: 1px 8px; font-size: 12px;
  letter-spacing: .06em; font-weight: 600; text-transform: uppercase; }

/* ---- fejléc + patchbay */
.td3-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 4px; }
.td3-brand { flex: 0 0 auto; }
.td3-brand-name { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #f4f5f7; }
.td3-brand-sub { font-size: 18px; color: var(--ink); }
.td3-jacks { display: flex; gap: 8px; }
.td3-jacks + .td3-jacks { margin-left: auto; }
.td3-jack { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.td3-jack .td3-label { font-size: 9px; }
.td3-jack-hole { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #000 0 32%, #2a2c30 34% 60%, #111 62%); border: 2px solid #3a3d42; }

/* ---- forgatógombok */
.td3-knob { position: relative; width: 58px; height: 58px; outline: none; cursor: ns-resize; touch-action: none; }
.td3-knob-lg { width: 88px; height: 88px; }
.td3-knob:focus-visible .td3-dial { box-shadow: 0 0 0 2px #7fb2ff; }
.td3-dial { position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3d42, #16181b 70%);
  border: 2px solid #0a0b0c; box-shadow: 0 3px 8px #000c, inset 0 1px 0 #ffffff22; }
.td3-dial-mark { position: absolute; left: 50%; top: 4px; width: 4px; height: 38%; margin-left: -2px; background: var(--led); border-radius: 2px; box-shadow: 0 0 4px #ff000088; }
.td3-knob-lg .td3-dial { inset: 12px; }
.td3-ticks { position: absolute; inset: 0; }
.td3-ticks i { position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; transform-origin: 50% 100%; }
.td3-ticks i::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 7px; background: #d8dbe0; }
.td3-knob-lg .td3-ticks i::before { height: 9px; }
.td3-row-knobs { justify-content: space-between; padding: 6px 4px 8px; border-bottom: 1px solid #0a0b0c; }
.td3-cell-pair .td3-pair { display: flex; gap: 10px; }
.td3-smiley { justify-content: center; color: #cfd3d9; padding-top: 14px; }

/* ---- billenőkapcsolók */
.td3-switch { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.td3-switch-v { flex-direction: row; }
.td3-switch-track { position: relative; background: #0d0e10; border: 2px solid #35383d; border-radius: 6px; }
.td3-switch-v .td3-switch-track { width: 16px; height: 54px; }
.td3-switch-h .td3-switch-track { width: 54px; height: 16px; }
.td3-switch-lever { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a6e75, #1e2024 70%);
  border: 2px solid #050607; box-shadow: 0 2px 5px #000c; }
.td3-switch-v .td3-switch-lever { left: 50%; top: var(--pos, 0%); transform: translate(-50%, -50%); }
.td3-switch-h .td3-switch-lever { top: 50%; left: var(--pos, 0%); transform: translate(-50%, -50%); }
.td3-switch-labels { display: flex; font-size: 10px; letter-spacing: .05em; color: var(--ink-dim); }
.td3-switch-v .td3-switch-labels { flex-direction: column; justify-content: space-between; height: 58px; text-align: right; }
.td3-switch-h .td3-switch-labels { justify-content: space-between; width: 60px; }
.td3-switch-labels .active { color: #fff; font-weight: 700; }

/* ---- középső sor */
.td3-row-mid { padding: 8px 4px 10px; gap: 6px; justify-content: space-between; border-bottom: 3px solid #0a0b0c; }
.td3-box { position: relative; border: 1.5px solid var(--ink-dim); border-radius: 10px; padding: 8px 10px 6px; min-width: 110px; }
.td3-box > .td3-boxlabel { margin-top: -18px; background: var(--panel); }
.td3-minmax { display: flex; justify-content: space-between; width: 100%; font-size: 9px; color: var(--ink-dim); }
.td3-round { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #4a0d0a; background: radial-gradient(circle at 40% 35%, #ff7a6e, var(--red-btn) 60%);
  box-shadow: 0 3px 6px #000c; cursor: pointer; }
.td3-round.on { box-shadow: 0 0 14px #ff3b2a, 0 3px 6px #000c; filter: brightness(1.25); }
.td3-round.down { transform: translateY(1px); filter: brightness(1.3); }
.td3-level { gap: 6px; }
/* Gomb körüli skála: a span-ok pozícióját a knob() számolja a tick-szögből (poláris); a CSS csak tipográfia. */
.td3-knob-scale { position: absolute; inset: 0; pointer-events: none; font-size: 11px; color: var(--ink); white-space: nowrap; }
.td3-knob-scale span { position: absolute; line-height: 1; }
.td3-knob-scale .td3-scale-bold { font-weight: 700; }
.td3-knob-scale .td3-scale-brace { border-left: 1.5px solid var(--ink); padding-left: 4px; line-height: 30px; }
.td3-group .td3-knob { margin: 30px 0 14px; }
.td3-group { min-width: 190px; }
.td3-boxlabel-split { padding: 0; overflow: hidden; }
.td3-boxlabel-split span { display: inline-block; padding: 1px 8px; }
.td3-boxlabel-split .hl { background: var(--ink); color: var(--slate-ink); }
.td3-mode { min-width: 170px; }
.td3-mode-body { display: flex; align-items: center; margin: 8px 0 4px; padding-right: 92px; }
.td3-envleds { flex-direction: row; gap: 18px; padding-top: 30px; }
.td3-envled { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.td3-led-gate, .td3-led-env { --glow: 0; background: var(--led-off); box-shadow: 0 0 calc(12px * var(--glow)) rgba(255, 42, 26, var(--glow)); }
.td3-led-gate { background: color-mix(in srgb, var(--led) calc(100% * var(--glow)), var(--led-off)); }
.td3-led-env { background: color-mix(in srgb, var(--led) calc(100% * var(--glow)), var(--led-off)); }
.td3-modrow { flex-direction: row; align-items: flex-start; gap: 8px; padding-top: 4px; }

/* ---- LED-ek, gombok */
.td3-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--led-off); border: 1px solid #000; }
.td3-led.on { background: var(--led); box-shadow: 0 0 8px #ff3b2a, 0 0 2px #fff6; }
.td3-btn { appearance: none; background: linear-gradient(#3a3d42, #1c1e21); border: 2px solid #050607; border-radius: 5px; box-shadow: 0 3px 6px #000c, inset 0 1px 0 #ffffff22;
  width: 42px; height: 36px; cursor: pointer; padding: 0; color: inherit; touch-action: none; }
.td3-btn.down { transform: translateY(2px); box-shadow: 0 1px 2px #000c; background: linear-gradient(#2a2c30, #141517); }
.td3-btn:focus-visible { outline: 2px solid #7fb2ff; }
.td3-btn-wide { width: 66px; height: 34px; }
.td3-btn-big { width: 66px; height: 66px; border-radius: 8px; }
.td3-btn-big.lit { box-shadow: 0 0 0 2px #ff3b2a88, 0 3px 6px #000c; }
.td3-btn-key { width: 40px; height: 72px; border-radius: 4px; }
.td3-btn-black { height: 50px; width: 36px; background: linear-gradient(#2e3034, #131416); }

/* ---- szekvenszer-sor */
.td3-row-seq { padding: 14px 4px 8px; align-items: stretch; gap: 8px; }
.td3-seqcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.td3-seq-left, .td3-seq-right, .td3-seq-pitch, .td3-seq-time { background: linear-gradient(180deg, #3b4655, #2f3742); border-radius: 8px; padding: 8px 8px; }
.td3-seq-left .td3-boxlabel, .td3-seq-right .td3-boxlabel, .td3-seq-pitch .td3-boxlabel, .td3-seq-time .td3-boxlabel { background: var(--slate); color: var(--slate-ink); border-color: var(--slate); }
.td3-seq-caption { display: flex; gap: 6px; }
.td3-seq-startbox { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.td3-ledrow { display: flex; align-items: center; gap: 6px; }
.td3-fnrow { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.td3-normal-label { font-size: 10px; line-height: 1; letter-spacing: .05em; text-align: center; }
.td3-keyboard { display: flex; align-items: flex-end; gap: 3px; }
.td3-key { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; }
.td3-key.black { margin-bottom: 26px; }
.td3-key-top { display: flex; flex-direction: column; align-items: center; min-height: 26px; justify-content: flex-end; }
.td3-note { font-size: 14px; font-weight: 700; }
.td3-key-fn { font-size: 10px; font-weight: 700; color: #fff; background: var(--slate); padding: 0 4px; border-radius: 3px; }
.td3-key-bottom { font-size: 12px; min-height: 14px; }
.td3-key-sel { font-size: 11px; font-weight: 700; color: var(--slate-ink); background: var(--slate); padding: 0 8px; border-radius: 3px; min-height: 14px; }
.td3-key-rowlabels { display: flex; justify-content: space-between; width: 100%; font-size: 12px; font-weight: 700; margin-top: 4px; padding: 0 4px; }
.td3-key-rowlabels span:last-child { background: var(--slate); color: var(--slate-ink); padding: 0 6px; border-radius: 3px; }
.td3-tkeys { display: flex; gap: 4px; }
.td3-tkey { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.td3-tkey-top { font-size: 16px; min-height: 22px; }
.td3-glyph { letter-spacing: -.1em; }
.td3-tkey-groups { display: flex; justify-content: space-between; width: 100%; font-size: 10px; letter-spacing: .05em; }
.td3-btn-time { margin-bottom: 4px; }
.td3-syncrow { display: flex; gap: 6px; margin-top: 12px; }
.td3-foot { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .5em; color: #3b3e44; padding-top: 6px; }

/* ---- kijelző + súgó */
.td3-readout { max-width: 1500px; margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 13px/1.4 ui-monospace, Menlo, monospace; color: #b9bec7; }
.td3-readout-step { color: #ffb4ad; }
.td3-help { max-width: 1500px; margin: 10px auto 0; color: #b9bec7; font-size: 14px; }
.td3-help summary { cursor: pointer; color: #e9ebee; }
.td3-help li { margin: 4px 0; }

@media (max-width: 1100px) {
  .td3-row-knobs, .td3-row-mid { flex-wrap: wrap; justify-content: center; }
  .td3-row-seq { flex-wrap: wrap; justify-content: center; }
}

/* A panel ACCENT gombja: kerek piros nyomógomb (a .td3-btn alapstílus fölött). */
.td3-btn.td3-round { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #4a0d0a;
  background: radial-gradient(circle at 40% 35%, #ff7a6e, var(--red-btn) 60%); }
.td3-btn.td3-round.down { box-shadow: 0 0 14px #ff3b2a, 0 1px 2px #000c; filter: brightness(1.3); }