:root{color-scheme:dark;font-family:Inter,-apple-system,sans-serif;color:#fff8ec;--panel:#111d2a;--panel2:#172535;--line:#31465b;--muted:#91a3b7;--green:#628d3e;--blue:#3475ad;--gold:#e0aa25;--red:#b82d31}
*{box-sizing:border-box}
body{margin:0;padding:16px;background:radial-gradient(circle at 12% 7%,#3475ad2e,transparent 27rem),radial-gradient(circle at 91% 31%,#b82d311c,transparent 24rem),#09111c}
button,input{font:inherit}
.shell{width:min(100%,780px);min-height:calc(100vh - 32px);margin:auto;padding:clamp(18px,4vw,42px);border:1px solid var(--line);border-radius:16px;background:#09111ceB;box-shadow:0 24px 80px #0006}
header,.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
header{padding-bottom:18px;border-bottom:1px solid var(--line)}
header>a:last-child{padding:9px 12px;border:1px solid var(--line);color:#d9e4ef;text-decoration:none;font-size:.8rem;font-weight:800}
.logo{display:grid;grid-template-columns:repeat(2,15px);grid-template-rows:repeat(2,15px);font:950 14px/15px "Arial Black";letter-spacing:-2px;text-decoration:none}
.logo i{font-style:normal;text-align:center}
.logo i:nth-child(1){color:var(--green)}
.logo i:nth-child(2){color:var(--blue)}
.logo i:nth-child(3){color:var(--gold)}
.logo i:nth-child(4){color:var(--red)}
.hero{padding:clamp(35px,7vw,64px) 0 32px}
.tag{margin:0 0 9px;color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{max-width:620px;margin-bottom:16px;font-size:clamp(2.5rem,8vw,5rem);line-height:.96;letter-spacing:-.055em}
h2{margin-bottom:0}
.hero>p:last-child,.note{color:#aebdcb;line-height:1.6}
form,#session{padding:clamp(20px,4vw,32px);border:1px solid var(--line);background:var(--panel);box-shadow:inset 7px 0 var(--blue)}
fieldset{margin:0 0 27px;padding:0;border:0}
legend{margin-bottom:13px;font-weight:900}
.choices{display:grid;gap:8px}
.instruments{grid-template-columns:repeat(3,1fr)}
.times{grid-template-columns:repeat(5,1fr)}
label input{position:absolute;opacity:0}
.choices span{min-height:58px;display:grid;place-content:center;padding:10px;border:1px solid var(--line);background:#0d1723;text-align:center;font-weight:900;cursor:pointer}
.choices small{display:block;margin-top:3px;color:var(--muted);font-size:.67rem}
.instruments span{min-height:75px;text-align:left}
.choices input:checked+span{border-color:#6694c1;background:#18314b;box-shadow:inset 0 -4px var(--gold)}
.build{width:100%;min-height:54px;border:0;background:var(--green);color:#fff;font-weight:950;cursor:pointer}
#session{margin-top:24px;box-shadow:inset 7px 0 var(--gold)}
.section-head{align-items:flex-end;margin-bottom:20px}
.section-head button{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer}
#session-list,#path-list{display:grid;gap:8px;counter-reset:item}
.session-card,.path-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);background:#0d1723;color:inherit;text-decoration:none}
.session-card:before{counter-increment:item;content:counter(item);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);font-weight:950}
.session-card small,.path-item small{display:block;margin-top:4px;color:var(--muted)}
.session-card em{color:var(--gold);font-style:normal;font-weight:900}
.note{margin:18px 0 0;font-size:.75rem}
.path{padding-top:50px}
.path[hidden]{display:none}
.section-head>p{margin:0;color:var(--muted);font-size:.8rem}
.section-head>p b{color:var(--gold)}
.path-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);font-weight:900}
.path-state{color:#9fc7ef;font-size:.67rem;font-weight:900;text-transform:uppercase}
.path-item.locked{opacity:.5}
.path-item.mastered .path-num{background:var(--green)}
.mastery-progress{display:grid;gap:5px;margin-top:10px}
.mastery-progress>small{margin:0 0 2px;color:#c7d2de;font-size:.65rem;font-weight:750}
.mastery-progress>div{display:grid;grid-template-columns:minmax(80px,1fr) auto;align-items:center;gap:8px}
.mastery-progress>div>span{height:5px;overflow:hidden;background:#26384a}
.mastery-progress i{display:block;height:100%;background:var(--gold)}
.mastery-progress b{min-width:72px;color:var(--muted);font-size:.61rem;text-align:right}
.path-item.mastered .mastery-progress i{background:var(--green)}
@media(max-width:560px){body{padding:6px}
.shell{padding:17px 12px}
.instruments{grid-template-columns:1fr}
.times span{padding:6px 2px}
.session-card,.path-item{grid-template-columns:38px 1fr}
.session-card em,.path-state{grid-column:2}
}