@charset "UTF-8";
/* KjamChords: a listening desk with a warm, energetic accent. */
:root{
  --bg:#111221;--panel:#202238;--panel2:#292c45;--line:#3a3e59;
  --text:#f6f6f5;--muted:#bac0d1;--mint:#b7f460;--mintdark:#263622;
  --orange:#ffb78c;--error:#ff9dab;
}
body{background:radial-gradient(circle at 70% -12%,#252448 0,transparent 38%),var(--bg);background-attachment:fixed}
.sidebar{background:#18192c;border-color:var(--line);width:252px;padding:34px 19px 23px}
.brand{font-size:25px;letter-spacing:-1.2px;padding-left:3px;white-space:nowrap;font-weight:750}
.brand-accent{color:var(--mint)}.brand-dot{color:#ffa579}
.brand-icon{margin-right:10px;width:30px;gap:3px}
.brand-icon i{background:var(--mint);width:4px}
.brand-icon i:nth-child(1){height:23px}.brand-icon i:nth-child(2){height:13px}.brand-icon i:nth-child(3){height:29px}.brand-icon i:nth-child(4){height:18px}
.navigation{margin-top:56px;gap:10px}
.nav-item{border:1px solid transparent;border-radius:13px;padding:16px 12px;color:#c4c7d6}
.nav-item.active{background:#30324b;border-color:#5c6a55;color:var(--mint);box-shadow:inset 3px 0 0 var(--mint)}
.nav-item.active small{color:#d6dfd0}.nav-item:hover:not(.active){background:#25273c}
.sidebar-bottom{padding-top:28px}.sidebar-bottom p{font-size:.96rem;color:#ebecf1;line-height:1.6}.sidebar-bottom strong{color:#b8c0d3}
.ear-mark{color:#ffb78c;font-size:30px}.help-button{padding:13px 0;color:#d0d4e0}
.sidebar-manual{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 11px;margin:4px 0 21px;background:#30324b;border:1px solid #4d5269;border-radius:10px;color:var(--mint);text-decoration:none;font-size:.82rem;font-weight:650}
.sidebar-manual:hover{background:#3a4055}.version{color:#9099ae;font-size:.59rem;letter-spacing:1.4px}
main{margin-left:252px;padding:0 clamp(22px,3.3vw,55px);max-width:1840px}
.topbar{height:78px;border-color:var(--line)}.breadcrumb{color:#c0c5d4}.breadcrumb span{color:#75809a}.breadcrumb strong{color:var(--text)}.headphone{color:#d0d1de}
.page-heading{padding:35px 0 23px;gap:20px}.page-heading .eyebrow{font-size:.7rem;letter-spacing:2px}
h1{font-size:clamp(2rem,3.5vw,3.35rem);letter-spacing:-2px;font-weight:750;margin:9px 0 8px}
.page-heading p:not(.eyebrow){color:#c6cad7}.session-icon{border-color:#566144;background:#303b2e}
.resource-banner{display:flex;align-items:center;gap:16px;padding:14px 16px;margin:0 0 23px;background:linear-gradient(108deg,#292c45 0%,#252840 72%,#333947 100%);border:1px solid #51566c;border-radius:13px;min-width:0}
.resource-icon{display:grid;place-items:center;flex:none;width:41px;height:41px;border-radius:11px;background:#d5ffa1;color:#263121;font-size:22px;font-weight:700}
.resource-banner>div{display:flex;flex-direction:column;gap:2px;min-width:0}.resource-banner strong{font-size:.86rem}.resource-banner div span{font-size:.78rem;color:#c2cad7}
.resource-link{margin-left:auto;flex:none;background:var(--mint);border-radius:9px;padding:10px 13px;color:#202521;text-decoration:none;font-size:.8rem;font-weight:750;white-space:nowrap}
.resource-link:hover{background:#d0ff95}
.studio-layout{gap:22px;grid-template-columns:minmax(0,1fr) 285px}
.exercise-card,.settings-card{background:var(--panel);border-color:#42465e;border-radius:17px;box-shadow:0 20px 50px #090b1840}
.card-top{padding:18px 22px}.badge{border-color:#666b80;background:#30344b;color:#e4e6ef}
.roll{background:#171a2b;border-color:#464964;border-radius:10px}.roll-grid{background-image:linear-gradient(to right,#6f729b26 1px,transparent 1px),linear-gradient(to bottom,#6f729b20 1px,transparent 1px)}
.blind-cover{background:radial-gradient(ellipse,#28304bc4,transparent 77%)}.blind-cover h2{font-size:1.11rem;font-weight:650}.blind-cover p{color:#c4cbda}
.note-bar{border-color:#e4ffb8;color:#172012}.note-bar.reference{background:#ae9bfa;border-color:#c6b8ff}
.primary{background:var(--mint);color:#1d2818;font-weight:750;border-radius:10px}.secondary{background:#2c3048;border-color:#596079}.secondary:hover:not(:disabled){background:#383d59}
.piano-topline{border-color:#41455d;color:#d2d5e1}.piano-topline span:last-child{color:#b9c2d3}
.piano-scroll{scrollbar-color:#68758a #202238}.key.black{background:linear-gradient(#111322,#34364c)}.key.active,.key.revealed{background:linear-gradient(#e4ffc2,#a8e36a);color:#263719}.key.black.active,.key.black.revealed{background:linear-gradient(#8bce57,#567f35);color:#fff}
.answer-heading h2{font-size:1.04rem;font-weight:650}.answer{background:#25283f;border-color:#464b67;border-radius:11px}.answer:hover:not(:disabled){background:#303b40;border-color:#a0d955}.answer.correct{background:#30412d;border-color:var(--mint)}.answer.incorrect{background:#422c3c}
.feedback{background:#2a3b2d;border-color:#8bc358}.feedback.wrong{background:#3d2938;border-color:#bd7891}.formula span{background:#1b2530;border-color:#536d4a}
.settings-card{padding:21px}.settings-title h2{font-weight:700}select{background:#2a2d46;border-color:#535974;border-radius:9px}.segmented{background:#191b30;border-color:#42465e}.segmented .selected{background:#3b4c35;color:#d6ffaa}
.catalog-button{border-color:#484c63}.score-card{background:#1a1d31;border-color:#41465e;border-radius:14px}.score-grid strong{color:var(--mint)}.score-track{background:#34374e}.tip-card{background:#23243a;border:1px solid #40445d;border-radius:12px;padding:17px}.tip-card .eyebrow,.tip-icon{color:var(--orange)}
.page-footer{border-color:#42465b;align-items:center;justify-content:flex-start;gap:20px;letter-spacing:0;font-size:.73rem;color:#c1c5d5}
.page-footer a,.footer-help{background:none;text-decoration:underline;text-underline-offset:4px;color:var(--mint);font-size:.75rem;padding:3px 0}.page-footer a{margin-left:auto}.footer-help{color:#ccd1db}
dialog{background:#25283e;border-color:#626a83}dialog>p,.help-steps{color:#d0d3e1}.catalog-check{background:#2b2e46;border-color:#51566e}
@media(max-width:1240px){.sidebar{width:218px;padding-inline:14px}.brand{font-size:21px}.brand-icon{margin-right:7px}main{margin-left:218px;padding-inline:24px}.studio-layout{grid-template-columns:minmax(0,1fr) 250px;gap:17px}}
@media(max-width:960px){.sidebar{position:relative;width:100%;height:auto;inset:auto;flex-direction:row;align-items:center;gap:20px;padding:16px 24px;background:#18192c}.brand{font-size:22px}.navigation{margin-top:0}.sidebar-bottom{display:none}main{margin-left:0;padding:0 24px}.studio-layout{grid-template-columns:minmax(0,1fr) 245px}}
@media(max-width:700px){html,body{width:100%;max-width:100%;overflow-x:hidden}.sidebar{padding:15px 17px 12px;gap:12px;flex-wrap:wrap;align-items:flex-start}.brand{font-size:23px;max-width:100%}.navigation{width:100%;flex-basis:100%;gap:6px}.nav-item{min-width:0;flex:1 1 0;padding:9px 5px;font-size:.83rem}.nav-item.active{box-shadow:inset 0 -3px 0 var(--mint)}.nav-index{font-size:.56rem}.topbar{height:50px}.headphone{font-size:.7rem}main{width:100%;padding:0 16px}.page-heading{padding:24px 0 17px}.page-heading .eyebrow{font-size:.6rem;letter-spacing:1.3px}h1{font-size:2.08rem;letter-spacing:-1.4px}.resource-banner{gap:10px;padding:12px;flex-wrap:wrap;margin-bottom:17px}.resource-icon{width:37px;height:37px}.resource-banner>div{flex:1 1 calc(100% - 50px)}.resource-banner strong{font-size:.8rem}.resource-banner div span{font-size:.73rem;line-height:1.35}.resource-link{margin:3px 0 0;width:100%;text-align:center;white-space:normal}.studio-layout{grid-template-columns:minmax(0,1fr)}.card-top{padding:16px}.roll-shell{margin:0 15px}.answers{grid-template-columns:repeat(2,minmax(0,1fr))}.page-footer{gap:11px;flex-wrap:wrap}.page-footer span{flex-basis:100%}.page-footer a{margin-left:0}.page-footer span:last-child{margin-left:0}.settings-column{grid-template-columns:minmax(0,1fr)}.tip-card{margin:0 0 3px}}
@media(max-width:380px){.nav-index{display:none}.nav-item{font-size:.79rem}.brand{font-size:21px}.headphone{display:none}.page-heading p:not(.eyebrow){font-size:.83rem}.transport .primary{min-width:0}.transport .secondary{padding-inline:10px}}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 17px;margin-left:auto}
.footer-links a,.footer-links .footer-help{margin:0;color:#d2d6df;text-decoration:none;letter-spacing:0;font-size:.73rem}
.footer-links a:hover,.footer-links .footer-help:hover{color:var(--mint);text-decoration:underline}
.footer-links a:first-child{color:var(--mint);font-weight:700}
@media(max-width:700px){.footer-links{width:100%;justify-content:flex-start;margin-left:0;gap:9px 15px}.footer-links a,.footer-links .footer-help{font-size:.75rem}}