/* Era-owned optical surfaces for the existing stellar runtime.
 * Navigation, chapter boundaries and Three.js remain owned by their modules.
 * Only the outer card blurs its backdrop; inset rows and prose stay stable.
 */
html[data-site-era] #stellar-wave#stellar-wave {
  --sr-accent: var(--g-accent);
  --sr-muted: var(--eg-muted);
  --sw-region-ink: var(--eg-ink);
  --sw-region-muted: var(--eg-muted);
  --sw-region-line: var(--eg-border);
  --sf-ink: var(--eg-ink);
  --sf-text: var(--eg-ink);
  --sf-muted: var(--eg-muted);
  --sf-gold: var(--g-accent);
  --sf-gold-soft: var(--g-selection);
  --sf-gold-line: rgb(var(--g-light) / .38);
  --sf-hair: var(--eg-border);
  --sf-hair-strong: rgb(var(--g-light) / .32);
  --sf-fill: rgb(var(--g-light) / .045);
  --sf-fill-hover: rgb(var(--g-light) / .10);
  --sf-surface: var(--eg-surface);
  --sf-surface-solid: var(--eg-reading-surface);
  --sf-edge: var(--eg-inner);
  --sf-shadow: var(--eg-elevation);
  --sf-r-lg: var(--eg-radius);
  --sf-r-md: max(18px, calc(var(--eg-radius) - 8px));
  --sf-r-sm: max(14px, calc(var(--eg-radius) - 13px));
}

