/* 90 Supplied CRT hardware skin and skin-specific responsive alignment. */
/* Supplied CRT hardware skin. The live interface stays below this exact image. */
.monitor-skin {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.monitor.has-monitor-skin {
  width: min(98vw, calc(97dvh * 1.5), 1536px);
  max-height: none;
  aspect-ratio: 3 / 2;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.monitor.has-monitor-skin::before,
.monitor.has-monitor-skin .monitor-lip,
.monitor.has-monitor-skin .monitor-vents {
  display: none;
}

.monitor.has-monitor-skin .display-well {
  position: absolute;
  z-index: 1;
  left: 7%;
  right: 7%;
  top: 9.7%;
  bottom: 15.4%;
  min-height: 0;
  padding: 0;
  border-radius: 4.8% / 6.2%;
  background: #020403;
  box-shadow: none;
}

.monitor.has-monitor-skin .glass {
  border: 0;
  border-radius: 4.8% / 6.2%;
  box-shadow: none;
  transform: none;
}

.monitor.has-monitor-skin .crt-screen {
  border-radius: 4.3% / 5.8%;
  transform: scale(var(--warp-overscan, 1.004));
}

.monitor.has-monitor-skin .os-menubar,
.monitor.has-monitor-skin .os-taskbar {
  padding-inline: 2.6%;
}

.monitor.has-monitor-skin .control-deck {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: block;
  padding: 0;
  color: transparent;
  background: none;
  pointer-events: none;
}

.monitor.has-monitor-skin .hardware-badge,
.monitor.has-monitor-skin .hardware-mark {
  display: none;
}

.monitor.has-monitor-skin .power-control {
  position: absolute;
  left: 20.35%;
  top: 88.55%;
  width: 8.9%;
  height: 7.2%;
  display: block;
  pointer-events: none;
}

.monitor.has-monitor-skin .power-button {
  position: absolute;
  left: 0;
  top: 11%;
  width: 51%;
  height: 67%;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: .01;
  pointer-events: auto;
}

.monitor.has-monitor-skin .power-control small,
.monitor.has-monitor-skin .knob-control small,
.monitor.has-monitor-skin .signal-control label,
.monitor.has-monitor-skin .signal-control span {
  display: none;
}

.monitor.has-monitor-skin .power-control i {
  position: absolute;
  left: 89.1%;
  top: 50.1%;
  right: auto;
  width: clamp(4px, .62vw, 9px);
  height: clamp(4px, .62vw, 9px);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.monitor.has-monitor-skin .power-control i.is-off {
  opacity: 1;
  background: #27301f;
  box-shadow: 0 0 3px #070906;
}

.monitor.has-monitor-skin .knob-control {
  position: absolute;
  top: 89.05%;
  width: 5.2%;
  height: 7.5%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.monitor.has-monitor-skin .knob-control:nth-of-type(3) { left: 36.65%; }
.monitor.has-monitor-skin .knob-control:nth-of-type(4) { left: 45.7%; }

.monitor.has-monitor-skin .knob {
  width: 72%;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.monitor.has-monitor-skin .knob::before { display: none; }
.monitor.has-monitor-skin .knob span { left: 48%; top: 9%; width: 3px; height: 20%; background: rgba(20,20,17,.88); }

.monitor.has-monitor-skin .signal-control {
  position: absolute;
  left: 56.1%;
  top: 89.1%;
  width: 20.2%;
  height: 6.4%;
  display: block;
  pointer-events: none;
}

.monitor.has-monitor-skin .signal-control > div {
  display: block;
  width: 100%;
  height: 100%;
}

.monitor.has-monitor-skin .signal-control input {
  position: absolute;
  left: 8%;
  top: 20%;
  width: 67%;
  height: 60%;
  margin: 0;
  opacity: .01;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .workbench { align-items: center; }
  .monitor.has-monitor-skin {
    width: calc(100vw - 10px);
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 2;
  }
  .monitor.has-monitor-skin .os {
    grid-template-rows: 12px minmax(0, 1fr) 15px;
    font-size: 4.5px;
  }
  .monitor.has-monitor-skin .os-menubar { padding: 0 2.6%; gap: 4px; }
  .monitor.has-monitor-skin .os-menubar nav button { padding: 0 3px; }
  .monitor.has-monitor-skin .studio-stage,
  .monitor.has-monitor-skin .archive-view { inset: 0 12% 0 0; }
  .monitor.has-monitor-skin .hero-copy { left: 5%; top: 9%; width: 55%; }
  .monitor.has-monitor-skin .brand-tag { gap: 3px; margin-bottom: 6px; padding: 1px 3px; }
  .monitor.has-monitor-skin .brand-tag b { width: 3px; height: 3px; box-shadow: 5px 0 0 #080c0a; }
  .monitor.has-monitor-skin .hero-copy h1 { font-size: 18px; }
  .monitor.has-monitor-skin .hero-copy p { margin: 6px 0; font-size: 4px; line-height: 1.4; }
  .monitor.has-monitor-skin .archive-cta { min-width: 82px; min-height: 12px; padding: 2px 4px; font-size: 4.5px; }
  .monitor.has-monitor-skin .scroll-cue { display: none; }
  .monitor.has-monitor-skin .hero-art { left: 22%; }
  .monitor.has-monitor-skin .hero-letter { font-size: 150px; }
  .monitor.has-monitor-skin .desktop-icons { top: 6%; gap: 5px; }
  .monitor.has-monitor-skin .desktop-icons button { gap: 1px; font-size: 3.5px; }
  .monitor.has-monitor-skin .disk-icon,
  .monitor.has-monitor-skin .folder-icon,
  .monitor.has-monitor-skin .trash-icon { width: 10px; height: 8px; }
  .monitor.has-monitor-skin .os-taskbar { gap: 1px; padding: 1px 2.6%; }
  .monitor.has-monitor-skin .os-taskbar > button { min-width: 28px; padding: 0 3px; }
  .monitor.has-monitor-skin .project-grid { grid-auto-rows: minmax(42px, 8vh); }
  .monitor.has-monitor-skin .archive-view { padding: 5px; }
  .monitor.has-monitor-skin .archive-header { margin-bottom: 4px; padding-bottom: 3px; }
  .monitor.has-monitor-skin .archive-eyebrow { gap: 4px; font-size: 3.5px; }
  .monitor.has-monitor-skin .archive-header h2 { font-size: 12px; }
  .monitor.has-monitor-skin .archive-header p { margin-top: 2px; font-size: 3.5px; line-height: 1.35; }
  .monitor.has-monitor-skin .archive-return { min-height: 10px; gap: 3px; padding: 1px 3px; font-size: 3.5px; }
  .monitor.has-monitor-skin .archive-toolbar { gap: 3px; margin-bottom: 3px; padding: 2px; }
  .monitor.has-monitor-skin .archive-filters button { min-height: 9px; padding: 0 3px; font-size: 3.5px; }
  .monitor.has-monitor-skin #archive-filter-status { font-size: 3px; }
  .monitor.has-monitor-skin .project-number { top: 3px; left: 3px; min-width: 10px; height: 7px; padding: 0 2px; font-size: 3px; box-shadow: 1px 1px rgba(0,0,0,.35); }
  .monitor.has-monitor-skin .project-card-copy { gap: 1px 3px; padding: 4px; }
  .monitor.has-monitor-skin .project-card-copy small,
  .monitor.has-monitor-skin .project-card-copy b { font-size: 3px; }
  .monitor.has-monitor-skin .project-card-copy strong { font-size: 6px; }
  .monitor.has-monitor-skin .os-window.project-detail { left:4%!important; top:4%!important; width:84%!important; height:92%; max-height:92%; }
  .monitor.has-monitor-skin .project-detail-content { grid-template-rows:minmax(52px,.8fr) minmax(0,1.2fr); }
  .monitor.has-monitor-skin .detail-visual-labels { right:4px; bottom:3px; left:4px; font-size:3px; }
  .monitor.has-monitor-skin .detail-document { gap:4px 7px; padding:5px; }
  .monitor.has-monitor-skin .detail-heading #project-index,
  .monitor.has-monitor-skin .detail-heading #project-kicker,
  .monitor.has-monitor-skin .detail-meta dt,
  .monitor.has-monitor-skin .detail-meta dd,
  .monitor.has-monitor-skin .detail-story span,
  .monitor.has-monitor-skin .detail-navigation small,
  .monitor.has-monitor-skin .detail-navigation strong { font-size:3px; }
  .monitor.has-monitor-skin .detail-heading #project-kicker { margin-top:2px; }
  .monitor.has-monitor-skin .detail-heading h2 { margin:.12em 0 .2em; font-size:11px; }
  .monitor.has-monitor-skin .detail-heading #project-description,
  .monitor.has-monitor-skin .detail-story p { font-size:3.5px; line-height:1.35; }
  .monitor.has-monitor-skin .detail-meta { border-top-width:1px; }
  .monitor.has-monitor-skin .detail-meta div { grid-template-columns:24px 1fr; gap:3px; padding:2px 0; }
  .monitor.has-monitor-skin .detail-story { gap:7px; padding-top:3px; }
  .monitor.has-monitor-skin .detail-story section { grid-template-columns:25px 1fr; gap:3px; }
  .monitor.has-monitor-skin .detail-navigation { gap:3px; padding-top:3px; }
  .monitor.has-monitor-skin .detail-navigation button { min-height:9px; }
  .monitor.has-monitor-skin .detail-navigation .detail-back { padding:1px 3px; font-size:3px; }
}