/* Landing page */
body.landing{overflow:hidden}

/* ---------- desktop ---------- */
.L{height:100vh;display:flex;flex-direction:column;padding:28px 32px 0}
.Lhead{position:relative;min-height:20px}
.Lhead .hrow{position:absolute;top:0;left:40%;right:0;opacity:0;transition:left .55s cubic-bezier(.65,0,.35,1),width .55s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.Lhead .hrow.ready{opacity:1}
.Lhead .tags{margin-left:0}
.Lbody{flex:1;min-height:0;display:flex;gap:32px;margin-top:44px;padding-bottom:16px;position:relative}
.Lnav{flex:0 0 300px;display:flex;flex-direction:column;min-height:0}
.ls{flex:none;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fb,12px),#000 calc(100% - var(--fb,12px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fb,12px),#000 calc(100% - var(--fb,12px)),transparent 100%)}
.track{position:absolute;left:0;right:0;top:0;will-change:transform}
.row{height:40px;display:flex;align-items:center}
.item{display:flex;align-items:center;gap:8px;min-height:32px;color:var(--fg)}
.item:hover{color:var(--fg)}
.slot{width:32px;display:flex}
.sw{display:block;height:12px;width:var(--w,16px);opacity:var(--so,1);background:var(--c);transition:width .3s ease,opacity .25s ease,background-color .35s ease}
.item[aria-current="true"] .sw{background:var(--cs)}
.dt{display:inline-block;white-space:nowrap;opacity:var(--o,1);transition:opacity .3s ease,font-size .3s ease}
.item[aria-current="false"] .dt{font-size:10px}
.item:hover .dt,.item:focus-visible .dt{opacity:.6}
.item[aria-current="true"]:hover .dt{opacity:1}
.still-hover .item:hover .dt{opacity:var(--o,1)}
html.dark .item[aria-current="false"] .dt{opacity:.55}
html.dark .item[aria-current="false"]:hover .dt{opacity:.85}
.stage{position:relative;flex:1;min-height:0}
.layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:14px;width:min(100%, calc(84vh + 8px));transition:opacity .6s ease,width .55s cubic-bezier(.65,0,.35,1)}
.wide .layer{width:min(100%, calc(84vh * 1.78 + 8px))}
.layer.off{opacity:0;pointer-events:none}
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.shotimg{width:100%;aspect-ratio:1 / 1;object-fit:cover;background:var(--ph);transition:aspect-ratio .55s cubic-bezier(.65,0,.35,1)}
.wide .shotimg{aspect-ratio:16 / 9}
.exp{position:absolute;right:0;top:-30px;width:28px;height:28px;display:flex;align-items:center;justify-content:flex-end;padding:0;border:0;background:none;cursor:pointer;color:var(--mu)}
.exp:hover{color:var(--fg)}
.exp .ic2{display:none}.wide .exp .ic1{display:none}.wide .exp .ic2{display:block}
.credits{display:flex;gap:40px}
.Lfoot{padding-bottom:28px}

/* ---------- phone ---------- */
.M{display:none}
@media (max-width:820px){
  .L{display:none}
  .M{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:20px 20px 18px;overflow:hidden;touch-action:none}
  .M .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .M .brand{gap:10px;min-width:0}
  .M .right{gap:16px}
  .inv{width:36px;height:36px;margin:-10px -10px -10px 0}
  .M nav{display:flex;align-items:baseline;gap:22px;margin-top:24px;position:relative;z-index:20}
  .M .drop{left:-16px;margin-top:8px;padding:8px 16px 10px;min-width:140px;gap:2px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.12);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  html.dark .M .drop{box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .M .tags.open .drop{opacity:1;transform:none}
  .M .opt button{padding:6px 0}
  .Mbody{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:34px}
  .Mstage{position:relative}
  .mlayer{position:relative;display:flex;flex-direction:column;gap:12px;transition:opacity .5s ease}
  .mlayer.off{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}
  .mtitle{display:flex;align-items:center;gap:10px;min-height:22px;padding-right:44px}
  .mtitle i{display:block;flex:none;width:29px;height:12px}
  .mtitle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mshot{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:var(--ph);transition:aspect-ratio .5s cubic-bezier(.65,0,.35,1)}
  .orig .mshot{aspect-ratio:var(--ar,16 / 9)}
  .mexp{position:absolute;top:-4px;right:0;z-index:2;display:inline-flex;align-items:center;justify-content:flex-end;width:40px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:var(--mu)}
  .mexp .ic2{display:none}.orig .mexp .ic1{display:none}.orig .mexp .ic2{display:block}
  .mcred{display:flex;gap:12px;font-size:11px;white-space:nowrap;min-width:0}
  .mcred>span{flex:none}.mcred>span:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .mls{position:relative;flex:1;min-height:72px;margin-top:22px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%)}
  .mtrack{position:absolute;left:0;right:0;top:0;transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .mrow{display:flex;align-items:center;gap:10px;height:36px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer;width:100%;text-align:left}
  .mrow i{display:block;flex:none;width:16px;height:12px}
  .mrow span{font-size:11px;opacity:.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.dark .mrow span{opacity:.55}
  .Mfoot{display:flex;gap:24px;color:var(--mu);font-size:13px;padding-top:10px}
}