.device {
  --device-width: 390px;
  --device-height: 844px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   grid-template-rows: auto auto 1fr auto;
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.device > .band { grid-row: 1; }
.device > .banner--offline { grid-row: 2; }
.device > .screen { grid-row: 3; min-height: 0; }
.device > .tabbar { grid-row: 4; }

@media (min-width: 768px) {
  body {
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: light-dark(#e9e7e2, #141414);
    padding: var(--sp-6);
  }
  .device {
    width: var(--device-width);
    height: min(var(--device-height), calc(100vh - var(--sp-12)));
    border-radius: 40px;                  box-shadow: 0 0 0 1px var(--line-strong), var(--elev-2);
  }
  .sheet { max-width: var(--device-width); bottom: calc((100vh - min(var(--device-height), 100vh - var(--sp-12))) / 2); }   .nojs { max-width: 390px; margin: var(--sp-6) auto; }
}

@media print { .dev, .tabbar { display: none; } .device { height: auto; } }