:root {
  color-scheme: dark;
  --bg-0: #07111b;
  --bg-1: #0b1623;
  --bg-2: #0d1a2b;
  --shell: rgba(13, 21, 34, 0.94);
  --shell-2: rgba(8, 14, 24, 0.96);
  --line: rgba(167, 189, 223, 0.14);
  --text: #f4f8ff;
  --muted: #92a7c8;
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  --accent: #0a84ff;
  --cpu: #30d158;
  --gpu: #64d2ff;
  --mem: #ffcc00;
  --quotaFive: #32d74b;
  --quotaWeek: #ff375f;
  --quotaCloud: #64d2ff;
  --ok: #86f4bf;
  --bad: #ff6e83;
  --ring-track: rgba(255, 255, 255, 0.09);
  --dock-clearance: 230px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top, rgba(88, 147, 255, 0.16), transparent 38%),
    radial-gradient(circle at 20% 90%, rgba(121, 247, 194, 0.1), transparent 26%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 58%, #09111a);
  color: var(--text);
  font-family: "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

button,
textarea,
select {
  font: inherit;
}

.appShell {
  width: min(100%, 440px);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 12px calc(var(--dock-clearance) + env(safe-area-inset-bottom));
}

.heroCard,
.chatCard,
.dockInner,
.transcriptPanel {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.heroCard,
.chatCard {
  background: linear-gradient(180deg, var(--shell), var(--shell-2));
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.heroCard {
  padding: 16px 14px;
}

.heroTop,
.chatHeader,
.topActions,
.chatTools,
.legendChip,
.threadMeta,
.transcriptHeader {
  display: flex;
  align-items: center;
}

.heroTop,
.chatHeader,
.threadMeta,
.transcriptHeader {
  justify-content: space-between;
}

.topActions,
.chatTools {
  gap: 8px;
}

.eyebrow,
.heroNote,
.heroSubtle,
.messageMeta,
.doubleCenter span,
.doubleCenter small,
.tripleCenter span,
.tripleCenter small,
.dialTitle,
.legendChip span,
#messageCount,
.threadMeta {
  color: var(--muted);
}

#messageCount {
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.02;
}

h2 {
  font-size: 22px;
}

.signalCluster {
  display: flex;
  align-items: end;
  gap: 4px;
  width: 36px;
  height: 28px;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.signalBarItem {
  width: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.signalBarItem:nth-child(1) { height: 6px; }
.signalBarItem:nth-child(2) { height: 10px; }
.signalBarItem:nth-child(3) { height: 14px; }
.signalBarItem:nth-child(4) { height: 18px; }

.bridgeStatus {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.voiceStatusBadge {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffc975;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.voiceStatusBadge .glyph {
  transform: scale(0.72);
}

.voiceStatusBadge.ready {
  color: var(--ok);
  box-shadow: inset 0 0 0 1px rgba(134, 244, 191, 0.13), 0 0 16px rgba(134, 244, 191, 0.08);
}

.voiceStatusBadge.fallback {
  color: #ffc975;
  box-shadow: inset 0 0 0 1px rgba(255, 201, 117, 0.12);
}

.bridgeDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
}

.bridgeDot.online {
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(134, 244, 191, 0.12);
}

.bridgeDot.offline {
  background: var(--bad);
  box-shadow: 0 0 0 5px rgba(255, 110, 131, 0.12);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.iconBtn,
.ghostBtn,
.sendBtn,
.modeBtn,
.holdToTalkBtn {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(121, 247, 194, 0.18), rgba(109, 216, 255, 0.12));
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.iconBtn.loading {
  opacity: 0.84;
}

.iconBtn.loading .glyphRefresh {
  animation: spinRefresh 0.9s linear infinite;
}

.glyph {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.glyph::before,
.glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.glyphRefresh::before {
  inset: 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.glyphRefresh::after {
  right: 2px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(18deg);
}

.glyphPlay::before {
  left: 7px;
  top: 4px;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.glyphMic::before,
.glyphMicLarge::before {
  left: 7px;
  top: 2px;
  width: 8px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.glyphMic::after,
.glyphMicLarge::after {
  left: 5px;
  top: 11px;
  width: 12px;
  height: 9px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 5px 8px 0 -3px currentColor;
}

.glyphMicLarge {
  width: 34px;
  height: 34px;
}

.glyphMicLarge::before {
  left: 11px;
  top: 3px;
  width: 12px;
  height: 19px;
  border-radius: 10px;
}

.glyphMicLarge::after {
  left: 8px;
  top: 16px;
  width: 18px;
  height: 13px;
  box-shadow: 7px 11px 0 -4px currentColor;
}

.glyphKeyboard::before {
  left: 2px;
  top: 5px;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.glyphKeyboard::after {
  left: 6px;
  top: 9px;
  width: 2px;
  height: 2px;
  background: currentColor;
  box-shadow:
    4px 0 0 currentColor,
    8px 0 0 currentColor,
    0 4px 0 currentColor,
    4px 4px 0 currentColor,
    8px 4px 0 currentColor;
}

.glyphSend::before {
  left: 2px;
  top: 4px;
  width: 18px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 56%, 24% 44%);
}

.glyphInbox::before {
  left: 3px;
  top: 5px;
  width: 16px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.glyphInbox::after {
  left: 5px;
  top: 9px;
  width: 12px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.glyphTrash::before {
  left: 6px;
  top: 7px;
  width: 12px;
  height: 13px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.glyphTrash::after {
  left: 5px;
  top: 4px;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 4px -3px 0 -1px currentColor;
}

@keyframes spinRefresh {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ringGrid,
.deviceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.devicePanel {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 254px;
  padding: 10px 7px 9px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 50% 0, rgba(100, 210, 255, 0.12), transparent 52%);
  border: 1px solid rgba(255, 255, 255, 0.078);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.devicePanel::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.23);
  filter: blur(8px);
  pointer-events: none;
}

.deviceHeader {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  min-height: 36px;
}

.deviceHeader strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
  font-weight: 850;
}

.deviceKicker {
  display: block;
  color: rgba(146, 167, 200, 0.86);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
}

.livePill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: #07111b;
  background: var(--ok);
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
}

.livePill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: devicePulse 1.2s ease-in-out infinite;
}

.livePill.codex {
  color: #061424;
  background: var(--quotaCloud);
}

.livePill.standby {
  color: rgba(244, 248, 255, 0.74);
  background: rgba(255, 255, 255, 0.09);
}

.serverScene,
.printerScene {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 94px;
  perspective: 520px;
}

.serverTower {
  position: relative;
  width: 54px;
  height: 76px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-33deg);
  animation: deviceFloat 3.4s ease-in-out infinite;
}

.serverFace,
.serverSide,
.serverTop {
  position: absolute;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.serverFace {
  inset: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px 9px;
  background: linear-gradient(160deg, #1c2b3e, #0a1320 72%);
  transform: translateZ(18px);
}

.serverSide {
  top: 7px;
  right: -17px;
  width: 18px;
  height: 76px;
  background: linear-gradient(160deg, #111d2d, #07101b);
  transform: rotateY(90deg);
  transform-origin: left;
}

.serverTop {
  top: -17px;
  left: 7px;
  width: 54px;
  height: 18px;
  background: linear-gradient(160deg, #26374d, #101c2d);
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.serverVent {
  display: block;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
}

.serverVent.short {
  width: 23px;
}

.serverLight {
  position: absolute;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 13px currentColor;
  animation: lightBlink 1.1s ease-in-out infinite;
}

.serverLight.green {
  top: 12px;
  color: var(--cpu);
}

.serverLight.blue {
  top: 28px;
  color: var(--gpu);
  animation-delay: 0.28s;
}

.serverLight.amber {
  top: 44px;
  color: var(--mem);
  animation-delay: 0.58s;
}

.deskGlow {
  position: absolute;
  width: 82px;
  height: 26px;
  bottom: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 210, 255, 0.2), transparent 68%);
  filter: blur(2px);
}

.telemetryGrid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.telemetryItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 4px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.038);
}

.telemetryItem span,
.telemetryItem small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.05;
}

.telemetryItem strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  text-align: right;
}

.telemetryItem small {
  grid-column: 2;
  text-align: right;
}

.telemetryItem.cpu { box-shadow: inset 3px 0 0 var(--cpu); }
.telemetryItem.gpu { box-shadow: inset 3px 0 0 var(--gpu); }
.telemetryItem.mem { box-shadow: inset 3px 0 0 var(--mem); }

.codexPanel {
  justify-items: center;
}

.codexPanel .deviceHeader {
  width: 100%;
}

.codexDial {
  margin-top: 1px;
}

.printerScene {
  min-height: 112px;
}

.printerFrame {
  position: relative;
  width: 78px;
  height: 82px;
  transform-style: preserve-3d;
  transform: rotateX(66deg) rotateZ(-36deg) translateZ(8px);
  animation: printerBreathe 3s ease-in-out infinite;
}

.printerBeam {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #89a1c4, #d7e6ff 48%, #54687f);
  box-shadow: 0 0 12px rgba(100, 210, 255, 0.15);
}

.printerBeam.top {
  left: 8px;
  top: 6px;
  width: 64px;
  height: 6px;
}

.printerBeam.left,
.printerBeam.right {
  top: 9px;
  width: 6px;
  height: 58px;
}

.printerBeam.left { left: 9px; }
.printerBeam.right { right: 9px; }

.printHead {
  position: absolute;
  left: 31px;
  top: 21px;
  width: 18px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(160deg, #2a3c55, #101b2a);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 15px rgba(100, 210, 255, 0.16);
  animation: printHeadMove 2.4s ease-in-out infinite;
}

.printBed {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 8px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(100, 210, 255, 0.28), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(100, 210, 255, 0.18);
}

.printObject {
  position: absolute;
  left: 31px;
  bottom: 22px;
  width: 18px;
  height: 20px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(160deg, var(--mem), #ff7d4d);
  transform: skewX(-9deg);
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.18);
}

.printerQueue {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 8px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.038);
  text-align: left;
}

.printerQueue span,
.printerQueue small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
}

.printerQueue strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.deviceGrid {
  gap: 8px;
}

.devicePanel {
  min-height: 252px;
  padding: 10px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 50% 0, rgba(100, 210, 255, 0.14), transparent 56%);
  transform-style: preserve-3d;
  perspective: 760px;
}

.deviceHeader {
  min-height: 34px;
}

.deviceHeader strong {
  margin-top: 3px;
  font-size: 14px;
}

.deviceKicker {
  font-size: 8px;
  letter-spacing: 0.08em;
}

.livePill {
  min-height: 20px;
  padding: 0 7px;
  font-size: 9px;
}

.sceneDesk {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(125, 146, 182, 0.22), rgba(30, 39, 56, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sceneMonitor {
  position: absolute;
  left: 4px;
  bottom: 26px;
  width: 46px;
  height: 34px;
  transform: rotateX(56deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  animation: deviceFloat 3.1s ease-in-out infinite;
}

.sceneMonitor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, #24344a, #0b1421 72%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sceneMonitorGlow {
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.55), rgba(100, 210, 255, 0.8));
  box-shadow: 0 0 18px rgba(100, 210, 255, 0.18);
}

.sceneMonitorStand {
  position: absolute;
  left: 20px;
  bottom: -10px;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #95a8c8, #4e607b);
}

.serverScene {
  min-height: 112px;
}

.serverTower {
  margin-left: 18px;
}

.deviceMetricHint {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  font-size: 9px;
  color: var(--muted);
}

.deviceMetricHint span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.telemetryGrid {
  gap: 6px;
  margin-top: 6px;
}

.telemetryItem {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 6px;
  padding: 6px 7px;
}

.telemetryItem span {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 750;
}

.telemetryItem strong {
  grid-column: 3;
  grid-row: 1;
  font-size: 13px;
}

.telemetryItem small {
  grid-column: 3;
  grid-row: 2;
  text-align: right;
}

.telemetryBar {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.telemetryBar:not(.temp) {
  grid-column: 2;
  grid-row: 1;
}

.telemetryBar.temp {
  grid-column: 2;
  grid-row: 2;
}

.telemetryFill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), currentColor);
  color: var(--accent);
}

.telemetryBar.metricUnavailable,
.telemetryFill.metricUnavailable {
  opacity: 0.42;
}

.telemetryItem.cpu .telemetryFill { color: var(--cpu); }
.telemetryItem.gpu .telemetryFill { color: var(--gpu); }
.telemetryItem.mem .telemetryFill { color: var(--mem); }

.telemetryItem .telemetryBar.temp .telemetryFill {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), #ff8a4c);
}

.aiServerPanel {
  align-content: start;
}

.aiServerPanel .serverScene {
  min-height: 144px;
  margin: 2px 0 4px;
  perspective: 820px;
  perspective-origin: 48% 38%;
}

.aiServerPanel .sceneDesk,
.aiServerPanel .sceneMonitor,
.aiServerPanel .deviceMetricHint {
  display: none;
}

.aiServerPanel .deskGlow {
  width: 132px;
  height: 42px;
  bottom: 8px;
  background:
    radial-gradient(ellipse, rgba(0, 0, 0, 0.34), transparent 66%),
    radial-gradient(ellipse, rgba(100, 210, 255, 0.22), rgba(48, 209, 88, 0.1) 48%, transparent 72%);
  filter: blur(3px);
}

.aiServerPanel .serverTower {
  width: 72px;
  height: 112px;
  margin-left: -6px;
  transform: rotateX(4deg) rotateY(-30deg) rotateZ(0deg) translateY(0) translateZ(10px);
  animation: serverStandFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(22px 24px 18px rgba(0, 0, 0, 0.4));
}

.aiServerPanel .serverTower::before,
.aiServerPanel .serverTower::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -9px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.aiServerPanel .serverTower::before {
  bottom: -12px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(160deg, #1a2a3f, #070e17 72%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotateX(82deg) translateZ(-8px);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.32);
}

.aiServerPanel .serverTower::after {
  bottom: -18px;
  height: 8px;
  border-radius: 50%;
  background: rgba(100, 210, 255, 0.2);
  filter: blur(5px);
  transform: translateZ(-22px);
}

.aiServerPanel .serverFace,
.aiServerPanel .serverSide,
.aiServerPanel .serverTop {
  border-radius: 10px;
  backface-visibility: hidden;
}

.aiServerPanel .serverFace {
  gap: 8px;
  padding: 15px 11px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 16%, transparent 78%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 20%),
    linear-gradient(160deg, #2b405d, #0a1522 76%);
  transform: translateZ(24px);
  box-shadow:
    inset 8px 0 14px rgba(255, 255, 255, 0.05),
    inset -12px 0 18px rgba(0, 0, 0, 0.28),
    inset 0 -18px 24px rgba(0, 0, 0, 0.2);
}

.aiServerPanel .serverFace::before,
.aiServerPanel .serverFace::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.aiServerPanel .serverFace::before {
  top: 56px;
}

.aiServerPanel .serverFace::after {
  top: 80px;
}

.aiServerPanel .serverSide {
  top: 8px;
  right: -31px;
  width: 32px;
  height: 112px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(160deg, #162742, #050b14 78%);
  transform: rotateY(90deg);
  transform-origin: left center;
  box-shadow: inset -14px 0 18px rgba(0, 0, 0, 0.36);
}

.aiServerPanel .serverTop {
  top: -27px;
  left: 8px;
  width: 72px;
  height: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(160deg, #3c526f, #121f31 76%);
  transform: rotateX(90deg);
  transform-origin: bottom center;
  box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.04);
}

.aiServerPanel .serverVent {
  width: 44px;
  height: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 4px, rgba(255, 255, 255, 0.05) 4px 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.aiServerPanel .serverVent.short {
  width: 30px;
}

.aiServerPanel .serverLight {
  right: 9px;
  width: 8px;
  height: 8px;
}

.aiServerPanel .serverLight.green {
  top: 17px;
}

.aiServerPanel .serverLight.blue {
  top: 39px;
}

.aiServerPanel .serverLight.amber {
  top: 61px;
}

.aiServerPanel .telemetryGrid {
  gap: 6px;
  margin-top: 4px;
}

.aiServerPanel .telemetryItem {
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  grid-template-rows: 12px 12px;
  gap: 4px 7px;
  min-height: 34px;
  padding: 6px 7px;
  border-radius: 9px;
}

.aiServerPanel .telemetryItem span,
.aiServerPanel .telemetryItem strong,
.aiServerPanel .telemetryItem small {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
}

.aiServerPanel .telemetryItem span {
  font-weight: 800;
}

.aiServerPanel .telemetryItem strong,
.aiServerPanel .telemetryItem small {
  font-weight: 760;
  color: rgba(244, 248, 255, 0.9);
  text-align: right;
}

.aiServerPanel .telemetryBar {
  height: 7px;
}

.codexPanel {
  justify-items: stretch;
}

.codexScene {
  position: relative;
  min-height: 128px;
  display: grid;
  place-items: center;
  perspective: 860px;
  transform-style: preserve-3d;
}

.codexCore {
  position: relative;
  width: 104px;
  height: 96px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: codexFloat 3.2s ease-in-out infinite;
}

.codexHalo {
  position: absolute;
  inset: 2px 0 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(100, 210, 255, 0.36), rgba(10, 132, 255, 0.08) 52%, transparent 72%);
  filter: blur(3px);
  transform: translateZ(-18px) rotateX(72deg);
  animation: brainGlow 2.2s ease-in-out infinite;
}

.brainModel {
  position: relative;
  width: 74px;
  height: 56px;
  transform-style: preserve-3d;
  transform: rotateX(64deg) rotateY(-18deg) rotateZ(-24deg) translateZ(18px);
  animation: brainTurn 5.6s ease-in-out infinite;
}

.brainModel::before,
.brainModel::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.brainModel::before {
  left: 7px;
  right: 8px;
  bottom: -7px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 28, 48, 0.72), transparent 68%);
  filter: blur(3px);
  transform: translateZ(-24px);
}

.brainModel::after {
  left: 24px;
  top: 10px;
  width: 26px;
  height: 38px;
  border-radius: 50%;
  border-left: 2px solid rgba(235, 252, 255, 0.28);
  transform: translateZ(18px) rotate(-7deg);
}

.brainLobe {
  position: absolute;
  top: 7px;
  width: 42px;
  height: 42px;
  border-radius: 58% 46% 52% 45%;
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.66), transparent 12%),
    radial-gradient(circle at 62% 38%, rgba(154, 248, 214, 0.48), transparent 28%),
    linear-gradient(145deg, rgba(122, 232, 255, 0.94), rgba(55, 119, 235, 0.82) 58%, rgba(34, 45, 118, 0.9));
  border: 1px solid rgba(217, 251, 255, 0.42);
  box-shadow:
    inset 7px 8px 16px rgba(255, 255, 255, 0.14),
    inset -10px -12px 18px rgba(5, 20, 58, 0.42),
    0 0 22px rgba(100, 210, 255, 0.32);
  transform-style: preserve-3d;
}

