:root {
  --bg: #050407;
  --panel: rgba(8, 6, 12, .78);
  --panel-strong: rgba(8, 6, 12, .92);
  --line: rgba(210, 170, 255, .24);
  --line-strong: rgba(210, 170, 255, .58);
  --violet: #cda8ff;
  --violet-hot: #e1c0ff;
  --pink-soft: #e7a8df;
  --text: #f4eefb;
  --muted: rgba(244, 238, 251, .72);
  --muted2: rgba(244, 238, 251, .46);
  --green: #78ff9f;
  --shadow: 0 28px 90px rgba(0,0,0,.65);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 4%, rgba(162, 97, 255, .13), transparent 30%),
    radial-gradient(circle at 8% 10%, rgba(220, 170, 255, .06), transparent 28%),
    linear-gradient(180deg, #07050b 0%, #030205 68%, #020203 100%);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

button, a, textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .10;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 1px);
  mix-blend-mode: screen;
}

.site-header {
  position: fixed;
  z-index: 80;
  top: 18px;
  left: 24px;
  right: 24px;
  height: 70px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 22px;
  border: 1px solid rgba(210,170,255,.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5,4,8,.92), rgba(5,4,8,.78));
  backdrop-filter: blur(16px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210,170,255,.42);
  border-radius: 10px;
  color: var(--violet);
  text-shadow: 0 0 16px rgba(210,170,255,.7);
}

.brand-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
  letter-spacing: .12em;
  color: var(--violet);
  text-shadow:
    0 0 14px rgba(210,170,255,.72),
    0 0 34px rgba(155,110,255,.28);
  animation: brandGlow 5s ease-in-out infinite;
}

.brand-tag {
  color: var(--muted2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.top-nav {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  gap: clamp(26px, 2.4vw, 40px);
  color: rgba(244,238,251,.82);
  font-size: 18px;
  font-weight: 600;
}

.top-nav a {
  position: relative;
  padding: 26px 0;
  transition: color .2s ease, text-shadow .2s ease;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--text);
  text-shadow: 0 0 14px rgba(210,170,255,.46);
}

.top-nav a:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--violet);
  box-shadow: 0 0 18px var(--violet);
}

.header-garland {
  position: relative;
  align-self: stretch;
  margin: 0 22px;
  min-width: 220px;
  pointer-events: none;
}

.header-garland::before {
  content: "";
  position: absolute;
  left: 1%;
  right: 1%;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(232,210,255,.74) 30%, rgba(208,176,255,.58) 60%, rgba(255,255,255,.10));
  box-shadow: 0 0 12px rgba(210,170,255,.28);
}

.garland-string {
  --sway: 5deg;
  position: absolute;
  top: 11px;
  width: 2px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(210,170,255,.28) 72%, transparent);
  transform-origin: top center;
  animation: garlandSway 6.8s ease-in-out infinite;
  pointer-events: auto;
  cursor: default;
}

.garland-string:hover {
  animation-play-state: paused;
  transform: rotate(12deg) translateY(1px);
}

.garland-string .garland-charm {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 15px;
  color: rgba(245,236,255,.98);
  text-shadow: 0 0 10px rgba(255,255,255,.26), 0 0 24px rgba(210,170,255,.42);
  animation: charmBlink 4.2s ease-in-out infinite;
}

.g1 { left: 10%; height: 26px; animation-delay: -.8s; }
.g2 { left: 24%; height: 40px; animation-delay: -2.2s; }
.g3 { left: 38%; height: 29px; animation-delay: -1.4s; }
.g4 { left: 52%; height: 44px; animation-delay: -3.1s; }
.g5 { left: 68%; height: 31px; animation-delay: -.4s; }
.g6 { left: 82%; height: 38px; animation-delay: -2.7s; }
.g7 { left: 92%; height: 25px; animation-delay: -1.1s; }

.g2 .garland-charm, .g6 .garland-charm { font-size: 17px; }
.g4 .garland-charm { font-size: 14px; }

.hero {
  position: relative;
  min-height: clamp(780px, 62vw, 1040px);
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(1.08) contrast(1.06) brightness(1);
  transition: transform .18s ease, filter .18s ease;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,3,8,.30) 0%, rgba(4,3,8,.10) 30%, rgba(4,3,8,.06) 58%, rgba(4,3,8,.14) 100%),
    linear-gradient(180deg, rgba(4,3,8,.18) 0%, rgba(4,3,8,.04) 48%, rgba(4,3,8,.78) 100%);
}

.hero-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

.hero-crt {
  inset: 0;
  opacity: .23;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(210,170,255,.04), transparent 24%, rgba(170,120,255,.04) 52%, transparent 74%);
  mix-blend-mode: screen;
  animation: crtShift 8.5s linear infinite, crtFlicker 2.8s steps(12) infinite;
}

.signal-interference {
  inset: 0;
  opacity: .035;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,.055) 18px 19px, transparent 19px 32px),
    linear-gradient(180deg, transparent 0 36%, rgba(226,226,236,.18) 48%, transparent 60%);
  filter: grayscale(1) blur(.15px);
  animation: signalDrift 14s linear infinite;
}

.hero.signal-hit .signal-interference {
  opacity: .22;
  background:
    repeating-linear-gradient(180deg, transparent 0 8px, rgba(255,255,255,.16) 8px 10px, transparent 10px 18px),
    linear-gradient(180deg, transparent 0 34%, rgba(210,210,220,.34) 46%, rgba(255,255,255,.18) 50%, transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.04) 60%, transparent 100%);
}

.hero.signal-hit .hero-bg,
.hero.signal-hit .hero-card {
  transform: none;
  filter: none;
}

.monitor-flicker {
  left: 81.6%;
  top: 28%;
  width: 13%;
  height: 23%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(210,170,255,.18), rgba(255,255,255,0));
  opacity: .16;
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: monitorPulse 3.2s steps(10) infinite;
}

.smoke-stack {
  left: 58.8%;
  top: 7.2%;
  width: 12%;
  height: 34%;
  overflow: visible;
  animation: smokeSway 5.4s ease-in-out infinite;
}

.smoke {
  position: absolute;
  left: 14%;
  bottom: 5%;
  width: clamp(28px, 2.2vw, 42px);
  height: clamp(28px, 2.2vw, 42px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(242,240,255,.48) 0%, rgba(214,198,255,.30) 34%, rgba(255,255,255,.04) 52%, rgba(255,255,255,0) 76%);
  filter: blur(10px);
  opacity: 0;
}

.smoke-1 { animation: smokeRise 5.6s linear infinite; }
.smoke-2 { animation: smokeRise2 6.2s linear infinite .7s; }
.smoke-3 { animation: smokeRise3 6.8s linear infinite 1.5s; }
.smoke-4 { animation: smokeRise2 6.6s linear infinite 2.2s; }
.smoke-5 { animation: smokeRise 6.1s linear infinite 3.1s; }
.smoke-6 { animation: smokeRise3 7.0s linear infinite 3.8s; }
.smoke-7 { animation: smokeRise2 6.5s linear infinite 4.6s; }
.smoke-8 { animation: smokeRise 5.9s linear infinite 5.2s; }

.ash-layer {
  inset: 0;
  overflow: hidden;
}

.ash-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,231,214,.95), rgba(255,155,92,.42) 56%, rgba(0,0,0,0) 70%);
  box-shadow: 0 0 10px rgba(255,167,100,.35);
  opacity: .85;
  animation: ashFall linear forwards;
}

.left-ui {
  position: relative;
  z-index: 10;
  width: min(680px, calc(100vw - 48px));
  padding-top: clamp(128px, 11vw, 164px);
  padding-left: clamp(24px, 5.4vw, 86px);
  padding-bottom: 90px;
}

