/*
=========================================
OpsNest Stylesheet Manifest
=========================================

Imports are listed in cascade order: when two rules tie,
the file imported later wins. Each section file matches
a partial in components/. The build (scripts/build.mjs)
inlines these imports into a single stylesheet.
*/

/* Foundation */
/* variables.css */
/*
=========================================
OpsNest Variables
=========================================

Dark is the default theme. The light theme overrides the colour
tokens below in two places: when the system prefers light and the
visitor has not picked dark, and when the visitor picks light.
js/app.js sets <html data-theme="light|dark"> from the theme switch;
no data-theme means "follow the system".
*/

:root{

    color-scheme:dark;


    /* Colors */

    --background:#0B1120;

    --surface:#111827;

    --surface-2:#1F2937;

    --border:#243244;

    --primary:#2563EB;

    --primary-hover:#1D4ED8;

    --secondary:#3B82F6;

    --success:#22C55E;

    --warning:#F59E0B;

    --danger:#EF4444;

    --text:#F8FAFC;

    --muted:#94A3B8;


    /* Theme-specific accents */

    --header-bg:rgb(11 17 32 / 92%);

    --header-bg-solid:rgb(11 17 32 / 98%);

    --header-border:rgb(255 255 255 / 5%);

    --tint:rgb(255 255 255 / 3%);

    --line:rgb(255 255 255 / 8%);

    --label-text:#7FB3FF;

    --hero-badge-text:#8DB8FF;

    --link-accent:#5EEAD4;

    --badge-success:#4ADE80;

    --badge-warning:#FBBF24;

    --badge-info:#60A5FA;

    --glow-opacity:.45;


    /* Typography */

    --heading-font:"Manrope",sans-serif;

    --body-font:"Inter",sans-serif;


    /* Radius */

    --radius-sm:8px;

    --radius:14px;

    --radius-lg:20px;


    /* Shadow */

    --shadow:

        0 12px 35px rgb(0 0 0 / 25%);

    --shadow-hover:

        0 20px 40px rgb(0 0 0 / 30%);


    /* Transition */

    --transition:.25s ease;


    /* Layout */

    --container:1920px;

}

/*
Light theme. The two blocks must stay identical: CSS cannot share
one declaration list between a media query and an attribute selector.
*/

@media(prefers-color-scheme:light){

    :root:not([data-theme="dark"]){

        color-scheme:light;

        --background:#F8FAFC;

        --surface:#FFF;

        --surface-2:#F1F5F9;

        --border:#E2E8F0;

        --secondary:#2563EB;

        --text:#0F172A;

        --muted:#475569;

        --header-bg:rgb(248 250 252 / 92%);

        --header-bg-solid:rgb(248 250 252 / 98%);

        --header-border:rgb(15 23 42 / 8%);

        --tint:rgb(15 23 42 / 4%);

        --line:rgb(15 23 42 / 10%);

        --label-text:#1D4ED8;

        --hero-badge-text:#1D4ED8;

        --link-accent:#0F766E;

        --badge-success:#15803D;

        --badge-warning:#B45309;

        --badge-info:#1D4ED8;

        --glow-opacity:.16;

        --shadow:

            0 12px 35px rgb(15 23 42 / 8%);

        --shadow-hover:

            0 20px 40px rgb(15 23 42 / 12%);

    }

}

:root[data-theme="light"]{

    color-scheme:light;

    --background:#F8FAFC;

    --surface:#FFF;

    --surface-2:#F1F5F9;

    --border:#E2E8F0;

    --secondary:#2563EB;

    --text:#0F172A;

    --muted:#475569;

    --header-bg:rgb(248 250 252 / 92%);

    --header-bg-solid:rgb(248 250 252 / 98%);

    --header-border:rgb(15 23 42 / 8%);

    --tint:rgb(15 23 42 / 4%);

    --line:rgb(15 23 42 / 10%);

    --label-text:#1D4ED8;

    --hero-badge-text:#1D4ED8;

    --link-accent:#0F766E;

    --badge-success:#15803D;

    --badge-warning:#B45309;

    --badge-info:#1D4ED8;

    --glow-opacity:.16;

    --shadow:

        0 12px 35px rgb(15 23 42 / 8%);

    --shadow-hover:

        0 20px 40px rgb(15 23 42 / 12%);

}

/* base.css */
/*
=========================================
Reset
=========================================
*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

    text-size-adjust:100%;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--body-font);

    line-height:1.7;

    min-width:320px;

    overflow-wrap:anywhere;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;

}

/*
=========================================
Container
=========================================
*/

.container{

    width:min(96%,var(--container));

    margin:auto;

}