.brainLobe.left {
  left: 6px;
  transform: translateZ(17px) rotateZ(-10deg);
}

.brainLobe.right {
  right: 6px;
  transform: translateZ(19px) rotateZ(10deg) rotateY(-10deg);
}

.brainBridge {
  position: absolute;
  left: 30px;
  top: 18px;
  width: 15px;
  height: 28px;
  border-radius: 45%;
  background: linear-gradient(180deg, rgba(122, 232, 255, 0.72), rgba(43, 84, 180, 0.72));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.12);
  transform: translateZ(15px);
}

.brainGroove {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(7, 20, 46, 0.3);
  border-left-color: rgba(255, 255, 255, 0.26);
  border-bottom-color: transparent;
  transform: translateZ(23px);
}

.brainGroove.g1 {
  left: 12px;
  top: 15px;
  width: 22px;
  height: 13px;
  rotate: -14deg;
}

.brainGroove.g2 {
  right: 12px;
  top: 17px;
  width: 24px;
  height: 14px;
  rotate: 17deg;
}

.brainGroove.g3 {
  left: 22px;
  top: 33px;
  width: 30px;
  height: 12px;
  rotate: 4deg;
}

.brainNode {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9af8d6;
  box-shadow: 0 0 10px rgba(154, 248, 214, 0.9);
  transform: translateZ(30px);
  animation: neuralPulse 1.6s ease-in-out infinite;
}

.brainNode.n1 {
  left: 16px;
  top: 19px;
}

.brainNode.n2 {
  right: 17px;
  top: 26px;
  animation-delay: 0.28s;
}

.brainNode.n3 {
  left: 38px;
  top: 38px;
  animation-delay: 0.56s;
}

.brainOrbit {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 20px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(154, 248, 214, 0.42);
  transform-style: preserve-3d;
  box-shadow: 0 0 14px rgba(100, 210, 255, 0.16);
}

.brainOrbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 12px;
  top: 4px;
  border-radius: 50%;
  background: #64d2ff;
  box-shadow: 0 0 12px rgba(100, 210, 255, 0.85);
}

.brainOrbit.orbitOne {
  transform: rotateX(70deg) rotateZ(-20deg);
  animation: orbitSpin 5.4s linear infinite;
}

.brainOrbit.orbitTwo {
  transform: rotateX(68deg) rotateY(38deg) rotateZ(22deg);
  border-color: rgba(255, 204, 0, 0.32);
  animation: orbitSpinReverse 6.8s linear infinite;
}

.codexSpark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9af8d6;
  box-shadow: 0 0 12px rgba(154, 248, 214, 0.75);
  animation: lightBlink 1.4s ease-in-out infinite;
}

.codexSpark.one {
  left: 18px;
  top: 32px;
}

.codexSpark.two {
  right: 18px;
  top: 58px;
  animation-delay: 0.35s;
}

.quotaStatusGrid {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.quotaStatusItem {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.quotaStatusItem span,
.quotaStatusItem small,
.codexFoot {
  color: var(--muted);
}

.quotaStatusItem strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}

.quotaStatusItem:first-child {
  box-shadow: inset 3px 0 0 var(--quotaFive);
}

.quotaStatusItem:last-child {
  box-shadow: inset 3px 0 0 var(--quotaWeek);
}

.codexFoot {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.25;
}

.printerScene {
  min-height: 112px;
}

.printerStatusLamp {
  position: absolute;
  right: 13px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9af8d6;
  box-shadow: 0 0 12px rgba(154, 248, 214, 0.82);
  animation: lightBlink 1.25s ease-in-out infinite;
}

.printerQueue {
  margin-top: 10px;
}

.deviceTitleWrap {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.deviceTitle {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.05;
  word-break: keep-all;
}

.deviceHeader strong,
.deviceTitle {
  line-height: 1.1;
  font-weight: 780;
}

.deviceKicker {
  font-size: 9px;
}

.livePill {
  font-size: 10px;
}

.panelLabel,
.panelMeta {
  font-size: 10px;
  line-height: 1.18;
}

.panelLabel {
  color: var(--muted);
  font-weight: 700;
}

.panelMeta {
  color: var(--muted);
}

.panelValue {
  color: var(--text);
  font-size: 13px;
  line-height: 1.05;
  font-weight: 820;
}

.deviceMetricHint {
  margin-top: 4px;
  font-size: 9px;
}

.aiServerPanel .serverScene {
  min-height: 116px;
  perspective-origin: 58% 26%;
}

.aiServerPanel .deskGlow {
  width: 118px;
  height: 30px;
  bottom: 4px;
  background:
    radial-gradient(ellipse, rgba(0, 0, 0, 0.36), transparent 64%),
    radial-gradient(ellipse, rgba(100, 210, 255, 0.16), rgba(48, 209, 88, 0.08) 44%, transparent 72%);
  filter: blur(4px);
}

.aiServerPanel .serverTower {
  width: 62px;
  height: 114px;
  margin-left: 0;
  transform: rotateX(1deg) rotateY(-42deg) rotateZ(0deg) translateY(-2px) translateZ(16px);
  animation: serverStandFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(14px 26px 18px rgba(0, 0, 0, 0.42));
}

.aiServerPanel .serverTower::before {
  bottom: -16px;
  height: 20px;
  transform: rotateX(84deg) translateZ(-12px);
}

.aiServerPanel .serverTower::after {
  bottom: -23px;
  height: 10px;
}

.aiServerPanel .serverFace {
  gap: 7px;
  padding: 13px 9px 11px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 14%, transparent 74%, rgba(0, 0, 0, 0.24)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%),
    linear-gradient(160deg, #2d445f, #08111a 78%);
}

.aiServerPanel .serverFace::before,
.aiServerPanel .serverFace::after {
  display: none;
}

.aiServerPanel .serverSide {
  right: -37px;
  width: 38px;
  height: 114px;
}

.aiServerPanel .serverTop {
  top: -31px;
  width: 62px;
  height: 32px;
}

.aiServerPanel .serverCap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 4px;
}

.aiServerPanel .serverBrand {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(100, 210, 255, 0.62));
  box-shadow: 0 0 12px rgba(100, 210, 255, 0.22);
}

