/* MT-LAB / 16 — photoreal hardware pass. Layout and palette intentionally preserved. */

body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    radial-gradient(120% 72% at 50% -8%, #384044 0, #171c1f 48%, #0d1113 100%);
}

.topbar,
.workspace,
.input-column,
.process-bar,
.companion-panel {
  background-blend-mode: soft-light, normal;
}

.topbar {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, rgba(30,38,42,.035) 1px 2px, transparent 2px 5px),
    linear-gradient(162deg, #fafbfb 0%, #d9dddf 22%, #aab2b6 62%, #e6e9ea 100%);
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -1px 0 #656e73,
    inset 0 -6px 12px rgba(25,31,34,.22),
    0 2px 2px rgba(0,0,0,.65),
    0 12px 25px rgba(0,0,0,.42);
}

.brand-mark {
  border-color: #4f595e;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), transparent 38%),
    linear-gradient(#e7ebed, #90999e);
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 1px 0 #fff,
    0 4px 7px rgba(0,0,0,.45);
}

.workspace {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, rgba(30,36,39,.045) 1px 2px, transparent 2px 5px),
    linear-gradient(135deg, #f5f7f7 0%, #b4bbbe 45%, #899398 65%, #dfe3e4 100%);
  box-shadow:
    0 28px 62px rgba(0,0,0,.7),
    0 3px 2px rgba(0,0,0,.72),
    inset 0 2px 1px #fff,
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 -7px 12px rgba(19,25,28,.35);
}

/* Four functional chassis fasteners, rendered as recessed hex screws. */
.workspace::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  pointer-events: none;
  background:
    radial-gradient(circle at 9px 9px, #202629 0 2px, #778186 2.5px 4px, #d8dddf 4.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #202629 0 2px, #778186 2.5px 4px, #d8dddf 4.5px 5px, transparent 5.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #202629 0 2px, #778186 2.5px 4px, #d8dddf 4.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #202629 0 2px, #778186 2.5px 4px, #d8dddf 4.5px 5px, transparent 5.5px);
}

.input-column {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.11) 0 1px, rgba(34,42,46,.045) 1px 2px, transparent 2px 5px),
    linear-gradient(150deg, #f0f2f2 0%, #c5cbce 35%, #929ca1 76%, #d7dcde 100%);
  box-shadow:
    inset 1px 2px 1px #fff,
    inset -1px -3px 6px rgba(18,23,26,.34),
    2px 0 3px rgba(0,0,0,.48),
    0 8px 16px rgba(0,0,0,.4);
}

.dropzone {
  border-style: solid;
  border-color: #4a555a;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    #090d0f;
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 #f7f8f8,
    0 5px 8px rgba(0,0,0,.3);
}

.drop-icon {
  background:
    radial-gradient(circle at 36% 28%, #8a9499 0, #4e585d 17%, #202629 49%, #080b0c 76%);
  border-color: #1d2326;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.48),
    inset 0 -5px 7px rgba(0,0,0,.84),
    0 0 0 2px #707a7f,
    0 0 0 3px #242b2e,
    0 7px 11px rgba(0,0,0,.75);
  text-shadow: 0 1px 1px #fff8, 0 0 7px currentColor;
}

.stem-column {
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.82),
    inset 2px 0 1px rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.65);
}

.section-head,
.daw-projectbar,
.main-transport,
.dsp-profile {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 5px rgba(0,0,0,.5);
}

.stem-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -2px 3px rgba(0,0,0,.42);
}

.track-waveform,
.result-waveform {
  border-radius: 2px;
  box-shadow:
    inset 0 5px 12px rgba(0,0,0,.72),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 1px 0 rgba(255,255,255,.07),
    0 2px 3px rgba(0,0,0,.35);
}

