/* 4thPeriod Liquid Glass. Loaded last on every page: clear layered glass over a soft ambient color field,
   specular rims, capsule controls, spring motion. Light + dark. Honors reduced transparency/motion/contrast. */
:root{
  --lg-tint:rgba(255,255,255,.46);--lg-tint-2:rgba(255,255,255,.3);--lg-tint-3:rgba(255,255,255,.62);
  --lg-blur:blur(24px) saturate(185%);
  --lg-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.38);
  --lg-drop:0 18px 44px -18px rgba(20,30,70,.32),0 3px 10px -4px rgba(20,30,70,.14);
  --lg-spec:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.14));
  --lg-accent:#0a84ff;--lg-accent-2:#5e5ce6;
  --surface:rgba(255,255,255,.55);--surface-2:rgba(255,255,255,.42);--surface-3:rgba(255,255,255,.62);--card:rgba(255,255,255,.4);
  --line:rgba(20,30,60,.1);--primary-c:rgba(255,255,255,.7);
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',ui-sans-serif,system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --lg-bg:radial-gradient(60vw 60vw at 8% 0%,#c9e4ff 0,transparent 60%),radial-gradient(55vw 55vw at 100% 12%,#ffd6ec 0,transparent 58%),radial-gradient(70vw 60vw at 50% 100%,#d9ccff 0,transparent 62%),radial-gradient(40vw 40vw at 85% 70%,#c7f5e6 0,transparent 60%),#eef1f7;
}
:root[data-theme=dark]{
  --lg-tint:rgba(40,42,52,.48);--lg-tint-2:rgba(255,255,255,.07);--lg-tint-3:rgba(60,62,74,.66);
  --lg-rim:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,255,255,.09);
  --lg-drop:0 18px 44px -16px rgba(0,0,0,.6),0 3px 10px -4px rgba(0,0,0,.4);
  --lg-spec:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05));
  --surface:rgba(44,46,56,.55);--surface-2:rgba(255,255,255,.08);--surface-3:rgba(255,255,255,.14);--card:rgba(40,42,52,.45);--line:rgba(255,255,255,.08);--primary-c:rgba(255,255,255,.16);
  --lg-bg:radial-gradient(60vw 60vw at 8% 0%,#1d2f5c 0,transparent 60%),radial-gradient(55vw 55vw at 100% 12%,#4a1f45 0,transparent 58%),radial-gradient(70vw 60vw at 50% 100%,#2c2560 0,transparent 62%),radial-gradient(40vw 40vw at 85% 70%,#0f3b3a 0,transparent 60%),#08090d;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --lg-tint:rgba(40,42,52,.48);--lg-tint-2:rgba(255,255,255,.07);--lg-tint-3:rgba(60,62,74,.66);
  --lg-rim:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,255,255,.09);
  --lg-drop:0 18px 44px -16px rgba(0,0,0,.6),0 3px 10px -4px rgba(0,0,0,.4);
  --lg-spec:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05));
  --surface:rgba(44,46,56,.55);--surface-2:rgba(255,255,255,.08);--surface-3:rgba(255,255,255,.14);--card:rgba(40,42,52,.45);--line:rgba(255,255,255,.08);--primary-c:rgba(255,255,255,.16);
  --lg-bg:radial-gradient(60vw 60vw at 8% 0%,#1d2f5c 0,transparent 60%),radial-gradient(55vw 55vw at 100% 12%,#4a1f45 0,transparent 58%),radial-gradient(70vw 60vw at 50% 100%,#2c2560 0,transparent 62%),radial-gradient(40vw 40vw at 85% 70%,#0f3b3a 0,transparent 60%),#08090d;
}}
html{background:var(--lg-bg) fixed}
body{background:transparent}
html:not(.walled) body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;background:var(--lg-bg);animation:lgDrift 38s ease-in-out infinite alternate}
@keyframes lgDrift{to{transform:translate3d(-3vmax,2vmax,0) scale(1.06) rotate(2deg)}}

