/* Астра · дизайн-система «ночной атлас»: глубокий индиго, кремовые чернила, один золотой сигнал.
   Правила: цвета и шрифты только через токены, иконки только SVG, движение только через opacity/transform. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Prata&display=swap');

:root{
  --paper:oklch(15.5% .036 286); --paper-2:oklch(19.5% .042 286); --paper-3:oklch(24% .048 286); --paper-4:oklch(29% .052 286);
  --ink:oklch(95.500% .014 86); --ink-2:oklch(86% .022 290); --muted:oklch(70% .032 290); --faint:oklch(56% .034 290);
  --rule:oklch(28% .045 286); --rule-2:oklch(38% .05 286);
  --accent:oklch(81% .105 82); --accent-hi:oklch(90% .075 88); --accent-lo:oklch(66% .1 78); --accent-ink:oklch(19% .04 286);
  --accent-wash:oklch(81% .105 82 / .12); --accent-line:oklch(81% .105 82 / .45);
  --rose:oklch(76% .115 8); --mint:oklch(80% .095 165);
  --shade:oklch(8% .03 286 / .6);
  --font-display:'Prata',Georgia,'Times New Roman',serif; --font-body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-card:20px; --r-ctl:14px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* два неподвижных свечения на фоне и звёздный холст */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(46vmax 34vmax at 88% -6%,oklch(42% .13 300 / .34),transparent 70%),
  radial-gradient(40vmax 30vmax at -8% 62%,oklch(48% .1 70 / .13),transparent 70%),var(--paper)}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.12;margin:0;letter-spacing:-.012em;overflow-wrap:break-word;min-width:0;text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,72px)} h2{font-size:clamp(29px,3.6vw,46px)} h3{font-size:22px;line-height:1.2}
h4{margin:0;font:600 15.500px/1.35 var(--font-body);color:var(--accent-hi)}
p{margin:0 0 12px;text-wrap:pretty}
.mute{color:var(--muted)} .faint{color:var(--faint)} .gold{color:var(--accent)} .center{text-align:center}
.small{font-size:14px} .tiny{font-size:12.500px;line-height:1.5}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.label{font-size:13.500px;font-weight:600;color:var(--accent)}
.ic{flex:none;display:inline-block;vertical-align:-.18em}
.num{font-variant-numeric:tabular-nums}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:600 16px/1.2 var(--font-body);
  padding:16px 28px;border-radius:var(--r-pill);color:var(--accent-ink);background:var(--accent);text-align:center;text-decoration:none;
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .4),0 10px 28px -14px var(--accent);transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,opacity .18s}
.btn:hover{background:var(--accent-hi);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:scale(.985)} .btn[disabled]{opacity:.5;pointer-events:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.btn.ghost:hover{background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--accent-line)}
.btn.block{display:flex;width:100%} .btn.sm{padding:11px 20px;font-size:14.500px}
.btn.quiet{background:var(--paper-3);color:var(--ink);box-shadow:none} .btn.quiet:hover{background:var(--paper-4)}
.link{background:none;border:0;padding:0;color:var(--accent-hi);font:600 14.500px var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* поверхности: высота задаётся шагом светлоты, без стекла и рамок */
.card{background:var(--paper-2);border-radius:var(--r-card);padding:24px;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .045)}
.card.hi{background:var(--paper-3)}
.card.gilt{background:linear-gradient(160deg,oklch(27% .06 80 / .5),var(--paper-2) 62%);box-shadow:inset 0 0 0 1px var(--accent-line)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);border:0;background:var(--paper-3);color:var(--ink-2);
  font:500 14.500px var(--font-body);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .15s}
.chip .ic{color:var(--accent)} .chip:hover{background:var(--paper-4);color:var(--ink)}
.chip.on{background:var(--accent-wash);color:var(--accent-hi);box-shadow:inset 0 0 0 1px var(--accent-line)}
.chip.static{cursor:default} .chip.static:hover{background:var(--paper-3);color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.500px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent-wash);color:var(--accent-hi);white-space:nowrap}
.tag.solid{background:var(--accent);color:var(--accent-ink)}

/* формы */
label.f{display:block;font-size:13.500px;font-weight:500;color:var(--muted);margin:0 0 6px}
input,select,textarea{width:100%;font:500 16px var(--font-body);color:var(--ink);background:var(--paper-3);border:1px solid transparent;
  border-radius:var(--r-ctl);padding:14px 16px;outline:none;transition:border-color .15s,background-color .15s;color-scheme:dark}
input:hover,select:hover,textarea:hover{background:var(--paper-4)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--paper-3)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox]{width:22px;height:22px;padding:0;accent-color:var(--accent);flex:none}
select option{background:var(--paper-3);color:var(--ink)}
.row{display:flex;gap:12px} .row>*{flex:1;min-width:0} .gap{display:flex;flex-wrap:wrap;gap:10px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}

.ac{position:relative} .ac-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:var(--paper-4);border-radius:var(--r-ctl);overflow:hidden;box-shadow:0 24px 50px -12px var(--shade)}
.ac-list div{padding:12px 16px;cursor:pointer;font-size:15px} .ac-list div:hover{background:var(--rule-2)} .ac-list small{color:var(--muted)}

/* шкалы и оценки */
.bar{height:6px;border-radius:99px;background:var(--paper-4);overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--v,0));transition:transform .9s var(--ease)}
.pips{display:inline-flex;gap:5px;vertical-align:middle}.pips i{width:16px;height:5px;border-radius:9px;background:var(--paper-4)}.pips i.on{background:var(--accent)}
.wheel{width:100%;height:auto;display:block}

