/* v20 — компьютер: сцена слева на высоту окна, справа колонка «заголовок → полка →
   бренд → тираж → протокол → КП». Протокол виден сразу, КП — модальное окно по центру. */
.top { padding: 14px 32px; }
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
  grid-template-rows: auto 1fr; column-gap: 36px; padding: 0 32px 0 24px; align-items: start;
}
.intro { grid-column: 2; grid-row: 1; padding: 8px 0 4px; }
.kin { font-size: clamp(36px, 3.3vw, 50px); }
.stage {
  grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 12px;
  height: calc(100vh - 86px); min-height: 480px;
}
.panel { grid-column: 2; grid-row: 2; }
.hint-m { display: none; }
.hint { font-size: 13px; }

.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.card { padding: 6px 6px 8px; }
.card-title { font-size: 13px; }
.card-tag { font-size: 11px; }
.card:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }

.cta-d {
  position: sticky; bottom: 0; z-index: 3; padding: 14px 0 16px; margin-top: 8px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.cta-d .btn { width: 100%; font-size: 17px; min-height: 54px; }
.dock { display: none; }

.sheet { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 48px)); max-height: 86vh;
  border-radius: 18px; padding: 12px 24px 24px; box-shadow: 0 30px 80px rgb(0 0 0 / 0.35);
  animation: pop 0.25s cubic-bezier(.2,.8,.2,1); }
.grip { display: none; }
@keyframes pop { from { transform: translateY(14px) scale(0.98); opacity: 0; } }