/* 10 Monitor shell: workbench, hardware frame, glass, physical controls. */
.workbench {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.1vw, 20px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 44%, #24261f 0%, #0b0c09 43%, #030403 79%),
    #050604;
}

.workbench::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ambient-shadow {
  position: absolute;
  width: 84vw;
  height: 16vh;
  left: 8vw;
  bottom: 0;
  border-radius: 50%;
  background: #000;
  filter: blur(30px);
  opacity: .8;
}

.monitor {
  position: relative;
  width: min(98vw, 1540px);
  max-height: 97dvh;
  aspect-ratio: 1.53 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(90px, 10.5vw, 142px);
  padding: clamp(30px, 4vw, 64px) clamp(35px, 4.8vw, 76px) 0;
  border-radius: clamp(24px, 2.2vw, 40px);
  border: 2px solid #c6c1b3;
  background:
    linear-gradient(118deg, rgba(255,255,255,.35), transparent 18% 72%, rgba(40,35,28,.23)),
    radial-gradient(ellipse at 65% 8%, rgba(255,255,255,.25), transparent 35%),
    #9a9484;
  box-shadow:
    inset 0 2px 1px #e3dfd2,
    inset 0 -6px 12px #5f5c52,
    0 34px 72px rgba(0,0,0,.72),
    0 8px 12px rgba(0,0,0,.85);
  isolation: isolate;
}

.monitor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.5' numOctaves='4' seed='8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.23'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.monitor-lip { position: absolute; inset: 14px 5.5% auto; height: 40px; border-radius: 60% 60% 20% 20%; box-shadow: inset 0 2px rgba(255,255,255,.14); opacity: .5; }
.monitor-lip span { position: absolute; left: 50%; width: 25%; height: 4px; border-radius: 50%; background: rgba(65,61,53,.27); transform: translateX(-50%); }

.display-well {
  min-height: 0;
  padding: clamp(13px, 1.55vw, 24px);
  border-radius: 7% / 8%;
  background: #171914;
  box-shadow:
    inset 0 5px 14px #020302,
    inset 6px 0 12px #000,
    inset -3px -3px 5px rgba(255,255,255,.14),
    0 1px 0 rgba(255,255,255,.28);
}

.glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #020302;
  border-radius: 4.8% / 6.2%;
  background: #050806;
  box-shadow:
    inset 0 0 30px #000,
    inset 4px 5px 18px rgba(255,255,255,.05),
    0 0 4px #000;
  transform: perspective(1400px) rotateX(.1deg);
}

.control-deck { position:relative; display:grid; grid-template-columns:1.2fr .8fr .7fr .7fr 1.8fr 1.1fr; align-items:center; gap:clamp(8px,1.8vw,28px); padding:clamp(10px,1vw,16px) clamp(8px,1vw,16px) 10px; color:#191914; text-shadow:0 1px rgba(255,255,255,.25); }
.hardware-badge { display:grid; place-items:center; height:clamp(32px,3.3vw,50px); border:2px solid #2f2e29; border-radius:5px; box-shadow:inset 1px 1px rgba(255,255,255,.23),inset -1px -1px rgba(0,0,0,.25); font:900 clamp(18px,2vw,30px)/1 Arial,sans-serif; }
.power-control,.knob-control { position:relative; height:100%; display:grid; place-items:center; align-content:center; gap:5px; }.power-control small,.knob-control small{font:700 clamp(8px,.7vw,11px)/1 Arial,sans-serif}
.power-button { width:clamp(34px,3.4vw,52px); height:clamp(27px,2.8vw,43px); border:3px solid #292822; border-radius:5px; background:#a8a596; box-shadow:inset 3px 3px 4px #57564e,inset -2px -2px 2px #dad6c8,2px 2px 2px rgba(0,0,0,.25); cursor:pointer; }.power-button:active span{transform:translateY(1px)}
.power-control i { position:absolute; right:1%; top:24%; width:10px; height:10px; border-radius:50%; background:#9cfa18; box-shadow:0 0 6px #82ee00,inset 0 0 2px white; }.power-control i.is-off{background:#415125;box-shadow:none}
.knob { --angle:0deg; position:relative; width:clamp(40px,4vw,60px); aspect-ratio:1; border-radius:50%; cursor:ns-resize; background:radial-gradient(circle at 39% 35%,#c5c0ae 0 9%,#898575 39%,#4b4a42 68%,#aaa595 72%,#555 76%); box-shadow:1px 3px 4px rgba(0,0,0,.45),inset 2px 2px 2px rgba(255,255,255,.36); transform:rotate(var(--angle)); }.knob::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(from -135deg,#302f2a 0 1deg,transparent 1deg 14deg);mask:radial-gradient(transparent 60%,black 61% 69%,transparent 70%)}.knob span{position:absolute;left:47%;top:8%;width:3px;height:20%;background:#20201c;border-radius:2px}
.signal-control { display:grid; gap:8px; align-content:center; }.signal-control > label{text-align:center;font:700 clamp(8px,.7vw,11px)/1 Arial,sans-serif}.signal-control > div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font:700 clamp(8px,.7vw,11px)/1 Arial,sans-serif}.signal-control input{width:100%;accent-color:#25251f;cursor:ew-resize}.hardware-mark{display:grid;text-align:right;gap:4px}.hardware-mark strong{font-size:clamp(9px,1vw,15px)}.hardware-mark small{font-size:clamp(7px,.7vw,10px)}
.monitor-vents { position:absolute; z-index:-1; left:8%; right:8%; bottom:-16px; height:22px; background:repeating-linear-gradient(90deg,#282923 0 3px,#070806 3px 8px); box-shadow:0 8px 18px #000; }