:root {
    --nsg-ink: oklch(22% 0.035 245);
    --nsg-muted: oklch(44% 0.032 245);
    --nsg-paper: oklch(98% 0.012 90);
    --nsg-surface: oklch(99% 0.008 95);
    --nsg-line: oklch(84% 0.026 245);
    --nsg-blue: oklch(50% 0.14 242);
    --nsg-red: oklch(55% 0.17 32);
}

body {
    color: var(--nsg-ink);
    background: var(--nsg-paper) !important;
}

body *:not(.generated-app-image):not(.tile-visual):not(.portfolio-sprite) {
    background-image: none !important;
}

.nav {
    background: var(--nsg-surface) !important;
    backdrop-filter: none !important;
}

.hero,
.apps,
.feature-band,
.features,
.security,
.syntax,
.cta,
main {
    background: var(--nsg-paper) !important;
}

.hero-art,
.hero-stage,
.hero-image,
.hero-panel,
.wood-stack,
.jewel-case {
    background: var(--nsg-surface) !important;
    border: 1px solid var(--nsg-line) !important;
    box-shadow: none !important;
    transform: none !important;
}

.app-tile,
.feature-card,
.card,
.contact-card,
.highlight-box,
.trust-card,
.rack-card,
.object-card,
.markdown-sheet,
.news-window {
    background: var(--nsg-surface) !important;
    border: 1px solid var(--nsg-line) !important;
    box-shadow: none !important;
}

.button,
.cta-button,
.app-store-button {
    box-shadow: none !important;
}

.generated-app-image,
.tile-visual,
.portfolio-sprite {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 12rem;
    border: 1px solid var(--nsg-line);
    background-image: url("assets/app-image-sprite.png");
    background-repeat: no-repeat;
    background-size: 300% 200%;
    background-color: var(--nsg-surface);
}

.hero .generated-app-image,
.hero .portfolio-sprite {
    min-height: clamp(18rem, 34vw, 32rem);
}

.hero .portfolio-sprite,
.portfolio-sprite {
    aspect-ratio: 3 / 2;
}

.tile-visual {
    min-height: 10rem;
    margin: 0 0 1rem;
}

.app-filling-bird { background-position: 0% 0%; }
.app-agres { background-position: 50% 0%; }
.app-otus { background-position: 100% 0%; }
.app-treo { background-position: 0% 100%; }
.app-stovie { background-position: 50% 100%; }
.app-crown-jewel { background-position: 100% 100%; }

.app-page-links,
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.app-page-links a,
.legal-links a {
    color: inherit;
    font-weight: 800;
}

.nsg-support-page {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 3rem);
}

.nsg-support-page h1 {
    max-width: 12ch;
}

.nsg-support-page section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--nsg-line);
}

.nsg-support-page li + li {
    margin-top: 0.45rem;
}

.nsg-mark {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    max-width: 100%;
    margin-top: 0.4rem;
    padding: 0.58rem 0.7rem;
    border: 1px solid oklch(80% 0.024 245 / 0.9);
    border-radius: 999px;
    background: oklch(99% 0.014 95 / 0.97);
    box-shadow: 0 10px 24px oklch(24% 0.03 245 / 0.08);
}

.nsg-mark img {
    display: inline-block;
    width: auto;
    height: 1.9rem;
    max-width: 100%;
    vertical-align: middle;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .generated-app-image,
    .portfolio-sprite {
        min-height: 14rem;
    }
}