.hb-scan{--hb-t:.62s;--hb-tail:.11s;--hb-ease:cubic-bezier(.5, 0, .5, 1);--hb-m:12px;--hb-gap:8px;gap:var(--hb-gap);grid-template-rows:auto auto;justify-self:stretch;width:100%;display:grid;position:relative;container:hb-scan/inline-size}.hb-scan[data-pace=play]{--hb-t:.7s}.hb-scan:before{content:"";background:radial-gradient(closest-side, color-mix(in srgb, var(--text) 18%, transparent), transparent);pointer-events:none;border-radius:50%;height:30px;position:absolute;inset-block-end:-15px;inset-inline:7%}.hb-scan .hb-win{--peel:46px;--card:var(--lightbox);--card-hover:var(--lightbox);--pt:58px;--pb:92px;--px:18px;--tag:20px;--lift:0px;border-radius:24px;height:clamp(372px,100vw,560px);container-type:size}.hb-stack{border-radius:inherit;clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--peel) * var(--k)), calc(100% - var(--peel) * var(--k)) 100%, 0 100%);transition:clip-path var(--peel-t) var(--ease-out);position:absolute;inset:0;overflow:clip}[dir=rtl] .hb-stack{clip-path:polygon(0 0, 100% 0, 100% 100%, calc(var(--peel) * var(--k)) 100%, 0 calc(100% - var(--peel) * var(--k)))}.hb-stack:after{content:"";z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 1px color-mix(in srgb, var(--card) 70%, transparent);pointer-events:none;position:absolute;inset:0}.hb-slide{--shot-h:min((100cqh - var(--pt) - var(--pb)) / var(--ch), (100cqw - 2 * var(--px)) / var(--cw) / var(--ar), var(--nh));--shot-w:calc(var(--shot-h) * var(--ar));isolation:isolate;background:var(--lightbox);visibility:hidden;position:absolute;inset:0}.hb-slide[data-state=on],.hb-slide[data-state=in],.hb-slide[data-state=out]{visibility:visible}.hb-slide[data-state=in]{z-index:2}.hb-slide[data-state=out]{z-index:1}.hb-room{inset:var(--pt) var(--px) var(--pb);grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:end center;display:grid;position:absolute}.hb-shot{width:var(--shot-w);max-width:none;height:var(--shot-h);translate:calc((.5 - var(--cx)) * var(--shot-w)) calc(var(--foot) * var(--shot-h) - var(--lift));transition:translate .64s var(--ease-out)}.hb-shot[data-ground=white]{mix-blend-mode:multiply}.hb-floor{width:calc(var(--cw) * var(--shot-w) * .94);background:radial-gradient(closest-side, color-mix(in srgb, var(--text) 30%, transparent), transparent);height:30px;transition:scale .64s var(--ease-out), opacity .64s var(--ease-out);border-radius:50%;margin-inline:auto;position:absolute;inset-block-end:calc(var(--pb) - 15px);inset-inline:0}.hb-xray{background:var(--lightbox);clip-path:inset(0 50%);position:absolute;inset:0}.hb-xray .hb-shot{filter:grayscale()contrast(1.2)}.hb-tint{background:var(--signal);mix-blend-mode:screen;position:absolute;inset:0}.hb-xray:after{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--signal) 36%, transparent) 1.1px, transparent 1.6px) 0 0 / 13px 13px, color-mix(in srgb, var(--signal) 8%, transparent);position:absolute;inset:0}.hb-tag{padding:var(--tag);align-content:space-between;justify-items:start;display:grid;position:absolute;inset:0}.hb-slide[data-state=out] .hb-tag{opacity:0;transition:opacity .16s linear}.hb-win .hb-n{height:30px}.hb-win .hb-n circle,.hb-key .hb-key-n circle{transition:fill .52s var(--ease-out)}.hb-scan[data-beat] .hb-win .hb-n circle{fill:var(--signal);transition:fill .12s linear calc(var(--c) * 26ms)}.hb-cap{max-width:calc(100% - var(--peel));gap:3px;display:grid}.hb-name{color:var(--text);font-size:19px}.hb-makers{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:2px 9px;font-size:13px;font-weight:600;line-height:1.35;display:flex}.hb-dot{opacity:.55;background:currentColor;border-radius:50%;width:3px;height:3px}.hb-lamp{z-index:3;width:5px;translate:calc(var(--dir) * var(--hb-m)) 0;transition:translate var(--hb-t) var(--hb-ease);pointer-events:none;position:absolute;inset-block:0;inset-inline-start:-2.5px}.hb-scan[data-to=end] .hb-lamp{translate:calc(var(--dir) * (100cqw - var(--hb-m))) 0}.hb-lamp:before{content:"";background:linear-gradient(90deg, transparent calc(50% - 1.5px), var(--signal) calc(50% - 1.5px), var(--signal) calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 34%, transparent) 50%, transparent);opacity:0;transition:opacity .42s var(--ease-out);position:absolute;inset-block:0;inset-inline:-46px}.hb-scan[data-busy] .hb-lamp:before{opacity:1;transition-duration:.14s}.hb-lamp:after{content:"";background:var(--ink-drop);width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, var(--ink-drop) 18%, transparent);border-radius:50%;position:absolute;inset-block-start:8px;inset-inline-start:-1px}@media (hover:hover){.hb-win:hover{--lift:12px}.hb-win:hover .hb-shot{transition-duration:.34s}.hb-win:hover .hb-floor{opacity:.5;transition-duration:.34s;scale:.8}.hb-win:hover .hb-n circle,.hb-key:hover .hb-key-n circle{fill:var(--signal);transition:fill .12s linear calc(var(--c) * 18ms)}}.hb-win:focus-visible,.hb-win[data-peek]{--lift:12px}.hb-win:focus-visible .hb-shot,.hb-win[data-peek] .hb-shot{transition-duration:.34s}.hb-win:focus-visible .hb-floor,.hb-win[data-peek] .hb-floor{opacity:.5;transition-duration:.34s;scale:.8}.hb-win:focus-visible .hb-n circle,.hb-win[data-peek] .hb-n circle,.hb-key:focus-visible .hb-key-n circle{fill:var(--signal);transition:fill .12s linear calc(var(--c) * 18ms)}.hb-scan .hb-win:active{--lift:0px}.hb-scan .hb-win:active .hb-shot{transition-duration:var(--t-press)}.hb-scan .hb-win:active .hb-floor{opacity:1;transition-duration:var(--t-press);scale:1}.hb-keys{--hb-card:var(--card);gap:var(--hb-gap);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.hb-keys>li{grid-column:span 2;display:grid}.hb-keys>li:nth-child(n+4){grid-column:span 3}@container hb-scan (min-width:540px){.hb-keys{grid-template-columns:repeat(5,minmax(0,1fr))}.hb-keys>li,.hb-keys>li:nth-child(n+4){grid-column:auto}}.hb-scan .hb-key{--peel:18px;--card:color-mix(in srgb, var(--hb-card) 52%, transparent);--card-hover:var(--hb-card);border-radius:14px;align-content:center;place-items:start;gap:6px;min-height:58px;padding:9px 12px}.hb-scan .hb-key[aria-current]{--card:var(--hb-card);--line:color-mix(in srgb, var(--signal) 46%, transparent)}.hb-key .hb-key-n{height:17px}.hb-key[aria-current] .hb-key-n circle{fill:var(--signal);transition:fill .12s linear calc(var(--c) * 18ms)}.hb-key-name{white-space:nowrap;color:var(--text-muted);transition:color var(--t-state) var(--ease-out);font-size:13.5px;font-weight:650;line-height:1.25}.hb-key[aria-current] .hb-key-name,.hb-key:focus-visible .hb-key-name{color:var(--text)}@media (hover:hover){.hb-key:hover .hb-key-name{color:var(--text)}}[dir=rtl] .hb-key-name{line-height:1.5}.hb-key-live{background:var(--signal);width:6px;height:6px;box-shadow:0 0 0 3px var(--signal-soft);opacity:0;transition:opacity .2s linear, scale .2s var(--ease-out);border-radius:50%;position:absolute;inset-block-start:9px;inset-inline-end:9px;scale:.4}.hb-key[aria-current] .hb-key-live{opacity:1;transition:opacity .26s linear var(--hb-t), scale .42s var(--ease-out) var(--hb-t);scale:1}.hb-key .k-peel-under svg{width:9px;height:9px}@media (min-width:640px){.hb-scan{--hb-gap:10px;--hb-m:17px}.hb-scan .hb-win{--peel:64px;--pt:84px;--pb:112px;--px:36px;--tag:26px;border-radius:28px}.hb-win .hb-n{height:40px}.hb-name{font-size:24px}.hb-makers{gap:2px 11px;font-size:14.5px}.hb-lamp:before{inset-inline:-64px}.hb-lamp:after{inset-block-start:13px}.hb-scan .hb-key{--peel:20px;border-radius:16px;gap:7px;min-height:62px}.hb-key .hb-key-n{height:19px}}@media (min-width:1024px){.k-hero:has(.hb-scan){align-content:start}.k-hero-in:has(.hb-scan){grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:48px}.hb-scan{height:clamp(420px, calc(100svh - var(--nv-h,100px) - 136px), 664px);grid-template-rows:minmax(0,1fr) auto}.hb-scan .hb-win{border-radius:var(--r-l);height:auto;min-height:0}}@media (min-width:1280px){.hb-scan{--hb-gap:12px}.hb-scan .hb-win{--peel:72px;--pt:84px;--pb:110px;--px:36px;--tag:30px}.hb-win .hb-n{height:46px}.hb-name{font-size:28px}.hb-makers{font-size:15px}.hb-scan .hb-key{min-height:72px;padding:12px 13px}.hb-key .hb-key-n{height:21px}.hb-key-name{font-size:14px}}@container hb-scan (min-width:540px) and (max-width:579.98px){.hb-scan .hb-key{--peel:16px;padding-inline:11px}.hb-key-name{font-size:13px}}@media (min-width:1024px){@container (max-height:470px){.hb-stack{--pt:64px;--pb:90px;--px:28px;--tag:26px}.hb-win .hb-n{height:30px}.hb-name{font-size:20px}.hb-makers{font-size:13.5px}}}.hb-slide[data-state=in]{animation:hb-open-b var(--hb-t) var(--hb-ease) both}.hb-slide[data-state=in] .hb-xray{animation:hb-tail-b var(--hb-t) var(--hb-ease) var(--hb-tail) both}.hb-scan[data-to=end] .hb-slide[data-state=in],[dir=rtl] .hb-scan[data-to=start] .hb-slide[data-state=in]{animation-name:hb-open-a}.hb-scan[data-to=end] .hb-slide[data-state=in] .hb-xray,[dir=rtl] .hb-scan[data-to=start] .hb-slide[data-state=in] .hb-xray{animation-name:hb-tail-a}[dir=rtl] .hb-scan[data-to=end] .hb-slide[data-state=in]{animation-name:hb-open-b}[dir=rtl] .hb-scan[data-to=end] .hb-slide[data-state=in] .hb-xray{animation-name:hb-tail-b}@keyframes hb-open-a{0%{clip-path:inset(0 calc(100% - var(--hb-m)) 0 0)}to{clip-path:inset(0 var(--hb-m) 0 0)}}@keyframes hb-open-b{0%{clip-path:inset(0 0 0 calc(100% - var(--hb-m)))}to{clip-path:inset(0 0 0 var(--hb-m))}}@keyframes hb-tail-a{0%{clip-path:inset(0 0 0 var(--hb-m))}to{clip-path:inset(0 0 0 100%)}}@keyframes hb-tail-b{0%{clip-path:inset(0 var(--hb-m) 0 0)}to{clip-path:inset(0 100% 0 0)}}@media (prefers-reduced-motion:reduce){.hb-slide[data-state=in],.hb-slide[data-state=in] .hb-xray{animation:none}.hb-stack{clip-path:none}.hb-stack,.hb-slide[data-state=out] .hb-tag,.hb-shot,.hb-floor,.hb-lamp,.hb-lamp:before,.hb-key-live,.hb-key[aria-current] .hb-key-live,.hb-win .hb-n circle,.hb-scan[data-beat] .hb-win .hb-n circle,.hb-win:hover .hb-n circle,.hb-win:focus-visible .hb-n circle,.hb-key .hb-key-n circle,.hb-key:hover .hb-key-n circle,.hb-key:focus-visible .hb-key-n circle,.hb-key[aria-current] .hb-key-n circle{transition:none}.hb-win:hover,.hb-win:focus-visible,.hb-win[data-peek]{--lift:0px}.hb-win:hover .hb-floor,.hb-win:focus-visible .hb-floor,.hb-win[data-peek] .hb-floor{opacity:1;scale:1}}