/*
 * Synth Player · Дрейф — стили
 * Все размеры в vw через единицу --u: макет нарисован на ширине 1440,
 * поэтому --u = 100vw / 1440 и окно масштабируется вместе с экраном.
 * На планшете и телефоне --u пересчитывается, а сетка перестраивается.
 */

/* ========== Токены ========== */
:root {
  --u: calc(100vw / 1440);

  --sky-top: #0a3fd6;
  --sky-mid: #1f5cf5;
  --sky-bottom: #4f8dff;
  --cloud: rgba(255, 255, 255, 0.9);

  --frame: #1b2739;
  --metal-1: #f4f6f9;
  --metal-2: #dde2e9;
  --edge: #98a4b3;
  --ink: #1b2738;
  --ink-soft: #5c6a7e;

  --lcd-top: #1f4a8c;
  --lcd-bottom: #0c2857;
  --lcd-ink: #d9e9ff;
  --lcd-dim: rgba(190, 215, 255, 0.6);
  --lcd-edge: #86b6f0;
  --lcd-line: rgba(170, 205, 255, 0.45);
  --lcd-glow: 0 0 calc(10 * var(--u)) rgba(150, 200, 255, 0.55);

  --acc-hi: #a7cdff;
  --acc: #2e6fd6;
  --acc-lo: #1b4ea5;
  --acc-glow: rgba(75, 155, 255, 0.65);
  --acc-tint: #dbe7f7;

  --font-lcd: 'Share Tech Mono', 'PT Mono', Consolas, 'Courier New', monospace;
  --font-label: 'Saira Semi Condensed', 'PT Sans Narrow', 'Arial Narrow', Arial, sans-serif;
  --font-menu: Tahoma, Verdana, sans-serif;
}

/* Все голоса в одной голубо-синей гамме, оттенок --h чуть разный: экран, огоньки, ручки и кнопки */
.console {
  --acc-hi: hsl(var(--h) 92% 82%);
  --acc: hsl(var(--h) 70% 50%);
  --acc-lo: hsl(var(--h) 72% 33%);
  --acc-glow: hsl(var(--h) 95% 62% / 0.65);
  --acc-tint: hsl(var(--h) 60% 91%);
  --lcd-top: hsl(var(--h) 62% 31%);
  --lcd-bottom: hsl(var(--h) 76% 15%);
  --lcd-ink: hsl(var(--h) 100% 93%);
  --lcd-dim: hsl(var(--h) 80% 86% / 0.62);
  --lcd-edge: hsl(var(--h) 75% 72%);
  --lcd-line: hsl(var(--h) 80% 84% / 0.45);
  --lcd-glow: 0 0 calc(10 * var(--u)) hsl(var(--h) 100% 76% / 0.55);
}

.console[data-voice="pulse"] { --h: 204; }
.console[data-voice="dust"] { --h: 192; }
.console[data-voice="bass"] { --h: 226; }
.console[data-voice="fog"] { --h: 214; }
.console[data-voice="drops"] { --h: 198; }
.console[data-voice="glass"] { --h: 234; }

/* ========== Страница ========== */
html {
  background: var(--sky-bottom);
}

body {
  min-height: 100vh;
  padding: calc(40 * var(--u)) 0 calc(56 * var(--u));
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-bottom)) fixed;
  color: var(--ink);
  font-family: var(--font-label);
}

:focus-visible {
  outline: calc(2 * var(--u)) solid #3d8bff;
  outline-offset: calc(3 * var(--u));
}

.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Облака рисует sky.js: пушистые кучевые, освещены сверху, с серо-голубой тенью снизу.
   Каждый слой шириной в два экрана из двух одинаковых половин: сдвигается на экран
   и начинается заново — шва не видно. Ближний слой плывёт быстрее дальнего. */
.sky__layer,
.sky__sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 200vw;
  height: 100%;
  will-change: transform;
  animation: clouds 40s linear infinite;
}

.sky__layer--far {
  opacity: 0.85;
  animation-duration: 70s;
}

.sky__layer--mid {
  animation-duration: 42s;
}

.sky__sparkles {
  animation-duration: 42s;
}

.sky__layer--near {
  animation-duration: 26s;
}

.sky__cloud {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 30, 120, 0.18));
}

.sky__layer--far .sky__cloud {
  filter: blur(calc(0.6 * var(--u)));
}

/* Звёздочка с длинными лучами-бликами, как на картинках нулевых */
.spark {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  animation: twinkle 2.4s ease-in-out infinite;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) center / 100% calc(1.5 * var(--u)) no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) center / calc(1.5 * var(--u)) 100% no-repeat;
}

.spark::after {
  inset: 25%;
  transform: rotate(45deg);
  opacity: 0.7;
  background:
    radial-gradient(circle, #ffffff 0 12%, rgba(200, 225, 255, 0.6) 25%, transparent 60%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8) 50%, transparent) center / 100% calc(1 * var(--u)) no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8) 50%, transparent) center / calc(1 * var(--u)) 100% no-repeat;
  filter: drop-shadow(0 0 calc(3 * var(--u)) #ffffff);
}

/* Мелкая искорка */
.dot {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 calc(4 * var(--u)) calc(1 * var(--u)) rgba(255, 255, 255, 0.85);
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes clouds {
  to { transform: translateX(-100vw); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.2; transform: scale(0.55) rotate(20deg); }
}

/* ========== Окно ========== */
.window {
  position: relative;
  z-index: 1;
  width: 92vw;
  margin: 0 auto;
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.75);
  border-radius: calc(14 * var(--u));
  /* Матовое стекло: сквозь окно видно небо и облака, размытые и светлее */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(190, 215, 255, 0.14));
  -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(1.8) brightness(1.08);
  backdrop-filter: blur(calc(22 * var(--u))) saturate(1.8) brightness(1.08);
  box-shadow:
    0 0 0 calc(1 * var(--u)) rgba(10, 30, 90, 0.35),
    0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(5, 25, 90, 0.35),
    inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.95),
    inset 0 0 calc(40 * var(--u)) rgba(255, 255, 255, 0.18);
}

/* Блик по стеклу окна — светлая полоса по диагонали сверху */
.window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 28.5%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}

.window > * {
  position: relative;
  z-index: 1;
}

.window.is-wide {
  width: 98vw;
}

.window__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u));
}

/* ========== Заголовок ========== */
.titlebar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u));
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  background: linear-gradient(180deg, rgba(30, 50, 95, 0.55), rgba(10, 22, 55, 0.5));
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.35), inset 0 calc(-1 * var(--u)) 0 rgba(255, 255, 255, 0.15);
  color: #e8eef7;
  user-select: none;
}

.titlebar__title {
  min-width: 0;
  font-family: var(--font-lcd);
  font-size: calc(20 * var(--u));
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar__line {
  min-width: calc(40 * var(--u));
}

/* Логотип Air.exe в заголовке: описан один раз в <symbol>, белый, со свечением */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.titlebar__logo {
  display: inline-block;
  width: calc(60 * var(--u));
  height: calc(15 * var(--u));
  vertical-align: calc(-1 * var(--u));
  fill: #ffffff;
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(150, 200, 255, 0.65));
}

.titlebar__line {
  flex: 1;
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(180deg, #e2e8f0, #8a98ad);
  box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.45);
}

.titlebar__buttons {
  display: flex;
  gap: calc(5 * var(--u));
  margin-left: auto;
}

.win-btn {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(25 * var(--u));
  border: calc(1 * var(--u)) solid #070d17;
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, #ffffff, #c7d0db);
  color: #1b2738;
}

.win-btn:hover {
  background: linear-gradient(180deg, #ffffff, #dbe6f4);
}

.win-btn svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* ========== Меню ========== */
.menubar {
  position: relative;
  z-index: 20;
  display: flex;
  gap: calc(2 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-bottom: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  font-family: var(--font-menu);
  font-size: calc(15 * var(--u));
}

.menu {
  position: relative;
}

.menu__button {
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border: calc(1 * var(--u)) solid transparent;
  border-radius: calc(3 * var(--u));
}

.menu__button:hover,
.menu.is-open .menu__button {
  border-color: #9fbbe3;
  background: #dde8f8;
}

.menu__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: calc(250 * var(--u));
  margin-top: calc(2 * var(--u));
  padding: calc(3 * var(--u));
  border: calc(1 * var(--u)) solid #6f7d92;
  border-radius: calc(3 * var(--u));
  background: #fbfcfd;
  box-shadow: calc(3 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.25);
}

.menu.is-open .menu__list {
  display: block;
}

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(26 * var(--u));
  border-radius: calc(2 * var(--u));
  font-size: calc(14 * var(--u));
  text-align: left;
  white-space: nowrap;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: #2e6fd6;
  color: #ffffff;
  outline: none;
}

.menu__item[aria-checked="true"]::before {
  content: "✓";
  position: absolute;
  left: calc(9 * var(--u));
}

.menu__sep {
  height: calc(1 * var(--u));
  margin: calc(3 * var(--u)) calc(4 * var(--u));
  background: #c8d0da;
}

/* ========== Общие детали дисплеев ========== */
.lcd-legend {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(14 * var(--u));
  letter-spacing: 0.06em;
}

.lcd-legend::before {
  content: "";
  width: calc(10 * var(--u));
  height: calc(1 * var(--u));
  background: var(--lcd-dim);
}

.lcd-label {
  color: var(--lcd-dim);
  letter-spacing: 0.05em;
}

.lcd-chip {
  min-width: calc(34 * var(--u));
  padding: calc(1 * var(--u)) calc(9 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--acc-tint);
  color: var(--lcd-bottom);
  text-align: center;
}

.lcd-field {
  min-width: calc(96 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  white-space: nowrap;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-line);
}

.lcd-field--short {
  min-width: calc(64 * var(--u));
  text-align: center;
}

.lcd-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(6 * var(--u));
  color: var(--lcd-ink);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(170, 205, 255, 0.25);
}

.lcd-arrow:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lcd-arrow svg {
  width: calc(12 * var(--u));
  height: calc(14 * var(--u));
  fill: currentColor;
}

/* ========== Верхняя дека: транспорт и дисплей ========== */
.deck {
  display: grid;
  grid-template-columns: calc(400 * var(--u)) 1fr;
  gap: calc(10 * var(--u));
}

.deck__transport {
  display: grid;
  align-content: center;
}

.transport {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--u));
}

.tbtn {
  flex: none;
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  padding: calc(6 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff, #b9c3d0 60%, #7b889a);
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.25), inset 0 0 0 calc(2 * var(--u)) #1d2a3d;
}

.tbtn__disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, #ffffff 0%, #e7ecf2 45%, #c2cbd7 100%);
  box-shadow: inset 0 calc(-3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.16), inset 0 calc(2 * var(--u)) calc(3 * var(--u)) #ffffff, 0 0 0 calc(2 * var(--u)) #2a3a52;
  transition: transform 0.06s;
}

.tbtn svg {
  width: 36%;
  height: 36%;
}

.tbtn:active .tbtn__disc {
  transform: scale(0.96);
}

.tbtn.is-active .tbtn__disc {
  background: radial-gradient(circle at 50% 22%, #f4f9ff, #cfe2fb 50%, #9cbfee);
  box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(30, 80, 160, 0.35), 0 0 0 calc(2 * var(--u)) var(--acc), 0 0 calc(16 * var(--u)) var(--acc-glow);
}

/* Запись: красное свечение и мигание, пока идёт запись */
.tbtn--rec.is-active .tbtn__disc {
  background: radial-gradient(circle at 50% 22%, #fff4f1, #ffd0c4 50%, #f19b86);
  box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(160, 40, 20, 0.35), 0 0 0 calc(2 * var(--u)) #e0402a, 0 0 calc(16 * var(--u)) rgba(255, 80, 50, 0.7);
  animation: blink-rec 1s ease-in-out infinite;
}

.tbtn--rec.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.lcd-rec {
  margin-left: calc(6 * var(--u));
  white-space: nowrap;
  padding: 0 calc(7 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #e0402a;
  color: #ffffff;
  letter-spacing: 0.06em;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 80, 50, 0.7);
  animation: blink 1s steps(2, jump-none) infinite;
}

.lcd-rec b {
  font-weight: 400;
}

.lcd-rec[hidden] {
  display: none;
}

.lcd {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, calc(330 * var(--u))) minmax(0, 1fr) auto;
  grid-template-areas:
    "song viz bpm"
    "msg msg msg"
    "info info meta";
  align-items: center;
  gap: calc(6 * var(--u)) calc(20 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid #0a1a36;
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, color-mix(in srgb, var(--lcd-top) 82%, transparent), color-mix(in srgb, var(--lcd-bottom) 86%, transparent) 62%, rgba(10, 34, 80, 0.9));
  color: var(--lcd-ink);
  font-family: var(--font-lcd);
  box-shadow:
    0 0 0 calc(3 * var(--u)) #bdd0e8,
    0 0 0 calc(4 * var(--u)) #7f95b0,
    inset 0 0 0 calc(1 * var(--u)) var(--lcd-edge),
    inset 0 0 calc(28 * var(--u)) rgba(120, 180, 255, 0.28);
}

/* Сканлайны и стеклянный блик по диагонали */
.lcd::after,
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(12 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.11) 0 32%, rgba(255, 255, 255, 0) 32.5%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(3 * var(--u)));
  pointer-events: none;
}

