:root { --ink: #e8e2c8; --sea: #0b1a2a; --deep: #071220; --gold: #ffd27a; --muted: #9fb0bf; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sea); color: var(--ink); font: 17px/1.55 system-ui, sans-serif; }
a { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; background: var(--deep); }
.top .logo { font: 700 22px/1 ui-monospace, monospace; color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover, .top nav a:focus-visible { color: var(--gold); }
.play, .btn { display: inline-block; padding: 8px 16px; border-radius: 8px; background: var(--gold); color: var(--deep) !important; font-weight: 700; text-decoration: none; }
.btn.big { padding: 14px 28px; font-size: 20px; }
main { max-width: 1040px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { line-height: 1.2; }
.hero { position: relative; margin: 0 -16px; }
.hero img, .hero video { width: 100%; max-height: 70vh; object-fit: cover; }
.hero video { position: absolute; top: 0; left: 0; height: auto; aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) { .hero video { display: none; } }
.hero .over { padding: 16px; text-align: center; }
.hero .tag { font-size: 22px; margin: 8px 0 16px; }
#online { margin-top: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 0; list-style: none; }
.grid li { background: var(--deep); border-radius: 10px; padding: 14px; }
.grid h3 { margin: 0 0 6px; color: var(--gold); }
.shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.shots img { flex: 0 0 min(85%, 480px); scroll-snap-align: start; border-radius: 8px; }
.lede { color: var(--muted); margin-top: -8px; }
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: center; margin: 24px 0; }
.feature img { border-radius: 8px; }
.feature h3 { color: var(--gold); margin: 0 0 6px; }
.feature p { margin: 0 0 10px; }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; background: var(--deep); border-radius: 10px; padding: 12px 14px 12px 52px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 10px; font: 700 24px/1 ui-monospace, monospace; color: var(--gold); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #22384f; vertical-align: top; }
th { color: var(--gold); white-space: nowrap; }
kbd { font: 14px ui-monospace, monospace; background: var(--deep); border: 1px solid #33506e; border-radius: 4px; padding: 1px 6px; }
dt { font-weight: 700; margin-top: 16px; color: var(--gold); }
dd { margin: 4px 0 0; }
footer { padding: 24px 16px; text-align: center; color: var(--muted); background: var(--deep); margin-top: 32px; }