@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap";.account-link{color:#8eece3;background:0 0;margin-top:18px;padding:0;font-size:13px;display:inline-flex}.account-link:hover{text-decoration:underline}.account-modal{z-index:10;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020914bd;position:absolute;inset:0}.account-card{background:linear-gradient(145deg,#122d42,#0a1527);border:1px solid #65d5c590;border-radius:20px;width:min(460px,100%);padding:30px;position:relative;box-shadow:0 30px 90px #000b}.account-card h2{letter-spacing:-1px;margin:0 0 12px;font-size:30px}.modal-close{color:#a9bdcc;background:0 0;padding:5px 10px;font-size:24px;line-height:1;position:absolute;top:13px;right:15px}.auth-help,.auth-message{color:#afc0cf;margin:0 0 18px;font-size:13px;line-height:1.75}.auth-message{background:#102d3a;border-left:2px solid #77e1d7;padding:10px 12px}.account-card form{gap:13px;display:grid}.account-card label{color:#d7e6ef;gap:7px;font-size:12px;display:grid}.account-card input{color:#eff9ff;background:#081525;border:1px solid #587993;border-radius:8px;outline:0;width:100%;padding:12px 13px;font:14px Manrope,Microsoft YaHei,sans-serif}.account-card input:focus{border-color:#76e4d8;box-shadow:0 0 0 3px #4cd8cb25}.auth-submit{justify-content:center;margin-top:4px}.auth-submit:disabled,.auth-switch:disabled{cursor:not-allowed;opacity:.65}.auth-switch{color:#91ddd8;background:0 0;justify-self:start;padding:2px 0;font-size:12px}.auth-switch:hover{text-decoration:underline}.auth-switch.danger{color:#f2a4ae}@media (width<=480px){.account-card{padding:26px 20px}.account-card h2{font-size:26px}}.playground header{max-width:720px}.playground-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;display:grid}.editor-card,.preview-card{background:#0d192bbd;border:1px solid #55748a66;border-radius:17px;min-width:0;overflow:hidden;box-shadow:0 20px 50px #00000028}.editor-top,.preview-top{background:#112338a8;border-bottom:1px solid #526f883f;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;display:flex}.file-tabs,.editor-actions{gap:5px;display:flex}.file-tabs button,.editor-actions button{color:#9db0c2;background:0 0;border-radius:6px;padding:7px 10px;font:11px DM Mono,monospace}.file-tabs button.selected{color:#aaf6eb;background:#1c4752}.editor-actions .save-draft{color:#9bf1e5;border:1px solid #63cfc28c}.playground-editor{resize:vertical;color:#e5d7ff;tab-size:2;background:#091321;border:0;outline:0;width:100%;height:390px;padding:19px;font:13px/1.8 DM Mono,monospace;display:block}.preview-top span{color:#a6f2e7;font-size:12px}.preview-top small{color:#8095aa;font-size:11px}.preview-card iframe{background:#fff;border:0;width:100%;height:390px;display:block}.playground-tip{color:#aabaca;margin:14px 0 0;font-size:13px}.playground-tip b{color:#8be5db}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=800px){.playground-grid{grid-template-columns:1fr}.playground-editor,.preview-card iframe{height:340px}.editor-top{flex-direction:column;align-items:flex-start}.editor-actions{align-self:flex-end}}.practice-tabs{flex-wrap:wrap;gap:8px;margin-top:30px;display:flex}.practice-tabs button{color:#aabccc;background:#0c192b88;border:1px solid #587b9166;border-radius:999px;padding:9px 13px;font-size:12px}.practice-tabs button.selected{color:#b5fbf0;background:#12394a;border-color:#71e2d4aa}.practice-goal{background:#10283a88;border-left:2px solid #70ded3;align-items:baseline;gap:12px;margin-top:15px;padding:12px 15px;display:flex}.practice-goal span,.completion-rule b{color:#82e8dd;white-space:nowrap;font-size:11px}.practice-goal p{color:#bdcedd;margin:0;font-size:13px}.lesson-actions{align-self:center;gap:7px;display:grid}.lesson .lesson-actions button{color:#a6f2e7;white-space:nowrap;background:#14383e;border:1px solid #5d9e9a88;border-radius:7px;padding:8px 11px;font-size:12px}.lesson .lesson-actions .open-practice{color:#d9cdfd;background:#282046;border-color:#7665c78c}@media (width<=800px){.lesson-actions{flex-wrap:wrap;grid-column:2;justify-self:start;display:flex}.practice-goal{flex-direction:column;align-items:flex-start;gap:5px}}.lesson .lesson-actions .open-guide{color:#b9d7fb;background:#142846;border-color:#506d9e88}.lesson-guide{background:#0b1829;border:1px solid #5a759066;border-radius:14px;grid-column:1/-1;margin-top:6px;overflow:hidden}.lesson-guide-head{justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;display:flex}.lesson-guide-head span{color:#7cded6;font-size:11px}.lesson-guide-head h3{margin:7px 0 0;font:500 22px Noto Serif SC,serif}.curriculum header{max-width:680px}.course-tabs{flex-wrap:wrap;gap:9px;margin-top:32px;display:flex}.course-tabs button{color:#aabccc;background:#0c192b88;border:1px solid #587b9166;border-radius:999px;padding:10px 15px;font-size:13px}.course-tabs button.selected{color:#b5fbf0;background:#12394a;border-color:#71e2d4aa}.lesson-panel{background:#0d1a2dc0;border:1px solid #55748a66;border-radius:18px;grid-template-columns:300px 1fr;gap:25px;margin-top:18px;padding:27px;display:grid;box-shadow:0 20px 50px #02091440}.course-intro{padding:8px}.course-intro>span,.lesson>div span{color:#7ee5db;font:11px DM Mono,monospace}.course-intro h3{margin:11px 0;font:500 26px/1.35 Noto Serif SC,serif}.course-intro p{color:#a6b7c8;margin:0;font-size:14px;line-height:1.8}.lesson-list{gap:10px;display:grid}.lesson{background:#0a1524a0;border:1px solid #4f6e833f;border-radius:12px;grid-template-columns:34px 1fr auto;align-items:start;gap:15px;padding:18px;display:grid}.lesson.done{background:#102d3399;border-color:#4dbca889}.lesson-number{color:#8ce8de;border:1px solid #6397a089;border-radius:50%;place-items:center;width:30px;height:30px;font:12px DM Mono,monospace;display:grid}.lesson.done .lesson-number{color:#e2fffb;background:#1b625d;border-color:#67dfcd}.lesson h4{margin:5px 0 8px;font-size:16px}.lesson p{color:#9cadbe;margin:5px 0;font-size:12px;line-height:1.65}.lesson p b{color:#c3d4df;font-weight:600}.lesson>button{color:#a6f2e7;white-space:nowrap;background:#14383e;border:1px solid #5d9e9a88;border-radius:7px;align-self:center;padding:8px 11px;font-size:12px}.lesson.done>button{color:#bec9db;background:#1a2638;border-color:#6d778d88}@media (width<=800px){.lesson-panel{grid-template-columns:1fr;padding:18px}.lesson{grid-template-columns:30px 1fr}.lesson>button{grid-column:2;justify-self:start}.course-tabs{margin-top:24px}}:root{color:#e7edf9;background:#07101d;font-family:Manrope,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#07101d;margin:0;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0}.shell{width:min(1180px,100% - 48px);margin-inline:auto}main{isolation:isolate;min-height:100vh;position:relative;overflow:hidden}.grain{z-index:-1;opacity:.18;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");position:absolute;inset:0}.aurora{z-index:-2;filter:blur(110px);opacity:.4;border-radius:50%;width:800px;height:650px;position:absolute}.aurora-a{background:#087b7d;top:-250px;left:-340px}.aurora-b{background:#7445b3;top:120px;right:-370px}.nav{justify-content:space-between;align-items:center;gap:22px;height:110px;display:flex}.brand{text-align:left;letter-spacing:1px;background:0 0;align-items:center;gap:11px;font-family:Noto Serif SC,serif;font-size:20px;font-weight:600;display:flex}.brand i{color:#9df5ed;border:1px solid #80e2db99;border-radius:50%;place-items:center;width:37px;height:37px;font-family:Manrope;font-size:17px;font-style:normal;display:grid}.brand small{letter-spacing:2px;color:#75a6af;margin-top:3px;font:500 8px/1.2 Manrope;display:block}.nav-links{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#13233b75;border:1px solid #5b749067;border-radius:999px;gap:6px;padding:7px;display:flex}.nav-links button,.text-button{color:#b8c6d7;background:0 0;padding:10px 16px;font-size:13px}.nav-links button:hover,.text-button:hover{color:#92f3ed}.text-button{border:1px solid #59708a66;border-radius:999px}.hero{grid-template-columns:1fr .92fr;align-items:center;gap:75px;padding:88px 0 115px;display:grid}.pill{color:#94ece4;letter-spacing:.4px;background:#0f454869;border:1px solid #50bdb488;border-radius:999px;margin:0 0 25px;padding:8px 14px;font-size:12px;display:inline-block}.hero h1,h2{letter-spacing:-2px;font-family:Noto Serif SC,serif;font-weight:500}.hero h1{color:#0000;background:linear-gradient(120deg,#fff 15%,#bee2ed 58%,#c4aaf3);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(45px,5.2vw,78px);line-height:1.18}.lead{color:#a2b2c4;max-width:500px;margin:27px 0 0;font-size:16px;line-height:1.9}.actions{gap:12px;margin-top:32px;display:flex}.primary,.secondary{border-radius:999px;padding:14px 21px;font-size:14px;font-weight:700}.primary{color:#061120;background:linear-gradient(110deg,#57d8de,#8c63dd);box-shadow:0 10px 33px #49cbd844}.primary b,.path-card b{margin-left:7px;font-size:18px}.secondary{color:#d1ddea;background:#1121368d;border:1px solid #71849c78}.terminal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(145deg,#102b3fc7,#10172ddb);border:1px solid #75dcdf85;border-radius:20px;overflow:hidden;box-shadow:inset 0 1px #c2ffff50,0 25px 70px #010a14a8}.terminal-top{color:#adc5d7;border-bottom:1px solid #7196a53b;align-items:center;gap:16px;padding:16px 20px;font:12px DM Mono,monospace;display:flex}.dots{color:#d574bd;letter-spacing:4px}.live{color:#6ce5d3;margin-left:auto;font:11px Manrope}.terminal pre{color:#d5c6fa;min-height:273px;margin:0;padding:26px 30px;font:14px/2 DM Mono,monospace}.terminal em{color:#66e2cf;font-style:normal}.terminal-tip{color:#b6c4d5;background:#0a1626a8;border-top:1px solid #7196a53b;align-items:center;gap:13px;padding:15px 20px;font-size:12px;line-height:1.5;display:flex}.terminal-tip b{color:#67e2d5}.metrics{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#101c33aa;border:1px solid #61789275;border-radius:18px;grid-template-columns:repeat(4,1fr);margin-bottom:130px;display:grid}.metrics div{border-right:1px solid #59708c66;gap:5px;padding:23px 28px;display:grid}.metrics div:last-child{border:0}.metrics b{color:#85e1dc;font:500 30px Noto Serif SC,serif}.metrics span{color:#95a7bc;font-size:12px}.section{padding:0 0 130px}.section header>p,.eyebrow{color:#73dcd5;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 12px;font-size:11px}.section h2{margin:0;font-size:clamp(30px,3.4vw,48px);line-height:1.25}.section header>p:last-child{color:#9eb0c3;letter-spacing:0;font-size:15px;line-height:1.7}.path-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;display:grid}.path-card{background:#0e1c30b3;border:1px solid #526c855a;border-radius:17px;flex-direction:column;min-height:296px;padding:28px;transition:transform .2s,border .2s;display:flex}.path-card:hover{border-color:#85e3dd99;transform:translateY(-5px)}.path-card>span{color:#79dfd8;font:11px DM Mono,monospace}.path-card h3{margin:31px 0 12px;font:500 25px/1.35 Noto Serif SC,serif}.path-card p{color:#a2b2c3;margin:0;font-size:14px;line-height:1.75}.path-card footer{justify-content:space-between;align-items:center;margin-top:auto;padding-top:25px;display:flex}.path-card small{color:#71879b}.path-card footer button{color:#e3ecf5;background:0 0;font-size:13px}.violet{background:linear-gradient(145deg,#201938b3,#111b31b3)}.violet>span{color:#c4a3f0}.lime{background:linear-gradient(145deg,#12302fba,#101d30b3)}.lime>span{color:#b6e897}.code-section{padding-bottom:145px}.code-layout{grid-template-columns:292px 1fr;gap:16px;margin-top:37px;display:grid}.snippet-list{align-content:start;gap:8px;display:grid}.snippet-list button{text-align:left;background:#0c192b86;border:1px solid #0000;border-radius:12px;padding:16px 17px}.snippet-list button.selected{background:#123047b8;border-color:#65ddd19c;box-shadow:inset 3px 0 #6ce3d8}.snippet-list span,.snippet-list small{color:#77dfd6;font-size:11px;display:block}.snippet-list b{margin:6px 0;font-size:14px;display:block}.snippet-list small{color:#8295aa}.snippet-card{background:#0d192bbd;border:1px solid #5a759066;border-radius:17px;overflow:hidden;box-shadow:0 20px 50px #00000028}.snippet-heading{justify-content:space-between;align-items:center;gap:20px;padding:25px 28px;display:flex}.snippet-heading span{color:#7cded6;font-size:11px}.snippet-heading h3{margin:7px 0 0;font:500 24px Noto Serif SC,serif}.copy{color:#a7f4ea;white-space:nowrap;background:#16404a9c;border:1px solid #6dbab28c;border-radius:8px;padding:10px 14px;font-size:12px}.scene,.explain{background:#1223388c;border-top:1px solid #526f883f;padding:16px 28px}.scene strong,.explain strong{color:#80e7dc;letter-spacing:1px;font-size:11px}.scene p,.explain p{color:#acbac9;margin:6px 0 0;font-size:13px;line-height:1.75}.code{color:#e5d7ff;background:#091321;margin:0;padding:25px 28px;font:13px/1.9 DM Mono,monospace;overflow:auto}.explain{background:#0c192b}.method{grid-template-columns:.95fr 1.05fr;gap:80px;padding-bottom:110px;display:grid}.method h2{font-size:46px}.method ol{border-top:1px solid #526b8457;margin:0;padding:0;list-style:none}.method li{border-bottom:1px solid #526b8457;gap:20px;padding:20px 0;display:flex}.method li>b{color:#70dcd5;font:12px DM Mono,monospace}.method li span{color:#aab9c8;font-size:14px}.method li strong{color:#e3ebf4;margin-bottom:4px;display:block}.footer{color:#74899e;border-top:1px solid #536d835b;justify-content:space-between;padding:28px 0;font-size:12px;display:flex}.footer button{color:#9ce8e1;background:0 0}.toast{color:#dcecf4;z-index:5;background:#11283eeb;border:1px solid #68dcd292;border-radius:999px;align-items:center;gap:14px;padding:12px 14px 12px 18px;font-size:13px;display:flex;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 10px 35px #0008}.toast button{color:#a6c3d1;background:0 0;font-size:20px;line-height:1}@media (width<=800px){.shell{width:min(100% - 32px,600px)}.nav{height:86px}.nav-links{display:none}.hero{grid-template-columns:1fr;gap:42px;padding:58px 0 72px}.hero h1{font-size:48px}.terminal pre{min-height:0;font-size:12px}.metrics{grid-template-columns:repeat(2,1fr);margin-bottom:86px}.metrics div:nth-child(2){border-right:0}.metrics div{padding:18px}.path-grid,.code-layout,.method{grid-template-columns:1fr}.code-layout{gap:13px}.snippet-list{grid-template-columns:repeat(3,1fr)}.snippet-list button{padding:12px}.snippet-list small{display:none}.snippet-card{min-width:0}.method{gap:35px}.method h2{font-size:36px}.section{padding-bottom:85px}}@media (width<=480px){.brand{font-size:17px}.text-button{padding:8px 12px}.hero h1{font-size:39px}.actions{flex-direction:column;align-items:flex-start}.metrics{margin-inline:auto}.path-grid{gap:12px}.snippet-list{grid-template-columns:1fr}.snippet-heading{align-items:flex-start;padding:21px}.snippet-heading h3{font-size:20px}.scene,.explain,.code{padding-inline:20px}.footer{gap:12px}.terminal{border-radius:14px}}