@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#090d16;--bg-secondary:#101625;--bg-card:#141b2db3;--bg-card-hover:#1e2943cc;--bg-glass:#0f172aa6;--border-color:#ffffff14;--border-focus:#6366f180;--border-glow:#6366f140;--accent-primary:#6366f1;--accent-primary-hover:#4f46e5;--accent-secondary:#06b6d4;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-danger:#ef4444;--accent-purple:#a855f7;--gradient-primary:linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);--gradient-emerald:linear-gradient(135deg, #10b981 0%, #06b6d4 100%);--gradient-fire:linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);--gradient-cyan:linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--gradient-dark:linear-gradient(180deg, #10172a 0%, #090d16 100%);--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-highlight:#38bdf8;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Outfit", sans-serif;--font-code:"Fira Code", monospace;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 8px 24px #0006;--shadow-lg:0 16px 36px #00000080;--shadow-glow:0 0 25px #6366f159;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-full:9999px}[data-theme=cyberpunk]{--bg-primary:#0a0612;--bg-secondary:#160d27;--accent-primary:#ec4899;--accent-secondary:#06b6d4;--gradient-primary:linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);--border-focus:#ec489980;--shadow-glow:0 0 25px #ec489959}[data-theme=matrix]{--bg-primary:#04120a;--bg-secondary:#0a2013;--accent-primary:#10b981;--accent-secondary:#34d399;--gradient-primary:linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);--border-focus:#10b98180;--shadow-glow:0 0 25px #10b98159}[data-theme=sunset]{--bg-primary:#140909;--bg-secondary:#241111;--accent-primary:#f59e0b;--accent-secondary:#ef4444;--gradient-primary:linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #f43f5e 100%);--border-focus:#f59e0b80;--shadow-glow:0 0 25px #f59e0b59}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);height:100vh;max-height:100vh;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;padding:0;line-height:1.5;overflow:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle,#6366f126 0%,#0000 70%);width:50vw;height:50vh;position:fixed;top:-10%;left:-10%}body:after{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle,#06b6d41f 0%,#0000 70%);width:50vw;height:50vh;position:fixed;bottom:-10%;right:-10%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#64748b66;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b899}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-.02em;font-weight:700}.gradient-text{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.gradient-text-cyan{background:var(--gradient-cyan);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.gradient-text-emerald{background:var(--gradient-emerald);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:border-color .2s,box-shadow .2s,transform .2s}.glass-panel-hover:hover{border-color:var(--border-focus);box-shadow:var(--shadow-glow)}.btn{font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 15px #6366f166}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px #6366f199}.btn-primary:active{transform:translateY(0)}.btn-success{background:var(--gradient-emerald);color:#fff;box-shadow:0 4px 15px #10b98159}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98180}.btn-secondary{border-color:var(--border-color);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{color:var(--text-primary);background:#ffffff0f}.btn-icon{border-radius:var(--radius-sm);padding:8px}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-indigo{color:#818cf8;background:#6366f126;border:1px solid #6366f14d}.badge-cyan{color:#22d3ee;background:#06b6d426;border:1px solid #06b6d44d}.badge-emerald{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge-amber{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #6366f14d}50%{box-shadow:0 0 30px #6366f1b3}}.animate-pulse-glow{animation:2.5s infinite pulseGlow}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:.3s cubic-bezier(.16,1,.3,1) forwards slideUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:.25s ease-in-out forwards fadeIn}@keyframes lineHighlight{0%{background:#6366f14d}50%{background:#6366f180}to{background:#6366f14d}}.active-execution-line{border-left:3px solid #818cf8;animation:1.5s infinite lineHighlight}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-float{animation:3s ease-in-out infinite floaty}@keyframes gentleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.animate-bounce-soft{animation:1.6s ease-in-out infinite gentleBounce}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-shimmer{background:linear-gradient(90deg,#ffffff05 0%,#ffffff14 50%,#ffffff05 100%) 0 0/200% 100%;animation:2.2s linear infinite shimmer}@keyframes popIn{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.animate-pop{animation:.35s cubic-bezier(.16,1,.3,1) forwards popIn}@keyframes progressSweep{0%{opacity:.6;transform:scaleX(.2)}to{opacity:1;transform:scaleX(1)}}.animate-progress{transform-origin:0;animation:.7s cubic-bezier(.16,1,.3,1) forwards progressSweep}@media (prefers-reduced-motion:reduce){.animate-float,.animate-bounce-soft,.animate-shimmer,.animate-pop,.animate-progress{animation:none!important}}.split-handle{touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background .2s;position:relative}.split-handle:hover{background:#6366f140}.split-handle-active{background:#6366f180!important}.split-handle-v{cursor:col-resize;width:6px}.split-handle-v:after{content:"";background:#ffffff2e;border-radius:4px;width:4px;height:34px;transition:background .2s,height .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.split-handle-v:hover:after,.split-handle-v.split-handle-active:after{background:#a5b4fc;height:46px;box-shadow:0 0 12px #8b5cf699}.split-handle-h{cursor:row-resize;height:6px}.split-handle-h:after{content:"";background:#ffffff2e;border-radius:4px;width:34px;height:4px;transition:background .2s,width .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.split-handle-h:hover:after,.split-handle-h.split-handle-active:after{background:#a5b4fc;width:46px;box-shadow:0 0 12px #8b5cf699}@media (prefers-reduced-motion:reduce){.split-handle,.split-handle:after{transition:none}}@media (width<=768px){html,body{height:100%;max-height:none;overflow-x:hidden;overflow-y:auto!important}@supports (height:100dvh){html,body,#root{height:100dvh}}body,.touch-scroll,[class*=mobile]{-webkit-overflow-scrolling:touch}.workspace-container{flex-direction:column!important;overflow-y:auto!important}.visualizer-trace-grid{grid-template-columns:1fr!important;overflow-y:auto!important}.split-handle-v{display:none!important}.pane-mobile-full{margin-bottom:12px;width:100%!important;max-width:100%!important;height:auto!important}#root,.glass-panel,.btn{max-width:100%}.btn{touch-action:manipulation}#playground-split{grid-auto-rows:45vh;overflow-y:auto;grid-template-columns:1fr!important}.mobile-hide-md{display:none!important}#challenge-grid{grid-template-columns:1fr!important}#challenge-workspace{height:480px}}@media (width<=480px){.workspace-container{padding:8px!important}}@media (width<=768px){.modal-card{max-height:94vh!important}#about-feedback-types{flex-wrap:wrap}#about-submit-row{flex-wrap:wrap;gap:10px}#about-header{flex-wrap:wrap;gap:8px}#about-creator-row{flex-wrap:wrap}#cert-header{flex-wrap:wrap;gap:8px}#cert-name-row{flex-wrap:wrap}#certificate-seal{flex-wrap:wrap;gap:12px;text-align:center!important;justify-content:center!important}#printable-certificate h1{font-size:1.6rem!important}#printable-certificate h2{font-size:1.5rem!important}#shortcut-row{flex-wrap:wrap}#quiz-option{gap:8px;justify-content:flex-start!important}}