html{color-scheme:dark;background:#101012}*{box-sizing:border-box}body{margin:0;padding:24px 16px;color:#f7f4ef}.lesson.music-studio{max-width:1280px;margin:auto;overflow:hidden}.lesson p{line-height:1.65;color:#b4b1ad;font-size:14px}.lesson h1,.lesson h3{font-family:'Lado Serif',Georgia,serif;font-weight:500}.lesson h1{font-size:44px;margin:12px 0}.lesson h3{font-size:25px;margin:0}.lesson [hidden]{display:none!important}.lesson .panel{margin:16px 24px;padding:22px;background:#1a1a1e;border:1px solid #ffffff14;border-radius:16px}.lesson .ms-top{align-items:center}.lesson .ms-brand p{margin:6px 0 0;font-size:12px}.lesson label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#b4b1ad}.lesson label.inline{flex-direction:row;align-items:center}.lesson input:not([type=range]):not([type=checkbox]),.lesson select{padding:10px 12px;border:1px solid #ffffff22;background:#232327;border-radius:9px;color:#f7f4ef;max-width:100%}.lesson #name{width:280px}.lesson .controls,.lesson .actions,.lesson .section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lesson .controls{align-items:end}.lesson .actions{margin-top:20px}.lesson .section-head{justify-content:space-between;margin-bottom:18px}.lesson #bpm,.lesson #offset{width:100px}.lesson .badge{font-size:12px;padding:8px 12px;border-radius:30px;background:#c4a06319;color:#d7b981;border:1px solid #c4a06333}.lesson .videos{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;padding:20px 24px 0}.lesson .video-card{background:#111114;border:1px solid #ffffff18;border-radius:16px;aspect-ratio:16/9;position:relative;overflow:hidden;display:grid;place-items:center}.lesson video{width:100%;height:100%;object-fit:contain;position:absolute;z-index:1;background:transparent}.lesson .local video{transform:scaleX(-1)}.lesson .video-card span{position:absolute;bottom:12px;left:12px;z-index:2;background:#111a;padding:6px 10px;border-radius:20px;font-size:12px}.lesson .video-placeholder{color:#625d55}.lesson .mode-panel{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.lesson .mode-buttons{display:flex;gap:6px}.lesson .mode-buttons button[aria-pressed=true]{background:#c4a063;color:#20180b}.lesson .mode-panel p{flex:1;margin:0;min-width:180px}.lesson .sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}.lesson input[type=range]{width:100%;accent-color:#c4a063}.lesson #beat{font-size:24px;color:#d7b981;min-width:60px;text-align:right}.lesson #file-name{font-size:12px;margin:14px 0}.lesson .meter{height:4px;background:#ffffff12;border-radius:5px;overflow:hidden;margin-top:18px}.lesson .meter i{display:block;height:100%;background:#c4a063;width:0;transition:width .08s}.lesson iframe{border:0;width:100%;height:490px;background:#141416;border-radius:12px}.lesson footer{font-size:11px;color:#7e7971;padding:24px;text-align:center}.lesson details summary{cursor:pointer;color:#d7b981}.lesson #lobby{min-height:320px;padding:40px}.lesson button:disabled{opacity:.4;cursor:not-allowed}.lesson #status[data-kind=error]{color:#f2a09d}.lesson #lobby-status{color:#d7b981;white-space:pre-wrap}.lesson a{color:#d7b981}.lesson .instrument-panel{padding-bottom:10px}@media(max-width:720px){body{padding:0}.lesson .panel{margin:12px;padding:16px}.lesson .videos{padding:12px;gap:8px;grid-template-columns:1fr 1fr}.lesson .video-card{aspect-ratio:4/3}.lesson .ms-top{padding:20px 14px}.lesson .ms-brand h2{font-size:24px}.lesson #connection{font-size:10px}.lesson .sliders{grid-template-columns:1fr;gap:14px}.lesson .controls{gap:10px}.lesson iframe{height:430px}.lesson .ms-transport{padding:12px;gap:8px;flex-wrap:wrap}.lesson #lobby{padding:24px}.lesson h1{font-size:35px}}

.lesson #instrument-frame[data-instrument=piano]{height:250px}.lesson .video-card{align-self:start}

.lesson #instrument-frame[data-instrument]{height:490px;min-height:250px}.lesson textarea{width:100%;resize:vertical;background:#111114;border:1px solid #ffffff26;border-radius:10px;color:#eee;padding:14px;font:13px/1.6 monospace}.lesson .exercise-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.lesson #exercise-name{flex:1;min-width:200px;font-size:12px}.lesson #exercise-import{margin:16px 0;padding:16px;border:1px solid #c4a06344;border-radius:12px}.lesson #teacher-entry{margin-top:22px}.lesson #teacher-entry input{width:100%;margin:10px 0}.lesson #teacher-entry label{margin-top:12px}

.lesson #tuner-panel{margin:18px 0;padding:20px;border:1px solid #c4a06355;border-radius:14px;background:#111114}.lesson .tuner-reading{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;color:#d7b981}.lesson [data-tuner-note]{font:54px Georgia,serif}.lesson .tuner-scale{display:flex;align-items:center;gap:16px;justify-content:center;margin:20px 0}.lesson .tuner-scale>div{width:260px;height:28px;position:relative;border-bottom:2px solid #ffffff33}.lesson .tuner-scale b{position:absolute;left:50%;width:2px;height:28px;background:#d7b981}.lesson [data-tuner-needle]{position:absolute;left:50%;width:4px;height:24px;background:#e3bd70;transition:transform .1s}.lesson #tuner-panel[data-tuned=true] [data-tuner-note],.lesson #tuner-panel[data-tuned=true] [data-tuner-status]{color:#95d7ad}.lesson [data-tuner-status]{text-align:center}