.article-main{max-width:1060px;padding-top:36px;padding-bottom:60px}.article-main .back-link{font-size:14px;color:#637287}.article-head{padding:30px 0 24px;max-width:810px}.article-head h1{font-size:clamp(32px,4.5vw,49px);line-height:1.13;letter-spacing:-1.7px;margin:14px 0 20px}.article-meta{font-size:13px;color:#637287}.answer{font-size:19px;line-height:1.65;max-width:760px;color:#35465e}.article-body{max-width:840px}.article-body h2{font-size:27px;line-height:1.25;margin:40px 0 16px;letter-spacing:-.65px}.article-body h3{font-size:19px;margin:26px 0 10px}.article-body p,.article-body li{font-size:17px;line-height:1.8;color:#45556d}.article-body p{margin:15px 0}.article-body ul,.article-body ol{padding-left:25px}.article-body a{color:#235a96;text-underline-offset:4px;overflow-wrap:anywhere}.article-body strong{color:#202a39}.lab-callout{border-left:4px solid #de754e;padding:6px 22px;background:#fff5ed;border-radius:0 9px 9px 0;margin:25px 0}.sample-links{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.sample-links a{font-size:14px;border:1px solid #ccd5df;padding:9px 13px;border-radius:6px;background:white}.article-body figure{margin:28px 0}.article-body figure>img{display:block;width:100%;height:auto;border:1px solid #e1e6ec;border-radius:10px}.article-body figcaption{font-size:13px;color:#66768a;margin-top:10px;line-height:1.6}.table-wrap{overflow:auto;margin:20px 0;border:1px solid #dce3eb;border-radius:9px;background:white}.article-body table{border-collapse:collapse;width:100%;min-width:570px;text-align:left;font-size:14px}.article-body th,.article-body td{padding:13px;border-bottom:1px solid #e5e9ee;white-space:nowrap}.article-body th{background:#edf2f7;font-size:12px}.article-body code{font-size:.88em}.article-body tr:last-child td{border-bottom:0}.article-body .fine{font-size:14px}.article-body details{padding:15px 0;border-bottom:1px solid #dde4ec}.article-body summary{cursor:pointer;font-size:17px;font-weight:600}.guide-card{display:block;max-width:840px;background:white;border:1px solid #dce3eb;border-radius:12px;padding:28px;text-decoration:none}.guide-card h2{font-size:25px;margin:12px 0}.guide-card p{color:#617186;line-height:1.7}.guide-card:hover{border-color:#de754e}.lab-video{width:100%;border-radius:12px;background:#202a39}.sources{font-size:14px;line-height:1.8;color:#617186;border-top:1px solid #dce3eb;margin-top:30px;padding-top:20px}.sources li{font-size:14px}.article-body .button{color:white}
@media(max-width:740px){.article-main{padding-top:24px}.article-head{padding-top:22px}.article-head h1{letter-spacing:-1px}.answer{font-size:17px}.article-body h2{font-size:24px;margin-top:32px}.article-body p,.article-body li{font-size:16px;line-height:1.8}.lab-callout{padding:5px 15px}.article-body table{font-size:13px}.article-body th,.article-body td{padding:10px}.guide-card{padding:22px}.article-body figcaption{font-size:12px}}
@media(max-width:740px){.site-header{gap:12px}.header-nav{gap:12px}.header-nav>a{font-size:12px}}

/* DAY 2: readable case studies and live component */
.article-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 30px}.article-jumps a{font-size:14px;padding:9px 13px;border:1px solid #dce3eb;border-radius:24px;text-decoration:none;background:white}.article-body section[id]{scroll-margin-top:25px}.guide-card+.guide-card{margin-top:20px}.code-block{overflow:auto;max-width:100%;padding:22px;border:1px solid #dce3eb;border-radius:12px;background:#eef3f6;line-height:1.7}.logo-demo{padding:32px;border:1px solid #dce3eb;border-radius:16px;margin:24px 0;overflow:hidden}.demo-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.demo-brand img{width:96px;height:60px;object-fit:contain}.demo-brand strong{color:var(--ink);font-size:20px}.logo-demo .demo-kicker{font-size:12px;letter-spacing:1.8px;font-weight:700;margin-top:30px}.logo-demo h3{font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-1px;margin:12px 0;color:var(--ink)}.logo-demo .demo-copy{color:var(--ink);max-width:470px;font-size:16px;line-height:1.7}.logo-demo .demo-action{display:inline-block;padding:14px 20px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;margin-top:12px}.article-head .sample-links{margin-top:18px}.article-head .button.primary{color:white}.guide-card:focus-visible{outline:3px solid #235a96;outline-offset:4px}
@media(max-width:740px){.logo-demo{padding:22px 18px}.demo-brand{gap:10px}.demo-brand strong{font-size:18px}.article-jumps{gap:8px}.article-jumps a{font-size:13px}.code-block{padding:16px;font-size:13px}.table-wrap{overscroll-behavior-x:contain}}
.article-head .sample-links .button.primary{display:inline-flex;align-items:center;background:#202a39;border-color:#202a39;color:#fff;text-decoration:none}