# Add the oo.studio credit to this website

Add the studio credit below to the site's footer. Follow these rules exactly.

## Placement

- Put the HTML in the site's global footer so it appears on every page,
  as the last item (below or beside the copyright line), left- or
  right-aligned to match the footer's layout.
- Put the CSS in the site's global stylesheet (or a `<style>` tag in the
  shared footer component). Include it exactly once per site, even if
  the footer renders on many pages.
- Do not wrap it in extra links or buttons; it is already a link.

## HTML

```html
<a href="https://oo.studio" target="_blank" rel="noopener" class="oo-credit">
  <span>website by</span>
  <svg width="36" height="24" viewBox="0 0 36 24" aria-hidden="true">
    <path class="oo-loop" pathLength="100" d="M8 12 C8 7.5, 14.5 7.5, 18 12 C21.5 16.5, 28 16.5, 28 12 C28 7.5, 21.5 7.5, 18 12 C14.5 16.5, 8 16.5, 8 12 Z"/>
    <path class="oo-light" pathLength="100" d="M8 12 C8 7.5, 14.5 7.5, 18 12 C21.5 16.5, 28 16.5, 28 12 C28 7.5, 21.5 7.5, 18 12 C14.5 16.5, 8 16.5, 8 12 Z"/>
  </svg>
  <strong>oo.studio</strong>
</a>
```

## CSS

```css
.oo-credit { display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 system-ui, sans-serif; color: #a89f8d;
  text-decoration: none; transition: color .3s; }
.oo-credit:hover { color: #fbbf24; }
.oo-credit path { fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; }
.oo-loop { opacity: .35; }
.oo-light { stroke-dasharray: 25 75; stroke-dashoffset: 0;
  animation: oo-trace 2.4s linear infinite; }
@keyframes oo-trace { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .oo-light { animation: none; opacity: 0; }
}
```

## Rules

- Do NOT edit the SVG paths, the class names, the link URL, or the words
  "website by oo.studio". Keep `pathLength="100"` on both paths — the
  animation depends on it.
- You MAY adjust only the two colours to suit the site: the base colour
  (`color` on `.oo-credit`) should be the footer's muted text colour, and
  the hover colour should be the site's accent (or plain white/black).
  Keep the base subtle — the credit must never shout.
- Ensure the base colour has readable contrast against the footer
  background (roughly WCAG AA for small text).
- If the site is a React/Vue/Svelte app, convert the HTML to the
  framework's syntax (e.g. `class` → `className`, self-closing tags)
  without changing structure, classes, or content.
- If a strict CSP or style system forbids raw `<style>` tags, move the
  CSS into the site's existing stylesheet unchanged.

## Verify

After adding it, confirm: (1) the credit appears in the footer on every
page, (2) the link opens https://oo.studio in a new tab, (3) a small
light continuously traces around the infinity loop, with no jump where
the loop closes, and (4) with reduced motion enabled the loop is still
visible but static.