:root {
  color-scheme: dark;
  --obsidian: #06090b;
  --ink: #0a0d10;
  --graphite: #111419;
  --slate: #1a1d23;
  --gold: #d4af37;
  --gold-2: #ffe4a3;
  --bronze: #886608;
  --crimson: #ff202d;
  --red: #880000;
  --ember: #ff5b23;
  --white: #f5f1e8;
  --muted: #a59c90;
  --line: rgba(212, 175, 55, .28);
  --red-line: rgba(255, 32, 45, .34);
  --panel: rgba(8, 13, 16, .78);
  --panel-strong: rgba(12, 15, 18, .94);
  --shadow: 0 28px 90px rgba(0, 0, 0, .62);
  --radius: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at 78% 5%, rgba(255, 32, 45, .22), transparent 26%),
    radial-gradient(circle at 20% 0%, rgba(212, 175, 55, .13), transparent 22%),
    linear-gradient(180deg, #050708 0%, #090c0f 48%, #040506 100%);
  overflow-x: hidden;
}

body::before,
body::after,
.ambient-grid {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background-image:
    linear-gradient(rgba(212, 175, 55, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, .035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
  opacity: .55;
}

body::after {
  background:
    radial-gradient(circle at 72% 25%, rgba(136, 0, 0, .28), transparent 30%),
    linear-gradient(90deg, rgba(255, 32, 45, .16) 0 1px, transparent 1px 100%) 0 0 / 160px 100%;
  opacity: .55;
}

.ambient-grid {
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 32, 45, .18), transparent 64%);
  z-index: 1;
}

button, a, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

#emberCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .82;
}

body[data-effects="off"] #emberCanvas,
body[data-effects="off"] .portal-ring,
body[data-effects="off"] .spear-light { display: none; }

.nav-shell {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 30;
  width: min(1180px, calc(100% - 36px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 230px 1fr 112px;
  gap: 18px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, .24);
  border-radius: 8px;
  background: rgba(4, 6, 8, .7);
  box-shadow: 0 16px 54px rgba(0, 0, 0, .52);
  backdrop-filter: blur(18px);
  transition: border-color .24s var(--ease), background .24s var(--ease), transform .24s var(--ease);
}

.nav-shell.scrolled {
  background: rgba(4, 6, 8, .93);
  border-color: rgba(212, 175, 55, .48);
  transform: translateX(-50%) translateY(-4px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid rgba(212, 175, 55, .68);
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(255, 32, 45, .22);
}

.brand strong,
.brand small { display: block; line-height: 1.15; }
.brand strong { font-size: 13px; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: #b3a893; font-size: 10px; }

.main-nav {
  justify-self: center;
  display: flex;
  gap: 24px;
  color: #d8d0c4;
  font-size: 12px;
}

.main-nav a {
  position: relative;
  padding: 8px 0;
  opacity: .82;
  transition: color .22s var(--ease), opacity .22s var(--ease);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: transform .22s var(--ease);
}

.main-nav a:hover { color: var(--gold); opacity: 1; }
.main-nav a:hover::after { transform: scaleX(1); }

.demo-link {
  cursor: pointer;
  padding: 8px 10px;
  color: #ffe9ae;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  border: 1px solid rgba(255, 32, 45, .62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(136, 0, 0, .22), rgba(0, 0, 0, .26));
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .1), 0 0 22px rgba(255, 32, 45, .16);
}

.demo-link span { display: block; margin-top: 3px; color: #d8c8a2; font-size: 9px; }

main, .site-footer { position: relative; z-index: 2; }

.hero-section {
  position: relative;
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(320px, 1fr) 120px;
  gap: 22px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 126px 0 34px;
  align-items: center;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 92px -20px 8px;
  z-index: -1;
  border-bottom: 1px solid rgba(212, 175, 55, .17);
  background:
    radial-gradient(circle at 67% 45%, rgba(255, 32, 45, .28), transparent 33%),
    linear-gradient(90deg, rgba(0, 0, 0, .54), transparent 50%, rgba(0, 0, 0, .35));
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #ffe7a4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 999px;
  background: rgba(10, 13, 16, .72);
  box-shadow: inset 0 0 16px rgba(212, 175, 55, .08);
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 55, .72);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin: 22px 0 8px;
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(58px, 8vw, 104px);
  line-height: .83;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #e9d3a3;
  text-shadow: 0 0 34px rgba(212, 175, 55, .2);
}

.hero-copy h2 {
  margin-bottom: 10px;
  color: #e6c987;
  font-family: "Noto Serif SC", serif;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
}

.hero-copy p {
  max-width: 620px;
  color: #cfc8bd;
  font-size: 15px;
  line-height: 1.85;
}

.hero-tags, .system-line, .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hero-tags { gap: 12px; color: #cfc7b7; font-size: 12px; }
.hero-tags span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; margin-right: 12px; vertical-align: -1px; background: rgba(212, 175, 55, .38); }
.hero-actions { gap: 14px; margin: 30px 0 12px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  font-weight: 850;
  border: 1px solid var(--line);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: transform .5s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-red {
  min-width: 210px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(255, 32, 45, .48), rgba(98, 0, 0, .92)), radial-gradient(circle at 50% 0%, rgba(255, 212, 107, .38), transparent 55%);
  border-color: rgba(255, 68, 54, .78);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .18) inset, 0 0 32px rgba(255, 32, 45, .34), 0 10px 36px rgba(136, 0, 0, .32);
}

.btn-gold {
  color: #17110a;
  background: linear-gradient(180deg, #ffe6a7, #c79022);
  border-color: rgba(255, 231, 164, .8);
  box-shadow: 0 0 26px rgba(212, 175, 55, .22);
}

.btn-ghost {
  color: #f2ddaa;
  background: rgba(10, 13, 16, .72);
  border-color: rgba(212, 175, 55, .32);
}

.download-mark { margin-right: 10px; font-size: 22px; line-height: 1; }
.system-line { gap: 10px; margin-top: 12px; color: #9d9387; font-size: 11px; }
.system-line span + span::before { content: "·"; margin-right: 10px; color: var(--gold); }

.hero-stage {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
}

.hero-knight {
  position: relative;
  z-index: 3;
  width: min(100%, 590px);
  filter: drop-shadow(0 30px 42px rgba(0,0,0,.78)) saturate(1.12) contrast(1.08);
  animation: knightFloat 4.6s ease-in-out infinite;
}

.portal-ring {
  position: absolute;
  z-index: 1;
  width: 340px;
  height: 340px;
  right: 2%;
  top: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 32, 45, .48);
  background: repeating-conic-gradient(from 14deg, rgba(255,32,45,.42) 0deg 5deg, transparent 5deg 13deg), radial-gradient(circle, transparent 45%, rgba(255,32,45,.18) 46%, transparent 66%);
  box-shadow: 0 0 24px rgba(255,32,45,.65), inset 0 0 38px rgba(255,32,45,.24);
  animation: portalSpin 12s linear infinite;
}

.portal-ring::before, .portal-ring::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.28);
}

.portal-ring::after { inset: -24px; border-color: rgba(255,32,45,.18); filter: blur(1px); }

.spear-light {
  position: absolute;
  z-index: 2;
  width: 64%;
  height: 2px;
  left: -8%;
  top: 43%;
  transform: rotate(-7deg);
  background: linear-gradient(90deg, transparent, rgba(255,245,198,.95), rgba(255,32,45,.18), transparent);
  box-shadow: 0 0 22px rgba(255,245,198,.75), 0 0 44px rgba(255,32,45,.38);
}

.hero-status { align-self: center; display: grid; gap: 12px; }
.hero-status div {
  min-height: 78px;
  padding: 14px 10px;
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15,12,8,.78), rgba(5,7,8,.62));
  box-shadow: inset 0 0 24px rgba(255,32,45,.08);
}

