/* ============================================================
   StreamSphere Liquid OS · V12 Creator + Optimization Fix
   Shared dark liquid-glass surface system.
   Desktop/browser = spacious macOS-style workspace.
   Installed PWA = touch-first iOS-style glass shell.
   ============================================================ */

:root{
  --liquid-bg:#06080f;
  --liquid-surface:rgba(18,22,35,.30);
  --liquid-surface-soft:rgba(255,255,255,.038);
  --liquid-surface-strong:rgba(11,14,24,.52);
  --liquid-surface-elevated:rgba(27,31,48,.39);
  --liquid-edge:rgba(255,255,255,.165);
  --liquid-edge-soft:rgba(255,255,255,.075);
  --liquid-edge-bright:rgba(255,255,255,.21);
  --liquid-highlight:rgba(255,255,255,.14);
  --liquid-purple:#ad8cff;
  --liquid-blue:#7f9cff;
  --liquid-cyan:#65e5ef;
  --liquid-pink:#ff83d1;
  --liquid-green:#6ee7bd;
  --liquid-red:#ff6f8a;
  --liquid-shadow:0 24px 80px rgba(0,0,0,.34),0 3px 14px rgba(0,0,0,.25);
  --liquid-shadow-high:0 34px 110px rgba(0,0,0,.46),0 8px 28px rgba(0,0,0,.28);
  --liquid-inner:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.045);
  --liquid-blur:42px;
  --liquid-saturate:178%;
  --liquid-radius:24px;
  --liquid-radius-lg:32px;
  --liquid-radius-sm:15px;
  --liquid-gutter:clamp(16px,2.4vw,34px);
  --liquid-x:50%;
  --liquid-y:14%;
}

html.liquid-os{
  color-scheme:dark;
  background:var(--liquid-bg)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode){
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 620px at var(--liquid-x) var(--liquid-y),rgba(147,105,255,.12),transparent 62%),
    radial-gradient(900px 620px at 92% 12%,rgba(55,217,232,.11),transparent 62%),
    radial-gradient(760px 620px at 48% 102%,rgba(255,91,188,.065),transparent 64%),
    linear-gradient(180deg,#090b14 0%,#060810 50%,#05070d 100%)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode)::after{
  content:"";
  position:fixed;
  z-index:-2;
  inset:0;
  pointer-events:none;
  opacity:.52;
  background:
    radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.035),transparent 48%),
    linear-gradient(112deg,transparent 0 35%,rgba(255,255,255,.012) 43%,rgba(204,226,255,.032) 49%,rgba(255,255,255,.014) 54%,transparent 65%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%);
}

/* Ambient layers become diffuse light sources rather than visible blobs. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.aurora,.mist,.bg-wash,.viewer-bg){
  filter:blur(150px) saturate(120%)!important;
  opacity:.16!important;
}

/* ------------------------------------------------------------
   Core glass recipe
   ------------------------------------------------------------ */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .glass,
  .viewer-panel,
  .featured-live-shell,
  .viewer-discover-spotlight,
  .viewer-quest-hero,
  .viewer-leaderboard-panel,
  .viewer-profile-shell,
  .viewer-events-preview-panel,
  .rework-tool-card,
  .rework-viewer-community-card,
  .live-watch-shell,
  .form-card,
  .glow-card,
  .steam-link-card,
  .sponsor-layout,
  .creator-ticket-shell,
  .pulse-hero,
  .pulse-panel,
  .pulse-live-card,
  .mod-panel,
  .mod-workspace,
  .network-panel,
  .network-card,
  .news-wire-panel,
  .news-card,
  .streamer-loading,
  .admin-shell .glass,
  .owner-hq-hero,
  .owner-hq-panel,
  .owner-build-card,
  .owner-control-card,
  .owner-wire-card,
  .owner-principle-card
){
  border:1px solid var(--liquid-edge)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,.032) 22%,rgba(255,255,255,.012) 58%,rgba(255,255,255,.045) 100%),
    var(--liquid-surface)!important;
  box-shadow:var(--liquid-inner),var(--liquid-shadow)!important;
  backdrop-filter:blur(var(--liquid-blur)) saturate(var(--liquid-saturate))!important;
  -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(var(--liquid-saturate))!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .featured-live-shell,
  .viewer-discover-spotlight,
  .viewer-quest-hero,
  .live-watch-shell,
  .pulse-hero,
  .owner-hq-hero,
  .news-wire-hero,
  .network-hero,
  .mod-hero
){
  border-radius:var(--liquid-radius-lg)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(255,255,255,.045),var(--liquid-shadow-high)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .viewer-panel,.rework-tool-card,.rework-viewer-community-card,.pulse-panel,.network-card,.news-card,.form-card,.glow-card,
  .owner-hq-panel,.owner-build-card,.owner-control-card,.owner-wire-card,.owner-principle-card
){
  border-radius:var(--liquid-radius)!important;
}