.aiServerPanel .serverPower,
.aiServerPanel .serverBayLight {
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.aiServerPanel .serverPower {
  width: 8px;
  height: 8px;
  color: #9af8d6;
  background: currentColor;
}

.aiServerPanel .serverBay {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  padding: 6px 7px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(7, 12, 19, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.aiServerPanel .serverBayLight {
  width: 6px;
  height: 6px;
}

.aiServerPanel .serverBayLight.green {
  color: #9af8d6;
  background: currentColor;
}

.aiServerPanel .serverBayLight.blue {
  color: #64d2ff;
  background: currentColor;
}

.aiServerPanel .serverBayLight.amber {
  color: #ffcc00;
  background: currentColor;
}

.aiServerPanel .serverVent {
  width: 100%;
  height: 6px;
}

.aiServerPanel .serverVent.short {
  width: 68%;
}

.aiServerPanel .serverSlot {
  justify-self: end;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.aiServerPanel .serverSlot.compact {
  width: 10px;
}

.aiServerPanel .serverPorts {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 2px 0;
}

.aiServerPanel .serverPort {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.aiServerPanel .serverPort.wide {
  width: 18px;
}

.aiServerPanel .serverLight {
  display: none;
}

.aiServerPanel .telemetryGrid {
  gap: 4px;
  margin-top: 6px;
}

.aiServerPanel .telemetryItem {
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  grid-template-rows: auto;
  gap: 4px 5px;
  min-height: 0;
  padding: 5px 6px;
  align-items: center;
  border-radius: 8px;
}

.aiServerPanel .telemetryItem .panelLabel,
.aiServerPanel .telemetryItem .panelMeta,
.quotaStatusItem .panelLabel,
.quotaStatusItem .panelMeta,
.printerQueue .panelLabel,
.printerQueue .panelMeta,
.codexFoot .panelMeta {
  font-size: 10px;
  line-height: 1.18;
}

.aiServerPanel .telemetryItem .panelLabel {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.aiServerPanel .telemetryItem .telemetryBar:not(.temp) {
  grid-column: 2;
  grid-row: 1;
}

.aiServerPanel .telemetryItem .telemetryBar.temp {
  display: none;
}

.aiServerPanel .telemetryItem .panelValue {
  grid-column: 3;
  grid-row: 1;
  font-size: 12px;
}

.aiServerPanel .telemetryItem .panelMeta {
  grid-column: 4;
  grid-row: 1;
  white-space: nowrap;
}

.quotaStatusGrid {
  gap: 4px;
  margin-top: 4px;
}

.quotaStatusItem {
  gap: 2px;
  padding: 6px 7px;
  border-radius: 9px;
}

.quotaStatusItem .panelValue,
.printerQueue .panelValue {
  font-size: 13px;
}

.codexFoot {
  margin-top: 5px;
}

.printerQueue {
  gap: 2px;
  padding: 6px 7px;
  border-radius: 10px;
}

.codexScene,
.printerScene {
  min-height: 126px;
}

.codexCore {
  width: 92px;
  height: 88px;
}

.printerFrame {
  width: 92px;
  height: 94px;
  transform: rotateX(66deg) rotateZ(-36deg) translateZ(12px);
}

.deviceGrid {
  gap: 8px;
}

@keyframes codexFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.panelDial {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 6px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.deviceDataDial {
  margin-top: 6px;
  gap: 7px;
  padding: 9px 7px 8px;
  background: rgba(255, 255, 255, 0.055);
}

.deviceDataDial .doubleDial,
.deviceDataDial .tripleDial {
  width: 92px;
  height: 92px;
}

.deviceDataDial .doubleCenter {
  width: 54px;
  height: 54px;
}

.deviceDataDial .doubleCenter strong {
  font-size: 16px;
}

.deviceDataDial .doubleCenter span {
  font-size: 9px;
}

.deviceDataDial .tripleCenter {
  width: 38px;
  height: 38px;
  gap: 1px;
}

.deviceDataDial .tripleCenter strong {
  font-size: 9px;
}

.deviceDataDial .tripleCenter span {
  font-size: 7px;
  line-height: 1.05;
}

.deviceDataDial .legendStack.compact {
  gap: 5px;
}

.deviceDataDial .legendChip {
  min-height: 30px;
  padding: 4px 6px;
  align-items: center;
}

.deviceDataDial .legendChip > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.legendValueGroup {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-width: 48px;
}

.legendValueGroup strong {
  font-size: 11px;
  line-height: 1;
  font-weight: 780;
  color: var(--text);
}

.legendValueGroup small {
  font-size: 8px;
  line-height: 1.1;
  color: rgba(244, 248, 255, 0.7);
  text-align: right;
}

.quotaDialPanel .legendValueGroup {
  min-width: 54px;
}

.quotaDialPanel .legendValueGroup small {
  display: none;
}

.tripleRing.neutral {
  --ring-color: rgba(255, 255, 255, 0.18);
}

.standbyCenter strong {
  font-size: 10px;
}

.standbyCenter span {
  font-size: 7px;
}

.codexFoot {
  min-height: 24px;
}

.codexFoot .panelMeta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.08;
}

.panelDial::before {
  content: none;
}

.doubleDial,
.tripleDial {
  position: relative;
  width: clamp(92px, 25vw, 112px);
  height: clamp(92px, 25vw, 112px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.doubleRing,
.tripleRing {
  position: absolute;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring-color) calc(var(--progress, 0) * 1turn), var(--ring-track) 0);
  transform: rotate(-90deg);
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.doubleRing::after,
.tripleRing::after {
  content: "";
  position: absolute;
  inset: var(--hole);
  border-radius: 50%;
  background: #121923;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.doubleRing.metricUnavailable,
.tripleRing.metricUnavailable {
  opacity: 0.42;
  background: conic-gradient(rgba(255, 255, 255, 0.12) 1turn, rgba(255, 255, 255, 0.12) 0);
}

.doubleRing.outer { inset: 0; --hole: 10px; --ring-color: var(--quotaFive); }
.doubleRing.inner { inset: 20px; --hole: 9px; --ring-color: var(--quotaWeek); }
.tripleRing.outer { inset: 0; --hole: 9px; --ring-color: var(--cpu); }
.tripleRing.middle { inset: 15px; --hole: 9px; --ring-color: var(--gpu); }
.tripleRing.inner { inset: 30px; --hole: 8px; --ring-color: var(--mem); }

.doubleCenter,
.tripleCenter {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 1px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(18, 25, 35, 0.92);
}

.doubleCenter {
  width: 54px;
  height: 54px;
}

.tripleCenter {
  width: 36px;
  height: 36px;
  padding-top: 0;
  background: rgba(18, 25, 35, 0.96);
}

.doubleCenter strong,
.tripleCenter strong {
  display: block;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.tripleCenter strong {
  font-size: 10px;
}

.tripleCenter span {
  font-size: 9px;
  line-height: 1.1;
}

.doubleCenter span,
.doubleCenter small,
.tripleCenter span,
.tripleCenter small {
  display: block;
}

.doubleCenter span,
.tripleCenter span,
.dialTitle,
.legendChip span,
.legendChip strong {
  font-size: 10px;
}

.doubleCenter small,
.tripleCenter small {
  display: block;
  font-size: 8px;
  line-height: 1.1;
  color: rgba(244, 248, 255, 0.7);
}

.dialTitle {
  text-align: center;
  font-weight: 750;
  color: rgba(244, 248, 255, 0.92);
  letter-spacing: 0;
}

.legendRow,
.legendStack {
  width: 100%;
  display: grid;
  gap: 4px;
}

.legendRow.compact {
  grid-template-columns: 1fr;
}

.legendChip {
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.legendChip strong {
  color: var(--text);
  font-weight: 750;
}

.legendSwatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  display: inline-block;
}

.legendSwatch.quotaFive { background: var(--quotaFive); }
.legendSwatch.quotaWeek { background: var(--quotaWeek); }
.legendSwatch.cpu { background: var(--cpu); }
.legendSwatch.gpu { background: var(--gpu); }
.legendSwatch.mem { background: var(--mem); }

.dialFoot {
  width: 100%;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

@keyframes lightBlink {
  0%, 100% { opacity: 0.32; transform: scale(0.82); }
  45% { opacity: 1; transform: scale(1.14); }
}

@keyframes devicePulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(7, 17, 27, 0.32); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(7, 17, 27, 0); }
}

@keyframes deviceFloat {
  0%, 100% { transform: rotateX(58deg) rotateZ(-33deg) translateY(0); }
  50% { transform: rotateX(58deg) rotateZ(-33deg) translateY(-4px); }
}

@keyframes serverStandFloat {
  0%, 100% { transform: rotateX(4deg) rotateY(-30deg) rotateZ(0deg) translateY(0) translateZ(10px); }
  50% { transform: rotateX(4deg) rotateY(-30deg) rotateZ(0deg) translateY(-5px) translateZ(12px); }
}

@keyframes printerBreathe {
  0%, 100% { transform: rotateX(58deg) rotateZ(-35deg) translateY(0); }
  50% { transform: rotateX(58deg) rotateZ(-35deg) translateY(-3px); }
}

@keyframes printHeadMove {
  0%, 100% { transform: translateX(-11px); }
  50% { transform: translateX(11px); }
}

.heroInfo {
  margin-top: 14px;
  display: grid;
  gap: 7px;
}

#status {
  font-size: 14px;
}

.heroNote,
.heroSubtle {
  font-size: 13px;
  line-height: 1.35;
}

.noticeBoard {
  margin-top: 12px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(14, 24, 39, 0.94), rgba(8, 15, 26, 0.96));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.noticeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.noticeEyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

.noticeHeader h2 {
  font-size: 18px;
  line-height: 1.15;
}

.noticeLive {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(244, 248, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 750;
}

.noticeSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.noticeStat {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  appearance: none;
}

.noticeStat strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.noticeStat span {
  max-width: 100%;
  color: rgba(244, 248, 255, 0.82);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 750;
  text-align: center;
}

.noticeStat small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 650;
  text-align: center;
}

.noticeStat.done strong { color: var(--quotaFive); }
.noticeStat.running strong { color: var(--accent); }
.noticeStat.issue strong { color: var(--quotaWeek); }

.noticeStat.active {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.18);
}

.noticeDetail {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  overflow: visible;
  border-radius: 18px;
}

.noticeDetail.collapsed {
  gap: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
}

.noticeItem {
  position: relative;
  min-height: 50px;
  display: grid;
  grid-template-columns: 10px auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.055);
}

.noticeDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.noticeItem.done .noticeDot {
  background: var(--quotaFive);
  box-shadow: 0 0 0 5px rgba(50, 215, 75, 0.12);
}

.noticeItem.queued .noticeDot {
  background: #64d2ff;
  box-shadow: 0 0 0 5px rgba(100, 210, 255, 0.12);
}

.noticeItem.running .noticeDot {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.14);
}

.noticeItem.issue .noticeDot {
  background: var(--quotaWeek);
  box-shadow: 0 0 0 5px rgba(255, 55, 95, 0.12);
}

.noticeItem time,
.noticeItem strong {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
}

.noticeItem time {
  color: var(--muted);
}

.noticeItem strong {
  color: var(--text);
  font-weight: 800;
}

.noticeItem p {
  min-width: 0;
  color: rgba(244, 248, 255, 0.86);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.chatCard {
  margin-top: 12px;
  min-height: 60vh;
  padding: 16px 14px 20px;
}

.chatHeader {
  margin-bottom: 12px;
  gap: 10px;
  align-items: flex-start;
}

.chatTools {
  width: 100%;
  justify-content: flex-end;
}

.projectSelect,
.ghostBtn {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  color: var(--text);
}

.projectSelect {
  min-width: 108px;
  max-width: 138px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.ghostBtn {
  background: rgba(255, 255, 255, 0.05);
}

.ghostBtn.iconOnly {
  width: 38px;
  min-width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
}

.messageInboxBtn {
  position: relative;
}

.countBadge {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.32);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.countBadge.empty {
  opacity: 0;
  transform: scale(0.62);
  pointer-events: none;
}

.ghostBtn.danger {
  color: #ff6b62;
  background: rgba(255, 59, 48, 0.11);
}

.ghostBtn.loading {
  opacity: 0.58;
  pointer-events: none;
}

.ghostBtn.mini,
.sendBtn.mini {
  min-height: 34px;
  padding: 0 12px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 48vh;
  overflow-y: auto;
  padding-bottom: var(--dock-clearance);
  scroll-padding-bottom: var(--dock-clearance);
}

.hourGroup {
  display: grid;
  gap: 8px;
}

.hourHeader {
  width: max-content;
  max-width: 100%;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  cursor: pointer;
}

.archiveToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  color: rgba(214, 226, 245, 0.9);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  font-size: 11px;
  cursor: pointer;
}

.archiveToggle span:last-child {
  color: var(--muted);
  white-space: nowrap;
}

.archiveToggle.open {
  background: rgba(255, 255, 255, 0.06);
}

.hourHeader::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.8;
}

.hourGroup.open .hourHeader::after {
  transform: rotate(225deg) translateY(-1px);
}

.hourMessages {
  display: grid;
  gap: 10px;
}

.foldedReadNotice {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(194, 209, 232, 0.76);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 11px;
  line-height: 1.25;
}

.messageThread {
  display: grid;
  gap: 7px;
  padding: 1px 0 3px;
}

.messageThread.playable .threadReply {
  cursor: pointer;
}

.messageThread.playable .threadReply:active .threadPreview,
.messageThread.playable .threadReply:active .threadFull {
  transform: scale(0.985);
  border-color: rgba(121, 247, 194, 0.36);
}

.messageThread.playing .threadPreview,
.messageThread.playing .threadFull {
  border-color: rgba(134, 244, 191, 0.42);
  box-shadow: 0 0 0 1px rgba(134, 244, 191, 0.16), 0 12px 26px rgba(0, 0, 0, 0.18);
}

.messageThread.paused .threadPreview {
  filter: saturate(0.92);
}

.messageThread.unread {
  position: relative;
}

.messageThread.unread::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 5px rgba(255, 110, 131, 0.1);
}

.messageThread.collapsed .threadFull {
  display: none;
}

.messageThread.expanded .threadPreview {
  display: none;
}

.messageThread.playable.collapsed .threadPreview {
  min-width: min(210px, 68vw);
  max-width: min(72vw, 300px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #061a12;
  background:
    linear-gradient(180deg, rgba(143, 250, 189, 0.98), rgba(54, 214, 126, 0.95));
  border-color: rgba(160, 255, 206, 0.3);
  box-shadow: 0 10px 22px rgba(33, 190, 108, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.messageThread.playable.expanded .threadFull {
  color: #061a12;
  background:
    linear-gradient(180deg, rgba(143, 250, 189, 0.98), rgba(64, 219, 134, 0.95));
  border-color: rgba(160, 255, 206, 0.3);
  box-shadow: 0 10px 22px rgba(33, 190, 108, 0.14);
}

.pendingThread {
  opacity: 0.94;
}

.messageThread.pendingReply .threadReply .threadPreview {
  position: relative;
  padding-left: 32px;
  color: rgba(244, 248, 255, 0.88);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.06);
}

.messageThread.pendingReply .threadReply .threadPreview::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gpu);
  box-shadow: 10px 0 0 rgba(100, 210, 255, 0.55), 20px 0 0 rgba(100, 210, 255, 0.28);
  transform: translateY(-50%);
  animation: pendingDots 1s infinite ease-in-out;
}

@keyframes pendingDots {
  50% {
    opacity: 0.45;
  }
}

.threadMain,
.threadReply {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.threadMain {
  grid-template-columns: minmax(0, 1fr) 28px;
  justify-items: end;
}

.threadMain .threadRole {
  order: 2;
}

.threadMain .threadBody {
  order: 1;
  justify-items: end;
}

.threadReply {
  justify-items: start;
}

.threadReply .threadBody {
  justify-items: start;
}

.threadRole {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
}

.threadRole.user {
  background: linear-gradient(180deg, rgba(84, 133, 255, 0.86), rgba(43, 95, 200, 0.9));
}

.threadRole.ai {
  background: linear-gradient(180deg, rgba(124, 243, 199, 0.9), rgba(79, 209, 255, 0.86));
  color: #05121d;
}

.threadBody {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.threadMeta {
  width: fit-content;
  max-width: min(100%, 286px);
  gap: 6px;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.82;
}

.threadMain .threadMeta {
  justify-content: flex-end;
}

.threadReply .threadMeta {
  justify-content: flex-start;
}

.syncPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 17px;
  padding: 0 7px;
  border-radius: 999px;
  color: rgba(244, 248, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.syncPill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.syncPill.queued {
  color: #b7c8e3;
}

.syncPill.running {
  color: #64d2ff;
  background: rgba(100, 210, 255, 0.09);
}

.syncPill.done {
  color: #30d158;
  background: rgba(48, 209, 88, 0.09);
}

.syncPill.failed {
  color: #ff6b62;
  background: rgba(255, 59, 48, 0.1);
}

.threadPrompt,
.threadPreview,
.threadFull {
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 15px;
  width: fit-content;
  max-width: min(78vw, 310px);
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.threadPrompt {
  border-top-right-radius: 5px;
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(83, 142, 255, 0.74), rgba(58, 118, 238, 0.62));
  box-shadow: 0 8px 18px rgba(48, 103, 220, 0.12);
}

.threadPrompt[role="button"] {
  cursor: pointer;
  touch-action: manipulation;
}

.threadPrompt[role="button"]:active {
  transform: scale(0.985);
  border-color: rgba(180, 207, 255, 0.34);
}

.messageThread.userCollapsed .threadPrompt {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.78;
  max-width: min(60vw, 235px);
}

.threadPreview,
.threadFull {
  border-top-left-radius: 5px;
}

.messageThread.playable .threadPreview,
.messageThread.playable .threadFull {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.11);
}

.replyAudioToggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(5, 24, 16, 0.14);
  color: #062217;
  flex: 0 0 24px;
  cursor: pointer;
  touch-action: manipulation;
}

.replyAudioToggle:active {
  transform: scale(0.92);
}

.replyAudioIcon,
.replyAudioIcon::before,
.replyAudioIcon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.replyAudioToggle.play .replyAudioIcon {
  left: 9px;
  top: 6px;
  border-left: 7px solid #062217;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.replyAudioToggle.pause .replyAudioIcon {
  width: 3px;
  height: 11px;
  left: 8px;
  top: 6px;
  border-radius: 2px;
  background: #062217;
  box-shadow: 6px 0 0 #062217;
}

.replyPlayText {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  color: #06301f;
  background: rgba(255, 255, 255, 0.34);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  vertical-align: 1px;
  white-space: nowrap;
}

.replyVoiceHint {
  margin-left: auto;
  color: rgba(6, 35, 23, 0.72);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.threadPreview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.messageThread.playable.collapsed .threadPreview {
  display: flex;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.unreadDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  margin-left: 8px;
  flex: 0 0 8px;
}

.threadFull {
  color: var(--text);
}

.emptyState {
  padding: 24px 18px;
  border-radius: 20px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7, 12, 20, 0), rgba(7, 12, 20, 0.88) 20%, rgba(7, 12, 20, 0.96));
}

.dockInner {
  width: min(100%, 440px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid rgba(158, 184, 225, 0.12);
  background: rgba(10, 18, 31, 0.9);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
}

.globalPlayerBar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 16px;
  color: rgba(244, 248, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
}

.globalPlayerBar.hidden {
  display: none;
}

.globalPlayerBar audio {
  width: 100%;
  height: 30px;
  color-scheme: dark;
}

.dockMode {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.modeBtn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.modeBtn.active {
  color: var(--text);
  background: rgba(83, 142, 255, 0.22);
  border-color: rgba(83, 142, 255, 0.3);
}

.voiceComposer,
.textComposer {
  display: grid;
  gap: 8px;
}

.voiceStatus strong,
.voiceStatus small {
  display: block;
}

.voiceStatus strong {
  font-size: 14px;
}

.voiceStatus small {
  color: var(--muted);
}

.holdToTalkBtn {
  min-height: 62px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, rgba(243, 247, 255, 0.1), rgba(243, 247, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.08);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.holdMic {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quotaFive);
  box-shadow: 0 0 0 7px rgba(142, 245, 199, 0.12);
}

.holdToTalkBtn.recording {
  background: linear-gradient(180deg, rgba(255, 137, 159, 0.28), rgba(255, 137, 159, 0.14));
  border-color: rgba(255, 137, 159, 0.34);
  animation: pulse 1.1s infinite;
}

.holdToTalkBtn.recording .holdMic {
  background: var(--quotaWeek);
  box-shadow: 0 0 0 10px rgba(255, 137, 159, 0.14);
}

@keyframes pulse {
  50% {
    transform: scale(1.04);
  }
}

#textInput {
  width: 100%;
  min-height: 46px;
  max-height: 92px;
  resize: none;
  border-radius: 18px;
  padding: 13px 14px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.textComposer {
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: end;
}

.sendBtn {
  width: 48px;
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #05121d;
  font-weight: 800;
  background: linear-gradient(180deg, #8cf8cf, #57d5ff);
}

.sendBtn.primary {
  background: linear-gradient(180deg, #9af8d6, #57d5ff);
}

.hidden {
  display: none;
}

.transcriptModal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.42);
}

.transcriptModal.hidden {
  display: none;
}

.transcriptPanel {
  width: min(100%, 440px);
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 18, 31, 0.95);
}

.transcriptText {
  max-height: 42vh;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 15px;
  color: var(--text);
}

.devicePanel {
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.028) 58%),
    radial-gradient(circle at 50% 0, rgba(100, 210, 255, 0.18), transparent 54%),
    radial-gradient(circle at 16% 76%, rgba(48, 209, 88, 0.11), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -24px 48px rgba(0, 0, 0, 0.16),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.devicePanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.13) 34%, transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
  opacity: 0.34;
  mix-blend-mode: screen;
  transform: translateX(-54%);
  animation: deviceSheen 5.4s linear infinite;
  pointer-events: none;
}

.serverScene,
.codexScene,
.printerScene {
  overflow: visible;
  transform-style: preserve-3d;
}

.serverScene::before,
.codexScene::before,
.printerScene::before {
  content: "";
  position: absolute;
  inset: 11px 5px 0;
  border-radius: 22px;
  background:
    linear-gradient(rgba(100, 210, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 210, 255, 0.1) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.48;
  transform: rotateX(68deg) translateZ(-22px);
  transform-origin: center bottom;
  filter: drop-shadow(0 0 12px rgba(100, 210, 255, 0.18));
  pointer-events: none;
}

.sceneTelemetry {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 5px;
  width: min(92%, 132px);
  padding: 6px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(10, 25, 40, 0.78), rgba(7, 12, 20, 0.58)),
    radial-gradient(circle at 0 0, rgba(100, 210, 255, 0.2), transparent 54%);
  border: 1px solid rgba(133, 224, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 24px rgba(100, 210, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  pointer-events: none;
}

.serverHud {
  left: 6px;
  top: 26px;
  transform: rotateX(9deg) rotateY(-18deg) translateZ(44px);
}

.codexHud {
  left: 8px;
  bottom: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  transform: rotateX(8deg) rotateY(16deg) translateZ(50px);
}

.printerHud {
  right: 6px;
  top: 25px;
  transform: rotateX(8deg) rotateY(18deg) translateZ(48px);
}

.hudMetric {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(28px, 1fr);
  gap: 3px 6px;
  align-items: center;
  color: rgba(244, 248, 255, 0.92);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
}

.hudMetric span {
  color: rgba(194, 224, 255, 0.72);
  font-weight: 850;
}

.hudMetric strong {
  justify-self: end;
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  text-shadow: 0 0 12px currentColor;
}

.hudMetric i {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.hudMetric i::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--progress, 0) * 100%);
  min-width: 7px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), currentColor);
  box-shadow: 0 0 12px currentColor;
  transition: width 420ms ease;
}

.hudMetric i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.74), transparent);
  animation: dataSweep 1.7s linear infinite;
}

.hudMetric.cpu,
.hudMetric.nozzle { color: var(--cpu); }
.hudMetric.gpu,
.hudMetric.bed { color: var(--gpu); }
.hudMetric.mem,
.hudMetric.progress { color: var(--mem); }
.hudMetric.quotaFive { color: var(--quotaFive); }
.hudMetric.quotaWeek { color: var(--quotaWeek); }

.aiServerPanel .serverTower {
  animation: serverHoloFloat 4.2s ease-in-out infinite;
}

.aiServerPanel .serverFace {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 12px 0 18px rgba(100, 210, 255, 0.08),
    0 0 24px rgba(100, 210, 255, 0.16);
}

.aiServerPanel .serverBay {
  position: relative;
  overflow: hidden;
}

.aiServerPanel .serverBay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  animation: bayScan 2.2s linear infinite;
}

.codexCore {
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 22px rgba(100, 210, 255, 0.17));
}

.codexCore::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(100, 210, 255, 0.2);
  background: conic-gradient(from 0deg, transparent, rgba(100, 210, 255, 0.2), transparent 34%);
  animation: orbitSweep 4s linear infinite;
}

.codexCore::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 248, 214, 0.2), transparent 68%);
  animation: corePulse 1.8s ease-in-out infinite;
}

.printerFrame {
  filter:
    drop-shadow(18px 24px 17px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 18px rgba(100, 210, 255, 0.16));
}

.printerFrame::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 37px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.9), transparent);
  box-shadow: 0 0 12px rgba(100, 210, 255, 0.6);
  animation: printerLaser 2.4s ease-in-out infinite;
}

.printObject {
  animation: printObjectGlow 2.4s ease-in-out infinite;
}

.deviceDataDial {
  transform: rotateX(0deg) translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

.deviceDataDial .doubleDial,
.deviceDataDial .tripleDial {
  display: none;
}

.doubleRing,
.tripleRing {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 16px rgba(100, 210, 255, 0.18);
}

.doubleRing::before,
.tripleRing::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(transparent 0.08turn, rgba(255, 255, 255, 0.55) 0.11turn, transparent 0.15turn);
  opacity: 0.5;
  animation: orbitSweep 2.6s linear infinite;
}

.doubleCenter,
.tripleCenter {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 22px rgba(100, 210, 255, 0.1);
}

@keyframes deviceSheen {
  0% { transform: translateX(-58%); }
  100% { transform: translateX(58%); }
}

@keyframes dataSweep {
  0% { transform: translateX(-36px); opacity: 0; }
  20%, 70% { opacity: 0.85; }
  100% { transform: translateX(120px); opacity: 0; }
}

@keyframes serverHoloFloat {
  0%, 100% { transform: rotateX(3deg) rotateY(-36deg) translateY(0) translateZ(17px); }
  50% { transform: rotateX(6deg) rotateY(-30deg) translateY(-6px) translateZ(23px); }
}

@keyframes bayScan {
  0% { transform: translateX(-120%); opacity: 0; }
  35%, 70% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes orbitSweep {
  to { transform: rotate(360deg); }
}

@keyframes corePulse {
  0%, 100% { opacity: 0.38; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes printerLaser {
  0%, 100% { transform: translateX(-13px); opacity: 0.42; }
  50% { transform: translateX(13px); opacity: 1; }
}

@keyframes printObjectGlow {
  0%, 100% { box-shadow: 0 0 13px rgba(255, 204, 0, 0.18); transform: skewX(-9deg) translateY(0); }
  50% { box-shadow: 0 0 22px rgba(255, 204, 0, 0.36); transform: skewX(-9deg) translateY(-2px); }
}

.aiServerPanel .serverScene {
  min-height: 160px;
  margin: 0 0 3px;
  perspective: 860px;
  perspective-origin: 52% 34%;
}

.aiServerPanel .serverScene::before {
  inset: 42px 0 2px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(100, 210, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 210, 255, 0.16) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(100, 210, 255, 0.18), transparent 64%);
  background-size: 13px 13px, 13px 13px, 100% 100%;
  opacity: 0.7;
  transform: rotateX(67deg) translateY(22px) translateZ(-24px);
}

.serverCloud {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 7px;
  width: 82px;
  height: 46px;
  transform: translateX(-48%) rotateX(4deg) rotateY(-20deg) translateZ(50px);
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 11px 12px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 16px rgba(100, 210, 255, 0.26));
  animation: cloudHover 4.5s ease-in-out infinite;
}

.serverCloud::before,
.serverCloud::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(100, 210, 255, 0.82);
  box-sizing: border-box;
}

.serverCloud::before {
  inset: 12px 4px 4px;
  border-radius: 22px 22px 18px 18px;
  background:
    linear-gradient(135deg, rgba(242, 250, 255, 0.98), rgba(167, 216, 244, 0.8) 58%, rgba(42, 119, 175, 0.58));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 7px -7px 0 rgba(0, 102, 180, 0.16),
    0 0 18px rgba(100, 210, 255, 0.35);
}

.serverCloud::after {
  left: 10px;
  top: 0;
  width: 62px;
  height: 42px;
  border-bottom: 0;
  border-radius: 38px 38px 0 0;
  background:
    radial-gradient(circle at 31% 58%, rgba(242, 250, 255, 0.98) 0 34%, transparent 35%),
    radial-gradient(circle at 53% 38%, rgba(236, 248, 255, 0.98) 0 38%, transparent 39%),
    radial-gradient(circle at 76% 62%, rgba(223, 242, 255, 0.94) 0 28%, transparent 29%);
}

