.maqam,.maqam-portal{--m3-surface:#fffbe8;--m3-surface-container-lowest:#fffef9;--m3-surface-container:#f2eedc;--m3-on-surface:#1d2b1f;--m3-on-surface-variant:#5c6557;--m3-outline:#8e9384;--m3-outline-variant:#cdcdbc;--m3-primary:#b4400c;--m3-on-primary:#fff;--m3-primary-container:#f2d9c0;--m3-secondary-container:#dbe2cd;--m3-on-secondary-container:#0e2b1c;--m3-tertiary:#8a6d00;--m3-on-tertiary:#fff;--m3-tertiary-container:#e8dfba;--m3-on-tertiary-container:#372c00;--maqam-tonic:var(--m3-primary);--maqam-key-face:#fff;--maqam-key-face-black:#0e2b1c;--maqam-key-ink:#1a261b;--maqam-key-edge:#2d3f33;--maqam-echo:#d6946f;--maqam-board:var(--m3-surface-container-lowest);--maqam-board-ink:#1d2b1f;--maqam-board-ink-quiet:#5c6557;--maqam-focus-bleed:6px;--maqam-lever-rest:var(--m3-surface-container);--maqam-lever-rim:var(--m3-outline-variant);--maqam-lever-on:var(--m3-tertiary);--maqam-lever-on-ink:var(--m3-on-tertiary);--maqam-staff-ink:#19251a;--maqam-staff-lit:#b4400c;--maqam-bracket-ink:#5c6557;--maqam-jins-1:#1f5f3f;--maqam-jins-2:#1d5b82;--maqam-jins-3:#7a2f5a;--maqam-title-font:inherit;--labs-popover-bg:var(--m3-surface-container-lowest);--labs-popover-border:1px solid var(--m3-outline-variant);--labs-popover-radius:var(--maqam-radius-m);--m3-headline-small:1.5rem;--m3-title-medium:1rem;--m3-title-small:.875rem;--m3-body-medium:.875rem;--m3-body-small:.75rem;--m3-label-large:.875rem;--m3-label-medium:.75rem;--m3-label-small:.6875rem;--maqam-s1:4px;--maqam-s2:8px;--maqam-s3:12px;--maqam-s4:16px;--maqam-s5:24px;--maqam-s6:32px;--maqam-gap:var(--maqam-s5);--maqam-radius-xs:8px;--maqam-radius-s:14px;--maqam-radius-m:20px;--maqam-radius-l:28px;--maqam-radius-pill:999px}.maqam{min-height:100vh;background:var(--m3-surface);min-height:100dvh;color:var(--m3-on-surface);flex-direction:column;display:flex}.maqam-shell{justify-content:center;gap:var(--maqam-gap);width:100%;max-width:78rem;min-height:0;padding:var(--maqam-s4);box-sizing:border-box;flex-direction:column;flex:1;margin:0 auto;display:flex}@media (min-width:640px){.maqam-shell{padding:var(--maqam-s6)}}@media (max-width:899px),(max-height:740px){.maqam-shell{justify-content:flex-start}}.maqam-topbar{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px 16px;display:flex}.maqam-topbar__title{font-family:var(--maqam-title-font,inherit);white-space:nowrap;align-items:baseline;gap:.34em;margin:0;font-size:1.625rem;line-height:1.1;display:flex}.maqam-topbar__word{letter-spacing:-.028em;color:var(--m3-on-surface);font-weight:700}.maqam-topbar__word--light{letter-spacing:-.005em;color:var(--m3-on-surface-variant);font-weight:400}@media (max-width:899px){.maqam-topbar{gap:8px 12px}.maqam-topbar__title{font-size:var(--m3-headline-small);flex:auto}.maqam-card{padding:0}.maqam-board{border-radius:var(--maqam-radius-l);padding:12px}}.maqam-eyebrow{font-size:var(--m3-label-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--m3-on-surface-variant);margin:0;font-weight:500}.maqam-stage{align-content:start;gap:var(--maqam-gap);flex:none;grid-template-columns:1fr;display:grid;overflow:visible}@media (min-width:900px){.maqam-stage{grid-template-columns:minmax(0,1fr) 18.5rem;align-items:stretch}}.maqam-stage__staff,.maqam-stage__jins{min-width:0}.maqam-stage__staff{flex-direction:column;display:flex}.maqam-stage__jins{min-height:0;display:flex}.maqam-card{scrollbar-gutter:stable;flex:1;min-height:0;overflow-y:auto}.maqam-card[data-overflowing=true]{-webkit-mask-image:linear-gradient(#000 calc(100% - 32px),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 32px),#0000 100%)}.maqam-staff-surface.MuiPaper-root{gap:var(--maqam-s3);border:1px solid var(--m3-outline-variant);border-radius:var(--maqam-radius-l);background:var(--m3-surface-container-lowest);padding:var(--maqam-s4);flex-direction:column;flex:1;justify-content:center;display:flex}.maqam-staff{min-width:0}.maqam-staff__canvas{min-width:0;overflow:hidden}.maqam-stage__jins{background:var(--m3-surface-container-lowest);border:1px solid var(--m3-outline-variant);border-radius:var(--maqam-radius-l);padding:var(--maqam-s4)}.maqam-card{padding:0}.maqam-tuningbank{align-items:center;gap:var(--maqam-s3);padding:var(--maqam-s1) var(--maqam-focus-bleed);display:flex}.maqam-tuningbank__unit{font-size:var(--m3-label-large);color:var(--m3-on-surface-variant);flex:none;font-weight:500}.maqam-tuningbank__keys{flex:0 0 15.75rem;min-width:0;padding-top:24px;display:flex;position:relative}.maqam-lever{border:1px solid var(--maqam-lever-rim);border-radius:var(--maqam-radius-xs);background:var(--maqam-lever-rest);color:var(--m3-on-surface-variant);font:inherit;font-size:var(--m3-label-small);cursor:pointer;justify-content:center;align-items:center;padding:0;line-height:1;transition:background .12s,border-color .12s;display:flex}.maqam-lever--white{flex:1 1 0;min-width:0;height:26px}.maqam-lever--black{background:var(--m3-secondary-container);border-color:var(--maqam-lever-rim);width:22px;height:22px;color:var(--m3-on-secondary-container);position:absolute;top:0;transform:translate(-50%)}.maqam-lever:hover{border-color:var(--maqam-lever-on)}.maqam-lever.is-bent{background:var(--maqam-lever-on);border-color:var(--maqam-lever-on);color:var(--maqam-lever-on-ink);font-weight:700}@media (pointer:coarse){.maqam-tuningbank__keys{padding-top:28px}.maqam-lever--white{height:32px}.maqam-lever--black{width:26px;height:26px}}.maqam-board{gap:var(--maqam-s3);padding:var(--maqam-s4) var(--maqam-s5) var(--maqam-s5);background:var(--maqam-board);border:1px solid var(--m3-outline-variant);border-radius:var(--maqam-radius-l);color:var(--maqam-board-ink);flex-direction:column;flex-shrink:0;display:flex}.maqam-instrument{padding:var(--maqam-focus-bleed);overflow-x:auto}.maqam-instrument>*{min-width:min-content}.maqam-keyboard .shared-pk-container{justify-content:center;min-width:min-content;overflow-x:visible}.maqam-keyboard .shared-pk-white{border-color:var(--maqam-key-edge);border-radius:0 0 var(--maqam-radius-m) var(--maqam-radius-m);background:var(--maqam-key-face);box-shadow:inset 0 -2px #1e264012}.maqam-keyboard .shared-pk-black{border-radius:0 0 var(--maqam-radius-s) var(--maqam-radius-s)}@media (min-width:640px){.maqam-tuningbank__keys{flex-basis:20.125rem}.maqam-keyboard .shared-pk-white{width:46px;height:150px}.maqam-keyboard .shared-pk-black{width:30px;height:94px}}@media (min-width:1000px){.maqam-tuningbank__keys{flex-basis:33.3333%}.maqam-keyboard .shared-pk-container{width:100%}.maqam-keyboard .shared-pk-octave{flex:1;min-width:0}.maqam-keyboard .shared-pk-white{flex:1;width:auto;min-width:0;height:212px}.maqam-keyboard .shared-pk-black{width:32px;height:132px}}.maqam-keyboard .shared-pk-white-label,.maqam-keyboard .shared-pk-black-label{text-overflow:clip;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;max-width:100%;overflow:hidden}.maqam-keyboard .shared-pk-white-label{font-size:clamp(.5625rem, 2.1vw, var(--m3-label-medium));color:var(--m3-on-surface-variant);font-weight:500}.maqam-key--in-scale .shared-pk-white-label{color:var(--maqam-key-ink);font-weight:700}.maqam-keyboard .shared-pk-black-label{font-size:var(--m3-label-small);color:#ffffffb8;bottom:var(--maqam-s2);font-weight:500}.shared-pk-black.maqam-key--in-scale .shared-pk-black-label{color:#fffffff2;font-weight:700}.maqam-keyboard .shared-pk-mark{border-radius:var(--maqam-radius-pill);min-width:17px;height:17px;font-size:var(--m3-label-medium);font-variant-numeric:tabular-nums;color:var(--m3-on-surface-variant);pointer-events:none;justify-content:center;align-items:center;font-weight:700;line-height:1;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.maqam-key--home .shared-pk-mark{background:var(--maqam-tonic);color:#fffdf6}.shared-pk-black .shared-pk-mark{color:#f0d7dd;bottom:24px}.shared-pk-black.maqam-key--home .shared-pk-mark{color:var(--maqam-tonic);background:#fff}.maqam-keyboard .shared-pk-black{background-color:var(--maqam-key-face-black,#0e2b1c);background-image:linear-gradient(180deg, #2a3148 0%, var(--maqam-key-face-black,#0e2b1c) 100%);box-shadow:inset 0 -2px #00000040}.maqam-keyboard .shared-pk-black:hover{background-color:#1b3a2a;background-image:linear-gradient(#38405c 0%,#1b3a2a 100%)}.maqam-keyboard .shared-pk-white:hover{background-color:var(--m3-surface-container-low)}.maqam-keyboard .shared-pk-white.active:hover,.maqam-keyboard .shared-pk-black.active:hover{background-color:var(--maqam-tonic);background-image:none}.maqam-key.maqam-key--sounding{background:var(--maqam-tonic)}.maqam-key.maqam-key--echoing{background:var(--maqam-echo)}.shared-pk-black.maqam-key--echoing{background:#7a5a66}.maqam-key.maqam-key--sounding .shared-pk-white-label,.maqam-key.maqam-key--sounding .shared-pk-black-label{color:#fffffff5}.maqam-key.maqam-key--sounding .shared-pk-mark,.maqam-keyboard .shared-pk-white.active .shared-pk-mark,.maqam-keyboard .shared-pk-black.active .shared-pk-mark{color:var(--maqam-tonic);background:#fff}.maqam-keyboard .shared-pk-white.active,.maqam-keyboard .shared-pk-black.active{background:var(--maqam-tonic)}.maqam-keyboard .shared-pk-white.active .shared-pk-white-label{color:#fffffff2}.maqam-board__bar{justify-content:space-between;align-items:center;gap:var(--maqam-s2) var(--maqam-s5);flex-wrap:wrap;display:flex}.maqam-scaleline{gap:var(--maqam-s4);font-size:var(--m3-title-medium);letter-spacing:.009em;flex-wrap:wrap;flex:auto;margin:0;font-weight:500;display:flex}.maqam-scaleline__note{font-variant-numeric:tabular-nums}.maqam-board__actions{align-items:center;gap:8px;display:flex}.maqam-glossary__trigger.MuiButton-root{border-radius:var(--maqam-radius-pill);color:var(--m3-on-surface-variant);font-size:var(--m3-label-large);letter-spacing:.006em;text-transform:none;font-weight:500}.maqam-glossary{max-width:24rem;padding:var(--maqam-s4) var(--maqam-s5)}.maqam-glossary__list{gap:var(--maqam-s3);margin:0;display:grid}.maqam-glossary__row dt{font-size:var(--m3-title-small);font-weight:500}.maqam-glossary__row dt a{color:var(--m3-primary);border-bottom:1px solid var(--m3-outline-variant);text-decoration:none}.maqam-glossary__row dt a:hover{border-bottom-color:currentColor}.maqam-glossary__row dt a:focus-visible{border-bottom-color:currentColor}.maqam-glossary__plural{color:var(--m3-on-surface-variant);font-weight:400}.maqam-glossary__row dd{font-size:var(--m3-body-medium);color:var(--m3-on-surface-variant);margin:2px 0 0}.maqam-badge{height:32px;padding:0 var(--maqam-s3);border:1px solid var(--maqam-switch-border);border-radius:var(--maqam-radius-s);color:var(--maqam-board-ink-quiet);font-size:var(--m3-label-large);background:0 0;align-items:center;font-weight:500;display:inline-flex}.maqam-melodybar{align-items:stretch;gap:var(--maqam-s2);flex-wrap:wrap;display:flex}.maqam-melodybar__play.MuiButton-root{border-radius:var(--maqam-radius-pill);min-width:6rem;font-size:var(--m3-label-large);letter-spacing:.006em;text-transform:none;font-weight:500}.maqam-midi.MuiButton-root{gap:var(--maqam-s2);border-radius:var(--maqam-radius-pill);color:var(--maqam-board-ink-quiet);font-size:var(--m3-label-large);letter-spacing:.006em;text-transform:none;white-space:nowrap;font-weight:500}.maqam-midi__dot{background:var(--m3-outline-variant);border-radius:50%;width:8px;height:8px}.maqam-midi--connected .maqam-midi__dot{background:var(--maqam-tonic);box-shadow:0 0 0 3px #922c4033}.maqam-midi--ready .maqam-midi__dot{background:var(--m3-tertiary)}.maqam-midi__detail{max-width:24rem;padding:var(--maqam-s5)}.maqam-midi__detail h3{font-size:var(--m3-title-medium);margin:0 0 8px}.maqam-midi__detail p,.maqam-midi__detail li{font-size:var(--m3-body-medium);color:var(--m3-on-surface-variant);margin:0 0 8px;line-height:1.5}.maqam-midi__detail ul{margin:0 0 8px;padding-left:18px}.maqam-alert{border-radius:var(--maqam-radius-m);background:var(--m3-tertiary-container);color:var(--m3-on-tertiary-container);font-size:var(--m3-body-medium);margin:0;padding:8px 12px;line-height:1.45}.maqam-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.maqam :focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}.maqam-portal :focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}.maqam-keyboard .shared-pk-white:focus-visible{z-index:3}.maqam-keyboard .shared-pk-black:focus-visible{z-index:3}@media (min-width:900px) and (max-height:820px){.maqam{--maqam-gap:var(--maqam-s4)}.maqam-shell{padding:var(--maqam-s4) var(--maqam-s6)}.maqam-board{padding:var(--maqam-s4) var(--maqam-s5);gap:var(--maqam-s3)}.maqam-keyboard .shared-pk-white{height:138px}.maqam-keyboard .shared-pk-black{height:86px}.maqam-card{padding:0}}.maqam-card{gap:var(--maqam-s3);flex-direction:column;display:flex}.maqam-card__chips{gap:var(--maqam-s2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.maqam-chip{align-items:center;gap:var(--maqam-s2);min-height:36px;padding:0 var(--maqam-s3);border:1px solid var(--m3-outline-variant);border-radius:var(--maqam-radius-pill);background:var(--m3-surface);color:var(--m3-on-surface);font:inherit;font-size:var(--m3-label-large);cursor:pointer;font-weight:500;transition:background .12s,border-color .12s;display:inline-flex}.maqam-chip:hover{border-color:var(--maqam-chip-tone)}.maqam-chip[aria-pressed=true]{border-color:var(--maqam-chip-tone);background:var(--m3-surface-container)}.maqam-chip[data-jins="1"]{--maqam-chip-tone:var(--maqam-jins-1)}.maqam-chip[data-jins="2"]{--maqam-chip-tone:var(--maqam-jins-2)}.maqam-chip[data-jins="3"]{--maqam-chip-tone:var(--maqam-jins-3)}.maqam-chip__swatch{background:var(--maqam-chip-tone);border-radius:50%;flex:none;width:10px;height:10px}.maqam-chip__degrees{color:var(--m3-on-surface-variant);font-variant-numeric:tabular-nums;font-weight:400}.maqam-card__note{font-size:var(--m3-body-small);color:var(--m3-on-surface-variant);margin:0;line-height:1.45}.maqam-card__foot{padding-top:var(--maqam-s2);margin-top:auto}.maqam-keyboard .maqam-key--out-of-jins .shared-pk-mark{opacity:.18}.maqam-keyboard .maqam-key--in-jins .shared-pk-mark{background:var(--maqam-cell-tone,var(--m3-primary));color:#fff}.maqam-keyboard .maqam-key--home.maqam-key--in-jins .shared-pk-mark{box-shadow:0 0 0 2px var(--maqam-key-face), 0 0 0 4px var(--maqam-tonic)}.maqam-keyboard .shared-pk-black.maqam-key--home.maqam-key--in-jins .shared-pk-mark{box-shadow:0 0 0 2px var(--maqam-key-face-black), 0 0 0 4px var(--maqam-tonic)}.maqam-jinscard{width:15rem;max-width:calc(100vw - 32px);padding:var(--maqam-s3)}.maqam-jinscard__name{font-size:var(--m3-title-small);color:var(--m3-on-surface);margin:0;font-weight:500}.maqam-jinscard__steps{font-size:var(--m3-body-small);font-variant-numeric:tabular-nums;color:var(--m3-on-surface-variant);margin:2px 0 0}.maqam-jinscard__alt{margin:var(--maqam-s2) 0 0;font-size:var(--m3-body-small);color:var(--m3-on-surface-variant)}.maqam-titlepick{align-items:baseline;gap:var(--maqam-s3);width:100%;padding:var(--maqam-s2);margin:0 0 var(--maqam-s1);border-radius:var(--maqam-radius-s);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex-wrap:wrap;transition:background .12s;display:flex;position:relative}.maqam-titlepick:hover{background:var(--m3-surface-container)}.maqam-titlepick:focus-visible{background:var(--m3-surface-container);box-shadow:inset 0 0 0 2px var(--m3-primary);outline:none}.maqam-titlepick[aria-expanded=true]{background:var(--m3-surface-container)}.maqam-titlepick__face{align-items:baseline;gap:var(--maqam-s1);min-width:0;display:inline-flex}.maqam-titlepick__name{font-size:var(--m3-headline-small);letter-spacing:-.015em;color:var(--m3-on-surface);font-weight:600;line-height:1.2}.maqam-titlepick__caret{width:20px;height:20px;color:var(--m3-on-surface-variant);flex:none;align-self:center}.maqam-titlepick:hover .maqam-titlepick__caret{color:var(--m3-on-surface)}.maqam-card__foot{justify-content:space-between;align-items:center;gap:var(--maqam-s2);display:flex}.maqam-card__source{font-size:var(--m3-label-large);color:var(--m3-on-surface-variant);border-bottom:1px solid var(--m3-outline-variant);text-decoration:none}.maqam-card__source:hover{color:var(--m3-on-surface);border-bottom-color:currentColor}.maqam-card__source:focus-visible{color:var(--m3-on-surface);border-bottom-color:currentColor}.maqam-menu{width:19rem;max-width:calc(100vw - 32px);max-height:min(24rem,70vh);padding:var(--maqam-s2);overscroll-behavior:contain;overflow-y:auto}.maqam-menu__group+.maqam-menu__group{margin-top:var(--maqam-s2);padding-top:var(--maqam-s2);border-top:1px solid var(--m3-outline-variant)}.maqam-menu__family{padding:0 var(--maqam-s2);font-size:var(--m3-label-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--m3-on-surface-variant);margin:0 0 2px;font-weight:500}.maqam-menu__item{justify-content:space-between;align-items:baseline;gap:var(--maqam-s3);width:100%;min-height:40px;padding:var(--maqam-s2);border-radius:var(--maqam-radius-s);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;display:flex}.maqam-menu__item:hover{background:var(--m3-surface-container)}.maqam-menu__item:focus-visible{background:var(--m3-surface-container);box-shadow:inset 0 0 0 2px var(--m3-primary);outline:none}.maqam-menu__item[aria-checked=true]{background:var(--m3-secondary-container);font-weight:600}.maqam-menu__name{font-size:var(--m3-body-medium);color:var(--m3-on-surface)}.maqam-menu__tonic{font-size:var(--m3-body-small);color:var(--m3-on-surface-variant);white-space:nowrap}