:root{--bg:#02031a;--bg2:#0b0630;--panel:#110a3a;--line:#2a1f6b;--text:#e8e6ff;--muted:#a9a3d6;--cyan:#38e8ff;--magenta:#ff3fd8;--purple:#8b5cff;--max:68rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#2a0a5c55,transparent),radial-gradient(900px 500px at -10% 30%,#0a3a6a33,transparent),var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--cyan)}a:hover{color:var(--magenta)}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#000;padding:.5rem;z-index:9}
header.site{border-bottom:1px solid var(--line);background:#02031acc;backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.6rem;padding-bottom:.6rem;flex-wrap:wrap}
.brand img{width:220px}
nav ul{list-style:none;display:flex;gap:.4rem 1rem;margin:0;padding:0;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
nav a:hover,nav a[aria-current=page]{color:var(--cyan)}
main{flex:1}
.hero{padding-top:3rem;padding-bottom:2rem;display:grid;gap:2rem;align-items:center}
.hero img.icon{width:min(260px,70vw);margin:0 auto;border-radius:22%;box-shadow:0 0 40px #8b5cff66,0 0 90px #ff3fd833}
h1,h2,h3{line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:clamp(1.9rem,6vw,3rem);margin-top:.2em;background:linear-gradient(90deg,var(--cyan),var(--purple) 55%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.45rem;color:#fff}
h3{font-size:1.1rem;color:var(--cyan)}
.lead{font-size:1.15rem;color:var(--muted)}
.card{background:linear-gradient(180deg,#140c45cc,#0b0630cc);border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:0 0 0 1px #ffffff05 inset}
.glow{border-color:#5b3cff;box-shadow:0 0 30px #8b5cff33}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.badge{border:1px solid var(--line);border-radius:999px;padding:.25rem .75rem;font-size:.85rem;color:var(--muted)}
.badge.hot{border-color:var(--magenta);color:#fff;box-shadow:0 0 12px #ff3fd855}
.btn{display:inline-block;padding:.7rem 1.2rem;border-radius:12px;font-weight:700;text-decoration:none;color:#08021f;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.btn:hover{color:#08021f;filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1rem}
.shot{aspect-ratio:9/16;border:1px dashed #5b3cff;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;text-align:center;padding:1rem;background:repeating-linear-gradient(45deg,#110a3a,#110a3a 10px,#0d0832 10px,#0d0832 20px)}
.grid{display:grid;gap:1rem}
.doc{max-width:46rem;padding-top:2rem;padding-bottom:3rem}
.doc li{margin:.3em 0}
.meta{color:var(--muted);font-size:.95rem}
.ph{background:#ff3fd822;color:#ffc4f3;border-radius:4px;padding:0 .25em;font-family:ui-monospace,Menlo,monospace;font-size:.92em}
table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{border:1px solid var(--line);padding:.55rem;text-align:left;vertical-align:top}th{background:#140c45}
.table-scroll{overflow-x:auto}
details{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0;background:#0d0832}
summary{cursor:pointer;font-weight:700}
footer.site{border-top:1px solid var(--line);padding:1.6rem 0;color:var(--muted);font-size:.9rem;margin-top:2rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
footer.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0}
footer.site a{color:var(--muted)}footer.site a:hover{color:var(--cyan)}
@media(min-width:760px){.hero{grid-template-columns:1.3fr 1fr}.hero img.icon{width:300px}.grid.two{grid-template-columns:1fr 1fr}.brand img{width:260px}}
@media(prefers-reduced-motion:no-preference){.hero img.icon{animation:pulse 5s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 55px #38e8ff55,0 0 110px #ff3fd844}}}