:root{--bg:#090b0d;--panel:#11161b;--panel2:#0c1013;--line:#2b343d;--muted:#919aa6;--white:#f4f6f2;--acid:#c8ff35;--cyan:#55dcff;--pink:#ff3e9d}*{box-sizing:border-box}html{background:var(--bg);color:var(--white);font-family:Manrope,system-ui,sans-serif}body{margin:0;background:radial-gradient(circle at 72% 0,#1b2215,transparent 30rem),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}header,footer{height:74px;border-bottom:1px solid var(--line);padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand img{width:38px;height:38px;border-radius:9px}.brand span,.local{color:var(--muted)}.local{font:12px DM Mono;text-transform:uppercase}.local i{display:inline-block;width:7px;height:7px;background:var(--acid);border-radius:50%;margin-right:8px;box-shadow:0 0 12px var(--acid)}main{max-width:1580px;margin:auto;padding:0 clamp(20px,4vw,64px)}.intro{padding:68px 0 45px;display:flex;align-items:end;justify-content:space-between;gap:50px}.eyebrow,.rack small,.bytes small,.library small,.export small{font:500 12px DM Mono;letter-spacing:.14em;color:var(--acid)}h1{font-size:clamp(54px,7vw,100px);line-height:.91;letter-spacing:-.065em;margin:17px 0 0}h1 em{font-style:normal;color:var(--acid)}.intro>p{max-width:520px;color:var(--muted);font-size:18px;line-height:1.65;margin-bottom:12px}.studio{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(410px,.75fr);border:1px solid var(--line)}.stage{height:680px;display:grid;place-items:center;overflow:hidden;background-color:#07090b;background-image:linear-gradient(45deg,#0d1115 25%,transparent 25%),linear-gradient(-45deg,#0d1115 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0d1115 75%),linear-gradient(-45deg,transparent 75%,#0d1115 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.stage canvas{max-width:100%;max-height:100%;object-fit:contain}.drop{width:min(560px,75%);padding:70px 30px;border:1px dashed #53606c;text-align:center;display:flex;flex-direction:column;gap:12px;background:rgba(9,11,13,.93);cursor:pointer}.drop.over{border-color:var(--acid)}.drop input{display:none}.drop span{font:13px DM Mono;color:var(--acid)}.drop b{font-size:21px}.drop small{color:var(--muted)}.viewbar{height:54px;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:7px;background:var(--panel2)}.viewbar button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 12px}.viewbar button.active{color:var(--bg);background:var(--acid);border-color:var(--acid)}.viewbar span{margin-left:auto;font:11px DM Mono;color:var(--muted)}.rack{background:var(--panel);border-left:1px solid var(--line);padding:26px;max-height:735px;display:flex;flex-direction:column}.rackhead{display:flex;justify-content:space-between}.rack h2,.bytes h2,.library h2{font-size:27px;margin:7px 0 20px}.rackhead>button{align-self:start;background:transparent;color:var(--muted);border:1px solid var(--line);padding:9px 12px}.stack{overflow:auto;min-height:180px;flex:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}.stack-empty{color:var(--muted);padding:35px 12px;text-align:center;font-size:13px}.op{border:1px solid var(--line);background:var(--panel2);margin:8px 0}.op-top{display:grid;grid-template-columns:30px 1fr auto;align-items:center;padding:11px;gap:9px}.handle{font:16px DM Mono;color:#626d78;cursor:grab}.op-title b,.op-title small{display:block}.op-title small{font:11px Manrope;color:var(--muted);letter-spacing:0;margin-top:2px}.op-top button{background:none;border:0;color:var(--muted);font-size:18px}.op-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding:12px}.op-controls label{font-size:11px;color:var(--muted)}.op-controls input[type=range]{width:100%;accent-color:var(--acid)}.op-controls output{float:right;font:11px DM Mono;color:var(--acid)}.add{display:grid;grid-template-columns:1fr auto;gap:8px;padding-top:14px}.add label{font-size:11px;color:var(--muted)}select,.master input[type=number]{display:block;width:100%;background:#090c0f;color:var(--white);border:1px solid var(--line);padding:10px;margin-top:5px}.add button,.actions button,.export button{border:1px solid var(--acid);font-weight:700;padding:12px 14px}.add button,.random,.export button{background:var(--acid);color:#080a0c}.master{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:13px 0}.master label{font-size:11px;color:var(--muted)}.master label:first-child{flex:1}.master label:last-child{padding-bottom:10px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button:last-child{background:transparent;color:var(--acid)}.bytes{margin-top:26px;border:1px solid var(--line);padding:25px;background:var(--panel2)}.byteshead{display:flex;justify-content:space-between;align-items:start}.legend{font:11px DM Mono;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;margin:0 5px 0 14px}.legend .same{background:#28313a}.legend .low{background:var(--cyan)}.legend .high{background:var(--pink)}#byteMap{width:100%;height:210px;background:#07090b;image-rendering:pixelated}.byteinfo{display:flex;gap:30px;padding-top:12px;font:11px DM Mono;color:var(--muted)}.library{padding:75px 0}.library>div:first-child{margin-bottom:24px}#catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.catalog-card{border:1px solid var(--line);padding:17px;background:var(--panel2);cursor:pointer}.catalog-card:hover{border-color:var(--acid)}.catalog-card b{display:block}.catalog-card span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}.export{border:1px solid var(--line);padding:22px 25px;display:flex;gap:22px;align-items:center;margin-bottom:70px}.export>div{display:flex;flex-direction:column;margin-right:auto}.export strong{margin:4px 0}.export span{font:11px DM Mono;color:var(--muted)}.export label{font-size:11px;color:var(--muted)}.export select{min-width:100px}.export button:last-child{background:transparent;color:var(--acid)}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font:11px DM Mono}footer a{color:var(--white);text-decoration:none}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);opacity:0;background:var(--acid);color:#080a0c;padding:12px 18px;font-weight:700;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:1000px){.intro{display:block}.studio{grid-template-columns:1fr}.rack{border-left:0;border-top:1px solid var(--line);max-height:none}.stage{height:540px}#catalog{grid-template-columns:repeat(2,1fr)}.export{flex-wrap:wrap}}@media(max-width:600px){.brand span,.local{display:none}.intro{padding-top:50px}.intro>p{margin-top:30px}.stage{height:420px}.drop{width:85%;padding:45px 20px}.op-controls,#catalog{grid-template-columns:1fr}.byteshead,.byteinfo{display:block}.legend{margin-bottom:12px}.byteinfo span{display:block;margin-top:5px}.export{align-items:stretch;flex-direction:column}.export>div{margin:0}.actions{grid-template-columns:1fr}}
