:root{--bg:#090909;--panel:#111;--ink:#f0eee8;--muted:#777;--line:#2b2b2b;--accent:#dfff00}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}
.topbar{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800;letter-spacing:.08em}.brand-mark{width:18px;height:18px;border:1px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 5px var(--bg)}.topbar p{margin:0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.14em}.info-button{margin-left:auto;width:29px;height:29px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.workspace{min-height:calc(100vh - 62px);display:grid;grid-template-columns:minmax(0,1fr) 370px}.stage{padding:18px 22px 14px;display:flex;flex-direction:column;min-width:0}.stage-meta,.stage-footer,.section-label,.range-ends{display:flex;justify-content:space-between;color:#747474;font-size:9px;letter-spacing:.16em}.canvas-wrap{width:min(100%,calc(100vh - 130px));aspect-ratio:1;margin:auto;position:relative;background:#090909;overflow:hidden}.canvas-wrap canvas{width:100%;height:100%;display:block}.crosshair{position:absolute;pointer-events:none;opacity:.07;background:#fff}.crosshair-x{height:1px;left:0;right:0;top:50%}.crosshair-y{width:1px;top:0;bottom:0;left:50%}
.controls{border-left:1px solid var(--line);background:var(--panel);overflow:auto}.controls section{padding:20px 22px;border-bottom:1px solid var(--line)}.mode-tabs{height:52px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.mode-tabs button{border:0;border-right:1px solid var(--line);background:#0d0d0d;color:#666;font-size:10px;letter-spacing:.12em;cursor:pointer;position:relative}.mode-tabs button.active{background:#181818;color:var(--ink)}.mode-tabs button.active:after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--accent)}.mode-tabs i{display:inline-block;width:5px;height:5px;margin-left:5px;background:var(--accent);border-radius:50%}
.frequency-block{padding-top:22px!important}.reset{border:0;background:none;color:#6e6e6e;font-size:9px;cursor:pointer;letter-spacing:.12em}.frequency-row{display:flex;align-items:baseline;margin:20px 0 13px}.frequency-row input{width:100%;min-width:0;background:transparent;color:var(--ink);border:0;outline:0;font-size:62px;font-weight:300;letter-spacing:-.055em}.frequency-row span{font-size:18px;color:#777}.controls label{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:17px;color:#a7a7a7;font-size:11px;letter-spacing:.05em}.controls output{color:#696969}.controls input[type=range]{grid-column:1/-1;width:100%;height:2px;appearance:none;background:#363636;outline:0}.controls input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:var(--ink);cursor:pointer}.hero-range{height:3px!important}.hero-range::-webkit-slider-thumb{width:14px!important;height:14px!important;background:var(--accent)!important}.range-ends{margin-top:8px}
.frequency-pair{display:grid;grid-template-columns:1fr 20px 1fr;align-items:end;gap:7px;margin:18px 0}.frequency-pair>label{display:block;margin:0;color:#666}.frequency-pair>label span{display:flex;align-items:baseline;gap:4px;margin-top:6px;color:#777}.frequency-pair input{width:100%;background:#0a0a0a;border:1px solid #333;color:var(--ink);padding:9px 7px;font-size:18px}.frequency-pair b{text-align:center;padding-bottom:10px;color:var(--accent)}.select-label{display:grid!important;grid-template-columns:1fr!important}.select-label select{width:100%;margin-top:8px;background:#0a0a0a;border:1px solid #333;color:var(--ink);padding:10px;outline:0}.motion-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.toggle{display:flex!important;align-items:center;justify-content:space-between;border:1px solid #333;padding:10px;margin-top:17px!important}.toggle input{display:none}.toggle span{width:28px;height:14px;border-radius:10px;background:#333;position:relative}.toggle span:after{content:"";position:absolute;width:10px;height:10px;left:2px;top:2px;border-radius:50%;background:#777;transition:.2s}.toggle input:checked+span{background:#4e5700}.toggle input:checked+span:after{left:16px;background:var(--accent)}.transport{display:grid;grid-template-columns:1fr 42px;gap:8px;margin-top:18px}.transport button{height:42px;border:1px solid #444;background:transparent;color:var(--ink);cursor:pointer}.transport #playMotion{display:flex;align-items:center;justify-content:center;gap:11px;font-size:10px;letter-spacing:.1em}.transport #playMotion b{color:var(--accent)}
.color-row{display:grid;grid-template-columns:1fr 1fr 38px;gap:8px;margin-top:16px}.color-field{border:1px solid var(--line);padding:8px!important;margin:0!important;display:flex!important;align-items:center;justify-content:space-between}.color-field input{width:22px;height:22px;border:0;padding:0;background:none}.invert{background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer}.variation{width:calc(100% - 44px);margin:20px 22px 10px;padding:14px 15px;border:1px solid #4a4a4a;background:transparent;color:var(--ink);display:flex;justify-content:space-between;cursor:pointer;font-size:11px;letter-spacing:.12em}.variation:hover{background:var(--ink);color:var(--bg)}
.export-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 22px 22px}.export-row button,.motion-export button{background:var(--accent);border:0;padding:15px 11px;text-align:left;font-size:10px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between}.motion-export{padding:0 22px 22px}.motion-export button{width:100%}.motion-export small{display:block;color:#555;font-size:8px;letter-spacing:.1em;margin-top:8px;text-align:center}.motion-export.recording button{background:#ff5e4d}.motion-export.recording b{animation:blink .8s infinite}@keyframes blink{50%{opacity:.2}}
dialog{max-width:460px;background:#151515;color:var(--ink);border:1px solid #444;padding:42px;box-shadow:0 24px 80px #000}dialog::backdrop{background:#000b}dialog button{position:absolute;right:16px;top:12px;border:0;background:none;color:#aaa;font-size:26px;cursor:pointer}.eyebrow{font-size:9px;letter-spacing:.18em;color:var(--accent)}dialog h2{font-size:38px;line-height:1.02;margin:18px 0}dialog p{color:#999;line-height:1.6;font-size:14px;margin:0}
@media(max-width:800px){.topbar p{display:none}.workspace{display:block}.stage{height:auto;padding:14px}.canvas-wrap{width:100%}.controls{border-left:0;border-top:1px solid var(--line)}.frequency-row input{font-size:54px}}
.audio-source{margin-top:14px;padding-top:14px;border-top:1px solid #292929}.file-drop{display:flex!important;align-items:center;justify-content:space-between;border:1px dashed #494949;padding:13px!important;margin:0!important;cursor:pointer}.file-drop b{color:var(--accent);font-size:10px}.file-drop span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:9px}.audio-source audio{width:100%;height:34px;margin-top:10px;filter:invert(1);opacity:.75}.clip-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.clip-row label{display:grid!important;grid-template-columns:1fr 30px!important}.clip-row input{grid-column:1;background:#090909;border:1px solid #333;color:var(--ink);padding:7px;min-width:0}.clip-row label span{align-self:center;color:#666}.audio-bands{display:flex;justify-content:space-between;gap:5px;margin-top:13px;color:#575757;font-size:7px;letter-spacing:.04em}.format-picker{margin-top:18px}.format-picker>span{color:#777;font-size:9px;letter-spacing:.13em}.format-picker>div{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}.format-picker button{height:34px;background:#0a0a0a;border:1px solid #333;border-right:0;color:#666;font-size:10px;cursor:pointer}.format-picker button:last-child{border-right:1px solid #333}.format-picker button.active{background:var(--ink);color:var(--bg)}.motion-export-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.motion-export-buttons button{width:100%}.render-status{margin-top:12px}.render-status span{display:block;height:2px;background:linear-gradient(90deg,var(--accent),#444,var(--accent));background-size:200% 100%;animation:progress 1.3s linear infinite}.render-status b{display:block;margin-top:8px;color:#777;font-size:8px;letter-spacing:.1em;text-align:center}@keyframes progress{to{background-position:-200% 0}}.canvas-wrap{transition:width .25s,aspect-ratio .25s}.stage{overflow:hidden}@media(max-width:800px){.motion-options{grid-template-columns:1fr 1fr}.audio-bands{font-size:6px}}