.cloudSignal {
  position: absolute;
  z-index: 3;
  left: 31px;
  top: 19px;
  width: 26px;
  height: 18px;
  border-top: 3px solid rgba(100, 240, 255, 0.82);
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -7px 0 -3px rgba(100, 240, 255, 0.62);
  animation: cloudSignalPulse 1.9s ease-in-out infinite;
}

.cloudCore {
  position: absolute;
  z-index: 4;
  left: 38px;
  top: 31px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9af8ff;
  box-shadow:
    0 0 0 4px rgba(100, 240, 255, 0.2),
    0 0 18px rgba(100, 240, 255, 0.9);
}

.aiServerPanel .serverTower {
  z-index: 3;
  width: 58px;
  height: 100px;
  margin-left: 3px;
  transform: rotateX(7deg) rotateY(-28deg) translateY(25px) translateZ(18px);
  filter:
    drop-shadow(16px 20px 13px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 16px rgba(100, 210, 255, 0.24));
  animation: serverRackFloat 4.3s ease-in-out infinite;
}

.aiServerPanel .serverTower::before {
  left: -16px;
  right: -20px;
  bottom: -19px;
  height: 28px;
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(143, 225, 255, 0.18), rgba(7, 20, 35, 0.62)),
    linear-gradient(90deg, rgba(100, 210, 255, 0.32), transparent 28%, transparent 72%, rgba(100, 210, 255, 0.26));
  border: 1px solid rgba(100, 210, 255, 0.24);
  transform: rotateX(78deg) translateZ(-12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 22px rgba(100, 210, 255, 0.26);
}

.aiServerPanel .serverTower::after {
  left: -28px;
  right: -30px;
  bottom: -28px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(100, 240, 255, 0.48), transparent 68%);
  filter: blur(5px);
}

.aiServerPanel .serverFace {
  gap: 5px;
  padding: 11px 8px 9px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 10%, transparent 78%, rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(180deg, transparent 0 15px, rgba(100, 210, 255, 0.12) 16px 17px),
    linear-gradient(160deg, #294965, #08131f 74%);
  border-color: rgba(156, 225, 255, 0.24);
}

.aiServerPanel .serverSide {
  right: -30px;
  width: 31px;
  height: 100px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #112539, #06101b);
}

.aiServerPanel .serverTop {
  top: -23px;
  left: 7px;
  width: 58px;
  height: 24px;
  border-radius: 7px;
  background:
    linear-gradient(140deg, rgba(140, 221, 255, 0.32), rgba(18, 48, 72, 0.9)),
    linear-gradient(160deg, #294b67, #102136);
}

.aiServerPanel .serverBay {
  min-height: 17px;
  grid-template-columns: 6px minmax(0, 1fr) 11px;
  gap: 5px;
  padding: 4px 5px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(100, 210, 255, 0.12), rgba(5, 13, 22, 0.56)),
    repeating-linear-gradient(90deg, rgba(100, 210, 255, 0.22) 0 1px, transparent 1px 5px);
  border-color: rgba(139, 221, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.aiServerPanel .serverBayLight {
  width: 5px;
  height: 5px;
  animation: rackLedPulse 1.4s ease-in-out infinite;
}

.aiServerPanel .serverBay:nth-child(3) .serverBayLight { animation-delay: 0.22s; }
.aiServerPanel .serverBay:nth-child(4) .serverBayLight { animation-delay: 0.44s; }

.aiServerPanel .serverVent {
  height: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(156, 225, 255, 0.62) 0 2px, rgba(255, 255, 255, 0.12) 2px 4px);
  box-shadow: 0 0 8px rgba(100, 210, 255, 0.18);
}

.aiServerPanel .serverSlot {
  width: 10px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.86), rgba(100, 210, 255, 0.64));
  box-shadow: 0 0 8px rgba(100, 210, 255, 0.34);
}

.aiServerPanel .serverPorts {
  gap: 4px;
  padding-top: 2px;
}

.aiServerPanel .serverPort {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(122, 226, 255, 0.32);
  border-color: rgba(122, 226, 255, 0.25);
}

.aiServerPanel .serverPort.wide {
  width: 14px;
}

.serverHud {
  left: 3px;
  top: 56px;
  width: 78px;
  padding: 5px;
  gap: 4px;
  transform: rotateX(9deg) rotateY(-18deg) translateZ(64px);
  background:
    linear-gradient(180deg, rgba(10, 25, 40, 0.58), rgba(7, 12, 20, 0.34)),
    radial-gradient(circle at 0 0, rgba(100, 210, 255, 0.18), transparent 58%);
}

.serverHud .hudMetric {
  grid-template-columns: auto minmax(24px, 1fr);
}

.serverHud .hudMetric strong {
  font-size: 9px;
}

@keyframes cloudHover {
  0%, 100% { transform: translateX(-48%) rotateX(4deg) rotateY(-20deg) translateY(0) translateZ(50px); }
  50% { transform: translateX(-48%) rotateX(6deg) rotateY(-16deg) translateY(-3px) translateZ(54px); }
}

@keyframes cloudSignalPulse {
  0%, 100% { opacity: 0.54; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes serverRackFloat {
  0%, 100% { transform: rotateX(7deg) rotateY(-28deg) translateY(25px) translateZ(18px); }
  50% { transform: rotateX(9deg) rotateY(-23deg) translateY(20px) translateZ(22px); }
}

@keyframes rackLedPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.15); }
}

.deviceDataDial,
.codexFoot {
  display: none;
}

.sceneTelemetry {
  display: none;
}

.devicePanel {
  min-height: 262px;
  padding-bottom: 12px;
}

.codexPanel .codexScene,
.printerPanel .printerScene {
  min-height: 166px;
  margin-top: 2px;
  perspective: 880px;
}

.codexPanel .codexHud {
  bottom: 4px;
  left: 7px;
  width: 100px;
  opacity: 0.9;
}

.codexCore {
  width: 110px;
  height: 132px;
  transform-style: preserve-3d;
  animation: brainLift 3.4s ease-in-out infinite;
  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 20px rgba(100, 210, 255, 0.18));
}

.codexCore::before {
  inset: 66px 9px 13px;
  border-radius: 18px 18px 23px 23px;
  border: 1px solid rgba(210, 228, 248, 0.26);
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.82), rgba(159, 184, 209, 0.26) 48%, rgba(8, 16, 27, 0.5)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.18));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -14px 16px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(100, 210, 255, 0.16);
  transform: rotateX(58deg) translateZ(2px);
}

.codexCore::after {
  inset: 58px 25px 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(4, 8, 14, 0.95), rgba(17, 32, 48, 0.48) 60%, transparent 72%);
  box-shadow:
    0 0 18px rgba(100, 210, 255, 0.28),
    inset 0 0 14px rgba(0, 0, 0, 0.6);
  transform: rotateX(64deg) translateZ(16px);
  animation: brainPortPulse 2s ease-in-out infinite;
}

.brainModel {
  position: absolute;
  left: 8px;
  top: 5px;
  width: 94px;
  height: 66px;
  transform: rotateX(5deg) rotateY(-8deg) translateZ(52px);
  filter: drop-shadow(0 0 18px rgba(100, 210, 255, 0.28));
}

.brainModel::before {
  left: 6px;
  right: 7px;
  top: 9px;
  bottom: 6px;
  border: 2px solid rgba(100, 210, 255, 0.95);
  border-radius: 42% 58% 48% 52% / 52% 48% 52% 44%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(97, 192, 255, 0.7) 48%, rgba(25, 82, 150, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset -6px -6px 0 rgba(0, 56, 122, 0.18),
    0 0 22px rgba(100, 210, 255, 0.32);
}

.brainModel::after {
  left: 44px;
  top: 14px;
  width: 3px;
  height: 39px;
  border-radius: 999px;
  background: rgba(10, 69, 151, 0.6);
  box-shadow: 0 0 10px rgba(255, 55, 95, 0.26);
}

.brainLobe {
  top: 10px;
  width: 42px;
  height: 45px;
  border: 2px solid rgba(18, 91, 190, 0.78);
  background:
    radial-gradient(circle at 45% 38%, rgba(255, 255, 255, 0.74), transparent 22%),
    linear-gradient(145deg, rgba(250, 253, 255, 0.86), rgba(86, 180, 255, 0.58));
}

.brainLobe.left {
  left: 7px;
  transform: rotateZ(-8deg) translateZ(24px);
}

.brainLobe.right {
  right: 8px;
  transform: rotateZ(8deg) rotateY(-8deg) translateZ(27px);
}

.brainGroove {
  height: 3px;
  border: 0;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(12, 78, 179, 0.82),
    0 7px 0 0 rgba(255, 55, 95, 0.76),
    0 14px 0 -1px rgba(100, 210, 255, 0.8);
  filter: drop-shadow(0 0 5px rgba(100, 210, 255, 0.28));
}

.brainGroove.g1 { left: 15px; top: 18px; width: 29px; transform: rotate(-17deg); }
.brainGroove.g2 { right: 16px; top: 20px; width: 30px; transform: rotate(16deg); }
.brainGroove.g3 { left: 24px; top: 40px; width: 44px; transform: rotate(-7deg); }

.brainNode {
  width: 7px;
  height: 7px;
  background: #64d2ff;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(100, 210, 255, 0.12),
    0 0 16px currentColor;
  animation: neuralNodeBlink 1.7s ease-in-out infinite;
}

.brainNode.n2 {
  background: #ff375f;
  animation-delay: 0.32s;
}

.brainNode.n3 {
  background: #0a84ff;
  animation-delay: 0.64s;
}

.neuralCircuit {
  position: absolute;
  z-index: 2;
  top: 26px;
  width: 38px;
  height: 54px;
  transform: translateZ(38px);
  pointer-events: none;
}

.neuralCircuit::before,
.neuralCircuit::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  animation: circuitPulse 1.8s linear infinite;
}

.circuitLeft {
  left: -3px;
  color: #64d2ff;
  background:
    linear-gradient(90deg, transparent 0 12px, currentColor 12px 15px, transparent 15px),
    linear-gradient(0deg, transparent 0 16px, currentColor 16px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 4px, currentColor 4px 31px, transparent 31px);
  background-position: 8px 4px, 5px 9px, 0 32px;
  background-size: 36px 8px, 16px 42px, 36px 8px;
  background-repeat: no-repeat;
}

.circuitRight {
  right: -3px;
  color: #ff375f;
  background:
    linear-gradient(90deg, transparent 0 6px, currentColor 6px 34px, transparent 34px),
    linear-gradient(0deg, transparent 0 10px, currentColor 10px 13px, transparent 13px),
    linear-gradient(90deg, transparent 0 15px, currentColor 15px 18px, transparent 18px);
  background-position: 0 9px, 24px 12px, 12px 35px;
  background-size: 38px 8px, 14px 36px, 30px 8px;
  background-repeat: no-repeat;
}

.neuralCircuit::before {
  width: 7px;
  height: 7px;
  right: 1px;
  top: 1px;
}

.neuralCircuit::after {
  width: 6px;
  height: 6px;
  left: 1px;
  bottom: 10px;
}

.brainStem {
  position: absolute;
  z-index: 1;
  left: 51px;
  top: 56px;
  width: 8px;
  height: 35px;
  border-radius: 999px;
  background: linear-gradient(180deg, #64d2ff, #ff375f 55%, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 14px rgba(100, 210, 255, 0.44);
  transform: translateZ(34px);
}

.codexBase {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 9px;
  height: 34px;
  border-radius: 10px 10px 15px 15px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.16)),
    linear-gradient(180deg, rgba(244, 248, 255, 0.78), rgba(50, 67, 86, 0.42));
  border: 1px solid rgba(220, 238, 255, 0.2);
  transform: rotateX(55deg) translateZ(12px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(0, 0, 0, 0.24);
}

.printerPanel .printerScene {
  min-height: 166px;
  perspective-origin: 55% 38%;
}

.printerPanel .printerHud {
  top: 39px;
  right: 4px;
  width: 82px;
  opacity: 0.82;
  transform: rotateX(8deg) rotateY(20deg) translateZ(74px);
}

.printerFrame {
  width: 100px;
  height: 118px;
  transform: rotateX(6deg) rotateY(-28deg) translateY(18px) translateZ(26px);
  transform-style: preserve-3d;
  animation: enclosedPrinterFloat 3.6s ease-in-out infinite;
  filter:
    drop-shadow(17px 24px 15px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 16px rgba(255, 204, 0, 0.14));
}

.printerFrame::before {
  left: 16px;
  right: 20px;
  top: 40px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.95), rgba(100, 210, 255, 0.95), transparent);
  animation: printerLaser 1.8s ease-in-out infinite;
}

.printerShell {
  position: absolute;
  inset: 4px 10px 7px 6px;
  border-radius: 15px 10px 12px 14px;
  background:
    linear-gradient(90deg, #ffd85e 0 16%, transparent 16% 78%, #ffd85e 78% 93%, transparent 93%),
    linear-gradient(180deg, #1d252c, #070b0f 18%, #111821 82%, #07090d);
  border: 2px solid rgba(244, 248, 255, 0.16);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 0 rgba(0, 0, 0, 0.34);
  transform: translateZ(8px);
}

.printerDoor {
  position: absolute;
  left: 23px;
  top: 24px;
  width: 48px;
  height: 58px;
  border-radius: 5px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(160, 181, 196, 0.18), rgba(14, 22, 31, 0.62));
  border: 1px solid rgba(220, 238, 255, 0.24);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(100, 210, 255, 0.1);
  transform: translateZ(18px);
}

.printerSidePanel {
  position: absolute;
  right: -8px;
  top: 12px;
  width: 24px;
  height: 94px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 216, 94, 0.95), rgba(255, 216, 94, 0.86) 44%, rgba(15, 18, 22, 0.86) 45%),
    linear-gradient(180deg, #252b31, #070a0e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotateY(64deg) translateZ(18px);
  box-shadow: inset -4px 0 7px rgba(0, 0, 0, 0.28);
}

