/* Uncork — сайт продукта.
 *
 * Оформление перенесено из прототипа (MIT, «Uncork prototype contributors»,
 * ~/Projects/uncork-handoff-2026-09-16). Оттуда же взяты токены тем: light,
 * dark, amoled и neon совпадают с темами приложения.
 *
 * Дальше по файлу — наши добавления: полоса приглашения, переключатель языка,
 * таблицы отчётов и правовые страницы. Русский текст длиннее английского
 * примерно на шестую часть, поэтому у заголовков и кнопок запас по ширине.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=DM+Mono:wght@400;500&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
:root {
  --bg: #f7f6f2;
  --ink: #252923;
  --muted: #71746f;
  --line: #d9dbd3;
  --panel: #fff;
  --side: #efefec;
  --blue: #0877ec;
  --selection: #eaf2fd;
  --green: #3e8251;
  --shadow: 0 24px 50px -25px #313d3a55;
  --grid: #d7dad230;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 26px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  transition:
    background 0.25s,
    color 0.25s;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
button {
  color: inherit;
}
button:disabled {
  cursor: default;
}
.wrap {
  width: min(1080px, calc(100% - 64px));
  margin: auto;
}
.rainbow {
  height: 5px;
  background: linear-gradient(
    90deg,
    #64aa58 0 16.66%,
    #e7c653 16.66% 33.33%,
    #e39642 33.33% 50%,
    #d35b52 50% 66.66%,
    #9665aa 66.66% 83.33%,
    #4b94c4 83.33%
  );
}
.nav {
  height: 93px;
  display: flex;
  align-items: center;
  gap: 36px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
}
.brand small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 3px;
}
.nav nav {
  display: flex;
  gap: 28px;
  margin: auto;
  font-size: 14px;
}
.nav nav a:hover,
.text-link:hover {
  color: var(--blue);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid #0067d2;
  background: var(--blue);
  color: #fff;
  border-radius: 7px;
  padding: 12px 21px;
  font-weight: 550;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 2px 3px #1320380a;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.button.small {
  font-size: 14px;
  padding: 9px 15px;
  gap: 15px;
}
.hero {
  text-align: center;
  padding-top: 52px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.45px;
  font-family: "DM Mono", monospace;
  font-weight: 400;
}
.hero > .eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0.15px;
  margin: 0 0 11px;
}
.pixel-star {
  color: var(--green);
  font-size: 21px;
  vertical-align: -1px;
  margin-right: 7px;
}
h1 {
  font-size: 66px;
  line-height: 1.08;
  letter-spacing: -3px;
  font-weight: 550;
  margin: 12px 0 16px;
}
h1 em {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  letter-spacing: -1.7px;
}
.intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
  align-items: center;
  margin-top: 25px;
}
.text-link {
  font-size: 14px;
  font-weight: 550;
  display: inline-flex;
  gap: 18px;
  align-items: center;
}
.requirements {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 42px;
}
.preview-heading {
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  margin: 0 3px 11px;
  align-items: center;
}
.mini-square {
  display: inline-block;
  border: 1px solid var(--muted);
  height: 9px;
  width: 11px;
  margin-right: 7px;
  box-shadow:
    inset 0 2px var(--bg),
    inset 0 3px var(--muted);
}
.concept-label {
  font-family: "DM Mono", monospace;
  letter-spacing: 1px;
  font-size: 10px;
}
.app-window {
  height: 400px;
  background: var(--panel);
  display: grid;
  grid-template-columns: 177px minmax(0, 1fr) 240px;
  border: 1px solid #aaafa6;
  border-radius: 11px;
  box-shadow:
    var(--shadow),
    0 0 0 4px #ffffff33;
  overflow: hidden;
  text-align: left;
}
.sidebar {
  background: var(--side);
  border-right: 1px solid var(--line);
  padding: 17px 12px;
  position: relative;
}
.traffic {
  display: flex;
  gap: 7px;
  padding: 0 5px;
}
.traffic i {
  width: 10px;
  height: 10px;
  background: #ed6a5f;
  border-radius: 50%;
  border: 1px solid #00000015;
}
.traffic i:nth-child(2) {
  background: #f4bd4f;
}
.traffic i:nth-child(3) {
  background: #62c454;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.7px;
  margin: 26px 3px 22px;
}
.side-label {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.9px;
  font-weight: 650;
  margin: 0 10px 6px;
}
.side-item {
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  width: 100%;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 12px;
  text-align: left;
}
.side-item span {
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
}
.side-item small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.side-item.active {
  background: var(--selection);
  color: var(--blue);
  font-weight: 600;
}
.side-item.active span {
  color: var(--blue);
}
.side-divider {
  border-bottom: 1px solid var(--line);
  margin: 16px 8px;
}
.sidebar-bottom {
  position: absolute;
  bottom: 18px;
  left: 21px;
  font-size: 10px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
.status {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.library {
  padding: 24px 22px 0;
  position: relative;
}
.library-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}
.library-top h2 {
  font-size: 20px;
  letter-spacing: -0.6px;
  margin: 0;
  font-weight: 650;
  white-space: nowrap;
}
.library-top h2 small {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
  margin-left: 5px;
}
.search {
  font-size: 17px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  padding: 3px 8px;
  max-width: 150px;
  color: var(--muted);
}
.search input {
  width: 100%;
  font-size: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
}
.games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 17px;
}
.game {
  padding: 5px;
  border: 1px solid transparent;
  text-align: left;
  border-radius: 6px;
  background: transparent;
  min-width: 0;
}
.game.selected {
  background: var(--selection);
  border-color: #0877ec40;
}
.game strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
}
.game > .status {
  font-size: 9px;
  gap: 4px;
}
.game .status:before {
  width: 4px;
  height: 4px;
}
.cover {
  height: 76px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #677361;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.cover-fallback {
  position: absolute;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
}
.cs-cover {
  background: #cf9a50;
}
.beam-cover {
  background: #526166;
}
.type-cover {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  text-align: center;
}
.miside-cover {
  background: #f2d7d9;
  color: #813e51;
}
.bunny-cover {
  background: #344443;
  color: #dbe5da;
}
.cover-small {
  display: block;
  font:
    8px "DM Mono",
    monospace;
  letter-spacing: 0;
  margin-top: 6px;
}
.library-foot {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 14px;
  left: 27px;
  right: 27px;
  color: var(--muted);
  font-size: 9px;
}
.empty {
  font-size: 14px;
  color: var(--muted);
}
.game-detail {
  border-left: 1px solid var(--line);
  padding: 26px 22px;
  position: relative;
  background: var(--panel);
}
.detail-kicker {
  font:
    8px "DM Mono",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.detail-icon {
  font-size: 31px;
  line-height: 1;
  color: var(--blue);
  margin-top: 22px;
  font-family: "DM Mono", monospace;
}
.game-detail h3 {
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.7px;
  margin: 12px 0 9px;
}
.game-detail > p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 33px;
  margin: 0 0 15px;
}
.play {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  gap: 6px;
}
.detail-line {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 18px;
}
.detail-line .status {
  font-size: 10px;
}
.game-settings {
  margin-top: 15px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.game-settings summary {
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.game-settings[open] {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 15px;
  padding: 12px;
  background: var(--panel);
  z-index: 2;
  box-shadow: 0 3px 18px #0003;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.game-settings p {
  font-size: 10px;
  color: var(--muted);
}
.input-status {
  position: absolute;
  bottom: 18px;
  display: grid;
  gap: 3px;
  font-size: 10px;
}
.input-status > span + span {
  color: var(--muted);
  font-size: 9px;
}
.preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 21px;
  color: var(--muted);
  font-size: 12px;
}
.preview-footer p {
  margin: 0;
}
.themes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.themes button {
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 4px;
  color: var(--muted);
}
.themes .chosen {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 2px #0000000a;
}
.swatch {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  border: 1px solid #0003;
}
.swatch.light {
  background: #eee;
}
.swatch.dark {
  background: #42464b;
}
.swatch.amoled {
  background: #080808;
}
.swatch.neon {
  background: #279dfa;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  padding: 65px 0 59px;
  border-bottom: 1px solid var(--line);
}
.feature-no {
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.features h2 {
  font-size: 19px;
  letter-spacing: -0.4px;
  font-weight: 550;
  margin: 12px 0 8px;
}
.features p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}
.results {
  padding: 64px 0;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 29px;
}
.section-heading .eyebrow,
.about .eyebrow {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.4px;
  margin: 0 0 10px;
}
h2 {
  font-weight: 550;
}
.section-heading h2,
.about h2,
.last-call h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0;
}
.section-heading > p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 2px;
}
.results-table {
  border-top: 1px solid var(--ink);
}
.table-row,
.table-head {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.4fr;
  gap: 25px;
  align-items: center;
}
.table-row {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  font-size: 14px;
}
.table-row strong {
  font-weight: 550;
}
.table-head {
  font:
    10px "DM Mono",
    monospace;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 12px 0;
}
.table-row > span:last-child {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.table-row a {
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.fps {
  font-family: "DM Mono", monospace;
  font-size: 19px;
}
.fps small {
  font-size: 11px;
  color: var(--muted);
}
.unsupported {
  color: var(--muted);
}
.measurement-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 14px;
  max-width: 780px;
  line-height: 1.7;
}
.measurement-note strong {
  font-weight: 500;
}
.measurement-note a {
  text-decoration: underline;
}
.about {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 100px;
  border-block: 1px solid var(--line);
  padding: 58px 55px;
  align-items: center;
  background: var(--side);
}
.about-mark {
  max-width: 230px;
  transform: rotate(-5deg);
  text-align: center;
  margin: auto;
}
.about-mark > span {
  font-family: "DM Sans", sans-serif;
  font-size: 100px;
  letter-spacing: -5px;
  line-height: 1.05;
  font-style: italic;
}
.about-mark .rainbow {
  height: 8px;
  margin-top: 15px;
}
.about h2 {
  font-size: 29px;
}
.about-copy > p:not(.eyebrow) {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.about-copy .text-link {
  margin-top: 6px;
}
.faq {
  padding: 62px 0;
  max-width: 780px;
}
.faq > h2 {
  font-size: 25px;
  letter-spacing: -0.6px;
  margin: 0 0 23px;
}
.faq details {
  border-top: 1px solid var(--line);
  padding: 17px 0;
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
}
.faq summary::-webkit-details-marker,
.game-settings summary::-webkit-details-marker {
  display: none;
}
.faq summary span {
  font-size: 17px;
  color: var(--muted);
}
.faq details[open] summary span {
  transform: rotate(45deg);
}
.faq details p {
  font-size: 14px;
  color: var(--muted);
  max-width: 660px;
  line-height: 1.8;
  margin-bottom: 0;
}
.real-app {
  width: 100%;
  border-radius: 8px;
  margin-top: 20px;
}
.last-call {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 38px 0 55px;
}
.last-call .eyebrow {
  font-size: 10px;
  color: var(--muted);
}
.last-call h2 {
  font-size: 30px;
}
footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 35px;
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 11px;
  color: var(--muted);
}
footer .brand {
  font-size: 19px;
  color: var(--ink);
}
footer > span {
  margin-left: auto;
}
footer p {
  margin: 0;
}
dialog {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  max-width: 480px;
  width: calc(100% - 32px);
  border-radius: 12px;
  padding: 38px;
  box-shadow: 0 20px 100px #0004;
}
dialog::backdrop {
  background: #12181d77;
  backdrop-filter: blur(5px);
}
dialog h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.7px;
}
dialog > p {
  color: var(--muted);
  font-size: 15px;
}
.close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 27px;
  color: var(--muted);
}
dialog .button {
  margin-top: 10px;
}
dialog .dialog-note {
  font-size: 12px;
  margin-top: 22px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 9px;
  box-shadow: 0 5px 25px #0003;
  max-width: calc(100% - 32px);
  z-index: 10;
}
.skip {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--panel);
  z-index: 20;
  padding: 10px;
}
.skip:focus {
  top: 10px;
}
[hidden] {
  display: none !important;
}
html[data-theme="dark"] {
  --bg: #1c1d1e;
  --ink: #edece8;
  --muted: #a2a6a5;
  --line: #3b3e40;
  --panel: #27292b;
  --side: #222426;
  --blue: #2d8cf0;
  --selection: #263e58;
  --green: #82b995;
  --shadow: 0 24px 50px -25px #000a;
}
html[data-theme="amoled"] {
  --bg: #000;
  --ink: #eeefef;
  --muted: #999fa5;
  --line: #31363b;
  --panel: #08090a;
  --side: #030405;
  --blue: #2d8cf0;
  --selection: #142538;
  --green: #83b594;
  --shadow: none;
}
html[data-theme="neon"] {
  --bg: #060c12;
  --ink: #e0eff7;
  --muted: #95aabb;
  --line: #263b4b;
  --panel: #0d1721;
  --side: #080c12;
  --blue: #1e9cf0;
  --selection: #12354e;
  --green: #72c5a7;
  --shadow: 0 20px 70px -20px #009dff30;
}
html[data-theme="neon"] .play {
  box-shadow: 0 0 18px #1e9cf044;
}
html:not([data-theme="light"]) .brand img,
html:not([data-theme="light"]) .app-brand img {
  filter: brightness(1.2);
}
@media (min-width: 1400px) {
  .hero {
    padding-top: 65px;
  }
  .requirements {
    margin-bottom: 46px;
  }
}
@media (max-width: 1000px) {
  .features {
    gap: 25px;
  }
  .theme-note {
    display: none;
  }
  .about {
    gap: 60px;
    padding-inline: 35px;
  }
  .table-row,
  .table-head {
    grid-template-columns: 1fr 0.8fr 1.25fr;
  }
  .nav nav {
    gap: 19px;
  }
  .brand small {
    display: none;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .nav {
    height: 74px;
    gap: 14px;
    justify-content: space-between;
  }
  .nav nav {
    display: none;
  }
  .brand {
    font-size: 23px;
  }
  .hero {
    padding-top: 37px;
  }
  h1 {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .intro {
    font-size: 15px;
  }
  .intro br {
    display: none;
  }
  .hero > .eyebrow {
    font-size: 12px;
  }
  .hero-actions {
    gap: 18px;
  }
  .hero-actions .button {
    padding: 11px 15px;
    font-size: 13px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    gap: 8px;
  }
  .requirements {
    font-size: 10px;
    margin-bottom: 30px;
  }
  /* Окно демо сюда не попадает. Это точная копия программы шириной 1280 —
     она не перекладывается под ширину экрана, а целиком масштабируется
     через --k (см. раздел «Стол»). Правила вида «.app-window / .library /
     .game-detail на узком экране» жили здесь от прежнего статичного превью
     и, когда окно стало живым и на телефоне, начали ломать копию: правая
     колонка уезжала под библиотеку. Всё, что меняет внутренности окна,
     принадлежит масштабу, а не медиазапросу. */
  .preview-footer {
    display: block;
    margin-top: 18px;
  }
  .preview-footer > p {
    font-size: 11px;
    margin-bottom: 9px;
  }
  .themes {
    display: inline-flex;
    gap: 0;
  }
  .themes button {
    font-size: 10px;
    padding: 5px 9px;
  }
  .features {
    padding: 39px 0 35px;
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .features h2 {
    margin: 6px 0;
    font-size: 20px;
  }
  .features p {
    font-size: 14px;
  }
  .features p br {
    display: none;
  }
  .results {
    padding: 40px 0;
  }
  .section-heading {
    display: block;
  }
  .section-heading h2 {
    font-size: 29px;
  }
  .section-heading > p {
    margin-top: 13px;
    font-size: 13px;
  }
  .table-row {
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
    padding: 15px 0;
    font-size: 13px;
  }
  .table-row > span:last-child {
    grid-column: 1 / -1;
    font-size: 11px;
  }
  .table-head {
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
  }
  .table-head > span:last-child {
    display: none;
  }
  .fps {
    font-size: 17px;
  }
  .measurement-note {
    font-size: 10px;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 35px 25px;
  }
  .about-mark {
    margin: 0;
    width: 140px;
  }
  .about-mark > span {
    font-size: 67px;
  }
  .about-mark .rainbow {
    height: 5px;
    margin-top: 8px;
  }
  .about h2 {
    font-size: 28px;
  }
  .about-copy > p:not(.eyebrow) {
    font-size: 14px;
  }
  .faq {
    padding: 40px 0;
  }
  .faq > h2 {
    font-size: 23px;
  }
  .faq summary {
    font-size: 13px;
  }
  .last-call {
    display: block;
    padding: 8px 0 36px;
  }
  .last-call h2 {
    font-size: 27px;
  }
  .last-call .button {
    margin-top: 23px;
  }
  footer {
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 10px;
  }
  footer .brand {
    font-size: 18px;
  }
  footer p {
    flex-basis: 65%;
  }
  footer > span {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
/* A quieter, more personal Macintosh direction. */
:root {
  --bg: #f6f6f1;
  --ink: #252821;
  --muted: #666b63;
  --line: #d3d7cd;
  --side: #eceee7;
  --shadow: 0 14px 28px -18px #25382966;
}
.wrap {
  width: min(1080px, calc(100% - 64px));
}
.nav {
  height: 82px;
  border-bottom-color: var(--ink);
}
.nav .brand {
  font-size: 26px;
  letter-spacing: -1.2px;
}
.nav nav {
  font-size: 13px;
}
.nav > .button {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  border-radius: 4px;
}
.rainbow {
  height: 4px;
}
.hero {
  padding-top: 42px;
  text-align: left;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 60px;
  align-items: center;
  padding: 0 0 32px;
}
.hero .eyebrow {
  font:
    10px "DM Mono",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 16px;
}
h1 {
  font-size: 43px;
  line-height: 1.12;
  letter-spacing: -1.9px;
  font-weight: 550;
  margin: 0 0 18px;
}
.intro {
  font-size: 16px;
  line-height: 1.65;
}
.hero-actions {
  justify-content: flex-start;
  margin-top: 23px;
  gap: 23px;
}
.hero-actions .button {
  border-radius: 4px;
  gap: 28px;
  padding: 10px 19px;
}
.requirements {
  font-size: 11px;
  margin: 11px 0 0;
}
.beta-note {
  border-left: 1px solid var(--line);
  padding: 4px 0 5px 25px;
  font-size: 13px;
}
.note-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.note-number {
  font:
    10px "DM Mono",
    monospace;
  color: var(--muted);
}
.beta-note p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  margin: 9px 0 17px;
}
.beta-note p:first-of-type {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.25px;
  color: var(--ink);
  line-height: 1.3;
  margin: 20px 0 10px;
}
.beta-note a {
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.preview-heading {
  border: 1px solid #9ea496;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin: 0;
  background: var(--side);
  padding: 6px 13px;
  color: var(--ink);
  font:
    11px "DM Mono",
    monospace;
  min-height: 30px;
  position: relative;
}
.preview-heading .mini-square {
  border-color: var(--ink);
  box-shadow:
    inset 0 2px var(--side),
    inset 0 3px var(--ink);
}
.concept-label {
  font-size: 8px;
  letter-spacing: 0.8px;
  color: var(--muted);
}
.app-window {
  border-color: #9ea496;
  border-radius: 0 0 7px 7px;
  height: 397px;
}
.preview-footer {
  margin-top: 15px;
  font-size: 11px;
  gap: 17px;
  justify-content: flex-start;
}
.themes {
  padding: 0;
  border: 0;
  border-radius: 0;
  gap: 12px;
}
.themes button {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 3px;
}
.theme-note {
  margin-left: auto !important;
  font-size: 11px;
}
.input-story {
  display: grid;
  grid-template-columns: 155px 1fr 230px;
  gap: 35px;
  padding: 53px 0 49px;
  border-bottom: 1px solid var(--line);
}
.section-index {
  font:
    15px "DM Mono",
    monospace;
  color: var(--muted);
  line-height: 1.8;
}
.section-index > span {
  font-size: 9px;
  line-height: 1.8;
  display: block;
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.input-story h2 {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: -0.65px;
  margin: 0 0 12px;
}
.input-story p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 12px;
}
.input-story p:last-child {
  margin: 0;
}
.input-story aside {
  border-left: 1px solid var(--line);
  padding-left: 35px;
  align-self: center;
}
.input-story aside strong {
  font:
    40px "DM Mono",
    monospace;
  letter-spacing: -2px;
  font-weight: 400;
  line-height: 1.2;
}
.input-story aside strong span {
  font-size: 18px;
  letter-spacing: -0.5px;
}
.input-story aside p {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 12px;
}
.results {
  padding: 48px 0 55px;
}
.section-heading h2 {
  font-size: 29px;
  letter-spacing: -0.9px;
}
.section-heading > p {
  font-size: 12px;
}
.section-heading .eyebrow {
  font-size: 9px;
}
.table-row {
  padding: 18px 0;
}
.table-head {
  padding: 10px 0;
  font-size: 9px;
}
.about {
  background: transparent;
  grid-template-columns: 1fr 0.85fr;
  gap: 75px;
  padding: 50px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.readme {
  border: 1px solid var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--line);
  border-radius: 2px;
  transform: rotate(-0.5deg);
}
.readme-bar {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--ink);
  padding: 0 9px;
  font:
    12px "DM Mono",
    monospace;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    var(--line) 3px 4px
  );
}
.readme-bar span {
  background: var(--panel);
  padding: 0 7px;
}
.readme-body {
  padding: 27px 30px;
}
.readme-label {
  font:
    9px "DM Mono",
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.readme h2 {
  font-size: 26px;
  margin: 16px 0;
  line-height: 1.15;
  letter-spacing: -0.9px;
}
.readme p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.readme a {
  font-size: 12px;
  margin-top: 12px;
}
.about-copy {
  padding-top: 10px;
}
.about-copy h2 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.65px;
}
.plain-notes {
  list-style: none;
  padding: 0;
  margin: 25px 0 0;
}
.plain-notes li {
  margin-top: 22px;
}
.plain-notes strong {
  font-weight: 550;
  font-size: 13px;
}
.plain-notes p {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  margin: 5px 0 0;
}
.faq {
  max-width: none;
  display: grid;
  grid-template-columns: 230px 1fr;
  column-gap: 75px;
  padding: 48px 0;
}
.faq > h2 {
  grid-column: 1;
  grid-row: 1 / 6;
  font-size: 23px;
  line-height: 1.25;
  max-width: 170px;
}
.faq > details {
  grid-column: 2;
}
.faq > details:first-of-type {
  border-top-color: var(--ink);
}
.last-call {
  border-top: 1px solid var(--line);
  padding: 31px 0 41px;
}
.last-call h2 {
  font-size: 29px;
}
.last-call .eyebrow {
  font-size: 9px;
}
footer {
  font-size: 10px;
}
.button {
  border-radius: 5px;
}
.app-window .play {
  border-radius: 5px;
}
.cover-fallback {
  display: none;
}
@media (min-width: 1400px) {
  .hero {
    padding-top: 46px;
  }
}
@media (max-width: 1000px) {
  .hero-layout {
    gap: 30px;
    grid-template-columns: 1fr 225px;
  }
  h1 {
    font-size: 38px;
  }
  .input-story {
    grid-template-columns: 115px 1fr 170px;
    gap: 25px;
  }
  .input-story aside {
    padding-left: 23px;
  }
  .input-story aside strong {
    font-size: 32px;
  }
  .about {
    gap: 40px;
  }
  .faq {
    grid-template-columns: 190px 1fr;
    gap: 0 40px;
  }
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .nav {
    height: 70px;
  }
  .nav .brand {
    font-size: 23px;
  }
  .hero {
    padding-top: 31px;
  }
  .hero-layout {
    display: block;
    padding-bottom: 25px;
  }
  .hero .eyebrow {
    font-size: 8px;
    letter-spacing: 0.8px;
    margin-bottom: 13px;
  }
  h1 {
    font-size: 35px;
    letter-spacing: -1.4px;
    line-height: 1.17;
  }
  .intro {
    font-size: 14px;
    max-width: 330px;
  }
  .intro br {
    display: none;
  }
  .hero-actions {
    margin-top: 19px;
    gap: 20px;
  }
  .hero-actions .button {
    font-size: 13px;
    padding: 10px 14px;
    gap: 15px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .requirements {
    font-size: 10px;
  }
  .beta-note {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
  }
  .note-title {
    grid-column: 1;
    font-size: 11px;
  }
  .note-number {
    display: none;
  }
  .beta-note p:first-of-type {
    grid-column: 1 / -1;
    font-size: 13px;
    margin: 0;
  }
  .beta-note p:nth-of-type(2) {
    display: none;
  }
  .beta-note a {
    grid-row: 1;
    grid-column: 2;
    font-size: 10px;
  }
  .preview-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .preview-footer > p {
    font-size: 10px;
    margin: 0;
  }
  .themes {
    gap: 0;
  }
  .themes button {
    font-size: 9px;
    padding: 4px 6px;
    gap: 5px;
  }
  .theme-note {
    display: none;
  }
  .input-story {
    grid-template-columns: 1fr auto;
    gap: 19px 25px;
    padding: 33px 0;
  }
  .section-index {
    grid-column: 1 / -1;
    font-size: 11px;
    display: flex;
    gap: 13px;
    align-items: center;
  }
  .section-index > span {
    display: inline;
    font-size: 8px;
    margin: 0;
  }
  .section-index br {
    display: none;
  }
  .input-story > div:nth-child(2) {
    grid-column: 1 / -1;
  }
  .input-story h2 {
    font-size: 23px;
  }
  .input-story p {
    font-size: 13px;
  }
  .input-story aside {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
  }
  .input-story aside strong {
    font-size: 31px;
  }
  .input-story aside p {
    margin: 0;
    font-size: 10px;
  }
  .results {
    padding: 35px 0;
  }
  .section-heading h2 {
    font-size: 26px;
  }
  .section-heading > p {
    font-size: 12px;
  }
  .table-row {
    padding: 14px 0;
  }
  .about {
    grid-template-columns: 1fr;
    padding: 32px 0;
    gap: 33px;
  }
  .readme-body {
    padding: 22px;
  }
  .readme h2 {
    font-size: 27px;
  }
  .readme p {
    font-size: 13px;
  }
  .about-copy {
    padding: 0 3px;
  }
  .about-copy h2 {
    font-size: 24px;
  }
  .plain-notes p {
    font-size: 13px;
  }
  .faq {
    display: block;
    padding: 35px 0;
  }
  .faq > h2 {
    max-width: none;
    font-size: 24px;
  }
  .last-call {
    padding: 25px 0 32px;
  }
  .last-call h2 {
    font-size: 26px;
  }
}
.input-story aside strong {
  letter-spacing: -0.5px;
}

/* ==========================================================================
   Наше сверх прототипа: полоса приглашения, язык, шаги, подвал.
   Всё на тех же токенах, что и выше, — чтобы темы работали и здесь.
   ========================================================================== */

/* Полоса приглашения. Появляется только по ссылке /r/КОД и живёт один заход. */
.invite {
  background: var(--selection);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.invite p {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px clamp(18px, 4vw, 34px);
}

/* Правая часть шапки: язык, вход, кнопка. */
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 5px 9px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.lang button.on { background: var(--ink); color: var(--panel); }

/* Шаги «как начать» — нумерация своя, чтобы цифра стояла рядом с заголовком. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 26px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  padding-top: 3px;
}
/* Заголовок и текст идут во второй колонке: в первой стоит номер шага.
   Без этого абзац уезжал в колонку номера шириной 34 пикселя. */
.steps li h3, .steps li p { grid-column: 2; }
.steps h3 { margin: 0 0 6px; }
.steps p { margin: 0; color: var(--muted); }
.access-note { margin-top: 30px; }

.report-links { display: grid; gap: 8px; margin: 18px 0 10px; }

.faq-list { display: grid; gap: 0; }

.themes-section .themes { margin-top: 18px; }

/* Подвал. */
footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 8vw, 110px);
  padding-block: 28px 44px;
  display: grid;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand b { color: var(--ink); font-size: 16px; }
.foot-brand span { font-family: "DM Mono", monospace; font-size: 11.5px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a { color: var(--muted); }
.foot-legal { margin: 0; max-width: 70ch; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .nav-right { gap: 10px; }
  .lang { order: 2; }
  .steps li { grid-template-columns: 26px 1fr; }
}

/* Обычная секция: заголовок, вступление и сетка заметок. Двухколонный .about
   оставлен там, где он и задумывался, — у окна Read me. */
.block {
  padding: clamp(46px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--line);
}
.block > .intro { max-width: 64ch; margin: 0 0 6px; }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(30px, 4vw, 56px);
  margin-top: clamp(26px, 3vw, 38px);
}
.notes-grid h3 { margin: 0 0 8px; font-size: 17px; }
.notes-grid p { margin: 0 0 10px; color: var(--muted); }
.notes-grid p:last-child { margin-bottom: 0; }
.block .section-heading { margin-bottom: 20px; }

/* Три числа под окном приложения. */
.preview-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px 40px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.preview-footer p { margin: 0; }
.preview-footer b {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}

/* Снимок настоящего приложения. */
figure.real-app { margin: clamp(28px, 4vw, 44px) 0 0; }
figure.real-app img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: block;
}
figure.real-app figcaption {
  margin-top: 10px;
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}