.hero-card {
  position: relative;
  width: min(640px, 100%);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(210,170,255,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 16%, rgba(210,170,255,.10), transparent 44%),
    linear-gradient(90deg, rgba(6,5,10,.78), rgba(6,5,10,.54));
  backdrop-filter: blur(4px);
  box-shadow:
    0 28px 100px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.kicker,
.section-kicker {
  margin-bottom: 16px;
  color: var(--violet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(210,170,255,.36);
}

.glitch-title {
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .01em;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(62px, 8vw, 106px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.06em;
  filter: none;
}

.glitch-title::before,
.glitch-title::after {
  content: none;
}

.neon-sign .letter {
  position: relative;
  display: inline-block;
  color: #f1e6ff;
  text-shadow: 0 0 3px rgba(255,255,255,.84), 0 0 10px rgba(222,198,255,.86), 0 0 26px rgba(187,146,255,.74), 0 0 56px rgba(156,112,255,.46);
}

.neon-sign .letter.lit {
  opacity: 1;
}

.neon-sign .letter.dim {
  color: rgba(196,188,210,.65);
  text-shadow: 0 0 1px rgba(255,255,255,.10);
  opacity: .58;
}

.neon-sign .letter.crack::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(50,40,68,.85), rgba(0,0,0,0));
  transform: rotate(12deg);
  opacity: .9;
}

.neon-sign .flicker-slow { animation: signFlickerSlow 6.8s infinite; }
.neon-sign .flicker-fast { animation: signFlickerFast 4.2s infinite; }

.glitch-title::before {
  color: rgba(236,211,255,.72);
  clip-path: inset(0 0 52% 0);
  animation: glitchBefore 4.8s steps(1) infinite;
}

.glitch-title::after {
  color: rgba(164,130,255,.62);
  clip-path: inset(52% 0 0 0);
  animation: glitchAfter 5.6s steps(1) infinite;
}

.hero-tagline {
  margin: 0 0 22px;
  color: rgba(226,203,255,.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(23px, 2.05vw, 36px);
  line-height: 1.22;
  letter-spacing: .055em;
  text-shadow:
    0 0 10px rgba(220,196,255,.36),
    0 0 24px rgba(164,130,255,.16);
}

.hero-description {
  max-width: 520px;
  margin: 0;
  color: rgba(246,240,255,.94);
  font-size: clamp(16px, 1.08vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  text-shadow: 0 0 18px rgba(255,255,255,.08);
}

.hero-actions,
.section-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.btn {
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210,170,255,.88);
  box-shadow:
    0 0 0 1px rgba(210,170,255,.28),
    0 0 30px rgba(210,170,255,.32),
    0 0 72px rgba(164,130,255,.14);
}

.btn-primary {
  min-width: 210px;
  background: linear-gradient(135deg, #d8a7ff, #b984e8);
  color: #120918;
  font-weight: 800;
  border-color: rgba(255,255,255,.16);
}

.btn-secondary,
.btn-outline {
  min-width: 210px;
  background: rgba(11,8,16,.62);
  color: var(--violet);
  border-color: rgba(210,170,255,.42);
  box-shadow: inset 0 0 20px rgba(210,170,255,.045);
}

.btn::after,
.mini-card::after,
.detail-card::after,
.floating-chat::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 180%;
  top: -40%;
  left: -140px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: rotate(14deg);
  opacity: 0;
  pointer-events: none;
}

.btn:hover::after,
.mini-card:hover::after,
.detail-card:hover::after,
.floating-chat:hover::after {
  opacity: 1;
  animation: sweep 1s ease;
}

.small-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted2);
  font-size: 14px;
}

.note-icon {
  color: var(--violet);
  text-shadow: 0 0 14px rgba(210,170,255,.38);
}

.feature-strip {
  width: min(640px, 100%);
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mini-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 22px;
  display: grid;
  align-content: space-between;
  border: 1px solid rgba(210,170,255,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 12%, rgba(210,170,255,.08), transparent 34%),
    rgba(7,5,10,.58);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 70px rgba(0,0,0,.32);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mini-card:hover,
.mini-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(210,170,255,.80);
  box-shadow:
    0 0 0 1px rgba(210,170,255,.24),
    0 0 34px rgba(210,170,255,.22),
    0 22px 80px rgba(0,0,0,.50);
}

.mini-icon {
  color: var(--violet);
  font-size: 24px;
  text-shadow: 0 0 16px rgba(210,170,255,.46);
}

.mini-icon.mini-heart {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 20px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 0 12px rgba(255,255,255,.28);
}

.mini-icon.mini-heart::after {
  height: 15px;
  width: 1.5px;
}

.mini-card strong {
  display: block;
  margin-top: 14px;
}

.mini-card small {
  color: var(--violet);
  margin-top: 10px;
}

.section {
  position: relative;
  padding: 96px 24px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
}

.section h2 {
  margin: 0 0 22px;
  font-size: clamp(42px, 5.8vw, 88px);
  line-height: .95;
  letter-spacing: -.055em;
  text-shadow: 0 0 34px rgba(210,170,255,.16);
}

.section h3 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.035em;
}

.section p {
  max-width: 780px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.detail-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 34px;
  border: 1px solid rgba(210,170,255,.20);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(210,170,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(17,13,25,.72), rgba(7,6,10,.86));
  box-shadow: 0 28px 90px rgba(0,0,0,.54);
  scroll-margin-top: 120px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.detail-card:hover {
  transform: translateY(-2px);
  border-color: rgba(210,170,255,.72);
  box-shadow:
    0 0 0 1px rgba(210,170,255,.2),
    0 0 38px rgba(210,170,255,.16),
    0 28px 90px rgba(0,0,0,.62);
}

.chat-window {
  position: fixed;
  left: 36px;
  bottom: 34px;
  width: min(500px, calc(100vw - 34px));
  height: min(620px, calc(100vh - 120px));
  min-width: 340px;
  min-height: 420px;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(8,7,12,.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 110px rgba(0,0,0,.78), 0 0 42px rgba(210,170,255,.13);
  overflow: hidden;
}

.chat-window.hidden {
  display: none;
}

.chat-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  z-index: 4;
  opacity: 0;
  cursor: nwse-resize;
}

.chat-resize-handle:hover {
  opacity: .28;
  background:
    linear-gradient(135deg, transparent 0 48%, var(--violet) 49% 52%, transparent 53%),
    linear-gradient(135deg, transparent 0 66%, var(--violet) 67% 70%, transparent 71%);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(10,8,14,.94);
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: move;
  user-select: none;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--violet);
  text-shadow: 0 0 12px rgba(210,170,255,.46);
}

.chat-title strong {
  display: block;
  color: var(--violet);
}

.chat-title small {
  display: block;
  color: var(--muted2);
  font-size: 12px;
  margin-top: 2px;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.chat-controls {
  display: flex;
  gap: 6px;
}

.chat-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
}

.chat-controls button:hover {
  color: var(--text);
  border-color: var(--line);
}

.chat-body {
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(circle at 70% 8%, rgba(210,170,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}

.message {
  display: flex;
}

.message span {
  max-width: 84%;
  padding: 13px 15px;
  border-radius: 16px;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 15px;
}

.message.bot span {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.06);
  border-bottom-left-radius: 5px;
  color: rgba(250,246,252,.92);
}

.message.user {
  justify-content: flex-end;
}

.message.user span {
  background: linear-gradient(135deg, rgba(205,168,255,.78), rgba(134,89,160,.90));
  color: #fff;
  border-bottom-right-radius: 5px;
}

.message.typing span {
  color: rgba(244,238,251,.72);
}

.chat-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(7,5,10,.96);
}

