.wordmark__code { font-weight: 300; letter-spacing: -.02em; color: var(--iris-soft); }

/* ---------- the header: the title and the live Swift editor ---------- */

/* ---------- about ---------- */
/* the heading column is exactly as wide as the heading, and the Xcode window stretches to exactly its height */
.about-hero { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); align-items: stretch; }
.about-hero__title { font-size: clamp(56px, 8.6vw, 152px); line-height: .88; margin: 0; align-self: center; padding-bottom: .06em; }
/* the window takes its height from the heading: code fills what is left, the phone scales to fit */
.about-hero .editor { align-self: stretch; }
.about-hero .editor__body { flex: 1; min-height: 0; }
.about-hero .editor__code { height: 0; min-height: 100%; }
.about-hero .preview { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.about-hero .preview__phone { width: auto; height: min(100%, 380px); flex: 0 1 auto; min-height: 0; }
@media (max-width: 980px) {

  .about-hero { grid-template-columns: 1fr; }
  .about-hero .editor__code { height: 320px; min-height: 0; }
  .about-hero .preview__phone { height: auto; width: 150px; }
}

/* Xcode window: code | canvas */
.editor__canvas-tab { margin-left: auto; font-size: 11px; color: var(--mute); text-transform: none; letter-spacing: .02em; }
.editor__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 16vw, 236px); }
.preview__tag { font-size: 10px; color: var(--mute); text-transform: none; letter-spacing: .02em; }
.preview__phone { width: clamp(140px, 11.5vw, 168px); aspect-ratio: 9 / 19; padding: 6px; border-radius: 28px; background: linear-gradient(145deg, #3a3d48, #16181f 40%, #2b2e38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 50px -20px rgba(0, 0, 0, .9); transition: box-shadow .6s; }
.preview.is-running .preview__phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 50px 4px rgba(143, 125, 255, .55); }
.preview__screen { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: #fbfaf7; container-type: inline-size; }
.preview__island { position: absolute; left: 50%; top: 3.2%; width: 32%; height: 4.2%; margin-left: -16%; border-radius: 99px; background: #000; }
.pv__art { position: relative; width: 44cqw; height: 44cqw; display: grid; place-items: center; }
.pv__circle { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 65%, #fff), var(--pc)); transition: box-shadow .6s, opacity .45s, transform .6s var(--ease-spring), background .6s; }
.pv__art.is-glow .pv__circle { box-shadow: 0 6cqw 12cqw -3cqw color-mix(in srgb, var(--sc) 55%, transparent); }
.pv__heart.is-pulse { animation: pv-pulse 1.6s ease-in-out infinite; }
.pv__heart { position: relative; width: var(--hs, 16%); fill: var(--hc, #ff3b30); }
.pv__title { margin: 0; font-size: 8cqw; line-height: 1.15; }
.pv__title.is-bold { font-size: 10cqw; font-weight: 700; }
.pv__title { transition: letter-spacing .5s, font-size .4s; }
.pv__title.is-tight { letter-spacing: -.045em; }
.pv__sub { margin: 0; font-size: 7cqw; color: #111; transition: color .5s; }
.pv__sub.is-secondary { color: #8e8e93; }
.pv__btn { display: grid; place-items: center; min-width: 30cqw; height: 12cqw; padding: 0 6cqw; border-radius: 99px; color: var(--tc, #007aff); font-size: 7cqw; font-weight: 500; }
.pv__btn.is-filled { background: var(--tc, #007aff); color: #fff; font-weight: 600; }
.pv__btn { position: relative; transition: height .5s var(--ease-spring), min-width .5s var(--ease-spring), font-size .4s, background .6s, color .6s, outline-color .4s; outline: .9cqw solid transparent; outline-offset: 1.6cqw; }
.pv__btn.is-large { height: 15cqw; min-width: 58cqw; font-size: 7.6cqw; }
/* haptics: the button gets tapped and a feedback ring ripples out */
.pv__btn.is-haptic { animation: pv-tap 2.4s ease-in-out infinite; }
.pv__btn.is-haptic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: .8cqw solid var(--tc, #007aff); opacity: 0; animation: pv-ripple 2.4s ease-out infinite; }
/* VoiceOver focus: the black rounded cursor iOS draws around the focused element */
.pv__btn.is-a11y { outline-color: #111; }
@media (max-width: 620px) {

  .editor__body { grid-template-columns: 1fr; }
  .editor__canvas-tab { display: none; }
  .editor__code { height: 280px; }
  .preview__phone { width: 150px; }
  /* phones: a shorter window, so the title and the whole editor fit in about one screen */
  .about-hero { gap: 64px; }
  .about-hero__title { font-size: clamp(48px, 14.5vw, 72px); }
  .about-hero .preview__phone { width: 116px; }
  .about-hero .editor__code { height: 236px; }
}

.editor__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid rgba(189, 179, 255, .1); }
.editor__dots { display: flex; gap: 7px; } .editor__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .editor__dots i:nth-child(2) { background: #febc2e; } .editor__dots i:nth-child(3) { background: #28c840; }
.editor__file { font-size: 12px; color: var(--fg); text-transform: none; letter-spacing: .02em; } .editor__file b { color: #ff8c4a; font-weight: 400; }
.editor__run { font-size: 11px; color: var(--mute); transition: color .3s; }
.editor.is-running .editor__run { color: var(--ok); }
.editor__code {
  margin: 0; height: 380px; overflow: hidden; padding: 24px 16px 18px 0; -webkit-mask-image: linear-gradient(transparent, #000 30px); mask-image: linear-gradient(transparent, #000 30px); counter-reset: ln; scroll-behavior: smooth;
  font: 400 clamp(11.5px, .92vw, 13.5px)/1.75 var(--f-mono); color: #d9d7e8; white-space: pre; tab-size: 4;
}
.editor__code .ln { display: block; padding-left: 46px; position: relative; min-height: 1.75em; }
.editor__code .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 32px; text-align: right; color: #4c4a66; }
.editor__code .ln.is-cur { background: rgba(143, 125, 255, .08); }
.editor__code .ln.is-cur::before { color: #a898ff; }
.tk-kw { color: #ff7ab2; font-weight: 500; } .tk-ty { color: #9d8cff; } .tk-st { color: #ff8170; } .tk-nu { color: #d9c97c; } .tk-co { color: #6c7986; font-style: italic; } .tk-fn { color: #67b7a4; }
.editor.is-typing .caret { animation: none; }
.editor__cap { display: flex; justify-content: space-between; padding: 9px 16px; font-size: 11px; color: var(--mute); background: rgba(143, 125, 255, .08); border-top: 1px solid rgba(189, 179, 255, .1); }
/* purple accent inside display headings */
.h-display .accent { font-style: normal; color: #9d8cff; }
@media (max-width: 620px) {

  /* about: Xcode wraps long lines instead of cutting them off */
  .editor__code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; padding-right: 12px; }
  .editor__code .ln { padding-left: 38px; }
  .editor__code .ln::before { width: 26px; }
  .editor__bar { gap: 10px; padding: 11px 14px; }
  .editor__cap { padding: 9px 14px; }
}

/* ===== about: the monkey codes on top of the Xcode window (moods set by about.js) ===== */
.editor-wrap { position: relative; }
.about-hero .editor-wrap { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.editor-wrap > .editor { flex: 1 1 auto; min-height: 0; }
/* it sits on the window's top edge (y 118 of its drawing), legs dangling over the title bar */
.coder { --cw: clamp(110px, 10vw, 150px); position: absolute; z-index: 2; right: 21%; top: calc(var(--cw) * -.843); width: var(--cw); pointer-events: none; transition: opacity .8s var(--ease-out) .6s, transform 1s var(--ease-spring) .6s; }
.coder svg { display: block; width: 100%; height: auto; overflow: visible; }
.coder g { transition: transform .5s var(--ease-spring), opacity .3s; }
.cd-leg--l { transform-origin: 61px 110px; animation: cd-swing 2.6s ease-in-out infinite; }
.cd-leg--r { transform-origin: 79px 110px; animation: cd-swing 2.6s ease-in-out -1.3s infinite; }
.cd-tail { transform-origin: 84px 112px; animation: cd-tail 3s ease-in-out infinite alternate; }
.cd-arm--l { transform-origin: 53px 82px; } .cd-arm--r { transform-origin: 87px 82px; }
.cd-tilt { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .5s var(--ease-spring); }
.cd-lit { opacity: 0; transition: opacity .3s; }
.cd-mug { transform-origin: 52px 110px; opacity: 0; }
.cd-steam { animation: cd-steam 1.6s ease-in-out infinite; }
.cd-run, .cd-q, .cd-yay { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .25s, transform .45s var(--ease-spring); }
@media (max-width: 980px) {
 .coder { right: 14px; }
}

@media (max-width: 620px) {
 .coder { --cw: 96px; }
}

@media (prefers-reduced-motion: reduce) {
 .coder *, .coder { animation: none !important; }
}

/* =========================================================
   About: the monkey's mission log (shared space pieces are in space.css). Nothing here follows the scroll: the
   values' components move only when you use them, with transform and opacity
   ========================================================= */

/* ---------- the header: the title and the live Swift editor ---------- */
.ml-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(clamp(130px, 16vw, 200px) + env(safe-area-inset-top, 0px)) clamp(80px, 10vw, 140px); }
.ml-hero__desk { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
.ml-hero__desk > .editor-wrap, .ml-hero__desk > .editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* =========================================================
   Below the hero: one system. Every section shares the hero's container (so all left edges line up), one heading
   style and one vertical rhythm. The grounds alternate: the night sky (one tile of stars under the page, painted once),
   a light band, a deep band, and the night sky again. Nothing follows the scroll; the only motion answers a tap
   ========================================================= */
body { background: var(--stars) 0 0 / 480px 480px, var(--ink); }
.ml-hero > .sky { background: radial-gradient(55% 45% at 18% 12%, rgba(143, 125, 255, .2), transparent 70%), radial-gradient(50% 40% at 88% 80%, rgba(45, 107, 255, .12), transparent 70%); }

.ab { position: relative; isolation: isolate; padding-block: clamp(96px, 11vw, 160px); }
.ab__in { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.ab__t { max-width: 20ch; margin: 0 0 clamp(44px, 5vw, 72px); font: 650 clamp(36px, 4.2vw, 64px)/1.02 var(--f-display); letter-spacing: -.04em; text-wrap: balance; }
/* the bands: light paper, and deep ink without stars */
.ab--light { background: #f1eff8; color: #16141f; }
/* ---------- the journey: five years on one rail ---------- */
/* the rail runs through every year's dot: solid up to now, dashed on to what's next */
.jt__list { --c: 5; position: relative; display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.jt__wrap { position: relative; }
.jt__list::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: linear-gradient(90deg, #8f7dff, #bdb3ff 61%, transparent 61%); }
.jt__list::after { content: ""; position: absolute; left: 61%; right: 0; top: 21px; border-top: 2px dashed rgba(255, 209, 102, .45); }
.jt__i { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 0 0 22px; }
/* each year lifts a little under the pointer and its badge lights up */
.jt__i::before { content: ""; position: absolute; z-index: -1; inset: 60px -16px -6px; border-radius: 18px; background: linear-gradient(180deg, rgba(143, 125, 255, .09), rgba(143, 125, 255, 0)); border: 1px solid rgba(189, 179, 255, .12); opacity: 0; transition: opacity .4s; }
.jt__i > * { transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .jt__i:hover::before { opacity: 1; }
  .jt__i:hover > :not(.jt__dot) { transform: translateY(-4px); }
  .jt__i:hover .jt__dot { transform: scale(1.1); }
}
.jt__tags, .jt__cta { align-self: end; }
.jt__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: #15132a; border: 1.5px solid #a898ff; color: #cfc7ff; box-shadow: 0 0 0 6px var(--ink); transition: transform .5s var(--ease-spring); }
.jt__dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jt__i--now .jt__dot { background: #ff6f9c; border-color: #ff6f9c; color: #2b0f24; }
/* now: a soft ring breathes out of the badge (scale and opacity on its own layer) */
.jt__i--now .jt__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #ff6f9c; animation: jt-ping 2.4s var(--ease-out) infinite; }
.jt__i--next .jt__dot { background: var(--ink); border: 1.5px dashed #ffd166; color: #ffd166; }
/* a comet runs the solid part of the rail, from the first line of code to now */
.jt__comet { position: absolute; z-index: 0; left: 0; top: 20px; width: 61%; height: 4px; overflow: hidden; pointer-events: none; }
.jt__comet > i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 72%, rgba(255, 255, 255, .7) 97%, #fff); border-radius: 2px; transform: translateX(-100%); animation: jt-comet 5s cubic-bezier(.45, 0, .2, 1) infinite; }
.jt__y { display: flex; align-items: center; gap: 10px; font: 600 clamp(26px, 2.2vw, 34px)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.jt__flag { padding: 5px 9px; border-radius: 99px; background: rgba(255, 111, 156, .14); border: 1px solid rgba(255, 111, 156, .45); color: #ff9ebc; font: 600 11.5px/1 var(--f-body); letter-spacing: 0; }
.jt__flag--next { background: rgba(255, 209, 102, .1); border-color: rgba(255, 209, 102, .45); color: #ffd166; }
.jt__t { margin: 6px 0 0; font: 650 clamp(18px, 1.45vw, 21px)/1.2 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.jt__d { color: var(--mute); font-size: 15px; line-height: 1.6; }
.jt__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.jt__tags li { padding: 6px 10px; border-radius: 7px; border: 1px solid #26243a; background: rgba(14, 13, 26, .8); color: #cfcbe0; font: 500 12px/1 var(--f-mono); }
.jt__cta { justify-self: start; margin-top: 4px; color: #ffd166; font: 600 15px/1 var(--f-body); border-bottom: 1px solid rgba(255, 209, 102, .4); padding-bottom: 4px; transition: border-color .3s; }
.jt__cta:hover { border-color: #ffd166; }
/* below desktop the rail turns down the left edge */
@media (max-width: 1000px) {
  .jt__list { grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 620px; }
  .jt__comet { display: none; }
  .jt__i::before { inset: -12px -12px -6px 52px; }
  .jt__list::before { left: 21px; right: auto; top: 22px; bottom: 0; width: 2px; height: auto; background: linear-gradient(#8f7dff, #bdb3ff 70%, transparent 70%); }
  .jt__list::after { left: 21px; right: auto; top: 70%; bottom: 0; border-top: 0; border-left: 2px dashed rgba(255, 209, 102, .45); }
  .jt__i { grid-template-rows: none; padding: 0 0 0 66px; }
  .jt__dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- mission and vision: one row each, the label on the left and the statement on the right ---------- */
.ps__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(24px, 4vw, 64px); padding-block: clamp(36px, 4.5vw, 64px); border-top: 1px solid rgba(22, 20, 31, .14); }
.ps__row:first-of-type { padding-top: 0; border-top: 0; }
.ps__row:last-of-type { padding-bottom: 0; }
.ps__k { padding-top: .6em; color: #5b4bd6; font: 600 15px/1 var(--f-body); }
.ps__t { max-width: 30ch; margin: 0; font: 500 clamp(28px, 3.2vw, 50px)/1.18 var(--f-display); letter-spacing: -.032em; text-wrap: pretty; }
.ps__t em { font-style: normal; color: #5b4bd6; }
@media (max-width: 760px) {
  .ps__row { grid-template-columns: minmax(0, 1fr); }
  .ps__k { padding-top: 0; }
  .ps__t { font-size: clamp(25px, 6.8vw, 32px); }
}

/* ---------- the values: the studio band's third row, two by two, each with its live component on a small dark screen
   above its words (about.js) ---------- */
.va__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 56px) clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.va__v { display: grid; gap: 10px; align-content: start; }
/* each screen has its own accent (--ac, set in about.html) for its small labels, on a dotted grid */
.vc__demo { --ac: #8f7dff; position: relative; display: grid; place-items: center; height: clamp(190px, 15vw, 220px); margin-bottom: 12px; overflow: hidden; border-radius: 20px; isolation: isolate;
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(160deg, #24204a, #15122c);
  border: 1px solid color-mix(in srgb, var(--ac) 22%, rgba(189, 179, 255, .18)); box-shadow: 0 30px 60px -30px rgba(29, 26, 58, .7);
  transform: translateY(var(--lift, 0px)); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out), border-color .8s, background .8s; }
@media (hover: hover) {
  .va__v:hover .vc__demo { --lift: -3px; }
}
/* a small label that invites a try, and goes once the screen has been used */
.vc__hint { position: absolute; left: 14px; top: 13px; z-index: 2; display: flex; align-items: center; gap: 7px; pointer-events: none; font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: opacity .5s, transform .5s var(--ease-out); }
.vc__hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); opacity: .8; }
.vc__demo.is-used .vc__hint { opacity: 0; transform: translateY(-6px); }
.vc__count { position: absolute; right: 14px; top: 13px; z-index: 2; font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); opacity: 0; transition: opacity .5s; }
.vc__count b { display: inline-block; color: var(--ac); font-weight: 500; }
.vc__demo.is-used .vc__count { opacity: 1; }
.vc__count b.is-bump { animation: vc-bump .45s var(--ease-spring); }
.va__w { font: 650 clamp(22px, 2vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; color: #5b4bd6; }
.va__d { max-width: 42ch; color: #57546b; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.6; }
/* wide screens: all four in one row, the components drawn a little smaller to fit */
@media (min-width: 1200px) {
  .va__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 1.4vw, 24px); }
  .va__w { font-size: clamp(19px, 1.5vw, 23px); }
  .va__d { font-size: 15px; }
  .va .vc__btn { padding: 8px 13px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  .va__grid { grid-template-columns: minmax(0, 1fr); }
}
/* tailored artistry: loose pixels fly into a heart, one by one, in a fresh palette each time (about.js) */
.vx { position: relative; width: 126px; height: 112px; margin-top: -40px; }
.vx i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--c, #fff); opacity: var(--o, 1);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); transition: transform var(--t, .9s) var(--ease-out) var(--dl, 0s), background-color .6s var(--dl, 0s), opacity .6s var(--dl, 0s); }
/* the shared button on the screens */
.vc__btn { position: absolute; bottom: 16px; z-index: 2; padding: 9px 15px; border-radius: 99px; border: 1px solid currentColor; color: #fff; font: 600 13px/1 var(--f-body); transition: background-color .3s, color .3s; }
.vc__btn:hover { background: #fff; color: #5b4bd6; }
.vc__btn[disabled] { opacity: .5; pointer-events: none; }
/* emotion through interaction: drag the cord down and let go, it springs back and the lamp clicks on; a tap or a key
   gives it a tug (about.js) */
.vc__demo--lamp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 75% at 50% 18%, rgba(255, 209, 102, .36), transparent 70%), linear-gradient(160deg, #3a2f4a, #1f1830); opacity: 0; transition: opacity .7s; }
.vc__demo--lamp.is-on::before { opacity: 1; }
.lp { position: absolute; left: 50%; top: 0; width: 120px; margin-left: -60px; overflow: visible; }
.lp__shade { fill: #3a3566; transition: fill .6s; }
.lp__bulb { fill: #2c2852; transition: fill .4s; }
.is-on .lp__shade { fill: #ffe2a0; }
.is-on .lp__bulb { fill: #fff6d6; }
.lp__cord { position: absolute; left: calc(50% + 28px); top: 46px; width: 2px; height: calc(48px + var(--pull, 0px)); background: rgba(255, 255, 255, .45); }
.lp__h { position: absolute; left: calc(50% + 29px); top: calc(92px + var(--pull, 0px)); width: 18px; height: 28px; margin-left: -9px; border-radius: 9px; background: #ffd166; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); touch-action: none; cursor: grab; }
.lp__h:active { cursor: grabbing; }
.lp__say { position: absolute; bottom: 16px; font: italic 400 20px/1 "Instrument Serif", "Times New Roman", serif; color: rgba(255, 255, 255, .7); }
/* engineering integrity: a build log ticks through its checks, one green line at a time; older lines rise off the
   top (about.js) */
.tm { position: absolute; left: 14px; right: 14px; top: 14px; bottom: 62px; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 11px; overflow: hidden; border-radius: 12px; background: #0d0b1e; border: 1px solid rgba(255, 255, 255, .08); font: 11.5px/1.65 var(--f-mono); color: rgba(255, 255, 255, .75); }
.tm p { flex: none; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: tm-in .3s var(--ease-out); }
.tm__ok, .tm__all { color: #0cce6b; } .tm__dim { color: rgba(255, 255, 255, .35); } .tm__run { color: #ffd166; }
.tm__all { font-weight: 500; }
.tm__caret { display: inline-block; width: 7px; height: 13px; margin-left: 3px; vertical-align: -2px; background: rgba(255, 255, 255, .7); animation: tm-blink 1s steps(1) infinite; }
/* destination thinking: open the door to a warm room; every return visit, one more light is on (about.js) */
.dr { position: relative; width: 74px; height: 108px; margin-top: -46px; perspective: 500px; cursor: pointer; border-radius: 39px 39px 4px 4px; background: linear-gradient(180deg, #ffe3a8, #ff9f6b); box-shadow: 0 0 0 5px #2f2a5c, 0 20px 40px -10px rgba(0, 0, 0, .6); }
.dr__room { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
.dr__msg { margin-top: 26px; font: italic 400 14px/1.1 "Instrument Serif", "Times New Roman", serif; color: #5a2f1a; text-align: center; }
.dr__lights { position: absolute; top: 15px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.dr__lights i { width: 6px; height: 6px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 8px 2px rgba(255, 246, 214, .9); animation: dr-on .6s var(--ease-out); }
.dr__leaf { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #6f5ff0, #4a3cc0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); }
.dr__leaf::before, .dr__leaf::after { content: ""; position: absolute; left: 12px; right: 12px; border: 1.5px solid rgba(255, 255, 255, .2); }
.dr__leaf::before { top: 12px; height: 42px; border-radius: 26px 26px 3px 3px; }
.dr__leaf::after { bottom: 12px; height: 38px; border-radius: 3px; }
.dr__knob { position: absolute; right: 10px; top: 62px; width: 7px; height: 7px; border-radius: 50%; background: #ffd166; }
.vc__demo--door.is-open .dr__leaf { transform: rotateY(-108deg); }

/* ---------- how I work: the four steps as big titles beside the illustration, free on the night sky (about.js) ---------- */
.hw__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.hw__steps { margin: 0; padding: 0; list-style: none; }
.hw__s { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; width: 100%; padding: 22px 0; text-align: left; border-top: 1px solid rgba(236, 235, 243, .1); }
.hw__steps li:last-child .hw__s { border-bottom: 1px solid rgba(236, 235, 243, .1); }
.hw__s:focus-visible { outline-offset: 2px; }
.hw__n { font: 500 13px/1 var(--f-mono); color: #6c6a85; transition: color .4s; }
.hw__t { font: 650 clamp(30px, 3.4vw, 52px)/1 var(--f-display); letter-spacing: -.04em; color: rgba(236, 235, 243, .28); transition: color .4s; }
.hw__s:hover .hw__t { color: rgba(236, 235, 243, .6); }
.hw__d { grid-column: 2; display: none; max-width: 44ch; margin-top: 14px; color: var(--mute); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.6; }
.hw__s[aria-pressed="true"] .hw__t { color: var(--fg); }
.hw__s[aria-pressed="true"] .hw__n { color: #bdb3ff; }
.hw__s[aria-pressed="true"] .hw__d { display: block; animation: rn-in .5s var(--ease-out); }
/* the open step's progress: one bar that fills while the illustration plays it out (transform only) */
.hw__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.hw__bar i { position: absolute; inset: 0; background: #8f7dff; transform: scaleX(0); transform-origin: 0 50%; }
.hw__s[aria-pressed="true"] .hw__bar i { animation: hw-fill var(--hold, 5s) linear forwards; }
.hw.is-manual .hw__s[aria-pressed="true"] .hw__bar i { animation: none; transform: none; }
/* wide screens: the illustration sits against the right edge of the page (the phone is drawn at x 410-525 of the
   640-wide board, so the board also slides right by most of what is left of it) */
@media (min-width: 901px) {
  .hw .cr__board { left: auto; right: 0; transform-origin: 100% 50%; transform: translate(calc(var(--k, .8) * 95px), -50%) scale(var(--k, .8)); }
}
@media (max-width: 900px) {
  .hw__grid { grid-template-columns: minmax(0, 1fr); }
}

@keyframes rn-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hw-fill { to { transform: none; } }
@keyframes tm-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes tm-blink { 50% { opacity: 0; } }
@keyframes dr-on { from { opacity: 0; transform: scale(.4); } }
@keyframes vc-bump { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .tm p, .tm__caret, .dr__lights i, .hw__s[aria-pressed="true"] .hw__d, .hw__bar i, [data-s="1"] .cr__ui > .cr__tap, [data-s="1"] .cr__btn { animation: none; }
  .cr__board *, .cr__board > * { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- how I work: the app that builds itself beside the steps. The board is the original illustration; each step
   is a pose of it, and changing step glides between poses with transitions (no frame-by-frame script) ---------- */
@property --draw { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --sk { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pol { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
.hw__stage { position: relative; min-height: 560px; overflow: hidden; background: radial-gradient(50% 50% at 55% 50%, rgba(143, 125, 255, .2), transparent 70%); }
/* drawn at 640 × 520 and scaled to fit the stage (about.js sets --k) */
.cr__board { position: absolute; left: 50%; top: 50%; width: 640px; height: 520px; transform: translate(-50%, -50%) scale(var(--k, .8)); }
.cr__board > * { position: absolute; left: 0; top: 0; --dx: 0px; --dy: 0px; --s: 1; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(var(--s)); opacity: 0; transition: transform .8s var(--ease-out), opacity .5s; transition-delay: var(--t, 0s); }
.cr__phone { --x: 410px; --y: 260px; width: 230px; height: 460px; margin: -230px 0 0 -115px; padding: 10px; border-radius: 42px; background: linear-gradient(145deg, #2c2f3b, #14161d 45%, #23262f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(143, 125, 255, .35); }
.cr__screen { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: linear-gradient(180deg, #17142a, #0d0c16); }
.cr__sketch { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(189, 179, 255, .75); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: var(--draw); opacity: var(--sk); transition: --draw 1.4s var(--ease-io), --sk .6s; }
.cr__ui { position: absolute; inset: 0; padding: 46px 16px 16px; display: grid; grid-template-rows: auto 120px auto auto auto 1fr auto; gap: 10px; align-content: start; transition: --pol 1s var(--ease-io) .5s; }
.cr__ui > * { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--ease-out); transition-delay: calc(.35s + var(--i, 0) * 90ms); }
.cr__title { width: 110px; height: 16px; border-radius: 6px; background: var(--fg); }
.cr__hero { position: relative; overflow: hidden; border-radius: calc(6px + var(--pol) * 12px); background: rgba(168, 152, 255, .3); display: grid; place-items: center; }
.cr__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #a898ff, #6b5cff); opacity: var(--pol); }
.cr__hero i { position: relative; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.cr__row { height: 46px; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 0 10px; border-radius: calc(4px + var(--pol) * 8px); background: rgba(189, 179, 255, .08); }
.cr__row > i { width: 28px; height: 28px; border-radius: 8px; background: rgba(168, 152, 255, .45); }
.cr__row > b { height: 8px; border-radius: 4px; background: rgba(236, 235, 243, .55); }
.cr__toggle { position: relative; width: 36px; height: 22px; border-radius: 99px; background: color-mix(in srgb, #a898ff calc(var(--on) * 100%), rgba(189, 179, 255, .25)); transition: --on .25s var(--ease-io); }
.cr__toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(calc(var(--on) * 14px)); }
.cr__btn { height: 40px; display: grid; place-items: center; border-radius: 99px; background: #a898ff; color: var(--ink); font: 600 14px/1 var(--f-display); box-shadow: 0 0 calc(var(--pol) * 26px) rgba(168, 152, 255, calc(var(--pol) * .7)); }
.cr__tabs { grid-row: 7; display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid rgba(189, 179, 255, .15); }
.cr__tabs i { width: 18px; height: 18px; border-radius: 6px; background: rgba(236, 235, 243, .3); }
.cr__tabs i:first-child { background: #a898ff; }
/* a fingertip trying the prototype: it flips the switch, then presses the button */
.cr__ui > .cr__tap { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 1.5px solid rgba(255, 255, 255, .8); opacity: 0; transform: translate(166px, 225px); pointer-events: none; transition: none; }
.cr__code { --x: 150px; --y: 280px; z-index: 3; width: 290px; margin: -100px 0 0 -145px; padding: 16px 18px; border-radius: 16px; background: rgba(20, 18, 32, .94); border: 1px solid rgba(189, 179, 255, .3); box-shadow: 0 30px 60px -24px #000; font: 500 12px/1.7 var(--f-mono); color: var(--fg); }
.cr__code p { margin: 0; white-space: pre; opacity: 0; transition: opacity .3s; transition-delay: calc(.2s + var(--i, 0) * 70ms); }
.cr__code .k { color: #a898ff; }
.cr__icon { --x: 410px; --y: 260px; z-index: 4; width: 110px; height: 110px; margin: -55px 0 0 -55px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(145deg, #bdb3ff, #6b5cff); box-shadow: 0 24px 50px -16px rgba(107, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.cr__icon svg { width: 46px; fill: #fff; }
.cr__note { --x: 150px; z-index: 3; width: 240px; margin: -21px 0 0 -120px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(20, 18, 32, .94); border: 1px solid rgba(255, 196, 107, .35); box-shadow: 0 20px 40px -20px #000; font: 600 14px/1.2 var(--f-display); color: var(--fg); }
.cr__note:nth-child(1) { --y: 140px; } .cr__note:nth-child(2) { --y: 250px; } .cr__note:nth-child(3) { --y: 360px; }
.cr__note i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffc46b; color: #22180e; font: 700 13px/1 var(--f-display); font-style: normal; }
.cr__guides { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; fill: #ffc46b; stroke: #ffc46b; stroke-width: 1; transition: opacity .5s; }
.cr__guides path { fill: none; stroke-dasharray: 4 4; opacity: .8; }
.cr__guides .cr__gm { stroke-dasharray: none; }
.cr__guides text { stroke: none; font: 600 9px/1 var(--f-mono); }
.cr__curve { --x: 150px; --y: 280px; z-index: 3; width: 220px; margin: -80px 0 0 -110px; padding: 14px 16px 12px; border-radius: 16px; background: rgba(20, 18, 32, .94); border: 1px solid rgba(255, 196, 107, .35); box-shadow: 0 30px 60px -24px #000; }
.cr__curve svg { display: block; width: 100%; height: auto; fill: none; }
.cr__axis { stroke: rgba(236, 235, 243, .25); stroke-width: 1.5; }
.cr__ease { stroke: #ffc46b; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--draw); transition: --draw 1s var(--ease-io) .45s; }
.cr__curve p { margin: 8px 0 0; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #ffc46b; }
.cr__live { --x: 410px; --y: 206px; z-index: 4; padding: 8px 16px; margin: -16px 0 0 -44px; border-radius: 99px; background: #a898ff; color: var(--ink); font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 30px rgba(143, 125, 255, .6); }

/* the hidden poses: the notes slide in from the left, the cards rise from below */
.cr__note { --dx: -24px; }
.cr__code, .cr__curve { --dy: 30px; }
.cr__icon { --s: .4; }
/* 01 understanding the idea: the questions pop up one by one while the first outline of the idea is sketched */
[data-s="0"] .cr__note { --dx: 0px; opacity: 1; }
.cr__note:nth-child(2) { --t: .15s; } .cr__note:nth-child(3) { --t: .3s; }
[data-s="0"] .cr__sketch { --draw: 0; }
/* the phone is there from the start */
.cr__board > .cr__phone { opacity: 1; }
/* 02 prototype: real code types itself and the working screen comes alive line by line, then a fingertip tries it */
[data-s="1"] .cr__code { --dy: 0px; opacity: 1; }
[data-s="1"] .cr__code p { opacity: 1; }
[data-s="1"] .cr__sketch, [data-s="2"] .cr__sketch { --draw: 0; --sk: .25; }
[data-s="1"] .cr__ui > :not(.cr__tap), [data-s="2"] .cr__ui > :not(.cr__tap), [data-s="3"] .cr__ui > :not(.cr__tap) { opacity: 1; transform: none; }
[data-s="1"] .cr__ui > .cr__tap { animation: cr-tap 2.2s var(--ease-io) 1.2s both; }
[data-s="1"] .cr__toggle, [data-s="2"] .cr__toggle, [data-s="3"] .cr__toggle { --on: 1; transition-delay: 1.85s; }
[data-s="1"] .cr__btn { animation: cr-press .3s ease-in-out 2.75s; }
/* 03 refine: spacing guides lay over the screen, the motion curve is tuned, and the rough screen is polished */
[data-s="2"] .cr__guides { opacity: 1; }
[data-s="2"] .cr__curve { --dy: 0px; opacity: 1; }
[data-s="2"] .cr__ease { --draw: 0; }
[data-s="2"] .cr__ui, [data-s="3"] .cr__ui { --pol: 1; }
/* 04 launch: the phone shrinks into its app icon, which lifts off and goes live */
[data-s="3"] .cr__sketch { --sk: 0; }
.cr__board[data-s="3"] > .cr__phone { --s: .28; opacity: 0; transition: transform .8s var(--ease-io), opacity .35s .35s; }
[data-s="3"] .cr__icon { --s: 1; --dy: -150px; opacity: 1; --t: .4s; transition: transform 1s var(--ease-io), opacity .3s; transition-delay: .4s; }
[data-s="3"] .cr__live { --dy: 0px; opacity: 1; --t: 1.2s; }
.cr__live { --dy: 24px; }
@media (max-width: 900px) {
  /* the board is drawn on x 30-530 and y 20-500 of its 640 × 520 canvas: below 900px it is scaled to that part
     (about.js) and shifted so that part is centred, and the stage runs edge to edge, so the labels stay readable */
  .hw__stage { order: -1; min-height: 0; aspect-ratio: 1 / .94; margin-inline: calc(var(--gutter) * -1); }
  .cr__board { transform: translate(calc(-50% + 40px * var(--k, .8)), -50%) scale(var(--k, .8)); }
}
@media (max-width: 760px) {
  .ab { padding-block: 72px; }
  .ab__t { margin-bottom: 36px; }
  .ml-hero { padding-bottom: 48px; }
  .hw__grid { gap: 24px; }
  /* phones: the picture and the open step's words fit on one screen together, so nobody scrolls between them: a
     shorter stage, the open step keeps its big title, and the closed ones shrink to slim rows */
  .hw__grid { gap: 8px; }
  .hw__stage { aspect-ratio: 1 / .84; }
  .hw__s { grid-template-columns: 36px minmax(0, 1fr); padding: 10px 0; }
  .hw__t { font-size: 18px; letter-spacing: -.02em; }
  .hw__s[aria-pressed="true"] { padding-block: 14px; }
  .hw__s[aria-pressed="true"] .hw__t { font-size: 26px; letter-spacing: -.035em; }
  .hw__d { margin-top: 8px; font-size: 15px; line-height: 1.5; }
}
}
@keyframes cr-tap {
  0% { opacity: 0; transform: translate(166px, 225px) scale(1.2); }
  12% { opacity: 1; transform: translate(166px, 225px); }
  22% { transform: translate(166px, 225px) scale(.75); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  32% { transform: translate(166px, 225px); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  55% { transform: translate(105px, 334px); box-shadow: none; }
  66% { transform: translate(105px, 334px) scale(.75); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  78% { opacity: 1; transform: translate(105px, 334px); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { opacity: 0; transform: translate(105px, 334px); }
}
@keyframes cr-press { 50% { transform: scale(.92); } }

@keyframes pv-pulse { 50% { transform: scale(.86); opacity: .75; } }
@keyframes pv-tap { 0%, 30%, 100% { transform: none; } 36% { transform: scale(.94); } 44% { transform: none; } }
@keyframes pv-ripple { 0%, 36% { opacity: 0; transform: none; } 40% { opacity: .8; } 70%, 100% { opacity: 0; transform: scale(1.35, 1.8); } }
@keyframes cd-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }
@keyframes cd-tail { from { transform: rotate(6deg); } to { transform: rotate(-14deg); } }
@keyframes cd-steam { 0% { opacity: 0; transform: translateY(3px); } 50% { opacity: .9; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------- mission and vision: numbered, with a seal turning slowly in the corner ---------- */
.ps__k { display: flex; align-items: baseline; gap: 14px; }
.ps__no { font: 500 clamp(40px, 4vw, 64px)/.8 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px #5b4bd6; }
.ps__t em.ser { font-weight: 400; letter-spacing: -.01em; font-size: 1.08em; }
.ps__seal { position: absolute; right: var(--gutter); top: calc(clamp(96px, 11vw, 160px) * -1 - clamp(130px, 11vw, 168px) / 2); z-index: 1; width: clamp(130px, 11vw, 168px); aspect-ratio: 1; border-radius: 50%; background: #16141f; box-shadow: 0 30px 60px -30px rgba(22, 20, 31, .7); }
.ps .ab__in { position: relative; }
.ps__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 28s linear infinite; }
.ps__ring text { font: 600 14px var(--f-mono); fill: #bdb3ff; }
.ps__heart { position: absolute; left: 50%; top: 50%; width: 30%; margin: -13% 0 0 -15%; fill: #ff4d6d; animation: ps-beat 1.8s ease-in-out infinite; }
@media (max-width: 1000px) {
  .ps__seal { display: none; }
}

@keyframes jt-ping { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes jt-comet { 0% { opacity: 0; transform: translateX(-100%); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes ps-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.14); } 30% { transform: scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .jt__dot::after, .jt__comet > i, .ps__ring, .ps__heart { animation: none !important; }
  .jt__comet { display: none; }
}

/* touch screens: the small controls get a finger-sized hit area without changing how they look */
@media (pointer: coarse) {
  .jt__cta { position: relative; }
  .jt__cta::after, .vc__btn::after { content: ""; position: absolute; inset: -12px -8px; }
}