.hero-status strong { display: block; color: #ffdd7d; font-family: Georgia, serif; font-size: 20px; }
.hero-status span { display: block; margin-top: 4px; color: #9f9586; font-size: 10px; }

.panel {
  width: min(1180px, calc(100% - 36px));
  margin: 18px auto;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17,20,25,.86), rgba(6,9,11,.82)), radial-gradient(circle at 76% 0%, rgba(136,0,0,.18), transparent 35%);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.section-title span { color: #f0d188; font-weight: 850; font-size: 14px; }
.section-title small { color: #8f887d; font-size: 11px; }

.command-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px;
}

.command-card {
  text-align: left;
  min-height: 128px;
  cursor: pointer;
  padding: 18px;
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(255,32,45,.08), rgba(0,0,0,.18));
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.command-card:hover { transform: translateY(-3px); border-color: rgba(255,32,45,.55); box-shadow: 0 0 32px rgba(255,32,45,.16); }
.command-card b { color: var(--crimson); font-family: Georgia, serif; }
.command-card strong, .command-card span { display: block; }
.command-card strong { margin: 14px 0 8px; color: #f0d188; font-size: 18px; }
.command-card span { color: #a99f91; font-size: 12px; line-height: 1.5; }

.proof-section {
  display: grid;
  grid-template-columns: .85fr 1.35fr;
  gap: 20px;
  padding: 20px;
  align-items: center;
  background:
    radial-gradient(circle at 84% 28%, rgba(255, 32, 45, .18), transparent 34%),
    linear-gradient(180deg, rgba(11, 14, 18, .92), rgba(4, 6, 8, .86));
}

.proof-copy {
  padding: 12px 8px 12px 4px;
}

.proof-copy h2,
.capability-hero h2 {
  margin: 12px 0;
  color: #f0d188;
  font-family: "Noto Serif SC", Georgia, serif;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.18;
}

.proof-copy p,
.capability-hero p,
.capability-group p {
  color: #bdb3a4;
  font-size: 13px;
  line-height: 1.75;
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.proof-stats article {
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(212,175,55,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.proof-stats strong {
  display: block;
  color: #ffe4a3;
  font-family: Georgia, serif;
  font-size: 25px;
}

.proof-stats span {
  display: block;
  margin-top: 7px;
  color: #92887d;
  font-size: 10px;
}

.software-window {
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 8px;
  background: #050708;
  box-shadow: 0 26px 80px rgba(0,0,0,.52), 0 0 40px rgba(255,32,45,.12);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(212,175,55,.18);
  background: linear-gradient(90deg, rgba(255,32,45,.16), rgba(255,255,255,.035));
}

.window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff452f;
  box-shadow: 0 0 12px rgba(255,69,47,.45);
}

.window-bar span:nth-child(2) { background: #d4af37; }
.window-bar span:nth-child(3) { background: #56d4e1; }
.window-bar strong {
  margin-left: 8px;
  color: #d8c8a2;
  font-size: 11px;
}

.software-window img {
  width: 100%;
  aspect-ratio: 16 / 8.6;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.05);
}

.companion-band {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.25fr;
  min-height: 245px;
  padding: 30px 36px;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,7,8,.96), rgba(44,5,5,.58), rgba(5,7,8,.84)),
    radial-gradient(circle at 55% 50%, rgba(255,32,45,.24), transparent 36%);
}

.companion-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(212,175,55,.18) 0 1px, transparent 1px 100%) 0 0 / 82px 100%;
  opacity: .18;
  pointer-events: none;
}

.companion-copy {
  position: relative;
  z-index: 2;
}

.companion-copy span {
  color: #ff202d;
  font-size: 12px;
  font-weight: 900;
}

.companion-copy h2 {
  margin: 8px 0 6px;
  color: #f0d188;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}

.companion-copy p {
  max-width: 450px;
  color: #c6b9a8;
  line-height: 1.75;
}

.companion-actions {
  margin-top: 18px;
}

.companion-image {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(680px, 100%);
  max-height: 300px;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 24px 40px rgba(0,0,0,.65));
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
}

.feature-row { display: grid; grid-template-columns: repeat(8, 1fr); }
.feature-item {
  min-height: 128px;
  padding: 22px 13px 18px;
  text-align: center;
  border-right: 1px solid rgba(212,175,55,.12);
  background: linear-gradient(180deg, rgba(255,32,45,.035), transparent);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.feature-item:last-child { border-right: 0; }
.feature-item:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255,32,45,.12), rgba(212,175,55,.03)); }
.feature-item img { width: 28px; height: 28px; margin: 0 auto 12px; object-fit: cover; border-radius: 4px; filter: saturate(1.3) drop-shadow(0 0 14px rgba(255,32,45,.42)); }
.feature-item strong, .feature-item small { display: block; }
.feature-item strong { font-size: 12px; color: #f0e2c6; }
.feature-item small { margin-top: 6px; color: #8e887d; font-size: 10px; line-height: 1.45; }

.pipeline { padding-bottom: 16px; }
.pipeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 22px 20px 14px;
}
.pipeline-track::before {
  content: "";
  position: absolute;
  left: 76px;
  right: 76px;
  top: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,32,45,.92), rgba(212,175,55,.82), transparent);
  box-shadow: 0 0 16px rgba(255,32,45,.5);
}
.pipeline-step { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; text-align: center; }
.pipeline-step b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #f6d680;
  border: 1px solid rgba(212,175,55,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,32,45,.32), rgba(8,13,16,.95) 64%);
  box-shadow: 0 0 24px rgba(255,32,45,.24);
}
.pipeline-step strong { color: #f3d99b; font-size: 12px; }
.pipeline-step small { color: #9b9388; font-size: 10px; }

.capability-matrix {
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,.12), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(255,32,45,.16), transparent 34%),
    linear-gradient(180deg, rgba(14,17,21,.9), rgba(4,6,8,.9));
}

