:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f1fb;--surface:#fff;--surface-2:#fbf7ff;--surface-3:#efe3fb;--text:#21142e;--muted:#7a6b86;--border:#e2d4ee;--primary:#8e00d5;--primary-2:#b83dff;--success:#20b45b;--danger:#dc2626;--code-bg:#15061f;--code-panel:#1e0b2d;--code-text:#f8ecff;--code-muted:#c8afd9}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#100418;--surface:#170622;--surface-2:#1e0b2d;--surface-3:#2b1040;--text:#f7ecff;--muted:#c4acce;--border:#3a1855;--primary:#b83dff;--primary-2:#8e00d5;--success:#39d475;--danger:#f87171;--code-bg:#0f0317;--code-panel:#170622;--code-text:#f7ecff;--code-muted:#bfa9cd}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.52}.app-shell{background:radial-gradient(circle at 10% 0,#b83dff29,#0000 34rem),radial-gradient(circle at 88% 14%,#38bdf81f,#0000 30rem),linear-gradient(135deg,#edf1ff 0%,#f5ebfd 46%,#fcedfa 100%);grid-template-rows:72px minmax(0,1fr);min-width:320px;height:100dvh;display:grid}:root[data-theme=dark] .app-shell{background:radial-gradient(circle at 8% 0,#b83dff33,#0000 32rem),radial-gradient(circle at 92% 10%,#8e00d538,#0000 30rem),linear-gradient(135deg,#250038 0%,#200030 50%,#1c002a 100%)}.topbar{z-index:5;border:1px solid color-mix(in srgb, var(--border) 70%, transparent);background:color-mix(in srgb, var(--surface) 82%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;justify-content:space-between;align-items:center;gap:12px;width:calc(100% - 20px);min-width:0;min-height:54px;margin:10px 10px 0;padding:7px 12px;display:flex;box-shadow:0 14px 48px #1e002b29}.brand{min-width:0;color:inherit;align-items:center;gap:9px;text-decoration:none;display:inline-flex}.brand-mark{border:1px solid var(--border);background:linear-gradient(145deg, #ffffff14, #b83dff1f), var(--surface-2);border-radius:11px;flex:none;place-items:center;width:40px;height:40px;display:grid}.brand-mark img{width:23px;height:27px;display:block}.brand strong,.brand small{display:block}.brand strong{font-size:17px;line-height:1.1}.brand small{max-width:260px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;overflow:hidden}.topbar-actions{align-items:center;gap:8px;min-width:0;display:inline-flex}.top-nav-link{border:1px solid var(--border);background:color-mix(in srgb, var(--surface-3) 72%, transparent);min-height:34px;color:var(--primary);border-radius:11px;align-items:center;padding:0 14px;font-size:12px;font-weight:850;text-decoration:none;display:inline-flex}.top-nav-link:hover{border-color:var(--primary);color:var(--primary)}.language-switch{border:1px solid var(--border);background:color-mix(in srgb, var(--surface-2) 78%, transparent);border-radius:11px;grid-template-columns:repeat(2,38px);height:34px;display:inline-grid;overflow:hidden}.language-switch button,.theme-toggle,.runtime-status{min-height:34px;color:var(--muted);white-space:nowrap;font-size:12px;font-weight:850}.language-switch button{background:0 0}.language-switch button.active{background:var(--primary);color:#fff}.theme-toggle,.runtime-status{border:1px solid var(--border);background:color-mix(in srgb, var(--surface-2) 78%, transparent);border-radius:11px;padding:0 10px}.theme-toggle:hover{color:var(--text);background:var(--surface-3)}.runtime-status.ready{border-color:color-mix(in srgb, var(--success) 36%, var(--border));color:var(--success)}.runtime-status.error{border-color:color-mix(in srgb, var(--danger) 36%, var(--border));color:var(--danger)}.workspace{grid-template-columns:228px minmax(300px,.75fr) minmax(460px,1.35fr);gap:10px;min-height:0;padding:8px 10px 10px;display:grid}.lesson-nav,.lesson-panel,.playground{border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 86%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;min-width:0;min-height:0;overflow:hidden;box-shadow:0 18px 48px #6500a31c}.playground{background:var(--code-bg);box-shadow:0 22px 56px #1e002b42}.lesson-nav{grid-template-rows:auto auto minmax(0,1fr);padding:10px;display:grid}.nav-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.nav-heading span{color:var(--muted);white-space:nowrap;font-size:11px;font-weight:800}.section-title{color:var(--primary);letter-spacing:.03em;text-transform:uppercase;font-size:11px;font-weight:900}.progress-track{background:var(--surface-3);border-radius:999px;height:5px;margin-top:8px;overflow:hidden}.progress-bar{border-radius:inherit;background:var(--primary);width:0;height:100%;transition:width .16s}.lesson-list{align-content:start;gap:5px;min-height:0;margin-top:9px;padding-right:2px;display:grid;overflow:auto}.lesson-button{width:100%;min-height:50px;color:var(--text);text-align:left;background:0 0;border:1px solid #0000;border-radius:11px;padding:8px 8px 8px 11px;position:relative}.lesson-button:before{content:"";background:0 0;border-radius:999px;width:3px;position:absolute;inset:8px auto 8px 0}.lesson-button:hover,.lesson-button.active{border-color:var(--border);background:var(--surface-2)}.lesson-button.active:before{background:var(--primary)}.lesson-button strong,.lesson-button span{display:block}.lesson-button strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.25;overflow:hidden}.lesson-button span{color:var(--muted);margin-top:4px;font-size:11px}.lesson-button.completed span{color:var(--success);font-weight:850}.lesson-button.locked{color:var(--muted);background:color-mix(in srgb, var(--surface-2) 70%, transparent)}.lesson-panel{flex-direction:column;padding:14px;display:flex;overflow:auto}.lesson-meta{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.badge,.level{border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900}.badge{color:#fff;background:var(--primary)}.level{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}h1,h2,p{margin-top:0}h1{margin-bottom:8px;font-size:24px;line-height:1.12}.lesson-intro{color:var(--muted);margin-bottom:12px;font-size:14px;line-height:1.5}.task-box,.example-box{border:1px solid var(--border);background:color-mix(in srgb, var(--surface-2) 82%, transparent);border-radius:13px}.task-box{padding:12px 13px}.example-box,.submission-strip{margin-top:10px}.example-box{padding:11px}.task-box h2,.example-box h2{margin-bottom:8px;font-size:14px}.task-box ul{color:var(--text);gap:7px;margin:0;padding-left:18px;font-size:14px;line-height:1.4;display:grid}.task-box li::marker{color:var(--primary)}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.example-grid>div{border:1px solid var(--border);background:var(--surface);border-radius:10px;min-width:0;padding:8px}.example-grid pre{min-height:38px;max-height:96px;color:var(--text);white-space:pre-wrap;margin:5px 0 0;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.45;overflow:auto}.submission-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.submission-strip>div{border:1px solid var(--border);background:var(--surface-2);border-radius:11px;padding:9px}.muted,.submission-strip span{color:var(--muted);font-size:11px;font-weight:750;display:block}.submission-strip strong{overflow-wrap:anywhere;margin-top:4px;font-size:13px;display:block}.playground{background:var(--code-bg);grid-template-rows:48px minmax(0,1fr) 188px;display:grid}.editor-toolbar,.output-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.editor-toolbar{border-bottom:1px solid color-mix(in srgb, var(--code-text) 12%, transparent);background:var(--code-panel);min-width:0;padding:8px 10px}.editor-toolbar .section-title{color:var(--primary)}.save-state{color:var(--code-muted);margin-left:6px;font-size:11px;font-weight:700}.actions{flex-wrap:wrap;flex:none;justify-content:flex-end;gap:6px;display:flex}.primary,.secondary,.ghost{border-radius:10px;min-height:32px;padding:0 11px;font-size:13px;font-weight:900}.primary{background:var(--primary);color:#fff}.primary:hover,.secondary:hover,.ghost:hover{filter:brightness(1.08)}.primary.ready-submit{background:var(--success)}.secondary{border:1px solid color-mix(in srgb, var(--primary) 60%, var(--code-muted));color:var(--code-text);background:0 0}.ghost{color:var(--code-muted);background:0 0}#codeEditor{resize:none;background:var(--code-bg);width:100%;min-width:0;height:100%;min-height:0;color:var(--code-text);tab-size:4;border:0;outline:0;padding:14px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;line-height:1.55;overflow:auto}#codeEditor:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent)}.output-panel{border-top:1px solid color-mix(in srgb, var(--code-text) 12%, transparent);background:var(--code-panel);min-height:0;color:var(--code-text);grid-template-rows:36px auto minmax(0,1fr);display:grid}.output-header{border-bottom:1px solid color-mix(in srgb, var(--code-text) 10%, transparent);color:var(--code-muted);padding:0 10px;font-size:12px;font-weight:900}.text-button{min-height:28px;color:var(--code-muted);background:0 0;border-radius:6px;font-size:12px;font-weight:900}.text-button:hover{color:var(--code-text)}.run-feedback{border-bottom:1px solid color-mix(in srgb, var(--code-text) 10%, transparent);color:var(--code-muted);padding:8px 10px;font-size:12px;font-weight:850}.run-feedback.success{color:#bbf7d0;background:#15803d33}.run-feedback.fail{color:#fecaca;background:#dc262633}#outputBox{min-height:0;color:var(--code-text);white-space:pre-wrap;margin:0;padding:10px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.5;overflow:auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.confetti-layer{z-index:20;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-piece{top:-16px;left:var(--x);background:var(--color);opacity:.95;border-radius:2px;width:8px;height:14px;animation:1.6s cubic-bezier(.16,.78,.38,1) forwards confetti-fall;position:absolute;transform:translate(0,0)rotate(0)}.confetti-piece:nth-child(3n){border-radius:999px;width:10px;height:10px}.confetti-piece:nth-child(4n){width:6px;height:18px}@keyframes confetti-fall{0%{transform:translateY(-20px)rotate(0)}to{transform:translate3d(var(--drift), 105vh, 0) rotate(var(--spin))}}@media (max-width:1180px){.workspace{grid-template-columns:210px minmax(280px,.82fr) minmax(390px,1.18fr)}.brand small{max-width:170px}}@media (max-width:900px){.app-shell{grid-template-rows:112px minmax(0,1fr)}.topbar{flex-direction:column;align-items:stretch;gap:7px}.topbar-actions{width:100%}.runtime-status{margin-left:auto}.workspace{grid-template-rows:112px minmax(0,.86fr) minmax(0,1.14fr);grid-template-columns:minmax(0,1fr);padding:6px}.lesson-nav{grid-template-rows:auto auto minmax(0,1fr);padding:8px}.lesson-list{padding-bottom:2px;display:flex;overflow:auto hidden}.lesson-button{flex:0 0 168px;width:168px}.lesson-button:before{display:none}.lesson-panel{padding:12px}h1{font-size:21px}.playground{grid-template-rows:46px minmax(0,1fr) 160px}}@media (max-width:520px){.app-shell{grid-template-rows:154px minmax(0,1fr)}.topbar-actions{flex-wrap:wrap}.runtime-status{margin-left:0}.workspace{grid-template-rows:106px minmax(0,.8fr) minmax(0,1.2fr)}.brand small{max-width:230px}.example-grid,.submission-strip{grid-template-columns:1fr}.editor-toolbar{flex-direction:column;align-items:stretch;height:auto}.actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.primary,.secondary,.ghost{padding:0 7px}}