/* =====================================================================================
   Isomorph, deck de controle. Linguagem: teclado IBM escuro / console de estudio. Plastico
   chapado, keycaps com profundidade fisica, LEDs e um LCD de matriz de pontos. Sem
   backdrop-filter em lugar nenhum. Toda geometria sai de --key (fluido) ou --lcd-dot, e o deck
   responde ao proprio espaco (container deck), nao ao device. Dois layouts, as mesmas teclas.
   ===================================================================================== */

/* ================================================================ DECK (modo painel) */
.deck {
	position: fixed; z-index: 10;
	inset-inline-start: max(var(--edge-pad), env(safe-area-inset-left));
	inset-block-end: max(var(--edge-pad), env(safe-area-inset-bottom));
	/* largura: a do painel, ou o que couber. Sem regra de celular: em tela estreita ele
	   simplesmente ocupa a largura disponivel. */
	inline-size: min(var(--panel-w), 100% - 2 * var(--edge-pad));
	max-block-size: calc(100dvh - 2 * var(--edge-pad));
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
	container: deck / inline-size;
	box-sizing: border-box;
	padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--cap-depth));
	border-radius: var(--r-chassis);
	background:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(to bottom, var(--chassis-top), var(--chassis) 38%);
	box-shadow:
		inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.07),
		inset 0 calc(-1 * var(--hairline)) 0 rgba(0, 0, 0, 0.6),
		0 calc(var(--cap-depth) * 1.6) 0 var(--chassis-edge),
		0 calc(var(--shade) * 2) calc(var(--shade) * 4) rgba(0, 0, 0, 0.6);
	transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion) ease;
}
.deck::-webkit-scrollbar { display: none; }
body.ui-hidden .deck { transform: translateY(calc(100% + var(--key) * 1.5)); opacity: 0; pointer-events: none; }

/* cabecalho: badge do fabricante, drive de disquete, acoes */
/* quebra intrinseca: quando nome + drive + teclas de sistema nao cabem na largura do painel, as
   teclas descem pra uma segunda linha, alinhadas a direita. Sem breakpoint: decide o espaco. */
