/* ===========================================================
       Theme: Aesthetic Name — multi-tab. Palette + font + decoration
       all switch via [data-aesthetic="X"] on body.pk-page--ans.
       =========================================================== */
    body.pk-page--ans {
        /* defaults — overridden per data-aesthetic below */
        --ans-ink:        #1d1b16;
        --ans-bg:         #f7f3ea;
        --ans-bg-2:       #efe9d8;
        --ans-card:       #ffffff;
        --ans-fg:         #1d1b16;
        --ans-fg-mut:     #5e574a;
        --ans-fg-dim:     #8d8470;
        --ans-accent:     #7a9a6f;
        --ans-accent-2:   #c98a8c;
        --ans-border:     rgba(122,154,111,0.24);

        --ans-font-h:     'Cormorant Garamond', serif;
        --ans-font-b:     'Inter', system-ui, sans-serif;
        --ans-font-tag:   'Caveat', cursive;

        background: var(--ans-bg);
        color: var(--ans-fg);
        font-family: var(--ans-font-b);
        min-height: 100vh;
        position: relative;
        transition: background .35s ease, color .25s ease;
    }
    body.pk-page--ans::before {
        content: '';
        position: fixed; inset: 0;
        z-index: 0; pointer-events: none;
        background: radial-gradient(700px 480px at 18% 14%, var(--ans-glow-1, transparent), transparent 60%),
                    radial-gradient(620px 420px at 86% 84%, var(--ans-glow-2, transparent), transparent 60%);
        transition: background .35s ease;
    }
    body.pk-page--ans > *:not(.pk-nav):not(.pk-mnav) { position: relative; z-index: 1; }
    body.pk-page--ans > .pk-nav { z-index: 50; }

    body.pk-page--ans .pk-nav {
        background: var(--ans-nav-bg, rgba(247,243,234,0.92)) !important;
        border-bottom: 1px solid var(--ans-border) !important;
        transition: background .25s ease;
    }
    body.pk-page--ans .pk-nav__links a,
    body.pk-page--ans .pk-nav__dd-trigger { color: var(--ans-fg) !important; }
    body.pk-page--ans .pk-nav__links a:hover,
    body.pk-page--ans .pk-nav__dd-trigger:hover,
    body.pk-page--ans .pk-nav__dd.is-open .pk-nav__dd-trigger,
    body.pk-page--ans .pk-nav__dd-trigger.is-current { color: var(--ans-accent) !important; }
    body.pk-page--ans .pk-nav__lang {
        background: var(--ans-lang-bg, rgba(0,0,0,0.04)) !important;
        border-color: var(--ans-border) !important;
    }
    body.pk-page--ans .pk-nav__lang a { color: var(--ans-fg-mut) !important; }
    body.pk-page--ans .pk-nav__lang a:hover { color: var(--ans-fg) !important; }
    body.pk-page--ans .pk-nav__lang a.is-active {
        background: var(--ans-accent) !important;
        color: var(--ans-tab-active-fg, #fff) !important;
    }
    body.pk-page--ans .pk-nav__burger {
        background: var(--ans-lang-bg, rgba(0,0,0,0.04)) !important;
        border-color: var(--ans-border) !important;
        color: var(--ans-fg) !important;
    }
    body.pk-page--ans .pk-nav__burger:hover {
        background: var(--ans-lang-bg-hover, rgba(0,0,0,0.08)) !important;
    }

    /* ============== HERO ============== */
    .ans-hero {
        text-align: center;
        padding: 56px 24px 18px;
        max-width: 920px;
        margin: 0 auto;
    }
    .ans-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--ans-font-tag);
        font-size: 1.2rem;
        color: var(--ans-accent);
    }
    .ans-hero__h1 {
        font-family: var(--ans-font-h);
        font-size: clamp(2.4rem, 6vw, 4.4rem);
        font-weight: 600;
        line-height: 1.05;
        margin: 8px 0 14px;
        color: var(--ans-fg);
        transition: font-family .25s ease, color .25s ease;
    }
    .ans-hero__h1 em { color: var(--ans-accent-2); font-style: italic; }
    .ans-hero__sub {
        max-width: 660px;
        margin: 0 auto;
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--ans-fg-mut);
    }

    /* ============== TABS (chips) ============== */
    .ans-tabs-wrap {
        max-width: 1080px;
        margin: 18px auto 0;
        padding: 0 16px;
    }
    .ans-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 6px 4px 14px;
        scrollbar-width: thin;
    }
    .ans-tabs::-webkit-scrollbar { height: 4px; }
    .ans-tabs::-webkit-scrollbar-thumb { background: var(--ans-border); border-radius: 2px; }
    .ans-tab {
        appearance: none;
        cursor: pointer;
        flex-shrink: 0;
        font-family: var(--ans-font-b);
        font-size: 0.92rem;
        font-weight: 500;
        padding: 9px 16px;
        background: transparent;
        color: var(--ans-fg-mut);
        border: 1px solid var(--ans-border);
        border-radius: 999px;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .ans-tab:hover { color: var(--ans-fg); border-color: var(--ans-accent); }
    .ans-tab[aria-selected="true"] {
        background: var(--ans-accent);
        color: var(--ans-tab-active-fg, #fff);
        border-color: var(--ans-accent);
        font-weight: 600;
    }

    /* ============== INPUT + GENERATE ============== */
    .ans-form {
        max-width: 720px;
        margin: 6px auto 0;
        padding: 0 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .ans-input {
        flex: 1;
        min-width: 220px;
        padding: 14px 18px;
        font-family: var(--ans-font-b);
        font-size: 1rem;
        color: var(--ans-fg);
        background: var(--ans-card);
        border: 1.5px solid var(--ans-border);
        border-radius: 10px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .ans-input::placeholder { color: var(--ans-fg-dim); }
    .ans-input:focus {
        border-color: var(--ans-accent);
        box-shadow: 0 0 0 3px var(--ans-focus-ring, rgba(122,154,111,0.18));
    }
    .ans-generate {
        appearance: none; cursor: pointer;
        font-family: var(--ans-font-b);
        font-size: 0.95rem;
        font-weight: 600;
        padding: 12px 22px;
        background: var(--ans-accent);
        color: var(--ans-tab-active-fg, #fff);
        border: 0;
        border-radius: 10px;
        display: inline-flex; align-items: center; gap: 8px;
        transition: filter .15s ease, transform .15s ease;
    }
    .ans-generate:hover { filter: brightness(1.08); transform: translateY(-1px); }

    /* ============== RESULT GRID ============== */
    .ans-results-wrap {
        max-width: 1080px;
        margin: 28px auto 0;
        padding: 0 24px;
    }
    .ans-results {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
    }
    .ans-result {
        background: var(--ans-card);
        border: 1px solid var(--ans-border);
        border-radius: 14px;
        padding: 16px 18px;
        position: relative;
        transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
        animation: ans-pop .35s cubic-bezier(.34,1.56,.64,1) backwards;
    }
    @keyframes ans-pop {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .ans-result:hover {
        border-color: var(--ans-accent);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -16px var(--ans-shadow, rgba(0,0,0,0.18));
    }
    .ans-result__name {
        font-family: var(--ans-font-h);
        font-size: clamp(1.3rem, 2.4vw, 1.7rem);
        font-weight: 600;
        line-height: 1.15;
        color: var(--ans-fg);
        margin: 0 0 4px;
    }
    .ans-result__bio {
        font-family: var(--ans-font-tag);
        font-size: 1.05rem;
        color: var(--ans-accent-2);
        line-height: 1.35;
    }
    .ans-result__copy {
        position: absolute;
        top: 10px; right: 10px;
        appearance: none;
        cursor: pointer;
        background: transparent;
        color: var(--ans-fg-dim);
        border: 1px solid var(--ans-border);
        border-radius: 8px;
        font-size: 11px;
        padding: 4px 8px;
        transition: background .15s ease, color .15s ease;
    }
    .ans-result__copy:hover { background: var(--ans-accent); color: var(--ans-tab-active-fg, #fff); border-color: var(--ans-accent); }
    .ans-result__copy.is-success { background: var(--ans-accent-2) !important; color: #fff !important; border-color: var(--ans-accent-2) !important; }

    /* ============== SECTIONS ============== */
    .ans-section {
        max-width: 760px;
        margin: 56px auto 0;
        padding: 0 24px;
    }
    .ans-section__title {
        font-family: var(--ans-font-h);
        font-size: clamp(1.4rem, 3vw, 1.95rem);
        font-weight: 600;
        margin: 0 0 12px;
        color: var(--ans-fg);
    }
    .ans-section__body {
        font-size: 1rem;
        line-height: 1.78;
        color: var(--ans-fg-mut);
    }
    .ans-section__body em { color: var(--ans-accent-2); font-style: italic; font-weight: 500; }
    .ans-section__body strong { color: var(--ans-fg); font-weight: 600; }

    /* ============== FAQ ============== */
    .ans-faq { display: grid; gap: 6px; }
    .ans-faq__item {
        background: var(--ans-card);
        border: 1px solid var(--ans-border);
        border-radius: 12px;
        overflow: hidden;
    }
    .ans-faq__q {
        padding: 13px 16px;
        font-family: var(--ans-font-h);
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        color: var(--ans-fg);
        list-style: none;
    }
    .ans-faq__q::-webkit-details-marker { display: none; }
    .ans-faq__q::after {
        content: '+';
        color: var(--ans-accent-2);
        font-size: 1.3rem;
        transition: transform .2s ease;
    }
    .ans-faq__item[open] .ans-faq__q::after { transform: rotate(45deg); }
    .ans-faq__a { padding: 0 16px 14px; line-height: 1.7; color: var(--ans-fg-mut); }

    /* ============== RELATED OVERRIDES ============== */
    body.pk-page--ans .pk-related {
        max-width: 880px;
        margin: 64px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--ans .pk-related h2 {
        font-family: var(--ans-font-h);
        font-weight: 600;
        color: var(--ans-fg);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--ans-border);
    }
    body.pk-page--ans .pk-related .pk-calc-related a {
        background: var(--ans-card);
        border: 1px solid var(--ans-border);
        color: var(--ans-fg);
        border-radius: 10px;
        font-family: var(--ans-font-b);
        font-weight: 500;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    }
    body.pk-page--ans .pk-related .pk-calc-related a:hover {
        background: var(--ans-accent);
        color: var(--ans-tab-active-fg, #fff);
        border-color: var(--ans-accent);
        transform: translateY(-1px);
    }
    body.pk-page--ans .pk-related .pk-calc-related a i { color: var(--ans-accent-2); }
    body.pk-page--ans .pk-related .pk-calc-related a:hover i { color: var(--ans-tab-active-fg, #fff); }

    /* ===========================================================
       PER-AESTHETIC PALETTES
       Each definition: --ans-ink, --ans-bg, --ans-bg-2, --ans-card,
       --ans-fg, --ans-fg-mut, --ans-fg-dim, --ans-accent,
       --ans-accent-2, --ans-border, --ans-glow-1, --ans-glow-2,
       --ans-font-h, --ans-font-b, --ans-font-tag, --ans-tab-active-fg
       =========================================================== */

    /* cottagecore — paper, sage, dusty rose */
    body.pk-page--ans[data-aesthetic="cottagecore"] {
        --ans-bg: #fbf7ee; --ans-bg-2: #f3ecdb; --ans-card: #fff8e6;
        --ans-fg: #3a3026; --ans-fg-mut: #6e5e4d; --ans-fg-dim: #9b8a78;
        /* sage darkened to keep cream tab text readable (≥4.5:1); the previous
           #7a9a6f only hit ~2.9:1 against #fff8e6. */
        --ans-accent: #4f6b46; --ans-accent-2: #c98a8c;
        --ans-border: rgba(79,107,70,0.30);
        --ans-glow-1: rgba(79,107,70,0.12); --ans-glow-2: rgba(201,138,140,0.10);
        --ans-font-h: 'Cormorant Garamond', serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Caveat', cursive;
        --ans-tab-active-fg: #fff8e6;
    }

    /* dark-academia — ivory ink on espresso */
    body.pk-page--ans[data-aesthetic="dark-academia"] {
        --ans-bg: #1a1612; --ans-bg-2: #1f1a14; --ans-card: #251f17;
        --ans-fg: #efe6d3; --ans-fg-mut: #b3a98d; --ans-fg-dim: #7a715b;
        --ans-accent: #b89968; --ans-accent-2: #c45c4e;
        --ans-border: rgba(184,153,104,0.28);
        --ans-glow-1: rgba(184,153,104,0.12); --ans-glow-2: rgba(196,92,78,0.10);
        --ans-nav-bg: rgba(26,22,18,0.92);
        --ans-font-h: 'Playfair Display', serif;
        --ans-font-b: 'Cormorant Garamond', serif;
        --ans-font-tag: 'Cormorant Garamond', serif;
        --ans-tab-active-fg: #1a1612;
        --ans-shadow: rgba(0,0,0,0.5);
    }

    /* y2k — chrome lilac, neon */
    body.pk-page--ans[data-aesthetic="y2k"] {
        --ans-bg: #f5e8ff; --ans-bg-2: #ede0ff; --ans-card: #ffffff;
        --ans-fg: #2b1242; --ans-fg-mut: #6f4a92; --ans-fg-dim: #a586c4;
        --ans-accent: #ff5fbe; --ans-accent-2: #4cc7ff;
        --ans-border: rgba(255,95,190,0.28);
        --ans-glow-1: rgba(255,95,190,0.20); --ans-glow-2: rgba(76,199,255,0.20);
        --ans-font-h: 'Bungee', sans-serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Inter', sans-serif;
        /* dark plum on neon pink — white only hit ~2.7:1. */
        --ans-tab-active-fg: #2b1242;
    }

    /* fairycore — soft pink/lavender, ethereal */
    body.pk-page--ans[data-aesthetic="fairycore"] {
        --ans-bg: #fdf3f7; --ans-bg-2: #f3e7f5; --ans-card: #ffffff;
        --ans-fg: #4d2843; --ans-fg-mut: #84566f; --ans-fg-dim: #b292a6;
        --ans-accent: #c084d3; --ans-accent-2: #f29eb9;
        --ans-border: rgba(192,132,211,0.28);
        --ans-glow-1: rgba(192,132,211,0.14); --ans-glow-2: rgba(242,158,185,0.14);
        --ans-font-h: 'Cormorant Garamond', serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Caveat', cursive;
        /* dark plum on lilac — white only hit ~3:1. */
        --ans-tab-active-fg: #4d2843;
    }

    /* kawaii — cotton candy pastels */
    body.pk-page--ans[data-aesthetic="kawaii"] {
        --ans-bg: #fff0f6; --ans-bg-2: #ffe2ee; --ans-card: #ffffff;
        --ans-fg: #6b2849; --ans-fg-mut: #a16585; --ans-fg-dim: #cd9bb1;
        --ans-accent: #ff8ab9; --ans-accent-2: #87d8ff;
        --ans-border: rgba(255,138,185,0.32);
        --ans-glow-1: rgba(255,138,185,0.18); --ans-glow-2: rgba(135,216,255,0.18);
        --ans-font-h: 'Bungee', sans-serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Caveat', cursive;
        /* dark plum on the soft pink accent — white only hit ~2.2:1. */
        --ans-tab-active-fg: #6b2849;
    }

    /* grunge — washed denim & rust */
    body.pk-page--ans[data-aesthetic="grunge"] {
        --ans-bg: #1c1d1e; --ans-bg-2: #232425; --ans-card: #2a2b2c;
        --ans-fg: #e6e2dd; --ans-fg-mut: #a8a39c; --ans-fg-dim: #74706a;
        /* lighter rust so the dark tab text reads ≥4.5:1 against it */
        --ans-accent: #d97a52; --ans-accent-2: #6f7d5a;
        --ans-border: rgba(217,122,82,0.34);
        --ans-glow-1: rgba(217,122,82,0.12); --ans-glow-2: rgba(111,125,90,0.10);
        --ans-nav-bg: rgba(28,29,30,0.92);
        --ans-font-h: 'Inter', sans-serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Inter', sans-serif;
        --ans-tab-active-fg: #1c1d1e;
        --ans-shadow: rgba(0,0,0,0.5);
    }

    /* vaporwave — synth purple/cyan */
    body.pk-page--ans[data-aesthetic="vaporwave"] {
        --ans-bg: #1a0a3a; --ans-bg-2: #221345; --ans-card: #2a1a55;
        --ans-fg: #f5f0ff; --ans-fg-mut: #c0aef0; --ans-fg-dim: #8270b8;
        --ans-accent: #ff77e9; --ans-accent-2: #36e3ff;
        --ans-border: rgba(255,119,233,0.30);
        --ans-glow-1: rgba(255,119,233,0.20); --ans-glow-2: rgba(54,227,255,0.18);
        --ans-nav-bg: rgba(26,10,58,0.92);
        --ans-font-h: 'Press Start 2P', monospace;
        --ans-font-b: 'VT323', monospace;
        --ans-font-tag: 'VT323', monospace;
        --ans-tab-active-fg: #1a0a3a;
        --ans-shadow: rgba(0,0,0,0.5);
    }

    /* celestial — midnight + gold */
    body.pk-page--ans[data-aesthetic="celestial"] {
        --ans-bg: #0a0d28; --ans-bg-2: #11163a; --ans-card: #161b48;
        --ans-fg: #f5e9c8; --ans-fg-mut: #b9b29a; --ans-fg-dim: #6c6750;
        --ans-accent: #f0c14b; --ans-accent-2: #b47cff;
        --ans-border: rgba(240,193,75,0.28);
        --ans-glow-1: rgba(180,124,255,0.18); --ans-glow-2: rgba(240,193,75,0.10);
        --ans-nav-bg: rgba(10,13,40,0.92);
        --ans-font-h: 'Cinzel', serif;
        --ans-font-b: 'Cormorant Garamond', serif;
        --ans-font-tag: 'Cormorant Garamond', serif;
        --ans-tab-active-fg: #0a0d28;
        --ans-shadow: rgba(0,0,0,0.5);
    }

    /* soft-girl — peach + cream */
    body.pk-page--ans[data-aesthetic="soft-girl"] {
        --ans-bg: #fff5ec; --ans-bg-2: #ffe9d6; --ans-card: #ffffff;
        --ans-fg: #6e3c2a; --ans-fg-mut: #a07360; --ans-fg-dim: #c9a796;
        --ans-accent: #f29879; --ans-accent-2: #e2b1c4;
        --ans-border: rgba(242,152,121,0.30);
        --ans-glow-1: rgba(242,152,121,0.16); --ans-glow-2: rgba(226,177,196,0.16);
        --ans-font-h: 'Cormorant Garamond', serif;
        --ans-font-b: 'Inter', sans-serif;
        --ans-font-tag: 'Caveat', cursive;
        /* warm brown on peach — white only hit ~2.2:1. */
        --ans-tab-active-fg: #6e3c2a;
    }

    /* cyberpunk — neon city */
    body.pk-page--ans[data-aesthetic="cyberpunk"] {
        --ans-bg: #060614; --ans-bg-2: #0c0c22; --ans-card: #11112a;
        --ans-fg: #e8e8ff; --ans-fg-mut: #9696c0; --ans-fg-dim: #585880;
        --ans-accent: #00f5ff; --ans-accent-2: #ff2bd6;
        --ans-border: rgba(0,245,255,0.28);
        --ans-glow-1: rgba(255,43,214,0.18); --ans-glow-2: rgba(0,245,255,0.18);
        --ans-nav-bg: rgba(6,6,20,0.92);
        --ans-font-h: 'VT323', monospace;
        --ans-font-b: 'JetBrains Mono', monospace;
        --ans-font-tag: 'JetBrains Mono', monospace;
        --ans-tab-active-fg: #060614;
        --ans-shadow: rgba(0,0,0,0.6);
    }

    @media (max-width: 640px) {
        .ans-hero { padding: 36px 18px 14px; }
        .ans-section { margin-top: 44px; }
        .ans-form { padding: 0 16px; }
    }