/* xyralscripts.dev — v2
 *
 * Loud on purpose. Nearly everyone arrives from a Discord link preview or a
 * forum post, decides in about two seconds, and leaves. So the first screen is
 * one enormous statement and one screenshot, not a paragraph.
 *
 * Every script owns a colour. It runs through its card, its page, its buttons
 * and its OG image, so a link to the MDT and a link to Air Drops do not look
 * like the same product with the words swapped.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
    --ink:        #05070a;
    --ink-2:      #0a0e14;
    --panel:      #0e131b;
    --panel-2:    #141b25;
    --line:       rgba(255,255,255,.09);
    --line-2:     rgba(255,255,255,.16);

    --text:       #f4f7fa;
    --text-2:     #9fadbd;
    --text-3:     #64748b;

    /* Overridden per page by the script's own colour. */
    --accent:     #7ce8ff;
    --accent-2:   #15a7d7;
    --accent-ink: #05070a;

    --sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --wide: 1240px;
    --r:    14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(100% - 40px, var(--wide)); margin-inline: auto; }

/* ── Type ────────────────────────────────────────────────────────────────────
 * The display sizes are the whole point of the redesign. clamp() so the huge
 * end only happens where there is room for it. */

.display {
    font-size: clamp(2.9rem, 8.5vw, 7rem);
    line-height: .92;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0;
    text-wrap: balance;
}

.display--sm {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    font-weight: 800;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .4em; }

p { margin: 0 0 1em; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.25rem); color: var(--text-2); max-width: 62ch; }
.muted { color: var(--text-2); }
.small { font-size: .86rem; }

/* The label above a heading. Small, spaced, in the page's colour. */
.eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn--solid {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 30px -10px var(--accent);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px var(--accent); }

.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-head__in {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 68px;
}

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.brand svg { width: 26px; height: 26px; }
.brand span { color: var(--accent); }

.nav { display: flex; gap: .3rem; margin-left: auto; align-items: center; }
.nav a {
    padding: .5rem .85rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-2);
    transition: color .15s ease, background .15s ease;
}
.nav a:hover, .nav a.is-active { color: var(--text); background: rgba(255,255,255,.06); }

.nav-toggle { display: none; background: none; border: 0; color: var(--text); padding: .5rem; cursor: pointer; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 6rem); overflow: hidden; }

/* One enormous colour wash behind the headline. Cheap to paint, and it is what
 * makes the page feel like something rather than a document. */
.hero::before {
    content: '';
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 90%;
    background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.hero__in { position: relative; }
.hero .display { margin-bottom: 1.1rem; }
.hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.35rem); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Counters under the hero. */
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 3rem; }
.stat b { display: block; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat span { font-size: .8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); }

/* ── Script cards ────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.4rem; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); border-color: var(--card-accent, var(--accent)); box-shadow: 0 22px 50px -24px var(--card-accent, var(--accent)); }

/* The colour bar that makes one card obviously not another. */
.card__bar { height: 4px; background: linear-gradient(90deg, var(--card-accent), var(--card-accent-2)); }

.card__shot { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); border-bottom: 1px solid var(--line); }
.card__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__shot img { transform: scale(1.04); }

.card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__kind {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--card-accent);
    margin-bottom: .5rem;
}
.card__name { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: .55rem; }
.card__desc { color: var(--text-2); font-size: .93rem; margin-bottom: 1.1rem; flex: 1; }

.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__tags { display: flex; gap: .35rem; flex-wrap: wrap; }

.tag {
    font-family: var(--mono);
    font-size: .68rem;
    padding: .25rem .55rem;
    border-radius: 5px;
    border: 1px solid var(--line-2);
    color: var(--text-2);
}
.tag--accent { border-color: var(--card-accent); color: var(--card-accent); }

