html:not(.light) { color-scheme:dark; --bg:#101419; --panel:#1b2128; --line:#303945; --text:#e7ecef; --muted:#98a3ad; }
html.light { color-scheme:light; --bg:#eef4f2; --panel:#fff; --line:#d9e5e2; --text:#182427; --muted:#5f6e73; }
.tutorial-page { background:radial-gradient(circle at 84% 8%,rgba(75,225,193,.13),transparent 25%),radial-gradient(circle at 8% 48%,rgba(103,79,255,.08),transparent 30%),var(--bg); }
.tutorial-page main { width:min(1180px,calc(100% - 34px)); padding-top:30px; }
.tutorial-page .skip-link { position:fixed; z-index:20; top:10px; left:10px; padding:9px 12px; color:#102e2a; background:var(--teal); border-radius:7px; transform:translateY(-150%); }
.tutorial-page .skip-link:focus { transform:none; }
.tutorial-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.tutorial-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.tutorial-theme-toggle { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 10px; color:var(--muted); background:rgba(27,33,40,.72); border:1px solid var(--line); border-radius:8px; font:inherit; cursor:pointer; }
.tutorial-theme-toggle span { color:var(--teal); font-size:16px; line-height:1; }
.tutorial-theme-toggle b { font-size:12px; }
.tutorial-theme-toggle:hover,.tutorial-theme-toggle:focus-visible { color:var(--text); border-color:rgba(75,225,193,.45); outline:none; }
.back-link { color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }
.back-link:hover,.back-link:focus-visible { color:var(--teal); }
.tutorial-hero { position:relative; overflow:hidden; margin:28px 0 22px; padding:clamp(28px,6vw,64px); border:1px solid rgba(75,225,193,.2); border-radius:24px; background:linear-gradient(135deg,rgba(28,37,44,.97),rgba(20,27,33,.94)); box-shadow:0 28px 90px rgba(0,0,0,.25); }
.tutorial-hero::after { content:"?"; position:absolute; right:clamp(22px,7vw,82px); top:50%; color:rgba(75,225,193,.08); font:800 clamp(150px,24vw,300px)/1 Outfit,sans-serif; transform:translateY(-52%); }
.tutorial-hero > * { position:relative; z-index:1; }
.tutorial-hero h1 { max-width:760px; margin-bottom:18px; }
.tutorial-hero .lede { max-width:700px; margin:0; color:#b8c2ca; font-size:clamp(16px,2vw,19px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.outline-button { display:inline-flex; padding:10px 14px; color:#cbd6dc; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; }
.outline-button:hover,.outline-button:focus-visible { color:var(--teal); border-color:rgba(75,225,193,.45); }
.tutorial-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:22px; align-items:start; }
.tutorial-toc { position:sticky; top:18px; display:grid; gap:3px; max-height:calc(100vh - 36px); padding:18px; overflow:auto; background:rgba(20,26,32,.88); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(18px); }
.tutorial-toc strong { margin:0 0 8px; color:var(--text); font-size:13px; }
.tutorial-toc a { padding:7px 9px; color:var(--muted); border-radius:7px; font-size:12px; text-decoration:none; }
.tutorial-toc a:hover,.tutorial-toc a:focus-visible { color:var(--teal); background:rgba(75,225,193,.07); }
.tutorial-content { display:grid; gap:18px; min-width:0; }
.tutorial-section { scroll-margin-top:18px; padding:clamp(23px,4vw,38px); background:rgba(27,33,40,.92); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 55px rgba(0,0,0,.14); }
.tutorial-section h2 { margin:0 0 9px; color:var(--text); font-size:clamp(22px,3vw,30px); letter-spacing:-.7px; }
.tutorial-section h3 { margin:24px 0 6px; color:var(--text); font-size:16px; }
.tutorial-section > p:first-of-type { margin-top:0; }
.tutorial-section p { margin-bottom:10px; }
.tutorial-section ul,.tutorial-section ol { margin:10px 0 0; }
.tutorial-section li + li { margin-top:7px; }
.numbered-steps { display:grid; gap:11px; padding:0; list-style:none; counter-reset:steps; }
.numbered-steps li { position:relative; min-height:52px; padding:10px 12px 10px 52px; color:var(--muted); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.055); border-radius:10px; counter-increment:steps; }
.numbered-steps li::before { content:counter(steps); position:absolute; top:10px; left:11px; display:grid; place-items:center; width:30px; height:30px; color:var(--teal); background:rgba(75,225,193,.08); border:1px solid rgba(75,225,193,.25); border-radius:8px; font:700 12px "DM Mono",monospace; }
.feature-grid,.search-grid,.card-anatomy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:17px; }
.feature-card,.search-group,.anatomy-card { padding:16px; background:rgba(13,18,23,.48); border:1px solid rgba(255,255,255,.07); border-radius:11px; }
.feature-card strong,.search-group strong,.anatomy-card strong { display:block; margin-bottom:6px; color:#dfe7eb; font-size:13px; }
.feature-card p,.anatomy-card p { margin:0; font-size:13px; }
.search-group code { display:inline-flex; margin:4px 4px 0 0; padding:5px 7px; color:#a8f6e5; background:#111820; border:1px solid rgba(75,225,193,.13); border-radius:6px; font:500 11px "DM Mono",monospace; }
.example { margin:14px 0 0; padding:13px 15px; color:#b9c4ca; background:rgba(75,225,193,.055); border-left:3px solid var(--teal); border-radius:0 9px 9px 0; }
.example code,kbd { color:#a8f6e5; font-family:"DM Mono",monospace; }
.callout { margin-top:18px; padding:15px 17px; color:#b9c5ca; background:rgba(111,90,255,.08); border:1px solid rgba(132,114,255,.22); border-radius:11px; }
.callout strong { color:#dcd7ff; }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.tag-row span { padding:5px 8px; color:#b6f8ea; background:rgba(75,225,193,.08); border:1px solid rgba(75,225,193,.2); border-radius:999px; font:600 10px "DM Mono",monospace; }
.tutorial-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:26px 4px 0; color:#69747d; font-size:12px; }
.tutorial-footer a { color:#8af3dd; }
@media (max-width:820px) { .tutorial-layout { grid-template-columns:1fr; }.tutorial-toc { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; }.tutorial-toc strong { grid-column:1/-1; }.tutorial-hero::after { right:-15px; }.feature-grid,.search-grid,.card-anatomy { grid-template-columns:1fr; } }
@media (max-width:520px) { .tutorial-top { align-items:flex-start; }.tutorial-actions { align-items:flex-end; flex-direction:column-reverse; }.tutorial-theme-toggle b { display:none; }.tutorial-toc { grid-template-columns:1fr; }.tutorial-hero { border-radius:18px; }.tutorial-section { border-radius:14px; }.hero-actions { display:grid; }.hero-actions a { justify-content:center; } }
html.light .tutorial-theme-toggle { background:rgba(255,255,255,.88); }
html.light .tutorial-hero { background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(232,242,239,.95)); box-shadow:0 28px 90px rgba(28,65,60,.12); }
html.light .tutorial-hero .lede { color:#586a70; }
html.light .outline-button { color:#46575c; }
html.light .tutorial-toc { background:rgba(255,255,255,.9); }
html.light .tutorial-section { background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(28,65,60,.08); }
html.light .numbered-steps li { background:#f6f9f8; border-color:#dfe9e6; }
html.light .feature-card,html.light .search-group,html.light .anatomy-card { background:#f4f8f7; border-color:#dfe9e6; }
html.light .feature-card strong,html.light .search-group strong,html.light .anatomy-card strong { color:#223236; }
html.light .search-group code { color:#176e60; background:#e8f3f0; }
html.light .example { color:#52656a; }
html.light .example code,html.light kbd { color:#176e60; }
html.light .callout { color:#56656c; background:rgba(111,90,255,.055); }
html.light .callout strong { color:#554496; }
html.light .tag-row span { color:#176e60; background:#e7f4f1; }
html.light .tutorial-footer { color:#5f7075; }
html.light .tutorial-footer a { color:#187c6f; }