.deck-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); }
.deck-logo {
	inline-size: var(--key-sm); block-size: var(--key-sm); border-radius: var(--r-cap); flex: none;
	display: grid; place-items: center; background: var(--well);
	box-shadow: inset 0 calc(var(--shade) * 0.5) var(--shade) rgba(0, 0, 0, 0.8), 0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
}
.deck-logo img { inline-size: 62%; block-size: auto; opacity: 0.85; filter: grayscale(1) brightness(1.6); }
.deck-title { display: flex; flex-direction: column; flex: none; line-height: 1.15; } /* o nome nao encolhe; quem cede e o drive */
.deck-title strong { font-size: var(--text-m); font-weight: 600; color: var(--legend); }
.deck-title span { font-size: var(--text-xs); color: var(--engrave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-actions { display: flex; gap: var(--space-1); flex: none; margin-inline-start: auto; }

/* drive: a fenda do disquete (referencia MC-500), e uma tecla (seq.js): vazio, abre um disco;
   com disco, ejeta. LED verde le, vermelho grava; com disco dentro, a borda dele aparece na
   fenda e o LED fica aceso. Altura de tecla pequena: alvo de toque do tamanho das vizinhas. */
.drive {
	margin-inline-start: auto; flex: 0 1 calc(var(--key) * 2.4); min-inline-size: calc(var(--key) * 1.4);
	display: flex; align-items: center; gap: calc(var(--key) * 0.2);
	appearance: none; border: 0; margin-block: 0; font: inherit; color: inherit; cursor: pointer;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
	block-size: var(--key-sm); padding-inline: calc(var(--key) * 0.2); box-sizing: border-box;
	border-radius: var(--r-cap);
	background: linear-gradient(to bottom, #141416, #1d1d20);
	box-shadow: inset 0 calc(var(--shade) * 0.3) calc(var(--shade) * 0.6) rgba(0, 0, 0, 0.85), 0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
}
.drive-slot {
	flex: 1; block-size: calc(var(--key) * 0.09); border-radius: 1em; background: #020202;
	box-shadow: inset 0 var(--hairline) calc(var(--hairline) * 2) #000, 0 var(--hairline) 0 rgba(255, 255, 255, 0.07);
}
.drive .led.on, .deck.loading .drive .led { background: var(--drive-led); box-shadow: 0 0 calc(var(--led) * 0.8) var(--drive-led); }
.deck.loading .drive .led, .drive.busy .led { animation: driveBlink 0.24s steps(2, start) infinite; }
.drive.loaded .led, .drive.reading .led { background: var(--drive-led); box-shadow: 0 0 calc(var(--led) * 0.8) var(--drive-led); }
.drive.reading .led { animation: driveBlink 0.24s steps(2, start) infinite; }
.drive.writing .led { background: var(--rec); box-shadow: 0 0 calc(var(--led) * 0.8) var(--rec); }
.drive.loaded .drive-slot { background: linear-gradient(to bottom, #020202 30%, #45454b 30% 70%, #020202 70%); }
.drive:hover .drive-slot { box-shadow: inset 0 var(--hairline) calc(var(--hairline) * 2) #000, 0 var(--hairline) 0 rgba(255, 255, 255, 0.07), 0 0 0 var(--hairline) var(--engrave); }
.drive:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: calc(var(--cap-depth) * 1.5); }
/* arquivo sendo arrastado sobre a pagina: a fenda chama */
.drive.over { box-shadow: 0 0 0 var(--hairline) var(--ink), 0 0 calc(var(--led) * 2) var(--ink-glow); }
@keyframes driveBlink { 50% { opacity: 0.2; } }

/* ---------------------------------------------------------------- keycap */
.key {
	position: relative; appearance: none; border: 0; margin: 0; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--key) * 0.17);
	min-block-size: var(--key); padding: 0 calc(var(--key) * 0.32);
	font-size: var(--text-xs); font-weight: 600; line-height: 1; color: var(--legend); white-space: nowrap;
	border-radius: var(--r-cap);
	background: radial-gradient(130% 95% at 50% 12%, var(--cap-top), var(--cap) 72%);
	box-shadow:
		inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.1),
		inset 0 calc(var(--cap-depth) * -0.55) calc(var(--cap-depth) * 0.45) rgba(0, 0, 0, 0.35),
		0 var(--cap-depth) 0 var(--cap-edge),
		0 calc(var(--cap-depth) + var(--shade) * 0.7) calc(var(--shade) * 2) rgba(0, 0, 0, 0.55);
	cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
	user-select: none; -webkit-user-select: none;
	transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), color var(--motion) ease;
}
.key:hover { color: #fff; }
.key:active, .key.is-down, .key[aria-checked="true"], .key[aria-pressed="true"], .key[aria-selected="true"] {
	transform: translateY(var(--cap-press));
	box-shadow:
		inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.06),
		inset 0 calc(var(--cap-depth) * -0.35) calc(var(--cap-depth) * 0.45) rgba(0, 0, 0, 0.35),
		0 calc(var(--cap-depth) - var(--cap-press)) 0 var(--cap-edge),
		0 calc(var(--shade) * 0.45) var(--shade) rgba(0, 0, 0, 0.55);
}
.key:disabled { color: var(--legend-dim); cursor: default; }
.key:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: calc(var(--cap-depth) * 1.5); }
.key-sm { min-block-size: var(--key-sm); min-inline-size: var(--key-sm); padding: 0; }
/* ---------------------------------------------------------------- icones (sprite #i-*)
   Neumorph: o icone e do mesmo material da tecla, em relevo. Luz de cima-esquerda: realce
   claro no alto, sombra macia embaixo-direita. Aceso = tinta com brilho, como o LED. */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ic {
	inline-size: var(--icon); block-size: var(--icon); flex: none; overflow: visible;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	color: #d9d4c8;
	filter:
		drop-shadow(calc(var(--hairline) * -0.7) calc(var(--hairline) * -0.7) calc(var(--hairline) * 0.6) rgba(255, 255, 255, 0.16))
		drop-shadow(calc(var(--hairline) * 1.2) calc(var(--hairline) * 1.4) calc(var(--hairline) * 1.2) rgba(0, 0, 0, 0.85));
	transition: color var(--motion) ease, filter var(--motion) ease;
}
.key[aria-checked="true"] .ic, .key[aria-pressed="true"] .ic, .key[aria-selected="true"] .ic {
	color: var(--ink);
	filter: drop-shadow(0 0 calc(var(--led) * 0.6) var(--ink-glow)) drop-shadow(calc(var(--hairline) * 1.2) calc(var(--hairline) * 1.4) calc(var(--hairline) * 1.2) rgba(0, 0, 0, 0.85));
}
[data-rec][aria-pressed="true"] .ic { color: var(--rec); filter: drop-shadow(0 0 calc(var(--led) * 0.6) var(--rec)); }
/* gotas de tinta: a propria cor e a legenda */
.ic.drop-cyan { color: #40b3ff; }
.ic.drop-amber { color: #ff8c2e; }
.ic.drop-ink { color: var(--ink); }
/* selo dos rotulos do painel: disco extrudado do chassi (sombra dupla, clara e escura) */
.badge {
	display: inline-grid; place-items: center; flex: none;
	inline-size: calc(var(--key) * 0.74); block-size: calc(var(--key) * 0.74); border-radius: 50%;
	background: linear-gradient(145deg, #27272b, #151517);
	box-shadow:
		calc(var(--shade) * -0.4) calc(var(--shade) * -0.4) calc(var(--shade) * 0.9) rgba(255, 255, 255, 0.05),
		calc(var(--shade) * 0.5) calc(var(--shade) * 0.5) calc(var(--shade) * 1.1) rgba(0, 0, 0, 0.8),
		inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.06);
}
.badge .ic { inline-size: calc(var(--key) * 0.4); block-size: calc(var(--key) * 0.4); color: var(--legend-dim); }
.key-wide { justify-content: space-between; }

/* LED */
.led {
	inline-size: var(--led); block-size: var(--led); border-radius: 50%; flex: none;
	background: var(--led-off);
	box-shadow: inset 0 calc(var(--led) * 0.15) calc(var(--led) * 0.3) rgba(0, 0, 0, 0.7);
	transition: background var(--motion) ease, box-shadow var(--motion) ease;
}
.led.on, [aria-checked="true"] .led, [aria-pressed="true"] .led {
	background: var(--ink);
	box-shadow: 0 0 calc(var(--led) * 0.8) var(--ink), 0 0 calc(var(--led) * 2) var(--ink-glow);
}
.led.rec.on { background: var(--rec); box-shadow: 0 0 calc(var(--led) * 0.8) var(--rec), 0 0 calc(var(--led) * 2.2) color-mix(in srgb, var(--rec) 55%, transparent); animation: recBlink 1s steps(2, start) infinite; }
@keyframes recBlink { 50% { opacity: 0.35; } }
/* teste de LEDs ao ligar: todos acendem em cascata */
.deck.powering .led { animation: ledTest 520ms ease-out var(--d, 0ms) both; }
@keyframes ledTest { 0%, 100% { } 35% { background: var(--ink); box-shadow: 0 0 calc(var(--led) * 0.8) var(--ink); } }

/* ---------------------------------------------------------------- LCD */
.lcd {
	position: relative; border-radius: var(--r-well); display: grid; place-items: center; min-inline-size: 0; overflow: hidden;
	padding: calc(var(--lcd-dot) * 4) calc(var(--lcd-dot) * 4);
	background: var(--well);
	box-shadow:
		inset 0 calc(var(--shade) * 0.8) calc(var(--shade) * 2) rgba(0, 0, 0, 0.9),
		inset 0 0 0 var(--hairline) rgba(0, 0, 0, 0.8),
		0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
}
.lcd canvas { display: block; filter: drop-shadow(0 0 calc(var(--lcd-dot) * 1.3) var(--ink-glow)); }

/* ---------------------------------------------------------------- linhas label <-> controle */
.row {
	display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center;
	gap: var(--space-2); min-block-size: calc(var(--key) + var(--space-1)); margin-block-start: var(--space-2);
}
.row-stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.lbl { display: inline-flex; align-items: center; gap: calc(var(--key) * 0.22); font-size: var(--text-s); font-weight: 500; color: var(--engrave); }
/* lente: o selo ao lado do banco de teclas, que ocupa o resto da linha */
.row-lens .lens-keys { grid-column: 2 / -1; }
/* switches: selo sobre o switch, os quatro numa linha (2x2 so em container bem estreito) */
.row-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block-start: var(--space-3); }
.field { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.row-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-block-start: var(--space-3); padding-block-end: var(--cap-depth); }

.readout {
	min-inline-size: 6ch; box-sizing: border-box; padding: calc(var(--key) * 0.2) calc(var(--key) * 0.22);
	border-radius: var(--r-cap); background: var(--well); color: var(--ink);
	font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end;
	box-shadow: inset 0 calc(var(--shade) * 0.4) var(--shade) rgba(0, 0, 0, 0.85), 0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------- fader (rate) */
.fader { position: relative; block-size: calc(var(--key) * 1.12); min-inline-size: calc(var(--key) * 2.5); touch-action: none; cursor: pointer; }
/* medidor: a quantidade de LEDs sai do comprimento do fader (deck.js, via --led-pitch) */
.fader-leds { position: absolute; inset-inline: 0; inset-block-start: calc(var(--key) * 0.06); block-size: calc(var(--key) * 0.15); display: flex; gap: calc(var(--led-pitch) * 0.28); }
.fader-leds i { flex: 1; border-radius: calc(var(--led) * 0.2); background: var(--led-off); transition: background var(--motion-fast) linear, box-shadow var(--motion-fast) linear; }
.fader-leds i.on { background: var(--ink); box-shadow: 0 0 calc(var(--led) * 0.8) var(--ink-glow); }
.fader-groove {
	position: absolute; inset-inline: 0; inset-block-start: calc(var(--key) * 0.64); block-size: calc(var(--key) * 0.15);
	border-radius: 1em; background: #050606;
	box-shadow: inset 0 calc(var(--shade) * 0.4) calc(var(--shade) * 0.6) #000, 0 var(--hairline) 0 rgba(255, 255, 255, 0.06);
}
.fader-detent { position: absolute; inset-block: calc(var(--key) * -0.13); inline-size: var(--hairline); background: var(--engrave); inset-inline-start: 30%; }
.fader-cap {
	position: absolute; inset-block-start: calc(var(--key) * 0.33); inset-inline-start: 30%;
	inline-size: calc(var(--key) * 0.5); block-size: calc(var(--key) * 0.76); margin-inline-start: calc(var(--key) * -0.25);
	border-radius: calc(var(--key) * 0.12);
	background: linear-gradient(to bottom, #45454b, #2c2c30 55%, #26262a);
	box-shadow: inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.14), 0 calc(var(--cap-depth) * 0.8) 0 var(--cap-edge), 0 calc(var(--shade) * 1.6) calc(var(--shade) * 2.6) rgba(0, 0, 0, 0.7);
	cursor: grab; outline: none;
}
.fader-cap::after { content: ""; position: absolute; inset-inline: 18%; inset-block-start: 50%; block-size: 7%; translate: 0 -50%; border-radius: 1em; background: var(--legend); opacity: 0.8; }
.fader.dragging .fader-cap { cursor: grabbing; }
.fader-cap:focus-visible { box-shadow: 0 0 0 var(--hairline) var(--ink), 0 calc(var(--cap-depth) * 0.8) 0 var(--cap-edge); }

/* ---------------------------------------------------------------- jog (encoder do rate, passo fino)
   Aro serrilhado gira junto (conic a partir de --jog-a); a luz da face fica parada, como
   num knob de verdade. A covinha do dedo e o indicador. Tudo proporcional a --jog. */
.jog {
	--jog-a: 0deg;
	position: relative; flex: none; inline-size: var(--jog); block-size: var(--jog); border-radius: 50%;
	box-sizing: border-box; padding: calc(var(--jog) * 0.07);
	background: var(--well);
	box-shadow: inset 0 calc(var(--shade) * 0.4) var(--shade) rgba(0, 0, 0, 0.9), 0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
	cursor: grab; touch-action: none; outline: none;
	user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.jog.dragging { cursor: grabbing; }
.jog-face {
	position: relative; display: block; block-size: 100%; border-radius: 50%;
	background:
		radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.09), transparent 42%),
		radial-gradient(circle closest-side, var(--cap-top), var(--cap) 76%, transparent 78%),
		repeating-conic-gradient(from var(--jog-a), #3a3a40 0 4deg, #18181b 4deg 8deg);
	box-shadow:
		inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.12),
		0 calc(var(--cap-depth) * 0.8) 0 var(--cap-edge),
		0 calc(var(--shade) * 1.2) calc(var(--shade) * 2) rgba(0, 0, 0, 0.6);
}
.jog-dimple { position: absolute; inset: 0; border-radius: 50%; rotate: var(--jog-a); }
.jog-dimple::after {
	content: ""; position: absolute; inset-block-start: 17%; inset-inline-start: 50%; translate: -50% 0;
	inline-size: 26%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 50% 70%, var(--cap-top), var(--cap) 70%);
	box-shadow: inset 0 calc(var(--shade) * 0.35) calc(var(--shade) * 0.5) rgba(0, 0, 0, 0.75), 0 var(--hairline) 0 rgba(255, 255, 255, 0.08);
}
.jog.dragging .jog-dimple::after, .jog.ticked .jog-dimple::after { box-shadow: inset 0 calc(var(--shade) * 0.35) calc(var(--shade) * 0.5) rgba(0, 0, 0, 0.75), 0 0 calc(var(--led) * 0.9) var(--ink-glow); }
.jog:focus-visible { box-shadow: 0 0 0 var(--hairline) var(--ink), inset 0 calc(var(--shade) * 0.4) var(--shade) rgba(0, 0, 0, 0.9); }

