.xbar{position:fixed;left:50%;bottom:16px;z-index:55;display:flex;align-items:center;gap:10px;width:min(720px,calc(100vw - 32px));padding:8px 8px 8px 12px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.3,1.25,.5,1)}
.xbar.on{transform:translate(-50%,0)}.xbar.on.dip{transform:translate(-50%,140%)}
.xbin{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.xbin.in{opacity:1;transform:none}
.xbin .icon{width:34px!important;height:34px!important;flex:none}
.xbnm{display:grid;min-width:0}.xbnm b{font:500 16px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xbnm small{font-size:12px;color:var(--mute)}.xbnm small b{font:inherit;color:var(--ink)}
.xbin .xbhrs{display:flex;gap:2px;flex:none}
.xbtag{flex:none;font:700 9.5px var(--pixel,ui-monospace);letter-spacing:.08em;background:#111;color:#fff;border-radius:6px;padding:4px 7px}
.xbget{flex:none;font-weight:600;font-size:14px;text-decoration:underline;color:var(--ink);padding:0 4px}
.xbx{all:unset;flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;cursor:pointer;color:var(--mute);font-size:18px}.xbx:hover{background:var(--box)}
@media (max-width:760px){.xbar{bottom:calc(72px + env(safe-area-inset-bottom));gap:8px}.xbin .xbhrs{display:none}.xbtag{display:none}}
@media (prefers-reduced-motion:reduce){.xbar,.xbin{transition:opacity .2s}}