/* The planet pages (/beta/<name>/): the shared look of /assets/planet-page.js's pages. The contract is in that file's
   header. Without JavaScript (no html.pp-js) the page is the hero and its sections stacked, like any page; with it,
   one screen holds the planet and its satellites, and a section opens in a panel. A page's own stylesheet sets its
   colours (--pp-rgb, --pp-deep, --pp-line) and anything else its own. */
/* A navigation between two pages that both opt in (the planet pages, and the front page, whose zoom hands off to
   them) cross-fades in browsers with cross-document view transitions; the others simply navigate. */
@view-transition{navigation:auto}
.pp{position:relative;isolation:isolate;display:block;min-height:0;padding-top:0;--pp-col:min(468px,38%);--pp-left:max(var(--gutter),calc((100% - 1200px) / 2 + var(--gutter)))}
.pp-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pp-hero{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:calc(var(--chrome-h,60px) + 88px) var(--gutter) 40px;box-sizing:border-box}
.pp-kicker{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.pp-glyph{flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff,rgb(var(--pp-rgb,207,220,239)) 45%,rgb(var(--pp-deep,40,48,62)));box-shadow:0 0 0 4px rgba(var(--pp-rgb,207,220,239),.12)}
.pp-hero h1{font-size:clamp(38px,4.6vw,62px)}
.pp-hero .lede{max-width:34rem;font-size:17px}
.pp-hero .btns{margin-top:28px}

/* ---- the sections, stacked (the page without JavaScript, and the panels' content in every mode) */
.pp-sats{position:relative;z-index:2;list-style:none;max-width:1200px;margin:0 auto;padding:0 var(--gutter) 24px;box-sizing:border-box}
.pp-sat{padding-top:72px;scroll-margin-top:calc(var(--chrome-h,60px) + 16px)}
.pp-name{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim,#8fa3bf)}
.pp-head{margin-top:12px;font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;color:var(--t0);max-width:24ch;text-wrap:balance}
.pp-lead{margin-top:14px;font-size:17px;color:var(--t2);max-width:42rem;text-wrap:pretty}
.pp-panel h4{margin:26px 0 0;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--t0)}
.pp-panel > p:not(.pp-lead){margin-top:14px;color:var(--t2);max-width:42rem}
.pp-panel ul,.pp-panel ol{list-style:none;margin:14px 0 0;padding:0}
.pp-panel{max-width:820px}
.pp-list li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--ln1);color:var(--t2);font-size:15px}
.pp-list li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;border:1px solid rgba(var(--pp-rgb,207,220,239),.7)}
.pp-panel .pp-points{display:grid;gap:12px;margin-top:22px}
.pp-points li,.pp-rings li{border:1px solid var(--ln2);border-radius:10px;background:rgba(15,21,30,.6);padding:16px 18px}
.pp-panel .pp-points h4,.pp-panel .pp-rings h4{margin:0 0 6px}
.pp-points p,.pp-rings p{color:var(--t2);font-size:15px}
.pp-panel .pp-rings{display:grid;gap:10px;margin-top:22px}
.pp-rings .pp-tag{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--moon-dim,#8fa3bf);margin-bottom:10px}
.pp-rings .pp-tag b{color:rgb(var(--pp-rgb,207,220,239));font-weight:500;margin-right:6px}
.pp-panel .pp-steps{counter-reset:step;display:grid;gap:0;margin-top:18px}
.pp-steps li{counter-increment:step;position:relative;padding:10px 0 10px 40px;border-top:1px solid var(--ln1);color:var(--t2);font-size:15px}
.pp-steps li::before{content:counter(step);position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(var(--pp-rgb,207,220,239),.45);font:500 11px/24px var(--mono);text-align:center;color:var(--t1)}
.pp-steps b,.pp-chain b{display:block;color:var(--t0);font-weight:500}
.pp-panel .pp-chain{display:grid;gap:6px}
.pp-chain li{padding:10px 14px;border-left:2px solid rgba(var(--pp-line,127,156,196),.55);background:rgba(15,21,30,.55);border-radius:0 8px 8px 0;color:var(--t2);font-size:14.5px}
.pp-defs{margin:18px 0 0;display:grid;gap:0}
.pp-defs > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--ln1)}
.pp-defs dt{font:500 11.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--t3);padding-top:2px}
.pp-defs dd{margin:0;color:var(--val);font-size:15px}
@media (max-width:560px){.pp-defs > div{grid-template-columns:1fr;gap:4px}}

