:root { --bg: #fff6fb; --ink: #3a2b5c; --soft: #6e5f8f; --pink: #ff5fa2; --card: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --bg: #1d1730; --ink: #f3eefe; --soft: #c2b6dd; --pink: #ff8cc0; --card: #2a2242; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 ui-rounded, -apple-system, system-ui, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { color: var(--pink); font-size: 2.2rem; line-height: 1.2; margin: 0 0 4px; }
h2 { margin: 32px 0 8px; font-size: 1.3rem; }
h3 { margin: 20px 0 4px; font-size: 1.05rem; }
.sub { color: var(--soft); margin: 0; }
a { color: var(--pink); }
.foot { margin-top: 40px; font-size: 0.95rem; }
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.hero h1 { margin: 0; }
.icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); flex-shrink: 0; }
.screenshot { display: block; max-width: 220px; width: 100%; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); margin: 0 auto 32px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0 8px; }
.gallery figure { margin: 0; text-align: center; }
.gallery img { width: 100%; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.16); }
.gallery figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--soft); }