.brandbook-shell{width:100%;max-width:min(100%,calc(120vh - 20px));max-width:min(100%,calc(120svh - 20px));margin-inline:auto;background:#121619;padding:clamp(12px,2vw,24px);color:#f4f7f8}
.brandbook-topline{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:3px 4px 18px;font-size:.69rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.brandbook-topline span{color:#a8b1b5}
.brandbook-track{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#0793fd #223038}
.brandbook-page{flex:0 0 100%;min-width:0;aspect-ratio:16/9;scroll-snap-align:start;scroll-snap-stop:always;background:#f8f8f8}
.brandbook-page img{display:block;width:100%;height:100%;object-fit:contain}
.brandbook-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:17px}
.brandbook-controls button{min-height:44px;width:max-content;padding:9px 14px;background:transparent;border:1px solid #586268;color:#f4f7f8;font:700 .69rem/1.3 Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.brandbook-controls button:last-child{justify-self:end}
.brandbook-controls button:hover:not(:disabled){border-color:#0793fd;color:#0793fd}
.brandbook-controls button:disabled{opacity:.42;cursor:default}
.brandbook-count{font-size:.72rem;font-weight:700;letter-spacing:.14em;white-space:nowrap}
@media(max-width:650px){
  .brandbook-topline{font-size:.59rem}
  .brandbook-controls{gap:5px}
  .brandbook-controls button{padding:8px;font-size:.56rem}
  .brandbook-count{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.brandbook-track{scroll-behavior:auto}}