:root {
  --ink:#eef0e8;
  --muted:#9caeb4;
  --gold:#e2c386;
  --line:#61777d40;
  --panel:#0d171fe8;
  --reader-width:clamp(360px,37vw,600px);
  --font:Inter,"Segoe UI",Arial,sans-serif;
  color-scheme:dark
}

* {
  box-sizing:border-box
}

html,body {
  height:100%;
  margin:0;
  overflow:hidden
}

body {
  background:#060b12;
  color:var(--ink);
  font:14px/1.6 var(--font)
}

button,input {
  font:inherit
}

button {
  cursor:pointer;
  color:inherit
}

button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}

button {
  touch-action:manipulation
}

a {
  color:inherit;
  text-decoration:none
}

[hidden] {
  display:none!important
}

#universe {
  position:relative;
  width:100%;
  height:100%;
  isolation:isolate;
  background:radial-gradient(ellipse at 34% 35%,#12232d80,transparent 45%),radial-gradient(ellipse at 65% 60%,#21182b40,transparent 50%),#060b12
}

#sky {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
  outline-offset:-3px
}

#sky.dragging {
  cursor:grabbing
}

.vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 170px 70px #040a1199
}

.identity {
  position:absolute;
  left:34px;
  top:27px;
  z-index:2
}

.identity a {
  display:flex;
  align-items:center;
  gap:12px
}

.identity img {
  border-radius:50%;
  opacity:.85
}

.identity span {
  font-size:12px;
  letter-spacing:3px
}

.identity small {
  display:block;
  font-size:8px;
  letter-spacing:2.2px;
  color:var(--muted);
  margin-top:2px
}

.top-right {
  position:absolute;
  right:34px;
  top:30px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.4px
}

.local-dot {
  width:4px;
  height:4px;
  background:#9ac7ae;
  border-radius:50%
}

.top-right button {
  border:1px solid var(--line);
  border-radius:50%;
  width:22px;
  height:22px;
  padding:0;
  background:none;
  color:var(--muted);
  font:12px Georgia,serif;
  margin-left:7px
}

#field-labels {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}
#branch-labels {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.branch-label {
  position:absolute;
  transform:translate(-50%, 24px);
  max-width:170px;
  padding:3px 5px;
  border:0;
  background:#09121a99;
  border-radius:3px;
  color:#d3cfb7;
  font-size:9px;
  line-height:1.4;
  text-align:center;
  pointer-events:auto;
}
#back-branch {
  background:none;
  border:0;
  color:var(--muted);
  font-size:20px;
  padding:4px;
}
.connection-label {
  transform:translate(-50%,0);
  color:#c5d6e9;
  font-size:11px;
  background:#09121acc;
}
.source-link {
  border:0;
  border-bottom:1px solid var(--gold);
  padding:6px 0;
  background:none;
  color:var(--gold);
}
.citation-path {
  color:#c5d6e9;
  margin-bottom:4px;
}
#back-branch:disabled {
  opacity:.2;
  cursor:default;
}

.field-label {
  position:absolute;
  transform:translate(-50%,-50%);
  text-align:center;
  white-space:nowrap;
  color:#c5d2ce90;
  font:italic 19px Georgia,serif;
  letter-spacing:.4px;
  transition:opacity .4s
}

.field-label small {
  display:block;
  font:8px var(--font);
  letter-spacing:2px;
  margin-top:6px;
  color:#9aafb284
}

.field-label.fade {
  opacity:.13
}

#hover-label {
  position:absolute;
  z-index:3;
  max-width:320px;
  pointer-events:none;
  color:#e6e1d3;
  background:#0a141bd9;
  padding:7px 12px;
  font-size:11px;
  border-radius:4px;
  border:1px solid #a9b7b223;
  box-shadow:0 10px 30px #0003;
  overflow-wrap:anywhere
}

#loading {
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  font:20px Georgia,serif;
  color:#cdbb97;
  letter-spacing:1px
}

