.code-studio{display:grid;gap:22px}.code-tabs{display:flex;flex-wrap:wrap;gap:10px}.code-tabs button[aria-selected=true]{background:var(--accent,#14b8a6);color:#fff}.code-workspace,.code-controls,.code-result{padding:20px;border-radius:22px;background:var(--surface,#eef3f8);box-shadow:var(--shadow-out,8px 8px 18px #cbd3dc,-8px -8px 18px #fff)}.code-workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px}.code-controls{box-shadow:inset 3px 3px 8px rgba(100,116,139,.14),inset -3px -3px 8px rgba(255,255,255,.65);display:grid;align-content:start;gap:14px}.code-controls label{display:grid;gap:7px;font-size:.78rem;font-weight:800;color:var(--muted,#64748b)}.code-controls textarea{min-height:110px}.code-upload{display:grid;place-items:center;text-align:center;padding:22px;border:2px dashed var(--accent,#14b8a6);border-radius:16px;cursor:pointer}.code-actions{display:flex;flex-wrap:wrap;gap:9px}.code-result{min-width:0}.code-preview{min-height:270px;display:grid;place-items:center;overflow:auto;background:#fff;border-radius:15px;padding:14px}.code-preview canvas,.code-preview img{max-width:100%;max-height:55vh}.code-output{width:100%;min-height:230px;margin-top:14px;font:14px/1.55 ui-monospace,monospace}.code-metrics{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}.code-metrics span{padding:7px 10px;border-radius:999px;background:rgba(20,184,166,.12)}.code-note{padding:12px;border-left:4px solid var(--accent,#14b8a6);background:rgba(20,184,166,.08);font-size:.8rem;line-height:1.5}.code-status{min-height:24px}@media(max-width:800px){.code-workspace{grid-template-columns:1fr}.code-tabs button{flex:1 1 140px}}[data-theme=dark] .code-workspace,[data-theme=dark] .code-controls,[data-theme=dark] .code-result{background:#172235;box-shadow:8px 8px 18px #0a1220,-7px -7px 16px #22314a}[data-theme=dark] .code-preview{background:#0f1929}