/* Give each video and its unabridged examples room to breathe. */
.tutorials .wrap{max-width:1240px;padding-inline:32px}
.tutorials .crt{opacity:.3}
.tutorials .tut-head{padding:64px 0 36px;max-width:880px}
.tutorials .kicker{margin:0;color:var(--amber);letter-spacing:.08em}
.tutorials h1{margin-top:24px;font-size:clamp(24px,4.3vw,48px);line-height:1.5}
.tutorials .lede{font:20px/1.7 system-ui,sans-serif;max-width:42em;margin-top:24px}
.tutorials .note{font:14px/1.7 system-ui,sans-serif;margin-top:20px;max-width:48em}
.tutorial-nav{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:40px;border-bottom:1px solid #36364d}
.tutorial-nav a{padding:11px 18px;border:1px solid #444359;border-radius:6px;color:var(--ink);font:15px/1.4 system-ui,sans-serif;text-decoration:none;background:#14162c}
.tutorial-nav a:hover,.tutorial-nav a:focus-visible{border-color:var(--amber);color:var(--amber);outline:2px solid transparent}
.tutorials #how-to{padding-top:40px}
.tutorials #how-to h2{font-size:17px;line-height:1.7;margin-bottom:30px}
.tutorials #how-to h2 small{font-size:9px;letter-spacing:.08em;margin-bottom:12px}
.tutorials .shorts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tutorials .short{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:start;gap:26px;padding:24px;max-width:none;margin:0;border:1px solid #353449;border-radius:12px;background:linear-gradient(145deg,#191b32,#111325);scroll-margin-top:28px}
.tutorials .short:target{border-color:var(--amber);box-shadow:0 0 0 2px #ffb53d26}
.tutorials .short .screen{margin:0;border:1px solid #4b4650;border-radius:7px;box-shadow:0 12px 24px #0004;overflow:hidden}
.tutorials .short .yt-play{transform:scale(.65)}
.tutorials .short .yt-time{font:12px/1.3 system-ui,sans-serif;padding:4px 7px;border-radius:3px;right:6px;bottom:6px}
.tutorial-copy{min-width:0}
.tutorials .short h3{margin:0 0 20px;font:600 22px/1.35 system-ui,sans-serif;text-transform:none;color:var(--ink);overflow-wrap:break-word}
.tutorials .asks{display:grid;gap:12px}
.tutorials .asks li{margin:0;padding-left:12px;border-left:2px solid #66502e;font:15px/1.65 system-ui,sans-serif;overflow-wrap:break-word}
.tutorials .asks .who{display:block;font:12px/1.6 ui-monospace,monospace;margin-bottom:4px}
.tutorials .asks .found{display:block;margin-top:6px;font-size:14px}
.tutorials .short .aside{margin-top:18px;font:13px/1.65 system-ui,sans-serif}
.tutorials .short .more{display:inline-block;margin-top:20px;font:14px/1.5 system-ui,sans-serif;text-underline-offset:4px}
.tutorials .versus.channel{margin:32px 0 0;max-width:none;padding:24px;font-size:24px;line-height:1.5}
.tutorials #try{margin-top:64px;padding:40px;background:#17192f;border:1px solid #454058;border-radius:12px}
.tutorials #try h2{font-size:clamp(14px,2.5vw,22px);line-height:1.8}
.tutorials #try p:not(.sys){font:18px/1.7 system-ui,sans-serif;max-width:44em;margin-top:24px}
.tutorials #try .sys{font:14px/1.7 system-ui,sans-serif;margin-top:24px}
.tutorials footer.fat .cols a{font:15px/1.4 system-ui,sans-serif;margin-bottom:12px}
@media(max-width:1100px){.tutorials .short{grid-template-columns:145px minmax(0,1fr);gap:20px;padding:20px}.tutorials .short h3{font-size:20px}}
@media(max-width:900px){.tutorials .shorts{grid-template-columns:1fr}.tutorials .short{grid-template-columns:190px minmax(0,1fr);gap:32px;padding:28px}.tutorials .short h3{font-size:24px}.tutorials .asks li{font-size:16px}}
@media(max-width:560px){.tutorials .wrap{padding-inline:20px}.tutorials .tut-head{padding-top:40px}.tutorials .lede{font-size:18px}.tutorial-nav{gap:8px;padding-bottom:28px}.tutorial-nav a{font-size:14px;padding:10px 14px}.tutorials .short{grid-template-columns:1fr;padding:24px;gap:28px}.tutorials .short .screen{max-width:220px;justify-self:center}.tutorials .short h3{font-size:23px}.tutorials .asks li{font-size:16px}.tutorials #try{padding:26px 22px}.tutorials .versus.channel{font-size:21px;padding:20px}.tutorials h1{font-size:clamp(20px,6vw,30px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Controls & settings guide: annotated screenshots with matching numbered callouts. */
.tutorials #guide{padding-top:56px;margin-top:48px;border-top:1px solid #36364d}
.tutorials #guide h2{font-size:17px;line-height:1.7;margin-bottom:18px}
.tutorials #guide h2 small{font-size:9px;letter-spacing:.08em;margin-bottom:12px}
.guide-lede{font:18px/1.7 system-ui,sans-serif;max-width:46em;margin:0 0 32px}
.guide-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 36px;align-items:start;margin:0 0 28px;padding:28px;border:1px solid #353449;border-radius:12px;background:linear-gradient(145deg,#191b32,#111325);scroll-margin-top:28px}
.guide-card:target{border-color:var(--amber);box-shadow:0 0 0 2px #ffb53d26}
.guide-card h3{grid-column:1/-1;margin:0;font:600 24px/1.35 system-ui,sans-serif;text-transform:none;color:var(--ink)}
.guide-card figure{margin:0;grid-column:1}
.guide-card figure img{display:block;width:100%;height:auto;border:1px solid #4b4650;border-radius:8px;box-shadow:0 12px 24px #0004}
.guide-card figure.small{max-width:300px}
.guide-card figcaption{font:13px/1.6 system-ui,sans-serif;margin-top:10px;color:#c9c6d8}
.guide-card .callouts,.guide-card .aside{grid-column:2}
.guide-card .callouts{list-style:none;counter-reset:callout var(--start,0);margin:0;padding:0;display:grid;gap:14px}
.guide-card .callouts[start="4"]{--start:3}
.guide-card .callouts li{counter-increment:callout;position:relative;padding-left:46px;font:16px/1.65 system-ui,sans-serif;overflow-wrap:break-word}
.guide-card .callouts li::before{content:counter(callout);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#14100a;font:700 15px/30px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #14100a}
.guide-card .callouts b{color:var(--amber);font-weight:600}
.guide-card .aside{margin:4px 0 0;font:14px/1.65 system-ui,sans-serif;color:#c9c6d8}
.guide-card code{font:14px ui-monospace,monospace}
#guide-locked figure{grid-column:1/-1}
#guide-locked .callouts,#guide-locked .aside{grid-column:1/-1}
#guide-window figure{max-width:420px}
@media(max-width:900px){.guide-card{grid-template-columns:minmax(0,1fr);padding:22px}.guide-card figure,.guide-card .callouts,.guide-card .aside{grid-column:1}#guide-window figure{max-width:360px;justify-self:center}}
@media(max-width:560px){.guide-card h3{font-size:21px}.guide-card .callouts li{font-size:15.5px}.guide-lede{font-size:16px}}