/* Shared geometry with Kelly's guide: cards, scrollable phone gallery,
   rounded screenshots, chapter navigation and an accessible enlargement. */
.tutorial-page{min-height:100vh;padding-top:0}
.tutorial-page>main,.tutorial-page>footer{width:min(960px,calc(100% - 32px));margin-inline:auto}
.tutorial-page>header{position:sticky;inset:0 0 auto;width:100%;margin:0;min-height:59px;padding:10px max(16px,calc((100% - 960px)/2));background:var(--header);border-bottom:3px solid var(--yellow);flex-wrap:nowrap}
.tutorial-page .tutorial-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:900;text-decoration:none}
.tutorial-page .tutorial-brand img{width:100%;height:100%}
.tutorial-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.tutorial-page .tutorial-header-actions .profile-pill{display:flex;flex:none;max-width:150px;min-height:34px;padding:5px 10px;color:#fff;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tutorial-page.tutorial-detail .tutorial-language{display:none}
.tutorial-page>main{padding-block:16px 36px}
.tutorial-page>header a{color:var(--yellow);font-weight:800;text-decoration:none}
.tutorial-page>header #tutorial-account-link{font-weight:400}
.tutorial-page>header label{margin:0;display:flex;align-items:center;gap:10px}
.tutorial-page>header select{width:auto;max-width:190px;padding:8px}
@media(max-width:600px){.tutorial-page:not(.tutorial-detail)>header{flex-wrap:wrap}.tutorial-page:not(.tutorial-detail) .tutorial-header-actions{width:100%;justify-content:space-between}.tutorial-page>header select{max-width:150px}}
.tutorial-page>footer{padding-block:22px;color:var(--muted);border-top:1px solid var(--line)}
.tutorial-page>footer a{color:var(--yellow)}
[data-tutorial-root]{line-height:1.7;overflow-wrap:anywhere}
[data-tutorial-root] h1{font-size:clamp(1.5rem,4vw,2rem);color:var(--yellow);line-height:1.25;margin:16px 0}
[data-tutorial-root] h2{font-size:1.12rem;line-height:1.4;color:var(--yellow);margin:0 0 10px}
[data-tutorial-root] p{margin:0 0 16px;color:var(--text)}
[data-tutorial-root] a{color:var(--yellow);text-underline-offset:4px}
[data-tutorial-root] .button{display:inline-block;text-decoration:none;white-space:normal;color:#092216;line-height:1.45}
.tutorial-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:22px}
.tutorial-choice{display:grid;align-content:start;gap:10px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none}
.tutorial-choice strong{font-size:1.05rem}.tutorial-choice span{font-size:.9rem;color:var(--text);font-weight:400}
.tutorial-controller-link{margin-block:0 20px}
.tutorial-gallery{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 16px;margin-bottom:22px;scroll-snap-type:x proximity}
.tutorial-gallery .tutorial-shot{width:132px;flex:0 0 132px;scroll-snap-align:start}
.tutorial-shot{width:min(100%,230px);margin:0;justify-self:center}
.tutorial-shot img{display:block;width:100%;height:auto;border-radius:20px}
.tutorial-zoom{display:block;width:100%;padding:0;border:2px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 6px 18px #0005;cursor:zoom-in}
.tutorial-shot figcaption{font-size:.82rem;text-align:center;margin-top:8px;color:var(--muted)}
.tutorial-shot.tutorial-wide{width:100%;grid-column:1/-1}
.tutorial-note{font-size:.85rem;color:var(--muted)!important}
.tutorial-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;margin-block:12px 24px}
.tutorial-guide-layout{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start;gap:28px}
.tutorial-guide-toc{position:sticky;top:80px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tutorial-guide-toc .tutorial-contents{grid-template-columns:1fr;margin:0;gap:0}
.tutorial-guide-toc .tutorial-topic-link{padding:6px 4px;text-decoration:none}
.tutorial-guide-chapter{padding:6px 0 22px;scroll-margin-top:82px}
.tutorial-guide-chapter+.tutorial-guide-chapter{padding-top:22px;border-top:1px solid var(--line)}
[data-tutorial-root] .tutorial-guide-chapter>h2,[data-tutorial-root] .tutorial-follower-start>h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0 0 14px}
[data-tutorial-root] .tutorial-section h3{margin:0 0 10px;color:var(--yellow);font-size:1.08rem;line-height:1.4}
.tutorial-follower-start{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);scroll-margin-top:82px}
.tutorial-topic-link{padding-block:8px;display:block}
.tutorial-nav{display:flex;flex-wrap:wrap;gap:8px 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tutorial-section{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:start;gap:24px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:18px}
.tutorial-section:not(:has(figure)){grid-template-columns:1fr}
.tutorial-callout{padding:18px;border-inline-start:4px solid var(--yellow);background:var(--card);border-radius:8px}
.tutorial-lightbox{position:fixed;inset:12px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--text);overflow:auto}
.tutorial-lightbox::backdrop{background:#000c}.tutorial-lightbox>button{display:block;position:sticky;top:0;margin:0 0 12px auto;z-index:1}
.tutorial-lightbox img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 110px);margin:auto;border-radius:18px}
[data-tutorial-root] :focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media(max-width:600px){.tutorial-choices,.tutorial-section{grid-template-columns:1fr}.tutorial-section{padding:18px;gap:14px}.tutorial-section .tutorial-shot{width:190px}.tutorial-section .tutorial-wide{width:100%}.tutorial-contents{gap:4px 16px}}
@media(max-width:760px){.tutorial-guide-layout{grid-template-columns:1fr;gap:16px}.tutorial-guide-toc{position:static}.tutorial-guide-toc .tutorial-contents{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){[data-tutorial-root] *{scroll-behavior:auto;transition:none}}