:root {
  --ink: #183027;
  --muted: #5f7069;
  --paper: #f6f1e7;
  --panel: rgba(255,255,255,.76);
  --line: #d7d1c5;
  --pine: #245744;
  --moss: #69866f;
  --amber: #d38a3b;
  --red: #b64e45;
  --shadow: 0 16px 44px rgba(32,48,40,.10);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 90% 0,#e5eadf 0,transparent 28%),var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
button,input,select{font:inherit}
button,.file-button{border:0;border-radius:999px;background:var(--pine);color:#fff;padding:.72rem 1.15rem;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}
button:hover,.file-button:hover{transform:translateY(-1px);background:#173f31}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.secondary{background:#e7e4da;color:var(--ink)}
.hero{min-height:310px;padding:4.5rem max(5vw,1.25rem) 3.5rem;display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(135deg,#15392d,#285e49 66%,#8a9e7a);color:#fff;overflow:hidden}
.hero>div:first-child{max-width:790px;position:relative;z-index:1}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:800;opacity:.78}
h1{font-family:Georgia,serif;font-size:clamp(3rem,8vw,6.8rem);line-height:.9;margin:.25rem 0 1.2rem;font-weight:500}
.lede{font-size:clamp(1rem,2vw,1.35rem);max-width:720px;margin:0;color:#eef5ef}
.hero-tone{display:flex;align-items:flex-end;gap:10px;height:190px;transform:rotate(-8deg);opacity:.7}
.hero-tone span{display:block;width:24px;border-radius:20px 20px 0 0;background:#d8c890}.hero-tone span:nth-child(1){height:35%}.hero-tone span:nth-child(2){height:65%}.hero-tone span:nth-child(3){height:100%}
main{max-width:1280px;margin:-1.7rem auto 0;padding:0 1.25rem 4rem;position:relative}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);border-radius:22px;box-shadow:var(--shadow);padding:1.4rem;margin-bottom:1.2rem}
.panel h2{font-family:Georgia,serif;font-weight:500;font-size:1.8rem;margin:0 0 .3rem}.panel p{color:var(--muted);margin:.2rem 0}
.upload-panel{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:1rem;align-items:center}.file-button input{display:none}.status{grid-column:1/-1;font-size:.88rem}
.transport{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}.transport-buttons{display:flex;gap:.6rem}.transport label{display:grid;gap:.25rem;font-size:.82rem;font-weight:700;color:var(--muted)}
select,input[type=search],input[type=number]{border:1px solid var(--line);border-radius:10px;background:#fff;padding:.55rem .65rem;color:var(--ink)}
input[type=range]{accent-color:var(--pine)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.metrics article{background:#18382e;color:#fff;border-radius:18px;padding:1rem 1.2rem}.metrics span{display:block;font-size:.78rem;color:#bed0c6}.metrics strong{font-size:1.55rem;font-family:Georgia,serif;font-weight:500}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.search{display:grid;gap:.2rem;font-size:.78rem;color:var(--muted)}
.table-wrap{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:14px;background:#fff}table{width:100%;border-collapse:collapse;min-width:820px}th{position:sticky;top:0;background:#edf0e9;text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;padding:.75rem;z-index:2}td{padding:.68rem .75rem;border-top:1px solid #eee9df;font-variant-numeric:tabular-nums}tbody tr{cursor:pointer}tbody tr:hover{background:#faf5e9}.empty{text-align:center;color:var(--muted);padding:2rem}.cent{display:inline-flex;min-width:68px;justify-content:center;border-radius:999px;padding:.2rem .45rem;font-weight:800;font-size:.8rem}.cent.calm{background:#dcebdd;color:#265d3f}.cent.color{background:#f4e3bb;color:#825b13}.cent.tense{background:#f3d1cd;color:#8b3028}.mini-play{padding:.35rem .55rem;font-size:.75rem}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.voice{border:1px solid var(--line);border-radius:16px;padding:1rem;background:#fff}.voice h3{margin:0 0 .7rem;font-family:Georgia,serif}.voice label{display:grid;gap:.25rem;margin:.55rem 0;font-size:.78rem;color:var(--muted)}.voice .readout{font-size:1.15rem;font-weight:800;color:var(--pine)}
.intervals{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}.interval-card{border-radius:14px;background:#eef0e9;padding:.85rem}.interval-card strong{display:block}.interval-card small{color:var(--muted)}
.harmonic-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.65rem;margin-top:1rem}.harmonic{border:1px solid var(--line);background:#fff;border-radius:14px;padding:.7rem;text-align:center}.harmonic strong{display:block;font-family:Georgia,serif;font-size:1.35rem}.harmonic span{font-size:.76rem;color:var(--muted)}
footer{max-width:1000px;margin:0 auto;padding:0 1.25rem 3rem;text-align:center;color:var(--muted);font-size:.86rem}
.transport-buttons{flex-wrap:wrap}.note-actions{display:flex;gap:.35rem;align-items:center;white-space:nowrap}.mini-download{padding:.35rem .55rem;font-size:.75rem}.transport .export-hint,.transport .export-status{flex-basis:100%;font-size:.86rem;margin:0}.export-status:empty{display:none}.transport .export-status.error{color:var(--red)}.export-status{overflow-wrap:anywhere}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media(max-width:820px){.hero-tone{display:none}.upload-panel{grid-template-columns:1fr}.status{grid-column:auto}.metrics{grid-template-columns:repeat(2,1fr)}.voices,.intervals{grid-template-columns:1fr}.harmonic-grid{grid-template-columns:repeat(4,1fr)}.section-heading{align-items:flex-start;flex-direction:column}}