/* The full scene stays open to its film; its readable column is a thick card. */
html[data-site-era] #stellar-wave#stellar-wave .sw-reader {
  --sr-accent: var(--g-accent);
  --sr-muted: var(--eg-muted);
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading {
  --pp-paper: var(--g-reading);
  --pp-paper-2: rgb(var(--g-tint) / .94);
  --pp-line: var(--eg-border);
  --pp-line-strong: rgb(var(--g-light) / .32);
  --pp-ink: var(--eg-ink);
  --pp-text: var(--eg-ink);
  --pp-muted: var(--eg-muted);
  --pp-seal: var(--g-accent);
  --pp-seal-hover: color-mix(in srgb, var(--g-accent) 80%, white);
  --pp-wash: rgb(var(--g-light) / .055);
  background: var(--eg-reading-surface) !important;
  color: var(--eg-ink);
  border: var(--g-edge-width) solid var(--eg-border) !important;
  border-radius: var(--eg-radius) !important;
  box-shadow: var(--eg-inner), var(--eg-elevation), var(--g-glow) !important;
  backdrop-filter: blur(min(28px, var(--g-blur))) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(min(28px, var(--g-blur))) saturate(var(--g-saturate));
  scrollbar-color: rgb(var(--g-light) / .26) transparent;
  scrollbar-gutter: stable;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reading :is(h2, h3, .sr-reference-heading, .sr-facts dd) {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reading :is(.sr-lead, .sr-section p, .sw-story-body p, .sw-deep p, .sr-evidence dd) {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reading :is(.sr-facts dt, .sr-section-kicker, .sr-section-meta, .sr-page-count, .sr-citations small, .sr-reviewed, .sw-source-note) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reading :is(.sw-reader-kind, .sr-section-number, .sr-evidence summary, a) {
  color: var(--g-accent);
}

/* A small opaque dock carries the tabs. No blur is stacked inside the card. */
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters {
  top: 0;
  margin: 0 0 24px;
  padding: 6px;
  gap: 5px;
  border: 1px solid var(--eg-border);
  border-radius: max(20px, calc(var(--eg-radius) - 8px));
  background: var(--eg-reading-surface) !important;
  box-shadow: var(--eg-inner), 0 8px 20px rgb(0 0 0 / .16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters button {
  border: 1px solid transparent;
  border-radius: max(14px, calc(var(--eg-radius) - 16px));
  color: var(--eg-muted);
  background: transparent;
  box-shadow: none;
  min-width: 6.8em;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters button small {
  color: inherit;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters [aria-current="step"] {
  color: var(--eg-ink);
  border-color: rgb(var(--g-light) / .28);
  background: var(--eg-selected-surface) !important;
  box-shadow: var(--eg-inner), 0 3px 12px rgb(0 0 0 / .13);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters button:hover:not([aria-current="step"]) {
  background: rgb(var(--g-light) / .075);
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-section {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination {
  bottom: 0;
  margin: 16px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  background: var(--eg-reading-surface) !important;
  box-shadow: var(--eg-inner), 0 9px 25px rgb(0 0 0 / .17);
  color: var(--eg-muted);
  gap: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination > div {
  gap: 6px;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination button {
  border-color: rgb(var(--g-light) / .24);
  background: rgb(var(--g-light) / .04);
  color: var(--eg-ink);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .07);
  padding-inline: 14px;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination .sr-next:not(:disabled) {
  background: var(--eg-selected-surface);
  border-color: rgb(var(--g-light) / .35);
  color: var(--eg-ink);
  box-shadow: var(--eg-inner);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination button:not(:disabled):hover {
  background: rgb(var(--g-light) / .13);
  border-color: rgb(var(--g-light) / .42);
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-related button {
  border-radius: max(15px, calc(var(--eg-radius) - 12px));
  border-color: var(--eg-border);
  background: rgb(var(--g-light) / .035);
  color: var(--eg-ink);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .045);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-related button:hover {
  background: var(--eg-selected-surface);
  border-color: rgb(var(--g-light) / .32);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-reader-top {
  color: var(--eg-muted);
  border-color: var(--eg-border);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sr-edition, .sr-object-title, .sr-era .sw-date) {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sr-era-label, .sr-image-note, .sr-edition i) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-reader-close, .sr-motion, .sr-inspect) {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  color: var(--eg-ink);
  background: var(--eg-control) !important;
  box-shadow: var(--eg-inner), 0 6px 22px rgb(0 0 0 / .15);
  backdrop-filter: blur(12px) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave .sr-object-kind {
  color: var(--g-accent);
}

/* Scene stories and close inspection have the era's own rim and refraction. */
html[data-site-era] #stellar-wave#stellar-wave :is(.sh-story, .sh-detail, .sc3-controls) {
  color: var(--eg-ink);
  border: var(--g-edge-width) solid var(--eg-border) !important;
  border-radius: var(--eg-radius) !important;
  background: var(--eg-surface) !important;
  box-shadow: var(--eg-inner), var(--eg-elevation), var(--g-glow) !important;
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  scrollbar-color: rgb(var(--g-light) / .25) transparent;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-story {
  border-radius: max(20px, calc(var(--eg-radius) - 5px)) !important;
  background: var(--eg-light-surface) !important;
  padding: 14px 18px;
  box-shadow: var(--eg-inner), 0 12px 32px rgb(0 0 0 / .24), var(--g-glow) !important;
  text-shadow: 0 1px 9px rgb(0 0 0 / .18);
  backdrop-filter: blur(min(20px, var(--g-blur))) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(min(20px, var(--g-blur))) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave .sh-story strong,
html[data-site-era] #stellar-wave#stellar-wave .sh-detail h2 {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sh-story span, .sh-detail > div:not(.sh-detail-actions), .sh-gesture, .sh-model-status, .sh-evidence) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave .sh-detail > p {
  color: var(--g-accent);
}
html[data-site-era] #stellar-wave#stellar-wave .sh-story:hover {
  border-color: rgb(var(--g-light) / .40) !important;
  background: var(--eg-surface) !important;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sh-detail-close, .sc3-tools-close) {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  color: var(--eg-ink);
  background: var(--eg-control);
  box-shadow: var(--eg-inner);
  flex: 0 0 auto;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-detail h2 {
  padding-right: 24px;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-detail-actions {
  flex-wrap: wrap;
  gap: 10px;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sh-inspect, .sh-detail-read, .sh-tools, .sh-browse) {
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--eg-ink);
  background: var(--eg-control);
  box-shadow: var(--eg-inner), 0 6px 24px rgb(0 0 0 / .15);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-panel-heading, .sc3-point-title, .sc-hotspot-label) {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-instructions, .sc3-tools output, .sc3-full-provenance, .sc3-provenance, .sc-material-note) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-tools, .sc3-details) {
  flex-wrap: wrap;
  gap: 8px;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-tools button, .sc3-details button) {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  color: var(--eg-ink);
  background: rgb(var(--g-light) / .045);
  box-shadow: var(--eg-inner);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-details [aria-pressed="true"], .sc3-tools button:hover:not(:disabled)) {
  background: var(--eg-selected-surface);
  border-color: rgb(var(--g-light) / .35);
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sc3-dot, .sc-hotspot-dot) {
  background: var(--g-accent);
  box-shadow: 0 0 13px rgb(var(--g-light) / .45);
}

/* Constellation sidebar and archive/search. Existing scroll owners stay put. */
html[data-site-era] #stellar-wave#stellar-wave .sh-time {
  background:transparent!important;border:0!important;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-time-track {
  background:var(--eg-light-surface)!important;border:var(--g-edge-width) solid var(--eg-border)!important;
  border-radius:999px;padding:5px;gap:4px;box-shadow:var(--eg-inner),var(--eg-elevation);
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave .sh-time :is(button,select) {
  border-radius:999px;border:1px solid transparent;margin:0;color:var(--g-muted);min-height:44px;padding:9px 14px;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-time-track [aria-current="step"] {
  background: var(--eg-selected-surface);border-color:var(--eg-border);color:var(--g-ink);box-shadow:var(--eg-inner);
}
html[data-site-era] #stellar-wave#stellar-wave .sh-era-picker select {
  background:var(--eg-reading-surface);border:1px solid var(--eg-border);color:var(--g-ink);padding:10px 15px;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-top-controls,.sw-periods,.sw-journey-dock) {
  background:var(--eg-light-surface);border:var(--g-edge-width) solid var(--eg-border);border-radius:999px;
  box-shadow:var(--eg-inner),0 8px 28px #0004;backdrop-filter:blur(var(--g-blur)) saturate(var(--g-saturate));padding:5px;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-top-controls,.sw-periods,.sw-journey-dock) button {
  border-radius:999px;background:transparent;border-color:transparent;color:var(--g-muted);min-height:38px;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-top-controls,.sw-periods,.sw-journey-dock) button:is([aria-pressed="true"],[aria-expanded="true"],:hover) {
  background: var(--eg-selected-surface);border-color:var(--eg-border);color:var(--g-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-periods button[aria-pressed="true"]::before {
  background: var(--g-accent);
  box-shadow: 0 0 12px rgb(var(--g-light) / .65), var(--g-glow);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-hover {
  color: var(--eg-ink);
  background: var(--eg-reading-surface);
  border: var(--g-edge-width) solid var(--eg-border);
  border-radius: max(20px, calc(var(--eg-radius) - 8px));
  box-shadow: var(--eg-inner), var(--eg-elevation);
  backdrop-filter: blur(min(24px, var(--g-blur))) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(min(24px, var(--g-blur))) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave .sw-hover strong {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-hover :is(span, small) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-panel, .sw-atlas) {
  color: var(--eg-ink);
  background: var(--eg-surface) !important;
  border: var(--g-edge-width) solid var(--eg-border) !important;
  border-radius: var(--eg-radius) !important;
  box-shadow: var(--eg-inner), var(--eg-elevation), var(--g-glow) !important;
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  scrollbar-color: rgb(var(--g-light) / .25) transparent;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-panel {
  padding: 20px 22px 18px;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-pick {
  border-color: var(--eg-border);
  border-radius: max(18px, calc(var(--eg-radius) - 9px));
  background: linear-gradient(var(--g-reflection-angle), rgb(var(--g-light) / .065), rgb(var(--g-light) / .02));
  box-shadow: var(--eg-inner);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-head h2, .sw-region-pick h3, .sw-region-list strong, .sw-atlas-results strong, .sw-atlas h2) {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-summary, .sw-region-pick p, .sw-region-head p, .sw-region-list small, .sw-region-list span, .sw-region-context, .sw-region-count, .sw-atlas-results span, .sw-atlas-count, .sw-atlas-context, .sw-research-note) {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-pick > small, .sw-atlas-all-eras, .sw-clear-filter) {
  color: var(--g-accent);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-eras button, .sw-region-members button, .sw-region-filters button, .sw-region-culture-scope button, .sw-atlas-scopes button, .sw-region-fold, .sw-more) {
  color: var(--eg-ink);
  background: rgb(var(--g-light) / .045) padding-box;
  box-shadow: inset 0 0 0 1px var(--eg-border), var(--eg-inner);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-eras, .sw-region-members, .sw-region-filters, .sw-region-culture-scope, .sw-atlas-scopes) [aria-pressed="true"] {
  background: var(--eg-selected-surface);
  color: var(--eg-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--g-light) / .35), var(--eg-inner);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-actions button, .sw-atlas-close) {
  background: var(--eg-control) padding-box;
  color: var(--eg-ink);
  box-shadow: inset 0 0 0 1px var(--eg-border), var(--eg-inner);
  border-radius: 999px;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-actions button[data-region-action="read"] {
  background-color: var(--g-accent);
  color: var(--g-primary-ink);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .25), 0 5px 16px rgb(0 0 0 / .18);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-actions button[data-region-action="read"]:hover {
  background-color: color-mix(in srgb, var(--g-accent) 88%, white);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-list button, .sw-atlas-results button) {
  color: var(--eg-ink);
  border-radius: max(15px, calc(var(--eg-radius) - 12px));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-list button, .sw-atlas-results button):hover,
html[data-site-era] #stellar-wave#stellar-wave .sw-region-list button[aria-pressed="true"] {
  background: var(--eg-selected-surface);
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-atlas input, .sw-research-era select) {
  border-color: var(--eg-border);
  border-radius: max(17px, calc(var(--eg-radius) - 11px));
  background: rgb(var(--g-light) / .055);
  color: var(--eg-ink);
  box-shadow: var(--eg-inner);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-atlas input::placeholder {
  color: var(--eg-muted);
  opacity: .8;
}
html[data-site-era] #stellar-wave#stellar-wave .sw-atlas input:focus {
  border-color: rgb(var(--g-light) / .46);
  background: rgb(var(--g-light) / .08);
  box-shadow: var(--eg-inner), 0 0 0 3px rgb(var(--g-light) / .10);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-view-switch {
  border-color: var(--eg-border);
  background: var(--eg-control);
  box-shadow: var(--eg-inner), 0 7px 24px rgb(0 0 0 / .18);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-view-switch [aria-pressed="true"] {
  color: var(--eg-ink);
  background: var(--eg-selected-surface);
  box-shadow: inset 0 0 0 1px rgb(var(--g-light) / .22);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-pagination {
  padding: 2px 8px;
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  background: var(--eg-light-surface);
  color: var(--eg-muted);
  box-shadow: var(--eg-inner), 0 5px 18px rgb(0 0 0 / .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-pagination button {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star::before {
  border-color: rgb(var(--g-light) / calc(var(--g-edge) + .12));
  box-shadow: inset 0 0 6px rgb(var(--g-light) / .06), var(--g-glow);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star i {
  background: var(--g-accent);
  box-shadow: 0 0 7px rgb(var(--g-light) / .65), 0 0 23px rgb(var(--g-light) / .27);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star i::before,
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star i::after {
  background: linear-gradient(90deg, transparent, rgb(var(--g-light) / .72), transparent);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star > span {
  color: var(--eg-muted);
  text-shadow: 0 2px 9px rgb(var(--g-tint) / .95), 0 0 18px rgb(var(--g-tint) / .85);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star small {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star:is(:hover, :focus-visible, [aria-pressed="true"])::before {
  border-color: var(--g-accent);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star:is(:hover, :focus-visible, [aria-pressed="true"]) i {
  box-shadow: 0 0 9px rgb(var(--g-light) / .8), 0 0 27px rgb(var(--g-light) / .42), var(--g-glow);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-star:is(:hover, :focus-visible, [aria-pressed="true"]) > span {
  color: var(--eg-ink);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-all {
  color: var(--eg-muted);
}
html[data-site-era] #stellar-wave#stellar-wave .sw-region-all:is(:hover, :focus-visible) {
  color: var(--g-accent);
}
html[data-site-era] #stellar-wave#stellar-wave :is(.sw-region-panel, .sw-atlas, .sw-reader, .sh-detail, .sc3-controls) :focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 3px;
}

/* On the star map, tools sit behind the stars in the visual hierarchy.
   Keep each era's pigment and reflection shape, at a quieter optical density. */
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] {
  --sw-quiet-detail-surface: radial-gradient(ellipse at var(--g-highlight-pos), rgb(var(--g-light) / calc(var(--g-reflect) * .2)), transparent var(--g-sheen-width)), color-mix(in srgb, rgb(var(--g-tint) / .90) 78%, rgb(2 5 9 / .90));
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(.sw-top-controls, .sw-periods) {
  --sw-tool-surface: linear-gradient(var(--g-reflection-angle), rgb(var(--g-light) / calc(var(--g-reflect) * .25)), transparent var(--g-sheen-width)), rgb(var(--g-tint) / .28);
  --sw-tool-radius: 999px;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 1px solid rgb(var(--g-light) / .14);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .07), 0 8px 24px rgb(0 0 0 / .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-panel {
  --sw-tool-surface: radial-gradient(ellipse at var(--g-highlight-pos), rgb(var(--g-light) / calc(var(--g-reflect) * .35)), transparent var(--g-sheen-width)), color-mix(in srgb, rgb(var(--g-tint) / .72) 78%, rgb(2 5 9 / .72));
  --sw-tool-radius: var(--g-radius);
  isolation: isolate;
  background: transparent !important;
  border: 1px solid rgb(var(--g-light) / .18) !important;
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .09), 0 18px 44px rgb(0 0 0 / .24) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Clip the blur layer itself: WebKit can otherwise paint video backdrops
   beyond a rounded host. Controls and music popovers remain unclipped. */
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(.sw-top-controls, .sw-periods, .sw-region-panel)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  clip-path: inset(0 round var(--sw-tool-radius));
  background: var(--sw-tool-surface);
  backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-view-switch {
  background: transparent;
  border-color: rgb(var(--g-light) / .12);
  box-shadow: none;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] #zhubo-music-panel {
  clip-path: inset(0 round var(--g-radius));
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(#zhubo-music-panel, .sw-hover) {
  background: var(--sw-quiet-detail-surface);
  border: 1px solid rgb(var(--g-light) / .18);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .08), 0 10px 28px rgb(0 0 0 / .25);
  backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
  -webkit-backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-hover {
  clip-path: inset(0 round max(20px, calc(var(--eg-radius) - 8px)));
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] #zhubo-music .zm-versions > div {
  background: rgb(var(--g-tint) / .16);
  border-color: rgb(var(--g-light) / .14);
  box-shadow: none;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-list button:is(:hover, [aria-pressed="true"]),
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-actions button {
  background: rgb(var(--g-light) / .08);
  color: var(--g-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--g-light) / .16);
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-actions button[data-region-action="read"] {
  background: rgb(var(--g-tint) / .24);
  color: var(--g-accent);
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(.sw-top-controls, .sw-periods) button:is([aria-pressed="true"], [aria-expanded="true"], :hover) {
  background: rgb(var(--g-tint) / .58);
  border-color: rgb(var(--g-light) / .22);
  box-shadow: inset 0 1px 0 rgb(var(--g-light) / .10);
  color: var(--g-ink);
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-periods button[aria-pressed="true"]::before {
  box-shadow: none;
  opacity: .8;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(.sw-region-pick, .sw-region-eras button, .sw-region-members button, .sw-region-filters button, .sw-region-culture-scope button, .sw-region-fold) {
  background: rgb(var(--g-tint) / .16);
  box-shadow: inset 0 0 0 1px rgb(var(--g-light) / .13);
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] :is(.sw-region-eras, .sw-region-members, .sw-region-filters, .sw-region-culture-scope) [aria-pressed="true"] {
  background: rgb(var(--g-light) / .10);
  box-shadow: inset 0 0 0 1px rgb(var(--g-light) / .26);
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-pagination {
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--g-muted);
  text-shadow: 0 1px 8px rgb(0 0 0 / .9);
  font-variant-numeric: tabular-nums;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-pagination > span {
  font-size: 9px;
  opacity: .78;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-pagination button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
}
html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] .sw-region-pagination button:is(:hover, :focus-visible):not(:disabled) {
  background: rgb(var(--g-tint) / .56);
  border-color: rgb(var(--g-light) / .22);
}

@media(max-width:700px) {
  html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] #zhubo-music[data-dock="wave"] .zm-bar {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid rgb(var(--g-light) / .14);
    box-shadow: inset 0 1px 0 rgb(var(--g-light) / .07), 0 8px 24px rgb(0 0 0 / .18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-site-era] #stellar-wave#stellar-wave[data-view="sky"][data-hero="false"] #zhubo-music[data-dock="wave"] .zm-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    clip-path: inset(0 round 999px);
    background: var(--sw-tool-surface);
    backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
    -webkit-backdrop-filter: blur(calc(var(--g-blur) * .65)) saturate(var(--g-saturate));
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-region-panel {
    padding: 14px 16px 12px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sh-story {
    padding: 9px 13px;
    border-radius: max(18px, calc(var(--eg-radius) - 9px)) !important;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sh-actions {
    gap: 10px;
  }
  html[data-site-era] #stellar-wave#stellar-wave :is(.sh-inspect, .sh-browse) {
    padding-inline: 15px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sh-detail {
    padding: 22px;
    scroll-padding-top: 12px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sc3-controls {
    max-height: min(43%, calc(100dvh - 160px));
    padding: 12px 14px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-region-pagination {
    gap: 6px;
  }
}
@media(max-width:600px) {
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader-top {
    gap: 8px;
  }
  html[data-site-era] #stellar-wave#stellar-wave :is(.sw-reader-close, .sr-motion) {
    padding: 8px 11px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading {
    scrollbar-gutter: auto;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters {
    top: 0;
    margin: 0 0 20px;
    padding: 5px;
    gap: 4px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters button {
    min-width: 5.8em;
    padding: 10px 8px;
    font-size: 12px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination {
    padding: 7px 8px;
    gap: 6px;
    margin-top: 14px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination button {
    padding-inline: 12px;
    font-size: 13px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-page-count {
    font-size: 11px;
    white-space: nowrap;
  }
}
@media(max-width:360px) {
  html[data-site-era] #stellar-wave#stellar-wave .sr-edition {
    font-size: 10px;
    letter-spacing: .06em;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sr-edition i {
    margin-inline: 3px;
  }
  html[data-site-era] #stellar-wave#stellar-wave :is(.sw-reader-close, .sr-motion) {
    font-size: 10px;
    padding-inline: 9px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination button {
    padding-inline: 9px;
  }
}
@media(max-height:500px) and (min-width:601px) {
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-chapters {
    padding: 4px;
    margin-bottom: 18px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-reader .sw-reading .sr-pagination {
    padding: 5px 8px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sc3-controls {
    max-height: calc(100dvh - 145px);
  }
}
@media(prefers-reduced-motion:reduce) {
  html[data-site-era] #stellar-wave#stellar-wave :is(.sh-story, .sw-region-pick, .sw-reading, .sc3-controls) {
    transition: none;
  }
}

/* Research-era selection keeps its full touch height in both the compact
   directory and short windows; native arrow spacing is managed centrally. */
html[data-site-era] #stellar-wave#stellar-wave .sw-atlas .sw-research-era select {
  min-width: 0;
  min-height: 44px;
  height: auto;
  flex-shrink: 0;
  line-height: 1.5;
}
@media (max-width: 700px), (max-height: 500px) {
  html[data-site-era] #stellar-wave#stellar-wave .sw-atlas .sw-research-era {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-atlas .sw-research-era select {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
  }
}

/* Wrapped filters and the music dock may exceed a short directory viewport.
   Let the panel scroll without collapsing the independently remembered list. */
@media (max-width: 700px), (max-height: 500px) {
  html[data-site-era] #stellar-wave#stellar-wave .sw-atlas[open][data-presentation="directory"] {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
    scrollbar-width: thin;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-atlas[open][data-presentation="directory"] > * {
    flex-shrink: 0;
    min-width: 0;
  }
  html[data-site-era] #stellar-wave#stellar-wave .sw-atlas[open][data-presentation="directory"] > .sw-atlas-results {
    flex: 1 0 160px;
    min-height: 160px;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
}