@font-face {
  font-family: Racing;
  src: url('assets/racing-sans-one.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --page-background: #faf8f2;
  --page-highlight: #fcfaf5;
  --tagline-color: #050909;
  --cursor-outline: #080d0e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #111719;
    --page-highlight: #202c2f;
    --tagline-color: #000000;
    --cursor-outline: #faf8f2;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--page-background); }
.canvas {
  width: 100%; min-height: 100svh; display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--page-highlight) 0%, var(--page-background) 100%);
}
.art { position: relative; width: min(100vw, 150vh); aspect-ratio: 3 / 2; container-type: inline-size; }
.triangle, .triangle-shadow { position: absolute; clip-path: polygon(0 0, 100% 19.2%, 20% 100%); }
.triangle-shadow { left: 19.4%; top: 24.7%; width: 27%; height: 55%; background: #070d0e; }
.triangle { left: 19.7%; top: 21%; width: 26.6%; height: 57%; background: #fc68a3; }
.speckles { position: absolute; inset: -10%; transform: rotate(-12deg); }
.speckles b { position: absolute; width: .85cqw; height: 1.15cqw; background: #101416; clip-path: polygon(15% 0, 60% 5%, 63% 30%, 100% 45%, 86% 76%, 57% 72%, 50% 100%, 20% 87%, 29% 50%, 0 35%); }
.orbit { position: absolute; left: 8%; top: 30%; width: 79%; height: 38%; border: 2.1cqw solid #ffe132; border-top-width: 1.4cqw; border-bottom-width: 1.1cqw; border-radius: 50%; transform: rotate(-16deg); box-shadow: -.2cqw .75cqw 0 #080d0c; }
.orbit-back { clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 55%, 0 55%); }
.wordmark { position: absolute; left: 24%; top: 27.8%; color: #00b9bc; font-family: Racing, sans-serif; font-size: 23.5cqw; line-height: 1; letter-spacing: -1.1cqw; transform: rotate(-6deg) skewX(-8deg) scaleX(1.12); transform-origin: left center; text-shadow: .12cqw .12cqw #00b1b5, .24cqw .24cqw #00a8ac, .4cqw .5cqw #061011, .6cqw .8cqw #061011, .8cqw 1.1cqw #061011, 1cqw 1.4cqw #061011; }
.tagline { position: absolute; left: 33%; top: 54.7%; font: 11.6cqw/.95 Racing, sans-serif; color: var(--tagline-color); white-space: nowrap; letter-spacing: -.48cqw; transform: rotate(-6deg) skewX(-8deg); transform-origin: left center; }
.tagline span { font-size: 7.5cqw; letter-spacing: -.3cqw; margin-right: .2cqw; }
.orbit-front { clip-path: polygon(0 33%, 8% 33%, 8% 67%, 35% 100%, 59% 100%, 59% 120%, -10% 120%, -10% 33%); }
.cursor { position: absolute; left: 84.1%; top: 31.7%; width: 8.5%; height: 21%; background: var(--cursor-outline); transform: rotate(-2deg); clip-path: polygon(0 0, 9% 0, 9% 6%, 19% 6%, 19% 12%, 29% 12%, 29% 18%, 39% 18%, 39% 24%, 49% 24%, 49% 30%, 59% 30%, 59% 36%, 69% 36%, 69% 42%, 79% 42%, 79% 48%, 89% 48%, 89% 54%, 99% 54%, 99% 63%, 71% 63%, 71% 71%, 79% 71%, 79% 83%, 88% 83%, 88% 95%, 78% 95%, 78% 100%, 61% 100%, 61% 94%, 52% 94%, 52% 82%, 44% 82%, 44% 72%, 35% 72%, 35% 78%, 26% 78%, 26% 83%, 9% 83%, 0 83%); }
.cursor-fill { position: absolute; inset: 1.55cqw .8cqw 1cqw .8cqw; background: var(--page-background); clip-path: polygon(0 0, 12% 0, 12% 8%, 24% 8%, 24% 16%, 36% 16%, 36% 24%, 48% 24%, 48% 32%, 60% 32%, 60% 40%, 72% 40%, 72% 48%, 84% 48%, 84% 56%, 100% 56%, 100% 61%, 60% 61%, 60% 74%, 69% 74%, 69% 86%, 79% 86%, 79% 100%, 62% 100%, 62% 88%, 52% 88%, 52% 76%, 43% 76%, 43% 66%, 30% 66%, 30% 73%, 18% 73%, 18% 80%, 0 80%); }
.rays { position: absolute; left: 86.5%; top: 25%; width: 8%; height: 12%; }
.rays i { position: absolute; display: block; width: .95cqw; height: 4.4cqw; background: #00b9b9; border-radius: .2cqw; }
.rays i:nth-child(1) { left: 0; top: 0; transform: rotate(3deg); }
.rays i:nth-child(2) { left: 32%; top: 15%; transform: rotate(34deg); }
.rays i:nth-child(3) { left: 64%; top: 48%; transform: rotate(69deg); height: 4cqw; }
@font-face { font-family: Goldman; src: url('assets/goldman-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.wordmark { font-family: Goldman, sans-serif; font-weight: 700; font-size: 21.3cqw; top: 31%; left: 25%; letter-spacing: -1.3cqw; transform: rotate(-6deg) skewX(-20deg) scaleX(1.04); }
.tagline { font-family: Goldman, sans-serif; font-weight: 700; font-size: 10.5cqw; top: 58%; transform: rotate(-6deg) skewX(-20deg) scaleX(1.08); }
.tagline span { font-size: 6.7cqw; }
.orbit-front { clip-path: polygon(-10% 33%, 8% 33%, 8% 67%, 35% 89%, 61% 97%, 100% 130%, -10% 130%); }
.speckles b { width: .9cqw; height: 1.2cqw; }

/* The two orbit segments are sampled curves, rendered entirely in CSS. */
.orbit { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; transform: none; box-shadow: none; background: #ffe132; filter: drop-shadow(0 .6cqw 0 #080d0c); }
.orbit-front { clip-path: polygon(27.083% 42.090%,26.005% 42.841%,24.959% 43.591%,23.945% 44.339%,22.964% 45.085%,22.015% 45.828%,21.099% 46.569%,20.216% 47.306%,19.367% 48.040%,18.551% 48.770%,17.770% 49.496%,17.022% 50.217%,16.309% 50.934%,15.631% 51.645%,14.988% 52.350%,14.381% 53.050%,13.809% 53.744%,13.273% 54.431%,12.773% 55.111%,12.310% 55.784%,11.883% 56.449%,11.493% 57.106%,11.140% 57.755%,10.825% 58.396%,10.548% 59.027%,10.309% 59.650%,10.108% 60.262%,9.945% 60.865%,9.822% 61.457%,9.737% 62.039%,9.692% 62.610%,9.687% 63.169%,9.722% 63.717%,9.796% 64.253%,9.912% 64.776%,10.068% 65.287%,10.265% 65.785%,10.503% 66.270%,10.783% 66.740%,11.104% 67.197%,11.468% 67.640%,11.874% 68.067%,12.323% 68.480%,12.814% 68.877%,13.349% 69.259%,13.927% 69.624%,14.549% 69.973%,15.215% 70.306%,15.925% 70.621%,16.680% 70.919%,17.479% 71.199%,18.323% 71.461%,19.213% 71.705%,20.148% 71.930%,21.130% 72.135%,22.157% 72.322%,23.231% 72.488%,24.351% 72.634%,25.518% 72.760%,26.733% 72.865%,27.995% 72.949%,27.995% 72.949%,28.581% 73.050%,29.167% 73.146%,29.754% 73.238%,30.340% 73.327%,30.926% 73.411%,31.512% 73.491%,32.097% 73.567%,32.682% 73.638%,33.266% 73.706%,33.850% 73.769%,34.432% 73.828%,35.014% 73.883%,35.594% 73.933%,36.173% 73.980%,36.750% 74.022%,37.326% 74.060%,37.901% 74.093%,38.473% 74.123%,39.044% 74.147%,39.612% 74.168%,40.179% 74.184%,40.743% 74.196%,41.304% 74.204%,41.864% 74.207%,42.420% 74.206%,42.974% 74.200%,43.524% 74.190%,44.072% 74.176%,44.617% 74.157%,45.158% 74.133%,45.696% 74.105%,46.230% 74.073%,46.761% 74.036%,47.287% 73.995%,47.810% 73.949%,48.329% 73.898%,48.844% 73.843%,49.354% 73.784%,49.860% 73.720%,50.362% 73.651%,50.858% 73.578%,51.350% 73.500%,51.838% 73.417%,52.320% 73.330%,52.796% 73.238%,53.268% 73.141%,53.734% 73.040%,54.195% 72.934%,54.650% 72.823%,55.099% 72.707%,55.542% 72.587%,55.979% 72.462%,56.410% 72.332%,56.835% 72.198%,57.254% 72.058%,57.665% 71.914%,58.071% 71.765%,58.469% 71.611%,58.860% 71.453%,59.245% 71.289%,59.245% 71.289%,58.477% 71.520%,57.705% 71.735%,56.929% 71.933%,56.149% 72.116%,55.366% 72.284%,54.579% 72.436%,53.790% 72.575%,52.998% 72.699%,52.205% 72.809%,51.410% 72.906%,50.614% 72.990%,49.818% 73.062%,49.021% 73.121%,48.224% 73.168%,47.427% 73.204%,46.632% 73.229%,45.837% 73.243%,45.045% 73.246%,44.254% 73.240%,43.465% 73.224%,42.680% 73.199%,41.897% 73.165%,41.119% 73.122%,40.344% 73.072%,39.573% 73.014%,38.807% 72.948%,38.047% 72.875%,37.291% 72.796%,36.542% 72.711%,35.799% 72.620%,35.063% 72.523%,34.334% 72.421%,33.612% 72.315%,32.898% 72.204%,32.192% 72.089%,31.495% 71.971%,30.807% 71.850%,30.128% 71.725%,29.459% 71.599%,28.800% 71.470%,28.152% 71.339%,27.515% 71.208%,26.889% 71.075%,26.274% 70.942%,25.672% 70.808%,25.083% 70.675%,24.506% 70.543%,23.943% 70.411%,23.393% 70.281%,22.857% 70.152%,22.336% 70.025%,21.830% 69.901%,21.339% 69.780%,20.863% 69.662%,20.403% 69.548%,19.960% 69.437%,19.534% 69.331%,19.125% 69.230%,18.733% 69.134%,18.359% 69.043%,18.359% 69.043%,17.726% 68.903%,17.126% 68.747%,16.561% 68.576%,16.029% 68.388%,15.530% 68.186%,15.063% 67.969%,14.629% 67.738%,14.227% 67.492%,13.857% 67.232%,13.517% 66.958%,13.208% 66.671%,12.929% 66.371%,12.680% 66.058%,12.461% 65.732%,12.270% 65.395%,12.108% 65.045%,11.974% 64.683%,11.868% 64.310%,11.790% 63.926%,11.738% 63.531%,11.713% 63.125%,11.714% 62.709%,11.741% 62.283%,11.793% 61.848%,11.870% 61.403%,11.971% 60.948%,12.097% 60.485%,12.246% 60.013%,12.419% 59.533%,12.614% 59.045%,12.832% 58.550%,13.072% 58.046%,13.333% 57.536%,13.616% 57.019%,13.920% 56.495%,14.244% 55.965%,14.588% 55.429%,14.951% 54.887%,15.334% 54.339%,15.736% 53.787%,16.156% 53.229%,16.594% 52.667%,17.049% 52.101%,17.522% 51.531%,18.011% 50.957%,18.517% 50.379%,19.039% 49.798%,19.576% 49.215%,20.128% 48.629%,20.695% 48.040%,21.277% 47.450%,21.872% 46.857%,22.480% 46.263%,23.102% 45.668%,23.736% 45.073%,24.383% 44.476%,25.041% 43.879%,25.711% 43.282%,26.392% 42.686%,27.083% 42.090%); }
.orbit-back { clip-path: polygon(48.372% 33.301%,49.624% 32.638%,50.859% 32.005%,52.077% 31.404%,53.277% 30.832%,54.460% 30.291%,55.626% 29.779%,56.773% 29.297%,57.901% 28.844%,59.011% 28.419%,60.102% 28.022%,61.174% 27.654%,62.226% 27.313%,63.258% 27.000%,64.269% 26.714%,65.261% 26.454%,66.231% 26.221%,67.181% 26.014%,68.109% 25.833%,69.016% 25.677%,69.900% 25.546%,70.762% 25.440%,71.602% 25.359%,72.419% 25.301%,73.213% 25.268%,73.983% 25.258%,74.730% 25.271%,75.453% 25.307%,76.151% 25.366%,76.825% 25.447%,77.474% 25.549%,78.098% 25.674%,78.696% 25.819%,79.269% 25.985%,79.815% 26.173%,80.335% 26.380%,80.829% 26.607%,81.295% 26.854%,81.735% 27.120%,82.146% 27.405%,82.530% 27.709%,82.886% 28.031%,83.214% 28.371%,83.513% 28.729%,83.782% 29.104%,84.023% 29.497%,84.234% 29.906%,84.415% 30.331%,84.566% 30.773%,84.687% 31.230%,84.776% 31.703%,84.835% 32.190%,84.863% 32.693%,84.858% 33.210%,84.822% 33.741%,84.754% 34.286%,84.653% 34.845%,84.520% 35.416%,84.353% 36.001%,84.153% 36.598%,83.919% 37.207%,83.919% 37.207%,83.883% 37.197%,83.845% 37.188%,83.806% 37.178%,83.765% 37.169%,83.724% 37.160%,83.681% 37.151%,83.637% 37.142%,83.592% 37.134%,83.546% 37.125%,83.499% 37.117%,83.452% 37.108%,83.403% 37.100%,83.354% 37.092%,83.304% 37.084%,83.253% 37.076%,83.202% 37.068%,83.150% 37.060%,83.097% 37.052%,83.044% 37.045%,82.991% 37.037%,82.937% 37.029%,82.883% 37.022%,82.829% 37.014%,82.774% 37.007%,82.720% 37.000%,82.665% 36.992%,82.610% 36.985%,82.556% 36.978%,82.501% 36.970%,82.446% 36.963%,82.392% 36.956%,82.338% 36.948%,82.284% 36.941%,82.230% 36.934%,82.177% 36.926%,82.124% 36.919%,82.072% 36.911%,82.020% 36.904%,81.969% 36.896%,81.918% 36.889%,81.868% 36.881%,81.819% 36.873%,81.770% 36.866%,81.723% 36.858%,81.676% 36.850%,81.631% 36.842%,81.586% 36.834%,81.542% 36.826%,81.500% 36.818%,81.458% 36.809%,81.418% 36.801%,81.379% 36.792%,81.342% 36.783%,81.305% 36.775%,81.271% 36.766%,81.237% 36.757%,81.205% 36.747%,81.175% 36.738%,81.147% 36.728%,81.120% 36.719%,81.120% 36.719%,81.362% 35.971%,81.560% 35.260%,81.717% 34.586%,81.832% 33.947%,81.907% 33.343%,81.941% 32.774%,81.937% 32.238%,81.895% 31.736%,81.816% 31.265%,81.701% 30.826%,81.550% 30.418%,81.364% 30.041%,81.145% 29.692%,80.892% 29.373%,80.608% 29.082%,80.293% 28.818%,79.947% 28.581%,79.571% 28.370%,79.167% 28.185%,78.735% 28.024%,78.276% 27.887%,77.791% 27.774%,77.281% 27.683%,76.746% 27.614%,76.187% 27.567%,75.606% 27.540%,75.003% 27.533%,74.379% 27.545%,73.735% 27.576%,73.071% 27.625%,72.389% 27.690%,71.689% 27.773%,70.973% 27.871%,70.240% 27.984%,69.493% 28.112%,68.731% 28.253%,67.955% 28.408%,67.168% 28.574%,66.368% 28.753%,65.557% 28.942%,64.737% 29.142%,63.907% 29.352%,63.069% 29.570%,62.224% 29.797%,61.372% 30.031%,60.514% 30.272%,59.651% 30.519%,58.784% 30.772%,57.914% 31.029%,57.042% 31.291%,56.168% 31.556%,55.293% 31.824%,54.419% 32.094%,53.545% 32.366%,52.673% 32.638%,51.804% 32.910%,50.939% 33.181%,50.078% 33.451%,49.222% 33.719%,48.372% 33.984%); }
.wordmark { display: flex; align-items: baseline; top: 34%; font-size: 19.4cqw; line-height: 1; }
.capital { font-size: 25cqw; display: inline-block; transform: scaleX(1.36); transform-origin: left bottom; margin-right: 4.3cqw; }
.wordmark { top: 28.8%; left: 23.4%; }
.orbit-shadow { background: #080d0c; transform: translateY(.55cqw); }

/* Independent translate preserves each layer's existing rotation and skew.
   Matching depths keep shapes and their shadows moving together. */
.art > * {
  --depth: 0;
  pointer-events: none;
  translate: calc(var(--pointer-x, 0) * var(--depth) * 1cqw)
             calc(var(--pointer-y, 0) * var(--depth) * 1cqw);
  transition: translate 240ms cubic-bezier(.2, .65, .3, 1);
}
.art > .triangle, .art > .triangle-shadow { --depth: -.9; }
.art > .orbit-back { --depth: .4; }
.art > .wordmark { --depth: 1; }
.art > .tagline { --depth: 1.5; }
.art > .orbit-front { --depth: 1.9; }
.art > .cursor, .art > .rays { --depth: 2.5; }

@media (prefers-reduced-motion: reduce) {
  .art > * { translate: none; transition: none; }
}