:root {
  --bg: #07100E; --panel: #0C1A17; --line: #163029; --ink: #DDEEE8; --ink-2: #A9C2BA; --dim: #6F8E84;
  --trace: #34E5B0; --gold: #D8AE4E; --fd: "Space Grotesk", system-ui, sans-serif; --fm: "JetBrains Mono", ui-monospace, monospace;
  --glass: 7 16 14; color-scheme: dark;
}

html.light { --bg: #EEF3F1; --panel: #FFFFFF; --line: #D7E5DF; --ink: #0E1A16; --ink-2: #3E5149; --dim: #5B6E66; --trace: #08785B; --gold: #85601A; --glass: 238 243 241; color-scheme: light; }
html.light .brand img { mix-blend-mode: normal; }
html.light .lang a[aria-current="true"] { color: #6B4D14; } 
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } 
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.75 var(--fd); -webkit-font-smoothing: antialiased; }
a { color: var(--gold); }
.top { position: sticky; top: 0; z-index: 5; background: rgb(var(--glass) / .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .in { max-width: 860px; margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; mix-blend-mode: lighten; }
.brand b { display: block; font: 600 19px/1 var(--fd); }
.brand small { display: block; margin-top: 4px; font: 400 11.5px/1 var(--fd); color: var(--gold); text-align: right; } 
.brand small strong { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
a, img, svg { -webkit-user-drag: none; }
.back { font: 500 12px var(--fm); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.hdr-r { display: flex; align-items: center; gap: 12px; }
.back { white-space: nowrap; }
@media (max-width: 380px) { .top .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } 
@media (max-width: 420px) { .top .brand small { display: none; } .top .in { gap: 10px; } .hdr-r { gap: 8px; } .back { padding-inline: 11px; } } 
.lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { padding: 5px 9px; border-radius: 999px; font: 500 11px/1 var(--fm); letter-spacing: .1em; color: var(--dim); text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: rgb(216 174 78 / .14); color: var(--gold); }
.back:hover { color: var(--gold); border-color: rgb(216 174 78 / .5); }
main { max-width: 860px; margin: 0 auto; padding: 64px 20px 96px; }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 500 11px var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
h1 { font: 600 clamp(34px, 5vw, 52px)/1.08 var(--fd); letter-spacing: -.03em; margin: 16px 0 10px; }
.updated { font: 500 12px var(--fm); color: var(--dim); letter-spacing: .06em; }
h2 { font: 600 22px/1.3 var(--fd); margin: 44px 0 10px; padding-top: 24px; border-top: 1px solid var(--line); }
p, li { color: var(--ink-2); }
main p, main li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2; }
@media (max-width: 600px) { main p, main li { text-align: start; } }
main :is(p, li):has(a[href^="mailto:"]) { text-align: start; } 
ul { padding-left: 20px; }
li { margin: 6px 0; }
strong { color: var(--ink); font-weight: 600; }
.card { margin: 28px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.card p { margin: 4px 0; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
th { font: 500 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
td code { font: 500 13px var(--fm); color: var(--ink); }
footer { border-top: 1px solid var(--line); padding: 24px 20px 40px; text-align: center; font: 500 12px var(--fm); color: var(--dim); letter-spacing: .04em; }
footer a { color: var(--ink-2); text-decoration: none; margin: 0 8px; }
@media (max-width: 600px) { main { padding-top: 40px; } table, thead, tbody, tr, th, td { display: block; } th { display: none; } td { border: 0; padding: 4px 0; } tr { border-bottom: 1px solid var(--line); padding: 10px 0; } }

@media (pointer: coarse) { .back, .lang a { min-height: 44px; display: inline-flex; align-items: center; } }


main p, main li, main h1, main h2 { max-width: 70ch; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}