/* Percogna.com. One stylesheet, no framework. Colors are tokens on :root so dark mode is only a
   second set of values. */

/* The brand colors come from the logo: indigo #423e87 and the cyan of its core, #6ee7f9. The cyan
   is too light for text on a light page, so --accent-2 is a darker cyan for that and --glow is the
   logo's own for decoration. The CSP allows no font from another origin, so the type is the
   system's: Segoe UI Variable on Windows 11, with its display cut for headings. */

:root {
    --bg: #fbfaf7;
    --surface: #ffffff;
    --surface-quiet: #f4f2ee;
    --ink: #17161e;
    --muted: #575566;
    --line: #e6e3dc;
    --line-strong: #d2cee4;
    --accent: #423e87;
    --accent-hover: #34306e;
    --accent-ink: #ffffff;
    --accent-soft: #ecebf8;
    --accent-2: #0e7490;
    --glow: #6ee7f9;
    --chip-pin: #7a75c4;
    --dot: rgb(66 62 135 / 16%);
    --hero-glow-a: rgb(66 62 135 / 14%);
    --hero-glow-b: rgb(110 231 249 / 22%);
    --text-gradient: linear-gradient(110deg, #423e87 10%, #6a5cd6 50%, #0e8fb0 90%);
    --error: #b3261e;
    --shadow: 0 1px 2px rgb(20 18 40 / 5%), 0 6px 20px rgb(20 18 40 / 6%);
    --shadow-lift: 0 2px 6px rgb(20 18 40 / 8%), 0 20px 44px rgb(20 18 40 / 14%);
    --radius: 16px;
    --radius-small: 10px;
    --gutter: 1rem;
    --header-height: 4.25rem;
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f0e14;
        --surface: #17161f;
        --surface-quiet: #13121a;
        --ink: #ecebf3;
        --muted: #a4a1b6;
        --line: #272535;
        --line-strong: #36334d;
        --accent: #aaa5f2;
        --accent-hover: #c5c1f7;
        --accent-ink: #13121a;
        --accent-soft: #221f3b;
        --accent-2: #67e8f9;
        --chip-pin: #5b56aa;
        --dot: rgb(170 165 242 / 13%);
        --hero-glow-a: rgb(110 100 230 / 20%);
        --hero-glow-b: rgb(103 232 249 / 10%);
        --text-gradient: linear-gradient(110deg, #b7b2f5 10%, #c9b8ff 45%, #67e8f9 90%);
        --error: #f2b8b5;
        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
        --shadow-lift: 0 2px 6px rgb(0 0 0 / 35%), 0 20px 44px rgb(0 0 0 / 45%);
    }
}

@media (min-width: 48rem) {
    :root {
        --gutter: 2rem;
    }
}

/* Base */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

main {
    flex: 1;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
}

h3 {
    font-size: 1.15rem;
    font-weight: 650;
}

/* Filled from --text-gradient. Falls back to the accent color where background-clip is missing. */
.text-gradient {
    color: var(--accent);
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--accent);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--accent-hover);
}

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

/* The one width limit on public page content, the same as the header and footer. Text, forms and
   cards inside it run its full width: do not cap them with a narrower max-width of their own. */
