:root{--sol-base03:#002b36;--sol-base02:#073642;--sol-base01:#586e75;--sol-base00:#657b83;--sol-base0:#839496;--sol-base1:#93a1a1;--sol-yellow:#b58900;--sol-orange:#cb4b16;--sol-red:#dc322f;--sol-magenta:#d33682;--sol-violet:#6c71c4;--sol-blue:#268bd2;--sol-cyan:#2aa198;--sol-green:#859900;--bg:var(--sol-base03);--bg-panel:#00212b;--bg-raised:var(--sol-base02);--line:#1f4d5a;--text:var(--sol-base0);--text-strong:var(--sol-base1);--text-muted:var(--sol-base00);--text-faint:var(--sol-base01);--accent:var(--sol-blue)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}input,button{font:inherit;border:1px solid var(--line);background:var(--bg-raised);color:var(--text-strong);border-radius:6px;padding:6px 10px}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:var(--accent);text-decoration:none}.centered{flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100%;display:flex}.dev-note{color:var(--text-muted);font-size:13px}.song-list{flex-direction:column;gap:6px;padding:0;list-style:none;display:flex}.song{flex-direction:column;height:100%;display:flex}.song header{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:8px 12px;display:flex}.song .spacer{flex:1}.status{color:var(--text-muted);font-size:12px}.status-connected{color:var(--sol-green)}.status-error,.status-closed{color:var(--sol-red)}.member{background:var(--bg-raised);border-radius:10px;margin-right:4px;padding:2px 8px;font-size:12px}.member-local{border:1px dashed var(--sol-yellow)}.member-editor{color:var(--text-strong)}.member-viewer{color:var(--text-muted)}.member-guest{color:var(--text-faint);font-style:italic}.member-toggle{cursor:pointer}.member-toggle:hover{outline:1px solid var(--accent)}.vis{color:var(--text-muted);font-size:11px}.vis-select{padding:2px 6px;font-size:12px}.signin{font-size:12px}.mode{border-radius:10px;padding:2px 8px;font-size:12px}.mode-main{color:var(--sol-green)}.mode-local{color:var(--sol-yellow);border:1px dashed var(--sol-yellow)}.notice-bar{color:var(--sol-yellow);background:#b5890026;padding:6px 12px;font-size:13px}button.link{color:var(--accent);background:0 0;border:none;padding:0 4px}button.oauth{min-width:220px;padding:10px 16px}.error-bar{border-left:3px solid var(--sol-red);color:var(--text-strong);white-space:pre-wrap;background:#dc322f26;padding:6px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px}.song-body{flex:1;min-height:0;display:flex}.song-body>.centered{flex:1}.editor-host{flex:1;min-width:0;overflow:hidden}.editor-host .cm-editor{height:100%}.sj-firing{background:#8599004d;border-radius:3px;outline:1px solid #85990099;transition:background 80ms linear}.sj-slider{vertical-align:middle;align-items:center;gap:4px;margin-left:6px;display:inline-flex}.sj-slider input[type=range]{width:90px;height:12px;accent-color:var(--accent);background:0 0;border:none;padding:0}.sj-slider-value{color:var(--accent);min-width:3ch;font-size:11px}.pianoroll{border-top:1px solid var(--line);background:var(--bg-panel);flex:none;width:100%;height:140px}.history{flex-direction:column;flex:1;min-height:0;display:flex}.history-bar{border-bottom:1px solid var(--line);background:var(--bg-panel);align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex}.history-bar input[type=range]{min-width:120px;accent-color:var(--sol-yellow);flex:2}.history-title{color:var(--sol-yellow)}.history-label{color:var(--text-muted);white-space:nowrap}.history-eval{color:var(--sol-green)}.editor-history .cm-editor{opacity:.9}button.active{border-color:var(--sol-yellow);color:var(--sol-yellow)}.sandbox-frame{opacity:.01;pointer-events:none;background:#000;border:0;width:1px;height:1px;position:fixed;bottom:0;right:0}.sandbox-frame.sandbox-visible{opacity:1;width:42vw;height:calc(100% - 49px);top:49px}.song.with-visuals .editor-host,.song.with-visuals .history{margin-right:42vw}.toggle-on{border-color:var(--accent);color:var(--accent)}.sound-browser{border-left:1px solid var(--line);background:var(--bg-panel);flex-direction:column;flex:none;width:260px;display:flex}.sound-browser-head{border-bottom:1px solid var(--line);gap:6px;padding:8px;display:flex}.sound-browser-head input{flex:1;min-width:0}.sound-browser-list{flex:1;padding:4px 0 12px;overflow-y:auto}.sound-browser-list .dev-note{padding:8px 12px}.sound-browser h3{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-panel);margin:0;padding:6px 12px;font-size:11px;font-weight:600;position:sticky;top:0}.sound-browser ul{margin:0;padding:0;list-style:none}.sound-row{width:100%;color:var(--text);text-align:left;background:0 0;border:none;border-radius:0;justify-content:space-between;padding:3px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px;display:flex}.sound-row:hover{background:var(--bg-raised)}.sound-row-active{color:var(--sol-green);background:#8599004d}.sound-count{color:var(--text-muted);font-size:11px}.docs-panel{border-left:1px solid var(--line);background:var(--bg-panel);flex-direction:column;flex:none;width:360px;min-height:0;display:flex}.docs-list,.docs-detail{flex:1;min-height:0;overflow-y:auto}.docs-list[hidden]{display:none}.docs-list ul{margin:0;padding:4px 0;list-style:none}.docs-list .dev-note{padding:8px 12px}.docs-row{text-align:left;background:0 0;border:none;border-radius:0;width:100%;padding:4px 12px;display:block}.docs-row:hover{background:var(--bg-raised)}.docs-row-name{color:var(--accent);font-family:ui-monospace,Consolas,monospace;font-size:13px}.docs-row-summary{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;display:block;overflow:hidden}.docs-versions{color:var(--text-faint);margin:0;padding:8px 12px 12px;font-size:11px}.docs-detail{padding:8px 12px 16px}.docs-back{margin-bottom:8px;font-size:12px}.doc-card{font-size:13px;line-height:1.45}.doc-sig{color:var(--accent);font-family:ui-monospace,Consolas,monospace;font-size:14px}.doc-syn{color:var(--text-muted);font-size:12px}.doc-desc p{margin:6px 0}.doc-desc ul,.doc-desc ol{margin:6px 0;padding-left:20px}.doc-code{background:var(--bg);white-space:pre-wrap;border-radius:6px;margin:6px 0;padding:6px 8px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.doc-card code{background:var(--bg-raised);border-radius:3px;padding:0 3px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.doc-params{margin:8px 0}.doc-params dt{font-size:12px}.doc-params dd{color:var(--text-muted);margin:0 0 4px 12px;font-size:12px}.doc-params dd p{margin:0}.doc-type{color:var(--sol-yellow);margin-left:6px;font-size:11px}.doc-example{border:1px solid var(--line);background:var(--bg);border-radius:6px;margin:8px 0}.doc-example pre{color:var(--text-strong);white-space:pre-wrap;word-break:break-word;margin:0;padding:6px 8px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.doc-example-actions{gap:6px;padding:0 8px 6px;display:flex}.doc-example-actions button{padding:2px 8px;font-size:12px}.doc-link{font:inherit;color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0}.doc-more{margin-top:2px;font-size:12px}.editor-host .cm-editor .cm-tooltip{background:var(--bg-panel);border:1px solid var(--line);color:var(--text);border-radius:6px}.doc-tooltip{max-width:440px;max-height:320px;padding:6px 10px;overflow-y:auto}.cm-completionInfo .doc-tooltip{padding:0}.doc-signature{color:var(--text-muted);padding:3px 8px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.doc-signature-active{color:var(--sol-yellow);font-weight:600}.doc-signature-desc{max-width:420px;color:var(--text-muted);margin-top:2px;font-family:system-ui,sans-serif}.tutorial-bar{border-bottom:1px solid var(--line);background:var(--bg-panel);align-items:center;gap:10px;padding:6px 12px;font-size:13px;display:flex}.tutorial-bar .spacer{flex:1}.tutorial-step{color:var(--sol-yellow);white-space:nowrap}.tutorial-done{color:var(--sol-green);white-space:nowrap}.tutorial-next{font-weight:600}button.vote{white-space:nowrap;padding:2px 10px;font-size:12px}button.vote.voted{border-color:var(--sol-green);color:var(--sol-green)}button.vote:disabled{opacity:.55;cursor:not-allowed}.tutorial-list li{align-items:center;gap:8px;display:flex}.tutorial-locked{border:1px dashed var(--line);color:var(--text-faint);background:var(--bg-panel);-webkit-user-select:none;user-select:none;border-radius:6px;margin:6px 0;padding:6px 10px;font-size:12px}