/* Expose one complete requested scene; pending controls and graphs stay hidden. */
#universe[data-loading] > :not(#loading) {
  visibility:hidden
}

#loading span {
  display:block;
  width:40px;
  height:1px;
  background:var(--gold);
  margin:18px auto 0;
  animation:loading 2s ease-in-out infinite
}

#focus-heading {
  position:absolute;
  left:50%;
  top:95px;
  transform:translateX(-50%);
  text-align:center;
  max-width:min(640px,80%);
  pointer-events:none
}

#focus-field {
  display:block;
  color:var(--gold);
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase
}

#focus-title {
  font:normal clamp(20px,2.5vw,34px)/1.4 Georgia,serif;
  letter-spacing:-.2px;
  margin:8px 0
}

#focus-subtitle {
  font-size:10px;
  color:var(--muted);
  margin:0
}

#focus-actions {
  position:absolute;
  left:50%;
  bottom:178px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:16px
}

#open-source {
  background:#bca77512;
  border:0;
  border-bottom:1px solid #e2c38680;
  color:#e2c386;
  font-size:11px;
  padding:9px 12px;
  letter-spacing:.3px
}

#open-source span {
  margin-left:22px
}

#leave-focus {
  border:0;
  background:none;
  font-size:23px;
  color:var(--muted)
}

.camera-tools {
  position:absolute;
  right:27px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:12px
}

.camera-tools button {
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:#121f2b66;
  border-radius:50%;
  font-size:20px;
  font-weight:300;
  color:#b8c9ce;
  transition:background .2s,color .2s
}

.camera-tools button:hover {
  color:var(--gold);
  background:#26354490
}

.camera-tools button[aria-pressed=true] {
  color:var(--gold)
}

.bottom-space {
  position:absolute;
  bottom:35px;
  left:50%;
  width:min(500px,calc(100% - 120px));
  transform:translateX(-50%)
}

.search-area {
  position:relative
}

#search-form {
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #9aadb237;
  background:#0c1722b0;
  border-radius:40px;
  padding:9px 16px 9px 20px;
  box-shadow:0 8px 60px #0003;
  backdrop-filter:blur(14px)
}

#search-form>span {
  font-size:25px;
  color:#b5c3c7;
  font-family:Georgia,serif;
  line-height:1
}

#search {
  width:100%;
  min-width:0;
  background:none;
  border:0;
  color:var(--ink);
  font-size:12px;
  height:27px;
  outline:none
}

#search::placeholder {
  color:#9aafb5
}

#search-go {
  border:0;
  background:none;
  color:#a4b5b9;
  font-size:18px;
  padding:1px 4px
}

#suggestions {
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding:10px 0 0
}

#suggestions button {
  background:none;
  border:0;
  color:#aebec3;
  font-size:9px;
  padding:3px 0;
  border-bottom:1px solid transparent
}

#suggestions button:hover {
  color:var(--gold);
  border-color:#c0a57170
}

#navigation-hint {
  text-align:center;
  font-size:9px;
  color:#839aa2;
  margin:12px 0 0;
  letter-spacing:.3px
}

#navigation-hint span {
  padding:0 8px;
  color:#5e747b
}

#search-results {
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;
  right:0;
  background:#0c1722f2;
  border:1px solid var(--line);
  border-radius:12px;
  max-height:min(390px,48vh);
  overflow:auto;
  box-shadow:0 10px 60px #0009;
  backdrop-filter:blur(16px);
  padding:6px
}

#search-results button {
  display:block;
  text-align:left;
  width:100%;
  padding:12px;
  border:0;
  background:none;
  border-radius:6px
}

#search-results button:hover,#search-results button:focus {
  background:#a4b8b51a
}

#search-results strong {
  display:block;
  font-size:11px;
  font-weight:400;
  color:#e1dfd3
}

#search-results small {
  display:block;
  font-size:9px;
  margin-top:3px;
  color:var(--muted)
}

#search-results .empty {
  padding:16px;
  font-size:11px;
  color:var(--muted)
}

