.stoic-reflection{margin:0;max-width:740px}.stoic-reflection p{font-size:16px;line-height:1.7;color:#b6c7d8;margin:0 0 9px;font-weight:400}.stoic-reflection cite{font-size:10px;font-style:normal;letter-spacing:.7px;color:#7990a7}.stoic-reflection a{color:inherit;text-decoration:none;border-bottom:1px solid #41566a}.tour-trigger{border:1px solid #466158!important;border-radius:8px;color:#b5e6d6!important}#themeToggle{font-size:11px}.tour-layer{position:fixed;inset:0;z-index:9999;pointer-events:auto}.tour-backdrop{position:absolute;inset:0;background:#0409119c}.tour-focus{position:fixed;border:2px solid #b5f2dd;border-radius:12px;box-shadow:0 0 0 4px #a6e7d218;pointer-events:none}.tour-popover{position:fixed;background:#1d2a38;color:#e8f0f8;border:1px solid #4c6576;border-radius:16px;padding:21px;box-shadow:0 18px 80px #0009;max-height:calc(100dvh - 24px);overflow:auto}.tour-top{display:flex;justify-content:space-between;align-items:center}.tour-top span{font-size:10px;letter-spacing:2px;color:#a6e7d2}.tour-top button{padding:0 6px;border:0;background:transparent;font-size:24px;color:#a2b5c8}.tour-popover h3{font:700 19px Manrope,sans-serif;line-height:1.4;margin:12px 0}.tour-popover p{font-size:13px;color:#b1c2d3;line-height:1.8;margin:0 0 22px}.tour-actions{display:flex;justify-content:space-between;gap:12px}.tour-actions button{font-size:12px}.tour-actions button:disabled{opacity:.35;cursor:default}.tour-popover small{display:block;color:#7d94ab;font-size:9px;margin-top:15px}.tour-open{overflow:hidden}
html[data-theme=light]{color-scheme:light;--ink:#203140;--muted:#5c6e7d;--line:#d2dce5;--cream:#f1f5f8}html[data-theme=dark]{color-scheme:dark}html[data-theme=light] body{background:radial-gradient(ellipse at 80% 0,#dfebf6,transparent 50%),#f4f7fa;color:#203140}html[data-theme=light] .brand{color:#17332d}html[data-theme=light] header{border-color:#d6e0e8}html[data-theme=light] nav button{color:#405d6d}html[data-theme=light] .eyebrow{color:#337564}html[data-theme=light] .stoic-reflection p{color:#415e71}html[data-theme=light] .stoic-reflection cite{color:#607b8b}html[data-theme=light] .main-tabs{background:#e5edf2;border-color:#d2dfe7}html[data-theme=light] .main-tabs button{color:#536c7c}html[data-theme=light] .main-tabs [aria-selected=true]{background:#236551;color:#fff}html[data-theme=light] .studio{background:linear-gradient(145deg,#fff,#f9fbfd);border-color:#d4dfe8;box-shadow:0 18px 45px #34516d0a}html[data-theme=light] .studio>p,html[data-theme=light] .coach p{color:#566d7e}html[data-theme=light] .lesson-top,html[data-theme=light] .section-label{color:#667d90}html[data-theme=light] .lesson-top .eyebrow{color:#2d7461}html[data-theme=light] .levels button{background:#fff;border-color:#d7e1e8;color:#344d5f}html[data-theme=light] .levels button[aria-pressed=true]{background:linear-gradient(120deg,#e0f2e9,#eaf5f1);border-color:#7ab39f;box-shadow:inset 3px 0 #32775e}html[data-theme=light] .levels button[aria-pressed=true] strong{color:#225e47}html[data-theme=light] .levels button small,html[data-theme=light] .level-blurb{color:#637b8b}html[data-theme=light] .lesson-chooser{color:#405b6e}html[data-theme=light] select,html[data-theme=light] .lesson-chooser select{background:#fff;color:#28465a;border-color:#bfcfdb}html[data-theme=light] .steps button{background:#edf2f6;color:#5b7283;border-color:#d7e1e9}html[data-theme=light] .steps button.selected{background:#27664f;color:white;border-color:#27664f}html[data-theme=light] .coach h3{color:#263f50}html[data-theme=light] .coach>span{color:#8eb6a8}html[data-theme=light] .demo{background:#edf3f7;border-color:#d5e1ea}html[data-theme=light] .demo p{color:#506e84}html[data-theme=light] .primary{background:#27664f;color:#fff;border-color:#27664f}html[data-theme=light] .primary:hover{background:#327b60}html[data-theme=light] button{background:#edf3f7;color:#345568;border-color:#cbd9e2}html[data-theme=light] .play-controls #stop{color:#526f83;border-color:#bfceda}html[data-theme=light] .settings,html[data-theme=light] .finger-controls p,html[data-theme=light] .keyboard-caption{color:#637d91}html[data-theme=light] .finger-controls>label{color:#38586b}html[data-theme=light] .tip{background:#edf6f2;border-color:#cee2d9}html[data-theme=light] .tip strong{color:#306f54}html[data-theme=light] .tip p{color:#4d7163}html[data-theme=light] .reflection textarea{background:#fff;color:#294657;border-color:#cbd9e2}html[data-theme=light] .reflection label{color:#344e5f}html[data-theme=light] #chordButtons button{background:#edf3f7;color:#3c5e73;border-color:#cedde7}html[data-theme=light] #chordButtons [aria-pressed=true]{background:#27664f;color:white;border-color:#27664f}html[data-theme=light] #chordDetail{color:#456378}html[data-theme=light] #hearShape{background:#e2f0e9;color:#29664d;border-color:#a7cebc}html[data-theme=light] .tour-trigger{color:#28644d!important;border-color:#a1c3b5!important}html[data-theme=light] .tour-popover{background:#fff;border-color:#bdd2dd;color:#243f50}html[data-theme=light] .tour-popover p{color:#536e80}html[data-theme=light] .tour-top span{color:#2e7056}html[data-theme=light] .tour-focus{border-color:#79ddb6}html[data-theme=light] .practice-notes summary{color:#557286}@media(max-width:600px){header{gap:12px;align-items:flex-start}header nav{flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:220px}header nav button{padding:7px;font-size:9px!important}.stoic-reflection p{font-size:14px}.tour-popover{padding:17px}}
.pieces-panel{margin-bottom:40px}.piece-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.piece-controls label{font-size:13px}.piece-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:22px 0}.piece-bar{text-align:left;min-width:0;padding:16px}.piece-bar small{display:block;font-size:10px;letter-spacing:1px;margin-bottom:9px}.piece-bar span{font-size:13px;line-height:1.8}.piece-bar.is-playing{outline:3px solid #73bc9f;outline-offset:1px}#pieceStatus{min-height:26px}#pieceSource{font-size:12px}#pieceSource a{color:inherit}.pieces-panel .lesson-chooser{max-width:640px}.main-tabs{flex-wrap:wrap}@media(max-width:500px){.piece-bars{grid-template-columns:1fr}.piece-controls{align-items:flex-start}}

.stoic-reflection{max-width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:5px}.stoic-reflection p{display:inline;font-size:14px;margin-right:14px}.stoic-reflection cite{display:inline}.piece-hand{display:flex!important;align-items:baseline;flex-wrap:wrap;gap:7px;margin-top:6px}.piece-hand b{font-size:10px;min-width:20px;opacity:.75}.piece-note{white-space:nowrap}.piece-note sup{font-size:9px;margin-left:2px;opacity:.75}.piece-bar{padding:13px}.piece-bars{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}#pieceKeyboardHome{margin-bottom:20px}@media(max-width:500px){.piece-bars{grid-template-columns:1fr}.stoic-reflection p{font-size:13px}}

.piece-score{overflow-x:auto;padding:4px}.piece-score .piece-bars{grid-template-columns:repeat(4,minmax(0,1fr));min-width:760px}.piece-score .piece-bar{height:100%}

.piece-levels{display:flex;gap:9px;margin-top:22px}.piece-levels button{flex:1;max-width:180px}.piece-levels [aria-pressed=true]{background:#27664f;color:#fff;border-color:#73bc9f}.piece-note{max-width:100%;overflow-wrap:anywhere;white-space:normal}#pieceLevelHelp{font-size:13px}

#pieceBarsToggle{margin:0 0 18px}#pieceBarsSection[hidden]{display:none}
/* Keep each finger hue while giving the left hand a darker shade. */
.key.playing[data-hand="Left"]{background:color-mix(in srgb,var(--finger,#bac8d7) 82%,#334155)}
.key.black.playing[data-hand="Left"]{background:color-mix(in srgb,var(--finger,#72899e) 82%,#334155)}