/* /peta/sirah — the sirah read through the ayat. Colour tokens are the same as peta.css (night default, paper = data-theme=light). */
:root {
  --bg: #070B16; --bg2: #0C1324; --ink: #E9EDF5; --mid: #AEB8CB; --muted: #77839A;
  --line: rgba(255,255,255,.09); --gold: #E3C16F; --card: rgba(16,23,42,.86);
  --surface: #0B1222; --surface2: #10172A; --glow: #0F1A33;
  --fg-rgb: 255,255,255; --gold-rgb: 227,193,111; --shadow-rgb: 0,0,0; --shadow-a: 1;
  --p0: #6FA8DC; --p1: #A58BF2; --p2: #E8A54B; --p3: #4FBF94;
  --strip: rgba(232,165,75,.55); --road: rgba(185,166,240,.28); --road-up: rgba(232,201,106,.45); --road-down: rgba(224,99,79,.45); --road-side: rgba(201,139,122,.35);
  /* dots: themes of the message map */
  --dot: #EFE6CC;
  --c-allah: #6FA8DC; --c-doa: #A9CBF2; --c-akhirat: #A58BF2; --c-wahyu: #F0C25A; --c-kisah: #E2914A; --c-ingkar: #C9694E;
  --c-munafik: #B8566C; --c-ahlulkitab: #D8B27E; --c-amal: #4FBF94; --c-akhlak: #93D9AE; --c-hukum: #3AA6A6; --c-umat: #7FC6D0; --c-manusia: #B6D86C;
  /* dots: the deep dives */
  --d-tanda-langit: #8FA8F0; --d-tanda-waktu: #C7B8F5; --d-tanda-hujan: #7FC6E8; --d-tanda-bumi: #7CC48A; --d-tanda-laut: #4F9BD9;
  --d-tanda-hewan: #E2A55A; --d-tanda-manusia: #E7899A; --d-alam-umum: #B9C3D6;
  --d-st-dunia: #9FB4CC; --d-st-mati: #A99BD6; --d-st-kiamat: #B58BF0; --d-st-bangkit: #9C8CF2; --d-st-mahsyar: #8E7DE0; --d-st-catatan: #7C8FE8;
  --d-st-hisab: #6F9FE0; --d-st-surga: #E8C96A; --d-st-neraka: #E0634F; --d-st-dialog: #C98B7A;
  --d-ty-perintah: #4FBF94; --d-ty-larangan: #E0705F; --d-ty-aturan: #5AB0D6; --d-ty-janji: #E3C16F; --d-ty-gambaran: #8E9AB3; --d-name: #E3C16F;
  --f-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --f-head: 'Newsreader', Georgia, serif;
  --f-ar: 'Amiri Quran', 'Amiri', serif;
  --col: 440px;
  color-scheme: dark;
}
/* paper: a quiet page, ink-dark dots, an antique gold */
:root[data-theme="light"] {
  --bg: #F2F0EA; --bg2: #FFFFFF; --ink: #161D2C; --mid: #435069; --muted: #7A8397;
  --line: rgba(22,29,44,.12); --gold: #94701F; --card: rgba(255,255,255,.95);
  --surface: #FBFAF7; --surface2: #FFFFFF; --glow: #FBFAF6;
  --fg-rgb: 22,29,44; --gold-rgb: 148,112,31; --shadow-rgb: 40,46,64; --shadow-a: .32;
  --p0: #2C6AA3; --p1: #6A4EC4; --p2: #B5641A; --p3: #23875C;
  --strip: rgba(181,100,26,.7); --road: rgba(106,78,196,.35); --road-up: rgba(148,112,31,.6); --road-down: rgba(190,66,46,.55); --road-side: rgba(150,92,74,.45);
  --dot: #2B3550;
  --c-allah: #2C6AA3; --c-doa: #5C8FC8; --c-akhirat: #6A4EC4; --c-wahyu: #B5860E; --c-kisah: #C0601B; --c-ingkar: #A8432B;
  --c-munafik: #98304C; --c-ahlulkitab: #9A7240; --c-amal: #23875C; --c-akhlak: #3E9E68; --c-hukum: #1C7C7C; --c-umat: #3A8C9E; --c-manusia: #6E8F1F;
  --d-tanda-langit: #4762C4; --d-tanda-waktu: #7A5FC4; --d-tanda-hujan: #2889BA; --d-tanda-bumi: #3A9550; --d-tanda-laut: #1F6AAA;
  --d-tanda-hewan: #BD7C22; --d-tanda-manusia: #BF4C68; --d-alam-umum: #6A768C;
  --d-st-dunia: #5C7592; --d-st-mati: #7864B4; --d-st-kiamat: #8650D0; --d-st-bangkit: #6B58D2; --d-st-mahsyar: #5B4DBE; --d-st-catatan: #4A60C4;
  --d-st-hisab: #3B74BC; --d-st-surga: #A9810F; --d-st-neraka: #BE422E; --d-st-dialog: #A3604F;
  --d-ty-perintah: #23875C; --d-ty-larangan: #C2463A; --d-ty-aturan: #2A80AE; --d-ty-janji: #A9810F; --d-ty-gambaran: #6A768C; --d-name: #A07A1A;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
a { color: inherit; }
.top { position: absolute; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 20px; }
.brand { font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); text-decoration: none; }
.back { font-size: 13px; color: var(--muted); text-decoration: none; }
.back:hover, .brand:hover { color: var(--ink); }
.themebtn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--mid); display: grid; place-items: center; cursor: pointer; }
.themebtn svg { width: 16px; height: 16px; }
.themebtn .sun, :root[data-theme="light"] .themebtn .moon { display: none; }
:root[data-theme="light"] .themebtn .sun { display: block; }

