*{box-sizing:border-box}
:root{--violet:#9a74ff;--text:#f7f2ff;--line:rgba(198,171,255,.38)}
html,body{margin:0;min-height:100%;background:#05060d;color:var(--text)}
body{
  min-height:100vh;overflow-x:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% 10%,rgba(113,76,207,.19),transparent 30%),
    radial-gradient(circle at 18% 78%,rgba(58,104,184,.10),transparent 25%),
    linear-gradient(180deg,#070812,#05060d);
}
.stars{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 7px rgba(207,186,255,.85);animation:twinkle var(--speed) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.82;transform:scale(1.35)}}
.page{min-height:100vh;display:grid;place-items:center;padding:40px 18px}
.panel{
  position:relative;width:min(850px,100%);padding:46px 42px 38px;text-align:center;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;
  background:radial-gradient(circle at 50% -10%,rgba(138,91,235,.20),transparent 38%),linear-gradient(180deg,rgba(17,18,38,.95),rgba(8,9,20,.97));
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 38px rgba(118,75,210,.13),inset 0 0 45px rgba(111,75,194,.08);
}
.panel::before,.panel::after{content:"";position:absolute;width:150px;height:150px;border-color:rgba(207,186,255,.27);pointer-events:none}
.panel::before{left:14px;top:14px;border-left:1px solid;border-top:1px solid}
.panel::after{right:14px;bottom:14px;border-right:1px solid;border-bottom:1px solid}
.moon{
  width:58px;height:58px;margin:0 auto 14px;position:relative;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#d6c8ff 44%,#8967e9 72%,#31205f 100%);
  box-shadow:0 0 24px rgba(154,116,255,.55);
}
.moon::after{content:"";position:absolute;width:48px;height:48px;right:-8px;top:3px;border-radius:50%;background:#0d0f20}
.eyebrow{margin:0 0 8px;color:#bca9ea;letter-spacing:.36em;font-size:12px;font-weight:700}
h1{margin:0 auto;max-width:680px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(29px,4vw,48px);line-height:1.12;font-weight:400;text-shadow:0 0 18px rgba(157,116,255,.20)}
.divider{height:1px;width:min(560px,80%);margin:28px auto;background:linear-gradient(90deg,transparent,rgba(204,180,255,.75),transparent);box-shadow:0 0 8px rgba(154,116,255,.35)}
.divider.lower{margin:30px auto 24px}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.choice{
  min-height:106px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;
  border:1px solid rgba(188,160,242,.24);border-radius:18px;color:#dcd4ee;
  background:linear-gradient(180deg,rgba(31,28,58,.70),rgba(15,16,34,.78));
  cursor:pointer;font-size:14px;transition:.18s ease
}
.choice:hover{transform:translateY(-2px);border-color:rgba(201,177,255,.54);box-shadow:0 10px 25px rgba(0,0,0,.25)}
.choice.active{
  color:#fff;border-color:rgba(205,182,255,.80);
  background:radial-gradient(circle at 50% 0%,rgba(146,99,245,.28),transparent 70%),linear-gradient(180deg,rgba(38,31,73,.93),rgba(18,17,42,.95));
  box-shadow:0 0 22px rgba(136,91,230,.16),inset 0 0 18px rgba(143,100,240,.10)
}
.icon{font-size:28px;filter:drop-shadow(0 0 7px rgba(159,113,255,.5))}
.crystal{color:#b79aff}
.result{min-height:112px}
.result-label{margin-bottom:9px;color:#9f93b7;font-size:12px;font-weight:700;letter-spacing:.22em}
.result-value{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,5.2vw,58px);line-height:1.1;color:#f8f3ff;
  text-shadow:0 0 8px rgba(255,255,255,.20),0 0 20px rgba(148,100,246,.30);word-break:break-word
}
.obs-box{
  margin:25px auto 0;max-width:690px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px 11px 10px 14px;border:1px solid rgba(187,162,239,.19);border-radius:14px;background:rgba(4,5,13,.40);text-align:left
}
.obs-box>span{font-size:11px;color:#847b98;text-transform:uppercase;letter-spacing:.1em}
.obs-box code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfc5df;font-size:12px}
.obs-box button{border:1px solid rgba(186,160,239,.32);border-radius:9px;background:rgba(69,47,116,.42);color:#eee8fa;padding:7px 10px;cursor:pointer}
@media(max-width:680px){.panel{padding:36px 20px 28px}.choices{grid-template-columns:repeat(2,1fr)}.obs-box{grid-template-columns:1fr auto}.obs-box>span{grid-column:1/-1}}