#kreate-type-ring .kr-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--diameter, 250px);
  height: var(--diameter, 250px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
#kreate-type-ring .kr-ring:active { cursor: grabbing; }
#kreate-type-ring .kr-ring:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
#kreate-type-ring .kr-letters, #kreate-type-ring .kr-center { pointer-events: none; position: absolute; inset: 0; }
#kreate-type-ring .kr-letters span { position: absolute; left: 50%; top: 50%; white-space: pre; font-weight: 500; }
#kreate-type-ring .kr-center {
  display: grid;
  place-content: center;
  text-align: center;
  font-size: clamp(19px, 3.7vw, 34px);
  line-height: .98;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -.07em;
}
@media (prefers-reduced-motion: reduce) {
  #kreate-type-ring .kr-stage { transition: none; }
}

nav[aria-label="Main navigation"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: #171613;
}
#kreate-type-ring .kr-stage {
  --ground: #000000;
  --ink: #f6eee5;
  --hero-orange: #ed5437;
  --hero-dark: #181410;
  --punctuation: var(--hero-orange);
  --heading-ink: var(--ink);
  --heading-punctuation: var(--punctuation);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: max(540px, calc(100svh - 131px));
  overflow: hidden;
  background-color: var(--ground);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}
#kreate-type-ring .kr-heading {
  --headline-size: clamp(40px, 7vw, 98px);
  --hero-line-gap: clamp(8px, 1.7vw, 32px);
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--hero-line-gap);
  padding: clamp(24px, 4vh, 48px) 6vw 0;
  text-align: center;
  pointer-events: none;
}
#kreate-type-ring .kr-promise {
  display: grid;
  gap: var(--hero-line-gap);
  margin: 0;
  text-transform: uppercase;
}
#kreate-type-ring .kr-promise > span {
  font-size: max(11px, calc(var(--headline-size) / 3));
  font-weight: 600;
  letter-spacing: .10em;
}
#kreate-type-ring .kr-promise strong {
  font-size: max(14px, calc(var(--headline-size) / 2));
  font-weight: 700;
  letter-spacing: -.025em;
}
#kreate-type-ring .kr-heading h1 {
  max-width: 100%;
  margin: 0;
  font: 700 var(--headline-size)/1 "DM Sans", Arial, sans-serif;
  letter-spacing: -.07em;
  text-wrap: balance;
}
#kreate-type-ring .kr-heading :is(h1, .kr-promise > span, .kr-promise strong) {
  line-height: 1;
  line-height: 1cap;
}
#kreate-type-ring .kr-playfield { position: absolute; inset: 0; }
#kreate-type-ring .kr-footer {
  position: absolute;
  z-index: 1;
  inset: auto max(6vw, calc((100vw - 1350px) / 2)) 25px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}
#kreate-type-ring .kr-footer p { max-width: min(28vw, 290px); font-size: 13px; line-height: 1.45; }
#kreate-type-ring .kr-footer .arrowlink {
  width: fit-content;
  margin-top: 8px;
  border-bottom-color: var(--punctuation);
  font-size: 12px;
  gap: 14px;
  padding-bottom: 4px;
  pointer-events: auto;
}
#kreate-type-ring .kr-hint { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 700px) {
  #kreate-type-ring .kr-stage { min-height: max(560px, calc(100svh - 111px)); }
  #kreate-type-ring .kr-heading { padding-top: 28px; }
  #kreate-type-ring .kr-footer { bottom: 15px; }
  #kreate-type-ring .kr-footer p { max-width: 255px; font-size: 12px; }
  #kreate-type-ring .kr-hint { position: absolute; right: 0; bottom: 98px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #kreate-type-ring .kr-stage { transition: none; }
}

#kreate-type-ring .kr-stage[data-scene="1"] {
  --ground: var(--hero-orange);
  --ink: var(--hero-dark);
  --punctuation: #fff;
}
#kreate-type-ring .kr-stage[data-scene="2"] {
  --ground: #fff;
  --ink: var(--hero-dark);
  --punctuation: var(--hero-orange);
  --heading-ink: var(--hero-orange);
  --heading-punctuation: var(--hero-dark);
}
#kreate-type-ring .kr-punctuation { color: var(--punctuation); }
#kreate-type-ring .kr-heading { color: var(--heading-ink); }
#kreate-type-ring .kr-heading .kr-punctuation { color: var(--heading-punctuation); }
#kreate-type-ring .kr-footer .arrowlink:hover { color: inherit; }
#kreate-type-ring .kr-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#kreate-type-ring .kr-trail path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
}
#kreate-type-ring .kr-trail .kr-trajectory { stroke-dasharray: 1 5; }