.studio-root{--bg1:#071410;--bg2:#0c1f17;--neon1:#c4a35a;--neon2:#7fc9a3;--neon3:#3c9670;--panel:#14312a;--panel-edge:#1d4435;--text:#eef3ec;--dim:#a9bdb2;background:radial-gradient(ellipse at 50% -10%,var(--bg2),var(--bg1) 60%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;min-height:100vh;overflow-x:hidden}.studio-root *{box-sizing:border-box}.studio-root .wrap{max-width:960px;margin:0 auto;padding:20px 16px 90px}.studio-root h1{text-align:center;font-size:clamp(24px,5vw,42px);letter-spacing:6px;margin:10px 0 2px;background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.studio-root .subtitle{text-align:center;color:var(--dim);font-size:13px;margin-bottom:20px;letter-spacing:1px}.studio-root canvas#viz{width:100%;height:110px;display:block;border-radius:14px;background:linear-gradient(180deg,#0a1d16,#07140f);border:1px solid var(--panel-edge);box-shadow:inset 0 0 40px rgba(60,150,112,.1);margin-bottom:18px}.studio-root .panel{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid var(--panel-edge);border-radius:14px;padding:16px 18px;margin-bottom:16px}.studio-root .row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}.studio-root .field{display:flex;flex-direction:column;gap:4px;min-width:120px}.studio-root label{font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}.studio-root label .val{color:var(--neon2);font-weight:700}.studio-root input[type=range]{accent-color:var(--neon2);width:140px}.studio-root select{background:#10261d;color:var(--text);border:1px solid var(--panel-edge);border-radius:8px;padding:6px 8px;font-size:13px}.studio-root .file-btn,.studio-root button{background:linear-gradient(135deg,#1b4234,#102a20);color:var(--text);border:1px solid var(--panel-edge);border-radius:10px;padding:10px 18px;font-size:13px;letter-spacing:1px;cursor:pointer;transition:box-shadow .15s,transform .1s,border-color .15s;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center}.studio-root .file-btn:hover,.studio-root button:hover{border-color:var(--neon2);box-shadow:0 0 16px rgba(127,201,163,.35)}.studio-root .file-btn:active,.studio-root button:active{transform:scale(.96)}.studio-root button.primary{background:linear-gradient(135deg,var(--neon1),var(--neon3));color:#07140f;font-weight:700;border:none}.studio-root button.primary:hover{box-shadow:0 0 22px rgba(196,163,90,.55)}.studio-root button.toggle.on{border-color:var(--neon2);box-shadow:0 0 10px rgba(127,201,163,.4)}.studio-root .keys{gap:4px;padding:24px 8px 10px;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none}.studio-root .key,.studio-root .keys{position:relative;display:flex;justify-content:center}.studio-root .key{width:42px;height:150px;background:linear-gradient(180deg,#1a3d2f,#102619);border:1px solid var(--panel-edge);border-radius:0 0 8px 8px;align-items:flex-end;padding-bottom:8px;font-size:11px;color:var(--dim);cursor:pointer;transition:background .05s,box-shadow .1s}.studio-root .key.black{width:30px;height:96px;margin:0 -17px;z-index:2;background:linear-gradient(180deg,#08170f,#030906);border-color:#000;color:#86a394}.studio-root .key.active{background:linear-gradient(180deg,var(--neon1),#8a6f33);color:#14110a;box-shadow:0 0 22px rgba(196,163,90,.7)}.studio-root .key.black.active{background:linear-gradient(180deg,var(--neon2),#2c7a5b);color:#04261a;box-shadow:0 0 22px rgba(127,201,163,.7)}.studio-root .hint{text-align:center;color:var(--dim);font-size:12px;margin-top:6px;line-height:1.6}.studio-root .status{text-align:center;font-size:12px;color:var(--neon2);min-height:18px;margin-top:4px}.studio-root .legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:10px}.studio-root .legend span.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.studio-root .studio-title{font-size:13px;letter-spacing:2px;color:var(--neon3);text-transform:uppercase;margin:0 0 12px;font-weight:700}.studio-root canvas#waveform{width:100%;height:120px;display:block;border-radius:10px;background:linear-gradient(180deg,#0a1d16,#07140f);border:1px solid var(--panel-edge);cursor:crosshair;touch-action:none;margin-bottom:8px}.studio-root .studio-readout{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--dim);font-family:Consolas,Courier New,monospace;margin-bottom:12px}.studio-root .studio-readout b{color:var(--neon2)}.studio-root button.danger.on{border-color:var(--neon1);box-shadow:0 0 12px rgba(196,163,90,.5);animation:studio-pulse 1s infinite}@keyframes studio-pulse{0%,to{box-shadow:0 0 12px rgba(196,163,90,.5)}50%{box-shadow:0 0 22px rgba(196,163,90,.9)}}.studio-root button:disabled{opacity:.35;cursor:not-allowed}.studio-root button:disabled:hover{box-shadow:none;border-color:var(--panel-edge)}.studio-root .file-btn{position:relative;overflow:hidden}.studio-root .file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.studio-root .studio-status{font-size:12px;color:var(--neon2);min-height:16px;margin-top:4px}.studio-root .instrument-wrap{position:relative;width:100%;max-width:820px;margin:6px auto 0}.studio-root .instrument-wrap svg{display:block;width:100%;height:auto}.studio-root .oboe-screen{position:absolute;left:29%;top:30%;width:29%;height:40%;background:linear-gradient(180deg,#04120f,#010a08);border:1px solid #123b33;border-radius:4px;box-shadow:inset 0 0 10px rgba(0,0,0,.8),0 0 10px rgba(127,201,163,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px 4px;overflow:hidden}.studio-root .oboe-screen .line{font-family:Consolas,Courier New,monospace;color:#5effc4;text-shadow:0 0 4px rgba(94,255,196,.7);font-size:clamp(7px,1.6vw,13px);line-height:1.25;white-space:nowrap;text-align:center}.studio-root .oboe-screen .line.dim{color:#3f8f7c}.studio-root .studio-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;padding:16px}.studio-root .studio-bar a{color:var(--neon2);font-size:13px;text-decoration:none;border:1px solid var(--panel-edge);border-radius:10px;padding:8px 16px}.studio-root .studio-bar a:hover{border-color:var(--neon2)}