.tutorial-body{min-height:100%;background:#eef3f8;color:#122033}.tutorial-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:26px;min-height:68px;padding:10px max(20px,calc((100vw - 1180px)/2));background:#0b2540;color:#fff;box-shadow:0 5px 18px rgba(7,28,48,.2)}.tutorial-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}.tutorial-brand strong,.tutorial-brand small{display:block}.tutorial-brand small{color:#b8cee2;font-size:11px}.tutorial-topbar nav{display:flex;gap:4px;margin-left:auto}.tutorial-topbar nav a{padding:9px 12px;border-radius:7px;color:#c8d9e8;text-decoration:none;font-weight:650}.tutorial-topbar nav a:hover{background:#143a5c;color:#fff}.tutorial-shell{width:min(1180px,calc(100% - 32px));margin:auto}.tutorial-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);gap:30px;align-items:center;padding:70px 0 42px}.eyebrow{display:inline-block;padding:5px 9px;border-radius:999px;background:#d9ecfb;color:#075ca8;font-size:11px;font-weight:800;letter-spacing:.08em}.tutorial-hero h1{max-width:780px;margin:16px 0 14px;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.04em}.tutorial-hero p{max-width:760px;margin:0;color:#536477;font-size:18px;line-height:1.65}.hero-actions,.example-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.tutorial-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid #b8c9d8;border-radius:8px;background:#fff;color:#17324b;text-decoration:none;font-weight:750;box-shadow:0 2px 5px rgba(15,23,42,.05)}.tutorial-button.primary{border-color:#075ca8;background:#075ca8;color:#fff}.scope-card{padding:24px;border:1px solid #bed3e4;border-radius:14px;background:linear-gradient(145deg,#fff,#edf7ff);box-shadow:0 14px 35px rgba(15,59,94,.09)}.scope-card strong{font-size:16px}.scope-card ul{margin:14px 0 0;padding-left:20px;color:#465d72}.scope-card li+li{margin-top:8px}.notice{padding:16px 18px;border-left:4px solid #f59e0b;border-radius:7px;background:#fff8e7;color:#69460a}.tutorial-section{padding:64px 0 10px}.section-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}.section-heading>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:10px;background:#0b2540;color:#fff;font-weight:850}.section-heading h2{margin:0;font-size:28px}.section-heading p{margin:5px 0 0;color:#607184}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step-card,.example-card{position:relative;padding:22px;border:1px solid #ccd9e4;border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(15,23,42,.05)}.step-card>b{position:absolute;right:16px;top:12px;color:#c5d4e1;font-size:34px}.step-card h3,.example-card h3{margin:0 0 9px;font-size:18px}.step-card p{min-height:64px;margin:0;color:#5c6e80}.step-card pre{margin:14px 0 0;padding:10px;border-radius:7px;background:#102a43;color:#d9ecfb;font-size:12px}.step-card code{padding:1px 4px;border-radius:4px;background:#edf3f8;color:#075ca8}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-grid article{display:flex;gap:14px;padding:18px;border:1px solid #d3dee8;border-radius:10px;background:#fff}.result-grid i{flex:0 0 8px;border-radius:8px;background:var(--line-color)}.result-grid i.red{--line-color:#dc2626}.result-grid i.blue{--line-color:#2563eb}.result-grid i.orange{--line-color:#ef7d00}.result-grid i.cyan{--line-color:#06b6d4}.result-grid i.green{--line-color:#059669}.result-grid i.purple{--line-color:#8b5cf6}.result-grid h3{margin:0 0 5px}.result-grid p{margin:0;color:#607184}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.example-card.featured{border-color:#72acd5;box-shadow:0 12px 30px rgba(7,92,168,.11)}.example-tag{margin-bottom:14px;color:#075ca8;font-size:11px;font-weight:850;letter-spacing:.06em}.example-card>p{color:#607184}.example-card dl{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding:14px;border-radius:8px;background:#f5f8fb}.example-card dt{color:#607184}.example-card dd{margin:0;font-weight:750}.expected{margin-top:14px;padding:13px;border-left:3px solid #16834a;background:#f0faf4}.expected p{margin:4px 0 0;color:#4f6659}.checklist{margin:70px 0 60px;padding:26px;border-radius:14px;background:#0b2540;color:#fff}.checklist h2{margin:0 0 18px}.checklist>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.checklist label{padding:12px;border:1px solid #365b7b;border-radius:8px;background:#123553;color:#d7e6f2}footer{text-align:center;padding:24px;color:#6b7b8a}@media(max-width:900px){.tutorial-topbar nav{display:none}.tutorial-hero{grid-template-columns:1fr;padding-top:42px}.step-grid{grid-template-columns:1fr 1fr}.checklist>div{grid-template-columns:1fr 1fr}}@media(max-width:620px){.tutorial-topbar>.tutorial-button{display:none}.tutorial-hero h1{font-size:36px}.step-grid,.result-grid,.example-grid,.checklist>div{grid-template-columns:1fr}.tutorial-section{padding-top:46px}}