body{padding:0 20px;line-height:1.8}header,main,footer{max-width:780px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--border)}a{color:var(--accent);text-underline-offset:4px}.brand{font-size:22px;font-weight:500;text-decoration:none}main{padding:32px 0 64px}.back{font-size:14px}h1{font-size:clamp(28px,5vw,40px);line-height:1.35;margin:24px 0}h2{font-size:23px;margin:40px 0 14px}h3{font-size:19px}p,li{overflow-wrap:anywhere}blockquote{margin:24px 0;padding:8px 20px;border-left:3px solid var(--accent);color:var(--secondary)}li{margin:8px 0}.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:380px;font-size:14px}td,th{padding:12px;text-align:left;border-bottom:1px solid var(--border)}footer{padding:24px 0 40px;border-top:1px solid var(--border);font-size:14px;color:var(--secondary)}footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}pre{overflow-x:auto}code{overflow-wrap:anywhere}

/* Navigation remains comfortable to use without enlarging body links. */
header { gap:16px; flex-wrap:wrap; }
header a, footer nav a, .back { display:inline-flex; align-items:center; min-height:44px; }
footer nav { gap:4px 20px; }
article:not(:has(.comic)):not(:has(.comic-library)) { max-width:68ch; }
article > .comic > nav { display:none; } /* This page already has a language switch in its header. */
summary { min-height:44px; cursor:pointer; }
.skip-link { position:fixed;top:8px;left:16px;z-index:20;padding:12px;background:var(--surface);transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.page-contents { border-block:1px solid var(--hairline);padding:16px 0;margin:24px 0; }
.page-contents strong { display:block;margin-bottom:8px; }
.page-contents a { display:block;min-height:44px;padding:8px 0; }
article h2[id] { scroll-margin-top:24px; }

.guide-jump{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0}.guide-jump a{display:inline-flex;align-items:center;min-height:44px}.guide-roles{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0 40px}.guide-roles section{border-top:2px solid var(--accent);padding-top:16px;min-width:0}.guide-roles h2{font-size:22px;margin-top:0}.guide-roles li{margin-bottom:16px;line-height:1.85}.guide-start section[id]{scroll-margin-top:24px}.guide-screen{border-bottom:1px solid var(--hairline);padding:12px 0}.guide-screen summary{display:list-item;line-height:1.6;padding:10px 0}.guide-screen a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0}.guide-screen img{max-width:100%;max-height:480px;object-fit:contain;object-position:left}.guide-screen span{display:inline-flex;min-height:44px;align-items:center}#situations{margin-top:40px}.guide-context a{display:inline-flex;min-height:44px;align-items:center}@media(max-width:640px){.guide-roles{grid-template-columns:1fr}}

/* Comic-library entry: fulfill the comic promise before showing reference text. */
body:has(.guide-intro) .comic-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body:has(.guide-intro) .comic-choice{grid-template-columns:1fr;gap:16px;padding:0 0 20px}
body:has(.guide-intro) .comic-choice .thumb{width:100%}
.guide-text-link{display:inline-flex;align-items:center;min-height:44px}
#quick-help{margin:40px 0;scroll-margin-top:24px}.guide-topic{border-bottom:1px solid var(--hairline);padding:10px 0;scroll-margin-top:24px}.guide-topic summary{padding:12px 0;line-height:1.6}.guide-topic li{line-height:1.85;margin-bottom:12px}.guide-topic .guide-screen{margin:20px 0;border:0}.guide-topic .guide-screen img{display:block;max-width:100%;max-height:400px;object-fit:contain}.guide-capture-note{color:var(--secondary);font-size:14px}
@media(max-width:640px){body:has(.guide-intro) .comic-choices{grid-template-columns:1fr}}