:root {
  --bg: #ffffff; --fg: #1c2024; --muted: #60646c; --line: #e0e1e6; --card: #f9f9fb;
  --accent: #3e63dd; --accent-fg: #ffffff; --mid: #f5c518;
  --radius: 12px; --maxw: 960px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111113; --fg: #edeef0; --muted: #b0b4ba; --line: #2e3135; --card: #18191b; --accent: #8da4ef; --accent-fg: #111113; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
    "Malgun Gothic", "Microsoft YaHei", "Noto Sans", "Noto Sans CJK SC", "Noto Sans Arabic", Tahoma, sans-serif;
}
html:lang(ar) body { line-height: 1.8; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

header.site { border-block-end: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); text-decoration: none; }
details.lang { position: relative; }
details.lang summary { cursor: pointer; list-style: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
details.lang summary::-webkit-details-marker { display: none; }
details.lang summary::after { content: " ▾"; }
details.lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); min-width: 200px; max-height: 70vh; overflow: auto; z-index: 5;
}
details.lang li a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; }
details.lang li a:hover { background: var(--card); }
details.lang li a[aria-current] { font-weight: 700; color: var(--accent); }

main { padding-block: 32px 48px; }
.hero { text-align: center; padding-block: 24px 8px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.1; margin: 0 0 8px; letter-spacing: -0.02em; }
.subtitle { font-size: 1.25rem; font-weight: 600; margin: 0 0 12px; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 40em; margin-inline: auto; }
.badge { display: inline-block; margin-block-start: 16px; padding: 8px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 0.95rem; }
.shot { margin: 32px auto; max-width: 560px; text-align: center; }
.shot img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.shot figcaption { color: var(--muted); font-size: 0.85rem; margin-block-start: 8px; }
h2 { font-size: 1.5rem; margin: 40px 0 16px; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.card p { margin: 0; color: var(--muted); }
.steps { padding-inline-start: 1.4em; }
.steps li { margin-block: 8px; }
.callout { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px 12px; margin-block-start: 40px; }
.callout h2 { margin-block-start: 16px; }

.doc { max-width: 720px; margin-inline: auto; }
.doc h1 { font-size: 2rem; margin: 0 0 8px; }
.doc .meta { color: var(--muted); margin-block-start: 0; }
.note { border-inline-start: 4px solid var(--mid); background: var(--card); padding: 10px 14px; border-radius: 8px; font-size: 0.95rem; }
.faq { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-block: 10px; background: var(--card); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 10px 0 0; color: var(--muted); }
.button { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); text-decoration: none; font-weight: 600; }
.center { text-align: center; }

footer.site { border-block-start: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; padding-block: 24px; }
footer.site nav a { color: var(--muted); }
.legal { margin: 8px 0 0; }