.lcd__song {
  grid-area: song;
  min-width: 0;
}

.lcd-legend__hint {
  margin-left: auto;
  font-size: calc(11 * var(--u));
  opacity: 0;
  transition: opacity 0.2s;
}

.lcd__song:hover .lcd-legend__hint {
  opacity: 0.7;
}

/* Название трека: кнопка, по клику превращается в поле ввода */
.lcd__name {
  display: block;
  width: 100%;
  margin-top: calc(4 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(6 * var(--u));
  color: inherit;
  font: 400 calc(44 * var(--u))/1.15 var(--font-lcd);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--lcd-glow);
  cursor: text;
}

.lcd__name:hover {
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-line);
}

.lcd__name.is-long {
  font-size: calc(30 * var(--u));
  line-height: calc(51 * var(--u));
}

.lcd__name.is-longer {
  font-size: calc(22 * var(--u));
  line-height: calc(51 * var(--u));
}

.lcd__name-input {
  background: rgba(0, 10, 40, 0.35);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-ink), 0 0 calc(10 * var(--u)) rgba(150, 200, 255, 0.4);
  caret-color: #ffffff;
  outline: none;
}

.lcd__name-input[hidden] {
  display: none;
}

.lcd__viz {
  position: relative;
  grid-area: viz;
  display: flex;
  align-items: center;
  min-width: 0;
}

.lcd__canvas {
  width: 100%;
  height: calc(70 * var(--u));
}

.lcd__bpm {
  grid-area: bpm;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding-left: calc(14 * var(--u));
  border-left: calc(1 * var(--u)) solid rgba(170, 205, 255, 0.35);
}

.lcd__bpm-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}

.lcd__bpm-value {
  min-width: calc(84 * var(--u));
  padding: 0 calc(2 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(46 * var(--u));
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: var(--lcd-glow);
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
}

.lcd__status {
  grid-area: msg;
  min-width: 0;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(0, 10, 40, 0.28);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-line);
  font-size: calc(16 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd__status::before {
  content: "› ";
  color: var(--lcd-dim);
}

.lcd__status b {
  color: #ffffff;
  font-weight: 400;
  text-shadow: var(--lcd-glow);
}

.lcd__info {
  grid-area: info;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  font-size: calc(15 * var(--u));
}

.lcd-pair {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
}

.lcd-bars {
  display: flex;
  gap: calc(4 * var(--u));
}

.lcd-bars li {
  width: calc(24 * var(--u));
  padding: calc(1 * var(--u)) 0;
  border-radius: calc(3 * var(--u));
  color: var(--lcd-dim);
  text-align: center;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-line);
}

.lcd-bars li.is-now {
  background: var(--lcd-ink);
  color: var(--lcd-bottom);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(150, 200, 255, 0.8);
}

.lcd__meta {
  grid-area: meta;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
}

.led-meter {
  display: flex;
  gap: calc(3 * var(--u));
}

.led-meter i {
  width: calc(7 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgba(255, 255, 255, 0.1);
}

.led-meter i.is-lit {
  background: var(--lcd-ink);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(150, 200, 255, 0.7);
}

.led-meter i.is-hot.is-lit {
  background: #ffb36b;
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 160, 80, 0.8);
}

/* ========== Панели ========== */
.panel {
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.65);
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(225, 236, 255, 0.12));
  box-shadow:
    inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.9),
    inset 0 0 calc(18 * var(--u)) rgba(255, 255, 255, 0.12),
    0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10, 40, 120, 0.12);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
  font: 700 calc(15 * var(--u))/1 var(--font-label);
  letter-spacing: 0.06em;
}

.panel__title::before {
  content: "";
  width: calc(12 * var(--u));
  height: calc(2 * var(--u));
  background: currentColor;
}

.panel__title::after {
  content: "";
  flex: 1;
  height: calc(2 * var(--u));
  background: currentColor;
  opacity: 0.85;
}

/* ========== Пульты голосов ========== */
.consoles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}

.console {
  display: grid;
  align-content: start;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.55);
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.85), 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(10, 40, 120, 0.14);
  transition: box-shadow 0.2s;
}