.wrap { max-width: 860px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.hero { padding-top: 110px; padding-bottom: 0; }
.kicker { font: 600 11.5px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
h1 { font: 400 clamp(34px, 5.4vw, 54px)/1.08 var(--f-head); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.lede { font-size: 18px; color: var(--mid); max-width: 62ch; margin: 18px 0 0; }
.stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.stats div { display: grid; }
.stats b { font: 400 28px/1 var(--f-head); }
.stats span { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.legend-h { display: grid; gap: 8px; margin: 22px 0 0; font-size: 13.5px; color: var(--mid); }
.lg-c, .lg-s { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lg-s { font-size: 12.5px; color: var(--muted); }
.sh svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.lg-t { fill: var(--mid); } .lg-b { fill: var(--mid); opacity: .6; } .lg-r { fill: none; stroke: var(--mid); stroke-width: 1.2; } .lg-k { fill: var(--gold); }
.legend-f .sh { font-size: 11px; }
.legend-h [style*='--c']::before, .legend-f [style*='--c']::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: -1px; }
.legend-f { position: fixed; left: 18px; bottom: 16px; z-index: 20; display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.legend-f.on { opacity: 1; }

/* the road: one long way down, a station for every event */
.road { position: relative; margin: 40px auto 0; }
.road > svg.way { position: absolute; left: 0; top: 0; overflow: visible; }
.rt { fill: none; stroke: rgba(var(--fg-rgb),.13); stroke-width: 2; }
.rp { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.hijline { stroke: rgba(var(--gold-rgb),.55); stroke-dasharray: 5 6; }
.madbg { fill: rgba(var(--gold-rgb),.035); }
.st { cursor: pointer; outline: none; }
.st .halo { fill: transparent; transition: fill .2s; }
.st:hover .halo, .st.hot .halo, .st:focus-visible .halo { fill: rgba(var(--gold-rgb),.09); }
.st circle.d { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.25,1.2), opacity .4s; transition-delay: calc(var(--i) * 5ms); }
.st.in circle.d { transform: none; opacity: 1; }
.sl { position: absolute; width: 250px; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .55s, transform .55s; }
.sl.in { opacity: 1; transform: none; }
.sl.l { text-align: right; }
.sl .n { display: inline-block; font: 600 10.5px var(--f-ui); letter-spacing: .08em; color: var(--gold); }
.sl b { display: block; font: 400 21px/1.2 var(--f-head); color: var(--ink); margin-top: 2px; transition: color .2s; }
.sl .w { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.sl em { display: block; font-style: normal; font-size: 12px; color: var(--gold); margin-top: 4px; opacity: 0; transition: opacity .2s; }
.sl:hover b, .sl.hot b { color: var(--gold); }
.sl:hover em, .sl.hot em { opacity: 1; }
.ch { position: absolute; left: 50%; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 18px 24px 16px; text-align: center; cursor: pointer; transition: border-color .2s; }
.ch:hover { border-color: rgba(var(--gold-rgb),.5); }
.ch small { font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ch h2 { font: 400 clamp(22px, 3vw, 28px)/1.2 var(--f-head); margin: 6px 0 2px; text-wrap: balance; }
.ch p { margin: 0; font-size: 13px; color: var(--muted); }
.ch .mix-bar { margin: 12px auto 0; max-width: 300px; height: 6px; }
.ch em { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px; color: var(--gold); }
.tag { position: absolute; left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 99px; padding: 6px 16px; font: 600 11.5px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.tag.hij { padding: 9px 20px; font-size: 12.5px; }
.tag small { display: block; font: 500 11px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--muted); text-align: center; }
.d.b { opacity: .62; }
.st.in .d.b { opacity: .62; }
.d.r { fill: none; stroke-width: 1.1; }
.d.k { fill: var(--gold); }
.glow { fill: url(#glw); opacity: 0; transition: opacity .9s; }
.st.in .glow { opacity: 1; }
.kp { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.st.in .kp { animation: kp 2.8s ease-out infinite; }
@keyframes kp { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
.sl q { display: block; margin-top: 7px; font: italic 400 15.5px/1.45 var(--f-head); color: var(--mid); }
.sl q::before { content: '«'; } .sl q::after { content: '»'; }
.sl .kr { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gold); }
.sl .w { margin-top: 6px; }
.tip { position: fixed; z-index: 45; pointer-events: none; max-width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink); box-shadow: 0 10px 28px rgba(var(--shadow-rgb),.3); }
.tip small { display: block; color: var(--gold); margin-top: 1px; }
.tip span { display: block; margin-top: 4px; color: var(--mid); font: italic 13.5px/1.45 var(--f-head); }
.keycard { margin: 18px 0 0; background: rgba(var(--gold-rgb),.07); border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 14px; padding: 14px 16px; }
.keycard .psg-h { margin: 0; }
.kc-ar { direction: rtl; text-align: right; font: 400 26px/2 var(--f-ar); color: var(--ink); margin: 8px 0 0; min-height: 1.2em; }
.kc-tr { font: italic 400 16.5px/1.6 var(--f-head); color: var(--ink); margin: 6px 0 0; }
.kc-ref { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.kc-ref a { color: var(--gold); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .st circle.d, .sl, .glow { transition: none; transform: none; opacity: 1; } .st.in .kp { animation: none; } }

.mix { margin: 16px 0 0; }
.mix-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(var(--fg-rgb),.06); }
.mix-bar i { display: block; height: 100%; background: var(--c); }
.mix p { margin: 7px 0 0; font-size: 13px; color: var(--muted); }
.mix p b { color: var(--ink); font-weight: 500; }

/* the panel: the story and the ayat, only when asked for */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(var(--shadow-rgb),.4); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; right: 0; z-index: 41; height: 100%; width: min(560px, 100vw); background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(104%); transition: transform .34s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 60px rgba(var(--shadow-rgb),.3); }
.panel.on { transform: none; }
.pn-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pn-head button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--mid); font-size: 18px; line-height: 1; cursor: pointer; }
.pn-head button:hover { color: var(--ink); border-color: rgba(var(--gold-rgb),.5); }
.pn-head button:disabled { opacity: .3; cursor: default; }
.pn-t { flex: 1; min-width: 0; font: 600 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 26px 70px; overscroll-behavior: contain; }
.ev-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ev-year { font: 600 12px var(--f-ui); color: var(--gold); background: rgba(var(--gold-rgb),.1); border-radius: 99px; padding: 3px 10px; }
.pn-body h3 { font: 400 28px/1.2 var(--f-head); margin: 0; }
.ev-when { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.ev-desc { margin: 14px 0 0; color: var(--mid); }
.ch-intro { margin: 14px 0 0; font-size: 17px; color: var(--mid); }
.ch-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.ch-list button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; }
.ch-list button:hover { border-color: rgba(var(--gold-rgb),.5); }
.ch-list b { font: 400 17px var(--f-head); }
.ch-list small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.psg-h { margin: 26px 0 0; font: 600 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.psg { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.psg li { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; }
.psg-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.psg-ref { font: 600 13.5px var(--f-ui); color: var(--gold); text-decoration: none; }
.psg-ref:hover { text-decoration: underline; }
.rel { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; color: var(--ink); background: rgba(var(--gold-rgb),.14); }
.rel.tentang { background: rgba(var(--fg-rgb),.07); color: var(--mid); }
.rel.dibacakan { background: transparent; border: 1px solid rgba(var(--gold-rgb),.45); color: var(--mid); }
.beda { font-size: 10.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 99px; padding: 1px 8px; }
.psg-note { margin: 8px 0 0; font-size: 15px; color: var(--ink); }
.psg-tr { margin: 10px 0 0; font: italic 400 15.5px/1.6 var(--f-head); color: var(--mid); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.psg-tr.open { -webkit-line-clamp: unset; display: block; }
.psg-tr sup { font: 600 9.5px var(--f-ui); color: var(--gold); font-style: normal; margin-right: 3px; }
.psg-ar { margin: 12px 0 0; direction: rtl; text-align: right; font: 400 25px/2 var(--f-ar); color: var(--ink); }
.psg-ar span { color: var(--gold); font: 500 13px var(--f-ui); margin: 0 6px; }
.psg-act { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: 12.5px; }
.psg-act button, .psg-act a { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.psg-act button:hover, .psg-act a:hover { color: var(--gold); }
.more { margin: 12px 0 0; font: 500 13.5px var(--f-ui); color: var(--gold); background: none; border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 99px; padding: 7px 16px; cursor: pointer; }
.closing { margin: 60px auto 0; padding-top: 26px; padding-bottom: 70px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.closing p { max-width: 66ch; }

@media (max-width: 979px) { .legend-f { display: none; } }
@media (max-width: 760px) {
  .top { padding: 0 14px; }
  .back { display: none; }
  .hero { padding-top: 84px; }
  .lede { font-size: 16.5px; }
  .sl { width: auto; }
  .sl b { font-size: 18px; }
  .ch { padding: 14px 16px 13px; }
  .pn-body { padding: 18px 18px 60px; }
  .pn-body h3 { font-size: 24px; }
  .psg li { padding: 12px 13px 10px; }
  .psg-ar { font-size: 22px; }
}
/* scenes (petals) and small stories */
.ptb { fill: rgba(var(--fg-rgb),.025); stroke: rgba(var(--fg-rgb),.07); stroke-width: 1; }
.st:hover .ptb, .st.hot .ptb { stroke: rgba(var(--gold-rgb),.25); }
.sl.mini b { font-size: 16px; }
.sl.mini .w { margin-top: 2px; font-size: 11.5px; }
.tag.mini { border-color: var(--line); color: var(--mid); background: var(--bg); font-size: 10.5px; }
.scn { margin: 22px 0 0; }
.scn .psg-h { margin: 0; }
.scn-s { margin: 6px 0 0; font-size: 15px; color: var(--mid); }
.mini-tg { margin: 16px 0 0; font: 500 13px var(--f-ui); color: var(--mid); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 7px 15px; cursor: pointer; }
.mini-tg:hover { color: var(--ink); border-color: rgba(var(--gold-rgb),.5); }
.mini-tg[aria-pressed="false"] { color: var(--gold); border-color: rgba(var(--gold-rgb),.45); }
.kk { position: absolute; left: 50%; width: min(820px, calc(100% - 32px)); transform: translateX(-50%); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 14px; }
.kk-h { margin: 0 0 10px; font: 600 11px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.kk-h small { font: 400 12px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px; }
.kk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; }
.kk-i { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 10px; padding: 7px 8px; cursor: pointer; }
.kk-i:hover, .kk-i.hot { background: rgba(var(--gold-rgb),.08); }
.kk-i svg { width: 30px; height: 30px; }
.kk-i b { display: block; font: 400 15.5px/1.3 var(--f-head); }
.kk-i small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.kk-more { margin: 8px 0 0 8px; font: 500 12.5px var(--f-ui); color: var(--gold); background: none; border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 99px; padding: 6px 14px; cursor: pointer; }

/* the sky along the road: per chapter an upper sky, horizon glow, body (the sky the chapter's stations sit in),
   three land layers (far → near) and the light of the scene (cave, sun, lamps). Night look by default, paper below. */
:root {
  --s1-wahyu: #050816; --s2-wahyu: #1a1f4a; --s3-wahyu: #0a0d1e; --l1-wahyu: #151b3c; --l2-wahyu: #0e1330; --l3-wahyu: #090c1f; --lt-wahyu: #f2cf73;
  --s1-ujian: #120a1f; --s2-ujian: #6e2a2a; --s3-ujian: #160c14; --l1-ujian: #3a1d26; --l2-ujian: #26131c; --l3-ujian: #170c13; --lt-ujian: #e8a65a;
  --s1-jalan: #04070f; --s2-jalan: #16263e; --s3-jalan: #070c17; --l1-jalan: #18253b; --l2-jalan: #101a2c; --l3-jalan: #0a111f; --lt-jalan: #ece5c6;
  --s1-madinah: #1c1630; --s2-madinah: #b0603a; --s3-madinah: #1a1410; --l1-madinah: #4a2f2a; --l2-madinah: #2c1d1a; --l3-madinah: #1a120f; --lt-madinah: #ffd27a;
  --s1-perang: #1e1410; --s2-perang: #8a5a2a; --s3-perang: #17110d; --l1-perang: #5a3622; --l2-perang: #3a2416; --l3-perang: #1c120c; --lt-perang: #e8b062;
  --s1-rumah: #0d1226; --s2-rumah: #2c3560; --s3-rumah: #0c1020; --l1-rumah: #20264a; --l2-rumah: #171b38; --l3-rumah: #0e1226; --lt-rumah: #ffcf7a;
  --s1-kemenangan: #19223a; --s2-kemenangan: #c78a3a; --s3-kemenangan: #15130f; --l1-kemenangan: #4a3b2a; --l2-kemenangan: #2e2519; --l3-kemenangan: #18140e; --lt-kemenangan: #ffe08a;
  --s1-sempurna: #1a0f22; --s2-sempurna: #d27a3c; --s3-sempurna: #0b0a16; --l1-sempurna: #4c2a2a; --l2-sempurna: #2c1a20; --l3-sempurna: #120c16; --lt-sempurna: #ffd88a;
  --s1-akhir: #05060f; --s2-akhir: #0d1024; --s3-akhir: #070812; --l1-akhir: #0d1024; --l2-akhir: #0a0c1c; --l3-akhir: #070812; --lt-akhir: #ece5c6;
  --glass: rgba(8,12,24,.66);
}
:root[data-theme="light"] {
  --s1-wahyu: #c9cfe6; --s2-wahyu: #f1e3c2; --s3-wahyu: #f2f0ea; --l1-wahyu: #aab1cf; --l2-wahyu: #8d95b6; --l3-wahyu: #747c9c; --lt-wahyu: #b8862a;
  --s1-ujian: #e3cfd9; --s2-ujian: #f0c09a; --s3-ujian: #f2efe9; --l1-ujian: #c6a2a0; --l2-ujian: #a8807e; --l3-ujian: #8a6563; --lt-ujian: #b5641a;
  --s1-jalan: #cdd7e6; --s2-jalan: #eef0f2; --s3-jalan: #f1f1ee; --l1-jalan: #a9b6c9; --l2-jalan: #8c9ab0; --l3-jalan: #6f7d94; --lt-jalan: #8f7b3a;
  --s1-madinah: #f0dccf; --s2-madinah: #f6c48e; --s3-madinah: #f4efe6; --l1-madinah: #c9a58e; --l2-madinah: #a88570; --l3-madinah: #866652; --lt-madinah: #c47a12;
  --s1-perang: #efe0cc; --s2-perang: #e9b77a; --s3-perang: #f3eee6; --l1-perang: #b98563; --l2-perang: #9a6a4c; --l3-perang: #7a5038; --lt-perang: #b06a10;
  --s1-rumah: #d6dbee; --s2-rumah: #ece4d2; --s3-rumah: #f2f0ea; --l1-rumah: #aeb6d4; --l2-rumah: #929bbd; --l3-rumah: #767fa3; --lt-rumah: #c48a1a;
  --s1-kemenangan: #e9e6d6; --s2-kemenangan: #f4d690; --s3-kemenangan: #f4f0e6; --l1-kemenangan: #c4ad8a; --l2-kemenangan: #a5906d; --l3-kemenangan: #857153; --lt-kemenangan: #b58410;
  --s1-sempurna: #ead6dc; --s2-sempurna: #f2b98a; --s3-sempurna: #efedf2; --l1-sempurna: #c39a92; --l2-sempurna: #a37a74; --l3-sempurna: #845d5a; --lt-sempurna: #b87618;
  --s1-akhir: #d9dcea; --s2-akhir: #eceef5; --s3-akhir: #f2f0ea; --l1-akhir: #c9cde0; --l2-akhir: #b8bdd3; --l3-akhir: #a7adc6; --lt-akhir: #8f7b3a;
  --glass: rgba(250,249,246,.78);
}
/* the scenery */
:root { --kb: #050507; --star: #f4efe0; }
:root[data-theme="light"] { --kb: #1c1c22; --star: #8a8fa8; }
.sky, .scn-wrap { position: absolute; top: 0; pointer-events: none; }
.scn-wrap { overflow: hidden; }
.scn-wrap svg { display: block; }
.way { position: absolute; left: 0; top: 0; overflow: visible; }
.road > .way { z-index: 1; }
.road .sl, .road .ch, .road .tag, .road .kk { z-index: 2; }
.scene g[data-depth] { will-change: transform; }
.scene .lt { fill: var(--lt); }
.scene .halo-lt { fill: var(--lt); opacity: .07; }
.scene .star { fill: var(--star); opacity: .7; animation: tw var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes tw { from { opacity: .15; } to { opacity: .85; } }
.scene .kb { fill: var(--kb); }
.scene .kb-band { fill: var(--lt); }
.scene .win { fill: var(--lt); opacity: .85; }
.scene .mq, .scene .tr { fill: var(--l3); }
.scene .col { fill: var(--l1); }
.scene .pa-s, .scene .tr-s { fill: none; stroke: var(--l3); stroke-linecap: round; }
.scene .cave { fill: var(--kb); }
.scene .trail { fill: var(--lt); opacity: .5; }
.scene .well { fill: none; stroke: var(--lt); stroke-width: 1.2; opacity: .45; }
.scene .trench { fill: none; stroke: var(--l3); stroke-width: 5; stroke-dasharray: 18 6; }
.scene .ray { stroke: var(--lt); stroke-width: 7; opacity: .07; stroke-linecap: round; }
.ch, .kk { background: var(--glass); }
.tag { background: var(--glass); }
@media (prefers-reduced-motion: reduce) { .scene .star { animation: none; } }
/* the floating key: a small pill that opens on hover or tap, so it never covers a station's words for long */
.legend-f { display: block; padding: 7px 13px; cursor: pointer; }
.lf-k { font: 600 11px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.lf-b { display: none; gap: 3px; margin-top: 8px; }
.legend-f:hover .lf-b, .legend-f:focus-within .lf-b, .legend-f:focus .lf-b { display: grid; }
.legend-f.on { pointer-events: auto; }
@media (max-width: 979px) { .legend-f { display: none; } }