.chat-form textarea {
  width: 100%;
  max-height: 170px;
  resize: none;
  outline: none;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 13px 14px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  line-height: 1.35;
}

.chat-form textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(210,170,255,.08);
}

.chat-form button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #d8a7ff, #9c6bc2);
  color: #160d18;
  cursor: pointer;
  font-weight: 800;
}

.emoji-toggle {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.025) !important;
  color: rgba(255,255,255,.85) !important;
}

.emoji-toggle:hover {
  border-color: rgba(210,170,255,.72) !important;
  color: var(--violet) !important;
  box-shadow: 0 0 20px rgba(210,170,255,.18);
}

.emoji-panel {
  position: absolute;
  right: 72px;
  bottom: 72px;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(210,170,255,.38);
  border-radius: 14px;
  background: rgba(8,7,12,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.62);
  z-index: 10;
}

.emoji-panel.hidden {
  display: none;
}

.emoji-panel button {
  width: auto;
  min-width: 42px;
  height: 36px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
}

.emoji-panel button:hover {
  border-color: rgba(210,170,255,.66);
  color: var(--violet);
}

.floating-chat {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  width: 58px;
  height: 58px;
  display: none;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 18px;
  background: rgba(6,5,9,.64);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 18px 70px rgba(0,0,0,.65), 0 0 26px rgba(255,255,255,.08);
  cursor: pointer;
  position: fixed;
  overflow: hidden;
  animation: heartPulse 4.2s ease-in-out infinite;
}

.floating-chat:hover {
  border-color: rgba(255,255,255,.82);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 0 28px rgba(255,255,255,.22),
    0 18px 70px rgba(0,0,0,.65);
}

.broken-heart {
  display: inline-grid;
  place-items: center;
  position: relative;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,.4);
}

.broken-heart::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 24px;
  background: #fff;
  transform: rotate(23deg);
  opacity: .85;
  box-shadow: 0 0 8px rgba(255,255,255,.4);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(210,170,255,.42) rgba(7,5,10,.18);
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: rgba(7,5,10,.22);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(210,170,255,.58), rgba(110,70,124,.58));
  border-radius: 999px;
  border: 2px solid rgba(7,5,10,.54);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(225,192,255,.82), rgba(134,82,152,.82));
}

.chat-page {
  min-height: 100vh;
}

.full-chat-shell {
  min-height: 100vh;
  padding: 40px 18px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(3,3,7,.82), rgba(3,3,7,.9)),
    url("/assets/soiqweqq_clean_layer_hero.webp") center/cover no-repeat;
}

.full-chat-card {
  width: min(940px, 100%);
  height: min(820px, calc(100vh - 80px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17,13,25,.78), rgba(7,6,10,.82));
  box-shadow: var(--shadow);
}

.full-chat-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding: 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.full-chat-head h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 64px);
  color: var(--violet);
}

.full-chat-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.back-link {
  color: var(--muted);
}

.back-link:hover {
  color: var(--violet);
}

.chat-body.full {
  min-height: 0;
}

.chat-form.full textarea {
  min-height: 62px;
}



@keyframes signFlickerSlow {
  0%, 18%, 22%, 62%, 100% { opacity: 1; }
  19% { opacity: .38; }
  20% { opacity: .92; }
  63% { opacity: .68; }
  64% { opacity: 1; }
}

@keyframes signFlickerFast {
  0%, 70%, 100% { opacity: 1; }
  71% { opacity: .22; }
  72% { opacity: .88; }
  73% { opacity: .46; }
  74% { opacity: 1; }
}

@keyframes garlandTopFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes garlandSideFloatLeft {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(2px) rotate(.7deg); }
}

@keyframes garlandSideFloatRight {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(-2px) rotate(-.7deg); }
}

@keyframes smokeRise3 {
  0% { transform: translate(0,0) scale(.48); opacity: 0; }
  12% { opacity: .52; }
  38% { transform: translate(18px,-70px) scale(.98); opacity: .34; }
  72% { transform: translate(-12px,-165px) scale(1.56); opacity: .14; }
  100% { transform: translate(26px,-250px) scale(2.1); opacity: 0; }
}

@keyframes neonBuzz {
  0%, 100% { opacity: 1; }
  48% { opacity: .98; }
  49% { opacity: .88; }
  50% { opacity: 1; }
  78% { opacity: .97; }
  79% { opacity: .90; }
  80% { opacity: 1; }
}

@keyframes garlandSway {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(3.6deg); }
}

@keyframes charmBlink {
  0%,100% { opacity: .88; text-shadow: 0 0 8px rgba(255,255,255,.20), 0 0 20px rgba(210,170,255,.28); }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(255,255,255,.38), 0 0 26px rgba(210,170,255,.54); }
}

@keyframes smokeSway {
  0%,100% { transform: rotate(-3deg) translateX(0); }
  50% { transform: rotate(4deg) translateX(5px); }
}

@keyframes signalDrift {
  0%,100% { transform: translateY(0); opacity: .035; }
  48% { transform: translateY(4px); opacity: .045; }
  52% { transform: translateY(-3px); opacity: .038; }
}

@keyframes brandGlow {
  0%,100% { text-shadow: 0 0 18px rgba(210,170,255,.50); }
  50% { text-shadow: 0 0 24px rgba(225,192,255,.72), 0 0 44px rgba(170,120,255,.32); }
}

@keyframes titlePulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.13); }
}

@keyframes glitchBefore {
  0%,90%,100% { transform: translate(-1px,0); opacity: .28; }
  91% { transform: translate(-4px,1px); opacity: .55; }
  93% { transform: translate(2px,-1px); opacity: .32; }
  95% { transform: translate(-2px,0); opacity: .48; }
}

@keyframes glitchAfter {
  0%,92%,100% { transform: translate(1px,0); opacity: .20; }
  93% { transform: translate(5px,-1px); opacity: .40; }
  95% { transform: translate(-2px,1px); opacity: .22; }
  97% { transform: translate(3px,0); opacity: .34; }
}

@keyframes crtShift {
  from { transform: translateY(0); }
  50% { transform: translateY(1px); }
  to { transform: translateY(0); }
}

@keyframes crtFlicker {
  0%,100% { opacity: .22; }
  10% { opacity: .18; }
  18% { opacity: .25; }
  37% { opacity: .20; }
  62% { opacity: .27; }
  83% { opacity: .19; }
}

@keyframes monitorPulse {
  0%,100% { opacity: .12; }
  20% { opacity: .20; }
  23% { opacity: .09; }
  35% { opacity: .18; }
  60% { opacity: .13; }
  75% { opacity: .23; }
}

@keyframes smokeRise {
  0% { transform: translate(0,0) scale(.55); opacity: 0; }
  10% { opacity: .40; }
  45% { transform: translate(16px,-60px) scale(.95); opacity: .25; }
  70% { transform: translate(-10px,-120px) scale(1.2); opacity: .14; }
  100% { transform: translate(18px,-190px) scale(1.45); opacity: 0; }
}

@keyframes smokeRise2 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  12% { opacity: .34; }
  40% { transform: translate(-12px,-54px) scale(.88); opacity: .24; }
  68% { transform: translate(10px,-118px) scale(1.18); opacity: .12; }
  100% { transform: translate(-20px,-185px) scale(1.42); opacity: 0; }
}

@keyframes ashFall {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .85; }
  100% { transform: translate3d(var(--ash-x, 8px), var(--ash-y, 220px), 0) scale(.4); opacity: 0; }
}

