@media screen {
  :root{
    color-scheme:dark;
    --bg:#0e141b;
    --night:#0e141b;
    --surface:#151d27;
    --surface2:#101821;
    --paper:#151d27;
    --edge:#344150;
    --border:#344150;
    --text:#f4f7fa;
    --ink:#f4f7fa;
    --muted:#b8c2cd;
    --sub:#c2cbd4;
    --faint:#8e9baa;
    --accent:#c58aa8;
    --accent2:#9d86c9;
    --rose:#c58aa8;
    --plum:#73556f;
    --violet:#9d86c9;
    --mint:#8fd5c0
  }

  body{
    position:relative;
    background:
      radial-gradient(900px 520px at 14% 6%,rgba(124,76,113,.16),transparent 60%),
      radial-gradient(820px 500px at 88% 18%,rgba(72,76,119,.13),transparent 62%),
      radial-gradient(700px 440px at 52% 88%,rgba(107,66,95,.09),transparent 66%),
      linear-gradient(180deg,#101720 0%,#0b1118 58%,#0e141b 100%) !important;
    color:var(--text);
    overflow-x:hidden
  }

  body::before,
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0
  }

  body::before{
    opacity:.36;
    background-image:
      radial-gradient(circle at 8% 16%,rgba(255,255,255,.88) 0 1px,transparent 1.6px),
      radial-gradient(circle at 18% 72%,rgba(211,191,212,.72) 0 1px,transparent 1.8px),
      radial-gradient(circle at 29% 34%,rgba(191,201,230,.62) 0 .8px,transparent 1.6px),
      radial-gradient(circle at 42% 12%,rgba(255,255,255,.70) 0 .9px,transparent 1.6px),
      radial-gradient(circle at 54% 61%,rgba(207,167,193,.62) 0 1px,transparent 1.8px),
      radial-gradient(circle at 67% 29%,rgba(202,195,225,.65) 0 .8px,transparent 1.6px),
      radial-gradient(circle at 78% 82%,rgba(245,247,250,.72) 0 .9px,transparent 1.7px),
      radial-gradient(circle at 91% 46%,rgba(196,158,186,.62) 0 1px,transparent 1.8px);
    background-size:380px 330px,450px 400px,540px 490px,620px 560px,490px 440px,590px 520px,710px 640px,780px 700px;
    animation:space-dust-drift 38s linear infinite alternate
  }

  body::after{
    opacity:.22;
    background:
      radial-gradient(440px 180px at 23% 30%,rgba(137,77,121,.18),transparent 72%),
      radial-gradient(520px 210px at 75% 58%,rgba(92,79,145,.13),transparent 74%),
      radial-gradient(340px 150px at 58% 14%,rgba(194,137,168,.09),transparent 76%);
    filter:blur(12px);
    animation:nebula-breathe 14s ease-in-out infinite alternate
  }

  body > *{position:relative;z-index:1}
  header:not(.top){background:linear-gradient(rgba(14,20,27,.94),rgba(14,20,27,.78))!important}

  .card,.paper,.selector,.documents,.panel,.additional{
    background:linear-gradient(145deg,rgba(23,31,42,.92),rgba(15,22,30,.95))!important;
    border-color:rgba(119,135,153,.30)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)
  }

  a{color:#d9c5d5}
  .roleTop span,.entry small{color:var(--muted)}
  .eyebrow,.feedback{color:#9fd8c7!important}
  .section-tag,.type,.role-title{color:#d6a9c1!important}

  .role,.tool,.document-links a{
    border-color:rgba(152,167,184,.34)!important;
    background:rgba(30,40,53,.80)!important;
    color:#f4f7fa!important;
    box-shadow:none!important
  }
  .role:hover,.tool:hover,.document-links a:hover{background:rgba(42,53,68,.92)!important}
  .role[aria-pressed="true"]{
    background:linear-gradient(135deg,#b27e9a,#8f7bb8)!important;
    color:#0d141b!important;
    border-color:#d2b2c5!important
  }

  .button,.tool,.role,.document-links a{
    transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease
  }
  .button:hover,.tool:hover,.document-links a:hover{transform:translateY(-1px)}

  .io-panel{background:rgba(14,20,27,.97)!important;border-color:rgba(157,134,201,.28)!important}
  .io-head{background:linear-gradient(110deg,#253041,#33263b)!important}
  .io-launch-label{background:#202a36!important;border-color:#657487!important}
  .io-launch:hover .io-launch-label{background:#2b3746!important}
  .io-more{display:block;margin-top:8px;padding:5px 10px;border:1px solid #7f708f;border-radius:8px;background:#30263a;color:#f7f8fa;cursor:pointer}
  .io-uses-mascot{bottom:88px}
  .io-uses-mascot .io-launch{display:none}
  .io-uses-mascot .io-panel{height:min(550px,calc(100dvh - 110px))}

  @keyframes space-dust-drift{
    0%{transform:translate3d(0,0,0);opacity:.30}
    50%{opacity:.42}
    100%{transform:translate3d(-12px,8px,0);opacity:.34}
  }
  @keyframes nebula-breathe{
    from{transform:scale(1);opacity:.16}
    to{transform:scale(1.028);opacity:.25}
  }
}

@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none!important}
}

@media print{
  .io{display:none!important}
  body::before,body::after{display:none!important}
}