@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#151515;--panel:#1c1c1c;--raised:#262626;--line:#2b2b2b;--line-strong:#383838;--text:#f2efe9;--muted:#9b978f;--faint:#67635d;--root:#ff8f3f;--root-fill:#ff8f3f1f;--tone:#ede0c4;--on-light:#1a140e;--radius:20px;--ease-out:cubic-bezier(.23, 1, .32, 1);--font:"Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.45}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100dvh;margin:0}h1,h2,p{font:inherit;margin:0}.app{-webkit-user-select:none;user-select:none;cursor:default;-webkit-tap-highlight-color:transparent;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1360px;height:100dvh;min-height:680px;margin:0 auto;padding:0 24px 24px;display:grid}.label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700;font-stretch:125%}.panel{background:var(--panel);border-radius:var(--radius)}.panel-head{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.bar{justify-content:space-between;align-items:center;gap:16px;padding:20px 4px 4px;display:flex}.wordmark{letter-spacing:.02em;text-transform:uppercase;font-size:15px;font-weight:800;font-stretch:125%}.controls{align-items:center;gap:12px;display:flex}.select{background:var(--panel);cursor:pointer;border-radius:10px;align-items:center;gap:10px;height:34px;padding-inline:14px 10px;display:inline-flex}.select select{appearance:none;font:inherit;color:var(--text);cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239b978f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 100%/10px 6px no-repeat;border:0;padding-inline-end:18px;font-size:13px;font-weight:600}.select select:focus-visible{outline:2px solid var(--root);outline-offset:4px;border-radius:4px}.select option,.select optgroup{background:var(--raised);color:var(--text)}.settings-button{background:var(--panel);anchor-name:--settings;align-items:center;gap:8px;height:34px;padding-inline:10px 14px;display:inline-flex}.settings-button svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;width:16px;height:16px}.popover{border:1px solid var(--line-strong);background:var(--raised);width:320px;color:var(--text);transform-origin:100% 0;opacity:1;transition-behavior:allow-discrete;border-radius:16px;margin:0;padding:8px;transition-property:opacity,scale,display,overlay;transition-duration:.15s;transition-timing-function:ease-out;position:fixed;inset:64px 24px auto auto;box-shadow:0 12px 32px #00000073,0 2px 6px #0000004d}@supports (anchor-name:--a){.popover{position-anchor:--settings;inset:anchor(bottom) anchor(right) auto auto;margin-top:8px}}.popover:not(:popover-open){opacity:0}@starting-style{.popover:popover-open{opacity:0}}@media (prefers-reduced-motion:no-preference){.popover:not(:popover-open){scale:.97}@starting-style{.popover:popover-open{scale:.97}}}.setting{border-radius:10px;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding-inline:10px 4px;font-size:13px;display:flex}.setting .segmented{background:var(--panel)}label.setting{cursor:pointer}.switch{appearance:none;background:var(--line-strong);cursor:pointer;border-radius:999px;flex:none;width:34px;height:20px;margin:0 6px 0 0;transition:background-color .15s ease-out;position:relative}.switch:before{content:"";background:var(--text);border-radius:50%;width:16px;height:16px;position:absolute;inset:2px auto auto 2px}.switch:checked{background:var(--root)}.switch:checked:before{translate:14px}@media (prefers-reduced-motion:no-preference){.switch:before{transition:translate .15s var(--ease-out)}}.switch:focus-visible{outline:2px solid var(--root);outline-offset:2px}.tempo{background:var(--panel);border-radius:10px;align-items:center;gap:4px;height:34px;padding:3px;display:inline-flex}.tempo-toggle,.tap{font:inherit;height:28px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;font-size:12px;font-weight:600;transition-property:scale,background-color,color;transition-duration:.15s;transition-timing-function:ease-out}.tempo-toggle{place-items:center;width:30px;display:grid}.tempo-toggle svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.tempo-toggle[aria-pressed=true]{color:var(--on-light);background:var(--root)}.tap{padding-inline:10px}.bpm{cursor:text;align-items:baseline;gap:6px;padding-inline:6px 4px;display:inline-flex}.bpm input{width:3.2ch;font:inherit;font-variant-numeric:tabular-nums;color:var(--text);text-align:end;appearance:textfield;background:0 0;border:0;padding:0;font-size:14px;font-weight:700}.bpm input::-webkit-inner-spin-button{appearance:none;margin:0}.bpm input::-webkit-outer-spin-button{appearance:none;margin:0}.bpm input:focus-visible{outline:2px solid var(--root);outline-offset:3px;border-radius:3px}.bpm .label{font-size:10px}.beats{gap:4px;padding-inline:6px 8px;display:inline-flex}.beat{background:var(--line-strong);border-radius:50%;width:6px;height:6px}.beats[data-beat="0"] .beat[data-index="0"]{background:var(--root)}.beats[data-beat="1"] .beat[data-index="1"],.beats[data-beat="2"] .beat[data-index="2"],.beats[data-beat="3"] .beat[data-index="3"],.beats[data-beat="4"] .beat[data-index="4"],.beats[data-beat="5"] .beat[data-index="5"]{background:var(--tone)}.slider{width:132px;accent-color:var(--root);cursor:pointer;margin-inline-end:6px}.credits{border-top:1px solid var(--line-strong);color:var(--muted);margin:6px 10px;padding-top:10px;font-size:11px;line-height:1.5}.hint.is-notice{color:var(--tone)}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.segmented{background:var(--panel);border-radius:11px;padding:3px;display:inline-flex}.segmented button,.button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;transition-property:scale,background-color,color;transition-duration:.15s;transition-timing-function:ease-out}.segmented button[aria-checked=true],.button{color:var(--text);background:var(--raised)}@media (hover:hover){.segmented button:hover,.tap:hover,.tempo-toggle[aria-pressed=false]:hover{color:var(--text)}.settings-button:hover,.select:hover{background:var(--raised)}.button:hover{background:var(--line-strong)}}@media (prefers-reduced-motion:no-preference){.segmented button:not(:disabled):active,.button:not(:disabled):active,.tempo-toggle:active,.tap:active{scale:.96}}button:focus-visible{outline:2px solid var(--root);outline-offset:2px}.stage{grid-template-columns:minmax(0,1fr) 360px;align-items:stretch;gap:16px;min-height:0;display:grid}.hero{place-items:center;min-height:0;padding:20px;display:grid;position:relative;overflow:hidden;container-type:size}.circle{width:min(100cqw - 40px,100cqh - 40px,560px);height:min(100cqw - 40px,100cqh - 40px,560px);display:block;overflow:visible}.circle-track{fill:none;stroke:var(--line-strong);stroke-width:1px}.circle-shape{fill:var(--root-fill);stroke:var(--root);stroke-width:2px;stroke-linejoin:round}.circle-node circle{fill:var(--raised);stroke:var(--line-strong);stroke-width:1px}.circle-node text{font-family:var(--font);fill:var(--faint);font-size:15px;font-weight:700}.circle-node.is-tone circle{fill:var(--tone);stroke:var(--tone)}.circle-node.is-root circle{fill:var(--root);stroke:var(--root)}.circle-node.is-tone text,.circle-node.is-root text{fill:var(--on-light)}.circle-node.is-key circle{stroke:var(--faint)}.circle-node.is-key text{fill:var(--text)}.readout{pointer-events:none;place-items:center;font-size:clamp(32px,13cqmin,80px);display:grid;position:absolute;inset:0}.symbol{letter-spacing:-.02em;white-space:nowrap;font-weight:700;font-stretch:100%;line-height:1}.placeholder{color:var(--faint);font-size:16px}.is-dim{opacity:.4}.readout,.circle,.keyboard,.staff,.chord{transition:opacity .15s ease-out}.side{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;min-height:0;display:grid}.side .panel{min-width:0;padding:20px}.count-value{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;font-stretch:110%;line-height:1}.tones{gap:4px;height:58px;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000)}.tone{background:var(--raised);font-variant-numeric:tabular-nums;border-radius:12px;flex:none;align-content:center;justify-items:center;gap:2px;min-width:36px;padding:0 6px;display:grid}.tone-name{font-size:15px;font-weight:700}.tone-count{opacity:.7;margin-inline-start:2px;font-size:11px;font-weight:600}.tone-degree{color:var(--muted);font-size:12px}.tone.is-root{background:var(--root);color:var(--on-light)}.tone.is-root .tone-degree{color:var(--on-light);opacity:.7}.empty{color:var(--faint);align-self:center;font-size:14px}.also{gap:6px;margin-top:20px;display:grid}.also-value{white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.staff{height:100%;min-height:0}.staff svg{width:100%;height:100%;display:block}.side .panel:last-child{grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.deck{padding:16px 20px 12px}.deck-row{justify-content:space-between;align-items:center;gap:24px;height:32px;margin-bottom:8px;display:flex}.deck-group{align-items:center;gap:20px;min-width:0;display:flex}.status,.pedal{min-width:0;color:var(--muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.status-text{text-overflow:ellipsis;white-space:nowrap;max-width:340px;overflow:hidden}.status.is-on{color:var(--text)}.dot{background:var(--line-strong);border-radius:50%;flex:none;width:8px;height:8px}.status.is-on .dot{background:var(--muted)}.pedal.is-on .dot{background:var(--root)}.pedal.is-on .label{color:var(--text)}.hint{color:var(--faint);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.keyboard{width:100%;height:auto;display:block}.key.is-white rect{fill:#e8e5df}.key.is-black rect{fill:#0e0e0e;stroke:var(--panel);stroke-width:1.5px}.key.is-tone rect{fill:var(--tone)}.key.is-black.is-tone rect{fill:#c9b78f}.key.is-root rect{fill:var(--root)}.key-label{font-family:var(--font);fill:var(--tone);font-size:11px;font-weight:700}.key.is-root .key-label{fill:var(--root)}.key-octave{font-family:var(--font);fill:var(--faint);font-size:10px;font-weight:600}@media (prefers-reduced-motion:no-preference){.reveal{animation:reveal .3s var(--ease-out) both}.hero.reveal{animation-delay:.1s}.side.reveal{animation-delay:.2s}.deck.reveal{animation-delay:.3s}}@media (prefers-reduced-motion:reduce){.reveal{animation:.3s ease-out both fade}}@keyframes reveal{0%{opacity:0;filter:blur(4px);translate:0 12px}}@keyframes fade{0%{opacity:0}}@media (width<=1100px){.bar{flex-wrap:wrap;row-gap:12px}.controls{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}}@media (width<=960px){.app{height:auto;min-height:100dvh}.stage{grid-template-columns:minmax(0,1fr)}.hero{min-height:140px;padding:40px 20px;container-type:normal}.circle{display:none}.readout{font-size:56px;position:static}.side .panel:last-child{min-height:320px}.hint{display:none}.deck-row,.deck-group{gap:12px}.deck .button{padding:5px 10px}}@media (width<=520px){.app{padding-inline:16px}.settings-button{padding-inline:9px}.settings-text{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.select .label,.tap{display:none}.controls{gap:8px;width:100%}.select{flex:40%;padding-inline:12px 10px}.select select{flex:1}.tempo{flex:60%;justify-content:space-between}.pedal .label{font-size:10px}}