:root {
  --jr-paper: #e4e8ee;
  --jr-ink: #182030;
  --jr-red: #c0392b;
  --jr-red-deep: #a2301f;
  --jr-brass: #b6914a;
  --jr-brass-ink: #6e5424;
  --jr-line: #c8cfda;
  --jr-surf: #f8f9fb;
  --jr-mute: #465166;
  --jr-r: 6px;
  --jr-cjk: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --jr-latin: "Bernard MT Condensed", "Impact", "Arial Narrow", sans-serif;
  --jr-wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--jr-paper);
  color: var(--jr-ink);
  font-family: var(--jr-cjk);
  font-size: 16px;
  line-height: 1.75;
}

img { max-width: 100%; height: auto; }

a { color: var(--jr-ink); text-decoration-color: var(--jr-red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--jr-red-deep); }

:focus-visible { outline: 3px solid var(--jr-red); outline-offset: 2px; border-radius: 2px; }

.jr-skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--jr-ink); color: var(--jr-surf);
  padding: 10px 16px; border-radius: var(--jr-r); text-decoration: none;
}
.jr-skip:focus { top: 12px; color: var(--jr-surf); }

/* header */
.jr-top { border-bottom: 2px solid var(--jr-ink); box-shadow: 0 3px 0 -1px var(--jr-line); }
.jr-top-in {
  max-width: var(--jr-wrap); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.jr-brand { display: inline-flex; align-items: center; min-height: 44px; }
.jr-mark { display: block; width: 132px; height: 40px; }
.jr-mark-t { font-family: var(--jr-latin); font-size: 31px; fill: var(--jr-ink); letter-spacing: .02em; }
.jr-nav { display: flex; gap: 4px; }
.jr-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  text-decoration: none; font-size: 15px; border-radius: var(--jr-r);
}
.jr-nav a:hover { background: var(--jr-surf); }
.jr-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--jr-red); }

.jr-main { max-width: var(--jr-wrap); margin: 0 auto; padding: 0 24px 64px; }

/* hero */
.jr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas: "head plates" "rec card";
  column-gap: 56px; row-gap: 22px;
  padding: 34px 0 40px;
  align-items: start;
}
.jr-hero-head { grid-area: head; }
.jr-plates { grid-area: plates; }
.jr-hero-card { grid-area: card; }
.jr-rec { grid-area: rec; }

.jr-h1 {
  margin: 0 0 18px;
  font-size: clamp(46px, 7vw, 90px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.01em;
  line-break: strict;
  text-wrap: balance;
}
.jr-h1-seg { display: inline-block; white-space: nowrap; }
.jr-seg { display: inline-block; }
.jr-lead { margin: 0; max-width: 32em; font-size: 17px; color: var(--jr-mute); }

/* signboards */
.jr-plates { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.jr-plate {
  --jr-pb: var(--jr-ink); --jr-pc: var(--jr-surf);
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 92px; padding: 12px 26px;
  background-color: var(--jr-pb); color: var(--jr-pc);
  border-radius: var(--jr-r);
  background-image:
    radial-gradient(circle at 12px 12px, var(--jr-brass) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--jr-brass) 3px, transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--jr-brass) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--jr-brass) 3px, transparent 3.6px);
  box-shadow: inset 0 0 0 5px var(--jr-pb), inset 0 0 0 6.5px color-mix(in srgb, var(--jr-pc) 55%, transparent);
}
.jr-plate-word { font-family: var(--jr-latin); font-size: 62px; line-height: 1; letter-spacing: .03em; }
.jr-plate-tag { font-size: 13px; line-height: 1.4; text-align: right; max-width: 14em; opacity: .92; }
.jr-plate--old { --jr-pb: #cdd3dc; --jr-pc: #5d6678; transform: rotate(-1.4deg); margin: 0 10px; }
.jr-plate--old .jr-plate-word { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .75; }
.jr-plate--zh { --jr-pb: var(--jr-red); }
.jr-plate--zh .jr-plate-word { font-family: var(--jr-cjk); font-weight: 800; font-size: 54px; letter-spacing: .08em; }
.jr-rivet-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -4px 0; }
.jr-rivet {
  position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8bb7e, var(--jr-brass) 55%, #8c6c33);
  box-shadow: 0 1px 0 rgba(24, 32, 48, .25);
}
.jr-rivet::before, .jr-rivet::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: var(--jr-surf);
}
.jr-rivet::before { top: 12px; }
.jr-rivet::after { bottom: 12px; }
.jr-rivet-say { font-size: 13px; color: var(--jr-brass-ink); }

