:root{--ink:#14122b;--muted:#5b5a6e;--line:#e6e4f0;--accent:#6a4cff;--soft:#f6f5fb}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;max-width:1040px;margin:0 auto;padding:14px 24px}
.top nav a{margin-left:20px;text-decoration:none;color:var(--muted);font-size:.95rem}
.top nav a:hover,.top nav a:focus-visible{color:var(--ink)}
.notice{background:var(--soft);border-block:1px solid var(--line);text-align:center;padding:10px 24px;font-size:.92rem;color:var(--muted);margin:0}
.crumbs{max-width:1040px;margin:0 auto;padding:10px 24px;font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.hero{background:linear-gradient(135deg,#0d0c24 0%,#1d2a7a 40%,#6a4cff 72%,#ff8fc0 100%);color:#fff;padding:80px 24px 90px}
.hero div{max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.hero h2{font-size:1.2rem;font-weight:400;margin:0 0 28px;opacity:.92;max-width:34em}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:14px 28px;border-radius:4px;font-weight:700;letter-spacing:.04em;text-decoration:none}
.hero .btn{background:#fff;color:var(--ink)}
.btn:hover,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main{max-width:750px;margin:0 auto;padding:40px 24px 64px}
main h2,main h3{text-align:center;line-height:1.2;letter-spacing:-.02em}
main h2{font-size:2rem;margin:2.2em 0 .8em}
main h3{font-size:1.5rem;margin:2em 0 .8em}
main h4{font-size:1.15rem;margin:1.6em 0 .3em}
p{margin:0 0 16px}
ul.pts{list-style:none;padding:0;margin:1.4em 0 .3em;font-weight:700}
.cta{text-align:center;margin:34px 0}
.how{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;font-weight:600;margin:24px 0}
.how a{text-decoration:none;color:var(--ink)}
.c{text-align:center}
.c .n{font-size:2rem;color:var(--accent)}
.ex{text-align:center;margin-bottom:28px}
footer{border-top:1px solid var(--line);padding:28px 24px;text-align:center;color:var(--muted);font-size:.9rem}
footer a{color:var(--muted);margin:0 10px}
.gal{max-width:1040px;margin:0 auto;padding:32px 24px 64px}
.gal h1{text-align:center;font-size:2.4rem;letter-spacing:-.02em;margin:0 0 24px}
.find{display:block;max-width:360px;margin:0 0 24px auto;width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:4px;font:inherit}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);padding:12px;cursor:pointer}
.card:focus-visible{outline:3px solid var(--accent)}
.card[hidden]{display:none}
.card video{width:100%;aspect-ratio:380/214;display:block;background:#111;object-fit:cover}
.card p{margin:10px 0 0;font-size:.95rem}
dialog{border:0;padding:16px;max-width:min(860px,94vw);width:100%;border-radius:6px}
dialog::backdrop{background:rgba(10,10,30,.7)}
dialog video{width:100%;display:block;background:#000}
dialog .x{float:right;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;margin:-6px 0 6px}
dialog .m{color:var(--muted);font-size:.9rem}