/* ---------------------------------------------------------------- grupos de teclas */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); }
/* 4 teclas: uma fileira quando cabe, 2x2 quando nao (nunca 3+1 com uma orfa) */
.lens-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding-block-end: var(--cap-depth); }
@container deck (width < 12em) { .lens-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tecla de lente (painel): icone e LED em cima, nome e atalho embaixo */
/* so icone: o texto de cada tecla/rotulo fica no DOM (nome acessivel e tooltip), fora da tela.
   No toque o LCD diz o que cada tecla fez. */
.name {
	position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* LED no canto da tecla (como os botoes do MC-500): a face fica so com o icone */
.key > .led {
	position: absolute; inset-block-start: calc(var(--key) * 0.13); inset-inline-end: calc(var(--key) * 0.13);
	inline-size: calc(var(--led) * 0.75); block-size: calc(var(--led) * 0.75);
}
.key-lens { min-block-size: calc(var(--key) * 1.2); }
.key-lens .ic { inline-size: calc(var(--key) * 0.46); block-size: calc(var(--key) * 0.46); }
.key-wide { justify-content: center; }
.stepper { display: grid; grid-template-columns: auto minmax(5ch, 1fr) auto; gap: var(--space-1); align-items: center; }
.stepper .readout { min-inline-size: 0; text-align: center; }
.row > .stepper { justify-self: start; inline-size: min(100%, calc(var(--key) * 5)); }

/* ---------------------------------------------------------------- squishy switch (escuro) */
.switch {
	--sw-pad: calc(var(--key) * 0.1);
	--sw-thumb: calc(var(--key) * 0.53);
	--sw-on: calc(var(--key) * 0.55);
	position: relative; flex: none; appearance: none; border: 0; margin: 0; box-sizing: border-box;
	padding: var(--sw-pad); inline-size: calc(var(--key) * 1.28); block-size: calc(var(--key) * 0.73); border-radius: 1em;
	background: var(--well); cursor: pointer; display: flex; align-items: center;
	box-shadow: inset 0 calc(var(--shade) * 0.4) var(--shade) rgba(0, 0, 0, 0.9), 0 var(--hairline) 0 rgba(255, 255, 255, 0.05);
	transition: background 0.35s linear; -webkit-tap-highlight-color: transparent;
}
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--ink) 38%, var(--well)); }
.switch:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: calc(var(--cap-depth) * 1.5); }
.switch .thumb {
	display: block; inline-size: var(--sw-thumb); block-size: var(--sw-thumb); border-radius: 50%; transform-origin: left;
	background: radial-gradient(circle at 50% 30%, #f3efe6, #cfc9bc 70%);
	box-shadow: 0 calc(var(--shade) * 0.5) calc(var(--shade) * 0.8) rgba(0, 0, 0, 0.6), inset 0 calc(var(--shade) * -0.35) calc(var(--shade) * 0.6) rgba(0, 0, 0, 0.25);
}
.switch[aria-checked="true"] .thumb { transform: translateX(var(--sw-on)); }
/* o "squish" (referencia Squishy Switch): estica/achata no meio do curso e quica no fim.
   Proporcoes derivadas do thumb, nao numeros absolutos. */
.switch.moved .thumb { animation: squishOut 0.2s cubic-bezier(0.75, 0, 1, 1), bounceOut 0.2s cubic-bezier(0, 0, 0.3, 1.5) 0.2s; animation-fill-mode: forwards; }
.switch.moved[aria-checked="true"] .thumb { animation-name: squishIn, bounceIn; }
@keyframes squishIn { from { border-radius: 50%; transform: translateX(0) scale(1); } to { border-radius: 32% / 68%; transform: translateX(calc(var(--sw-on) * 0.35)) scale(1.5, 0.72); } }
@keyframes bounceIn { from { border-radius: 32% / 68%; transform: translateX(calc(var(--sw-on) * 0.35)) scale(1.5, 0.72); } to { border-radius: 50%; transform: translateX(var(--sw-on)) scale(1); } }
@keyframes squishOut { from { border-radius: 50%; transform: translateX(var(--sw-on)) scale(1); } to { border-radius: 32% / 68%; transform: translateX(calc(var(--sw-on) * 0.08)) scale(1.5, 0.72); } }
@keyframes bounceOut { from { border-radius: 32% / 68%; transform: translateX(calc(var(--sw-on) * 0.08)) scale(1.5, 0.72); } to { border-radius: 50%; transform: translateX(0) scale(1); } }

/* ---------------------------------------------------------------- abas */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); margin-block: var(--space-3) var(--space-1); padding-block-end: var(--cap-depth); }
.tab { min-block-size: calc(var(--key) * 0.85); font-weight: 500; }
.tab[aria-selected="true"] { color: var(--ink); }

