@layer components{.hb-page{background:var(--gp-page);min-height:100%;color:var(--gp-ink);font-family:var(--gp-f-body);padding:28px 32px 48px;container:hub/inline-size}.hb-in{flex-direction:column;gap:24px;max-width:1080px;margin:0 auto;display:flex}.hb-meta{color:var(--gp-ink-3);font-size:13px;font-weight:550}.hb-hero{flex-direction:column;align-items:center;gap:10px;display:flex}.hb-ask{width:100%;max-width:720px;position:relative}.hb-ask-icon{width:22px;height:22px;color:var(--gp-ink-3);pointer-events:none;position:absolute;top:18px;left:18px}.hb-ask-input{box-sizing:border-box;border-radius:var(--gp-r-l);background:var(--gp-card);width:100%;height:58px;box-shadow:inset 0 0 0 1px var(--gp-line);color:var(--gp-ink);outline:none;padding:0 300px 0 52px;font-size:19px;font-weight:550}.hb-ask-input::placeholder{color:var(--gp-ink-3);font-weight:500}.hb-ask-input:focus-visible{box-shadow:inset 0 0 0 1.5px var(--gp-m-300);outline:none}.hb-ask-btns{gap:8px;display:flex;position:absolute;top:11px;right:10px}.hb-reading{max-width:760px;min-height:34px;color:var(--gp-ink-2);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}.hb-reading b{color:var(--gp-ink)}.hb-reading b[data-miss]{color:var(--gp-ink-mute);text-decoration:line-through}.hb-eg{height:30px;box-shadow:inset 0 0 0 1px var(--gp-edge);color:var(--gp-ink-2);cursor:pointer;border-radius:99px;padding:0 11px;font-size:13px;font-weight:600}.hb-eg:hover{box-shadow:inset 0 0 0 1px var(--gp-ink-3);font-style:italic}.hb-hit{border-radius:var(--gp-r-s);background:var(--gp-card);height:32px;box-shadow:var(--gp-ring-c);color:var(--gp-ink);align-items:center;gap:6px;padding:0 10px 0 12px;font-size:13.5px;display:inline-flex}.hb-hit span:last-child{color:var(--gp-ink-3);font-size:12px}.hb-board{border-radius:var(--gp-r-xl);background:var(--gp-card);box-shadow:var(--gp-ring-c);flex-direction:column;gap:14px;padding:16px 18px 14px;display:flex}.hb-board-head{align-items:center;gap:10px;display:flex}.hb-board-head h2{flex:1}.hb-controls{align-items:center;gap:14px;display:flex}.hb-adjust{display:none;position:relative}.hb-adjust-dot{background:var(--gp-m-500);border-radius:50%;width:7px;height:7px;position:absolute;top:5px;right:5px}.hb-adjust-sheet{flex-direction:column;align-self:stretch;display:flex}.hb-adjust-sheet .hb-control{min-height:56px;box-shadow:0 1px 0 var(--gp-line);justify-content:space-between}.hb-adjust-sheet .hb-control:last-child{box-shadow:none}.hb-adjust-sheet .hb-meta{color:var(--gp-ink);font-size:15px;font-weight:650}.hb-control{align-items:center;gap:6px;display:flex}.hb-swap{display:grid}.hb-swap>span{grid-area:1/1;justify-content:center;align-items:center;gap:8px;display:inline-flex}.hb-swap>span:not([data-shown]){visibility:hidden}.hb-board-head h2,.hb-library-head h2{margin:0;font-size:18px;font-weight:760}.hb-cards{flex-wrap:wrap;gap:12px;display:flex}.hb-board-empty{margin:4px 0}.hb-card{box-sizing:border-box;border-radius:var(--gp-r-m);background:var(--gp-page);width:152px;animation:hb-pop var(--gp-d-pop) var(--gp-spring-pop) both;animation-delay:calc(min(var(--i,0), 10) * var(--gp-stagger));flex-direction:column;align-items:center;gap:4px;padding:12px 6px 6px;display:flex;position:relative}.hb-card[data-now]{box-shadow:0 0 0 2px var(--gp-m-500);transition:box-shadow var(--gp-d-state) linear}.hb-card[data-miss]{min-height:210px;box-shadow:inset 0 0 0 1.5px var(--gp-edge);text-align:center;background:0 0;justify-content:center}.hb-card-sounds{height:15px;color:var(--gp-m-700);margin-top:-4px;font-size:12px;font-weight:650;line-height:15px}.hb-corner.hb-remove{position:absolute;top:8px;right:8px}.hb-card-name{color:var(--gp-ink);letter-spacing:-.02em;font-size:24px;font-weight:800}.hb-card-label{min-height:17px;font-size:12px}.hb-card-dg svg{width:112px;height:auto;display:block}.hb-card-tools{justify-content:center;align-items:center;max-width:100%;display:flex}.hb-card-tools .gp-btn{width:26px;min-width:0;padding:0}.hb-count{text-align:center;min-width:32px;font-size:12px}.hb-board-foot{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hb-hint{color:var(--gp-ink-3);text-align:right;margin:0 0 0 auto;font-size:12.5px}@keyframes hb-pop{0%{opacity:0;transform:translateY(10px)scale(.94)}60%{opacity:1}to{opacity:1;transform:none}}.hb-library{flex-direction:column;gap:14px;display:flex}.hb-library-head{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hb-qualities{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hb-sep{color:var(--gp-edge);padding:0 4px;font-size:18px}.hb-library-body{transition:opacity var(--gp-d-state) linear;flex-direction:column;gap:18px;display:flex}.hb-library-body[data-pending]{opacity:.55}.hb-group{flex-direction:column;gap:6px;scroll-margin-top:16px;display:flex}.hb-group h3{color:var(--gp-ink-2);margin:4px 0 2px;font-size:14px;font-weight:720}.hb-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;display:grid}.hb-lc{position:relative}.hb-chord.gp-hop{border-radius:var(--gp-r-m);color:var(--gp-ink);flex-direction:column;gap:1px;padding:9px 10px 8px;display:flex}.hb-chord-name,.hb-chord-q{text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden}.hb-chord-name{font-size:16px;font-weight:760;line-height:1.3}.hb-chord-q{color:var(--gp-ink-3);font-size:11px;font-weight:550;line-height:1.3}.hb-chord-dg{align-self:center;margin-top:7px}.hb-chord-dg svg{width:84px;height:auto;display:block}.hb-acts{flex-direction:column;align-items:center;display:flex;position:absolute;top:6px;right:7px}.gp-pick-toggle.hb-fav{width:24px;height:22px;position:relative}.hb-fav:before{content:"";position:absolute;inset:0 -8px -4px}.hb-fav svg{width:14px;height:15px}.hb-chord-dg[data-loading]{border-radius:var(--gp-r-s);background:var(--gp-well);width:84px;height:72px}@media (hover:hover){.hb-pin,.hb-fav:not([aria-pressed=true]){opacity:0;transition:opacity var(--gp-d-state) linear, color var(--gp-d-state) linear, transform var(--gp-d-pop) var(--gp-spring-pop)}.hb-acts{transition:transform var(--gp-d-hop) var(--gp-hop)}.hb-lc:hover :is(.hb-pin,.hb-fav),:is(.hb-pin,.hb-fav):focus-visible,.hb-pin[data-done]{opacity:1}.hb-lc:hover .hb-acts{transform:translateY(calc(var(--gp-hop-lift) * -1))}}.hb-corner{border-radius:var(--gp-r-s);background:var(--gp-m-100);width:24px;height:24px;color:var(--gp-m-700);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--gp-d-state) linear, color var(--gp-d-state) linear, scale var(--gp-d-state) var(--gp-e-rise);place-items:center;display:grid;position:relative}.hb-corner:before{content:"";position:absolute;inset:-8px}.hb-corner svg{stroke-width:2.6px;width:14px;height:14px}.hb-corner.is-down{scale:.88}.hb-corner[data-done]{background:var(--gp-m-500);color:var(--gp-m-on)}.hb-corner[data-kind=remove]{color:var(--gp-ink-3);background:0 0}@media (hover:hover){.hb-corner:hover{background:var(--gp-m-500);color:var(--gp-m-on)}.hb-corner[data-kind=remove]:hover{background:var(--gp-well);color:var(--gp-ink)}}.hb-table-wrap{border-radius:var(--gp-r-l);background:var(--gp-card);max-height:560px;box-shadow:var(--gp-ring-c);padding:0 10px 12px 0;overflow:auto}.hb-table{border-collapse:separate;border-spacing:0}.hb-table td{padding:1.5px}.hb-table thead th{z-index:2;background:var(--gp-card);padding:12px 4px 7px;font-size:13px;font-weight:750;position:sticky;top:0}.hb-table thead th:first-child{z-index:3;left:0}.hb-table tbody th{z-index:1;background:var(--gp-card);color:var(--gp-ink-3);text-align:left;white-space:nowrap;padding:0 10px 0 12px;font-size:12px;font-weight:650;position:sticky;left:0}.hb-table .hb-table-cat th{color:var(--gp-ink-2);background:0 0;padding-top:12px;font-size:11.5px;font-weight:750;position:static}.hb-table-cat span{display:inline-block;position:sticky;left:12px}.hb-table td a{border-radius:var(--gp-r-s);width:64px;height:30px;color:var(--gp-ink-2);white-space:nowrap;place-items:center;font-size:12.5px;font-weight:650;display:grid}.hb-table td a:hover{background:var(--gp-well);color:var(--gp-ink);font-style:italic}.hb-credit{color:var(--gp-ink-3);box-shadow:0 -1px 0 var(--gp-line);margin:0;padding-top:16px;font-size:12px}.hb-credit a{color:var(--gp-ink-2);text-decoration:underline}@media (prefers-reduced-motion:reduce){.hb-card{animation:none}}@container hub (max-width:959px){.hb-page{padding:24px 24px 40px}.hb-controls{display:none}.hb-adjust{display:inline-flex}}@container hub (max-width:719px){.hb-page{padding:14px 14px 28px}.hb-in{gap:16px}.hb-ask-input{height:50px;padding:0 12px 0 44px;font-size:16px}.hb-ask-icon{top:14px;left:14px}.hb-ask-btns{justify-content:center;margin-top:10px;position:static}.hb-board{margin:0 -4px;padding:12px}.hb-cards{flex-wrap:nowrap;margin:0 -12px;padding:4px 12px 8px;overflow-x:auto}.hb-card{flex:none;width:132px}.hb-hint{text-align:left;margin:0}.hb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.hb-qualities{flex-wrap:nowrap;margin:0 -14px;padding:2px 14px 6px;overflow-x:auto}.hb-library-head .gp-seg{width:100%}}@container hub (max-width:359px){.hb-adjust-lab{display:none}.hb-board-head{gap:6px}.hb-library-head .gp-seg>button{padding:0 6px}}}