.functionGuide{flex:0 0 auto;padding:9px 12px;background:#12212b;border-bottom:1px solid #516674;color:#e7f0f5}.functionGuideTitle{display:block;font:11px system-ui;color:#bacbd5;margin-bottom:6px}.functionStates{display:flex;flex-wrap:wrap;gap:7px}.functionMarker{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 10px;border:2px solid currentColor;border-radius:7px;font:700 12px/1.3 system-ui;letter-spacing:.3px;box-sizing:border-box}.functionMarker.home{color:#b7f7ce;background:#16442e}.functionMarker.away{color:#c1e0ff;background:#193e63}.functionMarker.tension{color:#ffe2a0;background:#5a3d0e}.functionMarker.current{outline:2px solid white;outline-offset:2px;box-shadow:0 0 0 4px #ffffff18}.functionMarker.current::before{content:'●';margin-right:6px}.functionCurrent{display:block;margin-top:8px;font:700 16px/1.4 system-ui;color:#f5fafc}.functionGuide[data-function=home] .functionCurrent{color:#b7f7ce}.functionGuide[data-function=away] .functionCurrent{color:#c1e0ff}.functionGuide[data-function=tension] .functionCurrent{color:#ffe2a0}#lyrics .phrase.active[data-harmonic-function=home]{background:#173b2c!important;border-left:5px solid #70df99!important}#lyrics .phrase.active[data-harmonic-function=away]{background:#19374f!important;border-left:5px solid #8dcaff!important}#lyrics .phrase.active[data-harmonic-function=tension]{background:#48371c!important;border-left:5px solid #f3c05b!important}body[data-learning-view=listen] .functionGuide{display:none!important}@media(max-width:600px){.functionMarker{font-size:10px;padding:4px 6px;min-height:28px}.functionCurrent{font-size:14px}.functionGuide{padding:7px 9px}}@media print{.functionGuide{display:none!important}}
.functionGuide{position:sticky;top:0;z-index:4}