:root {
      color-scheme: dark;
      --mint: var(--theme-accent);
      --bg: var(--theme-background);
      --muted: var(--theme-muted);
    }
    * {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: auto;
    }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--theme-text);
      font-family: var(--font-sans);
    }
    button,
    a {
      font: inherit;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    nav {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6vw;
      border-bottom: 1px solid #ffffff15;
      background: var(--theme-background);
    }
    nav strong {
      font-size: 23px;
    }
    nav div {
      display: flex;
      gap: 30px;
      font-size: 14px;
      color: var(--theme-muted);
    }
    .tag {
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-size: 11px;
      color: var(--mint);
    }
    h1 {
      font-size: clamp(54px, 7.5vw, 112px);
      letter-spacing: -0.065em;
      line-height: 1.02;
      margin: 23px 0;
    }
    p {
      line-height: 1.6;
      color: var(--theme-muted);
    }
    .hero {
      height: calc(100svh - 80px);
      min-height: 580px;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
      text-align: center;
    }
    .hero-copy {
      position: relative;
      z-index: 2;
    }
    .hero p {
      font-size: 18px;
    }
    .button {
      display: inline-block;
      background: var(--mint);
      color: #101216;
      border: 0;
      border-radius: 5px;
      padding: 17px 25px;
      font-weight: bold;
      margin-top: 18px;
    }
    .scroll-hint {
      position: absolute;
      bottom: 30px;
      font-size: 12px;
      color: var(--theme-muted);
      letter-spacing: 0.12em;
    }
    .voxel-art {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(
          ellipse at 50% 70%,
          color-mix(in srgb, #438ebe 23.14%, transparent),
          transparent 60%
        ),
        linear-gradient(#14202d, #18344b);
    }
    .hill {
      position: absolute;
      width: 38%;
      height: 48%;
      bottom: -5%;
      background:
        repeating-linear-gradient(0deg, transparent 0 42px, #0002 43px 44px),
        repeating-linear-gradient(90deg, transparent 0 54px, #0002 55px 56px),
        linear-gradient(110deg, #365a78, #193449);
      clip-path: polygon(
        0 40%,
        12% 40%,
        12% 20%,
        26% 20%,
        26% 0,
        48% 0,
        48% 30%,
        65% 30%,
        65% 48%,
        83% 48%,
        83% 70%,
        100% 70%,
        100% 100%,
        0 100%
      );
    }
    .hill.left {
      left: -3%;
    }
    .hill.right {
      right: -4%;
      transform: scaleX(-1);
      background-color: #634b49;
      filter: hue-rotate(295deg);
      height: 58%;
    }
    .moon {
      position: absolute;
      top: 16%;
      right: 20%;
      width: 55px;
      height: 55px;
      background: #e8d7bc;
      box-shadow: 0 0 90px #f8d7b522;
    }
    .ground {
      position: absolute;
      bottom: 0;
      left: 30%;
      width: 40%;
      height: 30%;
      background: linear-gradient(transparent, color-mix(in srgb, #71bcea 20%, transparent));
      clip-path: polygon(43% 0, 60% 0, 100% 100%, 0 100%);
    }
    .hero:after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        0deg,
        var(--bg),
        transparent 35%,
        color-mix(in srgb, var(--theme-background) 10.2%, transparent)
      );
    }
    .intro {
      height: 42vh;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px;
    }
    .intro h2 {
      font-size: clamp(25px, 4vw, 48px);
      font-weight: 400;
      letter-spacing: -0.04em;
    }
    .intro span {
      color: var(--mint);
    }
    .sequence {
      height: 650vh;
      position: relative;
    }
    .stage {
      position: sticky;
      top: var(--site-header-height);
      height: calc(100svh - var(--site-header-height));
      overflow: hidden;
      perspective: 1400px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(
          ellipse at center,
          color-mix(in srgb, #244c6a 25.1%, transparent),
          transparent 65%
        ),
        var(--bg);
    }
    .monitor {
      position: absolute;
      width: 94vw;
      height: calc(90svh - var(--site-header-height));
      top: 5svh;
      left: 3vw;
      transform-style: preserve-3d;
      will-change: transform;
      transform-origin: 50% 70%;
      border-radius: 22px;
      padding: 18px 12px 22px;
      background: linear-gradient(145deg, #536273, #1b2027 2%, #101216 70%, #47586a);
      box-shadow:
        0 0 0 1px color-mix(in srgb, #68809a 50.2%, transparent),
        0 20px 65px #0009;
      backface-visibility: hidden;
    }
    .camera {
      position: absolute;
      top: 7px;
      left: 50%;
      height: 4px;
      width: 4px;
      background: #2d435a;
      border-radius: 100%;
    }
    .screen {
      height: 100%;
      overflow: hidden;
      background: var(--theme-surface);
      position: relative;
      border-radius: 6px;
      border: 1px solid #000;
    }
    .boot {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      text-align: center;
      background: var(--theme-background);
      z-index: 3;
    }
    .boot-icon {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      width: min(180px, 28vw);
      aspect-ratio: 1;
      gap: 2px;
      margin: 0 auto 28px;
    }
    .boot-icon i {
      background: var(--theme-accent);
      opacity: 0;
      box-shadow: 0 0 8px color-mix(in srgb, var(--theme-accent) 20%, transparent);
    }
    .boot h3 {
      font-size: 18px;
      font-weight: 400;
    }
    .bar {
      height: 3px;
      background: #ffffff14;
      width: 240px;
      margin: 10px auto;
    }
    .bar div {
      height: 100%;
      background: var(--mint);
      width: 0;
    }
    .boot small {
      color: var(--theme-muted);
      font-size: 11px;
      letter-spacing: 0.16em;
    }
    .inner-page {
      will-change: transform;
    }
    .inner-section {
      height: calc(90svh - 42px - var(--site-header-height));
      padding: 5vh 6vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .inner-section h2 {
      font-size: clamp(35px, 5vw, 76px);
      letter-spacing: -0.05em;
      margin: 15px 0 8px;
      line-height: 1.05;
    }
    .inner-section p {
      margin: 8px 0 20px;
      font-size: 16px;
    }
    .inner-section .tag {
      font-size: 10px;
    }
    .world-section {
      background: radial-gradient(ellipse at 70% 70%, #345875, transparent 70%), #14283c;
    }
    .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
    }
    .card {
      border: 1px solid #ffffff1c;
      background: #ffffff05;
      border-radius: 8px;
      overflow: hidden;
    }
    .card-art {
      height: clamp(90px, 20vh, 190px);
      background: linear-gradient(145deg, #43627d, #1e334a);
      position: relative;
      overflow: hidden;
    }
    .card-art:after {
      content: '';
      position: absolute;
      width: 65%;
      height: 90%;
      bottom: -20%;
      left: 15%;
      background:
        repeating-linear-gradient(90deg, transparent 0 35px, #0002 36px 38px),
        repeating-linear-gradient(0deg, #7090ad 0 35px, #59758e 36px 38px);
      clip-path: polygon(
        0 50%,
        20% 50%,
        20% 0,
        45% 0,
        45% 25%,
        65% 25%,
        65% 50%,
        100% 50%,
        100% 100%,
        0 100%
      );
    }
    .farm {
      background: linear-gradient(145deg, #84665b, #344e68);
    }
    .farm:after {
      background: repeating-linear-gradient(90deg, #a9a269 0 25px, #6e8657 26px 45px);
      transform: perspective(300px) rotateX(35deg);
      width: 100%;
      left: 0;
    }
    .card h3 {
      font-size: 20px;
      margin: 17px 20px 8px;
    }
    .card p {
      font-size: 13px;
      margin: 0 20px 18px;
    }
    .community-section {
      background: var(--theme-surface);
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 25px;
    }
    .feature {
      padding: 28px 20px;
      border-top: 1px solid color-mix(in srgb, var(--theme-accent) 36.08%, transparent);
      background: #ffffff04;
      min-height: 180px;
    }
    .feature b {
      font-size: 35px;
      color: var(--mint);
      font-weight: 400;
    }
    .feature h3 {
      font-size: 20px;
    }
    .feature p {
      font-size: 13px;
    }
    .final-inner {
      background: radial-gradient(ellipse at center, #665350, #15344c 65%, #112137);
      text-align: center;
      align-items: center;
    }
    .orb {
      width: 100px;
      height: 100px;
      background: color-mix(in srgb, var(--theme-accent) 20%, transparent);
      box-shadow: 0 0 90px color-mix(in srgb, var(--theme-accent) 20%, transparent);
      transform: rotate(45deg);
      border: 1px solid var(--theme-accent);
      margin-bottom: 30px;
    }
    .stage-caption {
      position: absolute;
      bottom: 13px;
      left: 0;
      right: 0;
      text-align: center;
      color: var(--theme-muted);
      font-size: 10px;
      letter-spacing: 0.2em;
      pointer-events: none;
    }
    .after {
      min-height: 100svh;
      display: grid;
      place-content: center;
      text-align: center;
      padding: 80px 20px;
      background: radial-gradient(ellipse at top, #244467, transparent 65%);
    }
    .after h2 {
      font-size: clamp(45px, 6vw, 85px);
      letter-spacing: -0.055em;
      margin: 20px 0;
    }
    .after .button {
      justify-self: center;
    }
    .end {
      padding: 30px 6vw;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #ffffff16;
      color: var(--theme-muted);
      font-size: 12px;
    }
    .debug {
      position: fixed;
      bottom: 18px;
      left: 20px;
      z-index: 10;
      padding: 9px 13px;
      background: color-mix(in srgb, #101216 87.84%, transparent);
      border: 1px solid #ffffff20;
      border-radius: 5px;
      font-size: 11px;
      color: #b7c9c1;
      pointer-events: none;
    }
    .progress {
      position: fixed;
      right: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: #ffffff08;
      z-index: 12;
    }
    .progress span {
      display: block;
      width: 100%;
      height: 0;
      background: var(--mint);
    }
    @media (max-width: 650px) {
      nav {
        height: 64px;
        padding: 0 6vw;
      }
      nav div {
        gap: 16px;
        font-size: 12px;
      }
      nav div a:last-child {
        display: none;
      }
      .hero {
        height: calc(100svh - 64px);
      }
      .hero p {
        font-size: 15px;
        padding: 0 15px;
      }
      .monitor {
        width: 98vw;
        left: 1vw;
        padding: 14px 7px 16px;
        border-radius: 14px;
      }
      .inner-section {
        padding: 4vh 6vw;
        height: calc(90svh - 30px);
      }
      .cards {
        gap: 10px;
      }
      .card h3 {
        font-size: 16px;
        margin: 12px;
      }
      .card p {
        font-size: 11px;
        margin: 0 12px 12px;
      }
      .feature-grid {
        gap: 8px;
      }
      .feature {
        padding: 16px 10px;
        min-height: 160px;
      }
      .feature h3 {
        font-size: 15px;
      }
      .feature p {
        font-size: 11px;
      }
      .inner-section h2 {
        font-size: 39px;
      }
      .debug {
        bottom: 10px;
        left: 10px;
        font-size: 9px;
      }
      .intro {
        height: 35vh;
      }
      .sequence {
        height: 700vh;
      }
    }
    .account-entry {
      color: var(--mint);
      white-space: nowrap;
    }
    @media (max-width: 650px) {
      nav {
        gap: 15px;
      }
      nav div {
        gap: 13px;
        align-items: center;
      }
      nav div a:last-child {
        display: block;
      }
      nav div a:nth-child(2),
      nav div a:nth-child(4) {
        display: none;
      }
      .account-entry {
        font-size: 11px;
      }
    }

    .boot-icon {
      display: block;
      width: min(186px, 28vw);
      gap: 0;
      background: #000;
    }
    .boot-icon canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
    }

    .feature-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-height: 96px;
    }
    .feature-head img {
      display: block;
      width: auto;
      max-width: 62%;
      height: 96px;
      object-fit: contain;
    }
    @media (max-width: 760px) {
      .feature-head {
        flex-direction: column;
        min-height: 0;
      }
      .feature-head img {
        align-self: center;
        max-width: 100%;
        height: 64px;
      }
    }

    .community-section .feature-grid {
      margin-top: 14px;
    }
    .community-section .feature {
      min-height: 0;
      padding: 14px 18px;
    }
    .feature-head {
      min-height: 0;
    }
    .feature-head img {
      height: 84px;
    }
    .community-section .feature b {
      font-size: 30px;
    }
    @media (min-width: 761px) and (max-height: 820px) {
      .community-section h2 {
        font-size: clamp(28px, 7vh, 56px);
      }
    }
    @media (min-width: 761px) and (max-height: 740px) {
      .feature-head img {
        height: 60px;
      }
      .community-section h2 {
        font-size: clamp(26px, 5.6vh, 40px);
      }
    }
    @media (max-width: 760px) {
      .community-section .feature {
        padding: 10px 8px;
      }
      .feature-head img {
        height: 44px;
      }
      .community-section .feature p {
        font-size: 12px;
        line-height: 1.35;
      }
    }

    .community-section .feature-grid {
      flex: 1;
      min-height: 0;
      grid-auto-rows: minmax(0, 1fr);
      margin-top: 14px;
    }
    .community-section .feature {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border: 1px solid #ffffff14;
      border-radius: 20px;
      padding: 14px;
      text-align: center;
    }
    .community-section .feature-head {
      position: relative;
      flex: 1;
      min-height: 60px;
      border-radius: 12px;
      background: #ffffff06;
    }
    .community-section .feature-head img {
      position: absolute;
      inset: 8px;
      width: calc(100% - 16px);
      max-width: none;
      height: calc(100% - 16px);
      object-fit: contain;
    }
    .community-section .feature h3 {
      margin: 12px 0 6px;
    }
    .community-section .feature p {
      margin: 0;
    }
    @media (max-width: 760px) {
      .community-section .feature {
        border-radius: 12px;
        padding: 8px;
      }
      .community-section .feature-head {
        min-height: 44px;
      }
      .community-section .feature-head img {
        inset: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
      }
      .community-section .feature h3 {
        margin: 8px 0 4px;
        font-size: 14px;
      }
    }

/* Телефон: экран монитора ровно по высоте раздела, текст по центру,
   особенности — столбиком, каждая карточка крупно. Раздел особенностей выше экрана,
   home-0.js прокручивает содержимое монитора на всю его высоту. */
@media (max-width: 650px) {
  .inner-section {
    height: calc(90svh - var(--site-header-height) - 32px);
    align-items: center;
    text-align: center;
  }
  .inner-section p {
    max-width: 34ch;
  }
  .cards {
    width: 100%;
    text-align: left;
  }
  .community-section {
    height: auto;
    min-height: calc(90svh - var(--site-header-height) - 32px);
    justify-content: flex-start;
    padding-top: 6vh;
    padding-bottom: 6vh;
    overflow: visible;
  }
  .community-section .feature-grid {
    flex: none;
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    margin-top: 18px;
  }
  .community-section .feature {
    padding: 12px 12px 18px;
    border-radius: 16px;
    overflow: visible;
  }
  .community-section .feature-head {
    flex: none;
    height: 190px;
    min-height: 0;
  }
  .community-section .feature-head img {
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }
  .community-section .feature h3 {
    margin: 14px 0 6px;
    font-size: 19px;
  }
  .community-section .feature p {
    font-size: 14px;
    line-height: 1.5;
  }
  .sequence {
    height: 900vh;
  }
}