:root{--paper:#fff;--ink:#142238;--muted:#647084;--blue:#2f6fa6;--blue-deep:#214e78;--blue-pale:#dceaf5;--red:#c04a50;--line:#d7e0e9;--soft:#edf3f8}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.75rem;border:2px solid var(--blue)}
.class-topbar{min-height:66px;padding:.8rem clamp(1rem,4vw,4rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--line)}.class-topbar>a{color:var(--ink);font-weight:800;text-decoration:none}.class-topbar>a span{font-weight:500;color:var(--muted)}.class-topbar>a:last-child{text-align:right;font-size:.8rem;letter-spacing:.08em}.class-topbar nav{display:flex;gap:.35rem}.class-topbar nav a{padding:.55rem .75rem;color:var(--blue-deep);text-decoration:none;border-radius:.45rem}.class-topbar nav a[aria-current]{background:var(--blue-pale);font-weight:800}
main{width:min(1440px,100%);margin:0 auto}.class-intro{padding:clamp(2.3rem,6vw,5.5rem) clamp(1rem,5vw,5rem) 2rem;border-bottom:1px solid var(--line)}.class-intro>p:first-child{margin:0 0 .7rem;color:var(--red);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.class-intro h1{max-width:900px;margin:0;font-family:"EB Garamond",Georgia,serif;font-size:clamp(2.3rem,6vw,5rem);line-height:.95}.class-intro>p:last-child{max-width:780px;margin:1.2rem 0 0;color:#44546a;font-family:"Newsreader",Georgia,serif;font-size:1.25rem;line-height:1.55}
.class-browser{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);min-height:70vh}.class-picker{padding:1.5rem;border-right:1px solid var(--line);background:var(--soft);align-self:start;position:sticky;top:0}.class-picker label,.exercise-workspace>label{display:block;margin:0 0 .4rem;font-weight:800}.class-picker label+select{margin-bottom:1rem}.class-picker select,.exercise-workspace select,.exercise-workspace input[type="text"],.exercise-workspace textarea{width:100%;padding:.8rem .9rem;border:1px solid #bdcad7;border-radius:.45rem;background:#fff;color:var(--ink);font:inherit}.class-picker select:focus,.exercise-workspace select:focus,.exercise-workspace input:focus,.exercise-workspace textarea:focus{outline:3px solid rgba(47,111,166,.2);border-color:var(--blue)}.class-picker>p{margin:.2rem 0 1.1rem;color:var(--muted);font-size:.88rem}.picker-help{display:block;padding-top:1rem;border-top:1px solid var(--line);color:var(--blue-deep);font-size:.9rem;font-weight:800;line-height:1.4;text-decoration:none}
.class-reader{padding:clamp(1.5rem,5vw,5rem);max-width:900px}.class-reader>header{padding-bottom:1.4rem;border-bottom:3px solid var(--blue-deep)}.class-reader>header>p:first-child{margin:0 0 .5rem;color:var(--red);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.class-reader h2{margin:0;font-family:"EB Garamond",Georgia,serif;font-size:clamp(2rem,5vw,4rem);line-height:1}.class-reader>header>p:last-child{margin:1rem 0 0;color:#44546a;font-size:1.08rem;line-height:1.5}.lesson-section{padding:1.5rem 0;border-bottom:1px solid var(--line)}.lesson-section h3{margin:0 0 .7rem;font-size:1rem;color:var(--blue-deep)}.lesson-section p,.lesson-section li{font-family:"Newsreader",Georgia,serif;font-size:1.12rem;line-height:1.65}.lesson-section p{margin:.55rem 0}.lesson-section ul{margin:.5rem 0;padding-left:1.25rem}.representation-grid,.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.representation,.check-item,.guide{padding:1rem;border:1px solid var(--line);border-radius:.55rem;background:#fff}.representation strong,.check-item strong{display:block;color:var(--blue-deep);margin-bottom:.35rem}.guide summary{color:var(--blue-deep);font-weight:850;cursor:pointer}.guide>div{padding-top:.7rem}.error{border-left:4px solid var(--red);padding-left:1.2rem}.milestone{margin-top:1.5rem;padding:1.15rem;background:var(--blue-pale);border-radius:.55rem;color:var(--blue-deep);font-weight:850}.class-sequence,.exercise-sequence{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.class-sequence button,.exercise-sequence button,.exercise-check{border:1px solid #bdcad7;background:#fff;color:var(--blue-deep);border-radius:.4rem;padding:.7rem .9rem;font:inherit;font-weight:750;cursor:pointer}.class-sequence button:disabled,.exercise-sequence button:disabled{opacity:.35;cursor:not-allowed}
.exercise-workspace{margin-top:3rem;padding:clamp(1.2rem,3vw,2rem);border:2px solid var(--blue-deep);border-radius:.7rem;background:var(--soft)}.exercise-workspace>header p{margin:0;color:var(--red);font-size:.78rem;font-weight:850;text-transform:uppercase}.exercise-workspace>header h3{margin:.35rem 0 1.2rem;font-family:"EB Garamond",Georgia,serif;font-size:2rem}.exercise-workspace>select{margin-bottom:1rem}.exercise-workspace article{padding:1.2rem;border:1px solid var(--line);border-radius:.55rem;background:#fff}.exercise-prompt{margin:0 0 1rem;font-family:"Newsreader",Georgia,serif;font-size:1.25rem;line-height:1.55}.exercise-workspace fieldset{display:grid;gap:.55rem;margin:0 0 1rem;padding:0;border:0}.exercise-workspace fieldset legend{margin-bottom:.7rem;font-weight:800}.exercise-workspace fieldset label{display:flex;gap:.55rem;padding:.65rem;border:1px solid var(--line);border-radius:.4rem;cursor:pointer}.exercise-workspace textarea,.exercise-workspace input[type="text"]{margin-bottom:1rem}.exercise-check{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}.exercise-feedback{font-weight:800}.exercise-workspace details{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.8rem}.exercise-workspace details summary{color:var(--blue-deep);font-weight:800;cursor:pointer}.exercise-workspace details p{font-family:"Newsreader",Georgia,serif;line-height:1.6}
@media(max-width:820px){.class-topbar{grid-template-columns:1fr auto}.class-topbar nav{order:3;grid-column:1/-1;overflow:auto}.class-topbar>a:last-child{display:none}.class-browser{display:block}.class-picker{position:static;border-right:0;border-bottom:1px solid var(--line)}.representation-grid,.check-grid{grid-template-columns:1fr}.class-reader{padding:1.4rem 1rem 3rem}.class-sequence button,.exercise-sequence button{flex:1}}
.class-status{display:flex;align-items:center;gap:.65rem 1rem;flex-wrap:wrap;padding:.9rem 0;border-bottom:1px solid var(--line)}.class-status p{margin:0;color:var(--muted);font-size:.88rem}.class-status p:nth-child(2){font-weight:800;color:var(--blue-deep)}.class-status button,.exercise-share{margin-left:auto;border:1px solid var(--blue);background:#fff;color:var(--blue-deep);border-radius:.4rem;padding:.55rem .75rem;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}.exercise-share{margin:.65rem 0 0}.share-feedback{margin:.35rem 0 0;color:var(--blue-deep);font-weight:800}