/* Русские пункты меню длиннее английских: на средних экранах прячем часть. */
@media (max-width: 1180px) {
  .nav nav a[href="#honest"], .nav nav a[href="#craft"] { display: none; }
}
@media (max-width: 860px) {
  .nav nav { display: none; }
}

/* ==========================================================================
   Рабочий стол с панелью меню.

   Это не декорация: панель повторяет меню самого приложения, включая пункты
   «Помощь», которые у нас свои. Тема переключается прямо здесь — как в macOS
   переключают вид из строки меню, — и меняет и окно, и страницу.
   ========================================================================== */

/* Подпись под демонстрацией. Без неё придуманные игры и «доступ до 2036»
   читаются как настоящее состояние продукта — а это первое, что видит
   человек на странице. */
.stage-note {
  margin: 18px 0 -8px;
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.mac-stage {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--side);
  box-shadow: var(--shadow);
}

.mac-menubar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 30px;
  background: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
html[data-theme="light"] .mac-menubar { background: #e9e9e4; }

.menu-apple {
  width: 22px; height: 22px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
  position: relative;
}
/* Яблоко не рисуем: это чужой знак. Кружок на его месте — нейтральная метка. */
.menu-apple::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .55;
}
.menu-item {
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12.5px;
  white-space: nowrap;
}
.menu-item.strong { font-weight: 600; }
.menu-item:hover, .menu-item[aria-expanded="true"], .menu-apple[aria-expanded="true"] {
  background: var(--blue);
  color: #fff;
}
.menu-apple[aria-expanded="true"]::before { border-color: #fff; }

.menubar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menu-themes { display: flex; align-items: center; gap: 5px; }
.menu-themes button {
  border: 1px solid transparent;
  background: none;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 0;
}
.menu-themes button.chosen { border-color: var(--blue); }
.menu-themes .swatch { width: 13px; height: 13px; border-radius: 4px; display: block; }
.menu-clock {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.menu-drop {
  position: absolute;
  top: 30px;
  min-width: 210px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
  z-index: 20;
}
.menu-drop.wide { min-width: 290px; }
.drop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 6px;
  text-decoration: none;
}
.drop-item:hover { background: var(--blue); color: #fff; }
.drop-item kbd {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  background: none;
}
.drop-item:hover kbd { color: #fff; }
.drop-line { height: 1px; background: var(--line); margin: 5px 7px; }

/* --- окно приложения: ближе к настоящему ------------------------------- */

.library-head { padding: 22px 26px 0; }
.library-head h2 { margin: 0; font-size: 27px; letter-spacing: -.02em; }
.library-head .chev { color: var(--muted); font-size: 18px; }
.library-stats {
  margin: 4px 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.library-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.steam-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 4px;
}
.steam-chip .avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 40%, var(--ink)));
  display: block;
}
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-toggle button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  padding: 4px 10px; font-size: 13px;
}
.view-toggle button.on { background: var(--selection); color: var(--ink); }

/* Обложки рисуем сами. Настоящие берутся из Steam, и права на них не наши:
   в приложении это картинки на вашем диске, на сайте — чужая витрина. */
.cover {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 4;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  font-size: 19px;
  overflow: hidden;
}
.cover-cs2 { background: linear-gradient(150deg, #c98b2e, #7c4f14); }
.cover-beam { background: linear-gradient(150deg, #47596b, #232f3a); }
.cover-miside { background: linear-gradient(150deg, #d99bb4, #8d4f6c); }
.cover-bunny { background: linear-gradient(150deg, #33413a, #161d1a); }
.cover-none {
  background: color-mix(in srgb, var(--side) 70%, var(--ink) 30%);
  color: var(--muted);
  font-size: 22px;
}

.game { text-align: left; }
.game strong { display: block; margin-top: 9px; font-size: 13.5px; }
.game-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 3px; }
.game-note.quiet { opacity: .8; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.on { background: var(--green); }

/* Список вместо плиток — второй вид, как в приложении. */
.games-grid.as-list { grid-template-columns: 1fr; gap: 2px; }
.games-grid.as-list .game { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: 7px 9px; }
.games-grid.as-list .cover { aspect-ratio: 16 / 10; font-size: 11px; border-radius: 6px; }
.games-grid.as-list .game strong { margin: 0; }
.games-grid.as-list .game-note { margin: 0; }

/* Низ боковой колонки — как в приложении: новая бутылка, настройки, профиль. */
.side-new {
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: none;
  color: var(--ink);
  padding: 9px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 10px;
}
.side-new:hover { border-color: var(--blue); color: var(--blue); }
.side-item.quiet { color: var(--muted); }
.side-account {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 8px; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.side-account:hover { background: var(--selection); }
.side-account b { display: block; font-weight: 600; }
.side-account small { color: var(--muted); font-size: 11.5px; }
.side-account .side-out { margin-left: auto; color: var(--muted); }
.side-item b { display: block; }
.side-item small { display: block; color: var(--muted); font-size: 11.5px; }

/* Панель настроек — то, что открывается по «Настройки» в меню и в колонке. */
.settings-pane { padding: 6px 26px 18px; display: grid; gap: 10px; }
.settings-pane h3 { margin: 6px 0 4px; font-size: 16px; }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  cursor: pointer;
}
.switch-row b { display: block; font-size: 13.5px; }
.switch-row small { color: var(--muted); font-size: 12px; }
.switch-row input { accent-color: var(--blue); width: 34px; height: 18px; }
.settings-note { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }

@media (max-width: 900px) {
  .menu-item[data-menu="edit"], .menu-item[data-menu="window"] { display: none; }
}

/* Икона приложения — та же, что стоит в Dock, и так же меняется вместе с темой:
   на светлой белая плашка, на тёмных чёрная. */
.app-icon {
  width: 30px; height: 30px;
  display: inline-block;
  flex: 0 0 auto;
  background: url("/assets/uncork-icon-light.png") center / contain no-repeat;
}
.app-icon.small { width: 22px; height: 22px; }
html:not([data-theme="light"]) .app-icon { background-image: url("/assets/uncork-icon-dark.png"); }

/* Окно ведёт себя как окно: содержимое прокручивается внутри него, а не
   растягивает страницу. Раньше настройки просто выпихивали низ окна за край. */
/* Окно выше: в узкое не влезала ни сетка плиток, ни настройки. */
.mac-stage .app-window { height: clamp(560px, 76vh, 780px); }
.mac-stage .library,
.mac-stage .sidebar,
.mac-stage .game-detail { overflow-y: auto; overscroll-behavior: contain; }
.mac-stage .library { padding: 0 0 18px; }
.mac-stage .library-head { position: sticky; top: 0; z-index: 2; background: var(--panel); padding-bottom: 12px; }
.mac-stage .games-grid { padding: 0 26px; }
.mac-stage .library-foot { padding: 12px 26px 0; }
.mac-stage .empty { padding: 26px; }

/* Полосу прокрутки делаем тонкой — как в macOS. */
.mac-stage *::-webkit-scrollbar { width: 9px; }
.mac-stage *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 9px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Кружки окна: работают как в системе — закрыть и убрать, с возвратом. */
.mac-stage .traffic i { cursor: pointer; }
.mac-stage.window-closed .app-window { display: none; }
.stage-restore {
  display: none;
  width: 100%;
  border: 0;
  background: var(--side);
  color: var(--ink);
  padding: 34px;
  font-size: 14px;
  cursor: pointer;
}
.mac-stage.window-closed .stage-restore { display: block; }

/* Окно «О программе» — как у macOS: маленькое, по центру, с иконой. */
.about-panel {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(320px, 86%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55);
  padding: 22px 20px 18px;
  text-align: center;
}
.about-panel .app-icon { width: 64px; height: 64px; margin: 0 auto 10px; display: block; }
.about-panel b { display: block; font-size: 17px; }
.about-panel p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.about-panel .button { margin-top: 14px; }
.mac-stage { position: relative; }

/* ==========================================================================
   Обложки в макете.

   Рисуем сами, слоями градиентов. Настоящие обложки принадлежат студиям и
   Valve: в снимках приложения они видны как часть окна — это иллюстрация
   продукта, — а выкладывать их отдельными картинками в своём интерфейсе
   значит брать чужую витрину. Поэтому здесь свои, но не плоские.
   ========================================================================== */
.mac-stage .cover {
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 16px -10px rgba(0, 0, 0, .7);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
/* Общий блик по диагонали — как на капсулах в магазинах. */
.mac-stage .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0 28%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}

.mac-stage .cover-cs2 {
  background:
    radial-gradient(120% 90% at 76% 108%, rgba(0, 0, 0, .75) 0 38%, transparent 70%),
    radial-gradient(60% 70% at 30% 22%, rgba(255, 214, 140, .55), transparent 64%),
    linear-gradient(150deg, #d9942f, #9a5b18 58%, #4a2a0c);
}
.mac-stage .cover-beam {
  background:
    repeating-linear-gradient(101deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 16px),
    radial-gradient(90% 70% at 18% 88%, rgba(0, 0, 0, .6), transparent 62%),
    linear-gradient(145deg, #7d8fa0, #3d4d5c 55%, #1b242d);
}
.mac-stage .cover-miside {
  background:
    radial-gradient(70% 60% at 68% 24%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(90% 80% at 20% 100%, rgba(78, 28, 56, .8), transparent 64%),
    linear-gradient(155deg, #e7a9c2, #b5638a 52%, #5c2a48);
}
.mac-stage .cover-bunny {
  background:
    radial-gradient(75% 55% at 50% 84%, rgba(190, 210, 195, .18), transparent 62%),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, #46564c, #1d2723 56%, #0b100e);
}
/* Не установлена — та же заглушка, что рисует само приложение. */
.mac-stage .cover-none {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .06) 0 30%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--ink) 22%, var(--side)), color-mix(in srgb, var(--ink) 42%, var(--side)));
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-size: 26px;
}
.mac-stage .cover b {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  text-align: center;
  line-height: 1.12;
}

/* ==========================================================================
   Рабочий стол.

   Обои рисуются здесь же, полосами: так их делали на Macintosh, когда цветов
   было мало, а фон всё равно хотелось. Ничего чужого не копируем — ни обоев,
   ни знаков; это оммаж, а не перерисовка.
   ========================================================================== */
.mac-stage {
  padding: 0 0 22px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px),
    linear-gradient(170deg, color-mix(in srgb, var(--blue) 22%, var(--side)), var(--side) 62%);
}
html[data-theme="light"] .mac-stage {
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 4px),
    linear-gradient(170deg, #cfd8e6, #e8e7e1 62%);
}
/* Окно оставляет справа колонку под значки — как на настоящем столе. Числа
   берутся из переменных: от левого поля считается ещё и середина окна, по
   которой встают листы, и разъехаться им нельзя. Ширину здесь не задаём —
   она приходит из --win-w ниже; «width: auto» тут стояло мёртвым. */
.mac-stage .app-window {
  margin: 0 var(--win-r) 0 var(--win-x);
  /* Уменьшенное окно занимает в потоке столько, сколько видно. transform:
     scale() место в потоке не меняет: окно занимает свои 1280 даже
     нарисованное на 309, и стол оказывается шире себя на разницу. Видно этого
     не было — стол обрезан, — но прокрутка существовала: хватало одного
     scrollIntoView внутри окна, и стол уезжал вбок вместе с окном. Ровно так
     же margin-bottom сводит высоту. */
  margin-right: calc(var(--win-r) + var(--win-w) * var(--k) - var(--win-w));
}

.desk-icons {
  position: absolute;
  top: 44px;
  right: 20px;
  display: grid;
  gap: 16px;
  justify-items: center;
  z-index: 5;
}
.desk-icon {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 92px;
  padding: 7px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}
.desk-icon .app-icon { width: 46px; height: 46px; }
.desk-label {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
}
.desk-icon.picked .desk-label { background: var(--blue); color: #fff; }
.desk-icon.picked .app-icon, .desk-icon.picked .desk-drive { filter: brightness(.82) saturate(1.2); }

/* Диск рисуем сами: прямоугольная коробочка с полоской, как у старых дисков. */
.desk-drive {
  width: 46px; height: 46px;
  border-radius: 7px;
  background: linear-gradient(160deg, #f2f3f0, #b9bdb6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 3px 8px -4px rgba(0, 0, 0, .6);
  position: relative;
}
.desk-drive::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 12px;
  height: 7px;
  border-radius: 2px;
  background: #6f7a86;
}
.desk-drive::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 9px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .28);
}

/* Окошко пасхалки — в том же духе, что «О программе». */
.cat-window {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(300px, 84%);
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
  overflow: hidden;
}
.cat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 8px;
  border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(0deg, var(--line) 0 1px, var(--panel) 1px 3px);
}
.cat-title {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  background: var(--panel);
  padding: 0 8px;
}
.cat-close {
  width: 15px; height: 15px;
  border: 1px solid var(--ink);
  background: var(--panel);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  padding: 0;
}
.cat-body { padding: 18px 16px 16px; text-align: center; color: var(--ink); }
.cat-say { font-size: 19px; margin: 6px 0 2px; font-weight: 600; }
.cat-note { font-size: 12.5px; color: var(--muted); margin: 0; }

.cat-tail { animation: cat-tail .5s steps(1, end) infinite; }
.cat-eye { animation: cat-blink 4s steps(1, end) infinite; }
@keyframes cat-tail {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@keyframes cat-blink {
  0%, 92%, 100% { opacity: 1; }
  94%, 98% { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-tail, .cat-eye { animation: none; }
}

/* Окно закрыли — на столе остаётся иконка, и ею же открывают обратно. */
.mac-stage.window-closed .app-window { display: none; }
.mac-stage.window-closed { min-height: 360px; }
.stage-hint {
  margin: 12px 22px 0;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
@media (max-width: 760px) {
  .desk-icons { position: static; grid-auto-flow: column; justify-content: end; padding: 10px 16px 0; }
}

/* Сетка плиток подстраивается под ширину: в прототипе колонок было ровно две,
   а у нас окно уже — рядом на столе стоят значки. */
.mac-stage .games-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 18px 16px;
}
/* Низ списка едет вместе с содержимым: окно теперь прокручивается, и
   прижатая к низу строка ложилась поверх плиток. */
.mac-stage .library-foot {
  position: static;
  font-size: 10.5px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ==========================================================================
   Пасхалка: кот летит и оставляет радугу.

   Кот нарисован свой. Тот кот из мема — чужой персонаж со своим автором, и
   копировать его спрайт нельзя; музыку оттуда — тем более, да и звук, который
   включается сам, на сайте всегда лишний. Здесь — оммаж: полёт, радуга,
   «мяу-мяу-мяу».
   ========================================================================== */
.cat-window { width: min(360px, 90%); }
.cat-sky {
  position: relative;
  height: 152px;
  margin: -4px -16px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, #101a2c), #05070d);
}
/* Звёзды — точки на фоне, редкие и разные. */
.cat-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 28%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.4px 1.4px at 62% 18%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.8px 1.8px at 84% 62%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 34% 74%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 72% 86%, rgba(255,255,255,.5), transparent);
  animation: cat-stars 1.1s steps(2, end) infinite;
}
.cat-fly {
  position: absolute;
  top: 52px;
  left: -104px;
  display: flex;
  align-items: center;
  color: #fff;
  animation: cat-cross 3.4s linear infinite;
}
/* Радуга начинается под самим котом, а не рядом: между ними был зазор, и
   выглядело так, будто это две разные картинки. */
.cat-trail {
  position: absolute;
  right: calc(100% - 20px);
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    #ff2f6e 0 16.6%, #ff9a2e 16.6% 33.3%, #ffe02e 33.3% 50%,
    #43d06a 50% 66.6%, #2fa8ff 66.6% 83.3%, #9a5cff 83.3% 100%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.cat-sprite { position: relative; z-index: 1; }

@keyframes cat-cross {
  from { transform: translateX(0); }
  to   { transform: translateX(460px); }
}
@keyframes cat-stars {
  0%, 100% { opacity: .85; transform: translateX(0); }
  50% { opacity: .5; transform: translateX(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-fly { animation: none; left: 90px; }
  .cat-sky::before { animation: none; }
}

/* Рабочий стол не должен складываться, когда окно закрыто: это стол, а не
   обёртка вокруг окна. Держим ту же высоту. */
.mac-stage { min-height: calc(clamp(560px, 76vh, 780px) + 52px); }
.mac-stage.window-closed { min-height: calc(clamp(560px, 76vh, 780px) + 52px); }

/* Низ боковой колонки: одна сетка на все три строки, чтобы значки стояли в
   одном столбце, а подписи начинались с одной линии. */
.mac-stage .sidebar-bottom { display: grid; gap: 4px; }
.mac-stage .side-item.quiet,
.mac-stage .side-account {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
}
.mac-stage .side-account .side-out { justify-self: end; }
.mac-stage .side-new { margin-bottom: 8px; text-align: center; }

/* Спрайт кота держит свой размер: в общих правилах картинки тянутся по ширине
   контейнера, и кот растягивался на всё небо. Имя отдельное: «cat-body» уже
   занято телом окна, и общий класс душил его. */
.cat-sprite { width: 96px; height: 58px; flex: 0 0 auto; display: block; }
.cat-fly { width: 96px; height: 58px; }

/* Рисунок на обложке: знак игры поверх градиента. Сами обложки из Steam
   остаются в снимках приложения — там они часть окна, а не наша картинка. */
.mac-stage .cover { flex-direction: column; gap: 2px; }
.mac-stage .cover-art {
  width: 58%;
  height: auto;
  opacity: .92;
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.mac-stage .cover b { font-size: 13.5px; letter-spacing: .01em; }
.mac-stage .cover-none .cover-art { width: 46%; color: var(--muted); filter: none; }

/* Вид списком.
   Правила сетки плиток внутри рабочего стола весят больше, чем прежние
   «.games-grid.as-list», — список просто не включался, а строки наезжали друг
   на друга. Поэтому тот же вес: с «.mac-stage» впереди. */
.mac-stage .games-grid.as-list {
  grid-template-columns: 1fr;
  gap: 1px;
}
.mac-stage .games-grid.as-list .game {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
}
.mac-stage .games-grid.as-list .cover { aspect-ratio: 16 / 10; border-radius: 6px; }
.mac-stage .games-grid.as-list .cover b { font-size: 9.5px; }
/* Рисунок в строке высотой 32 пикселя превращается в кляксу — оставляем подпись. */
.mac-stage .games-grid.as-list .cover-art { display: none; }
.mac-stage .games-grid.as-list .game strong { margin: 0; font-size: 13px; }
.mac-stage .games-grid.as-list .game-note { margin: 0; justify-self: end; white-space: nowrap; }

/* В строке обложка задаётся размером, а не пропорцией: подпись внутри не давала
   ей стать ниже, и пропорция растягивала её вширь — прямо на название игры. */
.mac-stage .games-grid.as-list .cover {
  width: 52px;
  height: 32px;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
}
.mac-stage .games-grid.as-list .cover b {
  font-size: 8.5px;
  line-height: 1;
  max-width: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
}
.mac-stage .games-grid.as-list .game { grid-template-columns: 52px minmax(0, 1fr) auto; }
.mac-stage .games-grid.as-list .game-note { font-size: 11px; }

/* Снимки настоящего пути через Gatekeeper. Человек узнаёт окно по картинке
   быстрее, чем читает шаги, — а окон там четыре, и в двух первой кнопкой
   стоит «Move to Trash». */
/* Четыре окна Gatekeeper.

   Были сырыми скриншотами по полтысячи точек, вставленными в текст: не
   оформление, а вклейка. Теперь это ряд карточек в том же языке, что и
   остальные шаги — рамка на панели, номер в DM Mono, подпись под ним. Снимок
   лежит внутри рамки уменьшенным и открывается в полный размер по нажатию:
   мелкому есть куда вырасти, крупному некуда деться.

   Раскладка по ширине: в ряд → 2×2 змейкой → столбик. Стрелки живут в
   промежутках и меняют направление вместе с раскладкой. */
figure.gatekeeper {
  /* Шаг списка — сетка «номер | текст»; без этого фигура падает в колонку
     номера шириной 34 точки (так и появлялся исходный столбик снимков). */
  grid-column: 2;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 30px;
  align-items: start;
}
.gk-step { position: relative; display: grid; gap: 9px; min-width: 0; }

.gk-frame {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.gk-frame:hover { border-color: var(--blue); transform: translateY(-1px); }
.gk-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.gk-step small {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 12px; line-height: 1.4; color: var(--muted);
}
.gk-step small b {
  flex: none;
  font: 12px "DM Mono", monospace;
  color: var(--muted);
  opacity: .8;
}

/* Стрелки. Горизонтальные — у рамки, на середине её высоты; вертикальные — у
   всей карточки, под подписью, чтобы указывать в промежуток между рядами. */
.gk-frame::after, .gk-step::after {
  position: absolute; z-index: 2;
  color: var(--blue); font-size: 17px; line-height: 1; opacity: .8;
}
.gk-step:not(:last-of-type) .gk-frame::after { content: "→"; top: calc(50% - 9px); right: -24px; }
.gk-step::after { content: none; }

@media (max-width: 960px) {
  figure.gatekeeper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
  /* Змейка: 1 → 2 вправо, 2 → 3 вниз по правой колонке, 3 → 4 влево. */
  .gk-step:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .gk-step:nth-of-type(4) { grid-column: 1; grid-row: 2; }
  .gk-step:nth-of-type(2) .gk-frame::after { content: none; }
  .gk-step:nth-of-type(2)::after { content: "↓"; bottom: -25px; left: calc(50% - 6px); }
  .gk-step:nth-of-type(3) .gk-frame::after { content: "←"; right: auto; left: -26px; }
}
@media (max-width: 560px) {
  figure.gatekeeper { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gk-step:nth-of-type(3), .gk-step:nth-of-type(4) { grid-column: 1; grid-row: auto; }
  .gk-frame { aspect-ratio: auto; }
  .gk-frame img { height: auto; max-height: 260px; }
  /* Специфичность выше, чем у :nth-of-type(3) из блока 2×2 — иначе на первой
     и третьей карточках вместе с ↓ оставались → и ←. */
  figure.gatekeeper .gk-step:nth-of-type(n) .gk-frame::after { content: none; }
  figure.gatekeeper .gk-step:nth-of-type(n)::after { content: none; }
  figure.gatekeeper .gk-step:nth-of-type(-n+3)::after { content: "↓"; bottom: -22px; left: calc(50% - 6px); }
}

figure.gatekeeper figcaption {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text4);
}

/* ==========================================================================
   Демо на главной: значения взяты из исходников приложения

   Зачем. Демо рисовалось «на глаз» по мотивам приложения и рядом с ним
   выглядело кривовато: обложки шире, чем высота, тогда как в приложении они
   квадратные; заголовок библиотеки мельче; шрифты и палитра — сайта, а не
   Uncork. Человек, который сначала посмотрел демо, а потом поставил
   приложение, видел два разных продукта.

   Ниже — те же числа, что в коде: Theme.swift (палитры, Metric), LibraryView
   (сетка и заголовок), GameTile (плитка и подпись), UncorkApp (колонки).
   Правится это здесь, а не в разметке, поэтому демо остаётся кликабельным.
   ========================================================================== */

/* Палитра. Переопределяем токены сайта внутри сцены — тогда каждое уже
   написанное правило демо подхватывает цвета приложения само, и не нужно
   переписывать полсотни строк. Тёмная тема Uncork. */
.mac-stage {
  --ink: #F2F2F2;        /* text */
  --muted: #9A9A9A;      /* text2 */
  --line: #282828;       /* line */
  --panel: #202020;      /* panelSolid */
  --side: #1A1A1A;       /* ink — фон окна */
  --blue: #2D8CF0;       /* accent */
  --green: #3FB950;      /* running */
  --selection: #1E2A38;
  --app-rail: #131313;   /* railBackground — колонка темнее окна */
  --app-text6: #6E6E6E;  /* подписи состояния под именем игры */
  --app-border: #323232;
}
html[data-theme="light"] .mac-stage {
  --ink: #1D1D1F; --muted: #6E6E73; --line: #E6E6EA; --panel: #FBFBFC;
  --side: #F6F6F7; --blue: #0A84FF; --green: #34C759; --selection: #E3EFFC;
  --app-rail: #EEEEF0; --app-text6: #8E8E93; --app-border: #DCDCE0;
}
html[data-theme="amoled"] .mac-stage {
  --ink: #FFFFFF; --muted: #A1A1A6; --line: #1A1A1D; --panel: #0C0C0E;
  --side: #000000; --blue: #0A84FF; --green: #30D158; --selection: #102034;
  --app-rail: #000000; --app-text6: #6E6E73; --app-border: #1F1F22;
}
html[data-theme="neon"] .mac-stage {
  --ink: #FFFFFF; --muted: #B9C6D3; --line: #16273A; --panel: #111D29;
  --side: #0D1721; --blue: #1E9CF0; --green: #3ECF8E; --selection: #16324A;
  --app-rail: #080C12; --app-text6: #6F8095; --app-border: #1E3346;
}

/* Шрифты. В приложении интерфейс набран Golos Text, числа и пути — JetBrains
   Mono, а крупные имена — системным шрифтом: интерфейс должен ощущаться
   родным для macOS. Здесь ровно то же самое, и только внутри сцены: остальной
   сайт живёт на DM Sans. */
.mac-stage {
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Цвет текста сцена задаёт себе сама. Токены выше переопределены только
     внутри неё, а `color` наследовался от страницы: в светлой теме имена игр
     оставались белыми на белом и пропадали. */
  color: var(--ink);
  background: var(--side);
}
.mac-stage .menu-clock,
.mac-stage .drop-item kbd { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Заголовок библиотеки: Theme.display(30, 500) — системный, 30, средний.
   Было 27 и с отрицательным трекингом, которого в приложении нет. */
.mac-stage .library-head h2 {
  /* Шрифт и вес — как в приложении (системный, средний), размер — по сцене.
     Отрицательного трекинга в приложении нет, он здесь и не нужен. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: normal;
}
.mac-stage .library-stats { font-size: 12.5px; }

/* Сетка плиток: GridItem(.adaptive(minimum: 138, maximum: 178), spacing: 18)
   при вертикальном шаге 22 и выравнивании влево. */
.mac-stage .games-grid {
  /* Пропорции приложения (шаг по вертикали больше, чем по горизонтали), но
     дорожка по размеру сцены: с настоящими 138…178 в столбец влезала одна
     плитка вместо трёх. */
  gap: 20px 16px;
}

/* Плитка. Главное расхождение: обложка в приложении квадратная, а не 5:4.
   Радиус 13 (Metric.coverRadius), обводка белым 8 % и глубокая тень —
   из GameTile. */
.mac-stage .cover {
  /* Базовое правило задаёт обложке height: 76px, и aspect-ratio считал ширину
     от неё — плитка выходила 76×76 в дорожке на 178. Высоту отдаём ширине. */
  height: auto;
  aspect-ratio: 1;
  border-radius: 13px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
  outline: 1px solid rgba(255, 255, 255, .08);
  outline-offset: -1px;
}
html[data-theme="light"] .mac-stage .cover { box-shadow: 0 10px 22px rgba(0, 0, 0, .18); }

/* Подпись под обложкой: TileCaption — имя 13.5/600, состояние 11.5 цветом
   text6, между ними 4. */
.mac-stage .game strong { margin-top: 8px; font-size: 13.5px; font-weight: 600; }
.mac-stage .game-note { margin-top: 4px; font-size: 11.5px; color: var(--app-text6); }

/* Колонки окна оставлены как были. Подставить сюда настоящие 240 и 330
   (Metric.rail и Inspector.width) — ошибка: окно на странице заметно меньше
   настоящего, и абсолютные числа приложения дают не копию, а приложение под
   увеличительным стеклом. Точную копию даёт масштабирование всего окна
   целиком, а не перенос отдельных размеров. */
.mac-stage .sidebar { background: var(--app-rail); }

/* На узком экране высоту обложке задавало мобильное правило (height: 88px),
   а квадратной плитке высота приходит от ширины — и дорожка в один столбец
   давала обложку в 230 точек. Ограничиваем дорожку, а не высоту. */
@media (max-width: 760px) {
  .mac-stage .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px 10px;
  }
}

/* Выделенная плитка. В приложении это подложка акцентом 10 % с рамкой 30 %,
   радиус 13 (Metric.cardRadius), вынесенная на 10 точек за края плитки — то
   есть подсвечивается и обложка, и подпись под ней. На сайте стоял сплошной
   синий прямоугольник радиусом 6, из-за чего выбранная игра выглядела строкой
   списка, а не подсвеченной плиткой.

   Рисуем псевдоэлементом, а не padding: в приложении подсветка вылезает за
   плитку, не двигая соседей, а padding раздвинул бы сетку. */
.mac-stage .game { position: relative; padding: 0; border: 0; background: none; }
.mac-stage .game > * { position: relative; }
.mac-stage .game.selected::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  pointer-events: none;
}

/* ==========================================================================
   Окно демо — один в один с приложением.

   Прошлая попытка переносила отдельные размеры приложения в окно меньшего
   размера и дала «приложение под лупой». Теперь иначе: окно свёрстано в
   настоящей ширине приложения — 1280 точек, рейлинг 240, инспектор 330,
   плитки 138…178 с шагом 18/22 — и уменьшается целиком через transform.
   Пропорции тогда те же, что на маке, при любой ширине сцены. Коэффициент
   считает сам CSS (tan(atan2()) даёт число из двух длин); для старых
   браузеров то же делает скрипт.

   Числа ниже — из Rail.swift, LibraryView.swift, GameTile.swift,
   Inspector.swift и UncorkControls.swift.
   ========================================================================== */
.mac-stage {
  container-type: inline-size;
  --win-w: 1280px;
  --win-h: 800px;
  /* Поля окна на столе: слева 22, справа 128 под значки (см. выше). Числа
     одни на всех: от них считается и масштаб — в CSS и в запасном скрипте, —
     и середина окна, по которой встают листы. Разойтись им нельзя: окно
     вылезет из стола, а лист уедет мимо окна ровно на разницу. */
  --win-x: 22px;
  --win-r: 128px;
  --gutters: calc(var(--win-x) + var(--win-r));
  --k: tan(atan2(calc(100cqw - var(--gutters)), var(--win-w)));
  min-height: 0;
}
.mac-stage.window-closed { min-height: 360px; }
@media (max-width: 760px) {
  .mac-stage { --win-x: 14px; --win-r: 14px; }
}

/* Добавка к палитре: то, чего прежним токенам не хватало. */
.mac-stage { --app-linesoft: #242424; --app-dashed: #454545; --app-borderstrong: #3C3C3C; --app-accentup: #54A3F5; --app-inset: #151515; }
html[data-theme="light"]  .mac-stage { --app-linesoft: #EDEDF0; --app-dashed: #C2C2C9; --app-borderstrong: #C9C9CF; --app-accentup: #3D9BFF; --app-inset: #FFFFFF; }
html[data-theme="amoled"] .mac-stage { --app-linesoft: #151517; --app-dashed: #3A3A3F; --app-borderstrong: #2C2C30; --app-accentup: #3D9BFF; --app-inset: #060607; }
html[data-theme="neon"]   .mac-stage { --app-linesoft: #132233; --app-dashed: #2E4D68; --app-borderstrong: #27425A; --app-accentup: #4FB4F6; --app-inset: #081119; }

.mac-stage .app-window {
  width: var(--win-w);
  height: var(--win-h);
  transform: scale(var(--k));
  transform-origin: top left;
  /* Уменьшенное окно занимает в потоке столько, сколько видно, а не 800. */
  margin-bottom: calc(var(--win-h) * var(--k) - var(--win-h));
  grid-template-columns: 240px minmax(0, 1fr) 330px;
  background: var(--side);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
}

/* --- рейлинг ---------------------------------------------------------------- */
.mac-stage .sidebar {
  position: relative;
  display: flex; flex-direction: column;
  padding: 34px 0 14px;
  background: var(--app-rail);
  border-right: 0;
}
.mac-stage .traffic { position: absolute; top: 20px; left: 20px; gap: 8px; padding: 0; }
.mac-stage .traffic i { width: 12px; height: 12px; border: 0; }
.mac-stage .app-brand {
  margin: 0; padding: 0 20px 24px;
  display: flex; align-items: center; gap: 12px;
  font: 600 27px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: 0; color: var(--ink);
}
.mac-stage .app-brand .app-icon { width: 46px; height: 46px; }
.mac-stage .side-label {
  margin: 0; padding: 0 20px 9px;
  font: 400 11.5px "Golos Text", sans-serif; letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.mac-stage .side-list { display: grid; gap: 3px; padding: 0 10px; }
.mac-stage .side-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border: 0; border-radius: 9px;
  background: none; color: var(--muted);
  font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.mac-stage .side-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent);
  color: var(--ink); font-weight: 600;
}
.mac-stage .side-item.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--blue); border-radius: 1px;
}
.mac-stage .side-text { display: grid; gap: 3px; min-width: 0; }
.mac-stage .side-item b { font-size: 14px; font-weight: inherit; line-height: 1.15; color: inherit; }
.mac-stage .side-item small { margin: 0; font-size: 11.5px; color: var(--app-text6); }
.mac-stage .side-item small.live { color: var(--green); }
.mac-stage .seal { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.mac-stage .seal.seal-running {
  background: var(--green);
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent),
              inset 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}
.mac-stage .seal.seal-ready {
  background: var(--blue);
  box-shadow: 0 0 6px color-mix(in srgb, var(--blue) 30%, transparent),
              inset 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}
/* Не «.empty»: этот класс уже носит абзац «ничего не нашлось» с padding 26,
   и печать пустой бутылки раздувалась до 67 точек. */
.mac-stage .seal.seal-empty { background: none; box-shadow: inset 0 0 0 1.5px var(--app-dashed); }

.mac-stage .sidebar-bottom {
  position: static; margin-top: auto; padding: 0 14px;
  display: grid; gap: 10px; font-size: 13px; color: var(--muted);
}
.mac-stage .side-new {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border: 1px dashed var(--app-dashed); border-radius: 9px;
  background: none; color: var(--muted); font-size: 13px; cursor: pointer;
}
.mac-stage .side-new:hover { border-color: var(--blue); color: var(--blue); }
.mac-stage .side-rule { display: block; height: 1px; background: var(--app-linesoft); margin: 2px 0; }
.mac-stage .rail-item {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 8px; border: 0; border-radius: 9px;
  background: none; color: var(--muted); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
.mac-stage .rail-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mac-stage .rail-item > svg { width: 13px; height: 13px; justify-self: center; color: var(--muted); }
.mac-stage .side-account b { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.mac-stage .side-account small { font: 10px "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6); }
.mac-stage .side-account .side-out { color: var(--app-text6); line-height: 0; }
.mac-stage .side-account .side-out svg { width: 9px; height: 9px; }
.mac-stage .side-account:hover .side-out { color: var(--blue); }

/* --- библиотека -------------------------------------------------------------- */
.mac-stage .library { background: var(--side); padding: 0 0 24px; }
.mac-stage .library-head { padding: 30px 32px 0; background: var(--side); }
.mac-stage .library-head h2 {
  margin: 0; display: flex; align-items: center; gap: 7px;
  font: 500 30px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: 0; color: var(--ink);
}
.mac-stage .library-head .chev { font-size: 12px; font-weight: 600; color: var(--muted); }
.mac-stage .library-stats { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.mac-stage .library-tools { margin-top: 14px; gap: 10px; }
.mac-stage .steam-chip {
  gap: 8px; padding: 3px 12px 3px 3px;
  font-size: 12.5px; color: var(--ink);
  border: 1px solid var(--app-border); border-radius: 999px;
}
.mac-stage .steam-chip .avatar { width: 24px; height: 24px; }
.mac-stage .view-toggle { border: 1px solid var(--app-border); border-radius: 9px; background: var(--panel); overflow: visible; }
.mac-stage .view-toggle button {
  width: 34px; height: 26px; padding: 0; display: grid; place-items: center;
  border-radius: 7px; color: var(--muted);
}
.mac-stage .view-toggle button.on { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--ink); }
.mac-stage .view-toggle svg { width: 12px; height: 12px; }
.mac-stage .search {
  width: 210px; max-width: none; margin: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--app-text6); font-size: 12.5px;
}
.mac-stage .search svg { width: 11px; height: 11px; flex: none; }
.mac-stage .search input { font: 12.5px "Golos Text", sans-serif; color: var(--ink); }
.mac-stage .search input::placeholder { color: var(--app-text6); }

.mac-stage .games-grid {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 22px 18px;
  padding: 18px 32px 0;
}
.mac-stage .game { display: grid; gap: 10px; padding: 0; }
.mac-stage .cover {
  height: auto; aspect-ratio: 1;
  border-radius: 13px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: 15px;
}
.mac-stage .cover-neighbor {
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255, 240, 190, .55), transparent 60%),
    radial-gradient(90% 80% at 80% 100%, rgba(80, 35, 5, .8), transparent 64%),
    linear-gradient(150deg, #e9b94c, #b96f1f 55%, #5a2f0a);
}
.mac-stage .cover-none {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .05) 0 30%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--ink) 10%, var(--side)), color-mix(in srgb, var(--ink) 4%, var(--side)));
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.mac-stage .game strong { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mac-stage .game-note { margin: -6px 0 0; gap: 6px; font-size: 11.5px; color: var(--app-text6); }
.mac-stage .game-note .dot { width: 6px; height: 6px; background: var(--app-text6); }
.mac-stage .game-note .dot.on { background: var(--green); }
.mac-stage .settings-pane { padding: 18px 32px; }

/* --- правая колонка ---------------------------------------------------------- */
.mac-stage .game-detail { padding: 16px 18px; background: var(--panel); border-left: 1px solid var(--line); }
.mac-stage .game-detail h3 {
  margin: 0 0 13px;
  font: 500 21px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: 0; color: var(--ink);
}
.mac-stage .play {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border: 0; border-radius: 11px;
  font: 600 14.5px "Golos Text", sans-serif; color: #fff;
  background: linear-gradient(180deg, var(--app-accentup), var(--blue));
  box-shadow: 0 6px 10px color-mix(in srgb, var(--blue) 30%, transparent);
  cursor: pointer;
}
.mac-stage .play svg { width: 11px; height: 11px; }
.mac-stage .play.ghost {
  width: auto; padding: 9px 16px; border-radius: 8px;
  font: 400 12.5px "Golos Text", sans-serif; color: var(--muted);
  background: none; border: 1px solid var(--app-borderstrong); box-shadow: none;
}
.mac-stage .play.ghost:hover { color: var(--ink); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.mac-stage .facts:has(.detail-line:not([hidden])) { margin-top: 18px; }
.mac-stage .detail-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0; padding: 6px 0; font-size: 13px; color: var(--muted);
}
.mac-stage .detail-line b { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); }
.mac-stage .detail-line .dot { width: 7px; height: 7px; }
.mac-stage .insp-rule { display: block; height: 1px; background: var(--app-linesoft); margin: 14px 0; }
.mac-stage .chain { display: grid; }
.mac-stage .chain-row {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: 9px; cursor: default;
}
.mac-stage .chain-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mac-stage .chain-row > svg { width: 13px; height: 13px; justify-self: center; color: var(--muted); }
.mac-stage .chain-text { display: grid; gap: 2px; min-width: 0; }
.mac-stage .chain-text b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); }
.mac-stage .chain-text .dot { width: 7px; height: 7px; background: var(--green); }
.mac-stage .chain-text small { font-size: 11.5px; color: var(--app-text6); }
.mac-stage .chev-r { font-size: 13px; color: var(--app-text6); padding-right: 2px; }
.mac-stage .switch { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--blue); }
.mac-stage .switch::after {
  content: ""; position: absolute; top: 1.5px; right: 1.5px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* --- узкий экран ---------------------------------------------------------
   Здесь стоял снимок вместо окна: окно, ужатое под 390 точек, читается плохо.
   Но снимок не читается тоже — он просто не отвечает на нажатия, а по ссылкам
   из мессенджеров приходят как раз с телефона. Окно остаётся живым: плитка при
   таком масштабе всё ещё 50 точек, то есть палец в неё попадает, а мелкие
   строки человек приближает щипком, как любое окно на снимке экрана.

   Снимок остаётся в разметке и в английской версии: он ничего не весит, пока
   его не показывают, и пригодится, если захочется вернуть. */
.mac-stage .stage-shot { display: none; }
@media (max-width: 760px) {
  /* Стол ездит вбок — как настоящее окно, не помещающееся в экран. Ездит он
     ровно настолько, насколько окно видно: место в потоке сводит к видимой
     ширине поле справа (см. .app-window выше), и прокрутка появляется только
     тогда, когда окно правда шире экрана, — то есть после приближения. */
  .mac-stage { overflow-x: auto; overscroll-behavior-x: contain; }
  /* Полоса меню — часть стола, а не окна: она остаётся на месте, когда окно
     уехало вбок. Sticky сохраняет и точку отсчёта для выпадающих меню. */
  .mac-stage .mac-menubar { position: sticky; left: 0; }
  /* Значки стола на телефоне закрывают собой окно, поэтому их видно ровно
     тогда, когда они нужны: после закрытия окна красным кружком — иначе его
     нечем открыть обратно. */
  .mac-stage .desk-icons { display: none; }
  .mac-stage.window-closed .desk-icons { display: grid; }
}

/* Заголовок окна. В приложении содержимое всех трёх колонок начинается ниже
   кружков — над ним полоса заголовка окна; по снимку это ~30 точек. Без неё
   демо выглядело поджатым к верху. */
.mac-stage .sidebar { padding-top: 66px; }
.mac-stage .library-head { padding-top: 60px; }
.mac-stage .game-detail { padding-top: 50px; }

/* Имя выбранной бутылки — белое, как в приложении; синим его красило старое
   правило .side-item.active span, доставшееся вложенному тексту. */
.mac-stage .side-item.active .side-text,
.mac-stage .side-item.active .side-text b { color: var(--ink); }
.mac-stage .side-item .side-text small { color: var(--app-text6); }
.mac-stage .side-item .side-text small.live { color: var(--green); }

/* ==========================================================================
   Окно настроек.

   В приложении это отдельное окно (SettingsLink), а не экран внутри
   библиотеки: всплывает над ним, список игр остаётся на месте. Раньше в демо
   на его месте была выдуманная панель «Настройки бутылки» с тремя
   переключателями, которых в этом экране нет вовсе.

   Числа из SettingsView.swift и UncorkControls.swift: окно 620 (idealWidth),
   отступ 24, шаг карточек 18, карточка — padding 16, радиус 13
   (Metric.cardRadius), заголовок моно 9 прописными цветом text4.
   ========================================================================== */
.mac-stage .settings-win {
  position: absolute;
  z-index: 25;
  left: calc(var(--win-x) + var(--win-w) * var(--k) / 2);
  top: calc(46px * var(--k));
  width: 620px;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  transform: scale(var(--k)) translateX(-50%);
  transform-origin: top left;
  background: var(--side);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  overflow: hidden;
  text-align: left;
}
.mac-stage .s-bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 44px; flex: none;
  border-bottom: 1px solid var(--app-linesoft);
}
.mac-stage .s-traffic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.mac-stage .s-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.mac-stage .s-body { padding: 24px; display: grid; gap: 18px; overflow-y: auto; }

.mac-stage .s-card {
  padding: 16px; border: 1px solid var(--app-border); border-radius: 13px;
  background: var(--panel);
}
.mac-stage .s-card h4 {
  margin: 0 0 10px;
  font: 400 9px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--app-text6);
}
.mac-stage .s-card p { margin: 0; font-size: 13px; color: var(--muted); }
.mac-stage .s-card p.dim { font-size: 12.5px; }
.mac-stage .s-card code { font: 11px "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6); }
.mac-stage .s-line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 3px 0;
}
.mac-stage .s-line + .s-line { margin-top: 7px; }
.mac-stage .s-line > b { font-size: 14px; font-weight: 500; color: var(--ink); }
.mac-stage .s-note { margin: 9px 0 0 !important; font-size: 12px; line-height: 1.5; color: var(--app-text6) !important; }
.mac-stage .s-rule { display: block; height: 1px; background: var(--app-linesoft); margin: 12px 0; }
.mac-stage .s-id { font-size: 10.5px !important; }
.mac-stage .s-sub { display: grid; gap: 3px; min-width: 0; }
.mac-stage .s-sub b { font-size: 14px; font-weight: 500; color: var(--ink); }
.mac-stage .s-sub code { font-size: 10px; }

/* Кнопки: GhostButton — контур, BrassButton — заливка с бликом. */
.mac-stage .s-ghost {
  flex: none;
  padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--app-borderstrong); background: none;
  color: var(--muted); font: 12.5px "Golos Text", sans-serif; cursor: pointer;
  white-space: nowrap;
}
.mac-stage .s-ghost:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.mac-stage .s-brass {
  flex: none; padding: 7px 15px; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--app-accentup), var(--blue));
  color: #fff; font: 600 12.5px "Golos Text", sans-serif; cursor: pointer;
}
.mac-stage .s-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 12px "Golos Text", sans-serif; color: var(--app-text6);
}
.mac-stage .s-link:hover { color: var(--ink); }
.mac-stage .s-buttons { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.mac-stage .s-foot { margin-top: 0; }
.mac-stage .s-ver { margin-left: auto; font-size: 10px !important; }

/* Выбор движка — как всплывающий список macOS. */
.mac-stage .s-pick { align-items: center; }
.mac-stage .s-select {
  flex: 1; max-width: 300px;
  display: block; padding: 5px 26px 5px 10px;
  border: 1px solid var(--app-border); border-radius: 7px;
  background: var(--app-control, var(--panel));
  color: var(--ink); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.mac-stage .s-select::after {
  content: "⌃⌄"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 7px; line-height: 1.1; color: var(--muted); writing-mode: vertical-lr;
}
.mac-stage .s-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 13px; color: var(--muted);
}

/* Переключатель: в приложении он слева, название сразу за ним, пояснение —
   подсказкой при наведении, а не строкой под названием. */
.mac-stage .s-toggle {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.mac-stage .s-toggle input { appearance: none; margin: 0; flex: none; cursor: pointer;
  position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--app-borderstrong); }
.mac-stage .s-toggle input:checked { background: var(--blue); }
.mac-stage .s-toggle input::after {
  content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: left .12s ease;
}
.mac-stage .s-toggle input:checked::after { left: 12.5px; }

.mac-stage .s-swatches { display: flex; gap: 10px; }
.mac-stage .s-swatch {
  display: flex; padding: 2px; gap: 0; cursor: pointer;
  border: 1px solid var(--app-border); border-radius: 8px; background: none;
}
.mac-stage .s-swatch.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.mac-stage .s-swatch i { display: block; width: 14px; height: 22px; }
.mac-stage .s-swatch i:first-child { border-radius: 5px 0 0 5px; }
.mac-stage .s-swatch i:last-child { border-radius: 0 5px 5px 0; }

.mac-stage .s-path { display: flex; align-items: center; gap: 12px; }
.mac-stage .s-path-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.mac-stage .s-path-text b { font-size: 13px; font-weight: 400; color: var(--muted); }
.mac-stage .s-path-text em { font: 10px "JetBrains Mono", ui-monospace, monospace; font-style: normal; color: var(--blue); margin-left: 8px; }
.mac-stage .s-path-text code { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mac-stage .s-seg { display: inline-flex; border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; }
.mac-stage .s-seg button {
  border: 0; background: none; padding: 5px 11px; cursor: pointer;
  font: 12.5px "Golos Text", sans-serif; color: var(--muted);
}
.mac-stage .s-seg button.on { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--ink); }
.mac-stage .s-disclose { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.mac-stage .s-disclose span { color: var(--muted); }

/* Название папки и размер кэша — одной строкой, путь под ними (PathRow). */
.mac-stage .s-path-top { display: flex; align-items: baseline; gap: 8px; }
.mac-stage .s-path-text em { margin: 0; }
/* Шаг между строками кнопок меньше, чем отступ первой от содержимого. */
.mac-stage .s-buttons + .s-buttons { margin-top: 8px; }

/* Живые элементы окна настроек: список движка, раскрывашка, сегменты языка. */
.mac-stage select.s-select {
  appearance: none;
  font-family: "Golos Text", sans-serif;
  cursor: pointer;
}
.mac-stage .s-select::after { content: none; }
.mac-stage .s-pick { position: relative; }
.mac-stage .s-pick::after {
  content: "⌃⌄"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 7px; line-height: 1.1; color: var(--muted); writing-mode: vertical-lr; pointer-events: none;
}
.mac-stage details.s-disclose > summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none;
}
.mac-stage details.s-disclose > summary::-webkit-details-marker { display: none; }
.mac-stage .s-chev { color: var(--muted); transition: transform .12s ease; }
.mac-stage details.s-disclose[open] .s-chev { transform: rotate(90deg); }
.mac-stage .s-howto-list { display: grid; gap: 10px; padding-top: 10px; }
.mac-stage .s-howto b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.mac-stage .s-howto p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--app-text6); }
.mac-stage a.s-ghost { display: inline-block; text-decoration: none; }

/* Настоящие обложки из Steam. Квадрат по центру — так же кадрирует плитку
   приложение. Блик градиентом здесь не нужен: он был нарисован затем, чтобы
   плоская заливка походила на капсулу магазина, а у капсулы свой свет. */
.mac-stage .cover-real { padding: 0; }
.mac-stage .cover-real::after { content: none; }
.mac-stage .cover-real img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Hero наверху правой колонки. В приложении это 330×154 с двумя масками:
   бока растворяются в фоне панели, низ уходит в неё же, верх не гасится —
   там край окна, и растворять картинку в границе значит делать вид, что окно
   продолжается (Inspector.swift). */
.mac-stage .insp-hero {
  display: block;
  width: calc(100% + 36px);
  margin: -50px -18px 0;
  height: 154px;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.mac-stage .insp-hero + h3 { margin-top: 14px; }
.mac-stage .chain-row { cursor: pointer; }
.mac-stage .switch.off { background: var(--app-borderstrong); }
.mac-stage .switch.off::after { right: auto; left: 1.5px; }
.mac-stage .dot.off { background: var(--app-text6) !important; }

/* ==========================================================================
   Экран установки окружения (SetupView).

   Это первое, что видит новый человек, и главное обещание продукта: «чего не
   хватает, Uncork скачает и поставит сам — терминал не нужен». В демо кнопки
   действительно проходят установку с прогрессом, а не подписаны для вида:
   обещание, показанное неработающей кнопкой, читается как неправда.

   Числа из SetupView.swift: заголовок 42/500, счётчик 46 акцентом и 30
   приглушённым, строка — печать 26, название 14.5/600, подробность моно 11.5.
   ========================================================================== */
.mac-stage .setup-screen { padding: 30px 32px 24px; }
.mac-stage .setup-head { display: flex; align-items: flex-end; gap: 24px; }
.mac-stage .setup-step {
  font: 400 9px "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--app-text6);
}
.mac-stage .setup-head h2 {
  margin: 8px 0 0;
  font: 500 42px/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: 0; color: var(--ink);
}
.mac-stage .setup-head p {
  margin: 12px 0 0; max-width: 560px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.mac-stage .setup-count { margin-left: auto; text-align: right; flex: none; }
.mac-stage .setup-count b {
  display: block;
  font: 500 46px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--blue);
}
.mac-stage .setup-count i { font: 500 30px/1 inherit; font-style: normal; color: var(--app-text6); }
.mac-stage .setup-count > span {
  display: block; margin-top: 6px;
  font: 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6);
}

.mac-stage .setup-card {
  margin-top: 26px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, transparent), color-mix(in srgb, var(--side) 70%, transparent));
  overflow: hidden;
}
.mac-stage .setup-row {
  display: flex; align-items: center; gap: 14px;
  margin: 0 20px; padding: 16px 0;
}
.mac-stage .setup-row + .setup-row { border-top: 1px solid var(--app-linesoft); }
.mac-stage .setup-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.mac-stage .setup-text b { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.mac-stage .setup-row[data-state="done"] .setup-text b,
.mac-stage .setup-row[data-state="running"] .setup-text b { color: var(--ink); }
.mac-stage .setup-text code {
  font: 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mac-stage .setup-note {
  font: 11.5px "JetBrains Mono", ui-monospace, monospace; font-style: normal; color: var(--blue);
}

/* Печать состояния: залитая с галкой, кольцо с точкой, пунктир (Stamp). */
.mac-stage .stamp {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
}
.mac-stage .setup-row[data-state="pending"] .stamp {
  border: 1.6px dashed var(--app-dashed);
}
.mac-stage .setup-row[data-state="running"] .stamp {
  border: 2px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.mac-stage .setup-row[data-state="running"] .stamp::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--blue); animation: setup-pulse 1.1s ease-in-out infinite;
}
@keyframes setup-pulse { 0%, 100% { opacity: .35; transform: scale(.7) } 50% { opacity: 1; transform: scale(1) } }
@media (prefers-reduced-motion: reduce) {
  .mac-stage .setup-row[data-state="running"] .stamp::after { animation: none; opacity: .8 }
}
.mac-stage .setup-row[data-state="done"] .stamp { background: var(--blue); }
.mac-stage .setup-row[data-state="done"] .stamp::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mac-stage .setup-chev {
  flex: none; width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: var(--app-text6); font-size: 13px; transition: transform .12s ease;
}
.mac-stage .setup-row[data-open] .setup-chev { transform: rotate(90deg); }
.mac-stage .setup-more {
  margin: -6px 20px 14px 74px;
  font: 11.5px/1.7 "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6);
  white-space: pre-wrap;
}

.mac-stage .setup-foot {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 10%, transparent));
}
.mac-stage .setup-next { display: grid; gap: 6px; min-width: 0; }
.mac-stage .setup-next b {
  font: 500 22px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--ink);
}
.mac-stage .setup-next small { font-size: 12px; color: var(--app-text6); }
.mac-stage .setup-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
.mac-stage .s-brass.big { padding: 13px 22px; border-radius: 11px; font-size: 14.5px; }
.mac-stage .s-brass[disabled] {
  background: none; color: var(--app-text6); box-shadow: none;
  border: 1px solid var(--app-borderstrong); cursor: default;
}
.mac-stage .setup-back { margin-top: 20px; }
/* Запрещённый шаг должен выглядеть запрещённым: в приложении кнопки у него
   просто нет, пока не пройден предыдущий. Здесь она остаётся видимой, чтобы
   порядок читался, но не притворяется доступной. */
