@keyframes hero-line-rise{
    0%{
        opacity:0;
        transform:translateY(1.35rem)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes hero-badge-rise{
    0%{
        opacity:0;
        transform:translateY(1rem)
    }
    to{
        opacity:.92;
        transform:translateY(0)
    }
}
@keyframes hero-cloud-scroll{
    0%{
        background-position:0 0
    }
    to{
        background-position:2048px 0
    }
}
@keyframes water-translate{
    0%{
        background-position:0 0
    }
    to{
        background-position:19rem 19rem
    }
}
@keyframes hero-swim{
    0%,to{
        transform:rotate(-1deg) translateY(0) translateX(0)
    }
    50%{
        transform:rotate(2deg) translateY(-3px) translateX(15px)
    }
}
@keyframes hero-mar-wave-drift{
    0%{
        transform:translateX(0)
    }
    to{
        transform:translateX(-50%)
    }
}
:root{
    --dark-background-color:#212035;
    --background-color-reverse:#212035;
    --background-color-reverse-hover:#444268;
    --background-color:#dadce1;
    --content-background-color:#f9f9f9;
    --text-color:#39383e;
    --text-color-active:#4c7dca;
    --text-color-reverse:#fff;
    --text-link-color:#5e57d7;
    --text-link-color-hover:#7b74ec;
    --hero-bg-top:#268afe;
    --hero-bg-bottom:#8ef1ff;
    --header-h:clamp(64px, 12vw, 88px);
    --hero-h:calc(100vh + 8rem);
    --hero-break:900px;
    --hero-blurb-shift-x:clamp(5rem, 14vw, 12rem);
    --radius-md:14px;
    --radius-lg:18px;
    --shadow-soft:0 4px 28px rgba(45, 43, 58, 0.06);
    --hairline:rgba(57, 56, 62, 0.06);
    --content-heading-icon-color:hsl(258, 6%, 44%);
    --font-content:"Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --btn-content-bg:#ffffff;
    --btn-content-fg:#1a73e8;
    --btn-content-fg-hover:#1557b0;
    --btn-content-bg-hover:#f8fafc;
    --btn-content-border:rgba(0, 0, 0, 0.16);
    --btn-content-border-hover:rgba(0, 0, 0, 0.24);
    --glass-header:linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    --glass-header-scrolled:linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)
}
*,::after,::before{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 12px)
}
body{
    margin:0;
    min-height:100vh;
    font-family:"Lexend",sans-serif;
    font-size:16px;
    color:var(--text-color);
    background-color:var(--background-color);
    transition:background-color .2s ease,color .2s ease
}
a{
    color:var(--text-link-color);
    text-decoration:none;
    transition:color .3s ease
}
a:hover,footer a:hover{
    color:var(--text-link-color-hover)
}
.fa,.fa-brands,.fa-classic,.fa-solid{
    display:inline-block;
    line-height:1;
    vertical-align:-.125em
}
.icon-text{
    display:inline-flex;
    align-items:center;
    gap:.5em
}
.icon-text .fa-fw{
    width:1.25em;
    text-align:center
}
.header-nav,.site-header{
    display:flex;
    align-items:center;
    flex-wrap:wrap
}
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    min-height:var(--header-h);
    justify-content:space-between;
    row-gap:12px;
    padding:12px clamp(16px,4vw,48px);
    background:var(--glass-header);
    backdrop-filter:blur(24px) saturate(1.15);
    -webkit-backdrop-filter:blur(24px) saturate(1.15);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:none;
    transition:background .28s ease,box-shadow .25s ease,border-color .25s ease
}
.site-header.is-scrolled{
    background:var(--glass-header-scrolled);
    backdrop-filter:blur(28px) saturate(1.12);
    -webkit-backdrop-filter:blur(28px) saturate(1.12);
    border-bottom-color:rgba(255,255,255,.14);
    box-shadow:0 8px 32px rgba(0,0,0,.06)
}
.header-nav a,.site-header .logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none
}
.site-header .logo{
    gap:10px;
    font-size:clamp(1.25rem,3.5vw,1.75rem);
    font-weight:600;
    letter-spacing:-.03em;
    color:#fff;
    text-shadow:0 1px 12px rgba(0,0,0,.35)
}
.logo .fa-cube{
    font-size:1.1em;
    opacity:.95
}
.header-nav{
    gap:clamp(8px,2vw,28px)
}
.header-nav a{
    gap:8px;
    color:rgba(255,255,255,.92);
    font-size:clamp(.9rem,2vw,1.15rem);
    font-weight:500;
    padding:8px 4px;
    border-radius:8px;
    transition:color .2s ease,background .2s ease;
    text-shadow:0 1px 10px rgba(0,0,0,.3)
}
.header-nav a .fa{
    font-size:.95em;
    opacity:.95
}
.header-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.12)
}
.hero-background{
    width:100%;
    height:var(--hero-h);
    min-height:640px;
    background-color:#3682e6;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch
}
@media (max-width:900px){
    .hero-background{
        height:calc(100vh + 4rem)
    }
}
.hero-vignette{
    position:absolute;
    inset:0;
    z-index:6;
    pointer-events:none;
    background-image:linear-gradient(80deg,rgba(2,20,35,.9),transparent 70%);
    mix-blend-mode:hard-light
}
@media (max-width:900px){
    .hero-vignette{
        background-image:linear-gradient(80deg,rgba(2,20,35,.9),transparent 60%)
    }
}
@media (max-width:640px){
    .hero-vignette{
        display:none
    }
}
.hero-blurb{
    position:absolute;
    left:50%;
    top:max(42%,calc(var(--header-h) + 1.75rem));
    transform:translate(calc(-50% - var(--hero-blurb-shift-x)),-50%);
    width:min(44%,38rem);
    max-width:38rem;
    margin-top:0;
    z-index:8;
    color:#fff;
    filter:drop-shadow(0 0 10px rgba(6,70,120,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.4))
}
@media (prefers-reduced-motion:reduce){
    .hero-blurb .hero-badge{
        animation:none;
        transform:none
    }
    .hero-blurb .lead,.hero-blurb h1{
        animation:none;
        opacity:1;
        transform:none
    }
    .hero-blurb .hero-badge{
        opacity:.92
    }
}
@media (max-width:900px){
    .hero-blurb{
        display:none
    }
}
.hero-badge,.hero-blurb h1{
    margin-bottom:1rem;
    opacity:0
}
.hero-blurb h1{
    animation:hero-line-rise .78s cubic-bezier(.22,1,.36,1) .14s forwards;
    font-family:"Lexend",sans-serif;
    font-size:2.5rem;
    font-weight:700;
    color:#fff;
    letter-spacing:-.05rem;
    line-height:1
}
.hero-blurb .lead{
    opacity:0;
    animation:hero-line-rise .78s cubic-bezier(.22,1,.36,1) .28s forwards;
    font-size:1.5rem;
    font-weight:400;
    color:#fff;
    line-height:1.35;
    margin:0
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.06em;
    animation:hero-badge-rise .75s cubic-bezier(.22,1,.36,1) .06s forwards
}
.hero-sky{
    width:100%;
    height:58%;
    flex-shrink:0;
    position:relative;
    z-index:1;
    background-image:linear-gradient(#268afe,#8ef1ff)
}
.hero-clouds-strip{
    width:100%;
    height:195px;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    background-image:url(https://backend.cobblemon.com/uploads/clouds_d97a15c39d.webp);
    background-repeat:repeat-x;
    background-position:0 50%;
    mix-blend-mode:screen;
    image-rendering:pixelated;
    box-shadow:0 4px 4px #828282;
    animation:hero-cloud-scroll 120s linear infinite
}
.hero-foreground{
    width:100%;
    height:42%;
    flex-shrink:0;
    position:relative;
    z-index:5;
    overflow:hidden;
    perspective:34vh;
    perspective-origin:center top
}
@media (max-width:900px){
    .hero-foreground{
        perspective:40vh
    }
}
.hero-foreground-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:linear-gradient(#c2f3ff,#268afe 10%,#8ef1ff);
    mix-blend-mode:overlay
}
.hero-foreground-water{
    height:100%;
    width:100%;
    background-image:url(https://backend.cobblemon.com/uploads/water_tile_a76abbc3c5.png);
    background-repeat:repeat;
    transform:scale(10) skewX(45deg) rotateX(85deg);
    transform-origin:top center;
    transform-style:preserve-3d;
    image-rendering:pixelated;
    animation:water-translate 20s linear infinite;
    will-change:background-position
}
.hero-lapras{
    position:absolute;
    width:min(468px,52vw);
    max-width:468px;
    bottom:clamp(28px,5vh,88px);
    right:clamp(5vw,9vw,14vw);
    z-index:7;
    pointer-events:none;
    image-rendering:pixelated;
    animation:hero-swim 1.9s ease-in-out infinite
}
.hero-lapras img,.update-banner-figure img{
    display:block;
    width:100%;
    height:auto
}
@media (max-width:1024px){
    .hero-lapras{
        bottom:0;
        right:10vw;
        animation:hero-swim-tablet 1.9s ease-in-out infinite
    }
    @keyframes hero-swim-tablet{
        0%,to{
            transform:scale(.9) rotate(-1deg) translateY(0) translateX(0)
        }
        50%{
            transform:scale(.9) rotate(2deg) translateY(-3px) translateX(15px)
        }
    }
}
@media (max-width:640px){
    .hero-lapras{
        right:-15vw;
        bottom:0;
        width:min(85vw,320px);
        animation:hero-swim-mobile 1.9s ease-in-out infinite
    }
    @keyframes hero-swim-mobile{
        0%,to{
            transform:scale(.75) rotate(-1deg) translateY(0) translateX(0)
        }
        50%{
            transform:scale(.75) rotate(2deg) translateY(-3px) translateX(15px)
        }
    }
}
@media (prefers-reduced-motion:reduce){
    .hero-blurb,.hero-clouds-strip,.hero-foreground-water,.hero-lapras{
        animation:none!important
    }
}
.hero-mar-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:9;
    height:clamp(64px,11vw,140px);
    line-height:0;
    pointer-events:none;
    overflow:hidden;
    filter:drop-shadow(0-3px 14px rgba(15,35,55,.12))
}
.hero-mar-wave-svg{
    display:block;
    width:200%;
    height:100%;
    max-width:none;
    shape-rendering:geometricPrecision;
    animation:hero-mar-wave-drift 22s linear infinite
}
@media (prefers-reduced-motion:reduce){
    .hero-mar-wave-svg{
        animation:none
    }
}
.footer-wave path,.hero-mar-wave-fill{
    fill:var(--content-background-color)
}
.hero-mar-wave-edge{
    fill:none;
    stroke:rgba(255,255,255,.45);
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke
}
.content{
    overflow-x:hidden
}
.content-container{
    padding:0 clamp(12px,3vw,28px) clamp(2rem,5vw,4rem);
    background:var(--content-background-color);
    color:var(--text-color);
    font-family:var(--font-content);
    font-feature-settings:"kern"1,"liga"1;
    -webkit-font-smoothing:antialiased;
    box-shadow:0-10px 32px -24px rgba(0,0,0,.06),0 12px 32px -28px rgba(0,0,0,.04)
}
.content-inner{
    max-width:1100px;
    margin:0 auto
}
.content-blurb{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,3rem)
}
.content-blurb h1{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:.5em;
    font-weight:600;
    font-size:clamp(1.85rem,4.5vw,2.85rem);
    letter-spacing:-.03em;
    margin:0 0 1rem;
    line-height:1.18;
    color:var(--text-color)
}
.content-blurb p{
    font-weight:400;
    font-size:clamp(1.02rem,2.2vw,1.22rem);
    margin:0 0 1rem;
    max-width:48rem;
    line-height:1.65;
    color:#46434c
}
.content-blurb.top{
    padding-bottom:clamp(2rem,5vw,3.5rem)
}
.content-blurb.bottom{
    margin-top:1rem;
    margin-bottom:0
}
.card h3 .fa,.section-icon,.update-banner h2 .fa{
    color:var(--content-heading-icon-color);
    font-size:.9em;
    line-height:1;
    flex-shrink:0
}
.content-container .btn-pill{
    font-family:inherit;
    font-weight:600;
    letter-spacing:-.02em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5em;
    border-radius:10px;
    padding:.75rem 2.25rem;
    font-size:clamp(.9rem,2vw,1.05rem);
    text-decoration:none;
    cursor:pointer;
    margin-top:1.25rem;
    background:var(--btn-content-bg);
    color:var(--btn-content-fg);
    border:1px solid var(--btn-content-border);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease,color .2s ease,border-color .2s ease
}
.content-container .btn-pill .fa,.content-container .card .button .fa{
    color:currentColor
}
.content-container .btn-pill:hover,.content-container .card .button.button--guide:hover{
    background:var(--btn-content-bg-hover);
    color:var(--btn-content-fg-hover);
    border-color:var(--btn-content-border-hover);
    box-shadow:0 2px 8px rgba(26,115,232,.12)
}
.content-container .btn-pill:active,.content-container .card .button.button--guide:active{
    transform:scale(.985)
}
.content-container .btn-pill:focus-visible,.content-container .card .button.button--guide:focus-visible{
    outline:2px solid var(--btn-content-fg);
    outline-offset:3px
}
.content-container .btn-pill.is-static{
    cursor:default;
    pointer-events:none
}
.content-container .btn-pill.secondary{
    margin-top:1rem;
    font-size:clamp(.82rem,1.85vw,.95rem);
    padding:.65rem 1.85rem
}
.content-container .btn-pill.btn-pill--lg{
    padding:.9rem 2.65rem;
    font-size:clamp(.98rem,2.15vw,1.12rem);
    border-radius:11px
}
.update-banner{
    text-align:center;
    padding:clamp(1.75rem,4vw,2.5rem) 1rem;
    background:linear-gradient(180deg,rgba(94,87,215,.08),rgba(249,249,249,0));
    border-radius:var(--radius-md)
}
.update-banner h2{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:.45em;
    font-weight:600;
    letter-spacing:-.025em;
    font-size:clamp(1.4rem,3.5vw,2.05rem);
    margin:0 0 .75rem;
    line-height:1.2
}
.update-banner p{
    font-weight:400;
    font-size:clamp(.98rem,2vw,1.12rem);
    max-width:42rem;
    margin:0 auto;
    line-height:1.62;
    color:#46434c
}
.update-banner-figure{
    margin:1.5rem auto 0;
    max-width:min(100%,750px);
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--content-background-color);
    box-shadow:var(--shadow-soft);
    border:1px solid var(--hairline)
}
.slideshow{
    padding:clamp(1.5rem,4vw,2.5rem)0
}
.slideshow-frame,.slideshow-viewport{
    background:var(--content-background-color)
}
.slideshow-frame{
    max-width:100%;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    border:1px solid var(--hairline)
}
.slideshow-viewport{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    min-height:200px;
    max-height:min(70vh,560px)
}
.slideshow-viewport::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:linear-gradient(to top,rgba(0,0,0,.55)0,rgba(0,0,0,.12) 55%,transparent 100%);
    pointer-events:none;
    z-index:1
}
.slideshow-viewport img{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    opacity:1;
    transition:opacity .4s ease
}
.slideshow-viewport img.is-fading{
    opacity:0
}
@media (prefers-reduced-motion:reduce){
    .slideshow-nav,.slideshow-viewport img{
        transition:none
    }
}
.slideshow-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:auto;
    min-width:2.5rem;
    height:auto;
    padding:.35rem .5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:4px;
    background:0 0;
    color:#fff;
    font-size:clamp(1.5rem,4vw,2rem);
    line-height:1;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
    transition:opacity .28s ease,transform .2s ease,color .2s ease
}
.slideshow-viewport:focus-within .slideshow-nav,.slideshow-viewport:hover .slideshow-nav{
    opacity:1;
    pointer-events:auto
}
.slideshow-nav:hover{
    color:#fff;
    transform:translateY(-50%) scale(1.08)
}
.slideshow-nav:active{
    transform:translateY(-50%) scale(.96)
}
.slideshow-prev{
    left:clamp(6px,2vw,14px)
}
.slideshow-next{
    right:clamp(6px,2vw,14px)
}
.slideshow-nav:focus-visible{
    opacity:1;
    pointer-events:auto;
    outline:2px solid rgba(255,255,255,.95);
    outline-offset:4px
}
@media (hover:none) and (pointer:coarse){
    .slideshow-nav{
        opacity:.9;
        pointer-events:auto
    }
}
.slideshow-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 12px 16px;
    margin:0;
    background:0 0;
    border:0
}
.slideshow-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,width .2s ease
}
.slideshow-dots button.is-active{
    background:#fff;
    transform:scale(1.15);
    width:22px;
    border-radius:999px
}
.slideshow-dots button:hover{
    background:rgba(255,255,255,.65)
}
.slideshow-dots button:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px
}
.card{
    display:grid;
    grid-template-columns:1fr;
    align-items:center;
    gap:clamp(1.5rem,4vw,2.5rem);
    padding:clamp(2rem,5vw,3rem)0;
    border-bottom:1px solid var(--hairline)
}
.card:last-child{
    border-bottom:none
}
@media (min-width:880px){
    .card{
        grid-template-columns:1fr 1fr
    }
    .card.card-reverse{
        direction:rtl
    }
    .card.card-reverse>*{
        direction:ltr
    }
}
.card-image{
    min-width:0
}
.card-visual{
    border-radius:var(--radius-md);
    background:var(--content-background-color);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-soft);
    border:1px solid var(--hairline)
}
.card-visual img{
    width:100%;
    height:auto;
    max-height:min(480px,70vh);
    object-fit:contain;
    object-position:center;
    display:block
}
.card-text{
    min-width:0
}
.card h3{
    display:flex;
    align-items:baseline;
    gap:.45em;
    flex-wrap:wrap;
    font-weight:600;
    letter-spacing:-.025em;
    font-size:clamp(1.45rem,3.5vw,2.1rem);
    margin:0 0 .75rem;
    line-height:1.22;
    color:var(--text-color)
}
.card p{
    font-weight:400;
    font-size:clamp(.98rem,2vw,1.12rem);
    line-height:1.65;
    margin:0 0 1rem;
    color:#46434c
}
.content-container .card .button{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-family:inherit;
    font-weight:600;
    letter-spacing:-.02em;
    font-size:clamp(.8rem,1.65vw,.95rem);
    border-radius:10px;
    padding:.65rem 1.75rem;
    margin-top:1rem;
    pointer-events:none;
    background:var(--btn-content-bg);
    color:var(--btn-content-fg);
    border:1px solid var(--btn-content-border);
    box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.content-container .card .button.button--guide{
    pointer-events:auto;
    cursor:pointer;
    appearance:none;
    font:inherit;
    transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease,color .2s ease,border-color .2s ease
}
.guide-unavailable-dialog{
    border:1px solid var(--hairline);
    border-radius:18px;
    padding:0;
    max-width:calc(100vw - 2rem);
    width:min(26rem,100%);
    overflow:visible;
    box-shadow:0 4px 6px -1px rgba(15,23,42,.06),0 24px 48px -12px rgba(15,23,42,.18);
    font-family:var(--font-content);
    color:var(--text-color);
    background:var(--content-background-color)
}
.guide-unavailable-dialog::backdrop{
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px)
}
.guide-unavailable-inner{
    position:relative;
    padding:2.25rem 1.5rem 1.5rem;
    text-align:center
}
.guide-unavailable-close{
    position:absolute;
    top:.65rem;
    right:.65rem;
    width:2.25rem;
    height:2.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    cursor:pointer;
    color:#706c7a;
    background:0 0;
    transition:background-color .2s ease,color .2s ease
}
.guide-unavailable-close:hover{
    background:rgba(57,56,62,.06);
    color:var(--text-color)
}
.guide-unavailable-close:focus-visible{
    outline:2px solid var(--btn-content-fg);
    outline-offset:2px
}
.guide-unavailable-close .fa-fw{
    font-size:1.05rem
}
.guide-unavailable-icon-wrap{
    width:4rem;
    height:4rem;
    margin:0 auto 1.15rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(160deg,rgba(94,87,215,.12),rgba(94,87,215,.04));
    border:1px solid rgba(94,87,215,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
.guide-unavailable-icon-wrap .fa-book-open{
    font-size:1.45rem;
    color:var(--text-link-color)
}
.guide-unavailable-inner h2{
    margin:0 0 .6rem;
    font-size:clamp(1.12rem,2.8vw,1.28rem);
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1.25
}
.guide-unavailable-inner p{
    margin:0 0 1.35rem;
    font-size:clamp(.94rem,2.1vw,1.02rem);
    line-height:1.6;
    color:#504d56
}
.guide-unavailable-note{
    display:inline-flex;
    align-items:flex-start;
    gap:.45rem;
    margin:0 0 1.35rem;
    padding:.65rem .75rem;
    text-align:left;
    font-size:clamp(.82rem,1.9vw,.9rem);
    line-height:1.45;
    color:#5f5b67;
    background:rgba(94,87,215,.06);
    border-radius:10px;
    border:1px solid rgba(94,87,215,.1)
}
.guide-unavailable-note .fa-circle-exclamation{
    flex-shrink:0;
    margin-top:.1em;
    color:var(--text-link-color);
    font-size:.95em
}
.guide-unavailable-ok{
    font-family:var(--font-content);
    font-weight:600;
    letter-spacing:-.02em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45em;
    border-radius:10px;
    padding:.7rem 1.75rem;
    min-width:8.5rem;
    font-size:clamp(.9rem,2vw,.98rem);
    cursor:pointer;
    background:var(--btn-content-bg);
    color:var(--btn-content-fg);
    border:1px solid var(--btn-content-border);
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease,color .2s ease,border-color .2s ease
}
.guide-unavailable-ok .fa-check{
    font-size:.88em
}
.guide-unavailable-ok:hover{
    background:var(--btn-content-bg-hover);
    color:var(--btn-content-fg-hover);
    border-color:var(--btn-content-border-hover);
    box-shadow:0 2px 8px rgba(26,115,232,.12)
}
.guide-unavailable-ok:active{
    transform:scale(.985)
}
.guide-unavailable-ok:focus-visible{
    outline:2px solid var(--btn-content-fg);
    outline-offset:3px
}
@media (prefers-reduced-motion:reduce){
    .guide-unavailable-dialog::backdrop{
        backdrop-filter:none;
        -webkit-backdrop-filter:none
    }
}
.discord-invite-card{
    margin-top:2.75rem;
    width:100%;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem 1.5rem;
    flex-wrap:wrap;
    padding:1.15rem 1.35rem 1.15rem 1.25rem;
    border-radius:16px;
    text-decoration:none;
    color:#18181b;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 0 0 1px rgba(0,0,0,.02),0 1px 2px rgba(15,23,42,.04),0 12px 40px -16px rgba(15,23,42,.12);
    transition:transform .22s cubic-bezier(.33,1,.68,1),box-shadow .22s ease,border-color .2s ease
}
.discord-invite-card:hover{
    transform:translateY(-3px);
    border-color:rgba(0,0,0,.09);
    box-shadow:0 0 0 1px rgba(0,0,0,.03),0 4px 12px rgba(15,23,42,.06),0 20px 48px -20px rgba(15,23,42,.18)
}
.discord-invite-card:active{
    transform:translateY(-1px)
}
.discord-invite-left{
    display:flex;
    align-items:center;
    gap:1rem;
    min-width:0;
    flex:1
}
.discord-invite-icon-wrap{
    position:relative;
    flex-shrink:0;
    padding:3px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(88,101,242,.35),rgba(88,101,242,.08))
}
.discord-invite-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(15,23,42,.08)
}
.discord-invite-meta{
    min-width:0;
    text-align:left
}
.discord-invite-name{
    font-family:var(--font-content);
    font-weight:600;
    font-size:clamp(1.02rem,2.1vw,1.15rem);
    letter-spacing:-.035em;
    color:#09090b;
    margin-bottom:.4rem;
    line-height:1.2
}
.discord-invite-status,.discord-invite-total{
    font-family:var(--font-content);
    font-size:.8125rem;
    font-weight:500;
    letter-spacing:-.01em
}
.discord-invite-status{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem 1rem;
    margin-bottom:.3rem
}
.discord-invite-status .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    display:inline-block;
    margin-right:.3rem;
    vertical-align:middle
}
.discord-invite-status .dot.online{
    background:#22c55e
}
.discord-invite-status .dot.offline{
    background:#d4d4d8
}
.discord-invite-status .stat-online{
    color:#52525b
}
.discord-invite-status .stat-offline{
    color:#a1a1aa
}
.discord-invite-total{
    color:#71717a
}
.discord-invite-join,.footer-content p{
    align-items:center;
    justify-content:center
}
.discord-invite-join{
    flex-shrink:0;
    display:inline-flex;
    padding:.55rem 1.15rem;
    border-radius:10px;
    font-family:var(--font-content);
    font-weight:600;
    font-size:.8125rem;
    letter-spacing:-.02em;
    color:#fafafa!important;
    background:#18181b;
    border:1px solid rgba(0,0,0,.08);
    cursor:pointer;
    text-decoration:none!important;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    transition:background .18s ease,box-shadow .18s ease,transform .15s ease
}
.discord-invite-card:hover .discord-invite-join{
    background:#27272a;
    box-shadow:0 4px 12px rgba(0,0,0,.12)
}
.discord-invite-join:active{
    transform:scale(.97)
}
footer{
    position:relative;
    color:var(--text-color);
    font-weight:400;
    background:var(--content-background-color);
    padding:clamp(4rem,10vw,6rem) 1.25rem 2rem;
    margin-top:0;
    border-top:1px solid var(--hairline);
    box-shadow:none
}
footer a{
    color:var(--text-link-color);
    font-weight:500
}
.footer-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:min(80px,12vw);
    transform:translateY(-98%);
    pointer-events:none
}
.footer-wave svg{
    display:block;
    width:100%;
    height:100%
}
.footer-content{
    max-width:40rem;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.5rem
}
.footer-content p{
    font-size:clamp(.8rem,1.8vw,.95rem);
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:.35em
}
.footer-content .fine{
    font-size:clamp(.65rem,1.5vw,.8rem);
    line-height:1.55;
    display:block;
    color:rgba(57,56,62,.72)
}
.footer-content .fa-heart{
    color:#e85d4c;
    font-size:.85em
}
.reveal{
    opacity:0;
    transform:translateY(1.75rem);
    transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay, 0ms)
}
.reveal.is-visible{
    opacity:1;
    transform:translateY(0)
}
@media (prefers-reduced-motion:reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none
    }
}