* { box-sizing: border-box; }
body { margin: 0; background: #0f0f14; color: #d4d4d8; font: 16px/1.7 system-ui, sans-serif; }
a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, textarea:focus-visible { outline: 2px solid #60a5fa; outline-offset: 4px; }
.navbar { background: #16161d; border-bottom: 1px solid #ffffff0f; min-height: 60px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 18px; font-weight: 600; }
.nav-links { display: flex; gap: 24px; font-size: 14px; }
.nav-links a { color: #a1a1aa; }
.content { max-width: 920px; margin: auto; padding: 40px 24px 80px; }
.breadcrumb { color: #a1a1aa; font-size: 14px; margin-bottom: 16px; }
.guide-body { position: relative; }
h1, h2, h3 { color: #fff; line-height: 1.3; }
h1 { margin: 0 0 24px; padding-right: 56px; font-size: clamp(26px, 4vw, 34px); }
h2 { margin: 40px 0 16px; font-size: 23px; scroll-margin-top: 24px; }
h3 { margin: 28px 0 12px; font-size: 18px; }
p { margin: 0 0 18px; }
li { margin: 8px 0; }
article { overflow-wrap: anywhere; }
article code { font: 0.88em/1.6 ui-monospace, monospace; background: #22222d; padding: 2px 5px; border-radius: 4px; }
article pre { background: #16161d; border: 1px solid #ffffff12; border-radius: 10px; padding: 18px; overflow-x: auto; }
article pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }
article table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; margin: 24px 0; }
article th, article td { text-align: left; padding: 12px; border-bottom: 1px solid #ffffff18; }
article th { color: #fff; background: #1c1c24; }
.guide-tools { position: absolute; top: 0; right: 0; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; color: #d4d4d8; background: #1c1c24; border: 1px solid #ffffff18; border-radius: 8px; padding: 8px 16px; }
#copy-markdown { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #a1a1aa; background: transparent; }
#copy-markdown:hover, #copy-markdown:focus-visible { color: #fff; background: #1c1c24; }
.copy-tooltip { position: absolute; right: 0; top: 46px; z-index: 1; padding: 5px 10px; border-radius: 6px; background: #30303e; color: #fff; font-size: 12px; white-space: nowrap; visibility: hidden; pointer-events: none; }
.guide-tools:hover .copy-tooltip, .guide-tools:focus-within .copy-tooltip, .guide-tools.copied .copy-tooltip { visibility: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
footer { border-top: 1px solid #ffffff12; margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
dialog { width: min(760px, calc(100% - 32px)); max-height: 90vh; overflow-y: auto; color: #d4d4d8; background: #1c1c24; border: 1px solid #454552; border-radius: 12px; padding: 24px; }
dialog::backdrop { background: #000a; }
dialog h2 { margin-top: 0; }
dialog textarea { width: 100%; height: 45vh; padding: 12px; color: #e4e4e7; background: #0f0f14; border: 1px solid #454552; border-radius: 6px; font: 13px/1.5 ui-monospace, monospace; }
dialog form { margin-top: 16px; text-align: right; }
@media (max-width: 480px) {
    .navbar { padding-inline: 16px; }
    .nav-links { gap: 16px; }
    .content { padding: 28px 16px 56px; }
}