:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#dee4e8;background:#060708;--ink:#e8eff3;--dim:#879199;--edge:#30383f;--acid:#b2fa65;--red:#f05163;--panel:#101519}
*{box-sizing:border-box}body{margin:0;min-width:330px;background:radial-gradient(ellipse 70% 44% at 32% 3%,#3e1624 0%,transparent 70%),radial-gradient(ellipse at 90% 30%,#141c20,transparent 50%),#07090b;color:var(--ink);font-family:Inter,Arial,sans-serif}button,input,select{font:inherit}button,.upload,select{cursor:pointer}button,.upload{border:1px solid #434b50;background:linear-gradient(#2b3135,#13191e);color:#e4e6e8;border-radius:7px;padding:11px 14px;font-size:11px;letter-spacing:.09em;font-weight:800;transition:filter .15s,border-color .15s}button:hover,.upload:hover{filter:brightness(1.22);border-color:#9eacb4}button:focus-visible,input:focus-visible,select:focus-visible,.track-card:focus-visible{outline:2px solid var(--acid);outline-offset:2px}button:disabled{opacity:.48;cursor:wait}a{color:inherit}h1,h2,p{margin:0}.topbar{height:52px;display:flex;align-items:center;gap:22px;padding:0 max(18px,calc((100% - 1390px)/2));border-bottom:1px solid #384045;background:#090d10}.va{font-size:15px;text-decoration:none;letter-spacing:.12em;font-weight:950;color:var(--acid)}.va span{font-weight:400;color:var(--dim)}.division{font:700 9px/1 monospace;letter-spacing:.2em;color:#a4adb1;flex:1}.online{font:700 10px monospace;color:var(--red);padding:7px 10px;background:#17191b;border:1px solid #3e3338;border-radius:20px}.online.live{color:var(--acid);border-color:#577947}.machine{max-width:1420px;margin:0 auto;padding:24px 24px 50px}.hero{display:grid;grid-template-columns:1fr minmax(330px,530px);gap:18px;align-items:stretch;margin-bottom:16px}.identity{padding:30px 24px 24px 9px;display:flex;flex-direction:column;justify-content:center}.eyebrow{font:800 11px monospace;letter-spacing:.17em;color:var(--red)}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin:0 9px}.identity h1{font-size:clamp(64px,9vw,135px);letter-spacing:-.075em;line-height:1.03;font-weight:950}.identity h1 em{font-style:normal;color:var(--red);text-shadow:0 0 70px #cd274d80}.identity p{letter-spacing:.22em;font-size:11px;font-weight:750;color:#bfc6c8;margin:10px 0 25px}.meta{font:800 10px monospace;color:#9ba6ab;letter-spacing:.06em}.meta span{color:var(--red);padding:0 8px}.panel,.scope,.track-card{border:1px solid #3e4549;background:linear-gradient(145deg,#192025,#0d1115 65%);border-radius:13px;box-shadow:inset 0 1px #ffffff12,0 9px 34px #0006}.scope{padding:15px;min-height:230px;overflow:hidden}.scope-head,.scope-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 10px monospace;letter-spacing:.09em;color:#9da8ae}.scope-head span:last-child{color:var(--acid)}.scope canvas{width:100%;height:183px;display:block}.scope-foot{color:#657177;font-size:9px}.transport{padding:12px;display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}.transport-buttons,.transport-settings,.session-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.primary{color:#09100b;background:linear-gradient(#ceff92,#85d941);border-color:#eaffca}.danger{background:linear-gradient(#6a2030,#2e151c);color:#ffd9dc;border-color:#b04b63}.numberfield{display:flex;gap:8px;align-items:center;font:800 10px monospace;color:var(--dim);white-space:nowrap}.numberfield input,.numberfield select{border:1px solid #424c50;border-radius:5px;background:#0b1014;color:#e6eff2;padding:8px;max-width:80px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:25px 0 10px;flex-wrap:wrap}.section-title h2,.session h2{font:900 14px/1.2 monospace;letter-spacing:.12em;color:#f0f3f4}.section-title>span{font:700 9px monospace;letter-spacing:.15em;color:#88939a}.macro-panel{padding:17px;display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:16px}.control{display:flex;flex-direction:column;gap:10px;min-width:0}.control-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font:800 10px monospace;letter-spacing:.05em}.control-top strong{color:var(--acid);font-size:10px;font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;accent-color:var(--red);cursor:pointer}.control small{color:#7e878b;font-size:10px}.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.track-card{padding:15px 16px;border-color:#3a424a;transition:border-color .15s}.track-card.selected{border-color:#ba5a6c;box-shadow:inset 0 1px #ffffff16,0 0 0 1px #812a3e88,0 9px 34px #0006}.track-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.track-id{font:900 11px monospace;letter-spacing:.14em;color:var(--dim)}.track-name{font:900 25px/1.2 monospace;letter-spacing:-.02em}.track-sub{color:#89949c;font:700 10px monospace;letter-spacing:.09em}.track-head button{white-space:nowrap;background:#293435;color:var(--acid);border-color:#5a6869}.track-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:13px}.track-bottom button{padding:7px 10px;font-size:9px}.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;margin-top:15px}.step{width:100%;min-width:0;height:42px;padding:0;border:1px solid #394249;border-radius:4px;background:#22292d;position:relative;overflow:hidden}.step::after{content:'';position:absolute;left:24%;right:24%;bottom:5px;height:4px;background:#647177;border-radius:8px}.step.on{background:linear-gradient(#aa4056,#511e2c);border-color:#db687a}.step.on::after{background:#ffd1d6}.step.selected{outline:2px solid var(--acid);outline-offset:1px}.step.playing{box-shadow:0 0 0 2px #c8ff7c,inset 0 0 12px #d3ff6955}.step span{display:block;font-size:10px;color:#cad2d8}.lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px}.editor,.stepeditor{padding:15px}.section-title.local{margin:0 0 15px}.voice-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gene-controls{border-top:1px solid #354047;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:15px;margin-top:18px}.gene-controls span{font:700 10px monospace;color:#abb3b7}.upload{position:relative;display:inline-flex;align-items:center;justify-content:center}.upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.hint{color:#929da6;font:12px/1.6 system-ui;margin-top:14px}.session{padding:18px;margin-top:15px;display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap}.session h2{margin-bottom:6px}.session p{font-size:12px;color:#97a0a4;max-width:430px;line-height:1.5}.session select{padding:11px 8px;border:1px solid #48565a;border-radius:7px;background:#11191d;color:#f0f2f3;font:700 11px monospace;min-width:110px}.compact{padding:11px 14px}footer{margin-top:30px;border-top:1px solid #343c41;padding-top:19px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:10px monospace;letter-spacing:.06em;color:#88949a}footer a{color:var(--acid)}#status{color:#cbd3d5;max-width:520px}.warning{color:#f9cc88!important}
@media(max-width:1100px){.macro-panel{grid-template-columns:repeat(3,1fr)}.voice-controls{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.machine{padding:16px}.hero,.lower{grid-template-columns:1fr}.identity{padding:18px 0}.tracks{grid-template-columns:1fr}.macro-panel{grid-template-columns:repeat(2,1fr)}.voice-controls{grid-template-columns:repeat(2,1fr)}.track-name{font-size:20px}.steps{gap:3px}.step{height:37px}.division{display:none}}@media(max-width:480px){.identity h1{font-size:70px}.transport button{padding:10px 11px}.scope canvas{height:146px}.steps{gap:2px}.step{height:35px}.track-card{padding:12px}.track-id{font-size:9px}}


/* SYNARX X GEN 02 / inspired by tactile hardware hierarchy, not proprietary artwork */
.matrix-panel{padding:21px 22px 17px;background:radial-gradient(ellipse at 100% 0%,#3f2632aa,transparent 43%),linear-gradient(145deg,#192126,#0b1013 72%);border-color:#66505a;position:relative;overflow:hidden}
.matrix-panel:before{content:'CV';position:absolute;right:-8px;top:7px;font:900 88px/1 monospace;letter-spacing:-.08em;color:#ffffff07;pointer-events:none}
.matrix-top{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:20px;position:relative}
.matrix-title strong{font:900 21px/1.15 monospace;letter-spacing:-.035em;color:#f4f5f4}
.matrix-title strong span{color:var(--red)}.matrix-title p{font:12px/1.5 system-ui;color:#9caaaf;margin-top:6px;max-width:700px}
.matrix-top button{background:#26171f;color:#f2b2bf;border:1px solid #a64a62}
.mod-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:17px 19px;background:#090e12aa;border:1px solid #37434b;border-radius:9px;margin-bottom:17px}
.motion-control .control-top strong{color:#f3b3c1}.motion-control input{accent-color:#f06b86}
.matrix-head,.matrix-row{display:grid;grid-template-columns:minmax(96px,1fr) minmax(130px,1.45fr) minmax(104px,1.1fr) 42px;align-items:center;gap:12px}
.matrix-head{padding:0 9px 8px;color:#8f9ba2;font:800 9px monospace;letter-spacing:.14em}
.mod-routes{display:flex;flex-direction:column;gap:7px}
.matrix-row{border:1px solid #37414a;border-left:3px solid #c25775;border-radius:7px;background:linear-gradient(90deg,#1f1720,#10171c);padding:9px 8px 9px 12px;transition:border-color .15s}
.matrix-row:focus-within{border-color:#d95d7a}
.matrix-row select{width:100%;min-width:0;border:1px solid #44515a;border-radius:5px;background:#0e1319;color:#d9e7e5;padding:10px 9px;font:800 11px monospace}
.depth-control{display:flex;gap:9px;align-items:center;min-width:0}.depth-control input{min-width:0;width:100%;accent-color:#ca5976}.depth-control strong{font:800 11px monospace;color:var(--acid);min-width:34px;text-align:right}
.matrix-row button{height:37px;padding:0;font:700 20px monospace;color:#ff96a9;background:#23131a;border-color:#66404d}
.matrix-empty{padding:12px 6px;color:#9a7c84;font:700 10px monospace;letter-spacing:.08em}
.matrix-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px;font:800 9px monospace;color:#899ba1;letter-spacing:.13em}
.matrix-foot i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a8ed69;margin-right:7px;box-shadow:0 0 12px #a8ed6988}
.track-card:nth-child(1){--rack-accent:#df587a}.track-card:nth-child(2){--rack-accent:#ed995d}.track-card:nth-child(3){--rack-accent:#c4ec80}.track-card:nth-child(4){--rack-accent:#74c9d4}
.track-card{border-top:2px solid var(--rack-accent);position:relative}
.track-card .track-name{color:var(--rack-accent)}
.track-card .step.on{background:linear-gradient(160deg,var(--rack-accent),#222d31);border-color:var(--rack-accent)}
.scope{background:radial-gradient(ellipse at 53% 36%,#16312c,#071215 58%,#060a0c);border-color:#4b6161}
.identity h1{font-family:Impact,'Arial Black',system-ui,sans-serif;letter-spacing:-.048em;font-weight:950}
@media(max-width:800px){.mod-rates{grid-template-columns:1fr;gap:14px}.matrix-panel{padding:16px}.matrix-head,.matrix-row{grid-template-columns:minmax(75px,1fr) minmax(110px,1.3fr) minmax(76px,1fr) 36px;gap:6px}.matrix-row{padding:8px 5px}.matrix-row select{font-size:9px;padding:9px 4px}.depth-control{gap:3px}.depth-control strong{font-size:9px;min-width:27px}}
@media(max-width:425px){.matrix-head{font-size:8px}.matrix-row{grid-template-columns:75px minmax(100px,1.25fr) 75px 30px}.matrix-row button{height:31px}}
@media(prefers-reduced-motion:reduce){button,.track-card,.matrix-row{transition:none}}