.card__go { font-weight: 700; font-size: .9rem; color: var(--card-accent); white-space: nowrap; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section__head { margin-bottom: 2.6rem; max-width: 70ch; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── Script detail page ──────────────────────────────────────────────────── */

.detail-hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; }
.detail-hero::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 120%;
    background: radial-gradient(50% 50% at 30% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
    pointer-events: none;
}
.detail-hero__in { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .detail-hero__in { grid-template-columns: 1.05fr .95fr; align-items: center; } }

.crumbs { font-size: .84rem; color: var(--text-3); margin-bottom: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }

.badges { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 1.6rem; }

.shot-frame {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 90px -40px var(--accent);
}

/* Live figures under the hero actions. */
.live-row { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem; font-size: .88rem; color: var(--text-3); }
.live-row b { color: var(--text); font-weight: 700; }

.detail-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

.side { position: sticky; top: 92px; display: grid; gap: 1rem; }
.side__card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; }
.side__card h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-family: var(--mono); color: var(--text-3); margin-bottom: .9rem; }

.spec { display: grid; gap: .7rem; }
.spec > div { display: grid; gap: .1rem; }
.spec dt { font-size: .76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.spec dd { margin: 0; font-size: .92rem; font-weight: 600; }

/* ── Features ────────────────────────────────────────────────────────────── */

.features { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }

.feature { background: var(--panel); padding: 1.4rem 1.5rem; display: flex; gap: 1rem; }
.feature b { font-family: var(--mono); font-size: .8rem; color: var(--accent); flex-shrink: 0; padding-top: .15rem; }
.feature p { margin: 0; font-size: .95rem; color: var(--text-2); }

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.shot {
    display: block;
    text-align: left;
    padding: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
    width: 100%;
    color: inherit;
    font: inherit;
}
.shot:hover { transform: translateY(-4px); border-color: var(--accent); }
.shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.shot figcaption { padding: .9rem 1.1rem 1.1rem; }
.shot strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.shot span { font-size: .84rem; color: var(--text-2); }

/* ── Notices ─────────────────────────────────────────────────────────────── */

.notice {
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--panel);
    padding: 1.2rem 1.4rem;
}
.notice ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.notice li { color: var(--text-2); font-size: .93rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; margin-top: 2rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 2.5rem; }
.foot-grid h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; font-family: var(--mono); color: var(--text-3); margin: 0 0 .9rem; }
.foot-grid a { display: block; padding: .28rem 0; color: var(--text-2); font-size: .92rem; }
.foot-grid a:hover { color: var(--accent); }
.foot-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--text-3); font-size: .86rem; }

/* ── Reveal ──────────────────────────────────────────────────────────────── */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .nav-toggle { display: block; margin-left: auto; }
    .nav {
        position: fixed;
        inset: 68px 0 auto;
        flex-direction: column;
        gap: 0;
        background: var(--ink-2);
        border-bottom: 1px solid var(--line);
        padding: .8rem 20px 1.4rem;
        display: none;
    }
    body.menu-open .nav { display: flex; }
    .nav a { padding: .8rem .2rem; border-radius: 0; font-size: 1rem; }
    .side { position: static; }
}

/* ── Carried over from v1 ────────────────────────────────────────────────────
 *
 * The docs, FAQ, updates and about pages keep their original markup. Those
 * guides took a long time to write, and retyping them into new templates would
 * be the slowest and riskiest way to change how they look — so only their shell
 * was replaced. These rules restyle that markup in the new design.
 *
 * .button is v1's name for .btn. Both exist so old and new markup agree.
 */

.button {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .85rem 1.5rem; border-radius: 999px;
    border: 1px solid transparent;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-size: .95rem; cursor: pointer;
    box-shadow: 0 8px 30px -10px var(--accent);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px var(--accent); }
.button--ghost { background: none; color: var(--text); border-color: var(--line-2); box-shadow: none; }
.button--ghost:hover { border-color: var(--accent); color: var(--accent); }
.button--small { padding: .5rem 1rem; font-size: .86rem; }
.button--wide { width: 100%; justify-content: center; }

.detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.page-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); position: relative; overflow: hidden; }
.page-hero::before {
    content: "";
    position: absolute; inset: -60% -20% auto -20%; height: 160%;
    background: radial-gradient(45% 45% at 30% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -.03em; font-weight: 800; margin: 0 0 .5rem; }
.page-hero p { color: var(--text-2); max-width: 64ch; font-size: 1.05rem; }

.breadcrumbs { font-size: .84rem; color: var(--text-3); margin-bottom: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--accent); }

