/* CY_BORG — отдельная страница визитки на весь экран (/dev). Карточки из card.css, здесь только раскладка. */
html, body { margin: 0; }
.devpage { min-height: 100vh; min-height: 100dvh; color: #f3f1e6; background: linear-gradient(rgba(252, 238, 10, .045) 1px, transparent 1px) 0 0 / 100% 36px, linear-gradient(90deg, rgba(252, 238, 10, .045) 1px, transparent 1px) 0 0 / 36px 100%, #050507; }
.devpage .devcard { min-height: 100vh; min-height: 100dvh; margin: 0; padding: 14px clamp(12px, 3vw, 40px) 22px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; }
.dev-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.dev-bar .dev-ttl { color: var(--cyan); }
.dev-bar a, .dev-bar button { font: 700 12px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink); background: var(--yellow); border: 0; padding: 10px 16px; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 8px) 100%, 0 100%); }
.dev-bar a:hover, .dev-bar button:hover, .dev-bar a:focus-visible, .dev-bar button:focus-visible { background: var(--pink); outline: none; }
/* две карточки по ширине экрана, но не выше экрана: размер подстраивается под окно */
.devpage .bc-stage { --gap: clamp(16px, 3vw, 48px); flex: 1; align-items: center; justify-content: center; gap: var(--gap); }
.devpage .bc-slot { width: min(calc((100% - var(--gap)) / 2 - 1px), calc((100vh - 170px) * 91 / 55)); }
@media (max-width: 900px) { .devpage .bc-slot { width: min(100%, calc((100vh - 150px) * 91 / 55)); } .devpage .bc-stage { flex-direction: column; flex-wrap: nowrap; } }
.devpage .dev-links { justify-content: center; margin: 0; }
.devpage:fullscreen .dev-bar .dev-back { display: none; }
@media print { .dev-bar { display: none; } }