/* code card */
.jr-card {
  background: var(--jr-surf);
  border: 1px solid var(--jr-line);
  border-left: 6px solid var(--jr-red);
  border-radius: var(--jr-r);
  padding: 16px 18px;
}
.jr-card-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.jr-card-label { font-size: 13px; color: var(--jr-mute); width: 100%; }
.jr-card-code {
  font-family: var(--jr-latin); font-size: 34px; line-height: 1.1; letter-spacing: .08em;
  color: var(--jr-ink); background: none; padding: 0;
}
.jr-copy {
  min-height: 44px; min-width: 76px; padding: 0 18px;
  border: 0; border-radius: var(--jr-r);
  background: var(--jr-ink); color: var(--jr-surf);
  font: inherit; font-size: 15px; cursor: pointer;
}
.jr-copy:hover { background: #2b3650; }
.jr-copy--done { background: var(--jr-brass-ink); }
.jr-card-note { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--jr-ink); }
.jr-card-go {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 14px; padding: 8px 16px;
  background: var(--jr-red); color: #fff; border-radius: var(--jr-r);
  text-decoration: none; font-weight: 700; font-size: 16px;
}
.jr-card-go:hover { background: var(--jr-red-deep); color: #fff; }
.jr-card-disc { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--jr-mute); }
.jr-card-disc a { display: inline-block; margin-left: 4px; }
.jr-card--art { margin: 1.6em 0; }

/* recommendation */
.jr-rec { border-top: 2px solid var(--jr-ink); padding-top: 14px; }
.jr-rec-label { margin: 0 0 6px; font-size: 14px; color: var(--jr-red-deep); font-weight: 700; }
.jr-rec-title {
  display: inline-block; font-size: 21px; line-height: 1.45; font-weight: 700;
  line-break: strict; text-wrap: balance; padding: 4px 0;
}
.jr-rec-note { margin: 6px 0 0; font-size: 15px; color: var(--jr-mute); max-width: 34em; }

/* home sections */
.jr-home-body, .jr-home-shelf {
  max-width: 46em; margin: 0 0 0;
  padding: 26px 0 8px; border-top: 1px solid var(--jr-line);
}
.jr-home-body h2:first-child { margin-top: 0; }
.jr-home-body ul { padding-left: 1.2em; }
.jr-home-body li { margin: .5em 0; }
.jr-shelf-list { list-style: none; padding: 0; margin: 0 0 12px; }
.jr-shelf-list li { padding: 10px 0; border-bottom: 1px dashed var(--jr-line); }
.jr-shelf-list a { font-size: 17px; font-weight: 700; display: inline-block; padding: 6px 0; }
.jr-shelf-date { display: block; font-size: 13px; color: var(--jr-mute); }
.jr-shelf-more a { display: inline-block; padding: 8px 2px; }

/* h2 with rivet */
.jr-h2, .jr-prose h2, .jr-home-body h2, .jr-plain-body h2 {
  position: relative;
  margin: 2.1em 0 .8em;
  padding-left: 30px;
  font-size: 25px; line-height: 1.4; font-weight: 800;
  line-break: strict; text-wrap: balance;
}
.jr-h2::before, .jr-prose h2::before, .jr-home-body h2::before, .jr-plain-body h2::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--jr-brass);
  box-shadow: inset 0 0 0 3px #d4b676, 0 0 0 2px var(--jr-paper), 0 0 0 3px var(--jr-brass);
}