@keyframes sweep {
  from { left: -140px; }
  to { left: calc(100% + 40px); }
}

@keyframes heartPulse {
  0%,100% { box-shadow: 0 18px 70px rgba(0,0,0,.65), 0 0 0 rgba(210,170,255,0); }
  50% { box-shadow: 0 18px 70px rgba(0,0,0,.65), 0 0 24px rgba(210,170,255,.22); }
}

@media (max-width: 1080px) {
  .site-header {
    left: 12px;
    right: 12px;
    top: 10px;
    height: auto;
    padding: 14px;
  }

  .top-nav {
    gap: 26px;
  }

  .hero {
    min-height: 960px;
  }

  .left-ui {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 120px;
  }

  .hero-card {
    width: min(640px, 100%);
  }

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

  .monitor-flicker {
    left: 80%;
    top: 30%;
    width: 16%;
    height: 22%;
  }

  .smoke-stack {
    left: 59%;
    top: 12%;
    width: 16%;
    height: 26%;
  }
}

@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand-text {
    font-size: 19px;
  }

  .top-nav {
    justify-self: start;
    justify-content: flex-start;
    overflow-x: auto;
    font-size: 16px;
  }

  .hero {
    min-height: 980px;
  }

  .hero-bg {
    object-position: 56% center;
  }

  .left-ui {
    padding-top: 126px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-card {
    padding: 24px;
  }

  .glitch-title {
    font-size: 56px;
  }

  .hero-tagline {
    font-size: 21px;
  }

  .hero-description {
    font-size: 15px;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .chat-window {
    left: 10px !important;
    right: 10px;
    bottom: 10px;
    top: auto !important;
    width: calc(100vw - 20px) !important;
    height: min(78vh, 640px) !important;
    min-width: 0;
  }

  .message span {
    max-width: 92%;
  }

  .floating-chat {
    right: 16px;
    bottom: 16px;
  }
}


.header-garland { display:none !important; }

@media (max-width: 820px) {
  .garland-top { height: 180px; }
  .garland-left, .garland-right { width: 76px; }
  .glitch-title { font-size: clamp(54px, 12vw, 78px); }
}


/* v11: CSS-only garland. No rectangular PNG blocks. Civilization limps onward. */
.garland-overlay,
.header-garland,
.garland-string {
  display: none !important;
}

.page-garlands.css-garlands {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.garland-topline {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: clamp(160px, 22vh, 260px);
  opacity: .86;
  filter: drop-shadow(0 0 10px rgba(222,210,255,.34)) drop-shadow(0 0 24px rgba(170,130,255,.20));
}

.chain-arc {
  position: absolute;
  top: -95px;
  height: 155px;
  border-bottom: 2px dotted rgba(226,220,255,.72);
  border-radius: 0 0 50% 50%;
  opacity: .74;
  animation: chainGlow 5.8s ease-in-out infinite, chainSwing 10s ease-in-out infinite;
  pointer-events: auto;
  transform-origin: 50% 0;
}

.chain-arc:hover,
.drop:hover,
.side-string:hover {
  animation-duration: 1.8s;
  filter: brightness(1.35) drop-shadow(0 0 14px rgba(238,229,255,.62));
}

.arc-1 { left: -3vw; width: 28vw; animation-delay: -.2s; }
.arc-2 { left: 18vw; width: 27vw; top: -82px; height: 150px; animation-delay: -1.5s; }
.arc-3 { left: 38vw; width: 30vw; top: -92px; height: 170px; animation-delay: -2.4s; }
.arc-4 { left: 61vw; width: 27vw; top: -88px; height: 150px; animation-delay: -3.2s; }
.arc-5 { left: 81vw; width: 24vw; top: -96px; height: 165px; animation-delay: -4.4s; }

.drop {
  --x: 50vw;
  --h: 120px;
  position: fixed;
  left: var(--x);
  top: 12px;
  width: 38px;
  height: var(--h);
  transform: translateX(-50%);
  pointer-events: auto;
  animation: dropSway 7.5s ease-in-out infinite;
}

.drop::before,
.side-string::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 22px;
  width: 7px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, rgba(238,232,255,.95) 0 1.6px, transparent 2.4px);
  background-size: 7px 10px;
  background-repeat: repeat-y;
  filter: drop-shadow(0 0 6px rgba(210,190,255,.42));
}

.drop i {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-style: normal;
  color: rgba(248,244,255,.98);
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,255,255,.62), 0 0 24px rgba(174,148,255,.62);
  animation: charmTwinkle 4.2s ease-in-out infinite;
}

.d1 { --x: 3vw; --h: 132px; animation-delay: -.8s; }
.d2 { --x: 15vw; --h: 86px; animation-delay: -1.2s; }
.d3 { --x: 29vw; --h: 148px; animation-delay: -2.1s; }
.d4 { --x: 42vw; --h: 94px; animation-delay: -3.2s; }
.d5 { --x: 57vw; --h: 122px; animation-delay: -2.6s; }
.d6 { --x: 70vw; --h: 96px; animation-delay: -4.1s; }
.d7 { --x: 84vw; --h: 142px; animation-delay: -1.9s; }
.d8 { --x: 96vw; --h: 118px; animation-delay: -3.7s; }

.side-garland {
  position: fixed;
  top: 76px;
  bottom: 0;
  width: clamp(60px, 6vw, 110px);
  pointer-events: none;
  opacity: .88;
  filter: drop-shadow(0 0 12px rgba(220,210,255,.34));
}

.side-left { left: 0; }
.side-right { right: 0; }

.side-string {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: auto;
  animation: sideStringSway 8.8s ease-in-out infinite;
}

.side-left .s1 { left: 8px; animation-delay: -1.4s; }
.side-left .s2 { left: 42px; top: 120px; animation-delay: -3.5s; }
.side-right .s3 { right: 8px; animation-delay: -2.2s; }
.side-right .s4 { right: 42px; top: 96px; animation-delay: -4.2s; }

.side-string i,
.side-string b,
.side-string em {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(248,244,255,.96);
  font-style: normal;
  font-weight: 400;
  text-shadow: 0 0 9px rgba(255,255,255,.52), 0 0 22px rgba(180,150,255,.58);
  animation: charmTwinkle 4.4s ease-in-out infinite;
}

.side-string i { top: 12%; font-size: 28px; }
.side-string b { top: 43%; font-size: 16px; }
.side-string em { top: 72%; font-size: 28px; }

/* v11: sharper sign, no hair-crack on q */
.glitch-title {
  letter-spacing: -.045em;
}

.neon-sign .letter {
  color: #eee5ff;
  text-shadow:
    0 0 1px rgba(255,255,255,.92),
    0 0 7px rgba(222,198,255,.78),
    0 0 18px rgba(187,146,255,.54),
    0 0 40px rgba(156,112,255,.28);
}

.neon-sign .letter.dim,
.neon-sign .letter.broken {
  color: rgba(155,148,172,.72);
  opacity: .72;
  text-shadow:
    0 0 1px rgba(255,255,255,.18),
    0 0 7px rgba(180,150,255,.16);
}

.neon-sign .letter.crack::after,
.neon-sign .letter.broken::after {
  content: none !important;
}

@keyframes chainGlow {
  0%, 100% { opacity: .56; border-bottom-color: rgba(218,208,255,.54); }
  50% { opacity: .92; border-bottom-color: rgba(255,246,255,.88); }
}

@keyframes chainSwing {
  0%, 100% { transform: translateY(0) rotate(-.2deg); }
  50% { transform: translateY(3px) rotate(.25deg); }
}

@keyframes dropSway {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2.8deg); }
}

