.hero-fold { width:min(100%,620px); margin:0 0 24px; }
.fold-stage { height:90px; display:flex; align-items:center; justify-content:center; perspective:850px; }
.fold-menubar { display:flex; align-items:center; padding:12px 16px; border:1px solid #ffffff28; border-radius:18px; background:linear-gradient(160deg,#ffffff17,#ffffff07); box-shadow:0 12px 40px #0005,inset 0 1px #ffffff12; color:#e7edef; }
.fold-menubar svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.fold-apps { width:240px; overflow:hidden; perspective:650px; transition:width 950ms cubic-bezier(.22,1,.36,1); }
.fold-wing { display:flex; align-items:center; justify-content:space-around; width:240px; padding-right:16px; box-sizing:border-box; transform-origin:right center; transition:transform 950ms cubic-bezier(.22,1,.36,1),opacity 550ms ease; }
.fold-toggle { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; padding:0; border:1px solid #ffffff25; border-radius:10px; background:#94b5c526; color:#d0e5ed; cursor:pointer; touch-action:manipulation; }
.fold-toggle:hover { background:#94b5c54d; }
.fold-toggle:focus-visible { outline:2px solid #b8d8e6; outline-offset:5px; }
.fold-toggle svg { transition:transform 650ms cubic-bezier(.22,1,.36,1); }
.fold-system { display:flex; align-items:center; gap:14px; padding-left:20px; font-size:14px; font-variant-numeric:tabular-nums; }
.hero-fold[data-folded="true"] .fold-apps { width:0; }
.hero-fold[data-folded="true"] .fold-wing { transform:rotateY(-88deg) scaleX(.65); opacity:0; }
.hero-fold[data-folded="true"] .fold-toggle svg { transform:rotate(180deg); }
.hero-fold figcaption { display:flex; flex-direction:column; align-items:center; gap:7px; margin-top:8px; }
.fold-status { font-size:15px; color:#e7edef; }
.fold-hint { font-size:11px; color:#929b9f; }
@media (max-width:600px) {
  .fold-apps,.fold-wing { width:160px; }
  .fold-wing { padding-right:10px; }
  .fold-menubar { padding:9px 10px; border-radius:14px; }
  .fold-menubar svg { width:19px; height:19px; }
  .fold-system { gap:9px; padding-left:12px; font-size:12px; }
  .fold-system svg:nth-child(2) { display:none; }
  .fold-toggle { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-fold *, .hero-fold *::before { transition:none !important; animation:none !important; }
}