/* colapsado (painel): fica so o cabecalho, o LCD e o fader */
.deck-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--motion-slow) var(--ease-out); }
.deck-body > .inner { min-block-size: 0; overflow: hidden; }
.deck.collapsed .deck-body { grid-template-rows: 0fr; }
#deck-collapse svg { transition: transform var(--motion) var(--ease-out); }
.deck.collapsed #deck-collapse svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- about */
.about p { margin: var(--space-2) 0 0; font-size: var(--text-s); line-height: 1.5; color: var(--legend-dim); overflow-wrap: anywhere; }
.about .slogan { color: var(--legend); font-size: var(--text-m); }
.about a { color: var(--legend); text-decoration: none; border-block-end: var(--hairline) solid var(--engrave); }
.about a:hover { color: var(--ink); border-color: var(--ink); }
.about a:focus-visible { outline: var(--hairline) solid var(--ink); outline-offset: calc(var(--cap-depth) * 1.5); }
.keymap { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-2); margin-block-start: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--legend-dim); }
kbd {
	display: inline-grid; place-items: center; min-inline-size: 1.9em; block-size: 1.9em; padding-inline: 0.45em; box-sizing: border-box;
	font: 600 0.9em/1 var(--font-ui); color: var(--legend); border-radius: 0.35em;
	background: radial-gradient(130% 95% at 50% 12%, var(--cap-top), var(--cap) 72%);
	box-shadow: inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.1), 0 0.16em 0 var(--cap-edge);
}
.keymap span > kbd + kbd { margin-inline-start: 0.25em; }

