:root{--ink:#192c35;--muted:#64747d;--line:#dce4e8;--paper:#f7f9fa;--blue:#245be0;--navy:#112936;--mint:#9fe7d3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 "Segoe UI","Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #e39821;outline-offset:5px}a:hover{color:var(--blue)}.skip{position:absolute;left:16px;top:-80px;background:white;padding:8px;z-index:9}.skip:focus{top:4px}.wrap{max-width:1160px;margin:auto;padding:0 32px}header{border-bottom:1px solid var(--line);background:#fff}header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px}.brand{font-size:23px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.mark{display:grid;place-items:center;background:var(--navy);color:var(--mint);width:36px;height:36px;border-radius:9px;font:27px Georgia}.nav{display:flex;gap:32px;font-size:15px;align-items:center}.nav a{padding:29px 0;border-bottom:2px solid transparent}.nav a.active{color:var(--blue);border-color:var(--blue)}.local{font:12px/1.5 monospace;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:5px 9px;letter-spacing:1px}.eyebrow{font:12px/1.6 Consolas,monospace;letter-spacing:2px;color:var(--muted);text-transform:uppercase}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;padding:68px 0 54px;align-items:center}.hero h1{font-size:46px;line-height:1.4;letter-spacing:-2px;margin:17px 0}.hero h1 span{color:var(--blue)}.hero p{max-width:450px;color:var(--muted);margin:20px 0 28px}.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:16px;border:1px solid var(--line);border-radius:7px;padding:10px 20px;background:white;font-size:14px;font-weight:600;color:var(--ink)}.btn.primary{background:var(--blue);border-color:var(--blue);color:white}.btn:hover{filter:brightness(.94)}.feature{background:var(--navy);color:#fff;border-radius:14px;padding:28px 30px;position:relative;overflow:hidden}.feature .eyebrow{color:var(--mint)}.feature h2{font-size:22px;margin:12px 0 2px}.feature p{color:#b8c9d2;font-size:14px;margin:8px 0}.feature a{color:var(--mint);font-size:14px}.feature svg{width:100%;height:170px;margin:8px 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}.section-head h2{font-size:22px;margin:0}.section-head span{color:var(--muted);font-size:13px}.home-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;padding-bottom:56px}.entry{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}.entry-no{font:14px Consolas,monospace;color:#84939d;padding-top:5px}.entry h3{font-size:19px;margin:5px 0 7px}.entry p{color:var(--muted);font-size:14px;margin:0 0 12px}.meta{font-size:12px;color:var(--muted)}.tag{color:var(--blue);font-size:12px;letter-spacing:.3px}.roadmap{background:white;border:1px solid var(--line);padding:24px;border-radius:10px}.roadmap h3{font-size:17px;margin:0 0 18px}.step{display:flex;gap:14px;padding:12px 0;border-top:1px solid #edf0f3}.step b{font:13px monospace;display:grid;place-items:center;border:1px solid var(--line);width:29px;height:29px;border-radius:50%;flex-shrink:0}.step.current b{background:var(--blue);color:#fff;border-color:var(--blue)}.step strong{font-size:14px}.step small{display:block;color:var(--muted);font-size:12px}.study-note{font-size:14px;margin:20px 0 0;color:var(--muted)}footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:12px}footer .wrap{display:flex;justify-content:space-between;gap:18px}.breadcrumb{font-size:13px;color:var(--muted);margin:30px 0}.article-layout{display:grid;grid-template-columns:minmax(0,750px) 230px;gap:66px;padding-bottom:70px}.article h1{font-size:37px;line-height:1.45;letter-spacing:-1px;margin:14px 0}.article .lead{font-size:18px;color:var(--muted)}.article h2{font-size:24px;margin:40px 0 14px;scroll-margin-top:24px}.article p{line-height:1.95}.article .meta{padding-bottom:24px;border-bottom:1px solid var(--line)}.callout{border-left:3px solid var(--blue);background:#edf2ff;padding:18px 22px;margin:24px 0}.formula{background:var(--navy);color:#e1f5f2;padding:24px;border-radius:8px;font:18px/1.9 Consolas,monospace;overflow:auto}.toc{position:sticky;top:32px;height:max-content;border-left:1px solid var(--line);padding-left:24px;margin-top:15px}.toc h3{font-size:13px;letter-spacing:1px;margin:0 0 15px}.toc a{display:block;font-size:14px;color:var(--muted);padding:8px 0}.toc .btn{color:var(--blue);margin-top:24px}.lab-head{display:flex;justify-content:space-between;align-items:center;margin:30px 0 24px;gap:18px}.lab-head h1{font-size:32px;margin:3px 0}.lab-head p{color:var(--muted);margin:5px 0;font-size:14px}.lab-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white}.plot{background:var(--navy);padding:24px;color:white}.plot-top{display:flex;justify-content:space-between;font-size:13px;color:#bad0dc}.plot svg{display:block;width:100%;height:310px}.legend{display:flex;gap:24px;justify-content:center;font-size:13px}.legend span:first-child{color:#a4e5ce}.legend span:last-child{color:#8bafff}.controls{padding:28px}.controls h2{font-size:18px;margin:0 0 8px}.controls p{font-size:14px;color:var(--muted)}.slider-label{display:flex;justify-content:space-between;margin:16px 0 8px;font-size:14px}input[type=range]{width:100%;accent-color:var(--blue);height:24px}.result{display:flex;justify-content:space-between;align-items:center;background:#f2f5f9;padding:16px;border-radius:7px;margin:20px 0 15px}.result strong{font:32px Consolas,monospace;color:var(--blue)}.result small{display:block;color:var(--muted)}.presets{display:flex;gap:8px;flex-wrap:wrap}.presets button{font-size:12px;padding:6px 10px}.lesson-bottom{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;margin:30px 0 60px}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:26px}.panel h2{font-size:19px;margin:8px 0 15px}.panel p{font-size:14px;color:var(--muted)}details{font-size:14px}summary{cursor:pointer;color:var(--blue);margin-top:18px}.answers{display:grid;gap:8px;margin:16px 0}.answer{text-align:left;border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:white;font-size:14px}.answer[aria-pressed=true]{border-color:var(--blue);background:#eef3ff}.feedback{min-height:28px;margin-top:12px;font-size:14px}.feedback.good{color:#187254}.feedback.bad{color:#a13e2b}.question-actions{display:flex;justify-content:space-between;gap:12px;align-items:center}.question-actions small{color:var(--muted)}.disabled-note{font-size:12px;color:var(--muted);margin:10px 0}.reading-link{display:block;margin-top:16px;color:var(--blue);font-size:14px}button:disabled{cursor:default;opacity:.5}@media(max-width:850px){.hero{gap:26px}.hero h1{font-size:36px}.home-grid{gap:24px}.article-layout{grid-template-columns:minmax(0,1fr)}.toc{display:none}.lab-grid{grid-template-columns:1fr 1fr}.controls{padding:20px}.lesson-bottom{gap:18px}.nav{gap:18px}.local{display:none}}@media(max-width:620px){.wrap{padding:0 20px}header .wrap{height:auto;min-height:80px;flex-wrap:wrap;padding-top:16px;gap:6px}.brand{font-size:21px}.nav{width:100%;justify-content:space-between}.nav a{padding:10px 0}.hero{grid-template-columns:1fr;padding:36px 0;gap:28px}.hero h1{font-size:36px}.hero p{margin:16px 0 22px}.home-grid,.lab-grid,.lesson-bottom{grid-template-columns:1fr}.home-grid{gap:28px}.feature{padding:24px}.article h1{font-size:29px}.article-layout{gap:0}.lab-head{align-items:flex-start;flex-direction:column}.lab-head h1{font-size:28px}.plot svg{height:270px}.lesson-bottom{margin-bottom:36px}footer .wrap{flex-direction:column;gap:6px}.entry{grid-template-columns:32px 1fr;gap:12px}.question-actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Earth-inspired header and learning portals */
.earth-header{position:relative;z-index:10;background:#fff;border-bottom:1px solid #edf0f3}.earth-header .wrap{max-width:1260px;height:76px;justify-content:flex-start;gap:38px}.earth-header .brand{font-size:24px;font-weight:500;letter-spacing:0;white-space:nowrap;color:#252e3d}.earth-header .nav{gap:30px;font-size:16px;color:#737d8a}.earth-header .nav>a{padding:23px 0;border:0}.earth-header .nav>a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded=true]{color:#3675df}.nav-trigger{border:0;background:none;color:inherit;padding:23px 0;white-space:nowrap;display:flex;align-items:center;gap:9px}.nav-trigger span{font-size:14px}.learn-menu{position:relative}.learn-dropdown{position:absolute;top:calc(100% - 2px);left:-230px;width:660px;padding:24px;background:white;border:1px solid #e8edf2;box-shadow:0 14px 38px #182b4220;border-radius:12px}.learn-dropdown[hidden]{display:none}.menu-heading{font-size:14px;color:#7a8490;margin-bottom:15px}.menu-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.earth-header .portal-card{display:block;border:1px solid #e4eaf0;border-radius:9px;padding:20px;color:#273545;background:#f8fbff;transition:border-color .15s,background .15s}.earth-header .portal-card:hover{border-color:#7199e5;background:#f0f6ff}.portal-symbol{display:block;color:#3973ce;font:18px/1.5 Consolas,monospace;margin-bottom:23px}.portal-card strong{display:flex;justify-content:space-between;font-size:17px}.portal-card p{font-size:14px;line-height:1.8;color:#6a7786;margin:10px 0 18px}.portal-card small{font-size:12px;color:#718195}.earth-header .concept-card{background:#f8fcfa}.concept-card .portal-symbol{color:#16856a}.home-about{border-top:1px solid var(--line);padding:24px 0 36px}.home-about h2{font-size:21px}.home-about p{color:var(--muted)}.course-page{max-width:1000px}.course-intro{text-align:center;padding:45px 0 38px}.course-intro h1{font-size:44px;line-height:1.45;margin:18px 0}.course-intro p{color:var(--muted);line-height:2;margin-bottom:26px}.learning-method{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;margin:5px 0 48px;gap:18px;font-size:15px}.learning-method b{color:var(--blue);font:14px monospace;margin-right:10px}.course-map{padding:0 12px}.course-row{display:flex;align-items:center;gap:26px;padding:25px 0;border-top:1px solid var(--line)}.course-row>b{color:var(--blue);font:24px Georgia}.course-row div{flex:1}.course-row h3{font-size:20px;margin:0 0 5px}.course-row p{color:var(--muted);font-size:14px;margin:0}.course-row>span{font-size:14px;color:var(--blue)}.course-caption{font-size:13px;color:var(--muted);margin:20px 12px 60px}.concept-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:50px;margin:40px 0 70px}.concept-side{border-right:1px solid var(--line);padding-right:25px}.concept-side h2{font-size:18px}.concept-side a{display:flex;justify-content:space-between;padding:12px;font-size:14px;border-radius:6px}.concept-side a[aria-current]{background:#e8f3ee;color:#177159}.concept-body h1{font-size:52px;line-height:1.2;margin:16px 0 24px;letter-spacing:-2px}.concept-kicker{color:#18775f;font-size:13px}.concept-body h2{font-size:23px;margin:30px 0 12px}.concept-question{font-size:21px;font-weight:600}.concept-body p{color:#586874}.concept-body code{font-family:Consolas,monospace;color:#177159}.html-anatomy{display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px;text-align:center;padding:30px 16px 15px;background:#eef5f1;border-radius:8px 8px 0 0;margin-top:30px;font-size:20px}.anatomy-labels{display:grid;grid-template-columns:1fr 2fr 1fr;text-align:center;background:#eef5f1;padding:0 16px 24px;color:#6c8077;font-size:13px;border-radius:0 0 8px 8px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}.editor-grid>div{min-width:0}.editor-grid label,.preview-label{display:block;font-size:13px;padding:10px 14px;background:#edf2f5;border-bottom:1px solid var(--line)}.editor-grid textarea{display:block;width:100%;height:290px;border:0;resize:vertical;background:#172b37;color:#d5efdf;padding:20px;font:14px/1.8 Consolas,monospace;border-radius:0}.editor-grid iframe{display:block;width:100%;height:290px;border:0;background:white}.html-check{border-top:1px solid var(--line);margin-top:34px}.html-answers{display:flex;gap:12px}.concept-side a:last-child{margin-top:25px;color:var(--blue)}
@media(max-width:850px){.earth-header .wrap{gap:24px}.earth-header .nav{gap:20px}.learn-dropdown{left:auto;right:-40px;width:min(660px,calc(100vw - 40px))}.concept-layout{grid-template-columns:155px minmax(0,1fr);gap:25px}.editor-grid{grid-template-columns:1fr}}
@media(max-width:620px){.earth-header .wrap{height:auto;padding-top:16px;gap:3px;align-items:flex-start}.earth-header .brand{font-size:23px}.earth-header .nav{gap:18px;justify-content:flex-start;flex-wrap:wrap;font-size:14px}.earth-header .nav>a,.nav-trigger{padding:12px 0}.learn-menu{position:static}.learn-dropdown{top:100%;right:20px;left:20px;width:auto;padding:18px;max-height:calc(100dvh - 145px);overflow:auto}.menu-cards{grid-template-columns:1fr}.portal-symbol{margin-bottom:12px}.portal-card p{margin-bottom:10px}.course-intro{padding:25px 0}.course-intro h1{font-size:32px}.learning-method{grid-template-columns:1fr 1fr}.course-row{gap:16px;flex-wrap:wrap}.course-row>span{margin-left:43px}.course-row h3{font-size:18px}.concept-layout{display:block;margin-top:24px}.concept-side{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:28px;display:flex;flex-wrap:wrap;gap:8px}.concept-side .eyebrow,.concept-side h2{display:none}.concept-side a{padding:6px 10px}.concept-side a:last-child{margin:0}.concept-side a span{margin-left:10px}.concept-body h1{font-size:42px}.html-anatomy{font-size:15px}.concept-question{font-size:19px}}

/* Learning space: page navigation, full-width topic workspaces. */
.earth-header .nav>a[aria-current=page]{color:#6155d9;font-weight:600}.space-page{max-width:1260px;padding-top:36px;padding-bottom:56px}.space-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 28px}.space-heading h1{font-size:28px;margin:0 0 6px;letter-spacing:-.6px}.space-heading p{color:#7a8090;font-size:15px;margin:0}.space-heading>span{font:11px monospace;letter-spacing:1.5px;color:#969aaa}.space-list{display:grid;gap:20px}.space-card{display:flex;align-items:center;gap:28px;background:#fff;border:1px solid #e7e8ef;border-radius:12px;padding:28px 30px;min-height:182px;transition:border-color .18s,box-shadow .18s;color:#252934}.space-card:hover{border-color:#a7a0ea;box-shadow:0 5px 20px #39336b08;color:#252934}.space-number{font:17px monospace;color:#b0accc;align-self:flex-start;margin-top:4px}.space-card-text{flex:1}.space-en{font:11px monospace;letter-spacing:1px;color:#817b9d}.space-card h2{font-size:23px;line-height:1.4;margin:7px 0 9px}.space-card p{color:#777b88;font-size:14px;margin:0 0 15px}.space-tags{display:flex;gap:8px;flex-wrap:wrap}.space-tags span{background:#f6f5fa;border-radius:4px;color:#7c758e;font-size:12px;padding:3px 9px}.space-preview{width:240px;padding:23px 16px;background:#f9f9fc;border:1px solid #f0eff6;border-radius:9px;display:grid;gap:13px;text-align:center;flex-shrink:0}.space-preview>span:last-child{font-size:12px;color:#9291a1}.space-preview code,.mini-formula{font:17px/1.7 Consolas,monospace;color:#7063bf}.space-preview b{font-weight:400;color:#aaa1cc;margin:0 7px}.mini-question{font-size:14px;color:#7063bf}.space-enter{font-size:13px;color:#777184;white-space:nowrap}.space-enter b{font-size:20px;color:#7063bf;margin-left:12px}.study-nav{border-bottom:1px solid #ededf2;background:#fff}.study-nav-inner{max-width:1600px;padding:0 40px;margin:auto;display:flex;align-items:center;min-height:64px;gap:42px}.back-space{font-size:14px;color:#7e8090}.study-nav nav{display:flex;gap:12px}.study-nav nav a{font-size:14px;padding:7px 15px;border-radius:6px;color:#717382}.study-nav nav a[aria-current=page]{background:#f0edff;color:#6155d9;font-weight:600}.study-nav-label{margin-left:auto;color:#a3a1af;font:11px monospace;letter-spacing:1.5px}body:is([data-page=vibe],[data-page=ai],[data-page=concepts],[data-page=learning]){background:#fff;--blue:#6155d9;--ink:#292b33;--line:#e8e8ef;--muted:#7b7d89}.study-wide{max-width:1600px;padding:42px 40px 70px;margin:auto;min-height:calc(100vh - 225px)}.vibe-layout{display:grid;grid-template-columns:165px minmax(0,1fr);gap:40px}.vibe-sidebar p{font-size:12px;color:#9696a2;margin:0 10px 17px}.vibe-sidebar>a{display:flex;justify-content:space-between;font-size:14px;padding:10px;border-radius:6px;margin-bottom:6px;color:#7b7b87}.vibe-sidebar>a[aria-current]{background:#f3f1fd;color:#6559bd}.sidebar-note{font-size:12px;line-height:1.9;color:#a2a1ab;margin:34px 10px}.vibe-eyebrow{font:12px monospace;letter-spacing:1px;color:#8a83a2}.vibe-heading h1{font-size:30px;letter-spacing:-.8px;margin:8px 0 10px;line-height:1.45}.vibe-heading p{font-size:15px;color:#8b8996;margin:0 0 30px}.vibe-content .section-head h2{font-size:20px}.vibe-content .section-head h2>span{font-size:13px;font-weight:400;margin-left:10px;color:#94919e}.term-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.term-card{border:1px solid #e8e7ef;border-radius:12px;padding:23px;min-width:0;align-self:start}.term-card h3{font-size:22px;line-height:1.4;margin:0 0 12px;color:#2d2c33}.term-card h3>span{color:#7664df;font-size:16px;font-weight:400;margin-left:4px}.term-question{font-size:14px;color:#83818e;line-height:1.9;min-height:54px;margin:0 0 17px}.term-demo{height:192px;border:1px solid #f0eff4;background:#f9f9fb;border-radius:8px;padding:18px;font-size:12px;color:#74737f;overflow:hidden}.term-card details{border-top:1px solid #f0eff5;margin-top:18px;padding-top:12px}.term-card summary{font-size:13px;margin:0;color:#8379ad}.term-card details p{font-size:14px;color:#74717f;line-height:1.9}.term-link{display:block;font-size:13px;color:#7162bb;margin-top:18px;padding-top:12px;border-top:1px solid #f0eff5}.demo-browser{font-size:9px;color:#cccbd5;border-bottom:1px solid #eee;padding-bottom:5px;display:flex;justify-content:space-between}.frontend-demo>strong{display:block;margin-top:12px;font-size:15px;color:#494551}.frontend-demo>p{font-size:10px;margin:4px 0}.demo-cta{display:inline-block;padding:3px 8px;background:#8175d1;border-radius:4px;color:white;font-size:10px}.demo-three{display:flex;gap:5px;margin-top:17px}.demo-three span{flex:1;text-align:center;background:#fff;border:1px solid #eeeef3;padding:4px 0;font-size:9px}.component-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.component-demo>code{background:#f0edfb;color:#8376c5;border:1px solid #ded8f4;padding:9px 12px;border-radius:6px}.component-demo>span{font-size:10px}.component-demo>div{display:flex;gap:14px;width:100%}.component-demo>div>span{background:white;border:1px solid #eee;border-radius:5px;padding:8px;text-align:center;flex:1;color:#615687}.component-demo small{font-size:9px;color:#93919e}.state-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.state-demo>strong{font-size:30px;line-height:1.3;color:#7064bb;font-weight:500}.state-demo button,.css-demo button{border:1px solid #e2deef;background:white;border-radius:5px;padding:5px 8px;color:#7a6baf;font-size:11px}.state-demo small{font-size:10px;color:#aaa4b5}.markdown-demo{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px;align-items:center}.markdown-demo>div{background:white;border:1px solid #eeedf3;border-radius:6px;padding:10px;height:145px}.markdown-demo small{display:block;color:#aaa4b5;font-size:9px;margin-bottom:12px}.markdown-demo code{font-size:10px;line-height:2;color:#8a7eaf;white-space:nowrap}.markdown-demo strong{font-size:13px;color:#55505e;display:block}.markdown-demo ul{padding-left:12px;font-size:9px;line-height:2}.html-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.html-demo code{font-size:12px;color:#8576bf;padding:7px;background:#fff;border:1px solid #ededf4}.html-demo strong{font-size:20px;color:#585162}.html-demo small{font-size:10px;color:#aaa3b3}.css-demo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}.css-demo>span{font-size:13px;color:#6155d9}.css-demo button[aria-pressed=true]{background:#f0edfb;border-color:#b7abde}.css-demo code{font-size:12px;color:#a39aae}.mobile-break{display:none}body[data-page=ai] .course-page{max-width:1400px;min-height:calc(100vh - 225px)}body[data-page=ai] .course-intro{text-align:left;padding:24px 0 30px}body[data-page=ai] .course-intro h1{font-size:34px}body[data-page=ai] .course-map{padding:0}body[data-page=ai] .course-row{border:1px solid #e8e7ef;padding:22px;margin-top:14px;border-radius:10px}body[data-page=ai] .learning-method{border:0;background:#f8f7fc;padding:18px 24px;border-radius:8px;margin-bottom:32px}body[data-page=concepts] .concepts-page,body[data-page=learning] main.wrap{max-width:1500px}.concept-side a[aria-current]{background:#f2effc;color:#7562ba}.concept-kicker,.concept-body code{color:#7b69bb}.html-anatomy,.anatomy-labels{background:#f7f5fb}.concept-layout{gap:45px}.concept-body{max-width:1050px}
@media(min-width:1400px){.earth-header .wrap{max-width:1500px}.space-page{max-width:1500px}.space-card{min-height:188px;padding:30px 36px}.space-preview{width:280px}}
@media(max-width:1150px){.term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.space-preview{width:190px}.space-enter{font-size:0}.space-enter b{font-size:22px}.vibe-layout{gap:24px;grid-template-columns:145px minmax(0,1fr)}}
@media(max-width:750px){.space-heading>span,.study-nav-label{display:none}.space-preview{display:none}.space-card{padding:23px;gap:18px}.space-card h2{font-size:21px}.study-nav-inner{padding:14px 20px;gap:12px;flex-wrap:wrap}.study-nav nav{gap:4px}.study-nav nav a{padding:6px 10px;font-size:13px}.study-wide{padding:28px 20px 45px}.vibe-layout{display:block}.vibe-sidebar{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}.vibe-sidebar p,.sidebar-note{display:none}.vibe-heading h1{font-size:27px}.term-card{padding:18px}.term-card h3{font-size:20px}.term-card h3>span{font-size:14px}}
@media(max-width:540px){.space-page{padding-top:25px}.space-card{gap:13px;align-items:flex-start;position:relative;padding:23px 20px}.space-card-text{padding-right:10px}.space-number{font-size:13px}.space-enter{position:absolute;right:18px;top:22px}.space-en{font-size:10px;letter-spacing:.2px}.space-heading p{font-size:14px}.space-card p{font-size:13px}.term-grid{grid-template-columns:1fr}.term-question{min-height:0}.term-demo{height:205px}.term-card{padding:23px}.mobile-break{display:block}.study-nav-inner{gap:10px}.back-space{width:100%;font-size:13px}.vibe-heading h1{font-size:27px}.earth-header .nav{gap:17px}.earth-header .wrap{padding-bottom:0}.course-intro h1{font-size:28px!important}.course-row>span{margin-left:0}.concept-layout{margin-top:20px}}

/* Motion follows the teaching action, with a reduced-motion alternative. */
@view-transition{navigation:auto}::view-transition-old(root){animation:page-out .12s ease-out both}::view-transition-new(root){animation:page-in .2s ease-out both}@keyframes page-out{to{opacity:0}}@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.space-card,.term-card,.course-row{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.space-enter b{display:inline-block;transition:transform .2s ease}.term-card:focus-within{border-color:#b9afe1}.term-demo button{transition:background-color .2s,color .2s,transform .15s,border-color .2s;min-height:32px}.term-demo button:active{transform:scale(.96)}#css-sample{transition:color .45s ease}.term-card h4{font-size:14px;margin:18px 0 6px;color:#59526f}.concept-thought{border-left:2px solid #d1c7ed;padding-left:12px}.demo-switches{display:flex;gap:5px;flex-wrap:wrap}.term-demo .demo-switches button{font-size:12px;background:white;border:1px solid #ddd8ec;color:#686176;border-radius:5px;padding:4px 7px}.term-demo .demo-switches button[aria-pressed=true]{color:#6550ad;background:#eeebf9;border-color:#c1b4e0}.term-demo{height:auto;min-height:250px;overflow:visible}.demo-explanation{font-size:12px!important;line-height:1.65!important;color:#726b80!important;margin:10px 0 0!important;min-height:40px}.frontend-demo{display:flex;flex-direction:column;gap:8px}.front-result{padding:12px;background:white;border:1px solid #eee;border-radius:0;transition:padding .25s,border-radius .25s,background-color .25s}.front-result strong{font:16px Georgia,serif;color:#333}.front-result p{font-size:12px;margin:7px 0}.front-result button{font-size:12px;border:1px solid #aaa;padding:3px 7px;border-radius:0;background:#eee;color:#333}.front-result.with-style{background:#f1eefb;border-radius:12px;padding:16px;border-color:#ded7f1}.front-result.with-style strong{font:600 16px "Segoe UI",sans-serif;color:#665395}.front-result.with-style button{background:#7b67b8;color:#fff;border-color:transparent;border-radius:6px;padding:5px 9px}.front-result button:disabled{opacity:.75}.component-demo{gap:9px;--demo-radius:6px;justify-content:flex-start}.component-demo>label{display:flex;justify-content:space-between;width:100%;font-size:12px;color:#71667f}.component-demo input{accent-color:#8973c5;width:100%;height:22px}.component-demo .component-instances{display:flex;width:100%;gap:12px}.component-demo .component-instances>span{border:1px solid #ded7ee;background:white;padding:13px 8px;border-radius:var(--demo-radius);transition:border-radius .12s ease;flex:1;text-align:center;font-size:14px}.component-instances small{display:block;font-size:12px;margin-top:3px}.component-demo>code{font-size:12px;padding:5px 9px}.component-demo .demo-explanation{align-self:stretch}.markdown-demo{align-items:stretch;gap:10px;min-height:250px}.markdown-demo>div{height:auto;min-width:0;padding:10px}.markdown-demo label,.md-label{display:block;font-size:12px;color:#82788d;margin-bottom:12px}.markdown-demo textarea{width:100%;height:173px;border:0;resize:vertical;min-height:100px;background:white;color:#79649a;font:12px/1.9 Consolas,monospace;padding:0}.markdown-demo #markdown-result{overflow-wrap:anywhere}.markdown-demo #markdown-result h1{font-size:17px;margin:0 0 12px;line-height:1.5}.markdown-demo #markdown-result h2{font-size:15px;margin:0 0 10px}.markdown-demo #markdown-result h3{font-size:14px;margin:0 0 10px}.markdown-demo #markdown-result p,.markdown-demo #markdown-result li{font-size:12px;line-height:1.8}.markdown-demo ul{padding-left:14px}.demo-footnote{font-size:12px;color:#847c8c;line-height:1.8;margin:9px 0 0}.html-demo{gap:13px;justify-content:flex-start}.html-demo .demo-switches{align-self:stretch}.html-demo #tag-result{min-height:58px;display:flex;align-items:center}#tag-result h1{font-size:25px;margin:0;color:#53475e;line-height:1.4}#tag-result p{font-size:14px;margin:0;color:#53475e}.html-demo #tag-code{align-self:stretch;text-align:center}.state-demo{min-height:250px}.state-demo button,.css-demo button{font-size:12px;padding:6px 10px}.state-demo small{font-size:12px;color:#81758e}.css-demo{min-height:250px}.term-card summary,.term-link{font-size:14px}.term-question{color:#716c7e}.term-card details p{color:#6b6477}
@media(hover:hover){.term-card:hover,.space-card:hover,.course-row:hover{transform:translateY(-3px);border-color:#c4b9e7;box-shadow:0 8px 24px #6250840c}.space-card:hover .space-enter b{transform:translate(3px,-3px)}.term-demo button:hover:not(:disabled){border-color:#a496c8}.term-card summary:hover{color:#6155a4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.term-card:hover,.space-card:hover,.course-row:hover{transform:none}.space-card:hover .space-enter b{transform:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}