.filamentLoop {
  position: absolute;
  left: 42px;
  top: -10px;
  width: 24px;
  height: 28px;
  border: 4px solid rgba(15, 20, 26, 0.96);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  transform: translateZ(2px);
}

.printerBeam.top {
  left: 22px;
  top: 22px;
  width: 58px;
  height: 5px;
  background: linear-gradient(90deg, #222a31, #e8edf3 46%, #20262d);
  transform: translateZ(23px);
}

.printerBeam.left,
.printerBeam.right {
  top: 18px;
  height: 81px;
  width: 6px;
  background: linear-gradient(180deg, #ffd85e, #dca53a 54%, #22272e);
  transform: translateZ(22px);
}

.printerBeam.left { left: 10px; }
.printerBeam.right { right: 17px; }

.gantryRail {
  position: absolute;
  left: 22px;
  top: 42px;
  width: 53px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #13181f, #87909a, #11161c);
  transform: translateZ(28px);
  box-shadow: 0 0 8px rgba(100, 210, 255, 0.16);
}

.printHead {
  left: 42px;
  top: 35px;
  width: 17px;
  height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #f1c85c, #8a5c14),
    linear-gradient(160deg, #2a3c55, #101b2a);
  transform: translateZ(35px);
  animation: enclosedHeadMove 1.7s ease-in-out infinite;
}

.printHead::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -7px;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: #ffcc00;
  box-shadow: 0 0 10px #ffcc00;
}

.printBed {
  left: 25px;
  right: 26px;
  bottom: 28px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(24, 28, 34, 0.96), rgba(255, 216, 94, 0.3));
  transform: translateZ(26px);
  animation: printBedMotion 2.2s ease-in-out infinite;
}

.printObject {
  left: 42px;
  bottom: 42px;
  width: 14px;
  height: 16px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #ffe076, #ff9d2f);
  transform: translateZ(30px);
  animation: printObjectGrow 2.4s ease-in-out infinite;
}

.printerScreen {
  position: absolute;
  left: 40px;
  bottom: 13px;
  width: 24px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffd85e, #8d671f);
  transform: translateZ(25px);
  box-shadow: 0 0 9px rgba(255, 204, 0, 0.22);
}

.printerStatusLamp {
  position: absolute;
  right: 16px;
  bottom: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 10px #30d158;
  transform: translateZ(26px);
  animation: rackLedPulse 1.2s ease-in-out infinite;
}

@keyframes brainLift {
  0%, 100% { transform: translateY(0) rotateY(-2deg); }
  50% { transform: translateY(-5px) rotateY(4deg); }
}

@keyframes brainPortPulse {
  0%, 100% { opacity: 0.72; transform: rotateX(64deg) translateZ(16px) scale(0.95); }
  50% { opacity: 1; transform: rotateX(64deg) translateZ(17px) scale(1.06); }
}

@keyframes neuralNodeBlink {
  0%, 100% { opacity: 0.58; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; }
}

@keyframes enclosedPrinterFloat {
  0%, 100% { transform: rotateX(6deg) rotateY(-28deg) translateY(18px) translateZ(26px); }
  50% { transform: rotateX(8deg) rotateY(-23deg) translateY(14px) translateZ(30px); }
}

@keyframes enclosedHeadMove {
  0%, 100% { transform: translateX(-14px) translateZ(35px); }
  50% { transform: translateX(14px) translateZ(35px); }
}

@keyframes printBedMotion {
  0%, 100% { transform: translateY(0) translateZ(26px); }
  50% { transform: translateY(5px) translateZ(26px); }
}

@keyframes printObjectGrow {
  0%, 100% { height: 12px; box-shadow: 0 0 12px rgba(255, 204, 0, 0.22); }
  50% { height: 20px; box-shadow: 0 0 22px rgba(255, 204, 0, 0.42); }
}

.workstationStage {
  position: relative;
  display: grid;
  place-items: center;
  height: 146px;
  margin: 7px -2px -8px;
  overflow: hidden;
  perspective: 760px;
}

.workstationHero {
  position: absolute;
  inset: auto auto -106px 50%;
  display: block;
  width: min(88%, 350px);
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: 0.22;
  filter: saturate(1.08) contrast(1.04);
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}

.liveWorkstation {
  position: relative;
  z-index: 2;
  width: min(92%, 250px);
  height: 136px;
  transform-style: preserve-3d;
  transform: translateY(-2px) rotateX(1deg);
  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 18px rgba(100, 210, 255, 0.14));
}

.liveDesk {
  position: absolute;
  left: 26px;
  right: 24px;
  bottom: 18px;
  height: 52px;
  border-radius: 13px 13px 9px 9px;
  background:
    linear-gradient(145deg, rgba(255, 225, 160, 0.22), transparent 31%),
    linear-gradient(180deg, #9b6330, #5a351e);
  border: 1px solid rgba(255, 219, 154, 0.24);
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 203, 0.28),
    inset 0 -13px 16px rgba(38, 20, 10, 0.35),
    0 18px 22px rgba(0, 0, 0, 0.26);
  transform: rotateX(58deg) rotateZ(-5deg) translateZ(-12px);
}

.liveDesk::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 9px;
  top: 13px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 178, 0.38), transparent);
}

.liveMonitor {
  position: absolute;
  left: 79px;
  top: 7px;
  width: 86px;
  height: 58px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(177, 238, 255, 0.95), rgba(25, 152, 218, 0.8) 46%, rgba(5, 35, 64, 0.95)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent 33%);
  border: 5px solid rgba(17, 25, 34, 0.96);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.22),
    0 10px 18px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(100, 210, 255, 0.38);
  transform: rotateX(3deg) rotateY(-12deg) translateZ(34px);
}

.liveMonitor::before {
  content: "";
  position: absolute;
  left: 35px;
  bottom: -17px;
  width: 16px;
  height: 15px;
  background: linear-gradient(180deg, #2b333d, #11171e);
  border-radius: 0 0 4px 4px;
}

.liveMonitor::after {
  content: "";
  position: absolute;
  left: 21px;
  bottom: -21px;
  width: 46px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #11171e, #3a4551, #11171e);
}

.screenLine {
  position: absolute;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 248, 255, 0.74);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.38);
  animation: screenCode 1.8s ease-in-out infinite;
}

.screenLine.l1 { top: 13px; width: 48px; }
.screenLine.l2 { top: 24px; width: 35px; animation-delay: 0.2s; }
.screenLine.l3 { top: 35px; width: 54px; animation-delay: 0.42s; }

.screenPulse {
  position: absolute;
  right: 12px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f4f8ff;
  box-shadow: 0 0 14px #fff, 0 0 24px rgba(100, 210, 255, 0.82);
  animation: screenPulse 1.7s ease-in-out infinite;
}

.liveKeyboard {
  position: absolute;
  left: 86px;
  bottom: 36px;
  width: 76px;
  height: 27px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 5px;
  border-radius: 7px;
  background: linear-gradient(145deg, #252d36, #080d12);
  border: 1px solid rgba(220, 238, 255, 0.16);
  transform: rotateX(58deg) rotateZ(-6deg) translateZ(20px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28);
}

.liveKeyboard i {
  min-width: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(220, 238, 255, 0.32), rgba(34, 48, 61, 0.8));
  animation: keyTap 0.72s ease-in-out infinite;
}

.liveKeyboard i:nth-child(2n) { animation-delay: 0.16s; }
.liveKeyboard i:nth-child(3n) { animation-delay: 0.32s; }

.coffeeCup {
  position: absolute;
  right: 51px;
  bottom: 46px;
  width: 23px;
  height: 25px;
  border-radius: 6px 6px 9px 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(180deg, #f5f8ff, #a8dfff);
  border: 1px solid rgba(244, 248, 255, 0.62);
  box-shadow:
    inset 0 -5px 0 rgba(20, 122, 166, 0.18),
    0 7px 12px rgba(0, 0, 0, 0.24),
    0 0 13px rgba(100, 210, 255, 0.22);
  transform-origin: 50% 90%;
  animation: coffeeSip 6.4s ease-in-out infinite;
}

.coffeeCup::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 8px;
  width: 10px;
  height: 9px;
  border: 2px solid rgba(217, 244, 255, 0.82);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.coffeeCup::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 4px;
  border-radius: 50%;
  background: rgba(83, 45, 25, 0.78);
}

.coffeeSteam {
  position: absolute;
  left: 6px;
  top: -13px;
  width: 7px;
  height: 15px;
  border-radius: 999px;
  border-left: 2px solid rgba(244, 248, 255, 0.58);
  transform: rotate(18deg);
  animation: steamRise 2.2s ease-in-out infinite;
}

.coffeeSteam.s2 {
  left: 13px;
  height: 13px;
  animation-delay: 0.42s;
}

.livePerson {
  position: absolute;
  left: 73px;
  bottom: 19px;
  width: 106px;
  height: 98px;
  transform-style: preserve-3d;
  animation: personBreath 3.2s ease-in-out infinite;
}

.personBody,
.personHead,
.personHair,
.arm,
.hand {
  position: absolute;
  display: block;
}