/* crumbs */
.jr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 10px 0 4px; font-size: 14px; color: var(--jr-mute); }
.jr-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.jr-crumb-sep { color: var(--jr-line); padding: 0 4px; }

/* article */
.jr-arthead { padding: 8px 0 18px; max-width: 46em; }
.jr-arth1 {
  margin: 0 0 12px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.22; font-weight: 800;
  line-break: strict; text-wrap: balance;
}
.jr-byline { font-size: 14px; color: var(--jr-mute); }
.jr-cover { margin: 0 0 24px; }
.jr-cover img { display: block; width: 100%; border-radius: var(--jr-r); border: 1px solid var(--jr-line); }
.jr-cover figcaption { font-size: 14px; color: var(--jr-mute); margin-top: 8px; }

.jr-toc-m { display: none; }
.jr-artgrid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: start; }
.jr-prose {
  background: var(--jr-surf); border: 1px solid var(--jr-line); border-radius: var(--jr-r);
  padding: 30px 40px 36px; font-size: 17px; line-height: 1.88; min-width: 0;
}
.jr-prose > * { max-width: 38em; }
.jr-prose > .jr-tablewrap, .jr-prose > .jr-shot { max-width: 100%; }
.jr-prose p { margin: 0 0 1.1em; }
.jr-prose h2:first-child { margin-top: .6em; }
.jr-prose ol, .jr-prose ul { padding-left: 1.5em; margin: 0 0 1.2em; }
.jr-prose li { margin: 0 0 .9em; }
.jr-prose strong { font-weight: 800; }
.jr-prose code { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: var(--jr-paper); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.jr-fix {
  position: relative; background: #fff; border: 1px solid var(--jr-line); border-left: 6px solid var(--jr-brass);
  border-radius: var(--jr-r); padding: 34px 18px 14px;
}
.jr-fix::before {
  content: "纠错"; position: absolute; left: 18px; top: 9px;
  font-size: 13px; font-weight: 700; color: var(--jr-red-deep);
}

.jr-toc-side { position: sticky; top: 20px; font-size: 14px; }
.jr-toc-head { margin: 0 0 6px; font-weight: 700; padding-left: 12px; border-left: 4px solid var(--jr-red); }
.jr-toc-ol { list-style: none; margin: 0; padding: 0; counter-reset: jrtoc; }
.jr-toc-ol li { counter-increment: jrtoc; border-bottom: 1px solid var(--jr-line); }
.jr-toc-ol a {
  display: flex; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 4px;
  text-decoration: none; line-height: 1.5;
}
.jr-toc-ol a::before { content: counter(jrtoc); font-family: var(--jr-latin); color: var(--jr-brass-ink); min-width: 1.2em; }
.jr-toc-ol a:hover { color: var(--jr-red-deep); }

/* figures */
.jr-shot { margin: 1.6em 0; }
.jr-shot img { display: block; border: 1px solid var(--jr-line); border-radius: var(--jr-r); background: #fff; }
.jr-shot figcaption {
  margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--jr-brass);
  font-size: 14px; line-height: 1.6; color: var(--jr-mute);
}

/* tables */
.jr-tablewrap { overflow-x: auto; margin: 1.4em 0 1.6em; border: 1px solid var(--jr-line); border-radius: var(--jr-r); background: #fff; }
.jr-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.jr-table th, .jr-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--jr-line); }
.jr-table thead th { background: var(--jr-ink); color: var(--jr-surf); font-weight: 700; }
.jr-table tbody th { font-weight: 700; min-width: 8em; }
.jr-table tbody tr:last-child > * { border-bottom: 0; }

