:root { color-scheme: dark; --night:#080f18; --ink:#d7e8f2; --muted:#9cabbc; --line:#253341; --accent:#b3d6df; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--night); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100svh; background:radial-gradient(ellipse at 50% 35%, #13233370, transparent 57%), var(--night); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible, button:focus-visible { outline:2px solid #ffda45; outline-offset:7px; border-radius:4px; }
[hidden] { display:none !important; }
.animation-pending #contour, .animation-pending #details, .animation-pending .head-wash,
.animation-pending .signature, .animation-pending .destination { visibility:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.masthead { display:flex; align-items:center; justify-content:space-between; padding:28px 4.2vw; }
.wordmark { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.23em; min-height:44px; }
.brand-mark { color:var(--accent); font:36px Georgia,serif; }
.header-note, .coordinates, .footer { font-size:9px; letter-spacing:.17em; color:var(--muted); }
main { max-width:1500px; margin:auto; }
.composition { display:flex; flex-direction:column; align-items:center; }
.stage { position:relative; width:min(100%, 930px); aspect-ratio:1000/610; }
.stage::before { content:""; position:absolute; width:38%; aspect-ratio:1; border:1px solid #9cabbc08; border-radius:50%; left:31%; top:12%; pointer-events:none; }
.coordinates { position:absolute; top:12px; left:8%; right:8%; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.18em; }
#artwork, #epicycles { position:absolute; inset:0; width:100%; height:100%; }
#epicycles { pointer-events:none; }
.ink { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#fourier-trace { filter:drop-shadow(0 0 3px #8fbac336); }
.details { fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; }
.details ellipse { fill:var(--ink); stroke:none; }
.arm-detail { opacity:.45; stroke-width:1.2; }
.destination { --badge-size:82px; position:absolute; left:var(--anchor-x); top:var(--anchor-y); transform:translate(calc(-50% + var(--badge-size) * .353553), calc(var(--badge-size) * -.853553)); display:flex; flex-direction:column; align-items:center; width:150px; z-index:2; text-align:center; }
.medallion { display:grid; place-items:center; width:var(--badge-size); height:var(--badge-size); border-radius:50%; border:1px solid #ffda455c; background:#0c1420; box-shadow:0 0 30px #ffda450a; transition:border-color .2s, box-shadow .2s; }
.medallion img { object-fit:contain; width:40px; height:56px; }
.destination:hover .medallion, .destination:focus-visible .medallion { border-color:#ffda45; box-shadow:0 0 30px #ffda4518; }
.destination-label { font-size:11px; letter-spacing:.14em; margin-top:12px; font-weight:600; }
.destination-label span { color:#ffda45; margin-left:5px; }
.destination-subtitle { font-size:7px; letter-spacing:.12em; color:var(--muted); margin-top:6px; }
.identity { text-align:center; margin-top:-44px; z-index:1; pointer-events:none; }
.signature { display:block; width:250px; height:92px; color:#e4eff5; margin:0 auto 9px; }
.signature .flourish { stroke-width:1.3; opacity:.6; }
.author { margin:0; font-size:12px; letter-spacing:.24em; }
.author span { font-weight:600; }
.profile-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px; margin-top:4px; color:var(--muted); font-size:11px; letter-spacing:.04em; pointer-events:auto; }
.profile-link:hover { color:var(--ink); }
.profile-link span { color:var(--accent); }
.identity-note { color:var(--muted); font-family:Georgia,serif; font-style:italic; font-size:14px; margin:13px 0 0; }
.lower-deck { margin:34px 4.2vw 28px; display:grid; grid-template-columns:1fr 240px 1fr; align-items:end; gap:36px; }
.equations { border-left:1px solid #526574; padding-left:18px; width:max-content; max-width:100%; color:var(--muted); }
.equations h2 { font-size:9px; text-transform:uppercase; font-weight:500; letter-spacing:.14em; margin:0 0 10px; }
.equations h2 span { font:15px Georgia,serif; margin-right:7px; }
.formula { font-size:16px; line-height:1.8; min-height:36px; }
math { font-family:"STIX Two Math", "Cambria Math", math; }
.equations p { font-size:10px; line-height:1.65; margin:8px 0 0; }
.playback { align-self:center; width:220px; justify-self:center; }
.phase-label { margin:0 0 14px; display:flex; justify-content:center; align-items:center; gap:8px; font-size:10px; letter-spacing:.045em; color:var(--muted); }
.status-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); }
.progress-track { height:1px; background:var(--line); overflow:hidden; }
#progress { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.buttons { display:flex; justify-content:center; gap:16px; margin-top:5px; }
button { cursor:pointer; min-height:44px; padding:8px; color:var(--muted); background:none; border:0; font-size:11px; }
button:hover { color:var(--ink); }
button:disabled { opacity:.5; cursor:default; }
button span[aria-hidden] { display:inline-block; font-size:16px; width:20px; vertical-align:-1px; }
.endnote { grid-column:3; justify-self:end; text-align:right; color:var(--muted); font:16px/1.5 Georgia,serif; margin:0 0 3px; }
.endnote em { color:var(--ink); }
.footer { border-top:1px solid #9cabbc1c; display:flex; justify-content:space-between; margin:0 4.2vw; padding:20px 0; font-size:8px; line-height:1.6; }
@media (min-width:1000px) and (min-height:850px) { .stage { width:min(1020px, calc(100vh - 20px)); } }
@media (max-width:760px) {
  .masthead { padding:18px 24px; }
  .header-note { font-size:7px; max-width:115px; text-align:right; line-height:1.8; }
  .wordmark { font-size:10px; gap:8px; }
  .stage { margin-top:36px; }
  .coordinates { top:-16px; font-size:6px; }
  .destination { --badge-size:54px; }
  .medallion img { width:26px; height:37px; }
  .destination { width:94px; }
  .destination-label { font-size:9px; margin-top:8px; letter-spacing:.05em; }
  .destination-subtitle { display:none; }
  .identity { margin-top:-12px; }
  .signature { width:220px; height:81px; }
  .lower-deck { grid-template-columns:1fr; gap:28px; margin:34px 28px; }
  .playback { grid-row:1; }
  .equations { justify-self:center; }
  .endnote { display:none; }
  .footer { margin:0 24px; gap:20px; font-size:7px; }
  .footer span:last-child { text-align:right; max-width:125px; }
}
@media (max-width:380px) { .destination { width:74px; --badge-size:46px; } .medallion img { width:23px; height:32px; } .coordinates span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }