:root{--ink:#17151b;--muted:#68656d;--line:#e8e5ec;--purple:#8649db;--sidebar:#111012;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font:15px/1.55 system-ui,sans-serif}
a{color:#7137c4}
header{padding:1rem 1.5rem;border-bottom:1px solid var(--line)}
.brand{font-size:1.22rem;font-style:italic;font-weight:950;color:inherit;text-decoration:none;letter-spacing:-.03em}
.brand b{color:var(--purple)}
nav a{display:block;padding:.68rem .75rem;color:inherit;text-decoration:none}
nav a:hover,nav a[aria-current=page]{color:#a970ef}
main{min-width:0;padding:2rem 2.5rem}
h1{font-size:1.7rem;letter-spacing:-.035em;margin:0 0 1.6rem}
h2{font-size:1.12rem;margin:0 0 .75rem}
p{color:var(--muted)}
section{border:1px solid var(--line);border-radius:.5rem;margin:0 0 1rem;padding:1.3rem}
label{display:block;margin:0 0 1rem;font-weight:600}
input,select{display:block;width:min(100%,30rem);margin-top:.3rem;padding:.7rem;background:white;border:1px solid #cfcad8;border-radius:.3rem;color:inherit;font:inherit}
button,.cta,.secondary{display:inline-block;border:0;border-radius:.3rem;padding:.65rem 1rem;background:var(--purple);color:white;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
button:hover,.cta:hover{background:#7235c9}
:focus-visible{outline:3px solid #a879ed;outline-offset:3px}
li{margin:.65rem 0}
li form{display:inline-block;margin-left:.6rem}
.workspace{display:grid;grid-template-columns:14.75rem minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
.workspace header{grid-column:1;grid-row:1;background:var(--sidebar);color:white;border:0}
.workspace .shell{display:contents}
.workspace nav{grid-column:1;grid-row:2;background:var(--sidebar);color:#b6b2ba;padding:0 .8rem 1.3rem}
.workspace main{grid-column:2;grid-row:1 / span 2}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1.5rem;margin:0 0 2.5rem}
.metrics strong,.metrics span{display:block}
.metrics strong{font-size:2rem;font-weight:550}
.metrics div:first-child strong{color:#743cc6}
.metrics span{color:var(--muted)}
.overview{border:0;border-top:1px solid var(--line);border-radius:0;padding:1.25rem 0}
.public-page header{padding-left:5vw}
.public-page nav{display:flex;flex-wrap:wrap;padding:.25rem 4.25vw;border-bottom:1px solid var(--line)}
.public-page main{padding:0}
.public-page main>h1,.public-page main>section{width:min(90%,28rem);margin:2rem auto}
.hero{min-height:67vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:clamp(2rem,6vw,6rem) 5vw;background:radial-gradient(ellipse at 83% 50%,#42276a,#141019 61%,#100d13);color:white}
.hero h2{font-size:clamp(2.5rem,5.5vw,5.2rem);letter-spacing:-.055em;line-height:1.03;max-width:13ch}
.hero p{color:#ddd6e7;max-width:38ch;font-size:1.15rem}
.hero .eyebrow{color:#cba5ff;font-size:.8rem;letter-spacing:.15em}
.hero a{margin:.4rem .4rem 0 0}
.secondary{background:#302737}
.screen{aspect-ratio:16/9;border:8px solid #121016;border-radius:.9rem;background:linear-gradient(145deg,#25203c,#130f24);box-shadow:0 2rem 5rem #0d0715;padding:8%;display:grid;align-content:space-between;color:#ded3f5}
.screen b{color:#b37bff}
.screen div{border:1px solid #7057a2;padding:1rem;border-radius:.55rem}
@media(max-width:680px){.workspace{display:block}.workspace nav{display:flex;flex-wrap:wrap}.workspace main{padding:1.2rem}.hero{grid-template-columns:1fr;gap:1.5rem}.screen{max-width:28rem}}