.magnet{position:relative;overflow:hidden;padding:0 0 30px;border-radius:28px;background:var(--dark-surface)}
.magnet-stage{--open-size:560px;display:flex;align-items:center;min-height:480px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;transition:min-height .45s cubic-bezier(.2,.7,.2,1)}
.magnet-stage::-webkit-scrollbar{display:none}
.magnet.has-open .magnet-stage{min-height:calc(var(--open-size) + 64px)}
.magnet-row{display:flex;align-items:center;gap:16px;margin:0 auto;padding:32px}
.magnet-bar{position:relative;flex:none;overflow:hidden;border-radius:10px;background:white;box-shadow:0 20px 50px #00000073;cursor:pointer;outline:none;transition:filter .4s ease,opacity .4s ease}
.magnet-bar:focus-visible{box-shadow:0 0 0 3px var(--accent),0 20px 50px #00000073}
.magnet.has-open .magnet-bar:not(.is-open){filter:blur(2px);opacity:.45}
.magnet-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;transition:inset .4s ease,padding .4s ease}
.magnet-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.magnet-logo.is-empty{background:linear-gradient(160deg,#f3f1ec,#dcd8cf)}
.magnet-logo.is-empty strong{color:var(--ink);font-family:var(--font-display);font-size:1rem;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;transition:font-size .4s ease}
.magnet-bar.is-open .magnet-logo{inset:0 0 34% 0;padding:12%}
.magnet-bar.is-open .magnet-logo.is-empty strong{font-size:2.2rem;writing-mode:horizontal-tb;transform:none}
.magnet-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 20px 22px;text-align:center;color:var(--ink);border-top:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s ease}
.magnet-bar.is-open .magnet-info{opacity:1;pointer-events:auto;transition-delay:.2s}
.magnet-info strong{font-family:var(--font-display);font-size:1.4rem}
.magnet-info>span{color:var(--muted);font-size:.86rem}
.magnet-info .button{margin-top:10px}
.magnet-hint{margin:0;padding:0 24px;color:#8b97a8;font-size:.75rem;text-align:center}
.magnet-hint code{color:#d7e4f2;font-size:.72rem}
@media(max-width:600px){
  .magnet{border-radius:20px}
  .magnet-stage{min-height:320px}
  .magnet-row{gap:10px;padding:24px 16px}
  .magnet-info{padding:12px 14px 16px}
  .magnet-info strong{font-size:1.15rem}
}