.monitor {
  --case: #282a28;
  --edge: #3b3e3a;
  --phosphor: #a5cfa2;
  --glass: #101611;
  flex: 0 1 320px;
  min-width: 0;
  position: relative;
  padding-bottom: 30px;
  font-family: "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}
.monitor::before,
.monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--case);
}
.monitor::before { width: 56px; height: 26px; bottom: 6px; }
.monitor::after { width: 128px; height: 7px; bottom: 0; border-radius: 2px; }
.cabinet {
  position: relative;
  z-index: 1;
  padding: 12px 12px 10px;
  background: var(--case);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: 0 5px 12px #0000000d;
}
.bezel { padding: 3px; background: #080b08; border-radius: 7px; }
.screen {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border-radius: 5px;
  color: var(--phosphor);
  background: var(--glass);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000000c 0 1px, transparent 1px 3px);
}
.screen-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.symbol { font-size: 12px; letter-spacing: 2px; }
.market { color: #8b9e8c; font-size: 9px; text-decoration: none; }
.market:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.price {
  display: block;
  margin: 35px 0 12px;
  font-size: clamp(24px, 7vw, 36px);
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1;
}
.change { min-height: 14px; font-size: 11px; color: #8b9e8c; }
.change[data-direction="down"] { color: #baa78b; }
.quote-time { display: block; margin-top: 28px; min-height: 10px; font-size: 9px; color: #829184; }
.ticker { display: none; }
.monitor-controls { display: flex; justify-content: flex-end; align-items: center; height: 12px; margin: 7px 6px 0; }
.vents { display: none; }
.power { width: 4px; height: 4px; border-radius: 50%; background: #8d7646; }
.monitor[data-state="live"] .power { background: #91b984; }

.monitor[data-design="2"] {
  --case: #e6e3d9;
  --edge: #d3d0c5;
  --phosphor: #bbd5b2;
  --glass: #1c2720;
  flex-basis: 304px;
  padding-bottom: 9px;
}
.monitor[data-design="2"]::before { display: none; }
.monitor[data-design="2"]::after { width: 226px; height: 9px; background: #d3d0c5; }
.monitor[data-design="2"] .cabinet { padding: 25px 23px 12px; border-radius: 5px; }
.monitor[data-design="2"] .bezel { padding: 5px; background: #b4b4a7; border-radius: 16px; }
.monitor[data-design="2"] .screen { padding: 22px 16px; border-radius: 12px; }
.monitor[data-design="2"] .price { margin-top: 40px; font-size: clamp(24px, 7vw, 32px); }
.monitor[data-design="2"] .monitor-controls { justify-content: space-between; margin-top: 13px; }
.monitor[data-design="2"] .vents { display: block; height: 5px; width: 36px; background: repeating-linear-gradient(90deg, #a6a598 0 1px, transparent 1px 4px); }
.monitor[data-design="2"] .power { background: #a99772; }
.monitor[data-design="2"][data-state="live"] .power { background: #708761; }

.monitor[data-design="3"] {
  --case: #181918;
  --edge: #33352e;
  --phosphor: #dac591;
  --glass: #141711;
  flex-basis: 360px;
  padding-bottom: 0;
}
.monitor[data-design="3"]::before,
.monitor[data-design="3"]::after { display: none; }
.monitor[data-design="3"] .cabinet { padding: 5px; border-radius: 5px; box-shadow: none; }
.monitor[data-design="3"] .bezel { padding: 0; border-radius: 2px; }
.monitor[data-design="3"] .screen { padding: 20px 24px 14px; border-radius: 2px; }
.monitor[data-design="3"] .market,
.monitor[data-design="3"] .change { color: #b1a27c; }
.monitor[data-design="3"] .price { margin: 23px 0 10px; font-size: clamp(24px, 7vw, 32px); }
.monitor[data-design="3"] .quote-time,
.monitor[data-design="3"] .monitor-controls { display: none; }
.monitor[data-design="3"] .ticker {
  display: block;
  overflow: hidden;
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid #dac59120;
  font-size: 10px;
  white-space: nowrap;
  color: #b1a27c;
}
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 24s linear infinite; }
.ticker-track span { padding-right: 28px; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.monitor.doodled-monitor { flex-basis: 400px; padding: 0; aspect-ratio: 4 / 3; }
.monitor.doodled-monitor::before, .monitor.doodled-monitor::after { display: none; }
.doodled-monitor canvas { display: block; width: 100%; height: 100%; }
.doodle-number { position: absolute; display: block; margin: 0; transform: translate(-50%, -50%); font-family: "Courier New", monospace; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }