@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--bg:#0b1210;--ink:#e7efe5;--muted:#9baea1;--line:#3a5140;--panel:#14231b;--shade:#1c3024;--mint:#c2e1b8;--gold:#e7ca92;--mono:'DM Mono',monospace;--serif:'Instrument Serif',Georgia,serif;--body:'DM Sans',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--body)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:var(--mint);text-decoration:none}a:hover{color:var(--gold)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.skip{position:absolute;top:-99px;left:15px;background:var(--mint);color:#111;padding:10px;z-index:20}.skip:focus{top:15px}
.top{min-height:76px;padding:16px clamp(20px,3vw,54px);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:#101d15}.brand{display:flex;align-items:center;gap:11px;letter-spacing:.16em;font-weight:700;font-size:13px;color:var(--ink)}.mark{height:40px;width:40px;border:1px solid #76977d;display:grid;place-items:center;font:italic 25px var(--serif);color:var(--gold)}.brand small{display:block;font:9px var(--mono);letter-spacing:.07em;color:var(--muted)}.top nav{margin-left:auto;display:flex;gap:20px}.top nav a{font-size:12px;white-space:nowrap}.engine{font:10px var(--mono);color:var(--mint);border-left:1px solid var(--line);padding-left:17px;max-width:280px}
main{max-width:1520px;margin:0 auto;padding:0 clamp(17px,3vw,54px) 50px}.hero{position:relative;padding:60px 0 45px;border-bottom:1px solid var(--line)}.eyebrow,.section-bar{font:11px var(--mono);letter-spacing:.08em;color:var(--mint)}.hero h1{font:500 clamp(55px,8vw,108px)/.93 var(--body);letter-spacing:-.07em;margin:22px 0}.hero h1 em{font:italic 1.1em var(--serif);letter-spacing:-.03em;color:var(--gold)}.hero p{font-size:17px;color:#bbccbd;max-width:640px;margin:0}.hero-right{position:absolute;right:4px;bottom:48px;min-width:190px;border-left:1px solid var(--line);padding-left:23px;display:grid;gap:3px;color:var(--gold);font:11px var(--mono)}.hero-right strong{font:44px var(--serif);color:var(--ink)}.hero-right small{color:var(--muted);font-size:10px}
.section-bar{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 0;color:var(--mint)}.section-bar span:last-child{color:var(--muted);font-size:10px}.presets{margin:27px 0 32px}.preset-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.preset{text-align:left;min-height:132px;display:flex;flex-direction:column;align-items:flex-start;padding:17px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:5px}.preset:hover{border-color:#86aa8e}.preset.selected{border-color:var(--mint);background:#203a28}.preset>span{font:11px var(--mono);color:var(--gold)}.preset strong{font-size:19px;line-height:1.2;letter-spacing:-.03em;font-weight:600;margin:11px 0 3px}.preset small{font-size:11px;color:var(--muted)}
.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.72fr);align-items:start;gap:18px}.mix-panel,.output-panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px 25px 24px}.source-rows{display:grid;gap:12px;margin-top:7px}.source{border:1px solid #3f5c46;border-radius:5px;background:#102016;padding:18px}.source-top{display:flex;gap:12px;justify-content:space-between;align-items:start}.source strong{font-size:19px;line-height:1.2;display:block}.source small{font:10px var(--mono);color:var(--muted)}.source .tag{font:10px var(--mono);white-space:nowrap;padding:5px 8px;border:1px solid #688971;color:var(--mint)}.source .level{display:flex;gap:12px;align-items:center;margin-top:18px}.source input[type=range]{width:100%;accent-color:var(--mint);cursor:pointer}.source .level output{font:12px var(--mono);color:var(--mint);min-width:53px;text-align:right}.source .level label{width:100%;display:block;color:var(--muted);font-size:11px}.source .level span{font:10px var(--mono)}.source .foot{margin-top:10px;font:11px var(--body);color:#9eb6a4}.mix-tools{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:23px;padding-top:25px}.mix-tools>div{display:grid;gap:15px}.toggle{font-size:12px;color:#c2d2c2;display:flex;align-items:center;gap:8px}.toggle input{accent-color:var(--mint)}.range-label{display:grid;gap:6px;font:11px var(--mono);color:var(--muted)}.range-label input{accent-color:var(--mint)}.range-label output{color:var(--gold);font:12px var(--mono)}.file-bar{display:flex;align-items:center;gap:15px;margin-top:28px;flex-wrap:wrap}.file-button{border:1px solid #809780;padding:11px 16px;border-radius:4px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}.file-button:hover{background:#294531}.file-bar span{font-size:11px;color:var(--muted)}
.playbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:12px 0 18px}.playbar>button:not(.btn){height:47px;width:47px;border:1px solid #608c6b;background:#223f2b;color:var(--ink);font-size:18px;border-radius:50%}.playbar strong{font:17px var(--mono);letter-spacing:-.055em;margin:0 7px}.btn{border-radius:4px;font-size:13px;font-weight:600;border:1px solid #668d6f;padding:12px 17px;min-height:42px}.btn.primary{background:var(--mint);color:#122317;border-color:var(--mint)}.btn.secondary{background:transparent;color:var(--ink)}#wave{display:block;width:100%;background:#0d1a12;border:1px solid var(--line);border-radius:4px;max-height:163px}.meters{display:flex;gap:18px;margin:18px 0}.meters div{display:grid;gap:3px}.meters span{font:10px var(--mono);color:var(--muted)}.meters strong{font:15px var(--mono);color:var(--gold)}.status{font-size:12px;color:#b4c8bb}.cut{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:22px 0}.cut label{font-size:11px;color:var(--muted);display:grid;gap:7px}.cut input{width:100%;background:#0c1c13;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:10px}.actions{display:flex;gap:8px;flex-wrap:wrap}.continue{display:block;width:100%;margin-top:16px;background:#304d36;color:#ddf2d8;border:1px solid #668d6f;padding:13px;font-weight:600;border-radius:4px}.continue:hover{background:#3b6545}.fine{font-size:11px;color:var(--muted);line-height:1.6;margin:17px 0 18px}.credits{border-top:1px solid var(--line);padding-top:15px}.credits summary{font-size:12px;color:var(--mint);cursor:pointer}.credits #credits{display:grid;gap:11px;margin:13px 0;font-size:11px}.credits #credits div{padding-bottom:8px;border-bottom:1px solid var(--line)}.credits #credits strong{color:var(--gold);display:block}.credits>a{font-size:11px}.toast{position:fixed;right:20px;bottom:20px;max-width:420px;padding:12px 20px;background:var(--mint);color:#15281c;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 40px #0008;border-radius:4px;font-size:12px}.toast.show{opacity:1}footer{padding:24px clamp(20px,3vw,54px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font:10px var(--mono)}
@media(max-width:1150px){.hero-right{position:static;margin-top:22px}.workspace{grid-template-columns:1fr}.source-rows{grid-template-columns:repeat(2,1fr)}.engine{display:none}}
@media(max-width:760px){.top{flex-wrap:wrap}.top nav{width:100%;justify-content:flex-start;overflow-x:auto;order:3}.preset-list{grid-template-columns:repeat(2,1fr)}.source-rows{grid-template-columns:1fr}.hero{padding-top:36px}.hero h1{font-size:64px}}
@media(max-width:480px){.hero h1{font-size:52px}.mix-panel,.output-panel{padding:13px 15px 19px}.preset-list{gap:7px}.preset{padding:12px;min-height:115px}.preset strong{font-size:16px}.preset small{font-size:10px}.mix-tools{grid-template-columns:1fr}.playbar .btn{width:100%}.cut{grid-template-columns:1fr}.section-bar span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}