:root {
  --bg: #0d0d10;
  --bezel: #3a2a1e;
  --bezel-hi: #5c4633;
  --bezel-lo: #1f1610;
  --panel: #2a2119;
  --text: #d9d2c5;
  --amber: #ffb347;
  --glow: rgba(255,179,71,.65);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Helvetica Neue", Arial, sans-serif; }
.room { min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 16px; gap: 14px;
  background: radial-gradient(ellipse at 50% 35%, #1b1b24 0%, var(--bg) 70%); }

.tv { width: min(96vw, 1180px); border-radius: 26px; padding: 26px 26px 18px;
  background: linear-gradient(160deg, var(--bezel-hi), var(--bezel) 45%, var(--bezel-lo));
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -3px 0 rgba(0,0,0,.5); }
.tv[data-bezel="walnut"] { --bezel: #4a3323; --bezel-hi: #7a583c; --bezel-lo: #22160e; --panel: #2f2216; }
.tv[data-bezel="graphite"] { --bezel: #2a2c31; --bezel-hi: #4a4d55; --bezel-lo: #121316; --panel: #1c1d21; --amber: #7fd3ff; --glow: rgba(127,211,255,.6); }
.tv[data-bezel="cream"] { --bezel: #b8ad94; --bezel-hi: #e2d8c2; --bezel-lo: #6e6552; --panel: #8f866f; --text: #2a2620; --amber: #d2452b; --glow: rgba(210,69,43,.5); }

.screen-well { border-radius: 18px; padding: 14px;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a); box-shadow: inset 0 0 0 2px #000, inset 0 8px 24px rgba(0,0,0,.9); }
.screen { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%;
  border-radius: 14px / 12px; overflow: hidden; background: #000; }
.screen video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6); }
.off-screen { position: absolute; inset: 0; background: #050505; transition: opacity .35s ease; }
.tv.on .off-screen { opacity: 0; pointer-events: none; }
.tv.on .screen { box-shadow: 0 0 60px rgba(120,140,255,.08); }

.panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4); }
.brand { display: flex; flex-direction: column; line-height: 1; }
.logo { font-weight: 900; font-size: 30px; letter-spacing: -1px; color: var(--amber);
  text-shadow: 0 0 12px var(--glow); font-family: Impact, "Arial Black", sans-serif; }
.sub { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.readout { min-width: 0; font-family: "Courier New", monospace; color: var(--amber);
  text-shadow: 0 0 8px var(--glow); background: rgba(0,0,0,.45); border-radius: 6px; padding: 6px 10px; }
.readout .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.readout .small { font-size: 11px; opacity: .75; }
.controls { display: flex; align-items: center; gap: 12px; }
.knob { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: var(--text);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  background: radial-gradient(circle at 35% 30%, var(--bezel-hi), var(--bezel-lo));
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
.knob.muted { color: #ff6b6b; }
.power { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--bezel-hi), var(--bezel-lo));
  box-shadow: 0 3px 8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15); }
.power span { position: absolute; inset: 14px; border-radius: 50%; border: 3px solid #666;
  border-top-color: transparent; }
.power span::after { content: ""; position: absolute; left: 50%; top: -6px; width: 3px; height: 12px;
  background: #666; transform: translateX(-50%); }
.tv.on .power span, .tv.on .power span::after { border-color: var(--amber); background: var(--amber);
  border-top-color: transparent; box-shadow: 0 0 10px var(--glow); }
.tv.on .power span::after { box-shadow: 0 0 10px var(--glow); }
.tv.on .power span { background: transparent; }
.hint { font-size: 13px; opacity: .55; margin: 0; }

@media (max-width: 640px) {
  .tv { padding: 14px 14px 10px; border-radius: 18px; }
  .screen-well { padding: 8px; }
  .panel { grid-template-columns: 1fr auto; }
  .brand { display: none; }
}