:root {
  color-scheme: dark;
  --bg: #02040a;
  --pink: #ff6d91;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 78% 55%, rgba(255, 77, 132, 0.12), transparent 34rem),
    var(--bg);
}

body {
  min-height: 100svh;
  overflow-x: hidden;
}

.page-shell {
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 48px);
}

.art-frame {
  width: min(100%, 1500px);
  border-radius: clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .58),
    0 0 70px rgba(255, 86, 137, .08);
  background: #03050b;
}

.art-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Phone/tablet: keep the full composition visible and use the dark page as breathing room. */
@media (max-width: 760px) {
  .page-shell {
    min-height: 100svh;
    padding:
      max(12px, env(safe-area-inset-top))
      0
      max(12px, env(safe-area-inset-bottom));
  }

  .art-frame {
    width: 100%;
    border-radius: 0;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .52);
  }

  .art-frame img {
    width: 100%;
    height: auto;
  }
}

/* Optional forced mobile preview at /mobile.html */
.mobile-preview .page-shell {
  max-width: 430px;
  margin-inline: auto;
  padding-inline: 0;
}
.mobile-preview .art-frame { border-radius: 0; }