/* Opt-in web shell: keeps existing TocPanel consumers unchanged. */
:root {
  --header-surface: var(--bg-glass);
  --header-height: 4.5rem;
}
.su-header, .su-footer, .su-menu, .su-button, .su-input { box-sizing: border-box; font-family: var(--font-family-base); }
.su-header *, .su-footer *, .su-menu * { box-sizing: border-box; }
.su-header {
  position: sticky; top: 0; z-index: 40; min-height: var(--header-height);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-gap); padding: .75rem var(--space-page-x);
  color: var(--text-primary); background: var(--header-surface); backdrop-filter: blur(20px);
  transition: background-color var(--transition-normal);
}
.su-header--overlay { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; }
.su-header--overlay.is-scrolled { background: var(--header-surface); backdrop-filter: blur(20px); }
.su-header-scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.su-wordmark { display: inline-flex; align-items: center; width: 8rem; min-height: 2.75rem; color: inherit; }
.su-wordmark img { display: block; width: 100%; height: auto; }
.su-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.8vw, 3rem); }
.su-nav a, .su-header__action, .su-header__title {
  color: inherit; font-size: var(--type-ui-size); font-weight: var(--type-ui-weight);
  line-height: var(--type-ui-leading); text-decoration: none;
}
.su-nav a { padding-block: .75rem; }
.su-header__action { justify-self: end; padding-block: .75rem; }
.su-nav a:hover, .su-header__action:hover, .su-footer a:hover { opacity: .65; }
.su-menu-toggle { display: none; }
.su-menu-toggle[hidden] { display: none !important; }
.su-icon-button, .su-menu-toggle { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: inherit; cursor: pointer; }
.su-icon-button { font-size: 2rem; line-height: 1; font-weight: 400; }
.su-menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0 var(--space-page-x); border: 0;
  background: var(--bg-primary); color: var(--text-primary); overflow-y: auto;
}
.su-menu[open] { display: flex; flex-direction: column; animation: su-menu-open .4s var(--ease-morph) both; }
.su-menu::backdrop { background: transparent; }
.su-menu__header { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); }
.su-menu__body { margin-block: auto; padding-block: var(--space-section); }
.su-menu__intro, .su-menu__legal { color: var(--text-muted); font-size: var(--type-body-size); line-height: var(--type-body-leading); }
.su-menu__intro { margin: 0 0 1.75rem; max-width: 24ch; }
.su-menu nav { display: grid; gap: 1.125rem; }
.su-menu nav a { width: fit-content; color: inherit; text-decoration: none; font-size: clamp(1.75rem, 1rem + 4vw, 3.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.su-menu__legal { padding-block: .75rem; }
.su-menu.is-closing { animation: su-menu-close .26s var(--ease-morph) both; }
.su-menu.is-closing .su-menu__body { opacity: 0; transition: opacity .12s; }
.su-skip-link { position: fixed; top: -6.25rem; left: var(--space-page-x); z-index: 60; padding: .875rem; color: var(--text-primary); background: var(--brand-accent); }
.su-skip-link:focus { top: .625rem; }
.su-footer { padding: var(--space-page-y) var(--space-page-x) 1.5rem; background: var(--bg-primary); color: var(--text-primary); border-top: 1px solid var(--border); }
.su-footer__main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-section); }
.su-footer__about p { max-width: 35ch; margin-top: 1.5rem; color: var(--text-muted); font-size: var(--type-body-size); line-height: var(--type-body-leading); }
.su-footer__group h2 { margin: 0 0 1.25rem; color: var(--text-muted); font: 400 var(--type-ui-size)/1.4 var(--font-family-base); letter-spacing: 0; }
.su-footer__group nav { display: grid; gap: .875rem; }
.su-footer a { color: inherit; text-decoration: none; }
.su-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.125rem; margin-top: var(--space-section); padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--type-ui-size); }
.su-footer__foundation { margin-top: clamp(3rem, 6vw, 7rem); }
.su-footer__foundation img { display: block; width: 100%; height: auto; }
.su-button {
  display: inline-flex; min-height: 3rem; align-items: center; justify-content: center;
  gap: 1.5rem; padding: .875rem 1.375rem; border: 1px solid transparent; border-radius: var(--radius-m);
  color: var(--bg-primary); background: var(--text-primary); cursor: pointer; text-decoration: none;
  font-size: var(--su-button-font-size, var(--type-ui-size)); font-weight: var(--type-ui-weight); line-height: var(--type-ui-leading);
  letter-spacing: var(--type-ui-tracking); text-transform: none;
  transition: background var(--transition-normal), transform var(--transition-normal);
}
.su-button:hover:not(:disabled) { background: var(--text-doc); }
.su-button:active:not(:disabled) { transform: translateY(1px); }
.su-button--accent { color: var(--text-primary); background: var(--brand-accent); }
.su-button--accent:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-accent), var(--bg-primary) 22%); }
.su-button--secondary { color: var(--text-primary); background: var(--surface-subtle); }
.su-button--secondary:hover:not(:disabled) { background: var(--border); }
.su-button:disabled { color: var(--text-muted); background: var(--border); cursor: wait; }
.su-factoid { display: flex; align-items: center; gap: .75rem; color: var(--text-primary); }
.su-factoid[hidden] { display: none; }
.su-factoid__value { font-size: clamp(2rem, 1.65rem + 1.4vw, 3rem); font-weight: var(--type-display-weight); line-height: .8; letter-spacing: var(--type-display-tracking); font-variant-numeric: tabular-nums; }
.su-factoid__label { max-width: 12ch; color: var(--text-muted); font-size: var(--type-ui-size); font-weight: 500; line-height: 1.1; }
.su-card-slideshow { position: relative; isolation: isolate; perspective: 1600px; transform-style: preserve-3d; }
.su-card-slideshow__item {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: var(--su-card-slideshow-item-width, min(31vw, 480px));
  margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-subtle);
  opacity: 0; pointer-events: none;
  transform: translate3d(-10%, -52%, -120px) rotateY(-8deg) rotateZ(5deg) scale(.92);
  transform-origin: 50% 88%; transform-style: preserve-3d;
}
.su-card-slideshow__item:first-child { z-index: 3; opacity: 1; transform: translate3d(-50%, -50%, 0) rotateZ(-1deg) scale(1); }
.su-card-slideshow__item img { display: block; width: 100%; height: auto; }
@keyframes su-card-slideshow {
  0%, 24% { z-index: 3; opacity: 1; transform: translate3d(-50%, -50%, 0) rotateY(0deg) rotateZ(-1deg) scale(1); }
  31% { z-index: 3; opacity: 1; transform: translate3d(-122%, -48%, 90px) rotateY(10deg) rotateZ(-9deg) scale(.98); }
  34%, 91% { z-index: 1; opacity: 0; transform: translate3d(-126%, -46%, -100px) rotateY(10deg) rotateZ(-10deg) scale(.9); }
  92% { z-index: 2; opacity: 0; transform: translate3d(-8%, -52%, -120px) rotateY(-8deg) rotateZ(5deg) scale(.92); }
  100% { z-index: 3; opacity: 1; transform: translate3d(-50%, -50%, 0) rotateY(0deg) rotateZ(-1deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .su-card-slideshow.is-playing .su-card-slideshow__item { animation: su-card-slideshow 12s var(--ease-expressive) infinite both; will-change: transform, opacity; }
  .su-card-slideshow.is-playing .su-card-slideshow__item:nth-child(1) { animation-delay: -12s; }
  .su-card-slideshow.is-playing .su-card-slideshow__item:nth-child(2) { animation-delay: -8s; }
  .su-card-slideshow.is-playing .su-card-slideshow__item:nth-child(3) { animation-delay: -4s; }
}
.su-input { width: 100%; min-width: 0; padding: .75rem .875rem; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg-primary); color: var(--text-primary); font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-family-base); }
.su-input:focus { border-color: var(--text-primary); }
:where(.su-header, .su-footer, .su-menu) :is(a, button):focus-visible,
.su-button:focus-visible, .su-input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes su-menu-open { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes su-menu-close { from { clip-path: inset(0); } to { clip-path: inset(0 0 100%); } }
@media (max-width: 900px) {
  :root { --header-height: 4rem; }
  .su-header { grid-template-columns: 1fr auto; padding-block: .625rem; }
  .su-nav { display: none; }
  .su-header__action { display: none; }
  .su-menu-toggle { display: grid; align-content: center; justify-items: center; gap: .3125rem; }
  .su-menu-toggle span { width: 1.375rem; height: .125rem; background: currentColor; }
  .su-header--compact .su-header__action { display: block; }
  .su-header--compact .su-header__title { display: none; }
  .su-footer__main { grid-template-columns: 1fr 1fr; }
  .su-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .su-footer__main { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .su-menu[open], .su-menu.is-closing { animation: none; }
  .su-header, .su-button, .su-menu.is-closing .su-menu__body { transition: none; }
}