.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .8rem; }

/* Docs */
.docs-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .docs-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }

.docs-nav { position: sticky; top: 92px; display: grid; gap: .1rem; font-size: .9rem; }
.docs-nav a { padding: .45rem .7rem; border-radius: 8px; color: var(--text-2); border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.docs-nav a.is-current { color: var(--accent); border-left-color: var(--accent); background: rgba(255,255,255,.04); }

.docs-content { min-width: 0; }
.docs-section { margin-bottom: 3rem; scroll-margin-top: 90px; }
.docs-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .6rem; }
.docs-section h3 { margin-top: 1.6rem; font-size: 1.05rem; }
.docs-section p, .docs-section li { color: var(--text-2); }
.docs-section ul, .docs-section ol { padding-left: 1.2rem; display: grid; gap: .45rem; }

.docs-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.docs-index { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.step-list { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; }
.step-list li { counter-increment: step; position: relative; padding-left: 3rem; color: var(--text-2); }
.step-list li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--accent);
}

.code-block, .code-wrap {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 1rem 1.1rem;
    font-family: var(--mono); font-size: .84rem; line-height: 1.65;
    overflow-x: auto; color: var(--text-2); margin: 0 0 1rem;
}
.code-block code { color: inherit; }

.docs-search-wrap { position: relative; margin-bottom: 1.4rem; }
.docs-search-field { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: .55rem 1rem; }
.docs-search-field input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; outline: none; }
.docs-search-kbd { font-family: var(--mono); font-size: .7rem; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: .1rem .4rem; }
.docs-search-results { position: absolute; inset: calc(100% + .4rem) 0 auto; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; z-index: 20; }
.docs-search-results a { display: block; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.docs-search-results a:hover { background: rgba(255,255,255,.05); color: var(--accent); }
.search-icon { color: var(--text-3); }

/* FAQ */
.faq-list { display: grid; gap: .8rem; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq-item summary, .faq-item > h3 { padding: 1.1rem 1.3rem; font-weight: 700; cursor: pointer; list-style: none; margin: 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-body { padding: 0 1.3rem 1.2rem; color: var(--text-2); }
.faq-body p:last-child { margin-bottom: 0; }

/* Updates and releases */
.update-list, .release-list { display: grid; gap: 1rem; }
.update-card, .release-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.4rem; }
.update-card__repo { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.update-status, .live-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-3); }
.live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .68rem; padding: .25rem .55rem; border-radius: 5px; border: 1px solid var(--line-2); color: var(--text-2); }
.badge--status { border-color: var(--accent); color: var(--accent); }

/* About, roadmap, support, config generator */
.about-grid, .cfg-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .about-grid { grid-template-columns: 320px minmax(0, 1fr); }
    .cfg-layout { grid-template-columns: 340px minmax(0, 1fr); }
}

.about-terminal { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; font-family: var(--mono); font-size: .84rem; color: var(--text-2); }
.about-terminal b { color: var(--accent); font-weight: 500; }
.about-terminal p { margin: 0 0 .5rem; }
.terminal-top { display: flex; gap: .4rem; margin-bottom: 1rem; }
.terminal-top span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }

.roadmap-grid, .support-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.roadmap-card, .support-template { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; }
.roadmap-card__status { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.checklist { list-style: none; padding: 0; display: grid; gap: .5rem; }
.checklist li { padding-left: 1.6rem; position: relative; color: var(--text-2); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.cfg-form { display: grid; gap: 1rem; }
.cfg-result { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cfg-result__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.template-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.copy-state { font-size: .82rem; color: var(--text-3); }

.section-heading { margin-bottom: 2rem; }
.section--dark { background: var(--ink-2); }
.subtabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.notice--warn { border-left-color: var(--accent); }

.skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 8px; min-height: 1em; }
@keyframes sk { to { background-position: -200% 0; } }

/* "by XyraL" under the line name. Lighter and smaller so the eye lands on
   the brand first and picks up the name straight after, rather than reading two
   competing words the same size. */
.display .by {
    display: block;
    font-size: .42em;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-2);
    margin-top: .18em;
}
.display .by::before { content: ""; }

/* Other projects — everything published that is not an XS script. Rendered
   by projects.js straight from the GitHub account, so it needs no per-repo
   markup and cannot go stale. */
.project-line { margin-top: 2.5rem; }
.divider-title { margin-bottom: .4rem; }
.divider-title h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }

.project-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 1rem; }

.project-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.2rem 1.3rem;
    transition: transform .2s ease, border-color .2s ease;
}
.project-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.project-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.project-card__top h3 { margin: 0; font-size: 1.05rem; }
.project-card__stars { font-family: var(--mono); font-size: .78rem; color: var(--accent); white-space: nowrap; }
.project-card p { color: var(--text-2); font-size: .9rem; margin-bottom: .9rem; }
.project-card__meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--text-3); flex-wrap: wrap; }
.project-card__lang { display: inline-flex; align-items: center; gap: .35rem; }
.project-card__lang i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ── Hero lift ───────────────────────────────────────────────────────────────
 * The cards already carry each script's own colour and glow on hover. The hero
 * was the plain part: flat white text on a dark wash, which is the first thing
 * anyone sees.
 *
 * Everything here is painted once. Nothing animates on scroll — the parallax
 * that used to live on this page had to go because moving three masked layers
 * per frame made scrolling stutter, and none of this is worth doing that again. */

/* A cool-to-warm wash across the headline rather than flat white. The last line
 * carries the accent, so the eye lands on the word that matters. */
.hero .display {
    background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--accent) 45%, #ffffff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* A browser that cannot clip a background to text would render the headline
     * invisible, which is a lot worse than no gradient. */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero .display { color: var(--text); -webkit-text-fill-color: currentColor; }
}

/* A second, tighter light source low behind the headline. The existing wash is
 * broad and even; this gives it a source rather than a haze. */
.hero::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18%;
    width: min(760px, 90%);
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

/* The eyebrow is the one line naming you rather than the product, so it gets
 * the accent and a little presence. */
.hero .eyebrow {
    color: var(--accent);
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats .stat b {
    background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--accent) 55%, #ffffff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .stats .stat b { color: var(--text); -webkit-text-fill-color: currentColor; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* The ghost button had no hover glow at all, so the two primary actions in the
 * hero behaved differently for no reason. */
.btn--ghost {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 12px 34px -16px var(--accent);
}

/* ── Section headings ────────────────────────────────────────────────────── */
/* A hairline that fades out, so a section starts rather than just appearing. */
.section-heading .eyebrow { color: var(--accent); }

/* ══ Member portal: auth chip, reviews, account ══════════════════════════════ */

.auth-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .8rem .35rem .4rem; border:1px solid var(--line-2); border-radius:999px; color:var(--text); font-weight:600; font-size:.85rem; }
.auth-chip:hover { border-color:var(--accent); }
.auth-chip__avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; }

/* reviews */
.reviews-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
.reviews-summary { display:flex; align-items:center; gap:.7rem; margin-top:.4rem; }
.reviews-avg { color:var(--text-2); font-size:.9rem; }
.stars { display:inline-flex; gap:2px; }
.star { color:var(--line-2); font-size:1.05rem; line-height:1; }
.star.is-on { color:#ffc861; }
.stars--input { gap:4px; }
.stars--input .star { background:none; border:none; cursor:pointer; font-size:1.6rem; padding:0 1px; transition:transform .12s; }
.stars--input .star:hover { transform:scale(1.15); }

.reviews-form { margin:1.4rem 0 1.8rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; max-width:640px; }
.reviews-form__body { width:100%; min-height:88px; resize:vertical; padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--ink-2); color:var(--text); font:inherit; font-size:.92rem; }
.reviews-form__body:focus { outline:none; border-color:var(--accent); }
.reviews-save.is-saved { border-color:var(--accent); color:var(--accent); }

