@import "https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root{--bg-parchment:#f6eddd;--bg-card:#fff;--bg-card-subtle:#fbf8f2;--border-cad:#e3d5be;--border-cad-dark:#ccbc9f;--text-main:#1d2129;--text-muted:#6b7280;--text-dim:#9ca3af;--accent-gold:#f5b731;--accent-red:#e63946;--accent-blue:#2563eb;--accent-green:#2a9d8f;--accent-cyan:#06b6d4;--accent-dark:#11141a;--font-heading:"Barlow Semi Condensed", sans-serif;--font-body:"Plus Jakarta Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--shadow-sm:0 1px 3px #1e140a0d;--shadow-md:0 4px 12px #1e140a14;--shadow-lg:0 10px 25px #1e140a1f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-parchment);width:100%;height:100%;color:var(--text-main);font-family:var(--font-body);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;overflow:hidden}body{background-image:radial-gradient(circle,#a0825a26 1px,#0000 1px),linear-gradient(90deg,#c8b4961f 1px,#0000 1px),linear-gradient(#c8b4961f 1px,#0000 1px);background-size:24px 24px,120px 120px,120px 120px}#app{grid-template:"side brand status"64px"side stage info"1fr"side code code"280px/68px 1fr 390px;width:100vw;height:100vh;display:grid;position:relative;overflow:hidden}.sidebar{z-index:50;background-color:#171920;border-right:1px solid #ffffff14;flex-direction:column;grid-area:side;align-items:center;padding:16px 0;display:flex;box-shadow:2px 0 10px #00000026}.side-nav{flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:12px;list-style:none;display:flex}.side-nav li{width:48px;height:48px}.side-nav a{border-radius:var(--radius-md);color:#8b92a2;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;text-decoration:none;transition:all .2s;display:flex;position:relative}.side-nav a svg{stroke:currentColor;stroke-width:2px;fill:none;width:22px;height:22px;transition:transform .2s}.side-nav a:hover{color:#fff;background-color:#ffffff14}.side-nav li.is-active a{color:var(--accent-gold);background-color:#f5b73126}.side-nav li.is-active a:before{content:"";background-color:var(--accent-gold);border-radius:0 4px 4px 0;width:4px;position:absolute;top:12px;bottom:12px;left:-10px}.side-label{display:none}.credit-side{color:#64748b;text-align:center;margin-top:auto;padding:6px;font-size:10px;text-decoration:none;transition:color .2s}.credit-side:hover{color:#e2e8f0}.brand{z-index:20;pointer-events:auto;grid-area:brand;align-items:center;gap:16px;padding:0 24px;display:flex}.brand-logo-wrap{align-items:center;gap:10px;display:flex}.brand-icon{background:#11141a;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 2px 6px #00000026}.brand-icon svg{width:24px;height:24px}.brand-text h1{font-family:var(--font-heading);letter-spacing:-.5px;color:#11141a;text-transform:uppercase;font-size:22px;font-weight:700}.brand-text p{color:var(--text-muted);letter-spacing:.5px;font-size:11px;font-weight:500}.brand-badge{color:#b45309;text-transform:uppercase;background-color:#f5b73133;border:1px solid #f5b73166;border-radius:20px;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:700}.status{z-index:20;grid-area:status;justify-content:flex-end;align-items:center;gap:16px;padding:0 24px;display:flex}.progress-card{background-color:var(--bg-card);border:1px solid var(--border-cad);box-shadow:var(--shadow-sm);border-radius:30px;align-items:center;gap:12px;padding:8px 16px;display:flex}.progress-body{flex-direction:column;gap:4px;display:flex}.progress-header{color:var(--text-muted);justify-content:space-between;align-items:center;gap:12px;font-size:11px;font-weight:600;display:flex}.progress-bar-wrap{background-color:#ebd9c2;border-radius:4px;width:110px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#f59e0b,#e63946);border-radius:4px;width:8%;height:100%;transition:width .4s}.badge-servicioti{color:#4b5563;border:1px solid var(--border-cad);background:#fffc;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;text-decoration:none;display:flex}.badge-servicioti:hover{color:#11141a;background:#fff}.stage{outline:none;grid-area:stage;position:relative;overflow:hidden}#board-canvas{width:100%;height:100%;display:block}.leaders{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.leader-dot{fill:#e63946;filter:drop-shadow(0 0 4px #e6394699)}.leader-path{fill:none;stroke:#ccbc9f;stroke-width:1.5px;stroke-dasharray:4 3}.leader-target{fill:#ccbc9f}.callouts{pointer-events:none;z-index:12;width:100%;height:100%;position:absolute;top:0;left:0}.callout-tag{transform-origin:50%;pointer-events:auto;cursor:pointer;transition:opacity .2s;position:absolute;top:0;left:0}.callout-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-cad-dark);border-radius:var(--radius-sm);background:#fffffff0;min-width:130px;max-width:200px;padding:6px 10px;transition:transform .15s,border-color .15s;box-shadow:0 4px 12px #00000014}.callout-card:hover{border-color:#e63946;transform:translateY(-2px)scale(1.02);box-shadow:0 6px 16px #e6394626}.callout-header{align-items:center;gap:6px;margin-bottom:2px;display:flex}.callout-dot{background-color:#e63946;border-radius:50%;width:6px;height:6px}.callout-title{font-family:var(--font-heading);color:#11141a;text-transform:uppercase;letter-spacing:.3px;font-size:13px;font-weight:700}.callout-body{color:var(--text-muted);font-size:11px;line-height:1.3}.viewbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-cad);box-shadow:var(--shadow-md);z-index:25;background:#ffffffeb;border-radius:30px;align-items:center;gap:6px;padding:6px 12px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.view-hint{color:var(--text-muted);white-space:nowrap;border-right:1px solid var(--border-cad);margin-right:4px;padding:0 8px;font-size:11px}.viewbar-btn{color:#374151;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex}.viewbar-btn:hover{color:#11141a;background-color:#0000000f}.viewbar-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:18px;height:18px}.info-card{background-color:var(--bg-card);border-left:1px solid var(--border-cad);border-bottom:1px solid var(--border-cad);z-index:20;flex-direction:column;grid-area:info;display:flex;overflow:hidden}.info-tabs{border-bottom:1px solid var(--border-cad);background-color:#f3ebd9;padding:0 8px;display:flex}.tab-btn{font-family:var(--font-heading);color:var(--text-muted);cursor:pointer;text-transform:uppercase;background:0 0;border:none;border-bottom:2px solid #0000;padding:12px 14px;font-size:13px;font-weight:600;transition:all .2s}.tab-btn:hover{color:var(--text-main)}.tab-btn.is-active{color:#11141a;background-color:var(--bg-card);border-bottom-color:#e63946}.info-body{flex:1;padding:20px;overflow-y:auto}.info-lesson-badge{font-family:var(--font-mono);color:#b45309;background-color:#fef3c7;border-radius:4px;margin-bottom:8px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.info-title{font-family:var(--font-heading);color:#11141a;margin-bottom:8px;font-size:24px;font-weight:700;line-height:1.2}.info-lede{color:#4b5563;margin-bottom:18px;font-size:13px;line-height:1.6}.info-features{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.feature-item{background:var(--bg-card-subtle);border:1px solid var(--border-cad);border-radius:var(--radius-sm);color:#374151;align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex}.feature-dot{background-color:var(--accent-green);border-radius:50%;flex-shrink:0;width:8px;height:8px}.data-table{border-collapse:collapse;width:100%;margin-top:8px;font-size:12px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #ebd9c2;padding:8px 10px}.data-table th{color:#374151;font-weight:600;font-family:var(--font-heading);text-transform:uppercase;background-color:#f5eedf}.data-table code{font-family:var(--font-mono);color:#0f172a;background:#f1f5f9;border-radius:3px;padding:2px 4px}.code-card{color:#e2e8f0;z-index:30;background-color:#11141a;border-top:2px solid #262b36;grid-template:"header controls console-head"48px"editor controls console-body"1fr/1fr 340px 380px;grid-area:code;display:grid;overflow:hidden}.code-header{background-color:#171b23;border-bottom:1px solid #262b36;border-right:1px solid #262b36;grid-area:header;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.lang-toggle{background-color:#0b0d11;border:1px solid #262b36;border-radius:6px;padding:2px;display:flex}.lang-btn{color:#94a3b8;font-family:var(--font-mono);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .2s}.lang-btn.is-active{color:#fff;background-color:#262b36}.code-actions{align-items:center;gap:8px;display:flex}.btn-run{color:#fff;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 2px 8px #10b98159}.btn-run:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b98173}.btn-run.is-running{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 8px #ef444459}.btn-ghost{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #333a48;border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;transition:all .2s;display:flex}.btn-ghost:hover{color:#fff;background-color:#262b36}.btn-ghost svg{stroke:currentColor;stroke-width:2px;fill:none;width:16px;height:16px}.code-wrap{background-color:#11141a;border-right:1px solid #262b36;grid-area:editor;padding:16px;overflow-y:auto}.code-view{font-family:var(--font-mono);color:#e2e8f0;white-space:pre;font-size:12px;line-height:1.6}.token-comment{color:#64748b;font-style:italic}.token-keyword{color:#f43f5e;font-weight:600}.token-string{color:#10b981}.token-function{color:#38bdf8}.token-number{color:#fbbf24}.controls-panel{background-color:#141720;border-right:1px solid #262b36;flex-direction:column;grid-area:controls;gap:14px;padding:14px;display:flex;overflow-y:auto}.controls-title{font-family:var(--font-heading);text-transform:uppercase;color:#94a3b8;letter-spacing:.5px;align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.param-group{flex-direction:column;gap:6px;display:flex}.param-label-row{color:#cbd5e1;justify-content:space-between;font-size:11px;display:flex}.param-value-badge{font-family:var(--font-mono);color:var(--accent-gold);font-weight:600}input[type=range]{width:100%;accent-color:var(--accent-gold);cursor:pointer}.btn-hardware{color:#fff;cursor:pointer;background-color:#212631;border:1px solid #333a48;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.btn-hardware:hover{border-color:var(--accent-gold);background-color:#2d3342}.btn-hardware:active{transform:scale(.97)}.btn-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.console-header{background-color:#171b23;border-bottom:1px solid #262b36;grid-area:console-head;justify-content:space-between;align-items:center;padding:0 14px;display:flex}.console-title-wrap{align-items:center;gap:8px;display:flex}.console-dot{background-color:#64748b;border-radius:50%;width:8px;height:8px;transition:background-color .2s}.console-dot.is-active{background-color:#10b981;box-shadow:0 0 6px #10b98199}.console-title{font-family:var(--font-heading);text-transform:uppercase;color:#cbd5e1;font-size:12px;font-weight:700}.console-status{color:#64748b;font-size:10px;font-family:var(--font-mono)}.console-body{font-family:var(--font-mono);background-color:#0b0d11;grid-area:console-body;padding:10px 14px;font-size:11px;overflow-y:auto}.console-lines{flex-direction:column;gap:4px;display:flex}.console-line{gap:10px;line-height:1.4;display:flex}.line-time{color:#475569;flex-shrink:0}.line-text{color:#e2e8f0}.console-line.type-telemetry .line-text{color:#38bdf8}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#11141ab3;justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;display:none;position:fixed;top:0;left:0}.modal-overlay.is-open{display:flex}.modal-card{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-cad);box-shadow:var(--shadow-lg);flex-direction:column;width:100%;max-width:860px;max-height:85vh;animation:.25s ease-out modalEnter;display:flex;overflow:hidden}@keyframes modalEnter{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-header{border-bottom:1px solid var(--border-cad);background:#fbf8f2;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.modal-title{font-family:var(--font-heading);text-transform:uppercase;color:#11141a;font-size:20px;font-weight:700}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:22px;line-height:1}.modal-body{padding:24px;overflow-y:auto}.lessons-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.lesson-card-item{background:var(--bg-card);border:1px solid var(--border-cad);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;gap:8px;padding:16px;transition:all .2s;display:flex}.lesson-card-item:hover{box-shadow:var(--shadow-md);border-color:#e63946;transform:translateY(-2px)}.lesson-card-item.is-active{background-color:#fffdf5;border-color:#f5b731}.lesson-number{font-family:var(--font-mono);color:#e63946;text-transform:uppercase;font-size:11px;font-weight:700}.lesson-name{font-family:var(--font-heading);color:#11141a;font-size:16px;font-weight:700}.lesson-desc{color:var(--text-muted);font-size:12px;line-height:1.4}.inspector-drawer{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-cad-dark);border-radius:var(--radius-md);z-index:40;background:#fffffff5;width:320px;padding:18px;animation:.2s modalEnter;display:none;position:absolute;top:74px;right:400px;box-shadow:0 10px 30px #0000001f}.inspector-drawer.is-visible{display:block}.inspector-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.inspector-tag{text-transform:uppercase;color:#b45309;background:#fef3c7;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.inspector-name{font-family:var(--font-heading);color:#11141a;margin-bottom:6px;font-size:18px;font-weight:700}.inspector-desc{color:#4b5563;margin-bottom:12px;font-size:12px;line-height:1.4}.inspector-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:18px}@media (width<=1024px){#app{grid-template:"side brand"56px"side stage"1fr"side code"260px/56px 1fr}.status{display:none}.info-card{width:340px;height:calc(100vh - 316px);transition:transform .3s;position:absolute;top:56px;right:0;transform:translate(100%);box-shadow:-4px 0 16px #0000001a}.info-card.is-open{transform:translate(0)}.code-card{grid-template-columns:1fr 1fr;grid-template-areas:"header controls""editor controls"}.console-header,.console-body{display:none}}