/* Glass pieces nested inside glass should be lighter, not double-black. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.glass,.viewer-panel,.rework-tool-card,.pulse-panel,.network-card) :is(.glass,.mini-card,.stat-card,.compact-card){
  background:rgba(255,255,255,.045)!important;
  border-color:var(--liquid-edge-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* ------------------------------------------------------------
   Desktop floating titlebar / navigation
   ------------------------------------------------------------ */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar
){
  border:1px solid var(--liquid-edge)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 34%,rgba(255,255,255,.012)),
    rgba(13,16,27,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 18px 60px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(46px) saturate(188%)!important;
  -webkit-backdrop-filter:blur(46px) saturate(188%)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.main-topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar){
  border-radius:25px!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .main-topbar nav,.rework-primary-nav,.viewer-topbar nav,.rework-viewer-nav,.streamer-topbar nav,.mod-topbar nav,.pulse-topbar nav,.network-topbar nav,.news-wire-topbar nav
){
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:17px!important;
  background:rgba(4,6,12,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .main-topbar nav a,.rework-primary-nav a,.viewer-topbar nav button,.rework-viewer-nav button,.streamer-topbar nav a,.mod-topbar nav a,.pulse-topbar nav a,.network-topbar nav a,.news-wire-topbar nav a
){
  position:relative;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .main-topbar nav a.active,.main-topbar nav a.is-active,.rework-primary-nav a.active,.rework-primary-nav a.is-active,
  .viewer-topbar nav button.active,.rework-viewer-nav button.active,.streamer-topbar nav a.active,.mod-topbar nav a.active,.pulse-topbar nav a.active,.network-topbar nav a.active,.news-wire-topbar nav a.active
){
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 18px rgba(0,0,0,.2)!important;
}

/* ------------------------------------------------------------
   Controls
   ------------------------------------------------------------ */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  button,.btn,.gateway-primary-cta,.gateway-secondary-cta,.door-button,.icon-btn,.topbar-icon-button
){
  border-radius:14px!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .btn.primary,.primary.btn,.gateway-primary-cta,.rework-tool-card-primary,.door-button.primary
){
  border:1px solid rgba(255,255,255,.17)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%),
    linear-gradient(118deg,#805ee9 0%,#8d65e8 36%,#4ec6d8 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.27),0 10px 30px rgba(105,82,214,.28)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .btn.secondary,.btn.ghost,.secondary.btn,.ghost.btn,.gateway-secondary-cta,.icon-btn,.topbar-icon-button,
  .viewer-top-actions button,.pulse-actions button,.network-actions button,.mod-actions button
){
  border:1px solid rgba(255,255,255,.105)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.18)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(input,textarea,select){
  min-height:44px;
  border:1px solid rgba(255,255,255,.105)!important;
  border-radius:14px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012)),
    rgba(5,7,13,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(input,textarea,select):focus{
  outline:none!important;
  border-color:rgba(101,229,239,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 4px rgba(101,229,239,.065)!important;
}

/* Segmented tabs become compact glass controls. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.rework-section-tabs,.segmented-control,.tab-list){
  padding:4px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:16px!important;
  background:rgba(5,7,13,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .rework-section-tabs :is(button,a){
  border-radius:12px!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .rework-section-tabs :is(button,a).active{
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.16)!important;
}

/* Menus, drawers, dialogs and toast stacks float above the scene. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .inbox-drawer,.performance-panel,.viewer-notification-panel,.viewer-mobile-menu,.watch-dialog,.viewer-clip-dialog,.wheel-dialog,
  .modal,.dialog,.dropdown-menu,.account-menu
){
  border:1px solid var(--liquid-edge)!important;
  border-radius:var(--liquid-radius)!important;
  background:
    linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 32%),
    rgba(10,13,22,.78)!important;
  box-shadow:var(--liquid-inner),var(--liquid-shadow-high)!important;
  backdrop-filter:blur(42px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(42px) saturate(180%)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.toast,.viewer-toast,.toasts>* ){
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(18,22,34,.72)!important;
  backdrop-filter:blur(26px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.32)!important;
}

/* ------------------------------------------------------------
   Desktop interaction: depth without turning every card into a toy.
   ------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .rework-tool-card,.rework-viewer-community-card,.network-card,.news-card,.owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card
  ){
    transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,background .28s ease!important;
  }
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .rework-tool-card,.rework-viewer-community-card,.network-card,.news-card,.owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card
  ):hover{
    transform:translateY(-4px) scale(1.006)!important;
    border-color:rgba(255,255,255,.19)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 30px 80px rgba(0,0,0,.39)!important;
  }
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(button,.btn,a[role="button"]):active{
    transform:translateY(0) scale(.985)!important;
  }
}

/* Better full-screen breathing room on desktop. */
@media(min-width:901px){
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.section,.viewer-section,.pulse-section,.network-section){
    padding-left:var(--liquid-gutter)!important;
    padding-right:var(--liquid-gutter)!important;
  }
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .page-head{
    margin-bottom:30px!important;
  }
}

/* ------------------------------------------------------------
   Installed app / iPhone-style treatment
   .liquid-standalone is added by liquid-os.js and covers iOS navigator.standalone.
   ------------------------------------------------------------ */
html.liquid-standalone{
  --liquid-surface:rgba(28,31,44,.36);
  --liquid-surface-strong:rgba(16,18,29,.56);
  --liquid-edge:rgba(255,255,255,.15);
  --liquid-blur:36px;
  --liquid-radius:27px;
  --liquid-radius-lg:34px;
  --liquid-radius-sm:16px;
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode){
  min-height:100dvh;
  padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar
){
  top:calc(7px + env(safe-area-inset-top))!important;
  width:calc(100% - 16px)!important;
  min-height:60px!important;
  margin-top:calc(7px + env(safe-area-inset-top))!important;
  border-radius:22px!important;
  padding-left:12px!important;
  padding-right:10px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,rgba(255,255,255,.015)),
    rgba(15,18,30,.66)!important;
  backdrop-filter:blur(30px) saturate(185%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(185%)!important;
}

/* In wide standalone layouts, dense desktop nav gives way to the dock.
   On phones/tablets the mobile drawer must remain renderable. */
@media (min-width:1121px){
  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .main-topbar nav,.rework-primary-nav,.viewer-topbar nav,.rework-viewer-nav,.streamer-topbar nav,.mod-topbar nav,.pulse-topbar nav,.network-topbar nav,.news-wire-topbar nav
  ){
    display:none!important;
  }
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.section,.viewer-section,.pulse-section,.network-section){
  padding-left:14px!important;
  padding-right:14px!important;
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .glass,.viewer-panel,.rework-tool-card,.rework-viewer-community-card,.pulse-panel,.network-card,.news-card,.form-card,.owner-build-card,.owner-control-card
){
  border-radius:27px!important;
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(button,.btn,.gateway-primary-cta,.gateway-secondary-cta,.icon-btn,.topbar-icon-button){
  min-height:44px;
  touch-action:manipulation;
}

html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(input,textarea,select){
  min-height:48px;
  border-radius:16px!important;
  font-size:16px!important; /* prevents iOS focus zoom */
}

/* Native-feeling bottom sheet treatment on smaller installed screens. */
@media(max-width:760px){
  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .inbox-drawer,.performance-panel,.viewer-notification-panel,.viewer-mobile-menu
  ){
    top:auto!important;
    right:8px!important;
    bottom:calc(86px + env(safe-area-inset-bottom))!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(72dvh,680px)!important;
    border-radius:30px!important;
  }

  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.watch-dialog,.viewer-clip-dialog,.wheel-dialog,.modal,.dialog){
    border-radius:30px!important;
  }
}

/* Universal app dock inserted by liquid-os.js on pages that do not already have one. */
.liquid-app-dock{
  display:none;
}