/* faq + after */
.jr-faq, .jr-after { max-width: calc(100% - 310px); }
.jr-faq { margin-top: 36px; }
.jr-faq-item { border-top: 1px solid var(--jr-line); padding: 14px 0 4px; }
.jr-faq-q { margin: 0 0 6px; font-size: 18px; line-height: 1.5; line-break: strict; }
.jr-faq-a { margin: 0 0 10px; font-size: 16px; }
.jr-after { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--jr-ink); }
.jr-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jr-tags-head { font-size: 14px; color: var(--jr-mute); width: 100%; }
.jr-tag { display: inline-block; padding: 4px 12px; font-size: 14px; border: 1px solid var(--jr-ink); border-radius: var(--jr-r); background: var(--jr-surf); }
.jr-after-p { font-size: 15px; }
.jr-after-p a { display: inline-block; padding: 8px 0; }

/* plain pages */
.jr-plain {
  max-width: 46em; background: var(--jr-surf); border: 1px solid var(--jr-line); border-radius: var(--jr-r);
  padding: 28px 36px 30px; margin-top: 6px;
}
.jr-plainh1 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 40px); line-height: 1.25; line-break: strict; text-wrap: balance; }
.jr-plain-body { font-size: 16.5px; line-height: 1.85; }
.jr-plain-body h2 { font-size: 21px; margin-top: 1.6em; }
.jr-plain-body ul { padding-left: 1.3em; }
.jr-plain-body li { margin: .45em 0; }
.jr-plain-body a { display: inline-block; padding: 2px 0; }
.jr-plain-date { margin-top: 20px; font-size: 14px; color: var(--jr-mute); }

/* list pages */
.jr-listhead { max-width: 46em; padding: 8px 0 10px; }
.jr-listh1 { margin: 0 0 12px; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.15; line-break: strict; text-wrap: balance; }
.jr-intro { margin: 0; font-size: 16.5px; color: var(--jr-mute); }
.jr-syn { font-size: 14px; color: var(--jr-mute); }
.jr-count { font-size: 14px; color: var(--jr-mute); margin: 18px 0 10px; }
.jr-list { list-style: none; padding: 0; margin: 0; max-width: 46em; }
.jr-list-item {
  background: var(--jr-surf); border: 1px solid var(--jr-line); border-left: 6px solid var(--jr-ink);
  border-radius: var(--jr-r); padding: 14px 18px; margin-bottom: 12px;
}
.jr-list-title { display: inline-block; font-size: 19px; font-weight: 700; line-height: 1.45; padding: 4px 0; }
.jr-list-desc { margin: 6px 0; font-size: 15px; color: var(--jr-mute); }
.jr-list-date { font-size: 13px; color: var(--jr-mute); }
.jr-pager { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.jr-pager-a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--jr-ink); border-radius: var(--jr-r); text-decoration: none; }

/* search */
.jr-seek { max-width: 46em; }
.jr-seek-label { display: block; font-size: 15px; margin-bottom: 6px; }
.jr-seek-row { display: flex; gap: 8px; }
.jr-seek-input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 2px solid var(--jr-ink); border-radius: var(--jr-r); background: #fff; color: var(--jr-ink);
}
.jr-seek-btn { min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--jr-r); background: var(--jr-red); color: #fff; font: inherit; cursor: pointer; }
.jr-seek-status { font-size: 14px; color: var(--jr-mute); }

/* 404 */
.jr-lost { max-width: 34em; padding: 40px 0 20px; }
.jr-plate--blank { width: 220px; justify-content: center; }
.jr-losth1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; margin: 26px 0 10px; line-break: strict; text-wrap: balance; }
.jr-lost-p { font-size: 17px; color: var(--jr-mute); }
.jr-lost-go { padding-left: 1.2em; }
.jr-lost-go a { display: inline-block; padding: 9px 0; font-size: 17px; }