/* Mechanical push buttons: top highlight, beveled face and grounded shadow. */
.selection-actions button,
.profile-options button,
.main-transport button,
.timeline-zoom button,
.track-remove,
.result-grid button,
.download-mix,
.audition-switch button,
.bundle-export button {
  position: relative;
  border-radius: 4px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(#3e484d 0%, #252c30 48%, #151a1d 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -2px 3px rgba(0,0,0,.58),
    0 1px 0 #07090a,
    0 4px 6px rgba(0,0,0,.48) !important;
  transform: translateY(-1px);
}

.selection-actions button:active,
.profile-options button:active,
.main-transport button:active,
.timeline-zoom button:active,
.result-grid button:active,
.download-mix:active,
.audition-switch button:active,
.bundle-export button:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.68), 0 1px 1px rgba(0,0,0,.5) !important;
}

.main-transport button:first-child,
.profile-options button.active,
.daw-mixer button.active,
.bundle-export button {
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(#dbff9b 0%, #aae943 48%, #6d9c20 100%) !important;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -3px 4px rgba(50,78,7,.55),
    0 1px 0 #344a18,
    0 4px 7px rgba(0,0,0,.58),
    0 0 9px rgba(184,255,61,.22) !important;
}

.process-button {
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(#ddffa0 0%, #aae943 50%, #70a122 100%);
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -4px 6px rgba(51,77,10,.5),
    0 2px 0 #40581f,
    0 7px 12px rgba(0,0,0,.52),
    0 0 12px rgba(184,255,61,.24);
}

.process-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 4px 7px rgba(42,67,7,.55), 0 1px 2px #0008; }

.engine-picker select,
.quality-row select {
  border-color: #252d31;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%),
    #0b1012;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.88),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 1px 0 rgba(255,255,255,.7);
}

/* Realistic recessed fader tracks and machined slider caps. */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #060809;
  border-radius: 5px;
  background: linear-gradient(#050708, #20272a 58%, #080a0b);
  box-shadow: inset 0 2px 3px #000, 0 1px 0 rgba(255,255,255,.16);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 22px;
  margin-top: -9px;
  border: 1px solid #252c30;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 43%, #394247 43% 57%, transparent 57%),
    linear-gradient(145deg, #f2f4f4 0%, #adb5b9 42%, #606a6f 74%, #d9dddf 100%);
  box-shadow: inset 1px 1px 1px #fff, inset -1px -2px 2px #434b4f, 0 3px 5px rgba(0,0,0,.72);
}

input[type="range"]::-moz-range-track {
  height: 5px;
  border: 1px solid #060809;
  border-radius: 5px;
  background: linear-gradient(#050708, #20272a 58%, #080a0b);
  box-shadow: inset 0 2px 3px #000, 0 1px 0 rgba(255,255,255,.16);
}

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 22px;
  border: 1px solid #252c30;
  border-radius: 3px;
  background: linear-gradient(145deg, #f2f4f4, #8e989d 58%, #d9dddf);
  box-shadow: inset 1px 1px 1px #fff, inset -1px -2px 2px #434b4f, 0 3px 5px rgba(0,0,0,.72);
}

.process-bar {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, rgba(29,36,39,.04) 1px 2px, transparent 2px 5px),
    linear-gradient(148deg, #edf0f1 0%, #bdc4c7 44%, #8d979c 76%, #d5dadd 100%);
  box-shadow:
    0 -9px 24px rgba(0,0,0,.47),
    0 8px 15px rgba(0,0,0,.46),
    inset 0 2px 1px #fff,
    inset 0 -4px 7px rgba(25,31,34,.3);
}

.channel-badge {
  box-shadow: inset 0 1px #fff, inset 0 -2px 3px rgba(45,72,7,.45), 0 3px 6px rgba(0,0,0,.48);
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none !important; }
}

/* Futuristic studio-hardware layer: precise optics, titanium and functional HUD accents. */
:root {
  --future-cyan: #57f1ed;
  --future-cyan-soft: rgba(87,241,237,.16);
  --future-glass: rgba(9,18,21,.78);
}

.shell {
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.28));
}

.topbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(34%, 390px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--future-cyan), transparent);
  box-shadow: 0 0 8px rgba(87,241,237,.48);
}

