:root { color-scheme: dark; --ink:#090a0f; --paper:#f5f0e8; --lavender:#d4c7ff; --muted:#b9b7c5; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--ink); color:var(--paper); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.shell { position:relative; z-index:1; min-height:100svh; max-width:1440px; margin:auto; padding:2.5rem 3rem; display:flex; flex-direction:column; }
.ambient { position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:.2; }
.ambient-one { top:10%; right:8%; height:19rem; width:19rem; background:#8970e7; }
.ambient-two { bottom:5%; left:0; height:15rem; width:15rem; background:#2f98a0; opacity:.12; }
.cloak-grid { position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(212,200,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(212,200,255,.08) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,transparent,black 20%,black 78%,transparent); }
.topbar,footer { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:1.25rem; }
.brand { display:flex; align-items:center; gap:.75rem; }.sigil { display:grid; place-items:center; width:2.35rem; height:2.35rem; border:1px solid rgba(212,199,255,.5); border-radius:50%; color:var(--lavender); font-size:1.4rem; }
.eyebrow,.section-label,.panel-label,footer,.status { margin:0; font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; }.eyebrow{color:#b5b2c5}.brand-subtitle{margin:.2rem 0 0;font-size:.76rem}.status{display:flex;gap:.5rem;align-items:center;color:#b5b2c5}.status span{display:block;width:.45rem;height:.45rem;border-radius:50%;background:#bce4d4}
.hero { flex:1; display:grid; align-items:center; grid-template-columns:.92fr 1.08fr; gap:4rem; padding:4.5rem 0; }.intro { max-width:35rem; }.section-label{display:flex;align-items:center;gap:.75rem;color:var(--lavender)}.section-label span{width:2.5rem;height:1px;background:var(--lavender)}
h1 { margin:2rem 0 0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(4rem,8vw,7.7rem); font-weight:500; line-height:.84; letter-spacing:-.07em; } h1 em{font-weight:400;color:#bcaaf5}.lede{max-width:31rem;margin:2rem 0 0;color:var(--muted);font-size:1.08rem;line-height:1.7}.principles{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.2rem;color:#9997aa;font-size:.78rem}
.instrument { width:100%; max-width:650px; justify-self:end; position:relative; padding:1.25rem; border:1px solid var(--line); border-radius:2rem; background:linear-gradient(135deg,rgba(29,28,42,.86),rgba(12,13,19,.8)); box-shadow:0 35px 100px rgba(0,0,0,.45); }.instrument-inner { position:relative; min-height:470px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:1.45rem; background:#0e0e17; }.instrument-inner::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 28px,rgba(214,203,255,.07) 29px,transparent 30px)}
.instrument-meta{position:absolute;z-index:2;inset:0 0 auto;display:flex;justify-content:space-between;padding:1.4rem 1.5rem;color:#b7b4c5;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}.instrument-meta span:last-child{color:var(--lavender)}.orb{position:absolute;left:50%;top:50%;width:350px;height:350px;transform:translate(-50%,-50%);border:1px solid rgba(216,204,255,.3);border-radius:50%;background:radial-gradient(circle at 40% 35%,#efecff 0,#c9bdf5 14%,#3b3457 38%,#151522 66%,#08090f 100%);box-shadow:0 0 0 24px rgba(208,195,255,.025),0 0 0 55px rgba(208,195,255,.025),0 0 80px rgba(191,164,255,.2);animation:drift 9s ease-in-out infinite alternate}.panel{position:absolute;z-index:3;inset:auto 1.5rem 1.5rem;padding:1.5rem;border:1px solid var(--line);border-radius:1.2rem;background:rgba(18,18,28,.87);backdrop-filter:blur(12px)}.panel-copy{margin:.65rem 0 0;max-width:28rem;color:var(--muted);font-size:.9rem;line-height:1.55}.panel button{display:flex;align-items:center;justify-content:center;gap:.65rem;width:auto;min-height:2.75rem;margin-top:1.25rem;padding:0 1.25rem;border:1px solid rgba(217,206,255,.4);border-radius:999px;background:var(--lavender);color:#171424;font:600 .75rem/1 Inter,ui-sans-serif,sans-serif;letter-spacing:.06em;cursor:pointer;transition:transform .16s ease-out,background .2s}.panel button:hover{background:#ede8ff}.panel button:active{transform:scale(.97)}.panel button:disabled{cursor:wait;opacity:.85}.error{margin:.85rem 0 0;color:#f2b7bd;font-size:.78rem;line-height:1.4}.result-heading{display:flex;justify-content:space-between;gap:1rem}.result-heading h2{max-width:27rem;margin:.6rem 0 0;font-family:Georgia,'Times New Roman',serif;font-size:1.8rem;font-weight:400;line-height:1.05;letter-spacing:-.03em}.pin{color:var(--lavender);font-size:1.5rem}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}.coordinates p{margin:0;color:#858393;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}.coordinates strong{display:block;margin-top:.4rem;font:500 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}.revealed .reveal-result{animation:rise .38s cubic-bezier(.23,1,.32,1) both}.spinner{display:block;width:.9rem;height:.9rem;border:2px solid rgba(23,20,36,.25);border-top-color:#171424;border-radius:50%;animation:spin .7s linear infinite}
footer{border-top:1px solid var(--line);border-bottom:0;padding:1.25rem 0 0;color:#858393}@keyframes drift{from{transform:translate(-50%,-50%) scale(.985)}to{transform:translate(-50%,-50%) scale(1.025)}}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:780px){.shell{padding:1.25rem}.status{display:none}.hero{grid-template-columns:1fr;gap:3rem;padding:4rem 0}.instrument{justify-self:stretch;max-width:none;padding:1rem}.instrument-inner{min-height:440px}.orb{width:290px;height:290px}.panel{inset:auto 1rem 1rem}.panel button{width:100%;padding:0 .8rem;letter-spacing:.03em}footer{align-items:flex-start;flex-direction:column;gap:.75rem;font-size:.58rem}}
@media (prefers-reduced-motion:reduce){.orb,.revealed .reveal-result,.spinner{animation:none}}