/* «Поле» — по сайту Elsewhere: снимок на весь экран (бирюзовое небо и золотое поле), сверху логотип
   с «™», в центре маленькие кнопки в полупрозрачных плашках моноширинными прописными, справа такая же «Дальше»;
   по центру тонкий гротеск в две строки, вторая — полупрозрачная; внизу абзац, белая кнопка-таблетка
   и моноширинная строка с значком. */

:root {
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --g: clamp(16px, 7.6vw, 150px);
  --swap-out: 340ms;
  --p-font: var(--font); --p-radius: 14px; --p-accent: #2b6b72; --p-btn-bg: #11292d;
  --p-top: calc(70px + var(--sat)); --p-right: var(--g);
  --g-bg: #12343a; --g-accent: #ffb25e;
}
body { font-family: var(--font); color: #fff; }
.veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 40, 46, .42) 0%, rgba(10, 40, 46, .1) 30%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .1) 66%, rgba(8, 6, 4, .66) 100%); transition: opacity .6s; }
body.is-sky .veil { opacity: 0; }

/* ——— верх ——— */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(22px + var(--sat)) var(--g) 0; }
.brand { justify-self: start; font: 600 19px/1 var(--font); letter-spacing: -.02em; color: #fff; }
.brand sup { font-size: .55em; vertical-align: top; position: relative; top: -.1em; margin-left: 1px; }
.boxes { display: flex; gap: 4px; }
.box { height: 28px; padding: 0 10px; border-radius: 3px; background: rgba(214, 236, 238, .2); color: #fff; font: 500 11px/28px var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background .2s; }
.box:hover, .box[aria-pressed="true"] { background: rgba(214, 236, 238, .34); }
.box--cta { justify-self: end; }

/* ——— тексты ——— */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(clamp(90px, 15vh, 150px) + var(--sat)) var(--g) calc(clamp(74px, 11vh, 110px) + var(--sab)); text-align: center; }
.head { margin: 0; width: 100%; max-width: 1100px; font: 300 clamp(32px, 4.6vw, 70px)/1.08 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.head span { display: block; }
.l1 { color: #fff; }
.l2 { color: rgba(255, 255, 255, .72); }
.head { text-shadow: 0 1px 24px rgba(0, 0, 0, .28); }
.bottom { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 520px; }
.note { margin: 0; font: 400 clamp(14px, 1.1vw, 16px)/1.45 var(--font); color: #fff; text-wrap: pretty; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.cta { height: 44px; padding: 0 24px; border-radius: 999px; background: #fff; color: #10181a; font: 500 15px/1 var(--font); letter-spacing: -.01em; transition: transform .2s var(--ease); }
.cta:hover { transform: translateY(-1px); }
.fine { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.fine i { font-style: normal; font-size: 12px; }
[data-swap].is-out { transform: translateY(8px); filter: blur(4px); }

/* ——— таймлайн: такие же плашки внизу ——— */
.tl { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(22px + var(--sab)); padding: 0 var(--g); }
.tl-line { display: none; }
.tl-track { gap: 4px; }
.tl-track::before, .tl-track::after { content: ""; flex: 1 0 0px; }
.tl-dot { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 3px; background: rgba(214, 236, 238, .14); color: rgba(255, 255, 255, .8); }
.tl-pin { display: none; }
.tl-label { display: flex; gap: 8px; font: 500 11px/28px var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.tl-num { display: inline; opacity: .7; }
.tl-dot.is-active { background: #fff; color: #10181a; }
.tl-dot:hover { background: rgba(214, 236, 238, .3); }
.tl-dot.is-active:hover { background: #fff; }

@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; padding-top: calc(16px + var(--sat)); }
  .boxes { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 14px; }
  .boxes .box[data-action="restart"] { display: none; }
  .box--cta { grid-column: 2; grid-row: 1; }
  .screen { padding-top: calc(124px + var(--sat)); padding-bottom: calc(70px + var(--sab)); }
  .head { font-size: 34px; }
  .bottom { gap: 14px; }
  .fine { font-size: 10.5px; letter-spacing: .05em; }
  .tl { bottom: calc(14px + var(--sab)); }
}