:root { --ink:#1f2940; --muted:#5d6980; --line:#e2e5ed; --brand:#5b65c8; --bg:#f7f8fb; font-family: Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; color:var(--ink); background:var(--bg); }
@media (prefers-color-scheme: dark) { :root { --ink:#e8ebf5; --muted:#a3adc2; --line:#2b3350; --brand:#8d96ee; --bg:#0f1424; } .panel,.shot { background:#161c33 !important; } }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 15% 0%, #5b65c81f, transparent 45%), var(--bg); color:var(--ink); line-height:1.65; }
.wrap { width:min(100% - 32px, 960px); margin:0 auto; }
header.top { display:flex; align-items:center; gap:12px; padding:22px 0; } header.top img { width:40px; height:40px; border-radius:12px; } header.top b { font-size:18px; letter-spacing:-.02em; }
.hero { padding:36px 0 28px; text-align:center; } .hero h1 { margin:0 auto 14px; max-width:16ch; font-size:clamp(34px,6vw,56px); line-height:1.08; letter-spacing:-.05em; }
.hero p { margin:0 auto; max-width:56ch; color:var(--muted); font-size:18px; }
.badge { display:inline-block; margin-top:22px; padding:10px 18px; border:1px solid var(--line); border-radius:999px; font-size:14px; color:var(--muted); background:#ffffff1a; }
.shot { margin:30px auto 0; padding:10px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 24px 70px #2c36521f; } .shot img { display:block; width:100%; height:auto; border-radius:12px; }
section { padding:44px 0 6px; } h2 { margin:0 0 6px; font-size:28px; letter-spacing:-.035em; } .lead { margin:0 0 22px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } .panel { padding:22px; border:1px solid var(--line); border-radius:18px; background:#ffffffd9; } .panel h3 { margin:0 0 6px; font-size:17px; } .panel p { margin:0; color:var(--muted); font-size:15px; }
.pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:6px; } .pair .shot { margin:0; }
ul.plain { padding-left:20px; color:var(--muted); } ul.plain li + li { margin-top:6px; }
a { color:var(--brand); } footer { margin:54px 0 40px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; } footer p { margin:6px 0; }
.gap { margin-top:16px; }