@keyframes sideStringSway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.7deg); }
}

@keyframes charmTwinkle {
  0%, 100% { opacity: .72; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.28); }
}

@media (max-width: 820px) {
  .garland-topline { height: 150px; opacity: .72; }
  .chain-arc { top: -105px; }
  .drop { transform: translateX(-50%) scale(.82); transform-origin: top center; }
  .side-garland { width: 56px; opacity: .55; }
  .side-left .s2, .side-right .s4 { display: none; }
}


/* v12: mobile layout cleanup. Because phones are tiny rectangles of suffering. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    min-height: 58px;
    height: auto;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background: rgba(5, 4, 8, .88);
    backdrop-filter: blur(14px);
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .brand-text {
    font-size: clamp(15px, 4.4vw, 20px);
    letter-spacing: .12em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-tag {
    display: none;
  }

  .top-nav {
    justify-self: end;
    justify-content: flex-end;
    gap: 14px;
    font-size: clamp(12px, 3.5vw, 14px);
    font-weight: 700;
    overflow: visible;
    white-space: nowrap;
  }

  .top-nav a {
    padding: 14px 0;
  }

  .top-nav a:first-child::after {
    bottom: 3px;
    width: 4px;
    height: 4px;
  }

  .page-garlands.css-garlands {
    opacity: .36;
    z-index: 5;
  }

  .garland-topline {
    height: 94px;
    opacity: .55;
    transform: translateY(-20px);
  }

  .chain-arc {
    top: -116px;
    height: 142px;
    border-bottom-width: 1px;
  }

  .drop {
    top: -4px;
    transform: translateX(-50%) scale(.54);
    transform-origin: top center;
    opacity: .72;
  }

  .d1,
  .d3,
  .d5,
  .d7 {
    display: none;
  }

  .side-garland {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-bottom: 42px;
  }

  .hero-bg {
    object-position: 61% top;
    opacity: .82;
    filter: saturate(1.05) contrast(1.04) brightness(.88);
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(4,3,8,.34) 0%, rgba(4,3,8,.18) 42%, rgba(4,3,8,.10) 72%, rgba(4,3,8,.20) 100%),
      linear-gradient(180deg, rgba(4,3,8,.28) 0%, rgba(4,3,8,.10) 44%, rgba(4,3,8,.78) 100%);
  }

  .left-ui {
    width: 100%;
    padding: 88px 14px 28px;
  }

  .hero-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 22% 16%, rgba(210,170,255,.10), transparent 44%),
      linear-gradient(180deg, rgba(6,5,10,.76), rgba(6,5,10,.62));
    backdrop-filter: blur(6px);
  }

  .kicker {
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: .18em;
  }

  .glitch-title {
    font-size: clamp(44px, 14vw, 58px) !important;
    line-height: .95;
    letter-spacing: -.055em;
    margin-bottom: 14px;
  }

  .hero-tagline {
    margin-bottom: 16px;
    font-size: clamp(20px, 6.5vw, 27px);
    line-height: 1.22;
    letter-spacing: .045em;
  }

  .hero-description {
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.55;
    max-width: 100%;
  }

  .hero-actions,
  .section-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 16px;
  }

  .small-note {
    margin-top: 16px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
  }

  .feature-strip {
    width: 100%;
    margin-top: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mini-card {
    min-height: 106px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(7,5,10,.64);
  }

  .mini-card strong {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.25;
  }

  .mini-card small {
    margin-top: 6px;
    font-size: 12px;
  }

  .mini-icon.mini-heart {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .monitor-flicker {
    left: 78%;
    top: 23%;
    width: 18%;
    height: 19%;
  }

  .smoke-stack {
    left: 70%;
    top: 19%;
    width: 20%;
    height: 26%;
    opacity: .78;
  }

  .section {
    padding: 66px 16px;
  }

  .section h2 {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1;
  }

  .section h3 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .section p {
    font-size: 16px;
    line-height: 1.65;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-card {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .floating-chat {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .broken-heart {
    font-size: 31px;
  }

  .chat-window {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: calc(100vw - 20px) !important;
    height: min(78svh, 640px) !important;
    min-width: 0;
    min-height: 380px;
    border-radius: 18px;
  }

  .chat-header {
    padding: 12px 14px;
  }

  .chat-form {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 10px;
  }

  .chat-form button,
  .emoji-toggle {
    width: 44px;
    height: 44px;
  }

  .emoji-panel {
    right: 56px;
    bottom: 62px;
    grid-template-columns: repeat(5, auto);
  }
}

@media (max-width: 390px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .brand-text {
    font-size: 16px;
  }

  .top-nav {
    justify-self: start;
    gap: 18px;
  }

  .left-ui {
    padding-top: 118px;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }
}


/* v13: proper hero garland, status logic styling, smoke/status polish */

/* old garlands from previous attempts: into the swamp */
.page-garlands,
.page-garlands.css-garlands,
.garland-topline,
.side-garland,
.chain-arc,
.drop,
.side-string,
.garland-overlay,
.header-garland,
.garland-string {
  display: none !important;
}

.site-header {
  z-index: 70 !important;
}

.hero-garlands {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: min(76vh, 720px);
  z-index: 110;
  pointer-events: auto;
  mix-blend-mode: screen;
  overflow: visible;
}

.garland-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: .94;
  filter: drop-shadow(0 0 9px rgba(232,220,255,.40)) drop-shadow(0 0 22px rgba(176,145,255,.24));
}

.garland-chain path {
  fill: none;
  stroke: rgba(226,218,255,.78);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-dasharray: 2 13;
  animation: beadTwinkle 4.8s ease-in-out infinite;
}

.garland-chain .chain-soft {
  opacity: .45;
  stroke-width: 1.6;
  stroke-dasharray: 2 16;
  animation-delay: -1.8s;
}

.pendant {
  transform-box: fill-box;
  transform-origin: top center;
  animation: pendantSway 7s ease-in-out infinite;
}

.hero-garlands:hover .pendant {
  animation: pendantTouch 1.15s ease-in-out infinite;
}

.pendant line {
  stroke: rgba(226,218,255,.66);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}

.pendant text {
  fill: rgba(248,244,255,.96);
  font-size: 30px;
  text-anchor: middle;
  dominant-baseline: middle;
  text-shadow: 0 0 8px rgba(255,255,255,.34), 0 0 18px rgba(210,170,255,.52);
  animation: charmPulse 3.4s ease-in-out infinite;
}

.pendant circle {
  fill: rgba(248,244,255,.88);
  filter: drop-shadow(0 0 8px rgba(220,200,255,.58));
}

.p1 { animation-delay: -.2s; }
.p2 { animation-delay: -1.2s; }
.p3 { animation-delay: -2.2s; }
.p4 { animation-delay: -3.0s; }
.p5 { animation-delay: -1.8s; }
.p6 { animation-delay: -2.8s; }
.p7 { animation-delay: -.8s; }
.p8 { animation-delay: -2.4s; }
.p9 { animation-delay: -1.6s; }

/* Smoke should start near the cigarette tip, not somewhere in the hand like a haunted joint. */
.smoke-stack {
  left: 60.5% !important;
  top: -1.4% !important;
  width: 11% !important;
  height: 29% !important;
  z-index: 22 !important;
  animation: smokeSway 5.2s ease-in-out infinite !important;
}

.smoke {
  left: 5% !important;
  bottom: 0 !important;
  width: clamp(34px, 2.7vw, 56px) !important;
  height: clamp(34px, 2.7vw, 56px) !important;
  filter: blur(11px) !important;
  background: radial-gradient(circle, rgba(245,242,255,.58) 0%, rgba(216,202,255,.33) 34%, rgba(255,255,255,.08) 52%, rgba(255,255,255,0) 78%) !important;
}