.console.is-solo {
  border-color: var(--acc-lo);
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.8), 0 0 0 calc(2 * var(--u)) var(--acc), 0 0 calc(18 * var(--u)) var(--acc-glow);
}

/* --- Экран голоса --- */
.screen {
  position: relative;
  display: grid;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
  border: calc(2 * var(--u)) solid #0a1a36;
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, color-mix(in srgb, var(--lcd-top) 80%, transparent), color-mix(in srgb, var(--lcd-bottom) 86%, transparent));
  color: var(--lcd-ink);
  font-family: var(--font-lcd);
  font-size: calc(14 * var(--u));
  box-shadow:
    0 0 0 calc(2 * var(--u)) #bdd0e8,
    0 0 0 calc(3 * var(--u)) #7f95b0,
    inset 0 0 0 calc(1 * var(--u)) var(--lcd-edge),
    inset 0 0 calc(22 * var(--u)) hsl(var(--h) 90% 70% / 0.22);
  transition: filter 0.25s;
}

/* Выключен — экран гаснет; включён, но заглушён чужим Solo — тускнеет и штрихуется */
.console:not(.is-on) .screen {
  filter: brightness(0.5) saturate(0.35);
}

.console.is-silenced .screen {
  filter: brightness(0.7) saturate(0.4);
}

.console.is-silenced .screen::after {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(9 * var(--u))),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(3 * var(--u)));
}

.screen__top {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.screen__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--acc);
  color: #ffffff;
  font: 700 calc(16 * var(--u))/1 var(--font-label);
  box-shadow: 0 0 calc(6 * var(--u)) var(--acc-glow);
  transition: background 0.12s, box-shadow 0.12s;
}

/* Голос только что сыграл ноту */
.console.is-hit .screen__badge {
  background: var(--acc-hi);
  color: var(--lcd-bottom);
  box-shadow: 0 0 calc(16 * var(--u)) var(--acc-hi), 0 0 calc(4 * var(--u)) #ffffff;
  transition: none;
}

.screen__name {
  flex: 1;
  min-width: 0;
  font: 400 calc(26 * var(--u))/calc(32 * var(--u)) var(--font-lcd);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--lcd-glow);
}

.screen__state {
  flex: none;
  min-width: calc(52 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--lcd-dim);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-line);
}

.console.is-on .screen__state {
  background: var(--acc-tint);
  color: var(--lcd-bottom);
  box-shadow: none;
}

.console.is-solo .screen__state {
  background: #ffffff;
  box-shadow: 0 0 calc(10 * var(--u)) var(--acc-hi);
}

.console.is-silenced .screen__state {
  background: transparent;
  color: var(--lcd-ink);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-ink);
}

.screen__fields {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}