.module-id {
  padding: 8px 16px;
  border: 1px solid rgba(44,57,62,.3);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(55,67,72,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.2);
}

.intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgba(87,241,237,.035) 50%, transparent 50.05%),
    linear-gradient(0deg, transparent 0 49.7%, rgba(255,255,255,.018) 50%, transparent 50.3%),
    linear-gradient(180deg, #161b1eaa, #0e1214cc);
  background-size: 72px 72px, 72px 72px, auto;
  box-shadow: inset 0 -1px 0 rgba(87,241,237,.13);
}

.intro::after {
  content: "LOCAL NEURAL AUDIO SYSTEM / PHASE LOCKED";
  position: absolute;
  right: 22px;
  top: 14px;
  color: rgba(87,241,237,.48);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .19em;
}

.intro h1 em {
  color: #9aa8ac;
  text-shadow: 0 0 18px rgba(87,241,237,.09);
}

.stem-column {
  background:
    linear-gradient(135deg, rgba(87,241,237,.025), transparent 38%),
    var(--screen);
  border-color: #405158;
}

.section-head {
  border-bottom-color: rgba(87,241,237,.18);
}

.stem-column .section-label span,
.results-panel .section-label span {
  color: var(--future-cyan);
  text-shadow: 0 0 7px rgba(87,241,237,.45);
}

.daw-projectbar {
  background:
    linear-gradient(90deg, rgba(87,241,237,.035), transparent 22%),
    #0a0f11;
}

.arrangement-viewport {
  background-image:
    linear-gradient(rgba(87,241,237,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,241,237,.022) 1px, transparent 1px);
  background-size: 24px 24px;
}

.stem-card.active {
  box-shadow:
    inset 3px 0 8px color-mix(in srgb, var(--stem) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -2px 3px rgba(0,0,0,.44);
}

.track-waveform::after,
.result-waveform::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%, transparent 72%, rgba(87,241,237,.025));
  border-top: 1px solid rgba(255,255,255,.035);
}

.main-transport strong,
.audit-metrics strong {
  color: var(--future-cyan) !important;
  text-shadow: 0 0 8px rgba(87,241,237,.32);
}

.timeline-ruler {
  background:
    repeating-linear-gradient(90deg, rgba(87,241,237,.12) 0 1px, transparent 1px 60px),
    linear-gradient(180deg, rgba(87,241,237,.025), transparent);
}

.stem-grid::after {
  background: var(--future-cyan);
  box-shadow: 0 0 9px rgba(87,241,237,.68);
}

.channel-badge,
.process-button,
.profile-options button.active,
.daw-mixer button.active,
.main-transport button:first-child,
.bundle-export button {
  border-radius: 2px !important;
}

input[type="range"]::-webkit-slider-thumb {
  background:
    linear-gradient(90deg, transparent 41%, var(--future-cyan) 41% 59%, transparent 59%),
    linear-gradient(145deg, #f2f4f4 0%, #adb5b9 42%, #606a6f 74%, #d9dddf 100%);
  box-shadow:
    inset 1px 1px 1px #fff,
    inset -1px -2px 2px #434b4f,
    0 3px 5px rgba(0,0,0,.72),
    0 0 7px rgba(87,241,237,.22);
}

input[type="range"]::-moz-range-thumb {
  background:
    linear-gradient(90deg, transparent 41%, var(--future-cyan) 41% 59%, transparent 59%),
    linear-gradient(145deg, #f2f4f4, #8e989d 58%, #d9dddf);
}

.process-bar {
  border-top-color: #fff;
}

.process-data > div {
  position: relative;
}

.process-data > div::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--future-cyan-soft), transparent);
}

@media (max-width: 560px) {
  .intro::after { display: none; }
  .module-id { padding: 7px 9px; }
}

/* V2 — clearly visible futuristic console evolution. */
.shell {
  padding-top: 22px;
  perspective: 1400px;
}

