:root {
  --edge: clamp(20px, 3.2vw, 48px);            
  --edge-v: clamp(18px, 4.2vh, 40px);          
  --card-w: min(300px, 82vw);
  --axis-brand: calc(var(--edge) + 42px + 1.05rem); 
  
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  
  --fs-micro: 0.6875rem;   
  --fs-label: 0.75rem;     
  --fs-ui: 0.8125rem;      
  --fs-small: 0.875rem;    
  --fs-card-title: 1.3rem; 
  
  --tr-caps: 0.18em;       
  --tr-micro: 0.24em;      
  --tr-brand: 0.3em;       
  
  --gold-hi: #dbb66a;
  --gold: #dbb66a;
  --gold-lo: #dbb66a;
  --gold-90: rgba(219, 182, 106, 0.9);
  --gold-55: rgba(219, 182, 106, 0.55);
  --gold-16: rgba(219, 182, 106, 0.16);
  --rule: linear-gradient(90deg, rgba(219, 182, 106, 0.85), rgba(219, 182, 106, 0.05));
  
  --ivory: #f2e8d5;
  --txt: oklch(96% 0.008 85);
  --txt-92: oklch(97% 0.006 85 / 0.92);
  --txt-85: oklch(97% 0.006 85 / 0.85);
  --txt-78: oklch(96% 0.008 85 / 0.78);
  --txt-55: oklch(95% 0.008 85 / 0.55);
  --txt-38: oklch(96% 0.008 85 / 0.55);
  
  --hair: rgba(255, 255, 255, 0.12);
  --hair-soft: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.16);
  
  --z-stage: 0; --z-frame: 1; --z-hero: 5; --z-hud: 10;
  --z-reveal: 12; --z-tools: 15; --z-nav: 20;
  
  --ring-size: clamp(96px, 10vw, 128px);
}
body.xp {
  
  background: #0b0a08;
  color: var(--txt);
  cursor: grab;
  overflow-x: clip;
}
body.xp.is-drag { cursor: grabbing; user-select: none; }
body.xp-booting { overflow: hidden; height: 100svh; }
html:has(body.xp-booting) { overflow: hidden; }
.xp-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: var(--z-stage);
  background:
    radial-gradient(135% 95% at 72% 18%, rgba(18, 15, 10, 0.25) 0%, transparent 48%),
    linear-gradient(180deg, #0a0907 0%, #070605 55%, #040403 100%);
}
.xp-stage canvas { display: block; width: 100%; height: 100%; }
.xp-stage, .xp-stage canvas { touch-action: pan-y; }
.xp-intro, .xp-card, .xp-ring { touch-action: pan-y; }
.xp-frame {
  position: fixed;
  inset: 0;
  z-index: var(--z-frame);
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 46%, rgba(0, 0, 0, 0.66));
}
.xp-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg,
              rgba(6, 6, 7, 0) 34%,
              rgba(6, 6, 7, 0.55) 60%,
              rgba(6, 6, 7, 0.86) 82%,
              rgba(6, 6, 7, 0.94) 100%);
  transition: opacity 0.9s ease 0.35s;
}
body.is-reveal .xp-frame::after { opacity: 1; }
body.is-outro .xp-frame::after { opacity: 0; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .xp-frame::after { transition-duration: 0.01ms; } }
.xp-runway { height: 1600vh; }
@media (max-width: 700px) { .xp-runway { height: 1050vh; } }
.glass {
  background: rgba(12, 13, 15, 0.78);
  border: 1px solid var(--hair-soft);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.xp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: clamp(var(--s4), 3vw, var(--s12));
  padding: clamp(14px, 2.4vh, 22px) var(--edge);
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.72), transparent);
}
.xp-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  margin-right: auto;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.4);
}
.xp-nav .brand svg {
  width: 42px;
  height: 31px;
  color: #fff;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
.brand-txt { display: grid; row-gap: var(--s2); line-height: 1; }
.brand-txt strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: var(--tr-brand);
  margin-right: calc(-1 * var(--tr-brand));
  color: #fff;
}
.brand-rule { display: block; height: 1px; background: var(--rule); }
.brand-txt small {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-92);
}
.xp-nav nav { display: flex; gap: clamp(var(--s4), 2.4vw, var(--s10)); }
.xp-nav nav a {
  position: relative;
  padding: var(--s2) 2px 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--txt-92);
}
.xp-nav nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s1);
  height: 1px;
  background: var(--rule);
  transition: opacity 0.2s ease, background 0.2s ease;
  opacity: 0.55;
}
.xp-nav nav a:hover { color: #fff; }
.xp-nav nav a:hover::after,
.xp-nav nav a[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--gold-hi), var(--gold-55));
  opacity: 1;
}
.xp-nav nav a[aria-current="page"] { color: #fff; }
.nav-cta {
  position: relative;
  padding: var(--s2) 2px 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gold-hi);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s1);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
  opacity: 0.9;
}
.nav-cta:hover { color: #fff; }
.nav-cta:hover::after { transform: scaleY(2); opacity: 1; }
.nav-cta:focus-visible {
  outline: 1px solid var(--gold-55);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 700px) { .xp-nav nav { display: none; } }
@media (max-width: 860px) { .brand-txt small { display: none; } }
@media (min-width: 701px) and (max-width: 860px) {
  .xp-nav { gap: 0.85rem; }
  .xp-nav .brand { gap: 0.7rem; }
  .xp-nav .brand svg { width: 34px; height: 25px; }
  .brand-txt strong { font-size: 1.2rem; }
  .xp-nav nav { gap: 0.75rem; }
  .xp-nav nav a, .nav-cta { font-size: 0.7rem; letter-spacing: 0.14em; }
}
@media (min-width: 701px) and (max-width: 800px) {
  .xp-nav { gap: 0.6rem; }
  .xp-nav .brand { gap: 0.55rem; }
  .xp-nav .brand svg { width: 30px; height: 22px; }
  .brand-txt strong { font-size: 1.1rem; letter-spacing: 0.18em; }
  .xp-nav nav { gap: 0.55rem; }
  .xp-nav nav a, .nav-cta { font-size: 0.64rem; letter-spacing: 0.08em; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .brand-txt small { display: none; }
  .xp-nav { gap: 1.1rem; }
  .xp-nav nav { gap: clamp(0.9rem, 1.7vw, 1.5rem); }
  .xp-nav nav a, .nav-cta { font-size: 0.72rem; letter-spacing: 0.14em; }
}
.xp-hero {
  position: fixed;
  inset: 0;
  z-index: var(--z-hero);
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.72) 6%,
      rgba(0,0,0,0.42) 13%,
      rgba(0,0,0,0.18) 22%,
      rgba(0,0,0,0.04) 32%,
      rgba(0,0,0,0.0) 40%,
      rgba(0,0,0,0.0) 60%,
      rgba(0,0,0,0.04) 68%,
      rgba(0,0,0,0.18) 78%,
      rgba(0,0,0,0.42) 87%,
      rgba(0,0,0,0.72) 94%,
      rgba(0,0,0,0.92) 100%),
    linear-gradient(102deg,
      rgba(5, 3, 2, 0.58) 0%,
      rgba(5, 3, 2, 0.32) 26%,
      rgba(5, 3, 2, 0.05) 46%,
      transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 28%, rgba(0,0,0,0.01) 48%),
    linear-gradient(170deg, rgba(12,6,2,0.0) 38%, rgba(10,5,2,0.42) 76%),
    url("../../assets/hero_favorite.jpg") center / cover no-repeat;
  pointer-events: none;
  filter: contrast(1.08) saturate(1.05) brightness(0.98);
  will-change: transform, opacity;
  transition: opacity 0.5s ease;
}
.xp-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.xp-intro .hero-left {
  position: absolute;
  left: var(--axis-brand);
  top: 47%;
  transform: translateY(-50%);
  max-width: min(60vw, 54rem);
  pointer-events: auto;
}
.xp-intro .hero-over {
  margin-bottom: var(--s5);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.xp-intro .hero-h1 {
  font-size: clamp(2.6rem, 1.45rem + 5.2vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.014em;
  color: var(--ivory);
  text-wrap: wrap;
  text-shadow: 0 2px 42px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.xp-intro .hero-rule {
  display: block;
  width: var(--s16);
  height: 1px;
  margin-top: var(--s7);
  background: var(--rule);
}
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: var(--edge-v);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: #fff4dc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.75);
  transition: color 0.25s ease;
}
.hero-cta:hover { color: #fff; }
.hero-cta .hc-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, var(--gold-hi));
  overflow: hidden;
}
.hero-cta .hc-line::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -6px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold-hi);
  animation: hcSpark 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hcSpark {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(48px); opacity: 0; }
  100% { transform: translateY(48px); opacity: 0; }
}
.hero-cta .hc-ico {
  position: relative;
  flex: none;
  width: 17px;
  height: 27px;
  border: 1.5px solid var(--gold-hi);
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.hero-cta .hc-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--gold-hi);
  animation: hcWheel 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hcWheel {
  0% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(9px); opacity: 0; }
  60% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.hero-cta .hc-txt { position: relative; padding-bottom: var(--s2); white-space: nowrap; }
