:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff;background-color:#1f1f1f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root .light-mode{color-scheme:light;color:#000;background-color:#eaeaea}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;place-items:center;min-width:320px;min-height:100vh;touch-action:manipulation}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{box-sizing:border-box;max-width:100%;margin:0 auto;padding:2rem;text-align:center}.dark-mode>* .modal-overlay{background:#00000080}.dark-mode>* .modal-content{background:#2b2a2a}.dark-mode>* .console-style{color:#0f0}.dark-mode>* .warning{color:red}.dark-mode>* button{background-color:#1a1a1a;color:#fff}.light-mode>* .modal-overlay{background:#eee}.light-mode>* .modal-content{background:#eee}.light-mode>* .console-style{color:green}.light-mode>* .warning{color:#8b0000}.light-mode>* a:hover{color:#747bff}.light-mode>* button{color:#000}#footer{padding-top:10px}#theme-toggle{float:right}#tab-block{padding-bottom:5px}.tab{margin-right:3px;width:45px}.score-column>h5{margin:5px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.modal-content{padding:20px;border-radius:8px;max-width:500px;width:100%;text-align:center}.console-style{font-family:Courier New,Courier,monospace}.warning{font-style:italic;font-weight:800}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.flashcard{width:226px;height:96px}.ib{display:inline-block}#volume-control{margin-right:5px;width:45px}.study-flashcard{width:16em}.study-fingerings{position:relative;padding-top:10%;padding-left:10%}.study-row{padding-bottom:10px}.error-text{width:100%;height:auto;min-height:100px}.key{margin:2px;border-radius:50px/25px;height:1.1in;width:1.45in;background:linear-gradient(90deg,#b7b7b7,#c2c2c2 25%,#9d9d9d,#d2d2d2 75%,#b7b7b7);background-size:200% 200%;animation:shine 3s linear infinite;color:#000!important}.button-block{background-image:url(/horn-helper/doublehornvalves.png);background-size:cover;width:3in}.row{max-width:100%;display:flex}.column{flex:50%;padding-right:5px}.setting-row{display:flex;flex-wrap:wrap;gap:10px}.setting-column{flex:1;min-width:200px;padding:10px}@media (max-width: 600px){.setting-column{flex:100%}}.setting{text-align:left;padding-bottom:40px}.setting select{font-size:small;height:auto;max-height:40px}.question{padding-right:5px}.invisible{display:none}.visible{display:inline-block}.leaderboard{min-width:2.5in}.leaderboard-cell{white-space:nowrap}#help-block{max-width:800px}#help-block>div{padding:25px}#help-block>img{display:block;margin:0 auto;max-height:500px;max-width:100%;border:2px solid gray}