*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;background:#0a0410;overflow:hidden;}
body{position:fixed;inset:0;}

.story-shell{
  height:100dvh;width:100vw;
  display:flex;align-items:center;justify-content:center;
  background:#0a0410;
}

.story-frame{
  position:relative;
  width:min(100vw, calc(100dvh * 9 / 16));
  height:min(100dvh, calc(100vw * 16 / 9));
  overflow:hidden;
  background:#000;
}

.story-screen{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.story-screen.active{opacity:1;pointer-events:auto;}

.story-screen img,
.story-screen video{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  background:#000;
}

.story-hot{
  position:absolute;
  background:transparent;
  border:none;padding:0;margin:0;
  cursor:pointer;
  border-radius:50%;
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
}
.story-hot:active{background:rgba(255,255,255,.08);}

.story-exit{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top));
  left:16px;
  z-index:5;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(10,4,16,.55);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}