:root{
  --black:#040006;
  --panel:rgba(14,0,20,.68);
  --panel-strong:rgba(20,0,28,.86);
  --gold:#f5c76f;
  --gold-bright:#ffe5a4;
  --purple:#8a31ff;
  --red:#ff244f;
  --text:#fff3df;
  --muted:#d9bdd8;
  --line:rgba(245,199,111,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,36,79,.24),transparent 28rem),
    radial-gradient(circle at 82% 8%,rgba(138,49,255,.34),transparent 32rem),
    linear-gradient(135deg,#040006,#190020 50%,#070008);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  background:url("../assets/witch-hero.png") center/cover no-repeat;
  opacity:.48;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(4,0,6,.92),rgba(4,0,6,.54),rgba(4,0,6,.88)),
    radial-gradient(circle at 50% 45%,rgba(255,199,111,.08),transparent 26rem);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
#numberField{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none;
}
.cosmic-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(245,199,111,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,36,79,.04) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(circle at center,#000 20%,transparent 78%);
}
.aura{
  position:fixed;
  width:36vw;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(48px);
  opacity:.35;
  pointer-events:none;
  animation:drift 12s ease-in-out infinite alternate;
}
.aura-red{left:-10vw;top:8vh;background:var(--red)}
.aura-gold{right:-8vw;top:24vh;background:var(--gold);animation-delay:-4s}
.aura-purple{left:38vw;bottom:-15vw;background:var(--purple);animation-delay:-7s}
.back-to-steffsweb{
  position:fixed;
  top:14px;
  left:14px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  color:var(--gold-bright);
  background:rgba(6,0,10,.74);
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:900;
  box-shadow:0 0 34px rgba(138,49,255,.25);
  backdrop-filter:blur(16px);
}
.back-to-steffsweb b{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.back-to-steffsweb span{font-size:1.35rem}
.app{
  width:min(1180px,calc(100% - 2rem));
  margin:0 auto;
  padding:5.5rem 0 4rem;
}
.hero{
  min-height:42vh;
  display:grid;
  align-content:end;
  padding:4rem 0 2rem;
}
.kicker{
  color:var(--gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.18em;
}
h1,h2,h3{
  margin:0;
  font-family:Georgia,serif;
  color:var(--gold-bright);
  line-height:.95;
}
h1{
  max-width:850px;
  margin:.7rem 0 1rem;
  font-size:clamp(3.2rem,9vw,7.8rem);
  text-shadow:0 0 36px rgba(138,49,255,.65);
}
.hero p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.65;
}
.oracle{
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr;
  gap:1.2rem;
  align-items:stretch;
}
.input-panel,.number-stage,.result{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(21,0,28,.78),rgba(4,0,6,.7));
  border-radius:10px;
  box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 0 60px rgba(138,49,255,.08);
  backdrop-filter:blur(18px);
}
.input-panel{
  display:grid;
  gap:.8rem;
  padding:1.35rem;
}
.input-panel h2{font-size:2rem;margin-bottom:.35rem}
label{
  color:var(--gold-bright);
  font-weight:900;
}
input{
  width:100%;
  min-height:3.4rem;
  padding:.85rem 1rem;
  color:var(--text);
  background:rgba(3,0,5,.72);
  border:1px solid rgba(245,199,111,.28);
  border-radius:8px;
  outline:none;
}
input:focus{
  border-color:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(245,199,111,.12),0 0 28px rgba(138,49,255,.32);
}
.primary{
  min-height:3.5rem;
  margin-top:.5rem;
  color:#160013;
  background:linear-gradient(100deg,var(--gold-bright),#ffb45f,var(--red));
  border:0;
  border-radius:8px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 18px 50px rgba(255,36,79,.24);
}
.hint{
  margin:.25rem 0 0;
  color:var(--muted);
  line-height:1.5;
}
.number-stage{
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
  padding:1.4rem;
  overflow:hidden;
}
.number-stage:before{
  content:"";
  position:absolute;
  width:520px;
  aspect-ratio:1;
  border:1px solid rgba(245,199,111,.22);
  border-radius:50%;
  box-shadow:0 0 90px rgba(138,49,255,.32),inset 0 0 70px rgba(245,199,111,.08);
  animation:pulse 4s ease-in-out infinite;
}
.number-orb{
  position:relative;
  width:min(310px,58vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.92),rgba(255,255,255,.18) 13%,transparent 17%),
    radial-gradient(circle at 50% 54%,var(--gold),var(--red) 28%,var(--purple) 58%,#0a0010 78%);
  box-shadow:0 0 60px rgba(245,199,111,.55),0 0 150px rgba(138,49,255,.42),inset -34px -42px 58px rgba(0,0,0,.55);
  animation:float 4s ease-in-out infinite;
}
.number-orb span{
  position:relative;
  z-index:2;
  font-family:Georgia,serif;
  font-size:clamp(5rem,16vw,9rem);
  font-weight:900;
  color:#fff6d6;
  text-shadow:0 0 30px rgba(255,255,255,.8),0 0 70px rgba(245,199,111,.7);
}
.number-orb i{
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.3),transparent,rgba(245,199,111,.35),transparent);
  animation:spin 8s linear infinite;
}
.number-orb.awake{animation:float 2.7s ease-in-out infinite, flash 1.1s ease}
.phase-text{
  position:absolute;
  bottom:6rem;
  color:var(--gold-bright);
  font-weight:900;
}
.mini-stats{
  position:absolute;
  right:1rem;
  bottom:1rem;
  left:1rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
}
.mini-stats div,.code-list div{
  padding:.8rem;
  background:rgba(4,0,6,.55);
  border:1px solid rgba(245,199,111,.18);
  border-radius:8px;
}
.mini-stats span,.code-list span{
  display:block;
  color:var(--muted);
  font-weight:800;
}
.mini-stats b,.code-list b{
  color:var(--gold-bright);
  font-size:1.35rem;
}
.result{
  margin-top:1.2rem;
  padding:1.4rem;
}
.hidden{display:none}
.result-top{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.result-top p{
  margin:0 0 .3rem;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.result-top h2{font-size:clamp(2rem,5vw,4.2rem)}
#energyBadge{
  padding:.5rem .8rem;
  color:#18000f;
  background:var(--gold-bright);
  border-radius:999px;
  font-weight:1000;
}
blockquote{
  margin:1.2rem 0;
  padding:1rem 1.1rem;
  color:var(--gold-bright);
  background:rgba(245,199,111,.08);
  border-left:3px solid var(--gold);
  border-radius:8px;
  font-family:Georgia,serif;
  font-size:clamp(1.4rem,3vw,2.4rem);
  line-height:1.25;
}
.reading-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
}
.reading-grid div,.deep-panel{
  padding:1rem;
  background:rgba(4,0,6,.48);
  border:1px solid rgba(245,199,111,.16);
  border-radius:8px;
}
.reading-grid h3,.deep-panel h3{font-size:1.35rem;margin-bottom:.6rem}
.reading-grid p,.deep-intro,.code-list p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.deep-intro{margin-bottom:1rem}
.element-card{
  background:radial-gradient(circle at 12% 10%,rgba(245,199,111,.16),rgba(53,13,76,.68) 56%,rgba(8,0,14,.88));
  border-color:rgba(245,199,111,.38);
  box-shadow:0 0 24px rgba(186,45,93,.12),inset 0 0 28px rgba(245,199,111,.06);
}
.wide-card{
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(186,45,93,.18),rgba(79,24,119,.42),rgba(4,0,6,.76));
}
.deep-panel{margin-top:.9rem}
.code-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:.75rem;
}
.code-list div{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.code-list p{
  font-size:.95rem;
}
#adviceList{
  margin:.5rem 0 0;
  padding-left:1.2rem;
  color:var(--muted);
  line-height:1.65;
}
.life-member-room,
.compare-panel {
  display:grid;
  gap:1rem;
  margin-top:1.2rem;
}
.life-member-room {
  grid-template-columns:1.2fr .8fr .8fr;
}
.life-member-room article,
.numerology-profile-card,
.compare-panel {
  position:relative;
  overflow:hidden;
  padding:1.1rem;
  background:
    radial-gradient(circle at 86% 8%,rgba(245,199,111,.14),transparent 10rem),
    linear-gradient(145deg,rgba(33,0,42,.78),rgba(96,12,54,.36)),
    rgba(4,0,6,.62);
  border:1px solid rgba(245,199,111,.22);
  border-radius:10px;
  box-shadow:0 26px 82px rgba(0,0,0,.34),inset 0 0 50px rgba(245,199,111,.04);
  backdrop-filter:blur(16px);
}
.life-member-room span,
.profile-kicker,
.compare-panel .kicker {
  display:block;
  margin-bottom:.55rem;
  color:var(--gold);
  font-size:.76rem;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.life-member-room h2,
.compare-panel h2 {
  font-size:clamp(1.65rem,3vw,2.65rem);
  line-height:1.05;
}
.life-member-room p,
.compare-panel p,
.compare-result {
  margin:.35rem 0 0;
  color:var(--muted);
  line-height:1.6;
}
.numerology-profile-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  align-items:center;
  margin:1.1rem 0;
}
.life-circle {
  display:grid;
  width:9.4rem;
  aspect-ratio:1;
  place-items:center;
  text-align:center;
  color:#18000f;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.84),transparent 18%),
    conic-gradient(from 120deg,var(--gold-bright),var(--red),var(--purple),var(--gold-bright));
  border:1px solid rgba(245,199,111,.56);
  border-radius:50%;
  box-shadow:0 0 62px rgba(245,199,111,.22),0 0 90px rgba(138,49,255,.2);
}
.life-circle span {
  display:block;
  font-family:Georgia,serif;
  font-size:4rem;
  font-weight:900;
  line-height:.85;
}
.life-circle small {
  color:#250018;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.numerology-profile-card h3 {
  font-size:clamp(1.55rem,3vw,2.5rem);
}
.ritual-card {
  border-color:rgba(245,199,111,.34);
}
.compare-panel {
  grid-template-columns:minmax(0,1fr) minmax(280px,.52fr);
  align-items:start;
  margin-top:1.4rem;
}
.compare-form {
  display:grid;
  gap:.7rem;
}
.compare-result {
  grid-column:1/-1;
  min-height:5rem;
  padding:1rem;
  background:rgba(4,0,6,.48);
  border:1px solid rgba(245,199,111,.16);
  border-radius:8px;
}
.compare-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:.85rem;
}
.compare-cards div {
  padding:.9rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(245,199,111,.14);
  border-radius:8px;
}
.compare-cards span {
  display:block;
  color:var(--gold);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.compare-cards b {
  color:var(--gold-bright);
}
.particle,.plume,.shockwave{
  position:absolute;
  pointer-events:none;
}
.particle{
  width:7px;
  height:7px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 16px #fff,0 0 28px var(--gold);
}
.plume{
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,229,164,.7),rgba(138,49,255,.24) 48%,transparent 72%);
  filter:blur(8px);
}
.shockwave{
  inset:50%;
  width:20px;
  height:20px;
  border:1px solid rgba(245,199,111,.7);
  border-radius:50%;
  animation:wave 1.1s ease-out forwards;
}
@keyframes drift{to{transform:translate3d(4vw,-3vh,0) scale(1.08)}}
@keyframes pulse{50%{transform:scale(1.08);opacity:.58}}
@keyframes float{50%{transform:translateY(-13px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash{50%{filter:brightness(1.7)}}
@keyframes wave{to{transform:translate(-50%,-50%) scale(28);opacity:0}}
@media(max-width:850px){
  .app{width:min(100% - 1rem,680px);padding-top:5rem}
  .oracle,.reading-grid,.code-list,.life-member-room,.compare-panel,.numerology-profile-card,.compare-cards{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:3.5rem}
  .mini-stats{grid-template-columns:1fr;position:relative;right:auto;bottom:auto;left:auto;width:100%;margin-top:1rem}
  .phase-text{position:relative;bottom:auto}
  .number-stage{min-height:500px}
}