html.liquid-standalone .liquid-app-dock{
  position:fixed;
  z-index:950;
  right:10px;
  bottom:calc(8px + env(safe-area-inset-bottom));
  left:10px;
  height:70px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  padding:6px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:25px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.135),rgba(255,255,255,.035) 42%,rgba(255,255,255,.018)),
    rgba(17,20,32,.69);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 54px rgba(0,0,0,.42);
  backdrop-filter:blur(32px) saturate(190%);
  -webkit-backdrop-filter:blur(32px) saturate(190%);
}

html.liquid-standalone .liquid-app-dock a{
  min-width:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:5px 2px;
  border:1px solid transparent;
  border-radius:18px;
  color:#9ca4b6;
  text-decoration:none;
  -webkit-user-select:none;
  user-select:none;
}

html.liquid-standalone .liquid-app-dock a .liquid-dock-icon{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:10px;
  font-size:17px;
  line-height:1;
}

html.liquid-standalone .liquid-app-dock a .liquid-dock-label{
  max-width:100%;
  overflow:hidden;
  font-size:9px;
  font-weight:800;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html.liquid-standalone .liquid-app-dock a.active{
  color:#fff;
  border-color:rgba(255,255,255,.105);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}

html.liquid-standalone .liquid-app-dock a.active .liquid-dock-icon{
  background:linear-gradient(135deg,rgba(173,140,255,.28),rgba(101,229,239,.18));
  box-shadow:0 7px 22px rgba(115,89,220,.16);
}

/* Viewer already owns a dock. Restyle it and avoid two docks. */
html.liquid-standalone #viewerAppDock{
  right:10px!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  left:10px!important;
  min-height:70px!important;
  padding:6px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:25px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.135),rgba(255,255,255,.035) 42%,rgba(255,255,255,.018)),
    rgba(17,20,32,.69)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 54px rgba(0,0,0,.42)!important;
  backdrop-filter:blur(32px) saturate(190%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(190%)!important;
}

html.liquid-standalone #viewerAppDock>button{
  min-height:56px!important;
  border-radius:18px!important;
}

html.liquid-standalone #viewerAppDock>button.active{
  border:1px solid rgba(255,255,255,.105)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13)!important;
}

/* App pages should feel like stacked native surfaces, not squeezed desktop layouts. */
@media(max-width:760px){
  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.page-head h1,.section-head h2,.rework-section-heading h2){
    letter-spacing:-.045em!important;
  }
  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .page-head{
    margin-bottom:20px!important;
  }
  html.liquid-standalone body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.rework-tool-grid,.giveaway-grid,.creator-grid){
    gap:12px!important;
  }
}

/* Admin and public giveaway are still part of the system but should not receive app dock chrome. */
html.liquid-standalone body.liquid-no-dock{
  padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;
}

/* Accessibility + graceful degradation. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.glass,.viewer-panel,.rework-tool-card,.pulse-panel,.network-card,.news-card,.form-card),
  html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar){
    background:rgba(14,17,28,.94)!important;
  }
}

@media(prefers-reduced-transparency:reduce){
  html.liquid-os{
    --liquid-surface:rgba(15,18,29,.93);
    --liquid-surface-strong:rgba(12,14,24,.97);
    --liquid-blur:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) *{
    scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------
   V8 coverage pass: legacy/page-specific surfaces join Liquid OS.
   ------------------------------------------------------------ */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .gateway-door,.gateway-spotlight,.gateway-quest-preview,.gateway-leaderboard-preview,.gateway-trust-strip,.gateway-moment-card,.gateway-final-cta,
  .hero-visual,.block,.collab-chat-panel,.collab-discovery,.collab-game-library,.creator-ticket-conversation,.sponsorship-section,
  .mod-workbench,.mod-rail,.mod-command-bar,.mod-hero-status,
  .network-pulse,.your-network-panel,.network-search-controls,
  .news-wire-hero,.news-wire-controls,.news-wire-pinned,
  .owner-hq-console,.owner-live-deck,.owner-build-board,.owner-platform-deck,.owner-story,.owner-private-command,.owner-creator-deck,.owner-page-editor-panel,
  .admin-account-console,.admin-ticket-shell,.ticket-console,.news-admin-console,.roster-card,.add-card
){
  border:1px solid var(--liquid-edge)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.026) 28%,rgba(255,255,255,.012) 62%),
    var(--liquid-surface)!important;
  box-shadow:var(--liquid-inner),var(--liquid-shadow)!important;
  backdrop-filter:blur(var(--liquid-blur)) saturate(var(--liquid-saturate))!important;
  -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(var(--liquid-saturate))!important;
  border-radius:var(--liquid-radius)!important;
}

/* Small state elements behave like translucent HUD chips. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .status-pill,.count-pill,.floating-chip,.rework-status-chip,.viewer-badge-grid>* ,.pulse-metrics>* ,.mini-stats>* ,.admin-head-actions .btn
){
  border-color:rgba(255,255,255,.105)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085)!important;
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
}

/* Owner HQ remains distinct through scale and accent, while still using the same material system. */
html.liquid-os body.platform-owner-page.home-design:not(.afterdark-mode) :is(.owner-hq-hero,.owner-hq-console,.owner-private-command){
  border-color:rgba(173,140,255,.22)!important;
  background:
    radial-gradient(circle at 86% 10%,rgba(101,229,239,.10),transparent 34%),
    radial-gradient(circle at 12% 2%,rgba(173,140,255,.15),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 32%),
    rgba(16,18,31,.60)!important;
}

html.liquid-os body.platform-owner-page.home-design:not(.afterdark-mode) .owner-hq-nav-inner{
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  background:rgba(8,10,18,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
}

/* Polished scrollbars on desktop, invisible-system feel on touch devices. */
html.liquid-os body.home-design{scrollbar-color:rgba(255,255,255,.16) transparent;scrollbar-width:thin}
html.liquid-os body.home-design::-webkit-scrollbar{width:10px;height:10px}
html.liquid-os body.home-design::-webkit-scrollbar-track{background:transparent}
html.liquid-os body.home-design::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:99px;background:rgba(255,255,255,.17);background-clip:padding-box}
html.liquid-os body.home-design::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);background-clip:padding-box}
@media(pointer:coarse){
  html.liquid-os body.home-design::-webkit-scrollbar{width:0;height:0}
}

/* ============================================================
   V9 Motion Engine · smooth system motion + living ambient scene
   ============================================================ */
