@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e8ece9;background:#172123;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{color:inherit}main{max-width:1320px;margin:auto;padding:30px 48px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #405052;padding-bottom:25px}.brand{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;letter-spacing:-1.5px;color:#f3f5f1;text-decoration:none}.brand span{color:#c8fa76}.brand sup{font-size:20px;margin-left:8px}.header-right{display:flex;gap:25px;align-items:center}.tag,.eyebrow,.panel-top,.strip-label,footer,.scope>div{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:1.2px}.power{background:#c8fa76;color:#1d2828;border:0;padding:12px 20px;border-radius:30px;font-weight:700}.power.enabled{background:#30413a;color:#c8fa76}.intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:38px 0}.eyebrow{color:#b7c4bd;margin:0 0 12px}h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-3px;font-size:56px;line-height:1.04;margin:0;font-weight:500}.scope{border:1px solid #465456;border-radius:12px;padding:16px 20px;background:#111b1d}canvas{width:100%;height:100px;display:block}.scope>div{display:flex;justify-content:space-between;color:#9eb0a5;font-size:12px;margin-top:10px}.instrument{background:#273335;border-radius:18px;border:1px solid #4b5858;overflow:hidden;box-shadow:0 18px 50px #0003}.panel-top{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #4b5858;color:#c1ccc6}.modules{display:grid;grid-template-columns:3fr 1fr}.oscillators{display:grid;grid-template-columns:repeat(3,1fr)}.module{padding:25px 24px 22px;border-right:1px solid #506060;--accent:#c8fa76}.module:nth-child(2){--accent:#c0b2fa}.module:nth-child(3){--accent:#ffa579}.filter{--accent:#8adce8;border-right:0;background:#303e40}.module-title{display:flex;align-items:center;gap:12px}.number{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--accent);color:var(--accent);border-radius:50%;font-size:12px}.module h2{font-family:'Space Grotesk';font-size:20px;font-weight:500;margin:0}.symbol{margin-left:auto;color:var(--accent);font-size:28px}.module-description{font-size:14px;color:#a6b8b1;margin:10px 0 25px}.module label{display:block;font-size:14px;color:#dce6df;margin-top:18px}select{display:block;width:100%;background:#1d292b;border:1px solid #647170;border-radius:7px;color:#f2f4ef;padding:11px;margin-top:8px}.slider-label{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:14px}output{font-family:'Space Grotesk';font-size:13px;color:var(--accent,#c8fa76)}input[type=range]{width:100%;accent-color:var(--accent,#c8fa76);cursor:pointer;height:18px;margin:0}.strip{border-top:1px solid #506060;border-bottom:1px solid #506060;background:#202c2e;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;gap:25px}.strip>div{display:flex;gap:24px;align-items:center}.strip-label{color:#aebdb6}.strip label{display:flex;align-items:center;gap:12px;font-size:14px}.strip input{width:90px}.strip output{min-width:45px}.play{padding:25px 24px 24px}.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.keyboard-header h2{font-family:'Space Grotesk';font-size:20px;font-weight:500;margin:0 0 6px}.keyboard-header p{font-size:14px;margin:0;color:#aebfb6}.octave{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:1px}.octave button{background:#384749;border:1px solid #667473;border-radius:6px;width:30px;height:32px;font-size:20px}.octave .stop{width:auto;font-size:12px;padding:0 10px;margin-left:8px}.keyboard{position:relative;display:flex;height:150px;user-select:none;touch-action:none;gap:5px}.key{border:0;border-radius:5px 5px 9px 9px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:12px 0;color:#4b5b56;box-shadow:0 5px 0 #a8b5ab;flex:1;background:#ecf0e5}.key span{font-size:13px}.key small{font-size:12px;color:#7a8980;margin-top:5px}.key.black{position:absolute;width:6.2%;height:94px;background:#152022;color:#d9e6dd;box-shadow:0 5px 0 #060c0d;border:1px solid #52615b;z-index:1;transform:translateX(-50%);border-radius:0 0 6px 6px}.key.black small{color:#a5b6ac}.key.active{background:#c8fa76;color:#172123;box-shadow:0 2px 0 #81a644;transform:translateY(3px)}.key.black.active{transform:translate(-50%,3px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8adce8;outline-offset:4px}footer{display:flex;justify-content:space-between;padding:25px 0;color:#9cadA4;font-size:12px}footer span:first-child{font-family:'DM Sans';font-size:14px;letter-spacing:0}@media(max-width:950px){main{padding:25px}.modules{grid-template-columns:1fr}.filter{border-top:1px solid #506060}.filter{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}.filter .module-title{grid-column:1/-1}.filter .module-description{display:none}.filter label{margin:0}.strip>div{gap:15px}.strip-label{display:none}}@media(max-width:650px){main{padding:20px 14px}.tag{display:none}.brand{font-size:25px}.header-right{gap:0}.intro{grid-template-columns:1fr;gap:22px;padding:28px 0}h1{font-size:44px;letter-spacing:-2px}.scope canvas{height:65px}.oscillators{grid-template-columns:1fr}.module{border-right:0;border-bottom:1px solid #506060;padding:20px}.module-description{margin:8px 0 15px}.filter{display:block;border:0}.filter label{margin-top:18px}.strip{display:block;padding:20px}.strip>div{justify-content:space-between}.strip label{gap:7px}.strip input{width:65px}.volume{margin-top:20px}.volume input{width:100%}.keyboard-header{align-items:flex-start;gap:15px;flex-direction:column}.play{padding:20px 12px}.keyboard{height:135px;gap:3px}.key.black{width:7%;height:85px}.key small{font-size:12px}.panel-top span:last-child{display:none}footer span:last-child{display:none}}