/* Beesley Energy live demo: the frame around the app's home screen. app.css holds the app's own readout styles.
   The house picture stays dark in both themes, as in the app. */
.emd { margin: 8px 0 0; }
.emd-screen {
  position: relative; aspect-ratio: 1194 / 768; overflow: hidden; border-radius: 20px;
  background: #0b0c0e; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.35);
}
.emd-world { position: absolute; left: 0; top: 0; width: 1194px; height: 768px; transform-origin: 0 0; color: #fff; }
.emd-bg { position: absolute; left: 17px; top: 0; width: 1160.7px; height: 768px; display: block; transition: opacity 1.4s ease; }
.emd-night { opacity: 0; }
.emd.is-night .emd-night { opacity: 1; }
.emd.is-night .emd-day { opacity: 0; }
.emd-layer { position: absolute; inset: 0; }
.emd-sprite { position: absolute; display: block; transition: opacity .8s ease; }
.emd-sprite.off { opacity: 0; }
.emd-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.4s ease; }
.emd-sprite .n { opacity: 0; }
.emd.is-night .emd-sprite .n { opacity: 1; }
.emd.is-night .emd-sprite .d { opacity: 0; }
.emd-zov { position: absolute; inset: 0; pointer-events: none; }
.emd-zov .zov { cursor: default; transition: opacity .6s ease; }
.emd-world .zov.emd-hide { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.emd-badge {
  position: absolute; left: 1.6%; bottom: 2.4%; margin: 0; padding: 3px 10px; border-radius: 99px;
  background: #f2c14e; color: #2a1c00; font: 600 clamp(9px, 1.1vw, 13px) var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

/* Tiles: phone width, under the picture, where the app's own readouts get too small to read */
.emd-tiles { display: none; }

/* Caption and controls */
.emd-cap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; justify-content: space-between; margin-top: 16px; }
.emd-text { flex: 1 1 420px; min-height: 7.2em; }
.emd-step { margin: 0; font: 500 .85rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tealt); }
.emd-title { margin: .2em 0 .25em; font-size: 1.35rem; line-height: 1.25; }
.emd-desc { margin: 0; color: var(--ink2); max-width: 62ch; }
.emd-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emd-play { min-width: 104px; }
.emd-dots { display: flex; gap: 8px; }
.emd-dots button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip-bg); color: var(--ink2); font: 600 1rem var(--sans); cursor: pointer; }
.emd-dots button[aria-current="step"] { background: var(--btn); border-color: var(--btn); color: var(--on-teal); }
.emd button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 560px) {
  .emd-screen { border-radius: 14px; }
  .emd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  .emd-t { padding: 9px 10px; border-radius: 12px; background: var(--chip-bg); box-shadow: 0 0 0 1px var(--line); line-height: 1.2; }
  .emd-t b { display: block; font-size: 1.15rem; }
  .emd-t b small { font: 500 .7rem var(--mono); color: var(--ink3); margin-left: 2px; }
  .emd-t > span { display: block; font: 500 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
  .emd-t > span.lb { color: var(--ink); }
  .emd-text { flex-basis: 100%; min-height: 9.5em; }
}
@media (prefers-reduced-motion: reduce) {
  .emd-bg, .emd-sprite, .emd-sprite img, .emd-zov .zov { transition: none; }
  .emd-zov #zrd i { animation: none !important; display: none !important; }
}