/* tecla de layout: mostra o layout p/ onde ela leva */
/* som: mudo / alto-falante com ondas, os dois na mesma celula */
/* calmo: a tecla acende em ambar quente, nao na tinta, quando ligada */
#deck-calm[aria-pressed="true"] .ic { color: #ffb070; filter: drop-shadow(0 0 calc(var(--led) * 0.5) rgba(255, 176, 112, 0.45)); }
#deck-sound { display: inline-grid; place-items: center; }
#deck-sound .ic { grid-area: 1 / 1; transition: opacity var(--motion) ease; }
#deck-sound .i-on, #deck-sound[aria-pressed="true"] .i-off { opacity: 0; }
#deck-sound[aria-pressed="true"] .i-on { opacity: 1; }
#deck-mode { display: inline-grid; place-items: center; }
#deck-mode .ic { grid-area: 1 / 1; transition: opacity var(--motion) ease; }
#deck-mode .i-panel { opacity: 0; }
.deck.strip #deck-mode .i-panel { opacity: 1; }
.deck.strip #deck-mode .i-strip { opacity: 0; }

/* acoes do modo faixa: so existem no modo faixa */
.strip-actions { display: none; }
/* funcao normal (k1) e segunda funcao (k2) ocupam a mesma celula do grid: a tecla tem a
   largura da maior e nao pula quando o SHIFT troca icone e legenda */
.strip-actions .k2 { visibility: hidden; color: var(--ink); }
.deck.shifted .strip-actions [data-alt] .k1 { visibility: hidden; }
.deck.shifted .strip-actions [data-alt] .k2 { visibility: visible; }
.deck.shifted .strip-actions [data-alt] .ic.k2 { filter: drop-shadow(0 0 calc(var(--led) * 0.6) var(--ink-glow)); }
.deck.shifted #act-shift { color: var(--ink); }

#deck-handle {
	position: fixed; z-index: 10;
	inset-inline-start: max(var(--edge-pad), env(safe-area-inset-left));
	inset-block-end: max(var(--edge-pad), env(safe-area-inset-bottom));
}

/* painel: quando a janela nao comporta o painel + respiro p/ a obra, ele deixa de flutuar no
   canto e vira uma folha na largura toda. Mudanca de composicao (docking), nao ajuste. */
@media (width < 36rem) {
	.deck:not(.strip) { inset-inline-end: max(var(--edge-pad), env(safe-area-inset-right)); inline-size: auto; }
}

/* ================================================================ DECK (modo faixa, formato Roland)
   Uma fileira de teclas apoiada no rodape. Nenhuma altura declarada: ela e a de uma tecla,
   e so cresce se o conteudo pedir. Os grupos (drive, LCD, rate, lentes, acoes) quebram de
   linha sozinhos por flex-wrap quando falta espaco: quebra intrinseca, nao breakpoint.
   Os wrappers do painel viram display:contents p/ as mesmas teclas virarem itens da faixa. */