.mac-stage .s-ghost[disabled] { opacity: .4; cursor: default; }
.mac-stage .s-ghost[disabled]:hover {
  color: var(--muted); border-color: var(--app-borderstrong); background: none;
}

/* ==========================================================================
   Плитка в работе: игра запущена и игра качается (GameTile).

   Запущенная — метка со временем в игре слева вверху на подложке coverChip и
   зелёная рамка вместо белой. Качающаяся — полоса налива внизу и строка
   «Оценка Steam». Обе рисуются поверх обложки, как в приложении.
   ========================================================================== */
.mac-stage .cover { position: relative; }
.mac-stage .tile-pill {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--side) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
}
.mac-stage .tile-pill i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 4px var(--green);
}
.mac-stage .tile-pill b {
  font: 11.5px "JetBrains Mono", ui-monospace, monospace; font-weight: 400;
  color: color-mix(in srgb, var(--green) 70%, #fff);
}
.mac-stage .game[data-running] .cover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55),
              inset 0 0 0 1.5px color-mix(in srgb, var(--green) 60%, transparent);
}

.mac-stage .tile-meter {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  display: grid; gap: 7px;
}
.mac-stage .tile-meter i {
  display: block; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  overflow: hidden; position: relative;
}
.mac-stage .tile-meter i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--pour, 0%); background: var(--blue); border-radius: 2px;
  transition: width .4s ease;
}
.mac-stage .tile-meter em {
  font-size: 12px; font-style: normal; color: var(--blue);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
/* Запущенная игра: кнопка меняется на «Показать игру» и рядом появляется
   «Остановить» — как actionRow в Inspector. */
.mac-stage .play-wrap { display: flex; align-items: center; gap: 9px; }
.mac-stage .play.running {
  width: auto; background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  color: color-mix(in srgb, var(--green) 70%, #fff); box-shadow: none;
  padding: 12px 20px; font-weight: 600;
}
.mac-stage .play.running .play-icon svg { display: none; }
.mac-stage .play.running .play-icon::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 4px var(--green);
}
.mac-stage .insp-stop {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--app-borderstrong); border-radius: 9px;
  background: none; color: var(--muted); cursor: pointer;
}
.mac-stage .insp-stop:hover { color: var(--ink); border-color: var(--app-borderstrong); }
.mac-stage .insp-stop svg { width: 14px; height: 14px; }