.reviews-list { display:grid; gap:.9rem; }
.review-card { position:relative; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.review-card__head { display:flex; align-items:center; gap:.8rem; }
.review-card__avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.review-card__head > div { margin-right:auto; display:flex; flex-direction:column; }
.review-card__date { color:var(--text-3); font-size:.75rem; }
.review-card__body { margin:.7rem 0 0; color:var(--text-2); font-size:.95rem; white-space:pre-wrap; word-break:break-word; }
.review-card__delete { position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--text-3); font-size:.78rem; cursor:pointer; }
.review-card__delete:hover { color:#ff8b97; }

/* account portal */
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; align-items:start; }
.account-card { padding:1.3rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.account-card--wide { margin-top:1rem; }
.account-card h2 { margin:0 0 .2rem; }
.account-card h3 { margin:0 0 .9rem; font-size:1.05rem; }
.account-card--center { text-align:center; max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem; align-items:center; }
.account-profile { display:flex; align-items:center; gap:1rem; }
.account-profile__avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.account-profile > div { margin-right:auto; display:flex; flex-direction:column; gap:.15rem; }
.account-error { color:#ff8b97; font-size:.85rem; }
.account-list { display:grid; gap:.6rem; }
.account-row { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-top:1px solid var(--line); }
.account-row:first-child { border-top:none; }
.account-row__title { display:block; font-weight:600; color:var(--text); }
a.account-row__title:hover { color:var(--accent); }
.account-row__meta { display:block; color:var(--text-2); font-size:.8rem; margin-top:.15rem; }
.account-row__body { margin:.5rem 0 0; color:var(--text-2); font-size:.88rem; white-space:pre-wrap; word-break:break-word; }
.account-row__actions { display:flex; gap:.5rem; flex-shrink:0; align-items:flex-start; }
.account-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.account-chip { padding:.4rem .8rem; border:1px solid var(--line-2); border-radius:999px; color:var(--text); font-size:.83rem; font-weight:600; }
.account-chip:hover { border-color:var(--accent); }

/* The phone demo is portrait — cap its width so it renders as a phone, not a
   giant tall frame scaled up to the full column. */
.demo[data-demo="/demos/xs-phone/"] { max-width: 440px; margin-inline: auto; }

/* Star rating shown on script cards, filled by ratings.js from the reviews API. */
.card__rating { color: #f5c04b; font-weight: 700; margin-left: .45rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.card__rating-count { color: #8a94a6; font-weight: 600; }

/* "New" badge on the newest script's card. */
.card__shot { position: relative; }
.card__new {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--card-accent, #7ce8ff); color: #05070a;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px -6px var(--card-accent, #7ce8ff);
}

/* Live GitHub stats on cards — downloads + last updated, filled by github.js. */
.card__stats { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; font-size:.76rem; color:#8a94a6; margin-top:.15rem; }
.card__stat b { color:#cdd6e3; font-weight:700; }
.card__stat + .card__stat::before { content:"·"; margin-right:.6rem; color:#4c5563; }

/* Per-script changelog (changelog.js fills it from /api/releases). */
.changelog { display:flex; flex-direction:column; gap:1.1rem; }
.changelog-item { border:1px solid var(--line, #1b2130); border-radius:14px; padding:1.1rem 1.25rem; background:rgba(255,255,255,.015); }
.changelog-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.changelog-tag { font-family:var(--mono, ui-monospace, monospace); font-weight:700; color:var(--page-accent, #7ce8ff); font-size:.9rem; }
.changelog-pre { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:#ffb45f; border:1px solid rgba(255,180,95,.4); border-radius:999px; padding:.1rem .45rem; }
.changelog-date { color:#8a94a6; font-size:.82rem; margin-left:auto; }
.changelog-body { color:#c7d0dd; font-size:.92rem; line-height:1.55; }
.changelog-body h4 { margin:.7rem 0 .3rem; font-size:.9rem; color:#e7edf5; }
.changelog-body ul { margin:.3rem 0 .3rem 1.1rem; }
.changelog-body li { margin:.15rem 0; }
.changelog-body p { margin:.4rem 0; }
.changelog-body code { font-family:var(--mono, ui-monospace, monospace); font-size:.85em; background:rgba(255,255,255,.06); padding:.05rem .3rem; border-radius:5px; }
.changelog-link { display:inline-block; margin-top:.7rem; font-weight:600; font-size:.85rem; color:var(--page-accent, #7ce8ff); }
.changelog-all { display:inline-block; margin-top:.4rem; color:#8a94a6; font-size:.85rem; }


/* ─────────────────────────────────────────────────────────────────────────────
   Hero photograph.

   The page was one flat near-black field. A real image behind the headline is
   what gives it presence — the skyline mask that was here first was too quiet
   to count as a background.

   Three stacked layers, because a photo on its own would bury the text:
     1. the image, held back so it reads as atmosphere rather than a picture
     2. a scrim that goes fully opaque at the bottom, so the hero dissolves into
        the page instead of ending on a hard edge
     3. an accent wash, so each script page tints its own hero
   ───────────────────────────────────────────────────────────────────────────── */

.hero { isolation: isolate; }

.hero__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.hero__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-photo, url('/assets/img/hero-photo.jpg'));
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    /* Held well back: full strength fights the headline and the card grid. */
    opacity: .42;
    filter: saturate(.8) contrast(1.06);
    transform: scale(1.04);
}

.hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Reads down into the page so there is no seam at the hero's base. */
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ink) 62%, transparent) 0%,
            color-mix(in srgb, var(--ink) 32%, transparent) 38%,
            color-mix(in srgb, var(--ink) 78%, transparent) 78%,
            var(--ink) 100%),
        /* Corners down, so the headline holds the middle. */
        radial-gradient(115% 85% at 50% 38%, transparent 42%, color-mix(in srgb, var(--ink) 72%, transparent) 100%),
        /* The page accent, which differs per script. */
        radial-gradient(70% 55% at 50% 40%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
}

/* The photo needs room to be worth having. */
.hero { padding-top: clamp(4.5rem, 11vw, 9rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); }

@media (max-width: 860px) {
    .hero__photo::before { opacity: .3; background-position: center 45%; }
}

/* Homepage "the deal" copy. Plain paragraphs rather than the numbered feature
   grid that was here — four boxes of identical-length sentences read as filler
   whoever wrote them. The grid itself is still used on script pages, where a
   list of features genuinely is a list. */
.deal { max-width: 68ch; }
.deal p { color: var(--text-2); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.1rem; }
.deal p:last-child { margin-bottom: 0; }
/* First line carries a bit more weight, so the block has a way in. */
.deal p:first-child { color: var(--text); font-size: 1.1rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   Screenshot lightbox.

   gallery.js has been in the bundle for a while looking for a [data-lightbox]
   container that no page rendered, so it returned on its first line and every
   screenshot was a button that did nothing. This is the missing half.
   ───────────────────────────────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    backdrop-filter: blur(6px);
}

.lightbox.is-open { display: grid; }

.lightbox__figure { margin: 0; max-width: min(1100px, 100%); }

.lightbox__figure img {
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: var(--r);
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
}

.lightbox__figure figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .9rem;
    padding-top: 1rem;
}
.lightbox__figure figcaption strong { color: var(--text); font-size: 1.02rem; }
.lightbox__figure figcaption span { color: var(--text-2); font-size: .92rem; }
.lightbox__count { margin-left: auto; font-family: var(--mono); color: var(--text-3); font-size: .82rem; }

.lightbox button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    color: var(--text);
    cursor: pointer;
    line-height: 1;
    transition: .15s;
}
.lightbox button:hover { border-color: var(--accent); color: var(--accent); }

.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.5rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 1.9rem; }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 700px) {
    /* Side arrows would sit on top of the image at this width. */
    .lightbox__nav { top: auto; bottom: clamp(1rem, 4vw, 2rem); transform: none; }
    .lightbox__figure img { max-height: 60vh; }
}