.container {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.prose ul {
    padding-left: 1.2em;
}

.prose li {
    margin-bottom: 0.6em;
    padding-left: 0.25em;
}

.prose li::marker {
    color: var(--accent);
}

.prose h2:not(:first-child) {
    margin-top: 1.6em;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.9rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 6px;
    z-index: 10;
}

.skip-link:focus {
    top: 1rem;
}

/* Header and navigation */

/* Sticky, and translucent where the browser can blur what scrolls under it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        background: color-mix(in srgb, var(--bg) 78%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(14px);
        backdrop-filter: saturate(1.6) blur(14px);
    }
}

.site-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    min-height: var(--header-height);
}

.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
}

/* Sized in em so it tracks the brand text if that ever changes size. */
.brand img {
    width: 1.45em;
    height: 1.45em;
    transition: transform 0.3s ease;
}

.brand:hover {
    color: var(--ink);
}

.brand:hover img {
    transform: rotate(-8deg) scale(1.05);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.site-nav a,
.site-nav .link-button {
    color: var(--muted);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.97rem;
    padding: 0.4rem 0.85rem;
    display: inline-block;
    border: 0;
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav a:hover,
.site-nav .link-button:hover {
    color: var(--ink);
    background: var(--surface-quiet);
}

.site-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
}

.site-nav a.nav-cta {
    color: var(--accent-ink);
    background: var(--accent);
    margin-left: 0.5rem;
    box-shadow: 0 6px 16px -8px var(--accent);
}

.site-nav a.nav-cta:hover,
.site-nav a.nav-cta[aria-current="page"] {
    color: var(--accent-ink);
    background: var(--accent-hover);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    width: 2.75rem;
    height: 2.5rem;
    cursor: pointer;
    color: var(--ink);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    margin: 0 auto;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -6px;
}

.nav-toggle-bars::after {
    top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* Without script the nav simply wraps under the brand. With it, narrow screens get a toggle. The
   breakpoint is the narrowest width that fits the brand and every link on one row (about 821px);
   raise it if a link is added or lengthened. */
@media (max-width: 52rem) {
    .site-header.nav-collapsible .nav-toggle {
        display: block;
    }

    .site-header.nav-collapsible .site-nav {
        display: none;
        width: 100%;
        padding-bottom: 0.75rem;
    }

    .site-header.nav-collapsible.nav-open .site-nav {
        display: block;
    }

    .site-header.nav-collapsible .site-nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header.nav-collapsible .site-nav a,
    .site-header.nav-collapsible .site-nav .link-button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.6rem 0.85rem;
    }

    .site-header.nav-collapsible .site-nav a.nav-cta {
        margin: 0.5rem 0 0;
        text-align: center;
    }
}

/* Footer */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface-quiet);
    margin-top: 4rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.site-footer-grid {
    display: grid;
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 48rem) {
    .site-footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.site-footer .brand {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.site-footer p {
    margin: 0;
    max-width: 30ch;
}

.footer-heading {
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    margin: 0 0 0.9rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.site-footer a {
    color: var(--muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Sections */

/* Every page opens with a hero: two soft glows over the page color, and a dot grid that fades out
   away from the top right. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(56rem 28rem at 88% -12%, var(--hero-glow-a), transparent 70%),
        radial-gradient(40rem 22rem at 55% -20%, var(--hero-glow-b), transparent 70%),
        var(--bg);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.2px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 90% at 85% 0%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse 75% 90% at 85% 0%, #000 20%, transparent 70%);
    pointer-events: none;
}

.hero-small {
    padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
}

.hero-small h1 {
    font-size: clamp(2.1rem, 4.6vw, 3rem);
}

.lead {
    font-size: clamp(1.15rem, 2.1vw, 1.35rem);
    line-height: 1.55;
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.eyebrow a {
    text-decoration: none;
}

.eyebrow a:hover {
    text-decoration: underline;
}

.tagline {
    font-size: 1.15rem;
    font-weight: 600;
}

.section {
    padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}

/* Two plain sections in a row would otherwise stack both paddings. */
.section:not(.section-quiet) + .section:not(.section-quiet) {
    padding-top: 0;
}

.section-quiet {
    background: var(--surface-quiet);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.two-column {
    display: grid;
    gap: 2rem;
}

@media (min-width: 52rem) {
    .two-column {
        grid-template-columns: 3fr 2fr;
        gap: 3.5rem;
        align-items: start;
    }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.more-coming {
    margin-top: 2rem;
    text-align: center;
}

/* The home page hero: the pitch, and beside it on wide screens the logo's chip grown into a
   circuit, with light running out along its traces. */

.hero-home h1 {
    font-size: clamp(2.6rem, 6.5vw, 4.5rem);
}

.hero-split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.hero-art {
    display: none;
}

@media (min-width: 56rem) {
    .hero-split {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 3rem;
    }

    .hero-art {
        display: block;
        margin: -2rem -1rem -2rem 0;
    }
}

.chip {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chip-trace {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chip-node {
    fill: var(--bg);
    stroke: var(--line-strong);
    stroke-width: 3;
}

.chip-pulse {
    fill: none;
    stroke: var(--glow);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12 188;
    stroke-dashoffset: 12;
    filter: drop-shadow(0 0 4px var(--glow));
    animation: chip-pulse 4.2s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.chip-pulse:nth-child(3n + 2) {
    animation-duration: 5.1s;
    animation-delay: 1.3s;
}

.chip-pulse:nth-child(3n + 3) {
    animation-duration: 4.6s;
    animation-delay: 2.6s;
}

.chip-pulse:nth-child(4n) {
    animation-delay: 0.7s;
}

@keyframes chip-pulse {
    0% {
        stroke-dashoffset: 12;
    }

    55%,
    100% {
        stroke-dashoffset: -100;
    }
}

.chip-pin {
    fill: var(--chip-pin);
}

.chip-body {
    filter: drop-shadow(0 24px 40px rgb(66 62 135 / 40%));
}

.chip-ring {
    fill: none;
    stroke: #ffffff;
    stroke-width: 8;
}

.chip-core {
    fill: #6ee7f9;
    animation: chip-core 3.2s ease-in-out infinite;
}

@keyframes chip-core {
    0%,
    100% {
        filter: drop-shadow(0 0 4px rgb(110 231 249 / 50%));
    }

    50% {
        filter: drop-shadow(0 0 18px rgb(110 231 249 / 95%));
    }
}

/* A closing call to action: a dark indigo band, the same in either theme. */

.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: calc(var(--radius) + 6px);
    background:
        radial-gradient(34rem 20rem at 100% 0%, rgb(110 231 249 / 30%), transparent 70%),
        linear-gradient(135deg, #2a2663 0%, #423e87 55%, #3b3a8f 100%);
    color: #ffffff;
    box-shadow: var(--shadow-lift);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 16%) 1.2px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
    mask-image: linear-gradient(90deg, transparent 30%, #000);
}

@media (min-width: 52rem) {
    .cta-band {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 3rem;
    }
}

.cta-band h2 {
    color: #ffffff;
}

.cta-band p {
    color: rgb(255 255 255 / 80%);
    margin: 0;
}

.cta-band .button {
    background: #ffffff;
    border-color: #ffffff;
    color: #2a2663;
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / 50%);
}

.cta-band .button:hover {
    background: #e7e5fb;
    border-color: #e7e5fb;
    color: #2a2663;
}

/* The MogriChess page opens on a dark, warm banner in the game's own gold, whatever the theme.
   The tokens are redefined for the banner, so everything inside it follows. */

.hero-game {
    --ink: #f5f0e6;
    --muted: #c3bbab;
    --line: rgb(255 255 255 / 10%);
    --accent: #e8c170;
    --accent-hover: #f3d696;
    --accent-ink: #1c1507;
    --accent-soft: rgb(232 193 112 / 14%);
    --dot: rgb(232 193 112 / 12%);
    color: var(--ink);
    border-bottom: 0;
    background:
        radial-gradient(48rem 30rem at 78% 40%, rgb(232 193 112 / 16%), transparent 70%),
        radial-gradient(40rem 24rem at 0% 100%, rgb(66 62 135 / 30%), transparent 70%),
        linear-gradient(180deg, #0a090d 0%, #151219 100%);
}

.hero-game .lead {
    color: var(--muted);
}

.hero-game-grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 56rem) {
    .hero-game-grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 3.5rem;
    }
}

.hero-game-art img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 8%),
        0 30px 80px -20px rgb(0 0 0 / 85%),
        0 0 80px -20px rgb(232 193 112 / 30%);
}

/* Buttons */

.button {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px var(--accent);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px var(--accent);
}

.button:active {
    transform: translateY(1px);
}

.button-quiet {
    background: transparent;
    color: var(--accent);
    box-shadow: none;
}

.button-quiet:hover {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
}

/* Cards */

.card-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 44rem) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 60rem) {
    .card-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card,
.feature {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.feature:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
}

.card img,
.feature img {
    width: 100%;
    aspect-ratio: 1232 / 706;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card:hover img,
.feature:hover img,
.card:hover .card-art-apps svg {
    transform: scale(1.04);
}

/* The apps card's drawing, which fills its box the way a screenshot would. */
.card-art-apps svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card-art-apps .app-window {
    filter: drop-shadow(0 16px 24px rgb(0 0 0 / 35%));
}

.card-body,
.feature-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-body h2 {
    font-size: 1.55rem;
    margin-bottom: 0.4em;
}

.card-body p,
.feature-body p {
    color: var(--muted);
}

.card-body .card-link,
.feature-body .card-link {
    margin-top: auto;
}

.card-link {
    color: var(--accent);
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

/* A drawn arrow rather than a glyph, so it looks the same in every font. */
.card-link::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.card:hover .card-link::after,
.feature:hover .card-link::after,
.news-item:hover .card-link::after {
    transform: translateX(4px) rotate(45deg);
}

/* The software card has no screenshot, so it shows a few lines of C# in Visual Studio's dark
   theme colors instead. Always dark, whatever the page theme, because that is what it imitates.
   The type is sized in container units so the whole snippet fits the card at any width, with the
   same proportions as the MogriChess image beside it. */
.card-art {
    aspect-ratio: 1232 / 706;
    position: relative;
    overflow: hidden;
}

.card-art-code {
    background: #1e1e1e;
    container-type: inline-size;
    display: flex;
    align-items: center;
}

.card-art-code pre {
    margin: 0;
    padding: 0 1.2em;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    font-size: 2.85cqi;
    line-height: 1.45;
    color: #dcdcdc;
    white-space: pre;
}

.card-art-code .ln {
    color: #2b91af;
}

.card-art-code .kw {
    color: #569cd6;
}

.card-art-code .ctl {
    color: #d8a0df;
}

.card-art-code .ty {
    color: #4ec9b0;
}

.card-art-code .fn {
    color: #dcdcaa;
}

.card-art-code .id {
    color: #9cdcfe;
}

.card-art-code .cm {
    color: #57a64a;
}

@media (min-width: 52rem) {
    .feature {
        flex-direction: row;
    }

    .feature img {
        width: 55%;
        flex: none;
    }

    .feature-body {
        padding: 2.5rem 2.75rem;
        justify-content: center;
    }

    .feature-body h2 {
        font-size: clamp(1.9rem, 3vw, 2.4rem);
    }
}

.feature .eyebrow {
    color: var(--accent-2);
}

.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.panel h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5em;
}

.panel p {
    color: var(--muted);
    margin: 0;
}

/* An icon tile at the top of a panel. The icons are 24-unit line drawings in the markup. */
.panel-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

.panel-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A list with a check in a soft circle in front of each item. */
.checklist,
.facts,
.prose .checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist li,
.facts li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 0.9rem;
}

.checklist li::before,
.facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.checklist li::after,
.facts li::after {
    content: "";
    position: absolute;
    left: 0.47rem;
    top: calc(0.2em + 0.33rem);
    width: 0.4rem;
    height: 0.62rem;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
}

.facts {
    padding: 1.5rem 1.5rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Game page rows: text beside a gameplay clip, the clip switching sides from row to row on wide
   screens. */

.showcase {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
}

.showcase-row {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 52rem) {
    .showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .showcase-row:nth-child(even) > .clip {
        order: -1;
    }
}

.clip {
    margin: 0;
    position: relative;
}

.clip video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #000;
    box-shadow: var(--shadow-lift);
}

.clip figcaption {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.6rem;
}

/* Added by site.js in place of the browser's own controls. Shows while paused, and on hover or
   focus while playing. */
.clip-toggle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    background: rgb(10 10 16 / 60%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.clip:hover .clip-toggle,
.clip-toggle:focus-visible,
.clip-paused .clip-toggle {
    opacity: 1;
}

.clip-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.3rem;
    height: 0.9rem;
    margin: -0.45rem 0 0 -0.4rem;
    background: #fff;
    box-shadow: 0.5rem 0 0 #fff;
}

.clip-paused .clip-toggle::after {
    width: 0;
    height: 0;
    margin: -0.5rem 0 0 -0.25rem;
    background: none;
    box-shadow: none;
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent #fff;
}

/* Screenshot gallery. Each thumbnail links to the full image, so it works without script; with
   script the full image opens in a dialog instead. */

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.gallery a {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-quiet);
}

.gallery img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery a:hover img {
    transform: scale(1.03);
}

.viewer {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(92vw, 1600px);
    max-height: 92vh;
    color: #fff;
}

.viewer::backdrop {
    background: rgb(10 10 16 / 88%);
}

.viewer figure {
    margin: 0;
}

.viewer img {
    max-width: 100%;
    max-height: calc(92vh - 4rem);
    width: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.viewer figcaption {
    text-align: center;
    padding: 0.75rem 3rem 0;
    font-size: 0.95rem;
}

.viewer-button {
    position: fixed;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    width: 2.75rem;
    height: 2.75rem;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.viewer-button:hover {
    background: rgb(255 255 255 / 22%);
}

.viewer-close {
    top: 1rem;
    right: 1rem;
}

.viewer-prev,
.viewer-next {
    top: 50%;
    transform: translateY(-50%);
}

.viewer-prev {
    left: 1rem;
}

.viewer-next {
    right: 1rem;
}

/* Trailer: a poster and a play button that link to YouTube until clicked. */

.trailer {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 16 / 9;
    background: #000;
}

.trailer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.trailer:hover img {
    opacity: 0.95;
}

.trailer-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    margin: -2.25rem 0 0 -2.25rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--shadow-lift);
    transition: transform 0.2s ease;
}

.trailer-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.8rem 0 0.8rem 1.3rem;
    border-color: transparent transparent transparent #fff;
}

.trailer:hover .trailer-play {
    transform: scale(1.06);
}

.trailer-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
}

/* Contact form */

.form {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* The contact form, as a card of its own. */
.form-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-card .form {
    margin-bottom: 1.25rem;
}

.form-card > p:last-child {
    margin: 0;
}

.field {
    display: grid;
    gap: 0.35rem;
}

.field label {
    font-weight: 600;
}

.field input,
.field textarea {
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-small);
    padding: 0.75rem 0.9rem;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.field input:hover,
.field textarea:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
}

.field textarea {
    resize: vertical;
    min-height: 10rem;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.field input.input-validation-error,
.field textarea.input-validation-error {
    border-color: var(--error);
}

.field-error,
.form-errors {
    color: var(--error);
    font-size: 0.95rem;
}

.form-errors ul {
    margin: 0;
    padding-left: 1.2em;
}

.form-errors.validation-summary-valid {
    display: none;
}

.form .button {
    justify-self: start;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.check input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
}

/* The news post form's slug box, with the fixed part of the address shown in front of it. */
.input-prefix {
    display: flex;
    align-items: stretch;
}

.input-prefix span {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    background: var(--surface-quiet);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: var(--muted);
}

.field .input-prefix input {
    border-radius: 0 8px 8px 0;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-quiet);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.05em 0.3em;
}

/* News */

.news-list {
    display: grid;
    gap: 1.25rem;
}

.news-item {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* An accent bar down the left edge, grown in on hover. */
.news-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--text-gradient);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.news-item:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
}

.news-item:hover::before {
    transform: scaleY(1);
}

.news-item time {
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.news-item h2 {
    margin: 0.35rem 0 0.5rem;
}

.news-item p {
    color: var(--muted);
}

.news-body {
    font-size: 1.1rem;
}

.news-body h2,
.news-body h3 {
    margin-top: 1.8em;
}

.news-body blockquote {
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1.25em;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}

.news-body img {
    border-radius: 8px;
}

.news-body pre {
    background: var(--surface-quiet);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.news-body pre code {
    background: none;
    border: 0;
    padding: 0;
}

.pager {
    margin-top: 2rem;
}

.pager ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.pager a {
    border: 1px solid var(--line);
    background: var(--surface);
}

.pager a:hover {
    background: var(--accent-soft);
}

.pager .pager-current {
    background: var(--accent);
    color: var(--accent-ink);
}

.pager .pager-disabled,
.pager .pager-gap {
    color: var(--muted);
}

.pager .pager-disabled {
    opacity: 0.5;
}

/* Admin */

.admin-main {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* The admin area's own menu, at the top of the page body under the site header. */
.admin-nav {
    margin: -1rem 0 2rem;
    border-bottom: 1px solid var(--line);
}

.admin-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.admin-nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-nav a:hover {
    color: var(--ink);
}

.admin-nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.admin-main h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.admin-main h2 {
    margin-top: 2rem;
}

.admin-main .form {
    max-width: 52rem;
}

.admin-login {
    max-width: 24rem;
    margin: 3rem auto;
}

.notice {
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.admin-stats {
    margin-bottom: 1rem;
}

.admin-stat {
    display: flex;
    flex-direction: column;
    color: var(--muted);
    text-decoration: none;
}

.admin-stat:hover {
    color: var(--muted);
    border-color: var(--accent);
}

.admin-stat-count {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.admin-stat-waiting {
    color: var(--accent);
}

.table-scroll {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.admin-table th {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table tr.unread td {
    font-weight: 700;
}

.nowrap {
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0 0 1.5rem;
}

.admin-details dt {
    color: var(--muted);
}

.admin-details dd {
    margin: 0;
}

.admin-message {
    font-family: var(--font);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

.link-button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.35rem 0;
    font: inherit;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}

.link-button:hover {
    color: var(--ink);
}

.button-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

.button-danger {
    background: transparent;
    border-color: var(--error);
    color: var(--error);
}

.button-danger:hover {
    background: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.admin-main > .inline-form .button-danger {
    margin-top: 2rem;
}

.admin-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Analytics */

.analytics-range {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.analytics-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.analytics-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.analytics-dates .field input {
    padding: 0.4rem 0.6rem;
}

.analytics-chart {
    margin: 0 0 1.5rem;
}

.analytics-chart-plot {
    display: block;
    width: 100%;
    height: 12rem;
}

.analytics-chart-grid,
.analytics-chart-baseline {
    stroke: var(--line-strong);
    stroke-width: 1;
}

.analytics-chart-hit {
    fill: transparent;
}

.analytics-chart-bar {
    fill: var(--accent);
}

.analytics-chart-day:hover .analytics-chart-hit,
.analytics-chart-day:focus-visible .analytics-chart-hit {
    fill: var(--accent-soft);
}

.analytics-chart-day:hover .analytics-chart-bar,
.analytics-chart-day:focus-visible .analytics-chart-bar {
    fill: var(--accent-hover);
}

/* Drawn over the bars, so it must not take the hover and clicks meant for the day under it. */
.analytics-chart-visitors {
    pointer-events: none;
}

.analytics-chart-visitors line {
    stroke-linecap: round;
}

.analytics-chart-visitors-halo line {
    stroke: var(--bg);
    stroke-width: 5;
}

.analytics-chart-visitors-halo circle {
    fill: var(--bg);
    r: 5px;
}

.analytics-chart-visitors-line line {
    stroke: var(--accent-2);
    stroke-width: 2;
}

.analytics-chart-visitors-line circle {
    fill: var(--accent-2);
}

.analytics-chart-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-chart-legend {
    display: flex;
    gap: 1rem;
}

.analytics-chart-key {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.35rem;
    border-radius: 3px;
    vertical-align: -0.1em;
}

.analytics-chart-key-views {
    background: var(--accent);
}

.analytics-chart-key-visitors {
    height: 3px;
    border-radius: 2px;
    vertical-align: 0.2em;
    background: var(--accent-2);
}

.analytics-chart-axis {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.35rem;
}

.analytics-details {
    margin-top: 2rem;
}

.analytics-details summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Scroll reveal. Script adds reveal-pending only to elements below the fold, so nothing already
   on screen blinks out and back in. */

.reveal-pending {
    opacity: 0;
    transform: translateY(14px);
}

.reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

    .card:hover,
    .feature:hover,
    .news-item:hover,
    .card:hover img,
    .feature:hover img,
    .card:hover .card-art-apps svg,
    .button:hover,
    .brand:hover img,
    .gallery a:hover img,
    .trailer:hover .trailer-play {
        transform: none;
    }

    .chip-pulse {
        display: none;
    }

    .chip-core {
        animation: none;
    }

    .reveal-pending {
        opacity: 1;
        transform: none;
    }
}