:root{--bg:#fbfbfd;--surface:#fff;--ink:#1d1d1f;--ink-2:#6e6e73;--ink-3:#a1a1a6;--line:#00000014;--accent:#0071e3;--accent-ink:#fff;--good:#1f9d55;--bad:#d70015;--radius:18px;--shadow:0 1px 2px #0000000a, 0 8px 24px #0000000f;--shadow-lg:0 2px 6px #0000000d, 0 24px 60px #0000001a;--ease:cubic-bezier(.22, 1, .36, 1);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,Segoe UI,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-height:100vh;margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}input,textarea,select{font:inherit}h1,h2,h3{letter-spacing:-.022em;margin:0;font-family:-apple-system,SF Pro Display,Inter,system-ui,sans-serif}p{margin:0}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);outline-offset:2px;border-radius:10px}.boot{min-height:100vh}.nav{z-index:20;background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:saturate(180%)blur(20px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px clamp(20px,4vw,48px);display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;align-items:center;gap:10px;font-weight:600;display:flex}.brand-mark{background:var(--ink);border-radius:8px;place-items:center;width:28px;height:28px;display:grid}.nav-links{color:var(--ink-2);align-items:center;gap:22px;font-size:14px;display:flex}.nav-links a:hover{color:var(--ink)}.page{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px) 96px}.narrow{max-width:720px}.btn{background:var(--accent);color:var(--accent-ink);transition:transform .2s var(--ease), background .2s, box-shadow .2s, opacity .2s;border:0;border-radius:980px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:500;display:inline-flex}.btn:hover{background:#0077ed;box-shadow:0 6px 20px #0071e347}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-lg{padding:16px 28px;font-size:17px}.btn-ghost{color:var(--accent);background:0 0}.btn-ghost:hover{box-shadow:none;background:#0071e314}.btn-dark{background:var(--ink)}.btn-dark:hover{background:#000;box-shadow:0 6px 20px #0003}.btn-quiet{color:var(--ink);background:#0000000d}.btn-quiet:hover{box-shadow:none;background:#00000014}.input{border:1px solid var(--line);background:var(--surface);width:100%;color:var(--ink);border-radius:14px;padding:15px 16px;font-size:17px;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px #0071e326}textarea.input{resize:vertical;min-height:120px;font-size:15px;line-height:1.5}.error{color:var(--bad);animation:shake .4s var(--ease);font-size:14px}.muted{color:var(--ink-2)}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);font-size:12px;font-weight:600}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:24px}.card-hover{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.course-art{--h:250;aspect-ratio:16/9;background:radial-gradient(120% 120% at 0% 0%, hsl(var(--h) 90% 72%) 0%, transparent 55%), radial-gradient(120% 120% at 100% 100%, hsl(calc(var(--h) + 40) 85% 62%) 0%, transparent 55%), hsl(var(--h) 70% 55%);color:#fff;letter-spacing:-.03em;border-radius:14px;place-items:center;font-size:40px;font-weight:600;display:grid;position:relative;overflow:hidden}.course-art:after{content:"";transition:transform .9s var(--ease);background:linear-gradient(115deg,#0000 30%,#ffffff59 50%,#0000 70%);position:absolute;inset:0;transform:translate(-100%)}.card-hover:hover .course-art:after{transform:translate(100%)}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.pill{color:var(--ink-2);background:#0000000d;border-radius:980px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.pill-good{color:var(--good);background:#1f9d551f}.progress{background:#0000000f;border-radius:6px;height:6px;overflow:hidden}.progress>span{background:var(--accent);height:100%;transition:width .8s var(--ease);border-radius:6px;display:block}.hero{text-align:center;padding:clamp(48px,10vw,120px) 0 56px;position:relative}.hero h1{font-size:clamp(44px,7vw,84px);font-weight:700;line-height:1.02}.hero h1 .grad{background:linear-gradient(92deg,#0071e3,#8e44ff 45%,#ff375f 90%);color:#0000;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:8s ease-in-out infinite alternate shimmer}.hero p.lede{color:var(--ink-2);max-width:640px;margin:24px auto 36px;font-size:clamp(19px,2.2vw,24px)}.hero-orb{z-index:-1;filter:blur(80px);opacity:.45;background:radial-gradient(40% 50% at 30% 40%,#8ec5ff,#0000),radial-gradient(40% 50% at 70%,#d6b4ff,#0000);height:520px;animation:14s ease-in-out infinite alternate float;position:absolute;inset:-10% 10% auto}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px;display:grid}.feature h3{margin:14px 0 6px;font-size:21px}.feature-icon{border-radius:12px;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.demo-window{background:var(--surface);max-width:880px;box-shadow:var(--shadow-lg);border:1px solid var(--line);text-align:left;border-radius:22px;margin:0 auto;overflow:hidden}.demo-bar{border-bottom:1px solid var(--line);background:#f5f5f7;gap:7px;padding:14px 16px;display:flex}.demo-bar i{background:#ddd;border-radius:50%;width:12px;height:12px}.demo-bar i:first-child{background:#ff5f57}.demo-bar i:nth-child(2){background:#febc2e}.demo-bar i:nth-child(3){background:#28c840}.section{padding:72px 0 0}.section-title{text-align:center;margin-bottom:12px;font-size:clamp(32px,4.4vw,48px)}.section-sub{text-align:center;color:var(--ink-2);margin-bottom:36px;font-size:19px}.footer{border-top:1px solid var(--line);color:var(--ink-3);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px clamp(20px,4vw,48px);font-size:13px;display:flex}.footer a:hover{color:var(--ink)}.auth-wrap{place-items:center;min-height:calc(100vh - 57px);padding:24px;display:grid}.auth-card{text-align:center;width:100%;max-width:440px}.auth-card h1{margin:18px 0 8px;font-size:34px}.code-row{justify-content:center;gap:10px;margin:28px 0 8px;display:flex}.code-row input{text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:14px;width:52px;height:64px;font-size:28px;font-weight:600;transition:border-color .15s,box-shadow .15s,transform .15s}.code-row input:focus{border-color:var(--accent);outline:none;transform:translateY(-2px);box-shadow:0 0 0 4px #0071e326}.code-row.bad input{border-color:var(--bad);animation:shake .4s var(--ease)}.dev-hint{color:#8a6d00;background:#fff8e1;border-radius:12px;margin-top:18px;padding:10px 14px;font-size:13px}.role-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:28px 0;display:grid}.role{text-align:left;border:1.5px solid var(--line);background:var(--surface);transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;border-radius:16px;padding:18px}.role:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.role[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 4px #0071e31f}.role strong{font-size:16px;display:block}.role span{color:var(--ink-2);font-size:13px}.hub-head{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px;display:flex}.hub-head h1{font-size:clamp(32px,4vw,44px)}.continue{grid-template-columns:1.1fr 1fr;gap:0;margin-bottom:48px;padding:0;display:grid;overflow:hidden}.continue .course-art{aspect-ratio:auto;border-radius:0;min-height:240px;font-size:64px}.continue-body{flex-direction:column;justify-content:center;gap:12px;padding:32px;display:flex}@media (width<=720px){.continue{grid-template-columns:1fr}}.stats{gap:28px;display:flex}.stat strong{letter-spacing:-.02em;font-size:28px;display:block}.stat span{color:var(--ink-2);font-size:13px}.lesson-list{flex-direction:column;gap:10px;margin-top:28px;display:flex}.lesson-row{background:var(--surface);border:1px solid var(--line);transition:transform .25s var(--ease), box-shadow .25s;border-radius:16px;align-items:center;gap:16px;padding:18px 20px;display:flex}.lesson-row:hover{box-shadow:var(--shadow);transform:translate(4px)}.lesson-num{background:#0000000d;border-radius:50%;flex:none;place-items:center;width:36px;height:36px;font-weight:600;display:grid}.lesson-num.done{background:var(--good);color:#fff}.player{flex-direction:column;min-height:100vh;display:flex}.player-top{align-items:center;gap:16px;padding:16px clamp(20px,4vw,40px);display:flex}.player-top .progress{flex:1}.player-body{flex:1;place-items:start center;padding:24px 20px 120px;display:grid}.step{width:100%;max-width:680px;animation:rise .5s var(--ease) both}.step h2{margin-bottom:20px;font-size:clamp(28px,3.6vw,36px)}.step .body p{color:#333336;margin-bottom:16px;font-size:19px;line-height:1.6}.tip{color:#0a4c95;background:#0071e312;border-radius:14px;margin-top:20px;padding:14px 18px;font-size:15px}.player-foot{background:color-mix(in srgb, var(--bg) 82%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px clamp(20px,4vw,40px);display:flex;position:fixed;bottom:0;left:0;right:0}.option{text-align:left;border:1.5px solid var(--line);background:var(--surface);width:100%;transition:all .2s var(--ease);color:var(--ink);border-radius:14px;margin-bottom:10px;padding:16px 18px;font-size:16px;display:block}.option:disabled:not(.right):not(.wrong){opacity:.45;cursor:default}.option:hover:not(:disabled){border-color:var(--ink-3);transform:translateY(-1px)}.option.right{border-color:var(--good);background:#1f9d550f}.option.wrong{border-color:var(--bad);animation:shake .4s var(--ease);background:#d700150a}.option .why{color:var(--ink-2);animation:rise .3s var(--ease);margin-top:6px;font-size:14px;display:block}.sandbox{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:20px;overflow:hidden}.sandbox-head{border-bottom:1px solid var(--line);color:var(--ink-2);background:#f7f7f9;align-items:center;gap:10px;padding:12px 16px;font-size:13px;display:flex}.sandbox-head .dot{background:var(--good);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 3px #1f9d552e}.chat{flex-direction:column;gap:14px;max-height:420px;padding:20px;display:flex;overflow:auto}.bubble{white-space:pre-wrap;max-width:88%;animation:rise .35s var(--ease);border-radius:18px;padding:12px 16px;font-size:15px}.bubble.me{background:var(--accent);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}.bubble.ai{background:#f0f0f3;border-bottom-left-radius:6px;align-self:flex-start}.typing span{background:var(--ink-3);border-radius:50%;width:7px;height:7px;margin:0 2px;animation:1.2s infinite blink;display:inline-block}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}.composer{border-top:1px solid var(--line);align-items:flex-end;gap:10px;padding:12px;display:flex}.composer textarea{border:0;min-height:72px;padding:8px;box-shadow:none!important}.rubric{flex-wrap:wrap;gap:8px;margin:16px 0 6px;display:flex}.check{color:var(--ink-2);transition:all .3s var(--ease);background:#0000000d;border-radius:980px;padding:6px 12px;font-size:13px}.check.ok{color:var(--good);background:#1f9d551f}.starter{white-space:pre-wrap;color:#333;background:#f5f5f7;border-radius:12px;margin:12px 0;padding:12px 14px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px}.template-box{white-space:pre-wrap;color:#e8e8ee;background:#0b0b10;border-radius:16px;padding:22px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px;line-height:1.6;position:relative}.template-box .btn{padding:8px 14px;font-size:13px;position:absolute;top:12px;right:12px}.celebrate{text-align:center;padding-top:40px}.celebrate .badge{color:#fff;width:96px;height:96px;animation:pop .6s var(--ease);background:linear-gradient(135deg,#34c759,#0a9e5c);border-radius:50%;place-items:center;margin:0 auto 24px;font-size:44px;display:grid;box-shadow:0 16px 40px #34c75959}.confetti{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:8px;height:14px;animation:linear forwards fall;position:absolute;top:-12px}.cert{aspect-ratio:1.414;max-width:820px;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:linear-gradient(160deg,#fff 0%,#f6f7fb 100%);border-radius:22px;flex-direction:column;justify-content:space-between;margin:0 auto;padding:clamp(28px,6vw,64px);display:flex;position:relative;overflow:hidden}.cert:before{content:"";background:radial-gradient(circle,#8e44ff2e,#0000 65%);border-radius:50%;width:520px;height:520px;position:absolute;top:-200px;right:-180px}.cert h1{font-size:clamp(30px,5vw,52px)}.cert .name{letter-spacing:-.02em;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:clamp(28px,4.4vw,46px);font-weight:600;display:inline-block}.cert-foot{color:var(--ink-2);justify-content:space-between;align-items:end;font-size:13px;display:flex}@media print{.nav,.no-print{display:none!important}.cert{box-shadow:none}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes blink{0%,80%,to{opacity:.25}40%{opacity:1}}@keyframes shimmer{0%{background-position:0%}to{background-position:100%}}@keyframes float{0%{transform:translate(-4%)scale(1)}to{transform:translate(4%,4%)scale(1.08)}}@keyframes fall{to{transform:translate3d(var(--dx), 110vh, 0) rotate(var(--rot))}}.rise{animation:rise .6s var(--ease) both}.rise-1{animation-delay:80ms}.rise-2{animation-delay:.16s}.rise-3{animation-delay:.24s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.stat-streak strong{color:#ff6a00}.flame{transform-origin:50% 90%;margin-right:4px;font-size:22px;animation:1.6s ease-in-out infinite flicker;display:inline-block}@keyframes flicker{0%,to{transform:scale(1)rotate(-2deg)}50%{transform:scale(1.08)rotate(2deg)}}.toggle-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding-top:6px;display:flex}.switch{width:51px;height:31px;transition:background .25s var(--ease);background:#0000001f;border:0;border-radius:980px;flex:none;padding:2px;position:relative}.switch span{width:27px;height:27px;transition:transform .25s var(--ease);background:#fff;border-radius:50%;display:block;box-shadow:0 3px 8px #00000026,0 1px 1px #0000000f}.switch.on{background:var(--good)}.switch.on span{transform:translate(20px)}