.hero-cta .hc-txt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(219, 182, 106, 0.08), var(--gold-hi), rgba(219, 182, 106, 0.08));
  transition: background 0.25s ease;
}
.hero-cta:hover .hc-txt::after {
  background: linear-gradient(90deg, var(--gold-55), #fff, var(--gold-55));
}
.hero-cta .hc-txt::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 30%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff8e6 50%, transparent);
  box-shadow: 0 0 12px 2px rgba(219, 182, 106, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: hcSheen 3.6s cubic-bezier(0.45, 0, 0.2, 1) 4s 3 both;
}
@keyframes hcSheen {
  0% { transform: translateX(-100%); opacity: 0; }
  8% { opacity: 1; }
  38% { opacity: 1; }
  46% { transform: translateX(333%); opacity: 0; }
  100% { transform: translateX(333%); opacity: 0; }
}
.подсказката-спря .hero-cta .hc-txt::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta .hc-ico::after, .hero-cta .hc-line::after, .hero-cta .hc-txt::before { animation: none; }
}
.xp-timeline {
  position: fixed;
  z-index: var(--z-hud);
  left: var(--edge);
  top: clamp(92px, 12vh, 116px);
  bottom: calc(var(--edge-v) + var(--ring-size) + var(--s6));
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.is-building .xp-timeline { opacity: 1; pointer-events: auto; }
body.is-reveal .xp-timeline { opacity: 0; pointer-events: none; }
.tl-label {
  margin-bottom: var(--s4);
  padding-left: 53px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold-90);
}
.xp-timeline ol {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xp-timeline ol::before {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hair-strong) 12%, var(--hair-strong) 88%, transparent);
}
.xp-timeline li {
  display: grid;
  grid-template-columns: 14px 2ch 1fr;
  column-gap: var(--s3);
  align-items: center;
  font-size: clamp(11px, 1.35vh, 12.5px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--txt-55);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.xp-timeline li:hover { color: var(--ivory); transform: translateX(2px); }
.xp-timeline li:hover .dot { border-color: var(--gold); }
.xp-timeline li:focus-visible {
  outline: 1px solid var(--gold-55);
  outline-offset: 3px;
  border-radius: 3px;
}
.xp-timeline li .dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.xp-timeline li .num {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--txt-38);
  transition: color 0.25s ease;
}
.xp-timeline li.done { color: var(--txt-92); }
.xp-timeline li.done .num { color: var(--txt-55); }
.xp-timeline li.done .dot { background: rgba(255, 255, 255, 0.8); border-color: transparent; }
.xp-timeline li.on { color: var(--gold); font-weight: 700; }
.xp-timeline li.on .num { color: var(--gold); font-weight: 600; }
.xp-timeline li.on > span:last-child { position: relative; justify-self: start; padding-bottom: 6px; margin-bottom: -6px; }
.xp-timeline li.on > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hi), rgba(219, 182, 106, 0.08));
  transform-origin: 0 50%;
  animation: tlRule 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tlRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .xp-timeline li.on > span:last-child::after { animation: none; } }
