@font-face{font-family:Syne;src:url('fonts/Syne-Regular.woff2')}@font-face{font-family:Instrument;src:url('fonts/InstrumentSans-Regular.woff2')}*{box-sizing:border-box}body{margin:0;background:#080a11;color:#e8ebf6;font-family:Instrument,Arial;min-height:100vh;overflow-x:hidden}.ambient{position:fixed;width:42vw;height:42vw;border-radius:50%;filter:blur(115px);opacity:.18;z-index:-1}.a1{background:#3156ff;top:-20vw;left:-17vw}.a2{background:#e14cbb;right:-20vw;bottom:-25vw}.topbar,main{max-width:1500px;margin:auto}.topbar{height:76px;padding:0 28px;display:flex;align-items:center;gap:22px;border-bottom:1px solid #202432}.brand{color:#fff;text-decoration:none;letter-spacing:.14em;font:16px Syne}.brand b{color:#8a75ff}.mark{font-size:33px;color:#a795ff;vertical-align:middle}.status{margin-left:auto;font-size:12px;color:#969db7;text-transform:uppercase;letter-spacing:.1em}.status i{width:8px;height:8px;border-radius:50%;background:#5d6577;display:inline-block;margin-right:8px}.status i.on{background:#52e6a9;box-shadow:0 0 12px #52e6a9}.ghost,.panel-head button{background:none;border:1px solid #353a4e;border-radius:7px;color:#bbc2d9;padding:8px 11px;cursor:pointer}main{padding:40px 28px 50px}.hero{display:flex;gap:30px;justify-content:space-between;align-items:end;padding:20px 0 42px}.eyebrow,.panel-head span{font-size:10px;letter-spacing:.17em;color:#8e80f8;font-weight:bold}.hero h1{font:clamp(35px,4vw,62px)/.96 Syne;margin:10px 0 18px;letter-spacing:-.055em}.hero em{font-style:normal;color:#a799ff}.intro{max-width:530px;color:#aeb5cb;line-height:1.5}.transport{display:flex;align-items:center;gap:13px;background:#121521;border:1px solid #2d3143;border-radius:15px;padding:13px 17px;min-width:310px}.transport b{display:block}.transport small{color:#939bb2;font-size:12px}.play,.round{border:0;cursor:pointer}.play{background:linear-gradient(135deg,#846ffb,#be64e9);color:white;border-radius:50%;width:44px;height:44px;font-size:17px}.play.running{background:#ef5a97}.round{margin-left:auto;background:#252a3b;color:#c7cbe1;border-radius:50%;width:30px;height:30px}.dashboard{display:grid;grid-template-columns:280px 1fr;gap:18px}.panel{background:rgba(18,21,33,.9);border:1px solid #2b3042;border-radius:13px;box-shadow:0 12px 35px #00000021}.controls{padding:18px;align-self:start}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.panel-head small{color:#737b96;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.panel-head button{font-size:10px;padding:4px 7px}label{font-size:12px;color:#b7bdd0;display:block;margin:15px 0 6px}select{appearance:none;background:#222638;color:#e4e6f0;border:1px solid #383e53;border-radius:7px;width:100%;padding:10px;font:13px Instrument}.control{margin:18px 0}.control>div{display:flex;justify-content:space-between}.control label{margin:0}.control output{color:#a896ff;font:12px Syne}input[type=range]{width:100%;accent-color:#9a85ff;margin:11px 0 0}.switchrow{display:flex;align-items:center;gap:7px;margin:18px 0;color:#b7bdd0;font-size:12px}.switchrow>span{margin-right:auto}.seg{background:#24283a;border:1px solid #3a4056;color:#abb1c5;border-radius:6px;font-size:11px;padding:6px;cursor:pointer}.seg.active{background:#5e50c5;border-color:#8878f7;color:#fff}.toggle{background:#303547;border:0;width:34px;height:18px;border-radius:12px;cursor:pointer}.toggle:after{content:'';display:block;width:13px;height:13px;background:#979daf;border-radius:50%;margin:2px;transition:.2s}.toggle.on{background:#816cf4}.toggle.on:after{transform:translateX(16px);background:#fff}.export{width:100%;margin-top:8px;background:#282348;border:1px solid #7867df;border-radius:7px;color:#e7e1ff;padding:11px;cursor:pointer;font:12px Instrument}.export.recording{background:#7a2349;border-color:#f468a2}.viz-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:18px}.visual{padding:15px;height:220px}.visual canvas{width:100%;height:165px;display:block}.spectral{grid-column:auto}.layerPanel,.keyboard-panel{margin-top:18px;padding:15px}.layerView{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;min-height:85px;align-items:end}.layer{height:64px;position:relative;background:#1c2030;border-radius:5px;overflow:hidden;min-width:0}.layer .fill{position:absolute;bottom:0;width:100%;background:linear-gradient(#e96ae2,#7e73f8);border-radius:5px;transition:height .1s}.layer .freq{position:absolute;bottom:4px;width:100%;z-index:1;text-align:center;font-size:9px;color:white;text-shadow:0 1px 4px #000}.keyboard{height:74px;display:flex;position:relative;padding-right:1px}.key{height:74px;flex:1;border:1px solid #34394b;background:#e9eaf1;border-radius:0 0 4px 4px;position:relative}.key.black{background:#191d2b;height:46px;max-width:18px;margin:0 -9px;z-index:2;border-color:#03040a}.key.active{background:#a78bfa;box-shadow:inset 0 -5px #6b54d7}.key.black.active{background:#e76acf}.close{float:right;background:none;border:0;color:#fff;font-size:25px;cursor:pointer}dialog{max-width:530px;background:#171a28;color:#dce0ef;border:1px solid #4a4569;border-radius:15px;padding:30px;line-height:1.55;box-shadow:0 30px 90px #000}dialog::backdrop{background:#02030bbb}dialog h2{font-family:Syne;margin-top:7px}dialog li{margin:9px 0}@media(max-width:950px){.dashboard{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}.controls .panel-head,.export{grid-column:1/-1}.viz-grid{grid-template-columns:1fr 1fr}.spectral{grid-column:1/-1}.hero{align-items:start;flex-direction:column}}@media(max-width:600px){main{padding:20px 14px}.topbar{padding:0 14px}.hero{padding-bottom:25px}.viz-grid{grid-template-columns:1fr}.spectral{grid-column:auto}.controls{display:block}.transport{min-width:0;width:100%}.layerView{grid-template-columns:repeat(4,1fr)}}