:root { --ink:#13231e; --muted:#66716c; --paper:#f5f2eb; --card:#fffefa; --line:#dcded7; --orange:#ff6b35; --green:#163f35; --lime:#d9f071; --font-geist-sans:Inter,"Segoe UI",Arial,sans-serif; --font-geist-mono:"SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-geist-sans),Arial,sans-serif; }
main { min-height:100vh; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { color:inherit; }

.site-header { height:76px; padding:0 clamp(22px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(19,35,30,.12); background:rgba(245,242,235,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:50; }
.brand { display:flex; width:max-content; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:720; letter-spacing:-.03em; }
.brand-mark { width:34px; height:34px; border-radius:50%; background:var(--orange); display:flex; justify-content:center; align-items:center; gap:2px; }
.brand-mark i { width:2px; border-radius:5px; background:#fff; display:block; }.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:17px}.brand-mark i:nth-child(3){height:12px}
.header-note { justify-self:center; font:500 11px/1 var(--font-geist-mono),monospace; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.status-dot { height:7px; width:7px; border-radius:50%; background:#56a37e; box-shadow:0 0 0 4px rgba(86,163,126,.12); }
.about-link { justify-self:end; color:var(--ink); text-decoration:none; font-size:13px; font-weight:650; border-bottom:1px solid var(--ink); padding-bottom:2px; }

.intro { max-width:1300px; margin:0 auto; padding:clamp(64px,8vw,118px) clamp(22px,5vw,70px) clamp(48px,6vw,84px); display:grid; grid-template-columns:1.5fr .72fr; align-items:end; gap:60px; }
.eyebrow { margin:0 0 18px; font:650 11px/1.2 var(--font-geist-mono),monospace; text-transform:uppercase; letter-spacing:.13em; color:var(--orange); }
.intro h1 { font-size:clamp(52px,7.4vw,108px); line-height:.89; letter-spacing:-.072em; margin:0; font-weight:660; }
.intro h1 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.055em; color:var(--orange); }
.intro-copy { color:var(--muted); margin:0 0 7px; font-size:clamp(16px,1.5vw,19px); line-height:1.6; max-width:410px; }

.studio { width:min(1300px,calc(100% - clamp(24px,5vw,72px))); margin:0 auto; border:1px solid var(--line); border-radius:28px; background:var(--card); overflow:hidden; box-shadow:0 24px 70px rgba(25,38,32,.08); }
.studio-topbar { min-height:98px; padding:22px 30px; display:flex; gap:24px; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.preset-area { display:flex; align-items:center; gap:20px; min-width:0; }.control-label { display:block; font:650 10px/1 var(--font-geist-mono),monospace; color:#86908b; text-transform:uppercase; letter-spacing:.11em; white-space:nowrap; }
.preset-list { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:3px; }.preset-list::-webkit-scrollbar{display:none}
.preset { white-space:nowrap; border:1px solid transparent; background:transparent; padding:9px 13px; font-size:12px; border-radius:999px; cursor:pointer; color:var(--muted); transition:.18s ease; }.preset:hover{background:#f2f1eb;color:var(--ink)}.preset.active{background:var(--green);color:white;border-color:var(--green)}
.envelope-toggle { flex:0 0 auto; display:flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--line); padding:10px 13px; border-radius:10px; font-size:12px; font-weight:650; cursor:pointer; }.envelope-icon{height:12px;width:22px;display:block;border-left:1px solid var(--orange);border-top:1px solid var(--orange);transform:skewX(-25deg) scaleY(.65)}
.envelope-panel { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:18px 30px; border-bottom:1px solid var(--line); background:#faf9f4; }
.envelope-control{display:grid;grid-template-columns:76px minmax(70px,1fr) 47px;align-items:center;gap:8px;font-size:11px;color:var(--muted);min-width:0}
.envelope-name{display:flex;align-items:center;gap:6px}.envelope-name label{cursor:default}.envelope-panel output{font-family:var(--font-geist-mono),monospace;text-align:right;color:var(--ink)}.envelope-panel input{accent-color:var(--orange);width:100%;min-width:0}
.tooltip{position:relative;display:inline-flex}.tooltip button{width:16px;height:16px;padding:0;border:1px solid #bac0bb;border-radius:50%;background:#fff;color:#74807a;font:700 10px/14px var(--font-geist-sans);cursor:help;transition:.15s ease}.tooltip button:hover,.tooltip button:focus-visible{color:#fff;background:var(--orange);border-color:var(--orange);outline:none}.tooltip-copy{position:absolute;z-index:20;left:0;bottom:calc(100% + 10px);width:min(260px,75vw);padding:13px 14px;border-radius:10px;background:var(--ink);color:#f7f5ef;font-size:11px;line-height:1.55;letter-spacing:.005em;box-shadow:0 10px 30px rgba(13,25,21,.22);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.tooltip-copy::after{content:"";position:absolute;left:8px;top:100%;border:6px solid transparent;border-top-color:var(--ink)}.tooltip:hover .tooltip-copy,.tooltip:focus-within .tooltip-copy{opacity:1;visibility:visible;transform:translateY(0)}.envelope-control:last-child .tooltip-copy{left:auto;right:0}.envelope-control:last-child .tooltip-copy::after{left:auto;right:8px}
[hidden]{display:none!important}

.keyboard-panel { background:var(--green); color:white; padding:28px 30px 20px; }.now-playing{min-height:88px;display:grid;grid-template-columns:140px 130px minmax(180px,1fr) auto;align-items:center;gap:24px;padding:0 4px 22px}.now-playing .control-label{color:#89a79f;margin-bottom:8px}.now-playing strong{font-size:32px;line-height:1;font-weight:620;letter-spacing:-.04em}.now-playing strong small{font-size:14px;margin-left:2px;color:#a5bbb5}
.frequency-readout{border-left:1px solid rgba(255,255,255,.13);padding-left:23px;display:flex;flex-direction:column;gap:7px}.frequency-readout span{color:#89a79f;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.frequency-readout b{font:500 13px/1 var(--font-geist-mono),monospace}.waveform{height:52px;width:100%;min-width:0;opacity:.95}.now-playing>p{display:flex;align-items:center;gap:8px;color:#a5bbb5;white-space:nowrap;font-size:11px}.audio-indicator{order:-1;width:7px;height:7px;border-radius:50%;background:#677c76}.audio-indicator.on{background:var(--lime);box-shadow:0 0 12px rgba(217,240,113,.7)}
.piano-wrap{overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}.piano-wrap::-webkit-scrollbar{display:none}.piano{--black-key-width:4.3%;height:clamp(158px,18vw,220px);min-width:850px;position:relative;display:flex;gap:2px;user-select:none;touch-action:pan-x}.piano-key{border:0;cursor:pointer;touch-action:none;transition:transform .06s ease,background .08s ease}.piano-key.white{height:100%;flex:1;background:#fffef9;border-radius:3px 3px 7px 7px;box-shadow:inset 0 -5px 0 #d7dbd3,0 2px 3px rgba(0,0,0,.22);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;color:#75817c}.piano-key.white:hover{background:#f8f5e8}.piano-key.white.pressed{background:var(--lime);transform:translateY(3px);box-shadow:inset 0 -2px 0 #9eb446}.piano-key.black{position:absolute;top:0;z-index:2;width:var(--black-key-width);height:61%;border-radius:0 0 5px 5px;background:#0d1915;box-shadow:inset 0 -6px 0 #07100d,0 5px 6px rgba(0,0,0,.32);display:flex;justify-content:center;align-items:flex-end;padding-bottom:12px;color:#789087}.piano-key.black:hover{background:#182d26}.piano-key.black.pressed{background:var(--orange);transform:translateY(3px);box-shadow:inset 0 -3px 0 #b94820}.piano-key kbd{font:600 9px/1 var(--font-geist-mono),monospace;border:1px solid currentColor;border-radius:4px;padding:4px 5px;opacity:.62;margin-bottom:8px;text-transform:uppercase}.piano-key span{font:550 9px/1 var(--font-geist-mono),monospace}.keyboard-tip{text-align:center;margin:15px 0 0;color:#91aaa2;font-size:10px;letter-spacing:.03em}.keyboard-tip span{margin-right:7px}

.spectrum-panel{padding:clamp(30px,4vw,50px)}.spectrum-heading{display:flex;justify-content:space-between;gap:28px;align-items:flex-start}.spectrum-heading .eyebrow{margin-bottom:10px}.spectrum-heading h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.045em;margin:0;line-height:1.12}.spectrum-actions{display:flex;gap:8px}.spectrum-actions button{border:1px solid var(--line);background:transparent;border-radius:9px;padding:10px 13px;font-size:11px;font-weight:650;cursor:pointer;white-space:nowrap}.spectrum-actions button:hover{background:#f2f1eb}.spectrum-actions .save-button{background:var(--orange);border-color:var(--orange);color:white}.spectrum-actions .save-button:hover{background:#ed5724}.spectrum-actions .save-button.saved{background:var(--green);border-color:var(--green)}.preset-description{color:var(--muted);font-size:13px;margin:13px 0 0}
.harmonic-chart{position:relative;height:330px;margin-top:42px;padding-left:45px}.grid-lines{position:absolute;inset:0 0 52px 0;display:grid;grid-template-rows:auto 1fr auto 1fr auto;color:#98a19c;font:500 9px/1 var(--font-geist-mono),monospace;pointer-events:none}.grid-lines i{border-top:1px dashed #dfe1da;margin-left:45px}.grid-lines span{transform:translateY(-4px)}.bars{height:100%;display:grid;grid-template-columns:repeat(16,minmax(24px,1fr));align-items:end;gap:clamp(5px,1vw,13px);position:relative;z-index:2;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.bar-column{height:100%;min-width:26px;display:grid;grid-template-rows:20px 1fr 20px 20px;text-align:center;align-items:center}.bar-value{opacity:0;font:600 9px/1 var(--font-geist-mono),monospace;color:var(--orange);transition:opacity .15s}.bar-value.visible,.bar-column:hover .bar-value{opacity:1}.bar-track{position:relative;width:100%;height:100%;background:#f0efe9;border:0;border-radius:5px 5px 2px 2px;overflow:hidden;cursor:ns-resize;padding:0}.bar-track:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.bar-fill{position:absolute;inset:auto 0 0;background:var(--orange);border-radius:4px 4px 1px 1px;min-height:0;transition:background .12s;pointer-events:none}.bar-column:first-child .bar-fill{background:var(--green)}.bar-column:first-child .bar-value{color:var(--green)}.bar-fill i{position:absolute;top:0;left:50%;width:52%;height:2px;border-radius:2px;background:rgba(255,255,255,.65);transform:translate(-50%,5px)}.bar-column strong{font:650 11px/1 var(--font-geist-mono),monospace}.bar-column small{color:#a0a8a4;font:500 8px/1 var(--font-geist-mono),monospace;white-space:nowrap}.chart-legend{margin-top:25px;padding-top:17px;border-top:1px solid var(--line);display:flex;gap:22px;align-items:center;color:var(--muted);font-size:10px}.chart-legend span{display:flex;gap:7px;align-items:center}.chart-legend i{width:8px;height:8px;border-radius:2px;background:var(--orange)}.chart-legend .legend-fundamental{background:var(--green)}.chart-legend .drag-hint{margin-left:auto;font-family:var(--font-geist-mono),monospace}

.learn-section{max-width:820px;margin:0 auto;text-align:center;padding:clamp(90px,12vw,170px) 24px}.learn-section h2{font:400 clamp(40px,6vw,72px)/1 Georgia,serif;letter-spacing:-.045em;margin:0 0 28px}.learn-section>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.75;margin:0 auto;max-width:700px}.learn-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:1px solid var(--line);padding-top:24px}.learn-steps span{text-align:left;font-size:12px;font-weight:650}.learn-steps b{color:var(--orange);font:500 10px/1 var(--font-geist-mono),monospace;margin-right:9px}footer{border-top:1px solid var(--line);min-height:92px;padding:0 clamp(22px,5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:11px;color:var(--muted)}footer>span{color:var(--ink);font-weight:750;font-size:15px}footer p{justify-self:center}footer a{justify-self:end;color:var(--ink);text-decoration:none;font-weight:650}

@media(max-width:900px){.intro{grid-template-columns:1fr;gap:30px}.intro-copy{max-width:600px}.studio-topbar{align-items:flex-start}.preset-area{align-items:flex-start;flex-direction:column;gap:10px}.now-playing{grid-template-columns:120px 120px 1fr}.now-playing>p{display:none}.envelope-panel{grid-template-columns:1fr 1fr}.harmonic-chart{height:300px}}
@media(max-width:640px){.site-header{height:66px;grid-template-columns:1fr auto}.header-note{display:none}.about-link{font-size:11px}.intro{padding-top:58px}.intro h1{font-size:clamp(47px,15vw,68px)}.studio{width:calc(100% - 20px);border-radius:20px}.studio-topbar{padding:18px}.envelope-toggle{margin-top:20px;font-size:0}.envelope-toggle span{font-size:14px}.envelope-panel{grid-template-columns:1fr;padding:18px}.keyboard-panel{padding:22px 18px 17px}.now-playing{grid-template-columns:1fr auto;gap:15px}.waveform{grid-column:1/-1;height:38px}.frequency-readout{border:0;padding:0;text-align:right}.piano{min-width:720px;height:170px}.spectrum-panel{padding:30px 18px}.spectrum-heading{flex-direction:column}.spectrum-actions{align-self:stretch}.spectrum-actions button{flex:1}.harmonic-chart{margin-top:30px;padding-left:35px;height:285px}.grid-lines i{margin-left:35px}.bars{gap:7px}.chart-legend{flex-wrap:wrap}.chart-legend .drag-hint{width:100%;margin-left:0}.learn-steps{grid-template-columns:1fr;gap:18px;max-width:230px;margin-left:auto;margin-right:auto}footer{grid-template-columns:1fr auto}footer p{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}