/* Tutorial Center v0.4. Fixed owner-selected design: A + cinema / sidebar / midnight / wide / stack. */
:root { --bg:#15171b;--surface:#1c1f25;--elevated:#252932;--inset:#111317;--text:#f0f1f4;--body:#d4d7df;--muted:#a9aebc;--line:#373c48;--subtle:#292d36;--accent:#bab5ff;--accent-ink:#202033;--accent-soft:rgba(186,181,255,.11);--page-glow:rgba(152,139,255,.09);--shadow:0 16px 50px #0003;--header-bg:rgba(21,23,27,.94);--body-size:19px;--radius:20px;--fast:150ms;--normal:220ms;--slow:280ms;--ease:cubic-bezier(.2,.7,.2,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:0 }
:root[data-palette=midnight] { --bg:#111927;--surface:#1a2537;--elevated:#243249;--inset:#0c1320;--line:#3b4b64;--subtle:#29364b;--header-bg:rgba(17,25,39,.95);--body:#d7dfed;--muted:#afbdd0;--page-glow:rgba(104,144,252,.14) }
:root[data-theme=light] { --bg:#f5f5f7;--surface:#fff;--elevated:#f0f1f5;--inset:#e9ebf0;--text:#20232b;--body:#383e49;--muted:#5e6778;--line:#b6bdca;--subtle:#dfe2e8;--accent:#5143b8;--accent-ink:#fff;--accent-soft:rgba(80,62,186,.08);--header-bg:rgba(245,245,247,.96);--shadow:0 16px 48px #25324e0d;--page-glow:rgba(163,153,249,.10) }
:root[data-theme=light][data-palette=midnight] { --bg:#eef2f8;--surface:#fff;--elevated:#e6edf7;--inset:#e2e9f4;--header-bg:rgba(238,242,248,.96) }
* { box-sizing:border-box }
body { margin:0;line-height:1.65;background:var(--bg);color:var(--body) }
button, input, select, textarea { font:inherit }
button, a, input, select { -webkit-tap-highlight-color:transparent }
button, a { touch-action:manipulation }
button { color:inherit;cursor:pointer }
a { color:inherit;text-decoration:none }
button { background:none;border:0 }
img, video { max-width:100%;display:block }
img { height:auto }
h1, h2, h3, h4, p, figure { margin:0 }
h1, h2, h3, h4 { color:var(--text);font-weight:650 }
h1, h2, h3 { line-height:1.4 }
h1 { letter-spacing:-.04em }
p { overflow-wrap:anywhere }
em { font-style:normal }
strong { color:var(--text);font-weight:650 }
ul, ol { padding:0;margin:0 }
button[disabled] { opacity:.55;cursor:wait }
[hidden] { display:none!important }
::selection { background:var(--accent);color:var(--accent-ink) }
:focus-visible { outline:3px solid var(--accent);outline-offset:4px }
a, button { transition:background-color var(--fast),color var(--fast),border-color var(--fast),box-shadow var(--fast),transform var(--normal) var(--ease) }
button:active:not([disabled]), .btn:active { transform:translateY(1px) }
.icon { width:20px;height:20px;flex:none;vertical-align:middle }
.muted { color:var(--muted) }
.eyebrow { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.035em;line-height:1.6 }
.accent-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft) }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:10px;min-height:46px;padding:11px 19px;font-size:15px;line-height:1.4;font-weight:550;color:var(--text);white-space:nowrap;background:var(--surface) }
.btn:hover { border-color:var(--muted);background:var(--elevated) }
.btn.primary { background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 #fff1 inset }
.btn.primary:hover { filter:brightness(1.07) }
.btn.ghost { background:transparent;border-color:transparent }
.btn.ghost:hover { background:var(--accent-soft) }
.icon-btn { width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--surface);flex:none }
.icon-btn:hover { background:var(--elevated) }
.skip-link { position:fixed;z-index:500;top:-90px;left:20px;padding:12px 20px;background:var(--accent);color:var(--accent-ink);border-radius:8px }
.skip-link:focus { top:10px }
.wrap { max-width:1280px;margin-inline:auto }
.brand { display:inline-flex;align-items:center;gap:12px;font-size:19px;font-weight:680;color:var(--text);white-space:nowrap;letter-spacing:-.02em }
.brand-mark { height:36px;width:36px;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:11px }
.brand-mark .icon { width:23px;height:23px }
.brand-note { padding-left:22px;margin-left:22px;border-left:1px solid var(--line);font-size:14px;color:var(--muted) }
.site-header { height:80px;position:sticky;top:0;z-index:30;background:var(--header-bg);border-bottom:1px solid var(--subtle);backdrop-filter:blur(12px) }
.header-inner { height:100%;max-width:1440px;padding:0 40px;margin:auto;display:flex;align-items:center }
.primary-nav { margin-left:auto;display:flex;align-items:center;gap:28px;font-size:15px;font-weight:550 }
.primary-nav>a { padding-block:26px;position:relative;color:var(--muted) }
.primary-nav>a:hover, .primary-nav>a[aria-current] { color:var(--text) }
.primary-nav>a[aria-current]:after { content:"";height:2px;position:absolute;left:2px;right:2px;bottom:0;background:var(--accent) }
.header-actions { display:flex;gap:12px;margin-left:34px;align-items:center }
.search-trigger { display:flex;align-items:center;gap:9px;min-height:42px;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface) }
.search-trigger:hover { background:var(--elevated);color:var(--text) }
kbd { font-family:inherit;font-size:12px;line-height:1.4;border:1px solid var(--line);border-radius:4px;padding:2px 5px;margin-left:18px;color:var(--muted) }
.site-footer { max-width:1360px;margin:80px auto 0;padding:36px 0 48px;display:flex;gap:26px;align-items:center;border-top:1px solid var(--line);font-size:14px;color:var(--muted) }
.site-footer p { margin-right:auto }
.site-footer>a:last-child { display:flex;gap:8px;align-items:center }
.home-page { overflow:hidden }
.home-hero { max-width:1360px;margin:auto;padding:92px 40px 88px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative }
.home-hero:before { position:absolute;content:"";inset:0 -15%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 70% 50%,var(--page-glow),transparent 65%) }
.hero-copy, .hero-visual, .cinema-note { position:relative;z-index:1 }
.hero-copy h1 { font-size:clamp(40px,4.2vw,62px);line-height:1.28;margin:24px 0;letter-spacing:-.055em }
.hero-copy h1 em { color:var(--accent) }
.hero-intro { font-size:20px;line-height:1.85;color:var(--muted) }
.hero-actions { display:flex;gap:12px;margin-top:34px;flex-wrap:wrap }
.hero-actions .btn { font-size:16px;min-height:52px;padding-inline:24px }
.hero-meta { display:flex;align-items:center;gap:17px;font-size:14px;color:var(--muted);margin-top:28px }
.hero-meta span { display:flex;align-items:center;gap:8px }
.hero-meta i { height:4px;width:4px;border-radius:50%;background:var(--line) }
.hero-meta .icon { width:17px;height:17px }
.comparison { border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow) }
.comparison-top { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;gap:12px }
.comparison-top>span { font-size:14px;display:flex;align-items:center;gap:9px }
.segmented { padding:4px;display:inline-flex;border-radius:9px;background:var(--inset);border:1px solid var(--subtle);gap:3px }
.segmented button { font-size:14px;padding:7px 13px;border-radius:6px;min-height:36px;white-space:nowrap;color:var(--muted) }
.segmented button[aria-pressed=true] { background:var(--elevated);box-shadow:0 2px 5px #0001;color:var(--text) }
.segmented button:hover { color:var(--text) }
.comparison-images { margin:0 14px;position:relative;aspect-ratio:854 / 671;overflow:hidden;border-radius:10px;background:var(--inset) }
.comparison-images img { width:100%;height:100%;object-fit:cover }
.comparison-images .marked { position:absolute;inset:0;opacity:0;transition:opacity var(--normal) }
.comparison.is-marked .marked { opacity:1 }
.comparison-bottom { display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted);padding:16px 22px }
.comparison-icon { color:var(--accent) }
.case-caption { display:flex;align-items:center;gap:14px;margin-top:16px;color:var(--muted);font-size:13px }
.case-caption>span { font-family:ui-monospace,monospace;color:var(--accent) }
.case-caption>.icon { margin-left:auto }
.cinema-note { display:none }
.section-topline { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;gap:24px }
.section-topline .eyebrow { margin-bottom:10px }
.section-topline h2 { font-size:30px;letter-spacing:-.025em }
.section-count { font-size:14px;color:var(--muted) }
.home-guides { padding-top:30px }
.guide-feature { border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:42% 1fr;overflow:hidden;background:var(--surface);transition:transform var(--normal),border-color var(--normal),box-shadow var(--normal) }
.guide-feature:hover { transform:translateY(-3px);border-color:var(--muted);box-shadow:var(--shadow) }
.feature-picture { position:relative;max-height:340px;overflow:hidden;background:var(--inset) }
.feature-picture img { width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform var(--slow) }
.guide-feature:hover .feature-picture img { transform:scale(1.025) }
.picture-badge { position:absolute;left:22px;top:22px;background:#16191dea;color:#fff;border:1px solid #ffffff40;padding:6px 13px;border-radius:6px;font-size:14px }
.feature-content { padding:36px 42px;display:flex;flex-direction:column;justify-content:center }
.feature-meta { display:flex;gap:12px;color:var(--accent);font-size:14px }
.feature-meta span+span { border-left:1px solid var(--line);padding-left:12px }
.feature-content h3 { font-size:28px;margin:14px 0 }
.feature-content p { font-size:17px;line-height:1.85;max-width:500px;color:var(--muted) }
.feature-footer { display:flex;align-items:center;justify-content:space-between;margin-top:30px;font-size:14px;color:var(--muted);gap:12px }
.feature-footer>span:first-child { display:flex;align-items:center;gap:9px }
.feature-footer .icon { width:17px;height:17px }
.feature-footer i { font-style:normal;color:var(--line) }
.round-arrow { width:42px;height:42px;background:var(--accent-soft);border-radius:50%;display:grid;place-items:center;color:var(--accent) }
.home-paths { padding-top:80px }
.path-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px }
.path-card { padding:28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.path-card:hover { background:var(--elevated);transform:translateY(-3px) }
.path-top { display:flex;justify-content:space-between;color:var(--accent);align-items:center }
.path-top .icon { width:27px;height:27px }
.path-top>span { font:14px ui-monospace,monospace;color:var(--muted) }
.path-card h3 { font-size:21px;margin:24px 0 12px }
.path-card p { font-size:16px;color:var(--muted);line-height:1.8 }
.path-link { display:flex;align-items:center;justify-content:space-between;margin-top:26px;font-size:15px;color:var(--text) }
:root[data-hero=cinema] .home-hero { display:flex;flex-direction:column;gap:48px;padding-top:76px;padding-bottom:56px;max-width:1260px }
:root[data-hero=cinema] .hero-copy { text-align:center }
:root[data-hero=cinema] .hero-copy .eyebrow, :root[data-hero=cinema] .hero-actions, :root[data-hero=cinema] .hero-meta { justify-content:center }
:root[data-hero=cinema] .hero-copy h1 { font-size:clamp(44px,5vw,70px);margin:20px 0 18px }
:root[data-hero=cinema] .hero-intro .desktop-break { display:none }
:root[data-hero=cinema] .hero-intro { font-size:20px }
:root[data-hero=cinema] .hero-meta { display:none }
:root[data-hero=cinema] .hero-visual { width:100%;max-width:1070px }
:root[data-hero=cinema] .comparison { background:linear-gradient(135deg,var(--surface),var(--inset));box-shadow:0 0 0 8px var(--accent-soft),var(--shadow) }
:root[data-hero=cinema] .comparison-images { aspect-ratio:2.55/1;margin:0 22px;background:#100e0d }
:root[data-hero=cinema] .comparison-images img { object-fit:contain }
:root[data-hero=cinema] .comparison-top { padding:20px 26px }
:root[data-hero=cinema] .comparison-bottom { padding-inline:28px }
:root[data-hero=cinema] .case-caption { display:none }
:root[data-hero=cinema] .cinema-note { display:flex;justify-content:space-between;gap:30px;width:100%;max-width:1070px;margin-top:-22px;font-size:15px;color:var(--muted) }
:root[data-hero=cinema] .cinema-note a { display:flex;align-items:center;gap:8px;color:var(--accent) }
.guide-page { max-width:1440px;margin:auto;padding:0 40px }
.guide-hero { padding:29px 0 33px;border-bottom:1px solid var(--line) }
.back-link { display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:15px;margin-bottom:21px }
.back-link .icon { transform:rotate(180deg);width:17px;height:17px }
.back-link:hover { color:var(--accent) }
.guide-hero-grid { display:grid;grid-template-columns:1fr;gap:50px;align-items:center }
.guide-hero h1 { font-size:clamp(34px,3.6vw,50px);margin:12px 0 16px;letter-spacing:-.035em;line-height:1.38 }
.guide-intro { font-size:20px;line-height:1.85;max-width:760px;color:var(--body) }
.guide-meta { display:flex;gap:24px;margin-top:22px;flex-wrap:wrap;font-size:15px;color:var(--muted) }
.guide-meta>span, .guide-meta>a { display:flex;align-items:center;gap:8px }
.guide-meta>a { color:var(--accent) }
.guide-meta .icon { width:18px;height:18px }
.guide-cover { display:none }
.guide-layout { display:grid;grid-template-columns:224px minmax(0,1fr);gap:54px;padding-top:28px }
.guide-sidebar nav { position:sticky;top:116px;max-height:calc(100svh - 150px);overflow:auto;padding-right:14px }
.guide-sidebar nav>p { font-size:14px;color:var(--muted);margin-bottom:14px;padding-left:13px }
.guide-sidebar nav>a { display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:8px;margin-block:3px;font-size:15px;color:var(--muted);line-height:1.6;border-left:2px solid transparent }
.guide-sidebar nav>a:hover { color:var(--text);background:var(--surface) }
.guide-sidebar nav>a[aria-current=location] { background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent) }
.toc-number { font-size:13px;width:24px;flex:none;font-family:ui-monospace,monospace }
.toc-number .icon { width:17px;height:17px }
.sidebar-end { font-size:14px;color:var(--muted);padding:24px 12px;border-top:1px solid var(--line);margin-top:26px;display:flex;gap:10px;line-height:1.8 }
.sidebar-end .icon { margin-top:3px }
.guide-article { min-width:0;padding-bottom:20px }
.article-lede { padding:24px 28px;margin:0 0 34px;background:var(--surface);border-left:2px solid var(--accent);border-radius:0 10px 10px 0 }
.article-lede>p:last-child { font-size:18px;margin-top:8px;line-height:1.8 }
.article-lede strong { font-weight:500 }
.lesson-step { padding:34px 0 44px;scroll-margin-top:98px }
.lesson-step+.lesson-step { border-top:1px solid var(--subtle) }
.step-heading { display:flex;align-items:center;gap:18px;margin-bottom:22px }
.step-index { font-family:ui-monospace,"SFMono-Regular",monospace;font-size:18px;font-weight:500;height:46px;min-width:46px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);color:var(--accent) }
.step-heading h2 { font-size:28px;line-height:1.5;font-weight:650;letter-spacing:-.02em }
.step-heading>div>p { font-size:17px;margin-top:8px;color:var(--muted) }
.step-copy { max-width:800px;font-size:var(--body-size);line-height:1.85 }
.step-copy>p+p { margin-top:15px }
.field { font-size:1em;font-weight:600;background:var(--accent-soft);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 4px;margin-inline:3px;border-radius:3px;color:var(--text) }
.tutorial-figure { margin-top:28px;width:100%;max-width:100% }
.image-trigger { display:block;width:100%;padding:20px;background:var(--inset);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;cursor:zoom-in }
.image-trigger img { max-width:100%;width:100%;height:auto;object-fit:contain;margin:auto;border-radius:5px }
.image-trigger:hover { border-color:var(--muted);background:var(--surface) }
.image-zoom { position:absolute;right:30px;bottom:30px;display:flex;gap:8px;align-items:center;padding:8px 12px;background:#171c25e8;color:#f4f5f7;border:1px solid #ffffff40;border-radius:7px;font-size:13px;box-shadow:0 2px 10px #0002 }
.image-zoom .icon { width:16px;height:16px }
.tutorial-figure figcaption { font-size:14px;color:var(--muted);margin-top:12px;line-height:1.7 }
.tutorial-figure img { height:auto }
.prompt-group { margin-top:26px;border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden }
.prompt-tabs { display:flex;padding:7px 12px 0;border-bottom:1px solid var(--line);gap:14px }
.prompt-tabs button { font-size:16px;padding:13px 17px;position:relative;color:var(--muted);min-height:48px }
.prompt-tabs button[aria-selected=true] { color:var(--accent) }
.prompt-tabs button[aria-selected=true]:after { content:"";position:absolute;height:2px;background:var(--accent);left:15px;right:15px;bottom:-1px }
.prompt-example { background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:25px;overflow:hidden }
.prompt-group .prompt-example { border:0;margin:0;border-radius:0 }
.prompt-heading { display:flex;justify-content:space-between;gap:16px;align-items:center;padding:19px 24px 0 }
.prompt-heading>span { font-size:15px;color:var(--muted);display:flex;align-items:center;gap:8px }
.prompt-heading>span .icon { color:var(--accent);width:17px;height:17px }
.copy-btn { font-size:14px;padding:7px 12px;min-height:40px;min-width:98px;background:var(--elevated);flex:none }
.copy-btn .icon { width:17px;height:17px }
.prompt-body { font-size:var(--body-size);line-height:1.9;padding:18px 24px 25px;color:var(--text);white-space:pre-wrap }
.callout { font-size:17px;line-height:1.85;background:var(--accent-soft);padding:22px 24px;margin:26px 0 0;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);display:flex;align-items:flex-start;gap:14px }
.callout>.icon { margin-top:5px;color:var(--accent) }
.callout strong { font-size:17px;display:block;margin-bottom:5px }
.callout p { color:var(--body) }
.callout.warning { background:rgba(218,177,100,.07);border-color:rgba(218,177,100,.3) }
.callout.warning>.icon { color:#dbba7f }
:root[data-theme=light] .callout.warning>.icon { color:#876023 }
.model-list { border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-top:26px }
.model-row { display:grid;grid-template-columns:38px 95px 115px 1fr;align-items:center;gap:16px;padding:22px 24px;font-size:16px }
.model-row+.model-row { border-top:1px solid var(--line) }
.model-row>strong { font-size:18px }
.model-row>p { color:var(--muted);line-height:1.7 }
.model-row>span:nth-last-child(2) { color:var(--text) }
.model-symbol { color:var(--accent);display:grid;place-items:center;background:var(--accent-soft);height:36px;width:36px;border-radius:10px }
.parameter-grid { display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px }
.parameter-grid>div { background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px }
.parameter-grid>div>.icon { float:right;color:var(--muted) }
.parameter-grid h3 { font-size:19px;margin-bottom:16px }
.param-values { display:flex;gap:12px;align-items:center;color:var(--accent);font-size:19px }
.param-values small { font-size:14px;color:var(--muted) }
.param-values>span { padding:5px 10px;background:var(--accent-soft);border:1px solid var(--line);border-radius:6px }
.parameter-grid p { font-size:17px;color:var(--body);line-height:1.85;margin-top:18px }
.status-row { display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:28px 0 }
.status-row>span { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);padding:10px 15px;border-radius:8px;font-size:16px;background:var(--surface) }
.status-row>span.status-selected { background:var(--accent-soft);border-color:var(--accent);color:var(--accent) }
.status-row>.icon { color:var(--muted) }
.section-divider { display:flex;align-items:center;gap:20px;margin:8px 0 32px;color:var(--accent);font-size:14px }
.section-divider:after { content:"";height:1px;background:var(--line);flex:1 }
.section-divider>span { display:flex;align-items:center;gap:9px }
.annotation-principle { display:flex;gap:35px;align-items:center;justify-content:center;padding:27px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:26px 0 32px }
.annotation-principle>div { display:flex;align-items:center;gap:17px;font-size:15px;color:var(--muted) }
.annotation-principle strong { display:block;font-size:25px;margin-top:3px;color:var(--text) }
.annotation-principle>div>.icon { height:32px;width:32px;color:var(--accent) }
.annotation-principle>span { font-size:25px;color:var(--muted) }
.substep { display:flex;gap:17px;margin-top:36px;font-size:var(--body-size);line-height:1.85;max-width:830px }
.substep>span { flex:none;display:grid;place-items:center;height:32px;width:32px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--accent);margin-top:2px }
.substep h3 { font-size:22px;margin-bottom:13px }
.substep p { color:var(--body) }
.substep>div { min-width:0 }
.substep+.tutorial-figure { margin-top:25px }
.annotation-section>.prompt-example { margin-bottom:24px }
.faq-list { border-top:1px solid var(--line);margin-top:26px }
.faq-list details { border-bottom:1px solid var(--line) }
summary { cursor:pointer;list-style:none }
summary::-webkit-details-marker { display:none }
.faq-list summary { display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:19px;font-weight:550;padding:24px 0;color:var(--text) }
.faq-list details[open] summary .icon { transform:rotate(45deg) }
.faq-list summary .icon { transition:transform var(--normal);color:var(--muted) }
.faq-list details>div { max-width:800px;font-size:18px;line-height:1.85;padding:0 38px 24px 0;color:var(--body) }
details[open]>div { animation:fade-in var(--normal) }
.lesson-video { margin-top:42px;scroll-margin-top:100px }
.lesson-video+.lesson-video { margin-top:55px }
.video-heading h3 { font-size:26px;margin-top:10px }
.video-heading>div>p:last-child { font-size:17px;margin:12px 0 22px;line-height:1.85;color:var(--muted) }
.video-layout { border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);display:grid;grid-template-columns:1fr }
.player { background:#080b10;aspect-ratio:1600 / 870;position:relative;min-width:0;overflow:hidden }
.player video { width:100%;height:100%;object-fit:contain }
.video-cover { position:absolute;inset:0;width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:0 }
.video-cover>img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain }
.video-shade { position:absolute;inset:0;background:linear-gradient(0deg,#080d17dd,#080d172a 70%) }
.cover-play { position:relative;display:grid;place-items:center;background:#f0f1ffeF;color:#242841;border:1px solid #fff5;width:76px;height:76px;border-radius:50%;box-shadow:0 0 0 10px #ffffff10;transition:transform var(--normal),box-shadow var(--normal) }
.cover-play .icon { width:30px;height:30px;fill:currentColor;stroke-width:1;margin-left:3px }
.video-cover:hover .cover-play { transform:scale(1.055);box-shadow:0 0 0 16px #ffffff0d }
.cover-label { position:absolute;bottom:27px;left:28px;right:28px;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:500 }
.cover-label b { font:14px ui-monospace,monospace;background:#101622c9;border:1px solid #ffffff30;padding:6px 9px;border-radius:5px }
.video-status { position:absolute;inset:0;background:#0d1424dd;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;font-size:17px;z-index:2 }
.video-chapters { padding:20px 24px;min-width:0 }
.chapter-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:15px;color:var(--muted) }
.chapter-head label { display:flex;align-items:center;gap:7px;font-size:14px }
.speed-select { background:var(--inset);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:14px;min-height:34px }
.chapter-list { display:grid;grid-template-columns:1fr 1fr;gap:6px }
.chapter-list button { display:flex;align-items:center;gap:10px;text-align:left;font-size:15px;line-height:1.65;padding:12px 10px;border-radius:7px;color:var(--body);border:1px solid transparent;min-height:46px }
.chapter-list button:hover { background:var(--elevated) }
.chapter-list button.active { background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent) }
.chapter-list b { font-weight:500;flex:1 }
.chapter-list time { font-size:13px;color:var(--muted);font-family:ui-monospace,monospace }
.chapter-list .icon { width:16px;height:16px }
.article-end { border-top:1px solid var(--line);margin-top:32px;text-align:center;padding:60px 20px 15px }
.article-end>span { font-size:14px;color:var(--accent);display:flex;justify-content:center;align-items:center;gap:8px }
.article-end h2 { font-size:30px;margin:17px 0 }
.article-end p { font-size:18px;color:var(--muted);margin-bottom:26px }
.mobile-toc { display:none }
.mobile-toc summary { display:flex;align-items:center;gap:12px;font-size:16px;padding:16px 20px;color:var(--text);min-height:56px }
.current-chapter { color:var(--muted);font-size:14px;margin-left:auto }
.mobile-toc summary>.icon:last-child { width:16px;height:16px }
.mobile-toc nav { padding:6px 14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:5px }
.mobile-toc nav>a { display:flex;align-items:center;gap:9px;padding:11px 8px;font-size:15px;border-radius:6px;color:var(--body) }
.mobile-toc nav>a[aria-current=location] { background:var(--accent-soft);color:var(--accent) }
:root[data-media=wide] .tutorial-figure { max-width:100% }
dialog { background:var(--surface);color:var(--body);border:1px solid var(--line);padding:0;box-shadow:0 30px 120px #0008;border-radius:18px;max-width:calc(100vw - 28px);max-height:calc(100svh - 40px);overscroll-behavior:contain }
dialog::backdrop { background:#060a13b3;backdrop-filter:blur(5px) }
dialog[open] { animation:dialog-in var(--normal) var(--ease) }
body:has(dialog[open]) { overflow:hidden }
.dialog-head { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;border-bottom:1px solid var(--line) }
.dialog-head h2 { font-size:22px;line-height:1.5 }
.dialog-head .eyebrow { margin-bottom:6px }
.dialog-head>div:last-child { display:flex;gap:10px }
.dialog-head>div:first-child { display:block }
.search-dialog { width:700px;margin:12vh auto auto }
.search-dialog .dialog-head { padding:20px 25px }
.search-input-wrap { display:flex;align-items:center;gap:13px;padding:22px 26px;border-bottom:1px solid var(--line) }
.search-input-wrap .icon { color:var(--accent);width:24px;height:24px }
.search-input-wrap input { border:0;background:none;outline:0;color:var(--text);font-size:21px;min-width:0;flex:1;height:35px }
.search-input-wrap input::placeholder { color:var(--muted) }
.search-help { font-size:14px;color:var(--muted);padding:17px 25px 5px }
.search-results { padding:8px 13px 18px;max-height:45vh;overflow:auto }
.search-result { display:flex;align-items:center;gap:16px;padding:15px 14px;border-radius:10px;font-size:17px;border:1px solid transparent }
.search-result>span:first-child { width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--elevated);color:var(--accent) }
.search-result div { flex:1;min-width:0 }
.search-result strong { display:block;font-size:17px }
.search-result small { font-size:14px;color:var(--muted);display:block;margin-top:4px }
.search-result.active { background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent) }
.search-result>span:last-child { font-size:14px;color:var(--muted) }
.search-footer { padding:14px 26px;display:flex;gap:22px;font-size:13px;color:var(--muted);border-top:1px solid var(--line) }
.no-results { padding:24px 15px;font-size:17px;line-height:1.8;color:var(--muted) }
.image-dialog { width:min(1400px,calc(100vw - 40px));height:min(900px,calc(100svh - 50px));overflow:hidden }
.image-dialog .dialog-head { height:80px;padding:16px 22px }
.image-dialog h2 { font-size:18px }
.image-canvas { height:calc(100% - 80px);width:100%;overflow:auto;padding:24px;background:var(--inset);display:grid;place-items:center }
.image-canvas img { width:auto;height:auto;max-height:100%;max-width:100%;object-fit:contain;border-radius:4px }
.image-canvas.is-zoomed { display:block }
.image-canvas.is-zoomed img { max-height:none;max-width:none;min-width:100%;width:var(--natural-width);margin:auto }
.toast { position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:400;max-width:min(90vw,680px);font-size:15px;background:var(--elevated);color:var(--text);padding:15px 22px;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);text-align:center;animation:fade-in var(--normal) }
.noscript { position:fixed;bottom:0;z-index:500;background:var(--accent);color:var(--accent-ink);width:100%;padding:20px;text-align:center }
@keyframes fade-in { from{opacity:0}to{opacity:1} }
@keyframes dialog-in { from{opacity:0;transform:translateY(8px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)} }
:root[data-motion=expressive] { --normal:260ms;--slow:320ms }
:root[data-motion=expressive] .path-card:hover { transform:translateY(-5px) }
:root[data-motion=expressive] .guide-feature:hover .feature-picture img { transform:scale(1.04) }
:root[data-motion=expressive] .round-arrow { transition:transform var(--normal) }
:root[data-motion=expressive] .guide-feature:hover .round-arrow { transform:rotate(-25deg) }
@media (min-width:1600px) {
  .guide-page { max-width:1530px;padding-inline:44px }
  .guide-layout { grid-template-columns:236px minmax(0,1fr);gap:64px }
  .guide-article { max-width:1100px }
  .guide-hero { padding-top:52px }
  .guide-hero h1 { font-size:54px }
  .home-hero { padding-top:105px }
  .header-inner { max-width:1530px }
  .step-copy { max-width:820px }
}
@media (max-width:1260px) {
  .wrap { margin-inline:40px }
  .site-footer { margin-inline:40px }
  .brand-note { display:none }
  .primary-nav { gap:22px }
  .header-actions { margin-left:26px }
  .home-hero { gap:38px;padding-top:64px }
  .hero-copy h1 { font-size:49px }
  .hero-intro { font-size:19px }
  .hero-actions .btn { padding-inline:16px;font-size:15px }
  .case-caption { font-size:13px }
  .case-caption>span { display:none }
  .guide-layout { grid-template-columns:205px minmax(0,1fr);gap:32px }
  .guide-sidebar nav { padding-right:0 }
  .guide-sidebar nav>a { font-size:15px;padding-inline:9px }
  .guide-hero h1 { font-size:46px }
  .model-row { grid-template-columns:32px 90px 1fr;gap:13px }
  .model-row>p { grid-column:2/-1 }
  .guide-page { padding-inline:32px }
  .image-trigger { padding:17px }
  .step-heading h2 { font-size:27px }
}
@media (max-width:1000px) {
  .header-inner { padding-inline:25px }
  .primary-nav { gap:19px }
  .search-trigger>span, .search-trigger>kbd { display:none }
  .search-trigger { width:42px;justify-content:center;padding:9px }
  .guide-layout { display:block;padding-top:26px }
  .guide-sidebar { display:none }
  .guide-article { max-width:100% }
  .mobile-toc { display:block;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:30px;position:sticky;top:87px;z-index:15;box-shadow:var(--shadow) }
  .guide-page { max-width:920px;padding-inline:36px }
  .guide-hero { padding:35px 0 36px }
  .guide-hero h1 { font-size:42px }
  .guide-intro { font-size:19px }
  .article-lede { margin-bottom:20px }
  .home-hero { gap:25px;padding-inline:30px }
  .hero-copy h1 { font-size:42px }
  .hero-intro { font-size:18px }
  .hero-actions { gap:5px }
  .hero-actions .btn { font-size:15px;padding:11px 16px }
  .hero-actions .btn.ghost { padding-inline:4px }
  .hero-meta { gap:10px;font-size:13px;flex-wrap:wrap }
  .hero-meta .icon { width:15px;height:15px }
  .comparison-top { padding:13px;gap:6px }
  .comparison-top>span { font-size:13px }
  .comparison-top>span>.icon { display:none }
  .segmented button { font-size:13px;padding:6px 9px }
  .comparison-bottom { font-size:13px;padding:13px 16px }
  .feature-content { padding:27px }
  .feature-content h3 { font-size:24px }
  .feature-content p { font-size:16px }
  .path-grid { gap:15px }
  .path-card { padding:25px 22px }
  .path-card h3 { font-size:20px }
  .path-card p { font-size:15px }
  .section-topline h2 { font-size:27px }
  .guide-meta { gap:18px }
}
@media (max-width:720px) {
  :root { scroll-padding-top:0 }
  .site-header { height:68px }
  .header-inner { padding-inline:20px }
  .brand { font-size:17px;gap:9px }
  .brand-mark { width:32px;height:32px;border-radius:9px }
  .brand-mark .icon { height:21px;width:21px }
  .primary-nav { display:none }
  .header-actions { margin-left:auto;gap:9px }
  .header-actions .icon-btn { height:41px;width:41px }
  .header-actions .search-trigger { height:41px;min-height:41px }
  .wrap { margin-inline:22px }
  .home-hero { display:flex;flex-direction:column;align-items:stretch;gap:36px;padding:43px 22px 42px }
  .hero-copy h1 { font-size:44px;margin:20px 0 18px;line-height:1.3 }
  .hero-intro { font-size:18px;line-height:1.85 }
  .hero-actions { margin-top:25px;gap:9px }
  .hero-actions .btn { font-size:15px;min-height:48px;padding-inline:17px }
  .hero-actions .btn.ghost { padding-inline:10px }
  .hero-meta { margin-top:24px;font-size:14px;gap:14px }
  .comparison-top { padding:16px }
  .comparison-top>span { font-size:14px }
  .segmented button { font-size:14px }
  .comparison-bottom { font-size:14px;padding:15px 18px }
  .hero-visual { max-width:520px;margin:auto;width:100% }
  .case-caption { font-size:13px }
  .case-caption>span { display:block }
  .home-guides { padding-top:23px }
  .section-topline { align-items:center;margin-bottom:22px;gap:12px }
  .section-topline h2 { font-size:25px }
  .section-count { font-size:13px }
  .guide-feature { grid-template-columns:1fr }
  .feature-picture { max-height:260px }
  .feature-content { padding:27px 24px }
  .feature-content h3 { font-size:26px }
  .feature-content p { font-size:17px }
  .feature-footer { font-size:14px }
  .feature-meta { font-size:14px }
  .home-paths { padding-top:47px }
  .path-grid { grid-template-columns:1fr;gap:16px }
  .path-card { padding:24px }
  .path-top { float:left;margin-right:20px }
  .path-top>span { display:none }
  .path-card h3 { font-size:22px;margin:0 0 9px }
  .path-card p { font-size:16px }
  .path-link { margin-top:22px }
  .site-footer { margin:55px 22px 0;padding:27px 0 44px;flex-wrap:wrap;gap:16px;font-size:14px }
  .site-footer .brand { width:100% }
  .site-footer p { max-width:100%;flex:1;font-size:14px }
  .site-footer>a:last-child { font-size:14px }
  .guide-page { padding-inline:22px }
  .guide-hero { padding:25px 0 28px }
  .back-link { font-size:14px;margin-bottom:24px }
  .guide-hero h1 { font-size:34px;line-height:1.4;margin:15px 0 16px }
  .guide-intro { font-size:18px;line-height:1.85 }
  .guide-hero .eyebrow { font-size:13px }
  .guide-meta { font-size:14px;gap:13px;row-gap:12px;margin-top:21px }
  .guide-meta span>.icon, .guide-meta a>.icon { width:16px;height:16px }
  .guide-layout { padding-top:21px }
  .mobile-toc { top:76px;margin-bottom:20px }
  .mobile-toc summary { padding:13px 15px;font-size:15px;min-height:53px;gap:9px }
  .current-chapter { font-size:13px }
  .mobile-toc nav { grid-template-columns:1fr;padding:0 10px 10px;max-height:60vh;overflow:auto }
  .mobile-toc nav>a { font-size:16px;padding:10px }
  .article-lede { padding:20px 21px;margin-bottom:18px }
  .article-lede .eyebrow { font-size:13px }
  .article-lede>p:last-child { font-size:17px;line-height:1.85 }
  .article-lede strong { display:block }
  .lesson-step { padding:27px 0 34px;scroll-margin-top:155px }
  .step-heading { gap:13px;margin-bottom:20px }
  .step-index { height:39px;min-width:39px;font-size:16px;border-radius:10px }
  .step-heading h2 { font-size:25px }
  .step-copy { font-size:var(--body-size);line-height:1.85 }
  .step-copy p+p { margin-top:15px }
  .tutorial-figure { margin-top:22px }
  .image-trigger { padding:12px;border-radius:10px }
  .image-zoom { right:20px;bottom:20px;font-size:13px;padding:6px 9px }
  .image-zoom .icon { height:14px;width:14px }
  .tutorial-figure figcaption { font-size:14px }
  .prompt-tabs { gap:4px;padding:5px 9px 0 }
  .prompt-tabs button { font-size:16px;padding:12px 15px }
  .prompt-heading { gap:8px;padding:17px 18px 0;align-items:flex-start }
  .prompt-heading>span { font-size:14px;line-height:1.75;gap:6px }
  .prompt-heading>span>.icon { margin-top:4px;display:none }
  .copy-btn { font-size:14px;min-width:81px;padding:8px 10px }
  .prompt-body { padding:17px 18px 23px;font-size:var(--body-size);line-height:1.9 }
  .callout { padding:19px 17px;font-size:17px;gap:10px;margin-top:24px }
  .callout strong { font-size:17px }
  .callout>.icon { width:18px;height:18px;margin-top:7px }
  .model-row { grid-template-columns:30px 1fr auto;gap:10px;padding:18px 16px;font-size:15px }
  .model-row>strong { font-size:18px }
  .model-row>p { font-size:16px;grid-column:2/-1 }
  .model-symbol { width:30px;height:30px;border-radius:7px }
  .model-symbol .icon { width:18px;height:18px }
  .parameter-grid { grid-template-columns:1fr;gap:17px }
  .parameter-grid>div { padding:24px }
  .parameter-grid p { font-size:17px }
  .parameter-grid h3 { font-size:20px }
  .status-row { gap:8px }
  .status-row>span { padding:8px 9px;font-size:14px;gap:5px }
  .status-row>span .icon { width:15px;height:15px }
  .status-row>.icon { width:16px;height:16px }
  .section-divider { margin-bottom:26px;font-size:14px }
  .annotation-principle { padding:20px 16px;gap:18px }
  .annotation-principle>div { gap:10px;font-size:13px }
  .annotation-principle>div>.icon { width:23px;height:23px }
  .annotation-principle strong { font-size:22px }
  .annotation-principle>span { font-size:22px }
  .substep { gap:11px;font-size:var(--body-size);margin-top:28px }
  .substep>span { height:27px;width:27px;font-size:14px;margin-top:3px }
  .substep h3 { font-size:21px }
  .substep .callout { margin-left:-38px }
  .faq-list summary { font-size:18px;padding:21px 0;gap:15px;line-height:1.7 }
  .faq-list details>div { font-size:17px;padding-right:0 }
  .video-heading h3 { font-size:23px }
  .video-heading>div>p:last-child { font-size:17px }
  .video-heading .eyebrow { font-size:13px }
  .video-chapters { padding:17px }
  .chapter-head { font-size:14px }
  .chapter-list { grid-template-columns:1fr }
  .chapter-list button { font-size:15px;padding:12px 7px }
  .cover-play { height:56px;width:56px;box-shadow:0 0 0 7px #ffffff10 }
  .cover-play .icon { height:24px;width:24px }
  .cover-label { bottom:14px;left:17px;right:17px;font-size:14px }
  .cover-label b { font-size:13px;padding:4px 7px }
  .lesson-video { scroll-margin-top:145px }
  .article-end { padding:42px 0 12px }
  .article-end h2 { font-size:27px }
  .article-end p { font-size:17px;line-height:1.85 }
  .article-end>span { font-size:14px }
  .toast { bottom:88px;font-size:14px;padding:13px 17px }
  .dialog-head { padding:20px;gap:10px }
  .dialog-head h2 { font-size:20px }
  .dialog-head .icon-btn { height:38px;width:38px }
  .search-dialog { margin:8vh auto auto;width:calc(100vw - 22px) }
  .search-dialog .dialog-head { padding:17px 20px }
  .search-input-wrap { padding:18px 20px }
  .search-input-wrap input { font-size:18px }
  .search-results { max-height:55svh }
  .search-result { padding:13px 9px;gap:11px }
  .search-result strong { font-size:17px }
  .search-result>span:last-child { display:none }
  .search-result small { font-size:13px;line-height:1.8 }
  .search-help { padding-left:21px }
  .image-dialog { width:calc(100vw - 16px);height:calc(100svh - 50px);max-width:calc(100vw - 16px) }
  .image-dialog .dialog-head { height:auto;min-height:75px;padding:13px;gap:8px }
  .image-dialog h2 { font-size:15px;max-width:48% }
  .image-dialog .dialog-head .btn { padding:8px;min-height:38px;font-size:13px }
  .image-dialog .dialog-head>div { gap:7px }
  .image-canvas { height:calc(100% - 90px);padding:12px }
  :root[data-hero=cinema] .home-hero { padding-top:44px;gap:31px }
  :root[data-hero=cinema] .hero-copy h1 { font-size:44px }
  :root[data-hero=cinema] .hero-intro { font-size:18px }
  :root[data-hero=cinema] .comparison-images { aspect-ratio:1.45;margin:0 12px }
  :root[data-hero=cinema] .comparison-top { padding:15px }
  :root[data-hero=cinema] .comparison-bottom { padding:14px 18px }
  :root[data-hero=cinema] .cinema-note { font-size:14px;flex-direction:column;gap:12px;align-items:center;margin-top:-2px }
}
@media (max-width:370px) {
  .hero-copy h1, :root[data-hero=cinema] .hero-copy h1 { font-size:39px }
  .hero-actions .btn { padding-inline:12px;font-size:14px }
  .hero-meta { font-size:13px;gap:9px }
  .guide-page { padding-inline:18px }
  .guide-hero h1 { font-size:31px }
  .guide-meta { gap:11px;font-size:13px }
  .status-row { gap:6px }
  .status-row>span { padding:8px 7px;font-size:14px }
  .status-row>span .icon { display:none }
  .step-heading h2 { font-size:24px }
  .annotation-principle { gap:12px;padding:18px 12px }
  .annotation-principle>div { gap:8px }
  .annotation-principle>div>.icon { display:none }
}
@media (prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto }
  *, *:before, *:after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important }
  .guide-feature:hover, .path-card:hover, .guide-feature:hover .feature-picture img { transform:none!important }
}
@media print {
  .site-header, .guide-sidebar, .mobile-toc, dialog, .site-footer, .video-cover { display:none!important }
  .guide-page, .guide-layout, .guide-article { display:block!important;max-width:none!important;padding:0!important }
  body { color:#222;background:#fff }
  .step-copy { font-size:16px }
  h1, h2, h3, strong { color:#111 }
  .lesson-step { break-inside:avoid }
  .tutorial-figure { max-width:650px!important }
  .player { display:none }
}

/* Standalone site states. No selection controls or workbench assets are shipped. */
.missing-page { min-height:65vh; padding:90px 40px; }
.missing-page h1 { font-size:clamp(30px,4vw,48px); margin:18px 0; }
.missing-page p:not(.eyebrow) { font-size:19px; margin-bottom:28px; }
.video-noscript { position:absolute; inset:0; display:grid; place-items:center; background:var(--surface); z-index:4; padding:28px; }
.video-noscript a { text-decoration:underline; font-size:19px; color:var(--accent); }
.image-trigger img { height:auto; }
@media(max-width:720px) { .missing-page { padding:64px 20px; } }