.smoke-1 { animation: smokeRiseClean 5.4s linear infinite !important; }
.smoke-2 { animation: smokeRiseClean2 6.1s linear infinite .7s !important; }
.smoke-3 { animation: smokeRiseClean3 6.9s linear infinite 1.4s !important; }
.smoke-4 { animation: smokeRiseClean2 6.5s linear infinite 2.2s !important; }
.smoke-5 { animation: smokeRiseClean 6.0s linear infinite 3.0s !important; }
.smoke-6 { animation: smokeRiseClean3 7.0s linear infinite 3.7s !important; }
.smoke-7 { animation: smokeRiseClean2 6.4s linear infinite 4.5s !important; }
.smoke-8 { animation: smokeRiseClean 5.8s linear infinite 5.2s !important; }

/* glitch without earthquake */
.hero.signal-hit .hero-bg,
.hero.signal-hit .hero-card {
  transform: none !important;
}

.hero.signal-hit .signal-interference {
  opacity: .28 !important;
  filter: grayscale(1) contrast(1.25) blur(.2px);
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: rgba(160,160,170,.82);
  box-shadow: 0 0 10px rgba(160,160,170,.18);
}

.status-dot.status-online {
  background: #78ff9f;
  box-shadow: 0 0 12px #78ff9f;
}

.status-dot.status-offline {
  background: rgba(148,145,160,.74);
  box-shadow: 0 0 8px rgba(148,145,160,.18);
}

.status-dot.status-afk {
  background: #ffd36e;
  box-shadow: 0 0 12px rgba(255,211,110,.7);
}

.status-dot.status-dnd {
  background: #ff5d79;
  box-shadow: 0 0 12px rgba(255,93,121,.72);
}

.status-text {
  color: var(--muted2);
}

@keyframes beadTwinkle {
  0%,100% { opacity: .72; stroke-dashoffset: 0; }
  50% { opacity: 1; stroke-dashoffset: -8; }
}

@keyframes pendantSway {
  0%,100% { transform: rotate(-2.2deg) translateY(0); }
  50% { transform: rotate(2.4deg) translateY(3px); }
}

@keyframes pendantTouch {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(5px); }
}

@keyframes charmPulse {
  0%,100% { opacity: .78; }
  50% { opacity: 1; }
}

@keyframes smokeRiseClean {
  0% { transform: translate(0, 0) scale(.42); opacity: 0; }
  10% { opacity: .58; }
  36% { transform: translate(10px, -58px) scale(.9); opacity: .34; }
  72% { transform: translate(-16px, -145px) scale(1.55); opacity: .14; }
  100% { transform: translate(24px, -240px) scale(2.28); opacity: 0; }
}

@keyframes smokeRiseClean2 {
  0% { transform: translate(0, 0) scale(.44); opacity: 0; }
  12% { opacity: .48; }
  38% { transform: translate(-18px, -66px) scale(.96); opacity: .25; }
  72% { transform: translate(18px, -154px) scale(1.52); opacity: .10; }
  100% { transform: translate(-28px, -235px) scale(2.05); opacity: 0; }
}

@keyframes smokeRiseClean3 {
  0% { transform: translate(0, 0) scale(.40); opacity: 0; }
  12% { opacity: .52; }
  38% { transform: translate(20px, -70px) scale(1); opacity: .30; }
  72% { transform: translate(-12px, -160px) scale(1.62); opacity: .13; }
  100% { transform: translate(30px, -250px) scale(2.14); opacity: 0; }
}

@media (max-width: 1080px) {
  .hero-garlands {
    height: 560px;
  }

  .smoke-stack {
    left: 62.5% !important;
    top: 0% !important;
    width: 14% !important;
    height: 26% !important;
  }
}

@media (max-width: 680px) {
  .hero-garlands {
    height: 280px;
    opacity: .66;
  }

  .garland-svg {
    width: 160%;
    transform: translateX(-18%);
  }

  .pendant line,
  .garland-chain .chain-soft,
  .p1,
  .p8,
  .p9 {
    opacity: .45;
  }

  .smoke-stack {
    left: 79% !important;
    top: 21% !important;
    width: 18% !important;
    height: 22% !important;
  }
}


/* v14: better garland physics, delayed online, stronger screen-noise, rain */
.hero {
  isolation: auto !important;
}

.site-header {
  z-index: 130 !important;
}

.hero-garlands {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: min(88vh, 760px) !important;
  z-index: 260 !important;
  pointer-events: none !important;
  overflow: visible !important;
  mix-blend-mode: screen !important;
  opacity: 1 !important;
}

.garland-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: .98 !important;
  filter:
    drop-shadow(0 0 7px rgba(240,235,255,.42))
    drop-shadow(0 0 22px rgba(190,150,255,.34))
    drop-shadow(0 0 42px rgba(255,140,210,.10)) !important;
}

.garland-chain path,
.garland-chain .chain-soft,
.garland-chain .chain,
.chain {
  fill: none !important;
  stroke-linecap: round !important;
  animation: none !important;
}

.chain-main {
  stroke: rgba(238,232,255,.90) !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: 2 11 !important;
}

.chain-low {
  stroke: rgba(206,188,255,.66) !important;
  stroke-width: 1.7 !important;
  stroke-dasharray: 2 15 !important;
}

.chain-side {
  stroke: rgba(238,232,255,.78) !important;
  stroke-width: 1.7 !important;
  stroke-dasharray: 2 12 !important;
}

.chain-side.right {
  opacity: .84 !important;
}

.pendant {
  pointer-events: visiblePainted !important;
  transform-box: fill-box !important;
  transform-origin: top center !important;
  animation: none !important;
  cursor: default;
}

/* больше никаких “все пляшут, потому что курсор чихнул рядом” */
.hero-garlands:hover .pendant {
  animation: none !important;
}

.pendant.touched.swing-a { animation: pendantWobbleA 1.75s cubic-bezier(.2,.9,.25,1) 1 !important; }
.pendant.touched.swing-b { animation: pendantWobbleB 1.95s cubic-bezier(.2,.9,.25,1) 1 !important; }
.pendant.touched.swing-c { animation: pendantWobbleC 1.55s cubic-bezier(.2,.9,.25,1) 1 !important; }
.pendant.touched.swing-d { animation: pendantWobbleD 2.15s cubic-bezier(.2,.9,.25,1) 1 !important; }

.pendant line {
  stroke: rgba(234,230,255,.80) !important;
  stroke-width: 1.15 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 2 6 !important;
}

.pendant text,
.charm {
  fill: rgba(251,248,255,.98) !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
  font-size: 30px !important;
  text-shadow:
    0 0 7px rgba(255,255,255,.50),
    0 0 18px rgba(210,180,255,.70),
    0 0 34px rgba(172,140,255,.28) !important;
  animation: charmSlowPulse 5.2s ease-in-out infinite !important;
}

.charm.moon { fill: rgba(228,224,255,.98) !important; }
.charm.star { fill: rgba(255,242,250,.98) !important; font-size: 26px !important; }
.charm.small-star { fill: rgba(215,200,255,.98) !important; font-size: 24px !important; }
.charm.gem { fill: rgba(185,210,255,.95) !important; font-size: 22px !important; }

.bead {
  filter: drop-shadow(0 0 10px rgba(220,200,255,.72)) !important;
}

.bead.blue { fill: rgba(172,205,255,.95) !important; }
.bead.violet { fill: rgba(208,178,255,.96) !important; }
.bead.pink { fill: rgba(255,178,226,.92) !important; }