#status {
  position:absolute;
  left:50%;
  bottom:155px;
  transform:translateX(-50%);
  max-width:min(620px,85vw);
  color:#b2c4bf;
  font-size:10px;
  text-align:center;
  pointer-events:none
}

.snapshot-note {
  position:absolute;
  bottom:25px;
  left:34px;
  font-size:8px;
  letter-spacing:1.4px;
  color:#7d959c
}

.snapshot-note span {
  padding:0 6px
}

#network-key {
  position:absolute;
  bottom:17px;
  right:32px;
  border:0;
  background:none;
  font-size:28px;
  color:#9ab1b8;
  padding:0 7px
}

.reader-open #universe {
  width:calc(100% - var(--reader-width));
  overflow:hidden
}

dialog {
  position:fixed;
  inset:0 0 0 auto;
  width:var(--reader-width);
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  border:0;
  border-left:1px solid #7e999a40;
  background:var(--panel);
  color:var(--ink);
  padding:0;
  z-index:10;
  box-shadow:-10px 0 35px #0003
}

dialog[open] {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:reader-arrival .22s ease-out
}

#source-content {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px 30px 26px;
  scrollbar-gutter:stable
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
  color:var(--gold);
  font-size:8px;
  letter-spacing:2px;
  padding:10px 22px;
  border-bottom:1px solid var(--line)
}

.dialog-top button {
  border:0;
  background:none;
  font:26px var(--font);
  color:var(--ink);
  min-width:44px;
  min-height:44px;
  padding:0 4px;
  cursor:pointer
}

.dialog-top button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}

dialog h2 {
  font:26px/1.5 Georgia,serif;
  overflow-wrap:anywhere;
  font-weight:400;
  margin:0 0 16px
}

dialog h3 {
  font-size:12px;
  font-weight:500;
  color:var(--gold);
  margin-top:24px
}

dialog p {
  font-size:12px;
  line-height:1.9;
  color:#bdcbd0
}

dialog .arabic {
  font:23px/2.1 "Noto Naskh Arabic",Amiri,serif;
  direction:rtl;
  white-space:pre-wrap;
  text-align:right;
  color:#e4e5dc
}

dialog .translation {
  font-size:13px;
  line-height:1.95;
  white-space:pre-wrap
}
dialog .source-chunk {
  padding:20px 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}
dialog .source-pages {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:20px 0
}
dialog .ayah-arabic {
  font-size:28px;
  line-height:2.2;
  margin:28px 0;
  overflow-wrap:anywhere;
}
dialog .translation-label {
  color:var(--gold);
  font-size:10px;
  letter-spacing:1px;
  margin:0 0 12px;
}
dialog .translation sup {
  color:var(--gold);
  font-size:9px;
}

dialog summary {
  cursor:pointer;
  font-size:11px;
  color:var(--muted);
  padding:12px 0
}

dialog pre {
  font-size:10px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:12px
}

dialog .fine {
  font-size:10px;
  color:#91a7ad;
  overflow-wrap:anywhere
}

dialog .relation {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted)
}

dialog a {
  color:var(--gold);
  text-decoration:underline
}

dialog .empty {
  font-size:11px;
  color:#c5b796;
  border-left:1px solid #b59b5d60;
  padding-left:14px
}

@keyframes loading {
  0%,100% {
    opacity:.2;
    transform:scaleX(.4)
  }
  50% {
    opacity:.8;
    transform:scaleX(1)
  }
}

