.xp{width:100%;container-type:inline-size}.xp-plate{--xp-r:var(--xp-ratio);--xp-full:calc(min(100cqw, var(--xp-w)) * var(--xp-r));--xp-strip:clamp(72px, calc(var(--xp-full) * .34), 156px);height:var(--xp-strip);transition:height .7s var(--ease-in-out);justify-content:center;align-items:flex-start;display:flex;position:relative;overflow:hidden}.xp-plate[data-open]{height:var(--xp-full)}@media (hover:hover){.xp-plate:not([data-open]):hover{height:calc(var(--xp-strip) + 28px)}}@media (max-width:639.98px){.xp-plate{--xp-r:var(--xp-ratio-phone,var(--xp-ratio))}}.xp-fill{width:100%;height:var(--xp-full);flex:none;position:relative}.xp-hit{z-index:1;background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 55%, var(--bg) 100%);color:inherit;cursor:pointer;transition:opacity .4s var(--ease-in-out);border:0;justify-content:center;align-items:flex-end;padding:0 16px 14px;display:flex;position:absolute;inset:0}.xp-plate[data-open] .xp-hit{opacity:0;pointer-events:none}.xp-hit:focus-visible{outline:none}.xp-pill{border-radius:var(--r-xs);background:var(--text);height:40px;color:var(--text-inverse);font:var(--fw-medium) var(--fs-label) / 1 var(--font-sans);white-space:nowrap;transition:background-color .15s, transform .15s var(--ease-out);align-items:center;gap:8px;padding:0 16px;display:inline-flex}.xp-hit:hover .xp-pill{background:var(--gray-700)}[data-theme=obsidian] .xp-hit:hover .xp-pill{background:var(--gray-200)}.xp-hit:active .xp-pill{transform:scale(.98)}.xp-hit:focus-visible .xp-pill,.xp-hide:focus-visible{outline:var(--bw-focus) solid var(--state-focus-ring);outline-offset:2px}.xp-pill svg,.xp-hide svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.xp[data-tone=screen] .xp-hit{background:linear-gradient(to bottom, color-mix(in srgb, var(--screen) 0%, transparent) 0%, color-mix(in srgb, var(--screen) 72%, transparent) 55%, var(--screen) 100%)}.xp[data-tone=screen] .xp-pill{background:var(--on-screen);color:var(--screen)}.xp[data-tone=screen] .xp-hit:hover .xp-pill,[data-theme=obsidian] .xp[data-tone=screen] .xp-hit:hover .xp-pill{background:var(--gray-200)}.xp-hide{z-index:2;border-radius:var(--r-xs);height:28px;color:var(--on-screen);font:var(--fw-medium) var(--fs-caption) / 1 var(--font-sans);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), background-color .15s;background:#141414b8;border:0;align-items:center;gap:6px;padding:0 10px;display:inline-flex;position:absolute;top:12px;right:12px;transform:translateY(-4px)}.xp-hide svg{width:14px;height:14px}.xp-hide:hover{background:#141414e6}.xp-plate[data-open] .xp-hide{opacity:1;pointer-events:auto;transition:opacity .25s var(--ease-out) .45s, transform .25s var(--ease-out) .45s, background-color .15s;transform:none}@container (max-width:480px){.xp-hit{padding-bottom:10px}.xp-pill{height:34px;font-size:var(--fs-caption);gap:6px;padding:0 12px}.xp-pill svg{width:16px;height:16px}}@media (prefers-reduced-motion:reduce){.xp-plate,.xp-hit,.xp-hide,.xp-pill{transition:none}}html[data-reduce-motion=on] .xp-plate,html[data-reduce-motion=on] .xp-hit,html[data-reduce-motion=on] .xp-hide,html[data-reduce-motion=on] .xp-pill{transition:none}