/* HÁNABǏ's hand-drawn voice, with a clear editorial rhythm. Source, not a generated edit. */
html { scroll-padding-top: 112px; }
body.site-layout { --bg:#171819; --panel:#202122; --panel2:#292a2b; --line:#3c3d3e; --text:#f5f2ec; --muted:#c3c2bf; --dim:#adaeaa; --accent:#f04348; --mint:#f5b5af; }
.site-layout .site-top,.site-layout main.page-main,.site-layout .site-footer { width:min(1360px,calc(100% - 96px)); max-width:1360px; }
.site-layout .site-top { min-height:92px; gap:32px; position:relative; }
.site-layout .site-nav { gap:24px; }
.site-layout .site-nav a { padding:9px 2px; border-radius:0; position:relative; color:#cac9c5; font-size:14px; }
.site-layout .site-nav a:is([aria-current="page"], [data-current-section]) { background:none; color:#fff; }
.site-layout .site-nav a::after { content:""; position:absolute; height:3px; left:0; right:0; bottom:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 180ms ease; }
.site-layout .site-nav a:hover { background:none; }
.site-layout .site-nav a:hover::after,.site-layout .site-nav a:is([aria-current="page"], [data-current-section])::after { transform:scaleX(1); }
.site-layout .site-version { font-size:12px; padding-left:22px; border-left:1px solid var(--line); }
.site-layout main.page-main { padding-top:44px; }
.site-layout .eyebrow { font-size:11px; color:#f2a5a0; letter-spacing:.1em; }
.site-layout .page-intro { padding:20px 0 18px; max-width:100%; border-bottom:1px solid var(--line); }
.site-layout .page-intro h1 { font-size:clamp(34px,4vw,60px); line-height:1.2; font-weight:800; margin:14px 0 22px; }
.site-layout .page-intro .lede { font-size:16px; max-width:720px; }
.site-layout .site-footer { padding:44px 0 38px; font-size:13px; align-items:center; }
.site-layout .footer-signature>span { display:block; font-size:27px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:var(--text); }
.site-layout .footer-signature>small { display:block; font-size:11px; margin-top:7px; color:var(--dim); }
.site-layout .site-footer nav { margin-left:auto; gap:28px; }
.site-layout .site-footer a { display:inline-flex; align-items:center; min-height:44px; }
.site-layout .site-footer .footer-top { color:#f6b3ae; margin-left:12px; }
.site-layout .breadcrumbs { font-size:13px; }
.site-layout .breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; }
.site-layout .legacy-article>a:first-child,.site-layout .legacy-article nav a,.site-layout .legacy-article footer a { display:inline-flex; align-items:center; min-height:44px; }
.site-layout .legacy-article>nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin:20px 0; }
.site-layout .article-body figure a[data-image-preview] { display:block; min-height:44px; }
.site-layout .demo-seek { min-height:44px; }

/* Home: slogan and artwork first; the user's complete words remain visible just below. */
.site-layout .home-hero { display:block; padding:8px 0 0; }
.site-layout .hero-opening { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; }
.site-layout .home-copy>.eyebrow { display:flex; align-items:center; gap:9px; color:#d6d5d0; font-size:12px; margin-bottom:24px; }
.site-layout .home-copy>.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.site-layout .home-copy h1 { font-size:clamp(39px,4.45vw,66px); line-height:1.27; letter-spacing:-.055em; margin:0 0 34px; max-width:11.5em; font-weight:900; }
.site-layout .slogan-interjection { color:var(--accent); }
.site-layout .slogan-last { display:block; }
.site-layout .hero-actions { margin:0; }
.site-layout .home-copy .download-meta { font-size:12px; line-height:1.7; margin:12px 0 8px; max-width:460px; color:#c3c1bd; letter-spacing:0; }
.site-layout .home-copy>.text-link { font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
.site-layout a.download { min-height:92px; padding:17px 28px; box-shadow:7px 8px 0 #94242a; background:#d93036; }
.site-layout a.download strong { font-size:24px; }
.site-layout a.download small { font-size:13px; }
.site-layout a.download:hover { background:#db343b; transform:translate(1px,-2px) rotate(-1deg); box-shadow:6px 11px 0 #94242a,0 0 25px #fff0bf18; }
.site-layout .home-art { transform:rotate(1.2deg); }
.site-layout .home-art .art-frame { background:#e8343a; border:1px solid #45413e; padding:8px; border-radius:3px; box-shadow:10px 14px 0 #101112; }
.site-layout .home-art img { width:100%; height:auto; max-height:none; aspect-ratio:1.39; object-fit:cover; }
.site-layout .home-art figcaption { margin-top:24px; font-size:14px; line-height:1.8; color:#d1cfca; flex-wrap:wrap; gap:6px 16px; align-items:baseline; }
.site-layout .home-art figcaption>span:first-child { font-size:inherit; color:inherit; margin-left:0; white-space:normal; }
.site-layout .home-art figcaption>span:last-child { color:#b1b0ac; margin-left:0; font-size:10px; letter-spacing:.15em; }
.site-layout .hero-manifesto { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; margin:58px 0 0; padding:30px 0 40px; border-top:1px solid var(--line); }
.site-layout #philosophy-title { font-size:28px; line-height:1.5; margin:0; color:var(--text); letter-spacing:-.025em; }
.site-layout #philosophy-title span { display:block; margin-top:10px; font-size:10px; line-height:1.8; letter-spacing:.12em; font-weight:500; color:#f2a5a0; }
.site-layout .hero-manifesto .manifesto { display:block; padding:0; margin:0; border:0; background:none; max-width:880px; }
.site-layout .hero-manifesto .manifesto p { font-size:17px; line-height:1.95; margin:0 0 20px; color:#d1cfca; }
.site-layout .hero-manifesto .manifesto p:last-child { margin-bottom:0; }
.site-layout .home-links { margin:0 0 86px; }
.site-layout .home-links .route-card { padding:27px 26px 29px 0; transition:background-color 180ms ease; }
.site-layout .home-links .route-card :is(h2,h3) { font-size:21px; margin:9px 0 10px; }
.site-layout .home-links .route-card p { font-size:16px; }
.site-layout .home-links .route-card>b { font-size:22px; top:26px; transition:transform 180ms ease; }
.site-layout .home-links .route-card:hover>b { transform:translate(2px,-2px); color:var(--text); }

/* One considered feature at a time: the media gets the space, not a wall of cards. */
.site-layout .showcase-heading { grid-template-columns:minmax(0,1fr) minmax(240px,.66fr) auto; gap:0 44px; align-items:end; padding-bottom:28px; margin-bottom:0; }
.site-layout .showcase-heading>.eyebrow { grid-column:1/-1; margin-bottom:18px; }
.site-layout .showcase-heading h2 { font-size:clamp(32px,3.3vw,48px); line-height:1.18; letter-spacing:-.045em; margin:0; }
.site-layout .showcase-heading p { grid-column:2; grid-row:2; margin:0 0 3px; font-size:16px; line-height:1.9; color:var(--muted); }
.site-layout .showcase-heading>a { grid-column:3; grid-row:2; font-size:13px; min-height:44px; display:inline-flex; gap:18px; align-items:center; white-space:nowrap; }
.site-layout .showcase-tabs { border-top:1px solid var(--line); border-bottom:1px solid var(--line); gap:0; padding:0; margin:0; display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.site-layout .showcase-tab { flex:1; padding:19px 14px; border:0; border-radius:0; background:transparent; color:#bdbdb9; font-size:14px; min-height:70px; position:relative; white-space:nowrap; }
.site-layout .feature-number { font-size:10px; color:#c0b3ad; margin-right:10px; font-family:Consolas,monospace; }
.site-layout .showcase-tab[aria-selected=true] { color:#f5f2ec; background:#272323; }
.site-layout .showcase-tab[aria-selected=true]::after { content:""; position:absolute; height:3px; bottom:0; left:0; right:0; background:var(--accent); }
.site-layout .showcase-tab:hover { background:#282727; color:white; }
.site-layout .showcase-tab:focus-visible { outline-offset:-5px; }
.site-layout .showcase-panel:not([hidden]) { grid-template-columns:minmax(0,2.05fr) minmax(255px,1fr); min-height:480px; background:#202122; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.site-layout .home-showcase .showcase-media { height:480px; padding:28px; background:#111213; border-right:1px solid var(--line); }
.site-layout .home-showcase .showcase-media>img { width:100%; height:100%; object-fit:contain; }
.site-layout .home-showcase .showcase-media>picture { display:grid; place-items:center; width:100%; height:100%; }
.site-layout .home-showcase .showcase-media>picture>img { width:100%; height:100%; object-fit:contain; }
.site-layout .showcase-image-preview { display:block; position:relative; width:100%; height:100%; }
.showcase-image-preview picture { display:grid; place-items:center; width:100%; height:100%; }
.showcase-image-preview img { width:100%; height:100%; object-fit:contain; }
.showcase-image-preview>span { position:absolute; right:0; bottom:0; background:#171819e8; padding:8px 10px; border:1px solid #414345; color:#d7d3cd; font-size:11px; }
.site-layout .home-showcase .showcase-copy { padding:38px 32px; gap:0; }
.site-layout .home-showcase .showcase-copy .eyebrow { font-size:11px; line-height:1.8; margin-bottom:22px; }
.site-layout .home-showcase .showcase-copy h3 { font-size:30px; line-height:1.35; letter-spacing:-.035em; margin:0 0 21px; }
.site-layout .home-showcase .showcase-copy h3>span { display:block; }
.site-layout .home-showcase .showcase-copy p { font-size:16px; line-height:1.95; color:#c7c6c2; margin:0 0 25px; }
.site-layout .home-showcase .showcase-copy a { min-height:44px; display:inline-flex; align-items:center; font-size:14px; margin-top:0; }
.site-layout .showcase-note { font-size:14px; line-height:1.85; color:#c5c2bd; margin:17px 0 58px; }

/* Pen-first web demonstration: bounded memory, three real interactions, no global keys. */
.pen-playground { height:100%; width:100%; display:flex; flex-direction:column; font-size:12px; }
.pen-demo-bar { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:0 0 8px; color:#dedbd5; }
.site-layout .pen-demo-bar a { min-height:44px; display:inline-flex; align-items:center; font-size:14px; color:#f5b5af; }
.pen-native-reference { display:none; }
.pen-demo-bar>span:first-child { display:flex; gap:8px; align-items:center; }
.pen-demo-bar i { width:6px; height:6px; background:#f04348; border-radius:50%; }
.pen-demo-type { font-size:12px; color:#b2b0aa; }
.pen-paper { position:relative; flex:1; min-height:0; overflow:hidden; background:#ece9e2; border-radius:3px; isolation:isolate; }
.pen-paper canvas { display:block; width:100%; height:100%; background:transparent; touch-action:none; cursor:crosshair; }
.pen-paper-hint { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#55524d; }
.pen-paper-hint>span { font-size:27px; font-weight:500; letter-spacing:.04em; }
.pen-paper-hint small { font-size:14px; margin-top:9px; }
.pen-paper-hint svg { width:100px; height:55px; margin:10px 0 -30px; fill:none; stroke:#f04348; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transform:rotate(12deg); }
.pen-paper.has-strokes .pen-paper-hint,.pen-paper.wheel-open .pen-paper-hint { display:none; }
.pen-mini-wheel { position:absolute; width:240px; height:230px; pointer-events:none; transform:translate(-50%,-50%) scale(var(--pen-wheel-scale,1)); }
.pen-mini-wheel button { position:absolute; pointer-events:auto; display:grid; place-items:center; width:var(--pen-target-size,48px); height:var(--pen-target-size,48px); margin:calc((48px - var(--pen-target-size,48px))/2); padding:0; background:#2b2c30; color:#f5f2ec; border:2px solid transparent; border-radius:50%; box-shadow:0 5px 14px #1115; transition:transform 180ms cubic-bezier(.25,.8,.25,1),border-color 140ms ease; }
.pen-mini-wheel button[data-pen-tool=brush] { left:91px; top:14px; }
.pen-mini-wheel button[data-pen-tool=eraser] { left:32px; top:50px; }
.pen-mini-wheel button[data-pen-tool=fill] { left:19px; top:121px; }
.pen-mini-wheel button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pen-mini-wheel button.is-candidate { transform:scale(1.1); border-color:#f04348; box-shadow:0 0 0 5px #f0434820,0 5px 14px #1115; }
.pen-mini-wheel button span { display:none; position:absolute; white-space:nowrap; color:#202124; font-size:calc(11px / var(--pen-wheel-scale,1)); line-height:1.35; pointer-events:none; }
.pen-mini-wheel button span svg { position:absolute; inset:0; width:100%; height:100%; stroke:none; fill:#faf8f2; filter:drop-shadow(0 2px 2px #0002); }
.pen-mini-wheel button span b { position:relative; display:block; font-weight:500; }
.pen-mini-wheel [data-pen-tool=brush] span { left:-1px; top:-42px; width:50px; height:42px; }
.pen-mini-wheel [data-pen-tool=brush] span b { margin-top:5px; }
.pen-mini-wheel [data-pen-tool=eraser] span { left:-62px; top:-31px; width:70px; height:44px; }
.pen-mini-wheel [data-pen-tool=eraser] span b { width:50px; margin-top:6px; }
.pen-mini-wheel [data-pen-tool=fill] span { left:-91px; top:23px; width:90px; height:40px; }
.pen-mini-wheel [data-pen-tool=fill] span b { width:74px; margin-top:10px; }
.pen-mini-wheel button.is-candidate span { display:block; }
.pen-wheel-origin { position:absolute; left:117px; top:118px; width:6px; height:6px; border:1px solid #9b948a; border-radius:50%; }
.pen-mini-wheel:not([hidden]) button { animation:pen-wheel-in 200ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes pen-wheel-in { from { opacity:0; translate:22px 18px; } to { opacity:1; translate:0 0; } }
.pen-demo-controls { display:flex; gap:8px; align-items:center; padding:13px 0 0; }
.site-layout .pen-demo-controls button { font-size:14px; min-height:44px; min-width:44px; white-space:nowrap; flex-shrink:0; padding:5px 12px; border-radius:5px; }
.site-layout .pen-demo-controls button:disabled { opacity:.45; cursor:default; }
.pen-demo-controls .pen-wheel-toggle { background:#f1eee7; color:#242426; border-color:#f1eee7; }
.pen-demo-controls .pen-wheel-toggle[aria-expanded=true] { background:#d93036; border-color:#d93036; color:white; }
.pen-demo-controls kbd { font-size:11px; margin-left:10px; padding:1px 4px; color:inherit; background:none; border-color:#7776; }
.pen-current { color:#d3cec4; margin-left:auto; font-size:12px; white-space:nowrap; flex-shrink:0; }
.pen-playground>p { margin:8px 0 0; font-size:14px; line-height:1.65; color:#c5c2bc; }
.monitor-playground { width:100%; height:100%; display:flex; flex-direction:column; font-size:12px; }
.monitor-demo-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-bottom:13px; color:#dedbd5; }
.monitor-demo-bar small { font-size:12px; color:#b2b0aa; }
.monitor-screen { flex:1; min-height:0; position:relative; overflow:hidden; border-radius:3px; background:#eee; cursor:ew-resize; touch-action:none; user-select:none; }
.monitor-screen.dragging { cursor:grabbing; }
.monitor-image { width:100%; height:100%; will-change:auto; }
.monitor-image picture { display:block; width:100%; height:100%; }
.monitor-image img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.monitor-shot,.monitor-code { position:absolute; bottom:13px; color:white; font-size:12px; line-height:1.5; background:#161819cc; padding:3px 8px; border-radius:3px; font-variant-numeric:tabular-nums; }
.monitor-shot { left:12px; }
.monitor-code { right:12px; font-family:Consolas,monospace; }
.monitor-demo-controls { display:flex; gap:16px; align-items:center; padding:15px 0 0; }
.site-layout .monitor-demo-controls button { min-height:44px; padding:5px 13px; font-size:14px; min-width:80px; }
.monitor-demo-controls input { min-width:0; flex:1; width:100%; accent-color:#ee4146; min-height:44px; margin:0; cursor:ew-resize; }
.monitor-demo-controls output { white-space:nowrap; min-width:49px; color:#d0ccc4; font-family:Consolas,monospace; }
.monitor-playground>p { font-size:14px; line-height:1.7; margin:8px 0 0; color:#c5c2bc; }

/* Reading and download destinations inherit the same hierarchy. */
.site-layout .download-card,.site-layout .base-download { border-radius:5px; background:#202122; }
.site-layout .base-download { border-top:3px solid #f04348; }
.site-layout .download-card.patch { border-top:3px solid #b0d878; }
.site-layout .download-card.model { border-top:3px solid #9b9ea7; }
.site-layout .download-card :is(h2,h3),.site-layout .base-download h2 { font-size:29px; font-weight:750; }
.site-layout .download-card p,.site-layout .base-download>p { font-size:14px; color:#c8c6c0; }
.site-layout .download-steps { gap:28px 48px; }
.site-layout .download-steps>h2 { grid-column:1 / -1; margin:0; font-size:28px; line-height:1.4; }
.site-layout .download-steps span { font-size:11px; line-height:1.7; }
.site-layout .download-steps h3 { font-size:18px; line-height:1.6; }
.site-layout .download-steps p { font-size:16px; line-height:1.9; color:var(--text); }
.site-layout .manual-search label { font-size:14px; color:#f1ece5; }
.site-layout .manual-search input { border-radius:3px; min-height:54px; font-size:16px; }
.site-layout .manual-search-field { position:relative; }
.site-layout .manual-search-field input { padding-right:62px; }
.site-layout .manual-search-field input::-webkit-search-cancel-button { display:none; }
.site-layout .manual-search-clear { position:absolute; top:5px; right:5px; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:3px; background:transparent; color:var(--text); }
.site-layout .manual-search-clear span { font-size:24px; line-height:1; }
.site-layout .manual-search-clear:hover { background:#302326; color:#f8e6e3; }
.site-layout #search-results { max-height:none; overflow:visible; }
.site-layout #search-results .search-empty { padding:14px 0; }
.site-layout #search-results .search-empty p { margin:0 0 12px; font-size:14px; line-height:1.8; color:var(--muted); }
.site-layout .search-suggestions { display:flex; flex-wrap:wrap; gap:8px; }
.site-layout .search-suggestions button { min-height:44px; padding:8px 14px; font-size:14px; line-height:1.5; }
.site-layout #search-results strong { font-size:18px; }
.site-layout #search-results small { font-size:12px; }
.site-layout #search-results .search-context { margin-top:7px; font-size:14px; line-height:1.8; color:var(--muted); }
.site-layout #search-results mark { background:none; color:#f5b5af; font-weight:600; }
.site-layout .group-section { padding:37px 0; }
.site-layout .group-heading h2 { font-size:25px; }
.site-layout .group-heading p { font-size:14px; color:#c1c0bb; }
.site-layout .article-link { min-height:124px; padding:21px 0; }
.site-layout .article-link :is(h3,div h3) { font-size:18px; }
.site-layout .article-link :is(p,div p) { font-size:14px; color:#c1c0bb; line-height:1.85; }
.site-layout .article-body .guide>p,.site-layout .article-body .guide>ol,.site-layout .article-body .guide>ul { font-size:16px; line-height:1.95; }
.site-layout .article-body .section-heading .lede { font-size:16px; }
.site-layout .article-sidebar a { min-height:44px; font-size:13px; }
.site-layout .article-body figcaption { font-size:14px; }
.site-layout .release-detail { border-radius:5px; padding:36px; }
.site-layout .release-detail .release-number { font-size:64px; font-weight:700; color:var(--text); }
.site-layout .release-detail :is(.release-intro,.release-items p) { font-size:16px; }
.site-layout .release-detail :is(.release-items,.release-archive) a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; font-size:14px; }
.site-layout .release-detail .release-note { font-size:14px; line-height:1.85; }
.site-layout .release-index { border-top:0; padding-top:0; }
.site-layout .release-index a { font-size:14px; }
.site-layout .release-detail .release-return { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; margin:8px 0 12px; }
.site-layout .release-rail { position:relative; top:auto; }
.site-layout .release-rail::before { bottom:7px; }
.site-layout .release-rail .version-link { flex:0 0 auto; min-width:115px; width:max-content; }
.site-layout .release-rail .version-link span { font-size:12px; }
.site-layout .release-items h4 { font-size:19px; }

@media (min-width:1500px) { .site-layout .home-copy h1 { font-size:68px; } }
@media (max-width:1100px) {
 .site-layout .site-top,.site-layout main.page-main,.site-layout .site-footer { width:calc(100% - 64px); }
 .site-layout .hero-opening { gap:40px; }
 .site-layout .home-copy h1 { font-size:clamp(37px,4.4vw,49px); }
 .site-layout .hero-manifesto { grid-template-columns:210px minmax(0,1fr); gap:32px; }
 .site-layout .showcase-heading { grid-template-columns:1fr auto; }
 .site-layout .showcase-heading p { grid-column:1; grid-row:3; margin-top:16px; }
 .site-layout .showcase-heading>a { grid-column:2; }
 .site-layout .feature-number { display:none; }
 .site-layout .home-showcase .showcase-media { height:460px; padding:20px; }
 .site-layout .showcase-panel:not([hidden]) { min-height:460px; grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr); }
 .site-layout .home-showcase .showcase-copy { padding:30px 26px; }
 .site-layout .home-showcase .showcase-copy h3 { font-size:26px; }
 .site-layout .site-footer nav { margin-left:0; }
}
@media (max-width:1000px) {
 .site-layout .hero-manifesto { grid-template-columns:1fr; gap:24px; }
 .site-layout .hero-manifesto .manifesto { max-width:880px; }
}
@media (max-width:760px) {
 html { scroll-padding-top:24px; }
 .site-layout .site-top,.site-layout main.page-main,.site-layout .site-footer { width:calc(100% - 40px); }
 .site-layout .site-top { min-height:80px; gap:0 12px; }
 .site-layout .site-version { font-size:10px; border:0; padding:0; }
 .site-layout .site-nav { gap:9px; }
 .site-layout .site-nav a { font-size:13px; padding:10px 7px; }
 .site-layout main.page-main { padding-top:32px; }
 .site-layout .hero-opening { grid-template-columns:1fr; gap:35px; }
 .site-layout .home-copy>.eyebrow { margin-bottom:18px; font-size:11px; }
 .site-layout .home-copy h1 { font-size:clamp(33px,7.65vw,54px); max-width:13em; line-height:1.28; margin-bottom:26px; }
 .site-layout .home-art { transform:rotate(.6deg); width:calc(100% - 10px); margin-top:7px; }
 .site-layout .home-art .art-frame { padding:6px; box-shadow:7px 9px 0 #101112; }
 .site-layout .home-art img { max-height:none; aspect-ratio:1.55; }
 .site-layout .home-art figcaption { margin-top:19px; font-size:14px; }
 .site-layout .home-art figcaption>span:last-child { font-size:10px; }
 .site-layout .home-copy .download-meta { max-width:330px; font-size:12px; margin-top:10px; }
 .site-layout a.download { min-height:86px; padding:14px 24px; }
 .site-layout a.download strong { font-size:22px; }
 .site-layout a.download small { font-size:12px; }
 .site-layout .hero-manifesto { margin-top:40px; padding:26px 0 32px; gap:23px; }
 .site-layout #philosophy-title { font-size:26px; }
 .site-layout #philosophy-title span { margin-top:7px; }
 .site-layout .hero-manifesto .manifesto p { font-size:16px; line-height:1.95; margin-bottom:18px; }
 .site-layout .hero-manifesto .manifesto p:last-child { margin-bottom:0; }
 .site-layout .home-links { margin-bottom:52px; }
 .site-layout .home-links .route-card { padding:22px 0; }
 .site-layout .home-links .route-card+.route-card { padding-left:0; }
 .site-layout .home-links .route-card :is(h2,h3) { font-size:20px; }
 .site-layout .home-links .route-card p { font-size:15px; padding-right:18px; }
 .site-layout .home-links .route-card>b { right:0; top:24px; }
 .site-layout .showcase-heading { grid-template-columns:1fr; gap:0; padding-bottom:21px; }
 .site-layout .showcase-heading h2 { font-size:36px; }
 .site-layout .showcase-heading p { font-size:15px; grid-row:3; margin:17px 0 3px; }
 .site-layout .showcase-heading>a { grid-column:1; grid-row:4; font-size:12px; margin-top:5px; }
 .site-layout .showcase-heading>.eyebrow { margin-bottom:13px; }
 .site-layout .showcase-tab { flex:0 0 auto; font-size:13px; padding:17px 16px; min-height:59px; }
 .site-layout .showcase-panel:not([hidden]) { grid-template-columns:1fr; min-height:0; }
 .site-layout .home-showcase .showcase-media { height:350px; padding:16px; border-right:0; border-bottom:1px solid var(--line); }
 .site-layout #showcase-panel-drawing .showcase-media,.site-layout #showcase-panel-bigatv .showcase-media { height:450px; }
 .site-layout .home-showcase .showcase-copy { min-height:270px; padding:28px 24px; }
 .site-layout .home-showcase .showcase-copy h3 { font-size:clamp(23px,6.4vw,25px); max-width:16em; margin-bottom:14px; }
 .site-layout .home-showcase .showcase-copy .eyebrow { margin-bottom:13px; }
 .site-layout .home-showcase .showcase-copy p { font-size:15px; margin-bottom:14px; }
 .site-layout .showcase-note { font-size:14px; line-height:1.85; margin-bottom:20px; }
 .pen-demo-controls { gap:6px; }
 .site-layout .pen-demo-controls button { min-height:44px; padding:5px 9px; }
 .pen-demo-controls kbd { margin-left:4px; }
 .pen-paper-hint>span { font-size:24px; }
 .pen-paper-hint small { font-size:14px; }
 .pen-playground>p { font-size:14px; }
 .site-layout .page-intro { padding-top:4px; margin-bottom:30px; }
 .site-layout .page-intro h1 { font-size:36px; margin-bottom:17px; }
 .site-layout .page-intro .lede { font-size:14px; }
 .site-layout .group-section { padding:29px 0; }
 .site-layout .group-heading h2 { font-size:24px; }
 .site-layout .article-link { min-height:0; padding:20px 0; }
 .site-layout .article-link :is(h3,div h3) { font-size:17px; }
 .site-layout .article-link :is(p,div p) { font-size:13px; }
 .site-layout .article-sidebar nav { flex-wrap:nowrap; overflow-x:auto; padding:4px 0 8px; scrollbar-width:thin; }
 .site-layout .article-sidebar nav a { flex:0 0 auto; white-space:nowrap; }
 .site-layout .article-body .guide>p,.site-layout .article-body .guide>ol,.site-layout .article-body .guide>ul { font-size:15px; }
 .site-layout .article-body .section-heading .lede { font-size:15px; }
 .site-layout .download-card :is(h2,h3),.site-layout .base-download h2 { font-size:27px; }
 .site-layout .download-card p,.site-layout .base-download>p { font-size:14px; }
 .site-layout .download-steps { gap:28px; }
 .site-layout .download-steps>h2 { font-size:24px; }
 .site-layout .download-steps p { font-size:15px; }
 .site-layout .site-footer { padding:32px 0; gap:17px; }
 .site-layout .site-footer nav { gap:22px; }
 .site-layout .site-footer .footer-top { margin:0; }
 .site-layout .release-rail { padding-bottom:24px; }
 .site-layout .release-rail::before { bottom:13px; }
 .site-layout .release-detail { padding:25px 21px; }
 .site-layout .release-detail :is(.release-intro,.release-items p) { font-size:15px; }
 .site-layout .release-detail .release-number { font-size:50px; }
}
@media (max-width:380px) {
 .site-layout .site-top,.site-layout main.page-main,.site-layout .site-footer { width:calc(100% - 36px); }
 .site-layout .site-brand .hero-brand { width:143px; }
 .site-layout .site-top { gap:0 8px; }
 .site-layout .site-version { font-size:9px; }
 .site-layout .home-copy h1 { font-size:30px; }
 .site-layout .pen-demo-controls button { font-size:14px; padding:5px 7px; }
 .pen-demo-controls kbd { display:block; width:max-content; margin:2px auto 0; }
 .pen-current { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .site-layout *, .site-layout *::before, .site-layout *::after { animation:none!important; transition:none!important; }
 .site-layout a.download:hover { transform:rotate(-1deg); }
 .site-layout .home-links .route-card:hover>b { transform:none; }
}
/* Native disclosure keeps the mobile header stable before scripts initialize. */
.site-layout .mobile-site-menu { display:none; }
.site-layout .demo-screen :is(img,canvas) { width:100%; height:auto; object-fit:contain; }
.site-layout .article-body figure:not(.demo) img { width:100%; max-width:min(100%,var(--image-width,100%)); height:auto; object-fit:contain; }
.site-layout .demo-controls { min-height:70px; }
.site-layout .demo-controls :is(button,.demo-static-link) { min-height:44px; display:inline-flex; align-items:center; }
.site-layout .demo:not(.demo-ready) .demo-controls > :not(.demo-static-link),.site-layout .demo-ready .demo-static-link { display:none; }
.site-layout .demo-status { min-height:3.7em; }
@media (max-width:760px) {
 .site-layout .demo-controls { min-height:96px; }
 .site-layout .site-top { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:18px; min-height:80px; }
 .site-layout .site-brand { grid-column:1; grid-row:1; }
 .site-layout .site-version { grid-column:1; grid-row:2; margin:0; justify-self:start; line-height:1.5; }
 .site-layout .desktop-site-nav { display:none!important; }
 .site-layout .mobile-site-menu { display:block; position:static; grid-column:2; grid-row:1 / span 2; margin:0; padding:0; border:0; background:none; border-radius:0; }
 .site-layout .mobile-site-menu #menu-toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; margin:0; padding:9px 0 9px 12px; list-style:none; font-size:13px; cursor:pointer; border:0; }
 .site-layout .mobile-site-menu summary::-webkit-details-marker { display:none; }
 .site-layout .mobile-site-menu summary span { font-size:20px; line-height:1; }
 .site-layout .mobile-site-menu[open] summary span { transform:rotate(45deg); }
 .site-layout .mobile-site-menu .site-nav { display:flex; position:absolute; z-index:40; top:calc(100% + 8px); right:0; width:min(350px,100%); margin:0; padding:12px; border:1px solid var(--line); background:#202122; box-shadow:0 12px 30px #0006; flex-direction:column; gap:2px; align-items:stretch; }
 .site-layout .mobile-site-menu .site-nav a { justify-content:flex-start; padding:10px 14px; flex:none; min-height:44px; }
}
@media print {
 .site-layout .hero-opening { display:block; }
 .site-layout .hero-manifesto .manifesto { display:block; }
 .site-layout .hero-manifesto .manifesto p { margin-bottom:16px; color:#151515; }
 .pen-playground { display:none; }
 .site-layout .home-art { transform:none; }
}

/* Working links and reference images are the baseline; controls enhance them. */
.site-layout .showcase-tab { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.site-layout .home-showcase:not(.showcase-ready) .showcase-panel + .showcase-panel { margin-top:24px; }
.site-layout :is(.pen-playground,.monitor-playground):not(.playground-ready) { display:none; }
.site-layout .playground-ready ~ .showcase-fallback { display:none; }
.site-layout .showcase-trash-preview:not(.playground-ready) .trash-preview-play { display:none; }
.site-layout .manual-search[hidden] { display:none; }
.site-layout #search-status { font-size:14px; color:var(--muted); margin:10px 0 0; min-height:3.7em; }
.site-layout .manual-search-fallback { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:10px 14px; border:1px solid var(--line); border-radius:3px; font-size:16px; text-decoration:none; }
.site-layout .manual-search-fallback[hidden] { display:none; }
.site-layout .manual-topics { display:flex; flex-wrap:wrap; gap:10px; padding:0 0 28px; }
.site-layout .manual-topics a { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 16px; border:1px solid var(--line); border-radius:3px; color:var(--text); font-size:14px; text-decoration:none; }
.site-layout .manual-topics span { color:#f2a5a0; font:11px Consolas,monospace; }
.site-layout .manual-topics a:hover { background:var(--panel); border-color:#f2a5a0; }
.site-layout .title-phrase { display:inline-block; }
@media (max-width:760px) {
 .site-layout .showcase-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
 .site-layout .showcase-tab { min-height:52px; padding:12px 6px; font-size:13px; white-space:normal; text-align:center; }
 .site-layout .manual-topics { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-bottom:24px; }
 .site-layout .manual-topics a { padding:10px; gap:8px; font-size:13px; }
 .site-layout .group-heading p,.site-layout .article-link :is(p,div p) { font-size:14px; line-height:1.85; }
 .site-layout .article-link :is(h3,div h3) { font-size:17px; }
 .site-layout .article-link { padding:19px 0; }
}
@media (max-width:420px) {
 .site-layout .showcase-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* The feature page follows a creative task before describing individual tools. */
.site-layout .feature-journey-nav { display:flex; gap:30px; padding:15px 0 25px; border-bottom:1px solid var(--line); }
.site-layout .feature-journey-nav a { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; }
.site-layout .feature-journey-nav span { color:var(--muted); font:11px Consolas,monospace; }
.site-layout .feature-story { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr); gap:50px; align-items:center; padding:64px 0; border-bottom:1px solid var(--line); }
.site-layout .feature-story-copy h2,.site-layout .feature-tools-heading h2 { font-size:clamp(28px,3vw,42px); line-height:1.35; margin:15px 0 20px; }
.site-layout .feature-story-copy p { font-size:16px; line-height:1.9; color:var(--muted); }
.site-layout .feature-story-copy nav { display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:20px; }
.site-layout .feature-story-copy nav a { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; }
.site-layout .feature-story-media { margin:0; border:1px solid var(--line); border-radius:0; background:#111213; }
.site-layout .feature-story-media img { width:100%; height:auto; object-fit:contain; }
.site-layout .feature-story-media figcaption { padding:14px 18px; color:var(--muted); background:#202122; font-size:14px; }
.site-layout .feature-story-wide { grid-template-columns:1fr; gap:28px; }
.site-layout .feature-story-wide .feature-story-copy { display:grid; grid-template-columns:1fr 1fr; gap:0 50px; align-items:start; }
.site-layout .feature-story-wide .eyebrow { grid-column:1/-1; }
.site-layout .feature-story-wide h2 { margin:0; }
.site-layout .feature-story-wide p { margin:0; }
.site-layout .feature-story-wide nav { grid-column:2; margin-top:12px; }
.site-layout .feature-tools-heading { margin-top:70px; }
.site-layout .feature-tools-heading>p { color:var(--muted); font-size:16px; }
.site-layout .features-summary .release-1510-card p { font-size:16px; line-height:1.85; }
.site-layout .features-summary .release-1510-card h3 { font-size:20px; }
.site-layout .features-summary .release-1510-card>a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.site-layout .feature-next { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-top:40px; padding:32px 0; }
.site-layout .feature-next h2 { font-size:30px; margin:0 0 12px; }
.site-layout .feature-next p { color:var(--muted); font-size:16px; margin:0; max-width:600px; }
.site-layout .feature-next nav { display:flex; flex-direction:column; gap:10px; }
.site-layout .feature-next nav a { display:inline-flex; justify-content:space-between; align-items:center; gap:30px; min-height:44px; font-size:14px; }
.site-layout .feature-next .feature-download-link { padding:12px 18px; border:1px solid #c37570; border-radius:3px; }
@media (max-width:760px) {
 .site-layout .feature-journey-nav { justify-content:space-between; gap:8px; padding:6px 0 18px; }
 .site-layout .feature-story { grid-template-columns:1fr; gap:22px; padding:38px 0; }
 .site-layout .feature-story-copy h2,.site-layout .feature-tools-heading h2 { font-size:30px; }
 .site-layout .feature-story-copy p { font-size:15px; }
 .site-layout .feature-story-wide .feature-story-copy { display:block; }
 .site-layout .feature-story-wide p { margin-top:18px; }
 .site-layout .feature-story-wide nav { margin-top:16px; }
 .site-layout .feature-story-media figcaption { padding:12px; font-size:14px; }
 .site-layout .feature-tools-heading { margin-top:42px; }
 .site-layout .features-summary .release-1510-card h3 { font-size:19px; }
 .site-layout .features-summary .release-1510-card p,.site-layout .feature-next p,.site-layout .feature-tools-heading>p { font-size:15px; }
 .site-layout .feature-next { grid-template-columns:1fr; gap:20px; margin-top:25px; padding:22px 0; }
 .site-layout .feature-next nav { align-items:flex-start; }
}
/* Chapter navigation keeps instructions close and other chapters on demand. */
.site-layout .comparison-filter-slot { min-height:44px; margin:18px 0 12px; }
.site-layout .comparison-filter-legend { display:flex; align-items:center; min-height:44px; color:var(--muted); font-size:14px; }
.site-layout .comparison-filter-slot .filters { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.site-layout .comparison-filter-slot button { min-height:44px; padding:8px 14px; font-size:14px; }
.site-layout .comparison :is(th,td) { font-size:14px; line-height:1.85; }
.site-layout .comparison .badge { font-size:11px; }
.site-layout .comparison-cell-label { display:none; }
@media (max-width:1000px) {
 .site-layout #compare .table-scroll { border:0; overflow:visible; }
 .site-layout .comparison { display:block; min-width:0; width:100%; }
 .site-layout .comparison thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .site-layout .comparison tbody { display:block; }
 .site-layout .comparison tbody tr { display:block; margin-bottom:16px; padding:16px; border:1px solid var(--line); background:var(--panel); border-radius:4px; }
 .site-layout #compare .comparison td { display:block; width:auto; padding:10px 0; border:0; font-size:14px; }
 .site-layout #compare .comparison td:first-child { padding-top:0; font-size:16px; border-bottom:1px solid var(--line); }
 .site-layout #compare .comparison td:last-child { padding-bottom:0; }
 .site-layout .comparison td:first-child a { display:inline-flex; align-items:center; min-height:44px; }
 .site-layout .comparison-cell-label { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; }
 .site-layout .comparison td:last-child .comparison-cell-label { color:#f5b5af; }
 .site-layout .comparison-filter-slot button { flex:1; padding:8px 9px; }
}
.site-layout .showcase-ready .showcase-stage > .showcase-panel:not([hidden]) { min-height:var(--showcase-min-height,480px); }
.site-layout .article-sidebar details { border:0; background:none; border-radius:0; padding:0; margin:0 0 18px; }
.site-layout .article-sidebar summary { min-height:44px; padding:10px 0; color:var(--text); font-size:13px; line-height:1.7; cursor:pointer; }
.site-layout .chapter-outline { display:none; }
.site-layout .chapter-outline-desktop { margin-bottom:18px; }
.site-layout .chapter-outline-desktop>p { margin:0; padding:10px 0; min-height:44px; font-size:13px; line-height:1.7; }
.site-layout :is(.chapter-outline summary,.chapter-outline-desktop>p) small { color:var(--muted); font-size:11px; margin-left:8px; }
.site-layout :is(.chapter-outline,.chapter-outline-desktop) nav { display:flex; flex-direction:column; gap:2px; }
.site-layout :is(.chapter-outline,.chapter-outline-desktop) a { display:flex; align-items:baseline; gap:9px; padding:10px 8px; font-size:13px; line-height:1.65; }
.site-layout :is(.chapter-outline,.chapter-outline-desktop) a span { color:#f2a5a0; font:10px Consolas,monospace; }
.site-layout .article-sidebar { max-height:calc(100vh - 140px); overflow-y:auto; scrollbar-width:thin; }
.site-layout .article-sidebar nav[aria-label="本篇用法"] a[aria-current="location"] { color:#f8e6e3; background:#302326; border-left-color:#ec454b; }
.site-layout .current-version-instruction { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.site-layout .current-version-instruction>h3 { margin:0 0 18px; font-size:23px; line-height:1.5; }
.site-layout .current-version-with-reference { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,310px); gap:0 26px; }
.site-layout .current-version-with-reference>h3 { grid-column:1/-1; }
.site-layout .current-version-text { grid-column:1; }
.site-layout .current-version-reference { grid-column:2; grid-row:2; margin:0; align-self:start; width:100%; max-width:var(--reference-width,360px); }
.site-layout .current-version-reference figcaption { font-size:14px; line-height:1.8; padding-top:10px; color:var(--muted); }
@media(max-width:1100px) {
 .site-layout .current-version-with-reference { display:block; }
 .site-layout .current-version-reference { max-width:min(360px,var(--reference-width,360px)); margin:0 0 22px; }
}
.site-layout .article-body .guide :is(p,li,dd) { font-size:16px; line-height:1.9; }
.site-layout .article-body #v158 .story-details p { font-size:16px; line-height:1.9; color:var(--text); }
.site-layout .article-body #v158 .story-details summary { font-size:14px; line-height:1.8; min-height:44px; color:#f2a5a0; }
.site-layout .article-body #v158 figcaption { font-size:14px; line-height:1.8; }
.site-layout .article-body #v158 .feature-story { align-items:start; }
.site-layout .home-showcase .showcase-copy .media-source { font-size:12px; line-height:1.8; color:var(--muted); padding-top:14px; border-top:1px solid var(--line); margin-top:auto; margin-bottom:15px; }
@media (max-width:760px) {
 .site-layout .home-showcase .showcase-stage .showcase-media { height:400px; }
 .site-layout .showcase-stage :is(#showcase-panel-drawing,#showcase-panel-bigatv) .showcase-media { height:400px; }
 .site-layout .article-body .guide :is(p,li,dd) { font-size:15px; }
 .site-layout .article-body #v158 .story-details p { font-size:15px; }
 .site-layout .article-sidebar { max-height:none; overflow:visible; padding-bottom:10px; }
 .site-layout .article-sidebar details { margin-bottom:4px; }
 .site-layout .chapter-outline { display:block; }
 .site-layout .chapter-outline-desktop { display:none; }
 .site-layout .article-sidebar summary { font-size:14px; }
 .site-layout .chapter-outline a { font-size:14px; }
 .site-layout .article-sidebar .all-articles { padding-left:0; font-size:13px; }
 .site-layout .home-showcase .showcase-copy .media-source { font-size:12px; }
}

/* First project instructions stay in the primary reading path. */
.site-layout .start-first-project { margin:28px 0 32px; }
.site-layout .start-first-project h3 { font-size:23px; line-height:1.5; }
.site-layout .start-first-project ol { font-size:16px; line-height:1.95; padding-left:26px; }
.site-layout .start-first-project li { padding-left:6px; margin:16px 0; }
.site-layout .start-first-project li::marker { color:#f2a5a0; font-weight:600; }
.site-layout .article-body .start-next-label { margin:32px 0 12px; font-size:12px; }
@media (max-width:760px) {
 .site-layout .start-first-project h3 { font-size:21px; }
 .site-layout .start-first-project ol { font-size:15px; }
}

/* Source and release context must remain readable as secondary information. */
.site-layout .features-summary>.release-update-note,
.site-layout #updates>.muted { font-size:14px; line-height:1.85; color:#c5c2bd; }

/* Frame the reference without changing pixels or the original-image link. */
.site-layout .reference-crop { position:relative; aspect-ratio:1; overflow:hidden; }
.site-layout .reference-crop>a { width:100%; height:100%; }
.site-layout .article-body .current-version-reference .reference-crop img { position:absolute; width:var(--crop-width); max-width:none; max-height:none; height:auto; left:var(--crop-left); top:var(--crop-top); margin:0; }

/* Entry instructions precede subtitle settings and retain the full source image. */
.site-layout .subtitle-input-guide { margin-bottom:32px; }
.site-layout .article-body .subtitle-input-reference { width:100%; max-width:720px; margin:24px 0; }
.site-layout .article-body .subtitle-input-reference figcaption { font-size:14px; line-height:1.8; }

/* Keep long instructional lines comfortable without narrowing media or tables. */
.site-layout .article-body .guide :is(p,li) { max-width:42em; }

.site-layout #search-results a:focus-visible { background:#302326; outline-offset:4px; }

/* Read shortcut purpose/key pairs together rather than compressing four columns. */
.site-layout .article-body .shortcut-keys :is(th,td) { font-size:14px; }
.site-layout .article-body .shortcut-keys kbd { font-size:13px; }
@media (max-width:1000px) {
 .site-layout .shortcut-keys { display:block; min-width:0; width:100%; }
 .site-layout .shortcut-keys thead { display:block; }
 .site-layout .shortcut-keys thead th:nth-child(n+3) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .site-layout .shortcut-keys tbody { display:block; }
 .site-layout .shortcut-keys :is(thead,tbody) tr { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
 .site-layout .article-body .shortcut-keys td { min-width:0; width:auto; padding:12px 10px; border:0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.8; }
 .site-layout .shortcut-keys td:nth-child(odd) { font-weight:600; }
 .site-layout .shortcut-keys kbd { max-width:100%; white-space:normal; }
 .site-layout .shortcut-keys tbody tr:last-child td:nth-last-child(-n+2) { border-bottom:0; }
}

/* Demo cards follow the space left by the reading sidebar. */
.site-layout .article-body .v140-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }

/* Give frame controls a readable timeline on narrow screens. */
.site-layout .demo-controls button { font-size:14px; }
.site-layout .demo-time { font-size:12px; }
.site-layout .article-body .demo-status { font-size:14px; line-height:1.8; min-height:calc(3.6em + 25px); }
@media (max-width:760px) {
 .site-layout .demo-controls { display:grid; grid-template-columns:auto auto minmax(0,1fr); min-height:117px; gap:8px; }
 .site-layout .article-body .demo-status { min-height:calc(5.4em + 25px); }
 .site-layout .demo-seek { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; margin:0; }
 .site-layout .demo-time { grid-column:3; grid-row:1; justify-self:end; min-width:0; white-space:nowrap; }
 .site-layout .demo-static-link { grid-column:1 / -1; }
}

/* Chapter navigation keeps its direction when one neighbour is absent. */
.site-layout .article-pagination a { font-size:14px; }
.site-layout .article-pagination a.pagination-previous { grid-column:1; text-align:left; }
.site-layout .article-pagination a.pagination-next { grid-column:2; text-align:right; }
.site-layout .article-pagination a small { font-size:12px; line-height:1.8; margin-bottom:4px; }

/* An expanded vertical outline should not hide long chapter labels sideways. */
@media (max-width:760px) {
 .site-layout .chapter-outline nav { overflow-x:visible; }
 .site-layout .article-sidebar .chapter-outline nav a { white-space:normal; min-width:0; }
 .site-layout .chapter-outline a>span { flex-shrink:0; }
}

/* Media provenance remains readable alongside the screenshot. */
.site-layout .article-body figcaption { line-height:1.8; }
.site-layout .article-body figcaption>span { font-size:12px; white-space:normal; }

/* Related chapters are all discoverable after the mobile disclosure opens. */
@media (max-width:760px) {
 .site-layout .related-chapters nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; overflow-x:visible; }
 .site-layout .article-sidebar .related-chapters nav a { min-width:0; white-space:normal; font-size:14px; }
}

/* Keep native bookmark focus visible at the destination title. */
.site-layout :is(.article-body > .guide,.manual-groups,.group-section,.feature-stories > .feature-story):focus-visible { outline:none; }
.site-layout .article-body > .guide:focus-visible > .section-heading h2,
.site-layout .manual-groups:focus-visible > .group-section:first-child .group-heading h2,
.site-layout .group-section:focus-visible > .group-heading h2,
.site-layout .feature-stories > .feature-story:focus-visible > .feature-story-copy h2 { outline:2px solid #fff; outline-offset:6px; }

/* Native feature bookmarks also hand over focus before enhancement. */
.site-layout .showcase-panel:focus-visible { outline:none; }
.site-layout .showcase-panel:focus-visible > .showcase-copy h3 { outline:2px solid #fff; outline-offset:6px; }

/* Historical bookmarks retain their original addresses and show the version title. */
.site-layout .legacy-article [id^="v-"]:focus-visible { outline:none; }
.site-layout .legacy-article [id^="v-"]:focus-visible > h2 { outline:2px solid #fff; outline-offset:6px; }

/* A failed redirect must leave a native path from the original bookmark. */
.site-layout .legacy-bookmark { display:none; }
.site-layout .legacy-bookmark:target { display:block; padding:24px 0 28px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.site-layout .legacy-bookmark h2 { font-size:clamp(24px,3vw,32px); margin-bottom:14px; }
.site-layout .legacy-bookmark p { margin:0 0 10px; color:var(--muted); }
.site-layout .legacy-bookmark a { display:inline-flex; gap:12px; align-items:center; min-height:44px; font-size:14px; }
.site-layout .legacy-bookmark:focus-visible { outline:none; }
.site-layout .legacy-bookmark:focus-visible h2 { outline:2px solid #fff; outline-offset:6px; }