:root{--navy:#0a0e2c;--navy2:#111647;--card-d:#121846;--purple:#7c5cff;--purple2:#a46bff;--pink:#ff7ac8;--gold:#f4b860;--ink:#1d1b3a;--muted:#5d5a7a;--bg:#f6f4fb;--line:#e4e0f2;--ok:#1f8a5b;--err:#c0392b;--r:16px;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}a{color:var(--purple)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;margin:0 0 .5em}
.container{width:min(1180px,92%);margin-inline:auto}.narrow{width:min(860px,92%)}
.skip{position:absolute;left:-999px;background:#fff;padding:8px;z-index:99}.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ico{flex:none;vertical-align:middle}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;border:1px solid transparent;font:600 1rem var(--sans);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn-primary{color:#fff;background:linear-gradient(135deg,#6f6bff,#a46bff 60%,#c06bff);box-shadow:0 8px 24px rgba(124,92,255,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(124,92,255,.5)}
.btn-ghost{background:#fff;color:var(--purple);border-color:var(--line)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,11,36,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand b{display:block;font:700 1.25rem var(--serif)}.brand small{display:block;color:#b9b6dd;font-size:.72rem;margin-top:-2px}
.nav{display:flex;align-items:center;gap:30px}.nav>a:not(.btn){color:#dcd9f5;text-decoration:none;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
.nav>a.on,.nav>a:not(.btn):hover{color:#fff;border-color:var(--purple2)}
.nav-cta{padding:10px 20px}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:10px;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff}
/* hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:56px 0 150px;background:radial-gradient(ellipse at 72% 28%,rgba(255,150,210,.28),transparent 48%),radial-gradient(ellipse at 20% 45%,rgba(110,70,255,.38),transparent 55%),linear-gradient(180deg,#090c2b 0%,#1a1252 55%,#3b1b5c 85%,#6a2f5e 100%)}
.hero:before{content:"";position:absolute;inset:0;opacity:.9;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><g fill='white'><circle cx='20' cy='40' r='1.2'/><circle cx='90' cy='170' r='.8'/><circle cx='160' cy='60' r='1.5'/><circle cx='250' cy='120' r='.9'/><circle cx='330' cy='30' r='1.1'/><circle cx='380' cy='210' r='1.4'/><circle cx='60' cy='300' r='1'/><circle cx='200' cy='260' r='.8'/><circle cx='300' cy='350' r='1.3'/><circle cx='140' cy='390' r='.9'/><circle cx='400' cy='380' r='.8'/></g></svg>")}
.mountains{position:absolute;left:0;right:0;bottom:0;height:130px;background:#100a30;clip-path:polygon(0 70%,8% 45%,16% 62%,26% 30%,36% 58%,47% 38%,58% 66%,70% 34%,80% 60%,90% 40%,100% 62%,100% 100%,0 100%);opacity:.92}
.hero-in{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;font-size:.82rem;color:#e7e3ff}
.hero h1{font-size:clamp(2.4rem,5.5vw,4.1rem);margin:18px 0 14px;font-weight:600}
.grad{background:linear-gradient(90deg,#8d7bff,#ff8fd0);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.1em}
.lead{max-width:560px;color:#e2defa;font-size:1.08rem}
.hero-form{display:grid;grid-template-columns:1.3fr 1fr auto;gap:16px;align-items:end;margin:26px 0 16px;padding:18px 20px;background:rgba(14,18,60,.72);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);max-width:700px}
.hero-form .btn{white-space:nowrap}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;padding:0;font-size:.88rem;color:#d7d3f5}.trust li{display:flex;gap:8px;align-items:center}.trust .ico{color:var(--purple2)}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;gap:18px}
.halo{position:relative;width:min(340px,70vw);aspect-ratio:1;display:grid;place-items:center}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(244,184,96,.45);box-shadow:0 0 40px rgba(244,184,96,.25),inset 0 0 40px rgba(244,184,96,.12)}
.r1{inset:0}.r2{inset:12%;border-style:dashed;opacity:.6}
.glow-grid{border-collapse:collapse;position:relative}
.glow-grid td{width:76px;height:70px;text-align:center;border:2px solid var(--gold);font:600 2.5rem var(--serif);color:#fff;text-shadow:0 0 14px #ffd28a,0 0 28px rgba(244,184,96,.7);background:rgba(40,20,70,.45)}
.quote{font:italic 1.2rem var(--serif);color:#ece8ff;text-align:center;max-width:150px}
/* forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field label{font-weight:600;font-size:.88rem}
.field small{font-weight:400;opacity:.7}
input,select,textarea{width:100%;font:1rem var(--sans);padding:12px 14px;border-radius:12px;border:1px solid #cfc9ea;background:#fff;color:var(--ink)}
.hero-form input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}.hero-form input::placeholder{color:#a7a3cf}
.hero-form label{color:#fff}
textarea{resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}.check input{width:auto;margin-top:5px}
.calc-form{display:grid;gap:16px}.calc-form.card{padding:24px;grid-template-columns:1fr 1fr}
.calc-form.card>.btn,.calc-form.card>.check{grid-column:1/-1;justify-self:start}.calc-form.stack{grid-template-columns:1fr}
.hp{position:absolute;left:-9999px}
/* sections */
.section{padding:48px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 6px 24px rgba(60,40,140,.06);margin-bottom:20px}
.page-hero{background:linear-gradient(180deg,#0a0e2c,#1a1252 80%,#2b1a55);color:#fff;padding:44px 0}.page-hero h1{margin:0 0 6px;font-size:clamp(1.8rem,4vw,2.6rem)}.page-hero p{margin:0;color:#d7d3f5}
.features{background:#fbfaff;padding:34px 0;border-bottom:1px solid var(--line)}
.feat-row{display:grid;grid-template-columns:repeat(5,1fr)}
.feat{display:block;text-align:center;padding:6px 18px;text-decoration:none;color:var(--ink);border-left:1px solid var(--line)}.feat:first-child{border:0}
.feat h3{font:700 1rem var(--sans);margin:12px 0 4px}.feat p{margin:0;color:var(--muted);font-size:.85rem}
.ico-circle{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#e7e0ff,#fde2f1);color:var(--purple)}
.about-band{background:linear-gradient(180deg,#f3effc,#f9f7fd)}
.about-grid{display:grid;grid-template-columns:240px 1fr 1fr;gap:34px;align-items:center}
.wheel{position:relative;width:240px;height:240px;border-radius:18px;background:radial-gradient(circle,#fbd9ee,#e6defc 70%)}
.wheel .w{position:absolute;font:1.1rem var(--serif);color:#5b4bd1}.wheel-core{position:absolute;inset:0;display:grid;place-items:center;opacity:.8}
.w1{left:46%;top:4%}.w2{left:14%;top:20%}.w3{right:14%;top:20%}.w4{left:5%;top:46%}.w9{right:5%;top:46%}.w7{left:14%;bottom:20%}.w8{right:14%;bottom:20%}.w5{left:46%;bottom:3%}.w6{right:30%;bottom:8%}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--purple)}
.about-text h2{font-size:2rem}.about-text p{color:#3d3a5c}
.why h3{font-size:1.15rem}.checks{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}.checks li{display:flex;gap:10px;align-items:center;font-size:.93rem}.checks .ico{color:#fff;background:var(--purple);border-radius:50%;padding:3px;width:22px;height:22px}
.script{font:italic 1.05rem var(--serif);color:var(--purple);text-align:center;margin:0}
.steps{background:linear-gradient(180deg,#0a0e2c,#0d1238);color:#fff;padding:48px 0}.steps .eyebrow{color:#a99bff}.steps h2{font-size:2rem;margin-bottom:6px}.muted-d{color:#b9b6dd;margin:0 0 26px}
.step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;background:var(--card-d);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px}.step .ico{color:#fff}
.step h3{font:700 1rem var(--sans);margin:10px 0 4px}.step p{margin:0;color:#b9b6dd;font-size:.86rem}
.step .num{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));display:grid;place-items:center;font-weight:700}
.step:not(:last-child):after{content:"→";position:absolute;right:-18px;top:45%;color:var(--purple2)}
.lower{background:#f6f4fb}.lower-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:20px;align-items:stretch}.lower-grid .card{margin:0}
.tools-card{display:flex;gap:16px;align-items:center}.mini-grid td{width:30px;height:28px;font-size:1rem;border-width:1px;text-shadow:0 0 6px #ffd28a}.mini-grid{flex:none;background:#0a0e2c;padding:6px;border-radius:8px}
.lower h3{font:700 1rem var(--sans)}.more{font-weight:600;text-decoration:none;font-size:.9rem}
.plain{padding-left:18px;margin:8px 0}.plain li{margin:4px 0}
/* tools / results */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool{text-decoration:none;color:var(--ink);display:block}.tool:hover{border-color:var(--purple2);transform:translateY(-2px)}.tool h3{margin-top:12px;font-size:1.15rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}
.results{margin-top:28px}.results h2{margin-top:0}
.bignum{display:inline-grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font:700 1.7rem var(--serif);vertical-align:middle;margin-right:6px}
.bignum.sm{min-width:34px;height:34px;font-size:1.1rem;border-radius:10px}.bignum.xl{min-width:96px;height:96px;font-size:3.4rem;border-radius:24px}
.calcline{font-family:ui-monospace,Consolas,monospace;font-size:.88rem;background:#f4f1fd;border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.calc{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0}.calc dt{font-weight:600;color:var(--muted)}.calc dd{margin:0;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}.chip{display:inline-flex;flex-direction:column;align-items:center;width:38px;border:1px solid var(--line);border-radius:10px;background:#faf8ff;padding:3px 0}.chip b{font-family:var(--serif)}.chip i{font-style:normal;font-size:.8rem;color:var(--purple);font-weight:700}
.words{display:flex;flex-wrap:wrap;gap:6px 24px}.spelling{margin:.2em 0}
.reflect{margin:18px 0 0;padding:14px 18px;border-left:4px solid var(--purple2);background:#f4f1fd;border-radius:0 12px 12px 0;text-align:left}
.notice{padding:14px 16px;border-radius:12px;margin:16px 0;border:1px solid}.notice ul{margin:6px 0 0;padding-left:20px}
.notice.err{background:#fdeeee;border-color:#f0b8b2;color:#7d1f15}.notice.ok{background:#e9f8f0;border-color:#a9dcc3;color:#10583a}.notice.info{background:#eef0ff;border-color:#c9cdf5;color:#2d2f78}
/* lo shu */
.loshu-wrap{display:grid;justify-items:center;margin:18px 0}
.loshu{border-collapse:collapse;background:#fff}.loshu td{position:relative;width:min(27vw,120px);height:min(27vw,120px);border:2px solid var(--purple);text-align:center;vertical-align:middle}
.loshu td.has{background:linear-gradient(135deg,#efeaff,#fde8f4)}.loshu td.none{background:#fafafa;color:#aaa}
.loshu .pos{position:absolute;top:4px;left:8px;font-size:.8rem;color:var(--muted)}
.loshu .found{font:700 clamp(1.2rem,5vw,2rem) var(--serif);letter-spacing:.06em;overflow-wrap:anywhere}.loshu .extra{color:#c98a1c}
.legend{font-size:.85rem;color:var(--muted);max-width:520px;text-align:center}.extra-key{color:#c98a1c;font-weight:700}
.lines li.complete strong{color:var(--ok)}.lines li.absent strong{color:#a05a00}
.chipline{font:700 1.3rem var(--serif);margin:0}
.prose h2{font-size:1.3rem;margin-top:1.2em}.prose h2:first-child{margin-top:0}
/* compare */
.variant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.variant{position:relative;display:flex;flex-direction:column;gap:4px;cursor:pointer;margin:0}.variant.orig{border-color:var(--purple2);background:#faf7ff}
.variant .cmp{position:absolute;top:14px;right:14px;width:20px;height:20px}.variant .mini{font:.82rem ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.compare-bar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.table-scroll{overflow-x:auto}.cmp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.cmp-table th,.cmp-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.cmp-table th{background:#f1edfc;font-size:.85rem}.cmp-table tr.orig td{background:#faf7ff}
.sec{font-size:1.2rem;border-bottom:2px solid var(--line);padding-bottom:6px;margin-top:28px}
/* ads */
.ad-slot{margin-block:22px;text-align:center;min-height:60px;overflow:hidden}
.ad-label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#7a7798;margin-bottom:4px}
.ad-slot img{max-width:100%;max-height:140px;border-radius:8px}
.ad-empty{border:1px dashed #b9b4da;border-radius:10px;padding:24px;color:#7a7798;font-size:.85rem}
/* footer */
.site-footer{background:#080b24;color:#cfcbee;padding:28px 0 18px;margin-top:0}
.foot{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px}.foot-nav a,.social a{color:#cfcbee;text-decoration:none;font-size:.88rem}.foot-nav a:hover,.social a:hover{color:#fff}.social{display:flex;gap:14px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:.78rem;color:#9a96c4;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}.foot-bottom a{color:#b9b2ff}
.art h2{font-size:1.3rem}.art h2 a{text-decoration:none;color:var(--ink)}
/* responsive */
@media(max-width:980px){
 .hero-in{grid-template-columns:1fr}.hero-art{order:-1;margin-bottom:-10px}.halo{width:240px}.glow-grid td{width:56px;height:52px;font-size:1.8rem}
 .hero-form{grid-template-columns:1fr 1fr}.hero-form .btn{grid-column:1/-1;justify-content:center}
 .feat-row{grid-template-columns:repeat(2,1fr);gap:18px}.feat{border:0}
 .about-grid{grid-template-columns:1fr}.wheel{margin-inline:auto}
 .step-row{grid-template-columns:repeat(2,1fr)}.step:after{display:none}
 .lower-grid,.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}
}
@media(max-width:760px){
 .nav-toggle{display:flex}.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#080b24;padding:10px 4%;border-bottom:1px solid rgba(255,255,255,.1)}
 .nav.open{display:flex}.nav>a:not(.btn){padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}.nav-cta{margin:12px 0;justify-content:center}
 .site-header{position:sticky}.hero{padding:30px 0 120px}.hero-form,.calc-form.card{grid-template-columns:1fr}.step-row{grid-template-columns:1fr}
 .quote{display:none}.feat-row{grid-template-columns:1fr 1fr}.calc{grid-template-columns:1fr}.calc dt{margin-top:6px}
 .cmp-table.stackable thead,.results .cmp-table thead{display:none}
 .results .cmp-table,.results .cmp-table tbody,.results .cmp-table tr,.results .cmp-table td{display:block;width:100%}
 .results .cmp-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:6px}
 .results .cmp-table td{border:0;padding:4px 8px}.results .cmp-table td:before{content:attr(data-l) ": ";font-weight:700;color:var(--muted)}
}
/* print */
@media print{
 .site-header,.site-footer,.no-print,.ad-slot,.nav-toggle,.skip{display:none!important}
 body{background:#fff}.card{box-shadow:none;break-inside:avoid}.page-hero{display:none}.section{padding:0}.container{width:100%}
 .bignum{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact}.results .cmp-table td:before{content:""}
}