:root,[data-theme=light]{--hf-bg:#f4f2ee;--hf-surface:#fff;--hf-text:#1a1714;--hf-muted:#6b645c;--hf-border:#d9d3cb;--hf-accent:#2c6e49;--hf-accent-contrast:#fff;--hf-danger:#b42318;--hf-board-bg:#faf8f5;--hf-fret-wire:#c4bdb4;--hf-string:#3d3833;--hf-finger-dot:#2c6e49;--hf-finger-num:#fff;--hf-shadow:#1a171414}[data-theme=dark]{--hf-bg:#12110f;--hf-surface:#1c1a17;--hf-text:#f2efe9;--hf-muted:#a39a90;--hf-border:#3a3631;--hf-accent:#6abf8e;--hf-accent-contrast:#0f140f;--hf-danger:#f97066;--hf-board-bg:#141311;--hf-fret-wire:#4a453e;--hf-string:#d5cfc5;--hf-finger-dot:#6abf8e;--hf-finger-num:#0f140f;--hf-shadow:#00000059}*,:before,:after{box-sizing:border-box}html,body{background:var(--hf-bg);min-height:100%;color:var(--hf-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100vh}.hf-shell{box-sizing:border-box;max-width:100%;margin:0 auto;padding:1rem clamp(1rem,3vw,3rem) 2rem}.hf-shell--center{justify-content:center;align-items:center;min-height:60vh;display:flex}.hf-navbar{top:env(safe-area-inset-top,0px);z-index:200;background:var(--hf-surface);border:1px solid var(--hf-border);box-shadow:0 1px 3px var(--hf-shadow);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.25rem;margin:0 -.25rem 1.25rem;padding:.65rem .85rem;display:flex;position:sticky}.hf-navbar__brand{color:inherit;background:0 0;align-items:center;line-height:1.2;text-decoration:none;display:flex}.hf-navbar__brand-text{letter-spacing:-.03em;color:var(--hf-accent);font-size:1.35rem;font-weight:700}.hf-navbar__brand:focus-visible{outline:2px solid var(--hf-accent);outline-offset:4px;border-radius:8px}.hf-navbar__nav{flex-wrap:wrap;align-items:center;gap:.25rem .5rem;display:flex}.hf-navbar__link{color:var(--hf-muted);border-radius:8px;padding:.4rem .75rem;font-size:.92rem;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.hf-navbar__link:hover{color:var(--hf-text);background:color-mix(in srgb, var(--hf-accent) 12%, transparent)}.hf-navbar__link.is-active{color:var(--hf-accent);background:color-mix(in srgb, var(--hf-accent) 14%, transparent);font-weight:600}.hf-page{padding-bottom:2rem}.hf-page--narrow{max-width:38rem}.hf-page__title{margin:0 0 .5rem;font-size:1.45rem;font-weight:650}.hf-page__lead{color:var(--hf-muted);margin:0 0 1.5rem;font-size:.95rem;line-height:1.45}.hf-settings-block{background:var(--hf-surface);border:1px solid var(--hf-border);box-shadow:0 1px 2px var(--hf-shadow);border-radius:10px;margin-bottom:1rem;padding:1rem 1.1rem}.hf-settings-block__title{color:var(--hf-text);margin:0 0 .35rem;font-size:1rem;font-weight:600}.hf-settings-block__desc{color:var(--hf-muted);margin:0 0 .85rem;font-size:.85rem;line-height:1.4}.hf-settings-block__select{border:1px solid var(--hf-border);background:var(--hf-bg);min-width:10rem;color:var(--hf-text);font:inherit;border-radius:8px;padding:.45rem .55rem}.hf-settings-block__checkbox{margin-top:.15rem}.hf-about p{color:var(--hf-text);margin:0 0 1rem;font-size:.95rem;line-height:1.55}.hf-about p:last-child{margin-bottom:0}.hf-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem;display:flex}.hf-header__titles h1{letter-spacing:-.02em;margin:0;font-size:1.65rem;font-weight:650}.hf-header__sub{color:var(--hf-muted);margin:.35rem 0 0;font-size:.95rem}.hf-header__controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.hf-toolbar{background:var(--hf-surface);border:1px solid var(--hf-border);box-shadow:0 1px 2px var(--hf-shadow);border-radius:10px;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;margin-bottom:1rem;padding:.85rem 1rem;display:flex}.hf-toolbar-scale{border-left:1px solid var(--hf-border);flex-wrap:wrap;align-items:flex-end;gap:.35rem .65rem;margin-left:auto;padding-left:.5rem;display:flex}.hf-toolbar-scale__cell{flex-direction:column;align-items:center;gap:.12rem;min-width:1.65rem;display:flex}.hf-toolbar-scale__roman{color:var(--hf-muted);letter-spacing:-.02em;font-size:.68rem;font-weight:600;line-height:1.1}.hf-toolbar-scale__note{color:var(--hf-text);font-size:.95rem;font-weight:600;line-height:1.1}.hf-label{color:var(--hf-muted);flex-direction:column;gap:.25rem;font-size:.8rem;display:flex}.hf-label--inline{flex-direction:row;align-items:center;gap:.4rem}.hf-label select,.hf-label input[type=number]{border:1px solid var(--hf-border);background:var(--hf-bg);min-width:8rem;color:var(--hf-text);border-radius:6px;padding:.4rem .5rem}.hf-toggle{border:1px solid var(--hf-border);border-radius:8px;display:inline-flex;overflow:hidden}.hf-toggle__btn{color:var(--hf-muted);cursor:pointer;background:0 0;border:none;padding:.35rem .65rem;font-size:.85rem}.hf-toggle__btn.is-on{background:var(--hf-accent);color:var(--hf-accent-contrast)}.hf-btn{border:1px solid var(--hf-border);background:var(--hf-surface);color:var(--hf-text);cursor:pointer;border-radius:8px;padding:.45rem .85rem;font-size:.9rem}.hf-btn--primary{background:var(--hf-accent);color:var(--hf-accent-contrast);border-color:#0000;font-weight:600}.hf-btn--small{padding:.25rem .5rem;font-size:.8rem}.hf-btn--danger{border-color:var(--hf-danger);color:var(--hf-danger);background:0 0}.hf-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hf-main{min-height:60vh}.hf-main--catalog-open{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(280px,min(40%,900px)) minmax(0,1fr);gap:.5rem .35rem;display:grid}.hf-main__left{flex-direction:column;grid-area:1/1/-1;gap:.5rem;min-width:0;min-height:0;display:flex}.hf-main__left-top{flex-direction:row;align-items:flex-start;gap:.35rem;min-width:0;display:flex}.hf-main__left-top .hf-main__catalog-head{flex:auto;min-width:0;margin-bottom:0}.hf-main__left-top .hf-main__splitter-head-gap{flex:0 0 1.35rem;width:1.35rem}.hf-main__catalog-row{flex-direction:row;flex:auto;align-items:stretch;gap:.35rem;min-width:0;min-height:0;display:flex}.hf-main__catalog-row .hf-main__catalog{flex:auto;min-width:0;max-width:none;min-height:0}.hf-main__catalog-row .hf-main__splitter{flex-direction:column;flex:0 0 1.35rem;align-self:stretch;min-height:0;display:flex}.hf-main__catalog-row .hf-main__splitter-btn{flex:auto;width:100%;min-height:0}.hf-main--catalog-open>.hf-main__practice-head{grid-area:1/2;align-self:start;margin-bottom:0}.hf-main--catalog-open>.hf-main__practice{flex-direction:column;grid-area:2/2;min-width:0;min-height:0;display:flex}.hf-main__catalog-head .hf-catalog-search{flex:12rem;min-width:min(100%,9rem);max-width:none}.hf-main__catalog{flex-direction:column;flex:42%;min-width:280px;max-width:min(72%,2000px);min-height:0;display:flex}.hf-main__catalog[hidden]{display:none!important}.hf-main--catalog-collapsed{flex-direction:row;align-items:stretch;gap:.35rem;min-height:0;display:flex}.hf-main--catalog-collapsed .hf-main__splitter{flex-direction:column;flex:0 0 1.35rem;align-self:stretch;min-height:0;display:flex}.hf-main--catalog-collapsed .hf-main__splitter-btn{flex:auto;width:100%;min-height:0}.hf-main--catalog-collapsed .hf-main__practice{flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex}.hf-main__splitter-btn{box-sizing:border-box;border:1px solid var(--hf-border);background:var(--hf-surface);width:100%;min-height:2.75rem;color:var(--hf-muted);cursor:pointer;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:.25rem .1rem;transition:background .15s,color .15s,border-color .15s;display:flex}.hf-main__splitter-btn:hover{background:var(--hf-bg);color:var(--hf-accent);border-color:var(--hf-accent)}.hf-main__splitter-btn:focus-visible{outline:2px solid var(--hf-accent);outline-offset:2px}.hf-main__practice{flex-direction:column;flex:64%;min-width:0;min-height:0;display:flex}.hf-section-title{color:var(--hf-muted);margin:0 0 .5rem;font-size:.95rem;font-weight:600}.hf-main--catalog-open .hf-section-title.hf-main__practice-head{margin-bottom:0}.hf-catalog__head,.hf-main__catalog-head{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:.65rem .85rem;margin-bottom:.5rem;display:flex}.hf-catalog__title{flex:0 auto;margin:0}.hf-catalog-search{box-sizing:border-box;border:1px solid var(--hf-border);background:var(--hf-surface);border-radius:9999px;flex:10rem;align-items:center;gap:.35rem;min-width:min(100%,9rem);max-width:17rem;padding:.28rem .55rem .28rem .85rem;transition:border-color .15s,box-shadow .15s;display:flex}.hf-catalog-search:focus-within{border-color:var(--hf-accent);box-shadow:0 0 0 1px color-mix(in srgb, var(--hf-accent) 35%, transparent)}.hf-catalog-search__input{min-width:0;font:inherit;color:var(--hf-text);background:0 0;border:none;flex:auto;margin:0;padding:0;font-size:.88rem}.hf-catalog-search__input::placeholder{color:var(--hf-muted);opacity:.85}.hf-catalog-search__input:focus{outline:none}.hf-catalog-search__icon{color:var(--hf-muted);opacity:.75;pointer-events:none;flex:none;justify-content:center;align-items:center;display:flex}.hf-catalog{flex-direction:column;flex:auto;min-height:0;display:flex}.hf-catalog__list{grid-template-columns:repeat(var(--hf-catalog-cols,2), minmax(0, 1fr));scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--hf-border) var(--hf-surface);flex:0 auto;align-content:start;gap:.65rem;min-height:0;max-height:calc(100vh - 220px);padding-right:.25rem;display:grid;overflow:hidden auto}.hf-catalog__list--virtual{contain:layout paint;display:block}.hf-catalog__virtual-inner{width:100%}.hf-catalog__virtual-row{padding-bottom:.35rem}.hf-catalog__virtual-row--grid{grid-template-columns:repeat(var(--hf-catalog-cols,2), minmax(0, 1fr));align-content:start;gap:.5rem;display:grid}.hf-catalog__list::-webkit-scrollbar{width:10px}.hf-catalog__list::-webkit-scrollbar-track{background:var(--hf-surface);border-radius:6px}.hf-catalog__list::-webkit-scrollbar-thumb{background:var(--hf-border);border:2px solid var(--hf-surface);border-radius:6px}.hf-catalog__list::-webkit-scrollbar-thumb:hover{background:var(--hf-muted)}.hf-catalog-card{width:100%;min-width:0;position:relative}.hf-catalog-card__pick{width:100%;padding-inline:1.85rem}.hf-catalog-card__nav{z-index:2;min-width:28px;min-height:28px;color:var(--hf-muted);font:inherit;cursor:pointer;opacity:.42;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 .15rem;font-size:1.35rem;line-height:1;transition:opacity .15s,color .15s,background .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.hf-catalog-card__nav:hover:not(:disabled){opacity:.85;color:var(--hf-accent);background:color-mix(in srgb, var(--hf-accent) 12%, transparent)}.hf-catalog-card__nav:focus-visible{outline:2px solid var(--hf-accent);outline-offset:2px}.hf-catalog-card__nav:disabled{opacity:.15;cursor:default}.hf-catalog-card__nav--prev{left:.1rem}.hf-catalog-card__nav--next{right:.1rem}.hf-card{text-align:center;background:var(--hf-surface);border:1px solid var(--hf-border);box-shadow:0 1px 2px var(--hf-shadow);border-radius:10px;flex-direction:column;align-items:center;padding:.65rem .75rem;display:flex}button.hf-card{cursor:pointer;width:100%;font:inherit;color:inherit;align-items:center}.hf-card--pick:hover{border-color:var(--hf-accent)}.hf-card--dragging{opacity:.85;box-shadow:0 6px 20px var(--hf-shadow)}.hf-card__head{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35rem .65rem;width:100%;margin-bottom:.35rem;display:flex}.hf-card__diagram{justify-content:center;width:100%;margin:.15rem 0;display:flex}.hf-card__diagram svg{margin-inline:auto}.hf-card__symbol{font-size:1.05rem;font-weight:700}.hf-card__roman{color:var(--hf-muted);font-size:.85rem;font-style:italic}.hf-card__notes{color:var(--hf-muted);width:100%;margin:.35rem 0 .15rem;font-size:.8rem}.hf-card__actions{justify-content:center;width:100%;margin-top:.45rem;display:flex}.hf-practice__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;gap:.65rem;min-height:120px;display:grid}.hf-shell--compact .hf-practice__grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}.hf-practice__sortable{cursor:grab;touch-action:none}.hf-practice__sortable:active{cursor:grabbing}.hf-empty{color:var(--hf-muted);border:1px dashed var(--hf-border);background:var(--hf-surface);border-radius:10px;margin:0;padding:1rem}@media (width<=900px){.hf-main--catalog-open{grid-template-columns:unset;grid-template-rows:unset;flex-direction:column;gap:.5rem;display:flex}.hf-main--catalog-open .hf-main__left,.hf-main--catalog-open .hf-main__left-top,.hf-main--catalog-open .hf-main__catalog-row{display:contents}.hf-main--catalog-open .hf-main__splitter-head-gap{display:none}.hf-main--catalog-open .hf-main__catalog-head{order:1;margin-bottom:0}.hf-main--catalog-open .hf-main__catalog{order:2;min-width:0;max-width:none}.hf-main--catalog-open .hf-main__splitter{flex:none;order:3;align-self:stretch;width:100%}.hf-main--catalog-open .hf-main__practice-head{order:4;margin-bottom:0}.hf-main--catalog-open .hf-main__practice{order:5}.hf-main__catalog-row .hf-main__splitter-btn{flex:none;height:auto;min-height:2.25rem}.hf-main__catalog{max-width:none}.hf-catalog__list{max-height:none}.hf-main--catalog-collapsed .hf-main__splitter{flex:none;order:2;width:100%}.hf-main--catalog-collapsed .hf-main__catalog{order:1}.hf-main--catalog-collapsed .hf-main__practice{order:3}.hf-main--catalog-collapsed .hf-main__splitter-btn{flex:none;height:auto;min-height:2.25rem}.hf-main__splitter-btn{width:100%;min-height:2.25rem;padding:.35rem}.hf-main__splitter-btn svg{transform:rotate(90deg)}}