@font-face { font-family: Geist; src: url(assets/fonts/Geist-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url(assets/fonts/Geist-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: GeistMono; src: url(assets/fonts/GeistMono-Medium.ttf); font-weight: 500; font-display: swap; }

:root {
  --bg: #0c0d0f; --surface: #17181b; --ink: #f2f2f0; --muted: #a7aab1; --line: #2a2c30;
  --seeker: #6f9bff; --hider: #ff7a45;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f5f5f3; --surface: #fff; --ink: #0e0f11; --muted: #55585f; --line: #dcdcd8; --seeker: #1e4fd8; --hider: #c93c0a; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.45 Geist, system-ui, sans-serif; }
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

.top { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.brand { display: flex; align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.brand img { border-radius: 10px; }
.lang { display: flex; gap: .25rem; }
.lang button { font: 500 .75rem GeistMono, monospace; letter-spacing: .12em; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 8px; padding: .75rem .875rem; min-height: 48px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }

.over { font: 500 .8125rem GeistMono, monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }

.hero { padding-top: 4rem; padding-bottom: 3rem; }
h1 { font-weight: 600; font-size: clamp(3.375rem, 11vw, 6rem); line-height: 1; letter-spacing: -.045em; margin: 0 0 1.5rem; }
h1 em { font-style: normal; color: var(--hider); }
.lead { max-width: 36rem; font-size: 1.25rem; color: var(--muted); margin: 0; }

.shots { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots img { width: 15rem; height: auto; flex: none; border-radius: 20px; border: 1px solid var(--line); scroll-snap-align: start; }

.how { padding-top: 4rem; padding-bottom: 4rem; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.how li { display: flex; gap: 1.25rem; background: var(--surface); padding: 1.25rem; }
.how li p { margin: 0; }
.how li span { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; font: 500 .8125rem GeistMono, monospace; font-variant-numeric: tabular-nums; }
.how li span.seeker { color: var(--bg); background: var(--seeker); border-radius: 50%; }
.how li span.hider { color: var(--bg); background: var(--hider); border-radius: 4px; transform: rotate(45deg); }
.how li span.hider::before { content: attr(data-n); transform: rotate(-45deg); }
.how li span.hider { font-size: 0; }
.how li span.hider::before { font-size: .8125rem; }

.foot { border-top: 1px solid var(--line); padding-top: 1.5rem; padding-bottom: 3rem; color: var(--muted); font-size: .9375rem; }
.foot p { margin: 0 0 1rem; }

@media (min-width: 40rem) { .how ol { grid-template-columns: 1fr 1fr; } }