:root {
        --void: #07090c;
        --ink: #0e1218;
        --panel: rgba(15, 19, 25, 0.88);
        --paper: #e4ddcb;
        --soft: #a8a092;
        --muted: #727b82;
        --green: #9cffb1;
        --telegram: #2aabee;
        --amber: #e7b45f;
        --red: #dc6b66;
        --violet: #9c89ff;
        --line: rgba(228, 221, 203, 0.16);
        color-scheme: dark;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--void);
      }

      body {
        color: var(--paper);
        font-family:
          "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        overflow-x: hidden;
      }

      .ambient-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        isolation: isolate;
        contain: strict;
      }

      .ambient-base,
      .ambient-glow,
      .ambient-scan {
        position: absolute;
        inset: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
      }

      .ambient-base {
        background:
          radial-gradient(circle, rgba(228, 221, 203, 0.08) 1px, transparent 1px),
          linear-gradient(145deg, #07090c 0%, #0e1218 48%, #07090c 100%);
        background-size: 23px 23px, auto;
      }

      .ambient-glow {
        background:
          radial-gradient(circle at 18% 22%, rgba(231, 180, 95, 0.11), transparent 22rem),
          radial-gradient(circle at 76% 38%, rgba(42, 171, 238, 0.16), transparent 24rem),
          radial-gradient(circle at 50% 88%, rgba(156, 255, 177, 0.08), transparent 25rem);
        opacity: 0.65;
      }

      .ambient-scan {
        inset: -8px 0;
        background: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 100% 5px;
        opacity: 0.65;
        will-change: transform;
      }

      body.memory-mode {
        --void: #05060a;
        --ink: #0a0d17;
        --panel: rgba(8, 10, 18, 0.9);
        --paper: #fff2df;
        --soft: #d7bfa8;
        --muted: #8d7d73;
        --green: #ffd18a;
        --telegram: #8eb8d8;
        --amber: #ffb1a3;
        --red: #d9877c;
        --violet: #c9a6d8;
      }

      body.memory-mode .ambient-base {
        background:
          radial-gradient(circle, rgba(255, 242, 223, 0.11) 1px, transparent 1px),
          linear-gradient(145deg, #07090c 0%, #1b1314 48%, #0a1015 100%);
        background-size: 24px 24px, auto;
      }

      body.memory-mode .ambient-glow {
        background:
          radial-gradient(circle at 16% 24%, rgba(255, 177, 163, 0.2), transparent 22rem),
          radial-gradient(circle at 72% 30%, rgba(255, 209, 138, 0.18), transparent 26rem),
          radial-gradient(circle at 50% 86%, rgba(142, 184, 216, 0.13), transparent 27rem);
      }

      body.memory-mode .ambient-scan {
        background: linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px);
        background-size: 100% 4px;
        animation: memoryScan 5s linear infinite;
      }

      body.memory-mode h1 {
        color: #fff2df;
        text-shadow:
          0 0 18px rgba(255, 177, 163, 0.35),
          0 0 38px rgba(255, 209, 138, 0.22);
      }

      body.memory-mode .eyebrow,
      body.memory-mode .signal,
      body.memory-mode .hint span {
        color: #ffd18a;
      }

      body.memory-mode .room {
        border-color: rgba(255, 209, 138, 0.24);
        background:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          radial-gradient(circle at 50% 50%, rgba(255, 177, 163, 0.11), transparent 50%),
          rgba(5, 6, 10, 0.42);
        background-size: 34px 34px, 34px 34px, auto, auto;
        box-shadow:
          0 0 70px rgba(255, 177, 163, 0.14),
          0 32px 110px rgba(0, 0, 0, 0.54);
      }

      body.memory-mode .path path {
        stroke: rgba(255, 209, 138, 0.3);
        animation-duration: 9s;
      }

      body.memory-mode .object {
        filter: saturate(1.12);
      }

      body.memory-mode .label {
        color: #fff2df;
        opacity: 1;
        text-shadow: 0 0 14px rgba(255, 177, 163, 0.36);
      }

      body.memory-mode .scene {
        border-color: rgba(255, 209, 138, 0.24);
        box-shadow:
          0 0 70px rgba(255, 177, 163, 0.16),
          0 28px 140px rgba(0, 0, 0, 0.78);
      }

      a {
        color: inherit;
      }

      button {
        font: inherit;
      }

      .site {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        padding: 22px;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
      }

      .signal {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--green);
      }

      .signal::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 22px rgba(156, 255, 177, 0.86);
        animation: pulse 2.4s ease-in-out infinite;
      }

      .links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
      }

      .links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 16px;
        gap: 8px;
        border: 1px solid rgba(228, 221, 203, 0.18);
        border-radius: 18px;
        color: var(--muted);
        text-decoration: none;
        background: rgba(7, 9, 12, 0.46);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
      }

      .links a:hover,
      .links a:focus-visible {
        color: var(--paper);
        border-color: rgba(228, 221, 203, 0.38);
        outline: none;
      }

      .links svg {
        width: 16px;
        height: 16px;
      }

      .compat-tools {
        display: none;
        align-items: center;
        gap: 6px;
      }

      .chromium-browser .compat-tools {
        display: inline-flex;
      }

      .compat-toggle,
      .compat-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        border: 1px solid rgba(228, 221, 203, 0.14);
        background: rgba(7, 9, 12, 0.46);
        color: var(--muted);
        cursor: pointer;
      }

      .compat-toggle {
        min-width: 88px;
        padding: 0 12px;
        border-radius: 18px;
        font-size: 11px;
        text-transform: uppercase;
      }

      .compat-info {
        position: relative;
        width: 36px;
        border-radius: 50%;
        font-size: 13px;
        font-style: italic;
      }

      .compat-toggle:hover,
      .compat-toggle:focus-visible,
      .compat-info:hover,
      .compat-info:focus-visible {
        color: var(--paper);
        border-color: rgba(228, 221, 203, 0.38);
        outline: none;
      }

      .compat-info::after {
        content: "If this page flickers or lags on your Chromium device, turn compatibility on.";
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 10;
        width: min(260px, 72vw);
        padding: 10px 12px;
        border: 1px solid rgba(228, 221, 203, 0.18);
        background: rgba(7, 9, 12, 0.96);
        color: var(--soft);
        font-size: 11px;
        font-style: normal;
        line-height: 1.45;
        text-align: left;
        text-transform: none;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 160ms ease, transform 160ms ease;
      }

      .compat-info:hover::after,
      .compat-info:focus-visible::after {
        opacity: 1;
        transform: translateY(0);
      }

      .compat-mode .ambient-bg,
      .probe-no-global-overlay .ambient-bg {
        display: none !important;
      }

      .compat-mode .compat-toggle {
        color: var(--green);
        border-color: rgba(156, 255, 177, 0.34);
      }

      .compat-mode body.memory-mode .room,
      .compat-mode body.memory-mode .scene {
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.5);
      }

      .compat-mode .music-orb,
      .compat-mode body.memory-mode .music-orb {
        animation: none;
        box-shadow:
          0 0 32px rgba(231, 180, 95, 0.2),
          inset 0 0 22px rgba(255, 255, 255, 0.08);
      }

      .compat-mode .music-orb::before,
      .compat-mode .music-orb::after {
        animation: none;
      }

      .compat-mode .telegram-plane {
        animation: none;
        filter: none;
      }

      .compat-mode .scene,
      .compat-mode .contact-panel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .compat-mode .scene::before,
      .compat-mode .realm-temple::before,
      .compat-mode .realm-subway::before,
      .compat-mode .realm-clash::before,
      .compat-mode .realm-sim::before,
      .compat-mode .realm-telegram::before,
      .compat-mode .realm-domain::before {
        animation: none;
      }

      .compat-mode .romantic-archive *,
      .compat-mode .romantic-archive *::before,
      .compat-mode .romantic-archive *::after {
        animation-play-state: paused !important;
      }

      .compat-mode .mask-art .blur-face,
      .compat-mode .classroom-art .mask-haze {
        filter: none;
      }

      .tiny-screen-message {
        display: none;
        min-height: 100dvh;
        padding: 28px;
        place-items: center;
        text-align: center;
        color: var(--paper);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(22px, 8vw, 34px);
        line-height: 1.25;
        background:
          radial-gradient(circle at 50% 20%, rgba(156, 255, 177, 0.12), transparent 16rem),
          var(--void);
      }

      .micro-screen-message {
        display: none;
      }

      .compat-orb {
        display: none;
        position: absolute;
        right: clamp(116px, 4vw + 98px, 156px);
        top: 132px;
        z-index: 5;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(228, 221, 203, 0.18);
        border-radius: 50%;
        background:
          radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 18%),
          rgba(7, 9, 12, 0.46);
        color: var(--muted);
        font-size: 0;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(156, 255, 177, 0.1);
        opacity: 0.78;
        backdrop-filter: blur(8px);
      }

      .chromium-browser .compat-orb {
        display: grid;
        place-items: center;
      }

      .compat-orb::before {
        content: "";
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(156, 255, 177, 0.18);
        box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
      }

      .compat-orb::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 1px solid rgba(228, 221, 203, 0.08);
        animation: orbSpin 12s linear infinite;
      }

      .compat-ring {
        position: absolute;
        inset: -11px;
        width: calc(100% + 22px);
        height: calc(100% + 22px);
        overflow: visible;
        pointer-events: none;
        animation: orbSpin 18s linear infinite;
      }

      .compat-ring text {
        fill: rgba(228, 221, 203, 0.72);
        font-size: 7px;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .compat-orb:hover,
      .compat-orb:focus-visible {
        color: var(--paper);
        border-color: rgba(228, 221, 203, 0.38);
        outline: none;
        opacity: 0.94;
      }

      .compat-mode .compat-orb {
        color: var(--green);
        border-color: rgba(156, 255, 177, 0.42);
        box-shadow: 0 0 24px rgba(156, 255, 177, 0.24);
      }

      .compat-mode .compat-orb::before {
        background: rgba(156, 255, 177, 0.42);
      }

      .contact-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(228, 221, 203, 0.14);
        border-radius: 50%;
        background: rgba(7, 9, 12, 0.46);
        color: var(--muted);
        cursor: pointer;
      }

      .contact-open:hover,
      .contact-open:focus-visible {
        color: var(--paper);
        border-color: rgba(228, 221, 203, 0.38);
        outline: none;
      }

      .contact-open svg {
        width: 18px;
        height: 18px;
      }

      .wordmark {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .wordmark-badge {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(156, 255, 177, 0.28);
        border-radius: 50%;
        color: var(--green);
        background: rgba(7, 9, 12, 0.56);
        box-shadow: 0 0 22px rgba(156, 255, 177, 0.12);
        overflow: hidden;
      }

      .site-logo {
        width: 34px;
        height: 34px;
        display: block;
      }

      .wordmark-text {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .wordmark-text strong {
        color: var(--paper);
        font-size: 13px;
        font-weight: 400;
        text-transform: lowercase;
      }

      .wordmark-text span {
        color: var(--muted);
        font-size: 10px;
        text-transform: uppercase;
      }

      .music-orb {
        position: absolute;
        right: clamp(18px, 4vw, 56px);
        top: 112px;
        z-index: 4;
        width: 88px;
        height: 88px;
        border: 1px solid rgba(228, 221, 203, 0.22);
        border-radius: 50%;
        background:
          radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.74), transparent 10%),
          radial-gradient(circle, rgba(231, 180, 95, 0.2), rgba(42, 171, 238, 0.08) 58%, rgba(7, 9, 12, 0.86));
        box-shadow:
          0 0 calc(28px + var(--orb-pulse, 0px)) rgba(231, 180, 95, 0.18),
          inset 0 0 22px rgba(255, 255, 255, 0.08);
        color: transparent;
        cursor: pointer;
        animation: coreBreathe 5.4s ease-in-out infinite;
        transition:
          box-shadow 160ms ease,
          border-color 160ms ease,
          background 260ms ease;
      }

      .music-orb::before,
      .music-orb::after {
        content: "";
        position: absolute;
        inset: -10px;
        border: 1px solid rgba(156, 255, 177, 0.16);
        border-radius: 50%;
        animation: orbRing 3.2s ease-in-out infinite;
      }

      .music-orb::after {
        inset: -21px;
        animation-delay: 0.9s;
      }

      .music-orb:hover,
      .music-orb:focus-visible {
        outline: none;
        border-color: var(--paper);
        box-shadow:
          0 0 46px rgba(156, 255, 177, 0.36),
          inset 0 0 24px rgba(255, 255, 255, 0.12);
      }

      .music-orb .orb-label {
        position: absolute;
        left: 50%;
        top: calc(100% + 12px);
        width: 180px;
        transform: translateX(-50%);
        color: var(--soft);
        font-size: 11px;
        text-align: center;
        text-transform: uppercase;
        opacity: 0.76;
      }

      .music-orb.discovering {
        border-color: rgba(231, 180, 95, 0.52);
        box-shadow:
          0 0 46px rgba(231, 180, 95, 0.32),
          inset 0 0 22px rgba(255, 255, 255, 0.08);
      }

      .telegram-plane {
        position: fixed;
        left: 18vw;
        top: 24vh;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        color: #c8efff;
        text-decoration: none;
        filter: drop-shadow(0 0 18px rgba(42, 171, 238, 0.45));
        animation: planeRoute 18s ease-in-out infinite;
      }

      .telegram-plane svg {
        width: 42px;
        height: 42px;
        transform: rotate(12deg);
      }

      .telegram-plane::after {
        content: "xsneh.t.me";
        position: absolute;
        left: 50%;
        top: 100%;
        width: 110px;
        transform: translateX(-50%) translateY(8px);
        color: rgba(200, 239, 255, 0.78);
        font-size: 11px;
        text-align: center;
        text-transform: uppercase;
        opacity: 0;
        transition: 180ms ease;
      }

      .telegram-plane:hover::after,
      .telegram-plane:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(2px);
      }

      .telegram-plane:hover,
      .telegram-plane:focus-visible {
        outline: none;
        color: #ffffff;
        filter: drop-shadow(0 0 28px rgba(42, 171, 238, 0.78));
        animation-play-state: paused;
      }

      body.memory-mode .telegram-plane {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity 260ms ease, transform 260ms ease;
      }

      body.memory-mode .music-orb {
        background:
          radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.88), transparent 9%),
          radial-gradient(circle, rgba(255, 209, 138, 0.72), rgba(255, 177, 163, 0.22) 52%, rgba(18, 9, 11, 0.92));
        box-shadow:
          0 0 calc(46px + var(--orb-pulse, 0px)) rgba(255, 177, 163, 0.34),
          0 0 130px rgba(255, 209, 138, 0.18);
        animation: coreBreathe 3.2s ease-in-out infinite;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(320px, 0.64fr) minmax(420px, 1.36fr);
        gap: clamp(28px, 4vw, 70px);
        align-items: center;
        min-height: calc(100vh - 56px);
        padding: 24px 0 44px;
      }

      .intro {
        max-width: 620px;
      }

      .eyebrow {
        margin: 0 0 18px;
        color: var(--amber);
        font-size: 12px;
        text-transform: uppercase;
      }

      h1 {
        margin: 0;
        color: #f2ebdd;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(56px, 9vw, 118px);
        font-weight: 500;
        line-height: 0.9;
        letter-spacing: 0;
      }

      .intro p:not(.eyebrow) {
        margin: 26px 0 0;
        color: #c9c0ad;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(20px, 2.2vw, 29px);
        line-height: 1.42;
      }

      .hint {
        display: flex;
        gap: 12px;
        align-items: center;
        width: fit-content;
        margin-top: 32px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        background: rgba(7, 9, 12, 0.6);
        color: var(--soft);
        font-size: 12px;
      }

      .hint span {
        color: var(--green);
      }

      .room {
        position: relative;
        min-height: min(75vw, 720px);
        border: 1px solid rgba(228, 221, 203, 0.14);
        background:
          linear-gradient(rgba(228, 221, 203, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(228, 221, 203, 0.035) 1px, transparent 1px),
          rgba(7, 9, 12, 0.34);
        background-size: 54px 54px;
        overflow: hidden;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        contain: layout paint;
        isolation: isolate;
        transform: translateZ(0);
        will-change: transform;
      }

      .room::before {
        content: "memory room / hover objects / click to open scene";
        position: absolute;
        left: 18px;
        top: 16px;
        color: rgba(228, 221, 203, 0.36);
        font-size: 11px;
        text-transform: uppercase;
      }

      .path {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.58;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
      }

      .path path {
        fill: none;
        stroke: rgba(228, 221, 203, 0.18);
        stroke-width: 1.1;
        stroke-dasharray: 7 9;
        animation: dash 16s linear infinite;
      }

      .object {
        position: absolute;
        width: var(--w);
        height: var(--h);
        left: var(--x);
        top: var(--y);
        border: 0;
        background: transparent;
        color: var(--paper);
        cursor: pointer;
        transform: translate(-50%, -50%);
        animation: float var(--speed) ease-in-out infinite;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform-style: flat;
        will-change: transform;
      }

      .object:focus-visible {
        outline: 1px solid var(--paper);
        outline-offset: 8px;
      }

      .object:hover .label,
      .object:focus-visible .label {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .label {
        position: absolute;
        left: 50%;
        bottom: -38px;
        min-width: 170px;
        transform: translate(-50%, 6px);
        color: var(--soft);
        font-size: 11px;
        text-align: center;
        text-transform: uppercase;
        opacity: 0;
        transition: 180ms ease;
      }

      .phone {
        --w: 122px;
        --h: 206px;
        --x: 18%;
        --y: 38%;
        --speed: 5.7s;
      }

      .phone-body {
        position: absolute;
        inset: 0;
        border: 2px solid rgba(228, 221, 203, 0.28);
        border-radius: 18px;
        background: linear-gradient(150deg, #15191f, #07090c 62%);
        box-shadow: 0 0 42px rgba(231, 180, 95, 0.18);
      }

      .phone-screen {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 22px;
        height: 92px;
        border: 1px solid rgba(156, 255, 177, 0.34);
        background: #071109;
        color: var(--green);
        font-size: 10px;
        line-height: 1.55;
        padding: 9px;
        overflow: hidden;
      }

      .phone-keypad {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 18px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
      }

      .phone-keypad i {
        height: 12px;
        border: 1px solid rgba(228, 221, 203, 0.16);
        border-radius: 8px;
        background: rgba(228, 221, 203, 0.06);
      }

      .runner {
        --w: 164px;
        --h: 108px;
        --x: 39%;
        --y: 72%;
        --speed: 6.4s;
      }

      .subway {
        --w: 156px;
        --h: 104px;
        --x: 36%;
        --y: 26%;
        --speed: 5.8s;
      }

      .subway-tunnel {
        position: absolute;
        inset: 16px 4px;
        border: 1px solid rgba(255, 79, 216, 0.3);
        background:
          repeating-linear-gradient(
            90deg,
            rgba(42, 171, 238, 0.14) 0,
            rgba(42, 171, 238, 0.14) 18px,
            rgba(255, 79, 216, 0.12) 18px,
            rgba(255, 79, 216, 0.12) 24px,
            transparent 24px,
            transparent 42px
          );
        transform: skewX(15deg);
        animation: trainLights 1.3s linear infinite;
      }

      .subway-swipe {
        position: absolute;
        left: 34px;
        top: 40px;
        width: 54px;
        height: 2px;
        background: #c8efff;
        box-shadow: 0 0 16px rgba(42, 171, 238, 0.78);
        animation: swipe 1.7s ease-in-out infinite;
      }

      .clash {
        --w: 148px;
        --h: 124px;
        --x: 48%;
        --y: 82%;
        --speed: 6.9s;
      }

      .village {
        position: absolute;
        inset: 14px;
        border: 1px solid rgba(231, 180, 95, 0.32);
        background: rgba(28, 18, 9, 0.66);
      }

      .village::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 12px;
        width: 50px;
        height: 50px;
        transform: translateX(-50%);
        border: 1px solid rgba(156, 255, 177, 0.35);
        border-radius: 50%;
        box-shadow: 0 0 24px rgba(156, 255, 177, 0.26);
        animation: shield 2.4s ease-in-out infinite;
      }

      .spark {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 16px rgba(231, 180, 95, 0.8);
        animation: battleSpark 1.8s ease-in-out infinite;
      }

      .spark.one {
        left: 28px;
        bottom: 28px;
      }

      .spark.two {
        right: 30px;
        bottom: 42px;
        animation-delay: 0.7s;
      }

      .runner-track {
        position: absolute;
        inset: 24px 4px 18px;
        border: 1px solid rgba(231, 180, 95, 0.34);
        transform: skewX(-18deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba(231, 180, 95, 0.1) 0,
            rgba(231, 180, 95, 0.1) 12px,
            transparent 12px,
            transparent 26px
          );
      }

      .runner-dot {
        position: absolute;
        left: 18px;
        top: 44px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 22px rgba(231, 180, 95, 0.8);
        animation: run 1.8s ease-in-out infinite;
      }

      .recharge {
        --w: 170px;
        --h: 96px;
        --x: 20%;
        --y: 66%;
        --speed: 5.1s;
      }

      .scratch {
        position: absolute;
        inset: 9px;
        border: 1px dashed rgba(156, 255, 177, 0.36);
        background:
          linear-gradient(135deg, rgba(156, 255, 177, 0.16), transparent),
          rgba(17, 21, 26, 0.82);
        transform: rotate(-4deg);
      }

      .scratch::before {
        content: "RECHARGE";
        position: absolute;
        left: 12px;
        top: 12px;
        color: var(--green);
        font-size: 13px;
      }

      .scratch::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 18px;
        height: 16px;
        background: repeating-linear-gradient(
          100deg,
          rgba(228, 221, 203, 0.36) 0,
          rgba(228, 221, 203, 0.36) 4px,
          rgba(228, 221, 203, 0.08) 4px,
          rgba(228, 221, 203, 0.08) 9px
        );
      }

      .sim {
        --w: 114px;
        --h: 142px;
        --x: 67%;
        --y: 28%;
        --speed: 7s;
      }

      .sim-card {
        position: absolute;
        inset: 8px 14px;
        border: 1px solid rgba(220, 107, 102, 0.44);
        border-radius: 9px 9px 18px 9px;
        background: rgba(37, 21, 23, 0.84);
        clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 100%, 0 100%);
        box-shadow: 0 0 34px rgba(220, 107, 102, 0.2);
      }

      .sim-card::before {
        content: "5555";
        position: absolute;
        left: 18px;
        top: 45px;
        color: var(--red);
        font-size: 18px;
        letter-spacing: 0;
      }

      .telegram {
        --w: 190px;
        --h: 190px;
        --x: 79%;
        --y: 58%;
        --speed: 5.9s;
      }

      .portal {
        position: absolute;
        inset: 18px;
        border-radius: 50%;
        border: 1px solid rgba(42, 171, 238, 0.6);
        background:
          radial-gradient(circle, rgba(42, 171, 238, 0.18), transparent 58%),
          rgba(5, 12, 18, 0.8);
        box-shadow:
          0 0 30px rgba(42, 171, 238, 0.38),
          inset 0 0 32px rgba(42, 171, 238, 0.16);
        animation: portal 4s ease-in-out infinite;
      }

      .bubble {
        position: absolute;
        border: 1px solid rgba(42, 171, 238, 0.38);
        border-radius: 18px;
        background: rgba(42, 171, 238, 0.1);
        animation: drift 3.8s ease-in-out infinite;
      }

      .bubble.one {
        width: 62px;
        height: 24px;
        left: 12px;
        top: 48px;
      }

      .bubble.two {
        width: 78px;
        height: 28px;
        right: 4px;
        top: 88px;
        animation-delay: 0.8s;
      }

      .bubble.three {
        width: 54px;
        height: 22px;
        left: 46px;
        bottom: 22px;
        animation-delay: 1.4s;
      }

      .domain {
        --w: 174px;
        --h: 174px;
        --x: 52%;
        --y: 43%;
        --speed: 6.8s;
      }

      .domain-core {
        position: absolute;
        inset: 16px;
        border: 1px solid rgba(156, 255, 177, 0.5);
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(156, 255, 177, 0.22), transparent 58%),
          rgba(7, 9, 12, 0.84);
        box-shadow:
          0 0 52px rgba(156, 255, 177, 0.22),
          inset 0 0 24px rgba(156, 255, 177, 0.14);
      }

      .domain-core::before {
        content: "xsneh.com";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--green);
        font-size: 13px;
      }

      .small-node {
        position: absolute;
        width: 92px;
        height: 72px;
        border: 1px solid rgba(228, 221, 203, 0.14);
        background: rgba(15, 19, 25, 0.62);
        color: var(--muted);
        font-size: 11px;
        text-transform: uppercase;
      }

      .github {
        --w: 108px;
        --h: 82px;
        --x: 61%;
        --y: 82%;
        --speed: 7.4s;
      }

      .mail {
        --w: 104px;
        --h: 78px;
        --x: 85%;
        --y: 18%;
        --speed: 6.2s;
      }

      .small-card {
        display: grid;
        place-items: center;
        position: absolute;
        inset: 8px;
        border: 1px solid rgba(228, 221, 203, 0.14);
        color: var(--muted);
        background: rgba(7, 9, 12, 0.62);
      }

      .scene {
        position: fixed;
        inset: 22px;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr);
        gap: 0;
        border: 1px solid rgba(228, 221, 203, 0.18);
        background: rgba(9, 12, 16, 0.95);
        box-shadow: 0 24px 120px rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(18px);
        opacity: 0;
        transform: scale(0.975) translateY(14px);
        pointer-events: none;
        transition: 190ms ease;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        isolation: isolate;
        will-change: opacity, transform;
      }

      .scene::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.72;
        background: radial-gradient(circle at 50% 50%, rgba(156, 255, 177, 0.08), transparent 44%);
        animation: realmBreath 5s ease-in-out infinite;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        will-change: opacity, transform;
      }

      .scene.open {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
      }

      .scene.open .scene-art {
        animation: realmArrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
      }

      .scene.open .scene-title,
      .scene.open .scene-text,
      .scene.open .scene-link {
        animation: textArrive 560ms ease both;
      }

      .scene.open .scene-text {
        animation-delay: 90ms;
      }

      .realm-device::before {
        background:
          radial-gradient(circle at 50% 48%, rgba(231, 180, 95, 0.18), transparent 44%),
          linear-gradient(135deg, rgba(156, 255, 177, 0.06), transparent);
      }

      .realm-temple::before {
        background:
          radial-gradient(circle at 50% 78%, rgba(231, 180, 95, 0.24), transparent 34%),
          repeating-linear-gradient(118deg, rgba(231, 180, 95, 0.07) 0 2px, transparent 2px 18px);
        animation: realmRush 3s linear infinite;
      }

      .realm-recharge::before {
        background:
          radial-gradient(circle at 22% 34%, rgba(156, 255, 177, 0.18), transparent 28%),
          radial-gradient(circle at 78% 64%, rgba(220, 107, 102, 0.14), transparent 30%);
      }

      .realm-subway::before {
        background:
          repeating-linear-gradient(100deg, rgba(42, 171, 238, 0.08) 0 2px, transparent 2px 24px),
          radial-gradient(circle at 50% 62%, rgba(255, 79, 216, 0.2), transparent 35%);
        animation: realmRush 2.4s linear infinite;
      }

      .realm-clash::before {
        background:
          radial-gradient(circle at 50% 55%, rgba(231, 180, 95, 0.22), transparent 38%),
          radial-gradient(circle at 72% 32%, rgba(220, 107, 102, 0.14), transparent 24%);
        animation: dangerPulse 2.8s ease-in-out infinite;
      }

      .realm-sim::before {
        background:
          repeating-linear-gradient(90deg, rgba(220, 107, 102, 0.07) 0 1px, transparent 1px 14px),
          radial-gradient(circle at 50% 50%, rgba(220, 107, 102, 0.22), transparent 42%);
        animation: dangerPulse 1.6s ease-in-out infinite;
      }

      .realm-telegram::before {
        background:
          radial-gradient(circle at 62% 50%, rgba(42, 171, 238, 0.28), transparent 42%),
          repeating-radial-gradient(circle at 62% 50%, rgba(42, 171, 238, 0.16) 0 1px, transparent 1px 18px);
        animation: telegramRealm 4.2s ease-in-out infinite;
      }

      .realm-domain::before {
        background:
          radial-gradient(circle at 50% 50%, rgba(156, 255, 177, 0.18), transparent 35%),
          conic-gradient(from 90deg, transparent, rgba(156, 255, 177, 0.08), transparent, rgba(42, 171, 238, 0.08), transparent);
        animation: domainRealm 11s linear infinite;
      }

      .realm-github::before,
      .realm-mail::before {
        background: radial-gradient(circle at 50% 50%, rgba(228, 221, 203, 0.08), transparent 40%);
      }

      .realm-gate {
        position: fixed;
        inset: 0;
        z-index: 8;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle, rgba(228, 221, 203, 0.12), transparent 34%),
          rgba(7, 9, 12, 0.82);
        color: var(--paper);
        font-size: clamp(18px, 3vw, 42px);
        text-transform: uppercase;
        letter-spacing: 0;
        opacity: 0;
        pointer-events: none;
        transform: scale(1.04);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: opacity, transform;
      }

      .realm-gate.show {
        animation: gateOpen 780ms ease both;
      }

      body.memory-mode .realm-gate {
        background:
          radial-gradient(circle, rgba(255, 79, 216, 0.28), transparent 34%),
          radial-gradient(circle at 68% 38%, rgba(111, 140, 255, 0.24), transparent 30%),
          rgba(5, 6, 10, 0.86);
        color: #ffffff;
        text-shadow: 0 0 22px rgba(255, 79, 216, 0.66);
      }

      .scene-art {
        position: relative;
        min-height: 560px;
        border-right: 1px solid var(--line);
        overflow: hidden;
        background: #07090c;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        contain: paint;
        will-change: transform, opacity;
      }

      .scene-art::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08), transparent 15rem),
          linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
        mix-blend-mode: screen;
      }

      .scene-art::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(228, 221, 203, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(228, 221, 203, 0.035) 1px, transparent 1px);
        background-size: 44px 44px;
      }

      .scene-copy {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      .scene-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
      }

      .close {
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: transparent;
        color: var(--paper);
        cursor: pointer;
      }

      .close:hover,
      .close:focus-visible {
        border-color: var(--paper);
        outline: none;
      }

      .scene-scroll {
        overflow: auto;
        padding: clamp(22px, 4vw, 46px);
      }

      .scene-title {
        margin: 0;
        color: #f2ebdd;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(36px, 5vw, 70px);
        font-weight: 500;
        line-height: 0.95;
      }

      .scene-text {
        margin: 26px 0 0;
        color: #d3cbb9;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(19px, 2vw, 25px);
        line-height: 1.5;
        white-space: pre-line;
      }

      .scene-link {
        width: fit-content;
        margin-top: 26px;
        color: var(--green);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
      }

      .contact-panel {
        position: fixed;
        inset: 22px;
        z-index: 9;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(7, 9, 12, 0.72);
        backdrop-filter: blur(14px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
      }

      .contact-panel.open {
        opacity: 1;
        pointer-events: auto;
      }

      .contact-card {
        width: min(560px, 100%);
        border: 1px solid rgba(228, 221, 203, 0.18);
        background:
          radial-gradient(circle at 18% 10%, rgba(42, 171, 238, 0.12), transparent 18rem),
          rgba(12, 15, 18, 0.96);
        box-shadow: 0 24px 110px rgba(0, 0, 0, 0.64);
      }

      .contact-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
      }

      .contact-body {
        padding: 22px;
      }

      .contact-body h2 {
        margin: 0 0 10px;
        color: #f2ebdd;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 42px;
        font-weight: 500;
      }

      .contact-body p {
        margin: 0 0 18px;
        color: #c9c0ad;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        line-height: 1.45;
      }

      .contact-grid {
        display: grid;
        gap: 12px;
      }

      .field label {
        display: block;
        margin-bottom: 7px;
        color: var(--muted);
        font-size: 11px;
        text-transform: uppercase;
      }

      .field input,
      .field textarea {
        width: 100%;
        border: 1px solid rgba(228, 221, 203, 0.16);
        background: rgba(7, 9, 12, 0.68);
        color: var(--paper);
        padding: 12px;
        font: inherit;
      }

      .field textarea {
        min-height: 92px;
        resize: vertical;
      }

      .bot-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: end;
      }

      .bot-box {
        border: 1px solid rgba(42, 171, 238, 0.2);
        background: rgba(42, 171, 238, 0.08);
        padding: 12px;
      }

      .bot-box span {
        display: block;
        color: var(--muted);
        font-size: 11px;
        text-transform: uppercase;
      }

      .bot-box a {
        color: #c8efff;
        text-decoration: none;
      }

      .contact-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
      }

      .contact-actions button,
      .contact-actions a {
        border: 1px solid rgba(228, 221, 203, 0.18);
        background: rgba(228, 221, 203, 0.06);
        color: var(--paper);
        padding: 11px 13px;
        text-decoration: none;
        cursor: pointer;
        font: inherit;
      }

      .contact-actions button:hover,
      .contact-actions button:focus-visible,
      .contact-actions a:hover,
      .contact-actions a:focus-visible {
        border-color: var(--paper);
        outline: none;
      }

      .owner-link[hidden] {
        display: none;
      }

      .contact-status {
        min-height: 22px;
        margin-top: 14px;
        color: var(--amber);
        font-size: 12px;
        line-height: 1.45;
      }

      .art-device .big-phone {
        position: absolute;
        left: 50%;
        top: 51%;
        width: 210px;
        height: 360px;
        transform: translate(-50%, -50%) rotate(-7deg);
        border: 2px solid rgba(228, 221, 203, 0.28);
        border-radius: 28px;
        background: linear-gradient(150deg, #15191f, #050607 68%);
        box-shadow: 0 0 70px rgba(231, 180, 95, 0.2);
      }

      .art-device .big-screen {
        position: absolute;
        left: 28px;
        right: 28px;
        top: 38px;
        height: 154px;
        border: 1px solid rgba(156, 255, 177, 0.36);
        background: #071109;
        color: var(--green);
        padding: 16px;
        font-size: 14px;
        line-height: 1.7;
      }

      .art-game .lane {
        position: absolute;
        left: 10%;
        right: 10%;
        top: 18%;
        bottom: 12%;
        border: 1px solid rgba(231, 180, 95, 0.38);
        transform: perspective(500px) rotateX(54deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba(231, 180, 95, 0.15) 0,
            rgba(231, 180, 95, 0.15) 26px,
            transparent 26px,
            transparent 56px
          );
      }

      .art-game .runner-person {
        position: absolute;
        left: 50%;
        bottom: 19%;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 28px rgba(231, 180, 95, 0.75);
        animation: jump 1.1s ease-in-out infinite;
      }

      .art-game .obstacle {
        position: absolute;
        width: 58px;
        height: 18px;
        border: 1px solid rgba(220, 107, 102, 0.5);
        background: rgba(220, 107, 102, 0.18);
        animation: obstacle 2.4s linear infinite;
      }

      .art-game .obstacle.one {
        left: 28%;
        top: 20%;
      }

      .art-game .obstacle.two {
        right: 23%;
        top: 48%;
        animation-delay: 0.9s;
      }

      .coin {
        position: absolute;
        width: 14px;
        height: 14px;
        border: 1px solid rgba(231, 180, 95, 0.8);
        border-radius: 50%;
        background: rgba(231, 180, 95, 0.28);
        box-shadow: 0 0 16px rgba(231, 180, 95, 0.62);
        animation: coinFlicker 1.2s ease-in-out infinite;
      }

      .coin.one {
        left: 38%;
        top: 42%;
      }

      .coin.two {
        left: 50%;
        top: 34%;
        animation-delay: 0.3s;
      }

      .coin.three {
        left: 62%;
        top: 44%;
        animation-delay: 0.6s;
      }

      .art-subway .rails {
        position: absolute;
        left: 10%;
        right: 10%;
        top: 12%;
        bottom: 10%;
        transform: perspective(520px) rotateX(58deg);
        background:
          linear-gradient(90deg, transparent 28%, rgba(42, 171, 238, 0.34) 29%, transparent 31%, transparent 68%, rgba(42, 171, 238, 0.34) 69%, transparent 71%),
          repeating-linear-gradient(0deg, rgba(255, 79, 216, 0.28) 0 9px, transparent 9px 36px);
        border: 1px solid rgba(42, 171, 238, 0.28);
        animation: railMove 0.9s linear infinite;
      }

      .art-subway .train-light {
        position: absolute;
        left: 50%;
        top: 28%;
        width: 170px;
        height: 54px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200, 239, 255, 0.62), transparent 68%);
        filter: blur(2px);
        animation: trainPulse 1.4s ease-in-out infinite;
      }

      .graffiti {
        position: absolute;
        left: 13%;
        bottom: 14%;
        color: rgba(255, 79, 216, 0.78);
        font-size: 18px;
        text-transform: uppercase;
        transform: rotate(-8deg);
        text-shadow: 0 0 14px rgba(255, 79, 216, 0.55);
        animation: graffitiFlash 2.1s ease-in-out infinite;
      }

      .art-clash .base {
        position: absolute;
        left: 50%;
        top: 54%;
        width: 280px;
        height: 210px;
        transform: translate(-50%, -50%) rotate(45deg);
        border: 1px solid rgba(231, 180, 95, 0.32);
        background:
          linear-gradient(90deg, rgba(231, 180, 95, 0.12), transparent),
          rgba(24, 15, 8, 0.82);
      }

      .art-clash .hut {
        position: absolute;
        width: 44px;
        height: 44px;
        background: rgba(231, 180, 95, 0.22);
        border: 1px solid rgba(231, 180, 95, 0.42);
        box-shadow: 0 0 18px rgba(231, 180, 95, 0.24);
      }

      .art-clash .hut.one {
        left: 38%;
        top: 38%;
      }

      .art-clash .hut.two {
        left: 54%;
        top: 51%;
      }

      .art-clash .shield-large {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 220px;
        height: 220px;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(156, 255, 177, 0.44);
        border-radius: 50%;
        animation: shieldCenter 2.2s ease-in-out infinite;
      }

      .art-recharge .balance {
        position: absolute;
        left: 12%;
        right: 12%;
        top: 45%;
        height: 36px;
        border: 1px solid rgba(156, 255, 177, 0.44);
      }

      .art-recharge .balance::before {
        content: "";
        position: absolute;
        inset: 5px;
        width: 20%;
        background: var(--green);
        box-shadow: 0 0 24px rgba(156, 255, 177, 0.62);
        animation: charge 3s ease-in-out infinite;
      }

      .art-recharge .scratch-large {
        position: absolute;
        left: 22%;
        top: 18%;
        width: 260px;
        height: 128px;
        border: 1px dashed rgba(228, 221, 203, 0.28);
        background: rgba(17, 21, 26, 0.9);
        transform: rotate(-5deg);
      }

      .art-sim .pin-window {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(78%, 360px);
        transform: translate(-50%, -50%);
        border: 1px solid rgba(220, 107, 102, 0.46);
        background: rgba(24, 13, 15, 0.86);
        padding: 24px;
        color: var(--red);
        box-shadow: 0 0 56px rgba(220, 107, 102, 0.18);
      }

      .pin-dots {
        display: flex;
        gap: 12px;
        margin: 22px 0;
      }

      .pin-dots i {
        width: 32px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(220, 107, 102, 0.35);
        font-style: normal;
      }

      .pin-error {
        animation: shake 0.8s ease-in-out infinite;
      }

      .art-telegram .stream {
        position: absolute;
        inset: 7%;
        border: 1px solid rgba(42, 171, 238, 0.32);
        background: rgba(4, 13, 20, 0.7);
        overflow: hidden;
      }

      .tg-line {
        position: absolute;
        left: 28px;
        right: 28px;
        display: grid;
        grid-template-columns: 86px 1fr;
        gap: 14px;
        align-items: center;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid rgba(42, 171, 238, 0.25);
        background: rgba(42, 171, 238, 0.08);
        color: #b9e9ff;
        font-size: 11px;
        text-transform: uppercase;
        animation: tgArchive 14s linear infinite;
      }

      .tg-line strong {
        color: var(--telegram);
        font-weight: 400;
      }

      .tg-line:nth-child(1) {
        animation-delay: 0s;
      }

      .tg-line:nth-child(2) {
        animation-delay: 2s;
      }

      .tg-line:nth-child(3) {
        animation-delay: 4s;
      }

      .tg-line:nth-child(4) {
        animation-delay: 6s;
      }

      .tg-line:nth-child(5) {
        animation-delay: 8s;
      }

      .tg-line:nth-child(6) {
        animation-delay: 10s;
      }

      .tg-line:nth-child(7) {
        animation-delay: 12s;
      }

      .message {
        position: absolute;
        min-width: 110px;
        height: 32px;
        border: 1px solid rgba(42, 171, 238, 0.42);
        border-radius: 18px;
        background: rgba(42, 171, 238, 0.12);
        animation: messages 7s linear infinite;
      }

      .message:nth-child(1) {
        left: 12%;
        animation-delay: 0s;
      }

      .message:nth-child(2) {
        right: 12%;
        animation-delay: 1.2s;
      }

      .message:nth-child(3) {
        left: 28%;
        animation-delay: 2.4s;
      }

      .message:nth-child(4) {
        right: 22%;
        animation-delay: 3.6s;
      }

      .art-domain .home-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 260px;
        height: 260px;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(156, 255, 177, 0.56);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(156, 255, 177, 0.18), transparent 64%);
        box-shadow: 0 0 72px rgba(156, 255, 177, 0.26);
      }

      .art-domain .orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 390px;
        height: 390px;
        margin: -195px;
        border: 1px dashed rgba(228, 221, 203, 0.16);
        border-radius: 50%;
        animation: spin 18s linear infinite;
      }

      .art-domain .orbit::before,
      .art-domain .orbit::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 24px rgba(156, 255, 177, 0.72);
      }

      .art-domain .orbit::before {
        left: 50%;
        top: -8px;
      }

      .art-domain .orbit::after {
        right: 20px;
        bottom: 46px;
        background: var(--telegram);
      }

      .art-plain {
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: 13px;
        text-transform: uppercase;
      }

      .footer-note {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: end;
        padding: 8px 0 30px;
        color: var(--muted);
        font-size: 12px;
      }

      .footer-note p {
        max-width: 780px;
        margin: 0;
        color: #c9c0ad;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(20px, 2.2vw, 28px);
        line-height: 1.42;
      }

      .footer-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        text-align: right;
      }

      .copyright {
        font-size: 11px;
        color: rgba(228, 221, 203, 0.4);
        letter-spacing: 0.5px;
      }

      .update-galaxy {
        position: fixed;
        left: clamp(18px, 4vw, 54px);
        bottom: clamp(18px, 4vw, 44px);
        z-index: 4;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border: 1px solid rgba(228, 221, 203, 0.16);
        border-radius: 50%;
        background:
          radial-gradient(circle at 50% 50%, rgba(156, 255, 177, 0.22), transparent 36%),
          conic-gradient(from 120deg, rgba(231, 180, 95, 0.14), rgba(42, 171, 238, 0.18), rgba(156, 255, 177, 0.1), rgba(231, 180, 95, 0.14)),
          rgba(7, 9, 12, 0.58);
        color: var(--soft);
        cursor: pointer;
        opacity: 0.82;
        box-shadow: 0 0 34px rgba(42, 171, 238, 0.12);
      }

      .update-galaxy::before {
        content: "";
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(228, 221, 203, 0.22);
        box-shadow:
          0 0 14px rgba(156, 255, 177, 0.32),
          12px -8px 0 -7px rgba(231, 180, 95, 0.72),
          -11px 9px 0 -7px rgba(42, 171, 238, 0.72);
      }

      .update-galaxy::after {
        content: "log";
        position: absolute;
        left: 50%;
        top: calc(100% + 7px);
        transform: translateX(-50%);
        color: rgba(228, 221, 203, 0.58);
        font-size: 9px;
        text-transform: uppercase;
      }

      .update-galaxy:hover,
      .update-galaxy:focus-visible {
        opacity: 1;
        border-color: rgba(228, 221, 203, 0.38);
        outline: none;
      }

      .update-log {
        position: fixed;
        left: clamp(12px, 4vw, 44px);
        right: auto;
        bottom: clamp(84px, 9vw, 112px);
        z-index: 9;
        width: min(760px, calc(100vw - 24px));
        max-height: min(620px, calc(100dvh - 128px));
        overflow: auto;
        border: 1px solid rgba(228, 221, 203, 0.22);
        border-radius: 6px;
        background:
          linear-gradient(90deg, rgba(82, 55, 27, 0.12) 1px, transparent 1px),
          linear-gradient(rgba(82, 55, 27, 0.08) 1px, transparent 1px),
          radial-gradient(circle at 12% 8%, rgba(255, 246, 197, 0.28), transparent 13rem),
          radial-gradient(circle at 80% 92%, rgba(154, 93, 39, 0.14), transparent 16rem),
          linear-gradient(90deg, rgba(83, 45, 18, 0.26), transparent 7%, transparent 93%, rgba(83, 45, 18, 0.2)),
          rgba(238, 205, 132, 0.94);
        background-size: 34px 100%, 100% 30px, auto, auto, auto, auto;
        box-shadow:
          0 24px 90px rgba(0, 0, 0, 0.48),
          inset 0 0 40px rgba(64, 35, 13, 0.2),
          inset 18px 0 28px rgba(74, 39, 13, 0.16),
          inset -18px 0 28px rgba(74, 39, 13, 0.12);
        opacity: 0;
        pointer-events: none;
        transform: translate(-10px, 34px) scaleY(0.08) scaleX(0.72);
        transform-origin: 32px calc(100% + 14px);
        transition: opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .update-log.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .update-log::before,
      .update-log::after {
        content: "";
        position: sticky;
        left: 0;
        right: 0;
        z-index: 2;
        display: block;
        height: 18px;
        margin: 0 18px;
        border: 1px solid rgba(85, 47, 18, 0.34);
        border-radius: 999px;
        background:
          radial-gradient(circle at 12% 50%, rgba(255, 240, 170, 0.85), transparent 24%),
          linear-gradient(90deg, rgba(93, 50, 18, 0.72), rgba(255, 229, 151, 0.96), rgba(93, 50, 18, 0.72));
        box-shadow:
          0 4px 12px rgba(53, 28, 9, 0.28),
          inset 0 0 10px rgba(70, 36, 12, 0.3);
      }

      .update-log::before {
        top: 0;
        margin-top: 10px;
      }

      .update-log::after {
        bottom: 0;
        margin-bottom: 10px;
      }

      .update-log header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 22px 16px;
        border-bottom: 1px solid rgba(91, 55, 22, 0.22);
        color: rgba(78, 52, 25, 0.76);
        font-size: 12px;
        text-transform: uppercase;
      }

      .update-log h2 {
        margin: 0;
        color: #3e2812;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(28px, 4vw, 46px);
        font-weight: 500;
        line-height: 0.95;
      }

      .update-log-title {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .update-log .close {
        border-color: rgba(78, 52, 25, 0.32);
        color: #4f3519;
        background: rgba(255, 236, 166, 0.2);
      }

      .update-log .close:hover,
      .update-log .close:focus-visible {
        border-color: rgba(78, 52, 25, 0.62);
        color: #2f1b0b;
      }

      .update-list {
        display: grid;
        gap: 0;
        margin: 0;
      }

      .update-entry {
        display: grid;
        grid-template-columns: minmax(118px, 0.22fr) minmax(0, 1fr);
        gap: 18px;
        padding: 18px 22px;
        border-bottom: 1px solid rgba(91, 55, 22, 0.16);
      }

      .update-entry:last-child {
        border-bottom: 0;
      }

      .update-entry time {
        color: #5f4b16;
        font-size: 11px;
        text-transform: uppercase;
      }

      .update-entry h3 {
        margin: 0 0 8px;
        color: #3e2812;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(20px, 2.2vw, 30px);
        font-weight: 500;
      }

      .update-entry p {
        margin: 0;
        color: #4f3519;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        line-height: 1.48;
      }

      @media (max-width: 768px) {
        .footer-meta {
          align-items: flex-start;
          text-align: left;
          margin-top: 16px;
        }

        .update-log header,
        .update-entry {
          grid-template-columns: 1fr;
        }

        .update-log header {
          flex-direction: column;
        }
      }

      @media (max-width: 560px) {
        .update-galaxy {
          left: 14px;
          bottom: 18px;
          width: 50px;
          height: 50px;
        }

        .update-log {
          left: 10px;
          right: 10px;
          bottom: 84px;
          width: auto;
          max-height: calc(100dvh - 108px);
          transform-origin: 28px calc(100% + 10px);
        }

        .update-entry {
          grid-template-columns: 1fr;
          gap: 8px;
          padding: 16px;
        }

        .update-log header {
          padding: 16px;
        }

        .update-entry p {
          font-size: 15px;
        }
      }

      @media (max-width: 320px), (max-height: 430px) {
        .ambient-bg,
        .site,
        .scene,
        .contact-panel,
        .update-galaxy,
        .update-log,
        .realm-gate {
          display: none !important;
        }

        .tiny-screen-message {
          display: grid;
        }
      }

      @media (max-width: 50px), (max-height: 50px) {
        .tiny-screen-message {
          padding: 2px;
          font-size: 5px;
          line-height: 1;
          overflow-wrap: anywhere;
        }

        .tiny-screen-message span {
          display: none;
        }

        .micro-screen-message {
          display: inline;
          font-size: 5px;
          line-height: 1;
          font-weight: 400;
        }
      }

      .romantic-archive {
        display: none;
        position: relative;
        margin: 0 0 42px;
        padding: clamp(20px, 4vw, 44px);
        border: 1px solid rgba(255, 209, 138, 0.18);
        background:
          radial-gradient(circle at 18% 12%, rgba(255, 177, 163, 0.16), transparent 22rem),
          radial-gradient(circle at 80% 78%, rgba(142, 184, 216, 0.11), transparent 22rem),
          rgba(11, 10, 12, 0.72);
        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.36);
        overflow: hidden;
      }

      body.memory-mode .romantic-archive {
        display: block;
        animation: archiveSurface 900ms ease both;
      }

      .romantic-archive::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(255, 242, 223, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 242, 223, 0.025) 1px, transparent 1px);
        background-size: 42px 42px;
        pointer-events: none;
      }

      .romantic-head {
        position: relative;
        max-width: 850px;
        margin-bottom: 26px;
      }

      .romantic-head p {
        margin: 0;
        color: #d7bfa8;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(19px, 2.1vw, 27px);
        line-height: 1.45;
      }

      .romantic-title {
        margin: 0 0 16px;
        color: #fff2df;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(38px, 5vw, 78px);
        font-weight: 500;
        line-height: 0.96;
      }

      .memory-chain {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .memory-chain + .memory-chain {
        display: none;
      }

      .love-card {
        position: relative;
        min-height: 276px;
        padding: 16px;
        border: 1px solid rgba(255, 209, 138, 0.16);
        background: rgba(12, 12, 15, 0.78);
        overflow: hidden;
      }

      .love-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 22%, rgba(255, 177, 163, 0.12), transparent 55%);
        opacity: 0.8;
        pointer-events: none;
      }

      .love-card h3 {
        position: relative;
        margin: 0 0 12px;
        color: #fff2df;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 24px;
        font-weight: 500;
      }

      .love-card p {
        position: relative;
        margin: 0;
        color: #d8c8b8;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        line-height: 1.45;
      }

      .card-art {
        position: relative;
        height: 126px;
        margin-bottom: 16px;
        border-bottom: 1px solid rgba(255, 209, 138, 0.12);
        overflow: hidden;
      }

      .bench-art .desk {
        position: absolute;
        bottom: 30px;
        width: 72px;
        height: 38px;
        border: 1px solid rgba(255, 209, 138, 0.24);
        background: rgba(255, 209, 138, 0.07);
      }

      .bench-art .desk.one {
        left: 28px;
      }

      .bench-art .desk.two {
        right: 28px;
        animation: deskGlow 3.8s ease-in-out infinite;
      }

      .mask-art .blur-face {
        position: absolute;
        left: 50%;
        top: 20px;
        width: 72px;
        height: 72px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 242, 223, 0.34), rgba(255, 177, 163, 0.08));
        filter: blur(9px);
        animation: glanceClear 4.8s ease-in-out infinite;
      }

      .captain-art .register {
        position: absolute;
        left: 24px;
        right: 24px;
        top: 18px;
        height: 82px;
        border: 1px solid rgba(255, 242, 223, 0.18);
        background: repeating-linear-gradient(0deg, rgba(255, 242, 223, 0.12) 0 1px, transparent 1px 13px);
        transform: rotate(-2deg);
      }

      .captain-art .badge {
        position: absolute;
        right: 30px;
        top: 34px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 209, 138, 0.5);
        box-shadow: 0 0 24px rgba(255, 209, 138, 0.2);
        animation: badgeGlow 2.8s ease-in-out infinite;
      }

      .lab-art .monitor {
        position: absolute;
        width: 92px;
        height: 62px;
        top: 26px;
        border: 1px solid rgba(142, 184, 216, 0.34);
        background: #071019;
        color: #8eb8d8;
        padding: 8px;
        font-size: 9px;
        line-height: 1.45;
      }

      .lab-art .monitor.one {
        left: 18px;
      }

      .lab-art .monitor.two {
        right: 18px;
      }

      .lab-art .cursor-dot {
        display: inline-block;
        width: 6px;
        height: 11px;
        background: #8eb8d8;
        animation: blink 1s steps(2, start) infinite;
      }

      .blush-art .eye-line {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 54px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 177, 163, 0.72), transparent);
        animation: eyeLine 3.8s ease-in-out infinite;
      }

      .blush-art .blush {
        position: absolute;
        right: 42px;
        top: 38px;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 177, 163, 0.34), transparent 68%);
        animation: blushPulse 3.2s ease-in-out infinite;
      }

      .transfer-art .train-time {
        position: absolute;
        left: 22px;
        top: 22px;
        color: #ffd18a;
        font-size: 22px;
      }

      .transfer-art .platform {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 34px;
        height: 1px;
        background: rgba(255, 242, 223, 0.34);
      }

      .transfer-art .train {
        position: absolute;
        left: -70px;
        bottom: 42px;
        width: 88px;
        height: 24px;
        border: 1px solid rgba(142, 184, 216, 0.34);
        background: rgba(142, 184, 216, 0.1);
        animation: trainLeave 6s ease-in-out infinite;
      }

      .pen-art .pen {
        position: absolute;
        left: 18px;
        top: 58px;
        width: 130px;
        height: 8px;
        border-radius: 8px;
        background: linear-gradient(90deg, #1d2430, #8eb8d8, #fff2df);
        box-shadow: 0 0 16px rgba(142, 184, 216, 0.24);
        animation: penSlide 5s ease-in-out infinite;
      }

      .goodbye-art .photo {
        position: absolute;
        width: 54px;
        height: 42px;
        border: 1px solid rgba(255, 242, 223, 0.18);
        background: rgba(255, 242, 223, 0.05);
      }

      .goodbye-art .photo.one {
        left: 24px;
        top: 38px;
        transform: rotate(-8deg);
      }

      .goodbye-art .photo.two {
        left: 82px;
        top: 26px;
        transform: rotate(7deg);
      }

      .goodbye-art .gate {
        position: absolute;
        right: 28px;
        bottom: 28px;
        width: 78px;
        height: 64px;
        border: 1px solid rgba(255, 209, 138, 0.22);
        border-bottom: 0;
        animation: gateFade 4.6s ease-in-out infinite;
      }

      .row-art .bench-row {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 54px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
      }

      .row-art .bench-row i {
        height: 24px;
        border: 1px solid rgba(255, 209, 138, 0.2);
        background: rgba(255, 209, 138, 0.05);
      }

      .row-art .bench-row i:nth-child(3) {
        border-color: rgba(255, 209, 138, 0.52);
        box-shadow: 0 0 22px rgba(255, 209, 138, 0.22);
        animation: deskGlow 3.4s ease-in-out infinite;
      }

      .song-art .lyric-line {
        position: absolute;
        left: 22px;
        right: 22px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 177, 163, 0.62), transparent);
        animation: lyricFloat 4s ease-in-out infinite;
      }

      .song-art .lyric-line.one {
        top: 38px;
      }

      .song-art .lyric-line.two {
        top: 64px;
        animation-delay: 0.8s;
      }

      .song-art .lyric-line.three {
        top: 90px;
        animation-delay: 1.6s;
      }

      .private-art .closed-note {
        position: absolute;
        left: 50%;
        top: 48%;
        width: 150px;
        height: 80px;
        transform: translate(-50%, -50%) rotate(-4deg);
        border: 1px solid rgba(255, 242, 223, 0.18);
        background:
          linear-gradient(rgba(255, 242, 223, 0.08) 1px, transparent 1px),
          rgba(255, 242, 223, 0.04);
        background-size: 100% 14px;
      }

      .private-art .closed-note::after {
        content: "private";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 209, 138, 0.72);
        font-size: 12px;
        text-transform: uppercase;
      }

      .newschool-art .grade-line {
        position: absolute;
        left: 30px;
        right: 30px;
        top: 58px;
        height: 1px;
        background: rgba(255, 242, 223, 0.18);
      }

      .newschool-art .grade-line::before {
        content: "";
        position: absolute;
        left: 0;
        top: -5px;
        width: 72%;
        height: 10px;
        background: linear-gradient(90deg, rgba(255, 209, 138, 0.64), rgba(217, 135, 124, 0.32));
        animation: gradeDrop 4.8s ease-in-out infinite;
      }

      .classroom-art .room-lines {
        position: absolute;
        inset: 18px;
        background:
          linear-gradient(90deg, transparent 0 16%, rgba(255, 242, 223, 0.12) 16% 17%, transparent 17% 100%),
          repeating-linear-gradient(0deg, transparent 0 18px, rgba(255, 242, 223, 0.08) 18px 19px);
        opacity: 0.58;
      }

      .classroom-art .mask-haze {
        position: absolute;
        left: 58%;
        top: 34px;
        width: 78px;
        height: 50px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 242, 223, 0.22), rgba(255, 177, 163, 0.08), transparent 70%);
        filter: blur(10px);
        animation: glanceClear 6.2s ease-in-out infinite;
      }

      .classroom-art .seat-light {
        position: absolute;
        right: 46px;
        bottom: 24px;
        width: 42px;
        height: 22px;
        background: rgba(255, 209, 138, 0.16);
        border: 1px solid rgba(255, 209, 138, 0.3);
        box-shadow: 0 0 26px rgba(255, 209, 138, 0.22);
        animation: deskGlow 5s ease-in-out infinite;
      }

      .move-art .class-map {
        position: absolute;
        inset: 20px 28px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .move-art .class-map i {
        border: 1px solid rgba(255, 242, 223, 0.12);
      }

      .move-art .marker {
        position: absolute;
        left: 34px;
        bottom: 28px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ffd18a;
        box-shadow: 0 0 20px rgba(255, 209, 138, 0.45);
        animation: benchMove 5.2s ease-in-out infinite;
      }

      .calendar-art .page {
        position: absolute;
        left: 50%;
        top: 18px;
        width: 108px;
        height: 86px;
        transform: translateX(-50%);
        border: 1px solid rgba(255, 242, 223, 0.18);
        background:
          linear-gradient(rgba(255, 209, 138, 0.2) 0 18px, transparent 18px),
          repeating-linear-gradient(90deg, transparent 0 19px, rgba(255, 242, 223, 0.08) 19px 20px),
          repeating-linear-gradient(0deg, transparent 0 19px, rgba(255, 242, 223, 0.08) 19px 20px);
        animation: pageFlip 3.8s ease-in-out infinite;
      }

      .calendar-art .present {
        position: absolute;
        left: 38px;
        right: 38px;
        bottom: 22px;
        height: 8px;
        background: linear-gradient(90deg, rgba(255, 209, 138, 0.84), rgba(255, 177, 163, 0.44));
        animation: presentFill 3s ease-in-out infinite;
      }

      .halfday-art .bag {
        position: absolute;
        left: 38px;
        bottom: 28px;
        width: 56px;
        height: 58px;
        border: 1px solid rgba(255, 209, 138, 0.32);
        border-radius: 10px 10px 4px 4px;
        background: rgba(255, 209, 138, 0.08);
        box-shadow: 0 0 26px rgba(255, 209, 138, 0.16);
        animation: bagGlow 3.2s ease-in-out infinite;
      }

      .halfday-art .morning {
        position: absolute;
        right: 26px;
        top: 24px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 209, 138, 0.32), transparent 68%);
      }

      .helpers-art .note {
        position: absolute;
        left: 24px;
        top: 48px;
        width: 54px;
        height: 34px;
        border: 1px solid rgba(255, 242, 223, 0.22);
        background: rgba(255, 242, 223, 0.05);
        animation: notePass 4s ease-in-out infinite;
      }

      .helpers-art .laugh {
        position: absolute;
        right: 38px;
        top: 34px;
        color: rgba(255, 209, 138, 0.72);
        animation: lyricFloat 3s ease-in-out infinite;
      }

      .register-gaze-art .bottle {
        position: absolute;
        left: 36px;
        bottom: 28px;
        width: 18px;
        height: 58px;
        border: 1px solid rgba(142, 184, 216, 0.34);
        border-radius: 8px;
        background: rgba(142, 184, 216, 0.08);
        animation: bottleShine 3s ease-in-out infinite;
      }

      .register-gaze-art .clock {
        position: absolute;
        right: 28px;
        top: 28px;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 242, 223, 0.2);
        border-radius: 50%;
      }

      .winter-art {
        background:
          linear-gradient(90deg, rgba(255, 177, 163, 0.12), rgba(142, 184, 216, 0.12)),
          rgba(7, 9, 12, 0.3);
        animation: winterCool 6s ease-in-out infinite;
      }

      .winter-art .window {
        position: absolute;
        right: 26px;
        top: 20px;
        width: 86px;
        height: 76px;
        border: 1px solid rgba(142, 184, 216, 0.28);
        background: radial-gradient(circle at 40% 30%, rgba(255, 242, 223, 0.18), transparent 55%);
      }

      .winter-art .fog {
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent, rgba(142, 184, 216, 0.16), transparent);
        animation: fogMove 5.8s ease-in-out infinite;
      }

      .dialogue-art .line {
        position: absolute;
        left: 24px;
        right: 24px;
        min-height: 30px;
        border: 1px solid rgba(255, 242, 223, 0.16);
        border-radius: 18px;
        padding: 8px 12px;
        color: #d8c8b8;
        font-size: 10px;
        opacity: 0;
        animation: dialogueFade 6s ease-in-out infinite;
      }

      .dialogue-art .line.one {
        top: 30px;
      }

      .dialogue-art .line.two {
        top: 72px;
        animation-delay: 1.8s;
      }

      .dialogue-art .seat-fade {
        position: absolute;
        right: 36px;
        bottom: 22px;
        width: 50px;
        height: 24px;
        border: 1px solid rgba(255, 209, 138, 0.25);
        animation: seatFade 6s ease-in-out infinite;
      }

      .delayed-art .certificate {
        position: absolute;
        left: 30px;
        top: 24px;
        width: 86px;
        height: 66px;
        border: 1px solid rgba(255, 242, 223, 0.2);
        background: rgba(255, 242, 223, 0.05);
        transform: rotate(-3deg);
      }

      .delayed-art .gate-open {
        position: absolute;
        right: 34px;
        bottom: 28px;
        width: 70px;
        height: 58px;
        border: 1px solid rgba(255, 209, 138, 0.22);
        border-bottom: 0;
        animation: gateOpenSoft 4.2s ease-in-out infinite;
      }

      .shops-art .shutter {
        position: absolute;
        left: 24px;
        right: 24px;
        top: 32px;
        height: 62px;
        border: 1px solid rgba(217, 135, 124, 0.24);
        background: repeating-linear-gradient(0deg, rgba(217, 135, 124, 0.18) 0 4px, transparent 4px 9px);
      }

      .shops-art .empty-hand {
        position: absolute;
        left: 50%;
        bottom: 20px;
        width: 58px;
        height: 22px;
        transform: translateX(-50%);
        border-bottom: 1px solid rgba(255, 242, 223, 0.26);
        animation: handFade 3.8s ease-in-out infinite;
      }

      .story-letter {
        position: relative;
        margin-top: 18px;
        padding: clamp(22px, 4vw, 42px);
        border: 1px solid rgba(255, 209, 138, 0.16);
        background:
          linear-gradient(rgba(255, 242, 223, 0.028) 1px, transparent 1px),
          rgba(13, 12, 14, 0.82);
        background-size: 100% 30px;
      }

      .story-letter h3 {
        margin: 0 0 18px;
        color: #fff2df;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(30px, 4vw, 54px);
        font-weight: 500;
      }

      .story-letter p {
        max-width: 940px;
        margin: 0 0 18px;
        color: #d8c8b8;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(18px, 1.7vw, 23px);
        line-height: 1.55;
      }

      .story-letter .signature {
        color: #ffd18a;
      }

      @keyframes pulse {
        50% {
          opacity: 0.45;
          transform: scale(0.74);
        }
      }

      @keyframes memoryScan {
        to {
          transform: translateY(4px);
        }
      }

      @keyframes coreBreathe {
        50% {
          transform: translateY(-6px) scale(1.035);
          border-color: rgba(255, 209, 138, 0.34);
        }
      }

      @keyframes orbHover {
        50% {
          transform: translateY(-12px) scale(1.04);
        }
      }

      @keyframes orbRing {
        50% {
          transform: scale(1.22);
          opacity: 0.18;
        }
      }

      @keyframes orbSpin {
        to {
          rotate: 360deg;
        }
      }

      @keyframes planeRoute {
        0% {
          left: 14vw;
          top: 22vh;
          transform: rotate(4deg);
        }
        24% {
          left: 78vw;
          top: 16vh;
          transform: rotate(18deg);
        }
        48% {
          left: 84vw;
          top: 68vh;
          transform: rotate(126deg);
        }
        72% {
          left: 28vw;
          top: 78vh;
          transform: rotate(204deg);
        }
        100% {
          left: 14vw;
          top: 22vh;
          transform: rotate(364deg);
        }
      }

      @keyframes realmBreath {
        50% {
          opacity: 1;
          transform: scale(1.04);
        }
      }

      @keyframes gateOpen {
        0% {
          opacity: 0;
          transform: scale(1.1);
          filter: blur(16px);
        }
        28% {
          opacity: 1;
          transform: scale(1);
          filter: blur(0);
        }
        100% {
          opacity: 0;
          transform: scale(0.94);
          filter: blur(10px);
        }
      }

      @keyframes realmArrive {
        from {
          opacity: 0;
          transform: scale(1.08);
          filter: blur(10px);
        }
        to {
          opacity: 1;
          transform: scale(1);
          filter: blur(0);
        }
      }

      @keyframes textArrive {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes realmRush {
        to {
          background-position: 0 120px;
        }
      }

      @keyframes dangerPulse {
        50% {
          opacity: 1;
          filter: saturate(1.5);
        }
      }

      @keyframes telegramRealm {
        50% {
          transform: scale(1.08) rotate(1deg);
          opacity: 0.95;
        }
      }

      @keyframes domainRealm {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes archiveSurface {
        from {
          opacity: 0;
          transform: translateY(34px);
          filter: blur(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      @keyframes deskGlow {
        50% {
          box-shadow: 0 0 30px rgba(255, 209, 138, 0.26);
          border-color: rgba(255, 209, 138, 0.54);
        }
      }

      @keyframes glanceClear {
        45%,
        58% {
          filter: blur(1px);
          transform: translateX(-50%) scale(1.08);
        }
      }

      @keyframes badgeGlow {
        50% {
          transform: scale(1.1);
          box-shadow: 0 0 34px rgba(255, 209, 138, 0.42);
        }
      }

      @keyframes eyeLine {
        0%,
        100% {
          transform: translateX(-18px);
          opacity: 0.24;
        }
        48%,
        58% {
          transform: translateX(18px);
          opacity: 1;
        }
      }

      @keyframes blushPulse {
        50% {
          transform: scale(1.2);
          opacity: 0.42;
        }
      }

      @keyframes trainLeave {
        0%,
        24% {
          transform: translateX(0);
          opacity: 0.2;
        }
        56% {
          opacity: 1;
        }
        100% {
          transform: translateX(430px);
          opacity: 0;
        }
      }

      @keyframes penSlide {
        0%,
        34% {
          transform: translateX(0) rotate(-4deg);
        }
        70%,
        100% {
          transform: translateX(96px) rotate(-4deg);
        }
      }

      @keyframes gateFade {
        50% {
          opacity: 0.28;
          transform: translateY(8px);
        }
      }

      @keyframes lyricFloat {
        50% {
          transform: translateY(-10px);
          opacity: 0.35;
        }
      }

      @keyframes gradeDrop {
        0%,
        28% {
          width: 72%;
        }
        74%,
        100% {
          width: 34%;
          background: linear-gradient(90deg, rgba(217, 135, 124, 0.64), rgba(217, 135, 124, 0.12));
        }
      }

      @keyframes benchMove {
        0%,
        28% {
          left: 34px;
          bottom: 28px;
        }
        66%,
        100% {
          left: calc(100% - 54px);
          bottom: 82px;
        }
      }

      @keyframes pageFlip {
        50% {
          transform: translateX(-50%) rotateX(14deg) translateY(-4px);
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        }
      }

      @keyframes presentFill {
        0% {
          width: 18%;
        }
        55%,
        100% {
          width: calc(100% - 76px);
        }
      }

      @keyframes bagGlow {
        50% {
          transform: translateY(-5px);
          box-shadow: 0 0 36px rgba(255, 209, 138, 0.3);
        }
      }

      @keyframes notePass {
        0%,
        25% {
          transform: translateX(0) rotate(-4deg);
        }
        70%,
        100% {
          transform: translateX(118px) rotate(5deg);
        }
      }

      @keyframes bottleShine {
        50% {
          box-shadow: 0 0 24px rgba(142, 184, 216, 0.34);
          transform: translateY(-4px);
        }
      }

      @keyframes winterCool {
        0%,
        35% {
          filter: sepia(0.15) saturate(1.08);
        }
        75%,
        100% {
          filter: sepia(0) saturate(0.78) hue-rotate(18deg);
        }
      }

      @keyframes fogMove {
        50% {
          transform: translateX(-28px);
          opacity: 0.42;
        }
      }

      @keyframes dialogueFade {
        18%,
        54% {
          opacity: 1;
          transform: translateY(0);
        }
        0%,
        100% {
          opacity: 0;
          transform: translateY(8px);
        }
      }

      @keyframes seatFade {
        50% {
          opacity: 0.18;
          box-shadow: 0 0 24px rgba(255, 209, 138, 0.16);
        }
      }

      @keyframes gateOpenSoft {
        50% {
          transform: perspective(120px) rotateY(-18deg);
          box-shadow: 0 0 24px rgba(255, 209, 138, 0.12);
        }
      }

      @keyframes handFade {
        50% {
          opacity: 0.28;
          transform: translateX(-50%) translateY(8px);
        }
      }

      @keyframes float {
        50% {
          transform: translate(-50%, -50%) translateY(-12px) rotate(1deg);
        }
      }

      @keyframes dash {
        to {
          stroke-dashoffset: -160;
        }
      }

      @keyframes run {
        50% {
          left: 128px;
          transform: translateY(-16px);
        }
      }

      @keyframes trainLights {
        to {
          background-position: 42px 0;
        }
      }

      @keyframes swipe {
        0%,
        100% {
          transform: translateX(-22px) rotate(-18deg);
          opacity: 0.42;
        }
        50% {
          transform: translateX(62px) rotate(-18deg);
          opacity: 1;
        }
      }

      @keyframes shield {
        50% {
          transform: translateX(-50%) scale(1.14);
          opacity: 0.46;
        }
      }

      @keyframes shieldCenter {
        50% {
          transform: translate(-50%, -50%) scale(1.16);
          opacity: 0.46;
        }
      }

      @keyframes battleSpark {
        50% {
          transform: translateY(-18px) scale(1.9);
          opacity: 0.22;
        }
      }

      @keyframes portal {
        50% {
          transform: scale(1.08);
          box-shadow:
            0 0 52px rgba(42, 171, 238, 0.54),
            inset 0 0 42px rgba(42, 171, 238, 0.22);
        }
      }

      @keyframes drift {
        50% {
          transform: translateY(-14px);
          opacity: 0.64;
        }
      }

      @keyframes jump {
        50% {
          transform: translateY(-48px);
        }
      }

      @keyframes obstacle {
        from {
          transform: translateY(-120px) scale(0.72);
          opacity: 0;
        }
        35% {
          opacity: 1;
        }
        to {
          transform: translateY(360px) scale(1.36);
          opacity: 0;
        }
      }

      @keyframes coinFlicker {
        50% {
          transform: translateY(-10px) scale(1.18);
          opacity: 0.42;
        }
      }

      @keyframes railMove {
        to {
          background-position: 0 0, 0 36px;
        }
      }

      @keyframes trainPulse {
        50% {
          transform: translateX(-50%) scale(1.4);
          opacity: 0.34;
        }
      }

      @keyframes graffitiFlash {
        50% {
          opacity: 0.28;
          transform: rotate(-8deg) translateY(-6px);
        }
      }

      @keyframes charge {
        40% {
          width: 88%;
        }
        70% {
          width: 6%;
          background: var(--red);
        }
      }

      @keyframes shake {
        20%,
        60% {
          transform: translateX(-8px);
        }
        40%,
        80% {
          transform: translateX(8px);
        }
      }

      @keyframes messages {
        from {
          top: 100%;
          opacity: 0;
        }
        18% {
          opacity: 1;
        }
        to {
          top: -12%;
          opacity: 0;
        }
      }

      @keyframes tgArchive {
        from {
          top: 104%;
          opacity: 0;
        }
        12% {
          opacity: 1;
        }
        78% {
          opacity: 1;
        }
        to {
          top: -18%;
          opacity: 0;
        }
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @media (max-width: 980px) {
        .topbar {
          align-items: flex-start;
        }

        .hero {
          grid-template-columns: 1fr;
          gap: 28px;
          min-height: auto;
        }

        .memory-chain {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .room {
          min-height: 680px;
        }

        .music-orb {
          top: 92px;
          right: 22px;
          width: 76px;
          height: 76px;
        }

        .music-orb .orb-label {
          width: 138px;
          font-size: 10px;
        }

        .telegram-plane {
          width: 48px;
          height: 48px;
        }

        .scene {
          grid-template-columns: 1fr;
          overflow: auto;
        }

        .scene-art {
          min-height: 340px;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
      }

      @media (max-width: 660px) {
        html,
        body {
          width: 100%;
          overflow-x: hidden;
        }

        .site {
          padding: 16px;
        }

        .music-orb {
          position: relative;
          top: auto;
          right: auto;
          width: 78px;
          height: 78px;
          margin: 22px 0 0 auto;
        }

        .music-orb .orb-label {
          right: 0;
          left: auto;
          width: 150px;
          transform: none;
          text-align: right;
        }

        .topbar,
        .footer-note {
          align-items: flex-start;
          grid-template-columns: 1fr;
          flex-direction: column;
        }

        .topbar {
          gap: 14px;
        }

        .wordmark {
          width: 100%;
        }

        .wordmark-badge {
          width: 40px;
          height: 40px;
          flex: 0 0 auto;
        }

        .site-logo {
          width: 31px;
          height: 31px;
        }

        .wordmark-text strong {
          font-size: 12px;
        }

        .wordmark-text span {
          font-size: 9px;
        }

        .links {
          justify-content: flex-start;
          gap: 10px;
        }

        .links a {
          width: auto;
          padding: 0 14px;
        }

        .memory-chain {
          grid-template-columns: 1fr;
        }

        .hero {
          padding: 18px 0 34px;
        }

        h1 {
          font-size: clamp(44px, 16vw, 70px);
        }

        .intro p:not(.eyebrow) {
          font-size: 19px;
        }

        .hint {
          width: 100%;
          align-items: flex-start;
          flex-direction: column;
          gap: 4px;
        }

        .room {
          display: grid;
          gap: 12px;
          min-height: 0;
          padding: 54px 12px 18px;
          overflow: visible;
          background-size: 32px 32px;
        }

        .path {
          display: none;
        }

        .object {
          position: relative;
          left: auto;
          top: auto;
          width: 100%;
          height: 116px;
          min-height: 116px;
          transform: none;
          animation: none;
          border: 1px solid var(--line);
          background: rgba(15, 19, 25, 0.72);
          overflow: hidden;
        }

        .object > :not(.label) {
          transform: scale(0.52);
          transform-origin: left top;
        }

        .object .label {
          left: 118px;
          top: 38px;
          bottom: auto;
          min-width: 0;
          width: calc(100% - 132px);
          transform: none;
          opacity: 1;
          text-align: left;
          font-size: 10px;
          line-height: 1.35;
          overflow-wrap: anywhere;
        }

        .phone-screen {
          font-size: 8px;
        }

        .domain-core::before {
          font-size: 11px;
        }

        .telegram-plane {
          position: fixed;
          left: auto;
          right: 14px;
          top: auto;
          bottom: 18px;
          width: 44px;
          height: 44px;
          animation: none;
        }

        .telegram-plane svg {
          width: 34px;
          height: 34px;
        }

        .telegram-plane::after {
          display: none;
        }

        .scene {
          inset: 12px;
          display: block;
          overflow: auto;
        }

        .scene-art {
          min-height: 260px;
        }

        .scene-head {
          position: sticky;
          top: 0;
          z-index: 2;
          background: rgba(9, 12, 16, 0.96);
        }

        .scene-scroll {
          padding: 22px;
        }

        .scene-title {
          font-size: 34px;
        }

        .scene-text {
          font-size: 18px;
        }

        .romantic-archive {
          margin-inline: -4px;
          padding: 18px 12px;
        }

        .romantic-title {
          font-size: 36px;
        }

        .romantic-head p {
          font-size: 18px;
        }

        .love-card {
          min-height: auto;
          padding: 14px;
        }

        .love-card h3 {
          font-size: 23px;
        }

        .love-card p {
          font-size: 16px;
        }

        .card-art {
          height: 116px;
        }

        .story-letter {
          padding: 20px 14px;
        }

        .story-letter h3 {
          font-size: 32px;
        }

        .story-letter p {
          font-size: 17px;
        }

        .contact-panel {
          inset: 10px;
          padding: 0;
          align-items: start;
          overflow: auto;
        }

        .contact-card {
          margin: 10px 0;
        }

        .contact-body {
          padding: 18px;
        }

        .bot-row {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 420px) {
        .site {
          padding: 12px;
        }

        .topbar {
          font-size: 11px;
        }

        .room::before {
          left: 12px;
          right: 12px;
          font-size: 9px;
          line-height: 1.4;
        }

        .music-orb {
          width: 68px;
          height: 68px;
        }

        .chromium-browser .compat-orb {
          top: 58px;
          right: 102px;
          width: 42px;
          height: 42px;
        }

        .music-orb .orb-label {
          width: 124px;
          font-size: 9px;
        }

        .object {
          height: 104px;
          min-height: 104px;
        }

        .object > :not(.label) {
          transform: scale(0.45);
        }

        .object .label {
          left: 102px;
          top: 34px;
          width: calc(100% - 114px);
          font-size: 9px;
        }

        .scene {
          inset: 8px;
        }

        .scene-art {
          min-height: 220px;
        }

        .scene-scroll {
          padding: 18px;
        }

        .scene-title {
          font-size: 30px;
        }

        .scene-text {
          font-size: 17px;
        }

        .memory-chain {
          gap: 12px;
        }

        .love-card h3 {
          font-size: 21px;
        }
      }

      @media (max-width: 760px) {
        .topbar {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 10px !important;
          width: 100%;
        }

        .wordmark {
          flex: 1 1 auto;
          min-width: 0;
        }

        .wordmark-text {
          min-width: 0;
        }

        .wordmark-text strong,
        .wordmark-text span {
          max-width: 42vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .links {
          flex: 0 0 auto;
          justify-content: flex-end !important;
          margin-left: auto;
          max-width: none;
          gap: 8px;
          flex-wrap: nowrap;
        }

        .links a,
        .compat-toggle,
        .compat-info {
          height: 32px;
        }

        .links a {
          padding: 0 10px;
          font-size: 11px;
        }

        .compat-tools {
          display: none !important;
        }

        .compat-toggle {
          min-width: 44px;
          width: 44px;
          padding: 0;
          font-size: 0;
        }

        .compat-toggle::before {
          content: "cmp";
          font-size: 10px;
        }

        .compat-mode .compat-toggle::before {
          content: "on";
        }

        .compat-info {
          width: 32px;
          font-size: 12px;
        }

        .music-orb {
          position: absolute !important;
          top: 78px !important;
          right: 16px !important;
          left: auto !important;
          width: 70px !important;
          height: 70px !important;
          margin: 0 !important;
        }

        .chromium-browser .compat-orb {
          display: grid;
          top: 62px;
          right: 104px;
          width: 44px;
          height: 44px;
        }

        .music-orb .orb-label {
          left: auto !important;
          right: 0 !important;
          top: calc(100% + 9px) !important;
          width: 132px !important;
          transform: none !important;
          text-align: right !important;
          font-size: 9px !important;
          line-height: 1.3;
        }

        .hero {
          padding-top: 76px;
        }

        .room {
          display: grid !important;
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 48px 10px 14px !important;
          border-radius: 0;
        }

        .object {
          position: relative !important;
          left: auto !important;
          top: auto !important;
          display: flex !important;
          align-items: center;
          width: 100% !important;
          min-height: 78px !important;
          height: auto !important;
          padding: 14px 14px 14px 54px;
          transform: none !important;
          animation: none !important;
          overflow: hidden;
        }

        .object:hover,
        .object:focus-visible {
          transform: none !important;
        }

        .object > :not(.label) {
          display: none !important;
        }

        .object::before {
          content: "";
          position: absolute;
          left: 18px;
          top: 50%;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: var(--green);
          box-shadow: 0 0 22px rgba(156, 255, 177, 0.38);
          transform: translateY(-50%);
        }

        .telegram::before {
          background: var(--telegram);
          box-shadow: 0 0 22px rgba(42, 171, 238, 0.44);
        }

        .sim::before {
          background: var(--red);
          box-shadow: 0 0 22px rgba(220, 107, 102, 0.44);
        }

        .runner::before,
        .recharge::before,
        .clash::before {
          background: var(--amber);
          box-shadow: 0 0 22px rgba(231, 180, 95, 0.38);
        }

        .object .label {
          position: static !important;
          width: auto !important;
          min-width: 0 !important;
          opacity: 1 !important;
          transform: none !important;
          text-align: left !important;
          color: var(--paper);
          font-size: 11px !important;
          line-height: 1.35;
          overflow-wrap: anywhere;
        }

        .telegram-plane {
          left: auto !important;
          right: 14px !important;
          top: auto !important;
          bottom: 14px !important;
          width: 42px !important;
          height: 42px !important;
          animation: none !important;
          transform: none !important;
        }

        .scene {
          inset: 8px !important;
          display: flex !important;
          flex-direction: column;
          max-height: calc(100dvh - 16px);
          overflow: hidden !important;
          transform: translateY(18px) !important;
        }

        .scene.open {
          transform: translateY(0) !important;
        }

        .scene-art {
          flex: 0 0 180px;
          min-height: 180px !important;
          max-height: 180px;
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .scene-copy {
          min-height: 0;
          flex: 1 1 auto;
        }

        .scene-scroll {
          overflow: auto;
          padding: 18px !important;
        }

        .realm-gate {
          font-size: 18px;
          text-align: center;
          padding: 24px;
        }

        .memory-chain {
          grid-template-columns: 1fr !important;
        }

        .love-card {
          min-height: 0 !important;
        }

        .card-art {
          height: 104px !important;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
        }
      }

      .probe-room-static .room .object,
      .probe-room-static .room .object *,
      .probe-room-static .room .path path {
        animation-play-state: paused !important;
        transition: none !important;
      }

      .probe-room-path .room .path {
        display: none !important;
      }

      .probe-room-effects .room,
      .probe-room-effects .room *,
      .probe-room-effects .room *::before,
      .probe-room-effects .room *::after {
        box-shadow: none !important;
        filter: none !important;
      }

      .probe-room-background .room {
        background: rgba(7, 9, 12, 0.34) !important;
        box-shadow: none !important;
      }