:root {
  --bg: #000;
  --fg: #ece4c8;
  --dim: rgba(236, 228, 200, 0.45);
  /* controls */
  --btn-fg: #d0d0d0; /* soft gray: AA over black and over the darkened glass on the shirt */
  --btn-fg-hover: #ececec;
}
* { box-sizing: border-box; }
/* there for screen readers and search, not shown */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  opacity: 0; /* revealed once the shirt has loaded */
  transition: opacity 0.35s ease;
}
#stage.in { opacity: 1; }
#stage.dragging { cursor: grabbing; }

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.22s ease-in;
  pointer-events: none;
}
#loading.done { opacity: 0; }
.name-fill { width: min(180px, 44vw); height: auto; animation: loader-in 0.4s ease-out both; }
@keyframes loader-in { from { opacity: 0; } }
.name-fill .ink { fill: var(--loader-ink, #6d7160); } /* the shirt's sage as it renders */
.name-fill .ghost { fill: var(--loader-ink, #6d7160); opacity: 0.32; }

/* ---------- bottom corners ---------- */
.corner {
  position: fixed;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.4s ease 0.35s; /* after the shirt lands */
}
body.ready .corner { opacity: 1; }
/* a pinch that starts on a button shouldn't zoom the page (taps still work) */
.corner { touch-action: none; }
.corner.left { left: 20px; }
.corner.right { right: 20px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  color: var(--btn-fg);
  font: inherit;
  text-decoration: none;
  /* the glass itself (refraction, frost, rim, top lip) is drawn in WebGL
     behind each button, see syncGlass() in main.js; the element just carries
     the label */
  background: transparent;
  border: 0;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: color 0.22s ease, transform 0.22s ease;
}
.btn:active { transform: scale(0.97); }
.btn:hover { color: var(--btn-fg-hover); }
.btn:focus-visible { outline: 2px solid var(--btn-fg); outline-offset: 3px; }
.pill { padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.round { width: 36px; border-radius: 50%; }
.btn svg { width: 13px; height: 13px; }
.btn svg.solid { width: 14px; height: 14px; fill: currentColor; }

/* tooltip: a light pill above the button with a little pointer */
.tip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  /* swings round the flip button's centre (30px below the bubble):
     in counter-clockwise, out clockwise, mirroring the links on the right */
  transform: translateX(-50%) rotate(50deg);
  transform-origin: 50% calc(100% + 30px);
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--tip-bg, #f3f2ec);
  color: var(--tip-fg, #141414);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* leaving: lingers 0.25s, then winds back and fades */
  transition: opacity 0.18s ease-in 0.31s, transform 0.3s cubic-bezier(0.5, 0, 0.75, 0) 0.25s;
}
.tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--tip-bg, #f3f2ec);
  border-bottom: 0;
}
.tip-wrap:hover .tooltip,
.tip-wrap:has(:focus-visible) .tooltip {
  opacity: 1;
  transform: translateX(-50%) rotate(0deg);
  /* arriving: a short pause first, so passing over the button doesn't flash it */
  transition: opacity 0.2s ease 0.35s, transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0.35s;
}
.tip-wrap.tip-hidden .tooltip { opacity: 0; transition: opacity 0.12s ease; } /* Escape: gone at once */

/* ---------- links orbiting the ? button ---------- */
/* --a: how far each item has turned around the button */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.orbit-ring {
  position: absolute;
  right: calc(18px - 110px); /* svg centre on the ? button's centre */
  bottom: calc(18px - 110px);
  width: 220px;
  height: 220px;
  overflow: visible;
  pointer-events: none;
}
.orbit-item {
  transform-box: view-box;
  transform-origin: 0 0; /* user-space origin = the button's centre */
  transform: rotate(var(--a));
  /* closed: a turn back from where it rests */
  --a: calc(var(--to) - 90deg);
  opacity: 0;
  visibility: hidden;
  /* closing winds back anticlockwise, last out first in; it turns visibly
     first and only fades over the last part of the turn */
  transition:
    --a 0.5s cubic-bezier(0.45, 0, 0.55, 1) calc((2 - var(--i)) * 35ms),
    opacity 0.22s ease-in calc((2 - var(--i)) * 35ms + 0.2s),
    visibility 0s linear 0.65s;
}
.orbit.open .orbit-item {
  --a: var(--to);
  opacity: 1;
  visibility: visible;
  /* opening sweeps clockwise, one after another */
  transition:
    --a 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i) * 50ms),
    opacity 0.25s ease calc(var(--i) * 50ms),
    visibility 0s;
}
/* icons start on the left of the circle, turned so their tops face outward
   and their bases point at the button, like the letters of the word */
.orbit-item .facing {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(-58px, 0) rotate(-90deg);
}
.orbit-item a { pointer-events: auto; color: var(--btn-fg); fill: currentColor; transition: color 0.22s ease, opacity 0.22s ease; }
.orbit-item a:hover { color: var(--btn-fg-hover); }
/* pointing at one link quietly steps the others back */
.orbit-ring:has(a:hover, a:focus-visible) a:not(:hover, :focus-visible) { opacity: 0.35; }
.orbit-item a:focus { outline: none; }
/* keyboard focus: a ring round an icon, a curved underline under the word */
.orbit-item .focus-arc { fill: none; stroke: transparent; stroke-width: 1.5; stroke-linecap: round; }
.orbit-item a:focus-visible circle.hit,
.orbit-item a:focus-visible .focus-arc { stroke: currentColor; }
.orbit-item text { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.orbit-ring { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
/* generous invisible targets: a band under the word, a disc under each icon */
.orbit-item path.hit { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round; }
.orbit-item circle.hit { fill: transparent; stroke: transparent; stroke-width: 1.5; }
/* keep the hover alive across the gaps between the links */
.orbit.open::before {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 130px;
  height: 130px;
  border-top-left-radius: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-item, .orbit.open .orbit-item {
    --a: var(--to);
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }
  .orbit.open .orbit-item { transition: opacity 0.15s ease; }
  .btn, .tooltip { transition: none; }
  .name-fill { animation: none; }
  .btn:active { transform: none; }
}

/* light page backgrounds: dark controls, a dark tooltip, so they keep contrast */
body.light-bg {
  --btn-fg: #2b2b29;
  --btn-fg-hover: #000;
  --tip-bg: #1f1f1d;
  --tip-fg: #f3f2ec;
}
body.light-bg .btn,
body.light-bg .orbit-ring { text-shadow: none; filter: none; }
/* no links given: no ? menu */
body.no-links .orbit { display: none; }

/* ---------- home page header: wordmark left, Sign in + Create your tee right ---------- */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
}
.site-head[hidden] { display: none; }
.wordmark {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.site-actions { display: flex; align-items: center; gap: 4px; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.pill.solid { background: #fff; color: #000; }
.pill.solid:hover { background: #e6e6e6; }
.pill.ghost { color: #fff; }
.pill.ghost:hover { background: rgba(255, 255, 255, 0.12); }
:is(.wordmark, .pill):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 380px) {
  .site-head { padding: 16px; }
  .pill { padding: 0 12px; }
}

/* ---------- home page line: the idea, in the corner buttons' row, centred
   on the page and on the buttons' centre line, in the header pills' type.
   Part of the header, so it shows with the nav, before the shirt. Over the
   canvas but never in the way of dragging it. ---------- */
.home-tagline {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  left: 64px; /* clear of the 36px buttons at 20px from each edge */
  right: 64px;
  bottom: 20px;
  min-height: 36px; /* the buttons' height: one line sits on their centre */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
/* on a phone the links swing out over the line: it fades as they open and
   comes back only once they've finished swinging home (the close sweep
   takes 0.65s, see .orbit-item) */
@media (max-width: 640px) {
  .home-tagline { transition: opacity 0.3s ease 0.65s; }
  body.links-open .home-tagline { opacity: 0; transition: opacity 0.2s ease-in; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .home-tagline { transition-delay: 0.15s; }
}

/* holding Space: the view can be dragged */
#stage.can-pan { cursor: grab; }
#stage.panning { cursor: grabbing; }