.screen__role {
  flex: 1;
  min-width: 0;
  color: var(--lcd-dim);
  font-size: calc(13 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-field--pattern {
  flex: none;
  min-width: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.screen__note {
  min-height: calc(17 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--lcd-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__note.is-pending {
  color: #ffffff;
  animation: blink 0.9s steps(2, jump-none) infinite;
}

/* 16 шагов такта: яркость = сила ноты, белый — где сейчас музыка, вспышка — нота прозвучала */
.steps {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: calc(3 * var(--u));
}

.steps__led {
  --v: 0;
  height: calc(11 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.16);
}

.steps__led:nth-child(4n + 1):not(:first-child) {
  margin-left: calc(5 * var(--u));
}

.steps__led.has-note {
  background: hsl(var(--h) 75% calc(30% + var(--v) * 32%));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--acc-hi);
}

.steps__led.is-now {
  background: rgba(255, 255, 255, 0.45);
}

.steps__led.is-now.has-note {
  background: var(--lcd-ink);
}

.steps__led.is-hit {
  background: #ffffff;
  box-shadow: 0 0 calc(10 * var(--u)) var(--acc-hi), 0 0 calc(3 * var(--u)) #ffffff;
}

/* --- Ряд кнопок: питание, Solo, паттерны --- */
.console__keys {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.power-key {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff, #b9c3d0 60%, #7b889a);
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.25), inset 0 0 0 calc(2 * var(--u)) #1d2a3d;
}

.power-key__disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #5c6a7e;
  background: radial-gradient(circle at 50% 22%, #ffffff 0%, #e7ecf2 45%, #c2cbd7 100%);
  box-shadow: inset 0 calc(-2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.16), 0 0 0 calc(2 * var(--u)) #2a3a52;
}

.power-key svg {
  width: 52%;
  height: 52%;
}

.power-key[aria-pressed="true"] .power-key__disc {
  color: #ffffff;
  background: radial-gradient(circle at 50% 22%, var(--acc-hi), var(--acc) 60%, var(--acc-lo));
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.25), 0 0 0 calc(2 * var(--u)) var(--acc-lo), 0 0 calc(14 * var(--u)) var(--acc-glow);
}

.pattern-keys {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(5 * var(--u));
  min-width: 0;
}

.pattern-key {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: calc(6 * var(--u));
  min-width: 0;
  padding: calc(5 * var(--u)) calc(7 * var(--u)) calc(5 * var(--u)) calc(8 * var(--u));
  border: calc(1 * var(--u)) solid rgba(110, 128, 152, 0.65);
  border-radius: calc(7 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(210, 225, 250, 0.22));
  box-shadow: inset 0 calc(1 * var(--u)) 0 #ffffff, 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(20, 50, 100, 0.12);
  text-align: left;
}

.pattern-key:hover {
  background: linear-gradient(180deg, #ffffff, rgba(226, 234, 244, 0.75));
}

.pattern-key__led {
  grid-row: 1 / 3;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d899b, #3a475a);
  box-shadow: inset 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.5);
}

.pattern-key__letter {
  font: 700 calc(16 * var(--u))/1 var(--font-label);
}

.pattern-key__name {
  min-width: 0;
  font: 600 calc(11 * var(--u))/1.2 var(--font-label);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pattern-key[aria-pressed="true"] {
  border-color: var(--acc-lo);
  background: linear-gradient(180deg, #ffffff, var(--acc-tint));
  box-shadow: 0 0 0 calc(1 * var(--u)) var(--acc), inset 0 calc(1 * var(--u)) 0 #ffffff;
}

.pattern-key[aria-pressed="true"] .pattern-key__led {
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--acc-hi) 30%, var(--acc) 65%, var(--acc-lo));
  box-shadow: 0 0 calc(7 * var(--u)) var(--acc-glow);
}

/* Ждёт начала такта: пунктир и мигающий огонёк */
.pattern-key.is-pending {
  border: calc(1 * var(--u)) dashed var(--acc-lo);
  background: linear-gradient(180deg, #ffffff, #eef1f5);
}

.pattern-key.is-pending .pattern-key__led {
  background: var(--acc);
  box-shadow: 0 0 calc(7 * var(--u)) var(--acc-glow);
  animation: blink 0.45s steps(2, jump-none) infinite;
}

/* --- Панель звука --- */
.console__sound {
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
}

.sound {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "fader knobs"
    "fader vary";
  gap: calc(6 * var(--u)) calc(10 * var(--u));
}

.sound .fader-group {
  grid-area: fader;
}

.sound__knobs {
  grid-area: knobs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2 * var(--u));
}

.sound__vary {
  grid-area: vary;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u));
  align-self: end;
}

.console.is-compact .sound__knobs {
  display: none;
}

.console.is-compact .vfader {
  height: calc(70 * var(--u));
}

.fader-group,
.knob-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 * var(--u));
  min-width: 0;
}

.fader-group__label,
.knob-group__label {
  max-width: 100%;
  font: 700 calc(12 * var(--u))/1 var(--font-label);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readout {
  min-width: calc(46 * var(--u));
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, var(--lcd-top), var(--lcd-bottom));
  color: var(--lcd-ink);
  font: calc(12 * var(--u))/1.1 var(--font-lcd);
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--lcd-edge), 0 0 0 calc(1 * var(--u)) #0a1a36;
}

/* ========== Фейдер ========== */
.vfader {
  position: relative;
  width: calc(44 * var(--u));
  height: calc(116 * var(--u));
  cursor: pointer;
  touch-action: none;
}

.vfader__ticks {
  position: absolute;
  inset: calc(8 * var(--u)) 0;
  background: repeating-linear-gradient(180deg, #738196 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(8 * var(--u)));
  -webkit-mask-image: linear-gradient(90deg, #000 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(36 * var(--u)), #000 calc(36 * var(--u)));
  mask-image: linear-gradient(90deg, #000 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(36 * var(--u)), #000 calc(36 * var(--u)));
}

.vfader__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(11 * var(--u));
  border-radius: calc(6 * var(--u));
  overflow: hidden;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0a1525, #2a4262);
  box-shadow: inset 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.6);
}

.vfader__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(calc(16 * var(--u)) + var(--n, 0) * (100% - calc(32 * var(--u))));
  background: linear-gradient(90deg, var(--acc-lo), var(--acc-hi), var(--acc-lo));
}

