/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter Display", Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .fixed {
    position: fixed;
  }

  .m-53 {
    margin: calc(var(--spacing) * 53);
  }

  .m-177 {
    margin: calc(var(--spacing) * 177);
  }

  .\!inline {
    display: inline !important;
  }

  .block {
    display: block;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

.band {
  background: var(--bg-band);
  width: 100%;
  padding: 5rem 0;
}

.band-paper {
  background: var(--bg-page);
}

.band-empty {
  align-items: center;
  min-height: 28rem;
  display: flex;
}

.band-inner {
  width: min(70rem, 100% - 3rem);
  margin: 0 auto;
}

.band-title {
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--fg);
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 600;
  line-height: 1.3;
}

.works-title {
  letter-spacing: -.04em;
  text-align: center;
  color: var(--fg);
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
}

.works {
  gap: .9rem;
  margin-top: 2.25rem;
  display: grid;
}

.work-feature, .work-card {
  border: 1px solid var(--divider);
  background: var(--bg-band);
  border-radius: 1.2rem;
  transition: background-color .18s;
}

.work-feature:hover, .work-card:hover {
  background: var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  .work-feature:hover, .work-card:hover {
    background: color-mix(in srgb, var(--fg) 7%, var(--bg-band));
  }
}

.work-feature {
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .95fr);
  align-items: stretch;
  gap: 1rem 1.5rem;
  padding: 1.45rem 1.45rem 1.35rem 1.55rem;
  display: grid;
}

.work-feature-body {
  flex-direction: column;
  min-height: 100%;
  display: flex;
}

.works-rest {
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  display: grid;
}

.work-card {
  flex-direction: column;
  padding: 1.25rem 1.2rem 1.15rem;
  display: flex;
}

.work-where {
  color: var(--fg-muted);
  margin: .4rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
}

.work-feature-title {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.work-feature-title .work-links {
  flex: none;
  justify-content: flex-end;
  margin: 0;
}

.work-feature h3, .work-card h3 {
  color: var(--fg);
  letter-spacing: -.04em;
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
}

.work-feature h3 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
}

.work-card h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.work-copy {
  color: var(--fg-dim);
  text-align: left;
  margin: .8rem 0 0;
  font-size: .98rem;
  line-height: 1.6;
}

