:root{font-family:system-ui,-apple-system,sans-serif;color:#172632;background:#f4f1eb;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e8bf83;outline-offset:2px}
a{color:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.sidebar{background:#172632;color:#f9f7f2;padding:28px 18px;display:flex;flex-direction:column;gap:26px;min-height:100vh;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:0 10px}
.brand img{width:42px;height:42px;border-radius:12px}
.brand strong{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.05;font-weight:600}
.brand small{display:block;margin-top:4px;color:#b3c1c4;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.nav{display:grid;gap:5px}
.nav button{border:0;background:transparent;color:#c9d2d1;text-align:left;padding:12px 14px;border-radius:11px;font-weight:600;display:flex;align-items:center;gap:12px;width:100%}
.nav button:hover,.nav button.active{background:#2c414b;color:white}
.nav .symbol{font-size:18px;width:22px;text-align:center;font-weight:400}
.sidebar-extra{padding:0 8px}.sidebar-extra .btn{width:100%;justify-content:flex-start;color:#d3dddc;border-color:#53656d;font-size:12px}
.sidebar-note{margin-top:auto;border-top:1px solid #3c5159;padding:18px 12px 0;color:#b3c1c4;font-size:12px;line-height:1.5}
.main{min-width:0;max-width:1360px;width:100%;margin:0 auto;padding:36px 48px 80px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:29px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:#a94734}
.topbar h1,.page-title{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:34px;letter-spacing:-.025em;line-height:1.1;margin:7px 0 0}
.topbar-right{display:flex;gap:10px;align-items:center}
.pill{border-radius:100px;background:#e7e2d8;padding:8px 12px;color:#526068;font-size:12px;font-weight:700;white-space:nowrap}
.card{background:#fffefa;border:1px solid #e8e3d9;border-radius:19px;box-shadow:0 4px 22px #1c2e3810}
.hero{background:#203640;color:#fff;padding:31px 34px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;width:250px;height:250px;border:1px solid #ffffff2b;border-radius:50%;right:-80px;top:-130px;box-shadow:0 0 0 42px #ffffff0a,0 0 0 85px #ffffff09}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:#e8bf83}
.hero h2{font-family:Fraunces,Georgia,serif;font-size:31px;font-weight:500;line-height:1.18;margin:9px 0 8px;max-width:640px}
.hero p{color:#d3dddc;margin:0;max-width:590px;line-height:1.55}
.btn{border:1px solid transparent;border-radius:11px;padding:11px 15px;font-weight:700;display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;line-height:1.25}
.btn-primary{background:#a94734;color:white}
.btn-primary:hover{background:#913927}
.btn-dark{background:#172632;color:white}
.btn-dark:hover{background:#2b414b}
.btn-soft{background:#eee9df;color:#23333b}
.btn-soft:hover{background:#e4ded3}
.btn-outline{background:transparent;border-color:#d9d4c9;color:#263841}
.btn-outline:hover{background:#f5f1e9}
.btn-light{background:#f4f1eb;color:#172632}
.btn-sm{padding:7px 10px;font-size:12px;border-radius:8px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:32px 0 15px}
.section-heading h2{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;margin:0}
.section-heading p{margin:4px 0 0;color:#6d797d;font-size:13px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.stat{padding:21px 23px}
.stat strong{display:block;font-family:Fraunces,Georgia,serif;font-size:32px;font-weight:600}
.stat span{font-size:13px;color:#66747a}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.item-card{padding:21px;display:flex;flex-direction:column;gap:13px;min-width:0}
.item-card:hover{border-color:#c4b9a7}
.item-card h3{font-family:Fraunces,Georgia,serif;font-size:20px;line-height:1.2;margin:0}
.item-card p{color:#657279;line-height:1.45;margin:0;font-size:13px}
.item-top{display:flex;justify-content:space-between;align-items:start;gap:12px}
.item-icon{width:38px;height:38px;border-radius:11px;background:#e9e2d6;display:grid;place-items:center;font-size:19px;flex:none}
.card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;border-radius:100px;background:#f1ede6;color:#6f5f48;font-size:11px;font-weight:700;padding:5px 9px;line-height:1.2}
.tag.ready{background:#e5f1e9;color:#35634a}
.tag.draft{background:#fff0d3;color:#8b641e}
.tag.missing{background:#f4e5e0;color:#9a513d}
.muted{color:#66747a}
.small{font-size:12px}
.empty{padding:30px;text-align:center;color:#67747a}
.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:15px 0 18px;flex-wrap:wrap}
.toolbar .lead{color:#68767a;font-size:13px;margin:0;max-width:650px}
.list{display:grid;gap:10px}
.list-row{padding:17px 19px;display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:0}
.list-row h3{margin:0 0 4px;font-size:15px}
.list-row p{margin:0;color:#6b797c;font-size:12px;line-height:1.4}
.list-row .row-content{min-width:0}
.list-row .row-actions{display:flex;gap:7px;align-items:center;flex:none}
.detail-head{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-bottom:17px}
.detail-head h2{font-family:Fraunces,Georgia,serif;font-size:27px;margin:5px 0 7px}
.detail-head p{margin:0;color:#6d797d;line-height:1.5}
.back{border:0;background:transparent;color:#a94734;font-weight:700;padding:0;margin-bottom:15px}
.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
.student-dashboard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:16px;align-items:start}
.student-next{grid-column:1;grid-row:1}.student-paths{grid-column:2;grid-row:1}.student-skills{grid-column:2;grid-row:2}.student-history{grid-column:1;grid-row:2 / span 3}.student-diagnostic{grid-column:2;grid-row:3}.student-year{grid-column:2;grid-row:4}
.stage-dashboard{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:16px;align-items:start}.stage-reference{grid-column:1/-1}
.browse-skills{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.browse-skills h3{margin-bottom:5px}.browse-skills .btn{flex:none}
.course-search{display:grid;gap:7px;max-width:520px;margin:15px 0 22px}.course-search label{font-size:12px;font-weight:700;color:#405159}.course-search input{width:100%;border:1px solid #d8d6d0;border-radius:10px;background:white;padding:12px 14px;min-height:45px;color:#172632}
.panel{padding:22px}
.panel h3{font-family:Fraunces,Georgia,serif;font-size:20px;margin:0 0 12px}
.panel p{color:#5f6e73;font-size:13px;line-height:1.6}
.panel p:last-child{margin-bottom:0}
.callout{background:#f0e9de;border-left:3px solid #bc7953;border-radius:8px;padding:13px 15px;color:#574e43;font-size:13px;line-height:1.5}
.mini-list{display:grid;gap:9px}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eee9e1;font-size:13px}
.mini-row:last-child{border:0}
.prose{white-space:pre-wrap;line-height:1.65;color:#34454d;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;color:#405159}
.field input,.field select,.field textarea{width:100%;border:1px solid #d8d6d0;border-radius:9px;background:#fff;padding:10px 11px;color:#172632;min-height:42px}
.field input[type="checkbox"]{width:auto;min-height:0;accent-color:#a94734;padding:0;vertical-align:middle}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:11px;color:#78858a}
.field-label{font-size:12px;font-weight:700;color:#405159}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:210px;overflow:auto;border:1px solid #e3dfd6;border-radius:9px;padding:10px}
.option-grid label{font-size:12px;font-weight:500;line-height:1.35;display:flex;align-items:start;gap:6px}
.option-grid input{margin-top:2px!important;flex:none}
.modal-backdrop{position:fixed;inset:0;background:#12222cc9;z-index:30;display:grid;place-items:center;padding:20px}
.modal{width:min(640px,100%);max-height:min(85vh,900px);overflow:auto;background:#fffefa;border-radius:19px;padding:25px;box-shadow:0 30px 100px #0005}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.modal-head h2{font-family:Fraunces,Georgia,serif;font-size:24px;margin:0}
.icon-btn{border:0;background:#eee9e0;color:#33434a;width:31px;height:31px;border-radius:8px;font-size:20px;line-height:1}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.toast{position:fixed;bottom:25px;right:25px;z-index:50;background:#172632;color:white;border-radius:11px;padding:12px 16px;box-shadow:0 12px 30px #0003;font-size:13px;max-width:360px}
.exercise{padding:22px;overflow:hidden}
.exercise svg{width:100%;height:auto;display:block;background:white;border:1px solid #e6e1d8;border-radius:10px}
.exercise-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.exercise-controls .field{min-width:135px}
.course-tabs{display:flex;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.course-panel{min-width:0}
.rendered-markdown{color:#34454d;font-size:14px;line-height:1.68;overflow-wrap:anywhere}
.rendered-markdown h2,.rendered-markdown h3,.rendered-markdown h4,.rendered-markdown h5,.rendered-markdown h6{color:#172632;font-family:Fraunces,Georgia,serif;line-height:1.25;margin:1.3em 0 .4em}
.rendered-markdown h2{font-size:22px}.rendered-markdown h3{font-size:19px}.rendered-markdown h4{font-size:17px}
.rendered-markdown p{font-size:14px;color:#34454d;line-height:1.68;margin:.65em 0}
.rendered-markdown li{margin:4px 0}.rendered-markdown ul,.rendered-markdown ol{padding-left:23px}
.rendered-markdown blockquote,.markdown-callout{margin:12px 0;padding:10px 14px;background:#f5f1e9;border-left:3px solid #b9785d;border-radius:7px}
.rendered-markdown hr{border:0;border-top:1px solid #e2ddd2;margin:24px 0}
.rendered-markdown code{background:#efece6;padding:1px 3px;border-radius:3px}
.rendered-markdown pre,.source-details pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f0ea;padding:15px;border-radius:8px;font-size:12px;line-height:1.5}
.source-ref{color:#9b503a;text-decoration:underline dotted;text-underline-offset:3px}
.markdown-table{overflow:auto;max-width:100%}.markdown-table table{border-collapse:collapse;min-width:520px;font-size:12px}.markdown-table th,.markdown-table td{border:1px solid #e3dfd5;padding:7px 9px;text-align:left;vertical-align:top}
.source-details{margin-top:16px;min-width:0}.source-details summary{cursor:pointer;font-weight:700;color:#a94734}.source-details>p{overflow-wrap:anywhere}
.tool-launch{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}.tool-launch:hover{transform:translateY(-2px);box-shadow:0 9px 26px #1c2e3820}
.choice-grid{display:flex;flex-wrap:wrap;gap:8px}.tool-subhead{margin-top:24px!important}
.tool-actions{margin-top:16px}.rhythm-beats{display:flex;gap:10px;overflow-x:auto;padding:4px 0 12px}
.rhythm-beat{border:1px solid #e8e3d9;border-radius:10px;padding:10px;flex:none}.rhythm-beat strong{display:block;font-size:12px;margin-bottom:8px}.rhythm-beat>div{display:flex;gap:5px}
.rhythm-preview,.chord-sheet{overflow-x:auto}.rhythm-preview svg{display:block;max-width:none;height:210px;width:auto}.chord-single{max-width:280px;margin:18px auto}.chord-single svg{width:100%;height:auto}
.chord-sheet svg{display:block;max-width:100%;height:auto;margin:16px auto}.pulse-check{display:flex;align-items:center;gap:8px;margin:20px 0;font-size:13px}.pulse-check input{accent-color:#a94734}
.pulse-display{display:grid;place-items:center;gap:4px;min-height:130px;border:1px solid #e6e1d8;background:#f5f1e9;border-radius:12px;margin:16px 0;text-align:center}.pulse-display strong{font-size:21px}.pulse-display span{font-size:13px;color:#67747a}
.bottom-nav{display:none}
@media(max-width:1060px){.main{padding:29px 28px 80px}.grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr 270px}.student-dashboard{grid-template-columns:minmax(0,1fr) minmax(260px,.85fr)}}
@media(max-width:760px){.shell{display:block}.sidebar{display:none}.main{padding:22px 17px calc(92px + env(safe-area-inset-bottom))}.topbar{margin-bottom:20px;align-items:start}.topbar h1,.page-title{font-size:27px}.topbar-right .tag{display:none}.hero{grid-template-columns:1fr;padding:26px}.hero h2{font-size:27px}.hero .btn{justify-self:start}.stats{grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:16px 12px}.stat strong{font-size:25px}.stat span{font-size:11px}.grid,.grid-three,.detail-grid,.stage-dashboard,.student-dashboard{grid-template-columns:1fr}.student-dashboard>*{grid-column:auto;grid-row:auto}.stage-reference{grid-column:auto}.browse-skills{align-items:start;flex-direction:column}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:#172632;color:#d4ddda;z-index:20;padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 25px #17263225}.bottom-nav button{border:0;background:transparent;color:inherit;display:grid;justify-items:center;gap:3px;padding:5px 1px;font-size:10px;font-weight:700;min-width:0}.bottom-nav button.active{color:#e8bf83}.bottom-nav .symbol{font-size:19px;line-height:1.1}.section-heading{margin-top:26px}.list-row{align-items:start}.list-row .row-actions{flex-wrap:wrap;justify-content:flex-end}.toast{bottom:calc(82px + env(safe-area-inset-bottom));right:15px;left:15px;max-width:none}.modal-backdrop{padding:10px}.modal{max-height:90vh;padding:20px}.form-grid{grid-template-columns:1fr}.option-grid{grid-template-columns:1fr}}
@media(max-width:380px){.bottom-nav button{font-size:9px}.stat span{font-size:10px}.list-row{flex-direction:column}.list-row .row-actions{justify-content:flex-start}}
@media print{.sidebar,.bottom-nav,.topbar,.toolbar,.btn,.back,.section-heading,.exercise-controls,.toast,.tool-actions,.rhythm-beats,.pulse-check,.pulse-display{display:none!important}.shell,.main{display:block;padding:0}.exercise{border:0;box-shadow:none;padding:0}.exercise svg{border:0}.chord-sheet svg{max-width:100%;max-height:95vh}.rhythm-preview svg{max-width:100%;height:auto}body:has(#exercise-print) .main> :not(:has(#exercise-print)),body:has(#rhythm-print) .main> :not(:has(#rhythm-print)),body:has(#chord-sheet-print) .main> :not(:has(#chord-sheet-print)){display:none!important}}