:root {
  color-scheme: dark;
  --ink: #0b1722;
  --muted: #647383;
  --paper: #f4f2ec;
  --paper-strong: #fffefa;
  --line: rgba(10, 26, 38, 0.14);
  --night: #071321;
  --night-soft: #0c2033;
  --accent: #ff7043;
  --accent-warm: #ffb04a;
  --cyan: #68dcff;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 320px; width: 100%; height: 100%; background: var(--night); }
body { min-height: 100vh; color: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid rgba(104, 220, 255, 0.75);
  outline-offset: 2px;
}

.app-shell { width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(5, 15, 26, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 20;
}
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup h1 { margin: 0; font-size: 22px; letter-spacing: 0.04em; line-height: 1.1; }
.eyebrow { margin: 0 0 4px; color: #91a6b8; font-size: 10px; font-weight: 800; letter-spacing: 0.19em; }
.brand-mark { width: 42px; height: 42px; position: relative; display: grid; place-items: center; }
.brand-mark span { position: absolute; border-radius: 999px; border: 1.5px solid; }
.brand-mark span:nth-child(1) { width: 38px; height: 38px; border-color: rgba(104, 220, 255, 0.45); }
.brand-mark span:nth-child(2) { width: 25px; height: 25px; border-color: rgba(255, 176, 74, 0.68); }
.brand-mark span:nth-child(3) { width: 10px; height: 10px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px rgba(255,112,67,.85); }
.topbar-status { display: flex; align-items: center; gap: 8px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #c7d2dc;
  background: rgba(255,255,255,.045);
  font-size: 12px;
  font-weight: 700;
}
.status-pill--accent { color: #16120d; background: var(--accent-warm); border-color: transparent; letter-spacing: .1em; }

.workspace { flex: 1; height: calc(100vh - 78px); min-height: 0; overflow: hidden; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.control-panel {
  min-height: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 23px 22px 18px;
  scrollbar-width: thin;
  scrollbar-color: #bbc2c4 transparent;
}
.intro-copy { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.intro-copy p { margin: 0; font-size: 13px; line-height: 1.75; }
.intro-copy .caveat { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.control-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.section-heading h2 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.section-heading > span { color: var(--muted); font-size: 11px; }
.copy-link-button { border: 0; padding: 2px 0; color: #d6532d; background: transparent; font-size: 10px; font-weight: 850; }
.copy-link-button:disabled { cursor: wait; color: #8d969c; }
.copy-status { min-height: 16px; margin: 3px 1px 0; color: #237250; font-size: 10px; font-weight: 750; }
.help-button {
  width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800;
}
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.segment {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  color: var(--ink);
  transition: .16s ease;
}
.segment strong { font-size: 13px; }
.segment small { color: var(--muted); font-size: 9px; }
.segment:hover { border-color: rgba(255,112,67,.55); transform: translateY(-1px); }
.segment.is-active { background: var(--ink); color: white; border-color: var(--ink); box-shadow: 0 7px 20px rgba(7,19,33,.18); }
.segment.is-active small { color: #a9bdcc; }
.segment:disabled { cursor: wait; opacity: .72; transform: none; }
.segment[aria-busy="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,112,67,.13); }
.period-description { min-height: 31px; margin: 8px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.metric-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; background: #e4e3dd; border-radius: 10px; gap: 3px; }
.metric-tab { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #5a6570; font-size: 10px; font-weight: 800; line-height: 1.2; padding: 5px; }
.metric-tab.is-active { color: white; background: #1a2b3b; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.metric-description { min-height: 33px; margin: 9px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.filter-grid { display: grid; gap: 12px; }
.field-label { display: grid; gap: 6px; color: #465460; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; left: 10px; top: 50%; width: 16px; transform: translateY(-50%); fill: none; stroke: #75828c; stroke-width: 2; }
.search-field input {
  width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper-strong); font-size: 12px;
}
.search-field input { padding: 0 11px 0 34px; }
.search-field input::placeholder { color: #9aa3aa; }
.ranking-section { padding-top: 18px; }
.ranking-heading { margin-bottom: 7px; }
.ranking-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.ranking-item button {
  width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left;
}
.ranking-item button:hover { background: rgba(8,27,41,.06); }
.ranking-item button.is-selected { background: #172b3c; color: white; }
.rank-number { color: #89939b; font-size: 10px; font-variant-numeric: tabular-nums; }
.ranking-item button.is-selected .rank-number { color: #a8c2d3; }
.rank-main { min-width: 0; display: grid; gap: 5px; }
.rank-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 750; }
.rank-track { height: 3px; background: rgba(14,31,44,.1); border-radius: 999px; overflow: hidden; }
.rank-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42c8f5, #ffb04a 58%, #ff6b46); }
.rank-value { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.empty-state { padding: 22px 8px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }

.map-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--night); }
.data-warning {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; min-height: 38px; padding: 8px 18px; color: #351514; background: #ffb5a9; font-size: 11px;
}
.data-warning strong { flex: 0 0 auto; letter-spacing: .06em; }
.period-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 12px; min-height: 42px; padding: 7px 18px; color: #351514; background: #ffd5cd; font-size: 11px;
}
.period-error strong { flex: 0 0 auto; letter-spacing: .04em; }
.period-error button { min-height: 29px; padding: 0 11px; border: 1px solid rgba(53,21,20,.24); border-radius: 7px; color: #351514; background: rgba(255,255,255,.64); font-size: 10px; font-weight: 800; }
.map-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #06111e; }
#worldMap { display: block; width: 100%; height: 100%; min-height: 0; cursor: grab; touch-action: none; user-select: none; }
#worldMap.is-dragging { cursor: grabbing; }
.ocean { pointer-events: none; }
.graticule-line { fill: none; stroke: rgba(138,187,214,.11); stroke-width: .55; vector-effect: non-scaling-stroke; }
.country { fill: #143049; stroke: rgba(118,174,204,.34); stroke-width: .58; vector-effect: non-scaling-stroke; fill-rule: evenodd; transition: fill .2s ease; }
.country:hover { fill: #1b3d58; }
.map-point { cursor: pointer; outline: none; }
.map-point .halo { opacity: .2; }
.map-point:hover .halo, .map-point:focus .halo, .map-point.is-selected .halo { opacity: .38; filter: url(#pointGlow); }
.map-point .core { stroke: rgba(255,255,255,.85); stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: opacity .15s ease; }
.map-point:hover .core, .map-point:focus .core { stroke: #fff; stroke-width: 2; }
.map-point.is-selected .core { stroke: #fff; stroke-width: 2.4; }
.map-point.is-muted { opacity: .1; }
.selection-ring { fill: none; stroke: #fff; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; animation: ring-spin 12s linear infinite; pointer-events: none; }
@keyframes ring-spin { to { stroke-dashoffset: -60; } }
.map-label { pointer-events: none; }
.map-label rect { fill: rgba(4,14,24,.87); stroke: rgba(255,255,255,.12); vector-effect: non-scaling-stroke; }
.map-label text { fill: white; font-weight: 800; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(4,14,24,.85); stroke-width: 2px; stroke-linejoin: round; }
.map-label.is-selected rect { fill: #fff; stroke: #fff; }
.map-label.is-selected text { fill: #142433; stroke: transparent; }
.map-caption { position: absolute; left: 17px; bottom: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 420px); color: #9eb2c1; font-size: 10px; letter-spacing: .02em; pointer-events: none; }
.live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(104,220,255,.9); }
.map-controls { position: absolute; top: 16px; right: 16px; display: grid; grid-template-columns: 38px 38px auto; gap: 5px; }
.map-controls button { height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: white; background: rgba(4,14,24,.82); backdrop-filter: blur(9px); font-size: 18px; font-weight: 500; }
.map-controls button:hover { background: rgba(30,58,78,.92); }
.map-controls .reset-button { padding: 0 11px; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.map-tooltip { position: absolute; z-index: 16; max-width: 250px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: white; background: rgba(4,14,24,.94); box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; font-size: 11px; line-height: 1.45; transform: translate(10px, -50%); }
.map-tooltip strong { display: block; margin-bottom: 2px; }
.map-tooltip span { color: #b6c7d3; }

.detail-card {
  position: absolute; right: 17px; bottom: 17px; z-index: 12; width: min(330px, calc(100% - 34px)); max-height: calc(100% - 84px); overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; color: #152432; background: rgba(248,247,242,.96); box-shadow: var(--shadow); backdrop-filter: blur(18px); scrollbar-width: thin;
}
.detail-card.is-empty .primary-metric, .detail-card.is-empty .detail-stats, .detail-card.is-empty .language-compare, .detail-card.is-empty .wikipedia-link { display: none; }
.detail-close { position: absolute; right: 11px; top: 9px; width: 28px; height: 28px; border: 0; background: transparent; color: #65727c; font-size: 21px; }
.detail-kicker { margin: 0 32px 4px 0; color: #e15f35; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.detail-card h2 { margin: 0 32px 3px 0; font-size: 21px; line-height: 1.25; }
.detail-article { margin: 0; color: #6b7781; font-size: 10px; line-height: 1.5; }
.primary-metric { margin: 15px 0 13px; padding: 12px 13px; border-radius: 11px; color: white; background: #132839; }
.primary-metric span { display: block; margin-bottom: 3px; color: #9fb5c4; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.primary-metric strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.detail-stats div { padding: 8px 9px; border: 1px solid rgba(15,34,48,.1); border-radius: 8px; background: rgba(255,255,255,.52); }
.detail-stats dt { color: #74808a; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.detail-stats dd { margin: 3px 0 0; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.language-compare { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(15,34,48,.11); }
.compare-heading { display: grid; gap: 3px; margin-bottom: 9px; }
.compare-heading h3 { margin: 0; font-size: 10px; letter-spacing: .07em; }
.compare-heading span { color: #77848e; font-size: 8px; line-height: 1.4; }
.compare-row { min-width: 0; margin: 7px 0; padding: 9px; border: 1px solid rgba(15,34,48,.1); border-radius: 8px; background: rgba(255,255,255,.52); }
.compare-row.is-missing { color: #78848d; }
.compare-row-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.compare-row-heading strong { flex: 0 0 auto; font-size: 9px; }
.compare-row-heading span { min-width: 0; overflow-wrap: anywhere; color: #66747e; text-align: right; font-size: 9px; font-weight: 750; }
.compare-metrics { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.compare-metrics div { min-width: 0; }
.compare-metrics dt { color: #74808a; font-size: 7px; font-weight: 800; line-height: 1.3; }
.compare-metrics dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wikipedia-link { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding: 10px 12px; border-radius: 9px; color: white; background: #e66138; text-decoration: none; font-size: 10px; font-weight: 800; }
.wikipedia-link:hover { background: #c94d29; }
.map-footer { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 18px; border-top: 1px solid rgba(255,255,255,.07); color: #8296a6; background: #06111e; font-size: 9px; }
.legend-block { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend-gradient { width: 120px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, hsl(211 88% 69%), hsl(120 88% 60%), hsl(20 88% 51%)); }
.source-note { text-align: right; }

.metric-dialog { width: min(520px, calc(100% - 32px)); border: 1px solid rgba(255,255,255,.15); border-radius: 17px; color: #172634; background: #f7f5ef; box-shadow: 0 30px 90px rgba(0,0,0,.5); padding: 0; }
.metric-dialog::backdrop { background: rgba(2,8,14,.72); backdrop-filter: blur(5px); }
.metric-dialog form { position: relative; padding: 26px; }
.metric-dialog h2 { margin: 0 0 12px; font-size: 23px; }
.metric-dialog p { color: #5f6c76; font-size: 12px; line-height: 1.7; }
.metric-dialog dl { margin: 18px 0; }
.metric-dialog dt { margin-top: 12px; font-size: 11px; font-weight: 900; }
.metric-dialog dd { margin: 3px 0 0; color: #65727c; font-size: 11px; line-height: 1.6; }
.metric-dialog .dialog-note { padding: 10px 12px; border-radius: 9px; background: #e9e6dc; color: #56626a; }
.dialog-close { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; border: 0; background: transparent; color: #6c7881; font-size: 22px; }
.copy-link-dialog label { display: block; margin: 16px 0 6px; color: #485660; font-size: 11px; font-weight: 850; }
.copy-link-dialog input { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #b7c0c6; border-radius: 8px; color: #172634; background: white; font-size: 11px; }
.dialog-action { display: block; min-height: 38px; margin: 16px 0 0 auto; padding: 0 18px; border: 0; border-radius: 8px; color: white; background: #172b3c; font-size: 11px; font-weight: 850; }

@media (max-width: 1000px) {
  .workspace { grid-template-columns: 290px minmax(0, 1fr); }
  .control-panel { padding-inline: 17px; }
  .detail-card { width: 290px; }
}

@media (max-width: 760px) {
  .topbar { height: 66px; padding: 0 15px; }
  .brand-lockup h1 { font-size: 18px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-mark span:nth-child(1) { width: 32px; height: 32px; }
  .topbar .eyebrow { display: none; }
  .status-pill { min-height: 27px; padding-inline: 9px; font-size: 10px; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .workspace { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .control-panel { overflow: visible; order: 2; border-right: 0; }
  .intro-copy { display: none; }
  .map-column { order: 1; min-height: 620px; }
  .map-wrap { min-height: 540px; }
  .detail-card { right: 10px; bottom: 10px; width: calc(100% - 20px); max-height: 52%; }
  .map-caption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .map-controls { top: 10px; right: 10px; }
  .map-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .source-note { text-align: left; }
}

@media (max-width: 390px) {
  .topbar-status { gap: 4px; }
  .status-pill { padding-inline: 7px; font-size: 9px; }
  .detail-card { padding: 15px; }
  .detail-stats { grid-template-columns: 1fr; }
  .compare-row-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .compare-row-heading span { text-align: left; }
  .compare-metrics { grid-template-columns: 1fr; }
}

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