:root {
--palette-violet: 101 75 143;
  --palette-blue: 73 111 152;
  --palette-accent: 176 138 74;
  
  
  
  --metal-base: 36 33 43;
  --metal-light: 229 225 237;
  --metal-light-mid: 175 178 210;
  --metal-accent: 208 182 127;
  --metal-accent-shade: 156 130 90;
  --metal-blue: 130 158 205;
  --metal-blue-shade: 75 102 140;
  --metal-violet: 170 140 192;
  --metal-violet-shade: 112 82 139;
  
  --palette-focus: 98 86 122;
  
  --digital-hand-ink: #282c36;
  
  
  
  
  
  
  
  
}
@font-face {
font-family: "Switzer";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.fontshare.com/wf/EW5HJEX6O4L64XUWQA2XU7Q6BZ3B4JA4/ZWUP4SQYHHMMSS5LFHFFBX6DXL7C3DTU/H5EOHLIZH5K7IZK6SGYJI75L4KV6FUO7.woff2") format("woff2");
}
@font-face {
font-family: "Switzer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.fontshare.com/wf/HBNTRIISA5MEXGL5WPYI7CV2HIWTDV3Q/YDPDINVT673XLXNSTMLG4JNCZZMVVNPN/Y7SCNZJOT2MW5ADSGOFLDGH4TNL4JCQY.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/ibm-plex-mono-regular.ttf") format("truetype");
}
:root {
color-scheme: light;
  --site-font: "Switzer";
  --hands-scale: .7;
  font-family: var(--site-font), sans-serif;
  font-weight: 300;
  font-synthesis: none;
  color: #171717;
  background: #f7f7f7;
  -webkit-font-smoothing: antialiased;
}
:root {
--site-font: "Switzer";
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
::selection {
color: #171717; background: #e5e5e5;
}
.touch-page {
padding: 24px;
}
.touch-shell {
position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 48px);
  max-width: 1760px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 20px;
  overflow: hidden;
}
:root .touch-shell {
max-width: none;
}
.touch-shell::before {
content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
:root {
--backdrop-color-strength: .6; --backdrop-accent-strength: .4;
}
:root .touch-shell::before {
background-image:
    radial-gradient(ellipse 56% 45% at 98% 7%, rgb(var(--palette-blue) / calc(0.239216 * var(--backdrop-color-strength, 1))), rgb(var(--palette-blue) / calc(0.090196 * var(--backdrop-color-strength, 1))) 42%, transparent 76%),
    radial-gradient(ellipse 54% 44% at 1% 98%, rgb(var(--palette-accent) / calc(0.254902 * var(--backdrop-accent-strength, 1))), rgb(var(--palette-accent) / calc(0.090196 * var(--backdrop-accent-strength, 1))) 42%, transparent 77%),
    radial-gradient(ellipse 46% 30% at 95% 99%, rgb(var(--palette-violet) / calc(0.156863 * var(--backdrop-color-strength, 1))), transparent 76%);
}
.touch-main {
position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.touch-stage {
position: relative; width: 100%; height: clamp(240px, 43vh, 440px); flex: none;
}
#hands-canvas {
position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.touch-emblem {
--emblem-size: 84px;
  position: absolute;
  z-index: 1;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 1px solid #e7e7e7;
  border-radius: 26px;
  background: #fff;
}
:root .touch-emblem {
top: calc(38% + 28px); box-shadow: none;
}
.touch-icon {
display: block;
  width: var(--emblem-size);
  height: var(--emblem-size);
  transform-box: view-box;
  transform-origin: 50% 50%;
}
:root .touch-icon,
:root .touch-wordmark img {
transform: scaleX(-1);
}
.touch-icon-mask .touch-icon-art {
display: block;
  width: 100%;
  height: 100%;
  background: #171717;
  -webkit-mask-image: var(--orbit-mask, url("../assets/orbit.svg?v=2"));
  mask-image: var(--orbit-mask, url("../assets/orbit.svg?v=2"));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform-origin: 50% 50%;
}
.touch-icon-mask .touch-icon-metal {
display: block; width: 100%; height: 100%;
}
.touch-icon-metal {
width: 128px;
  height: 128px;
  pointer-events: none;
  opacity: .94;
  background-color: rgb(var(--metal-base));
  background-image:
    radial-gradient(ellipse 48% 64% at 32% 28%, rgb(var(--metal-light) / 0.549020) 0%, rgb(var(--metal-light-mid) / 0.400000) 30%, rgb(var(--metal-light-mid) / 0.160784) 60%, transparent 88%),
    radial-gradient(ellipse 50% 42% at 75% 60%, rgb(var(--metal-accent)) 0%, rgb(var(--metal-accent-shade) / 0.600000) 42%, transparent 76%),
    radial-gradient(ellipse 46% 62% at 24% 75%, rgb(var(--metal-blue) / 0.901961) 0%, rgb(var(--metal-blue-shade) / 0.549020) 45%, transparent 76%),
    radial-gradient(ellipse 60% 45% at 70% 20%, rgb(var(--metal-violet) / 0.850980) 0%, rgb(var(--metal-violet-shade) / 0.501961) 45%, transparent 78%);
  background-size: 160% 170%, 145% 165%, 175% 145%, 155% 180%;
  background-position: 10% 30%, 80% 60%, 20% 90%, 65% 5%;
  background-repeat: no-repeat;
  animation: icon-metal-shift 12s ease-in-out -2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.touch-icon-metal {
animation: none; opacity: .65;
}
}
.touch-emblem:focus-visible {
outline: 2px solid #555; outline-offset: 6px;
}
.touch-copy {
position: relative;
  top: -24px;
  container-type: inline-size;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 12px 32px 28px;
  text-align: center;
}
:root .touch-copy {
top: -44px;
}
.logo-wordmark .brand-llc {
margin-inline-start: 2px;
}
:root .logo-wordmark {
font-weight: 300; letter-spacing: .035em;
}
:root .logo-wordmark .brand-llc {
font-weight: 700; letter-spacing: inherit;
}
.touch-wordmark {
display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.touch-wordmark img {
display: block; flex: none; width: 26px; height: 26px;
}
.touch-copy h1 {
margin: 20px 0 0; font-size: clamp(2.05rem, 6.1cqw, 4.1rem); font-weight: 300; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance;
}
.touch-copy h1 span {
display: block;
}
.updates-form {
--updates-inset: 5px; --updates-button-height: 42px; width: min(100%, 350px); margin: 28px auto 0;
}
.updates-row {
position: relative; display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid #dedee1; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px #17171704;
}
.updates-row:focus-within {
border-color: #95909d; box-shadow: 0 0 0 3px rgb(var(--palette-focus) / 0.043137);
}
.updates-row input {
width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 0; outline: none; border-radius: 7px; font: inherit; font-size: 1rem; color: #171717; background: transparent;
}
.updates-row input::placeholder {
color: #909094; opacity: 1;
}
.updates-row button {
flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 8px; background: #202023; color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.updates-row button:hover {
background: #3c3b42;
}
.updates-row button:focus-visible {
outline: 2px solid #777180; outline-offset: 3px;
}
.updates-row button:disabled {
cursor: default; opacity: .65;
}
.updates-status {
min-height: 1.5em; margin: 9px 0 0; color: #737373; font-size: .75rem; line-height: 1.5;
}
.updates-form[data-state="error"] .updates-status {
color: #9a4141;
}
.updates-form[data-state="success"] .updates-status {
color: #4e6855;
}
:root .updates-status {
position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:root .updates-form[data-state="error"] .updates-status {
position: static; width: auto; height: auto; margin-top: 8px;
  overflow: visible; clip-path: none; white-space: normal;
}
.updates-consent {
margin: 8px 0 0; color: rgb(23 23 23 / .62); font-size: 10.5px; line-height: 1.5;
}
.terms-link {
position: relative; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-decoration: underline; text-decoration-color: rgb(23 23 23 / .3); text-underline-offset: 3px; cursor: pointer;
}
.terms-link:hover {
color: #171717; text-decoration-color: currentColor;
}
.terms-link:focus-visible,
.terms-close:focus-visible {
outline: 2px solid #737373; outline-offset: 3px; border-radius: 3px;
}
body.terms-open {
overflow: hidden;
}
.terms-dialog {
position: fixed; width: min(540px, calc(100% - 32px)); max-height: min(760px, 86svh); margin: auto; padding: 0; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 20px; background: #fff; color: #343434; box-shadow: 0 24px 80px #17171726; font-family: var(--site-font), sans-serif; font-weight: 300;
}
.terms-content {
max-height: inherit; padding: 30px; overflow-y: auto; overscroll-behavior: contain;
}
.terms-dialog::backdrop {
background: rgb(23 23 23 / .24);
}
.terms-close {
position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #f6f6f6; color: #555; cursor: pointer;
}
.terms-close:hover {
background: #ededed;
}
.terms-dialog .terms-eyebrow {
margin: 0 52px 8px 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #737373;
}
.terms-dialog h2 {
margin: 0 36px 8px 0; font-size: 28px; line-height: 1.15; font-weight: 300; letter-spacing: -.03em;
}
.terms-dialog .terms-intro {
margin-top: 0; color: #737373;
}
.terms-dialog h3 {
margin: 24px 0 8px; font-size: 14px; line-height: 1.4; font-weight: 700;
}
.terms-dialog p {
font-size: 14px; line-height: 1.65;
}
.terms-dialog a {
color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.terms-dialog .terms-date {
margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #ececec; color: #737373; font-size: 11px;
}
@media (max-width: 480px) {
.terms-dialog {
width: calc(100% - 24px); max-height: 88svh; border-radius: 18px;
}
.terms-content {
padding: 24px 20px;
}
.terms-close {
top: 10px; right: 10px;
}
}
.updates-action {
flex: none;
}
.updates-action button {
position: relative; display: block; isolation: isolate;
}
.updates-action button::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background-image: radial-gradient(ellipse at 16% 5%, rgb(255 255 255 / .12), transparent 64%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.22' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 144px 144px;
}
.updates-button-label {
position: relative; z-index: 1; display: inline-block; white-space: nowrap; transition: opacity .16s ease;
}
:root .updates-row input {
transition: opacity .2s ease;
}
:root .updates-form[data-feedback] .updates-action {
width: var(--updates-rest-width); height: var(--updates-button-height);
}
:root .updates-form[data-feedback] .updates-action button {
position: absolute; z-index: 1; right: var(--updates-inset); bottom: var(--updates-inset);
  width: var(--updates-rest-width); height: var(--updates-button-height); padding-inline: 12px;
  transition: width .55s cubic-bezier(.22, 1, .36, 1), height .55s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}
:root .updates-form[data-feedback] button:disabled {
opacity: 1;
}
:root .updates-form[data-feedback="expanded"] .updates-action button {
width: calc(100% - var(--updates-inset) * 2);
  height: calc(100% - var(--updates-inset) * 2);
  background: #2c664f;
}
:root .updates-form[data-feedback="expanded"] .updates-row input {
opacity: 0;
}
:root .updates-form[data-feedback="expanded"] .updates-action button::before {
opacity: 1;
}
:root .updates-form[data-label-hidden="true"] .updates-button-label {
opacity: 0;
}
:root .updates-form[data-state="success"] .updates-status {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
:root .updates-form[data-feedback] .updates-action button,
:root .updates-action button::before,
:root .updates-button-label,
:root .updates-row input {
transition: none;
}
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.touch-footer {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 68px; margin-inline: 28px; color: #737373; font-size: .75rem; line-height: 1.5;
}
.touch-footer p {
margin: 16px 40px; text-align: center;
}
:root[data-intro="entering"] .touch-shell {
animation: hands-intro-fade .7s ease-out backwards;
}
:root[data-intro="entering"] .touch-emblem {
animation: hands-intro-fade 1.1s ease-in-out .12s backwards;
}
:root[data-intro="entering"] .touch-wordmark {
animation: hands-intro-fade 1s ease-in-out .3s backwards;
}
:root[data-intro="entering"] .touch-copy h1 {
animation: hands-intro-fade 1.1s ease-in-out .4s backwards;
}
:root[data-intro="entering"] .updates-form {
animation: hands-intro-fade 1s ease-in-out .55s backwards;
}
:root[data-intro="entering"] .touch-footer {
animation: hands-intro-fade .9s ease-in-out .7s backwards;
}
:root #hands-canvas {
opacity: 0;
}
:root #hands-canvas[data-revealed="true"] {
opacity: 1;
  animation: hands-intro-fade 1.2s ease-in-out .12s backwards;
}
@media (prefers-reduced-motion: reduce) {
:root[data-intro="entering"] :is(.touch-shell, .touch-emblem, .touch-wordmark, .touch-copy h1, .updates-form, .touch-footer),
:root #hands-canvas[data-revealed="true"] {
animation: none;
}
}
@media (max-width: 700px) {
.touch-page {
padding: 12px;
}
.touch-shell {
min-height: calc(100svh - 24px); border-radius: 16px;
}
.touch-stage {
height: clamp(210px, 37vh, 320px);
}
.touch-emblem {
--emblem-size: 58px; width: 72px; height: 72px; border-radius: 19px;
}
.touch-copy {
top: -12px; padding: 12px 20px 24px;
}
:root .touch-copy {
top: -24px;
}
.touch-copy h1 {
margin-top: 18px; font-size: clamp(1.8rem, 8.4cqw, 2.65rem); line-height: 1.12;
}
.touch-wordmark {
font-size: .8125rem;
}
.touch-wordmark img {
width: 23px; height: 23px;
}
.updates-form {
margin-top: 24px;
}
.updates-row {
gap: 4px;
}
.updates-row button {
padding-inline: 13px;
}
.touch-footer {
margin-inline: 18px;
}
.touch-footer p {
margin-inline: 44px; font-size: .75rem;
}
}
@media (max-width: 700px) {
:root {
--hands-scale: .92;
    --hands-angle: 26;
    --digital-hand-density: 3;
    --hands-pixel-ratio-limit: 3;
}
:root .touch-page {
padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
:root .touch-shell {
min-height: calc(100svh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
    border-radius: 22px;
}
:root .touch-main {
padding: 24px 0 56px;
}
:root .touch-stage {
height: clamp(200px, 27svh, 250px);
}
:root .touch-emblem {
top: calc(44% + 12px); width: 70px; height: 70px; --emblem-size: 56px;
}
:root .touch-copy {
top: 0; padding: 0 24px 12px; max-width: 388px;
}
:root .touch-wordmark {
font-size: .8125rem; gap: 8px;
}
:root .touch-wordmark img {
width: 22px; height: 22px;
}
:root .touch-copy h1 {
margin-top: 20px; font-size: clamp(1.625rem, 10.5cqw, 2.25rem); line-height: 1.14; letter-spacing: -.045em;
}
:root .updates-form {
--updates-button-height: 48px; width: min(100%, 340px); margin-top: 26px;
}
:root .updates-row input {
font-size: 16px; height: 48px;
}
:root .updates-row button {
min-height: 48px; font-size: .875rem;
}
:root .touch-footer {
min-height: 54px; margin-inline: 16px;
}
:root .touch-footer p {
margin: 14px 0; font-size: .6875rem; line-height: 1.5;
}
}
@media (max-width: 480px) {
:root .updates-form {
--updates-inset: 6px;
}
:root .updates-row {
flex-direction: column; align-items: stretch; padding: 6px; gap: 4px; border-radius: 15px;
}
:root .updates-row input {
padding-inline: 12px;
}
:root .updates-row button {
width: 100%; border-radius: 9px;
}
:root .updates-form[data-feedback] .updates-action {
width: 100%;
}
:root .updates-form[data-feedback] .updates-action button {
width: calc(100% - var(--updates-inset) * 2);
}
}
@media (max-width: 360px) {
:root {
--hands-scale: .88;
}
:root .touch-copy {
padding-inline: 20px;
}
:root .touch-emblem {
--emblem-size: 51px; width: 64px; height: 64px; border-radius: 18px;
}
}
@media (max-width: 700px) and (max-height: 700px) {
:root .touch-main {
padding: 44px 0 8px;
}
:root .touch-stage {
height: 170px;
}
:root .updates-form {
margin-top: 20px;
}
:root .touch-footer {
min-height: 46px;
}
}
@keyframes icon-metal-shift {
  0%, 100% {
    background-position: 10% 30%, 80% 60%, 20% 90%, 65% 5%;
    background-size: 160% 170%, 145% 165%, 175% 145%, 155% 180%;
  }
  25% {
    background-position: 75% 5%, 35% 100%, 100% 35%, 5% 60%;
    background-size: 180% 145%, 170% 180%, 140% 170%, 170% 145%;
  }
  50% {
    background-position: 100% 75%, 0% 35%, 45% 0%, 60% 100%;
    background-size: 145% 190%, 180% 140%, 165% 185%, 140% 160%;
  }
  75% {
    background-position: 30% 100%, 90% 0%, 0% 55%, 100% 40%;
    background-size: 170% 150%, 155% 180%, 190% 155%, 180% 140%;
  }
}

@keyframes hands-intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}