:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #27292b; }
#editor { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#text-input { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: .01; z-index: -1; overflow: hidden; resize: none; white-space: pre; }
#notice { position: fixed; left: 50%; bottom: 35px; transform: translateX(-50%); max-width: min(700px, 95vw); padding: 10px 16px; border: 1px solid #61666c; border-radius: 8px; background: #30343af2; color: #e4e7ec; font: 13px/1.4 system-ui, sans-serif; }
#notice[hidden] { display: none; }

#import-progress { position: fixed; right: 16px; bottom: 42px; max-width: min(520px, 95vw); display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; padding: 14px; border: 1px solid #61666c; border-radius: 8px; background: #30343af2; color: #e4e7ec; font: 13px/1.4 system-ui, sans-serif; }
#import-progress[hidden] { display: none; }
#import-progress span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#import-progress progress { width: 100%; align-self: center; accent-color: #80afdc; }
#import-progress button { font: inherit; color: inherit; border: 1px solid #61666c; border-radius: 5px; background: #3b4047; padding: 4px 12px; cursor: pointer; }

#export-downloads{position:fixed;right:16px;bottom:60px;max-width:420px;max-height:45vh;overflow:auto;background:#27292b;border:1px solid #78808c;border-radius:8px;padding:16px;color:#eee;z-index:10}#export-downloads[hidden]{display:none}#export-downloads a{color:#90bce8}#export-downloads button{float:right}

#audio-input-device{max-width:220px;font:inherit;color:#e4e7ec;background:#3b4047;border:1px solid #61666c;border-radius:4px;padding:2px}#audio-input-device[hidden]{display:none}

#clipboard-access{position:fixed;left:50%;bottom:65px;transform:translateX(-50%);max-width:min(600px,95vw);padding:16px;background:#30343a;color:#eee;border:1px solid #78808c;border-radius:8px;z-index:20;font:14px system-ui}
#clipboard-access[hidden]{display:none}#clipboard-access span{display:block;margin-bottom:10px}#clipboard-access button{font:inherit;margin-right:8px;padding:5px 12px}

#licenses-dialog{max-width:min(800px,95vw);max-height:85vh;background:#27292b;color:#e4e7ec;border:1px solid #78808c;border-radius:8px;padding:20px}#licenses-dialog::backdrop{background:#0008}#licenses-dialog button{float:right}#licenses-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,monospace}

#audio-output-dialog{width:min(520px,95vw);max-height:85vh;overflow:auto;background:#27292b;color:#e4e7ec;border:1px solid #78808c;border-radius:8px;padding:20px;font:14px/1.5 system-ui}#audio-output-dialog::backdrop{background:#0008}#audio-output-dialog [data-close]{float:right}#audio-output-dialog select{display:block;max-width:100%;width:100%;margin:8px 0 16px;padding:6px}#audio-output-dialog button{padding:5px 10px}#audio-output-dialog [hidden]{display:none}#audio-output-dialog [data-status]{color:#a9c8e5}

#release-update[hidden] { display: none; }
#release-update { border-color: #80afdc; color: #b8d7f4; }

#input-dialog, #session-dialog { width: min(520px, 95vw); max-height: 85vh; overflow: auto; background: #27292b; color: #e4e7ec; border: 1px solid #78808c; border-radius: 8px; padding: 24px; font: 14px/1.5 system-ui; }
#input-dialog::backdrop, #session-dialog::backdrop { background: #0008; }
#input-dialog [data-close], #session-dialog [data-close] { float: right; }
#input-dialog h2, #session-dialog h2 { margin-top: 0; }
#input-dialog button, #session-dialog button { font: inherit; color: inherit; border: 1px solid #61666c; border-radius: 5px; background: #3b4047; padding: 6px 12px; cursor: pointer; }
#input-dialog button:disabled, #session-dialog button:disabled { opacity: .6; cursor: default; }
#input-dialog [hidden], #session-dialog [hidden] { display: none; }
#input-dialog select { display: block; max-width: 100%; width: 100%; padding: 6px; margin-top: 12px; }
.input-routing { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid #41464c; padding-top: 16px; margin-top: 20px; }
#input-dialog [data-status], #session-status, #update-status { color: #a9c8e5; }