@font-face{font-family:Archivo;src:url(/a7f3/font/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Atkinson;src:url(/a7f3/font/atkinson.woff2) format("woff2");font-display:swap}
:root{--ink:#000;--cream:#F2E6C9;--cream2:rgba(242,230,201,.62);--cream3:rgba(242,230,201,.32);--gold:#FFC629;--teal:#0B3B40}
*{box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--cream);font:17px/1.5 Atkinson,Arial,sans-serif;background:#000 url(/a7f3/bb/grain.png);min-height:100vh;overflow-x:hidden}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:12px;background:var(--gold);color:#000;padding:8px 12px;z-index:50}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.top{max-width:1240px;margin:0 auto;padding:18px 12px 4px;text-align:center}
.kicker{font:600 11px/1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;color:var(--cream2);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.kicker i{font-style:normal;color:var(--gold)}
.mono{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font:800 10px/1 Archivo;font-stretch:87.5%;letter-spacing:.02em}
h1{font:800 clamp(27px,7.4vw,46px)/1.02 Archivo,Arial,sans-serif;font-stretch:87.5%;margin:12px auto 8px;max-width:16ch;letter-spacing:-.01em;color:var(--cream)}
.sub{margin:0 auto;max-width:34em;color:var(--cream2);font-size:14.5px;line-height:1.45}
.totals{margin:10px auto 0;font:600 11px/1.45 Archivo;font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.totals small{display:block;color:var(--cream3);letter-spacing:.12em;font-size:10px;margin-top:4px}
.controls{display:flex;justify-content:center;gap:0;margin:12px 0 0;align-items:center;flex-wrap:wrap}
.seg,.play{font:700 13px/1 Archivo;font-stretch:110%;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);background:transparent;border:1px solid var(--cream3);padding:10px 14px;cursor:pointer;min-height:42px}
.seg+.seg{border-left:0}.seg.on{background:var(--cream);color:#000;border-color:var(--cream)}
.play{margin-left:12px;display:inline-flex;gap:8px;align-items:center;border-radius:21px}
.play .ico{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.play[aria-pressed=true] .ico{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.stage[hidden]{display:none!important}
.stage{max-width:1480px;margin:0 auto;padding:0 10px;display:grid;grid-template-columns:1fr;position:relative}
.side{display:contents}.side .top{order:-1}.sky{order:0}
.sky{position:relative}
#orrery{display:block;width:100%;max-width:min(100%,calc(100vh - 40px));min-width:0;height:auto;margin:0 auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:default;user-select:none;-webkit-user-select:none}
#orrery:focus{outline:none}#orrery:focus-visible .frame{stroke:var(--gold)}
#orrery.pointy{cursor:pointer}
.hint{text-align:center;color:var(--cream3);font-size:13px;margin:4px 0 0;letter-spacing:.02em}
/* svg */
.orb{fill:none;stroke:var(--cream);stroke-opacity:.5;stroke-width:1}
.orb2{fill:none;stroke:var(--cream);stroke-opacity:.13;stroke-width:.7;stroke-dasharray:1 3}
.band{fill:none;stroke:var(--teal);stroke-opacity:0;transition:stroke-opacity .4s}
.band.on{stroke-opacity:.95}
.rname{paint-order:stroke;stroke:#000;stroke-width:3.5px;stroke-linejoin:round;stroke-opacity:.92;font:600 9px Archivo;font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;fill:var(--cream);fill-opacity:.62}
.rname.on{fill:var(--gold);fill-opacity:1}
.frame{fill:none;stroke:var(--cream);stroke-opacity:.55}
.tick{stroke:var(--cream);stroke-opacity:.45}
.star{fill:var(--cream)}
.planet .body{stroke:var(--cream);stroke-width:1.3;fill:url(#hatch)}
.planet .shade{fill:#000;fill-opacity:.55}
.planet .ringlet{fill:none;stroke:var(--cream);stroke-opacity:.7;stroke-width:.8}
.planet .moon{fill:var(--cream);fill-opacity:.9}
.planet .plabel{font:500 10px Archivo;font-stretch:100%;letter-spacing:.03em;fill:var(--cream);fill-opacity:.66;paint-order:stroke;stroke:#000;stroke-width:3px;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.showlabels .planet .plabel{opacity:1}
.planet.dim{opacity:.38}
.planet.on .body{stroke:var(--gold);stroke-width:1.6;fill:url(#hatchGold)}
.planet.on .moon,.planet.lit .moon{fill:var(--gold);fill-opacity:1}
.planet.on .plabel{opacity:1;fill:var(--gold);fill-opacity:1;font-weight:800}
.planet.lit .body{stroke:var(--gold)}
.planet.lit .plabel{opacity:1;fill:var(--gold)}
.planet.hov .body{stroke-width:1.8}
.link{stroke:var(--cream);stroke-opacity:.22;stroke-width:.8;stroke-dasharray:2 3;fill:none}
.link.on{stroke:var(--gold);stroke-opacity:.95;stroke-width:1.3;stroke-dasharray:none}
.links.quiet .link:not(.on){stroke-opacity:.08}
.comet .head{fill:var(--cream)}
.comet .tail{fill:none;stroke:var(--cream);stroke-linecap:round}
.comet .clabel{font:italic 600 9.5px Archivo;font-stretch:100%;fill:var(--cream);fill-opacity:.7;paint-order:stroke;stroke:#000;stroke-width:3px;opacity:0}
.showlabels .comet .clabel{opacity:1}
.comet.on .head{fill:var(--gold)}.comet.on .tail{stroke:var(--gold)}.comet.on .clabel{opacity:1;fill:var(--gold);fill-opacity:1}
.sun .disc{fill:#0b0904;stroke:var(--gold);stroke-width:1.4}
.sun .ray{stroke:var(--gold);stroke-width:1}
.sun .mono2{font:800 30px Archivo;font-stretch:87.5%;fill:var(--gold);letter-spacing:-.01em}
.cart{font:600 8px Archivo;font-stretch:125%;letter-spacing:.32em;fill:var(--cream);fill-opacity:.5;text-transform:uppercase}
/* card */
.card{position:fixed;left:6px;right:6px;bottom:6px;max-height:46vh;overflow:auto;background:rgba(6,10,10,.96);border:1px solid var(--cream3);border-top:2px solid var(--gold);padding:18px 18px 16px;z-index:20;box-shadow:0 -10px 40px #000;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.card[hidden]{display:none}
.close{position:absolute;right:8px;top:6px;width:40px;height:40px;background:none;border:0;color:var(--cream);font-size:28px;line-height:1;cursor:pointer}
.c-ring{font:700 10px/1.2 Archivo;font-stretch:125%;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 40px 6px 0}
.c-name{font:800 23px/1.05 Archivo;font-stretch:87.5%;margin:0 0 12px;color:var(--cream)}
.c-stats{display:flex;gap:22px;margin:0 0 12px;flex-wrap:wrap}
.c-stats b{display:block;font:800 26px/1 Archivo;font-stretch:87.5%;color:var(--gold)}
.c-stats span{font-size:12px;color:var(--cream2);letter-spacing:.04em}
.c-dots{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;max-width:320px}
.c-dots i{width:7px;height:7px;border-radius:50%;background:var(--cream);opacity:.85}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
.card dt{font:700 10px/1.9 Archivo;font-stretch:120%;letter-spacing:.16em;text-transform:uppercase;color:var(--cream2)}
.card dd{margin:0;color:var(--cream)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.chips li{border:1px solid var(--cream3);border-radius:14px;padding:3px 10px;font-size:13.5px}
.conn{margin:14px 0 0;font-size:14px;color:var(--cream2)}
.conn button{font:inherit;color:var(--gold);background:none;border:0;border-bottom:1px solid rgba(255,198,41,.4);padding:2px 0;margin:0 8px 4px 0;cursor:pointer}
.c-note{margin:14px 0 0;font-size:12px;color:var(--cream3);border-top:1px solid rgba(242,230,201,.14);padding-top:10px}
.c-pair{font-size:18px;line-height:1.35;margin:0 0 10px}
/* list */
.list{max-width:900px;margin:10px auto 0;padding:0 22px}
.list[hidden]{display:none}
.list h2{font:800 24px/1.1 Archivo;font-stretch:87.5%;margin:34px 0 4px;color:var(--cream);border-bottom:1px solid var(--cream3);padding-bottom:8px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.list h2 small{font:600 11px Archivo;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.list h3{font:800 18px/1.2 Archivo;font-stretch:95%;margin:18px 0 6px;color:var(--cream)}
.list .row{padding:0 0 10px;border-bottom:1px dotted rgba(242,230,201,.16)}
.list dl{margin:0;display:grid;grid-template-columns:8.5em 1fr;gap:3px 12px;font-size:15px}
.list dt{color:var(--cream2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.list dd{margin:0}
.list .lnote{margin:24px 0 0;color:var(--gold);font-weight:700}
.foot{max-width:900px;margin:0 auto;padding:22px 22px 120px;text-align:center;font-size:13px;color:var(--cream3)}
.foot .illus{color:var(--cream2)}.foot .illus b{color:var(--gold)}
@media (min-width:1000px){
 .stage{grid-template-columns:minmax(0,1fr) 380px;gap:34px;align-items:start;padding:0 30px}
 .side{display:block;position:sticky;top:0;max-height:100vh;overflow:auto;padding:30px 0 20px}
 .side .top{text-align:left;padding:0 0 18px}
 .kicker{justify-content:flex-start}
 h1{font-size:44px;margin-left:0}.sub{margin:0}.totals{margin:12px 0 0}.controls{justify-content:flex-start}
 .sky{padding-top:8px}
 .card{position:relative;max-height:none;box-shadow:none;margin:0}
 #orrery{max-width:min(100%,calc(100vh - 26px))}
 .side .kicker{letter-spacing:.15em;font-size:10.5px}
 .card.empty .close{display:none}
 .foot{padding-bottom:40px}
 .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* poster mode */
.poster .top .controls,.poster .hint,.poster .foot .priv,.poster .card{display:none!important}
.poster .stage{grid-template-columns:1fr!important}
.poster #orrery{max-width:1000px}
.poster .foot{padding-bottom:20px}
@media (max-width:520px){.k1{display:none}.kicker{letter-spacing:.2em}.totals{letter-spacing:.1em}.sub{font-size:13.5px}.foot{padding-bottom:48vh}}
.poster .side{display:contents}
.sky[hidden]{display:none!important}
.listmode .card{display:none!important}
@media (min-width:1000px){.listmode .stage{grid-template-columns:1fr;max-width:900px}.listmode .side{position:static;max-height:none;overflow:visible;padding-bottom:0}}
@media (max-width:999px){
 .card{max-height:42vh;padding:14px 16px 12px}
 .c-name{font-size:21px;margin-bottom:8px}.c-stats{margin-bottom:8px}.c-stats b{font-size:23px}.c-dots{margin-bottom:10px}.c-dots i{width:6px;height:6px}
 .chips{margin-bottom:10px}.chips li{font-size:12.5px;padding:2px 9px}.card dl{font-size:13.5px;gap:4px 12px}
 .sub{display:none}.top .totals{margin-top:6px}
}
@media (max-width:999px) and (min-width:521px){.sub{display:block}}
.poster .link{stroke:#FFC629;stroke-opacity:.55;stroke-dasharray:none;stroke-width:.9}
.poster .comet .head{fill:#FFC629}.poster .comet .tail{stroke:#FFC629}
.poster .top{padding-top:46px}.poster h1{font-size:64px;max-width:none}.poster .sub{display:block;font-size:20px;max-width:none}.poster .totals{font-size:15px}.poster .totals small{font-size:12px}
.poster #orrery{max-width:1000px;margin-top:6px}.poster .foot{font-size:16px;padding-top:6px}
.poster .stage{display:flex!important;flex-direction:column}.poster .side{order:-1}.poster .stage,.poster .side{max-width:none;padding:0;position:static;overflow:visible;max-height:none}.poster .side .top{text-align:center}.poster .kicker{justify-content:center;font-size:14px}.poster .k1{display:inline}
.poster .planet .plabel{opacity:0!important}.poster .rname{fill-opacity:.8}
.poster .sky{width:100%;padding-top:0}.poster #orrery{width:100%;max-width:1010px!important}

/* 10 Nov 08:10 (John, 08:18): the moving dots are gold and pulse gently, staggered, to suggest connection */
.planet .moon{fill:#FFC629;fill-opacity:1;animation:bbpulse 3.4s ease-in-out infinite}.planet:nth-child(4n+1) .moon{animation-delay:-.85s}.planet:nth-child(4n+2) .moon{animation-delay:-1.7s}.planet:nth-child(4n+3) .moon{animation-delay:-2.55s}.planet .moon:nth-of-type(3n){animation-duration:4.2s}.comet .head{animation:bbpulse 2.8s ease-in-out infinite}@keyframes bbpulse{0%,100%{opacity:.45}50%{opacity:1}}.planet.dim .moon{animation:none}@media (prefers-reduced-motion:reduce){.planet .moon,.comet .head{animation:none;opacity:.9}}
.planet .body{stroke:#FFC629;stroke-opacity:.85}.planet.dim .moon{animation:none}