:root{color-scheme:dark;--bg:#0b0a18;--ink:#f8f5ff;--muted:#9a95ae;--line:rgba(224,207,255,.16);--purple:#b896ff;--pink:#f09aff;--cyan:#95ebee;--panel:#131127}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse 55% 60% at 78% 38%,#27204442 0%,transparent 75%),radial-gradient(ellipse 50% 50% at 8% 97%,#2216384a,transparent 80%),var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.page-glow{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(#c5abff60 .7px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(120deg,transparent 12%,#000 85%);opacity:.15}
.shell{position:relative;z-index:1;min-height:100vh;max-width:1510px;margin:auto;display:flex;flex-direction:column;padding:0 clamp(24px,5vw,88px)}
.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}
.brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:900;font-size:17px;letter-spacing:.065em;white-space:nowrap}
.brand-icon{display:grid;place-items:center;border-radius:11px;height:33px;width:33px;background:linear-gradient(145deg,#b789ff,#6e40c3);font-size:24px;color:#fff;box-shadow:0 0 24px #b789ff55}
.brand-slash{color:var(--purple)}
.header-note{color:#b6accb;font-size:10px;letter-spacing:.15em;font-weight:800;white-space:nowrap}
.online-dot,.result-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ceccf;box-shadow:0 0 9px #7ceccf;vertical-align:middle;margin-right:9px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,1.05fr);gap:clamp(35px,5.4vw,90px);align-items:center;flex:1;min-height:720px;padding:35px 0 53px}
.intro{max-width:590px;padding-bottom:25px}
.eyebrow{font-size:11px;color:var(--purple);font-weight:800;letter-spacing:.19em;display:flex;align-items:center;gap:13px;margin:0 0 25px}
.eyebrow-line{display:block;width:29px;height:1px;background:var(--purple)}
h1{font-size:clamp(64px,6.45vw,108px);font-weight:800;line-height:.98;letter-spacing:-.079em;margin:0 0 30px}
.gradient-type{background:linear-gradient(100deg,#eebeff 2%,#ae95ff 48%,#81e4e6 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.lede{font-size:clamp(16px,1.4vw,19px);line-height:1.72;color:#b9b4c8;max-width:480px;margin:0 0 45px}
.lede strong{color:#fff;font-weight:650}
.oracle-form{max-width:535px}
.oracle-form label{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;color:#e5dff1;margin:0 0 13px}
.optional{font-size:9px;font-weight:600;color:#817b98;letter-spacing:.075em}
textarea{display:block;width:100%;min-height:104px;resize:vertical;border:1px solid #5a4a78;background:#171329a6;border-radius:13px;color:#f5efff;padding:18px 19px;line-height:1.55;font-size:14px;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 0 35px #07041244}
textarea::placeholder{color:#8f87a4;opacity:1}
textarea:focus{border-color:#bd95ff;box-shadow:0 0 0 3px #ad81ff26}
.form-footer{display:flex;justify-content:space-between;gap:10px;margin:10px 0 25px;color:#827e94;font-size:11px}
.ask-button{width:100%;border:0;border-radius:12px;color:#201037;min-height:65px;padding:16px 21px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,#d0a9ff 0%,#c6a1ff 42%,#b29cff 100%);font-size:13px;font-weight:900;letter-spacing:.115em;box-shadow:0 9px 32px #9366e63a;transition:transform .18s,filter .18s,box-shadow .18s}
.ask-button:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 40px #9366e650}
.ask-button:disabled{cursor:wait;filter:saturate(.65)}
.button-symbol{font-size:24px;font-weight:400;line-height:1}
.microcopy{color:#787388;font-size:11px;letter-spacing:.02em;margin:18px 0 0;display:flex;gap:9px;align-items:center}
.microcopy span{font-size:17px;color:#af93dc}
.vision{align-self:center;width:100%;max-width:650px;position:relative;isolation:isolate}
.vision-header{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8c84a8;letter-spacing:.15em;font-weight:750;margin:0 0 -8px;padding:0 14px}
.sparkle{font-size:21px;color:#ab96ed}
.orb-stage{height:clamp(370px,36vw,525px);position:relative;overflow:visible;display:flex;justify-content:center;align-items:center}
.ambient-haze{position:absolute;width:74%;aspect-ratio:1;top:11%;left:13%;border-radius:50%;background:radial-gradient(circle,#9856d27a 0%,#5c3a9c33 38%,transparent 72%);filter:blur(36px);animation:haze 6s ease-in-out infinite alternate;pointer-events:none}
#orb-canvas{position:absolute;z-index:3;left:50%;top:43%;transform:translate(-50%,-50%);width:min(100%,510px);aspect-ratio:1;max-width:510px;height:auto;display:block;filter:drop-shadow(0 10px 17px #4d267d70);pointer-events:none}
.fallback-orb{position:absolute;z-index:2;top:calc(43% - min(38%,194px));left:50%;transform:translateX(-50%);width:min(75%,390px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 29% 22%,#ffffffb8,transparent 9%),radial-gradient(circle at 70% 70%,#35cad8c0,transparent 42%),radial-gradient(circle at 30% 49%,#b464ed,transparent 60%),radial-gradient(circle at 50% 49%,#321350 35%,#130b39 80%);box-shadow:inset -26px -30px 38px #0307199c,inset 13px 11px 35px #ffdcff55,0 0 50px #a15df15c}
.orb-reflection{position:absolute;z-index:4;pointer-events:none;width:42%;height:9%;top:15%;left:27%;border-radius:50%;background:#fff3;filter:blur(33px);transform:rotate(-22deg);opacity:.4}
.pedestal{position:absolute;z-index:1;width:42%;height:119px;left:29%;bottom:5px;filter:drop-shadow(0 13px 19px #000b)}
.pedestal-top{height:31px;width:100%;position:absolute;top:0;border-radius:50%;background:linear-gradient(#9d80d2,#332250 70%,#15101e);border:1px solid #8c6ab3;box-shadow:0 0 20px #b386fa60,inset 0 6px 10px #debeff60}
.pedestal-body{position:absolute;top:14px;height:74px;width:78%;left:11%;background:linear-gradient(90deg,#160e2b,#544073 17%,#302344 46%,#644b85 73%,#150f23);clip-path:polygon(5% 0,95% 0,82% 100%,18% 100%);border-bottom:1px solid #8e70b8}
.pedestal-bottom{position:absolute;bottom:20px;width:83%;height:22px;left:8.5%;border-radius:50%;background:linear-gradient(#5d417e,#160e29 67%);box-shadow:0 7px 22px #000}
.orbit-label{position:absolute;z-index:5;color:#aea0c7;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;letter-spacing:.13em;text-shadow:0 1px 2px #0b0a18aa}
.orbit-label-left{left:0;top:51%;transform:rotate(-90deg)}
.orbit-label-right{right:0;top:29%;transform:rotate(90deg)}
.star{position:absolute;color:#e3b6ff;text-shadow:0 0 20px #e3b6ff;animation:twinkle 3.3s ease-in-out infinite alternate}
.star-one{left:10%;top:18%;font-size:25px}.star-two{right:8%;top:59%;font-size:20px;animation-delay:-1s}.star-three{left:23%;bottom:14%;font-size:44px;animation-delay:-2s}
.oracle-output{background:linear-gradient(155deg,rgba(38,30,65,.88),rgba(20,17,39,.96));border:1px solid #715c9763;border-radius:16px;padding:22px 26px 18px;box-shadow:0 20px 62px #05030a77,inset 0 1px #fff1;position:relative;z-index:6;min-height:223px;margin-top:-5px;transition:border-color .3s,box-shadow .3s}
.oracle-output.revealed{border-color:#bba0f080;box-shadow:0 20px 62px #05030a77,0 0 36px #9a6afa1c}
.result-top,.result-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.result-badge{font-size:10px;letter-spacing:.14em;font-weight:800;color:#c3b3e1}
.result-dot{height:6px;width:6px;background:#cba5ff;box-shadow:0 0 8px #cba5ff}
.result-ref{color:#786e91;letter-spacing:.12em;font-size:10px;font-family:ui-monospace,SFMono-Regular,monospace}
.result-estimate{font-size:clamp(22px,2.2vw,33px);font-weight:790;line-height:1.22;letter-spacing:-.04em;margin:24px 0 12px;color:#faf6ff;text-wrap:balance;white-space:pre-line}
.result-detail{color:#aca5c2;line-height:1.6;font-size:13px;min-height:39px;margin:0 0 20px}
.result-bottom{border-top:1px solid #b39dc326;padding-top:14px;font-size:10px;font-weight:800;letter-spacing:.10em;color:#9d8bba;min-height:28px}
.copy-button{font-size:10px;color:#d5b8fa;border:0;padding:0;background:none;font-weight:800;letter-spacing:.06em}
.copy-button:hover{text-decoration:underline;color:#fff}
.copy-button[hidden]{display:none}
.footer{min-height:70px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;color:#777188;font-size:9px;font-weight:700;letter-spacing:.09em}
.orb-stage.active .ambient-haze{animation-duration:.8s;filter:blur(24px)}
.orb-stage.active #orb-canvas{filter:drop-shadow(0 0 38px #bd7bfaaf)}
@keyframes haze{from{transform:scale(.93);opacity:.55}to{transform:scale(1.16);opacity:1}}
@keyframes twinkle{to{opacity:.33;transform:scale(.75)}}
@media (max-width:1120px){.hero{grid-template-columns:minmax(0,1fr) minmax(400px,1fr);gap:24px}h1{font-size:clamp(61px,7vw,88px)}.orb-stage{height:420px}.vision-header{margin-top:8px}}
@media (max-width:840px){.topbar{height:80px}.hero{display:flex;flex-direction:column;min-height:0;gap:8px;align-items:stretch;padding:54px 0 44px}.intro{max-width:680px;padding:0;margin:auto;width:100%}h1{font-size:clamp(58px,11vw,88px)}.lede{max-width:620px;margin-bottom:32px}.oracle-form{max-width:none}.vision{margin-top:40px;max-width:650px}.orb-stage{height:clamp(335px,65vw,480px)}.footer{padding:22px 0;align-items:flex-start;line-height:1.8}}
@media (max-width:510px){.shell{padding:0 19px}.topbar{height:75px}.brand{font-size:14px}.brand-icon{width:30px;height:30px;font-size:20px}.header-note{font-size:8px;max-width:130px;line-height:1.6;white-space:normal;text-align:right}.hero{padding-top:42px;padding-bottom:30px}.eyebrow{font-size:9px;margin-bottom:22px}h1{font-size:clamp(54px,12.8vw,72px);margin-bottom:24px}.lede{font-size:16px;line-height:1.65;margin-bottom:28px}.optional{display:block;margin-top:5px}.oracle-form label{line-height:1.6}.orb-stage{height:345px}.vision{margin-top:28px}.vision-header{padding:0 6px}.orbit-label{display:none}.pedestal{bottom:0;height:92px}.pedestal-body{height:59px}.pedestal-bottom{bottom:8px}.oracle-output{padding:20px 19px 16px;min-height:217px}.result-estimate{font-size:25px}.footer{flex-direction:column;gap:3px;font-size:8px}.star-one{left:4%}.star-two{right:5%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