.capability-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  padding: 20px;
}

.capability-hero {
  position: sticky;
  top: 104px;
  align-self: start;
  min-height: 420px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,32,45,.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,32,45,.14), rgba(0,0,0,.22)),
    radial-gradient(circle at 50% 86%, rgba(212,175,55,.16), transparent 38%);
  box-shadow: inset 0 0 42px rgba(0,0,0,.46), 0 0 40px rgba(255,32,45,.1);
}

.capability-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -88px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.22);
  background: repeating-conic-gradient(rgba(255,32,45,.28) 0deg 4deg, transparent 4deg 12deg);
  opacity: .42;
  animation: portalSpin 22s linear infinite;
}

.capability-hero .btn {
  margin-top: 20px;
  width: 100%;
}

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

.capability-dynamic-panel {
  min-width: 0;
}

.capability-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.capability-filter {
  min-height: 34px;
  padding: 0 13px;
  cursor: pointer;
  color: #d8c8a2;
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.capability-filter.active {
  color: #17110a;
  border-color: rgba(255,231,164,.8);
  background: linear-gradient(180deg, #ffe6a7, #c79022);
  font-weight: 850;
}

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

.capability-group {
  min-height: 320px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(212,175,55,.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    rgba(0,0,0,.2);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.capability-group:hover {
  transform: translateY(-3px);
  border-color: rgba(255,32,45,.42);
  background:
    linear-gradient(180deg, rgba(255,32,45,.09), rgba(255,255,255,.02)),
    rgba(0,0,0,.22);
}

.capability-group b {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 8px;
  color: #1a1108;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffe6a7, #c79022);
  font-size: 11px;
}

.capability-group img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid rgba(212,175,55,.16);
  filter: saturate(1.08) contrast(1.04);
}

.capability-group-body {
  padding: 16px;
}

.capability-group strong {
  display: block;
  color: #f0e2c6;
  font-size: 15px;
  line-height: 1.4;
}

.capability-group p {
  margin: 10px 0 0;
  font-size: 12px;
}

.capability-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.capability-detail-list span {
  padding: 9px 10px;
  color: #d8c8a2;
  border: 1px solid rgba(212,175,55,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  font-size: 12px;
}

.member-layout {
  display: grid;
  grid-template-columns: 1.05fr .85fr .85fr;
  gap: 18px;
  padding: 20px;
}

.auth-panel, .payment-card, .license-card, .effect-level, .effect-settings {
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 8px;
  background: rgba(5,7,8,.54);
  box-shadow: inset 0 0 28px rgba(0,0,0,.38);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid rgba(212,175,55,.16);
}

.tabs button {
  cursor: pointer;
  min-height: 44px;
  color: #bfb4a5;
  border: 0;
  border-right: 1px solid rgba(212,175,55,.12);
  background: transparent;
}
.tabs button:last-child { border-right: 0; }
.tabs button.active { color: #17110a; background: linear-gradient(180deg, #ffe6a7, #c79022); font-weight: 850; }

.auth-form { display: none; padding: 18px; }
.auth-form.active { display: grid; gap: 13px; }
label { display: grid; gap: 7px; color: #d8c8a2; font-size: 12px; }
input, select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: var(--white);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  outline: none;
}
input:focus, select:focus { border-color: rgba(255,32,45,.55); box-shadow: 0 0 0 3px rgba(255,32,45,.1); }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-line {
  margin: 0;
  padding: 0 18px 18px;
  color: #9fdce2;
  font-size: 12px;
  line-height: 1.6;
}
.support-line strong { color: #ffe6a7; }

.invite-payment-box {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,230,167,.08), rgba(255,255,255,.035));
}

.invite-payment-box strong,
.invite-confirmed strong {
  color: #ffe6a7;
}

.invite-payment-box span {
  color: #bdb3a4;
  font-size: 13px;
  line-height: 1.6;
}

.invite-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.invite-code-row input {
  min-width: 0;
  height: 44px;
}

.invite-confirmed {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 221, 143, .3);
  border-radius: 8px;
  background: rgba(0, 221, 143, .08);
}

.invite-confirmed span,
.invite-confirmed em {
  color: #bdb3a4;
  font-size: 13px;
  font-style: normal;
}

.invite-qr-shell {
  border-color: rgba(0, 221, 143, .45);
}

.payment-card { padding: 18px; }
.mini-label { color: var(--crimson); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.payment-card h2, .preview-copy h2 { margin: 12px 0; color: #f0d188; font-family: "Noto Serif SC", serif; font-size: 25px; line-height: 1.25; }
.price { display: block; color: #ffe6a7; font-family: Georgia, serif; font-size: 48px; line-height: 1; }
.payment-card p, .preview-copy li { color: #bdb3a4; font-size: 13px; line-height: 1.7; }

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.payment-methods button {
  cursor: pointer;
  min-height: 40px;
  color: #d8c8a2;
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.payment-methods button:hover {
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.55);
}

.payment-methods button.active {
  color: #17110a;
  border-color: rgba(255,230,167,.85);
  background: linear-gradient(180deg, #ffe6a7, #c79022);
  font-weight: 850;
}

.qr-shell {
  position: relative;
  width: min(240px, 100%);
  margin: 16px auto;
  padding: 12px;
  border: 1px solid rgba(212,175,55,.36);
  border-radius: 8px;
  background: #f5f1e8;
  overflow: hidden;
}
.qr-shell img { width: 100%; }
.qr-scan {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 20px;
  height: 2px;
  background: rgba(255,32,45,.95);
  box-shadow: 0 0 18px rgba(255,32,45,.8);
  animation: qrScan 2.2s ease-in-out infinite;
}
.payment-status { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #d8c8a2; font-size: 12px; }
.payment-status span { color: #8f887d; }
.payment-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.license-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}
.license-card img {
  width: 130px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 0 32px rgba(212,175,55,.32));
}
.license-card span { color: var(--crimson); font-size: 11px; font-weight: 850; }
.license-card h3 { color: #f0d188; }
.license-card p { color: #bdb3a4; font-size: 12px; line-height: 1.55; }

.member-center {
  background:
    radial-gradient(circle at 18% 8%, rgba(212, 175, 55, .11), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(255, 32, 45, .17), transparent 32%),
    linear-gradient(180deg, rgba(17,20,25,.9), rgba(5,7,8,.88));
}

.member-center-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  padding: 20px;
}

.member-profile-card,
.member-dashboard {
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(5,7,8,.58);
  box-shadow: inset 0 0 32px rgba(0,0,0,.42), 0 22px 60px rgba(0,0,0,.24);
}

.member-profile-card {
  padding: 18px;
}

.profile-topline {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
}

.profile-topline img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 8px;
  box-shadow: 0 0 28px rgba(255,32,45,.18);
}

.profile-topline h3 {
  margin: 6px 0 4px;
  color: #f0d188;
  font-size: 24px;
}

.profile-topline p,
.membership-medal span {
  margin: 0;
  color: #9f9588;
  font-size: 12px;
}

.membership-medal {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 22px 0 18px;
  padding: 22px 16px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, rgba(255,32,45,.16), transparent 58%), rgba(0,0,0,.2);
}

.membership-medal::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,.14), transparent, rgba(255,32,45,.12), transparent);
  animation: portalSpin 18s linear infinite;
}

.membership-medal img,
.membership-medal strong,
.membership-medal span {
  position: relative;
  z-index: 1;
}

.membership-medal img {
  width: 124px;
  opacity: .86;
  filter: drop-shadow(0 0 30px rgba(212,175,55,.24));
}

.membership-medal strong {
  color: #ffe4a3;
  font-family: Georgia, serif;
  font-size: 22px;
}

.member-actions {
  display: grid;
  gap: 10px;
}

.member-dashboard {
  padding: 18px;
}

.member-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.member-metric-grid article {
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(212,175,55,.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,32,45,.07), rgba(255,255,255,.02));
}

.member-metric-grid span,
.account-grid span,
.license-display span,
.device-card span {
  display: block;
  color: #938a7f;
  font-size: 11px;
}

.member-metric-grid strong {
  display: block;
  margin-top: 12px;
  color: #f0d188;
  font-family: Georgia, serif;
  font-size: 22px;
}

.member-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(212,175,55,.14);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.member-tabs button {
  cursor: pointer;
  min-height: 34px;
  padding: 0 14px;
  color: #bfb4a5;
  border: 1px solid rgba(212,175,55,.13);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
}

.member-tabs button.active {
  color: #17110a;
  border-color: rgba(255,231,164,.75);
  background: linear-gradient(180deg, #ffe6a7, #c79022);
  font-weight: 850;
}

.member-tab-panel {
  display: none;
  margin-top: 14px;
  padding: 16px;
  min-height: 210px;
  border: 1px solid rgba(212,175,55,.14);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}

.member-tab-panel.active {
  display: block;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.account-grid div,
.license-display,
.device-card,
.message-list article {
  padding: 14px;
  border: 1px solid rgba(212,175,55,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.account-grid strong,
.license-display strong,
.device-card strong {
  display: block;
  margin-top: 8px;
  color: #f0e2c6;
  font-size: 13px;
  line-height: 1.45;
}

.member-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.member-timeline div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  color: #8f887d;
  border: 1px solid rgba(212,175,55,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  font-size: 12px;
}

.member-timeline b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(255,255,255,.06);
}

.member-timeline .done {
  color: #ffe4a3;
  border-color: rgba(212,175,55,.36);
  box-shadow: inset 0 0 24px rgba(212,175,55,.08);
}

.member-timeline .done b {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(212,175,55,.74);
}

.license-display strong {
  color: #ffe4a3;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(18px, 2.6vw, 31px);
  letter-spacing: .04em;
}

.license-display p,
.device-card p {
  color: #9f9588;
  font-size: 12px;
  line-height: 1.65;
}

.table-like {
  display: grid;
  gap: 8px;
}

.table-like div {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr .8fr .8fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(212,175,55,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #bdb3a4;
  font-size: 12px;
}

.table-like div:first-child {
  color: #f0d188;
  background: rgba(212,175,55,.06);
}

.message-list {
  display: grid;
  gap: 10px;
}

.message-list article strong,
.message-list article span {
  display: block;
}

.message-list article strong {
  color: #f0d188;
  margin-bottom: 6px;
}

.message-list article span {
  color: #bdb3a4;
  font-size: 12px;
  line-height: 1.55;
}

.effects-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}
.effect-level, .effect-settings { padding: 18px; }
.effect-level b { color: var(--crimson); font-family: Georgia, serif; }
.effect-level h3, .effect-settings h3 { color: #f0d188; margin: 10px 0; }
.effect-level p { color: #bdb3a4; font-size: 13px; line-height: 1.65; min-height: 86px; }
.switch-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.switch-grid span { padding: 7px 9px; color: #d9c99a; border: 1px solid rgba(212,175,55,.18); border-radius: 999px; background: rgba(255,255,255,.035); font-size: 11px; }

.preview-section { padding-bottom: 22px; }
.preview-grid { display: grid; grid-template-columns: 1.55fr .95fr; gap: 18px; padding: 20px; }
.preview-frame {
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 8px;
  overflow: hidden;
  background: #050708;
  box-shadow: inset 0 0 28px rgba(0,0,0,.62);
}
.preview-frame img { width: 100%; height: 100%; min-height: 290px; object-fit: cover; opacity: .82; filter: saturate(1.1) contrast(1.06); }
.preview-copy { padding: 12px 8px; }
.preview-copy ul { padding-left: 18px; margin: 16px 0 0; }

.download-cta {
  position: relative;
  width: min(1180px, calc(100% - 36px));
  min-height: 150px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 18px auto;
  padding: 30px 36px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(5,7,8,.94), rgba(95,0,0,.5)), radial-gradient(circle at 85% 100%, rgba(255,32,45,.34), transparent 34%);
  box-shadow: var(--shadow);
}
.download-copy,
.download-cta .btn {
  position: relative;
  z-index: 2;
}
.download-cta h2 { margin-bottom: 8px; color: #f0d188; font-family: "Noto Serif SC", serif; font-size: clamp(28px, 4vw, 42px); }
.download-cta p { margin: 0; color: #b6aca0; }
.download-cta img { position: absolute; right: -34px; bottom: -24px; width: 310px; max-height: 145px; object-fit: cover; object-position: center; opacity: .38; pointer-events: none; z-index: 1; mask-image: linear-gradient(90deg, transparent, #000 28%, #000 80%, transparent); }

.site-footer {
  width: min(1180px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  margin: 22px auto 34px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(212,175,55,.2);
}
.footer-brand img { width: 38px; height: 38px; }
.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-columns section { display: grid; gap: 8px; }
.footer-columns strong { color: #d4bd7c; font-size: 12px; }
.footer-columns a, .footer-columns span { color: #8f887d; font-size: 11px; }

.modal {
  width: min(650px, calc(100% - 32px));
  padding: 0;
  color: var(--white);
  border: 1px solid rgba(212,175,55,.36);
  border-radius: 8px;
  background: rgba(5,7,8,.96);
  box-shadow: 0 30px 100px rgba(0,0,0,.78);
}
.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.modal form { position: relative; padding: 30px; }
.modal h2 { margin: 18px 0 12px; color: #f0d188; font-family: "Noto Serif SC", serif; }
.modal p { color: #bdb3a4; line-height: 1.75; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #f0d188;
  border: 1px solid rgba(212,175,55,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.success-seal { width: 210px; margin: 0 auto 10px; animation: sealStamp .9s var(--ease); }

.toast {
  position: fixed;
  right: 22px;
  top: 92px;
  z-index: 60;
  padding: 13px 16px;
  color: #ffe9ae;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 8px;
  background: rgba(5,7,8,.94);
  box-shadow: 0 20px 70px rgba(0,0,0,.55), 0 0 28px rgba(255,32,45,.18);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.visible { opacity: 1; transform: translateY(0); }

.impact-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.impact-portal {
  position: absolute;
  right: 15%;
  top: 20%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,32,45,.62) 0deg 5deg, transparent 5deg 12deg);
  border: 2px solid rgba(255,32,45,.62);
  box-shadow: 0 0 90px rgba(255,32,45,.56), inset 0 0 55px rgba(212,175,55,.16);
  transform: scale(.45) rotate(0deg);
}
.impact-knight {
  position: absolute;
  right: 11%;
  top: 20%;
  width: min(620px, 70vw);
  transform: translate3d(260px, 80px, 0) scale(.45);
  filter: drop-shadow(0 35px 50px rgba(0,0,0,.8));
}
.impact-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,232,178,.9);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
}
body.charge-active .impact-layer { opacity: 1; animation: impactFade 1.35s var(--ease) forwards; }
body.charge-active .impact-portal { animation: impactPortal 1.25s var(--ease) forwards; }
body.charge-active .impact-knight { animation: impactKnight 1.15s var(--ease) forwards; }
body.charge-active .impact-wave { animation: impactWave 1s .35s var(--ease) forwards; }
body.charge-active { animation: screenJolt .38s .56s var(--ease); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .58s var(--ease), transform .58s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.click-particle {
  position: fixed;
  z-index: 70;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 20px rgba(255,32,45,.8);
  animation: particleBurst .5s var(--ease) forwards;
}
.fx-pulse { animation: fxPulse .22s var(--ease); }
.fx-shake { animation: fxShake .3s var(--ease); }

body.image-home {
  background: #030506;
}

body.image-home::before,
body.image-home::after,
body.image-home .ambient-grid {
  opacity: .22;
}

.image-homepage {
  position: relative;
  z-index: 2;
  width: min(100vw, 1054px);
  margin: 0 auto;
  min-height: 100vh;
  background: #030506;
  box-shadow: 0 0 90px rgba(0, 0, 0, .82);
}

.homepage-art {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
  object-fit: contain;
  object-position: top center;
}

.home-hotspot {
  position: absolute;
  z-index: 8;
  display: block;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  background: transparent;
  outline: none;
}

.home-hotspot:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 230, 167, .78), 0 0 34px rgba(255, 32, 45, .45);
}

.hotspot-download {
  left: 4.3%;
  top: 29.1%;
  width: 24.7%;
  height: 3.9%;
}

.hotspot-demo {
  right: 2.1%;
  top: 1.1%;
  width: 8.9%;
  height: 2.8%;
}

.hotspot-membership {
  left: 4.3%;
  top: 66.2%;
  width: 12.2%;
  height: 2.6%;
}

.hotspot-footer-download {
  left: 52.2%;
  top: 86.3%;
  width: 25.2%;
  height: 3.5%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes knightFloat { 0%,100%{transform:translate3d(0,0,0) scale(1.02)} 50%{transform:translate3d(6px,-7px,0) scale(1.04)} }
@keyframes portalSpin { to{transform:rotate(360deg)} }
@keyframes qrScan { 0%,100%{transform:translateY(0)} 50%{transform:translateY(205px)} }
@keyframes particleBurst { to{transform:translate(-12px,-22px) scale(4); opacity:0} }
@keyframes fxPulse { 50%{transform:scale(.96); box-shadow:0 0 40px rgba(255,32,45,.42)} }
@keyframes fxShake { 20%,60%{transform:translateX(-2px)} 40%,80%{transform:translateX(2px)} }
@keyframes sealStamp { 0%{transform:scale(1.7) rotate(-8deg); opacity:0} 60%{transform:scale(.92) rotate(2deg); opacity:1} 100%{transform:scale(1) rotate(0)} }
@keyframes impactFade { 0%{opacity:0} 10%,82%{opacity:1} 100%{opacity:0} }
@keyframes impactPortal { to{transform:scale(1.1) rotate(150deg); opacity:.92} }
@keyframes impactKnight { 0%{transform:translate3d(260px,80px,0) scale(.45)} 70%{transform:translate3d(-70px,-15px,0) scale(1.22)} 100%{transform:translate3d(-20px,0,0) scale(1.04); opacity:0} }
@keyframes impactWave { 0%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 25%{opacity:1} 100%{opacity:0; transform:translate(-50%,-50%) scale(32)} }
@keyframes screenJolt { 20%{transform:translateX(-5px)} 45%{transform:translateX(4px)} 70%{transform:translateX(-2px)} }

@media (max-width: 1020px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .hero-section, .proof-section, .companion-band, .capability-layout, .member-layout, .member-center-layout, .effects-layout, .preview-grid, .site-footer { grid-template-columns: 1fr; }
  .capability-hero { position: relative; top: auto; min-height: 0; }
  .hero-status { grid-template-columns: repeat(4, 1fr); }
  .feature-row { grid-template-columns: repeat(4, 1fr); }
  .member-metric-grid, .account-grid { grid-template-columns: repeat(2, 1fr); }
  .pipeline-track { grid-template-columns: repeat(3, 1fr); }
  .pipeline-track::before { display: none; }
  .command-grid, .footer-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .nav-shell { top: 10px; width: calc(100% - 20px); }
  .demo-link { display: none; }
  .hero-section, .panel, .download-cta, .site-footer { width: calc(100% - 20px); }
  .hero-status, .feature-row, .command-grid, .pipeline-track, .footer-columns { grid-template-columns: 1fr 1fr; }
  .proof-stats, .capability-groups { grid-template-columns: 1fr; }
  .capability-grid-dynamic { grid-template-columns: 1fr; }
  .member-metric-grid, .account-grid, .member-timeline { grid-template-columns: 1fr; }
  .table-like div { grid-template-columns: 1fr; }
  .effects-layout { grid-template-columns: 1fr; }
  .hero-stage { min-height: 300px; }
  .portal-ring { width: 250px; height: 250px; }
  .download-cta { grid-template-columns: 1fr; padding: 24px; }
  .download-cta .btn { width: 100%; }
  .inline-fields { grid-template-columns: 1fr; }
}

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


.invite-qr-shell {
  width: min(300px, 100%);
  max-height: 520px;
}

.invite-qr-shell img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 360px;
  object-fit: contain;
  object-position: center;
}