:root{color-scheme:dark;--bg:#0b1721;--card:#122631;--text:#e4f1f3;--muted:#a4bec5;--line:#2a4650;--mint:#63dcc4;--orange:#ffbb7d}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#163745,var(--bg) 55%);color:var(--text);font-family:"Leelawadee UI",Tahoma,system-ui,sans-serif;line-height:1.7}main{max-width:940px;margin:auto;padding:44px 24px}header{padding:8px 0 28px}.eyebrow,.step{font-size:.74rem;font-weight:700;letter-spacing:.13em;color:var(--mint)}h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.35;margin:16px 0}h1 span{color:var(--mint)}h2{font-size:1.25rem;margin:10px 0}p{margin:10px 0}.muted,header p{color:var(--muted);font-size:.92rem}.statuses{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.badge{border:1px solid var(--line);border-radius:24px;padding:6px 14px;font-size:.82rem}.badge.ok{color:var(--mint)}.badge.test{color:var(--orange)}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;margin:16px 0;box-shadow:0 12px 32px #0002}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 4px}button,.button{font:inherit;font-size:.92rem;border:1px solid var(--mint);background:var(--mint);color:#0d2825;padding:10px 17px;border-radius:10px;cursor:pointer;font-weight:650;text-decoration:none}button.secondary,.button.secondary{background:transparent;color:var(--text);border-color:var(--line)}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.file-label{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px;border:1px dashed #4c7882;border-radius:12px;margin-top:22px}input[type=file]{max-width:100%;font:inherit;font-size:.86rem}progress{width:100%;height:8px;accent-color:var(--mint);margin-top:20px}canvas{width:100%;background:#0a1d26;border-radius:8px;display:block;margin-top:18px}#waveform{height:130px}#spectrogram{height:210px;image-rendering:pixelated}.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem;padding-top:6px}audio{width:100%;margin-top:18px}.result h2{color:var(--mint)}.result.warn h2{color:var(--orange)}#scores{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.score{font-size:.82rem;background:#0a1d26;padding:7px 12px;border-radius:6px}#message{padding:12px 4px;color:var(--orange);min-height:48px;overflow-wrap:anywhere}footer{color:var(--muted);font-size:.78rem;padding:8px 4px 24px}[hidden]{display:none!important}@media(max-width:560px){main{padding:24px 15px}.card{padding:20px 17px}.actions button,.actions .button{flex:1 1 auto}#spectrogram{height:160px}.axis{font-size:.67rem}}