@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #111;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --page-inset: clamp(28px, 8.5vw, 160px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #111; outline-offset: 8px; border-radius: 1px; }
::selection { color: #fff; background: #111; }
.site-header { position: fixed; top: 0; left: 0; right: 0; padding: 28px var(--page-inset); z-index: 2; pointer-events: none; }
.wordmark { display: inline-block; font-size: 17px; font-weight: 700; letter-spacing: -.65px; line-height: 1.5; pointer-events: auto; }
.product { position: relative; min-height: 100svh; padding: max(170px, 29svh) var(--page-inset) 140px; scroll-snap-align: start; }
.product-copy { max-width: 1100px; }
/* Scroll position owns the entire handoff, including intermediate states. */
html.home-motion { scroll-snap-type: y mandatory; scroll-behavior: auto; }
.home-motion .product { scroll-snap-align: start; scroll-snap-stop: always; }
.home-motion .product-copy, .home-motion .description { transition: none; filter: none; }
.home-motion .product-copy { will-change: opacity, transform; }
.home-motion .next-product { position: fixed; z-index: 2; transition: none; }
h2:focus { outline: none; }
h2, .detail-title { margin: 0; font-size: clamp(64px, 8.6vw, 144px); font-weight: 600; letter-spacing: -.067em; line-height: 1.08; }
.product-link { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: .035em; text-underline-offset: .13em; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .product-link:hover { text-decoration-color: currentColor; }
}
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.75; letter-spacing: .005em; margin: 20px 0 0; }
.description { font-size: 16px; line-height: 1.95; color: #666; margin: 30px 0 0; }
.description[data-i18n], .studio-manifesto[data-i18n] { white-space: pre-line; }
.software .description { max-width: 640px; }
.product-link .link-arrow { display: inline-block; width: .28em; height: .28em; vertical-align: top; margin: .08em 0 0 .09em; color: inherit; }
.software h2 .product-link { white-space: nowrap; }
.product.software { display: flex; flex-direction: column; padding-bottom: 42px; }
.product-ascii { display: none; }
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .product.software { --product-art-width: clamp(200px, 28vw, 480px); }
  .software .product-copy { position: relative; z-index: 1; max-width: min(1100px, calc(100% - var(--product-art-width) - clamp(28px, 4vw, 64px))); }
  .product-ascii { display: block; position: absolute; right: var(--page-inset); top: 50%; transform: translateY(-50%); width: var(--product-art-width); margin: 0; color: #111; opacity: .17; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: calc(var(--product-art-width) / 26.4); font-weight: 400; font-style: normal; line-height: 1.08; letter-spacing: 0; white-space: pre; user-select: none; pointer-events: none; }
}
.platforms { margin: auto 0 0; padding-top: 64px; text-align: right; font-size: 13px; font-weight: 400; line-height: 1.8; letter-spacing: 0; color: #888; }
.next-product { position: absolute; left: var(--page-inset); bottom: 42px; display: inline-flex; align-items: center; gap: 14px; color: #666; font-size: 24px; line-height: 1.5; }
.next-product span { font-size: 30px; font-weight: 400; }
.next-product:hover { color: #111; }
.section-nav { position: fixed; left: 2vw; top: 50%; z-index: 3; transform: translateY(-50%); display: flex; flex-direction: column; }
.section-marker { display: flex; position: relative; align-items: center; width: 38px; min-height: 32px; }
.section-marker::before { content: ""; height: 1px; width: 10px; background: #aaa; transition: width 160ms ease, background 160ms ease; }
.section-marker.is-current::before, .section-marker:hover::before, .section-marker:focus-visible::before { width: 23px; background: #111; }
.section-marker span { position: absolute; left: 36px; padding: 5px 8px; background: white; white-space: nowrap; font-size: 14px; opacity: 0; pointer-events: none; }
.section-marker:hover span, .section-marker:focus-visible span { opacity: 1; }
.detail { min-height: 100svh; padding: max(170px, 29svh) var(--page-inset) 100px; }
.detail { display: flex; flex-direction: column; padding-bottom: 42px; }
.coming-soon { margin: 26px 0 0; font-size: 16px; line-height: 1.6; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 18px; left: var(--page-inset); padding: 10px; background: #fff; z-index: 10; }
@media (max-width: 600px) {
  .site-header { padding-top: 24px; }
  .section-nav { display: none; }
  .product, .detail { padding-top: max(160px, 30svh); }
  h2, .detail-title { font-size: clamp(48px, 12.6vw, 76px); letter-spacing: -.065em; }
  .lead { font-size: 18px; margin-top: 20px; }
  .description { margin-top: 25px; font-size: 16px; }
  .description br { display: none; }
  .description { max-width: 330px; }
  .next-product { bottom: 32px; font-size: 22px; }
}
/* The opening studio shares the products' typography and whitespace. */
.studio { padding-top: max(110px, 15svh); padding-bottom: max(70px, 8svh); isolation: isolate; }
.studio-layout { position: relative; z-index: 1; }
.character-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 100px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 100px), transparent 100%); }
.ring-canvas { display: block; width: 100%; aspect-ratio: 1; pointer-events: none; }
.studio-art.is-live .ascii-sculpture { display: none; }
.studio-art.is-live { width: min(100%, 68svh, 820px); justify-self: center; }
.studio-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 72px); max-width: none; }
.studio-label { margin: 0 0 26px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; letter-spacing: -.025em; }
.studio h2 { font-size: clamp(64px, 7.8vw, 132px); }
.studio-period { margin-left: .035em; }
.studio-manifesto { margin: 32px 0 0; font-size: clamp(20px, 2.1vw, 34px); font-weight: 400; letter-spacing: -.04em; line-height: 1.4; }
.studio-art { min-width: 0; width: 100%; padding-top: 24px; }
.ascii-sculpture { margin: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(7px, .84vw, 14px); font-weight: 400; line-height: 1.35; letter-spacing: 0; white-space: pre; user-select: none; }
@media (max-width: 700px) {
  .studio { padding-top: 120px; padding-bottom: 64px; }
  .studio-layout { grid-template-columns: 1fr; gap: 40px; }
  .studio-label { margin-bottom: 20px; }
  .studio h2 { font-size: clamp(60px, 15vw, 88px); }
  .studio-manifesto { margin-top: 24px; font-size: clamp(21px, 5.7vw, 30px); }
  .studio-art { max-width: 380px; justify-self: center; padding: 0; }
  .studio-art.is-live { width: min(100%, 78vw, var(--mobile-ring-size, 380px), 380px); }
  .ascii-sculpture { font-size: clamp(6.5px, 1.37vw, 9px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before { transition: none !important; }
  html.home-motion { scroll-snap-type: none; }
  .home-motion .product-copy, .home-motion .description { opacity: 1; transform: none; filter: none; }
}

/* A quiet final screen after the software chapters. */
.product.upcoming { display: grid; place-items: center; padding: 0 var(--page-inset); }
.upcoming-label { margin: 0; color: #999; font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; }
.language-settings { position: absolute; bottom: max(42px, env(safe-area-inset-bottom)); left: var(--page-inset); right: var(--page-inset); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: #888; font-size: 13px; }
.language-settings select { max-width: 100%; min-height: 44px; padding: 8px 30px 8px 12px; border: 1px solid #ddd; border-radius: 0; background-color: #fff; color: #555; font: inherit; cursor: pointer; }
.language-settings select:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (max-width: 700px) {
  .product.software, .detail { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .platforms { padding-top: 48px; text-align: left; font-size: 12px; overflow-wrap: anywhere; }
  .software .description { max-width: 36em; }
  .language-settings { bottom: max(32px, env(safe-area-inset-bottom)); }
}

/* One visible word travels between the studio heading and the header slot. */
.studio-brand-text { display: inline-block; }
.home-page .wordmark-label { display: inline-block; font-weight: 600; letter-spacing: -.067em; line-height: 1.08; }
.home-page:not(.brand-ready) .wordmark { visibility: hidden; }
.brand-ready .wordmark-label { visibility: hidden; }
.brand-ready #studio-name { color: transparent; }
.brand-flight { position: fixed; top: 0; left: 0; z-index: 2; margin: 0; color: #111; white-space: nowrap; line-height: 1.08; font-weight: 600; letter-spacing: -.067em; transform-origin: 0 0; pointer-events: none; }
.brand-flight { will-change: transform; backface-visibility: hidden; }
.brand-flight canvas { position: absolute; display: block; }
.brand-flight .studio-period { margin: 0; }

/* Browser-owned vertical gestures and snapping on phones and desktops alike. */
.home-page main { touch-action: pan-x pan-y pinch-zoom; }

/* Hard, un-wonked display forms with a light stroke for product names. */
.software h2, .detail-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 250;
  font-style: italic;
  font-optical-sizing: none;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  letter-spacing: -.035em;
}

/* A mobile frame has one compositor position, shared with the Logo. */
html.phone-paging, .phone-paging body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.home-motion.phone-paging { scroll-snap-type: none; scroll-behavior: auto; }
.phone-paging main { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; touch-action: pan-x pinch-zoom; }