/*
=========================================
Typography
=========================================
*/

h1,h2,h3,h4{

    font-family:var(--heading-font);

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

/*
Logos are <picture> elements with a light-theme <source>; js/app.js points
that source at the visitor's theme choice. display:contents keeps the
wrapper out of layout, so the <img> is styled as before.
*/

picture{

    display:contents;

}

section{

    padding:clamp(72px,8vw,100px) 0;

    scroll-margin-top:110px;

}
/* layout.css */
/*
=========================================
Section Header
=========================================
*/

.section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgb(37 99 235 / 8%);

    border:1px solid rgb(37 99 235 / 25%);

    color:var(--label-text);

    font-size:.9rem;

    margin-bottom:22px;

}

.section-header h2{

    font-size:clamp(2rem,4vw,2.8rem);

    line-height:1.2;

    margin-bottom:20px;

}

.section-header p{

    color:var(--muted);

    font-size:1.05rem;

}

@media(max-width:700px){

    .section-header{

        margin-bottom:40px;

    }

    .section-header h2{

        font-size:clamp(1.8rem,7vw,2.3rem);

    }

}


/* Shared components */
/* buttons.css */
/*
=========================================
Buttons
=========================================
*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 30px;

    border-radius:14px;

    font-weight:600;

    transition:all .3s;

}

/* Primary */

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

/* Secondary */

.btn-secondary{

    border:1px solid var(--border);

    background:transparent;

}

.btn-secondary:hover{

    background:var(--surface);

    transform:translateY(-3px);

}

/*
=========================================
Button Row (hero and call to action)
=========================================
*/

.hero-buttons{

    display:flex;

    gap:18px;

}

@media(max-width:1000px){

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:700px){

    .hero-buttons{

        flex-direction:column;

        width:100%;

        max-width:320px;

        margin:0 auto;

    }

    .hero-buttons .btn{

        width:100%;

    }

}

/* cards.css */
/*
=========================================
Card Surface (shared by most sections)
=========================================
*/

.stat,
.about-card,
.core-card,
.why-card,
.update-card,
details,
.timeline-content{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow);

}

.core-card,
.why-card,
.update-card,
details,
.timeline-content{

    padding:28px;

}

.core-card h3,
.why-card h3,
.update-card h3,
.timeline-content h3,
details summary{

    line-height:1.2;

}

.stat p,
.about-content p,
.core-card p,
.why-card p,
.update-card p,
details p,
.timeline-content p{

    color:var(--muted);

}

/*
=========================================
Status Badges
=========================================
*/

.badge{

    padding:8px 16px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

}

.success{

    background:rgb(34 197 94 / 12%);

    color:var(--badge-success);

}

.warning{

    background:rgb(245 158 11 / 12%);

    color:var(--badge-warning);

}

.info{

    background:rgb(37 99 235 / 12%);

    color:var(--badge-info);

}

/*
=========================================
Tags and Labels
=========================================
*/

.tech-list span,
.technology-grid span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 12px;

    border-radius:999px;

    background:var(--tint);

    border:1px solid var(--border);

    color:var(--muted);

    font-size:.92rem;

}

/* Status label: roadmap milestones and update dates */

.timeline-content span,
.update-date{

    display:inline-flex;

    margin-top:14px;

    color:var(--secondary);

    font-weight:600;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.06em;

}

@media(max-width:700px){

    .core-card,
    .why-card,
    .update-card,
    details,
    .timeline-content{

        padding:24px;

    }

}


/* Page sections, in page order */
/* navigation.css */
/*
=========================================
Navigation
=========================================
*/

.header{

    position:sticky;

    top:0;

    z-index:100;

    background:var(--header-bg);

    -webkit-backdrop-filter:blur(15px);

    backdrop-filter:blur(15px);

    border-bottom:1px solid var(--header-border);

}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

    .header{

        background:var(--header-bg-solid);

    }

}

.header .container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:54px;

    height:54px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text span{

    font-size:1.3rem;

    font-weight:800;

}

.logo-text small{

    color:var(--muted);

}

.header-actions{

    display:flex;

    align-items:center;

    gap:32px;

}

nav{

    display:flex;

    gap:32px;

}

nav a{

    color:var(--muted);

    white-space:nowrap;

    transition:var(--transition);

}

nav a:hover{

    color:var(--text);

}

/*
Theme switch: a round button showing the current choice. On hover (or
keyboard focus) it drops down over the page, so the layout never moves;
the current choice is ordered first so it stays under the pointer.
Touch screens cannot hover, so there all three stay visible in a row.

The current choice is read from <html data-theme>, which the <head>
script sets before the first paint, so the switch never flickers.
*/

