@layer base, components, utilities;

@layer base {
  :root {
    --ink: #21171a;
    --ink-soft: #4e393c;
    --paper: #fff8e8;
    --paper-deep: #f5e8c9;
    --paper-warm: #fff1ce;
    --red: #ef3f42;
    --red-deep: #b32435;
    --yellow: #ffd43d;
    --yellow-soft: #ffe68b;
    --blue: #2e8bc7;
    --blue-deep: #165f93;
    --mint: #48b7a3;
    --line: rgb(33 23 26 / 16%);
    --line-strong: rgb(33 23 26 / 30%);
    --shadow: 0 1.4rem 2.8rem rgb(92 33 37 / 16%);
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --frame: min(72rem, calc(100% - 3rem));
  }

  :where(.pokepindex-site, .pokepindex-site *) { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    min-width: 20rem;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 4%, rgb(255 212 61 / 31%), transparent 23rem),
      radial-gradient(circle at 93% 27%, rgb(239 63 66 / 10%), transparent 24rem),
      var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
  }

  body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgb(33 23 26 / 9%) 0.7px, transparent 0.75px);
    background-size: 0.33rem 0.33rem;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 68%);
    opacity: 0.42;
    pointer-events: none;
  }

  ::selection { background: var(--red); color: #fff; }

  a { color: inherit; text-decoration-color: rgb(179 36 53 / 54%); text-underline-offset: 0.2em; }
  button, input, select, textarea { font: inherit; }
  button { cursor: pointer; }
  button, a { -webkit-tap-highlight-color: transparent; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { font-weight: 780; letter-spacing: -0.065em; line-height: 0.94; text-wrap: balance; }
  h1 em, h2 em { color: var(--red); font-style: normal; }
  ul, ol { margin: 0; padding: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  :where(a, button, summary):focus-visible { outline: 0.2rem solid var(--blue); outline-offset: 0.24rem; }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 50;
    inset: 1rem auto auto 1rem;
    transform: translateY(-190%);
    padding: 0.72rem 0.9rem;
    border: 0.12rem solid var(--ink);
    background: var(--yellow);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
    transition: transform 160ms ease;
  }

  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--frame);
    min-height: 5.25rem;
    margin: 0 auto;
    border-bottom: 0.1rem solid var(--line);
    background: rgb(255 248 232 / 90%);
  }

  @supports (backdrop-filter: blur(1rem)) {
    .site-header { background: rgb(255 248 232 / 70%); backdrop-filter: blur(1rem); }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.89rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .brand > span > span { color: var(--red); }
  .brand-mark { inline-size: 1.7rem; color: var(--red); }

  .primary-nav { display: flex; align-items: center; gap: 1.5rem; }
  .primary-nav ul { display: flex; align-items: center; gap: 1.3rem; list-style: none; }
  .primary-nav li { display: flex; }
  .primary-nav a:not(.button) { color: var(--ink-soft); font-size: 0.82rem; font-weight: 730; text-decoration: none; transition: color 150ms ease; }
  .primary-nav a:not(.button):hover { color: var(--red-deep); }

  .nav-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.65rem;
    border: 0.1rem solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.54rem 0.7rem;
    text-transform: uppercase;
  }

  .nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { display: block; inline-size: 1.05rem; block-size: 0.1rem; background: currentColor; content: ""; }
  .nav-toggle i { position: relative; }
  .nav-toggle i::before, .nav-toggle i::after { position: absolute; inset-inline-start: 0; }
  .nav-toggle i::before { inset-block-start: -0.3rem; }
  .nav-toggle i::after { inset-block-start: 0.3rem; }

  .section { width: var(--frame); margin: 0 auto; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.9fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7.5rem);
    min-block-size: min(52rem, calc(100dvh - 5.25rem));
    padding-block: clamp(4.2rem, 7vw, 7rem) clamp(5.5rem, 9vw, 8rem);
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--red-deep);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.42;
    text-transform: uppercase;
  }

  .eyebrow > span { inline-size: 1.45rem; block-size: 0.11rem; background: currentColor; }
  .hero h1 { max-inline-size: 9.6ch; margin-block: 1.05rem 1.35rem; font-size: clamp(3.7rem, 7.4vw, 7rem); }
  .hero-intro { max-inline-size: 34rem; color: var(--ink-soft); font-size: clamp(1.04rem, 1.55vw, 1.18rem); line-height: 1.65; text-wrap: pretty; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-block-start: 2rem; }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-block-size: 3.2rem;
    border: 0.12rem solid transparent;
    font-size: 0.84rem;
    font-weight: 840;
    letter-spacing: -0.01em;
    padding: 0.79rem 1.08rem;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  }

  .button svg { inline-size: 1rem; }
  .button-primary { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0.25rem 0.25rem 0 var(--ink); }
  .button-primary:hover { border-color: var(--red-deep); background: var(--red-deep); transform: translate(-0.1rem, -0.1rem); }
  .button-small { min-block-size: 2.55rem; border-color: var(--ink); background: var(--yellow); color: var(--ink); font-size: 0.74rem; padding: 0.6rem 0.76rem; }
  .button-small:hover { background: var(--yellow-soft); transform: translateY(-0.1rem); }
  .text-link { color: var(--ink); font-size: 0.87rem; font-weight: 790; text-decoration-color: var(--red); text-decoration-thickness: 0.11rem; }
  .text-link:hover { color: var(--red-deep); }
  .text-link span { margin-inline-start: 0.25rem; color: var(--red); }
  button.text-link { border: 0; background: transparent; padding: 0; text-align: start; cursor: pointer; }

  .hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: clamp(2.7rem, 6vw, 4.1rem); list-style: none; }
  .hero-points li { min-inline-size: 0; padding-inline-start: 0.7rem; border-inline-start: 0.12rem solid var(--red); }
  .hero-points strong, .hero-points span { display: block; }
  .hero-points strong { font-size: 0.75rem; letter-spacing: -0.01em; }
  .hero-points span { margin-block-start: 0.15rem; color: var(--ink-soft); font-size: 0.67rem; line-height: 1.35; }

  .hero-device { position: relative; min-block-size: 35.5rem; margin: 0; isolation: isolate; }
  .device-sun { position: absolute; z-index: -2; inset: 4% -4% auto auto; inline-size: min(29rem, 94%); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
  .device-sun::after { position: absolute; inset: 10%; border: 0.12rem solid rgb(33 23 26 / 44%); border-radius: inherit; content: ""; }
  .device-tape { position: absolute; z-index: 2; inline-size: 8rem; block-size: 2.7rem; background: rgb(255 226 139 / 78%); box-shadow: 0 0.25rem 0.4rem rgb(33 23 26 / 12%); }
  .tape-one { inset: 5% auto auto -2%; transform: rotate(-35deg); }.tape-two { inset: auto -4% 12% auto; transform: rotate(32deg); }
  .photo-frame { position: absolute; inset: 7% 2% 1% auto; inline-size: min(26rem, 91%); padding: 0.8rem; border: 0.12rem solid var(--ink); background: var(--paper); box-shadow: var(--shadow), 0.55rem 0.55rem 0 var(--red); transform: rotate(3.5deg); }
  .photo-frame img { inline-size: 100%; block-size: auto; border: 0.12rem solid var(--ink); aspect-ratio: 493 / 676; object-fit: cover; }
  .frame-label { display: flex; align-items: center; justify-content: space-between; min-block-size: 1.6rem; font-family: var(--mono); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
  .frame-label strong { color: var(--red); font-size: 0.68rem; }
  .frame-marker { position: absolute; z-index: 3; color: var(--ink); font-family: var(--mono); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .marker-top { inset: 13% auto auto -13%; transform: rotate(-90deg); }.marker-bottom { inset: auto -15% 16% auto; transform: rotate(90deg); }
  .hero-device figcaption { position: absolute; inset: auto auto 2% -6%; display: flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .hero-device figcaption span { inline-size: 2.5rem; block-size: 0.12rem; background: var(--red); }

  .manifesto { border-block: 0.12rem solid var(--ink); background: var(--yellow); }
  .manifesto-grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(2rem, 8vw, 9rem); padding-block: clamp(4.7rem, 9vw, 8rem); }
  .section-index { color: var(--ink-soft); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.section-index span { color: var(--red-deep); }
  .manifesto-copy { max-inline-size: 51rem; }.manifesto-copy h2 { max-inline-size: 14ch; margin-block: 1.1rem 1.35rem; font-size: clamp(2.65rem, 5.8vw, 5.5rem); }.manifesto-copy > p:last-child { max-inline-size: 44rem; color: var(--ink-soft); font-size: clamp(1.06rem, 1.75vw, 1.3rem); line-height: 1.65; text-wrap: pretty; }

  .companion-section { padding-block: clamp(5rem, 11vw, 10rem); }
  .companion-intro { max-inline-size: 42rem; }.companion-intro h2, .why-heading h2, .callout-copy h2, .contact-panel h2, .faq-heading h2 { margin-block: 1.1rem 1.35rem; font-size: clamp(2.7rem, 5.5vw, 5.25rem); }.companion-intro > p:last-child { max-inline-size: 37rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.68; text-wrap: pretty; }
  .signal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 0.78fr); align-items: center; gap: 1.5rem; margin-block: clamp(3rem, 7vw, 5.5rem) 3.5rem; }

  .game-window { padding: 0.65rem; border: 0.12rem solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: 0.6rem 0.6rem 0 var(--yellow); }
  .window-topline, .window-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 2.2rem; font-family: var(--mono); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.window-live { color: var(--yellow); }.window-live i { display: inline-block; inline-size: 0.38rem; aspect-ratio: 1; margin-inline-end: 0.2rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.5rem currentColor; }.window-footer { padding-inline: 0.25rem; color: #c3b1a9; }.window-footer span:nth-child(2) { color: var(--yellow); font-size: 1rem; }
  .game-window-art { position: relative; min-block-size: 17rem; overflow: hidden; border: 0.12rem solid rgb(255 248 232 / 29%); background: radial-gradient(circle at 56% 42%, #eb5755, #a51938 38%, #28161d 72%); }.game-window-art::after { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 248 232 / 10%) 0.07rem, transparent 0.07rem), linear-gradient(90deg, rgb(255 248 232 / 10%) 0.07rem, transparent 0.07rem); background-size: 1.35rem 1.35rem; content: ""; mask-image: linear-gradient(to bottom, transparent, black); }.arc { position: absolute; border: 0.12rem solid rgb(255 248 232 / 68%); border-radius: 50%; }.arc-one { inset: 14% auto auto 12%; inline-size: 11rem; aspect-ratio: 1; }.arc-two { inset: auto 4% -30% auto; inline-size: 15rem; aspect-ratio: 1; }.spark { position: absolute; inline-size: 0.55rem; aspect-ratio: 1; background: var(--yellow); transform: rotate(45deg); }.spark-one { inset: 18% 23% auto auto; }.spark-two { inset: 42% auto auto 14%; inline-size: 0.3rem; }.spark-three { inset: auto 30% 17% auto; inline-size: 0.4rem; }.game-orb { position: absolute; z-index: 1; inset: 25% auto auto 39%; inline-size: 7rem; aspect-ratio: 1; border: 0.55rem solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0.45rem var(--ink); }.game-orb::before { position: absolute; inset: 50% -0.55rem auto; block-size: 0.55rem; background: var(--ink); content: ""; }.game-orb i { position: absolute; inset: 50% auto auto 50%; inline-size: 2rem; aspect-ratio: 1; border: 0.45rem solid var(--ink); border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); }.game-window-copy { position: absolute; z-index: 1; inset: auto auto 1.05rem 1rem; color: var(--paper); font-family: var(--mono); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; line-height: 1.2; }
  .signal-path { display: grid; align-items: center; justify-items: center; gap: 0.35rem; }.signal-path span { inline-size: 0.12rem; block-size: 3.4rem; background: var(--ink); }.signal-path i { display: grid; inline-size: 2rem; aspect-ratio: 1; place-items: center; border: 0.12rem solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--mono); font-size: 0.55rem; font-style: normal; font-weight: 900; }
  .pokedex-screen { display: flex; flex-direction: column; justify-self: center; inline-size: min(17.5rem, 100%); aspect-ratio: 0.64 / 1; padding: 0.7rem; border: 0.12rem solid var(--ink); border-radius: 1.65rem 1.65rem 2rem 2rem / 1.25rem 1.25rem 2.9rem 2.9rem; background: var(--red); box-shadow: 0.55rem 0.55rem 0 var(--ink); }.pokedex-top { display: flex; justify-content: space-between; padding: 0.2rem 0.35rem 0.65rem; color: #fff7e8; font-family: var(--mono); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.pokedex-top span:last-child { color: var(--yellow); }.pokedex-display { position: relative; flex: 1; min-block-size: 0; overflow: hidden; padding: 1rem; border: 0.4rem solid #f9ead0; border-radius: 0.7rem; background: #123d4b; color: #e7fff5; box-shadow: inset 0 0 0 0.12rem var(--ink); }.display-label { position: relative; z-index: 1; color: #93d9cb; font-family: var(--mono); font-size: 0.49rem; font-weight: 800; letter-spacing: 0.08em; }.display-art { position: absolute; inset: 0; }.display-art i { position: absolute; border: 0.1rem solid rgb(156 225 209 / 40%); border-radius: 50%; }.display-art i:nth-child(1) { inset: 24% auto auto 12%; inline-size: 8rem; aspect-ratio: 1; }.display-art i:nth-child(2) { inset: 14% 4% auto auto; inline-size: 4.5rem; aspect-ratio: 1; }.display-art i:nth-child(3) { inset: auto auto 13% 38%; inline-size: 5.5rem; aspect-ratio: 1; }.display-art i:nth-child(4) { inset: 50% auto auto 50%; inline-size: 1.2rem; aspect-ratio: 1; background: var(--yellow); transform: rotate(45deg); }.display-art span { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgb(156 225 209 / 10%) 0.08rem, transparent 0.08rem), linear-gradient(rgb(156 225 209 / 10%) 0.08rem, transparent 0.08rem); background-size: 1.5rem 1.5rem; }.pokedex-display strong { position: absolute; z-index: 1; inset: auto auto 2.35rem 1rem; font-size: clamp(1.45rem, 2.7vw, 2.1rem); line-height: 0.95; }.pokedex-display small { position: absolute; z-index: 1; inset: auto 1rem 0.85rem; color: #9adacc; font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.05em; text-transform: uppercase; }.pokedex-controls { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 0.35rem; padding: 0.9rem 0.35rem 0.1rem; }.pokedex-controls > i { justify-self: center; inline-size: 0.8rem; block-size: 0.27rem; border-radius: 99rem; background: var(--ink); }.pokedex-controls span { justify-self: center; inline-size: 1rem; aspect-ratio: 1; border: 0.1rem solid var(--ink); border-radius: 50%; background: var(--yellow); }.pokedex-controls b { justify-self: center; inline-size: 1.55rem; aspect-ratio: 1; border: 0.12rem solid var(--ink); border-radius: 50%; background: var(--ink); }

  .companion-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 0.12rem solid var(--ink); list-style: none; }.companion-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.7rem; min-block-size: 12rem; padding: 1.25rem; }.companion-steps li + li { border-inline-start: 0.12rem solid var(--ink); }.companion-steps > li > span { color: var(--red); font-family: var(--mono); font-size: 0.69rem; font-weight: 900; }.companion-steps h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }.companion-steps p { margin-block-start: 0.55rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.58; text-wrap: pretty; }

  .why-section { border-block: 0.12rem solid var(--ink); background: var(--blue); color: #fff7e8; padding-block: clamp(5rem, 10vw, 9rem); }.why-section .eyebrow { color: var(--yellow); }.why-heading h2 { max-inline-size: 16ch; }.why-heading h2 em { color: var(--yellow); }.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-block-start: 3.4rem; }.why-card { display: flex; flex-direction: column; min-block-size: 21rem; padding: 1.45rem; border: 0.12rem solid rgb(255 248 232 / 50%); background: rgb(23 83 126 / 31%); }.why-card-accent { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 0.45rem 0.45rem 0 var(--ink); }.why-number { color: inherit; font-family: var(--mono); font-size: 0.59rem; font-weight: 900; letter-spacing: 0.08em; opacity: 0.72; text-transform: uppercase; }.why-icon { position: relative; display: grid; inline-size: 3.3rem; block-size: 3.3rem; place-items: center; margin-block: auto 1.55rem; border: 0.12rem solid currentColor; }.eye-icon { border-radius: 50%; }.eye-icon::before { inline-size: 1.7rem; block-size: 1rem; border: 0.12rem solid currentColor; border-radius: 50%; content: ""; }.eye-icon i { position: absolute; inline-size: 0.46rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; }.bolt-icon { display: flex; align-items: end; justify-content: center; gap: 0.22rem; }.bolt-icon i { inline-size: 0.24rem; background: currentColor; }.bolt-icon i:nth-child(1) { block-size: 0.7rem; }.bolt-icon i:nth-child(2) { block-size: 1.45rem; }.bolt-icon i:nth-child(3) { block-size: 1rem; }.spark-icon { border-radius: 50%; }.spark-icon i { position: absolute; inline-size: 0.14rem; block-size: 1.6rem; background: currentColor; }.spark-icon i:nth-child(2) { transform: rotate(45deg); }.spark-icon i:nth-child(3) { transform: rotate(90deg); }.spark-icon i:nth-child(4) { transform: rotate(135deg); }.why-card h3 { max-inline-size: 11ch; font-size: clamp(1.55rem, 2.2vw, 2.05rem); }.why-card p { margin-block-start: 0.75rem; color: inherit; font-size: 0.91rem; line-height: 1.62; opacity: 0.88; text-wrap: pretty; }

  .feature-callout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(26rem, 1.18fr); align-items: center; gap: clamp(3rem, 10vw, 11rem); padding-block: clamp(5rem, 11vw, 10rem); }.callout-copy h2 { font-size: clamp(2.5rem, 5vw, 4.9rem); }.callout-copy > p:not(.eyebrow) { max-inline-size: 33rem; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.68; text-wrap: pretty; }.callout-copy .text-link { display: inline-block; margin-block-start: 1.7rem; }
  .companion-card { position: relative; display: flex; flex-direction: column; justify-self: center; inline-size: min(22rem, 100%); min-block-size: 0; aspect-ratio: 0.62 / 1; padding: 1.1rem; border: 0.12rem solid var(--ink); border-radius: 2rem 2rem 3rem 3rem / 1.5rem 1.5rem 4rem 4rem; background: var(--red); box-shadow: 0.8rem 0.8rem 0 var(--yellow), var(--shadow); transform: rotate(-4deg); }.companion-card::after { position: absolute; z-index: -1; inset: 3rem -2rem -2rem 3rem; border-radius: 50%; background: rgb(33 23 26 / 18%); content: ""; filter: blur(1rem); }.card-sticker { position: absolute; z-index: 2; inset: 1rem auto auto -2rem; padding: 0.52rem 0.65rem; border: 0.12rem solid var(--ink); background: var(--yellow); color: var(--ink); font-family: var(--mono); font-size: 0.53rem; font-weight: 900; letter-spacing: 0.07em; line-height: 1.3; text-transform: uppercase; transform: rotate(-7deg); }.companion-card-screen { position: relative; flex: 1; min-block-size: 0; overflow: hidden; padding: 1rem; border: 0.45rem solid #f8e8d0; border-radius: 0.8rem; background: radial-gradient(circle at 68% 32%, #f8ba5f, transparent 21%), #164d58; box-shadow: inset 0 0 0 0.12rem var(--ink); color: #f9ffe9; }.companion-card-screen::before { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgb(255 255 255 / 9%) 0.08rem, transparent 0.08rem), linear-gradient(rgb(255 255 255 / 9%) 0.08rem, transparent 0.08rem); background-size: 1.6rem 1.6rem; content: ""; }.companion-card-screen span { position: relative; z-index: 1; color: #b1e7d2; font-family: var(--mono); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.1em; }.companion-card-screen strong { position: absolute; z-index: 1; inset: auto 1rem 1.2rem; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.9; }.companion-card-screen i { position: absolute; inset: 23% auto auto 60%; inline-size: 7.5rem; aspect-ratio: 1; border: 0.12rem solid rgb(255 248 232 / 65%); border-radius: 50%; }.companion-card-screen i::before, .companion-card-screen i::after { position: absolute; inset: 50% -1.2rem auto; block-size: 0.12rem; background: inherit; content: ""; }.companion-card-screen i::after { transform: rotate(90deg); }.companion-card-controls { display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.5fr 0.5fr; align-items: center; gap: 0.35rem; padding: 1rem 0.4rem 0.2rem; }.companion-card-controls span { inline-size: 1.28rem; aspect-ratio: 1; border: 0.12rem solid var(--ink); border-radius: 50%; background: var(--yellow); }.companion-card-controls b { inline-size: 2rem; aspect-ratio: 1; border: 0.12rem solid var(--ink); border-radius: 50%; background: var(--ink); }.companion-card-controls i { inline-size: 0.9rem; block-size: 0.28rem; border-radius: 99rem; background: var(--ink); }.companion-card-rail { position: absolute; inset: auto 1.7rem 0.5rem; display: flex; justify-content: center; gap: 0.45rem; }.companion-card-rail i { inline-size: 0.9rem; block-size: 0.22rem; border-radius: 999rem; background: rgb(33 23 26 / 55%); }

  .demo-section { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(5rem, 10vw, 9rem) 0; background: var(--ink); color: var(--paper); }.demo-section::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 82% 5%, rgb(239 63 66 / 34%), transparent 34rem), linear-gradient(135deg, rgb(255 212 61 / 10%), transparent 45%); content: ""; }.demo-intro { position: relative; z-index: 1; padding-block-end: clamp(3rem, 7vw, 6.5rem); }.demo-intro .eyebrow { color: var(--yellow-soft); }.demo-intro h2 { max-inline-size: 14ch; font-size: clamp(2.8rem, 5.8vw, 5.55rem); }.demo-intro h2 em { color: var(--yellow); }.demo-intro > p:not(.eyebrow) { max-inline-size: 39rem; margin-block-start: 1.3rem; color: #d8c8b4; font-size: 1rem; line-height: 1.68; text-wrap: pretty; }.demo-showcase { position: relative; }.demo-video-stage { position: sticky; z-index: 0; top: 0; block-size: 100vh; block-size: 100dvh; overflow: hidden; background: #120d0e; }.demo-video-stage::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 24%) 66%, rgb(18 13 14 / 58%)), linear-gradient(to bottom, rgb(18 13 14 / 28%), transparent 35%, rgb(18 13 14 / 48%)); content: ""; pointer-events: none; }.scroll-bg-video { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; background: #120d0e; object-fit: cover; object-position: center; opacity: 0; pointer-events: none; transition: opacity 450ms ease; will-change: opacity; }.scroll-bg-video.is-active { opacity: 1; }.demo-scenes { position: relative; z-index: 2; margin-block-start: -100vh; margin-block-start: -100dvh; }.demo-scene { display: flex; align-items: center; min-block-size: clamp(54rem, 128dvh, 82rem); padding: clamp(4.5rem, 8vw, 8rem) max(1.5rem, calc((100% - 72rem) / 2)); }.demo-scene:nth-child(even) { justify-content: flex-end; }.demo-scene-copy { position: relative; z-index: 1; inline-size: min(100%, 34rem); padding: clamp(1.5rem, 3.5vw, 2.8rem); border: 0.12rem solid rgb(255 248 232 / 52%); background: rgb(33 23 26 / 87%); box-shadow: 0.55rem 0.55rem 0 rgb(255 212 61 / 85%); }.demo-scene-index { display: flex; align-items: baseline; gap: 0.42rem; color: #d8c8b4; font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }.demo-scene-index span { color: var(--yellow); font-size: 0.85rem; }.demo-scene-copy h3 { max-inline-size: 12ch; margin-block: 1rem; color: var(--paper); font-size: clamp(2.2rem, 4vw, 3.8rem); }.demo-scene-copy > p:last-child { max-inline-size: 35rem; color: #d8c8b4; font-size: 0.96rem; line-height: 1.65; text-wrap: pretty; }.demo-section.is-static .demo-video-stage { display: none; }.demo-section.is-static .demo-scenes { margin-block-start: 0; }.demo-section.is-static .demo-scene { position: relative; isolation: isolate; overflow: hidden; background: #120d0e; }.demo-section.is-static .demo-scene::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-1.jpg") center / cover no-repeat; content: ""; }.demo-section.is-static .demo-scene:nth-child(2)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-2.jpg"); }.demo-section.is-static .demo-scene:nth-child(3)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-3.jpg"); }.demo-section.is-static .demo-scene:nth-child(4)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-4.jpg"); }.demo-section.is-static .demo-scene:nth-child(5)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-5.jpg"); }

  .contact-section { padding-block-end: clamp(5rem, 10vw, 9rem); }.contact-panel { position: relative; overflow: hidden; padding: clamp(2rem, 5.5vw, 4.4rem); border: 0.12rem solid var(--ink); background: var(--yellow); box-shadow: 0.55rem 0.55rem 0 var(--red); }.contact-panel::after { position: absolute; inset: -8rem -7rem auto auto; inline-size: 20rem; aspect-ratio: 1; border: 0.12rem solid rgb(33 23 26 / 42%); border-radius: 50%; content: ""; }.contact-panel > * { position: relative; z-index: 1; }.contact-panel h2 { max-inline-size: 16ch; font-size: clamp(2.6rem, 5.5vw, 5.25rem); }.contact-panel > p:not(.eyebrow) { max-inline-size: 38rem; margin-block-end: 1.8rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

  .faq-section { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(30rem, 1.28fr); gap: clamp(3rem, 10vw, 12rem); padding-block-end: clamp(5rem, 10vw, 9rem); }.faq-heading h2 { font-size: clamp(2.5rem, 4.8vw, 4.65rem); }.faq-list { border-block-start: 0.12rem solid var(--ink); }.faq-list details { border-block-end: 0.12rem solid var(--line-strong); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; padding-block: 1.3rem; color: var(--ink); font-size: clamp(1rem, 1.45vw, 1.15rem); font-weight: 790; cursor: pointer; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { flex: 0 0 auto; color: var(--red); font-family: var(--mono); font-size: 1.35rem; font-weight: 400; transition: transform 160ms ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-inline-size: 47rem; padding: 0 2rem 1.35rem 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.65; text-wrap: pretty; }

  .site-footer { border-block-start: 0.12rem solid var(--ink); background: var(--ink); color: var(--paper); }.footer-inner { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto; align-items: center; gap: 1.5rem; width: var(--frame); min-block-size: 8.5rem; margin: 0 auto; }.site-footer .brand { color: var(--paper); }.site-footer .brand-mark { color: var(--yellow); }.footer-inner > p { max-inline-size: 25rem; color: #d8c8b4; font-size: 0.78rem; }.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 1rem; }.footer-links a, .footer-request { color: var(--paper); font-size: 0.73rem; font-weight: 700; }.footer-links a:hover, .footer-request:hover { color: var(--yellow); }.footer-request { border: 0; background: transparent; padding: 0; text-decoration: underline; text-decoration-color: rgb(255 212 61 / 52%); text-underline-offset: 0.2em; cursor: pointer; }.footer-inner small { grid-column: 1 / -1; margin-block-start: -1rem; color: #baa99e; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.03em; line-height: 1.4; }

  .request-dialog { inline-size: min(calc(100% - 2rem), 42rem); max-inline-size: none; max-block-size: min(90dvh, 52rem); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 1rem; padding: 0; border: 0.12rem solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0.8rem 0.8rem 0 var(--yellow), 0 1.5rem 4rem rgb(33 23 26 / 28%); }.request-dialog::backdrop { background: rgb(33 23 26 / 62%); backdrop-filter: blur(0.25rem); }.request-dialog-shell { padding: clamp(1.35rem, 4vw, 2.35rem); }.request-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.25rem; margin-block-end: 1.65rem; }.request-dialog-heading h2 { margin-block: 0.65rem 0.7rem; font-size: clamp(2rem, 5vw, 3.25rem); }.request-dialog-heading > div > p:last-child { max-inline-size: 31rem; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.58; }.dialog-close { display: grid; flex: 0 0 auto; inline-size: 2.6rem; aspect-ratio: 1; place-items: center; border: 0.12rem solid var(--ink); background: var(--paper); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; }.dialog-close:hover { background: var(--yellow); }.request-form { display: grid; gap: 1rem; }.request-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.request-field { display: grid; gap: 0.42rem; }.request-field label { color: var(--ink); font-size: 0.78rem; font-weight: 790; }.request-field label span { color: var(--red); }.request-field input, .request-field select, .request-field textarea { inline-size: 100%; min-block-size: 2.85rem; border: 0.12rem solid var(--line-strong); border-radius: 0; background: #fffdf7; color: var(--ink); font: inherit; font-size: 0.94rem; padding: 0.68rem 0.72rem; }.request-field textarea { min-block-size: 7rem; resize: vertical; }.request-field select { cursor: pointer; }.request-field :is(input, select, textarea):focus { border-color: var(--blue); outline: 0.14rem solid var(--blue); outline-offset: 0.08rem; }.request-field :is(input, select, textarea):user-invalid, .request-field :is(input, select, textarea).user-invalid-fallback { border-color: var(--red-deep); background: #fff0ed; }.input-error { display: none; align-items: center; gap: 0.35rem; margin: 0; color: var(--red-deep); font-size: 0.75rem; font-weight: 650; }.input-error span { display: inline-grid; inline-size: 1rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--red-deep); color: #fff; font-family: var(--mono); font-size: 0.6rem; }.request-field:has(:user-invalid) .input-error, .request-field:has(.user-invalid-fallback) .input-error { display: flex; }.request-status { min-block-size: 1.4rem; margin: 0; color: var(--ink-soft); font-size: 0.86rem; font-weight: 650; }.request-status[data-state="success"] { color: #126c58; }.request-status[data-state="error"] { color: var(--red-deep); }.request-submit { justify-self: start; }.request-note { margin: -0.35rem 0 0; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.45; }
}

@layer utilities {
  html.js .reveal { opacity: 0; transform: translateY(1.15rem); transition: opacity 550ms ease, transform 550ms ease; }
  html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

  @media (any-hover: hover) {
    .why-card { transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
    .why-card:hover { background: rgb(255 248 232 / 14%); transform: translateY(-0.35rem); }
    .why-card-accent:hover { background: #ffec9e; box-shadow: 0.45rem 0.68rem 0 var(--ink); }
  }

  @media (max-width: 900px) {
    :root { --frame: min(72rem, calc(100% - 2.5rem)); }
    .hero { grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.9fr); gap: 2.5rem; }.hero h1 { font-size: clamp(3.25rem, 7.4vw, 5.6rem); }.hero-device { min-block-size: 29.5rem; }.photo-frame { inline-size: min(23rem, 93%); }.manifesto-grid { grid-template-columns: 7rem minmax(0, 1fr); gap: 2rem; }.signal-layout { grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 0.82fr); gap: 1rem; }.feature-callout { grid-template-columns: minmax(0, 0.86fr) minmax(23rem, 1.14fr); gap: 3rem; }.faq-section { grid-template-columns: minmax(0, 0.7fr) minmax(23rem, 1.3fr); gap: 3.5rem; }.primary-nav ul { gap: 0.85rem; }.demo-scene { min-block-size: clamp(50rem, 118dvh, 74rem); }
  }

  @media (max-width: 720px) {
    :root { --frame: min(72rem, calc(100% - 2rem)); }
    .site-header { min-block-size: 4.6rem; }.nav-toggle { display: none; } html.js .nav-toggle { display: inline-flex; }.primary-nav { gap: 0; } html.js .primary-nav { position: absolute; inset: calc(100% + 0.55rem) 0 auto auto; display: grid; inline-size: min(20rem, calc(100vw - 2rem)); padding: 0.65rem; border: 0.12rem solid var(--ink); background: var(--paper); box-shadow: 0.6rem 0.6rem 0 var(--yellow); opacity: 0; pointer-events: none; transform: translateY(-0.5rem); transition: opacity 150ms ease, transform 150ms ease; } html.js .primary-nav[data-open="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); }.primary-nav ul { display: grid; gap: 0; }.primary-nav a:not(.button) { display: block; padding: 0.75rem 0.6rem; }.primary-nav .button { margin-block-start: 0.4rem; }
    .hero { grid-template-columns: 1fr; gap: 1.1rem; min-block-size: auto; padding-block-start: 4rem; }.hero-device { order: -1; min-block-size: 31rem; margin: -1.6rem -0.25rem 0; }.device-sun { inline-size: 22rem; }.photo-frame { inset: 7% 0 2% auto; inline-size: min(22rem, 88%); }.hero-device figcaption { inset-inline-start: 0; inset-block-end: 0; }.hero h1 { font-size: clamp(3.15rem, 13.5vw, 4.6rem); }.hero-points { gap: 0.6rem; }.hero-points li { padding-inline-start: 0.55rem; }.hero-points strong { font-size: 0.68rem; }.hero-points span { font-size: 0.61rem; }
    .manifesto-grid { grid-template-columns: 1fr; gap: 1.35rem; }.manifesto-copy h2 { font-size: clamp(2.5rem, 11vw, 4.15rem); }.signal-layout, .feature-callout, .faq-section { grid-template-columns: 1fr; gap: 3rem; }.signal-path { grid-template-columns: 1fr auto 1fr; gap: 0.35rem; }.signal-path span { inline-size: 4rem; block-size: 0.12rem; }.companion-steps, .why-grid { grid-template-columns: 1fr; }.companion-steps li { min-block-size: 0; padding: 1.1rem; }.companion-steps li + li { border-block-start: 0.12rem solid var(--ink); border-inline-start: 0; }.why-card { min-block-size: 16rem; }.why-icon { margin-block: 2rem 1.5rem; }.companion-card { inline-size: min(20rem, 100%); margin-inline: auto; }.contact-panel h2, .companion-intro h2, .why-heading h2, .callout-copy h2, .faq-heading h2 { font-size: clamp(2.5rem, 10.8vw, 4.4rem); }.demo-section { padding-block-start: 4.5rem; }.demo-intro { padding-block-end: 3rem; }.demo-intro h2 { font-size: clamp(2.5rem, 10.8vw, 4.4rem); }.demo-scene { min-block-size: max(44rem, 105dvh); padding-block: 4rem; }.demo-scene-copy { padding: 1.45rem; box-shadow: 0.35rem 0.35rem 0 var(--yellow); }.demo-scene-copy h3 { font-size: clamp(2rem, 10vw, 3.3rem); }.footer-inner { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem; }.footer-links { justify-content: start; }.footer-inner small { margin-block-start: 0; }.request-dialog { inline-size: calc(100% - 1rem); max-block-size: calc(100dvh - 1rem); }.request-dialog-shell { padding: 1.1rem; }.request-dialog-heading { gap: 0.8rem; margin-block-end: 1rem; }.request-dialog-heading h2 { margin-block: 0.35rem 0.45rem; font-size: clamp(1.9rem, 9.3vw, 2.25rem); }.request-dialog-heading > div > p:last-child { font-size: 0.88rem; line-height: 1.45; }.dialog-close { inline-size: 3rem; font-size: 1.7rem; }.request-form, .request-fields-row { gap: 0.8rem; }.request-field { gap: 0.32rem; }.request-field input, .request-field select, .request-field textarea { min-block-size: 3rem; font-size: 1rem; padding: 0.58rem 0.68rem; }.request-field textarea { min-block-size: 6rem; }.request-note { margin-block-start: -0.1rem; }.request-fields-row { grid-template-columns: 1fr; }.request-submit { inline-size: 100%; }
  }

  @media (max-width: 430px) {
    .hero-device { min-block-size: 29.5rem; }.photo-frame { padding: 0.55rem; inline-size: min(18rem, 87%); }.frame-label { min-block-size: 1.25rem; font-size: 0.47rem; }.frame-marker { display: none; }.hero-actions { align-items: stretch; flex-direction: column; gap: 1rem; }.hero-actions .button { inline-size: 100%; }.hero-points { grid-template-columns: 1fr; gap: 0.75rem; }.hero-points li { display: grid; grid-template-columns: 8.2rem 1fr; align-items: baseline; }.hero-points span { margin: 0; }.game-window-art { min-block-size: 14rem; }.signal-layout { margin-block-end: 2.5rem; }.pokedex-screen { inline-size: min(18rem, 100%); margin-inline: auto; }.companion-card { inline-size: min(19rem, 100%); max-inline-size: none; }.contact-panel { padding: 1.7rem; }.contact-panel .button { inline-size: 100%; }.faq-list summary { font-size: 0.97rem; }
  }

  @media (forced-colors: active) {
    .button, .photo-frame, .game-window, .pokedex-screen, .why-card, .contact-panel, .companion-card { border-color: CanvasText; box-shadow: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
    .button, .why-card, .primary-nav, .faq-list summary span, .scroll-bg-video { transition: none; }
    .demo-section .demo-video-stage { display: none; }.demo-section .demo-scenes { margin-block-start: 0; }.demo-section .demo-scene { position: relative; isolation: isolate; overflow: hidden; background: #120d0e; }.demo-section .demo-scene::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-1.jpg?v=20260807-xmkc") center / cover no-repeat; content: ""; }.demo-section .demo-scene:nth-child(2)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-2.jpg?v=20260807-xmkc"); }.demo-section .demo-scene:nth-child(3)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-3.jpg?v=20260807-xmkc"); }.demo-section .demo-scene:nth-child(4)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-4.jpg?v=20260807-xmkc"); }.demo-section .demo-scene:nth-child(5)::before { background-image: linear-gradient(90deg, rgb(18 13 14 / 72%), rgb(18 13 14 / 28%) 66%, rgb(18 13 14 / 62%)), linear-gradient(to bottom, rgb(18 13 14 / 24%), rgb(18 13 14 / 52%)), url("./assets/demo-5.jpg?v=20260807-xmkc"); }
  }

  .demo-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: start; column-gap: clamp(2rem, 8vw, 8rem); width: var(--frame); margin: 0 auto; }.demo-video-stage { grid-column: 2; grid-row: 1; position: sticky; z-index: 3; top: calc(5.25rem + clamp(1rem, 3vw, 2.5rem)); align-self: start; inline-size: min(22rem, 40dvh); aspect-ratio: 9 / 16; block-size: auto; overflow: hidden; border: 0.12rem solid rgb(255 248 232 / 62%); border-radius: 0.8rem; background: #120d0e; box-shadow: 0.65rem 0.65rem 0 var(--yellow), 0 1.35rem 2.8rem rgb(0 0 0 / 30%); }.demo-video-stage::after { background: linear-gradient(to bottom, rgb(18 13 14 / 8%), transparent 44%, rgb(18 13 14 / 42%)); }.demo-scenes { grid-column: 1; grid-row: 1; min-inline-size: 0; margin-block-start: 0; }.demo-scene { justify-content: flex-start; min-block-size: clamp(32rem, 72dvh, 48rem); padding: clamp(2.5rem, 6vw, 5.5rem) 0; }.demo-scene:nth-child(even) { justify-content: flex-start; }.demo-scene-copy { inline-size: min(100%, 31rem); background: rgb(33 23 26 / 94%); }.demo-scene-poster { display: none; }.demo-section.is-static .demo-showcase { display: block; width: var(--frame); }.demo-section.is-static .demo-video-stage { display: none; }.demo-section.is-static .demo-scenes { display: block; margin: 0; }.demo-section.is-static .demo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); align-items: center; justify-content: normal; gap: clamp(1.5rem, 6vw, 5rem); min-block-size: clamp(28rem, 65dvh, 42rem); overflow: visible; background: transparent; isolation: auto; }.demo-section.is-static .demo-scene::before { display: none; }.demo-section.is-static .demo-scene-copy { grid-column: 1; }.demo-section.is-static .demo-scene-poster { display: block; grid-column: 2; inline-size: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 0.12rem solid rgb(255 248 232 / 62%); border-radius: 0.8rem; background: #120d0e; box-shadow: 0.5rem 0.5rem 0 var(--yellow); }.demo-section.is-static .demo-scene-poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  @media (max-width: 720px) {
    .demo-showcase { display: block; width: var(--frame); }.demo-video-stage { position: sticky; top: 5.35rem; inline-size: min(13rem, 42vw); margin-inline: auto; margin-block-end: 2rem; border-radius: 0.6rem; box-shadow: 0.4rem 0.4rem 0 var(--yellow), 0 1rem 2rem rgb(0 0 0 / 28%); }.demo-scenes { display: block; }.demo-scene { justify-content: center; min-block-size: max(39rem, 92dvh); padding-block: 2.5rem; }.demo-scene-copy { inline-size: min(100%, 30rem); }.demo-section.is-static .demo-showcase { display: block; }.demo-section.is-static .demo-scene { grid-template-columns: 1fr; gap: 1.25rem; min-block-size: auto; padding-block: 2.5rem; }.demo-section.is-static .demo-scene-copy, .demo-section.is-static .demo-scene-poster { grid-column: auto; }.demo-section.is-static .demo-scene-poster { inline-size: min(13rem, 42vw); justify-self: center; box-shadow: 0.4rem 0.4rem 0 var(--yellow); }
  }

  @media (prefers-reduced-motion: reduce) {
    .demo-section .demo-showcase { display: block; width: var(--frame); }.demo-section .demo-video-stage { display: none; }.demo-section .demo-scenes { display: block; margin: 0; }.demo-section .demo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); align-items: center; justify-content: normal; gap: clamp(1.5rem, 6vw, 5rem); min-block-size: clamp(28rem, 65dvh, 42rem); overflow: visible; background: transparent; isolation: auto; }.demo-section .demo-scene::before { display: none; }.demo-section .demo-scene-copy { grid-column: 1; }.demo-section .demo-scene-poster { display: block; grid-column: 2; inline-size: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 0.12rem solid rgb(255 248 232 / 62%); border-radius: 0.8rem; background: #120d0e; box-shadow: 0.5rem 0.5rem 0 var(--yellow); }.demo-section .demo-scene-poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  }

  @media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .demo-section .demo-scene { grid-template-columns: 1fr; gap: 1.25rem; min-block-size: auto; padding-block: 2.5rem; }.demo-section .demo-scene-copy, .demo-section .demo-scene-poster { grid-column: auto; }.demo-section .demo-scene-poster { inline-size: min(13rem, 42vw); justify-self: center; box-shadow: 0.4rem 0.4rem 0 var(--yellow); }
  }

  .demo-showcase { display: block; width: var(--frame); margin: 0 auto; }.demo-video-stage { display: none; }.demo-scenes { display: block; margin: 0; }.demo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: start; justify-content: normal; gap: clamp(2rem, 8vw, 8rem); min-block-size: clamp(38rem, 76dvh, 50rem); padding: clamp(2.5rem, 6vw, 5.5rem) 0; overflow: visible; background: transparent; isolation: auto; }.demo-scene:nth-child(even) { justify-content: normal; }.demo-scene-copy { grid-column: 1; inline-size: min(100%, 31rem); background: rgb(33 23 26 / 94%); }.demo-video-window, .demo-scene-poster { grid-column: 2; grid-row: 1; justify-self: end; inline-size: min(22rem, 40dvh); aspect-ratio: 9 / 16; overflow: hidden; border: 0.12rem solid rgb(255 248 232 / 62%); border-radius: 0.8rem; background: #120d0e; box-shadow: 0.65rem 0.65rem 0 var(--yellow), 0 1.35rem 2.8rem rgb(0 0 0 / 30%); }.demo-video-window { position: sticky; z-index: 1; top: calc(5.25rem + clamp(1rem, 3vw, 2.5rem)); align-self: start; }.demo-video-window::after { position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgb(18 13 14 / 8%), transparent 44%, rgb(18 13 14 / 42%)); content: ""; pointer-events: none; }.demo-scroll-video { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 450ms ease; will-change: opacity; }.demo-scroll-video.is-active { opacity: 1; }.demo-scene-poster { display: none; }.demo-section.is-static .demo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: start; justify-content: normal; gap: clamp(2rem, 8vw, 8rem); min-block-size: clamp(38rem, 76dvh, 50rem); padding: clamp(2.5rem, 6vw, 5.5rem) 0; overflow: visible; background: transparent; isolation: auto; }.demo-section.is-static .demo-scene::before { display: none; }.demo-section.is-static .demo-scene-copy { grid-column: 1; }.demo-section.is-static .demo-video-window { display: none; }.demo-section.is-static .demo-scene-poster { display: block; }.demo-section.is-static .demo-scene-poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  @media (max-width: 720px) {
    .demo-scene, .demo-section.is-static .demo-scene { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; min-block-size: max(44rem, 100dvh); padding-block: 2.5rem; }.demo-scene-copy, .demo-section.is-static .demo-scene-copy { grid-column: 1; }.demo-video-window, .demo-scene-poster { grid-column: 1; grid-row: 2; justify-self: center; inline-size: min(14rem, 60vw); box-shadow: 0.45rem 0.45rem 0 var(--yellow), 0 1rem 2rem rgb(0 0 0 / 28%); }.demo-video-window { position: relative; top: auto; }.demo-section.is-static .demo-scene-poster { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    .demo-section .demo-scene::before { display: none; }.demo-section .demo-video-window { display: none; }.demo-section .demo-scene-poster { display: block; }.demo-section .demo-scene-poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  }

  .demo-scroll-video, .demo-scroll-video.is-active { opacity: 1; transition: none; }
}