/*
    Singularity, on the web.

    The palette is the program's, not an impression of it. The surface steps
    are the ones the README lists - ground, rail, sidebar, conversation,
    composer, hover - and they are used here for the reason they exist there:
    depth comes from layers, so panels read as separate planes without a
    border drawn around any of them.

    --accent is set from JavaScript, because the swatches on the page retint
    the site the way the seed retints the program. Everything tinted reads it
    from here rather than hard-coding a colour, which is the same discipline
    Theme.h enforces in the application.
*/
:root {
    --ground:   #05070b;
    --rail:     #0a0d14;
    --sidebar:  #10151f;
    --chat:     #151b28;
    --lift:     #1c2433;
    --hover:    #273044;

    --text:     #eef4fb;
    --dim:      #9aa6bc;
    --faint:    #6b768c;

    --accent:   #cdd6e6;
    --accent-soft: rgba(205, 214, 230, 0.16);

    --ok:       #3dd68c;
    --idle:     #e0b35c;
    --busy:     #ff6b7a;

    --edge:     rgba(205, 214, 230, 0.09);
    --edge-lit: rgba(205, 214, 230, 0.20);

    --wide:     1120px;
    --ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The sticky bar would otherwise sit on top of whatever you jumped to. */
    scroll-padding-top: 78px;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--ui);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The hole is fixed behind everything and never stops. */
#hole {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -2;
    background: var(--ground);
}

/*  Everything below the hero, laid over the hole.

    The hole keeps full brightness the whole way down the page, and a
    paragraph that lands on the accretion disk is genuinely hard to read. This
    scrolls with the content rather than the viewport, so the hero keeps the
    picture at full strength and only the reading starts dimmed. It fades in,
    because a hard edge sliding up the screen looks like a fault. The hole
    still shows through: the point was to stop it competing with the words,
    not to hide it. */
.veil {
    position: relative;
    background: linear-gradient(180deg,
        transparent 0,
        rgba(5, 7, 11, 0.55) 180px,
        rgba(5, 7, 11, 0.80) 420px,
        rgba(5, 7, 11, 0.80) 100%);
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--text); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

code {
    font-family: var(--mono);
    font-size: 0.87em;
    background: rgba(205, 214, 230, 0.07);
    border: 1px solid var(--edge);
    border-radius: 5px;
    padding: 0.1em 0.38em;
    color: var(--accent);
}

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 26px; }

section { padding: 92px 0; }

h2 {
    font-size: clamp(27px, 3.8vw, 37px);
    font-weight: 250;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
    opacity: 0.85;
}

