@layer features {
/* The site's shared chrome (2026-10-07): the page links and the sound switch, on every page.
   Six page links since the Manifest joined. On a phone they share one scrolling row and never hide;
   the five-column grid frontier.css drew for five links is set aside here. */
@media (max-width: 900px) {
  nav.top .page-nav,nav.top:has(.nav-frontier) .page-nav{display:flex;grid-template-columns:none;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  nav.top .page-nav::-webkit-scrollbar{display:none}
  nav.top .page-nav a,nav.top:has(.nav-frontier) .page-nav a{flex:0 0 auto;padding-inline:12px;min-height:44px;scroll-snap-align:start}
}
@media (min-width: 721px) and (max-width: 900px) { nav.top .page-nav{max-width:52vw} }
/* The phone nav is a grid sized for brand, search and Explore; the sound switch is a fourth column, icon only. */
@media (max-width: 720px) {
  nav.top:has(.sound-toggle){grid-template-columns:1fr repeat(3,auto)}
  nav.top .sound-toggle{margin-left:0;width:44px;padding:0;justify-content:center}
  nav.top .sound-toggle .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* The sound switch in every nav (sound.js). Off by default; on, its three bars move with the tide. */
.sound-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-left:8px;border-radius:var(--r-btn);border:1px solid rgba(196,206,255,.22);background:rgba(10,14,40,.6);color:var(--ink);font:600 14px/1 var(--voice);cursor:pointer}
.sound-toggle[aria-pressed="true"]{border-color:rgba(253,194,111,.6);box-shadow:0 0 20px -8px rgba(253,194,111,.7)}
.sound-glyph{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sound-glyph i{width:3px;height:5px;border-radius:2px;background:currentColor;opacity:.7}
.sound-glyph i:nth-child(2){height:9px}.sound-glyph i:nth-child(3){height:6px}
.sound-toggle[aria-pressed="true"] .sound-glyph i{background:#fdc26f;opacity:1;animation:mfWave 1.4s ease-in-out infinite}
.sound-toggle[aria-pressed="true"] .sound-glyph i:nth-child(2){animation-delay:-.45s}
.sound-toggle[aria-pressed="true"] .sound-glyph i:nth-child(3){animation-delay:-.9s}
@keyframes mfWave{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.5)}}
.sound-glyph i{transform-origin:bottom}
@media (max-width:560px){.sound-toggle .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sound-toggle{padding:0 12px}}

@media (prefers-reduced-motion:reduce){.sound-toggle .sound-glyph i{animation:none!important}}

/* Folds: reference that opens on a tap (the corpus, the sources). The count stays in view above. */
.fold{margin:18px 0 0}
.fold>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);border:1px solid rgba(192,132,252,.45);background:rgba(192,132,252,.08);color:var(--ink);font:600 15px/1 var(--voice);cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fold>summary:hover,.fold>summary:focus-visible{background:rgba(192,132,252,.16);border-color:rgba(192,132,252,.8)}
.fold[open]>summary{margin-bottom:18px}
/* One home per model: a section names its models and links to their card in the corpus. */
.model-links-wrap{margin:22px 0 0}
.model-links-k{margin:0 0 10px;color:var(--ink-2);font-size:15px}
.model-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.model-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(196,206,255,.2);background:rgba(255,255,255,.03);color:var(--ink);font:500 14px/1.3 var(--voice);text-decoration:none}
.model-links a:hover,.model-links a:focus-visible{border-color:rgba(192,132,252,.7)}
.home-link{margin:22px 0 0}
.home-link a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn);border:1px solid rgba(192,132,252,.42);background:rgba(192,132,252,.07);color:var(--ink);font:600 15px/1 var(--voice);text-decoration:none}
}