/* JE devices — generic frames per work/production/apple-device-bezels/css-device-spec.md */
* { box-sizing: border-box; }
body { margin: 0; background: var(--je-paper); color: var(--je-ink); font-family: var(--je-text); line-height: 1.7; }
.stage { width: min(100% - 48px, 1240px); margin-inline: auto; padding-block: 56px 72px; display: grid; gap: 40px; justify-items: center; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); font-weight: 600; text-align: center; }
.note { margin: -22px 0 0; color: var(--je-slate); text-align: center; max-width: 60ch; }
.row { display: grid; justify-items: center; }
.row.phones { grid-template-columns: repeat(auto-fit, minmax(240px, max-content)); gap: clamp(24px, 5vw, 80px); align-items: start; }

.device-laptop-generic {
  --frame: #1b1e23;
  --frame-edge: #353a42;
  position: relative;
  width: min(72rem, 86vw);
  margin: 0;
  padding-bottom: 4.2%;
  filter: drop-shadow(0 28px 34px rgb(0 0 0 / 22%));
}
.device-laptop-generic__lid {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 1.8%;
  overflow: hidden;
  border: 1px solid var(--frame-edge);
  border-radius: 1.7% 1.7% 0.9% 0.9%;
  background: var(--frame);
}
.device-laptop-generic__screen {
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 0.65%;
  background: #f4f4f2;
}
.device-laptop-generic__screen > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.device-laptop-generic__base {
  position: absolute; inset-inline: -3.5%; bottom: 0; height: 5.2%;
  border: 1px solid var(--frame-edge);
  border-radius: 0 0 38% 38% / 0 0 72% 72%;
  background: linear-gradient(180deg, #30343a 0%, #15181c 100%);
}

.device-phone-generic {
  --frame: #171a1f;
  --frame-edge: #30343b;
  --phone-radius: 9%;
  --screen-radius: 7.2%;
  position: relative;
  width: min(21rem, 82vw);
  aspect-ratio: 440 / 956;
  margin: 0;
  padding: 2.8%;
  overflow: hidden;
  border: 1px solid var(--frame-edge);
  border-radius: var(--phone-radius);
  background: var(--frame);
  box-shadow:
    0 2px 3px rgb(0 0 0 / 18%),
    0 24px 64px rgb(0 0 0 / 24%);
  isolation: isolate;
}
.device-phone-generic__screen {
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: var(--screen-radius);
  background: #f4f4f2;
}
.device-phone-generic__screen > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

.scene { margin: 0; display: grid; gap: 12px; }
.scene img { max-width: 100%; height: auto; box-shadow: 0 30px 80px rgb(45 45 45 / 30%); }
.scene figcaption { color: var(--je-slate); font-size: 14.5px; text-align: center; }