/* Shared pieces of the chapter pages: section headings, tiles, buttons, the
   photo hero and its plan card, steps, and the components the game, company
   and utility pages are built from. The panels themselves (.chapters,
   .chapter) and the pill buttons (.hh-action) live in main.css. */

.fp {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;
}

:where(.fp) a:not([class]) {
    color: #93c5fd;
}

.fp-eyebrow,
.fp-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
}

.fp-eyebrow {
    display: block;
}

.fp-heading {
    margin: 16px 0 0;
    max-width: 900px;
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: #fff;
    text-wrap: balance;
}

.fp-intro {
    margin: 16px 0 0;
    max-width: 700px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
}

.fp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}

.fp-grid > * {
    grid-column: span 12;
}

.fp-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 28px;
    border-radius: 20px;
    background: rgba(30, 41, 59, 0.6);
}

.fp-title {
    margin: 14px 0 0;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

.fp-text {
    margin: 10px 0 0;
    max-width: 580px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
}

.fp-button {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.fp-button:hover {
    background: #1d4ed8;
    color: #fff;
}

.fp-button.is-quiet {
    background: rgba(255, 255, 255, 0.07);
}

.fp-button.is-quiet:hover {
    background: rgba(255, 255, 255, 0.12);
}

.fp-button.is-outline {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

.fp-button.is-outline:hover {
    background: rgba(255, 255, 255, 0.07);
}

.fp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #60a5fa;
    text-decoration: none;
}

.fp-link:hover {
    color: #93c5fd;
}

.fp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 0;
    padding: 20px 0 0;
    list-style: none;
}

.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.fp-chip img {
    width: 18px;
    height: 18px;
    margin-left: -4px;
    border-radius: 4px;
}

.fp-pixel {
    image-rendering: pixelated;
}

/* Hero: a headline over a night sky, with the plan's facts beside it */
.fp-hero {
    position: relative;
    overflow: hidden;
    padding-block: 88px 80px;
}

.fp-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.fp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(8, 12, 20, 0.52);
}

.fp-hero > .container {
    position: relative;
    z-index: 2;
}

.fp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.fp-hero-title {
    margin: 0;
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.fp-hero-text {
    margin: 24px 0 0;
    max-width: 580px;
    font-size: 1.25rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.fp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.fp-hero-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 32px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.fp-hero-proof strong {
    font-weight: 600;
    color: #fff;
}

.fp-plan {
    box-sizing: border-box;
    padding: 28px;
    border-radius: 24px;
    background: #121a28;
    box-shadow: 0 24px 48px rgba(3, 7, 18, 0.5);
    outline: 1px solid rgba(255, 255, 255, 0.08);
}

.fp-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 8px;
}

.fp-plan-price strong {
    font-size: 56px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.fp-plan-price span {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.62);
}

.fp-plan-list {
    margin: 22px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fp-plan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 15px;
}

.fp-plan-row svg {
    flex: none;
    color: rgba(255, 255, 255, 0.5);
}

.fp-plan-row dt {
    flex: 1;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.68);
}

.fp-plan-row dd {
    margin: 0;
    font-weight: 600;
}

.fp-plan-note {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.58);
}

.fp-notice {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(245, 185, 66, 0.12);
    color: #f7cc72;
    font-size: 14px;
    line-height: 1.45;
}

.fp-notice svg {
    flex: none;
    margin-top: 1px;
}

.fp .fp-notice a {
    color: #fde68a;
    text-decoration: underline;
}

.fp-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.fp-small-title {
    margin: 20px 0 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fp-extras {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fp-extra {
    display: flex;
    gap: 14px;
}

.fp-extra-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.fp-extra h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.fp-extra p {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.64);
}

.fp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.fp-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.fp-step {
    display: flex;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fp-step:hover {
    background: rgba(255, 255, 255, 0.04);
}

.fp-step[aria-selected="true"] {
    background: rgba(96, 165, 250, 0.08);
}

.fp-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    font-weight: 700;
}

.fp-step[aria-selected="true"] .fp-step-number {
    background: #2563eb;
}

.fp-step-title {
    display: block;
    font-size: 17px;
    font-weight: 600;
}

.fp-step-text {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.64);
}

.fp-split .fp-heading {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
}

.fp-split .fp-button {
    margin-top: 28px;
}

.fp-split-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.fp-split-actions .fp-button {
    margin-top: 0;
}

.fp-note {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
    .fp-extras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .fp-grid > .fp-span-7 {
        grid-column: span 7;
    }

    .fp-grid > .fp-span-6 {
        grid-column: span 6;
    }

    .fp-grid > .fp-span-5 {
        grid-column: span 5;
    }

    .fp-grid > .fp-span-4 {
        grid-column: span 4;
    }

    .fp-grid > .fp-span-3 {
        grid-column: span 3;
    }

    .fp-hero-grid {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 64px;
    }

    .fp-extras {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fp-split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 48px;
    }
}

@media (max-width: 767.98px) {
    .fp-hero {
        padding-block: 48px;
    }

    .fp-hero-text {
        font-size: 1.05rem;
    }

    .fp-hero-proof {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 14px;
    }

    .fp-hero-proof .hh-dot {
        display: none;
    }

    .fp-plan,
    .fp-tile {
        padding: 22px;
    }
}

/* A centred hero, for pages without a card beside the headline */
.fp-hero.is-center {
    text-align: center;
}

.fp-hero.is-center .fp-hero-title,
.fp-hero.is-center .fp-hero-text {
    margin-left: auto;
    margin-right: auto;
}

.fp-hero.is-center .fp-hero-actions,
.fp-hero.is-center .fp-hero-proof {
    justify-content: center;
}

/* A grid that opens its panel needs no space above it */
.container > .fp-grid:first-child {
    margin-top: 0;
}

.fp-hero .fp-eyebrow + .fp-hero-title {
    margin-top: 16px;
}

/* The pill and square buttons on a <button> */
button.hh-action {
    border: 0;
    cursor: pointer;
}

button.hh-action:disabled,
button.fp-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* A step number on its own in a tile is always the active blue */
.fp-tile > .fp-step-number {
    background: #2563eb;
}

/* Small labels on cards */
.fp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.fp-tag.is-blue {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
}

.fp-tag.is-green {
    background: rgba(59, 214, 113, 0.14);
    color: #86efac;
}

/* Filter buttons over a list: the pressed one is white */
.fp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fp-filter:hover {
    background: rgba(255, 255, 255, 0.1);
}

.fp-filter[aria-pressed="true"] {
    background: #fff;
    color: #0b111b;
}

.fp-filter-count {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.fp-filter[aria-pressed="true"] .fp-filter-count {
    color: rgba(11, 17, 27, 0.55);
}

.fp-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

/* Game pages: the hero's plan card */
.fp-plan-price + .fp-plan-note {
    margin-top: 6px;
}

.fp-plan > .fp-button {
    width: 100%;
    margin-top: 20px;
}

/* Game pages: the plan picker */
.fp-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
}

.fp-picker-end .falix-select {
    width: auto;
    min-width: 120px;
}

.fp-picker-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.fp-seg {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.fp-seg button {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.fp-seg button.active {
    background: #fff;
    color: #0b111b;
}

.fp-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.fp-cycle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fp-cycle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fp-cycle:has(input:checked) {
    background: #fff;
    color: #0b111b;
}

.fp-cycle:has(input:focus-visible) {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.fp-cycle-save {
    font-weight: 600;
    color: #4ade80;
}

.fp-cycle:has(input:checked) .fp-cycle-save {
    color: #15803d;
}

.fp-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.fp-plan-card.is-featured {
    background: rgba(37, 99, 235, 0.12);
    box-shadow: inset 0 0 0 1.5px rgba(96, 165, 250, 0.6);
}

.fp-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fp-plan-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.fp-plan-for {
    margin: 6px 0 0;
    min-height: 44px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
}

.fp-plan-cost {
    margin-top: 20px;
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.fp-plan-per {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.6);
}

.fp-plan-billed {
    min-height: 20px;
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.fp-plan-card .fp-plan-list {
    margin: 18px 0 22px;
}

.fp-plan-card .fp-button {
    margin-top: auto;
}

.fp-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.fp-builder label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
}

.fp-builder select {
    width: 100%;
    margin-bottom: 22px;
}

/* Game servers catalog */
.fp-games {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.fp-game {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 24px;
    overflow: hidden;
    border-radius: 20px;
    background: #1e293b;
    color: #fff;
    text-decoration: none;
}

.fp-game[hidden] {
    display: none;
}

.fp-game img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fp-game::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 17, 27, 0) 30%, rgba(11, 17, 27, 0.92) 100%);
}

.fp-game:hover {
    color: #fff;
}

.fp-game:hover img {
    transform: scale(1.03);
}

.fp-game > :not(img) {
    position: relative;
    z-index: 1;
}

.fp-game > .fp-game-badges {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 6px;
}

.fp-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(11, 17, 27, 0.72);
    font-size: 12.5px;
    font-weight: 700;
}

.fp-badge.is-free {
    background: #3bd671;
    color: #0b111b;
}

.fp-game-name {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.fp-game-text {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.fp-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.72);
}

.fp-game.is-cta {
    justify-content: space-between;
    background: #2b50ff;
}

.fp-game.is-cta::after {
    display: none;
}

.fp-game.is-cta .fp-icon-tile {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.fp-game.is-cta .fp-link {
    margin-top: 14px;
    color: #ffcc00;
}

/* Numbers, a timeline of years, people */
.fp-numbers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* The number scales with its tile, so a long live count stays inside it */
.fp-number {
    container-type: inline-size;
}

.fp-number strong {
    display: block;
    font-size: clamp(1.75rem, 16cqi, 3rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.fp-number > span {
    display: block;
    margin-top: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.66);
}

.fp-years {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 16px;
    margin: 48px 0 0;
    padding: 0 0 8px;
    overflow-x: auto;
    list-style: none;
}

.fp-year-number {
    font-size: 15px;
    font-weight: 700;
    color: #60a5fa;
}

.fp-year-rule {
    height: 2px;
    margin: 14px 0 18px;
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0));
}

.fp-year .fp-small-title {
    margin: 0;
}

.fp-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.fp-person {
    padding: 20px 16px;
    border-radius: 20px;
    background: rgba(30, 41, 59, 0.6);
    text-align: center;
}

.fp-person img {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
}

.fp-person strong {
    display: block;
    margin-top: 12px;
    font-size: 15.5px;
}

.fp-person span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
}

.fp-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 20px;
    margin: 20px 0 0;
    font-size: 15.5px;
}

.fp-facts dt {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.fp-facts dd {
    margin: 0 0 10px;
}

/* Blog posts and articles */
.fp-posts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.fp-post {
    height: 100%;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.fp-post:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #fff;
}

.fp-post[hidden] {
    display: none;
}

.fp-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
}

.fp-post-title {
    margin: 14px 0 0;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fp-post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
}

.fp-feature-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(30, 41, 59, 0.6);
    color: #fff;
    text-decoration: none;
}

.fp-feature-post:hover {
    color: #fff;
}

.fp-feature-post img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.fp-feature-post-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
}

.fp-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    justify-content: center;
}

.fp-toc {
    display: none;
    font-size: 14px;
}

.fp-toc-title {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fp-toc a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.fp-toc a:hover,
.fp-toc a.active {
    border-color: #60a5fa;
    color: #fff;
}

.fp-prose {
    font-size: 17.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

.fp-prose h2 {
    margin: 44px 0 12px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    scroll-margin-top: calc(var(--falix-nav-height) + 24px);
}

.fp-prose h3 {
    margin: 28px 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.fp-prose p {
    margin: 0 0 18px;
}

.fp-prose ul,
.fp-prose ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.fp-prose li + li {
    margin-top: 8px;
}

.fp-prose strong {
    color: #fff;
}

.fp-callout {
    margin: 24px 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.1);
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.fp-callout > :last-child {
    margin-bottom: 0;
}

/* Changelog: month headings over a line of entries */
.fp-month {
    margin: 40px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fp-month:first-child {
    margin-top: 0;
}

.fp-timeline {
    position: relative;
    margin: 24px 0 0;
    padding: 0 0 0 36px;
    list-style: none;
}

.fp-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 11px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.fp-entry + .fp-entry {
    margin-top: 12px;
}

.fp-entry[hidden] {
    display: none;
}

.fp-entry-dot {
    position: absolute;
    top: 26px;
    left: -36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #121a28;
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.6);
    color: #60a5fa;
    font-size: 10px;
}

.fp-entry .fp-tile {
    overflow: visible;
}

.fp-entry img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 18px;
    border-radius: 12px;
}

/* Starting a server: one address field, then one status line */
.fp-addr {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    min-height: 68px;
    margin: 36px auto 0;
    padding: 8px 8px 8px 26px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.fp-addr input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0b111b;
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    outline: none;
}

.fp-addr input::placeholder {
    color: #94a3b8;
}

.fp-addr-suffix {
    font-size: 17px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

.fp-addr .fp-button {
    border-radius: 999px;
}

.fp-addr:focus-within {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(96, 165, 250, 0.6);
}

.fp-addr-hint {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

.fp-status-line {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    min-height: 56px;
    margin: 16px auto 0;
    padding: 8px 22px;
    border-radius: 999px;
    background: #121a28;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.fp-status-line[hidden] {
    display: none;
}

.fp-status-line strong {
    font-weight: 600;
    color: #fff;
}

.fp-status-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f5b942;
}

.fp-status-line.is-waiting .fp-status-dot {
    animation: fp-pulse 1.2s ease-in-out infinite;
}

.fp-status-line.is-on .fp-status-dot {
    background: #3bd671;
    box-shadow: 0 0 0 4px rgba(59, 214, 113, 0.16);
}

.fp-status-line.is-off .fp-status-dot {
    background: #f87171;
}

@keyframes fp-pulse {
    50% {
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-status-line.is-waiting .fp-status-dot {
        animation: none;
    }
}

/* A console log in the panel's console colours */
.fp-console {
    margin: 0;
    padding: 22px 24px;
    border-radius: 16px;
    background: #141421;
    outline: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #e8ecf1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
}

.fp-console .is-falix {
    font-weight: 600;
    color: #0ea5e9;
}

.fp-console .is-time {
    color: #7d8193;
}

.fp-console .is-thread {
    color: #7e93c4;
}

.fp-console .is-warn {
    color: orange;
}

.fp-console .is-error {
    font-weight: 600;
    color: #ef4444;
}

.fp-console .is-prompt {
    font-weight: 700;
    color: #2c7be5;
}

.fp-error {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

@media (min-width: 768px) {
    .fp-plans,
    .fp-games,
    .fp-posts,
    .fp-numbers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fp-team {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fp-facts {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 10px 20px;
    }

    .fp-facts dd {
        margin: 0;
    }
}

@media (min-width: 992px) {
    .fp-builder {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .fp-games,
    .fp-posts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fp-game.is-wide {
        grid-column: span 2;
        min-height: 380px;
    }

    .fp-team {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .fp-feature-post {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        min-height: 360px;
    }

    .fp-feature-post-body {
        padding: 36px;
    }

    .fp-article {
        grid-template-columns: 220px minmax(0, 720px);
        gap: 64px;
    }

    .fp-toc {
        position: sticky;
        top: calc(var(--falix-nav-height) + 24px);
        display: block;
        align-self: start;
    }

    .fp-error {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 48px;
    }
}

@media (min-width: 1200px) {
    .fp-plans,
    .fp-numbers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .fp-hero.is-center .fp-hero-proof {
        align-items: center;
    }

    .fp-addr {
        flex-wrap: wrap;
        padding: 10px;
        border-radius: 24px;
    }

    .fp-addr input {
        padding-left: 12px;
    }

    .fp-addr .fp-button {
        width: 100%;
    }

    .fp-status-line {
        border-radius: 20px;
    }
}