.theme-switch{

    display:none;

    position:relative;

    width:40px;

    height:40px;

}

.js .theme-switch{

    display:block;

}

.theme-switch-track{

    position:absolute;

    top:0;

    right:0;

    z-index:1;

    display:flex;

    flex-direction:column;

    padding:3px;

    border:1px solid var(--border);

    border-radius:999px;

    background:var(--surface);

    transition:box-shadow var(--transition);

}

.theme-switch button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    order:var(--current-order, 0);

    width:32px;

    height:0;

    padding:0;

    overflow:hidden;

    border:0;

    border-radius:999px;

    background:none;

    color:var(--text);

    opacity:0;

    transform:scale(.6);

    cursor:pointer;

    transition:

        height .25s ease,

        opacity .2s ease,

        transform .25s ease,

        color .2s ease,

        background-color .2s ease;

}

/* The current choice: always visible, highlighted once the switch is open */

:root:not([data-theme]) .theme-switch [data-theme-choice="system"],
:root[data-theme="light"] .theme-switch [data-theme-choice="light"],
:root[data-theme="dark"] .theme-switch [data-theme-choice="dark"]{

    --current-order:-1;

    --current-bg:rgb(37 99 235 / 14%);

    --current-color:var(--secondary);

    height:32px;

    opacity:1;

    transform:none;

}

.theme-switch:hover .theme-switch-track,
.theme-switch:has(:focus-visible) .theme-switch-track{

    box-shadow:var(--shadow);

}

.theme-switch:hover button,
.theme-switch:has(:focus-visible) button{

    height:32px;

    opacity:1;

    transform:none;

    background:var(--current-bg, none);

    color:var(--current-color, var(--muted));

}

.theme-switch button:hover{

    color:var(--text);

}

.theme-switch button:focus-visible{

    outline:2px solid var(--secondary);

    outline-offset:-2px;

}

.theme-switch svg{

    flex-shrink:0;

    width:17px;

    height:17px;

    fill:none;

    stroke:currentcolor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

@media(hover:none){

    .theme-switch{

        width:auto;

        height:auto;

    }

    .theme-switch-track{

        position:static;

        flex-direction:row;

    }

    .theme-switch button{

        order:0;

        height:32px;

        opacity:1;

        transform:none;

        background:var(--current-bg, none);

        color:var(--current-color, var(--muted));

    }

}

@media(prefers-reduced-motion:reduce){

    .theme-switch button{

        transition:none;

    }

}

@media(max-width:900px){

    .header-actions,
    nav{

        gap:20px;

    }

}

/* Below 840px the logo, links and switch no longer fit on one line. */

@media(max-width:840px){

    /* Logo and theme switch share the first row; links wrap below. */

    .header .container{

        display:grid;

        grid-template-columns:1fr auto;

        height:auto;

        padding:20px 0;

    }

    .header-actions{

        display:contents;

    }

    .theme-switch{

        grid-area:1 / 2;

    }

    nav{

        grid-column:1 / -1;

        margin-top:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

}

/* hero.css */
/*
=========================================
Hero
=========================================
*/

.hero{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

.hero-grid{

    display:grid;

    grid-template-columns:minmax(0,1.15fr) minmax(360px,540px);

    align-items:center;

    gap:clamp(40px,6vw,84px);

    min-width:0;

}

/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgb(37 99 235 / 8%);

    border:1px solid rgb(37 99 235 / 30%);

    color:var(--hero-badge-text);

    margin-bottom:35px;

    font-size:.9rem;

}

/* Heading */

.hero h1{

    font-size:clamp(2.8rem,6vw,4rem);

    line-height:1.1;

    margin-bottom:25px;

}

.hero h1 span{

    display:block;

    color:var(--secondary);

}

/* Paragraph */

.hero p{

    max-width:650px;

    color:var(--muted);

    font-size:clamp(1rem,1.5vw,1.15rem);

    margin-bottom:40px;

}

/* Right Side */

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:520px;

    min-width:0;

}

/* Logo */

.hero-image img{

    position:relative;

    z-index:10;

    width:min(100%,340px);

    height:auto;

    transform:translateY(-8px);

}

/* Glow */

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:var(--glow-opacity);

}

.glow-blue{

    width:250px;

    height:250px;

    background:#2563EB;

}

.glow-purple{

    width:180px;

    height:180px;

    background:#7C3AED;

    right:60px;

    top:50px;

}

@media(max-width:1000px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-image{

        margin-top:60px;

    }

}

@media(max-width:900px){

    .hero-image{

        margin-top:48px;

        min-height:320px;

    }

}

