/* Базовая сетка */
body { margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.wrap { padding:16px; }
h1 { margin:0 0 16px; text-align:center; }
.panels { position: relative; display: flex; gap: 16px; align-items: stretch; }
.panel { position: relative; flex: 1 1 50%; max-width: 50%; max-height: 115vh; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 8px; padding: 16px; box-sizing: border-box; background: #fff; transition: max-height .5s ease, flex-basis .5s ease, max-width .5s ease, transform .5s ease, opacity .5s ease; display: flex; flex-direction: column; }
.img-left { float: left; max-width: 45%; margin: 0 16px 12px 0; }
.img-right { float: right; max-width: 45%; margin: 0 0 12px 16px; }
.panel::after { content: ""; display: block; clear: both; }
.panel.expanded { flex: 1 1 100%; max-width: 100%; max-height: none; z-index: 2; }
.panel.collapsed-left { transform: translateX(-30%); opacity: 0; flex: 0 0 0; max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; }
.panel.collapsed-right { transform: translateX(30%); opacity: 0; flex: 0 0 0; max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; }
.panel-show { margin-top: auto; align-self: center; padding: 10px 16px; border: 1px solid #0d6efd; background: #fff; color: #0d6efd; border-radius: 6px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.panel-show:hover { background:#0d6efd; color:#fff; }
.tab { position: absolute; top: 0; bottom: 0; width: 44px; display: none; z-index: 10; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; color: #fff; font-weight: 600; cursor: pointer; user-select: none; }
#tab-left{ writing-mode: sideways-lr; }
.tab.left { left: 0; background: #0d6efd; border-radius: 8px 0 0 8px; }
.tab.right { right: 0; background: #198754; border-radius: 0 8px 8px 0; }
.extra { max-height: 0; opacity: 0; transition: max-height .6s ease, opacity .6s ease; }
.panel.expanded .extra { max-height: 4000px; opacity: 1; }
.visuallyhidden:not(:focus):not(:active) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; white-space: nowrap !important; clip-path: inset(100%) !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; }
img { max-width: 100%; height: auto; display: block; }
h2, h3 { margin: 12px 0; }
p { margin: 8px 0; }
a { color: #0d6efd; text-decoration: none; }
a:hover { text-decoration: underline; }
#engineering.expanded { padding-right: 44px; }
#development.expanded{ padding-left: 44px; }
.expanded .panel-show { display: none; }
.panel[aria-expanded="false"] img { display: none; }
.panel[aria-expanded="false"] .panel-preview-img { display: block; }
.panel.expanded .panel-preview-img { display: none; }
@media (max-width: 820px) { .panels { flex-direction: column; } .panel, .panel.expanded { max-width: 100%; } .tab.left, .tab.right { width: 30px; } .wrap{padding: 0 16px;} #development.expanded{padding-left: 36px;} .collapsed-left, .collapsed-right {display: none;} }