*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Фон намеренно не чистый #000: у многих работ чёрная подложка,
     на абсолютном чёрном они превратились бы в бесформенные пятна. */
  --bg: #0c0c0e;
  --bg-deep: #08080a;
  --fg: #f2f0ec;
  --fg-dim: #8a8880;
  --fg-mute: #4e4c48;
  --accent: #f2f0ec;

  --pad: clamp(16px, 3.2vw, 34px);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;              /* прокрутка страницы — это зум сцены */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Сцену таскают мышью, и любое перетаскивание выделяло бы текст и картинки
   под курсором. Выделять здесь нечего — это не документ, а пространство.
   Исключение — лайтбокс: там текст можно скопировать. */
body {
  user-select: none;
  -webkit-user-select: none;
}
.lb-content, .lb-caption {
  user-select: text;
  -webkit-user-select: text;
}

body {
  opacity: 0;
  transition: opacity .5s ease;
}
body.is-ready { opacity: 1; }

button { font: inherit; color: inherit; }

::selection { background: var(--fg); color: var(--bg); }

/* ── шапка ───────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: difference;    /* имя читается на любой работе под ним */
}

.brand {
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: lowercase;
  text-decoration: none;
  color: #fff;
}

/* ── подсказка ───────────────────────────────────────────────────── */
.hint {
  position: fixed;
  left: 50%;
  bottom: max(var(--pad), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--fg-mute);
  pointer-events: none;
  z-index: 40;
  white-space: nowrap;
  transition: opacity .6s ease;
}
.hint.is-gone { opacity: 0; }
.hint-key { color: var(--fg-dim); }
.hint-sep { opacity: .4; margin: 0 .5em; }

@media (max-width: 760px) {
  .hint { font-size: 10px; }
}