:root {
  color-scheme:dark;
  --bg:#090e17;
  --panel:#101824;
  --panel-deep:#0b131f;
  --line:#263244;
  --line-soft:#202d40;
  --paper:#f2ede4;
  --ink:#e9edf6;
  --muted:#a8b6ca;
  --quiet:#8495af;
  --gold:#ffad67;
  --blue:#75c7fb;
  --lilac:#ad96ff;
  --green:#8de6c1;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --chart-font:"IBM Plex Mono";
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 44% 2%,#111c2b 0,transparent 47rem),var(--bg); color:var(--ink); font:15px/1.45 var(--sans); -webkit-font-smoothing:antialiased }
button,input,select { font:inherit }
button { cursor:pointer }
button:disabled { opacity:.53; cursor:default }
a { color:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible { outline:2px solid var(--blue); outline-offset:3px }
[hidden] { display:none!important }
h1,h2,h3,p { margin:0 }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.shell { width:min(calc(100% - 96px),1420px); margin-inline:auto }
.site-header { border-bottom:1px solid #202c3c }
.header-inner,.header-right { display:flex; align-items:center; justify-content:space-between; gap:18px }
.header-inner { height:61px }
.wordmark { color:var(--paper); text-decoration:none; font-weight:700; font-size:16px; letter-spacing:-.03em; display:flex; align-items:center; gap:10px }
.orbit-mark { width:21px; height:21px; border:1px solid var(--gold); border-radius:50%; display:block; position:relative }
.orbit-mark::before { content:""; position:absolute; inset:6px -4px; border:1px solid var(--gold); border-radius:50%; transform:rotate(-33deg) }
.orbit-mark i { width:4px; height:4px; display:block; position:absolute; border-radius:50%; background:var(--gold); right:0; top:2px; box-shadow:0 0 6px var(--gold) }
.feed-status { display:inline-flex; align-items:center; gap:7px; color:var(--muted); border:1px solid #344155; border-radius:5px; padding:4px 8px; font-size:10px; white-space:nowrap }
.feed-status i { width:6px; height:6px; border-radius:50%; background:var(--quiet) }
.feed-status[data-source=live] { color:#9fe8c9; border-color:#294c47; background:#112420 }
.feed-status[data-source=live] i { background:var(--green); box-shadow:0 0 8px #8de6c165 }
.feed-status[data-source=cached],.feed-status[data-source=snapshot],.feed-status[data-source=error] { color:var(--gold); border-color:#54443b }
.feed-status[data-source=cached] i,.feed-status[data-source=snapshot] i,.feed-status[data-source=error] i { background:var(--gold) }
.text-button { background:none; border:0; padding:0; color:var(--muted); font-weight:600; font-size:13px }
.text-button:hover:not(:disabled), .site-footer a:hover { color:var(--gold) }
.text-button span { color:var(--gold) }
.intro { margin:29px 0 22px; display:flex; align-items:end; justify-content:space-between; gap:22px }
.intro h1 { font:400 clamp(70px,9.6vw,132px)/.84 var(--serif); letter-spacing:-.045em; color:var(--paper); padding-bottom:11px }
.intro h1 em { color:#ffc58e; font-weight:400 }
.intro p { color:var(--muted); font-size:clamp(14px,1.43vw,18px) }
.intro-meta { display:grid; gap:4px; text-align:right; color:var(--muted); font-size:11px; white-space:nowrap; padding-bottom:2px }
.intro-meta span:first-child { color:var(--gold) }
.workspace { display:grid; align-items:start; grid-template-columns:minmax(0,2.7fr) minmax(285px,1fr); gap:13px }
.panel { min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; min-height:51px; border-bottom:1px solid var(--line) }
.view-selector { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:6px; background:#0b111d }
.view-selector button,.outline-button,.icon-button { border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; padding:4px 9px; white-space:nowrap }
.view-selector button:hover { color:var(--paper) }
.view-selector button[aria-pressed=true] { color:#ffe0ba; background:#302923; border-color:#5c4535 }
.view-selector button span { color:#ffba7d; margin-left:2px }
.map-tools { display:flex; align-items:center; gap:5px }
.outline-button,.icon-button { border-color:var(--line); background:#131d2a }
.outline-button:hover:not(:disabled),.icon-button:hover:not(:disabled) { color:var(--gold); border-color:#826044 }
.icon-button { display:grid; place-items:center; font:500 16px/1 var(--mono); min-width:31px; height:29px; padding:0 }
.orbit-toggle { min-height:29px }
.orbit-toggle span:first-child { color:var(--gold); margin-right:3px }
.globe-stage { height:clamp(405px,38vw,570px); position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 47%,#152e49 0,#091421 48%,#070d16 77%); isolation:isolate }
#globe { display:block; width:100%; height:100%; touch-action:none }
.globe-overlay { position:absolute; inset:auto 12px 11px; display:flex; align-items:end; justify-content:space-between; gap:9px; pointer-events:none }
.stage-caption { font-size:10px; display:grid; gap:3px; color:var(--muted); text-shadow:0 1px 6px #030610,0 1px 8px #030610 }
.stage-caption span:first-child { text-transform:uppercase; letter-spacing:.13em; color:#dce7f4 }
.depth-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 10px; padding:6px 8px; margin:0; border:1px solid #31445a; border-radius:5px; list-style:none; background:#091321e8; font-size:9px }
.depth-legend li { display:flex; align-items:center; gap:4px; color:var(--ink); white-space:nowrap }
.depth-legend li span { color:var(--muted) }
.depth-legend i,.depth-dot { display:inline-block; height:6px; width:6px; border-radius:50%; flex:none }
.shallow { background:var(--gold) }
.intermediate { background:var(--blue) }
.deep { background:var(--lilac) }
.globe-message { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:86%; color:var(--paper); background:#0a1421ed; padding:9px 13px; border:1px solid var(--line); border-radius:7px; text-align:center; pointer-events:none; font-size:13px }
.replay { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding:10px 12px 9px }
.play { align-self:center; background:#f4b987; color:#261c17; font-weight:700; width:38px; height:38px; flex:none; display:grid; place-items:center; border:0; border-radius:6px; padding:0 }
.play:hover:not(:disabled) { background:#ffd1ad }
.replay-center { flex:1; min-width:0; display:grid; gap:0 }
.replay-head { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted) }
.replay-head output { color:var(--paper) }
#timeline { display:block; width:100%; height:42px }
#scrubber { appearance:none; width:100%; height:3px; background:linear-gradient(to right,#ffad67 var(--progress,100%),#314257 var(--progress,100%)); border-radius:3px; margin:0 0 5px; cursor:pointer }
#scrubber::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:var(--gold); border:2px solid #1e2330; box-shadow:0 0 0 1px var(--gold) }
#scrubber::-moz-range-thumb { width:8px; height:8px; border-radius:50%; background:var(--gold); border:2px solid #1e2330; box-shadow:0 0 0 1px var(--gold) }
.latest { align-self:center; padding:7px 10px }
.reading { display:grid; gap:12px }
.reading h2 { color:var(--paper); font-size:14px; font-weight:700; letter-spacing:-.01em }
.week-card,.event-card,.pair-card { padding:13px 14px }
.week-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:9px }
.week-stats > * { padding:1px 0 0 9px; text-align:left; min-width:0 }
.week-stats > :first-child { padding-left:0 }
.week-stats > :not(:first-child) { border-left:1px solid var(--line) }
.week-stats span { color:var(--muted); display:block; font-size:9px; white-space:nowrap }
.week-stats strong { color:var(--paper); font-size:clamp(18px,2vw,28px); letter-spacing:-.035em; font-weight:600; display:block; white-space:nowrap; line-height:1.22; margin-top:4px }
.week-stats button { background:none; border:0; color:inherit; font:inherit }
.week-stats button:hover:not(:disabled) strong { color:var(--gold) }
.week-stats small { font-size:.48em; margin-left:3px; color:var(--muted) }
.event-head { display:flex; align-items:center; justify-content:space-between; gap:8px }
.event-head .text-button { font-size:11px }
.event-body { min-height:174px; display:grid; align-content:start; padding-top:11px }
.placeholder { color:var(--muted); font-size:13px }
.event-number { display:flex; align-items:baseline; color:var(--paper); font:400 61px/.92 var(--serif); letter-spacing:-.04em; white-space:nowrap }
.event-number small { color:var(--quiet); font:400 .49em var(--serif); margin-right:4px }
.event-place { font-size:16px; color:var(--ink); letter-spacing:-.02em; line-height:1.3; font-weight:600; margin:7px 0 5px; overflow-wrap:anywhere }
.event-meta { display:flex; flex-wrap:wrap; gap:7px 10px; align-items:center; font-size:10px; color:var(--muted); margin:4px 0 6px }
.event-meta span:first-child { display:inline-flex; gap:4px; align-items:center }
.event-link { justify-self:start; color:var(--blue); font-size:11px; text-underline-offset:3px }
.event-navigation { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); margin-top:10px; padding-top:9px }
.pair-card p { font-size:13px; line-height:1.45; color:var(--muted); margin-top:6px }
.pair-card p strong { color:var(--paper); font-weight:600 }
.pair-scale { display:grid; gap:5px; margin:9px 0 10px }
.pair-row { display:grid; grid-template-columns:minmax(0,1fr) 55px; align-items:center; gap:7px; font-size:9px; color:var(--muted); text-align:right; background:none; border:0; padding:3px 0; width:100% }
.pair-row:hover { color:var(--paper) }
.pair-track { border-radius:3px; height:4px; background:#233047; position:relative }
.pair-track i { display:block; position:absolute; height:100%; border-radius:3px; min-width:4px }
.pair-button { margin-top:9px; font-size:12px }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 15px; border-bottom:1px solid var(--line) }
.section-head h2 { color:var(--paper); font-weight:600; font-size:18px; letter-spacing:-.025em }
.section-head p { font-size:12px; color:var(--muted); margin-top:2px }
.filter { white-space:nowrap; color:var(--muted); font-size:11px; display:flex; gap:6px; align-items:center }
.filter select { border:1px solid var(--line); border-radius:5px; padding:4px 5px; background:#0b131f; color:var(--paper); font:10px var(--mono) }
.depth-stage { padding:8px 10px 8px 7px; background:#0b131f }
#depth { display:block; height:300px; width:100% }
.event-list { list-style:none; margin:0; padding:0; max-height:265px; overflow:auto }
.event-list li + li { border-top:1px solid var(--line-soft) }
.log-event { width:100%; padding:8px 13px; display:grid; grid-template-columns:47px minmax(0,1fr); align-items:start; gap:6px; text-align:left; background:none; color:var(--ink); border:0 }
.log-event:hover,.log-event[aria-current=true] { background:#1a2636 }
.log-event[aria-current=true] { box-shadow:inset 2px 0 var(--gold) }
.log-event > span:first-child { color:var(--gold); font-size:12px; font-weight:500; margin-top:2px }
.log-event .log-place { display:block; font-size:12px; font-weight:600 }
.log-event .log-time { display:block; color:var(--muted); font-size:9px; margin-top:2px }
.event-list .placeholder { padding:10px 14px }
.more { margin:10px 13px }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 0 24px; color:var(--muted); font-size:11px }
.site-footer a { color:var(--blue); white-space:nowrap; text-underline-offset:3px }
.method-dialog { max-width:min(570px,calc(100% - 28px)); background:var(--panel); border:1px solid #405171; border-radius:10px; color:var(--ink); padding:17px 20px }
.method-dialog::backdrop { background:#060a13d9 }
.method-dialog header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.method-dialog h2 { font:400 35px/1 var(--serif); color:var(--paper) }
.method-dialog p { color:var(--muted); margin:9px 0; font-size:14px }
.method-dialog a { color:var(--blue); text-underline-offset:3px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); border:0 }
@media(max-width:1080px) {
  .shell { width:calc(100% - 46px) }
  .workspace { grid-template-columns:minmax(0,2fr) minmax(270px,1fr) }
  .globe-stage { height:clamp(385px,48vw,510px) }
}
@media(max-width:760px) {
  .shell { width:calc(100% - 28px) }
  .header-inner { height:50px }
  .header-right { gap:8px }
  .source-button { font-size:11px }
  .intro { margin:20px 0 17px; flex-wrap:wrap; gap:9px }
  .intro h1 { font-size:clamp(65px,14.5vw,99px); padding-bottom:7px }
  .intro-meta { display:flex; text-align:left; gap:11px; font-size:10px }
  .workspace { grid-template-columns:minmax(0,1fr); gap:10px }
  .reading { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .week-card { grid-column:1 / -1 }
  .week-stats strong { font-size:25px }
  .globe-stage { height:clamp(320px,71vw,460px) }
}
@media(max-width:460px) {
  .shell { width:calc(100% - 22px) }
  .header-inner,.header-right { gap:7px }
  .wordmark { font-size:14px; gap:6px }
  .orbit-mark { width:17px; height:17px }
  .orbit-mark::before { inset:5px -4px }
  .feed-status { font-size:9px; padding:3px 5px }
  .source-button { font-size:10px }
  .globe-head { padding-inline:7px; gap:6px }
  .view-selector button { padding-inline:6px; font-size:11px }
  .orbit-toggle { min-width:29px; padding:0 5px }
  .orbit-toggle span:first-child { margin-right:0 }
  .orbit-label { display:none }
  .map-tools { gap:3px }
  .icon-button { min-width:28px }
  .globe-overlay { inset:auto 7px 7px; flex-direction:column; align-items:start; gap:5px }
  .stage-caption { display:flex; gap:8px; font-size:9px }
  .depth-legend { gap:4px 7px; font-size:8px }
  .replay { padding-inline:8px; gap:7px }
  .reading { grid-template-columns:minmax(0,1fr) }
  .site-footer { align-items:start }
  #depth { height:245px }
}