/* ==========================================================================
   Вид списком (LibraryRow).

   Прежний список был уменьшенной сеткой: обложка 16:10, те же подписи. В
   приложении это другая вёрстка — ноготок 38×38, имя, состояние словом с
   точкой, размер моно справа и кнопка запуска, проявляющаяся при наведении.
   ========================================================================== */
.mac-stage .games-grid.as-list { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 12px 26px 0; }
.mac-stage .games-grid.as-list .game {
  display: grid; grid-template-columns: 38px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
}
.mac-stage .games-grid.as-list .game:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mac-stage .games-grid.as-list .game.selected::before { content: none; }
.mac-stage .games-grid.as-list .game.selected {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent);
}
.mac-stage .games-grid.as-list .cover {
  width: 38px; height: 38px; aspect-ratio: auto; border-radius: 7px;
  box-shadow: none; outline: 0; font-size: 0;
}
.mac-stage .games-grid.as-list .cover-art,
.mac-stage .games-grid.as-list .cover b,
.mac-stage .games-grid.as-list .tile-pill,
.mac-stage .games-grid.as-list .tile-meter { display: none; }
.mac-stage .games-grid.as-list .cover-none svg { width: 14px; height: 14px; display: block; }
.mac-stage .games-grid.as-list .game strong {
  margin: 0; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mac-stage .games-grid.as-list .game-note { margin: 2px 0 0; font-size: 11.5px; }
/* Имя и состояние — одной колонкой, как VStack в строке. */
.mac-stage .games-grid.as-list .game strong,
.mac-stage .games-grid.as-list .game-note { grid-column: 2; }
.mac-stage .games-grid.as-list .cover { grid-row: 1 / span 2; }
.mac-stage .games-grid.as-list .list-size {
  grid-column: 3; grid-row: 1 / span 2;
  font: 11px "JetBrains Mono", ui-monospace, monospace; color: var(--app-text6);
}
.mac-stage .games-grid.as-list .list-go {
  grid-column: 4; grid-row: 1 / span 2;
  width: 28px; height: 24px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--blue);
  opacity: .35; transition: opacity .12s ease;
}
.mac-stage .games-grid.as-list .game:hover .list-go,
.mac-stage .games-grid.as-list .game.selected .list-go { opacity: 1; }
.mac-stage .games-grid.as-list .list-go svg { width: 11px; height: 11px; }
.mac-stage .games-grid:not(.as-list) .list-size,
.mac-stage .games-grid:not(.as-list) .list-go { display: none; }

