/* Accessible controls and learning resources, using the existing brand palette. */
.io-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.io-editorial-sharing.io-share-icons{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
.io-share-icons .io-share-control{width:44px;height:44px;min-width:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #b9cce0;border-radius:50%;background:#f8fbfe;color:#173b5d;cursor:pointer;box-sizing:border-box;text-decoration:none}
.io-share-icons .io-share-control:hover{background:#e6f1fd;border-color:#176fcc;color:#176fcc}.io-share-control:focus-visible,.io-password-toggle:focus-visible{outline:3px solid #176fcc;outline-offset:3px}
.io-share-control svg{width:21px;height:21px;flex-shrink:0}.io-share-control .io-copied-icon{display:none}.io-share-control.is-copied .io-copy-icon{display:none}.io-share-control.is-copied .io-copied-icon{display:block}.io-share-control.is-copied{color:#14613e;background:#eaf7ef}.io-share-status:not(.io-visually-hidden){flex-basis:100%;overflow-wrap:anywhere;font-size:13px}
.io-password-field{display:flex;gap:8px;align-items:center}.io-password-field input{min-width:0;flex:1}.io-password-toggle{font:inherit;padding:10px 12px;border:1px solid #b9cce0;border-radius:8px;color:#173b5d;background:#f8fbfe;cursor:pointer}.io-password-toggle[hidden]{display:none}
.io-start-banner{background:#edf5ff;border-bottom:1px solid #d6e4f2;padding:34px 0}.io-start-banner>.container{display:flex;justify-content:space-between;align-items:center;gap:24px}.io-start-banner h2{font-size:30px;margin:8px 0}.io-start-banner p{margin:8px 0}.io-start-banner .btn{white-space:nowrap}
.io-learning-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:64px;align-items:start;padding-top:48px;padding-bottom:60px}.io-learning-nav{position:sticky;top:110px}.io-learning-nav h2{font-size:21px;margin:0 0 18px}.io-learning-nav ol{padding-left:21px}.io-learning-nav li{font-size:14px;line-height:1.55;margin:12px 0}.io-learning-nav a{color:#365673}.io-learning-nav a:hover{color:#176fcc}.io-learning-progress{margin-top:26px;padding-top:20px;border-top:1px solid #c6d8e9}.io-learning-progress progress{width:100%;height:8px;accent-color:#176fcc}.io-learning-progress button{font:inherit;border:0;background:none;cursor:pointer;padding:0;text-decoration:underline}.io-lesson{scroll-margin-top:110px;padding:0 0 42px;margin-bottom:38px;border-bottom:1px solid #c6d8e9}.io-lesson h2{font-size:clamp(25px,2.4vw,34px);line-height:1.25;margin:10px 0 18px}.io-lesson p{line-height:1.8}.io-lesson-exercise{border-left:3px solid #4da3ff;background:#f0f6fe;padding:18px 22px;margin:22px 0}.io-lesson-exercise h3{font-size:15px;margin:0 0 7px}.io-lesson-exercise p{font-size:15px;margin:0}.io-lesson-complete{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px;cursor:pointer}.io-lesson-complete[hidden],.io-learning-progress[hidden]{display:none}.io-lesson-complete input{width:20px;height:20px;accent-color:#176fcc}
.io-blueprint-guide{padding:30px;border:1px solid #c6d8e9;border-radius:16px;background:#f4f8fd}.io-blueprint-guide .btn{margin:12px 16px 12px 0}.io-blueprint-status{font-size:15px;border-left:3px solid #4da3ff;padding:16px 20px;background:#f0f6fe}.io-architecture-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0}.io-architecture-flow>div{padding:14px 16px;border:1px solid #a9c3df;border-radius:8px;background:#edf5ff;font-size:15px;font-weight:700}.io-architecture-flow span{display:block;font-size:12px;font-weight:400;margin-top:5px}.io-blueprint-sections{max-height:55vh;overflow:auto;padding-right:8px}.io-blueprint-sections a{display:block;margin:8px 0}.io-blueprint-editorial pre{max-width:100%;overflow:auto}
@media(max-width:900px){.io-learning-layout{grid-template-columns:1fr;gap:34px;padding-top:30px}.io-learning-nav{position:static}.io-learning-nav ol{columns:2;column-gap:30px}.io-learning-nav li{break-inside:avoid}.io-start-banner>.container{align-items:flex-start;flex-direction:column}.io-blueprint-sections{max-height:none}}
@media(max-width:600px){.io-learning-nav ol{columns:1}.io-learning-layout{padding-bottom:30px}.io-lesson{scroll-margin-top:90px}.io-architecture-flow{flex-direction:column;align-items:stretch}.io-architecture-flow>b{transform:rotate(90deg);text-align:center}.io-blueprint-guide{padding:22px}.io-blueprint-guide .btn{white-space:normal}.io-start-banner h2{font-size:26px}}
.io-signup-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:64px;row-gap:24px;align-items:start}.io-signup-intro{grid-column:1;grid-row:1}.io-signup-intro h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.04em;line-height:1.1;margin:16px 0 24px}.io-signup-intro .lead{font-size:18px;line-height:1.8}.io-signup-form{grid-column:2;grid-row:1/span 2}.io-signup-benefits{grid-column:1;grid-row:2;align-self:start}.io-signup-benefits h2{font-size:24px}.io-signup-benefits li{margin:15px 0;line-height:1.7}.io-signup-form .card>h2{font-size:26px}.io-signup-form .support-text{font-size:14px;line-height:1.65}.io-signup-form .consent-option{font-size:13px;line-height:1.6}.io-signup-form .admin-form>.btn{width:100%;margin-top:12px}.io-signup-form small{font-size:12px}
@media(max-width:800px){.io-signup-layout{display:flex;flex-direction:column;gap:28px}.io-signup-form{width:100%}.io-join-simple>.section{padding:32px 0}.io-signup-intro h1{font-size:40px}.io-signup-intro .lead{font-size:16px}.io-signup-benefits{padding-top:10px}}

.io-blueprint-nav{margin:22px 0;padding:12px 0;border-top:1px solid #c6d8e9;border-bottom:1px solid #c6d8e9}.io-blueprint-nav summary{font-size:14px;font-weight:700;cursor:pointer}.io-blueprint-nav summary:focus-visible{outline:2px solid #176fcc;outline-offset:4px}.io-blueprint-nav .io-blueprint-sections{border:0;margin-bottom:0}@media(max-width:900px){.io-blueprint-nav .io-blueprint-sections{max-height:45vh}}

/* Longer hero headline: keep the copy balanced with the inference illustration. */
.io-refined .ih-hero h1{font-size:clamp(36px,3vw,48px);line-height:1.14;letter-spacing:-.04em;margin-bottom:24px;text-wrap:balance}
@media(max-width:600px){.io-refined .ih-hero h1{font-size:clamp(28px,8vw,34px);line-height:1.16;margin-bottom:22px}}

/* Database-backed community snapshot beneath the participation invitation. */
.io-community-stats{padding:18px 0 14px;background:#fff;border-bottom:1px solid #d6e4f2}.io-community-stats .io-kicker{margin:0 0 12px;font-size:10px;letter-spacing:.12em}.io-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.io-stat{display:flex;flex-direction:row;align-items:center;gap:10px;padding:2px 20px 2px 0;border-right:1px solid #dce7f1;text-decoration:none;color:#173b5d}.io-stat:last-child{border:0}.io-stat strong{font-size:30px;line-height:1.1;letter-spacing:-.04em;color:#176fcc;font-variant-numeric:tabular-nums}.io-stat span{font-size:12px;font-weight:600}.io-stat:hover span{text-decoration:underline}.io-stat:focus-visible{outline:2px solid #176fcc;outline-offset:5px}.io-stats-source{font-size:11px!important;line-height:1.5;color:#506b83;margin:12px 0 0!important;max-width:100ch}@media(max-width:700px){.io-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.io-stat{padding-right:12px;gap:8px}.io-stat:nth-child(2n){border:0}.io-stat strong{font-size:26px}.io-stat span{font-size:12px}}

/* Public member profiles mirrored from the production About page. */
.io-member-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px}.io-member-grid.io-featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.io-person.card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;min-width:0}.io-person .member-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:18px}.io-person .tag{font-size:11px;margin-bottom:14px}.io-person h3{font-size:21px;line-height:1.3;margin:0 0 12px;overflow-wrap:anywhere}.io-person p{font-size:14px;line-height:1.7;margin:0 0 14px}.io-person .post-author-line{font-size:12px;font-weight:600;color:#365673}.io-person .author-actions{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:auto;padding-top:10px}.io-community-pages .io-person .text-link{margin:0;font-size:13px}.io-people-section .section-copy{max-width:75ch}@media(max-width:1100px){.io-member-grid,.io-member-grid.io-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.io-member-grid,.io-member-grid.io-featured-grid{grid-template-columns:1fr}.io-person.card{padding:24px}.io-person h3{font-size:23px}}

/* Slim community statistics strip, with optional count methodology. */
.io-community-stats{padding:12px 0 10px}.io-community-stats>.container{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 22px;align-items:center}.io-community-stats .io-kicker{margin:0;font-size:10px;line-height:1.5;max-width:130px}.io-stats-grid{gap:16px}.io-stat{gap:8px;padding:0 16px 0 0}.io-stat strong{font-size:27px}.io-stat span{font-size:12px;line-height:1.4}.io-stats-details{grid-column:2;font-size:10px;color:#506b83}.io-stats-details summary{cursor:pointer;width:fit-content;line-height:1.5}.io-stats-details summary:focus-visible{outline:2px solid #176fcc;outline-offset:3px}.io-stats-details .io-stats-source{margin:6px 0 0!important;max-width:none;font-size:10px!important}
@media(max-width:900px){.io-community-stats>.container{grid-template-columns:1fr;gap:8px}.io-community-stats .io-kicker{max-width:none}.io-stats-details{grid-column:1}.io-stats-grid{gap:10px 16px}.io-stat strong{font-size:25px}}

/* Refined Community at a Glance band. */
.io-community-stats{padding:22px 0 20px;background:linear-gradient(105deg,#f5f9fe 0%,#fff 52%,#f1f7ff 100%);border-top:1px solid #d8e5f1;border-bottom:1px solid #d8e5f1}.io-community-stats>.container{display:block}.io-community-stats .io-kicker{margin:0 0 16px;font-size:11px;line-height:1.4;letter-spacing:.16em;color:#176fcc;max-width:none}.io-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.io-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 24px;border-right:1px solid #d6e3ef;color:#173b5d}.io-stat:first-child{padding-left:0}.io-stat:last-child{border-right:0;padding-right:0}.io-stat strong{font-size:30px;line-height:1;letter-spacing:-.04em;color:#176fcc}.io-stat span{font-size:12px;line-height:1.45;font-weight:600;color:#365673}.io-stats-details{display:none}
@media(max-width:700px){.io-community-stats{padding:18px 0}.io-community-stats .io-kicker{margin-bottom:13px;font-size:10px}.io-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}.io-stat{padding:0 16px;border-right:1px solid #d6e3ef}.io-stat:nth-child(2n){border-right:0;padding-right:0}.io-stat:nth-child(2n+1){padding-left:0}.io-stat strong{font-size:27px}.io-stat span{font-size:11px}}

/* Visible flowing light, with content on its own readable layer. */
.io-community-stats{position:relative;isolation:isolate;overflow:hidden;background:#edf5ff}
.io-community-stats>.container{position:relative;z-index:1}
.io-community-stats::before,.io-community-stats::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:0;filter:none;opacity:1}
.io-community-stats::before{inset:-60% -40%;background:radial-gradient(ellipse at 30% 50%,#86c5ff 0%,transparent 38%),radial-gradient(ellipse at 75% 45%,#b4c9ff 0%,transparent 38%);animation:io-glance-flow 12s ease-in-out infinite alternate;opacity:.28}
.io-community-stats::after{inset:0;background:repeating-linear-gradient(115deg,transparent 0 110px,rgba(255,255,255,.8) 111px 113px,transparent 114px 240px);background-size:265px 100%;animation:io-glance-trails 14s linear infinite;opacity:.12}
.io-community-stats .io-stat strong{color:#12569a}.io-community-stats .io-stat span{color:#234661}
@keyframes io-glance-flow{from{transform:translate3d(-12%,0,0) scale(1)}to{transform:translate3d(12%,8%,0) scale(1.15)}}
@keyframes io-glance-trails{from{background-position:0 0}to{background-position:265px 0}}
@media(prefers-reduced-motion:reduce){.io-community-stats::before,.io-community-stats::after{animation:none}}

/* Compact stats ribbon beneath the hero. */
.io-community-stats{padding:18px 0}
.io-community-stats>.container{display:grid;grid-template-columns:155px minmax(0,1fr);align-items:center;gap:24px}
.io-community-stats .io-kicker{margin:0;font-size:10px;letter-spacing:.1em;line-height:1.6;max-width:145px}
.io-community-stats .io-stats-grid{gap:0}
.io-community-stats .io-stat{flex-direction:row;align-items:center;gap:9px;padding:2px 18px}
.io-community-stats .io-stat:first-child{padding-left:0}
.io-community-stats .io-stat:last-child{padding-right:0}
.io-community-stats .io-stat strong{font-size:27px;line-height:1.1}
.io-community-stats .io-stat span{font-size:12px;line-height:1.4;font-weight:500}
@media(max-width:1000px){.io-community-stats>.container{grid-template-columns:1fr;gap:12px}.io-community-stats .io-kicker{max-width:none}.io-community-stats .io-stat{padding:2px 14px}}
@media(max-width:700px){.io-community-stats{padding:14px 0}.io-community-stats>.container{gap:10px}.io-community-stats .io-stats-grid{gap:12px 0}.io-community-stats .io-stat:nth-child(2n+1){padding-left:0}.io-community-stats .io-stat:nth-child(2n){padding-right:0}.io-community-stats .io-stat strong{font-size:25px}.io-community-stats .io-stat span{font-size:11px}}

/* Give the single-word Community prompt a clear visual anchor. */
/* Connected SVG geometry keeps nodes and lines aligned at every viewport. */
.io-connected-framework{background:linear-gradient(120deg,#f2f7fd,#fff);border-block:1px solid #dce8f3}
.io-framework-map-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.io-framework-map-copy h2{font-size:clamp(27px,3vw,36px);line-height:1.2;margin:12px 0 18px}
.io-framework-map-copy p{font-size:15px;line-height:1.7}
.io-framework-examples{list-style:none;padding:0;margin:24px 0}
.io-framework-examples li{border-left:2px solid #8bbdeb;padding:0 0 0 14px;margin:18px 0}
.io-framework-examples strong,.io-framework-examples span{display:block}
.io-framework-examples strong{font-size:14px;color:#175d99;margin-bottom:5px}
.io-framework-examples span{font-size:13px;line-height:1.65;color:#426079}
.io-framework-map-hint{font-size:12px!important;color:#506b83}
.io-framework-network svg{display:block;width:100%;height:auto;overflow:visible}
.io-network-wires{stroke:#aac7e2;stroke-width:1.5}
.io-network-signals{stroke:#2187d8;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 92}
.io-network-signals path{animation:io-network-feedback 5s ease-in-out infinite alternate}
.io-network-signals .io-network-orbit{stroke-width:2;stroke-dasharray:4 21;animation:io-network-orbit 18s linear infinite}
.io-network-center circle{fill:#e3f0fd;stroke:#a9cdec;stroke-width:1.5}
.io-network-center text{fill:#174c7b;font-size:22px;font-weight:700}
.io-network-node rect{fill:#fff;stroke:#9cbfdf;stroke-width:1.5;transition:fill .2s,stroke .2s}
.io-network-node text{fill:#183f60;font-size:22px;font-weight:650}
.io-network-node:hover rect,.io-network-node:focus rect{fill:#e7f3ff;stroke:#176fcc;stroke-width:3}
.io-framework-dimension{scroll-margin-top:90px}
@keyframes io-network-feedback{from{stroke-dashoffset:0}to{stroke-dashoffset:-92}}
@keyframes io-network-orbit{to{stroke-dashoffset:-100}}
@media(max-width:900px){.io-framework-map-layout{grid-template-columns:1fr;gap:15px}.io-framework-network{width:100%;max-width:650px;justify-self:center}}
@media(prefers-reduced-motion:reduce){.io-network-signals path,.io-network-signals .io-network-orbit{animation:none}}
.io-community-stats .io-kicker{font-size:12px;letter-spacing:.12em;font-weight:700;color:#145d9f;line-height:1.3}
@media(max-width:1000px){.io-community-stats .io-kicker{font-size:11px}}

/* Framework network: restrained infrastructure cards and blue feedback signals. */
.io-framework-network{background:#f8fbfe;border:1px solid #dbe6f0;border-radius:18px;padding:18px 10px 8px;box-shadow:0 8px 32px #16375206}
.io-network-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px 12px;border-bottom:1px solid #e2ebf4;font:9px/1.5 'IBM Plex Mono',monospace;color:#52718c;letter-spacing:.06em}
.io-network-pause{font:inherit;color:#315e85;background:transparent;border:0;cursor:pointer;min-height:32px;padding:6px;letter-spacing:0}
.io-network-pause[hidden]{display:none}.io-network-pause:focus-visible{outline:2px solid #176fcc;outline-offset:3px}
.io-framework-network svg{background-image:radial-gradient(#bdd0e440 .7px,transparent .7px);background-size:20px 20px}
.io-framework-network .io-network-wires{stroke:#bccfe1;stroke-width:1.2}
.io-framework-network .io-network-signals{stroke:#348bd1;stroke-width:2.5;stroke-dasharray:5 95}
.io-framework-network .io-network-signals path{animation-duration:7s;animation-timing-function:linear;opacity:.8}
.io-framework-network .io-network-signals .io-network-orbit{stroke-width:2;stroke-dasharray:3 47;animation-duration:24s;opacity:.65}
.io-framework-network .io-network-center rect{fill:#122e49;stroke:#244a6a;stroke-width:1}
.io-framework-network .io-network-center text{fill:#fff;font-size:22px;font-weight:600;letter-spacing:-.5px}
.io-framework-network .io-network-center .io-core-caption{fill:#93bedf;font-size:9px;letter-spacing:1.4px;font-weight:500}
.io-core-accent{fill:none;stroke:#4ca4e7;stroke-width:2}
.io-framework-network .io-network-node rect{fill:#fff;stroke:#c5d7e7;stroke-width:1;filter:drop-shadow(0 3px 3px #12304b08)}
.io-framework-network .io-network-node text{font-size:19px;font-weight:600;fill:#193c5b}
.io-framework-network .io-network-node .io-dimension-caption{font-size:10px;font-weight:400;fill:#5a7288;letter-spacing:0}
.io-dimension-icon{fill:none;stroke:#237bc3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.io-framework-network .io-network-node:hover rect,.io-framework-network .io-network-node:focus rect{fill:#eef6ff;stroke:#176fcc;stroke-width:2}
.io-framework-network.io-motion-paused .io-network-signals path{animation-play-state:paused}
@media(max-width:600px){.io-framework-network{padding:12px 0 4px;border-radius:12px}.io-network-toolbar{font-size:8px;padding:0 10px 8px}.io-framework-network .io-dimension-caption{display:none}.io-framework-network .io-network-node text{font-size:23px}.io-framework-network .io-network-node .io-dimension-icon{display:none}.io-framework-network .io-network-node text:not(.io-dimension-caption){transform:translate(-9px,6px)}}
@media(prefers-reduced-motion:reduce){.io-framework-network .io-network-signals path{animation:none}.io-framework-network .io-network-node rect{transition:none}}

/* Living architecture grid: signals arrive at cards and briefly illuminate them. */
.io-architecture-grid .io-network-wires{stroke:#b4cde3;stroke-width:1.3}
.io-architecture-grid .io-grid-crosslink{stroke:#cbdceb}
.io-architecture-grid .io-network-signals path{animation:io-grid-signal 12s linear infinite;stroke:#2784cd;stroke-width:3;stroke-dasharray:7 110;opacity:0}
.io-architecture-grid .io-grid-card-face{animation:io-grid-arrival 12s ease-in-out infinite}
.io-architecture-grid .io-network-node:hover .io-grid-card-face,.io-architecture-grid .io-network-node:focus .io-grid-card-face{animation:none;fill:#eaf4ff;stroke:#176fcc;stroke-width:2}
.io-architecture-grid .io-grid-footnote{font-size:11px;line-height:1.6;color:#526c84;text-align:center;border-top:1px solid #e2ebf4;margin:0 12px;padding:12px 4px 6px}
.io-architecture-grid.io-motion-paused .io-grid-card-face{animation-play-state:paused}
@keyframes io-grid-signal{0%{stroke-dashoffset:8;opacity:0}2%{opacity:.9}18%{stroke-dashoffset:-100;opacity:.9}20%,100%{stroke-dashoffset:-110;opacity:0}}
@keyframes io-grid-arrival{0%,18%,100%{fill:#fff;stroke:#c5d7e7}3%,9%{fill:#eaf4ff;stroke:#559bd1}}
@media(max-width:600px){.io-architecture-grid .io-grid-footnote{font-size:10px;margin:0 8px;padding:10px 0}.io-architecture-grid .io-network-toolbar{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.io-architecture-grid .io-network-signals path,.io-architecture-grid .io-grid-card-face{animation:none}.io-architecture-grid .io-network-signals path{opacity:0}}

/* Start Here guide — production */
/* Start Here: readable lessons, a compact route map, and one consistent example. */
.sg-guide{color:#17334e;background:#fff}.sg-guide .sg-intro{padding:64px 0 42px;background:linear-gradient(115deg,#f1f7fe,#eaf3ff)}
.sg-guide .sg-intro h1{max-width:780px;font-size:clamp(36px,4.3vw,60px);line-height:1.1;letter-spacing:-.045em;margin:14px 0 22px;color:#142e48}
.sg-guide .sg-intro .lead{max-width:720px;font-size:18px;line-height:1.75;color:#4e6780}
.sg-intro-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:26px 0 34px}.sg-intro-actions>span{font-size:12px;color:#57748e}
.sg-roadmap{list-style:none!important;padding:0!important;margin:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid #bfd3e8}
.sg-roadmap li{padding:22px 0 0;margin:0!important}.sg-roadmap b{display:block;font:11px 'IBM Plex Mono',monospace;color:#236bad;margin-bottom:9px}.sg-roadmap strong{display:block;font-size:17px;line-height:1.4;color:#173b5e}.sg-roadmap span{display:block;font-size:13px;line-height:1.65;color:#53708c;margin-top:7px}
.sg-guide .io-learning-layout{grid-template-columns:240px minmax(0,760px);gap:60px}.sg-guide .io-learning-nav{max-height:calc(100vh - 140px);overflow:auto;padding:2px 8px 12px 0}.sg-guide .io-learning-nav li{font-size:13px;margin:10px 0}.sg-guide .io-learning-nav h2{font-size:18px}.sg-guide .io-learning-progress{font-size:13px}
.sg-running-example{padding:24px 28px;background:#f3f8fe;border:1px solid #d8e5f2;border-radius:10px;margin-bottom:46px}.sg-running-example h2{font-size:22px;line-height:1.35;margin:8px 0 12px;letter-spacing:-.025em}.sg-running-example p:last-child{font-size:15px;line-height:1.8;margin:0;color:#47637e}
.sg-guide .io-lesson{padding-bottom:34px;margin-bottom:38px}.sg-guide .io-lesson>p,.sg-guide .io-lesson li{font-size:16px;line-height:1.85;color:#3f5a73}.sg-guide .io-lesson h2{font-size:clamp(25px,2.4vw,33px);margin-bottom:10px}.sg-guide .io-lesson .eyebrow{font:11px/1.5 'IBM Plex Mono',monospace;color:#3374b0;letter-spacing:.08em}.sg-guide .io-lesson .sg-takeaway{font-size:18px;line-height:1.55;color:#284c6e;margin:0 0 24px;font-weight:500}.sg-guide .io-lesson strong{color:#203e5b}
.sg-steps{padding-left:22px}.sg-steps li{padding-left:5px;margin:9px 0}.sg-definitions{margin:22px 0}.sg-definitions>div{padding:13px 0;border-bottom:1px solid #e0e9f2}.sg-definitions dt{font-size:15px;font-weight:700;color:#254b6d}.sg-definitions dd{font-size:15px;line-height:1.75;margin:5px 0 0;color:#4d657e}
.sg-example{padding:18px 22px;background:#f7fafc;border:1px solid #dee8f2;border-radius:7px;margin:20px 0}.sg-example>strong{font-size:14px}.sg-example p{margin:8px 0 0;font-size:15px;color:#3f5a73}
.sg-guide .io-lesson-exercise{border-left-color:#2f80c9;border-radius:0 7px 7px 0}.sg-guide .io-lesson-exercise h3{font-size:15px;line-height:1.5}.sg-guide .io-lesson-exercise p{font-size:15px;line-height:1.75}
.sg-further{margin:20px 0;font-size:14px}.sg-further summary{cursor:pointer;color:#2269aa;font-weight:600;min-height:30px;padding:4px 0}.sg-further p{font-size:13px;line-height:1.7;margin:8px 0}.sg-guide .io-lesson-complete{width:fit-content;min-height:44px;margin-top:16px}
.sg-next h2{font-size:28px;line-height:1.25;letter-spacing:-.025em}.sg-next>p{font-size:16px;line-height:1.8;color:#47637e}.sg-next-links{display:grid;gap:12px;margin-top:22px}.sg-next-links>a{padding:18px 22px;border:1px solid #d2e2f1;border-radius:8px;display:block;background:#f8fbff}.sg-next-links strong{font-size:15px;color:#246eae}.sg-next-links span{display:block;font-size:13px;line-height:1.6;color:#506b83;margin-top:5px}.sg-reading{margin-top:38px;padding-top:24px;border-top:1px solid #d1dfec}.sg-reading h2{font-size:17px}.sg-reading p{font-size:13px;line-height:1.8;color:#58718a}
.sg-guide a:focus-visible,.sg-guide summary:focus-visible,.sg-guide input:focus-visible{outline:2px solid #176fcc;outline-offset:4px}
@media(max-width:900px){.sg-guide .io-learning-layout{grid-template-columns:1fr;gap:32px}.sg-guide .io-learning-nav{position:static;max-height:none;overflow:visible;padding:0}.sg-guide .io-learning-progress{max-width:420px}.sg-guide .sg-intro{padding-top:40px}}
@media(max-width:600px){.sg-guide .sg-intro{padding:32px 0}.sg-guide .sg-intro .lead{font-size:16px}.sg-roadmap{grid-template-columns:1fr;gap:15px}.sg-roadmap li{display:grid;grid-template-columns:52px 1fr;gap:2px 10px;padding-top:16px}.sg-roadmap b{grid-row:1/3;margin:3px 0}.sg-roadmap span{margin:0}.sg-roadmap strong{font-size:16px}.sg-intro-actions{gap:13px;margin:22px 0}.sg-running-example{padding:20px;margin-bottom:32px}.sg-running-example h2{font-size:21px}.sg-guide .io-lesson>p,.sg-guide .io-lesson li{font-size:15px}.sg-guide .io-lesson .sg-takeaway{font-size:17px}.sg-guide .io-lesson-exercise{padding:17px}.sg-next-links>a{padding:17px}}