/* The app's own pixel contours float directly on the existing dark page. */
.pixel-character{display:block;width:126px;height:66px;flex:none;pointer-events:none}
.hero-character{display:block;width:252px;height:112px;margin:24px auto 16px;padding:0;border:0;border-radius:24px;background:transparent;touch-action:manipulation}
.hero-character .pixel-character{width:100%;height:100%}
.hero-character:focus-visible{outline:1px solid #c9bcf080;outline-offset:2px}
.hero .keyboard-stage{margin-top:12px}
.demo-section-heading{display:flex;align-items:center;justify-content:center;gap:20px;padding-inline:24px}
.support-signature{display:flex;align-items:center;justify-content:center;gap:20px}
.support-signature .pixel-character{width:105px;height:66px}
.faq-heading>.pixel-character{width:168px;height:88px}

/* Scroll reveals the text in reading order, with the original face at its side. */
.product-body{display:grid;grid-template-columns:minmax(0,706px) minmax(126px,1fr);gap:48px;align-items:start;margin-top:34px}
.product-body .product-copy{margin:0;max-width:none}
.product-character{position:sticky;top:calc(var(--header-height) + 32px);display:flex;align-items:center;justify-content:center;height:176px;overflow:clip}
.product-character .pixel-character{width:min(252px,100%);height:auto;aspect-ratio:21/11;opacity:var(--decode-arrival,1);transform:translateX(calc((1 - var(--decode-arrival,1)) * 32px))}
.decode-word{color:rgba(237,237,241,calc(.6 + .4 * clamp(0,(var(--decode-position,0) - var(--word-index)) / 5,1)));transition:color .12s linear}

/* Visible by default: loading, disabled JavaScript and reduced motion keep content. */
.character-motion .reveal-block{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
.character-motion .reveal-block[data-reveal="waiting"]{opacity:0;transform:translateY(22px)}
.character-motion .demo-card{transition:border-color .25s,background .25s,box-shadow .25s}
.character-motion .demo-card[data-active="true"]{border-color:#c9bcf02b;background:#141316;box-shadow:inset 0 1px 0 #ffffff04}
.character-motion .demo-card s{transition:text-decoration-color .4s,color .4s}
.character-motion .demo-card[data-active="true"] s{color:#ffffff45;text-decoration-color:#c9bcf077}
.character-motion .faq-list details[open] p{animation:answer-arrive .3s ease both}
@keyframes answer-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1101px){.hero{padding-top:90px}}
@media(max-width:760px){.hero-character{margin-top:20px;margin-bottom:12px}.demo-section-heading{gap:12px}}
@media(max-width:900px){.product-body{grid-template-columns:minmax(0,1fr) 126px;gap:24px}}
@media(max-width:560px){
  .hero .hero-copy{flex-direction:column;gap:24px;min-height:240px;padding-top:0}
  .hero-character{width:210px;height:88px;margin:0 auto}
  .hero .keyboard-stage{margin-top:0;padding-top:28px}
  .demo-section-heading{flex-direction:column;gap:8px}
  .demo-section-heading .pixel-character{width:105px;height:55px}
  .support-signature{gap:12px}
  .support-signature .pixel-character{width:84px;height:55px}
  .faq-heading>.pixel-character{width:147px;height:77px}
  .product-body{display:block;margin-top:25px}
  .product-character{position:relative;top:auto;justify-content:flex-end;height:72px;margin-top:12px}
  .product-character .pixel-character{width:126px;height:66px}
}
@media(prefers-reduced-motion:reduce){
  .character-motion .reveal-block,.character-motion .demo-card,.character-motion .demo-card s{transition:none}
  .character-motion .reveal-block[data-reveal="waiting"]{opacity:1;transform:none}
  .character-motion .faq-list details[open] p{animation:none}
  .decode-word{color:var(--text);transition:none}
  .product-character .pixel-character{opacity:1;transform:none}
}