/* Shared reading rhythm for the three complete case tutorials. */
body{line-height:1.85}
.site-header{height:80px}
.header-inner{max-width:1440px;padding-inline:56px}
.brand img{width:25px;height:30px}
.wordmark{font-size:29px;font-weight:600;letter-spacing:-1px}
.header-label{margin-left:14px;font-size:13px;padding-left:24px}
.header-link{font-size:13px}
.official-link{color:var(--web-surface);background:var(--web-ink);border-radius:7px;padding:8px 17px}
.official-link:hover{background:var(--web-brand);text-decoration:none}
.layout{max-width:1200px;grid-template-columns:minmax(0,760px) 224px;gap:72px;padding:52px 40px 80px}
.breadcrumb{margin-bottom:32px;font-size:13px}
.article-head{padding-bottom:28px}
.article-head h1{font-size:clamp(30px,3.25vw,44px);letter-spacing:-.045em;line-height:1.4;margin:14px 0 19px;font-weight:550}
.lede{font-size:16px;max-width:650px;line-height:1.85;color:var(--web-muted)}
.eyebrow{font-size:12px;letter-spacing:.08em}
.route-hint{font-size:13px;line-height:1.8;margin-top:21px}
.route-hint a{color:var(--web-brand);margin-left:5px}
.article-section{margin-top:58px}
.article-section h2{font-size:25px;line-height:1.5;margin-bottom:21px;letter-spacing:-.025em}
.article-section h3{font-size:18px}
.article-section>p{font-size:16px;line-height:1.9}
.section-number{font-size:14px;margin-right:12px}
.prompt{border-radius:10px;margin:26px 0}
.prompt-head{padding:15px 20px}
.prompt-head h3{font-size:15px;margin:0}
.prompt-body{font-size:15px;padding:23px 24px;line-height:1.9}
.prompt-foot{padding:10px 20px}
.expected{font-size:14px;margin:22px 0;color:var(--web-muted)}
.expected strong{font-size:13px;font-weight:500;margin-bottom:6px}
.product-shot{margin-block:28px}
.shot-image{border-radius:10px}
.shot-top{font-size:12px}
.shot-links{font-size:13px}
.toc{top:113px;margin-top:38px}
.toc-title{font-size:12px;letter-spacing:.04em}
.toc a{font-size:13px;line-height:1.75;padding-block:8px}
.toc .toc-home a{font-size:13px}
.toc small{display:none}
.source{margin-top:56px;color:var(--web-muted)}
.source p{font-size:13px}
.site-footer{max-width:1200px;font-size:12px}
.section-nav{margin-top:36px;padding-top:26px}
.section-nav a{font-size:15px}
.guide-checks label{font-size:15px}
.mobile-toc{border-radius:8px;border:1px solid var(--web-line);padding:0 17px}
.mobile-toc summary{font-size:14px;min-height:54px;display:flex;align-items:center;gap:8px}
.mobile-toc summary::after{content:"＋";margin-left:auto;color:var(--web-brand)}
.mobile-toc[open] summary::after{content:"−"}
.mobile-toc summary::-webkit-details-marker{display:none}
.mobile-toc a{font-size:13px}
@media(max-width:1060px){
  .header-inner{padding-inline:32px}
  .layout{max-width:850px;display:block;padding:38px 32px 64px}
  .article-head h1{font-size:37px}
}
@media(max-width:640px){
  .site-header{height:65px}
  .header-inner{padding-inline:22px}
  .brand img{width:22px;height:27px}
  .wordmark{font-size:24px}
  .header-link{font-size:12px}
  .layout{padding:27px 22px 48px}
  .breadcrumb{font-size:11px;margin-bottom:25px}
  .article-head{padding-bottom:23px}
  .article-head h1{font-size:31px;line-height:1.4}
  .lede{font-size:14px}
  .route-hint{font-size:12px}
  .article-section{margin-top:41px}
  .article-section h2{font-size:21px}
  .article-section>p{font-size:15px}
  .prompt-head{padding:12px 14px;align-items:flex-start}
  .prompt-head h3{font-size:14px;padding-top:7px}
  .prompt-body{padding:17px;font-size:14px}
  .prompt-foot{padding-inline:14px}
  .prompt-foot>span:first-child{display:none}
  .expected{font-size:13px}
  .shot-top{display:block}
  .shot-top span+span{margin-left:10px}
  .shot-links{gap:12px;font-size:12px}
  .guide-checks label{font-size:14px}
  .section-nav a{font-size:13px}
}
@media print{
  .layout{display:block;max-width:none;padding:0}
  .article-head h1{font-size:26pt}
  .article-section{margin-top:25px}
}