.work-links {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.work-links-foot {
  justify-content: center;
  margin-top: auto;
}

.work-links a {
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.2rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.work-links a > * {
  z-index: 1;
  position: relative;
}

.work-links a svg {
  flex: none;
  align-self: center;
  display: block;
}

.work-links a:hover {
  transform: scale(1.06);
}

.work-link-mark {
  object-fit: contain;
  object-position: left center;
  width: auto;
  max-width: 7.5rem;
  height: 1.45rem;
  margin: 0;
}

.work-link .journey-debidev-mark {
  width: 7.2rem;
  max-width: 7.2rem;
  height: 1.45rem;
  margin: 0;
}

.work-link-lexe {
  color: #f5f5f5;
  background-color: #121110;
  border: 1px solid #be123c8c;
}

.work-link-lexe:before {
  content: "";
  z-index: 0;
  background: radial-gradient(42% 68% at 22% 48%, #85000052 0%, #0000 68%), radial-gradient(34% 60% at 74% 64%, #be123c38 0%, #0000 70%), radial-gradient(28% 52% at 48% 16%, #5c000047 0%, #0000 72%);
  animation: 16s linear infinite work-link-mist;
  position: absolute;
  inset: -45% -30%;
}

.work-link-debidev {
  color: #0a1a12;
  background: radial-gradient(at 14% 130%, #8cc8ff38 0%, #0000 58%), linear-gradient(#e7f2fb 0%, #f3f8fd 48%, #f7fbfe 100%);
  border: 1px solid #7c3aed61;
}

html[data-theme="dark"] .work-link-debidev {
  color: #ffe58a;
  background: radial-gradient(at 86% 0, #d4a01733 0%, #0000 58%), linear-gradient(155deg, #07030f 0%, #141414 70%, #16120c 100%);
  border-color: #d4a0178c;
}

.work-link-kinessor, .work-link-april {
  background: none;
  transition: transform .18s, background-color .18s;
}

html:not([data-theme="dark"]) .work-card:hover .work-link-kinessor, html:not([data-theme="dark"]) .work-card:hover .work-link-april {
  background: var(--bg-page);
}

.work-link-kinessor {
  color: var(--kinessor-red);
  border: 1px solid var(--kinessor-red);
}

.work-link-april {
  color: var(--april-navy);
  border: 1px solid var(--april-navy);
  gap: .4rem;
  padding: .42rem .8rem;
}

.work-link-april .work-link-mark {
  max-width: 5.2rem;
  height: .95rem;
}

.work-link-april svg {
  width: 13px;
  height: 13px;
}

html[data-theme="dark"] .work-link-april {
  color: var(--april-navy);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .work-link-april {
    color: color-mix(in srgb, var(--april-navy) 45%, #d5e4f2);
  }
}

html[data-theme="dark"] .work-link-april {
  border-color: var(--april-navy);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .work-link-april {
    border-color: color-mix(in srgb, var(--april-navy) 45%, #d5e4f2);
  }
}

@keyframes work-link-mist {
  from {
    transform: translate3d(-8%, 0, 0);
  }

  to {
    transform: translate3d(8%, 0, 0);
  }
}

.lexe-stage {
  background: var(--bg-page);
  border-radius: .95rem;
  min-width: 0;
  padding: 1.15rem .85rem 1.2rem;
  container-type: inline-size;
}

.lexe-map {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "north north north"
                       "west core east"
                       "south south south";
  place-items: center;
  gap: 2.15rem 2.75rem;
  width: 100%;
  display: grid;
  position: relative;
}

.lexe-links {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.lexe-line {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .34;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: opacity .18s, stroke-width .18s;
  animation: .7s .12s both lexe-draw;
}

.lexe-group {
  z-index: 1;
  border-radius: .75rem;
  outline: none;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  transition: opacity .18s;
  display: flex;
}

.lexe-group[data-place="west"] {
  justify-self: end;
}

.lexe-group[data-place="east"] {
  justify-self: start;
}

.lexe-group[data-place="south"] .lexe-label {
  order: 1;
}

.lexe-group:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 5px;
}

.lexe-label {
  color: var(--fg-muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
}

.lexe-nodes {
  gap: .55rem;
  display: flex;
}

.lexe-group[data-place="west"] .lexe-nodes, .lexe-group[data-place="east"] .lexe-nodes {
  flex-direction: column;
}

.lexe-node {
  border: 1px solid var(--fg);
  align-items: center;
  gap: .4rem;
  padding: .42rem .68rem;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .lexe-node {
    border: 1px solid color-mix(in srgb, var(--fg) 16%, var(--divider));
  }
}

.lexe-node {
  background: var(--bg-page);
  color: var(--fg);
  letter-spacing: -.015em;
  white-space: nowrap;
  border-radius: .62rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color .18s, background-color .18s, opacity .18s;
}

.lexe-node svg {
  color: var(--fg-dim);
  flex: none;
}

.lexe-core {
  z-index: 1;
  background: var(--fg);
  min-width: 6.4rem;
  color: var(--bg-page);
  letter-spacing: .16em;
  border-radius: .85rem;
  justify-items: center;
  gap: .38rem;
  margin-block: .15rem;
  padding: .85rem 1.05rem .78rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  display: grid;
  position: relative;
}

.lexe-core:after {
  content: "";
  border: 1px solid var(--fg);
  position: absolute;
  inset: -6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .lexe-core:after {
    border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  }
}

.lexe-core:after {
  pointer-events: none;
  border-radius: 1.1rem;
}

.lexe-map[data-hot] .lexe-line, .lexe-map[data-hot] .lexe-group {
  opacity: .28;
}

.lexe-map[data-hot="interface"] .lexe-line-interface, .lexe-map[data-hot="identity"] .lexe-line-identity, .lexe-map[data-hot="trust"] .lexe-line-trust, .lexe-map[data-hot="platform"] .lexe-line-platform {
  opacity: .9;
  stroke-width: 1.35px;
}

.lexe-map[data-hot="interface"] .lexe-group-interface, .lexe-map[data-hot="identity"] .lexe-group-identity, .lexe-map[data-hot="trust"] .lexe-group-trust, .lexe-map[data-hot="platform"] .lexe-group-platform {
  opacity: 1;
}

.lexe-map[data-hot="interface"] .lexe-group-interface .lexe-node, .lexe-map[data-hot="identity"] .lexe-group-identity .lexe-node, .lexe-map[data-hot="trust"] .lexe-group-trust .lexe-node, .lexe-map[data-hot="platform"] .lexe-group-platform .lexe-node {
  border-color: var(--fg);
  background: var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  .lexe-map[data-hot="interface"] .lexe-group-interface .lexe-node, .lexe-map[data-hot="identity"] .lexe-group-identity .lexe-node, .lexe-map[data-hot="trust"] .lexe-group-trust .lexe-node, .lexe-map[data-hot="platform"] .lexe-group-platform .lexe-node {
    background: color-mix(in srgb, var(--fg) 7%, var(--bg-page));
  }
}

html[data-theme="dark"] .lexe-map[data-hot="interface"] .lexe-group-interface .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="identity"] .lexe-group-identity .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="trust"] .lexe-group-trust .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="platform"] .lexe-group-platform .lexe-node {
  background: #000;
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .lexe-map[data-hot="interface"] .lexe-group-interface .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="identity"] .lexe-group-identity .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="trust"] .lexe-group-trust .lexe-node, html[data-theme="dark"] .lexe-map[data-hot="platform"] .lexe-group-platform .lexe-node {
    background: color-mix(in srgb, black 28%, var(--bg-page));
  }
}

@keyframes lexe-draw {
  from {
    stroke-dashoffset: 1px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@container (max-width: 28rem) {
  .lexe-map {
    grid-template-columns: 1fr;
    grid-template-areas: "north"
                         "core"
                         "east"
                         "south"
                         "west";
    justify-items: center;
    row-gap: 1.45rem;
  }

  .lexe-group[data-place="west"], .lexe-group[data-place="east"] {
    justify-self: center;
  }

  .lexe-group[data-place="west"] .lexe-nodes, .lexe-group[data-place="east"] .lexe-nodes {
    flex-direction: row;
  }
}

@container (max-width: 16.25rem) {
  .lexe-group[data-place="west"] .lexe-nodes, .lexe-group[data-place="east"] .lexe-nodes, .lexe-group[data-place="north"] .lexe-nodes, .lexe-group[data-place="south"] .lexe-nodes {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-feature, .work-card, .lexe-line, .lexe-group, .lexe-core, .lexe-node, .work-links a, .work-link-lexe:before {
    transition: none;
    animation: none;
  }

  .work-links a:hover {
    transform: none;
  }
}

.journey-row, .journey-story {
  margin: 2.5rem auto 0;
}

.journey-story {
  width: min(44rem, 100%);
}

.journey-row {
  --journey-gap: 1rem;
  width: 100%;
  display: grid;
  container-type: inline-size;
}

.journey-sizer, .journey {
  grid-area: 1 / 1;
}

.journey-sizer {
  visibility: hidden;
  width: calc((100% - 2 * var(--journey-gap)) / 2);
  pointer-events: none;
  border: 1px solid #0000;
  justify-self: center;
}

.journey-sizer .journey-card-inner {
  width: 100%;
}

.journey-sizer .journey-more {
  opacity: 1;
  flex: auto;
  min-height: auto;
  overflow: visible;
}

.journey {
  align-items: stretch;
  gap: var(--journey-gap);
  width: 100%;
  height: 100%;
  padding: 0;
  list-style: none;
  display: flex;
}

.journey-story h3 {
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--fg);
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
}

.journey-story p {
  text-wrap: pretty;
  color: var(--fg);
  margin: 1.05rem 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
}

.journey-card {
  background: var(--bg-page);
  text-align: center;
  border: 0;
  border-radius: 1.25rem;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.journey-card[data-place="left"] {
  order: 1;
}

.journey-card[data-place="center"] {
  flex-grow: 2;
  order: 2;
}

.journey-card[data-place="right"] {
  order: 3;
}

.journey:has([data-place="left"]:hover) [data-place="left"], .journey:has([data-place="left"]:focus-visible) [data-place="left"], .journey:has([data-place="right"]:hover) [data-place="right"], .journey:has([data-place="right"]:focus-visible) [data-place="right"] {
  flex-grow: 2;
}

.journey:has([data-place="left"]:hover) [data-place="center"], .journey:has([data-place="left"]:focus-visible) [data-place="center"], .journey:has([data-place="right"]:hover) [data-place="center"], .journey:has([data-place="right"]:focus-visible) [data-place="center"] {
  flex-grow: 1;
}

.journey-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.journey-card-inner {
  z-index: 1;
  width: calc((100cqw - 2 * var(--journey-gap)) / 2);
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-self: stretch;
  padding: 2.6rem 1.5rem 1.85rem;
  transition: padding .55s cubic-bezier(.22, 1, .36, 1), opacity .35s;
  display: flex;
  position: relative;
}

.journey-card.is-photos .journey-card-inner {
  opacity: 0;
  pointer-events: none;
}

.journey-stack {
  flex-direction: column;
  flex: auto;
  justify-content: center;
  min-height: 0;
  display: flex;
}

.journey-site {
  color: var(--fg);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  flex: none;
  margin-top: auto;
  padding-top: 1.15rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity .4s;
}

.journey-card[data-place="center"]:is(:hover, :focus-within) .journey-site, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-site, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-site {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

a.journey-site:hover, a.journey-site:focus-visible {
  text-underline-offset: .18em;
  text-decoration: underline;
}

.journey-photos {
  z-index: 3;
  border: 1px solid var(--fg);
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: grid;
  position: absolute;
  bottom: .7rem;
  right: .7rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .journey-photos {
    border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  }
}

.journey-photos {
  background: var(--bg-page);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .journey-photos {
    background: color-mix(in srgb, var(--bg-page) 84%, transparent);
  }
}

.journey-photos {
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .2s, background-color .2s;
}

.journey-card:hover .journey-photos, .journey-card:focus-within .journey-photos, .journey-card.is-photos .journey-photos {
  opacity: 1;
  pointer-events: auto;
}

.journey-photos:hover {
  background: var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  .journey-photos:hover {
    background: color-mix(in srgb, var(--fg) 8%, var(--bg-page));
  }
}

.journey-photos:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.journey-card[data-mark="kinessor"] .journey-photos {
  left: .7rem;
  right: auto;
}

.journey-slides {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.journey-slides img {
  object-fit: cover;
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s, transform 1.2s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
  transform: scale(1.08);
}

.journey-slides img.is-on {
  opacity: 1;
  transform: scale(1);
}

.journey-slide-shade {
  z-index: 1;
  background: var(--journey-shade);
  transition: opacity .35s;
  position: absolute;
  inset: 0;
}

.journey-card.is-photos .journey-slide-shade, .journey-card.is-photos:before {
  opacity: 0;
}

.journey-company-name {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.journey-card[data-place="left"], .journey-card[data-place="right"] {
  cursor: pointer;
}

.journey-card[data-place="left"] .journey-card-inner, .journey-card[data-place="right"] .journey-card-inner, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner {
  justify-content: center;
  width: 100%;
  padding: 1.75rem 1.15rem;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-card-inner {
  padding: 2.6rem 1.5rem 1.85rem;
}

.journey-lead {
  flex: none;
}

.journey-more {
  opacity: 1;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1), opacity .4s;
  display: flex;
  overflow: hidden;
}

.journey-card[data-place="left"] .journey-more, .journey-card[data-place="right"] .journey-more, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more {
  opacity: 0;
  flex-grow: 0;
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1), opacity linear;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-more {
  opacity: 1;
  flex-grow: 1;
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1), opacity .4s .14s;
}

.journey-company img {
  object-fit: contain;
  width: auto;
  max-width: min(100%, 14rem);
  height: 2.05rem;
  margin-inline: auto;
  display: block;
}

.journey-company {
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--fg);
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  font-weight: 600;
  line-height: 1.15;
  transition: font-size .55s cubic-bezier(.22, 1, .36, 1);
}

.journey-card[data-place="left"] .journey-company, .journey-card[data-place="right"] .journey-company, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company {
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
}

.journey-card[data-place="left"] .journey-company img, .journey-card[data-place="right"] .journey-company img, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company img, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company img {
  max-width: min(100%, 9.5rem);
  height: 1.35rem;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-company {
  font-size: clamp(1.85rem, 3vw, 2.45rem);
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-company img, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-company img {
  max-width: min(100%, 14rem);
  height: 2.05rem;
}

.journey-card[data-mark="april"] .journey-company img {
  max-width: min(100%, 11rem);
  height: 1.6rem;
}

.journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="april"] .journey-company img {
  max-width: min(100%, 16rem);
  height: 2.4rem;
}

.journey-card[data-mark="kinessor"] .journey-company img {
  max-width: min(100%, 14rem);
  height: 2.25rem;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="kinessor"] .journey-company img {
  max-width: min(100%, 18rem);
  height: 3.25rem;
}

.journey-debidev-mark {
  -webkit-mask-mode: alpha;
  -webkit-mask-source-type: alpha;
  background-color: #012753;
  flex: none;
  width: min(100%, 24rem);
  max-width: min(100%, 24rem);
  height: 4.15rem;
  margin-inline: auto;
  display: block;
  -webkit-mask: url("/assets/debidev-logo-DzDH42uy.svg") center / contain no-repeat;
  -webkit-mask-source-type: alpha;
  mask: url("/assets/debidev-logo-DzDH42uy.svg") center / contain no-repeat alpha;
}

html[data-theme="dark"] .journey-debidev-mark {
  background-color: #0000;
  background-image: linear-gradient(90deg, #c4900a 0%, #d4a017 15%, gold 30%, #ffe680 42%, #fff5c0 50%, #ffe680 58%, gold 70%, #d4a017 80%, gold 88%, #ffe680 94%, #d4a017 100%);
  background-position: 100%;
  background-size: 250% 100%;
  animation: 2.2s journey-debidev-gold;
}

@keyframes journey-debidev-gold {
  0% {
    background-position: 100%;
    animation-timing-function: ease-in;
  }

  15% {
    background-position: 83%;
    animation-timing-function: linear;
  }

  85% {
    background-position: 17%;
    animation-timing-function: ease-out;
  }

  100% {
    background-position: 100%;
  }
}

.journey-card[data-place="left"] .journey-company, .journey-card[data-place="right"] .journey-company, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company {
  justify-content: center;
  align-items: center;
  height: 2.95rem;
  display: flex;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-company {
  height: auto;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-debidev-mark, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-debidev-mark {
  max-width: min(100%, 17rem);
  height: 2.95rem;
}

.journey-card[data-mark="kinessor"], .journey-card[data-mark="april"], .journey-card[data-mark="debidev"] {
  background-color: #fff;
}

.journey-card[data-mark="kinessor"] .journey-role, .journey-card[data-mark="april"] .journey-role, .journey-card[data-mark="debidev"] .journey-role, .journey-line {
  color: #10121b;
}

.journey-line {
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: .5rem 0 0;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.35;
}

.journey-line:empty {
  display: none;
}

.journey-line span + span:before {
  content: " ";
}

.journey-card[data-place="left"] .journey-line span, .journey-card[data-place="right"] .journey-line span, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span {
  display: block;
}

.journey-card[data-place="left"] .journey-line span + span:before, .journey-card[data-place="right"] .journey-line span + span:before, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span + span:before, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span + span:before {
  content: none;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-line span, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-line span {
  display: inline;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-line span + span:before, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-line span + span:before {
  content: " ";
}

.journey-card[data-place="left"] .journey-line, .journey-card[data-place="right"] .journey-line, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line {
  min-height: 2.7em;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-line, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-line {
  min-height: 0;
}

.journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line:empty, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line:empty {
  display: block;
}

.journey-card[data-mark="kinessor"]:before, .journey-card[data-mark="april"]:before, .journey-card[data-mark="debidev"]:before {
  content: "";
  z-index: 2;
  pointer-events: none;
  height: .28rem;
  position: absolute;
  inset: 0 0 auto;
}

.journey-card[data-mark="kinessor"]:before {
  background: var(--kinessor-red);
}

.journey-card[data-mark="debidev"]:before {
  background: var(--debidev-navy);
}

.journey-card[data-mark="kinessor"] .journey-tags li {
  color: var(--kinessor-red);
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  .journey-card[data-mark="kinessor"] .journey-tags li {
    background: color-mix(in srgb, var(--kinessor-red) 12%, #fff);
  }
}

.journey-card[data-mark="april"]:before {
  background-image: linear-gradient(var(--april-green), var(--april-green)), linear-gradient(var(--april-navy), var(--april-navy)), linear-gradient(var(--april-orange), var(--april-orange));
  background-position: 0 0, top, 100% 0;
  background-repeat: no-repeat;
  background-size: 33.34% 100%;
}

.journey-card[data-mark="april"] .journey-tags li:first-child {
  background: var(--april-green);
  color: #fff;
}

.journey-card[data-mark="april"] .journey-tags li:nth-child(2) {
  background: var(--april-orange);
  color: #10121b;
}

.journey-card[data-mark="kinessor"] .journey-copy, .journey-card[data-mark="april"] .journey-copy, .journey-card[data-mark="debidev"] .journey-copy, .journey-card[data-mark="debidev"] .journey-foot {
  color: #3d4756;
}

.journey-card[data-mark="debidev"] .journey-tags li {
  background: var(--debidev-navy);
  color: #fff;
}

html[data-theme="dark"] .journey-card[data-mark="kinessor"], html[data-theme="dark"] .journey-card[data-mark="april"], html[data-theme="dark"] .journey-card[data-mark="debidev"] {
  background-color: var(--bg-band);
}

html[data-theme="dark"] .journey-card[data-mark="kinessor"] .journey-role, html[data-theme="dark"] .journey-card[data-mark="april"] .journey-role, html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-role, html[data-theme="dark"] .journey-line {
  color: var(--fg);
}

html[data-theme="dark"] .journey-card[data-mark="kinessor"] .journey-copy, html[data-theme="dark"] .journey-card[data-mark="april"] .journey-copy, html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-copy, html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-foot {
  color: var(--fg-muted);
}

html[data-theme="dark"] .journey-card[data-mark="kinessor"] .journey-tags li {
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .journey-card[data-mark="kinessor"] .journey-tags li {
    background: color-mix(in srgb, var(--kinessor-red) 78%, #2a0c0e);
  }
}

html[data-theme="dark"] .journey-card[data-mark="kinessor"] .journey-tags li {
  color: #fff;
}

html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-tags li, html[data-theme="dark"] .journey-card[data-mark="debidev"]:before {
  background: var(--debidev-navy);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-tags li, html[data-theme="dark"] .journey-card[data-mark="debidev"]:before {
    background: color-mix(in srgb, var(--debidev-navy) 68%, #a9c0dc);
  }
}

html[data-theme="dark"] .journey-card[data-mark="debidev"] .journey-tags li {
  color: #fff;
}

html[data-theme="dark"] .journey-card[data-mark="april"]:before {
  background-image: linear-gradient(var(--april-green), var(--april-green)), linear-gradient(var(--april-navy), var(--april-navy)), linear-gradient(var(--april-orange), var(--april-orange));
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .journey-card[data-mark="april"]:before {
    background-image: linear-gradient(var(--april-green), var(--april-green)), linear-gradient(color-mix(in srgb, var(--april-navy) 45%, #d5e4f2), color-mix(in srgb, var(--april-navy) 45%, #d5e4f2)), linear-gradient(var(--april-orange), var(--april-orange));
  }
}

.journey-role {
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--fg);
  margin: .7rem 0 0;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.4;
}

.journey-tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.journey-tags li {
  background: var(--bg-band);
  color: var(--fg-dim);
  letter-spacing: -.01em;
  border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.3;
}

.journey-copy {
  text-wrap: pretty;
  max-width: 36rem;
  color: var(--fg-muted);
  margin: 1.2rem auto 1.45rem;
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.55;
}

.journey-foot {
  border-top: 1px solid var(--fg);
  margin: auto 0 0;
  padding-top: 1rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .journey-foot {
    border-top: 1px solid color-mix(in srgb, var(--fg) 10%, var(--divider));
  }
}

.journey-foot {
  letter-spacing: -.01em;
  color: var(--fg-dim);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.4;
}

#technologies.band {
  padding-top: 0;
}

.stack-banner-lead, .stack-banner-foot {
  display: none;
}

.stack-banner {
  margin-bottom: 3.2rem;
  padding: 1.85rem 0 2.15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
}

.stack-track {
  width: max-content;
  animation: 75s linear infinite stack-drift;
  display: flex;
}

.stack-banner:hover .stack-track, .stack-banner:active .stack-track {
  animation-play-state: paused;
}

.stack-track ul {
  align-items: center;
  gap: 2.75rem;
  margin: 0;
  padding: 0 2.75rem 0 0;
  list-style: none;
  display: flex;
}

.stack-track li {
  flex: none;
  align-items: center;
  height: 1.65rem;
  display: flex;
  position: relative;
}

.stack-track li:hover {
  z-index: 1;
}

.stack-name {
  letter-spacing: -.01em;
  color: var(--fg);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  transition: opacity .2s;
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%);
}

.stack-track li:hover .stack-name, .stack-track li:focus-visible .stack-name, .stack-track li:active .stack-name {
  opacity: 1;
}

.stack-track svg {
  width: auto;
  height: 1.65rem;
  fill: var(--mark);
  transform-origin: center;
  transition: transform .2s;
  display: block;
}

html[data-theme="dark"] .stack-track svg {
  fill: var(--mark-dark);
}

.stack-track li:hover svg, .stack-track li:focus-visible svg, .stack-track li:active svg {
  transform: scale(1.4);
}

@keyframes stack-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.stack-rain {
  z-index: 16;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.stack-rain span {
  top: 0;
  left: var(--x);
  opacity: 0;
  animation: stack-rain-fall var(--dur) linear var(--delay) forwards;
  position: absolute;
}

.stack-rain svg {
  width: auto;
  height: 1.55rem;
  fill: var(--mark);
  display: block;
}

html[data-theme="dark"] .stack-rain svg {
  fill: var(--mark-dark);
}

@keyframes stack-rain-fall {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -2.6rem, 0);
  }

  8% {
    opacity: .92;
  }

  76% {
    opacity: .92;
  }

  100% {
    transform: translate3d(-50%, var(--fall, 104svh), 0);
    opacity: 0;
  }
}

.toolkit-heading {
  white-space: nowrap;
  text-wrap: nowrap;
}

.toolkit {
  --toolkit-col-gap: 2.5rem;
  --toolkit-row-gap: 2.75rem;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  margin-top: 2.75rem;
  display: flex;
}

.toolkit-hub {
  flex: none;
  place-items: center;
  width: min(100%, 15rem);
  height: 15rem;
  display: grid;
  position: relative;
}

.toolkit-ring {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.toolkit-ring circle {
  fill: none;
  stroke: var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit-ring circle {
    stroke: color-mix(in srgb, var(--fg) 24%, var(--divider));
  }
}

.toolkit-ring circle {
  stroke-width: 1px;
  stroke-dasharray: 1.35 2.15;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.toolkit-arm[data-place="above"] {
  --from: translateY(-1.75rem);
}

.toolkit-arm[data-place="below"] {
  --from: translateY(1.75rem);
}

.toolkit-arm[data-place="left"] {
  --from: translateX(-1.75rem);
}

.toolkit-arm[data-place="right"] {
  --from: translateX(1.75rem);
}

.toolkit-title {
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  max-width: 9.5rem;
  color: var(--fg);
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 600;
  line-height: 1.3;
  position: relative;
}

.toolkit-link {
  display: none;
}

.toolkit-arm {
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: min(100%, 28rem);
  transition: opacity .25s;
  display: flex;
}

.toolkit:has(.toolkit-arm:hover) .toolkit-arm {
  opacity: .84;
}

.toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-arm[data-place="above"], .toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-arm[data-place="left"], .toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-arm[data-place="right"], .toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-arm[data-place="below"] {
  opacity: 1;
}

.toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-arm[data-place="above"] li {
  background: var(--hero-ice);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-arm[data-place="above"] li {
    background: color-mix(in srgb, var(--hero-ice) 50%, var(--bg-page));
  }
}

.toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-arm[data-place="left"] li {
  background: var(--hero-lavender);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-arm[data-place="left"] li {
    background: color-mix(in srgb, var(--hero-lavender) 50%, var(--bg-page));
  }
}

.toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-arm[data-place="right"] li {
  background: var(--hero-peach);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-arm[data-place="right"] li {
    background: color-mix(in srgb, var(--hero-peach) 50%, var(--bg-page));
  }
}

.toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-arm[data-place="below"] li {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-arm[data-place="below"] li {
    background: color-mix(in srgb, var(--hero-active) 26%, var(--bg-page));
  }
}

.toolkit-label {
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--fg);
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
}

.toolkit-label svg {
  flex: none;
}

.toolkit-arm ul {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.toolkit-arm li {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--fg);
  letter-spacing: -.01em;
  text-align: center;
  border-radius: .4rem;
  padding: .9rem 1rem;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
}

.toolkit-arm[data-place="above"], .toolkit-arm[data-place="below"] {
  width: max-content;
  max-width: 100%;
}

.toolkit-arm[data-place="above"] ul, .toolkit-arm[data-place="below"] ul {
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.toolkit-arm[data-place="above"] li, .toolkit-arm[data-place="below"] li {
  white-space: nowrap;
  flex: none;
  width: max-content;
}

.toolkit-arm[data-place="left"], .toolkit-arm[data-place="right"] {
  width: min(100%, 14rem);
}

.toolkit-arm[data-place="left"] ul, .toolkit-arm[data-place="right"] ul {
  flex-flow: column;
  align-items: stretch;
}

.toolkit-arm[data-place="above"] li {
  border-top: 2px solid var(--hero-ice-ink);
  background: var(--hero-ice);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit-arm[data-place="above"] li {
    background: color-mix(in srgb, var(--hero-ice) 34%, var(--bg-page));
  }
}

.toolkit-arm[data-place="left"] li {
  border-left: 2px solid var(--hero-lavender-ink);
  background: var(--hero-lavender);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit-arm[data-place="left"] li {
    background: color-mix(in srgb, var(--hero-lavender) 34%, var(--bg-page));
  }
}

.toolkit-arm[data-place="right"] li {
  border-left: 2px solid var(--hero-peach-ink);
  background: var(--hero-peach);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit-arm[data-place="right"] li {
    background: color-mix(in srgb, var(--hero-peach) 34%, var(--bg-page));
  }
}

.toolkit-arm[data-place="below"] li {
  border-top: 2px solid var(--hero-active);
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .toolkit-arm[data-place="below"] li {
    background: color-mix(in srgb, var(--hero-active) 16%, var(--bg-page));
  }
}

@media (min-width: 900px) {
  .toolkit {
    place-items: center;
    column-gap: var(--toolkit-col-gap);
    row-gap: var(--toolkit-row-gap);
    grid-template-columns: minmax(14rem, 1fr) 17rem minmax(14rem, 1fr);
    grid-template-areas: "above above above"
                         "left title right"
                         "below below below";
    width: 100%;
    display: grid;
  }

  .toolkit-hub {
    grid-area: title;
    width: 17rem;
    height: 17rem;
  }

  .toolkit-link {
    background: var(--fg);
    display: block;
    position: absolute;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .toolkit-link {
      background: color-mix(in srgb, var(--fg) 16%, var(--divider));
    }
  }

  .toolkit-link {
    transition: background-color .25s;
  }

  .toolkit-link[data-place="above"] {
    width: 1px;
    height: var(--toolkit-row-gap);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .toolkit-link[data-place="below"] {
    width: 1px;
    height: var(--toolkit-row-gap);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .toolkit-link[data-place="left"] {
    width: var(--toolkit-col-gap);
    height: 1px;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
  }

  .toolkit-link[data-place="right"] {
    width: var(--toolkit-col-gap);
    height: 1px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
  }

  .toolkit-node, .toolkit-signal {
    border-radius: 50%;
    width: .42rem;
    height: .42rem;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .toolkit-node {
    z-index: 1;
    transition: transform .25s;
  }

  .toolkit-node > span {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    display: block;
  }

  .toolkit-link[data-place="above"] .toolkit-node {
    top: 100%;
    left: 50%;
  }

  .toolkit-link[data-place="above"] .toolkit-node > span {
    background: var(--hero-ice-ink);
  }

  .toolkit-link[data-place="right"] .toolkit-node {
    top: 50%;
    left: 0;
  }

  .toolkit-link[data-place="right"] .toolkit-node > span {
    background: var(--hero-peach-ink);
  }

  .toolkit-link[data-place="below"] .toolkit-node {
    top: 0;
    left: 50%;
  }

  .toolkit-link[data-place="below"] .toolkit-node > span {
    background: var(--hero-active);
  }

  .toolkit-link[data-place="left"] .toolkit-node {
    top: 50%;
    left: 100%;
  }

  .toolkit-link[data-place="left"] .toolkit-node > span {
    background: var(--hero-lavender-ink);
  }

  .toolkit-signal {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
  }

  .toolkit-link[data-place="above"] .toolkit-signal {
    background: var(--hero-ice-ink);
  }

  .toolkit-link[data-place="right"] .toolkit-signal {
    background: var(--hero-peach-ink);
  }

  .toolkit-link[data-place="below"] .toolkit-signal {
    background: var(--hero-active);
  }

  .toolkit-link[data-place="left"] .toolkit-signal {
    background: var(--hero-lavender-ink);
  }

  .toolkit-link[data-place="above"] .toolkit-signal, .toolkit-link[data-place="below"] .toolkit-signal {
    left: 50%;
  }

  .toolkit-link[data-place="left"] .toolkit-signal, .toolkit-link[data-place="right"] .toolkit-signal {
    top: 50%;
  }

  html.reveal-ready #technologies.is-visible .toolkit-link[data-place="below"] .toolkit-signal {
    animation: 9s linear 1.1s infinite toolkit-idle-in;
  }

  html.reveal-ready #technologies.is-visible .toolkit-link[data-place="above"] .toolkit-signal {
    animation: 9s linear 1.1s infinite toolkit-idle-above;
  }

  html.reveal-ready #technologies.is-visible .toolkit-link[data-place="left"] .toolkit-signal {
    animation: 9s linear 1.1s infinite toolkit-idle-left;
  }

  html.reveal-ready #technologies.is-visible .toolkit-link[data-place="right"] .toolkit-signal {
    animation: 9s linear 1.1s infinite toolkit-idle-right;
  }

  html.reveal-ready #technologies.is-visible .toolkit:has(.toolkit-arm:hover) .toolkit-signal {
    opacity: 0;
    animation: none;
  }

  .toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-link[data-place="above"] {
    background: var(--hero-ice-ink);
  }

  .toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-link[data-place="above"] .toolkit-node {
    transform: translate(-50%, -50%) scale(1.35);
  }

  html.reveal-ready #technologies.is-visible .toolkit:has(.toolkit-arm[data-place="above"]:hover) .toolkit-link[data-place="above"] .toolkit-signal {
    animation: .7s ease-out toolkit-hover-above;
  }

  .toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-link[data-place="right"] {
    background: var(--hero-peach-ink);
  }

  .toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-link[data-place="right"] .toolkit-node {
    transform: translate(-50%, -50%) scale(1.35);
  }

  html.reveal-ready #technologies.is-visible .toolkit:has(.toolkit-arm[data-place="right"]:hover) .toolkit-link[data-place="right"] .toolkit-signal {
    animation: .7s ease-out toolkit-hover-right;
  }

  .toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-link[data-place="below"] {
    background: var(--hero-active);
  }

  .toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-link[data-place="below"] .toolkit-node {
    transform: translate(-50%, -50%) scale(1.35);
  }

  html.reveal-ready #technologies.is-visible .toolkit:has(.toolkit-arm[data-place="below"]:hover) .toolkit-link[data-place="below"] .toolkit-signal {
    animation: .7s ease-out toolkit-hover-below;
  }

  .toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-link[data-place="left"] {
    background: var(--hero-lavender-ink);
  }

  .toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-link[data-place="left"] .toolkit-node {
    transform: translate(-50%, -50%) scale(1.35);
  }

  html.reveal-ready #technologies.is-visible .toolkit:has(.toolkit-arm[data-place="left"]:hover) .toolkit-link[data-place="left"] .toolkit-signal {
    animation: .7s ease-out toolkit-hover-left;
  }

  .toolkit-arm[data-place="above"] {
    grid-area: above;
  }

  .toolkit-arm[data-place="below"] {
    grid-area: below;
  }

  .toolkit-arm[data-place="left"] {
    grid-area: left;
    justify-self: end;
    width: min(100%, 14rem);
  }

  .toolkit-arm[data-place="right"] {
    grid-area: right;
    justify-self: start;
    width: min(100%, 14rem);
  }
}

html.reveal-ready #technologies.section-reveal {
  opacity: 1;
  transition: none;
  transform: none;
}

html.reveal-ready #technologies:not(.is-visible) .toolkit-heading, html.reveal-ready #technologies:not(.is-visible) .toolkit-title, html.reveal-ready #technologies:not(.is-visible) .toolkit-label, html.reveal-ready #technologies:not(.is-visible) .toolkit-arm li, html.reveal-ready #technologies:not(.is-visible) .toolkit-node > span {
  opacity: 0;
}

html.reveal-ready #technologies:not(.is-visible) .toolkit-ring circle {
  stroke-dashoffset: 100px;
}

html.reveal-ready #technologies.is-visible .toolkit-heading {
  animation: .95s cubic-bezier(.22, 1, .36, 1) both toolkit-fade;
}

html.reveal-ready #technologies.is-visible .toolkit-title {
  animation: .95s cubic-bezier(.22, 1, .36, 1) .12s both toolkit-fade;
}

html.reveal-ready #technologies.is-visible .toolkit-ring circle {
  animation: .36s ease-out 80ms both toolkit-ring-draw;
}

html.reveal-ready #technologies.is-visible .toolkit-node > span {
  animation: .2s .38s both toolkit-node-in;
}

html.reveal-ready #technologies.is-visible .toolkit-label, html.reveal-ready #technologies.is-visible .toolkit-arm li {
  animation: .95s cubic-bezier(.22, 1, .36, 1) both toolkit-card;
  animation-delay: var(--enter, .42s);
}

@keyframes toolkit-fade {
  from {
    opacity: 0;
    transform: translateY(1.35rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toolkit-ring-draw {
  from {
    stroke-dashoffset: 100px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes toolkit-node-in {
  from {
    opacity: 0;
    transform: scale(.4);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toolkit-card {
  from {
    opacity: 0;
    transform: var(--from, translateY(.4rem));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toolkit-idle-in {
  0%, 68% {
    opacity: 0;
    top: 100%;
  }

  72% {
    opacity: .85;
    top: 100%;
  }

  82% {
    opacity: .6;
    top: 0%;
  }

  86%, 100% {
    opacity: 0;
    top: 0%;
  }
}

@keyframes toolkit-idle-above {
  0%, 82% {
    opacity: 0;
    top: 100%;
  }

  84% {
    opacity: .7;
    top: 100%;
  }

  94% {
    opacity: .2;
    top: 0%;
  }

  98%, 100% {
    opacity: 0;
    top: 0%;
  }
}

@keyframes toolkit-idle-left {
  0%, 82% {
    opacity: 0;
    left: 100%;
  }

  84% {
    opacity: .7;
    left: 100%;
  }

  94% {
    opacity: .2;
    left: 0%;
  }

  98%, 100% {
    opacity: 0;
    left: 0%;
  }
}

@keyframes toolkit-idle-right {
  0%, 82% {
    opacity: 0;
    left: 0%;
  }

  84% {
    opacity: .7;
    left: 0%;
  }

  94% {
    opacity: .2;
    left: 100%;
  }

  98%, 100% {
    opacity: 0;
    left: 100%;
  }
}

@keyframes toolkit-hover-above {
  from {
    opacity: 0;
    top: 0%;
  }

  20% {
    opacity: .9;
  }

  to {
    opacity: 0;
    top: 100%;
  }
}

@keyframes toolkit-hover-below {
  from {
    opacity: 0;
    top: 100%;
  }

  20% {
    opacity: .9;
  }

  to {
    opacity: 0;
    top: 0%;
  }
}

@keyframes toolkit-hover-left {
  from {
    opacity: 0;
    left: 0%;
  }

  20% {
    opacity: .9;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

@keyframes toolkit-hover-right {
  from {
    opacity: 0;
    left: 100%;
  }

  20% {
    opacity: .9;
  }

  to {
    opacity: 0;
    left: 0%;
  }
}

.aim-grid {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.aim {
  perspective: 1200px;
  cursor: pointer;
  margin: 0;
  display: flex;
  position: relative;
}

.aim-flip {
  width: 100%;
  min-height: 16rem;
  transform-style: preserve-3d;
  flex-direction: column;
  flex: 1;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  position: relative;
}

.aim.is-flipped .aim-flip {
  transform: rotateY(180deg);
}

.aim-face {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  backface-visibility: hidden;
  border-radius: 1.25rem;
}

.aim-front {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 32%);
  align-items: center;
  gap: .75rem 1.35rem;
  min-height: 16rem;
  padding: 1.55rem 1.15rem 1.55rem 1.5rem;
  display: grid;
  position: relative;
  overflow: hidden;
}

.aim-lead {
  align-self: start;
  min-width: 0;
}

.aim-art {
  pointer-events: none;
  justify-self: center;
  width: 100%;
  height: auto;
}

.aim-art-ice {
  color: var(--hero-ice-ink);
}

.aim-art-lavender {
  color: var(--hero-lavender-ink);
}

.aim-art-blush {
  color: var(--hero-blush-ink);
}

.aim-art-peach {
  color: var(--hero-peach-ink);
}

.aim-mark {
  border-radius: .9rem;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
}

.aim-mark-ice {
  background: var(--hero-ice);
  color: var(--hero-ice-ink);
}

.aim-mark-lavender {
  background: var(--hero-lavender);
  color: var(--hero-lavender-ink);
}

.aim-mark-blush {
  background: var(--hero-blush);
  color: var(--hero-blush-ink);
}

.aim-mark-peach {
  background: var(--hero-peach);
  color: var(--hero-peach-ink);
}

.aim-rule {
  border-radius: 999px;
  width: 2.15rem;
  height: .18rem;
  margin: 1.15rem 0 0;
  display: block;
}

.aim-rule-ice {
  background: var(--hero-ice-ink);
}

.aim-rule-lavender {
  background: var(--hero-lavender-ink);
}

.aim-rule-blush {
  background: var(--hero-blush-ink);
}

.aim-rule-peach {
  background: var(--hero-peach-ink);
}

.aim-back {
  cursor: pointer;
  min-height: 16rem;
  padding: 1.05rem 1.1rem .9rem;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: rotateY(180deg);
  container: aim / inline-size;
}

.aim.is-flipped .aim-front {
  pointer-events: none;
}

.aim-story {
  --tone: var(--hero-ice);
  --tone-ink: var(--hero-ice-ink);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

.aim-story-ice {
  --tone: var(--hero-ice);
  --tone-ink: var(--hero-ice-ink);
}

.aim-story-lavender {
  --tone: var(--hero-lavender);
  --tone-ink: var(--hero-lavender-ink);
  gap: .35rem;
}

.aim-lavender .aim-back, .aim-peach .aim-back {
  padding: .7rem .85rem .6rem;
}

.aim-story-blush {
  --tone: var(--hero-blush);
  --tone-ink: var(--hero-blush-ink);
}

.aim-story-peach {
  --tone: var(--hero-peach);
  --tone-ink: var(--hero-peach-ink);
  gap: .35rem;
}

.aim-return {
  text-align: center;
  border: 1px solid var(--divider);
  background: var(--bg-page);
  max-width: 100%;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  align-self: center;
  margin: 0;
  padding: .18rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}

.aim-return:hover {
  color: var(--tone-ink);
  border-color: var(--tone-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .aim-return:hover {
    border-color: color-mix(in srgb, var(--tone-ink) 45%, var(--divider));
  }
}

.aim-return-favorites {
  align-items: center;
  gap: .4rem;
  display: inline-flex;
}

.aim-heart-pill {
  font-size: .72rem;
  line-height: 1;
}

.aim-tools {
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  gap: .55rem .2rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.aim-tools li {
  min-width: 0;
  color: var(--tone-ink);
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  display: flex;
}

.aim-tools li[data-mark="grokbot"] {
  justify-content: center;
}

.aim-tools svg {
  fill: currentColor;
  width: 1.35rem;
  height: 1.35rem;
}

.aim-tools svg[data-wide] {
  aspect-ratio: 512 / 188;
  width: auto;
  height: 1.05rem;
}

.aim-tools span {
  text-align: center;
  max-width: 100%;
  color: var(--fg-muted);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.15;
}

@container aim (max-width: 22rem) {
  .aim-tools {
    gap: .35rem .08rem;
  }

  .aim-tools svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .aim-tools span {
    font-size: .58rem;
  }

  .aim-app {
    font-size: .68rem;
  }

  .aim-method-group h4 {
    font-size: .62rem;
  }

  .aim-method-group li {
    font-size: .64rem;
  }

  .aim-app {
    grid-template-rows: 1.9rem auto;
  }

  .aim-app-mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  .aim-app-word {
    width: min(100%, 3.4rem);
    height: 1.9rem;
  }
}

.aim-methods {
  flex: 1;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: .4rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.aim-method-group {
  background: var(--tone);
  border: 0;
  border-radius: .75rem;
  min-width: 0;
  margin: 0;
  padding: .45rem .5rem .5rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .aim-method-group {
    background: color-mix(in srgb, var(--tone) 42%, var(--bg-page));
  }
}

.aim-lavender .aim-method-group, .aim-blush .aim-method-group {
  background: none;
}

.aim-lavender .aim-method-group li, .aim-blush .aim-method-group li {
  background: var(--tone);
}

@supports (color: color-mix(in lab, red, red)) {
  .aim-lavender .aim-method-group li, .aim-blush .aim-method-group li {
    background: color-mix(in srgb, var(--tone) 42%, var(--bg-page));
  }
}

html[data-theme="dark"] .aim-lavender .aim-method-group li, html[data-theme="dark"] .aim-blush .aim-method-group li {
  color: var(--fg);
}

.aim-method-group-blush {
  --tone: var(--hero-blush);
  --tone-ink: var(--hero-blush-ink);
}

.aim-method-group-peach {
  --tone: var(--hero-peach);
  --tone-ink: var(--hero-peach-ink);
}

.aim-method-group h4 {
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 0 0 .32rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15;
}

.aim-method-group ul {
  flex-wrap: wrap;
  gap: .28rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.aim-method-group li {
  background: var(--bg-page);
  max-width: 100%;
  color: var(--tone-ink);
  border: 0;
  border-radius: 999px;
  padding: .14rem .46rem;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.25;
}

.aim-method-group li:has(a) {
  padding: 0;
}

.aim-method-group a {
  color: inherit;
  padding: .14rem .46rem;
  text-decoration: none;
  display: inline-flex;
}

.aim-methods-stack {
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}

.aim-methods-stack .aim-method-group {
  flex-direction: column;
  justify-self: center;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  padding: .36rem .5rem .4rem;
  display: flex;
}

.aim-methods-stack .aim-method-group h4 {
  text-align: left;
  color: var(--fg);
  margin-bottom: .2rem;
}

.aim-methods-stack .aim-method-group ul {
  flex-direction: column;
  align-items: flex-start;
  gap: .28rem;
}

.aim-methods-stack .aim-method-group li {
  width: max-content;
  color: var(--tone-ink);
  padding: .14rem .46rem;
  font-size: .62rem;
}

.aim-method-tools ul {
  grid-template-columns: max-content max-content;
  justify-content: start;
  justify-items: start;
  gap: .28rem;
  display: grid;
}

.aim-apps {
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  place-items: start center;
  gap: .85rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.aim-app {
  width: 100%;
  color: var(--fg);
  text-align: center;
  grid-template-rows: 2.4rem auto;
  place-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  display: grid;
}

.aim-apps span {
  color: var(--fg);
}

.aim-app-mark {
  width: 2.4rem;
  height: 2.4rem;
  fill: var(--fg);
  transition: transform .2s;
}

.aim-app-claude {
  fill: #d97757;
}

.aim-app-gemini {
  fill: url("#aim-gemini-fill");
}

.aim-app-word {
  width: min(100%, 4.2rem);
  height: 2.4rem;
}

.aim-app:hover .aim-app-mark {
  transform: scale(1.08);
}

.aim-hit {
  z-index: 2;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 1.25rem;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.aim-title {
  letter-spacing: -.03em;
  color: var(--fg);
  margin: .9rem 0 0;
  font-size: clamp(1.45rem, 1.7vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
}

.aim-copy {
  text-wrap: pretty;
  color: var(--fg);
  margin: .7rem 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
}

#lets-make-something-happen {
  scroll-margin-top: 4.75rem;
  position: relative;
}

#lets-make-something-happen.band {
  overflow: hidden;
}

.close-stage {
  display: grid;
  position: relative;
}

.close-fill, .close-copy {
  grid-area: 1 / 1;
}

.close-fill {
  z-index: 0;
}

.close-copy {
  z-index: 2;
  color: var(--on-black);
  padding: 2.5rem 1.5rem 2rem;
  position: relative;
}

.close-figure {
  z-index: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: min(16rem, 42vw);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-38%, 10px);
}

.close-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.reach {
  width: 100%;
  margin: 0 auto;
}

.reach-back {
  border: 1px solid var(--on-black);
  padding: 2.5rem 1.5rem 2rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .reach-back {
    border: 1px solid color-mix(in srgb, var(--on-black) 14%, transparent);
  }
}

.reach-back {
  background: var(--bg-black);
  color: var(--on-black);
  border-radius: 1.25rem;
}

.reach-back .band-title, .close-copy .band-title {
  color: var(--on-black);
}

.reach-lead {
  text-align: center;
  text-wrap: pretty;
  max-width: 38rem;
  color: var(--on-black);
  margin: 1.2rem auto 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
}

@supports (color: color-mix(in lab, red, red)) {
  .reach-lead {
    color: color-mix(in srgb, var(--on-black) 74%, var(--bg-black));
  }
}

.reach-actions {
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem auto 0;
  display: flex;
}

.reach-actions .hero-cta-close, .reach-copy {
  box-sizing: border-box;
  height: 2.45rem;
  padding-top: 0;
  padding-bottom: 0;
}

.reach-copy {
  border: 1px solid var(--on-black);
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin: 0;
  padding: .5rem .95rem;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .reach-copy {
    border: 1px solid color-mix(in srgb, var(--on-black) 40%, transparent);
  }
}

.reach-copy {
  color: var(--on-black);
  font: inherit;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
}

.reach-copy:hover {
  background: var(--on-black);
}

@supports (color: color-mix(in lab, red, red)) {
  .reach-copy:hover {
    background: color-mix(in srgb, var(--on-black) 12%, transparent);
  }
}

html[data-theme="dark"] .reach-copy:hover {
  background: none;
}

.reach-copy-label {
  display: grid;
}

.reach-copy-label > span {
  white-space: nowrap;
  grid-area: 1 / 1;
}

.reach-copy-label > span[aria-hidden="true"] {
  visibility: hidden;
}

.reach-linkedin {
  width: fit-content;
  color: var(--on-black);
  margin: 1.6rem auto 0;
  display: flex;
}

.reach-linkedin svg {
  width: 2.25rem;
  height: 2.25rem;
}

.reach-linkedin rect {
  fill: var(--linkedin);
  stroke: none;
}

.reach-colophon {
  color: var(--on-black);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 2.25rem;
  margin: 2.25rem 0 0;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .reach-colophon {
    color: color-mix(in srgb, var(--on-black) 62%, var(--bg-black));
  }
}

.reach-colophon {
  font-size: .84rem;
  line-height: 1.4;
}

.reach-colophon span {
  align-items: center;
  gap: .4rem;
  display: inline-flex;
}

.reach-colophon-foot, .reach-foot {
  display: none;
}

@media (max-width: 760px) {
  .contact-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .contact-modal {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    overscroll-behavior: contain;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 1.25rem 1.25rem 0 0;
    gap: .85rem;
    overflow: auto;
  }

  .contact-modal-top {
    align-items: flex-start;
  }

  .contact-modal h2 {
    text-wrap: balance;
    font-size: 1.22rem;
    line-height: 1.25;
  }

  .contact-modal-close {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
  }

  .contact-form input {
    min-height: 2.75rem;
  }

  .contact-form textarea {
    min-height: 6.5rem;
  }

  .contact-modal .contact-send {
    align-self: stretch;
    width: 100%;
  }

  .contact-thanks {
    min-height: 0;
  }
}

.candle-heading {
  align-items: start;
  min-height: 2.8rem;
  display: grid;
}

.candle-note-slot {
  min-height: 2.6rem;
  margin: .35rem 0 0;
}

.candle-steps {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 1.15rem 0 0;
  display: flex;
}

.candle-steps button {
  border: 1px solid var(--divider);
  color: var(--fg-dim);
  font: inherit;
  letter-spacing: -.01em;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  margin: 0;
  padding: .38rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
}

.candle-steps button[aria-pressed="true"] {
  border-color: var(--hero-navy);
  background: var(--hero-navy);
  color: var(--on-navy);
}

html[data-theme="dark"] .candle-steps button[aria-pressed="true"] {
  border-color: var(--chrome-border);
  background: var(--bg-black);
  color: var(--on-black);
}

.candle-steps .candle-play {
  box-sizing: border-box;
  border-color: var(--hero-navy);
  background: var(--hero-navy);
  width: 2.05rem;
  height: 2.05rem;
  color: var(--on-navy);
  place-items: center;
  padding: 0;
  display: grid;
}

.candle-steps .candle-play:hover {
  border-color: var(--hero-navy);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-steps .candle-play:hover {
    border-color: color-mix(in srgb, var(--hero-navy) 86%, black);
  }
}

.candle-steps .candle-play:hover {
  background: var(--hero-navy);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-steps .candle-play:hover {
    background: color-mix(in srgb, var(--hero-navy) 86%, black);
  }
}

html[data-theme="dark"] .candle-steps .candle-play, html[data-theme="dark"] .candle-steps .candle-play:hover {
  border-color: var(--chrome-border);
  background: var(--bg-black);
}

.candle-play-mark {
  border: .28rem solid #0000;
  border-left: .46rem solid;
  border-right-width: 0;
  width: 0;
  height: 0;
  margin-left: .12rem;
  display: block;
}

.candle-chart {
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin: 1.5rem auto 0;
  display: flex;
}

.candle-chart-settled {
  margin: 0;
}

.candle-stage {
  --candle-cards: 42rem;
  --candle-card-gap: 1rem;
  --candle-settle: .46;
  --candle-portrait: calc(17.5rem * var(--candle-settle) + .72rem);
  --candle-card-block: calc(1.15rem + 1rem + 4px + var(--candle-portrait, 8.77rem));
  min-height: calc(1.5rem + (var(--candle-card-block) * 2) + clamp(2.25rem, 6vw, 4.75rem));
  justify-content: center;
  align-items: center;
  display: flex;
}

.candle-scene {
  width: 100%;
  position: relative;
}

.candle-stage.is-joined {
  --candle-card-gap: clamp(2.25rem, 6vw, 4.75rem);
  --candle-cards: calc(41rem + var(--candle-card-gap));
}

.candle-line, .candle-cards {
  width: 100%;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

.candle-line {
  transition: width .88s cubic-bezier(.22, 1, .36, 1), gap .88s cubic-bezier(.22, 1, .36, 1);
}

.candle-line[data-count="1"] {
  width: min(100%, var(--candle-cards));
}

.candle-cards {
  width: min(100%, var(--candle-cards));
  min-height: calc((var(--candle-card-block) * 2) + clamp(2.25rem, 6vw, 4.75rem));
  align-content: start;
  transition: width .72s cubic-bezier(.22, 1, .36, 1), gap .72s cubic-bezier(.22, 1, .36, 1);
}

.candle-cards.is-packing {
  transition: none;
}

.candle-line {
  justify-content: center;
  display: flex;
}

.candle-line.is-snap, .candle-line.is-snap > .candle-shell {
  transition: none;
}

.candle-line[data-count="0"] > .candle-shell {
  width: 100%;
}

.candle-line[data-count="1"] > .candle-shell {
  width: calc(50% - .5rem);
}

.candle-cards {
  gap: var(--candle-card-gap);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.candle-join {
  width: min(100%, var(--candle-cards));
  pointer-events: none;
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.candle-join-paths {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.candle-join-paths path {
  fill: none;
  stroke: var(--hero-blush-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-join-paths path {
    stroke: color-mix(in srgb, var(--hero-blush-ink) 68%, var(--divider));
  }
}

.candle-join-paths path {
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.candle-join-dot {
  z-index: 1;
  background: var(--hero-blush-ink);
  border-radius: 999px;
  width: .42rem;
  height: .42rem;
  margin: -.21rem 0 0 -.21rem;
  position: absolute;
}

.candle-stage.is-spark .candle-shell.is-card {
  border-color: var(--hero-blush-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-stage.is-spark .candle-shell.is-card {
    border-color: color-mix(in srgb, var(--hero-blush-ink) 40%, var(--divider));
  }
}

.candle-stage.is-boom .candle-join-dot {
  animation: .55s cubic-bezier(.22, 1, .36, 1) candle-dot-pulse;
}

.candle-stage.is-boom .candle-shell.is-card {
  animation: .55s cubic-bezier(.22, 1, .36, 1) forwards candle-boom;
}

@keyframes candle-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-blush-ink) 50%, transparent);
    transform: scale(1);
  }

  42% {
    box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--hero-blush-ink) 0%, transparent);
    transform: scale(1.9);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 #0000;
  }
}

@keyframes candle-boom {
  0% {
    border-color: var(--divider);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-blush-ink) 42%, transparent);
    transform: scale(1);
  }

  38% {
    border-color: color-mix(in srgb, var(--hero-blush-ink) 72%, var(--divider));
    box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--hero-blush-ink) 0%, transparent);
    transform: scale(1.035);
  }

  100% {
    border-color: color-mix(in srgb, var(--hero-blush-ink) 40%, var(--divider));
    transform: scale(1);
    box-shadow: 0 0 #0000;
  }
}

.candle-join-brain {
  z-index: 2;
  width: 4.4rem;
  height: 4.4rem;
  color: var(--hero-blush-ink);
  transform-origin: center;
  background: none;
  border: 0;
  place-items: center;
  margin-top: -2.2rem;
  margin-left: -2.2rem;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
}

.candle-join-brain svg {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

.candle-shell {
  box-sizing: border-box;
  background: none;
  border: 1px solid #0000;
  border-radius: 1.25rem;
  margin: 0;
  transition: width .65s cubic-bezier(.22, 1, .36, 1), padding .65s cubic-bezier(.22, 1, .36, 1), background-color .65s cubic-bezier(.22, 1, .36, 1), border-color .65s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.candle-shell.is-card {
  border-width: 2px;
  border-color: var(--divider);
  background: var(--bg-band);
  padding: 1.15rem .85rem 1rem;
}

.candle-shell.is-shrinking, .candle-cards > .candle-shell.is-shrinking {
  transition: none;
  overflow: visible;
}

.candle-shrink-plot {
  position: absolute;
  top: 0;
  left: 0;
}

.candle-cards > .candle-shell {
  width: auto;
  transition: padding .65s cubic-bezier(.22, 1, .36, 1), background-color .65s cubic-bezier(.22, 1, .36, 1), border-color .65s cubic-bezier(.22, 1, .36, 1);
}

.candle-fit {
  width: 100%;
  position: relative;
}

.candle-fit .candle-chart {
  margin: 0;
}

.candle-fit-scale {
  transform-origin: bottom;
  width: 100%;
  position: relative;
}

.candle-fit-scale.is-packed {
  transform-origin: bottom;
  width: max-content;
  position: absolute;
  bottom: 0;
  left: 50%;
}

.candle-fit-scale.is-packed .candle-chart, .candle-fit-scale.is-packed .candle-row {
  width: max-content;
  margin: 0;
}

.candle-stack {
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.candle-base {
  flex: none;
  width: 100%;
}

.candle-extend {
  width: 100%;
  height: var(--extend);
  transform-origin: bottom;
  flex: none;
  transform: scaleY(0);
}

.candle-extend.is-full {
  transform: none;
}

.candle-extend.is-filling {
  animation: .9s cubic-bezier(.22, 1, .36, 1) forwards candle-fill;
}

.candle-note {
  text-align: center;
  text-wrap: pretty;
  max-width: 36rem;
  color: var(--fg-dim);
  margin: 0 auto;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
}

.candle-row {
  --candle-width: clamp(2.4rem, 10vw, 4.75rem);
  --candle-gap: clamp(.5rem, 3.4vw, 2.25rem);
  justify-content: center;
  align-items: flex-end;
  gap: var(--candle-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.candle {
  flex: 0 0 var(--candle-width);
  width: var(--candle-width);
  position: relative;
}

.candle-spark {
  height: var(--spark);
  transform-origin: bottom;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  transform: scaleY(0);
}

.candle-stage.is-spark .candle-spark {
  transform: none;
}

.candle-stage.is-boom .candle-spark {
  animation: .7s cubic-bezier(.22, 1, .36, 1) .55s both candle-fill;
}

.candle-tone-ice {
  --candle: var(--hero-ice);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle: color-mix(in srgb, var(--hero-ice) 40%, var(--hero-ice-ink));
  }
}

.candle-tone-ice {
  --candle-frame: var(--hero-ice-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle-frame: color-mix(in srgb, var(--hero-ice-ink) 48%, var(--divider));
  }
}

.candle-tone-ice {
  --candle-lavender: var(--hero-lavender);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle-lavender: color-mix(in srgb, var(--hero-lavender) 40%, var(--hero-lavender-ink));
  }
}

.candle-tone-ice {
  --candle-lavender-frame: var(--hero-lavender-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle-lavender-frame: color-mix(in srgb, var(--hero-lavender-ink) 48%, var(--divider));
  }
}

.candle-tone-ice {
  --candle-peach: var(--hero-peach);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle-peach: color-mix(in srgb, var(--hero-peach) 48%, var(--hero-peach-ink));
  }
}

.candle-tone-ice {
  --candle-peach-frame: var(--hero-peach-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-ice {
    --candle-peach-frame: color-mix(in srgb, var(--hero-peach-ink) 48%, var(--divider));
  }
}

.candle-tone-lavender {
  --candle: var(--hero-lavender);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-lavender {
    --candle: color-mix(in srgb, var(--hero-lavender) 40%, var(--hero-lavender-ink));
  }
}

.candle-tone-lavender {
  --candle-frame: var(--hero-lavender-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-lavender {
    --candle-frame: color-mix(in srgb, var(--hero-lavender-ink) 48%, var(--divider));
  }
}

.candle-tone-blush {
  --candle: var(--hero-blush);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-blush {
    --candle: color-mix(in srgb, var(--hero-blush) 40%, var(--hero-blush-ink));
  }
}

.candle-tone-blush {
  --candle-frame: var(--hero-blush-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-blush {
    --candle-frame: color-mix(in srgb, var(--hero-blush-ink) 48%, var(--divider));
  }
}

.candle-tone-peach {
  --candle: var(--hero-peach);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-peach {
    --candle: color-mix(in srgb, var(--hero-peach) 48%, var(--hero-peach-ink));
  }
}

.candle-tone-peach {
  --candle-frame: var(--hero-peach-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .candle-tone-peach {
    --candle-frame: color-mix(in srgb, var(--hero-peach-ink) 48%, var(--divider));
  }
}

.candle-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.candle-frame {
  fill: none;
  stroke: var(--candle-frame);
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

.candle-body {
  fill: var(--candle);
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
}

.candle-body-lavender, .candle.is-full .candle-body-lavender, .candle.is-filling .candle-body-lavender {
  fill: var(--candle-lavender);
  animation: none;
  transform: none;
}

.candle-frame-lavender {
  stroke: var(--candle-lavender-frame);
}

.candle-body-peach, .candle.is-full .candle-body-peach {
  fill: var(--candle-peach);
  animation: none;
  transform: none;
}

.candle-frame-peach {
  stroke: var(--candle-peach-frame);
}

.candle.is-full .candle-body {
  transform: scaleY(1);
}

.candle.is-filling .candle-body {
  animation: .9s cubic-bezier(.22, 1, .36, 1) forwards candle-fill;
}

@keyframes candle-fill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@media (min-width: 640px) {
  .journey-card-inner {
    padding: 3.15rem 2.5rem 2.15rem;
  }

  .journey-card[data-place="left"] .journey-card-inner, .journey-card[data-place="right"] .journey-card-inner, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner {
    padding: 1.85rem 1.25rem;
  }

  .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-card-inner {
    padding: 3.15rem 2.5rem 2.15rem;
  }

  .reach-back, .close-copy {
    padding: 3rem 2.25rem 2.4rem;
  }

  .band {
    padding: 6rem 0;
  }

  .stack-banner {
    margin-bottom: 3.7rem;
  }

  .band-inner {
    width: min(70rem, 100% - 6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-rain {
    display: none;
  }

  .stack-banner {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .stack-track {
    justify-content: center;
    width: auto;
    animation: none;
  }

  .stack-track ul {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2.4rem;
    width: min(70rem, 100% - 3rem);
    margin: 0 auto;
    padding-right: 0;
  }

  .stack-track ul[aria-hidden="true"], .toolkit-signal {
    display: none;
  }

  .toolkit-ring circle, .toolkit-heading, .toolkit-title, .toolkit-label, .toolkit-arm, .toolkit-arm li, .toolkit-node, .toolkit-node > span {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: none;
    animation: none;
  }

  .journey-card, .journey-card-inner, .journey-photos, .journey-slide-shade, .journey-slides, .journey-slides img, .journey-slides img.is-on, .journey-debidev-mark, .journey-more, .journey-company, .candle-line, .candle-cards, .candle-shell, .candle-stage.is-joined .candle-shell.is-card, .candle-stage.is-spark .candle-spark, .candle-stage.is-boom .candle-join-dot {
    transition: none;
    animation: none;
  }

  .journey-slides img, .journey-slides img.is-on {
    transform: none;
  }

  .candle-stage.is-joined .candle-shell.is-card {
    border-color: var(--hero-blush-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .candle-stage.is-joined .candle-shell.is-card {
      border-color: color-mix(in srgb, var(--hero-blush-ink) 40%, var(--divider));
    }
  }

  .candle-stage.is-spark .candle-spark {
    transform: none;
  }

  .aim-flip, .aim.is-flipped .aim-flip, .aim-app-mark {
    transition: none;
    transform: none;
  }

  .aim.is-flipped .aim-front {
    display: none;
  }

  .aim.is-flipped .aim-back {
    position: relative;
    transform: none;
  }

  .candle-body, .candle.is-full .candle-body, .candle.is-filling .candle-body, .candle-extend, .candle-extend.is-filling, .candle-extend.is-full {
    animation: none;
    transform: none;
  }
}

.contact-modal-backdrop {
  z-index: 40;
  background: #00000075;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.contact-modal {
  background: var(--bg-page);
  width: min(28rem, 100%);
  color: var(--fg);
  border-radius: 1.25rem;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  box-shadow: 0 24px 60px #0000003d;
}

.contact-modal.is-consult {
  width: min(46rem, 100%);
  padding: 1.6rem 1.7rem 1.5rem;
  overflow: hidden;
}

.contact-modal.is-consult.is-sent {
  width: min(24rem, 100%);
  padding: 1.35rem 1.4rem 1.25rem;
}

.contact-modal.is-consult.is-sent .contact-thanks {
  min-height: 0;
}

.contact-modal.is-consult.is-sent .contact-thanks .contact-send {
  align-self: flex-end;
}

.contact-modal.is-consult.is-sent .contact-thanks-mark svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 760px) {
  .contact-modal.is-consult {
    overflow: auto;
  }
}

.contact-modal.is-consult .consult-intent {
  margin-bottom: 1rem;
}

.contact-modal.is-consult .contact-form textarea {
  min-height: 18rem;
}

.consult-title {
  align-items: center;
  gap: .7rem;
  min-width: 0;
  display: flex;
}

.consult-title-mark {
  color: #000;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

html[data-theme="dark"] .consult-title-mark {
  color: #fff;
}

.consult-intent {
  color: var(--fg-muted);
  margin: -.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

.contact-modal-top {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.contact-modal h2 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
}

.contact-modal-close {
  width: 2rem;
  height: 2rem;
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.contact-modal-close:hover {
  color: var(--fg);
  background: var(--bg-band);
}

.contact-form {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.contact-note {
  color: var(--fg-muted);
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
}

.contact-stars {
  justify-content: center;
  display: flex;
}

.contact-form input, .contact-form textarea {
  border: 1px solid var(--divider);
  background: var(--bg-band);
  width: 100%;
  color: var(--fg);
  font: inherit;
  border-radius: .9rem;
  padding: .8rem .95rem;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 8.5rem;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  .contact-form input:focus, .contact-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--fg) 35%, transparent);
  }
}

.contact-form input:focus, .contact-form textarea:focus {
  outline-offset: 1px;
}

.contact-error {
  color: var(--fg);
  margin: 0;
  font-size: .92rem;
}

.contact-send {
  color: #fff;
  font: inherit;
  cursor: pointer;
  background: #000;
  border: 1px solid #0000;
  border-radius: 999px;
  align-self: flex-end;
  padding: .7rem 1.15rem;
  font-size: .95rem;
  font-weight: 600;
}

.contact-send:disabled {
  opacity: .45;
  cursor: default;
}

.contact-send:not(:disabled):hover {
  transform: translateY(-1px);
}

.contact-thanks {
  flex-direction: column;
  align-items: center;
  min-height: 14rem;
  display: flex;
}

.contact-thanks-body {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  width: 100%;
  display: flex;
}

.contact-thanks p {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
}

.contact-thanks .contact-send {
  align-self: flex-end;
  margin-top: 1.25rem;
}

.contact-thanks-mark {
  background: var(--hero-active);
  color: #fff;
  border-radius: 999px;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
}

.contact-thanks-mark svg {
  display: block;
}

.own-solutions {
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  display: flex;
}

.own-solutions .band-title {
  max-width: 28em;
}

html.is-letter-flight, html.is-letter-flight body {
  pointer-events: none;
}

.own-solutions.is-fading .band-title, .own-solutions.is-fading .own-solutions-action {
  z-index: 16;
  position: relative;
}

.building-focus {
  min-height: 100svh;
  margin-top: calc(-1 * var(--portfolio-header-height, 4.15rem));
  background: var(--bg-page);
  text-align: left;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.building-focus:before {
  content: "";
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  background-image: url("/assets/blocks-C4nWPaRi.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0;
}

.building-focus:after {
  content: "";
  z-index: 0;
  background: var(--hero-shade);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  inset: 0;
}

.building-focus-copy {
  z-index: 1;
  text-align: left;
  flex-direction: column;
  align-items: stretch;
  width: min(44rem, 100% - 3rem);
  margin-inline: auto;
  display: flex;
  position: relative;
}

.building-focus-title {
  color: var(--fg);
  letter-spacing: -.045em;
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
}

.building-focus-lead {
  color: var(--fg-muted);
  margin: 1.1rem 0 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
}

.building-focus-lead + .building-focus-lead {
  margin-top: .85rem;
}

.building-focus-join {
  color: #fff;
  cursor: pointer;
  background: #000;
  border: 1px solid #0000;
  border-radius: 999px;
  align-self: center;
  align-items: center;
  gap: .45rem;
  margin-top: 1.6rem;
  padding: .8rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
}

.building-focus-join svg {
  width: 1.05rem;
  height: 1.05rem;
}

html[data-theme="dark"] .building-focus-join {
  background: var(--fg);
  color: var(--bg-page);
}

.building-focus ~ .band {
  scroll-margin-top: var(--portfolio-header-height, 4.15rem);
}

@media (prefers-reduced-motion: no-preference) {
  .building-focus.is-entered:before {
    animation: 2.8s linear both building-desk-in;
  }

  .building-focus.is-entered .building-focus-title {
    animation: .72s cubic-bezier(.22, 1, .36, 1) both building-from-top;
  }

  .building-focus.is-entered .building-focus-lead, .building-focus.is-entered .building-focus-join {
    animation: .72s cubic-bezier(.22, 1, .36, 1) both building-from-bottom;
  }
}

@keyframes building-desk-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes building-from-top {
  from {
    opacity: 0;
    transform: translateY(-46vh);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.building-offer {
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 20rem);
  align-items: center;
  gap: 2.5rem 4rem;
  display: grid;
}

.building-offer-copy h2 {
  max-width: 16em;
  color: var(--fg);
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 600;
  line-height: 1.2;
}

.building-offer-copy p {
  max-width: 36rem;
  color: var(--fg-muted);
  margin: .9rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

.building-offer-card {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  border-radius: 1.15rem;
  flex-direction: column;
  align-items: stretch;
  padding: 1.35rem 1.2rem 1.15rem;
  display: flex;
  position: relative;
}

.band-paper .building-offer-card {
  background: var(--bg-band);
}

.building-offer-mark {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 1.35rem;
  left: 1.2rem;
}

.building-offer-mark.is-ice {
  color: var(--hero-ice-ink);
}

.building-offer-mark.is-lavender {
  color: var(--hero-lavender-ink);
}

.building-offer-mark.is-blush {
  color: var(--hero-blush-ink);
}

html[data-theme="dark"] .building-offer-mark.is-ice {
  color: var(--hero-ice);
}

html[data-theme="dark"] .building-offer-mark.is-lavender {
  color: var(--hero-lavender);
}

html[data-theme="dark"] .building-offer-mark.is-blush {
  color: var(--hero-blush);
}

.building-offer-name {
  min-height: 1.5rem;
  color: var(--fg);
  text-align: center;
  letter-spacing: -.02em;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-inline: 2.15rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  display: flex;
}

.building-offer-price {
  color: var(--fg);
  letter-spacing: -.03em;
  align-items: baseline;
  gap: .4rem;
  margin: .55rem 0 0;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.building-offer-unit {
  letter-spacing: 0;
  font-size: .95rem;
  font-weight: 600;
}

.building-offer-detail {
  color: var(--fg-muted);
  margin: .7rem 0 0;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
}

.building-offer-note {
  background: var(--bg-band);
  color: var(--fg-muted);
  border-radius: .75rem;
  align-items: flex-start;
  gap: .45rem;
  margin: 1.05rem 0 0;
  padding: .7rem .85rem;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
}

.band-paper .building-offer-note {
  background: var(--bg-page);
}

html[data-theme="dark"] .building-offer-note, html[data-theme="dark"] .band-paper .building-offer-note {
  background: var(--fg);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .building-offer-note, html[data-theme="dark"] .band-paper .building-offer-note {
    background: color-mix(in srgb, var(--fg) 8%, var(--bg-page));
  }
}

.building-offer-note svg {
  width: .95rem;
  height: .95rem;
  color: var(--hero-active);
  flex: none;
  margin-top: .12rem;
}

.building-offer-action {
  color: #fff;
  cursor: pointer;
  background: #000;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  padding: .8rem 1.2rem;
  font-size: .98rem;
  font-weight: 600;
  display: inline-flex;
}

.building-offer-action svg {
  width: 1rem;
  height: 1rem;
}

html[data-theme="dark"] .building-offer-action {
  background: var(--fg);
  color: var(--bg-page);
}

@keyframes building-from-bottom {
  from {
    opacity: 0;
    transform: translateY(46vh);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-send:not(:disabled):hover {
    transform: none;
  }
}

@media (max-width: 760px) {
  .work-where-company {
    display: none;
  }
}

@media (max-width: 900px) {
  .work-feature, .works-rest {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .work-feature:hover, .work-card:hover {
    background: var(--bg-band);
  }

  .work-feature.is-in-view, .work-card.is-in-view, .work-feature.is-in-view:hover, .work-card.is-in-view:hover {
    background: var(--fg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .work-feature.is-in-view, .work-card.is-in-view, .work-feature.is-in-view:hover, .work-card.is-in-view:hover {
      background: color-mix(in srgb, var(--fg) 7%, var(--bg-band));
    }
  }

  html:not([data-theme="dark"]) .work-card:hover .work-link-kinessor, html:not([data-theme="dark"]) .work-card:hover .work-link-april {
    background: none;
  }

  html:not([data-theme="dark"]) .work-card.is-in-view .work-link-kinessor, html:not([data-theme="dark"]) .work-card.is-in-view .work-link-april, html:not([data-theme="dark"]) .work-card.is-in-view:hover .work-link-kinessor, html:not([data-theme="dark"]) .work-card.is-in-view:hover .work-link-april {
    background: var(--bg-page);
  }

  html.reveal-ready #technologies:not(.is-visible) .toolkit-heading, html.reveal-ready #technologies:not(.is-visible) .toolkit-title, html.reveal-ready #technologies:not(.is-visible) .toolkit-label, html.reveal-ready #technologies:not(.is-visible) .toolkit-arm li, html.reveal-ready #technologies:not(.is-visible) .toolkit-node > span, html.reveal-ready #technologies.is-visible .toolkit-heading, html.reveal-ready #technologies.is-visible .toolkit-title, html.reveal-ready #technologies.is-visible .toolkit-label, html.reveal-ready #technologies.is-visible .toolkit-arm li, html.reveal-ready #technologies.is-visible .toolkit-node > span {
    opacity: 1;
    animation: none;
    transform: none;
  }

  html.reveal-ready #technologies:not(.is-visible) .toolkit-ring circle, html.reveal-ready #technologies.is-visible .toolkit-ring circle {
    stroke-dashoffset: 0;
    animation: none;
  }
}

@media (max-width: 719px) {
  #built-to-solve-title {
    text-align: left;
  }

  .aim-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .aim-front {
    grid-template-columns: minmax(0, 1fr) 4.25rem;
    gap: .75rem 0;
    padding: 1.25rem 1rem 1.25rem 1.2rem;
  }

  .aim-lead {
    z-index: 1;
    margin-right: -1.85rem;
    position: relative;
  }

  .aim-art {
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    width: 10rem;
    max-width: none;
    height: 10rem;
    margin: -5rem 0 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: none;
  }

  .aim-art-ice {
    color: var(--hero-ice-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aim-art-ice {
      color: color-mix(in srgb, var(--hero-ice-ink) 80%, transparent);
    }
  }

  .aim-art-lavender {
    color: var(--hero-lavender-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aim-art-lavender {
      color: color-mix(in srgb, var(--hero-lavender-ink) 80%, transparent);
    }
  }

  .aim-art-blush {
    color: var(--hero-blush-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aim-art-blush {
      color: color-mix(in srgb, var(--hero-blush-ink) 80%, transparent);
    }
  }

  .aim-art-peach {
    color: var(--hero-peach-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aim-art-peach {
      color: color-mix(in srgb, var(--hero-peach-ink) 80%, transparent);
    }
  }

  .aim-lavender .aim-back, .aim-blush .aim-back {
    padding: .6rem .75rem .5rem;
  }

  .aim-lavender .aim-story, .aim-blush .aim-story {
    justify-content: center;
    gap: .3rem;
  }

  .aim-lavender .aim-return, .aim-blush .aim-return {
    padding: .12rem .5rem;
    font-size: .68rem;
  }

  .aim-lavender .aim-methods, .aim-blush .aim-methods-stack {
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: .28rem .45rem;
  }

  .aim-blush .aim-methods-stack .aim-method-group {
    justify-self: stretch;
    width: 100%;
  }

  .aim-lavender .aim-method-group h4, .aim-blush .aim-methods-stack .aim-method-group h4 {
    margin-bottom: .18rem;
    font-size: .68rem;
    line-height: 1.15;
  }

  .aim-blush .aim-methods-stack .aim-method-group h4 {
    text-align: center;
  }

  html[data-theme="dark"] .aim-lavender .aim-method-group h4, html[data-theme="dark"] .aim-blush .aim-methods-stack .aim-method-group h4 {
    color: var(--on-black);
    text-underline-offset: .18em;
    text-decoration: underline;
  }

  .aim-lavender .aim-method-group ul {
    flex-flow: wrap;
    gap: 1px;
    display: flex;
  }

  .aim-blush .aim-methods-stack .aim-method-group ul, .aim-blush .aim-method-tools ul {
    flex-flow: column;
    align-items: center;
    gap: 1px;
    display: flex;
  }

  .aim-lavender .aim-method-group li, .aim-blush .aim-method-group li {
    background: none;
    width: auto;
    max-width: 100%;
    padding: 0;
    font-size: .64rem;
    line-height: 1.2;
  }

  .aim-blush .aim-method-group li, .aim-blush .aim-method-group li:hover, .aim-blush .aim-method-group li:active, .aim-blush .aim-method-group a, .aim-blush .aim-method-group a:hover, .aim-blush .aim-method-group a:active, .aim-blush .aim-return, .aim-blush .aim-return:hover, .aim-blush .aim-return:active {
    -webkit-tap-highlight-color: transparent;
  }

  .aim-blush .aim-method-group li:hover, .aim-blush .aim-method-group li:active, .aim-blush .aim-method-group a:hover, .aim-blush .aim-method-group a:active {
    background: none;
  }

  .aim-blush .aim-return:hover, .aim-blush .aim-return:active {
    color: var(--fg-muted);
    border-color: var(--divider);
    background: var(--bg-page);
  }
}

@media (max-width: 760px) {
  .aim-flip {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    transform: rotateY(0);
  }

  .aim.is-flipped .aim-flip {
    transform: rotateY(180deg);
  }

  .aim-front {
    transition: visibility 0s linear .1s;
    transform: rotateY(0);
  }

  .aim-lead, .aim-art, .aim-hit {
    backface-visibility: hidden;
  }

  .aim.is-flipped .aim-front {
    visibility: hidden;
    transition: visibility 0s linear .35s;
  }
}

@media (max-width: 719px) {
  .close-figure {
    width: 11rem;
    transform: translate(-16%, 10px);
  }
}

@media (max-width: 760px) {
  .close-copy .reach-colophon {
    display: none;
  }

  .reach-foot {
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    width: min(70rem, 100% - 3rem);
    margin: 2.15rem auto 3rem;
    display: flex;
  }

  .pro .reach-foot {
    width: 100%;
    margin: 2.15rem 0 3rem;
  }

  .reach-colophon-foot {
    width: 100%;
    color: var(--fg-dim);
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    transition: none;
    animation: none;
    display: flex;
  }

  #lets-make-something-happen.band, #lets-make-something-happen.pro-section {
    padding-bottom: 1.15rem;
  }

  #lets-make-something-happen.pro-section {
    border-bottom: 0;
  }

  .stack-rain svg {
    width: auto;
    height: 1.15rem;
  }

  .stack-banner-all {
    display: none;
  }

  .stack-banner-lead, .stack-banner-foot {
    display: block;
  }

  .stack-banner-lead .stack-track, .stack-banner-foot .stack-track {
    animation-duration: 42s;
  }

  .stack-banner-lead:hover .stack-track, .stack-banner-lead:active .stack-track, .stack-banner-foot:hover .stack-track, .stack-banner-foot:active .stack-track {
    animation-play-state: running;
  }

  .stack-banner-lead .stack-track ul, .stack-banner-foot .stack-track ul {
    gap: 1.25rem;
    padding-right: 1.25rem;
  }

  .stack-banner-lead .stack-track li, .stack-banner-foot .stack-track li {
    justify-content: center;
    width: 4.6rem;
  }

  .stack-banner-lead .stack-track svg, .stack-banner-foot .stack-track svg {
    max-width: 100%;
  }

  #candles.band {
    padding-bottom: 0;
  }

  .stack-banner-foot {
    margin: 1.75rem 0 0;
    padding: 1.35rem 0 1.25rem;
  }
}

@media (max-width: 719px) {
  #candles .band-inner {
    grid-template-areas: "steps"
                         "title"
                         "note"
                         "scene";
    row-gap: .3rem;
    display: grid;
  }

  #candles .candle-steps {
    grid-area: steps;
    margin: 0 0 .35rem;
  }

  #candles .candle-heading {
    background: none;
    grid-area: title;
    min-height: 0;
    padding: 0;
  }

  #candles .candle-note-slot {
    background: none;
    grid-area: note;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  #candles .candle-heading .band-title {
    font-size: clamp(1.22rem, 5.1vw, 1.6rem);
  }

  #candles .candle-note {
    font-size: .95rem;
  }

  #candles .candle-stage {
    grid-area: scene;
    align-items: flex-start;
    margin-top: .15rem;
  }

  #candles .candle-line, #candles .candle-cards, #candles .candle-chart {
    margin-top: .2rem;
  }

  #candles .candle-row {
    --candle-width: clamp(2rem, 12vw, 3rem);
    --candle-gap: .32rem;
  }

  #candles .candle-shell.is-card {
    padding-inline: .4rem;
  }
}

@media (max-width: 899px) {
  #professional-journey.band {
    margin-bottom: 1.75rem;
  }

  .journey-row {
    height: auto;
  }

  .journey {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    height: auto;
  }

  .journey-sizer {
    display: none;
  }

  .journey-card, .journey-card[data-place="left"], .journey-card[data-place="center"], .journey-card[data-place="right"] {
    flex: none;
    width: 100%;
    height: auto;
    min-height: auto;
  }

  .journey-card-inner, .journey-card[data-place="left"] .journey-card-inner, .journey-card[data-place="right"] .journey-card-inner, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-card-inner, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-card-inner, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-card-inner {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 1.85rem 1.35rem;
  }

  .journey-stack, .journey-card .journey-more, .journey-card[data-place="left"] .journey-more, .journey-card[data-place="right"] .journey-more, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more {
    opacity: 1;
    flex: none;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .journey-role {
    margin-top: .95rem;
    line-height: 1.45;
  }

  .journey-tags {
    flex-wrap: nowrap;
    justify-content: center;
    gap: .3rem;
    margin-top: 1rem;
  }

  .journey-tags li {
    letter-spacing: -.03em;
    white-space: nowrap;
    padding: .24rem .4rem;
    font-size: clamp(.56rem, 2.35vw, .78rem);
  }

  .journey-copy {
    margin: 1.05rem auto .35rem;
    line-height: 1.65;
  }

  .journey .journey-more, .journey:has([data-place="left"]:is(:hover, :focus-visible)) .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) .journey-more, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-more, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-more {
    opacity: 1;
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .journey-foot, .journey-site, .journey-card .journey-site, .journey-card[data-place="center"]:is(:hover, :focus-within) .journey-site, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-site, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-site {
    display: none;
  }

  .journey-photos, .journey-card:hover .journey-photos, .journey-card:focus-within .journey-photos, .journey-card.is-photos .journey-photos {
    opacity: 1;
    pointer-events: auto;
    width: 2.75rem;
    height: 2.75rem;
  }

  .journey-card[data-mark="kinessor"] .journey-photos {
    left: auto;
    right: .7rem;
  }

  .journey-card .journey-company, .journey-card[data-place="left"] .journey-company, .journey-card[data-place="right"] .journey-company, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-company, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-company {
    height: auto;
    font-size: clamp(1.65rem, 6vw, 2.1rem);
    display: flex;
  }

  .journey-card .journey-company img, .journey-card[data-place="left"] .journey-company img, .journey-card[data-place="right"] .journey-company img, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company img, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-company img {
    max-width: min(100%, 14rem);
    height: 2.05rem;
  }

  .journey-card[data-mark="kinessor"] .journey-company img, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="kinessor"] .journey-company img {
    max-width: min(100%, 16rem);
    height: 2.6rem;
  }

  .journey-card[data-mark="april"] .journey-company img, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="april"] .journey-company img {
    max-width: min(100%, 13rem);
    height: 2rem;
  }

  .journey-card .journey-debidev-mark, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-debidev-mark, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-debidev-mark {
    max-width: min(100%, 18rem);
    height: 3.2rem;
  }

  .journey-card .journey-line, .journey-card[data-place="left"] .journey-line, .journey-card[data-place="right"] .journey-line, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="center"] .journey-line, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-place="left"] .journey-line, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-place="right"] .journey-line {
    min-height: 0;
  }

  .journey-card .journey-line span, .journey-card[data-place="left"] .journey-line span, .journey-card[data-place="right"] .journey-line span, .journey:has([data-place="left"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span, .journey:has([data-place="right"]:is(:hover, :focus-visible)) [data-mark="debidev"] .journey-line span {
    display: inline;
  }

  .journey-card .journey-line span + span:before, .journey-card[data-place="left"] .journey-line span + span:before, .journey-card[data-place="right"] .journey-line span + span:before {
    content: " ";
  }

  .toolkit-heading {
    white-space: normal;
  }

  .toolkit-arm, .toolkit-arm[data-place="above"], .toolkit-arm[data-place="below"], .toolkit-arm[data-place="left"], .toolkit-arm[data-place="right"] {
    width: min(100%, 28rem);
  }

  .toolkit-arm[data-place="above"] ul, .toolkit-arm[data-place="below"] ul, .toolkit-arm[data-place="left"] ul, .toolkit-arm[data-place="right"] ul {
    flex-flow: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
  }

  .toolkit-arm[data-place="above"] li, .toolkit-arm[data-place="below"] li, .toolkit-arm[data-place="left"] li, .toolkit-arm[data-place="right"] li {
    white-space: normal;
    flex: auto;
    width: 100%;
    max-width: none;
  }

  .toolkit-arm[data-place="above"] li {
    border-top-width: 1px;
    border-left: 2px solid var(--hero-ice-ink);
  }

  .toolkit-arm[data-place="below"] li {
    border-top-width: 1px;
    border-left: 2px solid var(--hero-active);
  }
}

@media (max-width: 640px) {
  .work-feature {
    grid-template-areas: "name pill"
                         "where where"
                         "copy copy"
                         "lexe lexe";
    align-items: start;
    padding: 1.15rem 1rem 1.05rem;
  }

  .work-feature-body, .work-feature-title {
    display: contents;
  }

  .work-feature h3 {
    grid-area: name;
    align-self: center;
    font-size: clamp(1.85rem, 10vw, 2.4rem);
  }

  .work-where {
    grid-area: where;
  }

  .work-copy {
    grid-area: copy;
  }

  .lexe-stage {
    display: none;
  }

  .work-feature .work-links-foot {
    grid-area: pill;
    justify-content: flex-end;
    align-self: center;
    margin: 0;
  }

  .work-feature-title .work-links {
    grid-area: lexe;
    justify-content: center;
    margin: .85rem 0 .15rem;
  }

  .work-feature .work-links a {
    gap: .4rem;
    min-height: 0;
    padding: .42rem .72rem;
  }

  .work-feature .work-links a svg {
    width: 13px;
    height: 13px;
  }

  .work-feature .work-link-lexe {
    padding: .52rem .9rem;
  }

  .work-feature .work-link-lexe svg {
    width: 14px;
    height: 14px;
  }

  .work-feature .work-link-lexe .work-link-mark {
    max-width: 5.8rem;
    height: 1.25rem;
  }

  .work-feature .work-links-foot a {
    padding: .28rem .55rem;
  }

  .work-feature .work-links-foot .journey-debidev-mark {
    width: 4.4rem;
    max-width: 4.4rem;
    height: .85rem;
  }

  .works-rest .work-link-kinessor, .works-rest .work-link-april {
    gap: .4rem;
    min-height: 0;
    padding: .52rem .9rem;
  }

  .works-rest .work-link-kinessor svg, .works-rest .work-link-april svg {
    width: 14px;
    height: 14px;
  }

  .works-rest .work-link-kinessor .work-link-mark {
    max-width: 5.8rem;
    height: 1.25rem;
  }

  .works-rest .work-link-april .work-link-mark {
    max-width: 4rem;
    height: .85rem;
  }

  .candle-steps button {
    min-height: 2.75rem;
  }

  .candle-steps .candle-play {
    width: 2.75rem;
    height: 2.75rem;
  }

  .close-figure {
    width: 7.5rem;
    transform: translate(-28%, 10px);
  }

  .reach-actions {
    flex-wrap: wrap;
  }

  .reach-actions .hero-cta-close, .reach-copy, .contact-send {
    height: 2.75rem;
    min-height: 2.75rem;
  }
}

@media (max-width: 760px) {
  .building-offer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .building-offer-card {
    width: 100%;
  }
}

.portfolio-hero {
  min-height: 100svh;
  margin-top: calc(-1 * var(--portfolio-header-height, 4.15rem));
  color: var(--hero-ink);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.portfolio-hero:before {
  content: "";
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  background-image: url("/assets/background-DMdZ4zxb.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0;
}

.portfolio-hero-shade {
  z-index: 0;
  background: var(--hero-shade);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  inset: 0;
}

.portfolio-hero-body {
  z-index: 1;
  position: relative;
}

.hero-welcome-pin {
  top: calc(var(--portfolio-header-height, 4.15rem) + 2.25rem);
  z-index: 18;
  pointer-events: none;
  height: 0;
  transition: opacity .5s;
  position: sticky;
}

.hero-welcome-pin.is-gone {
  opacity: 0;
}

.hero-welcome {
  width: min(70rem, 100% - 3rem);
  color: var(--hero-ink);
  letter-spacing: -.03em;
  margin: 0 0 0 max(1.5rem, 50% - 35rem);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
}

.hero-welcome-caret {
  vertical-align: text-bottom;
  background: currentColor;
  width: 2px;
  height: .85em;
  margin-left: .12rem;
  animation: .9s step-end infinite hero-welcome-caret;
  display: inline-block;
}

@keyframes hero-welcome-caret {
  50% {
    opacity: 0;
  }
}

.portfolio-header {
  z-index: 20;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  isolation: isolate;
  background: none;
  border-bottom: 1px solid #0000;
  padding: .9rem 0;
  transition: background-color .28s, border-color .28s, box-shadow .28s;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 24px #10121b00;
}

.portfolio-header.is-stuck {
  background: var(--bg-page);
  border-bottom-color: var(--header-line);
  box-shadow: var(--header-shadow);
}

.portfolio-header.is-stuck .journey-switch button, .portfolio-header.is-stuck .theme-switch, .portfolio-header.is-stuck .hero-resume {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.portfolio-header-inner {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(70rem, 100% - 3rem);
  margin: 0 auto;
  display: grid;
}

.header-brand {
  justify-self: start;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  position: relative;
}

.header-brand.has-title {
  gap: .7rem;
  width: auto;
}

.header-title {
  color: var(--fg);
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.header-mark {
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.header-mark img {
  filter: drop-shadow(0 0 1px #10121b59);
  width: 2.75rem;
  height: 2.75rem;
  display: block;
}

html[data-theme="dark"] .header-mark img {
  filter: drop-shadow(0 0 1px #ffffff73);
}

.header-average {
  min-width: 0;
  color: var(--fg);
  justify-self: center;
  align-items: center;
  gap: .55rem;
  display: flex;
  position: relative;
}

.header-average-stars {
  align-items: center;
  gap: .05rem;
  display: flex;
}

.header-average-star {
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  position: relative;
}

.header-average-star > svg, .header-average-fill svg {
  display: block;
}

.header-average-fill {
  height: 16px;
  color: var(--fg);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.header-average-score {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
}

.header-average-tip {
  z-index: 2;
  border: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--fg);
  white-space: nowrap;
  box-shadow: var(--header-shadow);
  opacity: 0;
  pointer-events: none;
  border-radius: .45rem;
  padding: .4rem .6rem;
  font-size: .75rem;
  line-height: 1;
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%);
}

.header-average-tip:before, .header-average-tip:after {
  content: "";
  border: 6px solid #0000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-average-tip:before {
  border-bottom-color: var(--divider);
  bottom: 100%;
}

.header-average-tip:after {
  border-bottom-color: var(--bg-page);
  bottom: calc(100% - 1px);
}

.header-average:hover .header-average-tip {
  opacity: 1;
}

.header-stars {
  align-items: center;
  gap: .05rem;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + .75rem);
}

.header-stars-row {
  align-items: center;
  gap: .05rem;
  display: flex;
}

.header-stars.is-inline {
  position: static;
}

.header-stars button {
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  padding: .12rem;
  display: flex;
}

.header-stars button.is-on {
  color: var(--fg);
}

.header-stars svg {
  stroke: #000;
}

html[data-theme="dark"] .header-stars svg {
  stroke: #fff;
}

.header-stars-label {
  color: var(--fg);
  opacity: 0;
  margin-left: .35rem;
  font-size: .92rem;
  line-height: 1;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
  display: grid;
}

.header-stars-label.is-in {
  opacity: 1;
}

.header-stars-label span {
  grid-area: 1 / 1;
}

.header-stars-label span[aria-hidden="true"] {
  visibility: hidden;
}

.journey-switch {
  justify-self: center;
  align-items: center;
  gap: .45rem;
  display: flex;
}

.journey-switch button {
  border: 1px solid var(--chrome-border);
  background: var(--chrome-fill);
  box-shadow: var(--chrome-shadow);
  color: var(--fg-dim);
  font: inherit;
  letter-spacing: -.01em;
  text-underline-offset: .18em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  border-radius: 0;
  margin: 0;
  padding: .38rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}

.journey-switch button:hover {
  text-decoration: underline;
}

.journey-switch button[aria-pressed="true"] {
  border-color: var(--hero-navy);
  background: var(--hero-navy);
  color: var(--on-navy);
}

html[data-theme="dark"] .journey-switch button[aria-pressed="true"] {
  border-color: var(--switch-on);
  background: var(--switch-on);
  color: var(--switch-on-ink);
}

.lang-switch {
  box-sizing: border-box;
  height: calc(2.21rem + 2px);
  box-shadow: none;
  color: var(--fg);
  letter-spacing: .06em;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 .35rem;
  font-size: .78rem;
  font-weight: 600;
}

.theme-switch {
  border: 1px solid var(--chrome-border);
  background: var(--chrome-fill);
  box-shadow: var(--chrome-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: .18rem;
  display: flex;
}

.theme-switch button {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  place-items: center;
  margin: 0;
  padding: 0;
  display: grid;
}

.theme-switch button[aria-pressed="true"] {
  background: var(--switch-on);
  color: var(--switch-on-ink);
}

.portfolio-header-actions {
  justify-self: end;
  align-items: center;
  gap: .65rem;
  display: flex;
}

.header-session {
  display: contents;
}

.hero-resume, .hero-cta {
  cursor: pointer;
  border: 0;
}

.hero-resume {
  background: var(--chrome-fill);
  border: 1px solid var(--chrome-border);
  box-shadow: var(--chrome-shadow);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  align-items: center;
  gap: .45rem;
  padding: .55rem .95rem;
  font-size: .92rem;
  font-weight: 600;
  display: inline-flex;
}

.hero-resume-icon, .hero-availability-hand, .hero-cta-arrow {
  display: inline-flex;
}

.hero-resume-pointer, .hero-stars {
  display: none;
}

.hero-availability-hand {
  transform-origin: 70% 80%;
}

.portfolio-hero-body {
  text-align: left;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: min(70rem, 100% - 3rem);
  margin: 0 auto;
  padding: 5rem 0;
  display: flex;
  container: hero / inline-size;
}

.hero-availability {
  color: var(--hero-ink);
  cursor: pointer;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  display: inline-flex;
}

.hero-availability-dot {
  background: var(--hero-active);
  border-radius: 999px;
  flex-shrink: 0;
  width: .38rem;
  height: .38rem;
  position: relative;
}

.hero-availability-dot:after {
  content: "";
  border-radius: inherit;
  border: 1px solid #32c76680;
  animation: 2.8s ease-out infinite hero-availability-pulse;
  position: absolute;
  inset: -3px;
}

@keyframes hero-availability-pulse {
  0%, 25% {
    opacity: .55;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

.hero-headline {
  letter-spacing: -.045em;
  max-width: 12ch;
  color: var(--hero-ink);
  margin: 1.15rem 0 0;
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-weight: 700;
  line-height: .95;
}

.hero-headline-name {
  cursor: pointer;
  transform-origin: 0 100%;
  transition: transform .45s;
  display: inline-block;
}

.hero-headline-name:hover {
  transform: scale(1.07);
}

.hero-lead {
  max-width: 38rem;
  color: var(--hero-muted);
  margin: 1.35rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
}

.hero-badges {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .75rem;
  margin: 1.85rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.hero-badge {
  color: var(--hero-badge-ink);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .35s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 1px #10121b08;
}

.hero-badge-sizer, .hero-badge-face {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .45rem .95rem;
  display: inline-flex;
}

.hero-badge-sizer {
  visibility: hidden;
}

.hero-badge-face {
  position: absolute;
  inset: 0;
}

.hero-badge-code {
  background: var(--hero-ice);
}

.hero-badge-platform {
  background: var(--hero-lavender);
}

.hero-badge-innovation {
  background: var(--hero-blush);
}

.hero-badge:hover {
  z-index: 2;
}

.hero-badge-code:hover {
  background: var(--hero-ice);
}

@supports (color: color-mix(in lab, red, red)) {
  .hero-badge-code:hover {
    background: color-mix(in srgb, var(--hero-ice) 88%, #10121b);
  }
}

.hero-badge-platform:hover {
  background: var(--hero-lavender);
}

@supports (color: color-mix(in lab, red, red)) {
  .hero-badge-platform:hover {
    background: color-mix(in srgb, var(--hero-lavender) 88%, #10121b);
  }
}

.hero-badge-innovation:hover {
  background: var(--hero-blush);
}

@supports (color: color-mix(in lab, red, red)) {
  .hero-badge-innovation:hover {
    background: color-mix(in srgb, var(--hero-blush) 88%, #10121b);
  }
}

.hero-badge-caption {
  max-width: 34rem;
  color: var(--hero-muted);
  margin: 1.05rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  position: relative;
}

.hero-badge-caption-sizer, .hero-badge-caption-text {
  justify-content: flex-start;
  align-items: center;
  gap: .4rem;
  margin: 0;
  display: flex;
}

.hero-badge-caption strong {
  color: var(--hero-ink);
  font-weight: 700;
}

.hero-caption-code {
  color: var(--hero-ice-ink);
}

.hero-caption-platform {
  color: var(--hero-lavender-ink);
}

.hero-caption-innovation {
  color: var(--hero-blush-ink);
}

.hero-badge-caption-sizer {
  visibility: hidden;
}

.hero-badge-caption-text {
  position: absolute;
  inset: 0;
}

.hero-cta-slot {
  justify-content: flex-start;
  min-height: 3.2rem;
  margin-top: 1.85rem;
  display: flex;
}

.hero-cta {
  background: var(--hero-navy);
  color: #fff;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 10px 24px #1118272e;
}

.hero-cta:not(.hero-cta-close) {
  background: #000;
  box-shadow: 0 10px 24px #0000002e;
}

html[data-theme="dark"] .hero-cta:not(.hero-cta-close), html[data-theme="dark"] .hero-cta:not(.hero-cta-close):hover {
  border-color: var(--chrome-border);
  box-shadow: none;
  background-color: #000 !important;
}

.hero-cta-close {
  border: 1px solid var(--on-black);
  gap: .45rem;
  padding: .5rem .95rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .hero-cta-close {
    border: 1px solid color-mix(in srgb, var(--on-black) 40%, transparent);
  }
}

.hero-cta-close {
  color: var(--on-black);
  box-shadow: none;
  background: none;
  font-size: .92rem;
  line-height: 1.2;
}

.hero-cta:hover {
  box-shadow: 0 16px 32px #11182738;
}

.hero-cta-close:hover {
  background: var(--on-black);
}

@supports (color: color-mix(in lab, red, red)) {
  .hero-cta-close:hover {
    background: color-mix(in srgb, var(--on-black) 12%, transparent);
  }
}

.hero-cta-close:hover {
  box-shadow: none;
}

html[data-theme="dark"] .hero-cta-close:hover {
  background: none;
}

@media (min-width: 640px) {
  .hero-welcome {
    width: min(70rem, 100% - 6rem);
    margin-left: max(3rem, 50% - 35rem);
  }

  .portfolio-header-inner, .portfolio-hero-body {
    width: min(70rem, 100% - 6rem);
  }
}

@media (min-width: 768px) {
  .portfolio-header {
    padding: 1.1rem 0;
  }
}

@media (hover: none) {
  .header-average:active .header-average-tip, .header-average:focus-within .header-average-tip {
    opacity: 1;
  }
}

@keyframes resume-file {
  0%, 16% {
    opacity: 0;
  }

  24%, 88% {
    opacity: 1;
  }

  96%, 100% {
    opacity: 0;
  }
}

@keyframes resume-pointer {
  0%, 6% {
    opacity: 1;
    transform: translate(0);
  }

  10% {
    opacity: 1;
    transform: translate(0, 2px) scale(.9);
  }

  14% {
    opacity: 1;
    transform: translate(0);
  }

  22%, 90% {
    opacity: 0;
    transform: translate(2px, -2px);
  }

  98%, 100% {
    opacity: 1;
    transform: translate(0);
  }
}

@media (max-width: 760px) {
  .portfolio-header {
    padding: max(.7rem, env(safe-area-inset-top)) 0 .7rem;
  }

  .portfolio-header-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand actions";
    position: relative;
  }

  .header-brand {
    grid-area: brand;
    grid-template-columns: auto auto;
    place-items: center start;
    column-gap: .7rem;
    width: auto;
    max-width: 100%;
    display: grid;
  }

  .portfolio-header-actions {
    flex-wrap: wrap;
    grid-area: actions;
    justify-content: flex-end;
    justify-self: end;
    gap: .35rem;
  }

  .header-average {
    grid-area: view;
    justify-self: stretch;
  }

  .journey-switch {
    right: max(.85rem, env(safe-area-inset-right));
    bottom: calc(.85rem + env(safe-area-inset-bottom));
    z-index: 30;
    gap: .38rem;
    position: fixed;
  }

  .journey-switch button {
    text-align: center;
    flex: none;
    min-height: 0;
    padding: .36rem .72rem;
    font-size: .84rem;
  }

  .portfolio-header-inner:has(.header-brand.has-title) {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand view actions";
    align-items: center;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-title {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-average {
    justify-self: center;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .portfolio-header-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    justify-self: end;
    width: auto;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-session {
    right: 0;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 30;
    box-shadow: none;
    pointer-events: none;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: fixed;
    left: 0;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-session .hero-resume {
    min-height: 2.4rem;
    box-shadow: none;
    pointer-events: auto;
    border: 0;
    padding: .4rem .85rem;
    font-size: .84rem;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-session .hero-resume:not(:has(.hero-resume-icon)) {
    border: 1px solid var(--chrome-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
  }

  .portfolio-header-inner:has(.header-brand.has-title) .header-session .hero-resume:has(.hero-resume-icon) {
    right: max(.85rem, env(safe-area-inset-right));
    background: none;
    justify-content: center;
    gap: 0;
    width: 2.4rem;
    height: 2.4rem;
    min-height: 2.4rem;
    padding: 0;
    font-size: 0;
    position: absolute;
  }

  .header-title {
    font-size: 1.12rem;
  }

  .header-brand > .header-stars {
    display: none;
  }

  .reach-foot .header-stars {
    z-index: auto;
    flex-direction: column;
    gap: .28rem;
    margin: 0 0 1.15rem;
    position: static;
    inset: auto;
  }

  .reach-foot .header-stars-row, .hero-stars .header-stars-row {
    gap: .15rem;
  }

  .header-stars-invite {
    color: #000;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.3;
  }

  html[data-theme="dark"] .header-stars-invite {
    color: #fff;
  }

  .reach-foot .header-stars button {
    padding: .2rem;
  }

  .reach-foot .header-stars svg {
    width: 28px;
    height: 28px;
  }

  .reach-foot .header-stars .header-stars-label {
    margin-left: .35rem;
    font-size: 1rem;
  }

  .hero-stars {
    right: 0;
    bottom: calc(3.2rem + env(safe-area-inset-bottom));
    z-index: 2;
    pointer-events: none;
    justify-content: center;
    display: flex;
    position: absolute;
    left: 0;
  }

  .hero-stars .header-stars {
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    gap: .28rem;
    margin: 0;
    position: static;
  }

  .hero-stars .header-stars button {
    padding: .2rem;
  }

  .hero-stars .header-stars svg {
    width: 28px;
    height: 28px;
  }

  .hero-stars .header-stars .header-stars-label {
    margin-left: .35rem;
    font-size: 1rem;
  }

  .lang-switch, .theme-switch button {
    box-sizing: border-box;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
  }

  .lang-switch {
    font-size: .72rem;
  }

  .theme-switch {
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
    border: 0;
    padding: 0;
  }

  .theme-switch button[aria-pressed="true"] {
    display: none;
  }

  .theme-switch button {
    color: var(--fg);
    background: none;
  }

  #open-resume {
    border: 1.5px solid var(--fg);
    justify-content: center;
    gap: .32rem;
    width: max-content;
    min-width: 0;
    height: max-content;
    min-height: 0;
    margin: auto;
    padding: .32rem .62rem;
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    #open-resume {
      border: 1.5px solid color-mix(in srgb, var(--fg) 42%, transparent);
    }
  }

  #open-resume {
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
    font-size: .78rem;
  }

  #open-resume .hero-resume-icon {
    width: 15px;
    height: 15px;
    position: relative;
  }

  #open-resume .hero-resume-icon svg {
    width: 15px;
    height: 15px;
  }

  #open-resume .hero-resume-file {
    opacity: 0;
    animation: 12s ease-in-out infinite resume-file;
  }

  #open-resume .hero-resume-pointer {
    opacity: 1;
    animation: 12s ease-in-out infinite resume-pointer;
    display: block;
    position: absolute;
    inset: 0;
  }

  #open-resume .hero-resume-label {
    clip: auto;
    white-space: nowrap;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .portfolio-hero {
    overflow: visible;
  }

  .portfolio-hero-body {
    text-align: center;
    padding-top: calc(max(.7rem, env(safe-area-inset-top)) + 3.45rem + 1px);
    padding-bottom: calc(max(.7rem, env(safe-area-inset-top)) + 3.45rem + 1px);
    justify-content: center;
    align-items: center;
  }

  .hero-availability, .hero-headline, .hero-lead {
    text-align: center;
  }

  .hero-lead {
    align-self: stretch;
  }

  .hero-headline-name {
    transform-origin: bottom;
  }

  .hero-welcome {
    font-size: 1.12rem;
  }

  .hero-headline {
    font-size: clamp(2.65rem, 14vw, 4.4rem);
  }

  .hero-lead {
    font-size: 1.05rem;
  }

  .hero-badges {
    justify-content: center;
    align-self: stretch;
    gap: .55rem;
  }

  .hero-badge-caption {
    text-align: center;
    align-self: stretch;
  }

  .hero-badge-caption-sizer, .hero-badge-caption-text {
    justify-content: center;
  }

  .hero-cta-slot {
    justify-content: center;
    align-self: stretch;
    min-height: 2.7rem;
    margin-top: 2.75rem;
  }

  .hero-cta:not(.hero-cta-close) {
    gap: .48rem;
    padding: .68rem 1.08rem;
    font-size: .96rem;
    box-shadow: 0 6px 16px #00000029;
  }

  .hero-cta:not(.hero-cta-close) .hero-cta-arrow svg {
    width: 17px;
    height: 17px;
  }
}

@container hero (max-width: 28rem) {
  .hero-badges {
    flex-wrap: nowrap;
    gap: clamp(.34rem, 1.45cqi, .55rem);
  }

  .hero-badge {
    font-size: clamp(.74rem, 3.9cqi, .95rem);
  }

  .hero-badge-sizer, .hero-badge-face {
    gap: .34rem;
    min-height: 2.28rem;
    padding: .36rem clamp(.5rem, 2cqi, .78rem);
  }

  .hero-badge svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .portfolio-hero-body {
    justify-content: center;
  }

  .hero-headline {
    margin-top: .75rem;
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  .hero-lead, .hero-badges, .hero-badge-caption {
    margin-top: .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-header, .hero-availability-dot:after, .hero-headline-name, .hero-badge, .hero-cta, .hero-resume, .hero-resume-file, .hero-resume-pointer, .journey-switch button, .lang-switch, .theme-switch button {
    transition: none;
    animation: none;
  }

  .header-stars-label, .header-stars-label.is-in {
    opacity: 1;
    transition: none;
  }

  #open-resume .hero-resume-file {
    opacity: 1;
  }

  #open-resume .hero-resume-pointer {
    display: none;
  }

  .hero-welcome-pin {
    transition: none;
  }

  .hero-welcome-caret {
    animation: none;
  }
}

.pro {
  width: min(70rem, 100% - 3rem);
  color: var(--fg);
  margin: 0 auto;
  padding: 0;
}

.pro-mast, .pro-section {
  scroll-margin-top: calc(var(--portfolio-header-height, 4.15rem) + 2.75rem);
}

.pro-mast {
  padding: 4rem 0 1.5rem;
}

.pro-kicker {
  color: var(--fg-dim);
  letter-spacing: .01em;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  font-size: .84rem;
  font-weight: 600;
  display: flex;
}

.pro-kicker i {
  background: var(--hero-active);
  border-radius: 50%;
  width: .45rem;
  height: .45rem;
}

.pro h1 {
  letter-spacing: -.04em;
  align-items: flex-end;
  gap: .7rem;
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 2.85rem);
  font-weight: 600;
  line-height: 1.02;
  display: flex;
}

.pro-linkedin {
  width: calc(1.45rem + 2px);
  height: calc(1.45rem + 2px);
  color: var(--fg);
  flex: none;
  margin-bottom: calc(.38rem - 2px);
  display: flex;
}

.pro-linkedin svg {
  width: 100%;
  height: 100%;
}

.pro-linkedin rect {
  fill: var(--linkedin);
}

.pro-linkedin:hover {
  opacity: .82;
}

.pro-role {
  color: var(--fg-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: .75rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
}

.pro-role span:before {
  content: "·";
  color: var(--fg-muted);
  margin: 0 .5rem;
  font-weight: 500;
}

.pro-lead, .pro-body {
  color: var(--fg-dim);
  text-wrap: pretty;
  margin: 1.25rem 0 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.75;
}

.pro-nav {
  top: var(--portfolio-header-height, 4.15rem);
  z-index: 15;
  background: var(--bg-page);
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem 1.35rem;
  margin: 0;
  padding: .7rem 0;
  display: flex;
  position: sticky;
}

.pro-nav a {
  letter-spacing: .01em;
  text-underline-offset: .28em;
  color: var(--fg-dim);
  font-size: .82rem;
  font-weight: 600;
  -webkit-text-decoration: underline #0000;
  text-decoration: underline #0000;
  text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
}

.pro-nav a:hover, .pro-nav a:focus-visible {
  color: var(--fg);
  text-decoration-color: currentColor;
}

.pro-section {
  border-bottom: 1px solid var(--divider);
  padding: 5rem 0;
}

.pro-label {
  color: var(--accent-fg);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-weight: 600;
}

.pro h2 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}

.pro-expertise {
  gap: 1.35rem;
  margin: 2.25rem 0 0;
  display: grid;
}

.pro-expertise div {
  gap: .35rem;
  display: grid;
}

.pro-expertise dt {
  font-size: .95rem;
  font-weight: 600;
}

.pro-expertise dd {
  color: var(--fg-dim);
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.pro-edu, .pro-role-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  display: flex;
}

.pro-edu {
  align-items: start;
  margin-top: 0;
}

.pro-edu h3, .pro-role-block h3, .pro-story h3, .pro-skills h3, .pro-built h3, .pro-aims h3 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.pro-edu p, .pro-position, .pro-where, .pro-dates, .pro-summary, .pro-footer {
  margin: .15rem 0 0;
}

.pro-edu p, .pro-position {
  color: var(--fg);
  font-size: .98rem;
}

.pro-position {
  margin-bottom: .7rem;
}

.pro-edu p {
  gap: .12rem;
  display: grid;
}

.pro-edu p span {
  color: var(--fg-dim);
  font-weight: 400;
}

.pro-where, .pro-dates, .pro-footer {
  color: var(--fg-muted);
  font-size: .9rem;
  line-height: 1.45;
}

.pro-where {
  margin-bottom: .35rem;
  font-size: .78rem;
}

.pro-summary {
  color: var(--fg-dim);
  font-size: .98rem;
  line-height: 1.55;
}

.pro-points {
  color: var(--fg-dim);
  margin: 1.15rem 0 0;
  padding-left: 1.2rem;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.75;
  list-style: outside;
}

.pro-points li + li {
  margin-top: .45rem;
}

.pro-points li::marker {
  color: var(--fg-muted);
}

.pro-dates {
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-top: 0;
}

.pro-role-block {
  padding-top: 2.25rem;
}

.pro-role-block + .pro-role-block, .pro-story {
  border-top: 1px solid var(--divider);
  margin-top: 2.75rem;
  padding-top: 2.25rem;
}

.pro-story .pro-body + .pro-body {
  margin-top: 1.15rem;
}

.pro-tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pro-tags li {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--fg-dim);
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .78rem;
  line-height: 1.4;
}

.pro-kicker-line {
  color: var(--fg);
  margin: 1.15rem 0 0;
  font-size: .95rem;
  font-weight: 600;
}

.pro-skills {
  gap: 1.75rem;
  margin-top: 1.75rem;
  display: grid;
}

.pro-skills ul, .pro-built, .pro-aims {
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}

.pro-skills li {
  color: var(--fg-dim);
  font-size: .92rem;
  line-height: 1.55;
}

.pro-skills li:not(:last-child):after {
  content: " ·";
  color: var(--fg-muted);
}

.pro-skills ul {
  flex-wrap: wrap;
  column-gap: .35rem;
  display: flex;
}

.pro-built li {
  border-top: 1px solid var(--divider);
  padding: 1.35rem 0;
}

.pro-built-line {
  color: var(--fg-muted);
  margin: .3rem 0 0;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.45;
}

.pro-aims {
  gap: 1.5rem;
  margin-top: 2rem;
  display: grid;
}

.pro-aims li {
  border-top: 2px solid var(--hero-navy);
  padding-top: 1rem;
}

html[data-theme="dark"] .pro-aims li {
  border-top-color: var(--divider);
}

.pro-aims p {
  color: var(--fg-dim);
  margin: .3rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
}

.pro-close {
  border-bottom: 0;
  position: relative;
  overflow: visible;
}

.pro-close .band-title {
  text-align: center;
  font-size: 1.45rem;
}

.view-swap {
  animation: .4s cubic-bezier(.22, 1, .36, 1) view-in;
}

@keyframes view-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .pro {
    width: min(70rem, 100% - 6rem);
  }

  .pro-mast {
    padding: 5rem 0 1.75rem;
  }

  .pro-section {
    padding: 6rem 0;
  }

  .pro-expertise {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }

  .pro-skills {
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem 2rem;
  }
}

@media (min-width: 800px) {
  .pro-aims {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-swap {
    animation: none;
  }

  .pro-nav a {
    transition: none;
  }
}

@media (max-width: 760px) {
  .pro-role {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    display: flex;
  }

  .pro-role span:before {
    content: none;
    margin: 0;
  }
}

@media (max-width: 720px) {
  .pro-nav {
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .35rem 1.05rem;
    margin-inline: -.15rem;
    padding-inline: .15rem;
    overflow-x: auto;
  }

  .pro-nav::-webkit-scrollbar {
    display: none;
  }

  .pro-nav a {
    flex: none;
    align-items: center;
    min-height: 2.5rem;
    display: inline-flex;
  }

  .pro h1 {
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (max-width: 520px) {
  .pro-edu, .pro-role-head {
    flex-direction: column;
    gap: .15rem;
  }
}

.resume-view {
  z-index: 40;
  color: #1c1f27;
  color-scheme: light;
  background: #e6e1d8;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.resume-bar {
  background: #efebe4;
  border-bottom: 1px solid #ddd6cc;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  display: flex;
}

.resume-bar p {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
}

#resume-view-title {
  align-self: center;
}

.resume-bar-actions {
  align-items: center;
  gap: .35rem;
  display: flex;
}

.resume-error {
  color: #8e2f2f;
  margin-right: .45rem;
  font-size: .84rem;
  font-weight: 500;
}

.resume-download, .resume-close {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  position: relative;
}

.resume-action-label {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  overflow: hidden;
}

@media (min-width: 721px) {
  .resume-download, .resume-close {
    width: auto;
    padding: 0 .9rem;
  }

  .resume-action-label {
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    position: static;
    overflow: visible;
  }
}

.resume-download {
  color: #f6f3ee;
  background: #1c1f27;
}

.resume-download:disabled {
  cursor: default;
  opacity: .55;
}

.resume-close {
  color: #4a5160;
  background: none;
}

.resume-close:hover, .resume-download:hover:not(:disabled) {
  opacity: .86;
}

.resume-desk {
  flex: 1;
  padding: 2.75rem 1.5rem 4.5rem;
  overflow: auto;
}

.resume-stage {
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

.resume-capture {
  pointer-events: none;
  width: 8.5in;
  position: fixed;
  top: 0;
  left: -10000px;
}

.resume-page {
  color: #1c1f27;
  background: #f6f3ee;
  flex-direction: column;
  width: 8.5in;
  height: 11in;
  margin: 0 auto 1.75rem;
  padding: .68in .74in .42in;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 1px #1c1f270a, 0 16px 40px #1c1f2714;
}

.resume-fit {
  width: min(8.5in, 100%);
  margin: 0 auto 1.75rem;
}

.resume-desk .resume-page {
  margin: 0;
}

.resume-desk .resume-fit:last-child {
  margin-bottom: 0;
}

.resume-page-body {
  flex: auto;
  min-height: 0;
}

.resume-flow {
  flex-direction: column;
  gap: 1.05rem;
  display: flex;
}

.resume-flow > .resume-role + .resume-role, .resume-flow > .resume-work + .resume-work {
  border-top: 1px solid #ece6de;
  padding-top: .9rem;
}

.resume-flow > .resume-block:has( > section), .resume-flow > .resume-block:has( > h2) {
  border-top: 1px solid #e3dcd2;
  padding-top: .85rem;
}

.resume-flow > .resume-block:has( > header) + .resume-block {
  border-top: 0;
  padding-top: 0;
}

.resume-running {
  color: #6f675f;
  border-bottom: 1px solid #e3dcd2;
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 .85rem;
  padding-bottom: .4rem;
  font-size: .78rem;
  line-height: 1.3;
  display: flex;
}

.resume-running strong {
  color: #1c1f27;
  font-weight: 600;
}

.resume-page-foot {
  color: #8a8178;
  font-variant-numeric: tabular-nums;
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding-top: .28rem;
  font-size: .72rem;
  line-height: 1.2;
  display: flex;
}

.resume-page-foot a {
  color: inherit;
  font-variant-numeric: normal;
  white-space: nowrap;
  margin-left: auto;
  text-decoration: none;
}

.resume-page-foot a:hover {
  text-underline-offset: .18em;
  text-decoration: underline;
}

.resume-mast {
  border-bottom: 1px solid #e3dcd2;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 1.35rem;
  display: flex;
}

.resume-page h1, .resume-measure h1 {
  color: #1c1f27;
  letter-spacing: -.035em;
  margin: 0;
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.05;
}

.resume-discipline {
  color: #4a5160;
  margin: .55rem 0 0;
  font-size: .98rem;
  line-height: 1.4;
}

.resume-discipline span:before {
  content: "·";
  color: #a3988c;
  margin: 0 .45rem;
}

.resume-contact {
  text-align: right;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-contact li + li {
  margin-top: .28rem;
}

.resume-contact a {
  color: #4a5160;
  font-size: .88rem;
  line-height: 1.4;
  text-decoration: none;
}

.resume-contact a:hover {
  text-underline-offset: .18em;
  text-decoration: underline;
}

.resume-block h2 {
  color: #6f675f;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
}

.resume-block h2 + * {
  margin-top: .7rem;
}

.resume-block > .resume-copy:first-child {
  margin-top: 0;
}

.resume-copy {
  color: #3e4652;
  text-wrap: pretty;
  margin: .7rem 0 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.65;
}

.resume-role-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  display: flex;
}

.resume-block h3 {
  color: #1c1f27;
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
}

.resume-role-head p, .resume-where, .resume-tags {
  color: #7a736a;
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.resume-role-head p {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.resume-position {
  color: #2a2e36;
  margin: .15rem 0 0;
  font-size: .95rem;
}

.resume-where {
  margin-top: 0;
  margin-bottom: 0;
  font-size: .74rem;
}

.resume-summary {
  color: #2f3642;
  margin: .65rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
}

.resume-points {
  color: #3e4652;
  margin: .55rem 0 0;
  padding-left: 1.1rem;
  font-size: .95rem;
  line-height: 1.55;
  list-style: outside;
}

.resume-points li + li {
  margin-top: .28rem;
}

.resume-points li::marker {
  color: #8a8178;
}

.resume-footer {
  color: #1f4b6e;
  margin: .55rem 0 0;
  font-size: .88rem;
  font-weight: 600;
}

.resume-tags {
  color: #8a8178;
  margin-top: .18rem;
}

.resume-skills {
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.75rem;
  display: grid;
}

.resume-skills p, .resume-aims p {
  color: #4a5160;
  margin: .28rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
}

.resume-aims {
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
}

.resume-built-line {
  color: #7a736a;
  margin: .2rem 0 0;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.45;
}

.resume-aims {
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.75rem;
  display: grid;
}

@media (max-width: 920px) {
  .resume-desk {
    padding: 1.15rem .75rem calc(2.5rem + env(safe-area-inset-bottom));
  }

  .resume-fit {
    height: calc(11in * 100cqi / 8.5in);
    overflow: hidden;
    container-type: inline-size;
  }

  .resume-fit .resume-page {
    transform: scale(calc(100cqi / 8.5in));
    transform-origin: 0 0;
  }
}

@media (max-width: 720px) {
  .resume-bar {
    z-index: 2;
    padding: calc(.75rem + env(safe-area-inset-top)) .85rem .75rem;
    align-items: center;
    gap: .65rem;
    transition: transform .32s;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .resume-view.is-bar-away .resume-bar {
    pointer-events: none;
    transform: translateY(-100%);
  }

  .resume-desk {
    padding-top: calc(1.15rem + 3.65rem + env(safe-area-inset-top));
  }

  .resume-bar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .resume-error {
    text-align: right;
    flex-basis: 100%;
    margin: 0;
  }

  .resume-download {
    width: 2.15rem;
    height: 2.15rem;
  }

  .resume-close svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resume-close, .resume-download, .resume-bar {
    transition: none;
  }
}

.gate-page {
  background: var(--bg-page);
  flex-direction: column;
  min-height: 100svh;
  display: flex;
}

.gate {
  background: var(--bg-page);
  min-height: 100svh;
  color: var(--fg);
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  display: flex;
}

.gate-page .gate {
  flex: 1;
  min-height: 0;
}

.gate-card {
  flex-direction: column;
  gap: 1rem;
  width: min(22rem, 100%);
  display: flex;
}

.gate-field {
  color: var(--fg-muted);
  flex-direction: column;
  gap: .4rem;
  font-size: .92rem;
  display: flex;
}

.gate-field input, .gate-field textarea {
  border: 1px solid var(--divider);
  background: var(--bg-band);
  width: 100%;
  color: var(--fg);
  font: inherit;
  resize: vertical;
  border-radius: .9rem;
  padding: .75rem .9rem;
  font-size: 1rem;
}

.gate-error {
  color: var(--fg);
  margin: 0;
  font-size: .92rem;
}

.gate-password {
  position: relative;
}

.gate-password input {
  padding-right: 2.6rem;
}

.gate-reveal {
  width: 2.4rem;
  height: 100%;
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: absolute;
  top: 0;
  right: .15rem;
}

.gate-submit {
  align-self: flex-end;
}

.gate-note {
  color: var(--fg);
  text-align: center;
  margin: 0;
  font-size: 1.05rem;
}

.share {
  background: var(--bg-page);
  width: min(70rem, 100% - 3rem);
  min-height: 100svh;
  color: var(--fg);
  margin: 0 auto;
  padding: 4rem 0 5rem;
}

.dashboard-top {
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.dashboard-bulk {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.dashboard-card-lead {
  align-items: center;
  gap: .65rem;
  min-width: 0;
  display: flex;
}

.dashboard-select {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--fg);
  cursor: pointer;
  margin: 0;
}

.dashboard-section h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.dashboard-section {
  margin-top: 1.25rem;
}

.dashboard-section h2 {
  margin-bottom: .75rem;
  font-size: 1.5rem;
}

.dashboard-resume-summary {
  color: var(--fg-muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .65rem 1.75rem;
  margin-top: 2.5rem;
  font-size: .88rem;
  display: flex;
}

.dashboard-interest-summary, .dashboard-resume-counts {
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1.75rem;
  display: flex;
}

.dashboard-resume-stat {
  align-items: center;
  gap: .4rem;
  display: inline-flex;
  position: relative;
}

.dashboard-resume-total {
  color: var(--fg);
  font-weight: 600;
}

.dashboard-resume-tip {
  z-index: 2;
  border: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--fg);
  white-space: nowrap;
  box-shadow: var(--header-shadow);
  opacity: 0;
  pointer-events: none;
  border-radius: .45rem;
  padding: .4rem .6rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  bottom: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%);
}

.dashboard-resume-tip:before, .dashboard-resume-tip:after {
  content: "";
  border: 6px solid #0000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dashboard-resume-tip:before {
  border-top-color: var(--divider);
  top: 100%;
}

.dashboard-resume-tip:after {
  border-top-color: var(--bg-page);
  top: calc(100% - 1px);
}

.dashboard-resume-stat:hover .dashboard-resume-tip {
  opacity: 1;
}

.dashboard-tabbar {
  border-bottom: 1px solid var(--divider);
  justify-content: space-between;
  align-items: flex-end;
  gap: .75rem;
  margin-top: .85rem;
  display: flex;
}

.dashboard-tabs {
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  display: flex;
}

.dashboard-tab-refresh {
  margin-bottom: .55rem;
  transition: transform .15s, background-color .15s;
}

.dashboard-tab-refresh:hover:not(:disabled) {
  transform: scale(1.12);
}

.dashboard-tab {
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0 0 .55rem;
  font-size: 1.5rem;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-tab-count {
  font-size: .92rem;
  font-weight: 500;
}

.dashboard-tab[aria-selected="true"] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--fg);
}

.dashboard-confirm h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.dashboard-confirm .dashboard-actions {
  margin-top: .25rem;
}

.dashboard-empty {
  color: var(--fg-muted);
  margin: 0;
}

.dashboard-draft {
  margin-top: 1.25rem;
}

.dashboard-draft-sheet {
  display: contents;
}

.dashboard-draft-title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 600;
  display: none;
}

.dashboard-list {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.dashboard-record {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.dashboard-record-name {
  flex: 1;
  min-width: 0;
}

.dashboard-record .dashboard-actions {
  flex-shrink: 0;
}

.dashboard-record-foot {
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-height: 2.2rem;
  display: grid;
}

.dashboard-record-visit {
  justify-self: start;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  display: flex;
}

.dashboard-record-resume {
  color: var(--fg-muted);
  flex: none;
  align-items: center;
  gap: .15rem;
  display: flex;
}

.dashboard-record-count {
  font-size: .75rem;
}

.dashboard-record-end {
  justify-content: flex-end;
  justify-self: end;
  align-items: center;
  gap: .65rem;
  display: flex;
}

.dashboard-record-stars {
  color: var(--fg-muted);
  align-items: center;
  gap: .05rem;
  display: flex;
}

.dashboard-record-stars .is-on {
  color: var(--fg);
}

.dashboard-record-foot .dashboard-save {
  justify-content: flex-end;
  justify-self: end;
}

.dashboard-record-identity {
  min-width: 0;
  color: var(--fg-muted);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: end;
  font-size: calc(.78rem + 1px);
  line-height: 1.2;
  overflow: hidden;
  transform: translateY(.7rem);
}

.dashboard-field-name {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.dashboard-card {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  border-radius: 1.1rem;
  flex-direction: column;
  gap: .9rem;
  padding: 1rem 1.1rem;
  display: flex;
}

.dashboard-list .dashboard-card {
  transition: background-color .15s;
}

.dashboard-message {
  padding-bottom: 2.85rem;
  position: relative;
}

.dashboard-message-delete {
  background: var(--bg-page);
  position: absolute;
  bottom: .7rem;
  right: .75rem;
}

.dashboard-list .dashboard-card.dashboard-message:hover .dashboard-message-delete, .dashboard-list .dashboard-card.dashboard-message.is-open .dashboard-message-delete {
  background: var(--bg-band);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list .dashboard-card.dashboard-message:hover .dashboard-message-delete, .dashboard-list .dashboard-card.dashboard-message.is-open .dashboard-message-delete {
    background: color-mix(in srgb, var(--bg-band) 94%, var(--fg));
  }
}

.dashboard-message-top {
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  display: flex;
}

.dashboard-message-top strong {
  margin-right: auto;
}

.dashboard-message-top time {
  color: var(--fg-muted);
  flex: none;
  font-size: .85rem;
}

.dashboard-consult-kind {
  letter-spacing: .01em;
  border-radius: 999px;
  flex: none;
  padding: .12rem .55rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

.dashboard-consult-kind.is-idea {
  background: var(--hero-ice);
  color: var(--hero-ice-ink);
}

.dashboard-consult-kind.is-improve {
  background: var(--hero-lavender);
  color: var(--hero-lavender-ink);
}

.dashboard-consult-kind.is-build {
  background: var(--hero-blush);
  color: var(--hero-blush-ink);
}

.dashboard-message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.dashboard-list .dashboard-card:hover, .dashboard-list .dashboard-card.is-open {
  background: var(--bg-band);
}

.dashboard-list .dashboard-field input {
  transition: background-color .15s;
}

.dashboard-list .dashboard-card:hover .dashboard-field input, .dashboard-list .dashboard-card.is-open .dashboard-field input, .dashboard-list .dashboard-field input:hover {
  background: var(--bg-band);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list .dashboard-card:hover .dashboard-field input, .dashboard-list .dashboard-card.is-open .dashboard-field input, .dashboard-list .dashboard-field input:hover {
    background: color-mix(in srgb, var(--bg-band) 94%, var(--fg));
  }
}

.dashboard-card-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem 1rem;
  display: grid;
}

.dashboard-field {
  min-width: 0;
  color: var(--fg-muted);
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
  display: flex;
}

.dashboard-field-wide {
  grid-column: 1 / -1;
}

.dashboard-field input, .dashboard-field textarea {
  border: 1px solid var(--divider);
  background: var(--bg-band);
  width: 100%;
  min-width: 0;
  color: var(--fg);
  font: inherit;
  resize: vertical;
  border-radius: .7rem;
  padding: .45rem .65rem;
  font-size: 1rem;
}

.dashboard-field input::placeholder {
  color: var(--fg-muted);
}

.dashboard-field input:read-only {
  cursor: default;
}

.dashboard-list .dashboard-record-name input, .dashboard-list .dashboard-card:hover .dashboard-record-name input, .dashboard-list .dashboard-card.is-open .dashboard-record-name input {
  background: none;
  border: 0;
  border-bottom: 1px solid #0000;
  border-radius: 0;
  transition: border-color .15s, background-color .15s;
}

.dashboard-list .dashboard-record-name input:hover, .dashboard-list .dashboard-record-name input:focus {
  border-bottom-color: var(--divider);
  background: none;
  outline: none;
}

.dashboard-primary, .dashboard-action {
  cursor: pointer;
  font: inherit;
}

.dashboard-primary {
  background: var(--hero-navy);
  color: #fff;
  border: 1px solid #0000;
  border-radius: 999px;
  width: fit-content;
  padding: .7rem 1.15rem;
  font-weight: 600;
}

html[data-theme="dark"] .dashboard-primary {
  background: var(--bg-black);
  border-color: var(--chrome-border);
}

.dashboard-primary:disabled, .dashboard-action:disabled {
  cursor: default;
  opacity: .6;
}

.dashboard-card-foot {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  display: grid;
}

.dashboard-save {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.dashboard-status-phone {
  display: none;
}

.dashboard-status {
  box-sizing: border-box;
  border: 1px solid var(--hero-active);
  justify-self: start;
  align-items: center;
  width: fit-content;
  min-height: 1.85rem;
  padding: .28rem .65rem;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-status {
    border: 1px solid color-mix(in srgb, var(--hero-active) 48%, var(--divider));
  }
}

.dashboard-status {
  background: var(--hero-active);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-status {
    background: color-mix(in srgb, var(--hero-active) 16%, transparent);
  }
}

.dashboard-status {
  color: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-status {
    color: color-mix(in srgb, var(--hero-active) 72%, #0c3d22);
  }
}

.dashboard-status {
  font-size: .85rem;
  line-height: 1;
}

html[data-theme="dark"] .dashboard-status {
  border-color: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-status {
    border-color: color-mix(in srgb, var(--hero-active) 42%, transparent);
  }
}

html[data-theme="dark"] .dashboard-status {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-status {
    background: color-mix(in srgb, var(--hero-active) 16%, transparent);
  }
}

html[data-theme="dark"] .dashboard-status {
  color: var(--hero-active);
}

.dashboard-actions {
  justify-content: flex-end;
  justify-self: end;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.dashboard-action {
  box-sizing: border-box;
  border: 1px solid var(--divider);
  background: var(--bg-band);
  min-height: 2.2rem;
  color: var(--fg);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  line-height: 1;
  transition: background-color .15s;
  display: inline-flex;
}

.dashboard-action-icon {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
}

.dashboard-copy-label {
  display: grid;
}

.dashboard-copy-label > span {
  grid-area: 1 / 1;
}

.dashboard-copy-label > span[aria-hidden="true"] {
  visibility: hidden;
}

.dashboard-action-revoke {
  border-color: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-revoke {
    border-color: color-mix(in srgb, var(--kinessor-red) 42%, var(--divider));
  }
}

.dashboard-action-revoke {
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-revoke {
    background: color-mix(in srgb, var(--kinessor-red) 12%, transparent);
  }
}

.dashboard-action-revoke {
  color: var(--kinessor-red);
}

.dashboard-action-enable {
  border-color: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-enable {
    border-color: color-mix(in srgb, var(--hero-active) 48%, var(--divider));
  }
}

.dashboard-action-enable {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-enable {
    background: color-mix(in srgb, var(--hero-active) 16%, transparent);
  }
}

.dashboard-action-enable {
  color: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-enable {
    color: color-mix(in srgb, var(--hero-active) 72%, #0c3d22);
  }
}

html[data-theme="dark"] .dashboard-action-revoke {
  border-color: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-revoke {
    border-color: color-mix(in srgb, var(--kinessor-red) 55%, transparent);
  }
}

html[data-theme="dark"] .dashboard-action-revoke {
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-revoke {
    background: color-mix(in srgb, var(--kinessor-red) 18%, transparent);
  }
}

html[data-theme="dark"] .dashboard-action-revoke {
  color: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-revoke {
    color: color-mix(in srgb, var(--kinessor-red) 68%, #fff);
  }
}

html[data-theme="dark"] .dashboard-action-enable {
  border-color: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-enable {
    border-color: color-mix(in srgb, var(--hero-active) 42%, transparent);
  }
}

html[data-theme="dark"] .dashboard-action-enable {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-enable {
    background: color-mix(in srgb, var(--hero-active) 16%, transparent);
  }
}

html[data-theme="dark"] .dashboard-action-enable {
  color: var(--hero-active);
}

.dashboard-action:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action:not(:disabled) {
  background: var(--bg-band);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action:not(:disabled) {
    background: color-mix(in srgb, var(--bg-band) 94%, var(--fg));
  }
}

.dashboard-action-revoke:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action-revoke:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action-revoke:not(:disabled) {
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-revoke:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action-revoke:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action-revoke:not(:disabled) {
    background: color-mix(in srgb, color-mix(in srgb, var(--kinessor-red) 12%, var(--bg-band)) 94%, var(--fg));
  }
}

.dashboard-action-enable:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action-enable:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action-enable:not(:disabled) {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-action-enable:hover:not(:disabled), .dashboard-list .dashboard-card:hover .dashboard-action-enable:not(:disabled), .dashboard-list .dashboard-card.is-open .dashboard-action-enable:not(:disabled) {
    background: color-mix(in srgb, color-mix(in srgb, var(--hero-active) 16%, var(--bg-band)) 94%, var(--fg));
  }
}

html[data-theme="dark"] .dashboard-action-revoke:hover:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card:hover .dashboard-action-revoke:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card.is-open .dashboard-action-revoke:not(:disabled) {
  background: var(--kinessor-red);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-revoke:hover:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card:hover .dashboard-action-revoke:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card.is-open .dashboard-action-revoke:not(:disabled) {
    background: color-mix(in srgb, color-mix(in srgb, var(--kinessor-red) 18%, var(--bg-band)) 94%, var(--fg));
  }
}

html[data-theme="dark"] .dashboard-action-enable:hover:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card:hover .dashboard-action-enable:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card.is-open .dashboard-action-enable:not(:disabled) {
  background: var(--hero-active);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] .dashboard-action-enable:hover:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card:hover .dashboard-action-enable:not(:disabled), html[data-theme="dark"] .dashboard-list .dashboard-card.is-open .dashboard-action-enable:not(:disabled) {
    background: color-mix(in srgb, color-mix(in srgb, var(--hero-active) 16%, var(--bg-band)) 94%, var(--fg));
  }
}

.dashboard-modal-backdrop {
  z-index: 40;
  background: #0006;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.dashboard-modal {
  border: 1px solid var(--divider);
  background: var(--bg-page);
  width: min(32rem, 100%);
  color: var(--fg);
  border-radius: 1.1rem;
  flex-direction: column;
  gap: .85rem;
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
}

.dashboard-modal-tabbar {
  border-bottom: 1px solid var(--divider);
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.dashboard-modal-tabs {
  gap: 1.25rem;
  display: flex;
}

.dashboard-modal-given {
  color: var(--fg-muted);
  align-items: center;
  gap: .05rem;
  padding-bottom: .45rem;
  display: flex;
}

.dashboard-modal-given .is-on {
  color: var(--fg);
}

.dashboard-modal-tab {
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 .45rem;
  font-weight: 600;
}

.dashboard-modal-tab[aria-selected="true"] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--fg);
}

.dashboard-modal [role="tabpanel"] {
  flex-direction: column;
  gap: .85rem;
  display: flex;
}

.dashboard-modal-top {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.dashboard-modal-top h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.dashboard-modal-close {
  flex-shrink: 0;
  align-items: center;
  gap: .65rem;
  display: flex;
}

.dashboard-modal-created {
  color: var(--fg-muted);
  white-space: nowrap;
  font-size: .82rem;
}

.dashboard-toast {
  top: calc(var(--portfolio-header-height, 4.15rem) + .75rem);
  z-index: 40;
  border: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--fg);
  box-shadow: var(--chrome-shadow);
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  margin: 0;
  padding: .7rem 1rem;
  font-size: .92rem;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  left: 50%;
  transform: translate(-50%, -.75rem);
}

.dashboard-toast.is-in {
  opacity: 1;
  transform: translate(-50%);
}

.dashboard-toast-sizer {
  visibility: hidden;
}

.dashboard-toast-word {
  justify-content: center;
  align-items: center;
  font-size: 1.28rem;
  line-height: 1;
  display: flex;
  position: absolute;
  inset: 0;
}

.dashboard-toast-word.is-thanks {
  font-size: 1.16rem;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-toast, .dashboard-toast.is-in {
    opacity: 1;
    transition: none;
    transform: translate(-50%);
  }
}

.dashboard-modal-row {
  border-top: 1px solid var(--divider);
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .75rem;
  padding: .6rem 0;
  display: grid;
}

.dashboard-modal-row dt {
  color: var(--fg-muted);
}

.dashboard-modal-row dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.dashboard-modal-ips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-modal-ips li + li {
  margin-top: .25rem;
}

.dashboard-modal-row:first-child {
  border-top: 0;
}

.dashboard-modal-status-row {
  align-items: center;
  gap: .65rem;
  display: inline-flex;
}

.dashboard-modal-lang {
  color: var(--fg-muted);
  font-weight: 600;
}

.dashboard-modal-status.is-opened {
  color: var(--hero-active);
}

.dashboard-modal-token {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.dashboard-modal-token span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.dashboard-modal-token .dashboard-action-icon {
  flex-shrink: 0;
}

.dashboard-modal-save {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

@media (hover: none) {
  .dashboard-resume-stat:active .dashboard-resume-tip, .dashboard-resume-stat:focus-within .dashboard-resume-tip {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-list .dashboard-card, .dashboard-list .dashboard-field input, .dashboard-action, .dashboard-tab-refresh:hover:not(:disabled) {
    transition: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  .share {
    width: min(70rem, 100% - 1.5rem);
    padding: 1.25rem 0 calc(5.5rem + env(safe-area-inset-bottom));
  }

  .dashboard-draft {
    z-index: 40;
    background: #0006;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .dashboard-draft-sheet {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    overscroll-behavior: contain;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border: 1px solid var(--divider);
    background: var(--bg-page);
    border-radius: 1.25rem 1.25rem 0 0;
    flex-direction: column;
    gap: .85rem;
    display: flex;
    overflow: auto;
  }

  .dashboard-draft-title {
    display: block;
  }

  .dashboard-draft .dashboard-card {
    background: none;
    border: 0;
    gap: .85rem;
    padding: 0;
  }

  .dashboard-top, .dashboard-bulk {
    width: 100%;
  }

  .dashboard-bulk .dashboard-action {
    flex: 1 1 0;
    min-height: 2.75rem;
  }

  .dashboard-resume-summary {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .dashboard-interest-summary, .dashboard-resume-counts {
    flex-flow: column;
    align-items: flex-start;
    gap: .55rem;
  }

  .dashboard-resume-counts {
    align-items: flex-end;
  }

  .dashboard-resume-counts .dashboard-resume-label {
    order: -1;
  }

  .dashboard-tabbar {
    gap: .4rem;
  }

  .dashboard-tabs {
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    flex-wrap: nowrap;
    flex: 1;
    gap: .85rem;
    min-width: 0;
    overflow-x: auto;
  }

  .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }

  .dashboard-tab {
    flex: none;
    min-height: 2.75rem;
    font-size: 1.05rem;
  }

  .dashboard-select {
    width: 1.15rem;
    height: 1.15rem;
  }

  .dashboard-list .dashboard-card:has(.dashboard-record) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "visit visit stars"
                         "name name name"
                         "identity identity identity"
                         "actions actions actions";
    align-items: center;
    gap: .55rem .5rem;
    display: grid;
    position: relative;
  }

  .dashboard-list .dashboard-card:has(.dashboard-save) {
    grid-template-areas: "visit visit stars"
                         "name name name"
                         "identity identity identity"
                         "actions actions actions"
                         "save save save";
  }

  .dashboard-list .dashboard-record, .dashboard-list .dashboard-record-foot, .dashboard-list .dashboard-record-end {
    display: contents;
  }

  .dashboard-list .dashboard-select, .dashboard-top {
    display: none;
  }

  .dashboard-list .dashboard-record-name {
    grid-area: name;
  }

  .dashboard-list .dashboard-record-name input {
    text-align: center;
    min-height: 0;
    font-size: 1.32rem;
  }

  .dashboard-list .dashboard-record-name input:placeholder-shown {
    text-align: start;
  }

  .dashboard-list .dashboard-record .dashboard-actions {
    grid-area: actions;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    padding-inline: 2.2rem;
    position: relative;
  }

  .dashboard-list .dashboard-record .dashboard-actions .dashboard-action, .dashboard-list .dashboard-record-foot .dashboard-save .dashboard-action {
    flex: 0 auto;
    min-height: 1.85rem;
    padding: .2rem .55rem;
    font-size: .78rem;
  }

  .dashboard-list .dashboard-record .dashboard-actions .dashboard-action-revoke {
    order: -1;
  }

  .dashboard-list .dashboard-record .dashboard-actions .dashboard-copy {
    order: 1;
  }

  .dashboard-delete-active {
    display: none;
  }

  .dashboard-list .dashboard-record .dashboard-actions .dashboard-action-icon, .dashboard-list .dashboard-card:hover .dashboard-record .dashboard-actions .dashboard-action-icon, .dashboard-list .dashboard-card.is-open .dashboard-record .dashboard-actions .dashboard-action-icon {
    background: none;
    border: 0;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    position: absolute;
    right: 0;
  }

  .dashboard-list .dashboard-record-visit {
    grid-area: visit;
    justify-self: stretch;
    width: 100%;
  }

  .dashboard-list .dashboard-record-visit .dashboard-record-resume {
    order: 1;
  }

  .dashboard-list .dashboard-record-visit .dashboard-record-resume:nth-child(1 of .dashboard-record-resume) {
    margin-left: auto;
  }

  .dashboard-list .dashboard-record-visit:not(:has(.dashboard-status, .dashboard-record-resume)), .dashboard-status-wide {
    display: none;
  }

  .dashboard-status-phone {
    display: inline;
  }

  .dashboard-list .dashboard-status {
    min-height: 1.55rem;
    padding: .16rem .5rem;
    font-size: .75rem;
  }

  .dashboard-list .dashboard-record-stars {
    grid-area: stars;
  }

  .dashboard-list .dashboard-record-foot > span:empty {
    display: none;
  }

  .dashboard-list .dashboard-record-foot .dashboard-save {
    grid-area: save;
    justify-content: flex-end;
    justify-self: end;
    width: auto;
  }

  .dashboard-list .dashboard-record-identity {
    text-align: center;
    background: none;
    grid-area: identity;
    justify-self: center;
    max-width: 100%;
    padding: 0;
    position: static;
    transform: none;
  }

  .dashboard-list .dashboard-card:hover .dashboard-record-identity, .dashboard-list .dashboard-card.is-open .dashboard-record-identity {
    background: none;
  }

  .dashboard-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    min-height: 0;
    display: flex;
  }

  .dashboard-card-foot .dashboard-save:empty, .dashboard-card-foot .dashboard-card-lead:not(:has(.dashboard-select, .dashboard-status)) {
    display: none;
  }

  .dashboard-card-foot .dashboard-actions, .dashboard-card-foot .dashboard-save {
    justify-content: stretch;
    width: 100%;
  }

  .dashboard-card-foot .dashboard-actions .dashboard-action, .dashboard-card-foot .dashboard-save .dashboard-action {
    flex: 1 1 0;
    min-height: 2.75rem;
  }

  .dashboard-card-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-field input, .dashboard-field textarea {
    min-height: 2.75rem;
  }

  .dashboard-message-delete, .dashboard-list .dashboard-card.dashboard-message:hover .dashboard-message-delete {
    background: none;
    border: 0;
  }

  .dashboard-message-top {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
  }

  .dashboard-consult-kind {
    position: absolute;
    top: .75rem;
    right: .75rem;
  }

  .dashboard-message:has(.dashboard-consult-kind) .dashboard-message-top strong {
    overflow-wrap: anywhere;
    max-width: calc(100% - 4.75rem);
  }

  .dashboard-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .dashboard-modal {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    overscroll-behavior: contain;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 1.25rem 1.25rem 0 0;
    overflow: auto;
  }

  .dashboard-modal-top {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    align-items: start;
    gap: .2rem .75rem;
    display: grid;
  }

  .dashboard-modal-top h2 {
    text-wrap: balance;
    grid-area: 1 / 1;
    font-size: 1.22rem;
    line-height: 1.25;
  }

  .dashboard-modal-close {
    display: contents;
  }

  .dashboard-modal-created {
    white-space: normal;
    grid-area: 2 / 1;
  }

  .dashboard-modal-close > .dashboard-action {
    grid-area: 1 / 2 / span 2;
    align-self: start;
    width: 2.75rem;
    height: 2.75rem;
  }

  .dashboard-modal-tabbar {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .dashboard-modal-tab {
    min-height: 2.75rem;
  }

  .dashboard-modal-row {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .dashboard-modal-save {
    display: contents;
  }

  .dashboard-modal-top {
    order: 1;
  }

  .dashboard-modal-status-row {
    order: 2;
    justify-content: space-between;
    width: 100%;
    display: flex;
  }

  .dashboard-modal-status-row .dashboard-modal-status {
    order: 1;
  }

  .dashboard-modal-status-row .dashboard-modal-lang {
    order: 2;
  }

  .dashboard-modal-tabbar {
    order: 3;
  }

  .dashboard-modal [role="tabpanel"] {
    order: 4;
  }

  .dashboard-confirm .dashboard-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .dashboard-modal-save .dashboard-action {
    flex: none;
    order: 5;
    align-self: flex-end;
    min-height: 2.75rem;
  }

  .dashboard-confirm .dashboard-actions .dashboard-action {
    flex: 8rem;
    min-height: 2.75rem;
  }

  .dashboard-confirm h2 {
    text-wrap: balance;
  }
}

.cookie-consent {
  z-index: 10000;
  pointer-events: none;
  background: none;
  flex-direction: column;
  justify-content: flex-end;
  transition: background-color .35s .5s;
  display: flex;
  position: fixed;
  inset: 0;
}

.cookie-consent--in {
  background-color: #00000047;
}

.cookie-consent__bar {
  width: 100%;
  padding: 28px 32px calc(22px + env(safe-area-inset-bottom));
  pointer-events: auto;
  color: #111;
  background: #fff;
  border-top: 1px solid #00000024;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  font-size: 15px;
  line-height: 1.5;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  transform: translateY(110%);
  box-shadow: 0 -8px 28px #0000001f;
}

.cookie-consent--in .cookie-consent__bar {
  transform: translateY(0);
}

.cookie-consent__message, .cookie-consent__statement p {
  margin: 0;
}

.cookie-consent__statement {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.cookie-consent__statement-link, .cookie-consent__manage {
  color: inherit;
  font: inherit;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.cookie-consent__options {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.cookie-consent__option {
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  margin: 0;
  display: grid;
}

.cookie-consent__option-title {
  margin: 0;
  font-weight: 600;
}

.cookie-consent__option-body {
  grid-column: 1;
  margin: 0;
}

.cookie-consent__locked, .cookie-consent__option input {
  grid-area: 1 / 2 / span 2;
  align-self: center;
}

.cookie-consent__locked {
  opacity: .8;
  font-size: 13px;
}

.cookie-consent__option input {
  accent-color: #111;
  width: 18px;
  height: 18px;
}

.cookie-consent__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
}

.cookie-consent__customize, .cookie-consent__choice {
  height: 38px;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  padding: 0 14px;
}

.cookie-consent__customize {
  color: inherit;
  text-underline-offset: 3px;
  background: none;
  border: none;
  text-decoration: underline;
}

.cookie-consent__choice {
  color: #fff;
  background: #111;
  border: 1px solid #111;
  font-weight: 600;
}

.cookie-consent__manage {
  left: 24px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  color: var(--fg-muted);
  font-size: 13px;
  position: fixed;
}

html[data-theme="dark"] .cookie-consent--in {
  background-color: #ffffff1f;
}

html[data-theme="dark"] .cookie-consent__bar {
  color: #fff;
  background: #000;
  border-top-color: #ffffff2e;
  box-shadow: 0 -8px 28px #00000073;
}

html[data-theme="dark"] .cookie-consent__option input {
  accent-color: #fff;
}

html[data-theme="dark"] .cookie-consent__choice {
  color: #111;
  background: #fff;
  border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent, .cookie-consent__bar {
    transition: none;
  }
}

@media (max-width: 640px) {
  .cookie-consent__bar {
    padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
    gap: 1rem;
  }

  .cookie-consent__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cookie-consent__choice, .cookie-consent__customize {
    width: 100%;
    height: 2.75rem;
  }
}

@media (max-width: 760px) {
  .cookie-consent__manage {
    z-index: auto;
    width: min(70rem, 100% - 3rem);
    padding: 0 7.5rem calc(1.35rem + env(safe-area-inset-bottom)) 0;
    text-align: left;
    min-height: 2.75rem;
    margin: .25rem auto 0;
    display: block;
    position: static;
    bottom: auto;
    left: auto;
  }
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

@font-face {
  font-family: Inter Display;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterDisplay-Medium.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter Display;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterDisplay-SemiBold.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter Display;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterDisplay-Bold.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=4.1") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=4.1") format("woff2");
}

:root {
  --fg: #10121b;
  --fg-dim: #3d4756;
  --fg-muted: #626775;
  --divider: #e6e2dc;
  --bg-page: #fcfbfa;
  --bg-band: #f4f3f1;
  --bg-black: #000;
  --on-navy: #fcfbfa;
  --on-black: #fcfbfa;
  --chrome-fill: #ffffffb8;
  --chrome-ink: #10121b;
  --chrome-border: #10121b0f;
  --chrome-shadow: 0 1px 2px #10121b0d, 0 8px 20px #10121b0a;
  --header-line: #10121b14;
  --header-shadow: 0 10px 24px #10121b0f;
  --switch-on: #111;
  --switch-on-ink: #fff;
  --accent-fg: #1f4b6e;
  --focus-ring: #111827;
  --hero-ink: #10121b;
  --hero-shade: var(--bg-page);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --hero-shade: color-mix(in srgb, var(--bg-page) 40%, transparent);
  }
}

:root {
  --hero-wave: #8b93a7;
  --hero-badge-ink: #10121b;
  --hero-muted: #626775;
  --hero-navy: #111827;
  --hero-ice: #b9deff;
  --hero-ice-ink: #2b6fa8;
  --hero-powder: #d8e9ff;
  --hero-lavender: #dcd5ff;
  --hero-lavender-ink: #6b5bd0;
  --hero-periwinkle: #c9c7f8;
  --hero-blush: #f6dceb;
  --hero-blush-ink: #c45c86;
  --hero-peach: #ffe8d5;
  --hero-peach-ink: #c56a2d;
  --hero-cream: #fff3e6;
  --hero-active: #32c766;
  --linkedin: #0a66c2;
  --kinessor-red: #c52228;
  --april-navy: #003b5c;
  --april-green: #658d1b;
  --april-orange: #ffb549;
  --debidev-navy: #012753;
  --journey-shade: #ffffffe6;
}

*, :before, :after {
  box-sizing: border-box;
  font-family: inherit;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --fg: #f5f5f5;
  --fg-dim: #d4d4d4;
  --fg-muted: #a3a3a3;
  --divider: #ffffff24;
  --bg-page: #090909;
  --bg-band: #141414;
  --accent-fg: #e8e8e8;
  --focus-ring: #fff;
  --hero-ink: #f5f5f5;
  --hero-muted: #a3a3a3;
  --hero-wave: #f4f5f7;
  --chrome-fill: #090909b8;
  --chrome-ink: #f5f5f5;
  --chrome-border: #ffffff24;
  --chrome-shadow: 0 1px 2px #0006, 0 8px 20px #00000059;
  --header-line: #ffffff1a;
  --header-shadow: 0 10px 24px #00000073;
  --switch-on: #fff;
  --switch-on-ink: #111;
  --journey-shade: var(--bg-page);
}

@supports (color: color-mix(in lab, red, red)) {
  html[data-theme="dark"] {
    --journey-shade: color-mix(in srgb, var(--bg-page) 92%, transparent);
  }
}

html, body {
  width: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-page);
  color: var(--fg);
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

#root {
  width: 100%;
  min-height: 100vh;
}

button, a, input, textarea, select, summary {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.section-reveal[data-from="left"] {
  --from-x: -2.75rem;
  --from-y: 0px;
}

.section-reveal[data-from="right"] {
  --from-x: 2.75rem;
  --from-y: 0px;
}

.section-reveal[data-from="down"] {
  --from-x: 0px;
  --from-y: 2rem;
}

html.reveal-ready .section-reveal:not(#technologies):not(.is-visible) .reveal-piece {
  opacity: 0;
  transform: translate3d(var(--from-x), var(--from-y), 0);
}

html.reveal-ready .section-reveal.is-visible:not(#technologies) .reveal-piece {
  animation: 1.25s cubic-bezier(.22, 1, .36, 1) both reveal-slide;
  animation-delay: calc(var(--reveal-i, 0) * .1s);
}

@keyframes reveal-slide {
  from {
    opacity: 0;
    transform: translate3d(var(--from-x), var(--from-y), 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .section-reveal .reveal-piece {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
/* Narrow-window overrides. Imported after the desktop sheet. */

@media (max-width: 720px) {
  input,
  textarea,
  select {
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  html.reveal-ready .section-reveal:not(#technologies):not(.is-visible) .reveal-piece,
  html.reveal-ready .section-reveal.is-visible:not(#technologies) .reveal-piece {
    opacity: 1;
    transform: none;
    animation: none;
  }
}