.topbar {
  min-height: 72px;
  padding-inline: 28px;
  border-radius: 14px 14px 3px 3px;
  border: 1px solid #667277;
  border-top-color: #fff;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 11px;
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -4px 5px #4d575c,
    0 0 0 1px #252c2f,
    0 6px 10px #0008,
    0 0 13px rgba(87,241,237,.17);
}

.engine-state {
  padding: 9px 12px;
  border: 1px solid #667176;
  border-radius: 3px;
  background: linear-gradient(#dbe0e2, #919b9f);
  box-shadow: inset 0 1px #fff, inset 0 -2px 3px #566065, 0 3px 6px #0005;
}

.intro {
  min-height: 230px;
  padding: 36px 34px 32px;
  border: 1px solid #3f4b50;
  border-top: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -18px 38px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.32);
}

.intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(transparent, var(--future-cyan) 22% 78%, transparent);
  box-shadow: 0 0 18px rgba(87,241,237,.5);
}

.intro h1 {
  max-width: 980px;
  letter-spacing: -.06em;
  text-shadow: 0 8px 18px rgba(0,0,0,.55);
}

.intro h1 em {
  background: linear-gradient(90deg, #f1f6f6, #7f9398 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro-copy {
  padding: 18px 20px;
  border: 1px solid #334247;
  border-left: 2px solid var(--future-cyan);
  border-radius: 4px;
  background: rgba(4,10,12,.48);
  box-shadow: inset 0 0 18px #0008, 0 7px 15px #0005;
}

.workspace {
  margin-top: 12px;
  padding: 18px;
  border-width: 2px;
  border-radius: 16px 16px 4px 4px;
  transform: translateZ(0);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
}

.workspace::after {
  inset: 10px;
  border-color: rgba(32,42,46,.55);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.input-column {
  padding: 23px;
  border-radius: 10px 0 0 10px;
  border-width: 2px 1px 2px 2px;
}

.input-column::after {
  content: "NEURAL INPUT";
  position: absolute;
  left: 23px;
  bottom: 15px;
  color: rgba(38,48,53,.38);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .22em;
}

.dropzone {
  min-height: 320px;
  border: 2px solid #414d52;
  border-radius: 12px;
  outline: 1px solid rgba(255,255,255,.45);
  outline-offset: 4px;
  background:
    radial-gradient(circle at 50% 42%, rgba(87,241,237,.08), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.065), transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(87,241,237,.018) 24px 25px),
    #080d0f;
}

.drop-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 26px;
  font-size: 27px;
  border-width: 2px;
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.48),
    inset 0 -8px 12px rgba(0,0,0,.9),
    0 0 0 3px #899398,
    0 0 0 6px #242b2e,
    0 10px 16px rgba(0,0,0,.78),
    0 0 22px rgba(87,241,237,.18);
}

.dropzone strong {
  font-size: 12px;
  color: #f1f6f7;
  text-shadow: 0 0 10px rgba(87,241,237,.16);
}

.stem-column {
  border-width: 2px;
  border-left-width: 1px;
  border-radius: 0 10px 10px 0;
  background:
    radial-gradient(90% 60% at 50% 0, rgba(87,241,237,.055), transparent 52%),
    linear-gradient(145deg, #11191c, #060a0c 72%);
}

.section-head {
  height: 62px;
  padding-inline: 20px;
  background:
    linear-gradient(90deg, rgba(87,241,237,.055), transparent 36%),
    linear-gradient(#273135, #12181b 72%);
}

.daw-projectbar {
  height: 58px;
  padding-inline: 20px;
  border-bottom-color: #334146;
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -5px 10px #0007;
}

.main-transport {
  min-height: 60px !important;
  padding: 8px 14px !important;
  background:
    linear-gradient(90deg, rgba(87,241,237,.04), transparent 35%),
    linear-gradient(#293338, #111719) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1), inset 0 -6px 10px #0008 !important;
}

.main-transport button:first-child {
  min-height: 36px;
  padding-inline: 16px !important;
}

.arrangement-viewport {
  padding: 8px;
  background-color: #05090a;
  box-shadow: inset 0 12px 24px rgba(0,0,0,.72);
}

.timeline-ruler {
  height: 37px;
  border: 1px solid #28363b;
  border-bottom-color: rgba(87,241,237,.24);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 5px 9px #0008;
}

.stem-grid {
  display: grid;
  gap: 5px;
  padding-top: 5px;
}

.stem-card,
.stem-card:nth-child(even) {
  min-height: 72px;
  border: 1px solid #27363b;
  border-top-color: #46555b;
  border-radius: 5px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--stem) 5%, transparent), transparent 30%),
    linear-gradient(180deg, #202a2e 0%, #111719 48%, #090e10 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    inset 0 -5px 9px rgba(0,0,0,.55),
    0 4px 7px rgba(0,0,0,.6);
}

.stem-card:hover {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--stem) 10%, transparent), transparent 38%),
    linear-gradient(#29363b, #11181b);
  border-top-color: #65767d;
  transform: translateY(-1px);
}