.vfader__thumb {
  position: absolute;
  top: calc((1 - var(--n, 0)) * (100% - calc(32 * var(--u))));
  left: 50%;
  width: calc(30 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(6 * var(--u));
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffffff, #d5dce5 45%, #aeb9c7 55%, #eaeef3);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.35), 0 0 0 calc(1 * var(--u)) #5e6c80;
}

.vfader__thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(5 * var(--u));
  right: calc(5 * var(--u));
  height: calc(2 * var(--u));
  margin-top: calc(-1 * var(--u));
  background: #33435b;
}

/* ========== Ручки ========== */
.knob {
  --size: calc(52 * var(--u));
  --gap: calc(8 * var(--u));
  --rot: -135deg;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--size) + calc(24 * var(--u)));
  height: calc(var(--size) + calc(24 * var(--u)));
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
}

.knob--medium {
  --size: calc(54 * var(--u));
}

.knob > * {
  grid-area: 1 / 1;
}

.knob__ticks {
  position: relative;
  width: 100%;
  height: 100%;
}

.knob__ticks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: #33435b;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--size) / -2 - var(--gap)));
}

.knob__cap {
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: rotate(var(--rot));
  background: conic-gradient(#f8fafc, #a8b2bf, #f3f6f9, #99a4b2, #f8fafc, #b0b9c5, #eef2f5, #a1abb8, #f8fafc);
  box-shadow: 0 0 0 calc(3 * var(--u)) #1d2a3d, 0 0 0 calc(4 * var(--u)) #cbd3dd, 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.32);
}

.knob__cap i {
  position: absolute;
  top: 7%;
  left: 50%;
  width: calc(4 * var(--u));
  height: 30%;
  margin-left: calc(-2 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--acc);
  box-shadow: 0 0 calc(5 * var(--u)) var(--acc-glow);
}

.knob__shine {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

/* ========== Кнопки-таблетки ========== */
.pill {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border: calc(1 * var(--u)) solid rgba(70, 88, 115, 0.75);
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(205, 220, 245, 0.28));
  color: var(--ink);
  font: 700 calc(13 * var(--u))/1 var(--font-label);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pill:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff, #e0e6ee);
}

.pill:disabled {
  opacity: 0.45;
  cursor: default;
}

.pill[aria-pressed="true"],
.pill.is-active {
  border-color: var(--acc-lo);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc) 60%, var(--acc-lo));
  color: #ffffff;
  box-shadow: 0 0 calc(8 * var(--u)) var(--acc-glow);
}

.pill.is-pending {
  border: calc(1 * var(--u)) dashed var(--acc-lo);
  background: linear-gradient(180deg, #ffffff, var(--acc-tint));
  animation: blink-soft 0.9s ease-in-out infinite;
}

.pill--solo {
  flex: none;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
}

.pill--wide {
  padding: calc(7 * var(--u)) calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Выключенное окно ========== */
.power {
  display: none;
  position: absolute;
  inset: calc(40 * var(--u)) 0 0;
  z-index: 30;
  place-items: center;
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
  background: rgba(190, 202, 218, 0.55);
  backdrop-filter: blur(calc(3 * var(--u)));
}

.window.is-off .power {
  display: grid;
}

.window.is-off .lcd,
.window.is-off .screen {
  filter: brightness(0.35) saturate(0.4);
}

.power__btn {
  padding: calc(8 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff, #b9c3d0 60%, #7b889a);
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.3), inset 0 0 0 calc(2 * var(--u)) #1d2a3d;
}

.power__btn span {
  display: grid;
  place-items: center;
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, #ffffff, #e6ebf1 45%, #c1cad6);
  font: 700 calc(18 * var(--u))/1 var(--font-label);
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 calc(2 * var(--u)) #2a3a52;
}

/* ========== Окно справки ========== */
.dialog {
  width: min(calc(600 * var(--u)), 92vw);
  margin: auto;
  border: calc(2 * var(--u)) solid var(--frame);
  border-radius: calc(10 * var(--u));
  background: var(--metal-1);
  color: var(--ink);
  box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.4);
}

.dialog::backdrop {
  background: rgba(10, 30, 60, 0.35);
}

.dialog__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(180deg, #2e3e57, #131d2d);
  color: #e8eef7;
  font: calc(18 * var(--u))/1 var(--font-lcd);
  letter-spacing: 0.06em;
}

.dialog__body {
  max-height: 70vh;
  overflow: auto;
  padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));
  font: 500 calc(16 * var(--u))/1.5 var(--font-label);
}

