:root {
  color-scheme: dark;
  --paper: #0b1c1d;
  --ink: #f4e8d0;
  --muted: #bdcdc3;
  --line: #35504b;
  --accent: #f7ac83;
  --map: #102527;
  --pin: #edc38d;
  --selected: #ffa989;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [role=button]:focus-visible { outline: 2px solid #c57049; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 800; letter-spacing: .11em; line-height: 1.25; }
.eyebrow, .badge { font: 650 11px/1.3 var(--mono); letter-spacing: .09em; }
.signal { font: 24px/16px var(--serif); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
h1 em { font-weight: inherit; color: var(--accent); }
#map.dragging { cursor: grabbing; }
#map.dragging * { cursor: grabbing; }
#map:focus { outline: none; }
#map:focus-visible .globe-ocean { stroke: var(--pin); stroke-width: 2.5; }
.globe-rim { fill: #92bba6; opacity: .22; filter: blur(6px); }
.globe-ocean { fill: url(#ocean); stroke: #8ba99a; stroke-width: 1.2; }
.globe-shade { fill: url(#globe-shade); pointer-events: none; }
.grid { fill: none; stroke: #a7c5b0; stroke-opacity: .28; stroke-width: .7; pointer-events: none; }
.land { fill: #54756b; stroke: #244842; stroke-width: .8; stroke-linejoin: round; fill-rule: evenodd; }
.land.mapped { fill: #91a98a; cursor: pointer; }
.land.selected, .land.preview { fill: var(--selected); }
.pin { cursor: pointer; }
.pin.off-globe { display: none; }
.pin .target { fill: transparent; }
.pin .halo { fill: var(--pin); opacity: .18; }
.pin .dot { fill: var(--pin); stroke: var(--map); stroke-width: 1.5; }
.pin.selected .dot, .pin.preview .dot { fill: var(--selected); }
.pin.selected .halo, .pin.preview .halo { fill: var(--selected); opacity: .52; }
.pin:focus { outline: none; }
.pin:focus-visible .halo { stroke: white; stroke-width: 2; }
.globe-readout { position: absolute; left: 24px; bottom: 14px; color: #aebfb2; pointer-events: none; }
.globe-readout span, .globe-readout b { display: block; font: 550 9px/1.6 var(--mono); letter-spacing: .1em; }
.globe-readout b { color: #f4e8d0; font-size: 11px; }
.map-controls { position: absolute; right: 14px; bottom: 9px; display: grid; border: 1px solid #536d62; background: #1a3332; border-radius: 8px; }
.map-controls button { border: 0; width: 36px; height: 33px; color: #f4e8d0; background: transparent; line-height: 1; font-size: 20px; }
.map-controls button:first-child { border-radius: 7px 7px 0 0; }
.map-controls button:last-child { border-radius: 0 0 7px 7px; }
.map-controls button + button { border-top: 1px solid #536d62; }
.map-controls button:hover:enabled { background: #35554c; }
.map-controls button:disabled { color: #a1b5ac; cursor: default; }
.map-key { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.map-key i { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: var(--pin); margin-right: 4px; }
.map-key span + span i { background: var(--selected); }
.detail-kicker { color: #85462f; }
#detail:focus { outline: none; }
#detail:focus-visible { outline: 2px solid #c57049; outline-offset: 3px; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 23px 16px; scrollbar-color: #b5a68c transparent; }
.detail h2 { font-size: clamp(32px, 3.3vw, 47px); line-height: 1.06; margin-top: 6px; }
.location-count { color: #625a4d; font-size: 13px; margin-top: 7px; }
.entry { border-top: 1px solid #cdbd9e; padding: 16px 0 5px; margin-top: 16px; }
.entry-head { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.entry-language { font-weight: 740; font-size: 13px; }
.badge { display: inline-block; font-size: 9px; text-transform: uppercase; border-radius: 30px; padding: 5px 8px; white-space: nowrap; }
.badge.close { background: #dcebbd; color: #3d5125; }
.badge.partial { background: #ddd3ef; color: #463172; }
.badge.weak { background: #f3e3c7; color: #634415; }
.badge.unverified { background: #dedce4; color: #4f495a; }
.entry-word { font: 400 clamp(25px, 3.05vw, 40px)/1.24 var(--serif); margin-top: 9px; overflow-wrap: anywhere; }
.entry-pronunciation { color: #80513a; font: 14px/1.4 var(--mono); margin-top: 7px; }
.pronunciation-label { display: block; margin-bottom: 2px; color: #625a4d; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.entry-audio { display: grid; justify-items: start; gap: 4px; margin-top: 10px; font-size: 12px; }
.entry-audio a { color: #804228; font-weight: 650; }
.entry-audio a:hover { color: #542818; }
.entry-meaning { font-size: 14px; margin-top: 11px; }
.entry-source { font-size: 11px; margin-top: 10px; color: #625a4d; }
.detail-foot { color: #625a4d; border-top: 1px solid #cdbd9e; display: flex; align-items: center; gap: 8px; padding: 9px 23px; font-size: 11px; }
.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; }
@media (max-width: 860px) {
  .detail-scroll { max-height: 410px; }
}
@media (max-width: 600px) {
  .wordmark { gap: 6px; font-size: 9px; }
  .wordmark img { width: 29px; height: 29px; }

  .globe-readout { display: none; }
  .map-controls { right: 6px; bottom: 4px; }
  .map-controls button { width: 30px; height: 30px; font-size: 17px; }

  .detail-scroll, .docket, .detail-foot { padding-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.wordmark small { display: block; margin-top: 4px; font: 600 9px/1.3 var(--mono); letter-spacing: .055em; color: var(--muted); }
.case-draw { padding: 7px 10px; background: #213c36; border: 1px solid #678075; border-radius: 5px; color: var(--ink); font: 600 11px/1.3 var(--mono); white-space: nowrap; }
.case-draw span { color: var(--accent); margin-left: 4px; }
.case-draw:hover { background: #32554b; }
.orbit { fill: none; stroke: #a7c5b0; stroke-width: 1; stroke-opacity: .28; pointer-events: none; }
.orbit circle { stroke-dasharray: 2 7; }
.specimen { pointer-events: none; }
.specimen path { fill: none; stroke: #edc38d; stroke-opacity: .85; stroke-width: 1.2; stroke-dasharray: 2 2; }
.specimen rect { fill: #142b2b; stroke: #9b9971; stroke-width: 1; pointer-events: auto; cursor: pointer; }
.specimen:hover rect { stroke: var(--accent); }
.specimen text { dominant-baseline: middle; }
.specimen-word { fill: #f4e8d0; font: 600 17px system-ui, sans-serif; }
.specimen-pronunciation { fill: #e6c698; font: 600 14px var(--mono); }
.current-specimen path, .current-specimen rect { stroke: var(--accent); }
.current-specimen rect { fill: #412e28; }
.docket { display: flex; justify-content: space-between; gap: 7px; align-items: baseline; margin-bottom: 6px; padding: 19px 23px 9px; border-bottom: 1px solid #cdbd9e; }
.file-number { color: #625a4d; font: 600 10px/1.3 var(--mono); white-space: nowrap; }
.file-stamp { flex-shrink: 0; padding: 3px 5px; border: 1px solid #99492e; border-radius: 2px; color: #863d25; font: 700 9px/1.15 var(--mono); letter-spacing: .07em; transform: rotate(-3deg); }
.detail-foot { padding-block: 12px; }
@media (max-width: 600px) {
  .wordmark small { display: none; }
  .docket { padding-inline: 15px; padding-top: 13px; }
}

.workspace {
  --stage-edge: clamp(16px, 3vw, 48px);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}
.workspace:fullscreen { height: 100%; }
.masthead {
  position: absolute;
  z-index: 2;
  inset: 0 var(--stage-edge) auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.stage-title {
  position: absolute;
  z-index: 1;
  left: var(--stage-edge);
  top: 88px;
  padding: 11px 15px 12px;
  pointer-events: none;
}
.stage-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -38px -15px -16px;
  border-radius: 28px;
  background: #081b1c96;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  mask-image: radial-gradient(ellipse 56% 52% at 44% 50%, #000 45%, #000a 70%, transparent 100%);
}
.stage-title .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--accent); }
.stage-title h1 { margin-top: 7px; font-size: clamp(34px, 4.2vw, 62px); line-height: .98; }
.stage-subtitle { margin-top: 6px; color: var(--muted); font-size: 12px; letter-spacing: .035em; }
.stage-actions { display: flex; align-items: center; gap: 7px; }
.fullscreen-toggle { width: 34px; height: 34px; padding: 0; border: 1px solid #678075; border-radius: 5px; background: #213c36; font-size: 19px; }
.fullscreen-toggle:hover { background: #32554b; }
.map-card, .map-frame { position: absolute; inset: 0; pointer-events: none; }
.map-frame { background: radial-gradient(ellipse at 42% 49%, #1d3b39 0%, var(--paper) 70%); }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.globe-ocean, .land, .pin { pointer-events: auto; }
.globe-readout { left: var(--stage-edge); bottom: 64px; }
.map-controls { right: calc(var(--stage-edge) + clamp(260px, 26vw, 355px) + 12px); bottom: 64px; pointer-events: auto; }
.map-foot {
  position: absolute;
  inset: auto var(--stage-edge) 0;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.detail {
  position: absolute;
  z-index: 2;
  top: 53%;
  right: var(--stage-edge);
  transform: translateY(-50%);
  width: clamp(260px, 26vw, 355px);
  height: clamp(220px, calc(100% - 205px), 525px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbcaac;
  border-radius: 10px;
  background: #f2e6cf;
  color: #252b25;
  display: flex;
  flex-direction: column;
}
.panel-launchers {
  display: none;
  position: absolute;
  z-index: 2;
  left: var(--stage-edge);
  bottom: 61px;
  gap: 6px;
  align-items: center;
}
.panel-launcher {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #dbcaac;
  border-radius: 5px;
  background: #f2e6cf;
  color: #252b25;
  font-size: 12px;
  font-weight: 650;
}
.file-close { display: inline-grid; place-content: center; width: 29px; height: 29px; border: 1px solid #b29b79; border-radius: 4px; background: transparent; line-height: 1; font-size: 21px; }
.docket { align-items: center; }
.detail-kicker { margin-right: auto; }
@media (min-width: 861px) {
  .workspace.file-closed .detail, .workspace.file-closed .globe-readout { display: none; }
  .workspace.file-closed .panel-launchers { display: inline-flex; }
  .workspace.file-closed .map-controls { right: var(--stage-edge); }
}
@media (max-width: 860px) {
  .stage-title { top: 78px; padding: 8px 11px 9px; }
  .stage-title .eyebrow { font-size: 9px; }
  .map-frame { background: radial-gradient(ellipse at 50% 50%, #1d3b39 0%, var(--paper) 72%); }
  .map-controls { right: var(--stage-edge); bottom: 61px; }
  .map-key, .globe-readout { display: none; }
  .map-hint { font-size: 10px; }
  .panel-launchers { display: inline-flex; }
  .detail {
    display: none;
    inset: auto var(--stage-edge) 61px;
    transform: none;
    width: auto;
    height: min(55dvh, 450px);
    box-shadow: 0 0 32px #061215aa;
  }
  .workspace.file-open .detail { display: flex; }
  .workspace.file-open .panel-launchers { visibility: hidden; }
}
@media (max-width: 420px) {
  .masthead { height: 58px; }
  .stage-title { top: 73px; }
  .case-draw { padding-inline: 7px; }
  .fullscreen-toggle { width: 31px; }
}

.panel-launcher:hover { background: #e9dabd; }
.panel-launcher span { color: #85462f; }
.touch-hint { display: none; }
@media (hover: none) {
  .mouse-hint { display: none; }
  .touch-hint { display: inline; }
}
.map-total { white-space: nowrap; }
.panel-nav { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-bottom: 1px solid #cdbd9e; }
.panel-view {
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #635344;
  font-size: 12px;
  font-weight: 650;
}
.panel-view[aria-pressed="true"] { background: #e4d3b6; border-color: #cdbb99; color: #332d25; }
.panel-nav .file-close { margin-left: auto; flex-shrink: 0; }
.panel-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel-content[hidden], .place-link[hidden] { display: none; }
.index-header { padding: 10px 15px 7px; font-size: 12px; color: #625a4d; }
.index-header > p:first-child { margin-bottom: 8px; }
.search { display: flex; align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid #b7a17e; border-radius: 5px; background: #fcf4e5; }
.search svg { flex-shrink: 0; }
.search input { width: 100%; min-width: 0; border: 0; background: transparent; color: #252b25; font-size: 12px; padding: 3px 0; color-scheme: light; }
.search:focus-within { outline: 2px solid #a9603b; }
.search input:focus { outline: 0; }
.search-status { margin-top: 5px; }
.search-status:empty { display: none; }
.directory { display: grid; align-content: start; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3px 15px 8px; scrollbar-color: #b5a68c transparent; }
.place-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; text-align: left; background: #f9efdd; border: 1px solid #d8c8aa; border-radius: 4px; }
.place-link:hover, .place-link.selected { background: #e9dabd; border-color: #bda781; }
.place-link strong, .place-link small { display: block; }
.place-link strong { font-size: 12px; }
.place-link small { color: #625a4d; font-size: 11px; }
.place-link > span:last-child { color: #85462f; }
.no-script { position: absolute; z-index: 4; top: 45%; inset-inline: 20px; text-align: center; }
@media (max-height: 500px) {
  .index-header > p:first-child { display: none; }
}
@media (max-width: 860px) and (max-height: 500px) {
  .detail { height: min(calc(100dvh - 80px), 450px); }
}
@media (max-width: 420px) {
  .map-total { font-size: 9px; }
}