:root{--ink:#212121;--paper:#fffcf0;--blue:#bde7fb}
#realworldMain *{box-sizing:border-box}
#realworldMain .preview{margin-left:auto;background:#ffe298;padding:7px;font-size:11px}
#realworldMain{max-width:1160px;margin:auto;padding:24px 20px}
#realworldMain .eyebrow{font-size:12px;color:#605858;margin:0 0 7px}
#realworldMain h1{font-size:30px;font-weight:500;margin:8px 0}
#realworldMain h2{font-size:24px;font-weight:500;margin:0}
#realworldMain p{line-height:1.6}
#realworldMain nav{display:flex;gap:10px;margin:23px 0}
#realworldMain nav button{flex:1;text-align:left;display:flex;align-items:center;gap:10px}
#realworldMain nav button span{font-size:28px;width:32px}
#realworldMain button,#realworldMain select{border:1.5px solid #212121;border-radius:0;background:#fffcf0;color:inherit;font:inherit;min-height:44px;padding:10px 12px}
#realworldMain button{cursor:pointer}
#realworldMain button:hover{background:#d1e8ca}
#realworldMain button[aria-pressed=true]{background:#bde7fb;box-shadow:inset 0 -3px #212121}
#realworldMain button:focus-visible,#realworldMain select:focus-visible,#realworldMain input:focus-visible,#realworldMain summary:focus-visible{outline:3px solid #366f9a;outline-offset:3px}
#realworldMain .activity{background:#fffcf0;border:1.5px solid}
#realworldMain .heading{padding:18px 22px;border-bottom:1px solid;display:flex;align-items:center;justify-content:space-between}
#realworldMain .tag{font-size:11px;background:#d1e8ca;padding:7px 10px}
#realworldMain .workspace{display:grid;grid-template-columns:245px 1fr}
#realworldMain aside{border-right:1px solid;padding:20px;background:#f4f0e9}
#realworldMain aside label{display:block;font-size:13px;margin:0 0 10px}
#realworldMain aside input[type=range]{width:100%;margin:10px 0 25px;accent-color:#34688a;min-height:24px}
#realworldMain aside select{width:100%;margin:0 0 25px}
#realworldMain aside>button{width:100%;margin-bottom:10px}
#realworldMain aside output{float:right}
#realworldMain .primary{background:#bde7fb}
#realworldMain .small{font-size:12px;line-height:1.65}
#realworldMain .stage{padding:26px;min-width:0}
#realworldMain .beats{display:grid;grid-template-columns:repeat(4,1fr);font-size:12px;margin:30px 0 10px}
#realworldMain .beats span{padding-left:8px;border-left:1px solid #777}
#realworldMain #rhythm{display:flex;height:128px;gap:3px}
#realworldMain #rhythm button{flex:1;min-width:0;padding:5px;background:#bde7fb;font-size:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}
#realworldMain #rhythm button small{font-size:11px}
#realworldMain #rhythm button.muted{background:#eee;color:#666}
#realworldMain #rhythm button.playing{background:#ffe298;outline:3px solid #212121;outline-offset:-4px}
#realworldMain .result{font-size:18px;margin:20px 0 12px}
#realworldMain .prompt{background:#fbe9f2;border-left:3px solid #212121;padding:14px 16px;margin-top:20px}
#realworldMain .prompt b{font-size:12px;font-weight:500}
#realworldMain .prompt p{margin:7px 0 0;font-size:14px}
#realworldMain #notation{font-size:12px}
#realworldMain .pizzaBoard{width:260px;height:260px;margin:0 auto 15px}
#realworldMain .pizzaBoard svg{width:100%;height:100%}
#realworldMain .pizzaBoard path{cursor:pointer;stroke:#212121;stroke-width:1.5}
#realworldMain .pizzaBoard path:focus{outline:none;stroke-width:5}
#realworldMain #plates{display:flex;gap:8px;flex-wrap:wrap}
#realworldMain #plates button{flex:1;min-width:90px;font-size:12px}
#realworldMain #plates strong{display:block;font-size:20px;font-weight:500;margin:4px}
#realworldMain .quick{display:flex;gap:5px;margin-bottom:20px}
#realworldMain .quick button{flex:1;padding:8px}
#realworldMain .check{display:flex;gap:8px;align-items:center;min-height:44px}
#realworldMain #house{width:100%;max-height:310px;display:block}
#realworldMain #pathDrawing{width:100%;height:130px}
#realworldMain details{border-bottom:1px solid #aaa;margin-top:20px}
#realworldMain summary{cursor:pointer;padding:15px 0;min-height:44px;font-size:13px}
#realworldMain details p,#realworldMain footer{font-size:12px;line-height:1.6}
#realworldMain footer{padding:20px 0;color:#605858}
#realworldMain [hidden]{display:none!important}
@media(max-width:650px){#realworldMain .preview{font-size:9px}
#realworldMain{padding:20px 12px}
#realworldMain h1{font-size:25px}
#realworldMain h2{font-size:21px}
#realworldMain nav{gap:5px}
#realworldMain nav button{font-size:11px;padding:8px 5px;display:block;text-align:center}
#realworldMain nav button span{display:block;margin:auto;font-size:23px}
#realworldMain .workspace{grid-template-columns:1fr}
#realworldMain aside{border-right:0;border-bottom:1px solid;padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
#realworldMain aside select{margin:0}
#realworldMain aside label{align-self:center;margin:0}
#realworldMain aside input[type=range]{margin:0;min-height:40px}
#realworldMain aside .small{grid-column:1/-1;margin:0}
#realworldMain aside>button{margin:0}
#realworldMain .stage{padding:18px}
#realworldMain .heading{padding:16px}
#realworldMain .beats{margin-top:8px}
#realworldMain #rhythm{height:110px}
#realworldMain #rhythm button{font-size:16px}
#realworldMain #rhythm button small{font-size:9px}
#realworldMain .quick{margin:0;grid-column:1/-1}
#realworldMain .check{grid-column:1/-1}
#realworldMain .pizzaBoard{width:230px;height:230px}
#realworldMain .result{font-size:16px}
#realworldMain .prompt p{font-size:13px}
}
#realworldMain .teacher-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
#realworldMain #integrationStatus:empty{display:none}
#realworldMain textarea{width:100%;font:inherit;border:1px solid;border-radius:0;padding:12px;resize:vertical;margin-bottom:12px}
#realworldMain button:disabled{cursor:wait;opacity:.65}
#realworldMain #rhythm button small{overflow-wrap:anywhere}
.realworld-dialog{border:1.4px solid var(--ink);border-radius:0;background:var(--paper);width:min(550px,calc(100% - 28px));max-height:85dvh;overflow:auto;padding:22px}
.realworld-dialog::backdrop{background:#0005}
.realworld-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.realworld-dialog h2{margin:0}
.realworld-dialog .close{display:grid;place-items:center;width:44px;height:44px;padding:0;flex:none;background:var(--blue)}
.realworld-dialog .close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6}
.realworld-dialog input{width:100%;min-height:44px;margin:10px 0;font:inherit}
.realworld-dialog a{display:inline-block;margin:8px 6px 0 0}
.realworld-dialog [data-account] canvas,.realworld-dialog [data-account] img{max-width:100%}
#realworldMain .activity{display:block;padding:0;width:auto;max-width:none}
#realworldMain button,#realworldMain select{font:inherit;font-weight:400;text-transform:none;border:1.5px solid #212121;border-radius:0;box-shadow:none;letter-spacing:normal}
#realworldMain nav button[aria-pressed=false]{background:#fffcf0}
#realworldMain nav button[aria-pressed=true]{background:#bde7fb}
#realworldMain .workspace{display:grid;grid-template-columns:245px minmax(0,1fr)}
#realworldMain .heading{display:flex}
#realworldMain p{font-weight:400}
#realworldMain #rhythm button{font-size:20px;padding:4px}
#realworldMain #rhythm button small{font-size:10px}
#realworldMain aside{min-width:0}
#realworldMain select{min-width:0}
@media(max-width:650px){#realworldMain .workspace{grid-template-columns:minmax(0,1fr)}
#realworldMain aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#realworldMain #rhythm button{font-size:14px}
#realworldMain #rhythm button small{font-size:8px}
}
#realworldMain .activity{border:1.5px solid #212121!important}
#realworldMain nav button[aria-pressed=false]{background:#fffcf0!important}
#realworldMain nav button[aria-pressed=true]{background:#bde7fb!important}
#realworldMain button,#realworldMain select{border-width:1.5px!important;text-decoration:none!important}
#realworldMain #rhythm button.muted{background:#eee!important;color:#666}
#realworldMain #rhythm button.playing{background:#ffe298!important}
@media(max-width:650px){#realworldMain #rhythm:has(button:nth-child(8)) small{display:none}
}
#realworldMain #plates button[data-plate="0"]{background:#bde7fb!important}
#realworldMain #plates button[data-plate="1"]{background:#f4c5da!important}
#realworldMain #plates button[data-plate="2"]{background:#d1e8ca!important}
#realworldMain #plates button[data-plate="3"]{background:#ffe298!important}
#realworldMain #plates button[aria-pressed=true]{outline:3px solid #212121;outline-offset:2px}
#realworldMain nav button{transition:none!important}