/* Настройки бутылки: тот же язык карточек, что у настроек приложения. */
.mac-stage .bottle-settings { padding: 30px 32px 24px; display: grid; gap: 18px; }
.mac-stage .bs-head { display: flex; align-items: baseline; gap: 16px; }
.mac-stage .bs-head h2 {
  margin: 0;
  font: 500 30px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  color: var(--ink);
}
.mac-stage .bs-head .s-ghost { margin-left: auto; }
.mac-stage .bs-save { justify-content: space-between; }
.mac-stage .bs-save .s-note { margin: 0 !important; }
.mac-stage #library-title .chev { cursor: pointer; }
.mac-stage #library-title .chev:hover { color: var(--ink); }

/* Приближение демо на телефоне. По умолчанию окно помещается целиком — так
   видно всю программу разом. Приблизив, человек получает настоящие размеры
   целей: окно становится шире экрана и ездит вбок. */
.stage-zoom { display: none; }
@media (max-width: 760px) {
  /* Кнопка живёт внутри стола, а стол после приближения ездит вбок, поэтому
     она держится за левый край экрана, а не уезжает вместе с окном. */
  .stage-zoom {
    display: block; margin: 12px 14px 0; position: sticky; left: 14px;
    padding: 10px 14px; width: calc(100% - 28px);
    border: 1px dashed var(--line); border-radius: 10px;
    background: none; color: var(--muted);
    font: 12px "DM Mono", monospace; cursor: pointer;
  }
  .stage-zoom:hover { color: var(--ink); border-color: var(--blue); }
  .mac-stage.zoomed { --k: 0.78; }
}

