/* Orbit v2. Tokens: brand colours; durations/easings from transitions.dev polish tokens. */
:root{--ink:#0F1A1F;--teal:#2EC4B6;--teal-2:#4FD6C9;--paper:#F5F7F7;--muted:#B4C7CC;--surface:#16242A;--surface-2:#1C2E35;
 --wrap:min(100% - 2*var(--gut),1240px);--ease-smooth-out:cubic-bezier(.22,1,.36,1);--d-quick:150ms;--d-fast:250ms}
html{color-scheme:dark}
body{background:var(--ink);color:var(--paper);display:flex;flex-direction:column}
:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:12px}
.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* bar: wordmark + three plain links */
.top{width:var(--wrap);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:calc(12px + env(safe-area-inset-top))}
.home{display:grid;place-items:center;width:48px;height:48px}.home img{width:40px;height:40px}
.nav{display:flex;gap:4px}
.nav-a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:12px;font-weight:700;color:var(--paper);border-radius:999px;transition:background-color var(--d-fast) ease}

/* desktop: text and the chosen account on the right (RTL start), the ring on the left */
.layout{flex:1;width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
 grid-template-areas:"intro orbit" "panel orbit" "shelf orbit";align-content:center;column-gap:clamp(24px,5vw,72px);row-gap:clamp(20px,2.4vw,32px);padding-block:clamp(16px,3vw,40px)}
.intro{grid-area:intro;align-self:end}.orbit{grid-area:orbit;align-self:center}.panel{grid-area:panel}.shelf{grid-area:shelf;min-width:0}
.intro h1{margin:0;font-size:clamp(2.75rem,5.6vw,5.5rem);font-weight:800;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.desc{margin:16px 0 0;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.6;max-width:32ch;text-wrap:pretty}

/* the chosen account */
.panel{outline:none}
.p-name{margin:0;font-size:clamp(2rem,3.2vw,2.75rem);font-weight:800;line-height:1.1;color:var(--teal)}
.p-handle{margin:4px 0 0;color:var(--muted);font-size:1rem;overflow-wrap:anywhere;unicode-bidi:isolate}
.p-line{margin:10px 0 0;font-size:1.125rem;line-height:1.6}
.p-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:18px;padding:0 24px;border-radius:999px;background:var(--teal);color:var(--ink);font-weight:800;transition:transform 160ms var(--ease-out),background-color var(--d-fast) ease}
.p-cta .ico{width:20px;height:20px}
.p-cta:active{transform:scale(.97)}

/* more from this account: real covers, square corners, one treatment */
.s-cap{margin:0 0 12px;font-size:1.125rem;font-weight:800}
.s-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:520px}
.pc{display:flex;flex-direction:column;gap:8px}
.pc-img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--surface);transition:transform var(--d-fast) var(--ease-smooth-out)}
span.pc-img{display:grid;place-items:center;color:var(--teal)}span.pc-img .ring{position:static;width:50%;height:auto}
.pc-t{font-size:.875rem;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pc:active .pc-img{transform:scale(.97)}

/* stage: square, the real logo path (viewBox 1024); the picture sits inside the ring */
.orbit{justify-self:center;width:min(100%,720px,calc(100svh - 96px))}
.stage{position:relative;aspect-ratio:1;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;container-type:inline-size}
.stage.dragging{cursor:grabbing}
.ring{position:absolute;inset:0;width:100%;height:100%;color:var(--teal);pointer-events:none}
.view{position:absolute;inset:19.83%;border-radius:11.8cqi;overflow:hidden;background:var(--surface)}
.v-link{display:block;width:100%;height:100%}
.v-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
span.v-img{display:grid;place-items:center;color:var(--teal)}span.v-img .ring{position:static;width:40%;height:auto}

/* satellites: placed on the path by JS (transform only); static fallback without JS */
.sats li{position:absolute;left:0;top:0}
.sat{position:absolute;left:0;top:0;display:block;width:112px;margin:-32px 0 0 -56px;-webkit-user-drag:none;will-change:transform;--f:1}
.sat-in{display:flex;flex-direction:column;align-items:center;gap:6px}
html:not(.js) .sats li:nth-child(1) .sat{transform:translate(50cqi,16.8cqi)}
html:not(.js) .sats li:nth-child(2) .sat{transform:translate(83.2cqi,66cqi)}
html:not(.js) .sats li:nth-child(3) .sat{transform:translate(16.8cqi,66cqi)}
.sat-dot{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface);color:var(--teal);border:2px solid var(--teal);
 box-sizing:border-box;outline:7px solid var(--ink);transform:scale(calc(.86 + .24*var(--f)));transition:background-color var(--d-fast) ease,color var(--d-fast) ease}
.sat-dot .ico{width:28px;height:28px}
.sat-name{font-weight:700;font-size:.875rem;padding:2px 8px;background:var(--ink);color:var(--paper)}
.sat.on .sat-dot{background:var(--teal);color:var(--ink)}
.sat.on .sat-name{opacity:0}
.sat:active .sat-dot{transform:scale(calc((.86 + .24*var(--f))*.94))}
.sat:focus-visible{outline:3px solid var(--paper);outline-offset:2px;border-radius:16px}

.foot{width:var(--wrap);margin-inline:auto;padding-block:clamp(48px,8vw,120px) calc(28px + env(safe-area-inset-bottom))}
.foot-name{margin:0;font-size:clamp(3rem,13vw,12rem);font-weight:800;line-height:.95;color:var(--teal);white-space:nowrap;overflow:hidden}
.foot-line{margin:14px 0 0;color:var(--muted)}

/* narrow: its own composition: name, ring with picture, the account, then more */
@media (max-width:900px){
 .layout{grid-template-columns:1fr;grid-template-areas:"intro" "orbit" "panel" "shelf";row-gap:28px;align-content:start}
 .intro h1{white-space:normal}
 .orbit{width:min(100%,460px)}
 .s-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;max-width:none}
 .pc-img{aspect-ratio:3/4;object-position:50% 6%}
 .sat-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sat{width:96px;margin:-28px 0 0 -48px}
 .sat-dot{width:56px;height:56px;outline-width:6px}
 .nav-a{padding-inline:10px}
}
@media (max-width:360px){.nav-a{padding-inline:6px;font-size:.9375rem}}

@media (hover:hover) and (pointer:fine){
 .stage{cursor:grab}
 .sat:hover .sat-dot{background:var(--surface-2)}
 .sat.on:hover .sat-dot{background:var(--teal-2)}
 .p-cta:hover{background:var(--teal-2)}
 .nav-a:hover{background:var(--surface)}
 .pc:hover .pc-img{transform:scale(1.03)}
 .v-link:hover .v-img{transform:scale(1.02)}
 .v-img{transition:transform 400ms var(--ease-smooth-out)}
}
@media (prefers-reduced-motion:reduce){.pc-img,.v-img,.p-cta{transition:none!important}}