/* Small static controls; the original design tokens and compiled styles are preserved. */
html { color-scheme: dark; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 100; padding: .75rem 1rem; border-radius: .5rem; background: var(--primary); color: var(--primary-foreground); }
.skip-link:focus { top: 1rem; }
#site-header.is-scrolled { border-color: var(--border); background: color-mix(in oklch, var(--background), transparent 8%); box-shadow: 0 1px 3px #0003; }
.desktop-products { position: relative; }
.product-dropdown { position: absolute; left: 0; top: calc(100% + .5rem); width: min(780px, calc(100vw - 3rem)); border-radius: .75rem; }
.product-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.dropdown-all { display: flex; align-items: center; gap: .25rem; margin-bottom: .75rem; padding: .5rem; font-size: .875rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.desktop-products summary svg { transition: transform 150ms; }
.desktop-products details[open] > summary svg { transform: rotate(180deg); }
.mobile-menu > summary { position: relative; }
.mobile-menu .menu-close-icon { display: none; }
.mobile-menu[open] > summary { z-index: 73; }
.mobile-menu[open] > summary .menu-open-icon { display: none; }
.mobile-menu[open] > summary .menu-close-icon { display: block; }
.menu-backdrop { position: fixed; inset: 0; background: #0009; z-index: 70; }
.mobile-menu-panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(24rem, calc(100vw - 1.5rem)); padding: 1rem; padding-top: 4.5rem; overflow-y: auto; overscroll-behavior: contain; z-index: 72; box-shadow: -8px 0 32px #0005; }
.mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.mobile-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .5rem; padding: .75rem; background: var(--muted); font-size: .875rem; font-weight: 500; }
.mobile-link:hover { background: var(--accent); }
.mobile-category[open] > summary svg { transform: rotate(90deg); }
body.menu-is-open { overflow: hidden; }
.faq-item > summary svg { margin-left: 1rem; transition: transform 150ms; }
.faq-item[open] > summary svg { transform: rotate(180deg); }
nav a[aria-current="page"] { color: var(--foreground); }
nav[aria-labelledby="footer-products-heading"] a { max-width: 100%; white-space: normal; }
.manual-grid { margin-top: 2rem; display: grid; gap: 1.25rem; }
.manual-card { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); transition: border-color .15s; }
.manual-card:hover { border-color: var(--primary); }
.manual-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.manual-card-body { padding: 1.5rem; }
.manual-card h2 { font-size: 1.125rem; font-weight: 600; }
.manual-card p, .manual-article p { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.75; }
.manual-card time { display: block; margin-top: 1rem; color: var(--muted-foreground); font-size: .75rem; }
.manual-article { max-width: 56rem; margin-inline: auto; padding-block: 2.5rem; }
.manual-article h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.manual-article h2 { margin-top: 2rem; font-size: 1.5rem; font-weight: 600; }
.manual-article > img { margin-block: 2rem; border-radius: .75rem; width: 100%; }
.manual-gallery { display: grid; gap: 1rem; margin-top: 2rem; }
.manual-gallery img { width: 100%; border-radius: .5rem; }
@media (min-width: 768px) { .manual-grid, .manual-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .manual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mobile-menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item > summary svg, .desktop-products summary svg { transition: none; } }