@media(max-width:760px) {
  .identity {
    left:20px;
    top:20px
  }
  .identity small {
    font-size:7px;
    letter-spacing:1.4px
  }
  .identity span {
    font-size:10px;
    letter-spacing:2px
  }
  .identity img {
    width:28px;
    height:28px
  }
  .top-right {
    right:20px;
    top:23px
  }
  .top-right>span:not(.local-dot) {
    display:none
  }
  .top-right button {
    margin-left:2px
  }
  .camera-tools {
    right:13px;
    gap:9px
  }
  .camera-tools button {
    width:32px;
    height:32px;
    font-size:19px
  }
  .bottom-space {
    width:calc(100% - 48px);
    bottom:44px
  }
  #suggestions {
    gap:16px
  }
  #navigation-hint {
    font-size:8px
  }
  .snapshot-note {
    left:20px;
    bottom:18px;
    font-size:7px;
    letter-spacing:1px
  }
  .snapshot-note span {
    padding:0 3px
  }
  #network-key {
    right:17px;
    bottom:9px
  }
  .field-label {
    font-size:15px
  }
  .field-label small {
    font-size:7px;
    letter-spacing:1px
  }
  #focus-heading {
    top:87px;
    max-width:86%;
    width:86%
  }
  #focus-title {
    font-size:23px
  }
  #focus-actions {
    bottom:196px
  }
  #status {
    bottom:170px;
    font-size:9px
  }
  .vignette {
    box-shadow:inset 0 0 100px 20px #040a1170
  }
  #source-content {
    padding:22px
  }
  dialog h2 {
    font-size:21px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }
}


/* Source labels and their screen-space pointers; no aggregate branch titles. */
#branch-label-guides{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
#branch-label-guides line{stroke-width:.7;opacity:.5;vector-effect:non-scaling-stroke}
.node-label{transform:none;max-width:220px;min-height:24px;padding:4px 6px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:11px/16px var(--font);background:#081018cc;color:var(--ink);text-shadow:0 1px 4px #000}
.node-label[aria-pressed=true]{color:var(--gold)}
.node-label:hover,.node-label:focus-visible{background:#15232f;outline:1px solid var(--line)}
@media(max-width:700px){.node-label{max-width:158px;font-size:10px}}

@keyframes reader-arrival{from{transform:translateX(100%)}to{transform:translateX(0)}}
.reader-open #universe #space-note{width:80%;max-width:100%}
.reader-open #universe #space-breadcrumbs{max-width:85%}
@media(min-width:701px) and (max-width:1100px){
 .reader-open #universe .identity{left:16px;top:22px}
 .reader-open #universe .identity small,.reader-open #universe .top-right>span{display:none}
 .reader-open #universe .identity span{font-size:10px}
 .reader-open #universe .top-right{right:16px;top:24px}
 .reader-open #universe #navigation-hint{white-space:normal}
}
@media(max-width:700px){
 .reader-open #universe{width:100%;height:44vh;height:44dvh}
 dialog{inset:auto 0 0;width:100%;height:56vh;height:56dvh;border-left:0;border-top:1px solid #7e999a40}
 dialog[open]{animation-name:reader-arrival-mobile}
 .reader-open #universe :is(.identity,.top-right,#focus-heading,#focus-actions,.bottom-space,#status,#space-controls,#space-directory,#space-pages,#space-continuations,#space-note,.snapshot-note,#network-key){display:none}
 .reader-open #universe #space-breadcrumbs{top:6px;left:8px;transform:none;max-width:calc(100% - 60px)}
 .reader-open #universe .camera-tools{right:7px;gap:2px}
 .reader-open #universe .camera-tools button{width:36px;height:36px;font-size:18px}
 .reader-open #universe #hover-label{max-width:calc(100% - 16px)}
 @keyframes reader-arrival-mobile{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

#celestial-bodies{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#connection-heartbeats{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.chunk-index{margin:16px 0 24px;display:flex;gap:8px;flex-wrap:wrap}
.chunk-index p{flex-basis:100%;margin:0 0 5px}
.chunk-choice{border:1px solid var(--line);border-radius:16px;padding:7px 12px;min-height:40px;background:#10212b;color:#cad8df;font-size:11px}
.chunk-choice[data-body-kind=asteroid]{border-style:dashed;color:#d8c5a7}
.source-chunk.chunk-selected{background:#b9a06512;box-shadow:inset 3px 0 var(--gold);padding-left:14px;padding-right:12px;scroll-margin-top:12px}
#branch-labels{z-index:3}
.camera-tools,.top-right{z-index:4}