.bass{--layer-main:#2a62a3;--layer-main-soft:#dde8f5;--layer-side:#a3631b;--layer-side-soft:#f5e6d1;--layer-badge-text:#fff}@media (prefers-color-scheme:dark){.bass{--layer-main:#7eaee6;--layer-main-soft:#1d2b3c;--layer-side:#e2aa62;--layer-side-soft:#3a2b18;--layer-badge-text:#14100d}}.layers{flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin:0 0 .75rem;display:flex}.layer-pick{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.layer-pick>span{color:var(--muted);margin-right:.15rem;font-size:.9rem}.layer-pick button{border:1px solid var(--line);background:var(--card);min-height:2.75rem;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;padding:0 .85rem;font-size:.9rem}.layer-pick button[aria-pressed=true]{border-color:var(--red);background:var(--red);color:#fff;font-weight:600}.tonality{align-items:center;gap:.5rem;display:flex}.tonality button{border:1px solid var(--edge);background:var(--card);width:2.75rem;height:2.75rem;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;font-size:1.35rem;line-height:1}.tonality button:disabled{opacity:.4;cursor:default}.tonality select{border:1px solid var(--edge);background:var(--card);min-width:9rem;min-height:2.75rem;color:var(--text);font:inherit;border-radius:.6rem;padding:0 .6rem;font-weight:600}.layer-text{margin:0 0 .75rem}.layer-text p{max-width:46rem;margin:0;font-size:.95rem}.layer-text .note{margin-top:.3rem;font-size:.85rem}@media (width>=60rem){.bass{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:1.5rem;display:grid}.bass>*{order:3;grid-column:1/-1}.bass>.bass-head{order:0}.bass>.layers{order:1;margin:.75rem 0 0}.bass>.bass-info{order:2}.bass.layered>.bass-info{grid-column:1}.bass.layered>.layer-text{border-bottom:1px solid var(--line);flex-direction:column;order:2;grid-column:2;justify-content:center;margin:.75rem 0;padding:.25rem 0;display:flex}}.board.layered .bass-button:not([data-layer],.down){opacity:.45}.board .bass-button[data-layer]{z-index:1;border-width:2px;overflow:visible}.board .bass-button[data-layer=main]:not(.down){border-color:var(--layer-main);background:var(--layer-main-soft)}.board .bass-button[data-layer=side]:not(.down){border-color:var(--layer-side);background:var(--layer-side-soft)}.layer-badge{top:calc(var(--size) * -.06);right:calc(var(--size) * -.06);min-width:calc(var(--size) * .42);height:calc(var(--size) * .42);background:var(--layer-main);color:var(--layer-badge-text);font-size:calc(var(--size) * .27);font-weight:700;line-height:calc(var(--size) * .42);text-align:center;border-radius:999px;padding:0 .2em;position:absolute}.bass-button[data-layer=side] .layer-badge{background:var(--layer-side)}.layer-art{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.layer-art.over{z-index:2}.layer-area{stroke-linecap:round;stroke-linejoin:round;opacity:.75}.layer-area.main{fill:var(--layer-main-soft);stroke:var(--layer-main-soft)}.layer-area.side{fill:var(--layer-side-soft);stroke:var(--layer-side-soft)}.layer-link{fill:none;stroke-linecap:round}.layer-link.main{stroke:var(--layer-main)}.layer-link.side{stroke:var(--layer-side)}:root{--bg:#faf6ef;--card:#fff;--line:#e8dfd2;--text:#1f1a17;--muted:#6b6159;--red:#a8232f;--ok:#2f7a3d;--edge:#c9bba8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#17120f;--card:#221b17;--line:#3a302a;--text:#f3ece2;--muted:#b3a89c;--ok:#7fc48a;--edge:#5e5148}}*{box-sizing:border-box}body{margin:0}.start{max-width:72rem;min-height:100dvh;padding:max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));flex-direction:column;gap:1.5rem;margin:0 auto;display:flex}.start>:not(.wide,.install){align-self:center;width:min(100%,34rem)}.title{align-items:center;gap:.75rem;display:flex}.title h1{margin:0;font-size:1.6rem;line-height:1.15}.title p{color:var(--muted);margin:0;font-size:.95rem}.parts{flex-wrap:wrap;gap:.4rem;display:flex}.parts a{border:1px solid var(--line);background:var(--card);min-width:2.75rem;min-height:2.75rem;color:var(--text);-webkit-tap-highlight-color:transparent;border-radius:999px;justify-content:center;align-items:center;padding:0 .65rem;font-size:.95rem;text-decoration:none;display:inline-flex}.parts a[aria-current=page]{border-color:var(--red);background:var(--red);color:#fff;font-weight:600}.install{background:var(--red);color:#fff;min-height:48px;font:inherit;cursor:pointer;border:0;border-radius:999px;align-self:center;padding:.75rem 1.75rem;font-weight:600}.card{border:1px solid var(--line);background:var(--card);border-radius:1rem;padding:1rem}.card h2{margin:0;font-size:1.15rem}.note{color:var(--muted);margin:.75rem 0 0;font-size:.9rem}.bass-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.sizes{border:1px solid var(--line);border-radius:999px;display:flex;overflow:hidden}.sizes button{-webkit-tap-highlight-color:transparent;min-width:3rem;min-height:2.75rem;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:0 .75rem;font-size:.9rem}.sizes button[aria-pressed=true]{background:var(--red);color:#fff;font-weight:600}.scale{color:var(--muted);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.9rem;display:flex}.scale span{margin-right:auto}.scale button{border:1px solid var(--edge);background:var(--card);width:2.75rem;height:2.75rem;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;font-size:1.25rem;line-height:1}.scale button:disabled{opacity:.4}.scale output{min-width:3.25rem;color:var(--text);text-align:center}.bass-info{border-bottom:1px solid var(--line);background:var(--card);justify-content:space-between;align-items:center;gap:.75rem;min-height:7.5rem;margin:.75rem 0;padding:.25rem 0;display:flex}.bass-info .note{margin:0}.bass-name strong{font-size:1.75rem;line-height:1.2;display:block}.bass-name span{color:var(--muted);font-size:.95rem}.staff{width:132px;height:112px;color:var(--text);flex:none}.staff svg{display:block;overflow:visible}.board-wrap{overflow-x:auto;container-type:inline-size}.board{--slant:.5;--head:clamp(3.25rem, 6cqi, 4.5rem);--span:calc(var(--cols) + (var(--rows) - 1) * var(--slant));--pitch:clamp(2.125rem, calc((100cqi - var(--head)) / var(--span)), 3.25rem);--along:var(--pitch);--across:var(--pitch);--size:calc(var(--pitch) * .88);width:calc(var(--head) + var(--span) * var(--along));height:calc(var(--rows) * var(--across));margin-inline:auto;position:relative}.row-name{top:calc(var(--r) * var(--across));width:var(--head);height:var(--across);color:var(--muted);-webkit-hyphens:manual;hyphens:manual;align-items:center;font-size:.75rem;line-height:1.1;display:flex;position:absolute;left:0}.bass-button{top:calc(var(--r) * var(--across) + (var(--across) - var(--size)) / 2);left:calc(var(--head) + (var(--c) + var(--r) * var(--slant)) * var(--along) + (var(--along) - var(--size)) / 2);width:var(--size);height:var(--size);border:1px solid var(--edge);background:var(--card);color:var(--text);-webkit-tap-highlight-color:transparent;font:inherit;font-size:calc(var(--size) * .34);cursor:pointer;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:50%;place-content:center;padding:0;font-weight:600;line-height:1.05;display:grid;position:absolute;box-shadow:0 1px 2px #0000002e}.bass-button.dur,.bass-button.mol,.bass-button.septakord,.bass-button.umanjeni{background:var(--bg);font-weight:500}.bass-button small{color:var(--muted);font-size:calc(var(--size) * .27);font-weight:400}.bass-button.marked{box-shadow:inset 0 0 0 calc(var(--size) * .08) var(--muted), 0 1px 2px #0000002e}.bass-button.down{border-color:var(--red);background:var(--red);color:#fff}.bass-button.down small{color:#fff}@media (orientation:portrait),(pointer:coarse){.bass-info{top:env(safe-area-inset-top,0);z-index:1;position:sticky}}@media (orientation:portrait){.board{--head:2.5rem;--pitch:min(3.5rem, calc(100cqi / var(--rows)));width:calc(var(--rows) * var(--across));height:calc(var(--head) + var(--span) * var(--along))}.row-name{top:0;left:calc(var(--r) * var(--across));width:var(--across);height:var(--head);text-align:center;justify-content:center;align-items:flex-end;padding-bottom:.25rem;font-size:.7rem}.bass-button{top:calc(var(--head) + (var(--cols) - 1 - var(--c) + (var(--rows) - 1 - var(--r)) * var(--slant)) * var(--along) + (var(--along) - var(--size)) / 2);left:calc(var(--r) * var(--across) + (var(--across) - var(--size)) / 2)}}@media (pointer:coarse){.board-wrap{overscroll-behavior:contain;border:1px solid var(--line);border-radius:.75rem;max-height:70dvh;overflow:auto}.board{--along-mm:15;--across-mm:9.5;--size-mm:8;--slant-real:.47;--mm:calc(160px / 25.4);--along:calc(var(--along-mm) * var(--mm) * var(--scale,1));--across:calc(var(--across-mm) * var(--mm) * var(--scale,1));--size:calc(var(--size-mm) * var(--mm) * var(--scale,1));--slant:var(--slant-real)}}.status{color:var(--muted);text-align:center;margin-top:auto;font-size:.85rem}.status p{margin:.2rem 0}.offline{color:var(--ok);font-weight:600}.offline:before{content:"✓ "}