.deck.strip {
	container: deck / inline-size; /* largura vem do espaco, nao do conteudo: pode ser container */
	inset-inline: max(var(--edge-pad), env(safe-area-inset-left)) max(var(--edge-pad), env(safe-area-inset-right));
	/* ocupa o espaco que tem (ate --strip-max); so LCD e fader crescem, teclas ficam no natural */
	inline-size: auto; max-inline-size: var(--strip-max); margin-inline: auto;
	max-block-size: none; overflow: visible;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--cap-depth));
}
/* teclas da faixa mais justas: mesmo --key, menos ar lateral */
.deck.strip .key:not(.key-sm) { padding-inline: calc(var(--key) * 0.24); }
.deck.strip .deck-head,
.deck.strip .row-rate,
.deck.strip .deck-body,
.deck.strip .deck-body > .inner,
.deck.strip #pane-controls,
.deck.strip .row-lens { display: contents; }
.deck.strip .deck-title,
.deck.strip #deck-collapse,
.deck.strip .row-rate > .lbl,
.deck.strip .tabs,
.deck.strip #pane-about,
.deck.strip .row-lens > .lbl,
.deck.strip #pane-controls > :not(.row-lens) { display: none !important; }
.deck.strip .deck-logo { order: 0; }
.deck.strip .drive { order: 1; margin-inline-start: 0; flex: 0 0 calc(var(--key) * 1.8); }
/* LCD e fader na faixa: base = minimo util (~11 colunas / ~3 teclas) e crescem no que sobra;
   a fileira so quebra quando nem o minimo cabe */
.deck.strip .lcd { order: 2; flex: 2 1 calc(var(--lcd-dot) * 70); min-inline-size: calc(var(--lcd-dot) * 70); overflow: hidden; }
.deck.strip .fader { order: 3; flex: 1 1 calc(var(--key) * 3); }
.deck.strip .jog { order: 3; } /* colado no fader: mesmo parametro, grosso e fino */
.deck.strip .lens-keys { order: 4; flex: 0 1 auto; display: flex; flex-wrap: wrap; }
/* teclas da faixa: icone sobre a legenda, LED no canto (como os botoes do MC-500).
   Mais estreitas que icone + legenda lado a lado, e a legenda continua escrita. */
.deck.strip .key-lens, .deck.strip .strip-actions .key {
	display: inline-grid; grid-template-areas: "ic"; place-items: center;
	flex: 1 1 auto; min-inline-size: calc(var(--key) * 1.15); min-block-size: var(--key); padding: 0 calc(var(--key) * 0.3);
}
.deck.strip .key-lens .ic, .deck.strip .strip-actions .ic { grid-area: ic; inline-size: calc(var(--key) * 0.44); block-size: calc(var(--key) * 0.44); }
.deck.strip .strip-actions { order: 5; display: flex; flex-wrap: wrap; gap: var(--space-1); padding-block-end: var(--cap-depth); }
/* teclas de sistema junto do drive (como no MC-500): se algo quebrar, quebra no fim */
.deck.strip .deck-actions { order: 1; padding-block-end: var(--cap-depth); }
.deck.strip .lens-keys, .deck.strip .strip-actions { padding-block-end: var(--cap-depth); }
/* faixa num container estreito: a composicao muda (console empilhado), nao so os pixels.
   drive + teclas do deck na 1a linha, LCD e fader com linha propria, lentes 2x2, acoes distribuidas. */
@container deck (width < 40rem) {
	.deck.strip { justify-content: stretch; }
	.deck.strip .drive { flex: 1 1 auto; }
	.deck.strip .lcd { flex-basis: 100%; }
	/* fader e jog dividem a linha: o fader fica com tudo menos o jog */
	.deck.strip .fader { flex-basis: calc(100% - var(--jog) - var(--space-2)); }
	.deck.strip .lens-keys { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* 6 teclas de acao numa linha cheia */
	.deck.strip .strip-actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- toque
   Sem teclado fisico, atalho nao ensina nada: somem as dicas de tecla e o mapa do teclado,
   entra uma linha sobre o que tocar. Adaptacao ao input, nao ao device. */
.touch-note { display: none; }
@media (hover: none) and (pointer: coarse) {
	.keymap { display: none; }
	.touch-note { display: block; }
}

/* ---------------------------------------------------------------- calmo e preferencias
   Calmo (calm.js) vai alem do reduced-motion: nenhum LED pisca, nada acende em cascata. */
body.calm .led.rec.on, body.calm .deck.loading .drive .led, body.calm .drive.busy .led,
body.calm .drive.reading .led, body.calm .deck.powering .led { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.deck, .deck-body, .key, .switch, .fader-leds i, .led { transition: none !important; }
	.switch.moved .thumb, .deck.powering .led, .led.rec.on, .deck.loading .drive .led, .drive.busy .led, .drive.reading .led { animation: none !important; }
}
@media (forced-colors: active) {
	.key, .switch, .readout, .lcd, .drive, .jog { border: var(--hairline) solid CanvasText; }
	.key[aria-checked="true"], .key[aria-pressed="true"], .switch[aria-checked="true"] { outline: calc(var(--hairline) * 2) solid Highlight; }
}