@font-face{font-family:Host Grotesk;src:url('/assets/host-grotesk.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap}
:root{color-scheme:dark;--hb-font:'Host Grotesk','PingFang SC','Microsoft YaHei',sans-serif;--bg:#08090a;--bg-2:#191b1e;--bg-3:#151719;--paper:#111315;--ink:#edeef0;--ink-soft:#b2b5bc;--ink-mute:#92969e;--line:#2d3035;--line-soft:#24272b;--accent:#b8c2da;--accent-soft:#202630;--blue:#a6b8e2;--blue-soft:#202632;--green:#a5c2b1;--green-soft:#1c2a24;--yellow:#d5be85;--yellow-soft:#302b20;--radius:6px;--shadow:none;--sans:var(--hb-font);--serif:var(--hb-font);--em:var(--hb-font);--mono:'SFMono-Regular',Consolas,monospace;--pattern-page-max:1064px;--pattern-content-max:1000px}
*{box-sizing:border-box}.hb-page{margin:0;background:#08090a!important;background-image:none!important;color:var(--ink);font-family:var(--hb-font);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}.hb-page a{color:inherit;text-decoration:none}.hb-page button,.hb-page input,.hb-page textarea,.hb-page select{font-family:inherit}.hb-page button{cursor:pointer}.hb-page a:focus-visible,.hb-page button:focus-visible,.hb-page summary:focus-visible{outline:2px solid #aabbdc;outline-offset:4px}.hb-page [hidden]{display:none!important}.hb-width{width:min(1000px,calc(100% - 64px));margin-inline:auto}.hb-page .wrap{width:min(1000px,calc(100% - 64px));max-width:1000px;padding-inline:0!important;margin-inline:auto}.hb-page .wrap .wrap{width:100%}.hb-page #hb-main{min-width:0;overflow:visible}.hb-skip{position:fixed;top:-80px;left:20px;z-index:1000;background:#fff;color:#111!important;padding:10px}.hb-skip:focus{top:8px}
/* The same navigation frame as the main website, isolated from lesson/demo styles. */
.hb-page .hb-site-header{position:sticky;top:0;height:65px;z-index:500;background:#08090af5;backdrop-filter:blur(14px);border-bottom:1px solid #242526;padding:0}.hb-site-header .header-inner{height:65px;display:flex;justify-content:space-between;align-items:center;gap:24px;width:min(1000px,calc(100% - 64px));margin:auto}.hb-page .hb-site-header .brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:#f4f4f5;font:500 16px var(--hb-font);letter-spacing:-.025em}.hb-site-header .brand img{display:block;width:23px;height:23px;filter:grayscale(1)}.hb-site-header .desktop-nav{display:flex;align-items:center;gap:25px;font-size:14px;line-height:1.4;color:#c9cacc}.hb-site-header .desktop-nav a:hover{color:#fff}.hb-site-header .button{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;min-height:36px;border:0;border-radius:8px;white-space:nowrap;line-height:1.3;font-size:14px;font-weight:500}.hb-site-header .button.light{background:white;color:#111215}.hb-site-header .menu-toggle,.hb-site-header .mobile-nav{display:none}.hb-site-header .nav-access-icon{display:inline-block;vertical-align:-1px;margin-left:5px;opacity:.8}.hb-site-header .resource-nav-panel{background:#141619;border:1px solid #303237;color:#ccc}.hb-site-header .resource-nav-trigger{font:inherit}.hb-site-header .resource-nav-trigger[aria-current=page]{color:#fff}.hb-page .hb-breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:24px 0 0;color:#84888f;font-size:11px;line-height:1.6}.hb-breadcrumb [aria-current=page]{color:#c5c8ce}.hb-breadcrumb a:hover{color:#fff}
.hb-chapters{position:sticky;top:65px;z-index:100;background:#0e1012f5;border-top:1px solid #292c30;border-bottom:1px solid #292c30;backdrop-filter:blur(12px);margin-bottom:0}.hb-chapters>.hb-width{display:flex;align-items:center;gap:20px;min-height:53px}.hb-chapter-label{font-size:11px;white-space:nowrap;color:#777e88}.hb-chapters nav{display:flex!important;align-items:center;gap:6px!important;flex-wrap:nowrap!important;overflow:auto;min-width:0;scrollbar-width:thin;padding:8px 0;margin:0}.hb-chapters a{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:7px 10px!important;min-height:30px;border:0!important;border-radius:5px!important;color:#a5abb5!important;font:12px/1.5 var(--hb-font)!important;background:transparent}.hb-chapters a:hover,.hb-chapters a.active,.hb-chapters a[aria-current=page],.hb-chapters a[aria-current=location]{color:white!important;background:#292d33!important}.hb-chapters nav+nav{display:none!important}.wrap>.hb-chapters{width:100%;margin-bottom:0}.wrap>.hb-chapters>.hb-width{width:100%}
.hb-page :is(section[id],.comp-card[id]){scroll-margin-top:135px}.hb-page .hero,.hb-page header.top{padding:46px 0 42px!important;border-top:0;margin-inline:auto;background:none}.hb-page header.top{width:min(1000px,calc(100% - 64px));max-width:1000px}.hb-page .hero:before,.hb-page .hero:after,.hb-page section[data-chapter]:before{display:none}.hb-page .hero h1,.hb-page header.top h1{font-family:var(--hb-font)!important;font-weight:450!important;font-size:44px!important;line-height:1.3!important;letter-spacing:-.04em;margin:18px 0 22px!important}.hb-page .hero :is(.lede,.hero-lede),.hb-page header.top .lede{font-size:15px;line-height:1.9;color:#adb2bb;max-width:720px;margin-bottom:24px}.hb-page .hero-grid{gap:40px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.hb-page .hero-left p{font-size:13px;line-height:1.9;color:#999fa9}.hb-page .hero-side{border-left:1px solid #30343a;padding-left:25px}.hb-page .hero-side :is(.row,.hero-row){border-bottom-style:solid}.hb-page .hero :is(.hero-meta,.hero-pills){margin-bottom:20px;gap:8px}.hb-page .hero .pill{padding:4px 9px;border:1px solid #34383e;border-radius:4px;color:#9fa6b0;background:transparent;font-size:10px;line-height:1.5;letter-spacing:.02em}.hb-page .hero .pill.fill{color:#d5d9df}.hb-page .hero .pill.accent{background:#20242a;color:#b9c3d4;border-color:#34383e}.hb-page .em,.hb-page .section-title em,.hb-page .sec-title em{font-family:var(--hb-font)!important;font-style:normal!important;font-weight:inherit!important;color:#acb2bd}.hb-page :is(.section-title,.sec-title){font-family:var(--hb-font)!important;font-weight:450!important;font-size:30px;line-height:1.5;letter-spacing:-.025em}.hb-page :is(.section-title,.sec-title) br{display:none}.hb-page .section-head{margin-bottom:28px}.hb-page :is(.section-desc,.sec-desc){font-size:14px;line-height:1.9;color:#a8aeb8}.hb-page.hb-book #hb-main>section:not(.hero){padding-block:55px}.hb-page .section-eyebrow,.hb-page .sec-eyebrow,.hb-page .eyebrow,.hb-page .kick{font-size:10px;letter-spacing:.1em;color:#838b98}.hb-page :is(.detail-title,.cap-name,.scene-name,.mod-title,.comp-name,.recap-title){font-family:var(--hb-font)!important;font-weight:500!important}.hb-page .cap-icon{font-size:19px;filter:grayscale(1);opacity:.8}.hb-page :is(.cap-card,.detail-card,.mod,.usecard,.comp-card,.scene-card,.power-card,.recap-card){border-radius:6px;box-shadow:none!important}.hb-page :is(.cap-card,.mod,.scene-card):hover{transform:translateY(-2px);border-color:#6c737f}.hb-page .cap-card:before{display:none}.hb-page :is(.mod-letter,.stat .num,.hero-stat .num,.detail-no,.usecard .u-n){font-family:var(--hb-font)!important;font-style:normal;font-weight:400}.hb-page :is(.stats,.journey,.component-catalog){border-radius:6px;box-shadow:none}.hb-page .jbase{border-style:solid;border-color:#323942;background:#161a20}.hb-page .creed{display:flex;flex-wrap:wrap;gap:6px;border-radius:5px;background:#171c23;border-color:#353c49;color:#b2bbcc;font-size:12px}.hb-page :is(.entry-overview,.selector-section,.knowledge-section,.checklist-section,.practice-section,.md-overview,.md-selector,.md-matrix-section,.md-checklist,.md-practice){max-width:1000px;width:calc(100% - 64px);border-radius:6px;box-shadow:none!important}.hb-page :is(.entry-overview,.md-overview){margin-top:32px}.hb-page .layout{max-width:1064px;margin-inline:auto;padding-inline:32px;grid-template-columns:minmax(0,1fr) 320px;gap:20px}.hb-page .layout>.card.info{grid-column:1/-1}.hb-page :is(.overview-head,.md-overview-head){grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.hb-page :is(.entry-overview,.md-overview,.selector-section,.md-selector,.knowledge-section,.md-matrix-section) h2{font-family:var(--hb-font)!important;font-size:23px;font-weight:450;line-height:1.55}.hb-page :is(.entry-overview,.md-overview,.selector-section,.md-selector,.knowledge-section,.md-matrix-section) h2 em{font-family:inherit;font-style:normal;white-space:normal}.hb-page :is(.formula,.md-formula){border-color:#3b4553;background:#1b212b}.hb-page :is(.card,.workspace){border-radius:6px;box-shadow:none}.hb-page :is(.entry.active,.entry.on){background:#262d38}.hb-page .entry .play{color:#cad3e4}.hb-page .modfoot{max-width:1064px;margin:0 auto;border-top:1px solid #292e35}.hb-page .modfoot .in{display:flex;flex-wrap:wrap;gap:12px;padding:28px 32px}.hb-page .mf-link{border-radius:5px}.hb-page .catalog-return{z-index:110}.hb-page .fade-up{opacity:1!important;transform:none!important}
/* Product simulations keep a readable, independent canvas inside the dark reading frame. */
.hb-page :is(.workspace,.comp-demo){color-scheme:light;--bg:#f4f5f7;--bg-2:#e8ebf0;--bg-3:#fff;--paper:#fff;--ink:#242933;--ink-soft:#555e6d;--ink-mute:#757f8d;--line:#d6dbe3;--line-soft:#e5e8ee;--accent:#415ea0;--accent-soft:#e7ecf7;--blue:#415ea0;--blue-soft:#e7ecf7;--green:#42755b;--green-soft:#e4f0e9;--yellow:#a37520;--yellow-soft:#fff3d0;color:var(--ink);background:var(--paper)}.hb-page .workspace button,.hb-page .comp-demo button{color:var(--ink)}.hb-page .workspace{border:1px solid #4c5360}.hb-page :is(.workspace,.comp-demo) :is(.cbtn,.send-btn){color:var(--ink)}
.hb-next{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:28px 0;border-top:1px solid #2c3036;margin-top:35px}.hb-next>div{display:flex;flex-direction:column;gap:10px}.hb-next span{font-size:10px;letter-spacing:.06em;color:#8d949e}.hb-next a{font-size:13px;color:#ccd2dc}.hb-next>div a{font-size:18px}.hb-page .hb-footer{padding:40px 0 24px;margin-top:64px;border-top:1px solid #292d33;background:#08090a}.hb-footer-brand{font:500 18px var(--hb-font)}.hb-footer p{color:#939aa4;font-size:12px;margin:12px 0 20px}.hb-footer .hb-width>div{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#c7ccd4}.hb-footer button{background:none;border:0;padding:0;color:inherit;font:inherit}.hb-footer small{display:block;border-top:1px solid #22262c;margin-top:30px;padding-top:19px;font-size:10px;color:#7c8490}
/* Collection: an editorial directory with three learning paths. */
.hb-collection h1,.hb-collection h2,.hb-collection h3,.hb-collection p{margin:0}.hb-collection-hero{padding:58px 0 0}.hb-kicker{font-size:10px;letter-spacing:.16em;color:#8e96a3}.hb-collection-hero>div{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:27px}.hb-collection-hero h1{font-size:50px;font-weight:450;line-height:1.3;letter-spacing:-.045em}.hb-collection-hero h1 span{color:#8c919a}.hb-collection-hero>div p{font-size:14px;line-height:1.9;color:#a4abb7;padding-bottom:6px;max-width:355px}.hb-paths{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2e333b;border-bottom:1px solid #2e333b;gap:32px;margin-top:44px}.hb-paths a{font-size:12px;color:#b4bbc6;display:flex;justify-content:space-between;gap:14px;padding:19px 0}.hb-paths a:hover{color:white}.hb-paths span{color:#6c7583}.hb-page #hb-main>.hb-collection-section{padding:46px 0 0;scroll-margin-top:82px}.hb-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.hb-group-head span{font-size:9px;letter-spacing:.12em;color:#7e8795}.hb-group-head h2{font-size:25px;font-weight:450;letter-spacing:-.03em;margin:10px 0}.hb-group-head p{font-size:12px;color:#9099a7}.hb-group-head small{font-size:11px;color:#747e8c;white-space:nowrap}.hb-book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hb-book-card{display:flex;flex-direction:column;min-width:0;min-height:295px;background:#111315;border:1px solid #292d33;border-radius:6px;padding:25px;transition:border-color .2s,background .2s}.hb-book-card:hover{border-color:#697180;background:#171a1e}.hb-card-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#929aa8}.hb-card-meta>span:last-child{color:#6f7885;font-size:9px;letter-spacing:.08em}.hb-card-mark{font-size:30px;font-weight:400;letter-spacing:-.04em;color:#c0c7d3;margin:21px 0 17px;line-height:1}.hb-book-card h3{font-size:21px;line-height:1.5;font-weight:450;letter-spacing:-.025em}.hb-book-card p{font-size:12px;color:#979fac;line-height:1.9;margin-top:12px;max-width:380px}.hb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #282d34;margin-top:24px;padding-top:17px;font-size:10px;color:#9ca6b4}.hb-card-foot>span:last-child{font-size:17px;color:#d0d7e2}.hb-featured{grid-template-columns:1fr}.hb-featured .hb-book-card{min-height:0;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:35px;align-items:center}.hb-featured .hb-card-meta{grid-column:1/-1;margin-bottom:23px}.hb-featured .hb-card-mark{grid-row:2/4;font-size:43px;line-height:1.6;margin:0;border-right:1px solid #343a43}.hb-featured .hb-card-foot{grid-column:1/-1}.hb-featured p{max-width:600px}.hb-reading-tip{border-top:1px solid #292f37;margin-top:48px;padding-top:26px}.hb-reading-tip h2{font-size:18px;font-weight:450}.hb-reading-tip p{font-size:12px;color:#949dac;line-height:1.9;margin-top:13px;max-width:730px}
@media(max-width:1000px){.hb-site-header .desktop-nav{gap:14px;font-size:13px}.hb-site-header .header-inner{gap:15px}.hb-page .hero-grid{gap:25px}.hb-chapters>.hb-width{gap:12px}.hb-chapter-label{display:none}.hb-page .layout{grid-template-columns:minmax(0,1fr)}.hb-page .side{height:auto}.hb-page .side>.card{min-height:0}.hb-page :is(.overview-head,.md-overview-head){grid-template-columns:1fr}}
@media(max-width:809px){.hb-site-header .desktop-nav{display:none}.hb-site-header .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;border:0;background:transparent;padding:6px}.hb-site-header .menu-toggle span{display:block;height:1px;width:20px;background:#c1c6cd}.hb-site-header .header-contact{margin-left:auto}.hb-site-header .mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:5px;position:absolute;left:0;right:0;top:65px;max-height:calc(100dvh - 65px);overflow:auto;padding:18px 24px 24px;background:#0c0e11;border-bottom:1px solid #30343c}.hb-site-header .mobile-nav>a{padding:10px 0;font-size:14px}.hb-site-header .mobile-nav>.button{align-self:flex-start;margin-top:12px}.hb-site-header .resource-mobile{font-size:14px}.hb-site-header .resource-mobile summary{padding:10px 0}.hb-site-header .resource-mobile div a{font-size:13px;color:#a3abb8}}
@media(max-width:700px){.hb-width,.hb-page .wrap,.hb-site-header .header-inner,.hb-page header.top{width:calc(100% - 40px)}.hb-page .hb-breadcrumb{padding-top:20px;gap:8px;font-size:10px}.hb-page .hero,.hb-page header.top{padding:30px 0!important}.hb-page .hero h1,.hb-page header.top h1{font-size:32px!important;margin:15px 0 19px!important}.hb-page .hero-grid{grid-template-columns:1fr;gap:22px}.hb-page .hero-side{border-left:0;border-top:1px solid #30343b;padding:10px 0 0}.hb-page .hero :is(.lede,.hero-lede){font-size:14px}.hb-page :is(.section-title,.sec-title){font-size:25px;line-height:1.5}.hb-page.hb-book #hb-main>section:not(.hero){padding-block:36px}.hb-chapters>.hb-width{width:calc(100% - 24px);min-height:49px}.hb-chapters a{font-size:11px!important;padding-inline:9px!important}.hb-page .layout{padding:20px;gap:16px}.hb-page :is(.entry-overview,.selector-section,.knowledge-section,.checklist-section,.practice-section,.md-overview,.md-selector,.md-matrix-section,.md-checklist,.md-practice){width:calc(100% - 40px);margin-left:20px;margin-right:20px}.hb-page :is(.entry-overview,.md-overview){margin-top:22px}.hb-page :is(.entry-overview,.md-overview,.selector-section,.md-selector,.knowledge-section,.md-matrix-section) h2{font-size:20px}.hb-page .info-below{padding-inline:20px}.hb-page .modfoot .in{padding:22px 20px}.hb-next{align-items:flex-start;flex-direction:column}.hb-page .hb-footer{margin-top:45px}.hb-collection-hero{padding-top:36px}.hb-collection-hero>div{display:block;margin-top:20px}.hb-collection-hero h1{font-size:37px}.hb-collection-hero>div p{margin-top:22px;font-size:13px}.hb-paths{gap:12px;margin-top:30px}.hb-paths a{font-size:10px;gap:4px;padding:15px 0}.hb-book-grid{grid-template-columns:1fr}.hb-book-card{min-height:0;padding:23px}.hb-group-head{align-items:flex-start}.hb-group-head h2{font-size:23px}.hb-group-head p{font-size:11px}.hb-group-head small{padding-top:8px}.hb-page #hb-main>.hb-collection-section{padding-top:35px}.hb-featured .hb-book-card{display:flex;align-items:stretch}.hb-featured .hb-card-meta{margin-bottom:0}.hb-featured .hb-card-mark{font-size:32px;border:0;margin:21px 0 17px;line-height:1}.hb-book-card h3{font-size:20px}.hb-page .hb-footer small{line-height:1.8}.hb-page .md-recipes{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.hb-page *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.hb-site-header .resource-nav-trigger{border:0;box-shadow:none}.hb-site-header .desktop-nav{height:100%}.hb-page .hero-side :is(.row,.hero-row){border-bottom:1px solid #30343a}.hb-page .hero-side :is(.row,.hero-row):last-child{border-bottom:0}
.hb-module-picker{display:none}.hb-page .s1-chip.active{color:#f2f4f7}
@media(max-width:700px){.hb-page .s1-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hb-page .s1-chip{min-width:0;padding:12px 8px}.hb-page .s1-chip .label{overflow-wrap:anywhere}.hb-module-picker{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;font-size:11px;color:#9da6b4}.hb-module-picker select{background:#1a1e24;border:1px solid #353c48;border-radius:5px;color:#d4dae4;padding:7px 10px;min-width:0;max-width:75%;font:12px var(--hb-font)}.hb-chapters nav.hb-module-nav{display:none!important}}
@media(max-width:700px){.hb-page .power-grid{grid-template-columns:minmax(0,1fr)}.hb-page .power-card{min-width:0}.hb-page .s4-q{flex-wrap:wrap}.hb-page .s4-q .qbtns{margin-left:auto;max-width:100%}.hb-page .power-ba{grid-template-columns:1fr}.hb-page .power-card :is(.mini-table,.power-demo){max-width:100%;overflow-x:auto}}

.hb-chapters #navTabs{display:none!important}.hb-page .hero-stat .num{color:#e0e4eb}.hb-page .component-catalog{margin-top:28px}.hb-page .catalog-head h2{font-family:var(--hb-font);font-weight:450}.hb-page .catalog-layer.active{background:#29303b;color:#ecf0f7}