/* ==========================================================================
   Меню бутылки и листы, которые из него открываются.

   Числа и цвета сняты с приложения: лист лога 780×480 (UncorkApp.swift),
   история 640×520 с полями 22 (LibraryView.swift), шапка лога высотой 40 и
   поля 20 (LogPanel.swift). Раскраска строк — по тем же правилам, что в
   LogPanel.color(for:).
   ========================================================================== */
.mac-stage { --app-sheet: #1E1E1E; --app-logdeep: #101010; --app-danger: #F08A84; --app-ok: #3FB950; }
html[data-theme="light"]  .mac-stage { --app-sheet: #FFFFFF; --app-logdeep: #EAEAEC; --app-danger: #B3261E; --app-ok: #34C759; }
html[data-theme="amoled"] .mac-stage { --app-sheet: #0A0A0C; --app-logdeep: #000000; --app-danger: #FF7A72; --app-ok: #30D158; }
html[data-theme="neon"]   .mac-stage { --app-sheet: #0E1A25; --app-logdeep: #030608; --app-danger: #F08A84; --app-ok: #3ECF8E; }

/* Меню у шеврона. В приложении это обычное меню SwiftUI, поэтому здесь ни
   рамок понаряднее, ни иконок — тот же скромный список. */
.mac-stage .bottle-menu {
  position: absolute; z-index: 30;
  left: 268px; top: 104px;
  min-width: 214px; padding: 6px;
  display: grid; gap: 1px;
  transform: scale(var(--k)); transform-origin: top left;
  background: var(--app-sheet);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75);
  text-align: left;
}
.mac-stage .bottle-menu button {
  border: 0; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 6px;
  font: 13px/1.2 "Golos Text", system-ui, sans-serif;
  color: var(--ink); text-align: left;
}
.mac-stage .bottle-menu button:hover { background: var(--app-control); }
.mac-stage .bm-rule { height: 1px; background: var(--app-linesoft); margin: 4px 6px; }

/* Общая рамка листа: как окно настроек, только по центру окна программы. */
/* Листы и окно настроек центрируются по окну, а не по сцене.

   Сцена шире окна: справа на ней лежат значки стола. А в приближённом виде на
   телефоне наоборот — окно шире сцены, и сцена ездит вбок. При «left: 50%»
   отсчёт шёл от ширины сцены, и оба случая ломались: на компьютере лист стоял
   правее середины окна, а на телефоне после приближения уезжал на сотню точек
   левее содержимого — прокруткой его было уже не достать, хотя приближают как
   раз чтобы нажимать. Половина видимой ширины окна верна и там, и там. */
.mac-stage .sheet-win {
  position: absolute; z-index: 28;
  left: calc(var(--win-x) + var(--win-w) * var(--k) / 2); top: calc(150px * var(--k));
  display: flex; flex-direction: column;
  transform: scale(var(--k)) translateX(-50%);
  transform-origin: top left;
  background: var(--app-sheet);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  overflow: hidden; text-align: left;
}
.mac-stage .sheet-spacer { flex: 1; }
.mac-stage .sheet-foot { padding: 14px; display: flex; justify-content: flex-end; flex: none; }

/* --- лист лога --- */
.mac-stage .log-win { width: 780px; height: 480px; background: var(--ink); }
.mac-stage .sheet-head {
  display: flex; align-items: center; gap: 13px;
  height: 40px; flex: none; padding: 0 20px;
  border-bottom: 1px solid var(--app-linesoft);
}
.mac-stage .lg-chev { color: var(--blue); font-weight: 700; transform: rotate(90deg); }
.mac-stage .lg-word {
  font: 9px "DM Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.mac-stage .sheet-rule { width: 1px; height: 16px; background: var(--line); }
.mac-stage .lg-source { font: 11px "DM Mono", monospace; color: var(--blue); }
.mac-stage .lg-count { font: 10px "DM Mono", monospace; color: var(--muted); }
.mac-stage .lg-body {
  flex: 1; overflow-y: auto; padding: 12px 20px;
  display: grid; gap: 2px; align-content: start;
  background: var(--app-logdeep);
  font: 11.5px/1.45 "DM Mono", monospace;
}
.mac-stage .lg-body span { white-space: pre-wrap; word-break: break-word; }
.mac-stage .lg-d { color: var(--muted); }
.mac-stage .lg-a { color: var(--blue); }
.mac-stage .lg-g { color: var(--app-ok); }
.mac-stage .lg-w { color: var(--app-danger); }

/* --- история запусков --- */
.mac-stage .history-win { width: 640px; height: 520px; padding: 22px; gap: 16px; }
.mac-stage .sheet-title { display: flex; align-items: center; gap: 12px; flex: none; }
.mac-stage .sheet-title h3 {
  margin: 0; font: 500 28px/1.1 system-ui, sans-serif; color: var(--ink);
}
.mac-stage .hs-body { flex: 1; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.mac-stage .hs-row { padding: 8px 4px; border-bottom: 1px solid var(--app-linesoft); }
.mac-stage .hs-top { display: flex; align-items: baseline; gap: 10px; }
.mac-stage .hs-top b { font: 600 13px "Golos Text", system-ui, sans-serif; color: var(--ink); }
.mac-stage .hs-state { font: 12px "Golos Text", system-ui, sans-serif; color: var(--muted); }
.mac-stage .hs-spacer { flex: 1; }
.mac-stage .hs-when { font: 11.5px "DM Mono", monospace; color: var(--muted); }
.mac-stage .hs-detail {
  margin: 4px 0 0; font: 12px "Golos Text", system-ui, sans-serif; color: var(--muted);
}

/* --- лист «Новая бутылка» (Rail.swift, newBottleSheet) ---
   Ширина 430, как в приложении. Состояние у каждого магазина на виду, а не в
   сноске: проверен ровно один, и предлагать остальные молча значит обещать то,
   чего мы не знаем. */
.mac-stage .newbottle-win { width: 430px; padding: 22px; gap: 12px; }
.mac-stage .nb-h {
  margin: 0; flex: none;
  font: 500 28px/1.1 system-ui, sans-serif; color: var(--ink);
}
.mac-stage .nb-hint, .mac-stage .nb-empty {
  margin: 0; flex: none;
  font: 12.5px/1.5 "Golos Text", system-ui, sans-serif; color: var(--muted);
}
.mac-stage .nb-empty { font-size: 11.5px; color: var(--app-text6); }
.mac-stage .nb-field {
  flex: none; display: flex; align-items: center; gap: 1px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--app-inset); border: 1px solid var(--blue);
  font: 13px "DM Mono", monospace; color: var(--ink);
}
.mac-stage .nb-caret {
  width: 1px; height: 15px; background: var(--ink);
  animation: nb-blink 1.1s step-end infinite;
}
@keyframes nb-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mac-stage .nb-caret { animation: none; } }
.mac-stage .nb-cap {
  flex: none;
  font: 9px "DM Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--app-text6);
}
.mac-stage .nb-list {
  flex: 1; overflow-y: auto;
  border-radius: 8px; border: 1px solid var(--app-border);
  background: var(--app-inset);
}
.mac-stage .nb-row {
  display: flex; gap: 10px; padding: 9px 11px; width: 100%;
  border: 0; border-bottom: 1px solid var(--app-linesoft);
  background: none; text-align: left; cursor: pointer; font: inherit;
}
.mac-stage .nb-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mac-stage .nb-text { display: block; }
.mac-stage .nb-top { display: flex; align-items: baseline; gap: 8px; }
.mac-stage .nb-note {
  display: block; margin-top: 3px;
  font: 11.5px/1.45 "Golos Text", system-ui, sans-serif; color: var(--muted);
}
.mac-stage .nb-row:last-child { border-bottom: 0; }
.mac-stage .nb-box {
  flex: none; width: 15px; height: 15px; margin-top: 2px;
  border-radius: 4px; border: 1px solid var(--app-borderstrong);
  display: grid; place-items: center;
  font-size: 10px; color: transparent;
}
.mac-stage .nb-box.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.mac-stage .nb-top b { font: 13px "Golos Text", system-ui, sans-serif; color: var(--ink); }
.mac-stage .nb-ok, .mac-stage .nb-no {
  font: 8.5px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
}
.mac-stage .nb-ok { color: var(--green); }
.mac-stage .nb-no { color: var(--app-text6); }
.mac-stage .nb-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; }

/* --- лист «Плавность CS2» (PerformanceView.swift) ---
   Карточки — Card: подпись mono(9) капителью, поля 16, радиус 13. Строка
   прогона набрана mono(12), как в приложении, и печатает те же поля.
   Числа в строках настоящие: отчёты VProf из quality-audit/2026-09-12. */
.mac-stage .perf-win { width: 700px; height: 560px; padding: 22px; gap: 14px; }
.mac-stage .pf-lead {
  margin: 0; flex: none;
  font: 13px/1.5 "Golos Text", system-ui, sans-serif; color: var(--muted);
}
.mac-stage .pf-body { flex: 1; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.mac-stage .pf-card {
  padding: 16px; border-radius: 13px; background: var(--panel);
  display: grid; gap: 10px; align-content: start;
}
.mac-stage .pf-cap {
  font: 9px "DM Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--app-text6);
}
.mac-stage .pf-runs { display: grid; gap: 7px; }
.mac-stage .pf-run {
  display: flex; align-items: baseline; gap: 12px;
  font: 12px "DM Mono", monospace; color: var(--ink);
}
.mac-stage .pf-when { width: 150px; flex: none; }
.mac-stage .pf-drop { color: var(--app-text6); }
.mac-stage .pf-note {
  margin: 0; font: 12px/1.5 "Golos Text", system-ui, sans-serif; color: var(--muted);
}
.mac-stage .pf-ab { display: flex; gap: 10px; }
.mac-stage .pf-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--app-border); background: var(--side);
  font: 12px "DM Mono", monospace; color: var(--ink);
}
.mac-stage .pf-pick b { font: 600 11px "Golos Text", system-ui, sans-serif; color: var(--muted); }
.mac-stage .pf-chev { color: var(--muted); font-size: 11px; }
.mac-stage .pf-verdict {
  margin: 0; font: 13px/1.5 "Golos Text", system-ui, sans-serif; color: var(--blue);
}
.mac-stage .pf-source {
  margin: 0; flex: none;
  font: 11.5px "DM Mono", monospace; color: var(--app-text6);
}

/* Кнопки инспектора (HoverButton в Inspector.swift). Значок 18 в ширину,
   название ui(13), справа шеврон — бледный, при наведении заметнее; рамка
   меняется на цвет акцента. Поля 12 и 10, радиус малый, зазор между ними 8. */
.mac-stage .insp-actions { display: grid; gap: 8px; margin-top: 14px; }
.mac-stage .act-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; width: 100%;
  border: 1px solid var(--app-border); border-radius: 9px;
  background: var(--panel); cursor: pointer;
  font: 13px "Golos Text", system-ui, sans-serif; color: var(--ink);
  text-align: left;
}
.mac-stage .act-row:hover { background: color-mix(in srgb, var(--ink) 6%, var(--panel)); border-color: var(--app-accentup); }
.mac-stage .act-row svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.mac-stage .act-row span { flex: 1; }
.mac-stage .act-chev { font-style: normal; color: var(--muted); opacity: .55; font-weight: 600; }
.mac-stage .act-row:hover .act-chev { opacity: 1; }