/* smoke closer to the cigarette tip */
.smoke-stack {
  left: 58.3% !important;
  top: -9.2% !important;
  width: 13% !important;
  height: 32% !important;
  z-index: 42 !important;
  animation: smokeSwaySoft 7.2s ease-in-out infinite !important;
}

.smoke {
  left: 4% !important;
  bottom: 2% !important;
  width: clamp(40px, 3.1vw, 66px) !important;
  height: clamp(40px, 3.1vw, 66px) !important;
  filter: blur(12px) !important;
  opacity: 0;
  background: radial-gradient(circle, rgba(248,246,255,.66) 0%, rgba(218,204,255,.36) 34%, rgba(255,255,255,.09) 52%, rgba(255,255,255,0) 78%) !important;
}

.smoke-1 { animation: smokeRiseV14 5.4s linear infinite !important; }
.smoke-2 { animation: smokeRiseV14b 6.0s linear infinite .55s !important; }
.smoke-3 { animation: smokeRiseV14c 6.7s linear infinite 1.25s !important; }
.smoke-4 { animation: smokeRiseV14b 6.3s linear infinite 2.0s !important; }
.smoke-5 { animation: smokeRiseV14 5.9s linear infinite 2.75s !important; }
.smoke-6 { animation: smokeRiseV14c 6.9s linear infinite 3.4s !important; }
.smoke-7 { animation: smokeRiseV14b 6.4s linear infinite 4.2s !important; }
.smoke-8 { animation: smokeRiseV14 5.7s linear infinite 4.95s !important; }

/* rain and lightning in the back window/room area */
.rain-layer {
  left: 66% !important;
  top: 4% !important;
  width: 34% !important;
  height: 58% !important;
  z-index: 7 !important;
  opacity: .22;
  border-radius: 18px;
  overflow: hidden;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(108deg, transparent 0 18px, rgba(205,205,225,.16) 18px 20px, transparent 20px 37px),
    repeating-linear-gradient(108deg, transparent 0 30px, rgba(176,150,255,.11) 30px 31px, transparent 31px 58px);
  animation: rainSlide 1.2s linear infinite;
  filter: blur(.25px);
}

.lightning-flash {
  left: 64% !important;
  top: 0 !important;
  width: 36% !important;
  height: 62% !important;
  z-index: 8 !important;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 84% 10%, rgba(255,255,255,.85), transparent 18%),
    linear-gradient(120deg, transparent 0 58%, rgba(235,235,255,.38) 60%, transparent 63%);
  animation: lightningPulse 13s steps(1) infinite;
}

/* stronger but not earthquake-like glitch */
.signal-interference {
  opacity: .075 !important;
  mix-blend-mode: screen !important;
  filter: grayscale(1) contrast(1.2) blur(.1px) !important;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.08) 10px 11px, transparent 11px 19px),
    linear-gradient(180deg, transparent 0 30%, rgba(210,210,220,.16) 44%, rgba(255,255,255,.09) 48%, transparent 59%),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 24%, rgba(220,220,230,.035) 54%, transparent 74%) !important;
  animation: signalDriftV14 12s linear infinite !important;
}

.hero.signal-hit .signal-interference {
  opacity: .48 !important;
  filter: grayscale(1) contrast(1.75) blur(.12px) !important;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.28) 5px 7px, transparent 7px 13px),
    linear-gradient(180deg, transparent 0 32%, rgba(235,235,245,.48) 45%, rgba(255,255,255,.26) 50%, transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 28%, rgba(255,255,255,.08) 62%, transparent 100%) !important;
}

.hero.signal-hit .hero-bg,
.hero.signal-hit .hero-card {
  transform: none !important;
  filter: none !important;
}

@keyframes pendantWobbleA {
  0% { transform: rotate(0deg) translateY(0); }
  18% { transform: rotate(10deg) translateY(4px); }
  36% { transform: rotate(-7deg) translateY(1px); }
  56% { transform: rotate(4deg) translateY(2px); }
  76% { transform: rotate(-2deg) translateY(0); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes pendantWobbleB {
  0% { transform: rotate(0deg) translateX(0); }
  16% { transform: rotate(-12deg) translateX(-3px); }
  34% { transform: rotate(8deg) translateX(2px); }
  52% { transform: rotate(-5deg) translateX(-1px); }
  74% { transform: rotate(2deg) translateX(1px); }
  100% { transform: rotate(0deg) translateX(0); }
}

@keyframes pendantWobbleC {
  0% { transform: rotate(0deg) translateY(0); }
  22% { transform: rotate(7deg) translateY(6px); }
  42% { transform: rotate(-10deg) translateY(1px); }
  64% { transform: rotate(5deg) translateY(3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes pendantWobbleD {
  0% { transform: rotate(0deg) translateX(0); }
  14% { transform: rotate(-7deg) translateX(4px); }
  31% { transform: rotate(13deg) translateX(-2px); }
  58% { transform: rotate(-4deg) translateX(1px); }
  81% { transform: rotate(2deg) translateX(0); }
  100% { transform: rotate(0deg) translateX(0); }
}

@keyframes charmSlowPulse {
  0%,100% { opacity: .82; }
  50% { opacity: 1; }
}

@keyframes smokeSwaySoft {
  0%,100% { transform: translateX(0) rotate(-1.8deg); }
  50% { transform: translateX(5px) rotate(2.2deg); }
}

@keyframes smokeRiseV14 {
  0% { transform: translate(0, 0) scale(.38); opacity: 0; }
  10% { opacity: .62; }
  36% { transform: translate(12px, -72px) scale(.95); opacity: .34; }
  70% { transform: translate(-18px, -168px) scale(1.7); opacity: .14; }
  100% { transform: translate(30px, -275px) scale(2.45); opacity: 0; }
}

@keyframes smokeRiseV14b {
  0% { transform: translate(0, 0) scale(.40); opacity: 0; }
  12% { opacity: .52; }
  38% { transform: translate(-20px, -82px) scale(1.02); opacity: .28; }
  70% { transform: translate(20px, -174px) scale(1.64); opacity: .12; }
  100% { transform: translate(-34px, -260px) scale(2.25); opacity: 0; }
}

@keyframes smokeRiseV14c {
  0% { transform: translate(0, 0) scale(.36); opacity: 0; }
  12% { opacity: .56; }
  38% { transform: translate(24px, -86px) scale(1.08); opacity: .30; }
  72% { transform: translate(-14px, -186px) scale(1.78); opacity: .13; }
  100% { transform: translate(36px, -292px) scale(2.52); opacity: 0; }
}

@keyframes rainSlide {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 96px, 0 132px; }
}

@keyframes lightningPulse {
  0%, 72%, 76%, 100% { opacity: 0; }
  73% { opacity: .28; }
  74% { opacity: .06; }
  75% { opacity: .38; }
}

@keyframes signalDriftV14 {
  0%,100% { transform: translateY(0); opacity: .075; }
  42% { transform: translateY(2px); opacity: .09; }
  47% { transform: translateY(-1px); opacity: .11; }
  52% { transform: translateY(1px); opacity: .08; }
}

@media (max-width: 1080px) {
  .hero-garlands {
    height: 520px !important;
    opacity: .88 !important;
  }

  .garland-svg {
    width: 140% !important;
    transform: translateX(-15%) !important;
  }

  .smoke-stack {
    left: 73% !important;
    top: 12% !important;
    width: 17% !important;
    height: 26% !important;
  }

  .rain-layer,
  .lightning-flash {
    left: 61% !important;
    width: 39% !important;
  }
}

@media (max-width: 680px) {
  .hero-garlands {
    height: 245px !important;
    opacity: .42 !important;
  }

  .garland-svg {
    width: 200% !important;
    transform: translateX(-38%) !important;
  }

  .p1, .p5, .p11, .p15 {
    opacity: .38 !important;
  }

  .smoke-stack {
    left: 78% !important;
    top: 17% !important;
    width: 20% !important;
    height: 22% !important;
  }

  .rain-layer,
  .lightning-flash {
    left: 48% !important;
    top: 6% !important;
    width: 52% !important;
    height: 44% !important;
    opacity: .13;
  }
}


/* v15: exact image garland, cleaner rain/glitch, no spreadsheet seizures. */

/* Hide every cursed CSS/SVG garland from older versions. */
.hero-garlands:not(.template-garlands) {
  display: none !important;
}

.hero-garlands.template-garlands {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 118 !important;
  height: min(100vh, 920px) !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}

.garland-img {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: screen;
  opacity: .92;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 16px rgba(206, 186, 255, .28));
  transform-origin: top center;
  will-change: transform, filter, opacity;
}

.garland-top-img {
  left: 0;
  top: -5px;
  width: 100%;
  height: clamp(230px, 31vw, 430px);
  object-fit: cover;
  object-position: top center;
}

.garland-left-img {
  left: 0;
  top: 0;
  width: clamp(70px, 8.6vw, 145px);
  height: min(92vh, 850px);
  object-fit: fill;
  object-position: top left;
  transform-origin: top left;
}

.garland-right-img {
  right: 0;
  top: 0;
  width: clamp(70px, 8.6vw, 145px);
  height: min(92vh, 850px);
  object-fit: fill;
  object-position: top right;
  transform-origin: top right;
}

/* invisible touch zones: they don't block the nav, and they react immediately. */
.garland-hit {
  position: absolute;
  z-index: 119;
  pointer-events: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  opacity: 0;
}

.gh-top { top: 74px; height: 250px; width: 12vw; }
.gh1 { left: 2vw; }
.gh2 { left: 21vw; }
.gh3 { left: 41vw; }
.gh4 { left: 61vw; }
.gh5 { left: 81vw; }
.gh-side { top: 82px; width: 86px; height: min(70vh, 700px); }
.gh-left { left: 0; }
.gh-right { right: 0; }

.garland-img.wobble-a { animation: garlandWobbleA .95s cubic-bezier(.22,.72,.18,1) both !important; }
.garland-img.wobble-b { animation: garlandWobbleB 1.1s cubic-bezier(.22,.72,.18,1) both !important; }
.garland-img.wobble-c { animation: garlandWobbleC 1.25s cubic-bezier(.22,.72,.18,1) both !important; }

@keyframes garlandWobbleA {
  0% { transform: rotate(0deg) translateY(0); }
  18% { transform: rotate(.85deg) translateY(2px); }
  42% { transform: rotate(-.55deg) translateY(-1px); }
  68% { transform: rotate(.25deg) translateY(1px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes garlandWobbleB {
  0% { transform: rotate(0deg) translateX(0); }
  16% { transform: rotate(-.95deg) translateX(-2px); }
  44% { transform: rotate(.58deg) translateX(1px); }
  74% { transform: rotate(-.22deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0); }
}

@keyframes garlandWobbleC {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(.58deg); }
  38% { transform: rotate(-.72deg); }
  62% { transform: rotate(.34deg); }
  82% { transform: rotate(-.16deg); }
  100% { transform: rotate(0deg); }
}

/* Header stays clickable even though the garland is visually over it. Да, CSS-акробатика, потому что людям нравятся красивые верёвочки. */
.site-header {
  z-index: 108 !important;
}
.site-header .brand,
.site-header .top-nav,
.site-header .top-nav a {
  position: relative;
  z-index: 130 !important;
}

.chat-window,
.full-chat-card {
  z-index: 160 !important;
}

/* Clean rain only in the window area: no diagonal scratch-lines over the girl. */
.rain-layer {
  left: 57% !important;
  top: 7% !important;
  width: 40% !important;
  height: 52% !important;
  border-radius: 18px;
  opacity: .22 !important;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(230,230,245,.0) 0%, rgba(230,230,245,.16) 46%, rgba(230,230,245,0) 100%),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(226,226,240,.14) 31px 32px, transparent 33px 62px) !important;
  filter: blur(.35px);
  animation: rainWindowFall .95s linear infinite !important;
}

.lightning-flash {
  left: 57% !important;
  top: 7% !important;
  width: 40% !important;
  height: 52% !important;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.55), transparent 12%),
    linear-gradient(110deg, transparent 0 46%, rgba(242,242,255,.54) 48%, transparent 52%) !important;
  opacity: 0;
  mix-blend-mode: screen;
  animation: lightningWindow 12s steps(1) infinite !important;
}

@keyframes rainWindowFall {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 90px, 0 55px; }
}

@keyframes lightningWindow {
  0%, 82%, 84%, 86%, 100% { opacity: 0; }
  83% { opacity: .36; }
  85% { opacity: .18; }
}

/* Screen glitch: gray analog loss, not Excel spreadsheet from hell. */
.signal-interference {
  inset: 0 !important;
  opacity: .055 !important;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, transparent 0 36%, rgba(230,230,235,.10) 47%, rgba(255,255,255,.16) 50%, transparent 56%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px) !important;
  filter: grayscale(1) blur(.18px);
  animation: signalSoftFloat 16s linear infinite !important;
}

.hero.signal-hit .signal-interference {
  opacity: .32 !important;
  background:
    linear-gradient(180deg, transparent 0 28%, rgba(220,220,226,.24) 41%, rgba(255,255,255,.28) 46%, transparent 57%),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(255,255,255,.16) 13px 15px, transparent 16px 32px) !important;
}

.hero.signal-hit .hero-bg,
.hero.signal-hit .hero-card {
  transform: none !important;
}

@keyframes signalSoftFloat {
  0%, 100% { transform: translateY(0); opacity: .055; }
  50% { transform: translateY(7px); opacity: .075; }
}

/* Move smoke closer to the cigarette tip, not somewhere in the general hand tragedy. */
.smoke-stack {
  left: 60.5% !important;
  top: 6.2% !important;
  width: 13% !important;
  height: 36% !important;
}

.smoke {
  filter: blur(10px) !important;
  opacity: .78;
}

/* Optional custom cursor placeholder: a tiny white paw. Can be replaced with your reference later. */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='white' stroke='%23cda8ff' stroke-width='1' opacity='.92'%3E%3Cellipse cx='14' cy='20' rx='6' ry='5'/%3E%3Cellipse cx='8' cy='13' rx='3' ry='4'/%3E%3Cellipse cx='14' cy='10' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='13' rx='3' ry='4'/%3E%3Cellipse cx='24' cy='18' rx='2.5' ry='3.5'/%3E%3C/g%3E%3C/svg%3E") 8 8, auto;
}
button, a, textarea, input {
  cursor: inherit;
}

@media (max-width: 1080px) {
  .garland-top-img { height: 210px; }
  .garland-left-img, .garland-right-img { width: 72px; height: 680px; opacity: .72; }
  .gh-top { top: 66px; height: 170px; }
  .gh-side { top: 70px; width: 66px; height: 540px; }
  .rain-layer, .lightning-flash { left: 48% !important; width: 50% !important; height: 44% !important; }
}

@media (max-width: 680px) {
  .garland-top-img { height: 120px; opacity: .46; }
  .garland-left-img, .garland-right-img { display: none; }
  .garland-hit { display: none; }
  .rain-layer, .lightning-flash { opacity: .12 !important; }
}