.tutorial-page{max-width:1180px;margin:auto;padding:38px 5vw 88px}
.tutorial-intro{max-width:780px;margin-bottom:36px}
.tutorial-intro .eyebrow{margin-bottom:20px}
.tutorial-intro h1{font-size:clamp(44px,6vw,76px);line-height:1.04;letter-spacing:-.05em;margin-bottom:22px}
.tutorial-intro p:not(.eyebrow),:is(.tailscale-guide,.webcam-guide) p,:is(.tailscale-guide,.webcam-guide) dd{font-size:17px;line-height:1.75;color:var(--muted)}
.guide-jump{display:inline-block;font-size:15px;color:var(--mint);padding:6px 0}
.video-embed{aspect-ratio:16/9;background:var(--deep);border:1px solid var(--line);border-radius:12px;overflow:hidden;scroll-margin-top:24px}
.video-embed iframe{display:block;width:100%;height:100%;border:0}
.video-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:16px 0 22px;font-size:14px;line-height:1.6;color:var(--muted)}
.video-caption p{margin:0}.video-caption a{color:var(--mint)}
.chapter-links{display:flex;flex-wrap:wrap;gap:10px}
.chapter{display:inline-flex;align-items:baseline;gap:10px;border:1px solid var(--line);border-radius:7px;padding:12px 15px;font-size:14px;line-height:1.5;transition:background .2s,border-color .2s}
.chapter span{color:var(--mint);font-variant-numeric:tabular-nums;white-space:nowrap}
.chapter:hover,.chapter[aria-current="true"]{border-color:var(--mint);background:var(--deep)}
:is(.tailscale-guide,.webcam-guide){border-top:1px solid var(--line);margin-top:64px;padding-top:56px;scroll-margin-top:32px}
.guide-heading{max-width:760px}.guide-heading .eyebrow{margin-bottom:20px}.guide-heading h2{font-size:clamp(32px,4.2vw,50px);font-weight:550;letter-spacing:-.04em;line-height:1.15;margin-bottom:22px}
:is(.tailscale-guide,.webcam-guide) a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
:is(.tailscale-guide,.webcam-guide) code{font-size:.92em;overflow-wrap:anywhere;color:var(--paper)}
.dns-note{padding-left:22px;border-left:2px solid var(--mint);margin:30px 0 42px;max-width:850px}
.dns-note strong{color:var(--paper)}
.guide-steps{list-style:none;padding:0;margin:0;counter-reset:guide}
.guide-steps>li{counter-increment:guide;position:relative;border-top:1px solid var(--line);padding:30px 0 20px 60px}
.guide-steps>li::before{content:counter(guide,decimal-leading-zero);position:absolute;left:0;top:34px;color:var(--mint);font-size:15px;font-variant-numeric:tabular-nums}
:is(.tailscale-guide,.webcam-guide) h3{font-size:24px;font-weight:550;line-height:1.35;letter-spacing:-.025em;margin-bottom:18px}
.guide-steps p{max-width:800px}.guide-steps p:last-child{margin-bottom:12px}
.guide-steps pre{padding:20px;background:var(--deep);border-radius:8px;overflow-x:auto;max-width:100%;font-size:14px;line-height:1.9;margin:22px 0;tab-size:2}
.guide-steps pre code{font-size:inherit;overflow-wrap:normal}
.tutorial-troubleshooting{border-top:1px solid var(--line);padding:32px 0 0 60px}
.tutorial-troubleshooting dt{font-size:17px;font-weight:600;margin:24px 0 8px}.tutorial-troubleshooting dd{margin:0 0 20px;max-width:800px}
@media(max-width:700px){.tutorial-page{padding:26px 6vw 60px}.tutorial-intro{margin-bottom:26px}.chapter{width:100%;padding:12px}:is(.tailscale-guide,.webcam-guide){margin-top:44px;padding-top:36px}.guide-steps>li{padding-left:38px}.tutorial-troubleshooting{padding-left:0}.guide-steps pre{margin-left:-38px;font-size:13px;padding:16px}.tutorial-intro p:not(.eyebrow),:is(.tailscale-guide,.webcam-guide) p,:is(.tailscale-guide,.webcam-guide) dd{font-size:16px}.video-caption{font-size:14px}}

.tutorial-intro .guide-jump{display:block;width:fit-content}
.guide-screenshot{margin:26px 0 30px;max-width:1000px}
.guide-screenshot a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.guide-screenshot img{display:block;width:100%;height:auto;background:var(--deep)}
.guide-screenshot figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.6}
.guide-screenshot a[aria-haspopup="dialog"]{cursor:zoom-in}
.image-viewer-open{overflow:hidden}
.image-viewer{box-sizing:border-box;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;border:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#0b1012;color:#fff;overflow:hidden}
.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.image-viewer::backdrop{background:#0b1012}
.image-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.image-viewer-toolbar h2{font-size:16px;font-weight:500;line-height:1.4;margin:0}
.image-viewer-close{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:1px solid #627174;border-radius:50%;background:#202d30;color:#fff;font:32px/1 system-ui;cursor:pointer}
.image-viewer-close:hover{background:#34464a}
.image-viewer-close svg{display:block}
.image-viewer-close:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.image-viewer-image{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.image-viewer-description{margin:0 auto;max-width:900px;max-height:25vh;overflow:auto;color:#c4cfd1;text-align:center;font-size:14px;line-height:1.5;overflow-wrap:anywhere}