.hotkey-visual{background:radial-gradient(circle at 0 0,#8c7cff3d,#0000 28rem),radial-gradient(circle at 100% 0,#5fd8ff29,#0000 24rem),#111522b8;border:1px solid #8c7cff47;border-radius:24px;margin:1.5rem 0 2rem;padding:1.5rem;box-shadow:0 24px 80px #00000038}.hotkey-visual__badge{color:#7de7ff;letter-spacing:.08em;border:1px solid #5fd8ff59;border-radius:999px;width:fit-content;margin-bottom:.75rem;padding:.35rem .65rem;font-size:.72rem;font-weight:800;display:inline-flex}.hotkey-visual h2{letter-spacing:-.04em;margin:0;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.05}.hotkey-visual p{max-width:760px;color:color-mix(in srgb, var(--sl-color-white), transparent 28%);margin:1rem 0 0;line-height:1.75}.hotkey-visual__shell{overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:18px;justify-content:center;width:100%;max-width:100%;margin-top:1.25rem;padding:.75rem .25rem 1rem;display:flex;overflow:auto hidden}.hotkey-visual__shell::-webkit-scrollbar{height:8px}.hotkey-visual__shell::-webkit-scrollbar-track{background:#ffffff0f;border-radius:999px}.hotkey-visual__shell::-webkit-scrollbar-thumb{background:#8c7cff73;border-radius:999px}.hotkey-visual__shell::-webkit-scrollbar-thumb:hover{background:#8c7cffa6}.hotkey-visual__keyboard{gap:.45rem;margin-top:1.5rem;display:grid}.hotkey-visual__keyboard--real{grid-template-rows:repeat(6,3.6rem);grid-template-columns:repeat(29,1.6rem);gap:.45rem;width:max-content;min-width:max-content;margin-inline:auto;display:grid}.hotkey-visual__key{--hotkey-visual-accent:#ffffff47;box-sizing:border-box;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:.75rem;grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-content:stretch;align-items:stretch;gap:0;height:3.6rem;min-height:3.6rem;margin:0;padding:.42rem .48rem;display:grid;overflow:hidden;box-shadow:inset 0 -.2rem #0000002e}.hotkey-visual__key--real{align-self:stretch;min-width:0}.hotkey-visual__key__label{color:#fff;place-self:start;padding-top:.05rem;font-size:.9rem;font-weight:850;line-height:1}.hotkey-visual__key__desc{-webkit-line-clamp:2;line-clamp:2;max-width:100%;color:color-mix(in srgb, var(--sl-color-white), transparent 38%);word-break:keep-all;-webkit-box-orient:vertical;place-self:end start;padding-bottom:.03rem;font-size:.68rem;font-weight:700;line-height:1.15;display:-webkit-box;overflow:hidden}.hotkey-visual__keyboard--real .hotkey-visual__key__label{font-size:.82rem}.hotkey-visual__keyboard--real .hotkey-visual__key__desc{font-size:.62rem;font-weight:700}.hotkey-visual__key--purple{--hotkey-visual-accent:#8c7cfff2;background:#8c7cff24;border-color:#8c7cff6b}.hotkey-visual__key--sky{--hotkey-visual-accent:#5fd8fff2;background:#5fd8ff1f;border-color:#5fd8ff6b}.hotkey-visual__key--green{--hotkey-visual-accent:#5bffade6;background:#5bffad1a;border-color:#5bffad5c}.hotkey-visual__key--yellow{--hotkey-visual-accent:#ffda6af2;background:#fffd6a31;border-color:#ffda6a6b}.hotkey-visual__key--red{--hotkey-visual-accent:#ff7575f2;background:#ff75751a;border-color:#ff75756b}.hotkey-visual__key--blue{--hotkey-visual-accent:#6a9cfff2;background:#6a9cff1c;border-color:#6a9cff6b}.hotkey-visual__key--pink{--hotkey-visual-accent:#ff7ed2f2;background:#ff7ed21a;border-color:#ff7ed26b}.hotkey-visual__key--gray{--hotkey-visual-accent:#d2d8e6bf;background:#d2d8e614;border-color:#d2d8e647}.hotkey-visual__key--lightgray{--hotkey-visual-accent:#eef2f8f2;background:linear-gradient(#fff3,#eef2f81a),#eef2f829;border-color:#eef2f875;box-shadow:inset 0 .08rem #ffffff29,inset 0 -.2rem #0003}.hotkey-visual__legend{flex-wrap:wrap;gap:.55rem;margin-top:1rem;display:flex}.hotkey-visual__legend__item{--hotkey-visual-accent:#ffffff47;color:color-mix(in srgb, var(--sl-color-white), transparent 28%);background:#ffffff0e;border:1px solid #ffffff18;border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .6rem;font-size:.78rem;display:inline-flex}.hotkey-visual__legend__dot{background:var(--hotkey-visual-accent);opacity:.85;border-radius:999px;width:.5rem;height:.5rem}@media (width<=760px){.hotkey-visual__shell{justify-content:flex-start}.hotkey-visual__keyboard--real{grid-template-columns:repeat(29,1.45rem)}}@media (width<=640px){.hotkey-visual{border-radius:18px;padding:1rem}}.hotkey-list{grid-template-columns:repeat(var(--hotkey-list-columns,1), minmax(0, 1fr));align-items:start;gap:1rem;width:100%;margin:1rem 0 2rem;display:grid}.hotkey-list__column{flex-direction:column;min-width:0;margin:0;padding:0;display:flex}.hotkey-list__heading{color:var(--sl-color-white);letter-spacing:-.01em;margin:0 0 .75rem;padding:0;font-size:.95rem;font-weight:800;line-height:1.25}.hotkey-list__items{grid-auto-rows:4.2rem;gap:.7rem;margin:0;padding:0;display:grid}.hotkey-list__item{box-sizing:border-box;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:.9rem;grid-template-columns:max-content minmax(0,1fr);place-items:center start;column-gap:.85rem;min-width:0;height:100%;margin:0;padding:.72rem .8rem;display:grid;overflow:visible;box-shadow:inset 0 .08rem #ffffff0f}.hotkey-list__item>*{margin:0!important}.hotkey-list__key{color:#fff;white-space:nowrap;background:#8c7cff5c;border-radius:.55rem;justify-content:center;align-self:center;align-items:center;width:fit-content;min-width:2.35rem;max-width:100%;min-height:1.65rem;padding:.24rem .5rem;font-size:.82rem;font-weight:850;line-height:1;display:inline-flex;margin:0!important}.hotkey-list__content{flex-direction:column;justify-content:center;align-self:center;min-width:0;height:100%;display:flex;overflow:hidden;margin:0!important}.hotkey-list__title{color:#fff;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;font-size:.9rem;font-weight:800;line-height:1.2;overflow:hidden}.hotkey-list__meta{color:color-mix(in srgb, var(--sl-color-white), transparent 38%);text-overflow:ellipsis;white-space:nowrap;margin:.2rem 0 0;padding:0;font-size:.76rem;font-weight:600;line-height:1.25;overflow:hidden}@media (width<=64rem){.hotkey-list{grid-template-columns:repeat(min(var(--hotkey-list-columns,1), 2), minmax(0, 1fr))}}@media (width<=42rem){.hotkey-list{grid-template-columns:1fr}.hotkey-list__items{grid-auto-rows:auto}.hotkey-list__item{grid-template-columns:1fr;align-items:start;row-gap:.5rem;height:auto;min-height:4.2rem}.hotkey-list__key{min-width:0}.hotkey-list__content{height:auto}}
