:root {
  --ink: #111820;
  --ink-2: #1d2832;
  --paper: #f3f1eb;
  --paper-2: #e9e6dd;
  --white: #fbfaf6;
  --muted: #66717a;
  --line: #d5d2ca;
  --line-dark: #aab0b2;
  --red: #e84b37;
  --yellow: #ffc857;
  --blue: #3c78a8;
  --green: #27836d;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
svg { display: block; }
.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 20px; padding: 10px 14px; color: #fff; background: var(--red); }
.skip-link:focus { top: 12px; }

/* Header */
.site-header { height: 72px; color: #fff; background: var(--ink); border-bottom: 1px solid #39434c; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 21px; font-weight: 500; letter-spacing: -.04em; }
.brand b { color: var(--yellow); font-weight: 600; }
.brand svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.desktop-nav { height: 100%; display: flex; }
.desktop-nav a { height: 100%; padding: 0 22px; display: grid; place-items: center; color: #c2c8cc; border-left: 1px solid #303a43; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.desktop-nav a:last-child { border-right: 1px solid #303a43; }
.desktop-nav a:hover { color: #fff; background: #19232c; }
.menu-button { display: none; width: 42px; height: 42px; color: #fff; background: transparent; border: 1px solid #3a444c; }
.menu-button i { width: 17px; height: 1px; display: block; margin: 5px auto; background: currentColor; }
.mobile-menu { position: absolute; z-index: 10; top: 64px; right: 0; width: 240px; padding: 8px; background: var(--ink-2); border: 1px solid #424b52; }
.mobile-menu a { display: block; padding: 11px; color: #fff; border-bottom: 1px solid #39434c; font: 12px var(--mono); text-transform: uppercase; }

/* Hero */
.hero { color: #fff; background: var(--ink); }
.hero-grid { min-height: 550px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(380px, .7fr); gap: 76px; align-items: center; padding-block: 55px 64px; }
.kicker, .section-head p, .rail-label, .tool-code { margin: 0; color: var(--red); font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.kicker span { width: 18px; height: 2px; display: inline-block; margin: 0 9px 3px 0; background: var(--red); }
.hero h1 { max-width: 720px; margin: 20px 0 18px; font: 600 clamp(58px, 6vw, 88px)/.9 var(--serif); letter-spacing: -.055em; }
.hero h1 em, .method-strip h2 em { color: var(--yellow); font-weight: 500; }
.lede { max-width: 680px; margin: 0; color: #aeb6bc; font-size: 17px; line-height: 1.7; }
.search { max-width: 690px; margin-top: 35px; }
.search > label { display: block; margin-bottom: 8px; color: #89939b; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.search > div { height: 57px; display: flex; align-items: center; color: var(--ink); background: #fff; border: 3px solid #fff; }
.search svg { width: 22px; margin-left: 16px; fill: none; stroke: #66717a; stroke-width: 1.5; }
.search input { min-width: 0; flex: 1; height: 100%; padding: 0 12px; background: transparent; border: 0; outline: 0; }
.search kbd { padding: 3px 7px; color: #6b747a; background: #ecece9; border: 1px solid #d1d2cf; border-radius: 2px; font: 11px var(--mono); }
.search button { align-self: stretch; margin-left: 10px; padding: 0 24px; color: #fff; background: var(--red); border: 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.search button:hover { background: #cc3827; }
.search-status { min-height: 19px; margin: 7px 0 0; color: #98a2a8; font: 11px var(--mono); }
.hero-instrument { border: 1px solid #3a444c; background-color: #151f27; background-image: linear-gradient(#212c35 1px, transparent 1px), linear-gradient(90deg, #212c35 1px, transparent 1px); background-size: 18px 18px; }
.instrument-head { height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: #9ba5ac; background: #1c2730; border-bottom: 1px solid #3a444c; font: 10px var(--mono); }
.live-dot { color: #64bda5; }
.live-dot::before { content: ""; width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; background: currentColor; border-radius: 50%; }
.measurement-stage { min-height: 285px; display: grid; place-items: center; position: relative; }
.flag { display: inline-block; position: relative; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,.16); }
.flag-ch { width: 54px; aspect-ratio: 1; background: #da291c; }
.flag-ch i::before, .flag-ch i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.flag-ch i::before { width: 20%; height: 62.5%; }.flag-ch i::after { width: 62.5%; height: 20%; }
.flag-ch.large { width: 205px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.flag-jp { width: 60px; aspect-ratio: 3/2; background: #fff; border: 1px solid #dedede; }
.flag-jp i { width: 40%; aspect-ratio: 1; position: absolute; left: 50%; top: 50%; border-radius: 50%; background: #bc002d; transform: translate(-50%, -50%); }
.flag-fr { width: 60px; aspect-ratio: 3/2; background: linear-gradient(90deg,#002654 33.333%,#fff 33.333% 66.666%,#ce1126 66.666%); border: 1px solid #d8d8d8; }
.flag-dc { width: 60px; aspect-ratio: 2/1; background: linear-gradient(#fff 31%,#e21c2a 31% 43%,#fff 43% 52%,#e21c2a 52% 64%,#fff 64%); border: 1px solid #d5d5d5; }
.flag-dc i::before { content: "★ ★ ★"; width: 100%; position: absolute; left: 0; top: 5%; color: #e21c2a; font: 8px/1 var(--sans); text-align: center; }
.flag-bravo { width: 60px; aspect-ratio: 3/2; background: #d71920; clip-path: polygon(0 0,100% 0,73% 50%,100% 100%,0 100%); box-shadow: none; }
.flag-us49 { width: 60px; aspect-ratio: 19/10; background: repeating-linear-gradient(#b22234 0 7.692%,#fff 7.692% 15.384%); border: 1px solid #c8c8c8; }
.flag-us49 i { width: 40%; height: 53.85%; position: absolute; left: 0; top: 0; background-color: #3c3b6e; background-image: radial-gradient(circle,#fff 0 1px,transparent 1.2px),radial-gradient(circle,#fff 0 1px,transparent 1.2px); background-size: 14.285% 28.57%; background-position: 0 0,7.142% 14.285%; }
.flag-ca { width: 60px; aspect-ratio: 2/1; background: linear-gradient(90deg,#d80621 25%,#fff 25% 75%,#d80621 75%); border: 1px solid #d5d5d5; }
.flag-ca i { width: 31%; height: 72%; position: absolute; left: 50%; top: 47%; background: #d80621; clip-path: polygon(50% 0,58% 25%,73% 17%,69% 37%,91% 32%,78% 51%,100% 59%,68% 67%,72% 89%,55% 78%,54% 100%,46% 100%,45% 78%,28% 89%,32% 67%,0 59%,22% 51%,9% 32%,31% 37%,27% 17%,42% 25%); transform: translate(-50%,-50%); }
.flag-np { width: 43px; height: 54px; background: #003893; clip-path: polygon(0 0,100% 41%,58% 41%,100% 100%,0 100%); box-shadow: none; }
.flag-np i { position: absolute; inset: 3px 4px 3px 3px; background: #dc143c; clip-path: polygon(0 0,100% 40%,55% 40%,100% 100%,0 100%); }
.flag-np i::before, .flag-np i::after { content: ""; position: absolute; left: 25%; width: 9px; aspect-ratio: 1; background: #fff; border-radius: 50%; }
.flag-np i::before { top: 17%; box-shadow: 0 -2px 0 1px #dc143c; }.flag-np i::after { bottom: 15%; clip-path: polygon(50% 0,61% 34%,98% 22%,70% 50%,98% 78%,61% 66%,50% 100%,39% 66%,2% 78%,30% 50%,2% 22%,39% 34%); }
.flag-chi { width: 60px; aspect-ratio: 3/2; background: linear-gradient(#fff 16.6%,#6cc7e7 16.6% 33.3%,#fff 33.3% 66.6%,#6cc7e7 66.6% 83.3%,#fff 83.3%); border: 1px solid #d5d5d5; }
.flag-chi i::before { content: "✶  ✶  ✶  ✶"; width: 100%; position: absolute; left: 0; top: 50%; color: #e32219; font: 11px/1 var(--sans); letter-spacing: -1px; text-align: center; transform: translateY(-50%); }
.flag-alpha { width: 60px; aspect-ratio: 3/2; background: linear-gradient(90deg,#fff 50%,#005eb8 50%); clip-path: polygon(0 0,100% 0,73% 50%,100% 100%,0 100%); border: 1px solid #9da9b0; box-shadow: none; }
.flag-us48 { width: 60px; aspect-ratio: 19/10; background: repeating-linear-gradient(#b22234 0 7.692%,#fff 7.692% 15.384%); border: 1px solid #c8c8c8; }
.flag-us48 i { width: 40%; height: 53.85%; position: absolute; left: 0; top: 0; background-color: #3c3b6e; background-image: radial-gradient(circle,#fff 0 1px,transparent 1.2px); background-size: 12.5% 16.66%; }
.hero-flag-image { width: 205px; max-height: 205px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.3)); }
.flag-image { width: 60px; height: 45px; display: block; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
.flag-image.tall-flag { height: 54px; }.flag-image.signal-flag { height: 48px; }
.dimension { position: absolute; color: #74818b; font: 9px var(--mono); }
.dimension::before, .dimension::after { content: ""; position: absolute; background: #53606a; }
.dimension.top { width: 205px; height: 20px; top: 25px; left: 50%; border-top: 1px solid #53606a; transform: translateX(-50%); text-align: center; }
.dimension.top::before, .dimension.top::after { width: 1px; height: 7px; top: -4px; }.dimension.top::before { left: 0; }.dimension.top::after { right: 0; }
.dimension.top span { position: relative; top: -18px; padding: 0 6px; background: #151f27; }
.dimension.side { height: 205px; width: 20px; left: calc(50% - 128px); top: 50%; border-left: 1px solid #53606a; transform: translateY(-50%); }
.dimension.side::before, .dimension.side::after { width: 7px; height: 1px; left: -4px; }.dimension.side::before { top: 0; }.dimension.side::after { bottom: 0; }
.dimension.side span { position: absolute; left: -34px; top: 50%; padding: 0 5px; background: #151f27; transform: rotate(-90deg) translateY(-50%); }
.instrument-data { margin: 0; display: grid; grid-template-columns: 1fr 1fr; background: #1a242c; border-top: 1px solid #3a444c; }
.instrument-data div { padding: 11px 14px; border-right: 1px solid #3a444c; border-bottom: 1px solid #3a444c; }
.instrument-data div:nth-child(even) { border-right: 0; }
.instrument-data dt { color: #687580; font: 9px var(--mono); text-transform: uppercase; }.instrument-data dd { margin: 4px 0 0; color: #d5dade; font: 11px var(--mono); }
.status-bar { color: #d2d7da; background: #27333c; border-top: 1px solid #424c54; }
.status-bar .shell { min-height: 46px; display: flex; align-items: center; }
.status-bar span, .status-bar a { padding: 0 24px; border-right: 1px solid #424c54; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.status-bar span:first-child { padding-left: 0; }.status-bar span i { width: 7px; height: 7px; display: inline-block; margin-right: 7px; background: #5bb99f; border-radius: 50%; }
.status-bar b { color: var(--yellow); font-weight: 500; }.status-bar a { margin-left: auto; padding-right: 0; color: #fff; border: 0; }

/* Main */
.content-grid { padding-block: 52px 70px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 52px; align-items: start; }
.section { padding: 0 0 58px; scroll-margin-top: 20px; }
.section + .section { padding-top: 48px; border-top: 1px solid var(--line); }
.section-head { margin-bottom: 22px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-head p { margin-bottom: 5px; }.section-head h2 { margin: 0; font: 600 38px/1.1 var(--serif); letter-spacing: -.025em; }
.section-head > a { padding-bottom: 5px; color: #4d5a64; font: 500 11px var(--mono); text-transform: uppercase; border-bottom: 1px solid var(--line-dark); }.section-head > a span { color: var(--red); }
.category-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: var(--white); }
.category-grid > a { min-width: 0; min-height: 235px; padding: 17px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.category-grid > a:last-child { border-right: 0; }.category-grid > a:hover { background: #eeece5; }
.category-number { color: #8a9398; font: 9px var(--mono); }.category-icon { width: 100%; height: 53px; display: grid; place-items: center; margin: 15px 0; position: relative; background: #eceae4; overflow: hidden; }
.category-icon b { display: block; }
.national-icon b { width: 60px; height: 36px; background: linear-gradient(90deg,#243e68 33%,#f7f6f1 33% 66%,#d74434 66%); box-shadow: 0 2px 4px rgba(0,0,0,.13); }
.civic-icon { color: #e32219; background: linear-gradient(#fff 25%,#6cc7e7 25% 37%,#fff 37% 63%,#6cc7e7 63% 75%,#fff 75%); font-size: 24px; }
.maritime-icon b { width: 62px; height: 38px; background: linear-gradient(90deg,#fff 50%,#005eb8 50%); clip-path: polygon(0 0,100% 0,73% 50%,100% 100%,0 100%); }
.historical-icon b { width: 62px; height: 36px; background: repeating-linear-gradient(#b22234 0 8%,#fff 8% 16%); position: relative; }.historical-icon b::after { content: ""; width: 25px; height: 19px; position: absolute; left: 0; top: 0; background: #3c3b6e; }
.category-grid h3 { margin: 0 0 5px; font: 600 19px var(--serif); }.category-grid p { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.55; }.category-grid strong { margin-top: auto; color: var(--red); font: 500 9px var(--mono); text-transform: uppercase; }
.category-card-flag { width: 100%; height: 92px; margin-bottom: 14px; display: block; object-fit: contain; object-position: left center; }.category-card-flag.signal-card-flag { width: 92px; }
.filters { margin-bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.filter { padding: 7px 11px; color: #5d6972; background: transparent; border: 1px solid var(--line-dark); font: 10px var(--mono); text-transform: uppercase; }
.filter:hover, .filter.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.record-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
.record-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.record-table th { padding: 10px 13px; color: #7a8389; background: #e8e6df; border-bottom: 1px solid var(--line); font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: left; }
.record-table td { height: 75px; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.record-table tr:last-child td { border-bottom: 0; }.record-table tr[hidden] { display: none; }
.record-table td:nth-child(2) { min-width: 185px; }.record-table strong, .record-table small { display: block; }.record-table strong { font-size: 13px; }.record-table small { margin-top: 2px; color: #74808a; font-size: 10px; }
.record-table code { color: #35424b; font: 11px var(--mono); }
.record-table tr:not(.planned):hover { background: #f6f3eb; }
.record-table .planned { color: #778188; }.record-table .planned .flag { filter: saturate(.7); }
.swatches { display: flex; }.swatches i { width: 14px; height: 14px; display: block; margin-right: 3px; background: var(--swatch); border: 1px solid rgba(17,24,32,.16); }
.verified, .draft { padding: 4px 7px; color: #18705b; background: #dfeee8; font: 500 9px var(--mono); text-transform: uppercase; }.verified::before { content: "✓"; margin-right: 4px; }
.draft { color: #80671b; background: #eee7cd; }
.arrow-link { font: 16px var(--mono); }.no-results { padding: 14px; color: #7a4438; background: #f3ded8; border: 1px solid #e0c0b9; font: 12px var(--mono); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-card { min-height: 292px; padding: 18px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.tool-card:hover { transform: translateY(-3px); border-color: #929a9d; }
.tool-card > svg { width: 100%; height: 85px; margin: 15px 0; fill: none; stroke: #53616a; stroke-width: 1; }
.tool-card h3 { margin: 6px 0 7px; font: 600 23px var(--serif); }.tool-card p { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }.tool-card b { margin-top: auto; color: var(--red); font: 500 10px var(--mono); text-transform: uppercase; }
.color-tool { height: 85px; margin: 15px 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 24px; border: 1px solid var(--line); }.color-tool i:nth-child(1) { background: #da291c; }.color-tool i:nth-child(2) { background: #bc002d; }.color-tool i:nth-child(3) { background: #002654; }.color-tool span { grid-column: 1/-1; padding: 4px 8px; color: var(--muted); background: #eceae4; font: 9px var(--mono); }
.ruler-tool { height: 85px; margin: 15px 0; display: flex; align-items: center; gap: 0; position: relative; border-bottom: 1px solid #68727a; }.ruler-tool i { height: 24px; flex: 1; border-left: 1px solid #68727a; }.ruler-tool i:nth-of-type(even) { height: 14px; }.ruler-tool span { align-self: flex-end; margin-bottom: -20px; color: #7b858c; font: 8px var(--mono); }
.standard-list { border-top: 1px solid var(--line); }.standard-list article { min-height: 112px; display: grid; grid-template-columns: 45px 1fr 60px; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }.standard-list article > span { color: var(--red); font: 11px var(--mono); }.standard-list h3 { margin: 0 0 5px; font: 600 20px var(--serif); }.standard-list p { margin: 0; color: var(--muted); font-size: 12px; }.standard-list code { justify-self: end; color: #99a0a3; font: 18px var(--mono); }

/* Rail */
.rail { position: sticky; top: 24px; border-left: 1px solid var(--line); }
.rail section { padding: 0 0 28px 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }.rail section:last-child { border-bottom: 0; }
.rail-label { margin-bottom: 17px; color: #69747b; }
.coverage > div { display: grid; grid-template-columns: 72px 1fr 27px; gap: 8px; align-items: center; margin-bottom: 10px; }.coverage strong, .coverage b { font: 9px var(--mono); }.coverage b { color: #69747b; text-align: right; }.coverage > div > span { height: 5px; background: #dddad2; }.coverage i { width: var(--fill); height: 100%; display: block; background: var(--red); }.rail small { display: block; margin-top: 14px; color: #838b90; font-size: 9px; line-height: 1.55; }
.ratio-list a { min-height: 58px; display: grid; grid-template-columns: 50px 1fr 15px; gap: 11px; align-items: center; border-top: 1px solid var(--line); }.ratio-list a:last-child { border-bottom: 1px solid var(--line); }.ratio-list a:hover b { color: var(--red); transform: translateX(2px); }.ratio-list span strong, .ratio-list span small { display: block; }.ratio-list strong { font: 11px var(--mono); }.ratio-list small { margin: 2px 0 0; color: #7d878d; font-size: 9px; }.ratio-list b { font: 12px var(--mono); transition: .15s; }
.ratio-shape { display: block; background: #c5c8c6; border: 1px solid #92999b; }.r23 { width: 36px; aspect-ratio: 3/2; }.r12 { width: 40px; aspect-ratio: 2/1; }.r11 { width: 27px; aspect-ratio: 1; }
.change-log time { color: var(--red); font: 9px var(--mono); }.change-log h3 { margin: 5px 0 7px; font: 600 19px var(--serif); }.change-log p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }.change-log a { font: 500 9px var(--mono); text-transform: uppercase; border-bottom: 1px solid #9da3a4; }

/* End matter */
.method-strip { padding: 58px 0; color: #fff; background-color: #24313a; background-image: linear-gradient(#2e3c45 1px,transparent 1px),linear-gradient(90deg,#2e3c45 1px,transparent 1px); background-size: 24px 24px; }
.method-strip .shell { display: grid; grid-template-columns: 185px 1fr 1fr; gap: 50px; align-items: center; }.big-number { color: var(--yellow); font: 500 72px var(--mono); letter-spacing: -.09em; }.method-strip h2 { margin: 8px 0 0; font: 600 38px/1.05 var(--serif); }.method-strip > div > p:last-child { color: #b5bdc2; font-size: 13px; line-height: 1.8; }
.about { padding: 70px 0 76px; text-align: center; }.about .shell { max-width: 760px; }.about p:first-child { color: var(--red); font: 10px var(--mono); letter-spacing: .1em; }.about h2 { margin: 14px 0 13px; font: 600 42px/1.1 var(--serif); }.about p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
footer { color: #9fa8ae; background: var(--ink); border-top: 4px solid var(--red); }.footer-inner { min-height: 105px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; align-items: center; }.footer-inner p { margin: 0; font: 10px var(--mono); text-transform: uppercase; }.footer-inner p:nth-child(2) { text-align: center; }.footer-inner p:last-child { text-align: right; }

/* Generated pages */
.page-banner { padding: 42px 0 46px; color: #fff; background: var(--ink); border-bottom: 4px solid var(--red); }.breadcrumbs { margin-bottom: 25px; color: #7f8a91; font: 10px var(--mono); text-transform: uppercase; }.breadcrumbs a { color: #c5cbce; }.breadcrumbs span { padding: 0 7px; color: var(--red); }.page-banner h1 { margin: 0 0 8px; font: 600 52px/1 var(--serif); letter-spacing: -.03em; }.page-banner p:last-child { max-width: 680px; margin: 0; color: #aab3b9; font-size: 14px; }
.standard-layout { padding-block: 44px 70px; display: grid; grid-template-columns: 235px minmax(0, 850px); gap: 42px; align-items: start; }.side-index { position: sticky; top: 20px; }.side-index h2 { margin: 0 0 12px; font: 600 20px var(--serif); }.side-index a { display: block; padding: 9px 0; color: #606d75; border-top: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; }.side-index a:hover { color: var(--red); }.document-section { padding-bottom: 38px; margin-bottom: 38px; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }.document-section h2 { margin: 0 0 15px; font: 600 32px var(--serif); }.document-section h3 { margin: 24px 0 8px; font: 600 21px var(--serif); }.document-section p { color: #4d5961; line-height: 1.75; }.document-section .record-table { min-width: 650px; }
.record-hero { padding: 35px 0 42px; color: #fff; background: var(--ink); border-bottom: 4px solid var(--red); }.record-hero-grid { display: grid; grid-template-columns: 1fr 390px; gap: 60px; align-items: end; }.record-id { color: var(--red); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.record-hero h1 { margin: 10px 0 5px; font: 600 58px/1 var(--serif); }.record-hero .subtitle { margin: 0 0 18px; color: #aeb6bc; font-size: 14px; }.record-chips { display: flex; gap: 6px; flex-wrap: wrap; }.record-chips span { padding: 5px 8px; color: #c9d0d4; border: 1px solid #46515a; font: 9px var(--mono); text-transform: uppercase; }.record-specimen { padding: 18px; background-color: #17222a; background-image: linear-gradient(#222f38 1px,transparent 1px),linear-gradient(90deg,#222f38 1px,transparent 1px); background-size: 14px 14px; border: 1px solid #3a4650; }.record-specimen .flag { width: 100%; box-shadow: 0 12px 25px rgba(0,0,0,.27); }.record-specimen figcaption { margin-top: 12px; color: #89949b; font: 9px var(--mono); text-transform: uppercase; }.record-body { padding-block: 42px 70px; display: grid; grid-template-columns: 240px minmax(0, 800px); gap: 45px; align-items: start; }.facts-panel { position: sticky; top: 20px; background: var(--white); border: 1px solid var(--line); }.facts-panel h2 { margin: 0; padding: 12px; color: #fff; background: var(--ink-2); font: 500 10px var(--mono); text-transform: uppercase; }.facts-panel dl { margin: 0; }.facts-panel dl div { padding: 10px 12px; border-bottom: 1px solid var(--line); }.facts-panel dt { color: #7b858b; font: 9px var(--mono); text-transform: uppercase; }.facts-panel dd { margin: 2px 0 0; font-size: 12px; font-weight: 600; }.provenance { padding: 12px; color: #50615b; background: #e2eee9; font-size: 10px; }.provenance strong { display: block; color: #21745f; font: 500 9px var(--mono); text-transform: uppercase; }
.record-specimen .flag-chi i::before { font-size: 40px; letter-spacing: 4px; }
.record-specimen .flag-dc i::before { top: 6%; font-size: 31px; letter-spacing: 8px; }
.record-specimen .flag-us48 i { background-image: radial-gradient(circle,#fff 0 2px,transparent 2.3px); }
.record-specimen .flag-us49 i { background-image: radial-gradient(circle,#fff 0 2px,transparent 2.3px),radial-gradient(circle,#fff 0 2px,transparent 2.3px); }
.record-specimen.nepal-specimen { display: grid; place-items: center; }.record-specimen .flag-np { width: 205px; height: 255px; box-shadow: none; }.record-specimen .flag-np i { inset: 9px 12px 9px 9px; }.record-specimen .flag-np i::before,.record-specimen .flag-np i::after { width: 36px; }
.record-flag-image { width: 100%; max-height: 310px; display: block; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }.record-flag-image.tall-record-flag { width: 210px; height: 255px; }.record-flag-image.signal-record-flag { width: 260px; height: 260px; margin-inline: auto; }
.quick-note { margin-bottom: 28px; padding: 18px 20px; background: #ece8d8; border-left: 4px solid var(--yellow); }.quick-note strong { display: block; margin-bottom: 3px; font: 500 10px var(--mono); text-transform: uppercase; }.quick-note p { margin: 0; font-size: 13px; }.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.data-card { padding: 16px; background: var(--white); border: 1px solid var(--line); }.data-card span { color: #7a858b; font: 9px var(--mono); text-transform: uppercase; }.data-card strong { display: block; margin-top: 5px; font: 600 20px var(--serif); }.data-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }.color-spec { margin-top: 13px; display: grid; grid-template-columns: 58px 1fr; border: 1px solid var(--line); }.color-spec i { min-height: 62px; background: var(--spec-color); }.color-spec div { padding: 9px 12px; }.color-spec strong, .color-spec code { display: block; }.color-spec strong { font-size: 12px; }.color-spec code { margin-top: 4px; color: var(--muted); font: 10px var(--mono); }
.tool-panel { padding: 20px; background: var(--white); border: 1px solid var(--line); }.tool-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.tool-fields label { color: #6c777d; font: 9px var(--mono); text-transform: uppercase; }.tool-fields input, .tool-fields select, .color-input input { width: 100%; height: 42px; margin-top: 5px; padding: 0 10px; background: var(--paper); border: 1px solid var(--line-dark); outline: 0; font: 12px var(--mono); }.tool-fields input:focus, .tool-fields select:focus, .color-input input:focus { border-color: var(--red); }.tool-result { min-height: 58px; margin-top: 14px; padding: 12px 14px; color: #fff; background: var(--ink-2); font: 11px var(--mono); }.tool-result strong { color: var(--yellow); font-size: 16px; }.color-input { display: grid; grid-template-columns: 1fr 52px; gap: 10px; }.color-input i { margin-top: 5px; background: #da291c; border: 1px solid var(--line-dark); }.converter-output { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }.converter-output div { padding: 11px; border-right: 1px solid var(--line); }.converter-output div:last-child { border: 0; }.converter-output span, .converter-output strong { display: block; }.converter-output span { color: #7b858b; font: 9px var(--mono); text-transform: uppercase; }.converter-output strong { margin-top: 3px; font: 11px var(--mono); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 350px; gap: 35px; }.hero h1 { font-size: 64px; }
  .content-grid { grid-template-columns: 1fr; }.rail { position: static; display: grid; grid-template-columns: repeat(3, 1fr); border: 0; gap: 20px; }.rail section { padding-left: 0; }
  .category-grid { grid-template-columns: 1fr 1fr; }.category-grid > a:nth-child(2) { border-right: 0; }.category-grid > a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .tool-grid { grid-template-columns: 1fr 1fr; }.tool-card:last-child { grid-column: 1/-1; }
  .record-hero-grid { grid-template-columns: 1fr 310px; }.method-strip .shell { grid-template-columns: 150px 1fr 1fr; gap: 30px; }.big-number { font-size: 55px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 1240px); }.site-header { height: 64px; }.desktop-nav { display: none; }.menu-button { display: block; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 48px; }.hero h1 { font-size: clamp(50px, 16vw, 72px); }.hero-instrument { max-width: 440px; width: 100%; }.search button { padding-inline: 14px; }.search kbd { display: none; }
  .status-bar { overflow-x: auto; }.status-bar .shell { width: max-content; min-width: 100%; padding-inline: 14px; }.status-bar span, .status-bar a { white-space: nowrap; }
  .content-grid { padding-block: 35px 50px; gap: 20px; }.section { padding-bottom: 42px; }.section + .section { padding-top: 35px; }.section-head { align-items: start; }.section-head h2 { font-size: 32px; }.section-head > a { display: none; }
  .category-grid { grid-template-columns: 1fr; }.category-grid > a { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }.category-grid > a:last-child { border-bottom: 0; }
  .tool-grid { grid-template-columns: 1fr; }.tool-card:last-child { grid-column: auto; }.standard-list article { grid-template-columns: 30px 1fr; padding: 17px 0; }.standard-list code { display: none; }
  .rail { grid-template-columns: 1fr; gap: 0; }.method-strip .shell { grid-template-columns: 1fr; gap: 18px; }.big-number { font-size: 50px; }.method-strip h2 { font-size: 34px; }.about h2 { font-size: 35px; }
  .footer-inner { padding: 28px 0; grid-template-columns: 1fr; text-align: center; gap: 12px; }.footer-inner .brand { justify-self: center; }.footer-inner p:last-child { text-align: center; }
  .page-banner h1 { font-size: 43px; }.standard-layout, .record-body { display: block; padding-block: 30px 50px; }.side-index, .facts-panel { position: static; margin-bottom: 28px; }.record-hero-grid { grid-template-columns: 1fr; }.record-hero h1 { font-size: 48px; }.record-specimen { max-width: 430px; }.data-grid, .tool-fields { grid-template-columns: 1fr; }.converter-output { grid-template-columns: 1fr; }.converter-output div { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }