:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;background:#f5f7f6;color:#203136;--panel: #fff;--border: #c8d5d6;--accent: #145b63;--cool: #e4eff0}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh}a{color:var(--accent)}a:hover{color:#0a4048}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}:focus-visible{outline:3px solid #ad5d16;outline-offset:3px}.site-header{display:flex;justify-content:space-between;gap:1rem;padding:1rem max(1rem,calc((100vw - 70rem)/2));background:#fff;border-bottom:1px solid var(--border)}.site-header a{color:inherit;font-weight:700;text-decoration:none}.site-header nav a{color:var(--accent);font-weight:600}.site-header nav{display:flex;align-items:center;gap:1rem}.site-header nav form{margin:0}.site-header .acting-role{padding:.1rem .5rem;border-radius:999px;background:var(--cool);color:#19454d;font-size:.85rem;font-weight:700}.site-header nav button{padding:0;background:none;color:var(--accent);font-weight:600}.site-header nav button:hover:not(:disabled){background:none;color:#0a4048;text-decoration:underline}main{max-width:70rem;margin:2.2rem auto 5rem;padding:0 1rem}h1,h2,h3{line-height:1.15;letter-spacing:-.02em}h1{font-size:clamp(2rem,5vw,3.3rem);margin:.3rem 0 1rem}h2{font-size:clamp(1.35rem,3vw,1.8rem)}p{max-width:70ch}.panel{padding:clamp(1.1rem,3vw,2rem);background:var(--panel);border:1px solid var(--border);border-radius:.75rem;margin-bottom:1rem}.panel.is-disabled{background:#eef2f2;color:#5b7075;border-style:dashed;cursor:not-allowed}.panel.is-disabled h2{color:#5b7075}.lead{font-size:1.15rem}.circle-order{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}.circle-order li{min-width:2.6rem;padding:.3rem .5rem;text-align:center;border:1px solid var(--border);border-radius:.4rem;font-weight:600}.circle-order li[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}.definition{font-size:1.1rem;padding:.6rem .9rem;border-left:4px solid var(--accent);background:var(--cool);border-radius:0 .4rem .4rem 0}.step-table{border-collapse:collapse;margin:1rem 0;text-align:center}.step-table caption{text-align:left;font-weight:700;margin-bottom:.4rem}.step-table th,.step-table td{border:1px solid var(--border);padding:.45rem .9rem}.step-table th{text-align:left;background:var(--cool);font-weight:700}.step-table td{min-width:3.2rem;font-weight:600}.step-table td.endpoint{background:#f3d58c;color:#403012}.notation-caption{font-size:.92rem;color:#42636a}.coming{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#42636a;vertical-align:middle;margin-left:.4rem}.hint-box{border:2px solid #203136;border-radius:.9rem;padding:.3rem 1.1rem .5rem;margin-top:1.2rem}.hint-box h3{margin:.6rem 0 .2rem;font-size:1rem;text-transform:uppercase;letter-spacing:.08em}.circle-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}.harmonic-circle{margin:0;text-align:center;color:#203136}.harmonic-circle svg{width:100%;max-width:20rem;height:auto}.harmonic-circle figcaption{font-weight:700;margin-top:.3rem}.circle-note{font-size:19px;font-weight:700;text-anchor:middle;dominant-baseline:central;fill:currentColor}.circle-note.start{fill:var(--accent);font-size:22px}.circle-title{font-size:17px;font-weight:700;text-anchor:middle;fill:currentColor}.circle-line{font-size:1.05rem;font-weight:600}.circle-line-label{display:inline-block;min-width:11rem;font-weight:700;color:#42636a}.mnemonic{list-style:none;padding:0;display:grid;gap:.45rem}.mnemonic li{display:flex;gap:1rem;align-items:baseline}.mnemonic-notes{min-width:9rem;font-weight:800;font-size:1.1rem}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:#000;padding:.4rem}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#42636a;font-size:.82rem;font-weight:750}.button,button{display:inline-block;padding:.62rem .95rem;border-radius:.4rem;background:var(--accent);color:#fff;border:0;text-decoration:none;font-weight:700}.button:hover,button:hover:not(:disabled){background:#0a4048;color:#fff}button.secondary,.controls button.secondary{background:var(--cool);color:#19454d;border:1px solid #a8c4c8}button.secondary:hover:not(:disabled),.controls button.secondary:hover:not(:disabled){background:#d2e5e8;color:#123f47}input:not([type=checkbox]):not([type=file]):not([type=range]),textarea,select{max-width:100%;padding:.45rem .55rem;border:1px solid #819ca0;border-radius:.3rem;background:#fff;color:#203136}label{display:block;margin:.7rem 0}label:has([type=checkbox]){display:flex;align-items:start;gap:.5rem}label [type=checkbox]{margin-top:.3rem}fieldset{border:1px solid var(--border);border-radius:.5rem;margin:1rem 0}fieldset legend{font-weight:700}.form-error{color:#a22619;font-weight:700}.track-grid,.fixture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem}.circle-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem}.circle-list li{padding:.65rem;border:1px solid var(--border);border-radius:.4rem;display:grid;gap:.2rem}.circle-list .not-introduced{background:#f0f4f3;color:#3d555a}.circle-wheel{position:relative;width:min(100%,21rem);aspect-ratio:1;margin:1rem auto 2rem;border:2px solid #a8c3c6;border-radius:50%;background:radial-gradient(circle,#eef4f3 0 16%,transparent 17%)}.circle-root{position:absolute;transform:translate(-50%,-50%);min-width:2.65rem;text-align:center;padding:.28rem .35rem;border:1px solid #b6c9ca;border-radius:50%;background:#f0f4f3;color:#3d555a;font-size:.85rem;font-weight:700}.circle-root.introduced{border-color:#c89849;background:#fff0d2;color:#654511}.circle-root.mastered{border-color:#6eaaa9;background:#d9eeee;color:#14545a}.notation{min-height:155px;background:#fff;border:1px solid var(--border);border-radius:.4rem;color:#111;overflow:hidden}.music-fixture:has(.notation svg:nth-child(2)) .notation{min-height:290px}.piano-scroll{overflow-x:auto;padding:1rem 0}.piano{--key-width: 44px;--black-width: 27px;position:relative;height:178px;width:calc(var(--white-count) * var(--key-width));margin:0 auto}.piano-key{touch-action:manipulation;position:absolute;top:0;border:1px solid #26383b;padding:0 2px 9px;display:flex;align-items:end;justify-content:center;font-size:.72rem;text-align:center;line-height:1.15}.piano-key.white{z-index:1;width:var(--key-width);height:176px;background:#fff;color:#203136;border-radius:0 0 5px 5px}.piano-key.black{z-index:2;width:var(--black-width);height:105px;background:#1a252b;color:#fff;border-radius:0 0 4px 4px}.piano-key.highlighted{background:#f3d58c;color:#403012}.piano-key.selected{background:#9bd6d8;color:#133d42}.piano-key.wrong{background:#f3ac9d;color:#582019}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}.recall-status{min-height:2.5rem;font-weight:600}video{max-width:100%;max-height:34rem;background:#000}.upload-progress{width:100%}@media(pointer:coarse){.piano{--key-width: 58px;--black-width: 44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}