:root {
  color-scheme:dark;
  --surface:#0c1115;
  --panel:#111a1f;
  --text:#e9ece9;
  --muted:#a2b3ba;
  --accent:#f2bd77;
  --line:#2c3c43;
  --route:#90bfc6;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--surface);
  color:var(--text);
  font:16px/1.65 system-ui,sans-serif;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
button,input,select {
  font:inherit;
}
button,select {
  cursor:pointer;
}
button {
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  padding:.65rem 1rem;
}
button:hover,a.card:hover {
  border-color:var(--text);
}
:focus-visible {
  outline:3px solid var(--text);
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
.skip {
  position:absolute;
  top:-100px;
  left:1rem;
  padding:1rem;
  background:var(--panel);
  z-index:5;
}
.skip:focus {
  top:1rem;
}
.masthead,main,footer {
  max-width:1440px;
  margin:auto;
  padding-left:3rem;
  padding-right:3rem;
}
.masthead {
  min-height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  border-bottom:1px solid var(--line);
}
.network {
  text-decoration:none;
  font-weight:750;
  letter-spacing:.08em;
}
.network span {
  font-weight:400;
  letter-spacing:0;
  margin-left:1rem;
}
.theme-label {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.85rem;
}
select,input {
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:0;
  padding:.7rem;
  max-width:100%;
}
.intro {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:2rem;
  padding:4rem 0 3rem;
  align-items:end;
}
.eyebrow {
  font: .72rem/1.5 ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--text);
  opacity:.8;
}
h1 {
  font-size:clamp(2.7rem,6vw,5.8rem);
  font-weight:450;
  letter-spacing:-.055em;
  line-height:1.1;
  margin:1.3rem 0;
}
h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--text);
}
.lede {
  max-width:40rem;
}
.edition {
  border-left:2px solid var(--accent);
  padding-left:1.5rem;
  margin-bottom:.3rem;
  font-size:.85rem;
}
.edition>span {
  display:block;
  font: .75rem ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.edition strong {
  display:block;
  margin:.75rem 0;
  font-size:1rem;
  font-weight:500;
}
.edition p {
  margin:0;
}
.toolbar {
  display:flex;
  gap:1.5rem;
  border-bottom:1px solid var(--line);
}
.toolbar button {
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  padding:1rem 0;
}
.toolbar button[aria-pressed=true] {
  border-bottom-color:var(--accent);
  font-weight:650;
}
.workspace {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:2.5rem;
  padding:2rem 0 4rem;
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.sidebar nav button {
  text-align:left;
  border:0;
  border-left:2px solid transparent;
  background:none;
  font-size:.9rem;
  padding:.7rem;
}
.sidebar nav button[aria-pressed=true] {
  background:var(--panel);
  border-left-color:var(--accent);
  font-weight:700;
}
.sidebar-note {
  border-top:1px solid var(--line);
  margin-top:2rem;
  padding-top:1rem;
  font-size:.8rem;
}
.sidebar-note a {
  display:block;
  margin-top:1rem;
}
.search-row {
  display:flex;
  gap:1rem;
  align-items:end;
}
.search-row label {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.8rem;
}
.search-label {
  flex:1;
}
.search-row input {
  width:100%;
}
.result-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:.8rem;
  margin:1rem 0;
}
.result-line button {
  padding:.3rem .6rem;
  background:none;
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.card {
  display:flex;
  flex-direction:column;
  min-width:0;
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--panel);
  padding:1.4rem;
  position:relative;
}
.card .eyebrow {
  margin:0 0 1.5rem;
}
.card h2 {
  font-size:1.35rem;
  font-weight:550;
  line-height:1.3;
  margin:0 0 .8rem;
  letter-spacing:-.02em;
}
.card p {
  font-size:.9rem;
  margin:0 0 1.3rem;
}
.card .card-end {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font: .72rem ui-monospace,monospace;
}
.palette-strip {
  display:flex;
  gap:4px;
}
.palette-strip span {
  height:14px;
  width:25px;
  border:1px solid #888;
}
.empty {
  border:1px dashed var(--line);
  padding:2rem;
  text-align:center;
}
.detail-back {
  margin-bottom:1.5rem;
}
.detail-header {
  border-bottom:1px solid var(--line);
  padding-bottom:1.5rem;
  margin-bottom:2rem;
}
.detail-header h2 {
  font:400 clamp(2rem,4vw,3rem)/1.15 Georgia,serif;
  margin:1rem 0;
}
.detail-header p {
  max-width:65ch;
}
.badge {
  font: .75rem ui-monospace,monospace;
  border:1px solid var(--line);
  padding:.3rem .5rem;
}
.usage-pills {
  display:inline-flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-left:.5rem;
  vertical-align:middle;
}
.usage-pill {
  display:inline-flex;
  align-items:center;
  min-height:1.7rem;
  padding:.25rem .55rem;
  border:1px solid var(--line);
  border-radius:999px;
  font:.7rem ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.usage-spatial { border-color:var(--accent); }
.usage-interface { border-color:var(--route); background:color-mix(in srgb, var(--route) 10%, transparent); }
.detail-section {
  max-width:80ch;
  margin:2rem 0;
}
.detail-section h3 {
  font-weight:600;
  font-size:1.1rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
}
.detail-section p {
  margin:.6rem 0 1rem;
}
.palette {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.8rem;
}
.swatch {
  border:1px solid var(--line);
  font-size:.8rem;
}
.swatch-color {
  height:54px;
  border-bottom:1px solid #888;
}
.swatch-text {
  padding:.7rem;
}
.swatch code {
  display:block;
}
.source-list {
  padding-left:1.3rem;
  font-size:.9rem;
}
.source-list li {
  margin-bottom:1rem;
}
.related {
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}
.related a {
  padding:.6rem .8rem;
  border:1px solid var(--line);
}
.notice {
  padding:1rem;
  border-left:2px solid var(--accent);
  background:var(--panel);
}
footer {
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  padding-bottom:1.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font: .72rem ui-monospace,monospace;
}
#loading,#error {
  padding:3rem 0;
}
.collection {
  min-width:0;
}
#detail {
  overflow-wrap:anywhere;
}
@media(min-width:1100px) {
  .sidebar {
    position:sticky;
    top:1.5rem;
    align-self:start;
  }
}
@media(max-width:850px) {
  .masthead,main,footer {
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  .masthead {
    flex-wrap:wrap;
    padding-top:1rem;
    padding-bottom:1rem;
  }
  .network span {
    font-size:.8rem;
  }
  .intro {
    grid-template-columns:1fr;
    padding:2rem 0;
    gap:1rem;
  }
  .edition {
    font-size:.8rem;
  }
  .workspace {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .sidebar nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:.35rem;
  }
  .sidebar nav button {
    border:1px solid var(--line);
    font-size:.8rem;
    padding:.5rem;
  }
  .sidebar nav button[aria-pressed=true] {
    border-color:var(--text);
  }
  .sidebar-note {
    display:none;
  }
  .toolbar {
    gap:1rem;
  }
  .toolbar button {
    font-size:.8rem;
  }
  .theme-label select {
    max-width:230px;
  }
  footer {
    flex-direction:column;
  }
}
@media(max-width:520px) {
  .cards {
    grid-template-columns:1fr;
  }
  .search-row {
    align-items:stretch;
    flex-direction:column;
  }
  .search-row select {
    width:100%;
  }
  .toolbar {
    gap:.8rem;
    justify-content:space-between;
  }
  .toolbar button {
    max-width:33%;
    text-align:left;
  }
  .card {
    padding:1.2rem;
  }
  .intro h1 {
    font-size:3.3rem;
  }
  .theme-label {
    width:100%;
    justify-content:space-between;
  }
}
@media print {
  .masthead,.toolbar,.sidebar,.search-row,.result-line,.detail-back,footer {
    display:none;
  }
  body {
    background:white;
    color:black;
  }
  .workspace {
    display:block;
  }
  .card {
    break-inside:avoid;
  }
  .detail-section {
    break-inside:avoid;
  }
}

/* The symbol is the only raster content; captions remain selectable HTML. */
.card-symbol {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}
.card-symbol img, .symbol-figure img {
  object-fit: contain;
  flex-shrink: 0;
  border-radius: .3rem;
}
.symbol-figure {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
}
.symbol-figure h3, .symbol-figure p {
  margin: .4rem 0;
}
.symbol-subtitle {
  font: .8rem ui-monospace, monospace;
}
.technical-details {
  margin: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.technical-details summary {
  cursor: pointer;
}
@media (max-width: 600px) {
  .symbol-figure {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: .75rem;
    padding: .75rem;
  }
  .symbol-figure img {
    width: 80px;
    height: 80px;
  }
}

.sign-context { display: block; margin: 1.5rem 0; }
.sign-context select { display: block; width: 100%; max-width: 32rem; margin-top: .5rem; }
.sign-reading { padding: 1rem; border: 1px solid var(--line); background: var(--panel); }

.sheet-mode .workspace { grid-template-columns: 1fr; }
.sheet-mode .sidebar { display: none; }
.sheet-actions {
  display: grid;
  grid-template-columns: auto minmax(16rem, 28rem) auto;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sheet-actions label { display: grid; gap: .35rem; font-size: .8rem; }
.sheet-document { border: 1px solid var(--line); background: var(--panel); padding: 1.5rem; }
.sheet-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; border-bottom: 2px solid var(--accent); padding-bottom: 1rem; }
.sheet-header h2 { margin: .25rem 0 0; font: 400 clamp(2rem, 4vw, 3.4rem)/1.1 Georgia, serif; }
.sheet-header p { margin: 0; }
.sheet-meta { display: grid; gap: .25rem; text-align: right; font: .72rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.sheet-meta strong { color: var(--accent); font-size: .85rem; }
.sheet-note { margin: .8rem 0 1.2rem; color: var(--muted); font-size: .8rem; }
.sheet-grid { display: grid; gap: 1.4rem; }
.sheet-category { min-width: 0; }
.sheet-category-heading { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); font: 600 .78rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.sheet-category-heading small { color: var(--muted); font: inherit; font-weight: 400; white-space: nowrap; }
.sheet-category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sheet-cell { position: relative; min-width: 0; display: grid; justify-items: center; align-content: start; gap: .6rem; padding: .85rem .55rem .7rem; color: inherit; text-decoration: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sheet-cell:hover { background: color-mix(in srgb, var(--panel) 82%, var(--route)); }
.sheet-cell img { width: 80px; height: 80px; max-width: 100%; object-fit: contain; border-radius: .25rem; }
.sheet-number { position: absolute; top: .35rem; left: .4rem; color: var(--muted); font: .62rem ui-monospace, monospace; }
.sheet-caption { min-width: 0; display: grid; gap: .2rem; width: 100%; text-align: center; line-height: 1.25; }
.sheet-caption strong { font-size: .82rem; overflow-wrap: anywhere; }
.sheet-caption small { color: var(--muted); font: .58rem/1.35 ui-monospace, monospace; }
.sheet-legend { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sheet-legend h3 { margin: 0 0 .8rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.sheet-legend > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.sheet-color { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: .5rem; align-items: center; font-size: .68rem; }
.sheet-color i { grid-row: span 2; width: 28px; height: 28px; border: 1px solid #888; }
.sheet-color b { font-weight: 600; overflow-wrap: anywhere; }
.sheet-color code { color: var(--muted); font-size: .62rem; }
.sheet-legend p { margin: .9rem 0 0; color: var(--muted); font-size: .72rem; }
@media (max-width: 900px) {
  .sheet-actions { grid-template-columns: 1fr 1fr; }
  .sheet-actions label { grid-column: 1 / -1; grid-row: 1; }
  .sheet-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sheet-header { align-items: start; flex-direction: column; gap: .7rem; }
  .sheet-meta { text-align: left; }
  .sheet-document { padding: .75rem; }
  .sheet-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-cell img { width: 68px; height: 68px; }
  .sheet-legend > div { grid-template-columns: 1fr 1fr; }
}

@page { size: A4 landscape; margin: 8mm; }
@media print {
  body.sheet-mode main { max-width: none; padding: 0; }
  body.sheet-mode .intro,
  body.sheet-mode .toolbar,
  body.sheet-mode .sheet-actions,
  body.sheet-mode footer { display: none !important; }
  body.sheet-mode .workspace { display: block; padding: 0; }
  body.sheet-mode .sheet-document { border: 0; background: white; color: black; padding: 0; }
  body.sheet-mode .sheet-header { border-bottom-color: #111; padding-bottom: 2mm; }
  body.sheet-mode .sheet-header h2 { font-size: 20pt; }
  body.sheet-mode .sheet-meta strong,
  body.sheet-mode .sheet-note,
  body.sheet-mode .sheet-caption small,
  body.sheet-mode .sheet-number,
  body.sheet-mode .sheet-color code,
  body.sheet-mode .sheet-legend p { color: #333; }
  body.sheet-mode .sheet-note { margin: 1.5mm 0 2mm; font-size: 6pt; }
  body.sheet-mode .sheet-grid { display: block; }
  body.sheet-mode .sheet-category { break-inside: avoid-page; margin-bottom: 4mm; }
  body.sheet-mode .sheet-category-heading { border-color: #777; margin-bottom: 1.5mm; padding-bottom: 1mm; font-size: 8pt; }
  body.sheet-mode .sheet-category-heading small { color: #333; }
  body.sheet-mode .sheet-category-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); border-color: #777; }
  body.sheet-mode .sheet-cell { color: black; border-color: #777; break-inside: avoid; gap: 1.2mm; padding: 1.8mm 1mm 1.4mm; }
  body.sheet-mode .sheet-cell img { width: 18mm; height: 18mm; max-width: none; }
  body.sheet-mode .sheet-caption strong { font-size: 7pt; line-height: 1.15; }
  body.sheet-mode .sheet-caption small { font-size: 5.5pt; line-height: 1.15; }
  body.sheet-mode .sheet-number { top: .8mm; left: 1mm; font-size: 5pt; }
  body.sheet-mode .sheet-legend { break-inside: avoid; border-color: #777; margin-top: 2mm; padding-top: 2mm; }
  body.sheet-mode .sheet-legend h3 { margin-bottom: 1mm; font-size: 7pt; }
  body.sheet-mode .sheet-legend > div { gap: 2mm; }
  body.sheet-mode .sheet-color { grid-template-columns: 5mm minmax(0, 1fr); column-gap: 1.5mm; font-size: 6pt; }
  body.sheet-mode .sheet-color i { width: 5mm; height: 5mm; }
  body.sheet-mode .sheet-color code { font-size: 5pt; }
  body.sheet-mode .sheet-legend p { margin-top: 1mm; font-size: 6pt; }
  body.sheet-mode .sheet-color i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}