:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer{--hview-bg:var(--bs-card-bg,#f8fafc);--hview-border:var(--bs-border-color,rgba(148,163,184,.5));--hview-text:var(--bs-body-color,#0f172a);--ring-outline:color-mix(in srgb,var(--bs-primary,#3755ff) 70%,#0f172a 30%);--ring-center:color-mix(in srgb,var(--bs-card-bg,#f8fafc) 92%,#0f172a 8%);--ring-tick:color-mix(in srgb,var(--ring-outline) 45%,#0f172a 20%);--ring-stroke:color-mix(in srgb,var(--ring-outline) 55%,#0f172a 25%);--ring-stroke-ghost:color-mix(in srgb,var(--ring-outline) 28%,#94a3b8 30%);--ring-index-stroke:color-mix(in srgb,var(--ring-outline) 24%,#94a3b8 30%);--ring-index-text:color-mix(in srgb,var(--hview-text) 75%,#1f2937 10%);--ring-connector:color-mix(in srgb,var(--ring-outline) 75%,#2563eb 25%);--ring-connector-arrow:color-mix(in srgb,var(--ring-connector) 85%,#0f172a 15%);--ring-halo:color-mix(in srgb,var(--ring-outline) 65%,#7ea2ff 35%);--tone-0:#ff6b6b;--tone-1:#ff915e;--tone-2:#ffd166;--tone-3:#d4ff7f;--tone-4:#9bff9b;--tone-5:#7fffd4;--tone-6:#76e4ff;--tone-7:#7fb3ff;--tone-8:#a48aff;--tone-9:#d48aff;--tone-10:#ff8ae2;--tone-11:#ff8ab3;color-scheme:light dark}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) [data-bs-theme=dark] .harmony-viewer{--hview-bg:var(--bs-body-bg,#0b1220);--hview-border:var(--bs-border-color,rgba(148,163,184,.35));--hview-text:var(--bs-body-color,#e5e7eb);--ring-outline:color-mix(in srgb,var(--bs-primary,#9fb5ff) 75%,#cbd5e1 25%);--ring-center:color-mix(in srgb,var(--bs-body-bg,#0e1523) 92%,transparent);--ring-tick:color-mix(in srgb,var(--ring-outline) 55%,transparent);--ring-stroke:color-mix(in srgb,var(--ring-outline) 60%,#e5e7eb 25%);--ring-stroke-ghost:color-mix(in srgb,var(--ring-outline) 32%,#94a3b8 35%);--ring-index-stroke:color-mix(in srgb,var(--ring-outline) 28%,#64748b 35%);--ring-index-text:color-mix(in srgb,var(--hview-text) 90%,#cbd5e1 10%);--ring-connector:color-mix(in srgb,var(--ring-outline) 80%,#22d3ee 20%);--ring-connector-arrow:color-mix(in srgb,var(--ring-connector) 90%,#0b1220 10%);--ring-halo:color-mix(in srgb,var(--ring-outline) 70%,#22d3ee 30%)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.no-blur .hview .hud-center{backdrop-filter:none!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.no-glow .hview{box-shadow:none!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.no-glow .hview .hview-ring{background:none!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.no-glow .hview .ring-ticks{opacity:0!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview{background:var(--hview-bg);border-radius:12px;box-shadow:0 1px 0 color-mix(in srgb,var(--hview-border) 40%,transparent) inset,0 10px 28px rgba(0,0,0,.38) inset;color:var(--hview-text)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill{background:color-mix(in oklab,var(--hview-bg) 92%,transparent);border:1px solid color-mix(in oklab,var(--hview-border) 80%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill .swatch{box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.12)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill--now{border-color:color-mix(in oklab,var(--ring-outline) 60%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill--next{background:color-mix(in oklab,var(--hview-bg) 85%,transparent);border-color:color-mix(in oklab,var(--ring-outline) 40%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq{display:grid;gap:6px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq-item{align-items:center;background:color-mix(in oklab,var(--hview-bg) 95%,transparent);border:1px solid color-mix(in oklab,var(--hview-border) 70%,transparent);border-radius:10px;display:grid;gap:8px;grid-template-columns:auto 1fr auto;padding:6px 8px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq-item .hview-seq-swatch{background:var(--tone-color,#8aa4ff);border-radius:999px;height:10px;width:10px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq-item .hview-seq-tag{border:1px dashed color-mix(in oklab,var(--ring-outline) 60%,transparent);border-radius:999px;font-size:.72rem;opacity:.85;padding:.1rem .4rem}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq-item.is-now{box-shadow:0 0 0 1px color-mix(in oklab,var(--ring-outline) 50%,transparent) inset}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-seq-item.is-next{outline:2px dashed color-mix(in oklab,var(--ring-outline) 60%,transparent);outline-offset:2px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tools .btn-group .btn{--bs-btn-border-color:color-mix(in oklab,var(--hview-border) 70%,transparent);--bs-btn-hover-bg:color-mix(in oklab,var(--hview-bg) 80%,transparent);--bs-btn-active-bg:color-mix(in oklab,var(--hview-bg) 70%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tools .btn.active{border-color:color-mix(in oklab,var(--ring-outline) 60%,transparent)!important;border-style:solid!important;box-shadow:0 0 0 1px color-mix(in oklab,var(--ring-outline) 55%,transparent) inset!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-header{align-items:center;display:flex;flex-wrap:wrap;gap:.6rem;padding:2px 4px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill{align-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 94%,transparent),color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 84%,transparent));border:1px solid color-mix(in srgb,var(--bs-border-color,var(--hview-border)) 80%,transparent);border-radius:999px;cursor:default;display:inline-flex;font-weight:600;gap:.5rem;padding:.35rem .6rem}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill .swatch{background:#8aa4ff;border-radius:999px;box-shadow:0 0 0 2px color-mix(in srgb,var(--bs-card-bg,#fff) 65%,transparent) inset,0 0 0 2px color-mix(in srgb,var(--pill-accent,var(--ring-outline)) 70%,transparent);height:10px;width:10px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill .label{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill .eta{font-variant-numeric:tabular-nums;margin-left:.35rem;opacity:.75}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill--now{border-color:color-mix(in srgb,var(--pill-accent,var(--ring-outline)) 70%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .pill--next{background:color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 80%,transparent);border-color:color-mix(in srgb,var(--pill-accent,var(--ring-outline)) 40%,transparent);border-style:dashed}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tools .btn-group .btn{--bs-btn-color:var(--bs-body-color,rgba(238,241,255,.86));--bs-btn-border-color:color-mix(in srgb,var(--bs-border-color,var(--hview-border)) 70%,transparent);--bs-btn-hover-bg:color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 80%,transparent);--bs-btn-hover-color:var(--hview-text);--bs-btn-active-bg:color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 70%,transparent);--bs-btn-active-color:var(--hview-text);background-color:color-mix(in srgb,var(--bs-card-bg,var(--hview-bg)) 85%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tools .btn.active{border-color:color-mix(in srgb,var(--ring-outline) 60%,transparent);border-style:solid;box-shadow:0 0 0 1px color-mix(in srgb,var(--ring-outline) 55%,transparent) inset}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) [data-bs-theme=dark] .hview-tools .btn-group .btn{--bs-btn-color:var(--bs-body-color,#e5e7eb);--bs-btn-border-color:color-mix(in srgb,var(--bs-border-color,var(--hview-border)) 80%,transparent);--bs-btn-hover-bg:color-mix(in srgb,var(--bs-card-bg,#111827) 75%,transparent);--bs-btn-active-bg:color-mix(in srgb,var(--bs-card-bg,#0f172a) 65%,transparent)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hview-ring{--ring-d:clamp(280px,80vw,760px);--ring-inner:calc(var(--ring-d) - 48px);aspect-ratio:1/1;background:radial-gradient(120% 80% at 50% 60%,color-mix(in srgb,var(--ring-center) 92%,var(--hview-bg)) 0,transparent 70%),radial-gradient(90% 70% at 50% 45%,color-mix(in srgb,var(--ring-outline) 26%,transparent) 0,transparent 64%),linear-gradient(to bottom,color-mix(in srgb,var(--hview-bg) 90%,transparent),transparent);border-top:1px solid color-mix(in srgb,var(--hview-border) 70%,transparent);display:grid;height:auto;isolation:isolate;max-width:100%;min-height:260px;place-items:center;position:relative;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-layer{border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--ring-outline) 45%,transparent);display:grid;height:var(--ring-inner);inset:0;margin:auto;place-items:center;pointer-events:none;position:absolute;width:var(--ring-inner);z-index:1}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-layer--now{transform:translateZ(0) scale(1)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-layer--next{transform:translateZ(0) scale(.7)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-layer:before{border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ring-outline) 30%,transparent);content:"";inset:6%;position:absolute}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-ticks{aspect-ratio:1/1;background:repeating-conic-gradient(from -90deg,color-mix(in oklab,var(--ring-tick) 55%,transparent) 0deg 1deg,transparent 1deg 30deg),repeating-conic-gradient(from -90deg,color-mix(in oklab,var(--ring-tick) 18%,transparent) 0deg .4deg,transparent .4deg 2.5deg);border-radius:50%;inset:0;margin:auto;mask:radial-gradient(closest-side,transparent 64%,#000 66% 100%);opacity:0;pointer-events:none;position:absolute;transition:opacity .25s ease;width:calc(var(--ring-inner) - 20px);z-index:2}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.show-ticks .hview .ring-ticks{opacity:.45}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hud-center{aspect-ratio:1/1;backdrop-filter:none;background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--ring-center) 95%,transparent),transparent 72%);border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--hview-border) 60%,transparent) inset,0 10px 40px rgba(0,0,0,.35) inset;color:var(--hview-text);display:grid;font-weight:700;inset:0;letter-spacing:.015em;margin:auto;padding:.9rem;place-items:center;position:absolute;text-align:center;width:calc(var(--ring-d)*.34);z-index:3}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hud-center .hud-title{font-size:1.05rem;line-height:1.15}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hud-center .hud-sub{font-size:.78rem;opacity:.85}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hview-ring-canvas{backdrop-filter:none!important;background:radial-gradient(80% 80% at 50% 45%,color-mix(in srgb,var(--ring-center) 65%,#fff 35%),transparent 75%);box-shadow:none!important;filter:none!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hview-alt{display:grid;min-height:220px;padding:12px 8px 4px;place-items:center;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-linear-canvas,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tonnetz-canvas{display:block;height:auto;max-width:960px;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview{--tonnetz-bg:var(--hview-bg,#0c111b);--tonnetz-grid:color-mix(in oklab,#fff 10%,transparent);--tonnetz-grid-back:color-mix(in oklab,#fff 6%,transparent);--tonnetz-edge:rgba(0,0,0,.35)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .harmony-tonnetz-p5{aspect-ratio:16/9;background:var(--tonnetz-bg);border-radius:12px;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.04),inset 0 10px 28px rgba(0,0,0,.38);min-height:420px;overflow:hidden;position:relative;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .harmony-tonnetz-p5:after{background:radial-gradient(120% 85% at 50% 65%,color-mix(in oklab,var(--tonnetz-bg) 90%,transparent) 30%,transparent 70%);content:"";inset:0;pointer-events:none;position:absolute}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-wrap{height:100%;position:relative;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .harmony-tonnetz-p5 canvas,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-wrap canvas{background:transparent;border:0;border-radius:12px;display:block!important;height:100%!important;outline:none;width:100%!important}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-bar{align-items:center;backdrop-filter:blur(6px);background:color-mix(in oklab,var(--tonnetz-bg) 70%,transparent);border:1px solid color-mix(in oklab,var(--hview-border,#1e2a3a) 70%,transparent);border-radius:10px;color:var(--hview-text,#eef1ff);display:flex;font-size:.85rem;justify-content:space-between;left:12px;padding:6px 10px;pointer-events:none;position:absolute;right:12px;top:10px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-legend{align-items:center;backdrop-filter:blur(6px);background:color-mix(in oklab,var(--tonnetz-bg) 75%,transparent);border:1px dashed color-mix(in oklab,var(--ring-outline,#9fb5ff) 55%,transparent);border-radius:999px;bottom:10px;color:var(--hview-text,#eef1ff);display:flex;font-size:.78rem;gap:8px;padding:4px 8px;position:absolute;right:10px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-legend .dot{border-radius:999px;height:10px;width:10px}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-p5-legend .lbl{opacity:.9}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .offcanvas .hview .harmony-tonnetz-p5{min-height:clamp(360px,48vh,640px)}@media(min-width:1200px){:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .harmony-tonnetz-p5{min-height:520px}}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview-tools .btn-group .btn{--bs-btn-color:rgba(238,241,255,.86);--bs-btn-border-color:color-mix(in oklab,var(--hview-border,#1e2a3a) 70%,transparent);--bs-btn-hover-bg:color-mix(in oklab,var(--hview-bg,#0c111b) 80%,transparent);--bs-btn-hover-color:var(--hview-text,#eef1ff);--bs-btn-active-bg:color-mix(in oklab,var(--hview-bg,#0c111b) 70%,transparent);--bs-btn-active-color:var(--hview-text,#eef1ff)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .tonnetz-grid-overlay{background-image:linear-gradient(transparent 49%,var(--tonnetz-grid) 50%,transparent 51%),linear-gradient(90deg,transparent 49%,var(--tonnetz-grid) 50%,transparent 51%);background-size:42px 42px;inset:0;opacity:.18;pointer-events:none;position:absolute}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer{width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .hv-ring,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .hview-ring,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hview-ring{--ring-d:min(86vh,calc(100% - 32px));--ring-inner:calc(var(--ring-d) - 16px);aspect-ratio:1/1;display:grid;height:auto;place-items:center;width:100%}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .ring-layer,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-layer{height:var(--ring-inner);width:var(--ring-inner)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .ring-ticks,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .ring-ticks{opacity:0;transition:opacity .25s ease}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.show-ticks .hv .ring-ticks,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer.show-ticks .hview .ring-ticks{opacity:.5;pointer-events:none}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .hud-center .hud-title,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hud-center .hud-title{font-size:1.2rem;letter-spacing:.02em}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hv .hud-center .hud-sub,:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .hview .hud-center .hud-sub{opacity:.9}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) .harmony-viewer{--ring-outline:#b8c8ff;--hview-text:rgba(245,248,255,.95)}:where(.harmony-viewer-root,.harmony-viewer,[data-hv-root]) canvas.p5Canvas{display:block;height:auto!important;min-height:320px;visibility:visible!important;width:100%!important}