body{background-color:var(--base-background-color);overflow-x:hidden}*{box-sizing:border-box;margin:0;padding:0}select{cursor:pointer}button{cursor:pointer;border:none;background-color:inherit;font-size:inherit}a{color:inherit;text-decoration:none}html{scroll-behavior:smooth}@media (prefers-reduced-motion){html{scroll-behavior:auto}}.App{text-align:center;background-color:var(--base-background-color);color:var(--base-color);padding-bottom:5rem}.maqam-board{border:1px solid var(--scale-panel-border-color);background-color:var(--scale-panel-bg-color);max-width:90rem;margin-inline:auto;margin-block:1rem;padding:2.5rem 1rem 1rem;border-radius:1rem}.maqam-board .header{position:relative;padding-inline:2rem;padding-bottom:.5rem;display:flex;align-items:center;justify-content:center}.maqam-board .header .key-picker{position:absolute;right:0}.maqam-board select{color:var(--base-color);background-color:var(--base-background-color)}.maqam-board .scale-panel-group-wrapper{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}.maqam-board .comparing-scale-panel{transition:ease-in-out .2s,opacity,translate;opacity:1}@starting-style{.maqam-board .comparing-scale-panel{opacity:0;transform:translate(100%)}}.maqam-board .main-scale-panel,.maqam-board .comparing-scale-panel{flex:1}.scale-info-bar{min-height:6.5rem;margin:.25rem;background-color:var(--scale-info-bar-background-color);display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;padding:1rem}.scale-info-bar .notes-info{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-block-start:1rem}.scale-info-bar .top-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;position:relative}.scale-info-bar .top-row .play-button-wrapper{flex:1}.scale-info-bar .top-row .play-button-wrapper .play-button{background-color:var(--play-button-color);color:var(--base-background-color);padding:.5rem 1rem;border:none;border-radius:.25rem;cursor:pointer}.scale-info-bar .top-row .play-button-wrapper .play-button:before{content:"▶";margin-right:.5rem}.scale-info-bar .top-row .scale-title{text-align:center}.scale-info-bar .top-row .close-button{position:absolute;top:-3rem;right:0;color:var(--base-color);border-radius:.25rem;font-size:2.5rem}.scale-info-bar .top-row .close-button:before{content:"×"}.scale-info-bar .notes-list{list-style:none;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:0}.scale-info-bar .note-pill{background-color:var(--in-current-run-color);color:var(--base-color);outline:1px solid var(--key-outline-color);padding:.25rem;display:flex;justify-content:center;align-items:center;font-weight:700;min-width:2.5em;min-height:2em;border-radius:100rem}.scale-info-bar .note-pill.descending-variant{background-color:var(--descending-variant-note-color);color:var(--base-color)}.scale-info-bar .note-pill .accidental{margin-left:-.35em;width:1.4em;height:1.4em;-webkit-user-select:text;user-select:text;fill:var(--base-color)}.scale-info-bar .note-pill .accidental line{stroke:var(--base-color)}.scale-info-bar .note-pill .accidental+.accidental{margin-left:-.9em}.scale-info-bar .note-pill.highlight{background-color:var(--highlight-color);color:var(--base-background-color)}.scale-info-bar .note-pill.highlight:after{color:var(--base-color)}.scale-info-bar .note-pill.highlight .accidental{fill:var(--base-background-color)}.scale-info-bar .note-pill.highlight .accidental line{stroke:var(--base-background-color)}@media (width > 470px){.scale-info-bar:has(.descending-variant){padding-bottom:5rem}.scale-info-bar .notes-list:has(.descending-variant){anchor-scope:all}.scale-info-bar .descending-variant+.note-pill{anchor-name:--descending-variant-anchor;margin-top:-3.5rem;position:relative}.scale-info-bar .descending-variant+.note-pill:after{content:"* Played when ascending";font-size:.9em;text-align:left;width:max-content;position:absolute;bottom:.5rem;left:3rem;transform:rotate(-10deg);transform-origin:left}.scale-info-bar .descending-variant{position:absolute;position-anchor:--descending-variant-anchor;position-visibility:always;right:anchor(end);transform:translateY(100%)}.scale-info-bar .descending-variant:after{content:"* Played when descending";font-size:.9em;text-align:left;width:max-content;position:absolute;top:.5rem;left:3rem;transform:rotate(10deg);transform-origin:left}}.scale-panel .musical-typing-toggle-button{margin-left:.25rem;background-color:var(--green-secondary);color:var(--base-background-color);padding:.5rem 1rem;border-radius:1rem;transition:ease-in-out transform .2s,ease-in-out box-shadow .2s}.scale-panel .musical-typing-toggle-button.pressed{box-shadow:inset 0 0 15px #000c;transform:scale(.95)}.scale-panel .musical-typing-toggle-button:before{font-size:1.5rem;content:"⏻";margin-right:.5rem;font-weight:700}.scale-panel .musical-typing-instructions{margin-top:.5rem;opacity:1;transition:opacity ease-in-out .2s,transform ease-in-out .2s;transform:translateY(0)}@starting-style{.scale-panel .musical-typing-instructions{opacity:0;transform:translateY(3rem)}}@media (hover: none){.scale-panel .musical-typing-invite{display:none}}.keyboard-container{width:100%;max-width:56rem;margin:1rem auto;background-color:var(--keyboard-bg-color);padding:.25rem;border-radius:.25rem}.keyboard-container .keyboard{display:flex;gap:.1rem;width:100%;height:calc(20vmax + .1rem);max-height:12rem;min-height:9rem}.keyboard-container .keyboard .key{outline:2px solid var(--key-outline-color);cursor:pointer;position:relative}.keyboard-container .keyboard .key:focus-visible{outline:2px solid var(--highlight-color)}.keyboard-container .keyboard .key:active{background-color:var(--highlight-color);margin-top:.1rem}.keyboard-container .keyboard .key.in-current-scale{background-color:var(--base-grey)}.keyboard-container .keyboard .key.in-current-scale:active{background-color:var(--highlight-color)}.keyboard-container .keyboard .key.in-current-run{background-color:var(--in-current-run-color)}.keyboard-container .keyboard .key.in-current-run:active{background-color:var(--highlight-color)}.keyboard-container .keyboard .key.descending-variant{background-color:var(--descending-variant-note-color)}.keyboard-container .keyboard .key.descending-variant:active{background-color:var(--highlight-color)}.keyboard-container .keyboard .whiteKey{flex:1;z-index:1;background-color:var(--white-key-color);border-radius:0 0 .25rem .25rem}.keyboard-container .keyboard .blackKey{width:6%;height:55%;margin-left:-3%;margin-right:-3%;z-index:2;background-color:var(--black-key-color);border-radius:0 0 .2rem .22rem}.keyboard-container .keyboard .quarter:after{position:absolute;bottom:0;left:0;z-index:-1;content:"";height:1.5rem;width:100%;background-color:var(--quarter-tone-key-color)}.keyboard-container .keyboard .key.highlight{background-color:var(--highlight-color);margin-top:.1rem}.keyboard-container .keyboard .whiteKey+.whiteKey{margin-left:.1rem}.keyboard-container .keyboard .musical-typing-key-container{display:flex;flex-direction:column;justify-content:flex-end;height:100%;max-width:50%;margin:0 auto;pointer-events:none}.keyboard-container .keyboard .musical-typing-key-container .musical-typing-key-label{-webkit-user-select:none;user-select:none;font-family:Courier New,Courier,monospace;font-weight:700;padding:.2rem;margin-bottom:2rem;border-radius:.3rem;color:var(--base-color);background-color:var(--base-background-color);box-shadow:var(--musical-typing-label-box-shadow)}@media (339px <= width <= 390px){.keyboard-container{width:95vw}}.score-group-container{display:flex;justify-content:center;flex-wrap:wrap;min-height:120px;margin-top:1rem}.score svg{-webkit-user-select:none;user-select:none;fill:var(--score-color);stroke:var(--score-color)}.score svg path{fill:var(--score-color);stroke:var(--score-color)}.score .vf-note{cursor:pointer}.score .vf-note.highlight *{fill:var(--highlight-color);stroke:var(--highlight-color)}.score .vf-note.highlight * path{fill:var(--highlight-color);stroke:var(--highlight-color)}.score .vf-note:active *{fill:var(--highlight-color);stroke:var(--highlight-color)}.score .vf-note:active * path{fill:var(--highlight-color);stroke:var(--highlight-color)}.description{line-height:1.8;text-align:left;padding-inline:.75rem}.description .text-italic-qt{color:var(--quarter-tone-key-color);font-weight:700}.description .maqam-jump{color:var(--red-primary);font-weight:700;padding-bottom:.25rem;border-bottom:1px solid}.comparison-button{background-color:var(--green-primary);color:var(--base-color);padding:.25rem;margin-block:.1rem;border-radius:.25rem;transition:ease-in-out .2s color}.comparison-button.active{background-color:var(--green-secondary);color:var(--base-background-color)}.comparison-button.active svg{fill:var(--base-background-color)}.comparison-button span{display:flex;justify-content:center;align-items:center;gap:.25rem}.comparison-button svg{fill:var(--base-color);transition:ease-in-out .2s fill}.nav-desktop{background-color:var(--base-background-color);padding:.5rem;display:flex;align-items:start;gap:1rem;position:sticky;top:0;z-index:100}.nav-desktop ul{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;scroll-target-group:auto}.nav-desktop li{cursor:pointer}.nav-desktop li a{transition:ease-in-out .2s}.nav-desktop li a.active{font-weight:700;color:var(--red-primary)}.nav-desktop li a:target-current{font-weight:700;color:var(--red-primary)}@media screen and (max-width: 768px){.nav-desktop{display:none}}.nav-mobile{position:fixed;top:0;right:0rem;z-index:5}.nav-mobile ul{list-style:none;display:flex;flex-direction:column;gap:1rem;scroll-target-group:auto}.nav-mobile ul li{cursor:pointer}.nav-mobile ul li a{transition:ease-in-out .2s}.nav-mobile ul li a.active{font-weight:700;color:var(--red-primary)}.nav-mobile ul li a:target-current{font-weight:700;color:var(--red-primary)}.nav-mobile .hamburger-menu{background-color:var(--base-background-color);color:var(--base-color);--x-width: calc(var(--hamburger-height) * 1.41421356237);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--hamburger-gap);width:fit-content;cursor:pointer;padding:.5rem;margin:0 auto}.nav-mobile .hamburger-menu:has(input:checked){background-color:var(--base-background-color);color:var(--base-color)}.nav-mobile .hamburger-menu:has(input:focus-visible):before,.nav-mobile .hamburger-menu:has(input:focus-visible):after,.nav-mobile .hamburger-menu input:focus-visible{border:1px solid var(--base-background-color);box-shadow:0 0 0 1px var(--base-color)}.nav-mobile .hamburger-menu:before,.nav-mobile .hamburger-menu:after,.nav-mobile .hamburger-menu input{content:"";width:var(--bar-width);height:var(--bar-height);background-color:var(--base-color);border-radius:9999px;transform-origin:right center;transition:opacity var(--animation-timing),width var(--animation-timing),rotate var(--animation-timing),translate var(--animation-timing),background-color var(--animation-timing)}.nav-mobile .hamburger-menu input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;outline:none;pointer-events:none}.nav-mobile .hamburger-menu:has(input:checked):before{rotate:-45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / -2);margin-right:.5rem}.nav-mobile .hamburger-menu:has(input:checked):after{rotate:45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / 2);margin-right:.5rem}.nav-mobile .hamburger-menu input:checked{opacity:0;width:0}.nav-mobile .sidebar{transition:transform var(--animation-timing);transform:translate(150%);background-color:var(--base-background-color);color:var(--base-color);max-width:10rem;height:0}.nav-mobile .sidebar nav{display:flex;flex-direction:column;gap:2rem}.hamburger-menu-flex-wrapper{display:flex;justify-self:flex-end}.hamburger-menu-flex-wrapper:has(input:checked)+.sidebar{transform:translate(0);height:max-content;padding:.5rem 1rem;padding-top:calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem)}@media screen and (min-width: 768px){.nav-mobile{display:none}}.app-header{background-color:var(--in-current-run-color);padding-block:1rem;text-align:center}.app-header .subtitle{font-weight:900}.app-header h1{margin-bottom:.25rem;font-size:2.5rem}.app-header .call-to-action{margin-top:.5rem;transform:scale(1);transition:transform ease-in-out 2s;font-weight:600}@starting-style{.app-header .call-to-action{transform:scale(1.2)}}.app-header .call-to-action .see{opacity:1;transform:skew(0);transition:opacity ease-in-out .5s}@starting-style{.app-header .call-to-action .see{opacity:0}}.app-header .call-to-action .hear{opacity:1;transform:scale(2);transition:opacity ease-in-out 1.5s}@starting-style{.app-header .call-to-action .hear{opacity:0}}.app-header .call-to-action .play{opacity:1;transform:scale(1);transition:opacity ease-in-out 2s}@starting-style{.app-header .call-to-action .play{opacity:0}}.app-header .call-to-action .compare{transition:opacity ease-in-out 2.5s;opacity:1;transform:scale(1)}@starting-style{.app-header .call-to-action .compare{opacity:0}}.app-header .call-to-action .rest{opacity:1;transform:scale(1);transition:opacity ease-in-out 4s}@starting-style{.app-header .call-to-action .rest{opacity:0;transform:scale(2)}}.app-header .start-here-button-placholder{background-color:var(--base-background-color);color:var(--base-color);padding:.75rem;position:absolute;top:0;right:0}@media (339px <= width <= 768px){.app-header{padding-top:3rem}}@media (339px <= width <= 390px){.app-header h1{font-size:1.5rem}.app-header .subtitle{font-size:.8rem}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--base-color: #1b0a0a;--base-background-color: white;--green-primary: #81cc83;--green-secondary: #1e7e51;--green-3: #d7fe98;--base-grey: #eee;--red-primary: #9d2020;--scale-panel-border-color: #ccc;--scale-info-bar-background-color: var(--base-grey);--score-color: black;--keyboard-bg-color: #1e0101;--highlight-color: royalblue;--black-key-color: black;--white-key-color: white;--key-outline-color: black;--quarter-tone-key-color: var(--red-primary);--in-current-run-color: var(--green-primary);--descending-variant-note-color: var(--green-3);--play-button-color: var(--green-secondary);--scale-panel-bg-color: var(--base-background-color);--musical-typing-label-box-shadow: 0 0 .5rem rgba(0,0,0,.4);color:var(--base-color);background-color:var(--base-background-color);--bar-width: 2.5rem;--bar-height: .25rem;--hamburger-gap: .4rem;--hamburger-margin: 8px;--animation-timing: .2s ease-in-out;--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2)}[data-theme=dark]{--base-color: white;--base-background-color: #1e0101;--green-primary: #1e7e51;--green-secondary: #81cc83;--green-3: #27391C;--base-grey: #463f3f;--red-primary: #ff4444;--red-scondary: #9d2020;--sun-moon-icon-fill: #6bdfff;--scale-panel-border-color: rgba(255,255,255,.4);--scale-info-bar-background-color: var(--base-grey);--score-color: #3BC1A8;--keyboard-bg-color: var(--red-scondary);--highlight-color: gold;--black-key-color: black;--white-key-color: whitesmoke;--quarter-tone-key-color: var(--red-primary);--in-current-run-color: var(--green-primary);--descending-variant-note-color: var(--green-3);--play-button-color: var(--green-secondary);--scale-panel-bg-color: black;--musical-typing-label-box-shadow: 0 0 .5rem rgba(255,255,255,.2);color:var(--base-color);background-color:var(--base-background-color)}.darkmode-switch-container{position:absolute;top:0;left:0;padding-block:.5rem;display:flex}.darkmode-switch-container svg{width:1.25rem;height:1.25rem;fill:var(--base-color);margin-left:.25rem;margin-right:.25rem;transition:ease-in-out .2s}.darkmode-switch-container .toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;width:0}.darkmode-switch-container .toggle+label{display:flex;align-items:center;cursor:pointer;color:var(--base-color)}.darkmode-switch-container .toggle+label:before{content:"";height:1rem;width:2rem;border-radius:1rem;background-color:var(--base-background-color)}.darkmode-switch-container .toggle+label:after{content:"";height:.8rem;width:.8rem;border-radius:1rem;background-color:var(--base-color);position:absolute;left:2rem;transition:ease-in-out .2s}.darkmode-switch-container .toggle:checked+label:after{transform:translate(100%)}.darkmode-switch-container:has(.toggle:checked) .moon-icon{fill:var(--base-color)}.darkmode-switch-container:not(:has(.toggle:checked)) .sun-icon{fill:var(--base-color)}.darkmode-switch-container:has(input:focus-visible){border:1px solid var(--base-background-color);box-shadow:0 0 0 1px var(--base-color)}