.cs-module{min-height:100vh;background:linear-gradient(145deg,#070b18,#0c1028,#0a0e20);color:#e2e8f0;display:flex;flex-direction:column}.cs-topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;background:#070b18cc;border-bottom:1px solid rgba(99,102,241,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:10;box-shadow:0 4px 20px #0000004d}.cs-topbar:after{content:"";position:absolute;bottom:-1px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.2),transparent);pointer-events:none}.cs-topbar-title{font-size:1rem;font-weight:800;background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.03em}.cs-topbar-lesson{font-size:.82rem;color:#64748b;margin-left:auto}.cs-back-btn{background:#6366f114;border:1px solid rgba(99,102,241,.2);color:#818cf8;padding:.4rem .75rem;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:.3rem;font-family:inherit}.cs-back-btn:hover{background:#6366f126;transform:translate(-2px)}.cs-layout{display:grid;grid-template-columns:240px 1fr;flex:1;overflow:hidden}.cs-sidebar{background:#070b1899;border-right:1px solid rgba(99,102,241,.08);overflow-y:auto;min-height:0;padding:.75rem;display:flex;flex-direction:column;gap:.3rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cs-sidebar::-webkit-scrollbar{width:4px}.cs-sidebar::-webkit-scrollbar-track{background:transparent}.cs-sidebar::-webkit-scrollbar-thumb{background:#6366f126;border-radius:4px}.cs-sidebar::-webkit-scrollbar-thumb:hover{background:#6366f14d}.cs-lesson-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:.5rem;border:1px solid transparent;background:transparent;color:#64748b;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-align:left;width:100%;font-family:inherit}.cs-lesson-btn:hover{background:#6366f10f;color:#94a3b8;transform:translate(2px)}.cs-lesson-btn.active{background:#6366f11a;border-color:#6366f140;color:#818cf8;font-weight:700;box-shadow:0 0 12px #6366f114}.cs-lesson-btn.completed{color:#34d399}.cs-lesson-btn.locked{opacity:.3;cursor:not-allowed;pointer-events:none}.cs-lesson-btn.locked .cs-lesson-num{background:#64748b14;border-color:#64748b26;color:#475569}.cs-lesson-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;background:#6366f114;border:1px solid rgba(99,102,241,.15);flex-shrink:0;transition:all .2s}.cs-lesson-btn.completed .cs-lesson-num{background:#34d3991f;border-color:#34d3994d;color:#34d399}.cs-lesson-btn.active .cs-lesson-num{background:#6366f133;border-color:#6366f166;box-shadow:0 0 8px #6366f126}.cs-ide{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;overflow:hidden}.cs-description-bar{grid-column:1 / -1;padding:.6rem 1.25rem;background:#0a0e20b3;border-bottom:1px solid rgba(99,102,241,.08);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.cs-tutorial-toggle{background:#a78bfa14;border:1px solid rgba(167,139,250,.2);color:#a78bfa;padding:.35rem .7rem;border-radius:.4rem;font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.3rem;transition:all .2s;flex-shrink:0;font-family:inherit}.cs-tutorial-toggle:hover{background:#a78bfa26;box-shadow:0 0 12px #a78bfa1a}.cs-status-badge{font-size:.78rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;display:flex;align-items:center;gap:.3rem;flex-shrink:0}.cs-status-badge.pass{background:#34d3991a;color:#34d399;border:1px solid rgba(52,211,153,.2)}.cs-status-badge.fail{background:#fbbf2414;color:#fbbf24;border:1px solid rgba(251,191,36,.2)}.cs-next-btn{background:linear-gradient(135deg,#34d399,#10b981);border:none;color:#fff;padding:.4rem 1rem;border-radius:.5rem;font-weight:700;font-size:.82rem;cursor:pointer;display:flex;align-items:center;gap:.3rem;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 12px #34d39940;flex-shrink:0;animation:stepAppear .4s cubic-bezier(.34,1.56,.64,1);font-family:inherit}.cs-next-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #34d39959;filter:brightness(1.1)}.cs-tutorial-popup-overlay{position:fixed;inset:0;background:#04060ebf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .2s ease}.cs-tutorial-popup{background:linear-gradient(145deg,#0f1729f2,#0c1028fa);border:1px solid rgba(99,102,241,.15);border-radius:.85rem;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 12px 50px #00000080,0 0 40px #6366f10d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.cs-tutorial-popup-header{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;border-bottom:1px solid rgba(99,102,241,.1);font-size:.88rem;font-weight:700;color:#a78bfa;flex-shrink:0;background:#ffffff03}.cs-tutorial-close{margin-left:auto;background:#f8717114;border:1px solid rgba(248,113,113,.15);color:#f87171;width:28px;height:28px;border-radius:.35rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.cs-tutorial-close:hover{background:#f8717126;transform:scale(1.05)}.cs-tutorial-popup-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1;font-size:.92rem;line-height:1.7;color:#cbd5e1}.cs-tutorial-popup-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(99,102,241,.08);flex-shrink:0;background:#ffffff03}.cs-editor-panel{display:flex;flex-direction:column;border-right:1px solid rgba(99,102,241,.06);overflow:hidden}.cs-editor-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#070b1899;border-bottom:1px solid rgba(99,102,241,.06);font-size:.75rem;color:#475569;font-weight:600;letter-spacing:.03em}.cs-editor-textarea{flex:1;background:#070b14cc;color:#e2e8f0;border:none;padding:1rem 1.25rem;font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:.88rem;line-height:1.7;resize:none;outline:none;tab-size:4;overflow-y:auto}.cs-editor-textarea::placeholder{color:#1e293b}.cs-editor-actions{display:flex;gap:.5rem;padding:.6rem 1rem;background:#070b1899;border-top:1px solid rgba(99,102,241,.06);flex-wrap:wrap;align-items:center}.cs-run-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;padding:.5rem 1.25rem;border-radius:.5rem;font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 12px #6366f140;font-family:inherit}.cs-run-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #6366f166;filter:brightness(1.1)}.cs-run-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}.cs-hint-btn{background:#fbbf240f;border:1px solid rgba(251,191,36,.2);color:#fbbf24;padding:.45rem .9rem;border-radius:.5rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;font-family:inherit}.cs-hint-btn:hover{background:#fbbf241f}.cs-network-panel{display:flex;flex-direction:column;overflow:hidden;background:#04060e99}.cs-network-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#070b1899;border-bottom:1px solid rgba(99,102,241,.06);font-size:.75rem;color:#475569;font-weight:600;flex-shrink:0;letter-spacing:.03em}.cs-trace-container{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column}.cs-trace-steps{display:flex;flex-direction:column;gap:.5rem}.cs-trace-step{padding:.6rem .8rem;border-radius:.5rem;animation:stepAppear .35s cubic-bezier(.34,1.56,.64,1) both;border:1px solid rgba(255,255,255,.03)}@keyframes stepAppear{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.cs-trace-step-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}.cs-trace-icon{font-size:1rem;flex-shrink:0}.cs-trace-title{font-size:.82rem;font-weight:700;flex:1}.cs-trace-line{font-size:.65rem;color:#475569;background:#ffffff08;padding:.1rem .4rem;border-radius:.2rem;font-weight:700;font-family:Fira Code,monospace;flex-shrink:0}.cs-trace-detail{font-size:.8rem;line-height:1.55;color:#94a3b8;padding-left:1.65rem}.cs-output-console{border-top:1px solid rgba(52,211,153,.1);background:#0000004d;padding:.75rem 1rem;max-height:150px;min-height:60px;overflow-y:auto;font-family:Fira Code,monospace;font-size:.82rem;display:flex;flex-direction:column;gap:.2rem;flex-shrink:0}.cs-output-line{color:#6ee7b7;animation:typeIn .3s ease-out both;display:flex;gap:.4rem}.cs-output-line .prefix{color:#334155;flex-shrink:0}@keyframes typeIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.cs-success-overlay{position:fixed;inset:0;background:#04060ebf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.cs-success-card{background:linear-gradient(145deg,#34d39914,#6366f114);border:1px solid rgba(52,211,153,.2);border-radius:1rem;padding:2rem 2.5rem;text-align:center;max-width:450px;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 20px 60px #0006,0 0 40px #34d39914;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}@keyframes scaleIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.cs-success-card h2{color:#34d399;margin:0 0 .5rem;font-size:1.3rem}.cs-success-card p{color:#94a3b8;margin:0 0 1.25rem;font-size:.9rem;line-height:1.5}.cs-trace-container::-webkit-scrollbar{width:4px}.cs-trace-container::-webkit-scrollbar-track{background:transparent}.cs-trace-container::-webkit-scrollbar-thumb{background:#6366f126;border-radius:4px}.cs-trace-container::-webkit-scrollbar-thumb:hover{background:#6366f14d}.cs-tutorial-text::-webkit-scrollbar{width:4px}.cs-tutorial-text::-webkit-scrollbar-track{background:transparent}.cs-tutorial-text::-webkit-scrollbar-thumb{background:#a78bfa26;border-radius:4px}@media(max-width:900px){.cs-layout{grid-template-columns:1fr}.cs-sidebar{display:none}.cs-ide{grid-template-columns:1fr}.cs-network-panel{min-height:300px}}@media(max-width:600px){.cs-topbar{padding:.5rem .75rem;gap:.5rem}.cs-topbar-lesson{display:none}}.web-module{width:100vw;height:100vh;display:flex;flex-direction:column;background:linear-gradient(145deg,#060c14,#0a1520,#071018);color:#e2e8f0;font-family:Inter,system-ui,sans-serif;overflow:hidden}.web-topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;background:#060c14cc;border-bottom:1px solid rgba(45,212,191,.1);flex-shrink:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 20px #0000004d;position:relative}.web-topbar:after{content:"";position:absolute;bottom:-1px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.15),transparent);pointer-events:none}.web-topbar-title{font-weight:800;font-size:1rem;color:#2dd4bf;letter-spacing:.5px}.web-topbar-lesson{font-size:.8rem;color:#475569;margin-left:auto;margin-right:.5rem}.web-main-layout{display:flex;flex:1;overflow:hidden}.web-sidebar{width:220px;flex-shrink:0;background:#060c1480;border-right:1px solid rgba(45,212,191,.06);overflow-y:auto;padding:.5rem 0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.web-sidebar::-webkit-scrollbar{width:4px}.web-sidebar::-webkit-scrollbar-thumb{background:#2dd4bf26;border-radius:4px}.web-unit-group{margin-bottom:.25rem}.web-unit-header{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;font-size:.65rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.08em}.web-lesson-btn{display:flex;align-items:center;gap:.5rem;width:100%;padding:.45rem .75rem;background:none;border:none;color:#64748b;font-size:.78rem;text-align:left;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);border-left:3px solid transparent;font-family:inherit}.web-lesson-btn:hover{background:#2dd4bf0a;color:#cbd5e1;transform:translate(2px)}.web-lesson-btn.active{background:#2dd4bf14;color:#2dd4bf;border-left-color:#14b8a6;box-shadow:inset 3px 0 8px #2dd4bf14}.web-lesson-btn.completed{color:#34d399}.web-lesson-btn.locked{opacity:.25;cursor:not-allowed}.web-lesson-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;background:#2dd4bf0f;border:1px solid rgba(45,212,191,.15);color:#14b8a6;flex-shrink:0;transition:all .2s}.web-lesson-btn.completed .web-lesson-num{background:#34d3991a;border-color:#34d39940;color:#34d399}.web-ide{flex:1;display:flex;flex-direction:column;overflow:hidden}.web-description-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem 1rem;background:#2dd4bf08;border-bottom:1px solid rgba(45,212,191,.06);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.web-tutorial-toggle{display:flex;align-items:center;gap:.3rem;background:#2dd4bf0f;border:1px solid rgba(45,212,191,.15);color:#2dd4bf;padding:.25rem .6rem;border-radius:.4rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.web-tutorial-toggle:hover{background:#2dd4bf1f;box-shadow:0 0 10px #2dd4bf14}.web-status-badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;display:flex;align-items:center;gap:.3rem}.web-status-badge.pass{background:#34d39914;color:#34d399;border:1px solid rgba(52,211,153,.15)}.web-status-badge.fail{background:#f8717114;color:#f87171;border:1px solid rgba(248,113,113,.15)}.web-next-btn{display:flex;align-items:center;gap:.3rem;background:linear-gradient(135deg,#14b8a6,#0d9488);border:none;color:#fff;padding:.35rem .8rem;border-radius:.4rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 10px #14b8a633;font-family:inherit}.web-next-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #14b8a64d;filter:brightness(1.1)}.web-tutorial-overlay{position:fixed;inset:0;z-index:999;background:#04060ebf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}.web-tutorial-popup{width:600px;max-height:80vh;background:linear-gradient(145deg,#0a1520f2,#071018fa);border:1px solid rgba(45,212,191,.12);border-radius:1rem;box-shadow:0 20px 60px #00000080,0 0 40px #2dd4bf0d;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.web-tutorial-header{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;font-weight:700;font-size:.9rem;color:#2dd4bf;border-bottom:1px solid rgba(45,212,191,.08);background:#ffffff03}.web-tutorial-close{margin-left:auto;background:none;border:none;color:#475569;cursor:pointer;padding:.3rem;transition:all .2s}.web-tutorial-close:hover{color:#e2e8f0;transform:scale(1.1)}.web-tutorial-body{padding:1.25rem;overflow-y:auto;flex:1;line-height:1.7;font-size:.9rem}.web-tutorial-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(45,212,191,.08);background:#ffffff03}.web-btn-primary{display:flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#14b8a6,#0d9488);border:none;color:#fff;padding:.4rem 1rem;border-radius:.4rem;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);font-family:inherit}.web-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #14b8a640;filter:brightness(1.1)}.web-btn-outline{display:flex;align-items:center;gap:.3rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);color:#64748b;padding:.35rem .7rem;border-radius:.4rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.web-btn-outline:hover{background:#ffffff0f;color:#cbd5e1}.web-layout{display:flex;flex:1;overflow:hidden}.web-editor-panel{flex:1;display:flex;flex-direction:column;border-right:1px solid rgba(45,212,191,.06)}.web-editor-header{display:flex;justify-content:space-between;align-items:center;padding:.45rem .85rem;background:#04081099;border-bottom:1px solid rgba(255,255,255,.03);font-size:.72rem;color:#475569;font-weight:600;letter-spacing:.03em}.web-editor-textarea{flex:1;resize:none;padding:1rem;background:#04081066;border:none;outline:none;font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:.88rem;line-height:1.7;color:#e2e8f0;tab-size:2}.web-editor-textarea::placeholder{color:#1e293b}.web-editor-textarea::-webkit-scrollbar{width:4px}.web-editor-textarea::-webkit-scrollbar-thumb{background:#2dd4bf26;border-radius:4px}.web-editor-actions{display:flex;gap:.5rem;align-items:center;padding:.5rem .85rem;background:#04081099;border-top:1px solid rgba(255,255,255,.03)}.web-preview-panel{flex:1;display:flex;flex-direction:column;background:#ffffff03}.web-preview-header{display:flex;justify-content:space-between;align-items:center;padding:.45rem .85rem;background:#04081099;border-bottom:1px solid rgba(255,255,255,.03);font-size:.72rem;color:#475569;font-weight:600;letter-spacing:.03em}.web-browser-dots{display:flex;gap:5px}.web-browser-dots span{width:10px;height:10px;border-radius:50%;opacity:.5}.web-preview-iframe{flex:1;border:none;background:#fff}@media(max-width:900px){.web-sidebar{display:none}.web-layout{flex-direction:column}.web-editor-panel{border-right:none;border-bottom:1px solid rgba(45,212,191,.06);min-height:40vh}}:root{--js-dark-bg: #0a0e1a;--js-mahogany: #1a0f0a;--js-copper: #b87333;--js-brass: #c9a959;--js-tesla-purple: #7b2d8e;--js-neon-green: #39ff14;--js-electric-blue: #00d4ff;--js-lab-text: #e2e8f0;--js-dim-text: #94a3b8;--js-error-red: #ef4444;--js-success-green: #10b981}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1a0f0a80}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b87333,#c9a959);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d69c4f,#e0b85f)}.js-module{min-height:100vh;background:linear-gradient(135deg,#0a0e1a,#1a0f0a 25%,#0d0f1f 75%,#0a0e1a);background-attachment:fixed;color:var(--js-lab-text);display:flex;flex-direction:column;overflow:hidden;position:relative}.js-module:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(123,45,142,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(185,115,51,.03) 0%,transparent 50%);pointer-events:none;z-index:0}.js-topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;background:#0a0e1ae6;border-bottom:2px solid var(--js-electric-blue);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:10;box-shadow:0 0 20px #00d4ff26,0 4px 20px #00000080;position:relative}.js-topbar:after{content:"";position:absolute;bottom:-2px;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--js-electric-blue),transparent);opacity:.5;pointer-events:none}.js-topbar-title{font-size:1.1rem;font-weight:900;background:linear-gradient(135deg,var(--js-electric-blue),var(--js-neon-green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 10px rgba(0,212,255,.3)}.js-topbar-lesson{font-size:.82rem;color:var(--js-dim-text);margin-left:auto}.js-back-btn{background:#b973331f;border:1px solid rgba(185,115,51,.3);color:var(--js-copper);padding:.4rem .75rem;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:.3rem;font-family:inherit}.js-back-btn:hover{background:#b9733340;border-color:#b9733380;transform:translate(-2px)}.js-layout{display:grid;grid-template-columns:260px 1fr;flex:1;overflow:hidden;position:relative;z-index:1}.js-sidebar{background:linear-gradient(180deg,#1a0f0acc,#0a0e1ae6);border-right:2px solid var(--js-copper);overflow-y:auto;padding:1rem 0;box-shadow:inset -10px 0 20px #0000004d}.js-unit-group{margin-bottom:1.5rem;padding:0 .8rem}.js-unit-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;margin-bottom:.5rem;border-bottom:1px solid rgba(185,115,51,.2);font-size:.75rem;font-weight:700;color:var(--js-brass);text-transform:uppercase;letter-spacing:.05em}.js-unit-icon{font-size:1.2rem}.js-unit-name{flex:1}.js-unit-lessons{display:flex;flex-direction:column;gap:.4rem}.js-lesson-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:#7b2d8e0d;border:1px solid rgba(0,212,255,.1);border-radius:.3rem;color:var(--js-dim-text);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-align:left;font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.js-lesson-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.js-lesson-num{min-width:1.4rem;text-align:center;font-weight:700;color:var(--js-electric-blue)}.js-lesson-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.js-lesson-btn:hover:not(:disabled){background:#7b2d8e26;border-color:#00d4ff4d;color:var(--js-lab-text);transform:translate(2px)}.js-lesson-btn.active{background:linear-gradient(135deg,#00d4ff33,#39ff141a);border-color:var(--js-electric-blue);color:var(--js-electric-blue);box-shadow:0 0 10px #00d4ff26}.js-lesson-btn.completed{color:var(--js-neon-green)}.js-lesson-btn.locked{opacity:.5;cursor:not-allowed;color:#1e293b}.js-lesson-btn:disabled{cursor:not-allowed}.js-ide{display:flex;flex-direction:column;background:var(--js-dark-bg);overflow:hidden}.js-description-bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:#1a0f0a99;border-bottom:1px solid rgba(0,212,255,.1);font-size:.82rem;color:var(--js-dim-text);flex-shrink:0}.js-tutorial-toggle,.js-hint-btn{background:#b973331f;border:1px solid rgba(185,115,51,.3);color:var(--js-copper);padding:.3rem .6rem;border-radius:.3rem;cursor:pointer;font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:.3rem;transition:all .2s cubic-bezier(.16,1,.3,1);font-family:inherit}.js-tutorial-toggle:hover,.js-hint-btn:hover{background:#b9733340;border-color:#b9733380}.js-status-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.js-status-badge.pass{color:var(--js-neon-green);background:#39ff141f;border:1px solid rgba(57,255,20,.3)}.js-status-badge.fail{color:var(--js-error-red);background:#ef44441f;border:1px solid rgba(239,68,68,.3)}.js-next-btn{background:linear-gradient(135deg,var(--js-electric-blue),var(--js-neon-green));color:var(--js-dark-bg);border:none;padding:.4rem .8rem;border-radius:.4rem;cursor:pointer;font-size:.75rem;font-weight:800;display:flex;align-items:center;gap:.3rem;transition:all .2s cubic-bezier(.16,1,.3,1);text-transform:uppercase;letter-spacing:.05em;font-family:inherit}.js-next-btn:hover{transform:translateY(-2px);box-shadow:0 0 15px #00d4ff4d}.js-tutorial-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100}.js-tutorial-popup{background:linear-gradient(135deg,#1a0f0af2,#0a0e1af2);border:2px solid var(--js-electric-blue);border-radius:.8rem;width:90%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 0 40px #00d4ff40,0 20px 60px #000c;overflow:hidden}.js-tutorial-popup-header{display:flex;align-items:center;gap:.8rem;padding:1rem;border-bottom:1px solid rgba(0,212,255,.2);background:#00d4ff0d;font-weight:700;color:var(--js-electric-blue);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}.js-tutorial-close{margin-left:auto;background:transparent;border:none;color:var(--js-dim-text);cursor:pointer;padding:.3rem;transition:all .2s;font-family:inherit}.js-tutorial-close:hover{color:var(--js-error-red);transform:rotate(90deg)}.js-tutorial-popup-body{flex:1;padding:1.5rem;overflow-y:auto;color:var(--js-lab-text);font-size:.9rem;line-height:1.6}.js-tutorial-popup-footer{display:flex;align-items:center;gap:1rem;padding:1rem;border-top:1px solid rgba(0,212,255,.1);background:#00d4ff0d;flex-shrink:0}.js-editor-panel{display:flex;flex-direction:column;flex:1;background:var(--js-dark-bg);border-right:2px solid var(--js-copper);overflow:hidden}.js-editor-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#1a0f0acc;border-bottom:1px solid rgba(185,115,51,.2);font-size:.82rem;font-weight:700;color:var(--js-brass);text-transform:uppercase;letter-spacing:.05em}.js-editor-textarea{flex:1;background:#0f0c0a;color:var(--js-neon-green);border:none;padding:1rem;font-family:Fira Code,Monaco,monospace;font-size:.95rem;line-height:1.7;resize:none;outline:none;letter-spacing:.02em;box-shadow:inset 0 2px 10px #00000080}.js-editor-textarea::placeholder{color:#39ff144d}.js-editor-textarea:focus{box-shadow:inset 0 2px 10px #00000080,0 0 10px #39ff141a}.js-editor-actions{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:#1a0f0acc;border-top:1px solid rgba(185,115,51,.2);flex-shrink:0}.js-run-btn{background:linear-gradient(135deg,var(--js-electric-blue),var(--js-neon-green));color:var(--js-dark-bg);border:none;padding:.5rem 1rem;border-radius:.4rem;cursor:pointer;font-size:.8rem;font-weight:800;display:flex;align-items:center;gap:.4rem;transition:all .3s cubic-bezier(.16,1,.3,1);text-transform:uppercase;letter-spacing:.05em;font-family:inherit;flex-shrink:0}.js-run-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 20px #00d4ff66,0 0 10px #39ff144d}.js-run-btn:active:not(:disabled){transform:translateY(0);animation:js-lightning-flash .3s cubic-bezier(.16,1,.3,1)}.js-run-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes js-lightning-flash{0%{filter:brightness(1)}25%{filter:brightness(2) drop-shadow(0 0 20px var(--js-electric-blue))}50%{filter:brightness(1)}75%{filter:brightness(1.8) drop-shadow(0 0 15px var(--js-electric-blue))}to{filter:brightness(1)}}.js-results-panel{display:flex;flex-direction:column;flex:1;background:var(--js-dark-bg);overflow:hidden;gap:0}.js-results-section,.js-notes-section{display:flex;flex-direction:column;flex:1;overflow:hidden;border-top:1px solid rgba(0,212,255,.1)}.js-results-section{flex:1.2}.js-notes-section{flex:.8}.js-results-header,.js-notes-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#1a0f0acc;border-bottom:1px solid rgba(0,212,255,.2);font-size:.82rem;font-weight:700;color:var(--js-electric-blue);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.js-output-console{flex:1;background:#0f0c0a;overflow-y:auto;padding:.8rem;font-family:Fira Code,Monaco,monospace;font-size:.85rem;line-height:1.5;box-shadow:inset 0 2px 10px #00000080}.js-output-lines{display:flex;flex-direction:column;gap:.3rem}.js-output-line{display:flex;align-items:flex-start;gap:.6rem;padding:.4rem .6rem;background:#39ff140d;border-left:2px solid var(--js-neon-green);border-radius:.2rem;animation:js-output-slide-in .3s cubic-bezier(.16,1,.3,1);color:var(--js-neon-green)}.js-output-line.error{background:#ef444414;border-left-color:var(--js-error-red);color:var(--js-error-red)}.js-output-prefix{flex-shrink:0;color:var(--js-copper);font-weight:700}.js-output-text{flex:1;word-break:break-word;white-space:pre-wrap}@keyframes js-output-slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.js-notes-content{flex:1;padding:1rem;overflow-y:auto;background:#0a0e1a80;font-size:.85rem;line-height:1.6}@media(max-width:768px){.js-layout{grid-template-columns:1fr}.js-sidebar{display:none}.js-editor-panel{border-right:none}.js-results-panel{display:none}.js-topbar{flex-wrap:wrap;gap:.5rem}.js-topbar-lesson{display:none}.js-editor-textarea{font-size:.85rem}.js-run-btn{padding:.4rem .8rem;font-size:.7rem}}@keyframes js-bubble-rise{0%{transform:translateY(0) translate(0);opacity:1}to{transform:translateY(-100px) translate(var(--offset, 0px));opacity:0}}@keyframes js-tesla-glow{0%,to{box-shadow:0 0 10px #00d4ff4d,0 0 20px #39ff141a}50%{box-shadow:0 0 20px #00d4ff80,0 0 30px #39ff1433}}.js-status-badge.pass{animation:js-tesla-glow 2s ease-in-out infinite}button{transition:all .2s cubic-bezier(.16,1,.3,1)}button:focus{outline:2px solid var(--js-electric-blue);outline-offset:2px}strong{font-weight:700}code{font-family:Fira Code,Monaco,monospace}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:more){.js-module{--js-electric-blue: #0088ff;--js-neon-green: #00ff00}.js-status-badge.pass,.js-status-badge.fail{border-width:2px}}:root{--temporal-dark: #0a0a1a;--temporal-blue: #4fc3f7;--temporal-purple: #ab47bc;--temporal-gold: #ffd54f;--temporal-green: #66bb6a;--temporal-red: #ef5350;--temporal-gray: #37474f;--temporal-light: #eceff1}.git-module{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,var(--temporal-dark) 0%,#1a0033 100%);color:var(--temporal-light);font-family:Courier New,monospace;overflow:hidden}.git-topbar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#0a0a1ae6;border-bottom:2px solid var(--temporal-blue);box-shadow:0 4px 12px #4fc3f733;flex-shrink:0}.git-back-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#4fc3f71a;border:1px solid var(--temporal-blue);color:var(--temporal-blue);border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s ease}.git-back-btn:hover{background:var(--temporal-blue);color:var(--temporal-dark);box-shadow:0 0 12px #4fc3f780}.git-topbar-title-icon{font-size:20px;animation:pulse-glow 2s ease-in-out infinite}.git-topbar-title{font-size:1.4rem;font-weight:700;color:var(--temporal-gold);text-shadow:0 0 10px rgba(255,213,79,.5);flex-grow:1}.git-topbar-lesson{font-size:.85rem;color:var(--temporal-blue);padding:0 12px;border-left:1px solid var(--temporal-purple);border-right:1px solid var(--temporal-purple)}@keyframes pulse-glow{0%,to{text-shadow:0 0 10px var(--temporal-gold)}50%{text-shadow:0 0 20px var(--temporal-gold)}}.git-layout{display:flex;flex:1;gap:0;overflow:hidden}.git-sidebar{width:280px;background:linear-gradient(180deg,#0a0a1af2,#1a0033f2);border-right:2px solid var(--temporal-purple);padding:16px 0;overflow-y:auto;flex-shrink:0}.git-sidebar::-webkit-scrollbar{width:8px}.git-sidebar::-webkit-scrollbar-track{background:#4fc3f71a}.git-sidebar::-webkit-scrollbar-thumb{background:var(--temporal-blue);border-radius:4px}.git-sidebar::-webkit-scrollbar-thumb:hover{background:var(--temporal-purple)}.git-era-group{margin-bottom:20px;padding:0 8px}.git-era-header{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:8px;background:#ab47bc26;border-left:3px solid var(--temporal-purple);cursor:default}.git-era-icon{font-size:1.3rem}.git-era-name{font-size:.9rem;font-weight:600;color:var(--temporal-purple);flex-grow:1}.git-era-count{font-size:.75rem;color:var(--temporal-blue);background:#4fc3f733;padding:2px 6px;border-radius:3px}.git-lesson-btn{display:flex;align-items:center;gap:10px;width:calc(100% - 16px);margin:0 8px 6px;padding:10px 12px;background:#4fc3f714;border:1px solid rgba(79,195,247,.2);border-radius:6px;color:var(--temporal-light);cursor:pointer;font-size:.85rem;font-family:inherit;text-align:left;transition:all .2s ease}.git-lesson-btn:hover:not(.locked){background:#4fc3f726;border-color:var(--temporal-blue);box-shadow:0 0 8px #4fc3f74d}.git-lesson-btn.active{background:var(--temporal-blue);border-color:var(--temporal-blue);color:var(--temporal-dark);font-weight:600;box-shadow:0 0 16px #4fc3f799}.git-lesson-btn.completed{background:#66bb6a1a;border-color:var(--temporal-green)}.git-lesson-btn.completed.active{background:var(--temporal-green);border-color:var(--temporal-green);color:var(--temporal-dark)}.git-lesson-btn.locked{opacity:.5;cursor:not-allowed;background:#252f3f80;border-color:#4fc3f71a}.git-lesson-num{display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;background:#ffd54f33;border-radius:50%;font-size:.8rem;font-weight:600;color:var(--temporal-gold)}.git-lesson-btn.active .git-lesson-num{background:var(--temporal-dark);color:var(--temporal-gold)}.git-lesson-title{flex-grow:1}.git-terminal-container{flex:1;display:flex;flex-direction:column;padding:16px;gap:12px;overflow:hidden}.git-challenge-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 16px;background:#ab47bc1a;border:1px solid var(--temporal-purple);border-radius:8px;flex-shrink:0}.git-challenge-header h3{margin:0 0 4px;font-size:1.2rem;color:var(--temporal-gold)}.git-challenge-header p{margin:0;font-size:.9rem;color:var(--temporal-light);opacity:.8}.git-tutorial-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#4fc3f733;border:1px solid var(--temporal-blue);border-radius:6px;color:var(--temporal-blue);cursor:pointer;font-size:.85rem;transition:all .2s ease;flex-shrink:0;white-space:nowrap}.git-tutorial-toggle:hover{background:var(--temporal-blue);color:var(--temporal-dark);box-shadow:0 0 12px #4fc3f780}.git-tutorial-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.git-tutorial-modal{width:90%;max-width:700px;background:linear-gradient(135deg,#0a0a1afa,#1a0033fa);border:2px solid var(--temporal-blue);border-radius:12px;box-shadow:0 0 40px #4fc3f766,inset 0 0 20px #ab47bc1a;display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.git-tutorial-header{display:flex;align-items:center;gap:12px;padding:20px;background:#4fc3f726;border-bottom:1px solid var(--temporal-purple)}.git-tutorial-header h2{margin:0;font-size:1.3rem;color:var(--temporal-gold);flex-grow:1}.git-tutorial-close{width:32px;height:32px;background:#ab47bc4d;border:1px solid var(--temporal-purple);border-radius:50%;color:var(--temporal-purple);font-size:24px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.git-tutorial-close:hover{background:var(--temporal-purple);color:var(--temporal-dark)}.git-tutorial-content{flex:1;padding:24px;overflow-y:auto;color:var(--temporal-light)}.git-tutorial-text{line-height:1.6;font-size:.95rem}.git-tutorial-text h1{color:var(--temporal-gold);margin-top:0}.git-tutorial-text h2{color:var(--temporal-blue);margin-top:16px}.git-tutorial-text code{background:#37474f99;padding:2px 6px;border-radius:4px;color:var(--temporal-gold);font-family:Courier New,monospace}.git-tutorial-text pre{background:#0a0a1acc;border-left:3px solid var(--temporal-blue);padding:12px;border-radius:6px;overflow-x:auto}.git-tutorial-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:#0a0a1ae6;border-top:1px solid var(--temporal-purple)}.git-tutorial-btn{padding:8px 16px;background:#4fc3f733;border:1px solid var(--temporal-blue);border-radius:6px;color:var(--temporal-blue);cursor:pointer;font-size:.85rem;transition:all .2s ease}.git-tutorial-btn:hover:not(:disabled){background:var(--temporal-blue);color:var(--temporal-dark);box-shadow:0 0 12px #4fc3f780}.git-tutorial-btn:disabled{opacity:.4;cursor:not-allowed}.git-tutorial-start{background:#ab47bc4d;border-color:var(--temporal-purple);color:var(--temporal-purple)}.git-tutorial-start:hover{background:var(--temporal-purple);color:var(--temporal-dark)}.git-tutorial-page{font-size:.85rem;color:var(--temporal-blue)}.git-timeline-container{padding:16px;background:#0a0a1a99;border:1px solid rgba(79,195,247,.2);border-radius:8px;flex-shrink:0}.git-timeline-svg{width:100%;height:120px;filter:drop-shadow(0 0 4px rgba(79,195,247,.3))}.git-commit-dot{transition:r .3s ease;filter:drop-shadow(0 0 6px rgba(79,195,247,.6))}.git-commit-dot:hover{r:12}.git-commit-label{font-family:Courier New,monospace;fill:var(--temporal-light);opacity:.7}.git-tasks-panel{padding:12px 16px;background:#0a0a1a99;border:1px solid rgba(171,71,188,.2);border-radius:8px;flex-shrink:0;max-height:140px;overflow-y:auto}.git-tasks-panel h4{margin:0 0 8px;color:var(--temporal-purple);font-size:.9rem}.git-tasks-list{display:flex;flex-direction:column;gap:6px}.git-task{display:flex;gap:10px;padding:8px;background:#4fc3f714;border:1px solid rgba(79,195,247,.2);border-radius:6px;transition:all .2s ease}.git-task.completed{background:#66bb6a1a;border-color:var(--temporal-green)}.git-task-checkbox{min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#ffd54f33;border:1px solid var(--temporal-gold);border-radius:4px;color:var(--temporal-gold);font-size:.8rem;font-weight:600}.git-task.completed .git-task-checkbox{background:var(--temporal-green);color:#fff;border-color:var(--temporal-green)}.git-task-content{flex:1;min-width:0}.git-task-instruction{margin:0 0 2px;font-size:.85rem;color:var(--temporal-light)}.git-task-hint{margin:0;font-size:.75rem;color:var(--temporal-blue);font-style:italic}.git-task-hint-label{font-weight:600;color:var(--temporal-purple)}.git-terminal{display:flex;flex-direction:column;flex:1;background:#000a0a;border:2px solid var(--temporal-blue);border-radius:8px;overflow:hidden;box-shadow:0 0 20px #4fc3f74d,inset 0 0 20px #4fc3f70d;font-size:.9rem;font-family:Courier New,monospace;line-height:1.4}.git-terminal-output{flex:1;padding:12px 16px;overflow-y:auto;color:#0f0;text-shadow:0 0 5px rgba(15,255,0,.5);background:linear-gradient(180deg,#000000f2,#0a0a1acc);position:relative}.git-terminal-output:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0px,rgba(255,255,255,.03) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:0}.git-terminal-output>*{position:relative;z-index:1}.git-output-line{white-space:pre-wrap;word-wrap:break-word;color:#0f0}.git-terminal-output::-webkit-scrollbar{width:8px}.git-terminal-output::-webkit-scrollbar-track{background:#4fc3f71a}.git-terminal-output::-webkit-scrollbar-thumb{background:var(--temporal-blue);border-radius:4px}.git-terminal-input{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#000a0a;border-top:1px solid rgba(79,195,247,.2)}.git-prompt{color:#4fc3f7;font-weight:600;white-space:nowrap;-webkit-user-select:none;user-select:none}.git-input{flex:1;background:transparent;border:none;color:#0f0;font-family:Courier New,monospace;font-size:.9rem;outline:none;text-shadow:0 0 5px rgba(15,255,0,.5)}.git-input::placeholder{color:#0fff004d}.git-input:focus{text-shadow:0 0 10px rgba(15,255,0,.8)}.git-input:after{content:"";display:inline-block;width:8px;height:1em;background:#0f0;margin-left:4px;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.git-success-container{display:flex;flex-direction:column;gap:12px;padding:16px;background:#66bb6a1a;border:2px solid var(--temporal-green);border-radius:8px;flex-shrink:0}.git-success-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#66bb6a33;border-radius:6px;color:var(--temporal-green);font-weight:600}.git-success-message p{margin:0}.git-next-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,var(--temporal-green) 0%,#4caf50 100%);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #66bb6a66}.git-next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #66bb6a99}.git-next-btn:active{transform:translateY(0)}.git-final-success{text-align:center;padding:20px;background:#ab47bc33;border:2px solid var(--temporal-purple);border-radius:8px}.git-final-success h3{margin:0 0 8px;color:var(--temporal-gold);font-size:1.3rem}.git-final-success p{margin:0;color:var(--temporal-light)}@media(max-width:768px){.git-layout{flex-direction:column}.git-sidebar{width:100%;border-right:none;border-bottom:2px solid var(--temporal-purple);max-height:150px;padding:8px 0}.git-terminal-container{padding:8px;gap:8px}.git-topbar{flex-wrap:wrap;gap:8px}.git-topbar-title{font-size:1.1rem}.git-topbar-lesson{display:none}.git-challenge-header{flex-direction:column;gap:8px}.git-tutorial-toggle{align-self:flex-start}.git-tasks-panel{max-height:100px}}@keyframes glow{0%,to{box-shadow:0 0 10px #4fc3f74d}50%{box-shadow:0 0 20px #4fc3f799}}@keyframes portal-swirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}.git-terminal{animation:glow 3s ease-in-out infinite}*{scrollbar-color:var(--temporal-blue) rgba(79,195,247,.1);scrollbar-width:thin}::selection{background:var(--temporal-blue);color:var(--temporal-dark)}::-moz-selection{background:var(--temporal-blue);color:var(--temporal-dark)}.app-module{width:100vw;height:100vh;display:flex;flex-direction:column;background:#fff;color:#1a1a2e;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}.app-topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;box-shadow:0 2px 8px #0000000a;position:relative}.app-topbar:after{content:"";position:absolute;bottom:-1px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.1),transparent);pointer-events:none}.app-topbar-title{font-weight:800;font-size:1rem;color:#7c3aed;letter-spacing:.5px}.app-topbar-lesson{font-size:.8rem;color:#64748b;margin-left:auto;margin-right:.5rem}.app-btn-outline{padding:.35rem .8rem;font-size:.78rem;background:transparent;border:1px solid #e2e8f0;color:#475569;border-radius:.4rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .2s;font-family:inherit}.app-btn-outline:hover{background:#7c3aed0d;border-color:#7c3aed;color:#7c3aed}.app-main-layout{display:flex;flex:1;overflow:hidden}.app-sidebar{width:240px;flex-shrink:0;background:#f8f8f8;border-right:1px solid #e2e8f0;overflow-y:auto;padding:.5rem 0}.app-sidebar::-webkit-scrollbar{width:6px}.app-sidebar::-webkit-scrollbar-thumb{background:#7c3aed33;border-radius:3px}.app-sidebar::-webkit-scrollbar-thumb:hover{background:#7c3aed66}.app-phase-group{margin-bottom:.25rem;border-left:3px solid transparent;transition:border-color .2s}.app-phase-header{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.app-phase-icon{font-size:1.2rem}.app-phase-name{flex:1}.app-sprint-btn{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:none;border:none;color:#64748b;font-size:.78rem;text-align:left;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);border-left:3px solid transparent;font-family:inherit;font-weight:500}.app-sprint-btn:hover{background:#7c3aed0d;color:#1a1a2e;transform:translate(2px)}.app-sprint-btn.active{background:#7c3aed1a;color:#7c3aed;border-left-color:#7c3aed;font-weight:700;box-shadow:inset 2px 0 6px #7c3aed1a}.app-sprint-btn.completed,.app-sprint-btn.completed .app-sprint-num{color:#10b981}.app-sprint-btn.locked{opacity:.4;cursor:not-allowed}.app-sprint-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;background:#7c3aed1a;border:1px solid rgba(124,58,237,.25);color:#7c3aed;flex-shrink:0;transition:all .2s}.app-sprint-btn.completed .app-sprint-num{background:#10b9811a;border-color:#10b9814d}.app-sprint-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-funding-meter{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(90deg,#7c3aed0d,#10b9810d);border-bottom:1px solid #e2e8f0;flex-shrink:0}.app-funding-label{font-size:.75rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;min-width:80px}.app-progress-bar{flex:1;height:6px;background:#7c3aed1a;border-radius:3px;overflow:hidden}.app-progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#10b981);transition:width .3s ease;border-radius:3px}.app-funding-percent{font-size:.75rem;font-weight:700;color:#7c3aed;min-width:60px;text-align:right}.app-ide{flex:1;display:flex;flex-direction:column;overflow:hidden}.app-description-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem 1rem;background:#7c3aed05;border-bottom:1px solid #e2e8f0;flex-shrink:0}.app-tutorial-toggle{display:flex;align-items:center;gap:.3rem;background:#7c3aed1a;border:1px solid rgba(124,58,237,.2);color:#7c3aed;padding:.25rem .6rem;border-radius:.4rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.app-tutorial-toggle:hover{background:#7c3aed26;box-shadow:0 0 8px #7c3aed1f}.app-status-badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;display:flex;align-items:center;gap:.3rem}.app-status-badge.pass{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.app-status-badge.fail{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.app-next-btn{display:flex;align-items:center;gap:.3rem;background:#10b981;color:#fff;border:none;padding:.3rem .7rem;border-radius:.4rem;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}.app-next-btn:hover{background:#059669;transform:translate(2px)}.app-tutorial-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.app-tutorial-popup{background:#fff;border-radius:12px;box-shadow:0 20px 60px #00000026;max-width:600px;width:90%;max-height:85vh;display:flex;flex-direction:column}.app-tutorial-header{display:flex;align-items:center;gap:.5rem;padding:1.2rem;border-bottom:1px solid #e2e8f0;font-weight:700;color:#1a1a2e}.app-tutorial-close{margin-left:auto;background:none;border:none;cursor:pointer;color:#64748b;padding:.25rem;transition:color .2s}.app-tutorial-close:hover{color:#1a1a2e}.app-tutorial-body{flex:1;overflow-y:auto;padding:1.2rem;font-size:.95rem;line-height:1.6;color:#475569}.app-tutorial-body h3,.app-tutorial-body strong{color:#7c3aed}.app-tutorial-body code{background:#7c3aed1a;padding:.15rem .4rem;border-radius:.25rem;color:#7c3aed;font-family:Fira Code,monospace}.app-tutorial-body pre{background:#7c3aed1a;padding:.8rem;border-radius:.4rem;overflow-x:auto;margin:.5rem 0}.app-tutorial-footer{display:flex;align-items:center;gap:.75rem;padding:.8rem 1.2rem;border-top:1px solid #e2e8f0;background:#f8f8f8;border-radius:0 0 12px 12px}.app-btn-outline{flex:1;padding:.5rem 1rem;background:#fff;border:1px solid #e2e8f0;color:#475569;border-radius:.4rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.app-btn-outline:hover:not(:disabled){background:#7c3aed0d;border-color:#7c3aed;color:#7c3aed}.app-btn-outline:disabled{opacity:.4;cursor:not-allowed}.app-btn-primary{flex:1;padding:.5rem 1rem;background:#7c3aed;color:#fff;border:none;border-radius:.4rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}.app-btn-primary:hover{background:#6d28d9;transform:translateY(-1px)}.app-feedback-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1001}.app-feedback-popup{background:linear-gradient(135deg,#fff,#f8f8f8);border-radius:12px;box-shadow:0 20px 60px #00000026;max-width:500px;width:90%;display:flex;flex-direction:column;border:1px solid #e2e8f0}.app-feedback-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-bottom:1px solid #e2e8f0;font-weight:700;color:#1a1a2e;font-size:1.1rem}.app-feedback-close{background:none;border:none;cursor:pointer;color:#64748b;padding:.25rem}.app-feedback-body{padding:1.5rem;flex:1}.app-feedback-footer{padding:1rem;border-top:1px solid #e2e8f0}.app-layout{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e2e8f0;overflow:hidden}.app-editor-pane{display:flex;flex-direction:column;background:#fff;overflow:hidden}.app-editor-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#f8f8f8;border-bottom:1px solid #e2e8f0;flex-shrink:0}.app-editor-label{font-size:.85rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.app-btn-hint{display:flex;align-items:center;gap:.3rem;background:#7c3aed1a;border:1px solid rgba(124,58,237,.2);color:#7c3aed;padding:.35rem .7rem;border-radius:.4rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.app-btn-hint:hover{background:#7c3aed26}.app-hint-box{padding:.75rem 1rem;background:#7c3aed0d;border-left:3px solid #7c3aed;border-bottom:1px solid #e2e8f0;font-size:.85rem;color:#475569;flex-shrink:0}.app-hint-box strong{color:#7c3aed}.app-hint-box pre{margin-top:.5rem;background:#fff;padding:.6rem;border-radius:.3rem;overflow-x:auto;font-family:Fira Code,monospace;font-size:.8rem}.app-code-editor{flex:1;padding:1rem;background:#fff;border:none;font-family:Fira Code,Courier New,monospace;font-size:.9rem;line-height:1.6;color:#1a1a2e;resize:none;overflow:auto}.app-code-editor:focus{outline:none}.app-code-editor::selection{background:#7c3aed33}.app-editor-footer{display:flex;gap:.5rem;padding:.75rem 1rem;background:#f8f8f8;border-top:1px solid #e2e8f0;flex-shrink:0}.app-btn-validate{display:flex;align-items:center;justify-content:center;gap:.5rem;flex:1;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;border:none;padding:.6rem 1rem;border-radius:.6rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s;font-family:inherit;box-shadow:0 4px 12px #7c3aed33}.app-btn-validate:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed4d}.app-btn-validate:active{transform:translateY(0)}.app-preview-pane{display:flex;flex-direction:column;background:#f8f8f8;overflow:hidden}.app-preview-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0}.app-preview-label{font-size:.85rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.app-viewport-toggle{display:flex;gap:.3rem;background:#f8f8f8;padding:.3rem;border-radius:.5rem;border:1px solid #e2e8f0}.viewport-btn{background:transparent;border:1px solid transparent;padding:.4rem .6rem;border-radius:.3rem;color:#64748b;cursor:pointer;transition:all .2s;font-family:inherit;display:flex;align-items:center}.viewport-btn:hover{background:#7c3aed0d;color:#7c3aed}.viewport-btn.active{background:#7c3aed1a;color:#7c3aed;border-color:#7c3aed}.app-phone-frame{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;position:relative;margin:0 auto}.app-phone-screen{position:relative;width:100%;aspect-ratio:9/19.5;background:#1a1a2e;border-radius:2.5rem;padding:.75rem;box-shadow:0 20px 50px #0003;overflow:hidden}.app-phone-notch{position:absolute;top:.75rem;left:50%;transform:translate(-50%);width:60%;height:1.75rem;background:#000;border-radius:0 0 2rem 2rem;z-index:10}.app-preview-iframe{width:100%;height:100%;border:none;border-radius:2rem;background:#fff}.app-phone-button{position:absolute;right:-.5rem;top:40%;width:.4rem;height:3rem;background:#64748b;border-radius:.2rem .4rem .4rem .2rem}@media(max-width:1200px){.app-layout{grid-template-columns:1fr}.app-preview-pane{display:none}}@media(max-width:768px){.app-sidebar{width:180px;font-size:.75rem}.app-sprint-btn{padding:.4rem .5rem}.app-sprint-title,.app-topbar-lesson{display:none}.app-description-bar{flex-direction:column;align-items:flex-start}.app-layout{grid-template-columns:1fr}.app-preview-pane{display:flex}.app-phone-frame{max-width:100%}}@media(max-width:480px){.app-module{width:100%;height:auto}.app-main-layout{flex-direction:column;max-height:none}.app-sidebar{width:100%;max-height:200px;display:flex;overflow-x:auto}.app-phase-group{min-width:max-content}.app-layout{grid-template-columns:1fr;height:auto}.app-editor-pane{min-height:300px}.app-preview-pane{min-height:400px}.app-phone-screen{max-width:320px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#7c3aed33;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#7c3aed66}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.app-tutorial-popup,.app-feedback-popup{animation:slideIn .3s ease}@media print{.app-topbar,.app-sidebar,.app-editor-footer{display:none}.app-main-layout,.app-layout{display:block}.app-editor-pane{page-break-inside:avoid}}:root{--space-dark: #0a0a2e;--space-darker: #050510;--console-green: #00e676;--radar-blue: #00bcd4;--warning-amber: #ff9800;--hull-silver: #b0bec5;--neon-glow: #00e676}.java-module{min-height:100vh;background:linear-gradient(145deg,var(--space-dark) 0%,#0d0d35 50%,#0a0a2e 100%);background-image:radial-gradient(2px 2px at 20% 30%,#eee,#0000),radial-gradient(2px 2px at 60% 70%,#fff,#0000);background-size:200% 200%,150% 150%;background-position:0% 0%,40% 60%;background-attachment:fixed;color:#e2e8f0;display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:1}}.java-module:before{content:"";position:fixed;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,#fff,#fff0),radial-gradient(1px 1px at 20% 40%,#fff,#fff0),radial-gradient(1px 1px at 50% 50%,#fff,#fff0),radial-gradient(1px 1px at 80% 10%,#fff,#fff0),radial-gradient(1px 1px at 90% 60%,#fff,#fff0);background-size:200% 200%;background-position:0% 0%;animation:twinkle 5s ease-in-out infinite;pointer-events:none;z-index:0}.java-topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;background:#0a0a2ed9;border-bottom:2px solid rgba(0,230,118,.25);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:10;box-shadow:0 8px 32px #00e6761a,inset 0 1px #00e6761a;position:relative}.java-topbar:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--console-green),transparent);animation:scanline 3s linear infinite}@keyframes scanline{0%{opacity:0}50%{opacity:1}to{opacity:0}}.java-topbar-title{font-size:1.1rem;font-weight:900;color:var(--neon-glow);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 10px rgba(0,230,118,.4)}.java-topbar-lesson{font-size:.82rem;color:#64748b;margin-left:auto;font-family:Courier New,monospace}.java-btn-outline{background:#00e67614;border:1px solid rgba(0,230,118,.3);color:var(--console-green);padding:.4rem .75rem;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:.3rem;font-family:inherit}.java-btn-outline:hover{background:#00e67626;box-shadow:0 0 12px #00e67633;transform:translateY(-2px)}.java-main-layout{display:grid;grid-template-columns:240px 1fr;flex:1;overflow:hidden;gap:0;z-index:1}.java-sidebar{background:#0a0a2e99;border-right:2px solid rgba(0,230,118,.15);overflow-y:auto;min-height:0;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.java-sidebar::-webkit-scrollbar{width:6px}.java-sidebar::-webkit-scrollbar-track{background:#00e6760d;border-radius:3px}.java-sidebar::-webkit-scrollbar-thumb{background:#00e67640;border-radius:3px}.java-sidebar::-webkit-scrollbar-thumb:hover{background:#00e67666}.java-unit-group{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.3rem;border-left:2px solid rgba(0,230,118,.2);padding-left:.5rem}.java-unit-header{display:flex;align-items:center;gap:.4rem;padding:.5rem;font-size:.75rem;font-weight:800;color:var(--console-green);text-transform:uppercase;letter-spacing:.05em}.java-lesson-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:.5rem;border:1px solid transparent;background:transparent;color:#64748b;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-align:left;width:100%;font-family:inherit}.java-lesson-btn:hover{background:#00e6760f;color:var(--console-green);transform:translate(2px)}.java-lesson-btn.active{background:#00e6761f;border-color:#00e67659;color:var(--console-green);font-weight:700;box-shadow:0 0 12px #00e67626,inset 0 0 8px #00e6760d}.java-lesson-btn.completed,.java-lesson-btn.completed .java-lesson-num{color:var(--console-green)}.java-lesson-btn.locked{opacity:.3;cursor:not-allowed;pointer-events:none}.java-lesson-num{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#00e67614;border:1px solid rgba(0,230,118,.2);border-radius:4px;font-size:.7rem;font-weight:700;color:#64748b;flex-shrink:0}.java-lesson-btn.active .java-lesson-num{background:#00e67633;color:var(--console-green);border-color:#00e67666}.java-ide{display:flex;flex-direction:column;min-height:0;overflow:hidden}.java-description-bar{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:#0a0a2eb3;border-bottom:1px solid rgba(0,230,118,.1);flex-wrap:wrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.java-tutorial-toggle{background:#00e67614;border:1px solid rgba(0,230,118,.25);color:var(--console-green);padding:.4rem .7rem;border-radius:.4rem;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:.3rem}.java-tutorial-toggle:hover{background:#00e67626;box-shadow:0 0 8px #00e67626}.java-status-badge{padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:.4rem;letter-spacing:.05em}.java-status-badge.pass{background:#00e67626;color:var(--console-green);border:1px solid rgba(0,230,118,.3);box-shadow:0 0 8px #00e6761a}.java-status-badge.fail{background:#ff6b6b26;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.java-next-btn{background:#00e6761f;border:1px solid rgba(0,230,118,.35);color:var(--console-green);padding:.4rem .8rem;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:700;transition:all .2s;display:flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.05em}.java-next-btn:hover{background:#00e67633;box-shadow:0 0 12px #00e67640}.java-tutorial-popup-overlay{position:fixed;inset:0;background:#050510d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100}.java-tutorial-popup{background:linear-gradient(135deg,#0a0a2ef2,#0d0d35f2);border:2px solid rgba(0,230,118,.25);border-radius:.6rem;box-shadow:0 20px 60px #00e67626;max-width:600px;max-height:70vh;width:90%;display:flex;flex-direction:column}.java-tutorial-popup-header{display:flex;align-items:center;gap:.8rem;padding:1rem;border-bottom:1px solid rgba(0,230,118,.15);color:var(--console-green);font-weight:700;font-size:.95rem}.java-tutorial-close{background:none;border:none;color:var(--console-green);cursor:pointer;margin-left:auto;padding:.4rem;transition:all .2s}.java-tutorial-close:hover{transform:rotate(90deg)}.java-tutorial-popup-body{flex:1;overflow-y:auto;padding:1rem;color:#cbd5e1;font-size:.9rem;line-height:1.6}.java-tutorial-popup-body code{background:#00e67614;padding:.2rem .4rem;border-radius:.2rem;color:var(--console-green);font-family:Courier New,monospace}.java-tutorial-popup-footer{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-top:1px solid rgba(0,230,118,.15);background:#05051080}.java-back-btn{background:#00e67614;border:1px solid rgba(0,230,118,.25);color:var(--console-green);padding:.4rem .8rem;border-radius:.3rem;cursor:pointer;font-weight:600;transition:all .2s}.java-back-btn:hover:not(:disabled){background:#00e67626}.java-back-btn:disabled{opacity:.4;cursor:not-allowed}.java-run-btn{background:linear-gradient(135deg,#00e67633,#00bcd41a);border:1px solid rgba(0,230,118,.35);color:var(--console-green);padding:.5rem 1rem;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:700;transition:all .2s;display:flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.05em;margin-left:auto}.java-run-btn:hover:not(:disabled){background:linear-gradient(135deg,#00e6764d,#00bcd433);box-shadow:0 0 16px #00e6764d;transform:translateY(-2px)}.java-run-btn:disabled{opacity:.6;cursor:not-allowed}.java-editor-panel{display:flex;flex-direction:column;flex:1;min-width:0;background:#0a0a2e66;border-right:1px solid rgba(0,230,118,.1)}.java-editor-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#050510cc;border-bottom:1px solid rgba(0,230,118,.15);font-size:.85rem;font-weight:700;color:var(--console-green);font-family:Courier New,monospace}.java-editor-textarea{flex:1;padding:1rem;background:#05051099;color:#e2e8f0;border:none;font-family:Courier New,Monaco,monospace;font-size:.9rem;line-height:1.6;resize:none;outline:none;caret-color:var(--console-green);selection-background-color:rgba(0,230,118,.2)}.java-editor-textarea::selection{background:#00e67633;color:inherit}.java-editor-textarea::-webkit-scrollbar{width:6px}.java-editor-textarea::-webkit-scrollbar-track{background:transparent}.java-editor-textarea::-webkit-scrollbar-thumb{background:#00e67633;border-radius:3px}.java-editor-actions{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:#050510cc;border-top:1px solid rgba(0,230,118,.1)}.java-hint-btn{background:#ff980014;border:1px solid rgba(255,152,0,.25);color:var(--warning-amber);padding:.4rem .7rem;border-radius:.3rem;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:.3rem}.java-hint-btn:hover{background:#ff980026;box-shadow:0 0 8px #ff980026}.java-console-panel{display:flex;flex-direction:column;flex:1;background:#0a0a2e66;border-left:1px solid rgba(0,230,118,.1);overflow:hidden}.java-console-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#050510cc;border-bottom:1px solid rgba(0,230,118,.15);font-size:.85rem;font-weight:700;color:var(--console-green);font-family:Courier New,monospace}.java-console-container{flex:1;overflow-y:auto;padding:1rem;background:#05051099;font-family:Courier New,Monaco,monospace;font-size:.85rem;line-height:1.7;color:var(--console-green);text-shadow:0 0 4px rgba(0,230,118,.3)}.java-console-container::-webkit-scrollbar{width:6px}.java-console-container::-webkit-scrollbar-track{background:#00e6760d}.java-console-container::-webkit-scrollbar-thumb{background:#00e67640;border-radius:3px}.java-console-output{display:flex;flex-direction:column;gap:.2rem}.java-output-line{display:flex;align-items:baseline;gap:.5rem;animation:fadeInSlide .3s cubic-bezier(.16,1,.3,1) forwards;opacity:0}@keyframes fadeInSlide{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.java-output-line .prefix{color:var(--radar-blue);font-weight:700;flex-shrink:0}.java-telemetry-panel{padding:.8rem;background:#050510cc;border-top:1px solid rgba(0,230,118,.1);font-family:Courier New,monospace}@media(max-width:768px){.java-main-layout{grid-template-columns:1fr;gap:0}.java-sidebar{position:absolute;left:0;top:50px;width:200px;max-height:300px;z-index:50;border:2px solid rgba(0,230,118,.2);display:none}.java-sidebar.visible{display:flex}.java-topbar{flex-wrap:wrap;gap:.5rem;padding:.5rem}.java-topbar-title{font-size:.95rem}.java-console-header,.java-editor-header{font-size:.78rem}.java-editor-textarea,.java-console-container{font-size:.8rem}}