:root {
  --put-bg: #0a0b0d;
  --put-panel: rgba(20, 22, 27, .88);
  --put-ink: #f2f2ee;
  --put-muted: #a8acb3;
  --put-line: rgba(237, 241, 245, .16);
  --put-mint: #67e7ad;
  --put-violet: #a87cff;
  --put-max: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--put-bg); }
body.put-page {
  margin: 0; min-width: 320px; background: var(--put-bg); color: var(--put-ink);
  font: 400 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.put-page a { color: inherit; }
.put-page button { font: inherit; }
.put-shell { width: min(100% - 32px, var(--put-max)); margin: 0 auto; }
.put-skip {
  position: fixed; z-index: 20; left: 12px; top: 10px; transform: translateY(-180%);
  padding: 9px 12px; border-radius: 8px; background: var(--put-ink); color: var(--put-bg); font-weight: 750;
}
.put-skip:focus { transform: translateY(0); }
.put-topbar { padding: 16px 0; border-bottom: 1px solid var(--put-line); }
.put-topbar .put-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.put-home { text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
.put-home span { color: var(--put-mint); }
.put-mode { color: var(--put-muted); font-size: 13px; text-underline-offset: 3px; }
.put-mode:hover { color: var(--put-ink); }

.put-hero { padding: clamp(26px, 6vw, 76px) 0 clamp(44px, 7vw, 96px); }
.put-eyebrow, .put-step, .put-proof-kind {
  margin: 0; color: var(--put-mint); font: 800 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: .13em;
}
.put-hero-grid { display: grid; gap: 22px; align-items: end; }
.put-hero h1 { max-width: 820px; margin: 10px 0 12px; font-size: clamp(52px, 12vw, 146px); line-height: .84; letter-spacing: -.085em; }
.put-statement { max-width: 700px; margin: 0; font-size: clamp(21px, 3.3vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.put-hero-art { position: relative; min-height: 172px; overflow: hidden; border: 1px solid var(--put-line); background: #151017; }
.put-hero-art img { width: 100%; height: 100%; min-height: 172px; object-fit: cover; object-position: 48% 45%; display: block; opacity: .69; filter: saturate(.75) contrast(1.06); }
.put-hero-art::after { content: "черновой визуальный пилот"; position: absolute; right: 10px; bottom: 9px; color: #fff; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.put-hero-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.put-hero-nav a, .put-hero-nav button {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--put-line); border-radius: 999px;
  background: transparent; color: var(--put-ink); text-decoration: none; cursor: pointer;
}
.put-hero-nav a:first-child { background: var(--put-mint); border-color: var(--put-mint); color: #102219; font-weight: 800; }
.put-hero-nav a:hover, .put-hero-nav button:hover { border-color: var(--put-mint); }

.put-index { position: sticky; z-index: 4; top: 0; padding: 10px 0; border-block: 1px solid var(--put-line); background: rgba(10, 11, 13, .92); backdrop-filter: blur(12px); }
.put-index-list { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 0; margin: 0; list-style: none; }
.put-index-list::-webkit-scrollbar { display: none; }
.put-index a { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; padding: 8px 11px; color: var(--put-muted); border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: 13px; }
.put-index a:hover, .put-index a[aria-current="true"] { color: var(--put-ink); border-color: var(--put-line); background: var(--put-panel); }
.put-index b { color: var(--put-mint); font: 800 11px/1 ui-monospace, monospace; }

.put-story { padding: 18px 0 74px; }
.put-chapter { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 42px 0; border-bottom: 1px solid var(--put-line); scroll-margin-top: 66px; }
.put-chapter-head { display: grid; gap: 12px; align-content: start; }
.put-number { font: 800 13px/1 ui-monospace, monospace; color: var(--put-violet); letter-spacing: .06em; }
.put-chapter h2 { margin: 0; max-width: 750px; font-size: clamp(30px, 5vw, 62px); letter-spacing: -.055em; line-height: .94; }
.put-lead { margin: 0; max-width: 650px; color: var(--put-muted); font-size: 18px; line-height: 1.42; }
.put-quote { margin: 2px 0 0; padding: 14px 16px; border-left: 3px solid var(--put-mint); background: rgba(103, 231, 173, .055); font-size: 18px; line-height: 1.27; }
.put-quote cite { display: block; margin-top: 7px; color: var(--put-muted); font: 500 12px/1.35 ui-monospace, monospace; font-style: normal; }
.put-facts { display: grid; gap: 10px; margin: 0; }
.put-fact { padding: 14px 0; border-bottom: 1px solid var(--put-line); }
.put-fact:last-child { border-bottom: 0; }
.put-fact dt { margin-bottom: 3px; color: var(--put-mint); font: 800 10px/1.2 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.put-fact dd { margin: 0; color: var(--put-ink); }
.put-proof { display: grid; gap: 10px; align-content: start; }
.put-proof img { width: 100%; max-height: 310px; object-fit: cover; display: block; border: 1px solid var(--put-line); filter: saturate(.8); }
.put-proof-label { margin: 0; font-size: 14px; color: var(--put-muted); }
.put-dharma { margin: 0; padding: 12px 14px; border: 1px solid rgba(168, 124, 255, .35); background: rgba(168, 124, 255, .08); color: #ddd5f7; font-size: 14px; }
.put-details { margin-top: 4px; border-top: 1px solid var(--put-line); }
.put-details summary { cursor: pointer; padding: 12px 0; color: var(--put-muted); font-size: 14px; }
.put-details p { margin: 0 0 12px; color: var(--put-muted); font-size: 14px; }
.put-foot { padding: 28px 0 max(36px, env(safe-area-inset-bottom)); border-top: 1px solid var(--put-line); color: var(--put-muted); font-size: 14px; }
.put-foot p { margin: 0; }

.put-page :focus-visible { outline: 3px solid var(--put-mint); outline-offset: 3px; }
@media (min-width: 760px) {
  .put-shell { width: min(100% - 72px, var(--put-max)); }
  .put-hero-grid { grid-template-columns: 1.02fr .98fr; gap: 38px; }
  .put-hero-art { min-height: 400px; }
  .put-hero-art img { min-height: 400px; }
  .put-chapter { grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 44px; padding: 72px 0; }
  .put-chapter[data-put-chapter="dharma-и-anigma"] { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
  .put-chapter[data-put-chapter="игры"] { grid-template-columns: minmax(0, 1fr) minmax(330px, .92fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }