:root{
  --bg:#E8EEE6; --ink:#1F2A24; --muted:#5D6B60; --line:#CBD6C8; --card:#F4F7F2; --accent:#A0345E; --accent-ink:#fff;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#181C19;--ink:#E6EDE4;--muted:#9AA89D;--line:#2E362F;--card:#202622;--accent:#E88AAE;--accent-ink:#181C19}
}
:root[data-theme="dark"]{--bg:#181C19;--ink:#E6EDE4;--muted:#9AA89D;--line:#2E362F;--card:#202622;--accent:#E88AAE;--accent-ink:#181C19}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.5 var(--body);-webkit-font-smoothing:antialiased}
main{position:relative;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:grid;place-items:center;padding:0 1.25rem;text-align:center}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}

.mark{font:800 calc(min(88vw,30rem,62svh)*.26)/.85 var(--display);letter-spacing:-.05em;margin:0;display:inline-flex;align-items:flex-end;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cursor{width:.09em;height:.62em;background:var(--accent);margin-left:.06em;margin-bottom:.04em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{font:500 1.25rem/1.35 var(--display);color:var(--muted);margin:0;position:absolute;left:0;right:0;bottom:3.25rem}

.orbit{--size:min(92vw,40rem,68svh);--btn:clamp(3.5rem,15vw,4.5rem);position:relative;width:var(--size);height:var(--size)}
.links{list-style:none;margin:0;padding:0;position:absolute;inset:0;animation:spin 40s linear infinite}
.links li{position:absolute;top:50%;left:50%;width:var(--btn);height:var(--btn);margin:calc(var(--btn)/-2) 0 0 calc(var(--btn)/-2);transform:rotate(calc(-90deg + var(--i)*72deg)) translateX(calc(var(--size)/2 - var(--btn)/2)) rotate(calc(90deg - var(--i)*72deg))}
.links a{display:grid;place-items:center;width:100%;height:100%;background:var(--card);border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:border-color .15s;animation:spin 40s linear infinite reverse}
.links a:hover{border-color:var(--accent)}
.links svg{width:1.6rem;height:1.6rem;fill:currentColor}
.orbit:hover .links,.orbit:hover .links a{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}

footer{position:absolute;left:0;right:0;bottom:1.25rem;color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.cursor,.links,.links a{animation:none}.links a{transition:none}}

.now{position:absolute;top:2.25rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;width:max-content;max-width:min(92vw,26rem);padding:.6rem 1.5rem .6rem .6rem;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;text-align:left;transition:border-color .15s}
.now[hidden]{display:none}
.now:hover{border-color:var(--accent)}
.now img{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--line);object-fit:cover;flex:none}
.now-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.now-text strong,.now-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-text strong{font-weight:500;font-size:1.05rem}
.now-text span{color:var(--muted);font-size:.9rem}
#now-label{font-size:.8rem}
.eq{display:flex;align-items:flex-end;gap:3px;height:1.1rem;flex:none}
.eq[hidden]{display:none}
.eq i{width:3px;height:100%;background:currentColor;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}
.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none}.now{transition:none}}