.story{
  --story-reach:.8;
  --story-reach-max:720;
  --story-stage-w:480;
  --story-stage-h:600;
  --story-travel:1;
  --story-accent:#d2691e;
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
  gap:56px;
  align-items:start;
  overflow-x:clip;
}
.story-text{min-width:0}
.story-chapter{position:relative}
.story-proof{position:relative;margin:0;min-width:0}
.story-pile{box-sizing:border-box;position:sticky;top:0;height:100vh;min-width:0;padding-top:var(--site-head-h,0px)}
.story-pile-frame{position:relative;height:100%}
.story-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.story-mess{position:absolute;z-index:2}
.story-calm{position:absolute;z-index:1;opacity:0;left:0;right:0;top:0;display:flex;justify-content:center;pointer-events:none}
.story-calm svg{width:min(440px,100%);height:auto}
.calm-steam{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:calm-steam 3.6s ease-in-out infinite}
.calm-steam.s2{animation-delay:-1.2s}
.calm-steam.s3{animation-delay:-2.4s}
@keyframes calm-steam{0%{opacity:0;transform:translateY(7px) scaleY(.85)}35%{opacity:.95}75%{opacity:.45}100%{opacity:0;transform:translateY(-12px) scaleY(1.12)}}
.calm-glow{opacity:.4;animation:calm-glow 4s ease-in-out infinite}
@keyframes calm-glow{0%,100%{opacity:.3}50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.calm-steam,.calm-glow{animation:none}.calm-steam{opacity:.8}}

:root:not(.story-live) .story{grid-template-columns:minmax(0,1fr)}
:root:not(.story-live) .story-pile{display:none}
.story [data-show]{visibility:hidden}
.story .ml-app .swap{display:inline-grid;justify-items:end;align-items:center}
.story .ml-app .swap>*{grid-area:1/1}
.story .ml-app .swap.start{justify-items:start}
.story .ml-app .was{opacity:0}

.story-skeleton{position:absolute;inset:0;border:1.5px dashed #d9d0c3;border-radius:12px;background:rgba(255,255,255,.45);opacity:0;pointer-events:none;will-change:opacity,transform}
.story-flight{position:fixed;left:0;top:0;width:0;height:0;z-index:40;pointer-events:none}
.story-flight>*{position:absolute;margin:0;will-change:transform,opacity}

.story-live .story [data-show]{opacity:0;will-change:opacity,transform}
.story-live .story [data-drag]{position:relative;z-index:3;will-change:transform}

.story-cursor{position:absolute;left:0;top:0;z-index:30;width:22px;height:26px;opacity:0;pointer-events:none;will-change:transform,opacity}
.story-cursor svg{display:block;transform-origin:3px 3px;transition:transform .12s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.story-cursor.is-pressed svg{transform:scale(.84)}
.story-cursor i{position:absolute;left:-13px;top:-13px;width:28px;height:28px;border-radius:50%;border:2px solid var(--story-accent);opacity:0;will-change:transform,opacity}

@media (min-width:861px){
  .story{--story-pin:1}
  .story-live .story .story-pin{position:sticky}
}

@media (max-width:860px){
  .story{
    --story-reach:.85;
    --story-stage-w:360;
    --story-stage-h:250;
    --story-travel:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .story-text{display:contents}
  .story-hero{order:0}
  .story-pile{order:1;position:relative;top:auto;height:auto;margin:4px 0 8px;padding-top:0}
  .story-pile-frame{height:250px}
  .story-chapter{order:2}
  .story-calm{display:none}
}

#site-links,#site-menu{display:none}
.site-right .site-guest:not([hidden]){display:inline-flex}