:root {
  color-scheme: light;
  --ink: #19362c;
  --muted: #53655d;
  --paper: #f5f1e6;
  --surface: #fffdf7;
  --green: #0d3328;
  --brass: #a27b36;
  --line: #d8d2c1;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 17px/1.85 system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; }
a { color: #155e48; text-underline-offset: .2em; }
a:hover { color: #8a6424; }
.article-header { background: var(--green); color: #f5f1e6; }
.article-header-inner, .article-main, .article-footer-inner { width: min(100% - 40px, 880px); margin-inline: auto; }
.article-header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.article-brand { color: inherit; font-weight: 700; text-decoration: none; }
.article-nav { display: flex; gap: 20px; font-size: .9rem; }
.article-nav a { color: #f5f1e6; }
.article-main { padding-block: 38px 72px; }
.breadcrumbs { margin: 0 0 22px; color: var(--muted); font-size: .86rem; }
.article-kicker { margin: 0 0 8px; color: #806126; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
h1, h2, h3 { line-height: 1.4; }
h1 { max-width: 18em; margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.035em; }
.article-lead { max-width: 46em; color: #344d42; font-size: 1.12rem; }
.article-meta { margin: 12px 0 28px; color: var(--muted); font-size: .85rem; }
.article-main > section, .article-main > aside { margin-top: 34px; }
.article-main h2 { margin: 0 0 12px; font-size: 1.48rem; }
.article-main h3 { margin: 22px 0 6px; font-size: 1.08rem; }
.article-main p { margin: 10px 0 16px; }
.article-main li + li { margin-top: 7px; }
.article-note, .example-card, .formula-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.article-note strong, .example-card strong { color: #684e1d; }
.article-note p:last-child, .example-card p:last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #eae5d7; font-size: .91rem; }
tr:last-child td { border-bottom: 0; }
code, .code-sample { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-sample { display: block; padding: 13px 16px; border-radius: 8px; color: #f5f1e6; background: var(--green); overflow-wrap: anywhere; }
.timing-example { margin: 20px 0 24px; padding: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.timing-example h3 { margin-top: 0; }
.timing-track { display: flex; min-height: 42px; gap: 3px; margin: 10px 0; }
.timing-part { display: grid; min-width: 44px; flex: var(--units) 1 0; place-items: center; padding: 3px; border-radius: 5px; text-align: center; font-size: .76rem; font-weight: 700; line-height: 1.3; }
.timing-tone { background: #b9944d; color: #182c24; }
.timing-gap { background: #e9e2d2; color: #49584f; }
.timing-word { background: #dce8df; }
.timing-caption { color: var(--muted); font-size: .87rem; }
.article-cta { display: inline-block; padding: 10px 16px; border-radius: 7px; color: #fffdf7; background: var(--green); font-weight: 700; text-decoration: none; }
.article-cta:hover { color: #fff; background: #245642; }
.article-list { display: grid; gap: 16px; margin: 26px 0; padding: 0; list-style: none; }
.article-list li { margin: 0; padding: 21px 22px; border: 1px solid var(--line); border-left: 5px solid var(--brass); border-radius: 11px; background: var(--surface); }
.article-list h2 { margin: 0 0 5px; font-size: 1.25rem; }
.article-list p { margin: 5px 0; color: #42574d; }
.article-tag { color: #73571f; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.article-footer { padding-block: 22px; color: #f5f1e6; background: var(--green); font-size: .9rem; }
.article-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.article-footer a { color: #f5f1e6; }
@media (max-width: 620px) {
  body { font-size: 16px; }
  .article-header-inner, .article-main, .article-footer-inner { width: min(100% - 30px, 880px); }
  .article-header-inner { min-height: 62px; }
  .article-nav { gap: 11px; font-size: .82rem; }
  .article-main { padding-top: 25px; }
  th, td { padding: 10px; }
  .timing-example { padding: 13px; }
  .timing-part { min-width: 36px; font-size: .69rem; }
}