@media(max-width:700px){

    .hero{

        padding:72px 0;

    }

    .hero h1{

        font-size:clamp(2.2rem,11vw,2.9rem);

    }

}

/* stats.css */
/*
=========================================
Statistics
=========================================
*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:24px;

}

.stat{

    padding:28px;

    text-align:center;

}

.stat h3{

    font-size:clamp(2rem,4vw,2.6rem);

    margin-bottom:6px;

}

@media(max-width:900px){

    .stats-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stat{

        padding:24px;

    }

}

/* about.css */
/*
=========================================
About
=========================================
*/

.about-grid{

    display:grid;

    grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);

    gap:30px;

    align-items:start;

}

.about-content p + p{

    margin-top:18px;

}

.about-card{

    padding:30px;

}

.about-card ul{

    list-style:none;

    display:grid;

    gap:14px;

    margin-top:20px;

}

.about-card li{

    position:relative;

    padding-left:22px;

}

.about-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:.7em;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

@media(max-width:900px){

    .about-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .about-card{

        padding:24px;

    }

}

/* core.css */
/*
=========================================
Core Areas
=========================================
*/

.core-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:24px;

}

.core-card{

    min-width:0;

}

.core-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:rgb(37 99 235 / 8%);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.7rem;

    margin-bottom:22px;

}

@media(max-width:900px){

    .core-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .core-grid{

        grid-template-columns:1fr;

    }

}

/* projects.css */
/*
=========================================
Projects (also used by the Blog topics section)
=========================================
*/

.projects-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:28px;

}

.project-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    padding:30px;

    min-width:0;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:var(--shadow-hover);

}

.project-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    margin-bottom:24px;

}

.project-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:rgb(37 99 235 / 8%);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.7rem;

    margin-bottom:30px;

}

.project-card h3{

    margin-bottom:14px;

}

.project-card p{

    color:var(--muted);

    margin-bottom:22px;

}

.tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:auto;

}

@media(max-width:800px){

    .projects-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-card{

        padding:24px;

    }

    .project-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .tech-list{

        justify-content:center;

    }

}

/* technology.css */
/*
=========================================
Technology Stack
=========================================
*/

.technology-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:14px;

}

.technology-grid span{

    text-align:center;

}

/* why.css */
/*
=========================================
Why OpsNest
=========================================
*/

.why-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:24px;

}

@media(max-width:900px){

    .why-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .why-grid{

        grid-template-columns:1fr;

    }

}

/* roadmap.css */
/*
=========================================
Roadmap Timeline
=========================================
*/

.timeline{

    display:grid;

    gap:22px;

    position:relative;

    padding-left:28px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:8px;

    bottom:8px;

    width:1px;

    background:var(--line);

}

.timeline-item{

    position:relative;

}

.timeline-dot{

    position:absolute;

    left:-28px;

    top:16px;

    width:16px;

    height:16px;

    border-radius:50%;

    border:3px solid var(--background);

    background:var(--muted);

}

.timeline-item.completed .timeline-dot{

    background:var(--success);

}

.timeline-item.progress .timeline-dot{

    background:var(--warning);

}

.timeline-item.planned .timeline-dot{

    background:var(--secondary);

}

@media(max-width:700px){

    .timeline{

        padding-left:22px;

    }

    .timeline-dot{

        left:-22px;

    }

}

/* updates.css */
/*
=========================================
Latest Updates
=========================================
*/

.updates-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:24px;

}

.update-card-link{

    display:block;

    color:inherit;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}

.update-card-link:hover{

    transform:translateY(-4px);

}

.update-card-link:focus-visible{

    outline:2px solid var(--link-accent);

    outline-offset:4px;

}

.card-link-text{

    display:inline-block;

    margin-top:12px;

    font-weight:600;

    color:var(--link-accent);

}

.update-card-link h3{

    color:inherit;

}

@media(max-width:900px){

    .updates-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .updates-grid{

        grid-template-columns:1fr;

    }

}

/* faq.css */
/*
=========================================
FAQ
=========================================
*/

.faq-list{

    display:grid;

    gap:16px;

}

details{

    overflow:hidden;

}

details + details{

    margin-top:16px;

}

summary{

    cursor:pointer;

    font-weight:700;

    list-style:none;

}

summary::-webkit-details-marker{

    display:none;

}

details p{

    margin-top:14px;

}

@media(max-width:700px){

    .faq-list details summary{

        word-break:break-word;

    }

}

/* community.css */
/*
=========================================
Community
=========================================
*/

/* The orbit's outer labels can swing past narrow screens; never let them cause sideways scrolling. */

