:root { --bg:#f5f7fb; --surface:#fff; --ink:#0f1c2e; --muted:#5a6a82; --line:#dde3ee; --accent:#1f5eff; --soft:#e8efff; --mark:#fff1b8; --mark-ink:#6b4a00;
  --display:"Chakra Petch","Segoe UI",system-ui,sans-serif; --body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1220; --surface:#121b2e; --ink:#e4ecfb; --muted:#93a3bd; --line:#24324c; --accent:#5b8cff; --soft:#182644; --mark:#3a2c10; --mark-ink:#f2c14e; color-scheme:dark } }
:root[data-theme="dark"] { --bg:#0b1220; --surface:#121b2e; --ink:#e4ecfb; --muted:#93a3bd; --line:#24324c; --accent:#5b8cff; --soft:#182644; --mark:#3a2c10; --mark-ink:#f2c14e; color-scheme:dark }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15.5px; line-height:1.7; }
a { color:var(--accent); }
.top { border-bottom:1px solid var(--line); background:var(--surface); }
.top .in, main, footer .in { max-width:860px; margin:0 auto; padding-inline:16px; }
.top .in { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; padding-block:14px; }
.logo { font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.logo img { height: 32px; width: auto; display: block; }
.logo span { font-weight: 600; letter-spacing: .02em; }
.logo .lg-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .lg-l { display: none; } :root:not([data-theme="light"]) .logo .lg-d { display: block; } }
:root[data-theme="dark"] .logo .lg-l { display: none; } :root[data-theme="dark"] .logo .lg-d { display: block; }
nav.pl { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; }
nav.pl a { color:var(--muted); text-decoration:none; } nav.pl a[aria-current] { color:var(--ink); font-weight:600; }
main { padding-block:32px 56px; }
h1 { font-family:var(--display); font-size:30px; line-height:1.2; margin:0 0 6px; text-wrap:balance; }
h2 { font-family:var(--display); font-size:19px; margin:34px 0 8px; }
h3 { font-size:15.5px; margin:20px 0 6px; }
.ver { color:var(--muted); font-size:13.5px; margin:0 0 20px; }
.lead { font-size:16.5px; }
ul, ol { padding-left:22px; } li { margin:4px 0; }
table { width:100%; border-collapse:collapse; font-size:14.5px; margin:10px 0; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:block; overflow-x:auto; }
table tbody, table thead { display:table; width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; }
tbody th { width:30%; }
.box { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:14px 0; }
.owner h3 { margin-top:0; } .owner dl { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:6px 16px; margin:0; }
.owner dt { color:var(--muted); font-size:14px; } .owner dd { margin:0; }
@media (max-width:560px) { .owner dl { grid-template-columns:minmax(0,1fr); } .owner dd { margin-bottom:6px; } }
code { background:var(--soft); padding:1px 6px; border-radius:5px; font-size:.92em; }
mark.todo { background:var(--mark); color:var(--mark-ink); border-radius:4px; padding:0 4px; }
ul.cards { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:640px) { ul.cards { grid-template-columns:minmax(0,1fr); } }
ul.cards a { display:block; height:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink); }
ul.cards a:hover { border-color:var(--accent); } ul.cards b { display:block; font-family:var(--display); } ul.cards span { color:var(--muted); font-size:14px; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; } footer .in { padding-block:22px; }
a:focus-visible { outline:3px solid #ffd84d; outline-offset:2px; }
@media print { .top nav, footer { display:none; } body { background:#fff; } }