:root {
  --paper: #f4efe6;
  --ink: #1c1712;
  --muted: #5e564c;
  --rule: #d4cbbd;
  --apple: #9c3414;
  --electron: #0e5870;
  --sans: "Noto Sans TC", "PingFang TC", "Noto Sans CJK TC", sans-serif;
  --serif: "Noto Serif TC", "PMingLiU", "Songti TC", serif;
  --page: 72rem;
  --measure: 42rem;
  --sidebar: 15.5rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.0625rem;
  --text-lg: 1.35rem;
  color-scheme: light;
  --header-offset: 0px;
}

:root[data-theme="dark"] {
  --paper: #141210;
  --ink: #f3eee6;
  --muted: #cbbfb0;
  --rule: #3c342c;
  --apple: #f0a080;
  --electron: #8ec8d8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141210;
    --ink: #f3eee6;
    --muted: #cbbfb0;
    --rule: #3c342c;
    --apple: #f0a080;
    --electron: #8ec8d8;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: 1.7;
}
img { max-width: 100%; height: auto; }
a { color: var(--apple); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--apple); outline-offset: 3px; }
button, input, summary { font: inherit; color: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.7rem;
  z-index: 5;
}
.skip-link:focus { transform: none; }
.wrap { width: min(var(--page), calc(100% - 2rem)); margin: 0 auto; }
html[lang="zh-Hant"] :is(.en, .lang-en) { display: none; }
html[lang="en"] :is(.zh, .lang-zh) { display: none; }

.site-header { padding-top: 1.1rem; }
.mast {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem 1rem;
  align-items: end;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ink);
}
.brand {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.brand-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
}
.brand-en {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mast-date {
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.mast-date time { display: block; font-family: var(--serif); font-size: 1.05rem; }
.mast-tools {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.search { position: relative; flex: 1; min-width: 0; }
.search input {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  border-radius: 0;
  padding: 0.3rem 0;
}
.search input::placeholder { color: var(--muted); }
.search-panel {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.4rem 0.7rem 0.7rem;
  max-height: 70vh;
  overflow: auto;
}
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li { border-top: 1px solid var(--rule); padding: 0.45rem 0; }
.search-list a { color: var(--ink); text-decoration: none; display: block; }
.search-list .title-en, .search-list .meta { color: var(--muted); font-size: var(--text-sm); }
.search-list .title-zh, .search-list .title-en { display: block; }
.search-more { display: inline-block; margin-top: 0.4rem; }
.search-empty { margin: 0.4rem 0; }
.lang, .theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
}
.lang button, .theme-toggle {
  background: none;
  border: 0;
  min-height: 2.75rem;
  padding: 0 0.35rem;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.theme-to-light { display: none; }
:root[data-theme="dark"] .theme-to-dark { display: none; }
:root[data-theme="dark"] .theme-to-light { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-to-light { display: inline; }
}

.main-nav { border-bottom: 3px double var(--ink); }
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.main-nav a, .main-nav summary {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.main-nav .en { color: var(--muted); font-size: 0.78rem; }
.main-nav a[aria-current="page"], .main-nav summary[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--apple); }
.nav-drop { position: relative; }
.nav-drop summary { list-style: none; }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after { content: ""; border: 4px solid transparent; border-top-color: var(--muted); margin-top: 4px; }
.dropdown-content {
  position: absolute;
  z-index: 3;
  min-width: 12rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.35rem 0;
}
.dropdown-content a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.8rem; min-height: 2.5rem; }
.dropdown-content a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dropdown-content .en { font-size: 0.78rem; }

.page-head { padding: 1.4rem 0 0.4rem; }
.page-head h1, .article h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.18;
  margin: 0;
}
.h1-en, .title-en { display: block; color: var(--muted); font-weight: 500; }
.page-head .h1-en, .article .h1-en { font-size: 0.42em; margin-top: 0.25rem; letter-spacing: 0.01em; }
.running { margin: 0 0 0.35rem; color: var(--muted); font-size: var(--text-sm); letter-spacing: 0.04em; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.95rem;
  padding: 0.55rem 0 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.filters a { color: var(--muted); text-decoration: none; min-height: 2.25rem; display: inline-flex; align-items: center; }
.filters a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--apple); }