.stem-card.active {
  border-color: color-mix(in srgb, var(--stem) 42%, #263338);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--stem) 15%, #172023), #0a1012 55%),
    linear-gradient(#253035, #0a0f11);
  box-shadow:
    inset 4px 0 12px color-mix(in srgb, var(--stem) 20%, transparent),
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -5px 9px #0008,
    0 5px 9px #000a,
    0 0 12px color-mix(in srgb, var(--stem) 12%, transparent);
}

.stem-pulse {
  width: 12px;
  height: 12px;
  border: 2px solid #59666b;
  box-shadow: inset 0 2px 3px #000, 0 1px rgba(255,255,255,.12);
}

.track-waveform {
  height: 48px;
  border-width: 1px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(87,241,237,.035) 19px 20px),
    linear-gradient(180deg, color-mix(in srgb,var(--stem) 9%,#0b1113), #060a0c);
}

.model-tag {
  padding: 6px 8px;
  border: 1px solid #29363b;
  border-radius: 2px;
  background: #080d0f;
  box-shadow: inset 0 2px 4px #000;
}

.dsp-profile {
  min-height: 72px;
  padding-inline: 20px;
  border-top-color: rgba(87,241,237,.18);
  background:
    linear-gradient(90deg, rgba(87,241,237,.04), transparent 34%),
    linear-gradient(#263135, #111719);
}

.selection-actions button,
.profile-options button,
.main-transport button,
.timeline-zoom button,
.track-remove,
.result-grid button,
.download-mix,
.audition-switch button,
.bundle-export button {
  min-height: 31px;
  border: 1px solid #090c0d !important;
  border-top-color: #748087 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
}

input[type="range"] {
  height: 26px;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 2px;
  border-color: #000;
}

input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 28px;
  margin-top: -12px;
  border-radius: 3px;
}

input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 28px;
}

.process-bar {
  margin-top: 12px;
  min-height: 104px;
  border-width: 2px;
  border-radius: 10px 10px 2px 2px;
  overflow: hidden;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
}

.process-data > div {
  padding-block: 20px;
}

.process-button {
  font-size: 10px;
  border-left-width: 2px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

.companion-panel {
  margin-inline: 12px;
  border-radius: 0 0 10px 10px !important;
}

@media (max-width: 820px) {
  .workspace { padding: 11px; }
  .input-column { border-radius: 9px 9px 0 0; }
  .stem-column { border-radius: 0 0 9px 9px; }
}

@media (max-width: 560px) {
  .shell { padding-top: 10px; }
  .topbar { min-height: 60px; padding-inline: 14px; }
  .intro { min-height: 0; padding: 28px 18px 24px; }
  .workspace { margin-top: 7px; padding: 7px; clip-path: none; border-radius: 8px; }
  .input-column { padding: 17px; }
  .dropzone { min-height: 245px; }
  .stem-card, .stem-card:nth-child(even) { min-height: 82px; }
  .process-bar { min-height: 0; clip-path: none; }
}