@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--ink:#17211d;--paper:#f2efe7;--lime:#c9ff46;--line:rgba(23,33,29,.18);--muted:#65706a;--panel:#e8e5dc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}.masthead{height:78px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;font:11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.09em}.brand{color:var(--ink);font:bold 22px Manrope;text-decoration:none;letter-spacing:-.08em}.brand span{color:#668270}.masthead p{margin:0}.privacy{justify-self:end}.privacy i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ccf69;margin-right:8px}.hero{padding:8vw 8vw 5vw;display:grid;grid-template-columns:1fr 2fr;gap:2rem}.kicker,.eyebrow{font:10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em}.hero h1{font-size:clamp(58px,8.2vw,132px);line-height:.82;letter-spacing:-.075em;margin:0;grid-column:2;font-weight:500}.hero h1 em{font-family:Playfair Display,serif;font-weight:500}.intro{grid-column:2;max-width:530px;font-size:18px;line-height:1.6;margin:2rem 0 0}.dropzone{margin:0 8vw 8vw;border:1px solid var(--ink);min-height:160px;padding:30px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;cursor:pointer;transition:.2s;background:rgba(255,255,255,.12)}.dropzone:hover,.dropzone.dragging{background:var(--lime);box-shadow:8px 8px 0 var(--ink);transform:translate(-4px,-4px)}.drop-icon{width:76px;height:76px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:35px;font-weight:200}.dropzone strong{display:block;font-size:22px}.dropzone small{display:block;color:var(--muted);margin-top:8px;font:11px DM Mono}.dropzone button,.download{border:0;background:var(--ink);color:white;padding:16px 22px;font:11px DM Mono;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.workspace{margin:0 4vw 8vw;border-top:1px solid var(--ink)}.filebar{padding:22px 0;display:grid;grid-template-columns:1.5fr 2fr auto;align-items:end;border-bottom:1px solid var(--line);gap:20px}.filebar strong{display:block;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filebar dl{display:flex;margin:0;gap:4vw}.filebar dl div{display:flex;flex-direction:column}.filebar dt{font:9px DM Mono;text-transform:uppercase;color:var(--muted)}.filebar dd{margin:6px 0 0;font:12px DM Mono}.text-button{background:none;border:0;border-bottom:1px solid;cursor:pointer;padding:5px 0}.viewer{background:#f9f8f3;margin-top:30px;border:1px solid var(--line);padding:24px}.viewer-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.viewer h2{font-size:28px;margin:5px 0 0}.legend{display:flex;align-items:center;gap:8px;font:9px DM Mono;color:var(--muted)}.legend i{width:90px;height:6px;background:linear-gradient(90deg,#faf9f4,#a9b9af,#294e40,#071611)}.canvas-wrap{height:min(48vw,520px);min-height:280px;position:relative;background:#fbfaf6;overflow:hidden}canvas{display:block;width:100%;height:100%}.processing{position:absolute;inset:0;background:#f9f8f3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font:11px DM Mono}.processing span{width:36px;height:36px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}.processing.done{display:none}@keyframes spin{to{transform:rotate(360deg)}}.playhead{position:absolute;display:none;top:0;bottom:0;width:1px;background:var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.25)}.axis{display:flex;justify-content:space-between;margin-top:9px;font:9px DM Mono;color:var(--muted)}.controls{display:flex;align-items:center;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}.transport{display:flex;gap:8px}.play,.icon-button{min-height:46px;border:1px solid var(--ink);background:transparent;padding:0 18px;cursor:pointer;font:11px DM Mono;text-transform:uppercase}.play span{margin-right:9px}.play.spectral{background:var(--lime)}button:disabled{opacity:.35;cursor:not-allowed}.icon-button{padding:0 14px}.range-label{margin-left:auto;font:10px DM Mono;text-transform:uppercase;display:flex;align-items:center;gap:12px}.range-label input{accent-color:var(--ink)}.download{margin-left:24px}.note{font-size:12px;color:var(--muted);max-width:750px;line-height:1.6}.method{margin:0 8vw 8vw;border-top:1px solid;padding-top:28px}.method ol{list-style:none;padding:0;margin:45px 0 0;display:grid;grid-template-columns:repeat(3,1fr)}.method li{padding:25px;border-left:1px solid var(--line);display:grid;gap:24px}.method li>b{font:11px DM Mono}.method li span{font-size:25px}.method li small{color:var(--muted);line-height:1.6}footer{border-top:1px solid var(--line);padding:35px 4vw;display:flex;justify-content:space-between;font:10px DM Mono;text-transform:uppercase}.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:white;padding:14px 20px;font:11px DM Mono;transform:translateY(100px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}@media(max-width:760px){.masthead{grid-template-columns:1fr 1fr}.masthead p{display:none}.hero{display:block;padding-top:70px}.hero h1{margin-top:50px}.dropzone{grid-template-columns:auto 1fr;margin:0 5vw 60px}.dropzone button{grid-column:1/-1}.workspace{margin:0 3vw 60px}.filebar{grid-template-columns:1fr auto}.filebar dl{grid-row:2;grid-column:1/-1}.viewer{padding:12px}.canvas-wrap{height:55vh}.controls{flex-wrap:wrap}.transport{width:100%}.play{flex:1}.range-label{margin:8px 0}.download{margin-left:auto}.method ol{grid-template-columns:1fr}.method li{border-top:1px solid var(--line)}.privacy{font-size:0}.privacy i{margin:0}}