/* ---- the material ---- */
.bar,.tabs,.card,.tile,.prow,.tp,.modal,.menu,.notice,.nudge,.panel,header .hd,.sc,.ach,.rep,.gate,#pill,#bar,.toast,.chat-glass,.posts > *,.inst,.cont,.pe-prev{
  background-color:var(--lg-tint)!important;background-image:var(--lg-spec)!important;
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  box-shadow:var(--lg-rim),var(--lg-drop)!important;border-color:transparent!important}
.bar{background-color:var(--lg-tint-2)!important;box-shadow:var(--lg-rim)!important;margin:10px auto 0;width:min(1200px,calc(100% - 20px));border-radius:28px;top:10px}
.bar.scrolled{background-color:var(--lg-tint)!important;box-shadow:var(--lg-rim),var(--lg-drop)!important}
.card{border-radius:34px}
.tile,.prow,.tp,.panel,.sc,.ach,.rep{border-radius:28px}
.modal,.gate{border-radius:38px;animation:lgMat .62s var(--spring-bouncy) both}
@keyframes lgMat{from{opacity:0;transform:translateY(18px) scale(.9);filter:blur(12px)}}
.menu{border-radius:26px;animation:lgMenu .5s var(--spring-bouncy) both}
@keyframes lgMenu{from{opacity:0;transform:scale(.86) translateY(-8px);filter:blur(8px)}}
.toast{color:var(--ink)!important;border-radius:999px!important}
.toast button{background:var(--lg-accent)!important;color:#fff!important}
.about{background:linear-gradient(140deg,rgba(18,20,34,.82),rgba(40,30,80,.78))!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--lg-drop)!important}
.scrim{background:rgba(10,14,30,.22)!important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}

/* ---- capsule controls ---- */
.btn,.chip .who,.seg button,.tabs a,.tabs button,#bar .btn,.wm-btn{border-radius:999px!important}
.btn,.chip .who{background-color:var(--lg-tint-3)!important;background-image:var(--lg-spec)!important;box-shadow:var(--lg-rim),0 4px 12px -6px rgba(20,30,70,.3)!important;
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);transition:transform .55s var(--spring-bouncy),background-color .2s,box-shadow .2s!important}
.btn:active,.chip .who:active{transform:scale(.93)!important;transition-duration:90ms!important}
.btn.primary,.btn.dark{background-color:var(--lg-accent)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -10px rgba(10,132,255,.7)!important}
@media (hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.04)}.btn.primary:hover,.btn.dark:hover{filter:brightness(1.08)}}
.btn.tonal{background-color:rgba(10,132,255,.14)!important;color:var(--lg-accent)!important}
.tabs{border-radius:999px;padding:5px}
.tabs .ind{background:var(--lg-tint-3)!important;background-image:var(--lg-spec)!important;box-shadow:var(--lg-rim),0 6px 16px -8px rgba(20,30,70,.45)!important;border-radius:999px!important;top:5px}
.tabs button[aria-selected=true]{background:var(--lg-tint-3)!important;box-shadow:var(--lg-rim)!important}
.seg button{background:var(--lg-tint-2)!important;box-shadow:var(--lg-rim)}
.seg button[aria-pressed=true]{background:var(--lg-accent)!important;color:#fff!important}
.field input,.field textarea,.field select,input[type=text],input[type=search],input[type=number],textarea,select{
  background:var(--lg-tint-2)!important;border-radius:20px!important;box-shadow:var(--lg-rim)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.field input:focus,.field textarea:focus,input:focus,textarea:focus{box-shadow:var(--lg-rim),0 0 0 3px rgba(10,132,255,.35)!important}
.modal .x{background:var(--lg-tint-3)!important;box-shadow:var(--lg-rim)}
:focus-visible{outline-color:var(--lg-accent)}
.card .thumb{border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.play,.tag{-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%)}
table{background:transparent!important}
th{background:transparent!important}
.tiles .tile:nth-child(1){background-color:rgba(10,132,255,.82)!important;color:#fff}
footer{opacity:.85}

/* ---- motion: cards lift and catch light ---- */
@media (hover:hover) and (pointer:fine){
  .card,.tile,.prow{transition:transform .6s var(--spring-bouncy),box-shadow .3s}
  .card:hover{transform:translateY(-6px) scale(1.012)}
}
.reveal{transition:opacity .6s ease,transform .8s var(--spring-bouncy),filter .6s ease!important}
.reveal:not(.in){filter:blur(6px)}

/* ---- accessibility ---- */
@media (prefers-reduced-transparency:reduce){
  :root{--lg-tint:rgba(250,251,253,.97);--lg-tint-2:rgba(245,246,250,.97);--lg-tint-3:rgba(255,255,255,.98)}
  :root[data-theme=dark]{--lg-tint:rgba(28,29,34,.97);--lg-tint-2:rgba(34,35,40,.97);--lg-tint-3:rgba(44,46,52,.98)}
  .bar,.tabs,.card,.tile,.prow,.tp,.modal,.menu,.notice,.btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){.bar,.card,.tile,.modal,.menu,.btn{box-shadow:0 0 0 1.5px currentColor!important}}
@media (prefers-reduced-motion:reduce){html:not(.walled) body::before{animation:none}.reveal:not(.in){filter:none}}