:root{
  --liquid-ease-out:cubic-bezier(.16,1,.30,1);
  --liquid-ease-standard:cubic-bezier(.22,.61,.36,1);
  --liquid-ease-soft:cubic-bezier(.25,.46,.45,.94);
  --liquid-motion-fast:220ms;
  --liquid-motion:420ms;
  --liquid-motion-slow:760ms;
  --liquid-parallax-x:0px;
  --liquid-parallax-y:0px;
  --liquid-scroll-shift:0px;
}

html.liquid-os{scroll-behavior:smooth}

/* The ambient scene is injected once by liquid-os.js. It uses transform-only
   motion for the large light fields so the page stays fluid on desktop and iOS. */
.liquid-ambient-scene{
  position:fixed;
  z-index:-3;
  inset:-18vmax;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  opacity:.92;
  transform:translate3d(var(--liquid-parallax-x),var(--liquid-parallax-y),0);
  transition:opacity var(--liquid-motion-slow) var(--liquid-ease-out);
}
.liquid-ambient-field{
  position:absolute;
  width:78vmax;
  aspect-ratio:1;
  border-radius:50%;
  will-change:transform;
  transform:translate3d(0,0,0);
  filter:saturate(118%);
}
.liquid-ambient-field.a{
  left:-12vmax;
  top:-18vmax;
  opacity:.42;
  background:radial-gradient(circle at 48% 46%,rgba(128,93,239,.40) 0 12%,rgba(105,79,218,.20) 34%,rgba(90,65,190,.08) 52%,transparent 70%);
  animation:liquidAmbientA 28s var(--liquid-ease-soft) infinite alternate;
}
.liquid-ambient-field.b{
  right:-17vmax;
  top:-8vmax;
  opacity:.36;
  background:radial-gradient(circle at 50% 50%,rgba(60,211,226,.34) 0 13%,rgba(48,169,193,.17) 34%,rgba(31,111,142,.065) 54%,transparent 72%);
  animation:liquidAmbientB 34s var(--liquid-ease-soft) infinite alternate;
}
.liquid-ambient-field.c{
  left:24%;
  bottom:-32vmax;
  opacity:.28;
  background:radial-gradient(circle at 50% 46%,rgba(244,88,183,.30) 0 10%,rgba(202,78,175,.13) 32%,rgba(130,66,160,.055) 53%,transparent 72%);
  animation:liquidAmbientC 39s var(--liquid-ease-soft) infinite alternate;
}
.liquid-ambient-field.d{
  right:18%;
  bottom:-22vmax;
  width:62vmax;
  opacity:.22;
  background:radial-gradient(circle at 50% 50%,rgba(105,229,239,.20),rgba(113,137,255,.10) 36%,transparent 70%);
  animation:liquidAmbientD 44s var(--liquid-ease-soft) infinite alternate;
}
.liquid-ambient-sheen{
  position:absolute;
  inset:0;
  opacity:.34;
  background:linear-gradient(112deg,transparent 17%,rgba(255,255,255,.018) 38%,rgba(255,255,255,.055) 49%,rgba(185,225,255,.024) 55%,transparent 72%);
  transform:translate3d(-28%,0,0) rotate(.001deg);
  will-change:transform;
  animation:liquidSheen 24s var(--liquid-ease-soft) infinite;
}
.liquid-ambient-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 26%,rgba(3,5,10,.10) 62%,rgba(3,5,10,.46) 100%);
}

@keyframes liquidAmbientA{
  0%{transform:translate3d(-3%,0,0) scale(1.02) rotate(-3deg)}
  45%{transform:translate3d(8%,10%,0) scale(1.10) rotate(3deg)}
  100%{transform:translate3d(15%,2%,0) scale(1.04) rotate(8deg)}
}
@keyframes liquidAmbientB{
  0%{transform:translate3d(5%,-2%,0) scale(1.05) rotate(4deg)}
  52%{transform:translate3d(-10%,12%,0) scale(1.13) rotate(-3deg)}
  100%{transform:translate3d(-16%,4%,0) scale(1.02) rotate(-8deg)}
}
@keyframes liquidAmbientC{
  0%{transform:translate3d(-8%,8%,0) scale(1.03)}
  48%{transform:translate3d(10%,-6%,0) scale(1.12)}
  100%{transform:translate3d(19%,-12%,0) scale(1.05)}
}
@keyframes liquidAmbientD{
  0%{transform:translate3d(7%,6%,0) scale(.98)}
  50%{transform:translate3d(-11%,-8%,0) scale(1.10)}
  100%{transform:translate3d(-4%,-15%,0) scale(1.02)}
}
@keyframes liquidSheen{
  0%{transform:translate3d(-34%,-2%,0) rotate(-3deg)}
  50%{transform:translate3d(8%,2%,0) rotate(2deg)}
  100%{transform:translate3d(34%,-1%,0) rotate(-2deg)}
}

/* One motion language for normal StreamSphere UI. Existing feature logic is left
   alone; this only softens the visual response. */
/* Every normal UI transition uses the same soft deceleration curve. This does
   not replace animation keyframes, so orbit/spinner timing stays intentional. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) *{
  transition-timing-function:var(--liquid-ease-out)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  a,button,.btn,input,textarea,select,.glass,.viewer-panel,.rework-tool-card,.rework-viewer-community-card,
  .network-card,.news-card,.owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card,
  .floating-chip,.status-pill,.count-pill,.liquid-app-dock,#viewerAppDock
){
  transition-timing-function:var(--liquid-ease-out)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  a,button,.btn,.icon-btn,.topbar-icon-button,.rework-tool-card,.rework-viewer-community-card,.network-card,.news-card,
  .owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card,.floating-chip,.status-pill,.count-pill
){
  transition-duration:var(--liquid-motion)!important;
}

html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(input,textarea,select){
  transition:border-color var(--liquid-motion-fast) var(--liquid-ease-out),box-shadow var(--liquid-motion-fast) var(--liquid-ease-out),background var(--liquid-motion) var(--liquid-ease-out)!important;
}

@media (hover:hover) and (pointer:fine){
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .rework-tool-card,.rework-viewer-community-card,.network-card,.news-card,.owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card
  ){
    transition:transform 520ms var(--liquid-ease-out),border-color 420ms var(--liquid-ease-out),box-shadow 520ms var(--liquid-ease-out),background 520ms var(--liquid-ease-out)!important;
    will-change:transform;
  }
  html.liquid-os:not(.liquid-standalone) body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .rework-tool-card,.rework-viewer-community-card,.network-card,.news-card,.owner-build-card,.owner-control-card,.gateway-door,.gateway-moment-card
  ):hover{
    transform:translate3d(0,-5px,0) scale(1.004)!important;
  }
}

/* Gentle scroll-in staging for major sections. JS only adds these classes when
   reduced motion is not requested. */
.liquid-reveal{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.995);
  transition:opacity 820ms var(--liquid-ease-out),transform 880ms var(--liquid-ease-out)!important;
}
.liquid-reveal.liquid-reveal-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Existing ambient page layers remain alive, but slower and softer so they blend
   into the shared scene instead of competing with it. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(.aurora,.mist,.bg-wash,.viewer-bg,.gateway-bg,.mod-bg,.pulse-bg){
  animation-duration:70s!important;
  animation-timing-function:var(--liquid-ease-soft)!important;
}

/* Installed iPhone/iPad mode is intentionally slower and lighter for battery. */
html.liquid-standalone .liquid-ambient-scene{opacity:.78}
html.liquid-standalone .liquid-ambient-field.a{animation-duration:36s}
html.liquid-standalone .liquid-ambient-field.b{animation-duration:42s}
html.liquid-standalone .liquid-ambient-field.c{animation-duration:48s;opacity:.22}
html.liquid-standalone .liquid-ambient-field.d{display:none}
html.liquid-standalone .liquid-ambient-sheen{animation-duration:32s;opacity:.22}

@media(max-width:760px){
  .liquid-ambient-scene{inset:-26vmax;opacity:.76}
  .liquid-ambient-field{width:96vmax}
  .liquid-ambient-sheen{opacity:.20}
}

@media(prefers-reduced-motion:reduce){
  .liquid-ambient-field,.liquid-ambient-sheen{animation:none!important;transform:none!important}
  .liquid-ambient-scene{transform:none!important}
  .liquid-reveal,.liquid-reveal.liquid-reveal-visible{opacity:1!important;transform:none!important;transition:none!important}
}


/* ============================================================
   StreamSphere Liquid OS · V10 Refraction + Navigation Motion
   ============================================================ */

/* Cleaner, more translucent material. The moving scene now reads through the
   glass instead of being buried under dark card fills. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .glass,.viewer-panel,.featured-live-shell,.viewer-discover-spotlight,.viewer-quest-hero,.viewer-leaderboard-panel,
  .viewer-profile-shell,.viewer-events-preview-panel,.rework-tool-card,.rework-viewer-community-card,.live-watch-shell,
  .form-card,.glow-card,.steam-link-card,.sponsor-layout,.creator-ticket-shell,.pulse-hero,.pulse-panel,.pulse-live-card,
  .mod-panel,.mod-workspace,.network-panel,.network-card,.news-wire-panel,.news-card,.streamer-loading,
  .owner-hq-hero,.owner-hq-panel,.owner-build-card,.owner-control-card,.owner-wire-card,.owner-principle-card,
  .gateway-door,.gateway-spotlight,.gateway-quest-preview,.gateway-leaderboard-preview,.gateway-trust-strip,.gateway-moment-card,.gateway-final-cta,
  .hero-visual,.block,.collab-chat-panel,.collab-discovery,.collab-game-library,.creator-ticket-conversation,.sponsorship-section,
  .mod-workbench,.mod-rail,.mod-command-bar,.mod-hero-status,.network-pulse,.your-network-panel,.network-search-controls,
  .news-wire-hero,.news-wire-controls,.news-wire-pinned,.owner-hq-console,.owner-live-deck,.owner-build-board,
  .owner-platform-deck,.owner-story,.owner-private-command,.owner-creator-deck,.owner-page-editor-panel
){
  background:
    linear-gradient(145deg,rgba(255,255,255,.070) 0%,rgba(255,255,255,.020) 23%,rgba(255,255,255,.006) 60%,rgba(255,255,255,.025) 100%),
    var(--liquid-surface)!important;
}

/* The background is a slow color field rather than visible looping blobs. */
.liquid-ambient-scene{
  inset:-24vmax;
  opacity:.98;
}
.liquid-ambient-field{
  width:86vmax;
  filter:blur(10px) saturate(125%);
}
.liquid-ambient-field.a{
  opacity:.38;
  animation-duration:52s;
  background:radial-gradient(circle at 48% 46%,rgba(125,95,246,.38) 0 11%,rgba(113,83,228,.19) 33%,rgba(73,58,176,.07) 54%,transparent 72%);
}
.liquid-ambient-field.b{
  opacity:.34;
  animation-duration:61s;
  background:radial-gradient(circle at 50% 50%,rgba(68,216,229,.31) 0 12%,rgba(52,176,203,.15) 34%,rgba(32,108,147,.055) 55%,transparent 73%);
}
.liquid-ambient-field.c{
  opacity:.25;
  animation-duration:69s;
  background:radial-gradient(circle at 50% 46%,rgba(239,104,191,.27) 0 10%,rgba(196,83,178,.12) 32%,rgba(120,63,155,.045) 55%,transparent 73%);
}
.liquid-ambient-field.d{
  opacity:.20;
  animation-duration:78s;
}
.liquid-ambient-prism,
.liquid-ambient-ribbon{
  position:absolute;
  pointer-events:none;
  will-change:transform;
  mix-blend-mode:screen;
}
.liquid-ambient-prism{
  left:15%;
  top:3%;
  width:92vmax;
  height:68vmax;
  opacity:.20;
  border-radius:44% 56% 61% 39% / 48% 38% 62% 52%;
  background:
    radial-gradient(ellipse at 24% 42%,rgba(135,112,255,.32),transparent 32%),
    radial-gradient(ellipse at 68% 38%,rgba(92,226,235,.25),transparent 31%),
    radial-gradient(ellipse at 57% 74%,rgba(255,125,198,.17),transparent 33%);
  filter:blur(46px) saturate(125%);
  animation:liquidPrismDrift 74s cubic-bezier(.42,0,.26,1) infinite alternate;
}
.liquid-ambient-ribbon{
  left:-18%;
  top:37%;
  width:142%;
  height:34%;
  opacity:.15;
  border-radius:50%;
  background:linear-gradient(102deg,transparent 5%,rgba(104,211,239,.09) 28%,rgba(144,108,255,.22) 49%,rgba(250,121,193,.10) 68%,transparent 93%);
  filter:blur(54px);
  animation:liquidRibbonDrift 88s cubic-bezier(.42,0,.24,1) infinite alternate;
}
@keyframes liquidPrismDrift{
  0%{transform:translate3d(-8%,-5%,0) rotate(-8deg) scale(.94)}
  35%{transform:translate3d(2%,7%,0) rotate(-2deg) scale(1.03)}
  68%{transform:translate3d(8%,-1%,0) rotate(4deg) scale(1.08)}
  100%{transform:translate3d(-1%,10%,0) rotate(8deg) scale(.99)}
}
@keyframes liquidRibbonDrift{
  0%{transform:translate3d(-8%,-12%,0) rotate(-8deg) scale(1.02)}
  50%{transform:translate3d(4%,6%,0) rotate(-2deg) scale(1.08)}
  100%{transform:translate3d(10%,-3%,0) rotate(5deg) scale(1.02)}
}

