/* Flexoki by Steph Ango, https://stephango.com/flexoki (MIT). */
:root { color-scheme: light dark; --bg: #fffcf0; --text: #100f0f; --muted: #6f6e69; --line: #e6e4d9; --link: #24837b; --hover: #205ea6; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #100f0f; --text: #cecdc3; --muted: #878580; --line: #282726; --link: #3aa99f; --hover: #4385be; }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-padding-top: 2rem; }
body { max-width: 780px; margin: 0 auto; padding: 28px 24px; font: 16px/1.55 "LXGW WenKai", "霞鹜文楷", "Kaiti SC", KaiTi, serif; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--hover); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; border-radius: 2px; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
header a { text-decoration: none; }
.name { color: var(--text); font-weight: 600; }
header nav { display: flex; gap: 16px; font-size: 14px; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.04em; margin: 0 0 10px; }
.contents { font-size: 14px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.contents a { white-space: nowrap; }
section { margin-top: 22px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.materials { list-style: none; padding: 0; margin: 0; }
.materials li { display: grid; grid-template-columns: 86px minmax(0, 1fr) 30px; gap: 12px; align-items: baseline; margin: 0; padding: 4px 0; }
time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.material { color: var(--text); text-decoration: none; }
.material:hover { text-decoration: underline; }
.pdf { font-size: 12px; text-align: right; text-decoration: none; letter-spacing: .025em; }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 8px; }
@media (max-width: 540px) {
  body { padding: 20px 18px; font-size: 16px; }
  header { margin-bottom: 20px; }
  h1 { font-size: 24px; }
  .materials li { grid-template-columns: 72px minmax(0, 1fr) 28px; gap: 8px; padding: 5px 0; }
  time { font-size: 11px; }
  .contents { line-height: 1.8; }
}
@media print {
  :root { --bg: white; --text: black; --muted: #555; --line: #ccc; }
  header, .contents, .skip { display: none; }
  body { max-width: none; padding: 0; font-size: 11pt; }
  section { break-inside: avoid; }
}