.spin{width:22px;height:22px;border-radius:50%;border:2.500px solid var(--rule-2);border-top-color:var(--accent);animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade{animation:up .5s var(--ease) both}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);background:var(--paper-4);padding:12px 20px;border-radius:var(--r-ctl);
  z-index:100;font-weight:500;font-size:14.500px;box-shadow:0 18px 44px -10px var(--shade);max-width:90vw;text-align:center}
.blur{filter:blur(7px);user-select:none;pointer-events:none;opacity:.7}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* совместимость со служебными страницами (CRM, оферта): прежние имена токенов */
:root{--bg:var(--paper);--bg2:var(--paper-2);--card:var(--paper-2);--card2:var(--paper-3);--line:var(--rule-2);--text:var(--ink);--dim:var(--faint);--mute:var(--muted);
  --gold:var(--accent);--gold2:var(--accent-hi);--violet:oklch(68% .15 292);--pink:var(--rose);--green:var(--mint);--red:oklch(70% .15 25);
  --serif:var(--font-display);--sans:var(--font-body);--r:var(--r-card)}
.eyebrow{font-size:13px;font-weight:600;color:var(--accent)}
.dim{color:var(--faint)}

/* матрица пары */
.mx text{font-family:var(--font-body);font-variant-numeric:tabular-nums}
.mx-n{opacity:0;animation:mx-in .5s var(--ease) forwards;animation-delay:calc(var(--i)*28ms)}
@keyframes mx-in{to{opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.mxleg{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:16px;font-size:14.500px;color:var(--ink-2)}
.mxleg span{display:inline-flex;align-items:center;gap:7px}.mxleg .ic{color:var(--accent)}.mxleg .rose .ic{color:var(--rose)}.mxleg b{color:var(--ink)}
.item .arc{margin:6px 0 8px;font-size:13.500px;color:var(--accent)}.item .arc b{font-weight:600}
.item .aff{display:flex;gap:9px;margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--accent-wash);color:var(--accent-hi);font-size:15px}.item .aff .ic{margin-top:4px}
@media(prefers-reduced-motion:reduce){.mx-n{animation:none;opacity:1}}

/* круг арканов и заставка */
.orbit{position:relative;width:100%;aspect-ratio:1}
.ring22{position:absolute;inset:0;animation:spin22 110s linear infinite}
.c22{position:absolute;left:50%;top:50%;width:8.2%;aspect-ratio:5/8;margin:-6.56% 0 0 -4.1%;border-radius:9%/5.6%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;
  background:linear-gradient(165deg,var(--paper-4),var(--paper-2));box-shadow:inset 0 0 0 1px var(--accent-line),0 6px 18px -8px var(--shade);color:var(--accent);font-style:normal;
  transform:rotate(calc(var(--i)*16.3636deg)) scale(.25);opacity:0;transition:transform 1.1s var(--ease) calc(var(--i)*38ms),opacity .5s linear calc(var(--i)*38ms)}
.c22 b{font:400 clamp(7px,1.25vw,11px)/1 var(--font-display);color:var(--accent-hi);letter-spacing:.02em}.c22 svg{width:54%;height:auto}
.orbit.in .c22{transform:rotate(calc(var(--i)*16.3636deg)) translateY(-334%);opacity:1}
.orbit.in .ring22{animation:spin22-in 2.6s cubic-bezier(.16,.8,.2,1),spin22 110s linear 2.6s infinite}
@keyframes spin22{to{transform:rotate(360deg)}}
@keyframes spin22-in{from{transform:rotate(-150deg)}to{transform:rotate(0)}}
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(60vmax 60vmax at 50% 50%,oklch(22% .06 290 / .9),oklch(13% .035 286 / .97));transition:opacity .6s var(--ease)}
.intro.out{opacity:0;pointer-events:none}.intro .orbit{width:min(78vmin,520px)}
.intro-b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--accent);animation:fade-up .9s var(--ease) .25s both}
.intro-b span{font:400 clamp(26px,5vmin,40px) var(--font-display);color:var(--ink)}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ring22,.orbit.in .ring22{animation:none}.c22{transition:none}}

/* живая схема: кольцо у подсвеченной точки, бегущая линия любви и денег, вращение пунктира */
.mx .halo{opacity:0;transform-box:fill-box;transform-origin:center}
.mx-n.hot .halo{animation:mx-halo 1.5s ease-out infinite}
.mx-n.hot>circle:not(.halo){stroke-width:2.600}
@keyframes mx-halo{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.3)}}
.mx-flow{animation:mx-flow 1.6s linear infinite}
@keyframes mx-flow{to{stroke-dashoffset:-10}}
.mx-spin{transform-box:fill-box;transform-origin:center;animation:spin22 60s linear infinite reverse}
/* по кругу карт бежит свет */
.orbit.in .c22{animation:c22-glow 5.5s ease-in-out calc(var(--i)*250ms + 2.6s) infinite}
@keyframes c22-glow{0%,70%,100%{filter:none}35%{filter:brightness(1.75) drop-shadow(0 0 7px oklch(81% .105 82 / .65))}}
@media(prefers-reduced-motion:reduce){.mx-n.hot .halo,.mx-flow,.mx-spin,.orbit.in .c22{animation:none}.mx-n.hot .halo{opacity:.7}}