.dialog__body h3 {
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.dialog__body p {
  margin-bottom: calc(8 * var(--u));
}

.dialog__foot {
  display: flex;
  justify-content: flex-end;
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}

@keyframes blink {
  50% { opacity: 0.25; }
}

@keyframes blink-rec {
  50% { box-shadow: inset 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(160, 40, 20, 0.35), 0 0 0 calc(2 * var(--u)) #e0402a, 0 0 calc(4 * var(--u)) rgba(255, 80, 50, 0.3); }
}

@keyframes blink-soft {
  50% { box-shadow: 0 0 calc(10 * var(--u)) var(--acc-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .screen__note.is-pending,
  .pattern-key.is-pending .pattern-key__led,
  .pill.is-pending,
  .sky__layer,
  .sky__sparkles,
  .spark,
  .dot,
  .tbtn--rec.is-active .tbtn__disc,
  .lcd-rec {
    animation: none;
  }
}

/* ========== Планшет и небольшой ноутбук: два пульта в ряд ========== */
@media (max-width: 1099px) {
  :root {
    --u: calc(100vw / 1000);
  }

  .window {
    width: 94vw;
  }

  .deck {
    grid-template-columns: calc(340 * var(--u)) 1fr;
  }

  .tbtn {
    width: calc(62 * var(--u));
    height: calc(62 * var(--u));
  }

  .transport .knob {
    --size: calc(44 * var(--u));
  }

  .lcd {
    grid-template-columns: calc(170 * var(--u)) minmax(0, 1fr) auto;
  }

  .lcd__name {
    font-size: calc(34 * var(--u));
  }

  .consoles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========== Телефон: один столбец, крупнее кнопки ========== */
@media (max-width: 699px) {
  :root {
    --u: calc(100vw / 420);
  }

  body {
    padding: calc(10 * var(--u)) 0 calc(24 * var(--u));
  }

  .window,
  .window.is-wide {
    width: 96vw;
  }

  .window__body {
    padding: calc(8 * var(--u));
    gap: calc(8 * var(--u));
  }

  .titlebar__title {
    font-size: calc(15 * var(--u));
  }

  .titlebar__line {
    display: none;
  }

  #btnMax {
    display: none;
  }

  .menubar {
    font-size: calc(14 * var(--u));
  }

  .menu__list {
    min-width: calc(220 * var(--u));
  }

  .deck {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck .panel__title {
    display: none;
  }

  .deck .panel {
    padding: calc(8 * var(--u)) calc(12 * var(--u));
  }

  .transport {
    justify-content: space-around;
    padding: 0;
  }

  .tbtn {
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
  }

  .lcd {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "song song"
      "viz bpm"
      "msg msg"
      "info info"
      "meta meta";
    gap: calc(6 * var(--u)) calc(10 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
  }

  .lcd__name {
    font-size: calc(34 * var(--u));
  }

  .lcd__canvas {
    height: calc(46 * var(--u));
  }

  .lcd__status {
    white-space: normal;
    font-size: calc(14 * var(--u));
  }

  .lcd__info {
    font-size: calc(14 * var(--u));
    gap: calc(6 * var(--u)) calc(8 * var(--u));
  }

  .lcd__meta {
    justify-content: flex-start;
  }

  .consoles {
    grid-template-columns: 1fr;
  }

  /* Мелкие подписи на телефоне крупнее */
  .screen__role,
  .screen__note,
  .pattern-key__name,
  .readout,
  .knob-group__label,
  .fader-group__label {
    font-size: calc(13 * var(--u));
  }

  /* Узкие кнопки паттернов: без огонька, чтобы влезло название */
  .console__keys {
    gap: calc(6 * var(--u));
  }

  .pill--solo {
    padding: calc(8 * var(--u)) calc(9 * var(--u));
  }

  .pattern-key {
    grid-template-columns: 1fr;
    padding: calc(5 * var(--u)) calc(6 * var(--u));
  }

  .pattern-key__led {
    display: none;
  }

  .pattern-key__name {
    font-size: calc(12 * var(--u));
  }

  .hint {
    display: none;
  }
}