.intro{max-width:62ch;padding-block:1.5rem 1rem}.intro h1{font-size:var(--step-3);font-weight:800}.intro .lead{font-size:var(--step-1);margin-top:.8rem;line-height:1.45}.intro .note{color:var(--ink-soft);font-size:var(--step--1);margin-top:.8rem}.scenarios{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2rem;display:grid}.scenario h2{font-size:var(--step-1);font-weight:700}.scenario>p{color:var(--ink-soft);font-size:var(--step--1);min-height:3em;margin-top:.3rem}.pieces{gap:.75rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.pieces .empty{color:var(--ink-soft);font-style:italic}.piece{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);gap:.35rem;padding:1rem 1.1rem;text-decoration:none;display:grid}.piece:hover{border-color:var(--ink)}.piece-title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1)}.piece-meta{color:var(--ink-soft);font-size:var(--step--1)}.tag{border:1px solid;border-radius:4px;padding:0 .3em;font-size:.85em}.piece-voices{flex-wrap:wrap;gap:.35rem;margin-top:.2rem;display:flex}.chip{border:1px solid var(--line);border-radius:999px;align-items:center;gap:.35rem;padding:.1rem .5rem .1rem .45rem;font-size:.8rem;display:inline-flex}.chip:before{content:"";background:var(--c);border-radius:50%;width:.55rem;height:.55rem}.back{color:var(--ink-soft);font-size:var(--step--1);margin-top:.5rem;display:inline-block}.back:before{content:"‹ "}.piece-head{max-width:70ch;margin-top:.75rem}.piece-head h1{font-size:var(--step-3);font-weight:800}.piece-head .composer{color:var(--ink-soft);margin-top:.2rem}.piece-head .desc{margin-top:.6rem}.loading{max-width:24rem;color:var(--ink-soft);gap:.5rem;margin-top:2rem;display:grid}.loading progress{width:100%;accent-color:var(--voice-4)}.error{color:var(--voice-1);margin-top:1rem;font-weight:700}.practice{grid-template-columns:minmax(0,1fr) 21rem;align-items:start;gap:1.5rem;margin-top:1.5rem;margin-bottom:7rem;display:grid}.practice.is-loading{visibility:hidden;height:0;margin:0;overflow:hidden}.score-panel{color:#000;border:1px solid var(--line);border-radius:var(--radius-l);background:#fff;overflow:hidden}.score-scroll{max-height:min(70vh,46rem);padding:.5rem .25rem;overflow-y:auto}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:1.1rem 1.1rem 1.25rem}.panel+.panel{margin-top:1rem}.panel h2{font-size:var(--step-1);margin-bottom:.75rem;font-weight:700}.field{font-size:var(--step--1);color:var(--ink-soft);gap:.3rem;display:grid}.field select,.field input[type=range]{color:var(--ink)}select{border-radius:var(--radius-s);border:1px solid var(--line);background:var(--paper);padding:.45rem .6rem}button{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-s);padding:.4rem .7rem}button:hover:not(:disabled){border-color:var(--ink)}button:disabled{opacity:.45;cursor:default}button.quiet{background:0 0}.presets{flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1rem;display:flex}.presets button{font-size:var(--step--1)}input[type=range]{accent-color:var(--c,var(--ink));width:100%;min-width:0}.tracks{gap:.15rem;display:grid}.track{font-size:var(--step--1);grid-template-columns:6.5rem minmax(0,1fr) auto auto;align-items:center;gap:.5rem;padding:.35rem 0;display:grid}.track-name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.45rem;font-weight:700;display:flex;overflow:hidden}.track-name:before{content:"";background:var(--c);border-radius:50%;flex:none;width:.7rem;height:.7rem}.track.is-mine .track-name{text-decoration:underline;-webkit-text-decoration-color:var(--c);text-decoration-color:var(--c);text-underline-offset:3px;text-decoration-thickness:2px}.track.is-recording .track-name:before{border-radius:2px}.track.master{border-top:1px solid var(--line);grid-template-columns:6.5rem minmax(0,1fr);margin-top:.5rem;padding-top:.75rem}.track.master .track-name:before{display:none}.toggle{padding:.25rem .5rem;font-size:.8rem}.toggle[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#fff}.rec .hint{font-size:var(--step--1);color:var(--ink-soft)}.rec-row{align-items:center;gap:.75rem;margin-top:.9rem;display:flex}.rec-button{font-family:var(--font-display);white-space:nowrap;border-radius:999px;align-items:center;gap:.5rem;padding:.6rem 1rem;font-weight:700;display:inline-flex}.rec-button:before{content:"";background:var(--voice-1);border-radius:50%;width:.7rem;height:.7rem}.rec-button.is-recording{background:var(--voice-1);border-color:var(--voice-1);color:#fff}.rec-button.is-recording:before{background:#fff;border-radius:2px}.meter{background:var(--line);border-radius:999px;flex:1;height:.5rem;overflow:hidden}.meter-fill{background:var(--voice-3);transform-origin:0;height:100%;transition:transform 80ms linear;transform:scaleX(0)}.meter-fill.is-hot{background:var(--voice-1)}.rec-status{min-height:1.5em;font-size:var(--step--1);margin-top:.6rem}.rec-done{font-size:var(--step--1);gap:.75rem;margin-top:.5rem;display:grid}.rec-done output{color:var(--ink);margin-left:.3rem;font-weight:700}.rec-done .small{color:var(--ink-soft)}.rec-actions{flex-wrap:wrap;gap:.5rem;display:flex}.transport{z-index:10;padding:.75rem max(var(--gutter), calc((100% - 1120px) / 2)) calc(.75rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem 1.5rem;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -6px 24px #17234714}.transport[hidden]{display:none}.play{background:var(--ink);width:3.25rem;height:3.25rem;color:var(--paper);border:none;border-radius:50%;place-items:center;padding:0;display:grid}.play svg{fill:currentColor;width:1.4rem;height:1.4rem}.play .icon-pause,.play.is-playing .icon-play{display:none}.play.is-playing .icon-pause{display:block}.timeline{gap:.15rem;display:grid}.times{font-size:var(--step--1);color:var(--ink-soft);font-variant-numeric:tabular-nums;justify-content:space-between;display:flex}.timeline input{--c:var(--ink)}.loop{font-size:var(--step--1);white-space:nowrap;border:none;align-items:center;gap:.6rem;margin:0;padding:0;display:flex}.loop input[type=number]{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--paper);width:3.6rem;padding:.3rem .4rem}.loop-toggle{align-items:center;gap:.35rem;font-weight:700;display:flex}.loop-toggle input{width:1.1rem;height:1.1rem;accent-color:var(--voice-4)}@media (width<=960px){.scenarios{grid-template-columns:minmax(0,1fr)}.scenario>p{min-height:0}.practice{grid-template-columns:minmax(0,1fr);margin-bottom:10rem}.score-scroll{max-height:42vh}}@media (width<=640px){.transport{grid-template-columns:auto minmax(0,1fr);gap:.5rem .9rem}.loop{grid-column:1/-1;justify-content:space-between}.play{width:2.9rem;height:2.9rem}.track{grid-template-columns:5.2rem minmax(0,1fr) auto auto}.site-footer{margin-bottom:8rem}}