:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e9edf2;background:#0d1015;-webkit-text-size-adjust:100%;--code-font: 1.05rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;--code-pad: .9rem}*{box-sizing:border-box}#visuals{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.topbar,.workspace{position:relative;z-index:1}.topbar{background:#0d1015cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar{background:#0d1015b8}[hidden]{display:none!important}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 65% 0%,#202a35 0,#0d1015 45rem)}button,input,select,textarea{font:inherit}button{color:inherit;background:#1b222b;border:1px solid #34404d;border-radius:6px;cursor:pointer}button:hover:not(:disabled){background:#26313c}button:disabled{opacity:.45;cursor:default}.topbar{min-height:4.5rem;padding:0 2rem;border-bottom:1px solid #28313a;display:flex;align-items:center;gap:2rem}.brand{display:flex;gap:.6rem;align-items:center;font-size:.8rem;letter-spacing:.18em;font-weight:700}.logo{color:#0d1015;background:#8fe0b0;padding:.25rem .4rem;letter-spacing:.05em;border-radius:3px}.transport{display:flex;align-items:center;gap:.5rem;flex:1}.action{min-width:4.75rem;padding:.45rem .8rem;font-size:.75rem}.action.connected{color:#8fe0b0;border-color:#4f8b68;background:#17271f}.tempo{margin-left:.75rem;color:#8d98a5;font-size:.72rem;font-variant-numeric:tabular-nums}.toggle{display:inline-flex;align-items:center;gap:.35rem;margin-left:.5rem;padding:.35rem .6rem;color:#aab3bd;font-size:.72rem;background:#171d24;border:1px solid #34404d;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle:hover{background:#1f2831}.toggle input{margin:0;accent-color:#8fe0b0;cursor:pointer}.toggle:has(input:checked){color:#8fe0b0;border-color:#4f8b68;background:#17271f}.status{color:#8d98a5;font-size:.75rem;max-width:22rem;text-align:right}.transport button,.toggle{white-space:nowrap}.workspace{display:grid;grid-template-columns:17rem minmax(0,56rem);gap:1px;max-width:80rem;min-height:calc(100vh - 7rem);margin:0 auto}.sidebar{padding:1.5rem 1.25rem;border-right:1px solid #28313a;overflow:hidden}.editor-panel{padding:1.5rem 2.5rem 3rem;min-width:0}.section-label{color:#788592;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin:1.4rem 0 .6rem;display:flex;gap:.6rem;align-items:baseline}.hint{color:#5e6a76;font-size:.68rem;letter-spacing:0;text-transform:none}.browser{max-height:min(34rem,55vh);overflow-y:auto;padding-right:.3rem}.sound-search{width:100%;margin-bottom:.65rem;padding:.45rem .55rem;color:#d5dce3;background:#141b23;border:1px solid #34404d;border-radius:5px;font-size:.75rem;outline:none}.sound-search::placeholder{color:#64717d}.sound-search:focus{border-color:#6bb98a;box-shadow:0 0 0 2px #6bb98a22}.sound-section{padding:.15rem 0 .75rem;border-top:1px solid #28313a}.sound-section:first-of-type{border-top:0}.browser-group{display:flex;justify-content:space-between;color:#8d98a5;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin:.55rem 0 .4rem}.browser-group small{color:#4d5c68;letter-spacing:0}.chips{display:flex;flex-wrap:wrap;gap:.3rem}.chip{display:inline-flex;align-items:baseline;gap:.25rem;padding:.25rem .48rem;font-size:.78rem;font-family:ui-monospace,monospace;border-radius:4px}.chip:hover:not(:disabled){border-color:#637487;color:#f3f6f8}.chip small{color:#6f7d8a;font-size:.62rem}.chip:active{background:#315b46}.chip.machine{font-size:.7rem;color:#cfd8e0;background:#1d252f}.chip.machine.selected{color:#8fe0b0;border-color:#4f8b68;background:#17271f}.machine-kit{margin-top:.55rem;padding:.55rem;background:#141b23;border:1px solid #34404d;border-radius:5px}.kit-heading{display:flex;justify-content:space-between;margin-bottom:.45rem;color:#8fe0b0;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}.kit-heading small{color:#64717d;font-size:.61rem;letter-spacing:0;text-transform:none}.stats{display:grid;grid-template-columns:1fr auto;gap:.45rem;font-size:.75rem}.stats dt{color:#788592}.stats dd{margin:0;color:#d5dce3;font-variant-numeric:tabular-nums}.stats dd.bad{color:#ff8f8f}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#d5dce3;font-size:.75rem;letter-spacing:.12em}.tools{display:flex;align-items:center;gap:.35rem}.tool{padding:.25rem .5rem;font-size:.7rem;letter-spacing:0}.dirty{margin-right:.4rem;color:#f2c078;font-size:.68rem;letter-spacing:0}.applied{margin-right:.4rem;color:#83d8a5;font-size:.68rem;letter-spacing:0}.code-editor{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr);margin:.8rem 0 .5rem;background:#11171ed4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #34404d;border-radius:7px}.code-editor:focus-within{border-color:#6bb98a;box-shadow:0 0 0 2px #6bb98a22}.code-surface.applied:after{content:"";position:absolute;inset:0;pointer-events:none;animation:applied 1s ease-out}@keyframes applied{0%{background:#d8ff9350}to{background:#d8ff9300}}.line-numbers{padding:var(--code-pad) .55rem;color:#3f4c58;text-align:right;white-space:pre;-webkit-user-select:none;user-select:none;font:var(--code-font);overflow:hidden}.code-surface{position:relative;min-height:11rem}.code-overlay,.code-surface textarea{margin:0;padding:var(--code-pad) var(--code-pad) var(--code-pad) 0;font:var(--code-font);white-space:pre;tab-size:2;border:0}.code-overlay{position:absolute;inset:0;color:#7d8b98;pointer-events:none;overflow:hidden;-webkit-user-select:none;user-select:none}.code-surface textarea{position:relative;display:block;width:100%;height:auto;min-height:11rem;resize:none;overflow-x:auto;overflow-y:hidden;background:transparent;color:transparent;caret-color:#8fe0b0;outline:none}.code-surface textarea::selection{background:#68a7d659}.code-surface textarea::-moz-selection{background:#68a7d659}.code-overlay .comment{color:#4f5b67;font-style:italic}.code-overlay .string{color:#5d7f6c}.code-overlay .fn{color:#8fd1e0}.code-overlay .ident{color:#cfd8e0}.code-overlay .number{color:#f2c078}.code-overlay .punct{color:#7d8b98}.code-overlay .layer{color:#f29b78;font-weight:700}.code-overlay .mini-sound{color:#d9f5e4}.code-overlay .mini-number{color:#f2c078}.code-overlay .mini-rest{color:#55636f}.code-overlay .mini-bracket{color:#8fd1e0}.code-overlay .mini-op{color:#f29b78}.code-overlay .mini-unknown{color:#ff9c9c;text-decoration:underline wavy #8f4444;text-underline-offset:3px}.code-overlay .playing{color:#0d1015;background:#8fe0b0;border-radius:3px;box-shadow:0 0 12px #8fe0b066}.code-overlay .errored{background:#6b2b2b;border-radius:2px}.caret-marker{display:inline-block;width:0}.completions{position:absolute;z-index:5;min-width:12rem;max-height:14rem;overflow-y:auto;padding:.2rem;background:#161d25;border:1px solid #3c4a58;border-radius:6px;box-shadow:0 10px 24px #05080c99;font-size:.8rem}.completion{display:flex;justify-content:space-between;gap:1rem;padding:.22rem .45rem;border-radius:4px;font-family:ui-monospace,monospace;cursor:pointer}.completion small{color:#6f7d8a;font-size:.68rem}.completion.selected{background:#2a4a38;color:#d9f5e4}.problem{margin:.4rem 0 0;padding:.5rem .7rem;color:#ffc0c0;background:#2a1a1c;border:1px solid #6b2b2b;border-radius:5px;font-size:.76rem;font-family:ui-monospace,monospace}.problem.stale{color:#f2c078;background:#241f16;border-color:#6b532b}.punchcard{display:block;width:100%}.voice-list{display:flex;flex-wrap:wrap;gap:.3rem;min-height:1.6rem;align-items:center}.voice{padding:.15rem .4rem;font-size:.72rem;font-family:ui-monospace,monospace;color:#0d1015;background:#8fe0b0;border-radius:3px}.cheatsheet{margin-top:2rem;color:#8d98a5;font-size:.75rem}.cheatsheet summary{cursor:pointer;color:#788592;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.cheatsheet table{margin-top:.7rem;border-collapse:collapse}.cheatsheet td{padding:.2rem .8rem .2rem 0;vertical-align:top}.cheatsheet code{color:#d9f5e4;background:#161d25;padding:.05rem .25rem;border-radius:3px;font-size:.74rem}@media(max-width:900px){.topbar{min-height:0;padding:.7rem 1rem;gap:.5rem .75rem;flex-wrap:wrap}.brand{font-size:.72rem}.transport{flex:1 1 100%;flex-wrap:wrap;gap:.4rem}.action{padding:.5rem .85rem}.tempo{margin-left:auto;font-size:.68rem;text-align:right}.status{flex:1 1 100%;max-width:none;text-align:left}.workspace{display:flex;flex-direction:column;min-height:0;max-width:none}.editor-panel{order:1;padding:1rem 1rem 1.5rem}.sidebar{order:2;padding:.5rem 1rem 1.5rem;border-right:0;border-top:1px solid #28313a}.browser{max-height:none;overflow:visible;padding-right:0}.code-editor{grid-template-columns:2.1rem minmax(0,1fr)}.code-surface,.code-surface textarea{min-height:13rem}.completions{max-height:11rem}.cheatsheet{margin-top:1.5rem}}@media(max-width:560px){.brand span:not(.logo){display:none}.line-numbers{display:none}.code-editor{grid-template-columns:minmax(0,1fr)}.code-overlay,.code-surface textarea{padding-left:var(--code-pad);white-space:pre-wrap;overflow-wrap:break-word}.code-surface textarea{overflow-x:hidden}.tempo{flex:1 1 100%;margin-left:0;text-align:left}.cheatsheet table,.cheatsheet tr,.cheatsheet td{display:block}.cheatsheet tr{margin-bottom:.6rem}.cheatsheet td:first-child{margin-bottom:.15rem}.stats{grid-template-columns:1fr auto}}@media(pointer:coarse){.chip{min-height:2.2rem;padding:.3rem .6rem;font-size:.85rem}.chip.machine{font-size:.8rem}.tool{min-height:2.1rem;padding:.35rem .6rem;font-size:.75rem}.toggle{padding:.5rem .7rem;font-size:.78rem}.completion{padding:.45rem .5rem}.code-surface textarea{-webkit-overflow-scrolling:touch}}