.rail{z-index:var(--z-chrome);left:clamp(var(--space-4), 2.6vw, var(--space-6));position:fixed;top:50%;transform:translateY(-50%)}.rail ol{gap:var(--space-1);margin:0;padding:0;list-style:none;display:grid}.rail a{padding:var(--space-1) 0;font-size:var(--text-xs);letter-spacing:.01em;color:var(--fg-2);transition:color var(--dur-short) var(--ease-out);white-space:nowrap;grid-template-columns:1.1rem auto;align-items:center;font-weight:560;text-decoration:none;display:grid}.rail a:before{content:"";width:.55rem;height:1px;transition:width var(--dur-med) var(--ease-out);background:currentColor}.rail a:hover{color:var(--fg)}.rail a[aria-current=step]{color:var(--fg);font-weight:720}.rail a[aria-current=step]:before{width:.95rem}.lesson{position:relative}.lesson .anchor{left:0;top:calc(var(--at) * 100vh);width:1px;height:1px;position:absolute}.lesson-stage{z-index:var(--z-copy);pointer-events:none}.beat{left:var(--col);gap:var(--space-4);opacity:0;visibility:hidden;width:min(27rem,34vw);transition:opacity .42s var(--ease-out), visibility 0s linear .42s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.beat.is-on{opacity:1;visibility:visible;transition:opacity .42s var(--ease-out), visibility 0s}.beat.is-on :is(button,a,input,label){pointer-events:auto}.beat p{font-size:var(--text-md);max-width:45ch;line-height:1.5}.beat .aside{font-size:var(--text-sm);color:var(--fg-2);border-top:var(--rule-w) solid var(--hair);padding-top:var(--space-3)}.beat .question{font-family:var(--font-display);font-weight:760;font-stretch:112%;font-size:var(--text-lg);letter-spacing:var(--track-tight)}.beat__actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.beat--hero{gap:var(--space-5);width:min(30rem,36vw);top:46%}.beat--hero h1{max-width:11ch}.beat--hero .beat__lede{font-size:var(--text-md);max-width:45ch;color:var(--fg-2)}.pick{align-items:center;gap:var(--space-3);border:0;margin:0;padding:0;display:flex}.pick legend{float:left;font-size:var(--text-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-2);margin-right:var(--space-2);font-weight:650}.pick label{cursor:pointer;position:relative}.pick input{opacity:0;cursor:pointer;position:absolute;inset:0}.pick span{padding:var(--space-2) var(--space-4);border:var(--rule-w) solid var(--hair);border-radius:var(--radius-s);font-weight:620;font-size:var(--text-sm);background:var(--chip);transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);display:inline-block}.pick input:checked+span{background:var(--fg);color:var(--chip);border-color:var(--fg)}.pick input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}.pick label:hover span{border-color:var(--fg)}.beat--turn{gap:var(--space-5)}.turn-line{font-family:var(--font-display);letter-spacing:var(--track-tight);opacity:0;transition:opacity .52s var(--ease-out), transform .52s var(--ease-out);font-weight:720;font-stretch:112%;line-height:1.15;position:absolute;top:0;left:0;transform:translateY(10px);font-size:var(--text-lg)!important;max-width:22ch!important}.turn-line.is-on{opacity:1;transform:none}.turn-after{gap:var(--space-3);opacity:0;transition:opacity .52s var(--ease-out);display:grid}.turn-after.is-on{opacity:1}.turn-after__h{font-family:var(--font-display);letter-spacing:var(--track-tight);font-weight:760;font-stretch:118%;line-height:1.06;font-size:var(--text-xl)!important;max-width:16ch!important}.beat--turn .turn-after .beat__actions button{pointer-events:auto}.tools{z-index:var(--z-copy);align-items:center;min-height:120vh;display:flex;position:relative}.tools__inner{margin-left:var(--col);gap:var(--space-5);width:min(40rem,46vw);padding:var(--space-9) 0;display:grid}.tools__lede{font-size:var(--text-md);color:var(--fg);max-width:45ch}.tools__list{margin:var(--space-4) 0 0;border-top:var(--rule-w) solid var(--hair);padding:0;list-style:none}.tool{column-gap:var(--space-5);row-gap:var(--space-1);padding:var(--space-5) 0;border-bottom:var(--rule-w) solid var(--hair);grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) auto;text-decoration:none;display:grid}.tool__name{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:var(--text-xl);letter-spacing:var(--track-tight);line-height:1}.tool__line{color:var(--fg-2);font-size:var(--text-base);grid-column:1}.tool__go{font-size:var(--text-lg);transition:transform var(--dur-med) var(--ease-out);grid-area:1/2/span 2;align-self:center}.tool:hover .tool__go{transform:translate(6px)}.tool:hover .tool__name{text-underline-offset:.1em;text-decoration:underline;text-decoration-thickness:2px}.play{z-index:var(--z-copy);min-height:100vh;align-items:flex-end;min-height:100lvh;display:flex;position:relative}.play__inner{gap:var(--space-4) var(--space-6);width:100%;padding:0 clamp(var(--space-4), 4vw, var(--space-8)) var(--space-8);padding-left:var(--col);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy readout""controls controls""input input";display:grid}.play__copy{gap:var(--space-3);grid-area:copy;align-content:end;display:grid}.play__copy p{font-size:var(--text-md);max-width:45ch}.play__readout{text-align:right;grid-area:readout;place-self:end}.play__chord{font-family:var(--font-display);font-weight:800;font-stretch:122%;font-size:var(--text-xl);letter-spacing:var(--track-tight);line-height:1.05}.play__notes{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--fg-2);margin-top:var(--space-2);min-height:1.4em}.play__controls{gap:var(--space-2);flex-wrap:wrap;grid-area:controls;align-items:center;display:flex}.play__midi{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-mute);margin-left:var(--space-2)}.play__input{grid-area:input}@media (min-width:861px){.play__inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy""controls""input"}.play__readout{text-align:center;opacity:0;visibility:hidden;pointer-events:none;width:12em;transition:opacity .42s var(--ease-out), visibility 0s linear .42s;place-self:auto;position:fixed;top:0;left:0;transform:translate(-999px,-999px)}.at-close .play__readout{opacity:1;visibility:visible;transition:opacity .7s var(--ease-out), visibility 0s}.play__readout.is-empty .play__chord{font-size:var(--text-lg);color:var(--fg-2);font-weight:650}.play__readout .play__notes{max-width:16em;margin-inline:auto}.play__readout:before{content:"";z-index:-1;background:radial-gradient(closest-side, var(--night-pool) 45%, transparent);position:absolute;inset:-1.1em -1.4em}}.phone-nav{display:none}@media (max-width:860px){.rail{display:none}.chrome{gap:var(--space-2);padding-left:var(--space-4);padding-right:var(--space-4)}.chrome__state{margin-left:auto;display:inline-flex}.chrome__tools{display:none}.wordmark{font-size:1.15rem}.sound span{display:none}.sound{padding:var(--space-2)}.order button{padding:var(--space-1) var(--space-2)}.beat{left:var(--space-4);right:var(--space-4);width:auto;top:auto;bottom:calc(5.4rem + env(safe-area-inset-bottom));gap:var(--space-3);transform:none}.beat p{font-size:var(--text-base);max-width:45ch}.beat h2{font-size:1.55rem}.beat--hero{top:calc(4.6rem + env(safe-area-inset-top));gap:var(--space-3);width:auto;bottom:auto}.beat--hero h1{max-width:9ch;font-size:clamp(2.3rem,10.5vw,3rem)}.beat--hero .beat__lede{font-size:var(--text-base)}.beat--hero .readout,.beat--hero .pick{left:var(--space-4);right:var(--space-4);position:fixed}.beat--hero .readout{bottom:calc(8.6rem + env(safe-area-inset-bottom))}.beat--hero .pick{bottom:calc(5.4rem + env(safe-area-inset-bottom))}.turn-line{font-size:1.3rem!important}.turn-after__h{font-size:1.55rem!important}.status{left:var(--space-4);right:auto;bottom:calc(var(--space-4) + env(safe-area-inset-bottom));border-top:0;max-width:calc(100% - 8rem);padding-left:0;overflow:hidden}.status__c{display:none}.phone-nav{gap:var(--space-2);z-index:var(--z-chrome);right:var(--space-4);bottom:calc(var(--space-3) + env(safe-area-inset-bottom));display:flex;position:fixed}.tools__inner{width:auto;padding:55vh var(--space-4) var(--space-8);background:linear-gradient(to bottom, transparent calc(55vh - 9rem), var(--veil) calc(55vh - 1.5rem));margin:0}.in-flow :is(.status,.phone-nav){opacity:0;visibility:hidden}.tool__name{font-size:1.6rem}.play__inner{padding:0 var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-areas:"copy""readout""controls""input"}.play__readout{text-align:left;justify-self:start}.play__copy p{font-size:var(--text-sm)}.play__chord{font-size:1.5rem}.play__inner{gap:var(--space-3)}}@media (max-width:860px) and (max-height:720px){.status{display:none}.beat{bottom:calc(4rem + env(safe-area-inset-bottom));gap:var(--space-2)}.beat h2,.turn-after__h{font-size:1.32rem!important}.turn-line{font-size:1.18rem!important}.beat p{font-size:.9375rem;line-height:1.42}.beat .aside{font-size:var(--text-xs);padding-top:var(--space-2)}.beat .question{font-size:1.15rem}.play__copy .more{display:none}.play__inner{gap:var(--space-2);padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}}