/* A LiftLab monitor controller: hardware-inspired, not a branded replica. */
.hero .visual-wrap { max-width:520px; width:100%; }
.hero .hero-console-object {
  display:grid; grid-template-rows:auto 90px auto auto auto; gap:18px;
  min-height:0; padding:26px 34px 20px !important; border-radius:7px !important;
  border:1px solid #717773; border-bottom:9px solid #969b92;
  background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(155deg,#414c52,#242d33 75%);
  box-shadow:inset 0 1px 1px #ffffff66,inset 0 -1px 2px #000,0 22px 28px #0008,0 55px 70px #0007;
  transform:none; isolation:isolate;
}
.hero .hero-console-object::before,.hero .hero-console-object::after {
  content:""; position:absolute; top:-3px; bottom:-10px; height:auto; width:13px;
  border-radius:3px; border:1px solid #b68a50; background:repeating-linear-gradient(94deg,#78552f55 0 1px,transparent 1px 4px),linear-gradient(90deg,#85603b,#cca578 45%,#a77b48);
  box-shadow:inset 1px 0 2px #e4c09988,2px 1px 4px #0007; pointer-events:none; z-index:5;
}
.hero .hero-console-object::before { left:-5px; right:auto; }
.hero .hero-console-object::after { right:-5px; left:auto; }
.hardware-header { display:flex; align-items:center; justify-content:space-between; color:#e1e3dc; gap:15px; }
.hardware-header strong { font-size:18px; font-weight:600; letter-spacing:.18em; }
.hardware-header strong span { display:block; margin-top:5px; font:7px/1.5 ui-monospace,monospace; letter-spacing:.16em; color:#acb6b4; }
.hardware-header>span { font:8px ui-monospace,monospace; color:#bbc4bf; }
.hero .console-screen { border-radius:3px; padding:12px 14px; display:block; background:#101917; box-shadow:inset 0 3px 10px #000b,0 1px 0 #ffffff25; border:3px solid #1a2325; min-height:0; }
.hero .console-screen { border-radius:3px !important; }
.hero .monitor-panel { border-radius:0 !important; }
.console-screen::after { display:none; }
.hero .screen-wave { height:60px; gap:7px; }
.hero .screen-wave span { border-radius:0; background:repeating-linear-gradient(to top,transparent 0 4px,#101917 4px 6px),linear-gradient(to top,#6dba85 0 65%,#d5bb71 65% 88%,#db735b 88%); box-shadow:none; }
.hero .screen-tracks { display:none; }
.hero .preview-transport { border:0; border-radius:0; padding:0; background:none; box-shadow:none; gap:12px; }
.hero .preview-toggle { border-radius:3px; min-width:66px; min-height:44px; background:linear-gradient(#dbe0d5,#adb5a8); color:#182520; border:1px solid #dce2d2; border-bottom:3px solid #737d71; box-shadow:0 3px 5px #0007; font:11px ui-monospace,monospace; text-transform:uppercase; }
.hero .is-playing .preview-toggle { background:linear-gradient(#b7d2b0,#8aad86); box-shadow:0 0 12px #72be7620; }
.hero .preview-title { font-size:12px; letter-spacing:0; }
.hero .preview-status-text { font:9px ui-monospace,monospace; color:#b2bab5; }
.hero .preview-timeline { margin-top:8px; color:#b9c1b9; font:9px ui-monospace,monospace; }
.hero .preview-seek::-webkit-slider-runnable-track { height:5px; background:linear-gradient(to right,#91ad97 var(--progress,0%),#111918 var(--progress,0%)); border-radius:1px; }
.hero .preview-seek::-webkit-slider-thumb { width:13px; height:22px; margin-top:-9px; border-radius:2px; border:1px solid #d2d5c8; background:linear-gradient(#aeb4aa,#e0e2d8 40%,#626b60 46%,#d2d5c9 57%); box-shadow:0 3px 4px #0008; }
.hero .monitor-panel { grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap:10px; min-height:190px; padding:14px 0 4px; border:0; border-top:1px solid #d6dfd02b; background:none; box-shadow:none; border-radius:0; }
.hero .monitor-panel::before,.hero .monitor-panel::after { display:none; }
.hero .monitor-meter { padding:0; justify-items:center; }
.hero .monitor-meter-label { font:7px ui-monospace,monospace; letter-spacing:0; white-space:nowrap; color:#c3cbc4; }
.hero .monitor-level { border-radius:2px; width:42px; height:88px; background:#141c1b; }
.hero .monitor-level span { border-radius:0; background:repeating-linear-gradient(to top,transparent 0 3px,#141c1b 3px 5px),linear-gradient(to top,#73ba88,#caba78 80%,#ce7360); }
.hero .monitor-control { gap:6px; }
.hero .monitor-label { font:9px ui-monospace,monospace; letter-spacing:.18em; }
.monitor-value { font:10px ui-monospace,monospace; color:#b9c6b7; min-height:12px; }
.hero .monitor-knob-wrap { width:142px; height:142px; }
.hero .monitor-scale { inset:6px; border:0; transform:none; background:repeating-conic-gradient(from 225deg,#d2d8cb 0deg 1deg,transparent 1deg 13.5deg); mask:radial-gradient(circle,transparent 62%,#000 63% 68%,transparent 69%); }
.hero .monitor-knob-wrap::before { display:none; }
.hero .monitor-knob { inset:22px; border:1px solid #626c6c; background:radial-gradient(ellipse at 40% 25%,#66717666,transparent 70%),linear-gradient(150deg,#46545b,#202b32); box-shadow:inset 0 2px 1px #acb6b14d,inset 0 -4px 3px #10191e,0 8px 0 #172025,0 11px 12px #000b; }
.hero .monitor-pointer { width:2px; height:35px; border-radius:0; box-shadow:none; background:#d9ded4; }
.hero .monitor-zero,.hero .monitor-eleven { font:8px ui-monospace,monospace; bottom:4px; }
.hero .monitor-zero { left:20px; }.hero .monitor-eleven { right:13px; }
.hero .monitor-side { gap:14px; }
.monitor-side button { width:52px; min-height:44px; border:1px solid #748077; border-bottom:3px solid #15211a; border-radius:3px; background:linear-gradient(#535f58,#36453b); color:#e1e4d9; font:9px ui-monospace,monospace; cursor:pointer; box-shadow:0 3px 5px #0005; }
.monitor-side button[aria-pressed="true"] { color:#251a0a; background:linear-gradient(#e3c38a,#b5965f); border-color:#e1c183; box-shadow:0 0 10px #dfb76233; }
.hardware-foot { display:flex; gap:10px; align-items:center; justify-content:space-between; border-top:1px solid #ffffff20; padding-top:6px; }
.hardware-foot button { min-height:44px; background:none; border:0; color:#d3d9d0; font:10px ui-monospace,monospace; cursor:pointer; }
.hardware-foot>span { max-width:170px; font:8px/1.6 ui-monospace,monospace; color:#a8b3ad; text-align:right; }
.hero-console-object button:focus-visible { outline:2px solid #eddbb8; outline-offset:4px; }
@media(max-width:600px) {
  .hero .hero-console-object { padding:20px 20px 10px !important; gap:14px; }
  .hardware-header strong { font-size:15px; }
  .hardware-header>span { font-size:7px; }
  .hero .monitor-knob-wrap { width:120px; height:124px; }
  .hero .monitor-knob { inset:18px 16px 20px; }
  .hero .monitor-panel { gap:5px; min-height:180px; }
  .monitor-side button { width:44px; }
  .hero .monitor-label { font-size:8px; }
  .hardware-foot>span { max-width:135px; font-size:7px; }
}