.community{

    overflow-x:clip;

}

.community-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    align-items:center;

    gap:60px;

}

.community-copy .section-header{

    max-width:560px;

    margin:0 0 32px;

    text-align:left;

}

.community-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

/*
=========================================
Orbit
=========================================

Two rings turning in opposite directions around the OpsNest mark.
Each item sits at angle (360deg / n) * i on its ring (--i and --n come
from the template); its label spins the other way so it stays upright.
Hovering pauses the motion; reduced-motion visitors get a still orbit.
*/

.orbit{

    --size:640px;

    position:relative;

    width:var(--size);

    height:var(--size);

    margin-inline:auto;

}

.orbit-glow{

    position:absolute;

    inset:22%;

    border-radius:50%;

    background:radial-gradient(circle,var(--primary),#7C3AED 70%,transparent);

    filter:blur(80px);

    opacity:var(--glow-opacity);

}

.orbit-ring{

    position:absolute;

    inset:0;

    margin:0;

    padding:0;

    list-style:none;

    animation:orbit-spin var(--duration) linear infinite;

}

/* The ring's circle line; it turns with the ring */

.orbit-ring::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:calc(var(--radius) * 2);

    height:calc(var(--radius) * 2);

    margin:calc(var(--radius) * -1) 0 0 calc(var(--radius) * -1);

    border:1px dashed var(--border);

    border-radius:50%;

}

.orbit-ring-inner{

    --radius:150px;

    --duration:40s;

}

.orbit-ring-outer{

    --radius:262px;

    --duration:70s;

    animation-direction:reverse;

}

.orbit-ring li{

    position:absolute;

    top:50%;

    left:50%;

    transform:

        rotate(calc(360deg / var(--n) * var(--i)))

        translateX(var(--radius))

        rotate(calc(-360deg / var(--n) * var(--i)))

        translate(-50%,-50%);

}

.orbit-item{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 14px;

    border:1px solid var(--border);

    border-radius:999px;

    background:var(--surface);

    box-shadow:var(--shadow);

    white-space:nowrap;

    animation:orbit-spin var(--duration) linear infinite reverse;

}

.orbit-ring-outer .orbit-item{

    color:var(--muted);

    font-size:.85rem;

    animation-direction:normal;

}

.orbit-ring-inner .orbit-item{

    font-weight:600;

    font-size:.92rem;

}

/* Learn and Blog: links, so they look clickable */

.orbit-link{

    border-color:rgb(37 99 235 / 45%);

    color:var(--text);

    transition:

        border-color var(--transition),

        background-color var(--transition),

        color var(--transition);

}

.orbit-link:hover{

    border-color:var(--primary);

    background:rgb(37 99 235 / 14%);

    color:var(--secondary);

}

.orbit-link:focus-visible{

    outline:2px solid var(--secondary);

    outline-offset:3px;

}

.orbit-center{

    position:absolute;

    top:50%;

    left:50%;

    display:grid;

    place-items:center;

    width:108px;

    height:108px;

    border:1px solid var(--border);

    border-radius:50%;

    background:var(--surface);

    box-shadow:var(--shadow);

    transform:translate(-50%,-50%);

}

.orbit-center img{

    width:76px;

    height:76px;

}

/* Pause while pointing at or tabbing through the orbit, so the links are easy to click */

.orbit:hover .orbit-ring,
.orbit:hover .orbit-item,
.orbit:focus-within .orbit-ring,
.orbit:focus-within .orbit-item{

    animation-play-state:paused;

}

@keyframes orbit-spin{

    to{

        transform:rotate(360deg);

    }

}

@media(prefers-reduced-motion:reduce){

    .orbit-ring,
    .orbit-item{

        animation:none;

    }

}

@media(max-width:1100px){

    .community-layout{

        grid-template-columns:minmax(0,1fr);

        gap:48px;

    }

    .community-copy .section-header{

        margin:0 auto 32px;

        text-align:center;

    }

    .community-buttons{

        justify-content:center;

    }

}

/*
The orbit is drawn at a fixed size and scaled down as a whole on small
screens; on phones its labels are drawn larger so they stay readable.
*/

@media(max-width:700px){

    .orbit{

        zoom:.72;

    }

}

@media(max-width:480px){

    .orbit{

        zoom:.55;

    }

    .orbit-ring-inner{

        --radius:140px;

    }

    .orbit-ring-outer{

        --radius:255px;

    }

    .orbit-ring-outer .orbit-item{

        font-size:1.1rem;

    }

    .orbit-ring-inner .orbit-item{

        font-size:1.2rem;

    }

}