/* Smooth top navigation. JS moves one translucent lens between the current and
   hovered menu item, which avoids the old snap from one active background to another. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
  .gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar
){
  background:
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.018) 38%,rgba(255,255,255,.007)),
    rgba(10,13,23,.30)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 70px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(48px) saturate(190%)!important;
  -webkit-backdrop-filter:blur(48px) saturate(190%)!important;
  transition:background 720ms var(--liquid-ease-out),border-color 720ms var(--liquid-ease-out),box-shadow 720ms var(--liquid-ease-out),transform 720ms var(--liquid-ease-out)!important;
}

.liquid-nav-motion{
  position:relative!important;
  isolation:isolate;
}
.liquid-nav-motion>.liquid-nav-lens{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:var(--liquid-nav-lens-w,0px);
  height:var(--liquid-nav-lens-h,0px);
  border:1px solid rgba(255,255,255,.135);
  border-radius:13px;
  opacity:var(--liquid-nav-lens-opacity,0);
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 0%,rgba(255,255,255,.15),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.032));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(0,0,0,.16),0 0 26px rgba(123,103,255,.035);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  transform:translate3d(var(--liquid-nav-lens-x,0px),var(--liquid-nav-lens-y,0px),0);
  transition:
    transform 620ms cubic-bezier(.16,1,.30,1),
    width 620ms cubic-bezier(.16,1,.30,1),
    height 620ms cubic-bezier(.16,1,.30,1),
    opacity 280ms ease,
    background 620ms ease;
}
.liquid-nav-motion>:is(a,button):not(.liquid-nav-lens){
  position:relative;
  z-index:1;
  transform:translate3d(0,0,0);
  transition:color 460ms var(--liquid-ease-out),transform 520ms var(--liquid-ease-out),opacity 460ms var(--liquid-ease-out)!important;
}
.liquid-nav-motion>:is(a,button):not(.liquid-nav-lens):hover{
  transform:translate3d(0,-1px,0);
}
.liquid-nav-motion>:is(a,button).active,
.liquid-nav-motion>:is(a,button).is-active{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
}

/* Home page gateway navigation joins the same liquid segmented-control recipe. */
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .gateway-nav{
  padding:4px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:17px!important;
  background:rgba(4,6,12,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) .gateway-nav>a{
  border-radius:13px!important;
}

/* Installed app keeps the refraction, but cuts one large moving layer to save GPU. */
html.liquid-standalone .liquid-ambient-prism{opacity:.13;animation-duration:96s}
html.liquid-standalone .liquid-ambient-ribbon{display:none}

/* ============================================================
   AFTERDARK V10 · festival home viewport fit
   The shell owns the viewport; the content area scrolls only when it truly needs to.
   ============================================================ */
.afterdark-site.active{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100svh;
  overflow:hidden;
}
.afterdark-site.active>.ad-header{
  flex:0 0 auto;
  width:100%;
}
.afterdark-site.active>.ad-main{
  flex:1 1 auto;
  min-height:0;
  width:min(1480px,calc(100% - clamp(28px,4vw,68px)));
  margin:0 auto;
  padding:clamp(18px,2.5vh,34px) 0 clamp(90px,11vh,118px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
}
.afterdark-site .ad-panel[data-ad-panel="festival"].active{
  min-height:100%;
  display:flex;
  align-items:center;
}
.afterdark-site .ad-panel[data-ad-panel="festival"] .ad-festival-hero{
  width:100%;
  min-height:0;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4vw,64px);
}
.afterdark-site .ad-panel[data-ad-panel="festival"] .ad-mainstage-wrap{
  width:100%;
  max-width:900px;
  min-width:0;
  justify-self:end;
}
.afterdark-site .ad-panel[data-ad-panel="festival"] .ad-stage-scene{
  height:clamp(420px,58vh,590px);
}
.afterdark-site .ad-panel[data-ad-panel="festival"] .ad-hero-copy h1{
  font-size:clamp(54px,6.2vw,106px);
}

@media(max-height:820px) and (min-width:1181px){
  .afterdark-site.active>.ad-main{padding-top:16px;padding-bottom:82px}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-stage-scene{height:clamp(390px,54vh,455px)}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-hero-copy h1{margin:12px 0 16px;font-size:clamp(50px,5.4vw,88px)}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-hero-copy p{font-size:13px;line-height:1.6}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-hero-actions{margin-top:18px}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-mini-stats{margin-top:20px}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-pass-glance{margin-top:14px}
}

@media(max-width:1180px){
  .afterdark-site .ad-panel[data-ad-panel="festival"].active{display:block;min-height:0}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-festival-hero{grid-template-columns:1fr;gap:34px}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-mainstage-wrap{justify-self:center;margin-inline:auto}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-stage-scene{height:clamp(430px,60vw,560px)}
}

@media(max-width:760px){
  .afterdark-site.active>.ad-main{
    width:calc(100% - 24px);
    padding:22px 0 104px;
    overflow-y:auto;
  }
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-festival-hero{gap:28px}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-hero-copy h1{font-size:clamp(52px,17vw,86px)}
  .afterdark-site .ad-panel[data-ad-panel="festival"] .ad-stage-scene{height:clamp(390px,118vw,500px)}
}

@media(prefers-reduced-motion:reduce){
  .liquid-ambient-prism,.liquid-ambient-ribbon{animation:none!important;transform:none!important}
  .liquid-nav-motion>.liquid-nav-lens{transition:none!important}
}

/* ============================================================
   V12 Global optimization profiles
   The selected mode is shared across every StreamSphere surface.
   ============================================================ */
.ss-performance-control{position:relative;display:flex;align-items:center;z-index:1900}
.ss-performance-trigger{
  min-height:42px;padding:0 13px;border:1px solid rgba(255,255,255,.13);border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),rgba(8,11,20,.28);
  color:#f6f8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;transition:transform .28s var(--liquid-ease-out),border-color .28s ease,background .28s ease
}
.ss-performance-trigger:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.24)}
.ss-performance-trigger>span{font-size:14px}.ss-performance-trigger>b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ss-performance-popover{
  position:absolute;right:0;top:calc(100% + 12px);width:min(390px,calc(100vw - 28px));padding:14px;border:1px solid rgba(255,255,255,.16);
  border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),rgba(8,10,18,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 80px rgba(0,0,0,.48);backdrop-filter:blur(38px) saturate(170%);-webkit-backdrop-filter:blur(38px) saturate(170%);
  z-index:2200
}
.ss-performance-popover[hidden]{display:none!important}
.ss-performance-popover header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:4px 4px 12px}
.ss-performance-popover header div{display:grid;gap:3px}.ss-performance-popover header span,.ss-performance-popover footer span{font-size:9px;letter-spacing:.18em;color:rgba(221,226,245,.56)}
.ss-performance-popover header b{font-size:15px}.ss-performance-popover header button{width:32px;height:32px;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;font-size:18px;cursor:pointer}
.ss-performance-options{display:grid;gap:7px}
.ss-performance-options>button{width:100%;display:grid;grid-template-columns:32px 1fr 12px;align-items:center;gap:10px;text-align:left;padding:11px;border:1px solid rgba(255,255,255,.075);border-radius:15px;background:rgba(255,255,255,.035);color:#f7f8ff;font:inherit;cursor:pointer;transition:transform .24s var(--liquid-ease-out),background .24s ease,border-color .24s ease}
.ss-performance-options>button:hover{transform:translateY(-1px);background:rgba(255,255,255,.065)}
.ss-performance-options>button.active{border-color:rgba(112,224,239,.34);background:linear-gradient(120deg,rgba(112,224,239,.10),rgba(164,127,255,.08))}
.ss-performance-options>button>span{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:rgba(255,255,255,.06)}
.ss-performance-options>button>div{display:grid;gap:2px}.ss-performance-options>button b{font-size:12px}.ss-performance-options>button small{font-size:10px;line-height:1.35;color:rgba(221,226,245,.60)}
.ss-performance-options>button>i{width:8px;height:8px;border:1px solid rgba(255,255,255,.25);border-radius:50%}.ss-performance-options>button.active>i{background:#76e3ef;border-color:#76e3ef;box-shadow:0 0 14px rgba(118,227,239,.55)}
.ss-performance-popover footer{display:grid;grid-template-columns:auto auto;gap:3px 10px;align-items:center;margin-top:11px;padding:11px 5px 2px;border-top:1px solid rgba(255,255,255,.07)}
.ss-performance-popover footer>b{font-size:10px;letter-spacing:.08em;text-transform:uppercase}.ss-performance-popover footer>small{grid-column:1/-1;color:rgba(221,226,245,.56);font-size:10px}
.ss-performance-control.is-floating{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1900}
.ss-performance-control.is-floating .ss-performance-popover{position:fixed;right:max(18px,env(safe-area-inset-right));top:auto;bottom:76px}

/* Balanced preserves the design while doing substantially less compositing. */
html[data-performance="balanced"]{--liquid-blur:28px;--liquid-saturate:150%;--liquid-shadow:0 20px 58px rgba(0,0,0,.30),0 3px 12px rgba(0,0,0,.22)}
html[data-performance="balanced"] .liquid-ambient-field.d{display:none}
html[data-performance="balanced"] .liquid-ambient-prism{opacity:.28}
html[data-performance="balanced"] .liquid-ambient-sheen{opacity:.22;animation-duration:34s}
html[data-performance="balanced"] .liquid-ambient-field.a{animation-duration:38s}
html[data-performance="balanced"] .liquid-ambient-field.b{animation-duration:44s}
html[data-performance="balanced"] .liquid-ambient-field.c{animation-duration:52s}

/* Efficiency is intentionally real, not a cosmetic label. It removes the
   expensive decorative compositor work while preserving readable glass UI. */
html[data-performance="lite"]{--liquid-blur:8px;--liquid-saturate:112%;--liquid-shadow:0 12px 34px rgba(0,0,0,.24);scroll-behavior:auto}
html[data-performance="lite"] .liquid-ambient-scene{opacity:.50;transform:none!important}
html[data-performance="lite"] :is(.liquid-ambient-field.b,.liquid-ambient-field.c,.liquid-ambient-field.d,.liquid-ambient-prism,.liquid-ambient-ribbon,.liquid-ambient-sheen){display:none!important}
html[data-performance="lite"] .liquid-ambient-field.a{animation:none!important;transform:translate3d(4%,4%,0) scale(1.08)!important;opacity:.24}
html[data-performance="lite"] .liquid-nav-lens{display:none!important}
html[data-performance="lite"] .liquid-reveal{opacity:1!important;transform:none!important;transition:none!important}
html[data-performance="lite"] body.home-design:not(.afterdark-mode) :is(.glass,.viewer-panel,.rework-tool-card,.rework-viewer-community-card,.pulse-panel,.mod-panel,.network-panel,.network-card,.news-card,.streamer-loading,.owner-hq-hero,.owner-hq-panel,.ambassador-editor-card){
  backdrop-filter:blur(8px) saturate(112%)!important;-webkit-backdrop-filter:blur(8px) saturate(112%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--liquid-shadow)!important
}
html[data-performance="lite"] body.home-design:not(.afterdark-mode) :is(.aurora,.mist,.bg-wash,.viewer-bg){animation:none!important;filter:blur(90px)!important;opacity:.10!important}
html[data-performance="lite"] body.home-design:not(.afterdark-mode) :is(.featured-streamer-floater,.featured-streamer-glow,.creator-card-orbit,.creator-season-particle){animation:none!important}
html[data-performance="lite"] body.home-design:not(.afterdark-mode) :is(.glass,.viewer-panel,.rework-tool-card,.network-card,.news-card):hover{transform:none!important}

@media(max-width:760px){
  .ss-performance-trigger{min-width:44px;min-height:44px;padding:0 11px}.ss-performance-trigger>b{display:none}
  .ss-performance-control.is-floating{right:14px;bottom:calc(88px + env(safe-area-inset-bottom))}
  .ss-performance-control.is-floating .ss-performance-popover{right:14px;bottom:calc(142px + env(safe-area-inset-bottom));width:calc(100vw - 28px);max-height:min(600px,calc(100dvh - 170px));overflow:auto}
  .ss-performance-popover{width:min(370px,calc(100vw - 22px))}
}

/* ============================================================
   Creator customization bridge
   Liquid OS used to override several saved creator choices because it loads
   after streamer.css. These final rules deliberately give the creator editor
   the last word on creator-owned surfaces.
   ============================================================ */
html.liquid-os body.streamer-page[data-creator-card-opacity="clear"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card,.creator-achievement-grid>span,.creator-page-team-members>a){background:rgba(255,255,255,.028)!important}
html.liquid-os body.streamer-page[data-creator-card-opacity="soft"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card,.creator-achievement-grid>span,.creator-page-team-members>a){background:rgba(16,20,34,.30)!important}
html.liquid-os body.streamer-page[data-creator-card-opacity="solid"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card,.creator-achievement-grid>span,.creator-page-team-members>a){background:rgba(11,14,24,.82)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
html.liquid-os body.streamer-page[data-creator-card-border="none"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-color:transparent!important}
html.liquid-os body.streamer-page[data-creator-card-border="defined"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-color:rgba(255,255,255,.28)!important}
html.liquid-os body.streamer-page[data-creator-card-border="glow"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-color:color-mix(in srgb,var(--creator-theme-first,#a98bff) 55%,rgba(255,255,255,.22))!important}
html.liquid-os body.streamer-page[data-creator-card-radius="rounded"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-radius:20px!important}
html.liquid-os body.streamer-page[data-creator-card-radius="pillowy"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-radius:30px!important}
html.liquid-os body.streamer-page[data-creator-card-radius="square"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.ambassador-link-card,.creator-update-card){border-radius:8px!important}
html.liquid-os body.streamer-page[data-creator-card-shadow="none"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.creator-update-card){box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important}
html.liquid-os body.streamer-page[data-creator-card-shadow="deep"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.creator-update-card){box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 70px rgba(0,0,0,.48)!important}
html.liquid-os body.streamer-page[data-creator-card-glow="soft"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-featured-game-card){box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 28px color-mix(in srgb,var(--creator-theme-first,#a98bff) 18%,transparent)!important}
html.liquid-os body.streamer-page[data-creator-card-glow="bright"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-featured-game-card){box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 46px color-mix(in srgb,var(--creator-theme-first,#a98bff) 34%,transparent)!important}
html.liquid-os body.streamer-page[data-creator-hover="none"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-featured-game-card,.ambassador-link-card):hover{transform:none!important;filter:none!important}
html.liquid-os body.streamer-page[data-creator-motion="reduced"] :is(.liquid-ambient-field,.liquid-ambient-prism,.liquid-ambient-ribbon,.liquid-ambient-sheen){animation-duration:70s!important}
html.liquid-os body.streamer-page[data-creator-motion="off"] :is(.liquid-ambient-field,.liquid-ambient-prism,.liquid-ambient-ribbon,.liquid-ambient-sheen){animation:none!important;transform:none!important}
html.liquid-os body.streamer-page[data-creator-background="clean"] .liquid-ambient-scene{opacity:.20!important}
html.liquid-os body.streamer-page[data-creator-background="grid"] .liquid-ambient-scene,html.liquid-os body.streamer-page[data-creator-background="stars"] .liquid-ambient-scene{opacity:.38!important}
html.liquid-os body.streamer-page[data-creator-background="rain"] .liquid-ambient-scene,html.liquid-os body.streamer-page[data-creator-background="particles"] .liquid-ambient-scene,html.liquid-os body.streamer-page[data-creator-background="city"] .liquid-ambient-scene{opacity:.32!important}

/* Owner presets must remain visually distinct even under the shared Liquid OS. */
html.liquid-os body.platform-owner-page .owner-hq-shell[data-owner-style="studio"] .owner-hq-hero{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(126,105,210,.10)),rgba(14,17,28,.40)!important}
html.liquid-os body.platform-owner-page .owner-hq-shell[data-owner-style="neon"] .owner-hq-hero{border-color:rgba(101,229,239,.32)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 90px rgba(101,229,239,.10),0 28px 90px rgba(0,0,0,.38)!important}
html.liquid-os body.platform-owner-page .owner-hq-shell[data-owner-style="clean"] .owner-hq-hero{background:rgba(14,17,27,.34)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 22px 64px rgba(0,0,0,.28)!important}

.creator-profile-note p{margin:10px 0 0;color:rgba(222,226,244,.68);font-size:12px;line-height:1.6}

html.liquid-os body.streamer-page[data-creator-cards="soft"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.creator-update-card){border-radius:22px!important;border-color:transparent!important}
html.liquid-os body.streamer-page[data-creator-cards="outline"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.creator-update-card){background:transparent!important;border-color:color-mix(in srgb,var(--creator-theme-first) 31%,transparent)!important;box-shadow:none!important}
html.liquid-os body.streamer-page[data-creator-cards="sharp"] :is(.streamer-stat,.viewer-now-card,.streamer-giveaway-card,.creator-schedule-grid article,.creator-goals-grid article,.creator-featured-game-card,.ambassador-about-card,.creator-update-card){border-radius:7px!important}
@media(max-width:760px){
  .ss-performance-control:not(.is-floating){position:fixed!important;right:14px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;z-index:1900!important}
  .ss-performance-control:not(.is-floating) .ss-performance-popover{position:fixed!important;right:14px!important;left:auto!important;top:auto!important;bottom:calc(142px + env(safe-area-inset-bottom))!important;width:calc(100vw - 28px)!important;max-height:min(600px,calc(100dvh - 170px));overflow:auto}
}
@media(max-width:1120px){
  .performance-panel{z-index:4700!important;top:calc(env(safe-area-inset-top) + 72px)!important;right:10px!important;left:auto!important;max-height:calc(100dvh - env(safe-area-inset-top) - 92px);overflow:auto}
}