.personBody {
  left: 31px;
  bottom: 2px;
  width: 49px;
  height: 57px;
  border-radius: 23px 23px 15px 15px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(180deg, #23b95a, #0e7135);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 10px 14px rgba(0, 0, 0, 0.22);
}

.personHead {
  left: 39px;
  top: 2px;
  width: 33px;
  height: 35px;
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(180deg, #ffd4aa, #df8e59);
  animation: headCoffee 6.4s ease-in-out infinite;
}

.personHair {
  left: 36px;
  top: -1px;
  width: 38px;
  height: 23px;
  border-radius: 50% 50% 38% 38%;
  background: linear-gradient(160deg, #3b2518, #17100c);
  transform: rotate(-7deg);
  animation: headCoffee 6.4s ease-in-out infinite;
}

.arm {
  width: 48px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #12843d 0 37%, #ffd2a5 38% 100%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.18);
}

.armLeft {
  left: 17px;
  bottom: 37px;
  transform-origin: 8px 50%;
  animation: leftTypingArm 0.78s ease-in-out infinite;
}

.armRight {
  left: 54px;
  bottom: 36px;
  transform-origin: 8px 50%;
  animation: rightTypingCoffeeArm 6.4s ease-in-out infinite;
}

.hand {
  width: 13px;
  height: 10px;
  border-radius: 999px;
  background: #ffd2a5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.handLeft {
  left: 56px;
  bottom: 33px;
  animation: leftTypingHand 0.78s ease-in-out infinite;
}

.handRight {
  left: 96px;
  bottom: 34px;
  animation: rightTypingCoffeeHand 6.4s ease-in-out infinite;
}

@keyframes screenCode {
  0%, 100% { opacity: 0.35; transform: scaleX(0.72); transform-origin: left; }
  45% { opacity: 0.95; transform: scaleX(1); }
}

@keyframes screenPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes keyTap {
  0%, 100% { transform: translateY(0); opacity: 0.58; }
  50% { transform: translateY(1px); opacity: 1; }
}

@keyframes steamRise {
  0% { opacity: 0; transform: translateY(6px) rotate(14deg) scale(0.88); }
  38% { opacity: 0.72; }
  100% { opacity: 0; transform: translateY(-8px) rotate(24deg) scale(1.08); }
}

@keyframes coffeeSip {
  0%, 47%, 88%, 100% { transform: translate3d(0, 0, 26px) rotate(0deg); }
  57% { transform: translate3d(-20px, -25px, 38px) rotate(-12deg); }
  66%, 73% { transform: translate3d(-41px, -50px, 48px) rotate(-22deg); }
  82% { transform: translate3d(-18px, -22px, 38px) rotate(-10deg); }
}

@keyframes personBreath {
  0%, 100% { transform: translateY(0) translateZ(42px); }
  50% { transform: translateY(-2px) translateZ(42px); }
}

@keyframes headCoffee {
  0%, 46%, 86%, 100% { transform: translateY(0) rotate(0deg); }
  63%, 73% { transform: translateY(2px) rotate(7deg); }
}

@keyframes leftTypingArm {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(2px); }
}

@keyframes leftTypingHand {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50% { transform: translate(2px, 3px) rotate(0deg); }
}

@keyframes rightTypingCoffeeArm {
  0%, 42%, 88%, 100% { transform: rotate(-15deg) translate(0, 0); }
  12%, 32% { transform: rotate(-8deg) translate(0, 2px); }
  56% { transform: rotate(-54deg) translate(8px, -7px); }
  66%, 73% { transform: rotate(-83deg) translate(10px, -17px); }
  82% { transform: rotate(-42deg) translate(5px, -6px); }
}

@keyframes rightTypingCoffeeHand {
  0%, 42%, 88%, 100% { transform: translate(0, 0) rotate(-8deg); }
  12%, 32% { transform: translate(-2px, 3px) rotate(1deg); }
  56% { transform: translate(-23px, -23px) rotate(-24deg); }
  66%, 73% { transform: translate(-41px, -48px) rotate(-32deg); }
  82% { transform: translate(-19px, -21px) rotate(-18deg); }
}

@media (max-width: 390px) {
  .workstationStage {
    height: 136px;
    margin-top: 5px;
  }

  .liveWorkstation {
    width: min(95%, 232px);
    transform: translateY(-4px) scale(0.96);
  }

  .workstationHero {
    width: min(86%, 320px);
    bottom: -98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liveWorkstation *,
  .coffeeCup,
  .livePerson {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.workstationStage {
  height: clamp(196px, 58vw, 238px);
  margin: 6px 0 -6px;
  overflow: hidden;
  perspective: none;
}

.workstationFrame {
  position: relative;
  width: clamp(196px, 58vw, 238px);
  aspect-ratio: 1;
  transform: translateY(-1px);
}

.workstationFrame .workstationHero {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1;
  filter: saturate(1.08) contrast(1.03) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.26));
  transform: none;
}

.motionHand {
  position: absolute;
  z-index: 3;
  width: 5.8%;
  height: 3.4%;
  border-radius: 999px 999px 7px 7px;
  background:
    radial-gradient(circle at 72% 32%, rgba(255, 255, 255, 0.42), transparent 19%),
    linear-gradient(135deg, #ffd7ab, #d68752);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 3px 5px rgba(0, 0, 0, 0.18);
  transform-origin: 28% 54%;
  animation: originalTypingTap 0.62s ease-in-out infinite;
}

.handTopLeft {
  left: 21.6%;
  top: 22.8%;
  transform: rotate(-17deg);
}

.handTopRight {
  left: 73.8%;
  top: 21.8%;
  transform: rotate(-8deg);
  animation-delay: 0.12s;
}

.handBottomLeft {
  left: 21.8%;
  top: 72.4%;
  transform: rotate(-18deg);
  animation-delay: 0.22s;
}

.handBottomRight {
  left: 72.4%;
  top: 70.4%;
  transform: rotate(-14deg);
  animation-delay: 0.34s;
}

.stageCoffee {
  position: absolute;
  z-index: 4;
  width: 5.4%;
  height: 6.2%;
  border-radius: 23% 23% 38% 38%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(180deg, #f7fbff, #9edfff);
  border: 1px solid rgba(244, 248, 255, 0.82);
  box-shadow:
    inset 0 -0.28em 0 rgba(10, 132, 255, 0.16),
    0 0.34em 0.62em rgba(0, 0, 0, 0.24),
    0 0 0.65em rgba(100, 210, 255, 0.26);
  transform-origin: 50% 90%;
}

.stageCoffee::before {
  content: "";
  position: absolute;
  right: -36%;
  top: 34%;
  width: 42%;
  height: 39%;
  border: 0.12em solid rgba(227, 246, 255, 0.9);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.stageCoffee::after {
  content: "";
  position: absolute;
  left: 23%;
  right: 22%;
  top: 18%;
  height: 13%;
  border-radius: 50%;
  background: rgba(78, 43, 25, 0.78);
}

.stageCoffee i,
.stageCoffee b {
  position: absolute;
  left: 22%;
  top: -70%;
  width: 34%;
  height: 78%;
  border-left: 0.12em solid rgba(244, 248, 255, 0.62);
  border-radius: 999px;
  transform: rotate(15deg);
  animation: originalSteam 2.1s ease-in-out infinite;
}

.stageCoffee b {
  left: 55%;
  height: 66%;
  animation-delay: 0.46s;
}

.coffeeTopRight {
  left: 63.2%;
  top: 20.2%;
  animation: originalCoffeeSip 6.2s ease-in-out infinite;
}

.coffeeBottomRight {
  left: 61.6%;
  top: 68.6%;
  transform: rotate(-4deg);
}

.coffeeReachArm {
  position: absolute;
  z-index: 5;
  left: 73%;
  top: 21.8%;
  width: 10.5%;
  height: 2.8%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f25a32 0 36%, #ffd2a2 37% 100%);
  box-shadow: 0 0.24em 0.42em rgba(0, 0, 0, 0.2);
  transform-origin: 10% 50%;
  opacity: 0;
  animation: originalCoffeeReach 6.2s ease-in-out infinite;
}

@keyframes originalTypingTap {
  0%, 100% { translate: 0 0; scale: 1; filter: brightness(1); }
  50% { translate: 0.08em 0.16em; scale: 0.96; filter: brightness(1.12); }
}

@keyframes originalSteam {
  0% { opacity: 0; transform: translateY(34%) rotate(11deg) scale(0.9); }
  36% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-46%) rotate(24deg) scale(1.1); }
}

@keyframes originalCoffeeSip {
  0%, 45%, 88%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  56% { transform: translate3d(88%, -58%, 0) rotate(-15deg); }
  66%, 74% { transform: translate3d(162%, -116%, 0) rotate(-25deg); }
  83% { transform: translate3d(68%, -46%, 0) rotate(-12deg); }
}

@keyframes originalCoffeeReach {
  0%, 47%, 88%, 100% { opacity: 0; transform: rotate(-8deg) translate(0, 0); }
  55% { opacity: 1; transform: rotate(-29deg) translate(6%, -34%); }
  66%, 74% { opacity: 1; transform: rotate(-54deg) translate(24%, -90%); }
  83% { opacity: 0.7; transform: rotate(-26deg) translate(8%, -32%); }
}

@media (max-width: 390px) {
  .workstationStage {
    height: clamp(188px, 56vw, 222px);
    margin-top: 4px;
  }

  .workstationFrame {
    width: clamp(188px, 56vw, 222px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motionHand,
  .stageCoffee,
  .stageCoffee i,
  .stageCoffee b,
  .coffeeReachArm {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.workstationStage {
  height: clamp(176px, 50vw, 220px);
  margin: 2px 0 -10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: none;
}

.workstationSvg {
  width: min(100%, 390px);
  height: auto;
  display: block;
  overflow: visible;
}

.svgGround {
  fill: rgba(0, 0, 0, 0.28);
  filter: blur(3px);
}

.deskTop {
  fill: url(#deskTopGrad);
  stroke: rgba(255, 225, 174, 0.32);
  stroke-width: 1.4;
}

.deskFront,
.deskLeft {
  fill: url(#deskSideGrad);
}

.deskFront {
  filter: brightness(0.92);
}

.deskLeft {
  filter: brightness(0.78);
}

.deskEdge {
  fill: none;
  stroke: rgba(255, 235, 195, 0.38);
  stroke-width: 2;
  stroke-linecap: round;
}

.monitorStand,
.monitorFoot,
.monitorBack {
  fill: #1a222c;
}

.monitorBack {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}

.monitorScreen {
  fill: url(#screenGrad);
  stroke: rgba(216, 249, 255, 0.7);
  stroke-width: 1.2;
  filter: url(#blueGlow);
}

.screenSheen {
  fill: rgba(255, 255, 255, 0.28);
}

.screenCode path {
  fill: none;
  stroke: rgba(244, 248, 255, 0.8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 66;
  animation: svgCodeFlow 2.2s ease-in-out infinite;
}

.screenCode path:nth-child(2) { animation-delay: 0.18s; }
.screenCode path:nth-child(3) { animation-delay: 0.36s; }
.screenCode path:nth-child(4) { animation-delay: 0.52s; }

.screenStar {
  fill: #fff;
  filter: url(#blueGlow);
  animation: svgGlowPulse 1.8s ease-in-out infinite;
}

.keyboardBase {
  fill: #151c25;
  stroke: rgba(220, 238, 255, 0.24);
  stroke-width: 1.4;
}

.keyRows path {
  fill: none;
  stroke: rgba(216, 232, 244, 0.42);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
}

.activeKeys rect {
  fill: rgba(100, 210, 255, 0.82);
  animation: svgKeyTap 0.7s ease-in-out infinite;
}

.activeKeys rect:nth-child(2) { animation-delay: 0.15s; }
.activeKeys rect:nth-child(3) { animation-delay: 0.3s; }

.chairBack {
  fill: #0a84ff;
}

.chairSeat {
  fill: #0766c9;
}

.chairPost,
.chairLegs {
  fill: none;
  stroke: #1b222b;
  stroke-width: 7;
  stroke-linecap: round;
}

.body {
  fill: url(#shirtGrad);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.2;
}

.head,
.neck,
.typingHand {
  fill: url(#skinGrad);
}

.hair {
  fill: #2a1a12;
}

.svgPerson {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: svgPersonBreath 3.4s ease-in-out infinite;
}

.leftArm,
.rightArm {
  transform-box: fill-box;
  transform-origin: 88% 18%;
}

.leftArm {
  animation: svgLeftTyping 0.72s ease-in-out infinite;
}

.rightArm {
  animation: svgRightWork 6.2s ease-in-out infinite;
}

.sleeve {
  fill: none;
  stroke: #16a34a;
  stroke-width: 15;
  stroke-linecap: round;
}

.forearm {
  fill: none;
  stroke: url(#skinGrad);
  stroke-width: 12;
  stroke-linecap: round;
}

.typingHand {
  animation: svgFingerPress 0.72s ease-in-out infinite;
}

.rightArm .typingHand {
  animation-duration: 6.2s;
}

.saucer {
  fill: rgba(216, 245, 255, 0.55);
}

.cup,
.cupHandle {
  fill: #effaff;
  stroke: rgba(100, 210, 255, 0.65);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cup {
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.24));
}

.steam path,
.steamLine {
  fill: none;
  stroke: rgba(244, 248, 255, 0.68);
  stroke-width: 3;
  stroke-linecap: round;
  animation: svgSteam 2.2s ease-in-out infinite;
}

.steam path:nth-child(2) {
  animation-delay: 0.35s;
}

.coffeeOnDesk {
  animation: svgDeskCupState 6.2s ease-in-out infinite;
}

.coffeeSipCup {
  opacity: 0;
  transform: translate(309px, 91px) rotate(-8deg);
  transform-origin: center;
  animation: svgCupSip 6.2s ease-in-out infinite;
}

@keyframes svgCodeFlow {
  0%, 100% { opacity: 0.35; stroke-dashoffset: 62; }
  48% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes svgGlowPulse {
  0%, 100% { transform: scale(0.72); opacity: 0.55; }
  50% { transform: scale(1.24); opacity: 1; }
}

@keyframes svgKeyTap {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px); }
}

@keyframes svgPersonBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes svgLeftTyping {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(-5deg) translate(-2px, 3px); }
}

@keyframes svgRightWork {
  0%, 42%, 88%, 100% { transform: rotate(0deg) translate(0, 0); }
  12%, 30% { transform: rotate(4deg) translate(2px, 2px); }
  53% { transform: rotate(-18deg) translate(22px, -18px); }
  64%, 74% { transform: rotate(-54deg) translate(58px, -54px); }
  83% { transform: rotate(-14deg) translate(18px, -15px); }
}

@keyframes svgFingerPress {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, 3px); }
}

@keyframes svgSteam {
  0% { opacity: 0; transform: translateY(8px); }
  35% { opacity: 0.72; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes svgDeskCupState {
  0%, 45%, 88%, 100% { opacity: 1; transform: translate(0, 0); }
  56%, 76% { opacity: 0; transform: translate(10px, -8px); }
}

@keyframes svgCupSip {
  0%, 46%, 89%, 100% {
    opacity: 0;
    transform: translate(309px, 91px) rotate(-8deg);
  }
  54% {
    opacity: 1;
    transform: translate(331px, 70px) rotate(-14deg);
  }
  65%, 75% {
    opacity: 1;
    transform: translate(285px, 82px) rotate(-24deg);
  }
  84% {
    opacity: 1;
    transform: translate(323px, 78px) rotate(-12deg);
  }
}

@media (max-width: 390px) {
  .workstationStage {
    height: clamp(166px, 48vw, 204px);
  }

  .workstationSvg {
    width: min(104%, 370px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workstationSvg *,
  .workstationSvg {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.workstationStage {
  height: clamp(248px, 72vw, 318px);
  margin: 4px -2px -8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.workstationMatrix {
  width: min(100%, 390px);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 2px 4px 6px;
}

.stationPod {
  --shirt: #21bf58;
  --chair: #0a84ff;
  position: relative;
  min-width: 0;
  transform-style: preserve-3d;
  animation: podFloat 4.8s ease-in-out infinite;
}

.stationPod:nth-child(2),
.stationPod:nth-child(4) {
  animation-delay: -1.4s;
}

.stationRed { --shirt: #f04f2f; }
.stationBlack { --shirt: #10151c; }
.chairYellow { --chair: #ffbf22; }
.chairBlue { --chair: #0a84ff; }

.podShadow {
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 4%;
  height: 15%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  filter: blur(6px);
}

.isoDeskTop,
.isoDeskFace,
.isoMonitor,
.isoKeyboard,
.isoMouse,
.isoCoffee,
.isoChair,
.isoPerson,
.isoPerson > i {
  position: absolute;
  display: block;
}

.isoDeskTop {
  left: 8%;
  top: 17%;
  width: 76%;
  height: 45%;
  clip-path: polygon(18% 0, 100% 24%, 78% 100%, 0 70%);
  background:
    linear-gradient(145deg, rgba(255, 240, 204, 0.32), transparent 31%),
    linear-gradient(135deg, #e0a15a, #9b5d2d 58%, #6f3e1f);
  border-radius: 9px;
  box-shadow:
    inset 0 2px 0 rgba(255, 235, 190, 0.26),
    0 10px 12px rgba(0, 0, 0, 0.18);
}

.isoDeskTop::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 10%;
  top: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 184, 0.46), transparent);
}

.isoDeskFace.left {
  left: 8.5%;
  top: 48%;
  width: 17%;
  height: 37%;
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 72%);
  background: linear-gradient(180deg, #8d542a, #4a2817);
}

.isoDeskFace.front {
  left: 25%;
  top: 59%;
  width: 59%;
  height: 27%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 95%);
  background: linear-gradient(180deg, #7e4a25, #3f2114);
}

.isoMonitor {
  left: 31%;
  top: 4%;
  width: 32%;
  height: 33%;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 32%),
    linear-gradient(180deg, #9af5ff, #18b8ef 50%, #083a67);
  border: 5px solid #18212b;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.18),
    0 8px 12px rgba(0, 0, 0, 0.26),
    0 0 14px rgba(100, 210, 255, 0.45);
  transform: rotate(-10deg) skewY(-7deg);
}

.isoMonitor::before {
  content: "";
  position: absolute;
  left: 43%;
  bottom: -29%;
  width: 16%;
  height: 30%;
  border-radius: 0 0 3px 3px;
  background: #222c36;
}

.isoMonitor::after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -38%;
  width: 58%;
  height: 9%;
  border-radius: 999px;
  background: linear-gradient(90deg, #121920, #465260, #121920);
}

.isoMonitor i,
.isoMonitor b {
  position: absolute;
  left: 16%;
  width: 58%;
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 248, 255, 0.76);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.45);
  animation: codeScan 1.8s ease-in-out infinite;
}

.isoMonitor i { top: 28%; }
.isoMonitor b { top: 48%; width: 42%; animation-delay: 0.28s; }

.isoKeyboard {
  left: 35%;
  top: 47%;
  width: 31%;
  height: 16%;
  clip-path: polygon(0 20%, 78% 0, 100% 56%, 20% 100%);
  background: linear-gradient(145deg, #252d35, #090e13);
  border: 1px solid rgba(220, 238, 255, 0.18);
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.22);
}

.isoKeyboard i {
  position: absolute;
  width: 20%;
  height: 13%;
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.8);
  animation: keyPulse 0.72s ease-in-out infinite;
}

.isoKeyboard i:nth-child(1) { left: 25%; top: 31%; }
.isoKeyboard i:nth-child(2) { left: 42%; top: 42%; animation-delay: 0.18s; }
.isoKeyboard i:nth-child(3) { left: 58%; top: 52%; animation-delay: 0.34s; }

.isoMouse {
  left: 22%;
  top: 49%;
  width: 13%;
  height: 14%;
  border-radius: 48% 48% 55% 55%;
  background: linear-gradient(145deg, #d7e2eb, #75818e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 6px rgba(0, 0, 0, 0.2);
  transform: rotate(-18deg);
}

.isoCoffee {
  left: 69%;
  top: 43%;
  width: 11%;
  height: 15%;
  border-radius: 18% 18% 36% 36%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), transparent 44%),
    linear-gradient(180deg, #f8fdff, #9be5ff);
  border: 1px solid rgba(244, 248, 255, 0.74);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.22), 0 0 10px rgba(100, 210, 255, 0.28);
  transform-origin: 50% 100%;
}

.coffeeActive .isoCoffee {
  animation: stationCoffeeSip 6s ease-in-out infinite;
}

.isoCoffee::before {
  content: "";
  position: absolute;
  right: -38%;
  top: 33%;
  width: 43%;
  height: 38%;
  border: 2px solid rgba(230, 248, 255, 0.88);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.isoCoffee::after {
  content: "";
  position: absolute;
  left: 23%;
  top: 16%;
  width: 54%;
  height: 12%;
  border-radius: 50%;
  background: rgba(77, 43, 24, 0.82);
}

.isoCoffee i,
.isoCoffee b {
  position: absolute;
  left: 20%;
  top: -63%;
  width: 32%;
  height: 70%;
  border-left: 2px solid rgba(244, 248, 255, 0.66);
  border-radius: 999px;
  animation: coffeeSteamRise 2.2s ease-in-out infinite;
}

.isoCoffee b {
  left: 55%;
  height: 60%;
  animation-delay: 0.42s;
}

.isoChair {
  right: 8%;
  bottom: 8%;
  width: 38%;
  height: 39%;
  border-radius: 16px 16px 12px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 35%),
    linear-gradient(180deg, var(--chair), color-mix(in srgb, var(--chair) 72%, #000));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 9px 10px rgba(0, 0, 0, 0.24);
  transform: skewY(-8deg);
}

.isoChair::after {
  content: "";
  position: absolute;
  left: 40%;
  bottom: -23%;
  width: 18%;
  height: 28%;
  background: #121820;
  border-radius: 999px;
  box-shadow:
    -18px 17px 0 -4px #121820,
    18px 17px 0 -4px #121820;
}

.isoPerson {
  right: 15%;
  bottom: 23%;
  width: 39%;
  height: 55%;
  animation: stationBreath 3.2s ease-in-out infinite;
}

.isoBody {
  left: 24%;
  bottom: 0;
  width: 49%;
  height: 56%;
  border-radius: 45% 45% 22% 22%;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.22), transparent 29%),
    linear-gradient(180deg, var(--shirt), color-mix(in srgb, var(--shirt) 68%, #000));
}

.isoHead {
  left: 35%;
  top: 6%;
  width: 31%;
  height: 29%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 32%, rgba(255, 255, 255, 0.4), transparent 18%),
    linear-gradient(145deg, #ffd8ad, #d88953);
}

.isoHair {
  left: 31%;
  top: 2%;
  width: 40%;
  height: 21%;
  border-radius: 50% 50% 38% 38%;
  background: linear-gradient(145deg, #4b2b16, #17100c);
}

.stationBlack .isoHair,
.stationRed .isoHair {
  background: linear-gradient(145deg, #33383e, #0d1014);
}

.isoArm {
  width: 47%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--shirt) 0 38%, #ffd4a6 39% 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
  transform-origin: 12% 50%;
}

.isoArm.left {
  left: -1%;
  top: 53%;
  transform: rotate(20deg);
  animation: stationLeftType 0.7s ease-in-out infinite;
}

.isoArm.right {
  left: 39%;
  top: 51%;
  transform: rotate(-24deg);
  animation: stationRightType 0.78s ease-in-out infinite;
}

.coffeeActive .isoArm.right {
  animation: stationRightCoffee 6s ease-in-out infinite;
}

@keyframes podFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes codeScan {
  0%, 100% { opacity: 0.36; transform: scaleX(0.62); transform-origin: left; }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes keyPulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(1px); }
}

@keyframes coffeeSteamRise {
  0% { opacity: 0; transform: translateY(6px) rotate(12deg); }
  38% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-8px) rotate(24deg); }
}

@keyframes stationBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes stationLeftType {
  0%, 100% { transform: rotate(20deg) translate(0, 0); }
  50% { transform: rotate(13deg) translate(1px, 2px); }
}

@keyframes stationRightType {
  0%, 100% { transform: rotate(-24deg) translate(0, 0); }
  50% { transform: rotate(-16deg) translate(-1px, 2px); }
}

@keyframes stationRightCoffee {
  0%, 42%, 88%, 100% { transform: rotate(-24deg) translate(0, 0); }
  12%, 30% { transform: rotate(-16deg) translate(-1px, 2px); }
  54% { transform: rotate(-52deg) translate(8px, -10px); }
  65%, 75% { transform: rotate(-82deg) translate(12px, -21px); }
  84% { transform: rotate(-45deg) translate(7px, -9px); }
}

@keyframes stationCoffeeSip {
  0%, 45%, 88%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: 1; }
  55% { transform: translate(18%, -32%) rotate(-14deg); opacity: 1; }
  65%, 75% { transform: translate(-62%, -92%) rotate(-22deg); opacity: 1; }
  84% { transform: translate(9%, -26%) rotate(-10deg); opacity: 1; }
}

@media (max-width: 390px) {
  .workstationStage {
    height: clamp(230px, 70vw, 292px);
  }

  .workstationMatrix {
    gap: 7px 13px;
    padding-inline: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workstationMatrix *,
  .stationPod {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Integrated room composition for the four workstation scene. */
.workstationStage {
  height: clamp(252px, 70vw, 322px);
  margin: 0 -6px -10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  perspective: 780px;
  isolation: isolate;
}

.workstationStage::before,
.workstationStage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.workstationStage::before {
  width: min(104%, 430px);
  height: 62%;
  top: 3%;
  border-radius: 34px 34px 42px 42px;
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.74), transparent 22%),
    radial-gradient(circle at 76% 24%, rgba(157, 220, 255, 0.34), transparent 24%),
    linear-gradient(180deg, rgba(247, 250, 255, 0.92), rgba(225, 234, 245, 0.58));
  box-shadow: inset 0 -42px 52px rgba(115, 128, 150, 0.14);
  z-index: -3;
}

.workstationStage::after {
  width: min(108%, 442px);
  height: 64%;
  bottom: 1%;
  border-radius: 50%;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.7), transparent 27%),
    repeating-linear-gradient(30deg, rgba(123, 137, 159, 0.12) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(150deg, rgba(123, 137, 159, 0.1) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, #d9e0ea, #b8c3d1 55%, #8f9cac);
  box-shadow:
    0 22px 30px rgba(33, 42, 54, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -28px 42px rgba(67, 79, 96, 0.18);
  transform: rotateX(58deg) translateY(28px);
  transform-origin: 50% 100%;
  z-index: -2;
}

.workstationMatrix {
  position: relative;
  width: min(100%, 408px);
  height: min(100%, 318px);
  display: block;
  padding: 0;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
}

.workstationMatrix::before,
.workstationMatrix::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  pointer-events: none;
}

.workstationMatrix::before {
  top: 14%;
  height: 38%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(70, 98, 126, 0.14), transparent 66%);
  filter: blur(7px);
  transform: rotate(-8deg);
  z-index: 0;
}

.workstationMatrix::after {
  bottom: 2%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 29, 43, 0.18), transparent 68%);
  filter: blur(10px);
  z-index: 0;
}

.stationPod {
  position: absolute;
  width: 39%;
  height: 42%;
  min-width: 0;
  transform-style: preserve-3d;
  animation: podFloat 5.2s ease-in-out infinite;
  filter:
    drop-shadow(0 10px 10px rgba(28, 38, 50, 0.18))
    drop-shadow(0 3px 0 rgba(255, 255, 255, 0.2));
}

.stationPod:nth-child(1) {
  left: 8%;
  top: 9%;
  z-index: 2;
  transform: scale(0.86) rotate(-4deg);
  animation-delay: -0.4s;
}

.stationPod:nth-child(2) {
  left: 51%;
  top: 9%;
  z-index: 2;
  transform: scale(0.86) rotate(3deg);
  animation-delay: -1.5s;
}

.stationPod:nth-child(3) {
  left: 4%;
  top: 48%;
  z-index: 4;
  transform: scale(1.06) rotate(3deg);
  animation-delay: -2.1s;
}

.stationPod:nth-child(4) {
  left: 52%;
  top: 47%;
  z-index: 5;
  transform: scale(1.06) rotate(-3deg);
  animation-delay: -0.9s;
}

.stationPod::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 2%;
  bottom: 2%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 24, 34, 0.22), transparent 68%);
  filter: blur(5px);
  transform: rotate(-7deg);
  z-index: -1;
}

.podShadow {
  left: 13%;
  right: 5%;
  bottom: 5%;
  height: 17%;
  background: rgba(24, 34, 46, 0.22);
  filter: blur(9px);
}

.isoDeskTop {
  box-shadow:
    inset 0 2px 0 rgba(255, 235, 190, 0.32),
    inset -18px -14px 26px rgba(52, 31, 19, 0.22),
    0 12px 12px rgba(39, 45, 54, 0.2);
}

.isoDeskFace.left,
.isoDeskFace.front {
  box-shadow: inset 0 12px 18px rgba(255, 206, 143, 0.06);
}

.isoMonitor {
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.22),
    0 8px 10px rgba(28, 36, 48, 0.24),
    0 0 20px rgba(100, 210, 255, 0.5);
}

.isoChair {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.26),
    inset -10px -15px 18px rgba(0, 0, 0, 0.16),
    0 10px 11px rgba(31, 40, 52, 0.2);
}

@keyframes podFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

@media (max-width: 390px) {
  .workstationStage {
    height: clamp(236px, 72vw, 302px);
    margin-inline: -8px;
  }

  .workstationMatrix {
    width: min(102%, 384px);
    height: min(100%, 292px);
  }

  .stationPod {
    width: 40%;
    height: 41%;
  }
}

.workstationStage.originalWorkstations {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(188px, 56vw, 222px);
  margin: 4px 0 -8px;
  overflow: hidden;
  perspective: none;
}

.workstationStage.originalWorkstations::before,
.workstationStage.originalWorkstations::after {
  display: none;
}

.originalWorkstations .workstationFrame {
  position: relative;
  width: clamp(188px, 56vw, 222px);
  aspect-ratio: 1;
  transform: translateY(-4px);
}

.originalWorkstations .workstationHero {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1;
  object-fit: contain;
  filter:
    saturate(1.08)
    contrast(1.03)
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.26));
  transform: none;
}

@media (max-width: 390px) {
  .workstationStage.originalWorkstations {
    height: clamp(184px, 56vw, 216px);
    margin-inline: 0;
  }

  .originalWorkstations .workstationFrame {
    width: clamp(184px, 56vw, 216px);
  }
}

.workstationStage.live3dWorkstations {
  position: relative;
  display: block;
  height: clamp(300px, 82vw, 360px);
  margin: 0 -8px -8px;
  overflow: hidden;
  background: transparent;
  perspective: none;
}

.workstationStage.live3dWorkstations::before,
.workstationStage.live3dWorkstations::after {
  display: none;
}

.workstationScene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.workstationScene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 390px) {
  .workstationStage.live3dWorkstations {
    height: clamp(286px, 80vw, 334px);
    margin-inline: -10px;
  }
}