/* Practical tutorials share the established StackSnack palette and type. */
.hero-tutorial { padding-bottom:36px; }
.tutorial-content { max-width:880px; margin:0 auto; padding:12px 0 36px; font-size:16px; line-height:1.8; }
.tutorial-content > h2 { font-size:clamp(28px,4vw,38px); line-height:1.2; }
.tutorial-content section { padding:32px 0; border-bottom:1px solid var(--border); scroll-margin-top:24px; }
.tutorial-content section h2 { font-size:clamp(25px,3.5vw,32px); line-height:1.25; margin:12px 0 20px; }
.tutorial-content p, .tutorial-content li { color:var(--text); }
.tutorial-content a { text-underline-offset:3px; }
.tutorial-toc { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px 22px; margin:28px 0; padding:22px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.tutorial-toc strong { flex-basis:100%; }.tutorial-toc a { font-size:14px; }
.tutorial-notice { padding:20px 24px; border-left:3px solid var(--accent); background:var(--surface-2); }
.tutorial-code { max-width:100%; overflow:auto; padding:22px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font:13px/1.8 ui-monospace,monospace; tab-size:2; }
.tutorial-content :not(pre) > code { overflow-wrap:anywhere; font-size:.88em; }
.tutorial-example { margin:28px 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.tutorial-example-label { padding:12px 20px; background:var(--accent); color:#fffdf6; font:600 10px/1.6 ui-monospace,monospace; letter-spacing:.07em; }
.tutorial-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.tutorial-comparison > div { padding:22px; }.tutorial-comparison > div + div { border-left:1px solid var(--border); background:var(--surface-2); }
.tutorial-comparison h3 { margin:0 0 14px; font-size:22px; line-height:1.3; }
.tutorial-example figcaption { padding:16px 22px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); }
.tutorial-content caption { text-align:left; padding:12px 0; font-size:14px; font-weight:600; }
.tutorial-content .guide-table { margin:24px 0; }.tutorial-content .guide-table table { min-width:440px; }
.tutorial-steps { padding-left:24px; }.tutorial-steps li { margin:16px 0; padding-left:6px; }
.tutorial-sources { font-size:14px; }.tutorial-content .guide-byline { color:var(--muted); font-size:12px; }
@media(max-width:600px) { .tutorial-content { font-size:15px; }.tutorial-comparison { grid-template-columns:minmax(0,1fr); }.tutorial-comparison > div + div { border-left:0; border-top:1px solid var(--border); }.tutorial-code { padding:16px; font-size:12px; }.tutorial-toc { display:grid; padding:18px; gap:12px; }.tutorial-notice { padding:18px; } }
/* Friendly guide components: summary cards, timeline, status rows, numbered steps. */
.guide-meta { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.guide-glance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0 8px; }
.guide-card { padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.guide-card h3 { margin:12px 0 6px; font-size:18px; line-height:1.3; }
.guide-card p { margin:0; font-size:14px; line-height:1.6; }
.guide-icon { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; font:700 16px/1 system-ui,sans-serif; background:var(--surface-2); color:var(--text); }
.guide-icon.ok { background:var(--accent); color:var(--accent-ink); }
.guide-icon.warn { background:var(--mustard); }
.guide-icon.info { background:var(--low); color:#fff; }
.guide-timeline { list-style:none; margin:20px 0; padding:0 0 0 22px; border-left:2px solid var(--border); }
.guide-timeline li { position:relative; margin:0 0 14px; line-height:1.5; }
.guide-timeline li::before { content:""; position:absolute; left:-29px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--border); }
.guide-timeline li.now::before { background:var(--tomato); box-shadow:0 0 0 4px var(--surface-2); }
.guide-timeline strong { display:block; font-size:13px; letter-spacing:.03em; color:var(--muted); }
.guide-timeline li.now strong { color:var(--tomato); }
.guide-status { list-style:none; margin:20px 0; padding:0; display:grid; gap:10px; }
.guide-status li { display:grid; grid-template-columns:128px minmax(0,1fr); gap:16px; align-items:start; padding:16px 18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); line-height:1.6; }
.guide-status li p { margin:4px 0 0; font-size:14px; color:var(--muted); }
.guide-badge { justify-self:start; padding:3px 10px; border-radius:999px; font:600 11px/1.6 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; background:var(--surface-2); }
.guide-badge.ok { background:var(--accent); color:var(--accent-ink); }
.guide-badge.act { background:var(--tomato); color:#fffdf6; }
.guide-badge.check { background:var(--mustard); color:var(--text); }
.guide-error { margin:20px 0; padding:18px 22px; border-radius:10px; background:var(--text); color:var(--surface); font:13px/1.7 ui-monospace,monospace; overflow-wrap:anywhere; }
.guide-error span { display:block; color:var(--mustard); font-size:11px; letter-spacing:.06em; }
.guide-steps { list-style:none; counter-reset:step; margin:24px 0; padding:0; }
.guide-steps > li { counter-increment:step; position:relative; margin:0 0 22px; padding:4px 0 0 56px; }
.guide-steps > li::before { content:counter(step); position:absolute; left:0; top:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:700 17px/1 system-ui,sans-serif; }
.guide-steps h3 { margin:2px 0 8px; font-size:20px; line-height:1.3; }
.guide-steps p { margin:0 0 12px; }
.guide-code-label { margin:14px 0 -2px; font:600 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; color:var(--muted); }
.guide-prompt { margin:20px 0 8px; padding:20px 22px; border:2px dashed var(--accent); border-radius:10px; background:var(--surface); font:13px/1.8 ui-monospace,monospace; white-space:pre-wrap; user-select:all; cursor:text; }
.guide-hint { font-size:13px; color:var(--muted); }
.guide-checklist { list-style:none; margin:20px 0; padding:0; }
.guide-checklist li { position:relative; padding:8px 0 8px 34px; border-bottom:1px dashed var(--border); }
.guide-checklist li::before { content:""; position:absolute; left:0; top:9px; width:22px; height:22px; display:grid; place-items:center; border:2px solid var(--accent); border-radius:6px; color:var(--accent); font:700 13px/1 system-ui,sans-serif; }
.guide-details { margin:24px 0; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.guide-details summary { padding:16px 20px; cursor:pointer; font-weight:600; }
.guide-details[open] summary { border-bottom:1px solid var(--border); }
.guide-details > div { padding:4px 20px 12px; }
.guide-details .tutorial-code { background:var(--bg); }
@media(max-width:700px) { .guide-glance { grid-template-columns:minmax(0,1fr); }.guide-status li { grid-template-columns:minmax(0,1fr); gap:6px; }.guide-steps > li { padding-left:48px; } }
.tutorial-notice + .tutorial-notice { margin-top:14px; }