:root{--brand:#212b33;--brand-soft:#2d3a45;--brand-deep:#171f26;--accent:#26af98;--accent-deep:#1b8c79;--accent-ink:#0f7a69;--accent-wash:#e4f5f1;--zon:#f2a93b;--zon-wash:#fdf1dc;--zon-ink:#9a5b06;--koraal:#f2685f;--koraal-wash:#fde8e6;--koraal-ink:#b3312a;--lucht:#4d8df0;--lucht-wash:#e5eefd;--lucht-ink:#1d4fa8;--druif:#a86ee8;--druif-wash:#f1e8fd;--druif-ink:#6b2fb0;--ink:#212b33;--ink-soft:#55636e;--ink-faint:#808d98;--line:#e3e8ec;--surface:#fff;--page:#f5f7f9;--ok:#15803d;--ok-soft:#dcfce7;--warn:#b45309;--warn-soft:#fef3c7;--danger:#b91c1c;--danger-soft:#fee2e2;--brand-dark:var(--accent-deep);--scratch:var(--zon);--scratch-soft:var(--zon-wash);--python:var(--lucht);--python-soft:var(--lucht-wash);--canvas:var(--page);--ink-mute:var(--ink-faint);--dark-0:#12191f;--dark-1:#171f26;--dark-2:#212b33;--dark-3:#2d3a45;--dark-ink:#eaf0f4;--radius:18px;--radius-sm:12px;--radius-lg:26px;--shadow:0 1px 2px #212b330f, 0 8px 24px #212b3312;--shadow-lg:0 24px 60px #212b3338;--glow:0 6px 18px #26af9859;--font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;line-height:1.15}h1{font-size:2.1rem;font-weight:800}h2{font-size:1.45rem;font-weight:800}h3{font-size:1.08rem;font-weight:700}p{margin:0;line-height:1.6}a{color:var(--accent-ink);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}.page{max-width:1180px;margin:0 auto;padding:26px 24px 80px}.row{align-items:center;gap:10px;display:flex}.row-between{justify-content:space-between;align-items:center;gap:14px;display:flex}.col{flex-direction:column;gap:10px;display:flex}.grid{gap:18px;display:grid}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}.wrap{flex-wrap:wrap}.grow,.spacer{flex:1}.muted{color:var(--ink-soft)}.small{font-size:.9rem}.tiny{font-size:.8rem}.center{text-align:center}.mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-4{margin-top:18px}.mt-6{margin-top:32px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.card-flat{box-shadow:none}.card-pad-0{padding:0;overflow:hidden}.tile{text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-lg);cursor:pointer;width:100%;font:inherit;color:inherit;box-shadow:var(--shadow);padding:22px;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,border-color .16s;display:block}.tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)scale(1.015)}.tile:active{transform:translateY(-1px)scale(.995)}.tile:focus-visible{outline:4px solid var(--accent);outline-offset:3px}.tile-zon{background:linear-gradient(170deg, var(--zon-wash), #fff 62%);border-color:#f7d6a2}.tile-zon:hover{border-color:var(--zon)}.tile-lucht{background:linear-gradient(170deg, var(--lucht-wash), #fff 62%);border-color:#bcd4fa}.tile-lucht:hover{border-color:var(--lucht)}.tile-koraal{background:linear-gradient(170deg, var(--koraal-wash), #fff 62%);border-color:#f9c3bf}.tile-koraal:hover{border-color:var(--koraal)}.tile-accent{background:linear-gradient(170deg, var(--accent-wash), #fff 62%);border-color:#a9e0d5}.tile-accent:hover{border-color:var(--accent)}.tile-emoji{width:58px;height:58px;box-shadow:var(--shadow);background:#fff;border-radius:50%;place-items:center;margin-bottom:14px;font-size:1.9rem;line-height:1;display:grid}.btn{background:var(--accent);color:#fff;font:inherit;cursor:pointer;white-space:nowrap;box-shadow:var(--glow);border:2px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-size:.95rem;font-weight:700;transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .12s,box-shadow .12s;display:inline-flex}.btn:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn:focus-visible{outline-offset:2px;outline:4px solid #a9e0d5}.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}.btn-ghost:hover:not(:disabled){border-color:var(--ink-faint);background:#fff}.btn-quiet{color:var(--ink-soft);box-shadow:none;background:0 0;border-color:#0000}.btn-quiet:hover:not(:disabled){color:var(--ink);background:#eceff2}.btn-ok{background:var(--accent)}.btn-ok:hover:not(:disabled){background:var(--accent-deep)}.btn-danger{background:var(--koraal);box-shadow:0 6px 18px #f2685f59}.btn-danger:hover:not(:disabled){background:#e4534a}.btn-sm{padding:7px 14px;font-size:.86rem}.btn-lg{padding:15px 30px;font-size:1.08rem}.btn-block{width:100%}.btn-dark{background:var(--dark-3);color:var(--dark-ink);box-shadow:none;border-color:#3b4a57}.btn-dark:hover:not(:disabled){background:#3b4a57}label.field{color:var(--ink-soft);flex-direction:column;gap:7px;font-size:.9rem;font-weight:700;display:flex}input,select,textarea{font:inherit;border-radius:var(--radius-sm);border:2px solid var(--line);color:var(--ink);background:#fff;width:100%;padding:12px 14px;font-size:1rem}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);outline:none}.code-input{font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;text-align:center;font-size:1.3rem;font-weight:600}.badge{white-space:nowrap;color:var(--ink-soft);background:#eceff2;border-radius:999px;align-items:center;gap:5px;padding:5px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.badge-scratch{background:var(--zon-wash);color:var(--zon-ink)}.badge-python{background:var(--lucht-wash);color:var(--lucht-ink)}.badge-ok{background:var(--ok-soft);color:var(--ok)}.badge-brand{background:var(--accent-wash);color:var(--accent-ink)}.badge-danger{background:var(--koraal-wash);color:var(--koraal-ink)}.badge-gold{background:linear-gradient(135deg, #ffd75e, var(--zon));color:#5a3600;box-shadow:0 2px 6px #f2a93b66}.hero{border-radius:var(--radius-lg);color:#fff;background:radial-gradient(760px 320px at 88% -20%, #26af9880, transparent 62%), linear-gradient(135deg, var(--brand-deep), var(--brand-soft));box-shadow:var(--shadow-lg);padding:30px 32px}.hero h1{color:#fff}.hero p{color:#c4d2da}.card-pass{border:3px solid var(--zon);box-shadow:0 0 0 5px #f2a93b29, var(--shadow);background:linear-gradient(180deg, #fffaf0 0%, var(--surface) 55%)}.card-fail{border:3px solid var(--koraal);box-shadow:0 0 0 5px #f2685f24, var(--shadow);background:linear-gradient(180deg, #fff6f5 0%, var(--surface) 55%)}.feedback{border-left:4px solid var(--line);white-space:pre-wrap;margin-top:14px;padding:10px 0 10px 14px;font-size:.9rem;line-height:1.55}.card-pass .feedback{border-left-color:var(--zon)}.card-fail .feedback{border-left-color:var(--koraal)}.score-pill{font-family:var(--mono);background:var(--brand);color:#fff;border-radius:999px;padding:3px 13px;font-size:1rem;font-weight:700}.bar{background:#e6ebef;border-radius:999px;height:14px;overflow:hidden;box-shadow:inset 0 1px 2px #212b3314}.bar>i{background:linear-gradient(90deg, var(--lucht), var(--accent));border-radius:999px;height:100%;transition:width .45s cubic-bezier(.34,1.4,.64,1);display:block}.bar-ok>i{background:linear-gradient(90deg, var(--accent), var(--zon))}.table{border-collapse:collapse;width:100%;font-size:.94rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:13px 14px}.table th{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-size:.76rem;font-weight:800}.table tbody tr:hover{background:var(--accent-wash)}.table td.num{text-align:center}.table-scroll{overflow-x:auto}.toast-stack{z-index:900;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{background:var(--brand);color:#fff;box-shadow:var(--shadow-lg);border-radius:999px;padding:13px 22px;font-size:.94rem;font-weight:650;animation:.3s cubic-bezier(.34,1.56,.64,1) toast-in}.toast-error{background:var(--koraal)}.toast-ok{background:var(--accent)}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)scale(.94)}}.modal-scrim{z-index:1000;background:#171f2699;justify-content:center;align-items:center;padding:20px;animation:.15s fade;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius-lg);width:min(540px,100%);box-shadow:var(--shadow-lg);background:#fff;max-height:88vh;padding:28px;animation:.24s cubic-bezier(.34,1.56,.64,1) pop;overflow:auto}.modal-wide{width:min(900px,100%)}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.94)translateY(10px)}}.spinner{border:3px solid #d7dee3;border-top-color:var(--accent);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.spinner-lg{border-width:5px;width:46px;height:46px}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{height:100%;color:var(--ink-soft);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.empty{text-align:center;color:var(--ink-soft);border-radius:var(--radius-lg);background:#fbfcfd;border:3px dashed #dbe2e7;padding:46px 26px}.empty .emoji{margin-bottom:12px;font-size:3rem;animation:2.6s ease-in-out infinite bob;display:block}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.app-header{background:var(--surface);border-bottom:1px solid var(--line);z-index:50;position:sticky;top:0}.app-header-inner{align-items:center;gap:16px;max-width:1180px;height:70px;margin:0 auto;padding:0 24px;display:flex}.logo{letter-spacing:-.03em;color:var(--ink);align-items:center;gap:10px;font-size:1.18rem;font-weight:800;display:flex}.logo-mark{background:linear-gradient(135deg, var(--accent), var(--lucht));color:#fff;width:38px;height:38px;box-shadow:var(--glow);border-radius:12px;place-items:center;font-size:.95rem;font-weight:800;display:grid}.nav-link{color:var(--ink-soft);border-radius:999px;padding:9px 15px;font-size:.95rem;font-weight:700;text-decoration:none}.nav-link:hover{color:var(--ink);background:#eceff2;text-decoration:none}.nav-link.active{background:var(--accent-wash);color:var(--accent-ink)}.avatar{background:linear-gradient(135deg, var(--accent), var(--lucht));color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:40px;height:40px;font-size:.9rem;font-weight:800;display:grid}.tabs{border-bottom:2px solid var(--line);flex-wrap:wrap;gap:6px;margin-bottom:22px;display:flex}.tab{font:inherit;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;margin-bottom:-2px;padding:11px 18px;font-size:.98rem;font-weight:700}.tab:hover{color:var(--ink)}.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}.ws{background:var(--dark-0);color:var(--dark-ink);flex-direction:column;display:flex;position:fixed;inset:0}.ws-bar{background:var(--dark-1);border-bottom:1px solid var(--dark-3);flex-shrink:0;align-items:center;gap:10px;height:60px;padding:0 16px;display:flex}.ws-title{color:var(--dark-ink);border-radius:var(--radius-sm);background:0 0;border:2px solid #0000;width:240px;padding:8px 12px;font-size:1rem;font-weight:700}.ws-title:hover{border-color:var(--dark-3)}.ws-title:focus{background:var(--dark-2);border-color:var(--accent);box-shadow:none}.ws-body{flex:1;min-height:0;display:flex}.ws-pane{flex-direction:column;min-width:0;min-height:0;display:flex}.save-state{color:#9fb0bb;align-items:center;gap:7px;font-size:.84rem;display:flex}.dot{background:currentColor;border-radius:50%;width:9px;height:9px}.console{background:var(--dark-1);border-top:1px solid var(--dark-3);flex-direction:column;min-height:0;display:flex}.console-head{border-bottom:1px solid var(--dark-3);color:#9fb0bb;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;align-items:center;gap:10px;padding:9px 14px;font-size:.82rem;font-weight:800;display:flex}.console-out{font-family:var(--mono);white-space:pre-wrap;word-break:break-word;color:#dbe4ea;flex:1;padding:12px 16px;font-size:13.5px;line-height:1.6;overflow:auto}.console-out .err{color:#ff9d96}.console-out .sys{color:#6fd3bd}.console-empty{color:#6b7d88;font-style:italic}.lesson-panel{background:var(--dark-1);border-right:1px solid var(--dark-3);flex-direction:column;flex-shrink:0;width:340px;display:flex}.lesson-panel .head{border-bottom:1px solid var(--dark-3);padding:16px 18px}.lesson-panel .body{flex:1;padding:16px 18px;overflow:auto}.step{border-radius:var(--radius-sm);background:var(--dark-2);cursor:pointer;text-align:left;width:100%;color:var(--dark-ink);border:2px solid #0000;gap:12px;margin-bottom:10px;padding:13px 14px;font-family:inherit;font-size:.93rem;line-height:1.55;transition:border-color .14s,transform .14s;display:flex}.step:hover{border-color:#3f505d;transform:translate(2px)}.step.done{opacity:.62}.step-check{border:2px solid #55666f;border-radius:8px;flex-shrink:0;place-items:center;width:24px;height:24px;margin-top:1px;font-size:14px;font-weight:800;display:grid}.step.done .step-check{background:var(--accent);border-color:var(--accent);color:#fff}.step code{font-family:var(--mono);color:#ffd08a;background:#2f3d47;border-radius:6px;padding:2px 6px;font-size:.86em}.context-menu{z-index:1000;background:var(--dark-2);border:1px solid var(--dark-3);border-radius:8px;min-width:210px;padding:5px;position:fixed;box-shadow:0 12px 32px #00000080}.context-menu-item{text-align:left;cursor:pointer;width:100%;font:inherit;color:var(--dark-ink);background:0 0;border:0;border-radius:5px;padding:7px 10px;font-size:.85rem;display:block}.context-menu-item:hover,.context-menu-item:focus-visible{background:var(--brand);color:#fff;outline:none}.review-summary{border-radius:var(--radius-sm);border-left:5px solid;margin-bottom:18px;padding:14px 16px;line-height:1.5}.review-summary.pass{border-left-color:var(--zon);color:#ffe9c2;background:#33290f}.review-summary.fail{border-left-color:var(--koraal);color:#ffd8d4;background:#37201e}.review-summary-score{font-family:var(--mono);background:#ffffff24;border-radius:999px;padding:2px 12px;font-weight:700}.review-summary-note{white-space:pre-wrap;border-top:1px solid #ffffff29;margin-top:11px;padding-top:11px;font-size:.88rem}.review-summary-note strong{text-transform:uppercase;letter-spacing:.06em;opacity:.78;margin-bottom:4px;font-size:.72rem;display:block}.lesson-panel.review-panel{width:430px}.review-step{border-radius:var(--radius-sm);background:var(--dark-2);border-left:4px solid #55666f;margin-bottom:9px;padding:10px 12px}.review-step.done{border-left-color:var(--accent)}.review-step-mark{text-align:center;color:#7c8b95;flex-shrink:0;width:18px;font-weight:800}.review-step.done .review-step-mark{color:#6fd3bd}.review-step code{font-family:var(--mono);color:#ffd08a;background:#2f3d47;border-radius:6px;padding:2px 6px;font-size:.86em}.review-step-note{background:var(--dark-1);border-color:var(--dark-3);color:var(--dark-ink);margin-top:8px;padding:8px 11px;font-size:.85rem}.review-step-note::placeholder{color:#6b7d88}.step-note{border-left:4px solid var(--zon);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:#ffe9c2;background:#33290f;margin:-4px 0 10px 34px;padding:10px 13px;font-size:.88rem;line-height:1.5}.step-note strong{text-transform:uppercase;letter-spacing:.06em;color:var(--zon);margin-bottom:4px;font-size:.72rem;display:block}.iframe-fill{background:var(--dark-0);border:0;width:100%;height:100%;display:block}.join-code{font-family:var(--mono);letter-spacing:.24em;color:#fff;background:linear-gradient(135deg, var(--accent), var(--lucht));border-radius:var(--radius-sm);box-shadow:var(--glow);padding:10px 20px;font-size:1.7rem;font-weight:700;display:inline-block}@media (width<=860px){.lesson-panel{display:none}.app-header-inner{height:62px;padding:0 14px}.page{padding:18px 14px 64px}h1{font-size:1.7rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}