.lede { color: var(--dim); font-size: 18px; margin: 0 0 40px; max-width: 70ch; }
.lede b, .lede strong { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------- reveal ----- */

/*  Sections rise a little as they arrive. Transform and opacity only, so it
    is done on the compositor and cannot interfere with scrolling.

    Note which way round this is. Hiding by default and revealing with script
    means that if the script does not run - an error earlier in the file, a
    blocked module, a browser that never delivers the callback - the entire
    page is blank text on a black background, and nobody can read a word of
    it. So the text is visible by default, and the script opts in to hiding
    it by marking the document first. The worst case is then an page that
    simply does not animate. */
html.animate .rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
html.animate .rise.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.animate .rise { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------- nav ----- */

nav {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: rgba(5, 7, 11, 0.66);
    border-bottom: 1px solid var(--edge);
}

nav .wrap { display: flex; align-items: center; gap: 26px; height: 60px; }

.brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
    color: var(--text);
}
.brand img { width: 23px; height: 23px; display: block; }

nav .links { display: flex; gap: 6px; margin-left: auto; align-items: center; }

nav .links a {
    color: var(--dim);
    font-size: 14.5px;
    padding: 6px 12px;
    border-radius: 7px;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
nav .links a:hover { color: var(--text); background: rgba(205, 214, 230, 0.06); }
nav .links a.here { color: var(--text); background: var(--accent-soft); }

nav .links .get {
    margin-left: 8px;
    background: var(--accent);
    color: #060910;
    font-weight: 500;
}
nav .links .get:hover { background: #fff; color: #060910; }

@media (max-width: 860px) { nav .links a.hideable { display: none; } }

/* ------------------------------------------------------------ hero ----- */

header.hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 70px 0;
}

/*  A gradient that reaches nothing before it runs out of room, so there is no
    edge anywhere for the eye to catch. The program's sign-in window does the
    same thing, and for the same reason: a bordered card over a picture always
    looks pasted on. */
.hero-inner {
    max-width: 660px;
    padding: 34px 120px 36px 0;
    background: linear-gradient(90deg,
        rgba(5, 7, 11, 0.92) 0%,
        rgba(5, 7, 11, 0.80) 42%,
        rgba(5, 7, 11, 0.32) 76%,
        transparent 100%);
}

h1 {
    font-size: clamp(54px, 10.5vw, 106px);
    font-weight: 180;
    letter-spacing: -0.05em;
    line-height: 0.96;
    margin: 0 0 20px;
}

.tag {
    font-size: clamp(19px, 2.5vw, 24px);
    font-weight: 300;
    color: var(--dim);
    margin: 0 0 28px;
    line-height: 1.42;
}
.tag b { color: var(--text); font-weight: 400; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

.chip {
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--dim);
    border: 1px solid var(--edge-lit);
    border-radius: 999px;
    padding: 5px 14px;
    background: rgba(10, 13, 20, 0.6);
    white-space: nowrap;
}

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 500;
    padding: 14px 26px;
    border-radius: 11px;
    border: 1px solid transparent;
    transition: transform 0.14s var(--ease), background 0.18s var(--ease),
                border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn.primary {
    background: linear-gradient(180deg, #edf2fa 0%, #c9d5e7 100%);
    color: #060910;
    box-shadow: 0 6px 26px rgba(160, 190, 230, 0.14);
}
.btn.primary:hover {
    background: linear-gradient(180deg, #fff 0%, #dbe4f1 100%);
    color: #060910;
    box-shadow: 0 8px 32px rgba(160, 190, 230, 0.24);
}

.btn.ghost { border-color: var(--edge-lit); color: var(--text); background: rgba(16, 21, 31, 0.6); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }

.meta { font-size: 14px; color: var(--faint); margin-top: 18px; }
.meta b { color: var(--dim); font-weight: 500; }

/* ------------------------------------------------------------ slab ----- */

.slab {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--edge);
    border: 1px solid var(--edge);
    border-radius: 14px;
    overflow: hidden;
}
.slab div { background: rgba(10, 13, 20, 0.88); padding: 24px 22px; }
.slab b { display: block; font-size: 27px; font-weight: 300; letter-spacing: -0.02em; color: var(--text); }
.slab span { font-size: 14px; color: var(--faint); }

/* ----------------------------------------------------------- panels ---- */

/*  No backdrop blur on these, deliberately. A blurred backdrop is recomputed
    from whatever is behind it whenever that moves, which - with an animated
    background and a scrolling page - is every frame. Eleven of them was most
    of the stutter. They sit on the veil rather than straight on the hole, so
    a slightly more opaque fill reads the same and costs nothing. */
.panel {
    background: rgba(21, 27, 40, 0.80);
    border: 1px solid var(--edge);
    border-radius: 14px;
    padding: 26px 28px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }

/* The six-up row Vencord uses under the download: a mark, a title, one sentence. */
.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
    margin: 8px 0 56px;
}
.tile .mark {
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 12px;
}
.tile h3 { margin: 0 0 6px; font-size: 18px; font-weight: 560; letter-spacing: -0.02em; }
.tile p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.5; }
@media (max-width: 800px) { .tiles { grid-template-columns: 1fr; gap: 22px; } }

.card { transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.card:hover { border-color: var(--edge-lit); transform: translateY(-2px); }

.card h3 {
    font-size: 17px; font-weight: 500; margin: 0 0 9px;
    display: flex; align-items: center; gap: 9px;
}
.card p { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.6; }
.card p + p { margin-top: 10px; }

.num {
    font-family: var(--mono); font-size: 12px;
    color: var(--accent);
    border: 1px solid var(--edge-lit);
    border-radius: 6px;
    padding: 1px 7px;
    flex: none;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.ok { background: var(--ok); }
.dot.idle { background: var(--idle); }
.dot.busy { background: var(--busy); }

/* ----------------------------------------------------------- danger ---- */

.danger { border-color: rgba(255, 107, 122, 0.30); background: rgba(38, 13, 19, 0.72); }
.danger .kicker { color: var(--busy); }
.danger h2 { color: var(--busy); }

/* ------------------------------------------------------------ rows ----- */

.rows { display: flex; flex-direction: column; gap: 1px; background: var(--edge);
        border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }

.row {
    display: grid; grid-template-columns: 200px 1fr; gap: 22px;
    padding: 15px 20px;
    background: rgba(16, 21, 31, 0.88);
    font-size: 15.5px;
}
.row dt { color: var(--text); font-weight: 500; margin: 0; }
.row dd { color: var(--dim); margin: 0; }

@media (max-width: 660px) { .row { grid-template-columns: 1fr; gap: 3px; } }

/* --------------------------------------------------------- plugins ----- */

.plugin {
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start;
    padding: 14px 20px;
    background: rgba(16, 21, 31, 0.88);
    font-size: 15.5px;
}
.plugin strong { font-weight: 500; }
.plugin p { margin: 3px 0 0; color: var(--dim); font-size: 14.5px; line-height: 1.55; }

.state {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--edge-lit); color: var(--faint);
    white-space: nowrap; margin-top: 3px;
}
.state.on { color: var(--ok); border-color: rgba(61, 214, 140, 0.34); }

/* ------------------------------------------------------------ seed ----- */

.seeds { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 26px; }

.seed {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--edge-lit);
    background: rgba(10, 13, 20, 0.7);
    color: var(--dim);
    border-radius: 999px;
    padding: 7px 15px 7px 9px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.16s var(--ease), color 0.16s var(--ease),
                background 0.16s var(--ease);
}
.seed i {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: block; flex: none;
}
.seed:hover { color: var(--text); border-color: var(--accent); }
.seed[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------- mock ---- */

/*  A small, honest drawing of the client, built out of the same surface
    steps the program uses. It is not a screenshot and does not pretend to
    be - it is here so the layering can be seen retinting live when a seed is
    picked, which is the one feature hardest to describe in words. */
.mock {
    display: grid;
    grid-template-columns: 56px 190px 1fr;
    height: 340px;
    border: 1px solid var(--edge-lit);
    border-radius: 13px;
    overflow: hidden;
    background: var(--chat);
    font-size: 13px;
    user-select: none;
}

.mock .m-rail { background: var(--rail); padding: 11px 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mock .m-ico {
    width: 34px; height: 34px; border-radius: 12px;
    background: var(--lift);
    display: grid; place-items: center;
    color: var(--dim); font-size: 12.5px; font-weight: 600;
    transition: border-radius 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease);
}
.mock .m-ico.sel { border-radius: 9px; background: var(--accent); color: #05070b; }
.mock .m-ico:not(.sel) { border-radius: 50%; }

.mock .m-side { background: var(--sidebar); padding: 13px 10px; display: flex; flex-direction: column; gap: 3px; }
.mock .m-cat { color: var(--faint); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin: 9px 0 3px 6px; }
.mock .m-ch {
    color: var(--dim); padding: 5px 9px; border-radius: 6px;
    display: flex; align-items: center; gap: 7px;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.mock .m-ch span { color: var(--faint); }
.mock .m-ch.sel { background: var(--hover); color: var(--text); }

.mock .m-chat { padding: 15px 18px; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }
.mock .m-msg { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.mock .m-av { width: 30px; height: 30px; border-radius: 50%; background: var(--lift); }
.mock .m-av.a { background: linear-gradient(140deg, var(--accent), var(--lift)); }
.mock .m-name { color: var(--text); font-weight: 500; font-size: 13.5px; }
.mock .m-name i { color: var(--faint); font-size: 10.5px; font-style: normal; font-weight: 400; margin-left: 7px; }
.mock .m-body { color: var(--dim); line-height: 1.5; }
.mock .m-box { margin-top: auto; background: var(--lift); border-radius: 9px; padding: 9px 12px; color: var(--faint); }

@media (max-width: 720px) {
    .mock { grid-template-columns: 48px 1fr; height: 300px; }
    .mock .m-side { display: none; }
}

/* ------------------------------------------------------------ lists ---- */

ul.plain { margin: 0; padding-left: 21px; color: var(--dim); font-size: 15.5px; }
ul.plain li { margin-bottom: 8px; }
ul.plain li::marker { color: var(--faint); }
ul.plain b { color: var(--text); font-weight: 500; }

/* ----------------------------------------------------------- footer ---- */

footer {
    border-top: 1px solid var(--edge);
    background: rgba(5, 7, 11, 0.9);
    padding: 42px 0 56px;
    font-size: 14.5px;
    color: var(--faint);
    position: relative;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }
footer a { color: var(--dim); }
footer .push { margin-left: auto; }

@media (max-width: 780px) {
    .hero-inner { padding-right: 26px; }
    section { padding: 66px 0; }
    body { font-size: 16px; }
}