:root { color-scheme:dark; --black:#090909; --panel:#151515; --panel-2:#1c1c1c; --line:#303030; --line-lite:#494949; --text:#eeeeea; --muted:#929292; --green:#32d583; --yellow:#f4c74b; --orange:#ef6b4a; font-family:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; overflow-x:hidden; color:var(--text); background:#0d0d0d; } button,input,select { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.35; cursor:not-allowed; }
.daw-topbar { position:sticky; top:0; z-index:3; height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 18px; border-bottom:1px solid var(--line); background:#151515; }.studio-logo { display:flex; align-items:center; gap:8px; color:var(--text); font-family:"DM Mono",monospace; font-size:.75rem; font-weight:500; letter-spacing:.06em; text-decoration:none; }.studio-logo span { display:grid; width:26px; height:26px; place-items:center; border-radius:4px; color:#0e0e0e; background:var(--green); font-size:.68rem; font-weight:900; }.project-bar { display:flex; align-items:center; gap:12px; }.project-bar input { width:210px; padding:5px 0; border:0; border-bottom:1px solid transparent; outline:0; color:var(--text); background:transparent; font-size:.78rem; font-weight:800; text-align:center; }.project-bar input:focus { border-color:var(--green); }.project-bar span { color:var(--muted); font-family:"DM Mono",monospace; font-size:.62rem; }.top-actions { display:flex; justify-content:flex-end; gap:8px; }.top-button { padding:7px 12px; border:1px solid var(--line-lite); border-radius:4px; color:var(--text); background:#212121; font-size:.68rem; font-weight:800; }.top-button.primary { border-color:var(--green); color:#0c1611; background:var(--green); }
.daw-shell { display:grid; grid-template-columns:72px minmax(0,1fr); min-height:calc(100vh - 84px); }.tool-rail { display:flex; flex-direction:column; align-items:center; gap:9px; padding:14px 8px; border-right:1px solid var(--line); background:#111; }.rail-button { display:grid; width:54px; min-height:56px; place-items:center; gap:3px; border:1px solid transparent; border-radius:4px; color:var(--muted); background:transparent; font-size:1.2rem; text-decoration:none; }.rail-button span { font-family:"DM Mono",monospace; font-size:.54rem; text-transform:uppercase; }.rail-button:hover,.rail-button.active { border-color:#394f43; color:var(--green); background:#19211d; }.rail-button.back { margin-top:auto; }
.daw-main { min-width:0; display:flex; flex-direction:column; }.transport-bar { display:flex; align-items:center; gap:18px; min-height:76px; padding:12px 24px; border-bottom:1px solid var(--line); background:#181818; }.transport-buttons { display:flex; gap:6px; }.transport-button { width:36px; height:36px; border:1px solid var(--line-lite); border-radius:50%; color:#dedede; background:#232323; font-size:.74rem; }.transport-button.play { border-color:var(--green); color:#102218; background:var(--green); }.readout { min-width:134px; color:#e5e5e0; font-family:"DM Mono",monospace; font-size:1.2rem; letter-spacing:.03em; }.readout span { color:#5d5d5d; }.dial-control { display:grid; grid-template-columns:auto auto; column-gap:9px; min-width:120px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.61rem; letter-spacing:.06em; }.dial-control output { color:var(--text); text-align:right; }.dial-control input { grid-column:1 / -1; width:100%; margin-top:5px; accent-color:var(--green); }.browser-status { margin:0 0 0 auto; color:var(--muted); font-family:"DM Mono",monospace; font-size:.61rem; letter-spacing:.06em; }.browser-status i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.arranger-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 18px; border-bottom:1px solid var(--line); background:#202020; }.arranger-toolbar strong { margin-right:10px; font-size:.8rem; }.arranger-toolbar span { color:var(--muted); font-family:"DM Mono",monospace; font-size:.65rem; }.arranger-actions { display:flex; gap:7px; }.arranger-actions button { padding:6px 10px; border:1px solid var(--line-lite); border-radius:3px; color:#c7c7c7; background:#2a2a2a; font-family:"DM Mono",monospace; font-size:.62rem; text-transform:uppercase; }.arranger-actions button:hover:not(:disabled) { border-color:var(--green); color:var(--green); }
.arranger { display:grid; overflow:auto; min-height:385px; background:#111; }.ruler { display:grid; grid-template-columns:178px minmax(600px,1fr); min-height:34px; border-bottom:1px solid var(--line); background:#1a1a1a; }.step-numbers { display:grid; grid-template-columns:repeat(16,minmax(40px,1fr)); }.step-numbers span { display:grid; place-items:center; border-left:1px solid #303030; color:#8d8d8d; font-family:"DM Mono",monospace; font-size:.6rem; }.track-area { display:grid; grid-template-columns:178px minmax(600px,1fr); }.track-labels { border-right:1px solid var(--line); background:#171717; }.track-label { height:158px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 18px; border-bottom:1px solid var(--line); }.track-label.master { height:57px; background:#1c1c1c; }.track-label b { color:#e9e9e4; font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.06em; }.track-label span { color:var(--muted); font-size:.67rem; }.timeline { min-width:600px; background:repeating-linear-gradient(90deg,transparent 0 calc(6.25% - 1px),rgba(255,255,255,.07) calc(6.25% - 1px) 6.25%); }.master-lane { height:57px; padding:13px 17px; border-bottom:1px solid var(--line); }.waveform { height:28px; opacity:.65; background:linear-gradient(90deg,transparent 0 1%,#363636 1% 2%,transparent 2% 3%,#545454 3% 4%,transparent 4% 6%,#313131 6% 8%,transparent 8% 10%,#515151 10% 11%,transparent 11% 14%,#313131 14% 15%,transparent 15% 18%,#555 18% 19%,transparent 19% 21%,#333 21% 25%,transparent 25% 26%,#4b4b4b 26% 28%,transparent 28%); }.drum-lane { min-height:158px; padding:10px 12px; border-bottom:1px solid var(--line); }.sequencer { display:grid; gap:6px; height:100%; }.track-row { min-height:31px; }.track-name { display:none; }.steps,.bass-notes { display:grid; grid-template-columns:repeat(16,minmax(40px,1fr)); gap:2px; }.step,.bass-step { height:29px; border:1px solid rgba(255,255,255,.1); border-radius:2px; background:rgba(255,255,255,.025); transition:background .13s,border-color .13s,transform .13s; }.step:hover,.bass-step:hover { border-color:#898989; }.step.active { border-color:#419e70; background:linear-gradient(135deg,#237549,#32d583); }.bass-lane { min-height:158px; padding:63px 12px; border-bottom:1px solid var(--line); }.bass-step { height:31px; background:#171717; }.bass-step.active { border-color:#e7ad41; background:linear-gradient(135deg,#9c6120,#f4c74b); }.step.playing,.bass-step.playing { transform:translateY(-2px); outline:2px solid white; outline-offset:1px; }
.lower-dock { display:grid; grid-template-columns:1.2fr .9fr 1fr; border-top:1px solid var(--line); background:#171717; }.device-panel { min-height:210px; padding:17px; border-right:1px solid var(--line); }.device-panel:last-child { border:0; }.panel-title { display:flex; align-items:baseline; gap:9px; }.panel-title p { margin:0; color:var(--muted); font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.07em; }.panel-title h1 { margin:0; font-size:1rem; }.pad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:22px; }.pad-grid button { min-height:83px; border:1px solid #3e3e3e; border-radius:4px; color:#ddd; background:linear-gradient(145deg,#303030,#181818); font-family:"DM Mono",monospace; font-size:.69rem; text-align:left; padding:10px; }.pad-grid button:hover,.pad-grid button:focus-visible { border-color:var(--green); box-shadow:inset 0 0 20px rgba(50,213,131,.13); }.pad-grid small { display:block; margin-top:8px; color:var(--muted); }.root-picker { display:grid; gap:8px; margin-top:26px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.64rem; }.root-picker select { border:1px solid var(--line-lite); border-radius:3px; padding:9px; color:var(--text); background:#222; font-family:"DM Mono",monospace; }.bass-panel > p { max-width:230px; margin:16px 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; }.mixer-panel { min-width:0; }.mixer-row { display:grid; grid-template-columns:58px 1fr 30px; gap:7px; align-items:center; margin-top:12px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.62rem; }.mixer-row input { min-width:0; accent-color:var(--green); }.mixer-row output { color:#ddd; text-align:right; font-size:.61rem; }.daw-footer { min-height:26px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 18px; border-top:1px solid var(--line); color:#777; background:#101010; font-family:"DM Mono",monospace; font-size:.56rem; letter-spacing:.05em; }
@media (max-width:900px) { .browser-status { display:none; }.lower-dock { grid-template-columns:1fr 1fr; }.mixer-panel { grid-column:1/-1; }.daw-footer span:nth-child(2) { display:none; } }
@media (max-width:650px) { .daw-topbar { grid-template-columns:1fr auto; height:auto; min-height:56px; }.project-bar { display:none; }.tool-rail { display:none; }.daw-shell { display:block; }.transport-bar { gap:11px; padding:11px; flex-wrap:wrap; }.readout { min-width:auto; font-size:1rem; }.dial-control { flex:1; min-width:110px; }.arranger-toolbar { padding:10px; }.arranger-actions button:last-child { display:none; }.ruler,.track-area { grid-template-columns:118px minmax(600px,1fr); }.track-label { padding:0 10px; }.lower-dock { grid-template-columns:1fr; }.device-panel { border-right:0; border-bottom:1px solid var(--line); }.pad-grid button { min-height:58px; }.daw-footer { font-size:.5rem; } }