*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0c0e14;--bg-panel:#12151e;--bg-surface:#181c28;--bg-editor:#0d1017;--bg-output:#0a0c12;--accent:#ff4d6a;--accent-glow:#ff4d6a26;--accent-hover:#ff6680;--accent-subtle:#ff4d6a14;--text:#c9d1d9;--text-bright:#e6edf3;--text-dim:#6e7a8a;--text-muted:#3d4550;--success:#3fb950;--success-bg:#3fb9501a;--error:#f85149;--error-bg:#f851491a;--border:#1e2533;--border-bright:#2a3345;--radius:8px;--radius-lg:12px;--transition:.2s cubic-bezier(.4, 0, .2, 1)}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}header{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;height:56px;padding:0 20px;display:flex}.header-left,.header-right{flex:none;min-width:160px}.header-right{justify-content:flex-end;display:flex}.header-center{flex:1;justify-content:center;max-width:480px;display:flex}.logo-link{align-items:center;text-decoration:none;display:flex}.logo-svg{width:90px;height:26px}.logo-text{fill:#fff;font-family:JetBrains Mono,monospace;font-size:22px}.logo-accent{fill:#ff5c7c;filter:drop-shadow(0 0 6px #ff5c7c99);animation:2s infinite logo-pulse}@keyframes logo-pulse{0%,to{opacity:1}50%{opacity:.6}}.progress-wrapper{align-items:center;gap:12px;width:100%;display:flex}.progress-bar-container{flex-direction:column;flex:1;gap:6px;display:flex;position:relative}.progress-label{color:var(--text-dim);text-align:center;letter-spacing:.02em;cursor:pointer;transition:all var(--transition);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:4px;padding:3px 8px;font-family:Inter,system-ui,sans-serif;font-size:.75rem;font-weight:500;display:inline-flex}.progress-label:hover{border-color:var(--border-bright);background:var(--bg-surface);color:var(--text)}.dropdown-chevron{transition:transform .2s}.progress-label.open .dropdown-chevron{transform:rotate(180deg)}.exercise-dropdown{background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:var(--radius-lg);z-index:100;width:320px;max-height:420px;padding:8px;animation:.15s fadeIn;display:none;position:absolute;top:calc(100% + 8px);left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 12px 40px #00000080}.exercise-dropdown.open{display:block}.dropdown-category{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);-webkit-user-select:none;user-select:none;padding:10px 10px 4px;font-size:.68rem;font-weight:600}.dropdown-category:first-child{padding-top:4px}.dropdown-item{cursor:pointer;color:var(--text);text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;width:100%;padding:8px 10px;font-family:Inter,system-ui,sans-serif;font-size:.82rem;transition:background .12s;display:flex}.dropdown-item:hover{background:var(--bg-surface)}.dropdown-item.active{background:var(--accent-subtle);color:var(--text-bright)}.dropdown-item.locked{opacity:.35;cursor:default}.dropdown-item.locked:hover{background:0 0}.dropdown-item-num{background:var(--bg-surface);min-width:22px;height:22px;color:var(--text-dim);border:1px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:flex}.dropdown-item.completed .dropdown-item-num{background:var(--success-bg);color:var(--success);border-color:#3fb9504d}.dropdown-item.active .dropdown-item-num{background:var(--accent-subtle);color:var(--accent);border-color:#ff4d6a4d}.dropdown-item-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.dropdown-item-check{color:var(--success);opacity:0;flex-shrink:0}.dropdown-item.completed .dropdown-item-check{opacity:1}.progress-track{background:var(--border);border-radius:2px;width:100%;height:3px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;box-shadow:0 0 8px var(--accent-glow);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}.nav-btn{border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius);cursor:pointer;width:32px;height:32px;transition:all var(--transition);background:0 0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.nav-btn:hover:not(:disabled){background:var(--bg-surface);border-color:var(--border-bright);color:var(--text-bright)}.nav-btn:disabled{opacity:.25;cursor:default}.completed-badge{color:var(--success);background:var(--success-bg);border-radius:20px;align-items:center;gap:6px;padding:5px 12px;font-size:.8rem;font-weight:500;display:flex}main{flex:1;display:flex;overflow:hidden}.panel{overflow:hidden}.panel-left{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;width:400px;min-width:320px;display:flex}.panel-right{background:var(--bg-editor);flex-direction:column;flex:1;display:flex;overflow:hidden}.task-scroll{flex:1;padding:32px 28px;overflow-y:auto}.exercise-badge{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:var(--accent-subtle);border-radius:4px;margin-bottom:20px;padding:4px 10px;font-size:.7rem;font-weight:600;display:inline-block}#task-content{line-height:1.75}#task-content h2{color:var(--text-bright);letter-spacing:-.02em;margin-bottom:16px;font-size:1.5rem;font-weight:700}#task-content p{color:var(--text);margin-bottom:14px;font-size:.92rem}#task-content code{background:var(--bg-surface);color:var(--accent);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-family:JetBrains Mono,monospace;font-size:.84em}#task-content pre{background:var(--bg-editor);border-radius:var(--radius);border:1px solid var(--border);color:var(--text);margin:16px 0;padding:14px 18px;font-family:JetBrains Mono,monospace;font-size:.82rem;line-height:1.6;overflow-x:auto}#task-content ul,#task-content ol{margin:12px 0 16px;padding-left:20px}#task-content li{color:var(--text);margin-bottom:8px;font-size:.92rem}#task-content strong{color:var(--text-bright);font-weight:600}.hint-area{border-top:1px solid var(--border);background:var(--bg-panel);flex-shrink:0;padding:8px 16px}.hint-btn{border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:0 0;align-items:center;gap:8px;padding:8px 14px;font-family:Inter,system-ui,sans-serif;font-size:.82rem;font-weight:500;display:inline-flex}.hint-btn:hover{background:var(--bg-surface);border-color:var(--border-bright);color:var(--text)}.hint-box{background:var(--accent-subtle);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);margin-top:14px;padding:14px 18px;font-size:.88rem;line-height:1.65;animation:.25s fadeIn}.hint-box code{background:var(--bg-surface);color:var(--accent);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-family:JetBrains Mono,monospace;font-size:.84em}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.deepdive{border:1px solid var(--border);border-radius:var(--radius);background:#ffffff04;margin-top:18px;overflow:hidden}.deepdive summary{cursor:pointer;color:var(--text-muted);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 16px;font-size:.82rem;font-weight:500;list-style:none;transition:color .15s,background .15s;display:flex}.deepdive summary::-webkit-details-marker{display:none}.deepdive summary:hover{color:var(--text);background:#ffffff08}.deepdive summary svg{opacity:.5;flex-shrink:0;transition:transform .25s,opacity .15s}.deepdive[open] summary svg{opacity:.7;transform:rotate(45deg)}.deepdive-content{color:var(--text-dim);padding:0 18px 16px;font-size:.82rem;line-height:1.7;animation:.2s fadeIn}.deepdive-content strong{color:var(--text);margin-bottom:6px;font-size:.84rem;display:block}.deepdive-content p{margin:8px 0}.deepdive-content code{background:var(--bg-surface);color:#f0c674;border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:JetBrains Mono,monospace;font-size:.88em}.deepdive-content em{color:var(--text-muted)}.editor-header{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:40px;padding:0 16px;display:flex}.file-tab{color:var(--text-dim);align-items:center;gap:7px;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:500;display:flex}.action-btn{color:var(--text-muted);cursor:pointer;width:28px;height:28px;transition:all var(--transition);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.action-btn:hover{background:var(--bg-surface);color:var(--text-dim)}#editor-container{flex:1;min-height:0}.output-area{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;height:240px;display:flex}.output-toolbar{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex}.run-btn{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);box-shadow:0 2px 8px var(--accent-glow), inset 0 1px 0 #ffffff1a;border:none;align-items:center;gap:7px;padding:6px 18px;font-family:Inter,system-ui,sans-serif;font-size:.82rem;font-weight:600;display:inline-flex}.run-btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 16px var(--accent-glow), inset 0 1px 0 #ffffff1a;transform:translateY(-1px)}.run-btn:active:not(:disabled){transform:translateY(0)}.run-btn:disabled{opacity:.5;cursor:wait}.run-icon{flex-shrink:0}.shortcut-hint{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.72rem}#run-status{transition:color var(--transition);align-items:center;gap:6px;font-size:.82rem;font-weight:500;display:flex}#run-status.success{color:var(--success)}#run-status.error{color:var(--error)}#output{color:#e6edf3;white-space:pre-wrap;background:#0d1017;flex:1;padding:14px 18px;font-family:JetBrains Mono,monospace;font-size:.88rem;line-height:1.6;overflow-y:auto}.next-btn{background:var(--success);color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;align-items:center;gap:6px;padding:6px 16px;font-family:Inter,system-ui,sans-serif;font-size:.82rem;font-weight:600;animation:.25s fadeIn;display:inline-flex}.next-btn:hover{background:#4cc764;transform:translateY(-1px)}.success-flash{animation:.6s successPulse}@keyframes successPulse{0%{box-shadow:inset 0 0 #0000}40%{box-shadow:inset 0 0 30px var(--success-bg)}to{box-shadow:inset 0 0 #0000}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.output-area{position:relative}.err-hint-float{border:1px solid #ff4d6a4d;border-left:3px solid var(--accent);z-index:10;opacity:0;pointer-events:auto;background:linear-gradient(135deg,#1e1028 0%,#1a0e22 100%);border-radius:10px;align-items:flex-start;gap:12px;margin:10px 0 0;padding:14px 16px;font-family:Inter,sans-serif;transition:opacity .25s,transform .25s;display:flex;position:relative;transform:translateY(-8px);box-shadow:0 8px 32px #00000080,0 0 20px #ff4d6a14}.err-hint-float.visible{opacity:1;transform:translateY(0)}.err-hint-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:1.1rem;line-height:1;transition:color .15s,background .15s;position:absolute;top:6px;right:10px}.err-hint-close:hover{color:var(--text-bright);background:#ffffff14}.err-hint-icon{min-width:36px;height:36px;color:var(--accent);background:#ff4d6a26;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex}.err-hint-body{flex:1;min-width:0}.err-hint-body strong{color:var(--accent);font-size:.92rem}.err-hint-line{color:var(--text-muted);vertical-align:middle;background:#ffffff0f;border-radius:4px;margin-left:6px;padding:2px 7px;font-family:JetBrains Mono,monospace;font-size:.72rem}.err-hint-body p{color:#d0d8e0;margin:6px 0 0;font-size:.82rem;line-height:1.5}.err-hint-body code{color:#f0c674;background:#ffffff14;border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:.88em}.hellpet-wrap{z-index:50;pointer-events:none;position:fixed;bottom:8px;left:16px}#hellpet-canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.hellpet-embers{pointer-events:none;position:absolute;inset:0;overflow:visible}.hp-ember{pointer-events:none;border-radius:50%;animation:linear forwards hp-ember-rise;position:absolute}@keyframes hp-ember-rise{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-60px) translateX(var(--dx,5px)) scale(.1)}}.hellpet-bubble{background:var(--bg-surface);border:1px solid var(--accent);border-radius:var(--radius-lg);width:240px;color:var(--text);pointer-events:auto;opacity:0;z-index:51;padding:12px 14px;font-size:13px;line-height:1.5;transition:opacity .3s,transform .3s;position:absolute;top:20px;left:calc(100% + 8px);transform:translate(-8px)scale(.95);box-shadow:0 4px 24px #ff4d6a33}.hellpet-bubble.visible{opacity:1;transform:translate(0)scale(1)}.hellpet-bubble:before{content:"";background:var(--bg-surface);border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);width:12px;height:12px;position:absolute;top:16px;left:-7px;transform:rotate(45deg)}.hellpet-bubble-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:2px;font-size:16px;line-height:1;position:absolute;top:4px;right:8px}.hellpet-bubble-close:hover{color:var(--text-bright)}.hellpet-bubble-text{padding-right:16px}.hellpet-bubble-text code{background:var(--bg-panel);color:var(--accent);border-radius:3px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:12px}.hellpet-bubble-text strong{color:var(--text-bright)}.onboard-overlay{z-index:9999;opacity:0;background:#040308bf;transition:opacity .3s;position:fixed;inset:0}.onboard-overlay.visible{opacity:1}.onboard-spotlight{pointer-events:none;z-index:1;border:2px solid #ff4d6a66;border-radius:12px;transition:all .4s cubic-bezier(.4,0,.2,1);position:absolute;box-shadow:0 0 0 9999px #040308bf}.onboard-popup{z-index:2;opacity:0;background:linear-gradient(145deg,#1a1225 0%,#140e1c 100%);border:1px solid #ff4d6a40;border-radius:14px;width:340px;padding:20px;font-family:Inter,sans-serif;transition:opacity .25s .15s,transform .25s .15s;position:absolute;transform:translateY(6px);box-shadow:0 12px 40px #0009,0 0 30px #ff4d6a14}.onboard-popup.visible{opacity:1;transform:translateY(0)}.onboard-popup-icon{margin-bottom:8px;font-size:1.6rem;line-height:1}.onboard-popup-title{color:#fff;margin-bottom:6px;font-size:1rem;font-weight:700}.onboard-popup-text{color:#b0b8c8;margin:0;font-size:.84rem;line-height:1.6}.onboard-popup-text strong{color:#e0e4ea}.onboard-popup-text code,.onboard-popup-text kbd{color:#f0c674;background:#ffffff14;border-radius:4px;padding:1px 6px;font-family:JetBrains Mono,monospace;font-size:.88em}.onboard-popup-text kbd{color:#d0d8e0;border:1px solid #ffffff1f}.onboard-popup-footer{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;display:flex}.onboard-steps{color:var(--text-dim);font-family:JetBrains Mono,monospace;font-size:.72rem}.onboard-btns{gap:8px;display:flex}.onboard-skip{color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;padding:6px 14px;font-family:Inter,sans-serif;font-size:.78rem;transition:all .15s}.onboard-skip:hover{color:var(--text-bright);border-color:#fff3}.onboard-next{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:6px 18px;font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;transition:all .15s}.onboard-next:hover{background:#ff6680;box-shadow:0 0 16px #ff4d6a4d}::selection{background:var(--accent-glow);color:var(--text-bright)}