html,body{
  height:100%;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  color: var(--bone);
  font-family: Inter, "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.45;
}

body{
  margin:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

body.stage-locked,
body.modal-open{
  overflow:hidden;
}

.site-hud{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; backdrop-filter: blur(6px);
  background: rgba(14,14,14,.35);
  border-bottom:1px solid rgba(192,102,50,.4);
}
.site-hud .brand img{ height:36px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.site-hud .hud-actions button{
  background: transparent; color: var(--bone); border:1px solid rgba(250,249,246,.25);
  padding:0 1rem; border-radius:999px; cursor:pointer;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
#muteToggle{ min-width:44px; min-height:44px; }
main#app{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 4vw, 4rem);
}

.story-stage{
  position:relative;
  width:min(1100px, 92vw);
  max-height:90vh;
  aspect-ratio: 4 / 3;
  display:grid;
  place-items:center;
  isolation:isolate;
  padding:clamp(1rem, 3vw, 2.5rem);
  --frame-accent: var(--accent-default);
  --frame-secondary: var(--accent-default-secondary);
  --frame-shadow: var(--accent-default-shadow);
  transition: box-shadow 420ms ease, background 420ms ease, filter 420ms ease;
}
.story-stage > *{ grid-area:1 / 1; }

.portrait-frame{
  --frame-radius: clamp(2rem, 4vw, 3.75rem);
  --frame-padding: clamp(1rem, 3vw, 2rem);
  --frame-content-radius: calc(var(--frame-radius) - var(--frame-padding));
  --frame-border-width: 3px;
  --frame-orbit-base: 16s;
  --frame-border-gradient: conic-gradient(from 90deg, var(--frame-accent, rgba(192,102,50,.8)), var(--frame-secondary, rgba(250,249,246,.6)), color-mix(in srgb, var(--frame-accent, rgba(192,102,50,.8)) 35%, transparent));
  --frame-border-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width:100%;
  height:100%;
  border-radius: var(--frame-radius);
  background: radial-gradient(circle at 50% 20%, var(--frame-secondary, rgba(250,249,246,.12)), rgba(14,14,14,.65));
  padding: var(--frame-padding);
  z-index:1;
  transition: background 420ms ease, box-shadow 420ms ease, filter 420ms ease;
}
.portrait-frame > *{ grid-area:1 / 1; }

#bg-canvas{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius: var(--frame-content-radius);
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.portrait-outline{
  place-self:center;
  width:65%;
  aspect-ratio: 3 / 4;
  border:1px solid var(--frame-secondary, rgba(250,249,246,.6));
  border-radius: 50% 50% 42% 42% / 55% 55% 45% 45%;
  filter: drop-shadow(0 10px 30px var(--frame-shadow, rgba(0,0,0,.6)));
  position:relative;
  z-index:1;
  transition: border-color 420ms ease, filter 420ms ease;
}

.copy-frame{
  position:relative;
  justify-self:end;
  align-self:stretch;
  width:min(520px, 100%);
  background: rgba(5,5,5,.75);
  border-radius: var(--frame-content-radius);
  padding: clamp(1.5rem, 3vw, 3rem);
  box-shadow: 0 40px 120px var(--frame-shadow, rgba(0,0,0,.55));
  z-index:2;
  backdrop-filter: blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition: background 420ms ease, box-shadow 420ms ease, color 420ms ease;
}

.site-footer{
  position:fixed;
  bottom:1rem;
  left:0;
  right:0;
  text-align:center;
  opacity:.75;
  font-size:.85rem;
  letter-spacing:.08em;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  .story-stage,
  .story-stage::after,
  .story-stage .portrait-frame,
  .story-stage .portrait-frame::before,
  .story-stage .copy-frame,
  .story-stage .copy-frame::before,
  .story-stage .portrait-outline{
    transition-duration: 0.01ms;
    transition-delay: 0s;
    transition-property: none;
  }
}