:root{font-family:ui-rounded,'Segoe UI',system-ui,sans-serif;color:#203654;background:#f4f7fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;transition:background .15s,transform .15s}button:hover{transform:translateY(-1px)}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3978ce;outline-offset:4px}header{height:100px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dbe3ef;background:#fff}.brand{display:flex;align-items:center;gap:12px;font-size:36px;font-weight:800;text-decoration:none;color:#203654;letter-spacing:-2px}.logo{background:#203654;color:#ffcf59;border-radius:12px;display:grid;place-items:center;width:42px;height:44px}.room{font-size:12px;letter-spacing:2px;font-weight:650;margin-left:18px;border-left:1px solid #dbe3ef;padding-left:28px}.instrument,.eyebrow,.chapter{font-size:12px;letter-spacing:1.6px;font-weight:750}.instrument{background:#edf2fa;padding:10px 15px;border-radius:25px}main{max-width:1340px;margin:0 auto;padding:44px 5%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.intro h1{font-size:42px;letter-spacing:-1.5px;margin:9px 0}.intro p{margin:8px 0;color:#65748a}.intro .eyebrow{color:#356aa7}.chapter{color:#718097}.workspace{display:grid;grid-template-columns:280px 1fr;gap:24px}aside,.practice{background:white;border:1px solid #dfe6f0;border-radius:22px;padding:28px}h2{font-size:23px;letter-spacing:-.5px;margin:10px 0 24px}.eyebrow{color:#68788d;margin:0 0 12px}.exercise{width:100%;text-align:left;border:1px solid #dfe6f0;background:#fff;border-radius:12px;padding:17px;margin-bottom:10px;color:#203654}.exercise strong,.exercise span{display:block}.exercise span{font-size:14px;color:#67788e;margin-top:5px}.exercise.selected{border:2px solid #417ab6;background:#eff6ff;padding:16px}.outline{border:1px solid #cfdae9;background:#fff;color:#203654;border-radius:10px;padding:12px 17px;font-weight:650}.full{width:100%;font-size:14px;margin-top:9px}.tip{margin-top:28px;padding:18px;background:#fff7dd;border-radius:12px}.tip span{font-size:11px;font-weight:800;letter-spacing:1px}.tip p{font-size:14px;line-height:1.6;margin-bottom:0}.practice{padding:30px;min-width:0}.practiceTop{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.badge{font-size:12px;padding:8px 12px;border-radius:20px;background:#f0f3f8;white-space:nowrap}.noteLane{display:flex;gap:10px;overflow-x:auto;padding:8px 3px 20px;min-height:116px}.note{flex:0 0 64px;min-height:83px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border-radius:12px;background:#f1f4f9;border:2px solid transparent;font-size:24px;font-weight:750}.note small{font-size:11px;font-weight:650;color:#60728b}.note.current{background:#ffdc76;border-color:#dcae34;box-shadow:0 4px 0 #efd28a}.note.done{background:#def3ec;color:#166850}.note.done small{color:#166850}.progressLabel{display:flex;justify-content:space-between;color:#68788d;font-size:12px;margin:7px 0 10px}progress{display:block;appearance:none;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden}progress::-webkit-progress-bar{background:#edf1f7}progress::-webkit-progress-value{background:#279979;border-radius:8px}progress::-moz-progress-bar{background:#279979}.listenPanel{display:grid;grid-template-columns:1fr 2fr 1fr;text-align:center;align-items:center;background:#f7f9fc;border:1px solid #e9eef6;border-radius:16px;min-height:218px;margin-top:30px;padding:24px 16px;gap:12px}.bigNote{font-size:65px;font-weight:750;line-height:1.1;letter-spacing:-3px}.bigNote span{font-size:28px;letter-spacing:0}.small{font-size:12px;color:#68788d;line-height:1.6}.heard #heard{font-size:36px;font-weight:700;margin:20px 0 7px}.listening p{font-size:16px;font-weight:650;line-height:1.4}.listening p.small{font-size:12px;font-weight:400}.signal{display:flex;justify-content:center;align-items:center;gap:5px;height:36px}.signal i{width:5px;background:#a7b7cf;height:12px;border-radius:4px}.signal i:nth-child(2),.signal i:nth-child(4){height:23px}.signal i:nth-child(3){height:34px}.signal.active i{background:#308b76}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:25px}.primary{border:0;background:#203e69;color:white;padding:14px 23px;border-radius:11px;font-weight:700}.primary:hover{background:#2d568e}.textButton{border:0;background:none;color:#57708d;font-size:14px;padding:10px}.privacy{font-size:12px;color:#728098;margin:18px 0 0;line-height:1.6}.footnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:22px 15px}.footnotes p{font-size:14px;line-height:1.6}.footnotes span{display:block;color:#708097;font-size:12px;margin-top:5px}dialog{border:0;border-radius:20px;padding:30px;color:#203654;width:min(550px,90vw);box-shadow:0 20px 100px #132b5640}dialog::backdrop{background:#1b315e70}.dialogHeader{display:flex;justify-content:space-between}label{display:block;font-weight:600;margin:20px 0 8px}input,textarea{max-width:100%;width:100%;border:1px solid #cad5e4;border-radius:8px;padding:12px}#editorError{color:#b33d39;font-size:14px}.fileLabel{font-size:14px}@media(max-width:1000px){.workspace{grid-template-columns:230px 1fr}aside,.practice{padding:20px}.room{display:none}.badge{white-space:normal}.listenPanel{grid-template-columns:1fr 1.5fr}.heard{grid-column:1/-1;border-top:1px solid #dfe6f0;padding-top:14px}.heard .eyebrow,.heard #heard,.heard #tuning{display:inline;margin:0 8px}.heard #heard{font-size:24px}}@media(max-width:700px){header{height:76px;padding:0 5%}.instrument{font-size:10px}.brand{font-size:30px}main{padding:28px 5%}.intro h1{font-size:34px}.chapter{display:none}.workspace{grid-template-columns:1fr}aside{padding:20px}#exercises{display:flex;gap:8px;overflow:auto}.exercise{flex:0 0 150px}.tip{display:none}.practiceTop{flex-wrap:wrap}.practiceTop h2{margin-bottom:8px}.footnotes{grid-template-columns:1fr;gap:0}.progressLabel{gap:15px}.listenPanel{margin-top:22px}.bigNote{font-size:54px}.note{flex-basis:58px}.privacy{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}