/* Что человек получает — сразу под заголовком (index.html, .perks): четыре
   фишки с числом-доказательством. Полосы — настоящие промежутки CS2: без
   режима 75 мс из трассы 23 сен, с режимом — ровные 12,5 мс. */
.perks { margin: 4px 0 36px; }
.perks-eyebrow {
  font: 10px "DM Mono", monospace;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 14px;
}
/* Шесть карточек: три в ряд, на планшете две, на телефоне одна — без сирот. */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) { .perks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .perks-grid { grid-template-columns: 1fr; } }
.perk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.perk-num {
  font: 500 26px/1.1 "DM Mono", monospace;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.perk-num small { font-size: 13px; letter-spacing: 0; color: var(--muted); }
.perk h3 { font-size: 16px; margin: 0; text-wrap: balance; }
.perk p:not(.perk-num) { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.perk-viz {
  margin-top: auto;
  padding-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 10px;
  align-items: center;
}
.viz-label { font: 9.5px "DM Mono", monospace; color: var(--muted); letter-spacing: 0.3px; }
.ticks { display: block; height: 10px; }
.ticks-even { background: repeating-linear-gradient(90deg, var(--blue) 0 1.5px, transparent 1.5px 5px); }
/* Пачки: несколько движений — одним куском раз в кадр, дальше пусто. */
.ticks-batched {
  background: repeating-linear-gradient(90deg,
    var(--muted) 0 1.5px, transparent 1.5px 3px,
    var(--muted) 3px 4.5px, transparent 4.5px 6px,
    var(--muted) 6px 7.5px, transparent 7.5px 26px);
}
.frames { display: flex; gap: 2px; height: 10px; }
.frames i { display: block; height: 100%; border-radius: 1.5px; background: var(--muted); opacity: 0.55; }
.frames-even i { flex: 12.5; background: var(--green); opacity: 1; }
.frames-ragged i:nth-child(1) { flex: 11.3; }
.frames-ragged i:nth-child(2) { flex: 4.3; }
.frames-ragged i:nth-child(3) { flex: 7.8; }
.frames-ragged i:nth-child(4) { flex: 9.7; }
.frames-ragged i:nth-child(5) { flex: 11.6; }
.frames-ragged i:nth-child(6) { flex: 4.3; }
.frames-ragged i:nth-child(7) { flex: 8.3; }
.frames-ragged i:nth-child(8) { flex: 12.4; }
.frames-ragged i:nth-child(9) { flex: 4.4; }
.perks > .measurement-note { margin-top: 12px; }

/* ---- Правки после ревью 24 сен 2026 ------------------------------------ */

/* Заголовок раздела: номер — колонка постоянной ширины, заголовок всегда с одного
   места. Было space-between: короткий заголовок уезжал к правому краю (02, 04, 06),
   длинный — нет (03), и разделы выглядели свёрстанными по-разному. */
@media (min-width: 761px) {
  .section-heading {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    justify-content: start;
    align-items: end;
  }
}

/* FAQ: заголовок в своей колонке сверху, а не у последнего вопроса. Колонка
   тянется на высоту списка, а флекс внутри прижимал заголовок к низу. */
.faq > .section-heading {
  display: block;
  align-self: start;
}
@media (min-width: 761px) {
  .faq > .section-heading { position: sticky; top: 96px; }
}

/* Семь пунктов в три колонки оставляли последний одного в ряду. В «Отличиях» мышь —
   главное, она и занимает всю строку; в «Требованиях» во всю строку — итог
   «о производительности». Строка текста при этом не шире удобного. */
#craft .notes-grid > :first-child,
#req .notes-grid > :last-child {
  grid-column: 1 / -1;
}
#craft .notes-grid > :first-child p,
#req .notes-grid > :last-child p {
  max-width: 72ch;
}
#craft .notes-grid > :first-child h3 {
  font-size: 21px;
}

/* Демо: дойдя до конца списка игр, колесо листает страницу дальше. С contain
   прокрутка над демо — а оно почти во весь экран — застревала. */
.mac-stage .game-detail {
  overscroll-behavior: auto;
}

/* «До установки»: текст был 12–13 px при основных 16 — читался с трудом. */
.plain-notes strong {
  font-size: 17px;
}
.plain-notes p {
  font-size: 15px;
  line-height: 1.65;
}

/* Телефон: кнопка кабинета в шапке — в одну строку, без стрелки. Иначе она
   разъезжалась на две строки и была выше логотипа. */
@media (max-width: 420px) {
  .nav .button.small {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 12px;
    gap: 8px;
  }
  .nav .button.small > [aria-hidden="true"] {
    display: none;
  }
}

/* График замера мыши в «Отличиях»: во всю ширину карточки, тёмный, как снимок экрана. */
.mouse-chart {
  margin: 20px 0 0;
}
.mouse-chart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.mouse-chart figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  max-width: 72ch;
}

/* Цена рядом с кнопкой: платный продукт не прячет её в FAQ. */
.access-note .price-line {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 12px 0 18px;
}
.access-note .price-line b {
  font-weight: 650;
}