:root { color-scheme: dark; --cyan: #6fe7ff; --yellow: #ffe45c; --pink: #ff7ad9; --text: #e9eef5; --dim: #9aa3b2; }
* { box-sizing: border-box; }
body { margin: 0; background: #07070c; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; line-height: 1.75; }
a { color: var(--cyan); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
header.hero { text-align: center; padding: 64px 0 32px; }
.hero img.icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 0 32px rgba(111, 231, 255, .35); }
.hero h1 { font-size: 48px; letter-spacing: .08em; margin: 20px 0 0; text-shadow: 0 0 18px rgba(111, 231, 255, .6); }
.hero .sub { color: var(--dim); margin: 4px 0 24px; }
.hero p.lead { max-width: 30em; margin: 0 auto 28px; }
.badge img { height: 52px; }
.soon { display: block; color: var(--dim); font-size: 13px; margin-top: 8px; }
.shots { display: flex; gap: 16px; justify-content: safe center; padding: 24px 0 8px; overflow-x: auto; }
.shots img { width: 200px; border-radius: 22px; border: 1px solid #262636; flex: none; }
h2 { font-size: 22px; margin: 48px 0 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { border: 1.5px solid var(--c, var(--cyan)); border-radius: 18px; padding: 14px 18px; box-shadow: 0 0 14px color-mix(in srgb, var(--c, var(--cyan)) 30%, transparent); }
.steps b { color: var(--c, var(--cyan)); }
footer { margin: 64px 0 0; padding: 24px 0 40px; border-top: 1px solid #1d1d29; color: var(--dim); font-size: 14px; text-align: center; }
footer a { margin: 0 10px; white-space: nowrap; display: inline-block; }
.doc h1 { font-size: 26px; margin: 40px 0 8px; }
.doc .back { display: inline-block; margin-top: 28px; font-size: 14px; }
h1, h2, p, li { word-break: auto-phrase; }
@media (max-width: 480px) { .doc h1 { font-size: 22px; } }