/* footer */
.jr-foot { background: var(--jr-ink); color: var(--jr-surf); margin-top: 24px; }
.jr-foot-in {
  max-width: var(--jr-wrap); margin: 0 auto; padding: 30px 24px 26px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 48px;
}
.jr-foot .jr-mark-t { fill: var(--jr-surf); }
.jr-foot a { color: var(--jr-surf); text-decoration-color: var(--jr-brass); }
.jr-foot a:hover { color: #fff; }
.jr-foot-brand > a { display: inline-flex; min-height: 44px; align-items: center; }
.jr-foot-say { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #d5dae3; }
.jr-foot-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-content: start; }
.jr-foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
.jr-foot-copy { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: #b9c0cc; border-top: 1px solid #34405a; padding-top: 14px; }

/* tablet */
@media (max-width: 1000px) {
  .jr-artgrid { grid-template-columns: minmax(0, 1fr); }
  .jr-toc-side { display: none; }
  .jr-toc-m { display: block; margin: 0 0 18px; background: var(--jr-surf); border: 1px solid var(--jr-line); border-radius: var(--jr-r); }
  .jr-toc-m summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-weight: 700; font-size: 15px; }
  .jr-toc-m .jr-toc-ol { padding: 0 16px 8px; }
  .jr-faq, .jr-after { max-width: 100%; }
}

@media (max-width: 860px) {
  .jr-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "card" "rec" "plates";
    row-gap: 16px; padding: 18px 0 28px;
  }
  .jr-h1 { font-size: 46px; line-height: 1.1; margin-bottom: 10px; }
  .jr-lead { font-size: 15px; line-height: 1.65; }
  .jr-plates { max-width: 420px; }
  .jr-plate { min-height: 70px; padding: 10px 20px; }
  .jr-plate-word { font-size: 42px; }
  .jr-plate--zh .jr-plate-word { font-size: 38px; }
}

/* phone */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .jr-top-in { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 0; }
  .jr-brand { min-height: 44px; }
  .jr-mark { width: 110px; height: 34px; }
  .jr-nav { justify-content: space-between; margin: 0 -8px; }
  .jr-nav a { padding: 0 8px; font-size: 15px; }
  .jr-main { padding: 0 16px 48px; }
  .jr-hero { padding-top: 12px; }
  .jr-h1 { font-size: 40px; }
  .jr-card { padding: 12px 14px; }
  .jr-card-code { font-size: 30px; }
  .jr-card-note { font-size: 13.5px; margin-top: 8px; }
  .jr-rec { padding-top: 10px; }
  .jr-rec-title { font-size: 18px; }
  .jr-rec-note { font-size: 14px; }
  .jr-h2, .jr-prose h2, .jr-home-body h2, .jr-plain-body h2 { font-size: 20px; padding-left: 26px; }
  .jr-prose { padding: 20px 16px 24px; font-size: 16px; line-height: 1.85; margin: 0 -4px; }
  .jr-plain { padding: 20px 16px 22px; }
  .jr-plain-body { font-size: 16px; }
  .jr-fix { padding: 32px 14px 12px; }
  .jr-table { min-width: 0; }
  .jr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jr-table, .jr-table tbody, .jr-table tr, .jr-table th, .jr-table td { display: block; width: 100%; }
  .jr-table tr { border-bottom: 2px solid var(--jr-ink); padding: 6px 0; }
  .jr-table tbody tr:last-child { border-bottom: 0; }
  .jr-table tbody th { border-bottom: 0; padding-bottom: 2px; font-size: 16px; }
  .jr-table td { border-bottom: 0; padding-top: 4px; padding-bottom: 6px; }
  .jr-table td::before { content: attr(data-jr-h); display: block; font-size: 13px; color: var(--jr-mute); font-weight: 700; }
  .jr-foot-in { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.jr-foot-say a { display: inline-block; min-height: 44px; padding: 10px 0; box-sizing: border-box; }