.layout, .sheet { display: block; padding-bottom: 2.5rem; }
.day-head {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  margin: 1.4rem 0 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ink);
}
.day-num {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 0.8;
  font-weight: 600;
}
.day-month { display: block; font-family: var(--serif); font-size: 1rem; line-height: 1.1; }
.day-rel { display: block; font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.entry {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  padding: 0.95rem 0 1rem 0.7rem;
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
}
.entry.line-science { border-left-color: var(--apple); }
.entry.line-news { border-left-color: var(--ink); }
.entry.line-ai { border-left-color: var(--electron); }
.entry-time { margin: 0.15rem 0 0; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.kicker { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.kicker a { color: inherit; text-decoration: none; }
.line-science .kicker a, .kicker.line-science a, .line-label.line-science a { color: var(--apple); }
.line-ai .kicker a, .kicker.line-ai a, .line-label.line-ai a { color: var(--electron); }
.quiz-mark { font-weight: 600; color: var(--apple); text-decoration: none; letter-spacing: 0.04em; font-size: 0.82em; }
.quiz-mark::before { content: "·"; margin: 0 0.35rem; color: var(--muted); font-weight: 400; }
.entry-title { margin: 0.1rem 0 0; font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.35; }
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { color: var(--apple); }
.entry .title-en { font-size: 0.86em; margin-top: 0.12rem; }
.dek { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.98rem; }
.cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--rule);
}
.cover { grid-column: 1 / -1; }
.entry.is-lead .entry-title { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.empty { color: var(--muted); }

.sidebar { margin-top: 2rem; }
.sub-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.4rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink);
}
.sub-menu { list-style: none; margin: 0; padding: 0; }
.sub-menu li { border-bottom: 1px solid var(--rule); }
.sub-menu a {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  color: var(--ink);
  text-decoration: none;
  min-height: 2.5rem;
  align-items: center;
}
.sub-menu .en, .sub-menu .side-en { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.sub-menu .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.sub-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--apple); padding-left: 0.55rem; }
.sub-menu li.line-science a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--apple); }
.sub-menu li.line-ai a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--electron); }
.sub-menu li.line-news a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); }
.side-zh, .side-en { display: block; }
.side-empty { color: var(--muted); padding: 0.4rem 0; }

.pager, .prevnext {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: baseline;
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ink);
}
.pager a, .prevnext a { color: var(--ink); font-weight: 700; }
.pager-status { color: var(--muted); font-variant-numeric: tabular-nums; }
.prevnext a { flex: 1 1 14rem; text-decoration: none; }
.prevnext-label { display: block; color: var(--muted); font-size: var(--text-xs); letter-spacing: 0.12em; font-weight: 600; }
.prevnext .title-en { font-size: var(--text-sm); }

.colophon-cast {
  margin: 0.5rem 0 2.5rem;
  padding-top: 1rem;
  border-top: 3px double var(--ink);
}
.colophon-cast .cast-link {
  display: block;
  width: 100%;
  cursor: pointer;
  line-height: 0;
  text-decoration: none;
  border-radius: 2px;
}
.colophon-cast .cast-link:hover { opacity: 0.92; }
.colophon-cast .cast-link:focus-visible { outline: 2px solid var(--apple); outline-offset: 4px; opacity: 1; }
.colophon-cast img { display: block; width: 100%; height: auto; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 1rem 0 0.6rem; padding: 0; font-size: var(--text-sm); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.article .kicker { margin-top: 0.2rem; }
.article .kicker time { color: var(--muted); font-weight: 500; margin-left: 0.45rem; font-variant-numeric: tabular-nums; }
.hero-figure { margin: 1rem 0 0; }
.hero-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--rule); }
.article { padding-bottom: 2rem; }
.article-body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.9;
  margin-top: 1.25rem;
}
.article-body h2 {
  font-size: 1.45rem;
  line-height: 1.35;
  margin: 2.75rem 0 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ink);
}
.article-body h3 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 2rem 0 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.article-body h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 1.5rem 0 0.6rem;
}
.article-body p { margin: 1.2rem 0; }
.article-body .katex-display,
.article-body div.math-display { margin: 1.25rem 0; }
.article-body .disclaimer {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 1.35rem 0 0;
}
.article-body .in-english {
  margin-top: 2.75rem;
  padding-top: 0.4rem;
  border-top: 3px double var(--ink);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.75;
}
.article-body .in-english h2 {
  border: 0;
  margin: 0.6rem 0 1rem;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-body .in-english h3 {
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: 1.8rem;
}
.article-body .in-english p { margin: 0.85rem 0; }
.article-body a { font-family: var(--sans); }
.article-body blockquote {
  margin: 1.1rem 0;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 3px solid var(--apple);
  color: var(--muted);
  font-size: 0.95rem;
}
.article-body figure { margin: 1.2rem 0; }
.article-body figcaption { color: var(--muted); font-family: var(--sans); font-size: var(--text-sm); line-height: 1.5; }
.article-body ul, .article-body ol { padding-left: 1.2rem; }
.article-body li { margin: 0.65rem 0; }
.article-body details {
  margin: 1.6rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.article-body summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  padding: 0.75rem 0;
  min-height: 2.75rem;
}
.article-body summary::marker { color: var(--apple); }
.article-body details[open] summary { color: var(--apple); }
.article-body details:not([open]) > :not(summary) { display: none; }
.article-body details > :not(summary) { margin-top: 0; }
.short-block {
  width: min(100%, 22.5rem);
  margin: 1.25rem auto 1.6rem;
}
.short-title {
  margin: 0 0 0.65rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}
.short-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink);
}
.short-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.short-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  padding: 0.4rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.short-btn:hover,
.short-btn:focus-visible { background: var(--apple); color: var(--paper); }
.article-body details .short-block { margin-top: 0.8rem; }
.lang-block + .lang-block { margin-top: 1.5rem; padding-top: 0.4rem; border-top: 3px double var(--ink); }
.block-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.math-display { max-width: 100%; }
div.math-display, .katex-display {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 0.2rem;
}
span.math-display {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: middle;
}
.katex-display > .katex { white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; list-style: none; margin: 1.4rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); }
.tags a { color: var(--muted); }
.share-block, .follow, .related { margin-top: 1.6rem; }
.share-block h2, .follow h2, .related h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}
.share, .social, .footer-links, .related-list { list-style: none; margin: 0; padding: 0; }
.share, .social-text, .footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.share a, .share button, .social a, .footer-links a {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}
.social-text a { gap: 0.35rem; text-decoration: none; }
.social-handle { color: var(--muted); font-size: var(--text-sm); }
.social-icons a { width: 2.5rem; justify-content: center; }
.related-list li { border-top: 1px solid var(--rule); border-left: 3px solid var(--rule); }
.related-list .line-science { border-left-color: var(--apple); }
.related-list .line-news { border-left-color: var(--ink); }
.related-list .line-ai { border-left-color: var(--electron); }
.related-list a { display: block; padding: 0.55rem 0 0.55rem 0.7rem; color: var(--ink); text-decoration: none; }
.related-list time { display: block; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

.page-archive { padding-bottom: 3rem; }
.month-head {
  font-family: var(--serif);
  font-size: 1.45rem;
  margin: 1.6rem 0 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ink);
}
.month-head .en { display: block; color: var(--muted); font-size: 0.7em; }
.archive-row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.5rem 0.8rem;
  padding: 0.7rem 0 0.7rem 0.7rem;
  border-left: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.archive-row.line-science { border-left-color: var(--apple); }