.xp-timeline li.on .dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-16), 0 0 12px var(--gold-55);
}
.xp-card > * { will-change: transform; }
.xp-card {
  position: fixed;
  z-index: var(--z-hud);
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  width: var(--card-w);
  --bezel: 7px;
  --r-out: 16px;
  padding: calc(var(--bezel) + var(--s5)) calc(var(--bezel) + var(--s6));
  border-radius: var(--r-out);
  
  background: none;
  border: 1px solid transparent;
  
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.2s ease;
}
.xp-card::before {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--r-out) - var(--bezel));
  z-index: -1;
  
  
  background: rgba(12, 13, 15, 0.80);
  transition: background 0.45s ease;
  
  box-shadow:
    0 2px 4px -2px rgba(0, 0, 0, 0.5),
    0 12px 26px -12px rgba(0, 0, 0, 0.6),
    0 40px 80px -24px rgba(0, 0, 0, 0.7),
    inset 0 18px 34px -20px rgba(0, 0, 0, 0.55);
}
body.is-rest .xp-card::before {
  
  
  background: rgba(9, 10, 12, 0.14);
  backdrop-filter: blur(3px) brightness(0.88);
  -webkit-backdrop-filter: blur(3px) brightness(0.88);
  transition: background 0.45s ease, backdrop-filter 0.45s ease;   
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.is-rest .xp-card::before {
    background: rgba(12, 13, 15, 0.94);
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.is-rest .xp-card::before {
    background: rgba(12, 13, 15, 0.94);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
.xp-card h2, .xp-card .c-label, .xp-card .c-sec,
.xp-card .c-note, .xp-card .c-det, .xp-card .c-matrow, .xp-card .c-count-row {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 4px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(0, 0, 0, 0.6);
}
.xp-card::after {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--r-out) - var(--bezel));
  z-index: -1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(../%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) {
  .xp-card::after { display: none; }
}
html.стъкло-старо .xp-card::after { mix-blend-mode: overlay; }
html.стъкло-старо .xp-card::before,
html.стъкло-старо body.is-rest .xp-card::before { transition: background 0.45s ease, backdrop-filter 0.45s ease; }
body.is-building .xp-card { opacity: 1; }
body.is-reveal .xp-card { opacity: 0; pointer-events: none; }
.xp-card.swap { opacity: 0; transform: translateY(-50%) translateY(6px); }
.c-label {
  margin-bottom: var(--s1);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold);
}
.xp-card h2 {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--ivory);
}
.c-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s3);
}
.c-count {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.c-dots { display: flex; flex: 1; align-items: center; gap: var(--s1); }
.c-dots span {
  flex: 0 0 auto;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.15s ease;
}
.c-dots span.f { background: var(--gold); }
.c-note {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--txt-92);
}
.c-note:empty, .sh-note:empty { display: none; }
.c-sec {
  margin: 14px 0 6px;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--txt-55);
}
.c-matrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.mat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.c-matrow b {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ivory);
}
.c-matrow span { font-size: var(--fs-label); color: var(--txt-78); }
.c-det { margin: 2px 0 0; display: grid; gap: 2px; font-size: 12.5px; }
.c-det > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding: 2px 0;
}
.c-det dt { font-weight: 500; color: var(--txt-78); }
.c-det dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ivory);
}
.xp-ring {
  position: fixed;
  z-index: var(--z-hud);
  left: var(--edge);
  bottom: var(--edge-v);
  width: var(--ring-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.is-building .xp-ring, body.is-reveal .xp-ring { opacity: 1; }
.xp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.xp-ring circle { fill: none; stroke-width: 2.5; }
.ring-bg { stroke: var(--hair-strong); }
.ring-fg {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 213.6;   
  stroke-dashoffset: 213.6;
}
.ring-glow {
  stroke: rgba(219, 182, 106, 0.275);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
}
.ring-txt {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.ring-txt small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--txt-55);
}
.xp-hint {
  position: fixed;
  z-index: var(--z-hud);
  left: 50%;
  bottom: var(--edge-v);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: #fff4dc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.xp-hint .hint-txt { position: relative; padding-bottom: var(--s2); white-space: nowrap; }
.xp-hint .hint-txt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(219, 182, 106, 0.08), var(--gold-hi), rgba(219, 182, 106, 0.08));
}
body.is-building .xp-hint { opacity: 1; }
body.is-reveal .xp-hint { opacity: 0; }
.xp-hint .line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--gold-hi));
}
.xp-hint .wheel {
  position: relative;
  width: 16px;
  height: 26px;
  border: 1.5px solid var(--gold-hi);
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.xp-hint .wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--gold-hi);
  animation: hint-drop 1.8s ease-in-out infinite;
}
@keyframes hint-drop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0.2; }
}
.xp-tools {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: var(--edge-v);
  display: flex;
  gap: var(--s3);
}
.xp-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  border: 0;
  color: var(--txt-78);
  cursor: pointer;
  transition:
    color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.xp-tools button:hover {
  color: var(--txt);
  transform: translateY(-1px);
}
.xp-tools button:active { transform: translateY(0); }
.xp-tools button svg { width: 20px; height: 20px; }
.xp-tools button[aria-pressed="false"] .snd-waves { opacity: 0.25; }
.xp-helpbox {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: calc(var(--edge-v) + 44px + var(--s3));
  width: min(300px, 80vw);
  padding: var(--s4) var(--s5);
  border-radius: 6px;
  background: rgba(11, 12, 14, 0.88);
  border: 1px solid var(--hair);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--txt-85);
}
.xp-helpbox p + p { margin-top: 6px; }
.xp-helpbox b { color: var(--txt); }
.xp-reveal {
  position: fixed;
  z-index: var(--z-reveal);
  left: 50%;
  bottom: clamp(40px, 9vh, 80px);
  transform: translateX(-50%) translateY(24px);
  width: min(680px, calc(100vw - 2 * var(--edge)));
  padding: clamp(var(--s10), 6vw, var(--s16)) clamp(var(--s6), 4vw, var(--s12));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s;
}
body.is-reveal .xp-reveal {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.xp-reveal .rv-rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto clamp(var(--s5), 2.4vw, var(--s7));
  background: linear-gradient(90deg,
              rgba(219, 182, 106, 0) 0%, var(--gold) 50%, rgba(219, 182, 106, 0) 100%);
  transform: scaleX(0.2);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s, opacity 0.6s ease 0.55s;
}
body.is-reveal .xp-reveal .rv-rule { transform: scaleX(1); opacity: 1; }
.xp-reveal h2 {
  font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--txt-85);          
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.xp-reveal .xp-tel {
  display: inline-block;
  position: relative;
  margin-top: clamp(var(--s3), 1.4vw, var(--s5));
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: 0.012em;
  color: var(--gold);
  text-decoration: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  transition: color 0.3s ease;
}
.xp-reveal .xp-tel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-55);
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-reveal .xp-tel:hover { color: var(--gold-hi); }
.xp-reveal .xp-tel:hover::after,
.xp-reveal .xp-tel:focus-visible::after { transform: scaleX(1); }
.xp-reveal .xp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: clamp(var(--s8), 3.4vw, var(--s12));   
}
body.xp .xp-reveal .btn--rv {
  background: transparent;
  border: 1px solid var(--gold-55);
  color: var(--gold-hi);
  box-shadow: none;
  letter-spacing: var(--tr-caps);
  transition: background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.35s ease;
}
body.xp .xp-reveal .btn--rv:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #17130c;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
body.xp .xp-reveal .btn--rv:active { transform: translateY(0); box-shadow: none; }
.xp-reveal .rv-link {
  display: inline-block;
  position: relative;
  margin-top: clamp(var(--s3), 1.2vw, var(--s4));
  padding: 8px 2px 6px;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--gold-hi);
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  transition: color 0.3s ease;
}
.xp-reveal .rv-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--gold-55);
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-reveal .rv-link:hover { color: var(--gold); }
.xp-reveal .rv-link:hover::after,
.xp-reveal .rv-link:focus-visible::after { transform: scaleX(1); }
.xp-reveal .note {
  margin-top: clamp(var(--s5), 2.2vw, var(--s7));
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--txt-78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.xp-reveal h2,
.xp-reveal .xp-tel,
.xp-reveal .xp-actions,
.xp-reveal .rv-link,
.xp-reveal .note {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-reveal .xp-reveal h2,
body.is-reveal .xp-reveal .xp-tel,
body.is-reveal .xp-reveal .xp-actions,
body.is-reveal .xp-reveal .rv-link,
body.is-reveal .xp-reveal .note { opacity: 1; transform: translateY(0); }
body.is-reveal .xp-reveal h2         { transition-delay: 0.70s; }
body.is-reveal .xp-reveal .xp-tel    { transition-delay: 0.86s; }
body.is-reveal .xp-reveal .xp-actions{ transition-delay: 1.00s; }
body.is-reveal .xp-reveal .rv-link   { transition-delay: 1.06s; }
body.is-reveal .xp-reveal .note      { transition-delay: 1.12s; }
@media (prefers-reduced-motion: reduce) {
  .xp-reveal, .xp-reveal .rv-rule, .xp-reveal h2, .xp-reveal .xp-tel,
  .xp-reveal .xp-actions, .xp-reveal .rv-link, .xp-reveal .note { transition-duration: 0.01ms; }
  .xp-reveal .rv-rule { transform: scaleX(1); }
  .xp-reveal h2, .xp-reveal .xp-tel,
  .xp-reveal .xp-actions, .xp-reveal .rv-link, .xp-reveal .note { transform: none; }
}
@media (max-width: 560px) {
  .xp-reveal { padding-inline: var(--s5); bottom: clamp(104px, 15vh, 150px); }
  .xp-reveal .xp-tel { font-size: clamp(1.6rem, 0.85rem + 4vw, 2.4rem); }
  body.xp .xp-reveal .btn--rv {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    padding-inline: 1.2rem;
    white-space: nowrap;
  }
  .xp-reveal .note { font-size: 0.625rem; letter-spacing: 0.07em; max-width: 26rem; }
}
body.xp .btn {
  background: linear-gradient(180deg, var(--copper), var(--copper-deep));
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
body.xp .btn:hover {
  background: linear-gradient(180deg, oklch(60% 0.13 57), var(--copper));
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.xp .btn:active { transform: translateY(0); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
body.xp .btn--ghost {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}
body.xp .btn--ghost:hover { background: var(--ivory); color: #14161a; box-shadow: none; transform: none; }
.xp-fallback { display: none; }
body.xp-nogl .xp-runway, body.xp-nogl .xp-timeline, body.xp-nogl .xp-card,
body.xp-nogl .xp-ring, body.xp-nogl .xp-hint, body.xp-nogl .xp-intro,
body.xp-nogl .xp-tools, body.xp-nogl .xp-frame,
body.xp-nogl .xp-reveal, body.xp-nogl .xp-loader { display: none; }
body.xp-nogl { overflow: hidden; }
body.xp-nogl.xp-film { overflow-x: clip; overflow-y: visible; }
body.xp-nogl .xp-fallback {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  display: grid;
  place-items: center;
  padding: calc(var(--s10) + 2.6rem) var(--s6) calc(var(--s10) + 6.2rem);
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(219, 182, 106, 0.07), transparent 68%),
    radial-gradient(120% 100% at 50% 50%, #100e0b 0%, #0b0a08 55%, #060505 100%);
}
.xp-fallback .fb-line {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.05rem + 3.5vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: 0.008em;
  text-align: center;
  text-wrap: balance;
  color: var(--ivory);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.85);
}
.xp-fallback .fb-line > span {
  display: inline-block;
  animation: fb-rise 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fb-rise {
  from { opacity: 0; transform: translate3d(0, 0.42em, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-fallback .fb-line > span { animation: none; }
}
.xp-note {
  position: fixed;
  left: 50%;
  bottom: max(var(--s6), env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: calc(var(--z-nav) - 1);
  width: min(46rem, calc(100vw - 2 * var(--s6)));
  display: grid;
  gap: var(--s3);
  justify-items: center;
  text-align: center;
  padding: var(--s6) var(--s6) var(--s5);
  border: 1px solid var(--gold-55);
  border-radius: 2px;
  background: rgba(10, 9, 7, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}
.xp-note-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--ivory);
}
.xp-note-sub {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--txt-78);
}
.xp-note-btn {
  margin-top: var(--s1);
  padding: var(--s3) var(--s7);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #100e0b;
  background: var(--gold);
  border: 1px solid var(--gold-lo);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) ease, transform var(--dur-fast, 150ms) ease;
}
.xp-note-btn:hover { background: var(--gold-hi); }
.xp-note-btn:active { transform: translateY(1px); }
.xp-note-btn:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .xp-note-btn { transition: none; }
  .xp-note-btn:active { transform: none; }
}
@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  .xp-timeline { display: none; }
  
  .xp-hero {
    background:
      linear-gradient(to right,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.55) 12%,
        rgba(0,0,0,0.18) 30%,
        rgba(0,0,0,0.0) 46%,
        rgba(0,0,0,0.0) 60%,
        rgba(0,0,0,0.18) 76%,
        rgba(0,0,0,0.55) 90%,
        rgba(0,0,0,0.88) 100%),
      linear-gradient(100deg,
        rgba(5, 3, 2, 0.62) 0%,
        rgba(5, 3, 2, 0.34) 40%,
        rgba(5, 3, 2, 0.08) 62%,
        transparent 76%),
      linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 28%, rgba(0,0,0,0.01) 48%),
      linear-gradient(170deg, rgba(12,6,2,0.0) 38%, rgba(10,5,2,0.42) 76%),
      url("../../assets/hero_portrait.jpg") center / cover no-repeat;
  }
  
  .xp-intro .hero-left {
    left: var(--edge);
    right: var(--edge);
    top: 45%;
    max-width: none;
  }
  .xp-intro .hero-h1 { font-size: clamp(2.2rem, 9.4vw, 3.2rem); line-height: 1.06; }
  .xp-card {
    top: auto;
    bottom: clamp(var(--s16), 12vh, 96px);
    right: var(--s3);
    transform: none;
    width: min(272px, 74vw);
    padding: var(--s4) 18px;
  }
  .xp-card.swap { transform: translateY(8px); }
  .xp-card .c-note, .xp-card .c-det div:nth-child(n+3) { display: none; }
  
  .xp-ring { --ring-size: 104px; }
  .xp-hint { display: none; }
  .xp-tools { bottom: auto; top: calc(var(--edge) + 56px); }
}
@media (max-width: 430px) {
  .xp-card { bottom: calc(var(--edge-v) + var(--ring-size) + var(--s3)); }
}
@media (max-width: 640px) {
  .xp-nav .brand { gap: var(--s3); }
  .xp-nav .brand svg { width: 34px; height: 25px; }
  .brand-txt { row-gap: 6px; }
  .brand-txt strong { font-size: 1.1rem; }
  .brand-txt small { display: none; }
  .nav-cta { padding: var(--s2) 2px 8px; font-size: var(--fs-micro); letter-spacing: 0.14em; }
}
@media (max-height: 830px) and (min-width: 901px) {
  .xp-card { top: auto; bottom: var(--edge-v); transform: none; }
  .xp-card.swap { transform: translateY(8px); }
  .xp-card .c-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hint .wheel::after { animation: none; }
}
.xp-loader {
  position: fixed;
  z-index: calc(var(--z-nav) + 5);
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.xp-loader span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold) 60%, var(--gold-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s ease-out;
}
.xp-loader.is-done { opacity: 0; }
body.xp-nogl .xp-loader { display: none; }
.c-expand { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  .c-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
    margin-top: var(--s4);
    padding: var(--s3) 0 0;
    border: 0;
    border-top: 1px solid var(--hair);
    background: none;
    cursor: pointer;
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--gold);
  }
  .c-expand svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
  .c-expand:active { color: var(--gold-hi); }
}
.xp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 2);
  background: rgba(4, 3, 2, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.xp-sheet-backdrop.is-open { opacity: 1; }
.xp-sheet {
  position: fixed;
  z-index: calc(var(--z-nav) - 1);
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(165deg, rgba(26, 27, 30, 0.97), rgba(10, 11, 13, 0.98));
  border-top: 1px solid var(--hair-strong);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(103%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-sheet.is-open { transform: translateY(0); }
.xp-sheet[hidden], .xp-sheet-backdrop[hidden] { display: none; }
.xp-sheet::before {
  content: "";
  position: absolute;
  top: var(--s2);
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--hair-strong);
}
.sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--hair);
}
.sh-head > div { min-width: 0; }
.sh-count {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.sh-head h2, .sh-head .sh-name {
  margin: var(--s1) 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.18;
  color: var(--ivory);
}
#sh-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: none;
  color: var(--txt-85);
  cursor: pointer;
}
#sh-close svg { width: 16px; height: 16px; stroke: currentColor; }
#sh-close:active { color: var(--ivory); border-color: var(--gold-55); }
.sh-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s6) calc(var(--s8) + env(safe-area-inset-bottom));
}
.sh-note {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--txt-92);
}
.sh-mat {
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ivory);
}
.sh-scroll .c-sec { margin-top: var(--s5); }
.sh-stages {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
}
.sh-stages li {
  display: grid;
  grid-template-columns: 14px 2ch 1fr;
  column-gap: var(--s3);
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--txt-78);
  cursor: pointer;
}
.sh-stages li:last-child { border-bottom: 0; }
.sh-stages li .dot {
  justify-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--txt-38);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sh-stages li .num {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--txt-38);
}
.sh-stages li.done { color: var(--txt-92); }
.sh-stages li.done .num { color: var(--txt-55); }
.sh-stages li.done .dot { background: rgba(255, 255, 255, 0.8); border-color: transparent; }
.sh-stages li.on { color: #fff; }
.sh-stages li.on .num { color: var(--gold); font-weight: 600; }
.sh-stages li.on .dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-16), 0 0 12px var(--gold-55);
}
@media (min-width: 901px) {
  .xp-sheet,
  .xp-sheet-backdrop { display: none; }
}
.xp-hint .sharpen {
  width: 74px;
  height: 3px;
  margin-top: 2px;
  border-radius: 3px;
  background: rgba(14, 11, 8, 0.46);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: 50% 50%;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-hint .sharpen.on { opacity: 1; transform: scaleX(1); }
.xp-hint .sharpen i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(219, 182, 106, 0) 0%, var(--gold-55) 42%, var(--gold-hi) 100%);
  box-shadow: 0 0 6px rgba(219, 182, 106, 0.55);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-hint .sharpen.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(219, 182, 106, 0.5), transparent);
  transform: translateX(-100%);
  animation: sharpen-sweep 1.6s ease-in-out infinite;
}
.xp-hint .sharpen { position: relative; }
.xp-hint .sharpen-txt {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.xp-hint .sharpen-txt.on { opacity: 0.85; transform: translateY(0); }
.xp-hint .sharpen-txt.done { color: var(--gold-hi); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .xp-hint .sharpen-txt { transition: none; }
}
@keyframes sharpen-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hint .sharpen.busy::after { animation: none; }
  .xp-hint .sharpen, .xp-hint .sharpen i { transition: none; }
}
.подсказката-спря .hero-cta .hc-line::after,
.подсказката-спря .hero-cta .hc-ico::after,
.подсказката-спря .xp-hint .wheel::after {
  animation-play-state: paused !important;
}
.xp-timeline li.on {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .xp-timeline li { transition: color 0.25s ease; }
}
.sh-stagewrap { position: relative; }
.sh-stages li.on { position: relative; z-index: 1; }
.xp-ring svg { z-index: 1; }
.ring-txt { position: relative; z-index: 1; }
.c-fold {
  position: fixed;
  z-index: var(--z-hud);
  top: 50%;
  right: calc(var(--edge) + var(--card-w) + var(--s2));
  display: grid;
  place-items: center;
  width: 26px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--gold-hi);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    right 0.45s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.35s ease,
    border-color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.c-fold svg {
  width: 20px; height: 20px; opacity: 0.92;
  transform: rotate(180deg);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.8));
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}
.c-fold:hover svg { opacity: 1; }
.c-fold:focus-visible { outline: none; }
.c-fold:focus-visible svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(219, 182, 106, 0.55)); }
body.is-building .c-fold { opacity: 1; pointer-events: auto; }
body.is-reveal .c-fold { opacity: 0; pointer-events: none; }
body.is-card-folded .xp-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(calc(var(--card-w) + var(--edge)));
}
body.is-card-folded .c-fold { right: var(--edge); }
body.is-card-folded .c-fold svg { transform: rotate(0deg); }
.xp-card { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .c-fold, .c-fold svg, .xp-card { transition: opacity 0.2s ease; }
}
.xp-tools .orb-mid { color: var(--gold-90); }
.xp-tools .orb-mid:hover { color: var(--gold-hi); }
.xp-tools #orb-den[aria-pressed="true"] { color: var(--gold-hi); }
.xp-daynight {
  position: fixed;
  z-index: var(--z-hud);
  left: calc(var(--edge) + var(--ring-size) + var(--s4));
  bottom: calc(var(--edge-v) + (var(--ring-size) - 52px) / 2);
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(10, 11, 13, 0.72) 55%);
  border: 1px solid rgba(219, 182, 106, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(219, 182, 106, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px -8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  user-select: none;
  -webkit-user-select: none;
}
body.is-building .xp-daynight, body.is-reveal .xp-daynight { opacity: 1; pointer-events: auto; }
.xp-daynight button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: var(--txt-78);
  cursor: pointer;
  transition:
    border-color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.xp-daynight button + button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(219, 182, 106, 0.2);
}
.xp-daynight button svg { width: 20px; height: 20px; }
.xp-daynight button:hover { color: var(--txt); }
.xp-daynight button[aria-pressed="true"] { color: var(--gold-hi); border-color: var(--gold-55); }
.xp-daynight button:active { transform: scale(0.94); }
.xp-daynight button:focus-visible { outline: 1px solid var(--gold-55); outline-offset: 2px; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  .xp-daynight { bottom: var(--edge-v); }
  .xp-daynight button { width: 38px; height: 38px; }
  .xp-daynight button svg { width: 17px; height: 17px; }
  .xp-tools #orb-den { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-daynight, .xp-daynight button { transition: none; }
}
.xp-tools button:active {
  transform: translateY(0) scale(0.94);
  color: var(--gold-hi);
}
.xp-tools { user-select: none; -webkit-user-select: none; touch-action: none; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  .xp-tools { gap: var(--s2); }
  .xp-tools button { width: 38px; height: 38px; }
  .xp-tools button svg { width: 17px; height: 17px; }
}
.xp-tiles {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: calc(var(--edge-v) + 44px + var(--s3));
  width: min(268px, 82vw);
  padding: var(--s4) var(--s5) var(--s5);
  border-radius: 6px;
  background: rgba(11, 12, 14, 0.9);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  color: var(--txt-78);
  font-size: var(--fs-ui);
  backdrop-filter: blur(6px);
}
.xp-tiles[hidden] { display: none; }
.tl-h {
  margin: 0 0 var(--s2);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.tl-h + * + .tl-h { margin-top: var(--s4); }
.tl-models, .tl-tones { list-style: none; margin: 0; padding: 0; }
.tl-models li + li { margin-top: 2px; }
.tl-models button {
  display: flex; align-items: baseline; gap: var(--s2);
  width: 100%; padding: 6px 8px;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--txt-78); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.tl-models button:hover:not(:disabled) { border-color: var(--gold); color: var(--txt); }
.tl-models button[aria-pressed="true"] { border-color: var(--gold); color: var(--txt); background: rgba(219, 182, 106, 0.09); }
.tl-models button:disabled { opacity: 0.42; cursor: not-allowed; }
.tl-models small { font-size: 0.66rem; opacity: 0.62; letter-spacing: 0.04em; }
.tl-tones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl-tones button {
  display: block; width: 100%; aspect-ratio: 1; padding: 0;
  border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--о); cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tl-tones button:hover { transform: translateY(-1px); border-color: var(--gold); }
.tl-tones button[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(219, 182, 106, 0.35);
}
.tl-note { margin: var(--s3) 0 0; font-size: 0.66rem; line-height: 1.45; opacity: 0.6; }
.xp-tiles :focus-visible, .xp-tools :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .xp-tiles button { transition: none; }
}
.xp-outro {
  position: relative;
  z-index: 16;
  background:
    linear-gradient(180deg, rgba(10, 9, 7, 0) 0%, #0a0907 5rem),
    radial-gradient(120% 60% at 50% 0%, rgba(219, 182, 106, 0.07) 0%, transparent 60%),
    #0a0907;
  color: oklch(97% 0.006 85 / 0.9);
  padding-block: clamp(5rem, 3rem + 7vw, 11rem) clamp(3rem, 2rem + 4vw, 6rem);
}
.xp-outro .container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 3rem);
}
.xp-outro h2 {
  font-family: var(--font-display, "Prata", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: #f1e6d3;
  margin-block: 0 clamp(1rem, 0.6rem + 1vw, 1.8rem);
  max-width: 24ch;
}
.xp-outro h2 + .outro-lead { margin-top: -0.4rem; }
.outro-lead {
  max-width: 62ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.65;
  color: oklch(96% 0.008 85 / 0.62);
  margin-bottom: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
}
.outro-cta {
  max-width: 62ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  color: oklch(96% 0.008 85 / 0.7);
}
.outro-cta a {
  color: #dbb66a;
  text-decoration: underline;
  text-decoration-color: rgba(219, 182, 106, 0.5);
  text-underline-offset: 0.22em;
}
.outro-cta a:hover { color: #f1e6d3; text-decoration-color: #dbb66a; }
body.xp .site-footer { position: relative; z-index: 16; }
body.xp .site-footer {
  background:
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    #0a0907;
  border-top: 1px solid var(--hair);
  color: var(--txt-55);
}
body.xp .site-footer .brand { color: var(--ivory); }
body.xp .site-footer h3 { color: var(--txt-92); }
body.xp .site-footer a { color: var(--txt-78); }
body.xp .site-footer a:hover { color: var(--gold-hi); }
body.xp .footer-legal { border-top: 1px solid var(--hair-soft); }
.footer-sources { margin-block: 1.6rem; font-size: var(--text-sm); }
.footer-sources ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
body.xp-nogl .xp-outro, body.xp-nogl .site-footer { z-index: 0; }
.xp-outro, body.xp .site-footer { z-index: 16; }
body.xp-booting .xp-outro { content-visibility: auto; contain-intrinsic-size: auto 900px; }
body.xp-booting .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
body.xp-nogl .xp-outro, body.xp-nogl .site-footer { content-visibility: visible; }
body.is-outro .xp-reveal,
body.is-outro .xp-tools { opacity: 0; pointer-events: none; }
body.is-outro .xp-nav {
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.92), rgba(10, 9, 7, 0.55));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.xp-nav { transition: background 0.35s ease, border-color 0.35s ease; }
.xp-reveal, .xp-tools { transition: opacity 0.3s ease; }
.xp-outro { scroll-margin-top: 4.5rem; }
.outro-form { margin-top: 0; max-width: 44rem; }
.outro-form h2 { margin-bottom: 0.8rem; }
.of-form { margin-top: 1.4rem; display: grid; gap: 1rem; }
.of-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.of-field { display: grid; gap: 0.4rem; }
.of-field label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: oklch(96% 0.008 85 / 0.55);
}
.of-field input, .of-field textarea {
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: #f1e6d3;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}
.of-field input::placeholder, .of-field textarea::placeholder { color: rgba(241, 230, 211, 0.35); }
.of-field textarea { min-height: 6.5rem; resize: vertical; }
.of-field input:focus-visible, .of-field textarea:focus-visible {
  outline: 2px solid var(--copper, oklch(58% 0.11 55)); outline-offset: 2px;
}
.of-send {
  min-height: 48px; min-width: 48px;
  justify-self: start;
  padding: 0.8rem 1.7rem;
  font: inherit; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.8rem;
  color: #0a0907;
  background: #dbb66a;
  border: 0; border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.of-send:hover { background: #dbb66a; }
.of-send:active { transform: translateY(1px); }
.of-send:focus-visible { outline: 2px solid var(--copper, oklch(58% 0.11 55)); outline-offset: 3px; }
.of-form[aria-busy="true"] .of-send { opacity: 0.55; cursor: progress; }
.of-fine { font-size: 0.82rem; color: oklch(96% 0.008 85 / 0.52); margin: 0; }
.of-fine a { color: inherit; }
.outro-form .form-status { margin: 0; font-weight: 600; }
.outro-form .form-status.is-ok { color: oklch(45% 0.13 150); }
.outro-form .form-status.is-err { color: oklch(50% 0.18 25); }
.outro-form .form-status.is-warn { color: oklch(48% 0.13 70); }
.xp-outro .hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
body.xp-film .xp-fallback {
  padding: 0;
  min-height: 0;
}
body.xp-film .film-wrap {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  height: 100vh;                 
  overflow: hidden;
  background: #14100e;
}
body.xp-film .film-canvas {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}
body.xp-film .film-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .10);
}
body.xp-film .film-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #dbb66a;
  transition: width .12s linear;
}
body.xp-film.xp-film-готов .xp-runway {
  display: block;
  height: 900vh;
}
@media (prefers-reduced-motion: reduce) {
  body.xp-film.xp-film-готов .xp-runway { height: 400vh; }
}
html.wk .xp-card, html.wk .xp-card *, html.wk .xp-timeline, html.wk .xp-timeline *,
html.wk .xp-nav, html.wk .xp-nav * {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85) !important;
  box-shadow: none !important;
  filter: none !important;
}