.playground-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;min-height:450px}.editor-panel,.output-panel{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-card)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:linear-gradient(135deg,var(--bg-hover),var(--bg-card));border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text-dim);font-family:var(--font-mono);gap:8px;flex-wrap:wrap}.panel-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.live-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}.live-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);transition:color .2s}.live-toggle input{display:none}.toggle-track{width:36px;height:20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;position:relative;transition:all .25s ease}.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text-muted);border-radius:50%;transition:all .25s ease}.live-toggle input:checked+.toggle-track{background:#10b98133;border-color:var(--verde)}.live-toggle input:checked+.toggle-track .toggle-thumb{left:18px;background:var(--verde);box-shadow:0 0 8px #10b98166}.live-toggle:has(input:checked) .live-label{color:var(--verde)}.btn-run{background:var(--verde);color:#000;border:none;padding:4px 14px;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font);transition:all .15s}.btn-run:hover{filter:brightness(1.2);transform:translateY(-1px)}.btn-gui{background:linear-gradient(135deg,#6750a4,#7c6fbe);color:#fff;border:none;padding:4px 14px;border-radius:6px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font);transition:all .15s}.btn-gui--disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6);pointer-events:auto}.btn-gui--disabled:hover{opacity:.7;filter:grayscale(.4);transform:none}.btn-clear{background:var(--bg-elevated);color:var(--text-dim);border:1px solid var(--border);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:.78rem;font-family:var(--font);transition:all .15s}.btn-clear:hover{border-color:var(--fuego);color:var(--fuego-light)}.editor{flex:1;min-height:350px;padding:16px;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;color:#e2e8f0;background:var(--bg-card);border:none;outline:none;resize:vertical;tab-size:4}.editor::placeholder{color:var(--text-muted)}.output{flex:1;min-height:350px;padding:16px;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;overflow-y:auto;background:var(--bg-card)}.output .placeholder{color:var(--text-muted);font-style:italic}.output .stdout{color:var(--verde)}.output .stderr{color:var(--rojo)}.status-idle{color:var(--verde);font-size:.75rem}.status-running{color:var(--fuego-light);font-size:.75rem}.status-error{color:var(--rojo);font-size:.75rem}.status-timing{color:var(--acero-light);font-size:.7rem}.example-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.example-btn{padding:6px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-size:.82rem;font-family:var(--font);cursor:pointer;transition:all .15s}.example-btn:hover{border-color:var(--fuego);color:var(--fuego-light);background:var(--fuego-bg)}.gui-section{margin-bottom:24px}.gui-section h2{font-size:1.1rem;margin-bottom:8px;color:var(--text)}.gui-canvas-container{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-card);display:flex;justify-content:center;padding:8px}#forja-canvas{display:block;max-width:100%;border-radius:6px;background:#fef7ff}@media(max-width:768px){.playground-layout{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#000000a6;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease}.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:32px 36px 28px;max-width:400px;width:90%;text-align:center;box-shadow:0 24px 64px #00000080;animation:modalPop .25s ease}.modal-icon{font-size:2.2rem;margin-bottom:12px}.modal-title{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:8px}.modal-body{font-size:.9rem;color:var(--text-dim);margin-bottom:20px;line-height:1.5}.modal-btn{background:linear-gradient(135deg,var(--fuego),var(--fuego-dark));color:#000;border:none;padding:8px 28px;border-radius:8px;font-size:.85rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s}.modal-btn:hover{filter:brightness(1.2);transform:translateY(-1px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPop{0%{transform:scale(.92) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}