/* Orbits: yours as most of the screen; the team's beside it, smaller, in the same material and the same encoding,
   so a glance compares them. Who is working now: a lit sun, bodies close in and crawling. Who went quiet: an ember,
   bodies drifted to the outer rings and dim. Amber is only what waits on you. */
html,body{height:100%}
body{position:relative;overflow:hidden;background:radial-gradient(60vmin 60vmin at var(--cx,40%) var(--cy,45%),rgba(120,170,230,.045),transparent 70%),#020308}
.field{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:minmax(0,1fr) var(--side,300px)}
.mine{display:flex;flex-direction:column;min-height:0;padding-top:44px}
.stage{position:relative;display:block;flex:1;min-height:0}
.stage canvas,.stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage svg{overflow:visible;pointer-events:none}
.ko{paint-order:stroke;stroke:#020308;stroke-width:5px;stroke-linejoin:round}
.gl{font-family:var(--mono);letter-spacing:.16em;fill:rgba(var(--chart),.62)}
.nm{font-family:var(--mono);fill:rgba(var(--chart),.92);paint-order:stroke;stroke:#020308;stroke-width:4px;stroke-linejoin:round}
.nm.old{fill:rgba(var(--chart),.5)}
.team .none{font-size:11px;color:rgba(206,222,240,.42);letter-spacing:.04em;line-height:1.5;padding:8px 0}
.np{flex:none;padding:6px var(--gut) 26px}
.np h1{font-size:clamp(34px,3.6vw,52px)}
.np .upd{display:flex;justify-content:center;margin-top:14px;min-height:16px}
/* the team: one column of smaller orbits, most recent first */
.team{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--tg,18px);padding:44px var(--gut) 24px 0}
.team::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background-image:linear-gradient(rgba(206,222,240,.16) 1px,transparent 1px);background-size:1px 3px}
.mate{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 8px 10px;margin-left:var(--gut)}
.mate::before{content:'';position:absolute;inset:0;pointer-events:none;--c:rgba(206,222,240,0);transition:--c .2s;
  background:linear-gradient(var(--c),var(--c)) 0 0/8px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 8px,linear-gradient(var(--c),var(--c)) 100% 0/8px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 8px,
    linear-gradient(var(--c),var(--c)) 0 100%/8px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 8px,linear-gradient(var(--c),var(--c)) 100% 100%/8px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 8px;background-repeat:no-repeat}
.mate:hover::before,.mate:focus-visible::before{--c:rgba(206,222,240,.6)}
.mate canvas{display:block}
.mate .lab{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-top:6px;white-space:nowrap}
.mate .h{font:700 17px/1 var(--dot);letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--chart),var(--a,.9))}
.mate .f{font-size:11px;color:rgba(var(--chart),calc(var(--a,.9) * .6));font-variant-numeric:tabular-nums}
@media (max-width:720px){
  html,body{height:auto}
  body{overflow:auto}
  .field{display:block;height:auto}
  .mine{padding-top:48px}
  .stage{flex:none;aspect-ratio:1/1}
  .np{padding:2px var(--gut) 18px}
  .np h1{font-size:34px}
  .team{flex-direction:row;justify-content:space-between;gap:0;padding:4px calc(var(--gut) - 8px) calc(env(safe-area-inset-bottom,0px) + 24px)}
  .team::before{left:var(--gut);right:var(--gut);top:-4px;bottom:auto;width:auto;height:1px;background-image:linear-gradient(90deg,rgba(206,222,240,.16) 1px,transparent 1px);background-size:3px 1px}
  .mate{margin:0;padding:8px 4px 8px;flex:1;min-width:0}
  .mate .lab{flex-direction:column;align-items:center;gap:6px}
  .mate .h{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.mate .lab .fixture{font-size:8.5px;padding:0 4px}
@media (max-width:720px){.mate .lab .fixture{font-size:8px}}