.echo-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.echo-heading h2{margin-bottom:8px}.echo-heading p{margin:0;color:var(--muted)}.echo-edition{font:10px ui-monospace,monospace;letter-spacing:.06em;color:var(--muted);padding-bottom:4px}.echo-instrument{--echo:#b0a0e8;position:relative}.echo-readout{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--line);font:10px ui-monospace,monospace;letter-spacing:.07em;color:var(--muted)}.echo-readout [data-echo-state]{color:var(--echo)}.echo-stage{position:relative;height:360px;background:#101216;overflow:hidden;touch-action:none;border:1px solid #24262f;border-radius:3px;isolation:isolate}.echo-stage canvas,.echo-notes{position:absolute;inset:0;width:100%;height:100%}.echo-notes{pointer-events:none}.echo-note{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:0;background:transparent;cursor:grab;pointer-events:auto;touch-action:none;color:var(--echo);-webkit-tap-highlight-color:transparent}.echo-note::after{content:"";position:absolute;inset:12px;border-radius:5px;background:var(--echo);box-shadow:0 0 22px #b0a0e817;transform:rotate(-15deg);animation:echo-turn 15s linear infinite;transition:box-shadow .2s,background .2s}.echo-note:hover::after,.echo-note:focus-visible::after{background:#d1c7f2;box-shadow:0 0 28px #b0a0e860}.echo-note.is-hit::after{background:#f0ebff;box-shadow:0 0 12px #b0a0e8aa,0 0 42px #b0a0e860}.echo-note.is-dragging{cursor:grabbing;z-index:2}.echo-note.is-dragging::before{content:"";position:absolute;inset:3px;border:1px solid #b0a0e880;border-radius:10px}.echo-note:focus-visible{outline:1px solid var(--echo);outline-offset:-2px;border-radius:9px}.echo-axis{position:absolute;left:10px;font:9px ui-monospace,monospace;color:#777582;pointer-events:none}.echo-high{top:9px}.echo-low{bottom:9px}.echo-empty{position:absolute;inset:0;display:grid;place-items:center;padding:28px;text-align:center;color:var(--muted);font-size:13px;pointer-events:none}.echo-empty[hidden]{display:none}.echo-timeline{display:flex;justify-content:space-between;padding:10px 3px;color:#85828e;font:9px ui-monospace,monospace}.echo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px}.echo-controls button{font:12px var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:4px;background:transparent;min-height:44px;padding:10px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.echo-controls button:hover{color:var(--ink);border-color:var(--echo);background:#b0a0e80b}.echo-controls .echo-play{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--echo);border-color:var(--echo);color:#111015;min-width:136px}.echo-controls .echo-play:hover{background:#c9bbf3;color:#111015}.echo-tempo{display:grid;grid-template-columns:auto 90px auto;align-items:center;gap:10px;font:11px ui-monospace,monospace;color:var(--muted)}.echo-tempo input{width:90px;accent-color:var(--echo);cursor:pointer;min-height:44px}.echo-tempo output{min-width:50px}.echo-tools{display:flex;flex-wrap:wrap;gap:8px;width:100%}.echo-instrument .echo-help{font-size:12px;line-height:1.8;color:var(--muted);margin:20px 0 6px;max-width:none}.echo-access{font-size:11px;color:var(--muted)}.echo-access summary{cursor:pointer;min-height:36px;display:list-item;list-style-position:inside;padding:6px 0}.echo-access p{max-width:65ch;line-height:1.8}.echo-announcement{font:11px ui-monospace,monospace;color:var(--echo);min-height:18px;margin:12px 0 0}.echo-instrument.is-playing .echo-readout [data-echo-state]::before{content:"";display:inline-block;width:5px;height:5px;background:var(--echo);border-radius:1px;margin-right:8px}.echo-share-link{width:100%;padding:10px;background:#111319;color:var(--ink);border:1px solid var(--line);font-size:12px;margin-top:10px}@keyframes echo-turn{to{transform:rotate(345deg)}}@media(max-width:650px){.echo-heading{display:block}.echo-edition{display:block;margin-top:15px}.echo-stage{height:320px}.echo-controls{gap:10px 18px}.echo-tempo{grid-template-columns:auto 70px auto;gap:7px}.echo-tempo input{width:70px}.echo-controls .echo-play{min-width:118px;gap:18px}.echo-tools{gap:6px}.echo-tools button{padding-inline:10px}.echo-note::after{inset:13px;border-radius:4px}}@media(prefers-reduced-motion:reduce){.echo-note::after{animation:none}.echo-controls button,.echo-note::after{transition:none}}
.echo-invite{display:inline-flex;align-items:center;gap:20px;min-height:44px;margin-top:12px;color:var(--accent);font-size:12px}.echo-invite span{transition:transform .2s}.echo-invite:hover span{transform:translate(2px,-2px)}
.echo-heading h1{color:var(--ink);font:550 clamp(34px,4vw,56px)/1.1 var(--sans);letter-spacing:-.055em;margin:0 0 10px}.echo-page .echo-section{padding-top:48px}.echo-heading a:hover{color:var(--accent)}