:root {
  color-scheme: dark;
  --sky: #101c39;
  --light: #f0f1fc;
  --muted: #bac5e2;
  --accent: #ffda91;
  --rule: #566382;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sky); color: var(--light); font: 1rem/1.6 system-ui, sans-serif; }
a { color: inherit; text-underline-offset: .3em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: .28rem; }
.skip { position: absolute; top: .65rem; left: .65rem; transform: translateY(-155%); z-index: 2; padding: .45rem .75rem; background: var(--light); color: var(--sky); }
.skip:focus { transform: none; }
header { border-bottom: 1px solid var(--rule); }
.bar, main, footer { width: min(100% - 4rem, 73rem); margin-inline: auto; }
.bar, footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.25rem; padding-block: 1rem; }
.identity { text-decoration: none; font-weight: 650; }
.identity span { color: var(--accent); margin-inline-end: .25rem; }
nav { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; }
nav, footer { font-size: .9rem; }
.atlas { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; min-height: 34rem; gap: 1.6rem; padding-block: 2.6rem; }
.kicker { margin: 0 0 .6rem; color: var(--accent); font: .9rem/1.4 Consolas, 'Courier New', monospace; }
h1, h2, h3 { margin: 0; line-height: 1.06; }
h1 { font-size: clamp(3.45rem, 8.8vw, 7.8rem); letter-spacing: -.072em; font-weight: 740; }
h2 { font-size: clamp(2rem, 4.3vw, 3.3rem); letter-spacing: -.04em; }
h3 { font-size: 1.2rem; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 35ch; margin-block: 1.25rem; }
.action { display: inline-flex; align-items: center; gap: .65rem; border: 1px solid var(--accent); border-radius: 2rem; padding: .5rem 1rem; color: var(--accent); text-decoration: none; }
.action:hover { color: var(--sky); background: var(--accent); }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: -.35rem; text-align: center; color: var(--muted); font-size: .82rem; }
.guide { padding-block: 3.1rem; border-top: 1px solid var(--rule); }
.guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2rem; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.guide li { counter-increment: step; }
.guide li::before { content: counter(step, decimal-leading-zero); display: block; color: var(--accent); margin-bottom: .4rem; font: 1rem/1.5 Consolas, 'Courier New', monospace; }
.guide p { margin: .5rem 0 0; color: var(--muted); }
.field { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; padding: clamp(1.15rem, 4vw, 2.8rem); background: #213054; border-radius: .35rem; }
.field ul { margin: 0; padding-left: 1.15rem; }
.field li + li { margin-top: .65rem; }
.field li::marker { color: var(--accent); }
footer { color: var(--muted); padding-block: 1.5rem; }
@media (max-width: 46rem) {
  .bar, main, footer { width: calc(100% - 2rem); }
  .atlas, .guide ol, .field { grid-template-columns: 1fr; }
  .atlas { padding-block: 2rem; gap: .8rem; }
  .guide { padding-block: 2rem; }
  .guide ol { gap: 1.2rem; }
  figure { max-width: 32rem; width: 100%; margin-inline: auto; }
}