/* Native viewport scrollbar: no overlay, replacement thumb or scroll interception.
   Platform overlay scrollbars (including iOS) can ignore part or all of this skin.
   Stone joints and the small bevel highlight are static, never a moving shimmer.
   Load after global-enhancements-r3.css. The :is() specificity matches its
   html.aether-global-effects rules even if that class is not present yet. */
:is(html, html.aether-global-effects) {
  --planet-scroll-stone: rgb(106, 108, 112);
  --planet-scroll-edge: rgb(142.4, 142.32, 142.16);
  --planet-scroll-shadow: rgb(50.88, 51.84, 53.76);
  --planet-scroll-track: #0c0e10;
  scrollbar-color: var(--planet-scroll-stone) var(--planet-scroll-track);
  scrollbar-width: auto;
}
/* scrollbar-color inherits; keep this treatment on the viewport only. */
body { scrollbar-color: auto; }
@supports selector(::-webkit-scrollbar) {
  /* A non-auto standard color overrides WebKit's textured pseudo-elements. */
  :is(html, html.aether-global-effects) { scrollbar-color: auto; }
  :is(html, html.aether-global-effects)::-webkit-scrollbar { width: 16px; height: 16px; }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-track {
    background: var(--planet-scroll-track);
    border-left: 1px solid #202326;
    box-shadow: inset 1px 0 #050607, inset -1px 0 #050607;
  }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb {
    min-height: 64px;
    min-width: 64px;
    border: 2px solid var(--planet-scroll-track);
    border-radius: 2px;
    background-color: var(--planet-scroll-stone);
    background-image:
      linear-gradient(90deg, transparent 0 1px, rgba(237,230,211,.15) 1px 2px, transparent 2px),
      repeating-linear-gradient(0deg, transparent 0 21px, #17191b 21px 23px, var(--planet-scroll-edge) 23px 24px, transparent 24px 46px),
      repeating-linear-gradient(135deg, rgba(0,0,0,.09) 0 1px, transparent 1px 7px, rgba(255,255,255,.035) 7px 8px, transparent 8px 15px),
      linear-gradient(90deg, var(--planet-scroll-edge) 0 1px, var(--planet-scroll-stone) 1px calc(100% - 2px), var(--planet-scroll-shadow) calc(100% - 2px));
    background-clip: padding-box;
    box-shadow: inset 0 1px var(--planet-scroll-edge), inset 0 -2px var(--planet-scroll-shadow);
  }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 1px 1px var(--planet-scroll-edge), inset -1px -2px var(--planet-scroll-shadow);
  }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:active {
    box-shadow: inset 1px 1px var(--planet-scroll-shadow), inset -1px -1px var(--planet-scroll-edge);
  }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #202326; }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:horizontal {
    background-image:
      repeating-linear-gradient(90deg, transparent 0 21px, #17191b 21px 23px, var(--planet-scroll-edge) 23px 24px, transparent 24px 46px),
      linear-gradient(0deg, var(--planet-scroll-shadow) 0 2px, var(--planet-scroll-stone) 2px calc(100% - 1px), var(--planet-scroll-edge) calc(100% - 1px));
  }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-corner { background: var(--planet-scroll-track); }
  :is(html, html.aether-global-effects)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  @media (max-width: 600px) {
    :is(html, html.aether-global-effects)::-webkit-scrollbar { width: 12px; height: 12px; }
  }
}
/* The module changes color immediately under reduced motion. No CSS animations
   or transitions are used, so no decorative motion survives this preference. */
@media (forced-colors: active) {
  :is(html, html.aether-global-effects) { scrollbar-color: auto !important; scrollbar-width: auto !important; }
  :is(html, html.aether-global-effects)::-webkit-scrollbar,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-track,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-track:horizontal,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:hover,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:active,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-thumb:horizontal,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-corner,
  :is(html, html.aether-global-effects)::-webkit-scrollbar-button { all: revert !important; }
}

/* Static antique brass and diamond rail around the native colored stone thumb.
   It never intercepts scrolling or draws a second moving thumb. */
:is(html,html.aether-global-effects)::-webkit-scrollbar-track{
 border-left:2px solid #cba565;border-right:2px solid #69502e;
 box-shadow:inset 1px 0 #f4dfac,inset -1px 0 #171b25;
}
html::after{
 content:"";position:fixed;right:16px;top:0;bottom:0;width:7px;
 z-index:2147483000;pointer-events:none;
 background-color:#4b3522;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='72' viewBox='0 0 7 72' shape-rendering='crispEdges'%3E%3Cpath fill='%23dfbc7a' d='M0 0h2v72H0zM5 0h2v72H5zM2 0h3v2H2zM2 70h3v2H2z'/%3E%3Cpath fill='%23775732' d='M2 2h3v68H2z'/%3E%3Cpath fill='%23fff0c4' d='M3 29h1v1h1v2h1v7H5v2H4v1H3v-1H2v-2H1v-7h1v-2h1z'/%3E%3Cpath fill='%23abc4dc' d='M3 31h1v2h1v4H4v3H3v-3H2v-4h1z'/%3E%3Cpath fill='%23556988' d='M3 35h2v2H3z'/%3E%3C/svg%3E");
 box-shadow:-1px 0 #1b1120,1px 0 #f4dfac;
}
@media(max-width:600px){html::after{right:12px;width:5px;background-size:5px 72px;}}
@media(forced-colors:active){html::after{display:none;}}
@media print{html::after{display:none;}}