.archive-row.line-news { border-left-color: var(--ink); }
.archive-row.line-ai { border-left-color: var(--electron); }
.archive-row time { font-variant-numeric: tabular-nums; }
.archive-row time span { display: block; color: var(--muted); font-size: var(--text-xs); }
.archive-row h3 { margin: 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.archive-row a { color: var(--ink); text-decoration: none; }
.archive-row .title-en { font-size: 0.86em; }

.page-narrow { max-width: var(--measure); padding-top: 1.2rem; padding-bottom: 3rem; }
.page-narrow h1 { font-family: var(--serif); font-size: clamp(1.85rem, 4vw, 2.7rem); line-height: 1.2; margin: 0 0 0.8rem; }
.page-narrow h2 { font-family: var(--serif); font-size: 1.35rem; margin: 1.6rem 0 0.4rem; }
.page-narrow figure { margin: 1rem 0; }
.page-narrow img { display: block; width: 100%; object-fit: cover; }

.site-footer {
  border-top: 3px double var(--ink);
  padding: 1.4rem 0 2.2rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.footer-brand { color: var(--ink); font-family: var(--serif); font-size: 1.15rem; margin: 0; }
.footer-brand span { display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal { margin-top: 1rem; }

@media (min-width: 800px) {
  .mast { grid-template-columns: auto 1fr auto; align-items: center; }
  .mast-date { justify-self: center; text-align: center; }
  .mast-date time { display: inline; margin-left: 0.35rem; }
  .mast-tools { grid-column: auto; width: min(28rem, 40vw); }
  .entry { grid-template-columns: 4.2rem minmax(0, 1fr) 10.5rem; align-items: start; }
  .cover { grid-column: auto; }
  .entry.is-lead { grid-template-columns: 4.2rem minmax(0, 1fr) 14rem; }
}
@media (min-width: 960px) {
  .layout, .sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar);
    gap: 2.5rem 3rem;
    align-items: start;
  }
  .sheet { grid-template-columns: minmax(0, var(--measure)) var(--sidebar); }
  .sidebar { margin-top: 1.2rem; position: sticky; top: 0.75rem; }
  .entry.is-lead { grid-template-columns: 4.2rem minmax(0, 1fr) 16rem; }
}
@media (max-width: 420px) {
  .wrap { width: min(var(--page), calc(100% - 1.25rem)); }
  .brand-text { font-size: 1.05rem; }
  .day-num { font-size: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .site-header, .site-footer, .sidebar, .share-block, .follow, .filters, .colophon-cast { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}