/* SPDX-License-Identifier: GPL-3.0-only */
:root{--accent:#39c5bb;--accent-hover:#68d7cf;accent-color:var(--accent);font-family:system-ui,sans-serif;color:#e8edea;background:#000;color-scheme:dark;line-height:1.6}*{box-sizing:border-box}body{margin:0}main{max-width:760px;padding:40px 24px;margin:auto}header{margin-bottom:34px}h1{font-size:clamp(30px,6vw,42px);letter-spacing:-.04em;line-height:1.2;margin:8px 0 18px}h2{font-size:20px;font-weight:600;margin-top:0}.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--accent)}p{color:#bac6bf}.small{font-size:13px}.notice{border-left:3px solid #e4b26a;padding-left:14px;color:#e5c79f}section{border-top:1px solid #344139;padding:26px 0}label{display:block;margin:12px 0}input[type=file]{display:block;margin:10px 0;max-width:100%}button,.button{font:inherit;font-size:14px;display:inline-block;border:1px solid var(--accent);border-radius:5px;padding:9px 15px;background:var(--accent);color:#071716;cursor:pointer;text-decoration:none}button:disabled{cursor:default;opacity:.4}button:hover:enabled,.button:hover{background:var(--accent-hover)}a{color:var(--accent)}select{font:inherit;padding:8px;width:100%;background:#000;border:1px solid #566b5c;border-radius:4px}details{margin-top:16px}summary{cursor:pointer;color:#b3c9bd}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:#bbc7be}.check{display:flex;gap:10px;align-items:start;font-size:14px;color:#c4cfc8}.check input{margin-top:6px;flex-shrink:0}canvas{width:100%;height:110px;background:#000;border:1px solid #344139;border-radius:4px}.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.keys{display:grid;grid-template-columns:repeat(27,1fr);margin-top:12px;touch-action:none}.keys button{padding:30px 0 7px;min-width:0;border-radius:0;border:1px solid #89978e;background:#dce7dd;color:#162218;font-size:9px}.keys button.down{background:var(--accent)}.keys button.black{background:#000;color:#e0eee4}.keys button.black.down{background:var(--accent);color:#071716}footer{font-size:13px;border-top:1px solid #344139;padding-top:16px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}@media(max-width:480px){main{padding:24px 16px}.keys button{font-size:8px;padding-top:23px}}

.played{font-size:40px;line-height:1.3;color:var(--accent);margin:0 0 8px;font-weight:600}
.syllable-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.syllable-pair p{margin:8px 0}.syllable-pair .played{overflow-wrap:anywhere}.upcoming{overflow:hidden}#next-syllable{font-size:22px;line-height:1.5;white-space:nowrap;color:var(--accent)}textarea{font:inherit;width:100%;padding:12px;background:#000;color:inherit;border:1px solid #566b5c;border-radius:4px;resize:vertical}#memory-preview{overflow-wrap:anywhere;color:var(--accent)}
#download[aria-disabled=true]{opacity:.5;pointer-events:none}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tabs [aria-selected=false]{background:transparent;color:var(--accent)}.tabs [aria-selected=true]{background:var(--accent);color:#071716}.device-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;border:0;padding:0;margin-top:20px}.device-settings legend{font-size:14px;color:#bac6bf}.device-settings label{min-width:0}.device-settings input[type=number]{display:block;width:100%;font:inherit;padding:8px;background:#000;color:inherit;border:1px solid #566b5c;border-radius:4px}.device-settings input[type=range]{display:block;width:100%}.device-settings input[type=checkbox]{display:block;margin:12px 0}.device-settings output{color:var(--accent);font-size:14px}@media(max-width:480px){.device-settings{grid-template-columns:1fr}}
.adsr-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.adsr-controls label{font-size:14px}.adsr-controls input{display:block;width:100%;margin-top:8px}.adsr-controls output{color:var(--accent);font-variant-numeric:tabular-nums}#envelope{height:130px}
#install-progress{margin-top:18px}.progress-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.progress-heading strong{font-size:15px;color:var(--accent)}#install-percent{font-variant-numeric:tabular-nums;white-space:nowrap}#install-bar{display:block;appearance:none;width:100%;height:12px;margin:10px 0 12px;border:0;border-radius:6px;overflow:hidden;background:#000;accent-color:var(--accent)}#install-bar::-webkit-progress-bar{background:#000;border-radius:6px}#install-bar::-webkit-progress-value{background:var(--accent);border-radius:6px}#install-bar::-moz-progress-bar{background:var(--accent)}#install-bar:indeterminate{background:linear-gradient(90deg,#000 25%,var(--accent) 50%,#000 75%);background-size:200% 100%;animation:install-wait 1.6s linear infinite}#install-bar:indeterminate::-webkit-progress-bar{background:transparent}#install-progress p{margin:4px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}#install-progress[data-state=error] .progress-heading strong{color:#e4b26a}#install-progress[data-state=error] progress::-webkit-progress-value{background:#e4b26a}#install-progress[data-state=error] progress::-moz-progress-bar{background:#e4b26a}@keyframes install-wait{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){#install-bar:indeterminate{animation:none}}

.syllable-keyboard{border:0;padding:0;margin:24px 0 16px;min-width:0}.syllable-keyboard legend{font-size:16px;font-weight:600}.syllable-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.syllable-keys button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:64px;padding:6px 2px;background:#000;color:var(--accent);line-height:1.4}.syllable-kana{font-size:21px}.syllable-romaji{font-size:12px;color:#bac6bf}.syllable-keys button:hover:enabled{color:#000}.syllable-keys button:hover:enabled .syllable-romaji{color:#071716}textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:480px){.syllable-keys{grid-template-columns:repeat(4,minmax(0,1fr))}}