/* ---- the system (html.pp-js): one screen, the planet and its satellites; the hero on the left, or on top */
.pp-view{position:absolute;inset:0;z-index:1;pointer-events:none}
.pp-view canvas{display:block;width:100%;height:100%}
.pp-js .pp{height:100vh;height:100svh;min-height:620px;max-height:1100px;overflow:hidden}
.pp-js .pp-hero{position:absolute;top:0;bottom:0;left:var(--pp-left);width:var(--pp-col);display:flex;flex-direction:column;justify-content:center;padding:var(--chrome-h,60px) 0 48px;margin:0;transition:opacity .28s ease,visibility .28s}
.pp-js .pp.is-open .pp-hero{opacity:0;visibility:hidden}
.pp-js .pp-sats{position:static;padding:0;margin:0;max-width:none}
.pp-js:not(.pp-ready) .pp-sats{visibility:hidden} /* until the engine has made the panels (it drops pp-js if it cannot) */
.pp-js .pp-sat{padding:0}
.pp-js .pp-name{font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.pp-moon{position:absolute;left:0;top:0;z-index:10;display:flex;align-items:center;margin:calc(var(--hit,44px) / -2) 0 0 calc(var(--hit,44px) / -2);padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-hit{flex:none;width:var(--hit,44px);height:var(--hit,44px);border-radius:50%}
.pp-label{display:inline-flex;align-items:center;gap:8px;margin-left:-8px;padding:6px 11px 6px 9px;font:500 11px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--t1);background:rgba(7,10,15,.8);border:1px solid rgba(207,220,239,.16);border-radius:999px;transition:opacity .3s ease,translate .2s ease,color .2s,border-color .2s,background-color .2s}
.pp-moon .pp-label{translate:0 var(--dy,0px)}
.pp-label::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--pp-rgb,207,220,239))}
.pp-sat[data-kind="ring"] .pp-label::before{width:12px;height:6px;background:none;border:1.5px solid rgb(var(--pp-line,127,156,196));box-sizing:border-box}
.pp-sat[data-kind="meteor"] .pp-label::before{width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:rgb(var(--pp-deep-hi,160,172,190))}
.pp-moon.to-left{flex-direction:row-reverse;translate:calc(-100% + var(--hit,44px)) 0}
.pp-moon.to-left .pp-label{margin:0 -8px 0 0}
.pp-moon.is-far .pp-label{color:var(--t2);border-color:transparent}
.pp-moon.is-hid:not(:focus-visible):not(.is-open) .pp-label{opacity:0}
.pp-moon.is-crowd:not(:focus-visible):not(.is-on):not(.is-open) .pp-label{opacity:0;transition-duration:.12s}
.pp-moon.is-hid:not(:focus-visible):not(.is-open){pointer-events:none}
.pp-moon:hover .pp-label,.pp-moon.is-on .pp-label,.pp-moon.is-open .pp-label{color:var(--t0);border-color:rgba(var(--pp-rgb,207,220,239),.6);background:rgba(10,14,20,.92)}
.pp-moon:focus-visible{outline:none}
.pp-moon:focus-visible .pp-hit{outline:2px solid var(--moon,#cfdcef);outline-offset:-6px}
.pp-moon:focus-visible .pp-label{outline:2px solid var(--moon,#cfdcef);outline-offset:2px}

/* the open section: a card in the hero's place */
.pp-js .pp-panel{position:absolute;z-index:40;left:var(--pp-left);top:calc(var(--chrome-h,60px) + 28px);width:var(--pp-col);max-height:calc(100% - var(--chrome-h,60px) - 100px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:26px 28px 30px;background:rgba(10,14,20,.94);border:1px solid var(--ln3);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:thin;scrollbar-color:var(--ln3) transparent}
.pp-js .pp-panel:not([hidden]){animation:pp-in .32s ease both}
@keyframes pp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pp-js .pp-panel:focus{outline:none}
.pp-js .pp-panel:focus-visible{outline:2px solid var(--moon,#cfdcef);outline-offset:2px}
.pp-js .pp-head{margin-top:0;font-size:clamp(24px,2.3vw,30px);padding-right:64px}
.pp-js .pp-lead{font-size:16px}
.pp-close{float:right;position:sticky;top:0;z-index:1;margin:-6px -8px 0 0;height:32px;padding:0 12px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t1);background:rgba(10,14,20,.96);border:1px solid var(--ln3);border-radius:999px;cursor:pointer}
.pp-close:hover{border-color:rgba(var(--pp-rgb,207,220,239),.6);color:var(--t0)}
.pp-scrim{display:none}
.pp-hold{position:absolute;z-index:45;right:var(--pp-left);bottom:22px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(226,232,242,.86);background:rgba(10,13,18,.72);border:1px solid rgba(207,220,239,.28);border-radius:6px;cursor:pointer}
.pp-hold[hidden]{display:none}
/* the same pause and play glyphs as the front page's control */
.pp-hold{gap:9px}
.pp-hold::before{content:"";flex:none;width:8px;height:9px;background:linear-gradient(90deg,currentColor 3px,transparent 3px,transparent 5px,currentColor 5px)}
.pp-paused .pp-hold::before{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (prefers-reduced-motion:reduce){.pp-js .pp-panel:not([hidden]){animation:none}.pp-js .pp-hero,.pp-label{transition:none}}

/* a portrait tablet (720 to 959 px): the hero on top, the system under it, the card over the hero's place */
@media (min-width:720px) and (max-width:959px){
  .pp{--pp-col:min(520px,calc(100% - 2 * var(--gutter)))}
  .pp-js .pp{min-height:860px}
  .pp-js .pp-hero{bottom:auto;width:auto;right:var(--gutter);justify-content:flex-start;padding-top:calc(var(--chrome-h,60px) + 40px)}
  .pp-js .pp-hero h1{max-width:18ch}
}

/* a phone: the planet small at the top, the hero, then the satellites as a row of chips; a section opens in a sheet */
@media (max-width:719px){
  .pp{--pp-top:clamp(250px,74vw,320px)}
  .pp-js .pp{height:auto;min-height:0;max-height:none;overflow:visible;padding-bottom:36px}
  .pp-view{bottom:auto;height:var(--pp-top)}
  .pp-js .pp-hero{position:relative;left:auto;width:auto;display:block;padding:calc(var(--pp-top) + 4px) var(--gutter) 0}
  .pp-js .pp-sats{display:flex;flex-wrap:wrap;gap:8px;padding:24px var(--gutter) 0}
  .pp-moon,.pp-moon .pp-label{position:static;margin:0;transform:none!important;translate:none!important}
  .pp-hit{display:none}
  .pp-label{margin:0;min-height:44px;box-sizing:border-box;padding:0 14px 0 12px;font-size:11.5px;background:rgba(12,17,24,.9);border-color:var(--ln3)}
  .pp-js .pp-panel{position:fixed;z-index:100;left:0;right:0;top:auto;bottom:0;width:auto;max-height:84vh;max-height:84dvh;padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.55)}
  .pp-js .pp-panel:not([hidden]){animation-name:pp-up}
  @keyframes pp-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .pp-js .pp-head{font-size:26px}
  .pp-sheet .pp-scrim{display:block;position:fixed;inset:0;z-index:90;background:rgba(4,6,10,.62)}
  .pp-hold{top:calc(var(--pp-top) - 34px);bottom:auto;right:var(--gutter);min-height:28px;padding:0 10px;font-size:10.5px}
  .pp-close{margin-right:0}
}