/* Shared usability improvements; keep existing layout and brand palette. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:8px; z-index:1100; transform:translateY(-150%); background:#fff; color:#1f2937; padding:10px 14px; border:2px solid #1f2937; border-radius:8px; }
.skip-link:focus { transform:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:3px solid #4338ca; outline-offset:3px; }
.bookmark-btn { background:var(--secondary-bg); color:#b92145; border:0; padding:8px 10px; border-radius:8px; font-weight:700; cursor:pointer; }
[hidden] { display:none !important; }
.emoji-item { padding:0; font-family:inherit; }
.responsive-table-wrap { width:100%; overflow-x:auto; margin:22px 0; }
.guide-table { width:100%; min-width:620px; border-collapse:collapse; background:#fff; }
.guide-table th,.guide-table td { padding:12px 14px; border:1px solid var(--border-color); text-align:left; vertical-align:top; }
.guide-table th { background:#f8fafc; }
.content-box pre { padding:16px; background:#f1f5f9; border-radius:10px; overflow-x:auto; max-width:100%; box-sizing:border-box; line-height:1.65; }
.content-box code { overflow-wrap:anywhere; }
.content-box pre code { white-space:pre; overflow-wrap:normal; }
.guide-directory { margin:20px 0; padding:20px; background:#f8fafc; border:1px solid var(--border-color); border-radius:14px; }
.guide-directory h2 { margin:0 0 12px; font-size:21px; }
.guide-directory ul { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.guide-directory a { display:block; padding:9px 12px; color:#334155; background:white; border:1px solid var(--border-color); border-radius:8px; text-decoration:none; }
.blog-category { display:grid; gap:18px; scroll-margin-top:20px; }
.blog-category > h2 { margin:26px 0 0; font-size:24px; }
.blog-category > p { margin:0; color:var(--text-muted); line-height:1.7; }
.blog-category .blog-card h3 { color:var(--text-main); line-height:1.45; margin:0 0 12px; font-size:20px; }
#toast { max-width:calc(100vw - 32px); min-width:0; width:max-content; box-sizing:border-box; overflow-wrap:anywhere; }
.article-meta a { color:inherit; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (max-width:400px) { .top-nav { flex-wrap:wrap; } .nav-item { min-width:72px; } }