.studio-heading,.studio-topline,.studio-transport,.studio-actions,.studio-analytics-heading,.studio-chart-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.studio-heading { margin:24px 0 28px; }.studio-heading h1 { font-size:clamp(32px,5vw,52px); margin:4px 0; letter-spacing:-.04em; }
.studio-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; }
.studio-sidebar { padding:20px 14px; border:1px solid var(--line); border-radius:16px; background:var(--bg-secondary); position:sticky; top:24px; }
.studio-sidebar>.secondary { width:100%; margin-top:24px; font-size:12px; }.studio-sidebar .eyebrow { padding:0 8px; font-size:10px; }
.studio-station { width:100%; text-align:left; display:flex; flex-direction:column; gap:7px; margin-top:8px; padding:16px 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-primary); }
.studio-station strong { overflow-wrap:anywhere; }.studio-station small { font-size:11px; color:var(--text-secondary); }.studio-station.selected { background:var(--bg-primary); border-color:var(--accent); }.studio-station:hover { border-color:var(--line); }
.studio-desk { min-width:0; }.studio-topline { padding:8px 0 24px; }.studio-topline h2 { font-size:28px; margin:6px 0; overflow-wrap:anywhere; }.studio-state { font:600 10px/1.5 monospace; letter-spacing:.06em; color:var(--text-secondary); border:1px solid var(--line); border-radius:6px; padding:8px 10px; white-space:nowrap; }.studio-state.live { color:#20b780; border-color:#20b780; }
.studio-transport { border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--bg-secondary); }.studio-transport>div { flex:1; }.studio-transport small { display:block; color:var(--text-secondary); font-size:12px; margin-top:5px; }.studio-transport button { white-space:nowrap; }
.studio-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin:24px 0; overflow-x:auto; }.studio-tabs button { border:0; border-radius:0; background:none; color:var(--text-secondary); padding:12px 2px 16px; border-bottom:2px solid transparent; }.studio-tabs button[aria-selected="true"] { color:var(--text-primary); border-bottom-color:var(--accent); }
.studio-panel[hidden] { display:none; }.studio-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }.studio-kpis article { padding:20px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg-secondary); }.studio-kpis span,.studio-kpis small { display:block; color:var(--text-secondary); font-size:11px; line-height:1.5; }.studio-kpis strong { display:block; font:500 clamp(20px,2.3vw,32px)/1.5 monospace; letter-spacing:-.05em; padding:8px 0; }
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.studio-card { border:1px solid var(--line); background:var(--bg-secondary); border-radius:14px; padding:24px; min-width:0; }.studio-card h3 { font-size:17px; margin:0 0 20px; }.studio-card .eyebrow { font-size:10px; }.studio-chain { display:flex; flex-direction:column; align-items:stretch; text-align:center; margin:20px 0; gap:8px; }.studio-chain span { border:1px solid var(--line); border-radius:8px; padding:12px; font:12px monospace; }.studio-chain i { color:var(--text-secondary); font-style:normal; }.studio-telemetry { display:grid; grid-template-columns:1fr 1.2fr; gap:0 12px; font-size:12px; }.studio-telemetry dt,.studio-telemetry dd { padding:14px 0; border-bottom:1px solid var(--line); margin:0; overflow-wrap:anywhere; }.studio-telemetry dt { color:var(--text-secondary); }.studio-telemetry dd { text-align:right; font-family:monospace; }
.studio-instructions { padding-left:20px; color:var(--text-secondary); font-size:13px; line-height:1.9; margin-bottom:24px; }.studio-field { display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--text-secondary); }.studio-field input,.studio-field select { width:100%; min-width:0; color:var(--text-primary); padding:12px; }.studio-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }.studio-note { padding:16px; border-left:2px solid var(--accent); background:var(--bg-primary); font-size:13px; color:var(--text-secondary); line-height:1.7; margin:20px 0; }
.studio-endpoint { display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }.studio-endpoint>span { font-size:12px; color:var(--text-secondary); }.studio-endpoint code { font-size:12px; overflow-wrap:anywhere; }.studio-endpoint button { font-size:11px; }.studio-keybar { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding-top:24px; }.studio-keybar label { flex:1; min-width:200px; }.studio-keybar button { font-size:12px; min-height:42px; }
.studio-analytics-heading { margin-bottom:20px; }.studio-chart-heading span { color:var(--text-secondary); font-size:11px; }.studio-chart { height:200px; position:relative; display:flex; align-items:center; justify-content:center; margin:20px 0; color:var(--text-secondary); font-size:13px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--line) 50px); }.studio-chart svg { width:100%; height:180px; align-self:end; fill:var(--accent); opacity:.8; }.studio-chart-max { position:absolute; top:0; left:0; font:11px monospace; }.studio-empty { text-align:center; padding:100px 20px; color:var(--text-secondary); border:1px dashed var(--line); border-radius:16px; }
.reaction-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 0; }.reaction-controls button { font-size:13px; border:1px solid var(--line); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); padding:9px 14px; }.reaction-controls button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }.reaction-controls small { color:var(--text-secondary); font-size:11px; }
@media(max-width:1100px) { .studio-shell { grid-template-columns:180px minmax(0,1fr); gap:16px; }.studio-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.studio-grid { grid-template-columns:1fr; }.studio-endpoint { grid-template-columns:1fr auto; }.studio-endpoint>span { grid-column:1/-1; } }
@media(max-width:700px) { .studio-heading,.studio-topline { align-items:start; flex-direction:column; }.studio-shell { grid-template-columns:1fr; }.studio-sidebar { position:static; }.studio-sidebar #studioStations { display:flex; gap:8px; overflow-x:auto; }.studio-station { min-width:150px; width:auto; flex-shrink:0; }.studio-sidebar>.secondary { margin-top:12px; }.studio-transport { flex-wrap:wrap; padding:16px; }.studio-transport>div { flex-basis:100%; }.studio-transport button { flex:1; }.studio-form-grid { grid-template-columns:1fr; }.studio-card { padding:18px; }.studio-chart-heading { flex-direction:column; align-items:start; }.studio-tabs { gap:20px; }.studio-actions { flex-wrap:wrap; }.studio-state { white-space:normal; }.studio-heading { margin-top:16px; } }