/* ==========================================================================
   taipeicams — theme stylesheet
   Built from templates/taipeicams/style.h7b68afa239-md. Source file is deliberately
   UNPREFIXED: internal/registry/css_namespace.h7b68afa239-go rewrites every class
   selector and every custom property with this site's own CSS prefix when
   it compiles into the site's asset folder. Two consequences worth knowing
   before editing:
     - never add an @import or a url() containing a dot+letters (".webp"),
       the class-selector regex would rewrite it into garbage;
     - the config-driven variables below (--color-*, --font-*, --grid-*)
       must keep these exact names: layout.h7b68afa239-php emits the same names, already
       prefixed, from registry.h7b68afa239-sites.h7b68afa239-dataset_rules.h7b68afa239-style.

   Layers: page < surface < card, never pure black. Pink is the brand
   accent, violet the secondary highlight; both stay on actions, status and
   small details rather than washing over whole panels.
   ========================================================================== */

/* style.h7b68afa239-md's fontUrl. It lives here rather than in dataset_rules.h7b68afa239-style
   because this site runs serving_mode = live_api_only: index.h7b68afa239-php sets
   $manifest = [] before anything reads it, so avos-compat.h7b68afa239-php's
   `$style = $manifest['style'] ?? []` is always empty and layout.h7b68afa239-php's
   font <link> never renders. The fonts belong to the theme anyway.
   @import is safe here despite the class-selector rewriting - the
   namespace compiler matches @import statements first and protects them
   from both detection and replacement (css_namespace.go's cssImportRe),
   precisely so font URLs survive. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
    color-scheme: dark;

    /* Semantic tokens derived from the per-site palette. Each falls back to
       the style.h7b68afa239-md value when a site has no override configured. */
    --h7b68afa239-ink: var(--h7b68afa239-color-text, #f5f7ff);
    --h7b68afa239-ink-soft: var(--h7b68afa239-color-muted, #9298ad);
    --h7b68afa239-page: var(--h7b68afa239-color-bg, #0b0d15);
    --h7b68afa239-surface: var(--h7b68afa239-color-surface, #171a29);
    --h7b68afa239-panel: var(--h7b68afa239-color-card, #1d2133);
    --h7b68afa239-bar: var(--h7b68afa239-color-header, #11131f);
    --h7b68afa239-brand: var(--h7b68afa239-color-accent, #ff4f9a);
    --h7b68afa239-brand-ink: var(--h7b68afa239-color-accent-text, #ffffff);
    --h7b68afa239-brand-2: #8b5cf6;

    --h7b68afa239-line: rgba(245, 247, 255, 0.09);
    --h7b68afa239-line-strong: rgba(245, 247, 255, 0.16);
    --h7b68afa239-glass: rgba(23, 26, 41, 0.72);
    --h7b68afa239-lift: 0 10px 30px rgba(5, 6, 12, 0.45);
    --h7b68afa239-lift-soft: 0 2px 10px rgba(5, 6, 12, 0.3);

    --h7b68afa239-round: var(--h7b68afa239-grid-radius, 18px);
    --h7b68afa239-round-sm: 12px;
    --h7b68afa239-round-pill: 999px;

    --h7b68afa239-display: "Space Grotesk", var(--h7b68afa239-font-family, "Manrope"), system-ui, sans-serif;
    --h7b68afa239-step: 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);

    --h7b68afa239-shell: 1520px;
    --h7b68afa239-gutter: clamp(14px, 2.4vw, 30px);

    --h7b68afa239-free: #32d583;
    --h7b68afa239-group: #8b5cf6;
    --h7b68afa239-private: #ff4f9a;
    --h7b68afa239-away: #f5b942;
    --h7b68afa239-gone: #687086;
}

/* Light mode is its own designed palette — warm paper, clean white
   surfaces, navy ink — not an inversion of the dark tokens. Both the
   explicit toggle and the OS preference are honoured; the attribute
   selector outranks the inline :root block layout.h7b68afa239-php injects, so a
   configured dark palette never leaks into the light theme. */
:root[data-theme="light"] {
    color-scheme: light;
    --h7b68afa239-ink: #171a29;
    --h7b68afa239-ink-soft: #5d6478;
    --h7b68afa239-page: #f7f4f2;
    --h7b68afa239-surface: #ffffff;
    --h7b68afa239-panel: #ffffff;
    --h7b68afa239-bar: #fffdfc;
    --h7b68afa239-line: rgba(23, 26, 41, 0.1);
    --h7b68afa239-line-strong: rgba(23, 26, 41, 0.18);
    --h7b68afa239-glass: rgba(255, 255, 255, 0.78);
    --h7b68afa239-lift: 0 10px 28px rgba(23, 26, 41, 0.1);
    --h7b68afa239-lift-soft: 0 1px 4px rgba(23, 26, 41, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        color-scheme: light;
        --h7b68afa239-ink: #171a29;
        --h7b68afa239-ink-soft: #5d6478;
        --h7b68afa239-page: #f7f4f2;
        --h7b68afa239-surface: #ffffff;
        --h7b68afa239-panel: #ffffff;
        --h7b68afa239-bar: #fffdfc;
        --h7b68afa239-line: rgba(23, 26, 41, 0.1);
        --h7b68afa239-line-strong: rgba(23, 26, 41, 0.18);
        --h7b68afa239-glass: rgba(255, 255, 255, 0.78);
        --h7b68afa239-lift: 0 10px 28px rgba(23, 26, 41, 0.1);
        --h7b68afa239-lift-soft: 0 1px 4px rgba(23, 26, 41, 0.08);
    }
}

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

body {
    margin: 0;
    padding: 0;
    background: var(--h7b68afa239-page);
    color: var(--h7b68afa239-ink);
    font-family: var(--h7b68afa239-font-family, "Manrope"), system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--h7b68afa239-font-size, 15px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* One quirky constant: a soft off-centre pink/violet wash behind the page,
   fixed so it never repaints while scrolling. */
body::before {
    content: "";
    position: fixed;
    inset: -30vh -20vw auto -20vw;
    height: 80vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 52% at 22% 0%, rgba(255, 79, 154, 0.16), transparent 68%),
        radial-gradient(38% 46% at 82% 8%, rgba(139, 92, 246, 0.14), transparent 70%);
}

a {
    color: inherit;
    text-decoration: none;
}

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

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

h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.9rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    font-weight: 600;
}

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

.h7b68afa239-container {
    width: 100%;
    max-width: var(--h7b68afa239-shell);
    margin: 0 auto;
    padding: 0 var(--h7b68afa239-gutter);
}

.h7b68afa239-text-center {
    text-align: center;
}

/* ---------- Header ---------------------------------------------------- */

.h7b68afa239-site-header,
.h7b68afa239-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--h7b68afa239-bar) 88%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--h7b68afa239-line);
}

.h7b68afa239-header-container {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 28px);
    min-height: 64px;
}

.h7b68afa239-logo {
    font-family: var(--h7b68afa239-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

/* The dot is the whole brand mark — deliberately off-baseline. */
.h7b68afa239-logo::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 4px 11px 11px 11px;
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
    transform: translateY(-2px) rotate(-8deg);
}

.h7b68afa239-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.h7b68afa239-nav::-webkit-scrollbar {
    display: none;
}

.h7b68afa239-nav a,
.h7b68afa239-menu-label {
    display: inline-block;
    padding: 8px 13px;
    border-radius: var(--h7b68afa239-round-pill);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--h7b68afa239-ink-soft);
    white-space: nowrap;
    transition: color var(--h7b68afa239-step), background-color var(--h7b68afa239-step);
}

.h7b68afa239-nav a:hover,
.h7b68afa239-menu-label:hover {
    color: var(--h7b68afa239-ink);
    background: color-mix(in srgb, var(--h7b68afa239-ink) 8%, transparent);
}

.h7b68afa239-nav a.h7b68afa239-active,
.h7b68afa239-active > a {
    color: var(--h7b68afa239-brand-ink);
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
}

.h7b68afa239-menu-dropdown {
    position: relative;
}

.h7b68afa239-menu-dropdown > div,
.h7b68afa239-menu-dropdown ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round-sm);
    box-shadow: var(--h7b68afa239-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--h7b68afa239-step), transform var(--h7b68afa239-step), visibility var(--h7b68afa239-step);
    z-index: 70;
}

.h7b68afa239-menu-dropdown:hover > div,
.h7b68afa239-menu-dropdown:focus-within > div,
.h7b68afa239-menu-dropdown:hover ul,
.h7b68afa239-menu-dropdown:focus-within ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.h7b68afa239-menu-advert {
    padding: 10px;
}

.h7b68afa239-header-actions {
    flex: 0 0 auto;
}

.h7b68afa239-theme-toggle {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--h7b68afa239-ink-soft);
    background: color-mix(in srgb, var(--h7b68afa239-ink) 6%, transparent);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round-pill);
    cursor: pointer;
    transition: color var(--h7b68afa239-step), border-color var(--h7b68afa239-step), transform var(--h7b68afa239-step);
}

.h7b68afa239-theme-toggle:hover {
    color: var(--h7b68afa239-brand);
    border-color: var(--h7b68afa239-line-strong);
    transform: rotate(-12deg);
}

.h7b68afa239-theme-toggle-sun {
    display: none;
}

.h7b68afa239-theme-toggle-moon {
    display: block;
}

:root[data-theme="light"] .h7b68afa239-theme-toggle-sun {
    display: block;
}

:root[data-theme="light"] .h7b68afa239-theme-toggle-moon {
    display: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .h7b68afa239-theme-toggle-sun {
        display: block;
    }

    :root:not([data-theme="dark"]) .h7b68afa239-theme-toggle-moon {
        display: none;
    }
}

/* ---------- Shell ----------------------------------------------------- */

.h7b68afa239-page-body {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding-top: 26px;
    padding-bottom: 56px;
}

.h7b68afa239-sidebar {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round);
    position: sticky;
    top: 84px;
}

.h7b68afa239-main {
    flex: 1 1 auto;
    min-width: 0;
}

.h7b68afa239-section-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 16px;
}

.h7b68afa239-section-header:first-child {
    margin-top: 6px;
}

.h7b68afa239-section-header h1,
.h7b68afa239-section-header h2 {
    margin: 0;
}

.h7b68afa239-subtitle {
    color: var(--h7b68afa239-ink-soft);
    font-size: 0.95rem;
}

.h7b68afa239-count {
    font-family: var(--h7b68afa239-display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--h7b68afa239-brand);
    padding: 3px 10px;
    border-radius: var(--h7b68afa239-round-pill);
    background: color-mix(in srgb, var(--h7b68afa239-brand) 14%, transparent);
}

/* ---------- Model grid ------------------------------------------------ */

.h7b68afa239-models-grid,
.h7b68afa239-card-grid,
.h7b68afa239-photo-grid,
.h7b68afa239-video-models {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(var(--h7b68afa239-grid-columns-mobile, 2), minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 16px);
}

@media (min-width: 480px) {
    .h7b68afa239-models-grid,
    .h7b68afa239-card-grid,
    .h7b68afa239-photo-grid,
    .h7b68afa239-video-models {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

@media (min-width: 768px) {
    .h7b68afa239-models-grid,
    .h7b68afa239-card-grid,
    .h7b68afa239-photo-grid,
    .h7b68afa239-video-models {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (min-width: 1200px) {
    .h7b68afa239-models-grid,
    .h7b68afa239-card-grid,
    .h7b68afa239-photo-grid,
    .h7b68afa239-video-models {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 1600px) {
    .h7b68afa239-models-grid,
    .h7b68afa239-card-grid,
    .h7b68afa239-photo-grid,
    .h7b68afa239-video-models {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

.h7b68afa239-cell,
.h7b68afa239-card,
.h7b68afa239-related-cell,
.h7b68afa239-photo-cell,
.h7b68afa239-advert-cell {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--h7b68afa239-panel);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round);
    box-shadow: var(--h7b68afa239-lift-soft);
    transition: transform var(--h7b68afa239-step), box-shadow var(--h7b68afa239-step), border-color var(--h7b68afa239-step);
}

.h7b68afa239-cell:hover,
.h7b68afa239-card:hover,
.h7b68afa239-related-cell:hover,
.h7b68afa239-photo-cell:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: color-mix(in srgb, var(--h7b68afa239-brand) 45%, var(--h7b68afa239-line-strong));
    box-shadow: var(--h7b68afa239-lift);
}

.h7b68afa239-cell-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, var(--h7b68afa239-ink) 8%, var(--h7b68afa239-panel));
}

.h7b68afa239-cell-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--h7b68afa239-step);
}

.h7b68afa239-cell:hover .h7b68afa239-cell-thumb img {
    transform: scale(1.05);
}

/* Text sits over the image on a controlled bottom gradient, so it stays
   readable without a solid info bar eating card height. */
.h7b68afa239-cell-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    padding: 26px 12px 10px;
    background: linear-gradient(to top, rgba(6, 7, 14, 0.92) 12%, rgba(6, 7, 14, 0.62) 48%, transparent);
    color: #f5f7ff;
}

.h7b68afa239-cell-name {
    flex: 1 1 100%;
    font-family: var(--h7b68afa239-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h7b68afa239-cell-age {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(245, 247, 255, 0.78);
}

.h7b68afa239-cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 9px 10px 11px;
}

.h7b68afa239-birthday-meta {
    padding: 9px 12px 12px;
    font-size: 0.82rem;
    color: var(--h7b68afa239-ink-soft);
}

/* ---------- Badges & status ------------------------------------------- */

.h7b68afa239-badge {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--h7b68afa239-round-pill);
    font-family: var(--h7b68afa239-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(11, 13, 21, 0.68);
    backdrop-filter: blur(6px);
    opacity: var(--h7b68afa239-status-opacity, 1);
}

.h7b68afa239-badge-site {
    top: auto;
    bottom: 9px;
    right: 9px;
    left: auto;
    background: rgba(11, 13, 21, 0.6);
    color: rgba(245, 247, 255, 0.85);
}

.h7b68afa239-badge-featured-grid {
    left: auto;
    right: 9px;
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
}

.h7b68afa239-badge-mini {
    position: static;
    padding: 2px 7px;
    font-size: 0.66rem;
}

.h7b68afa239-badge-model,
.h7b68afa239-badge-photo,
.h7b68afa239-badge-video,
.h7b68afa239-badge-gallery,
.h7b68afa239-badge-post {
    position: static;
    background: color-mix(in srgb, var(--h7b68afa239-brand-2) 22%, transparent);
    color: var(--h7b68afa239-ink);
}

/* Status dot carries the colour; the pill stays dark so a wall of cards
   never turns into a wall of neon. */
.h7b68afa239-status-f::before,
.h7b68afa239-status-freechat::before,
.h7b68afa239-status-g::before,
.h7b68afa239-status-group::before,
.h7b68afa239-status-p::before,
.h7b68afa239-status-private::before,
.h7b68afa239-status-a::before,
.h7b68afa239-status-away::before,
.h7b68afa239-status-offline::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 26%, transparent);
}

.h7b68afa239-status-f,
.h7b68afa239-status-freechat {
    color: var(--h7b68afa239-free);
}

.h7b68afa239-status-g,
.h7b68afa239-status-group {
    color: var(--h7b68afa239-group);
}

.h7b68afa239-status-p,
.h7b68afa239-status-private {
    color: var(--h7b68afa239-private);
}

.h7b68afa239-status-a,
.h7b68afa239-status-away {
    color: var(--h7b68afa239-away);
}

.h7b68afa239-status-offline {
    color: var(--h7b68afa239-gone);
}

/* ---------- Tags ------------------------------------------------------ */

.h7b68afa239-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--h7b68afa239-round-pill);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--h7b68afa239-ink-soft);
    background: color-mix(in srgb, var(--h7b68afa239-ink) 7%, transparent);
    border: 1px solid var(--h7b68afa239-line);
    transition: color var(--h7b68afa239-step), border-color var(--h7b68afa239-step), background-color var(--h7b68afa239-step);
}

a.h7b68afa239-tag:hover {
    color: var(--h7b68afa239-brand);
    border-color: color-mix(in srgb, var(--h7b68afa239-brand) 45%, transparent);
    background: color-mix(in srgb, var(--h7b68afa239-brand) 12%, transparent);
}

.h7b68afa239-tags-container,
.h7b68afa239-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.h7b68afa239-tag-cloud {
    justify-content: center;
    margin-top: 18px;
}

/* ---------- Marquee --------------------------------------------------- */

.h7b68afa239-marquee-wrap {
    overflow: hidden;
    margin: 18px 0;
    padding: 9px 0;
    border-block: 1px solid var(--h7b68afa239-line);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.h7b68afa239-marquee-track {
    display: flex;
    gap: 26px;
    width: max-content;
    animation: drift 42s linear infinite;
}

.h7b68afa239-marquee-wrap:hover .h7b68afa239-marquee-track {
    animation-play-state: paused;
}

.h7b68afa239-marquee-item {
    font-family: var(--h7b68afa239-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--h7b68afa239-ink-soft);
    white-space: nowrap;
}

.h7b68afa239-marquee-item::after {
    content: "◆";
    margin-left: 26px;
    color: color-mix(in srgb, var(--h7b68afa239-brand) 60%, transparent);
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ---------- Profile --------------------------------------------------- */

.h7b68afa239-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 30px);
    align-items: start;
    margin-bottom: 30px;
}

.h7b68afa239-livechat-embed {
    position: relative;
    overflow: hidden;
    border-radius: var(--h7b68afa239-round);
    border: 1px solid var(--h7b68afa239-line);
    background: #000;
    aspect-ratio: 16 / 9;
}

.h7b68afa239-livechat-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.h7b68afa239-profile-meta {
    padding: clamp(14px, 1.8vw, 22px);
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round);
    box-shadow: var(--h7b68afa239-lift-soft);
}

.h7b68afa239-profile-meta h1 {
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
}

.h7b68afa239-related-models-section {
    margin-top: 34px;
}

.h7b68afa239-related-models-title {
    font-family: var(--h7b68afa239-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.h7b68afa239-related-models-section .h7b68afa239-models-grid,
.h7b68afa239-related-models-section .h7b68afa239-card-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
}

.h7b68afa239-related-cell {
    flex: 0 0 clamp(180px, 24vw, 240px);
    scroll-snap-align: start;
}

/* ---------- Photo gallery --------------------------------------------- */

.h7b68afa239-photo-gallery {
    display: grid;
    gap: 14px;
}

.h7b68afa239-photo-gallery-meta,
.h7b68afa239-photo-gallery-description {
    color: var(--h7b68afa239-ink-soft);
    font-size: 0.93rem;
}

/* ---------- Search ---------------------------------------------------- */

.h7b68afa239-search-box {
    position: relative;
    max-width: 620px;
    margin: 0 auto 22px;
}

.h7b68afa239-search-input {
    width: 100%;
    padding: 13px 20px;
    color: var(--h7b68afa239-ink);
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line-strong);
    border-radius: var(--h7b68afa239-round-pill);
    font: inherit;
    transition: border-color var(--h7b68afa239-step), box-shadow var(--h7b68afa239-step);
}

.h7b68afa239-search-input::placeholder {
    color: var(--h7b68afa239-ink-soft);
}

.h7b68afa239-search-input:focus {
    outline: none;
    border-color: var(--h7b68afa239-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--h7b68afa239-brand) 20%, transparent);
}

.h7b68afa239-search-results {
    display: grid;
    gap: 8px;
}

.h7b68afa239-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round-sm);
    transition: border-color var(--h7b68afa239-step), transform var(--h7b68afa239-step);
}

.h7b68afa239-result-item:hover {
    border-color: color-mix(in srgb, var(--h7b68afa239-brand) 40%, transparent);
    transform: translateX(3px);
}

.h7b68afa239-empty-state {
    padding: clamp(34px, 7vw, 74px) 20px;
    text-align: center;
    color: var(--h7b68afa239-ink-soft);
    background: var(--h7b68afa239-surface);
    border: 1px dashed var(--h7b68afa239-line-strong);
    border-radius: var(--h7b68afa239-round);
}

/* ---------- Skeletons ------------------------------------------------- */

/* Same box model as a real cell so swapping one for the other cannot
   shift layout. */
.h7b68afa239-skeleton {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--h7b68afa239-round);
    background: color-mix(in srgb, var(--h7b68afa239-ink) 8%, var(--h7b68afa239-panel));
}

.h7b68afa239-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--h7b68afa239-ink) 9%, transparent), transparent);
    animation: sweep 1.4s ease-in-out infinite;
}

@keyframes sweep {
    to {
        transform: translateX(100%);
    }
}

/* ---------- Hero & pagination ----------------------------------------- */

.h7b68afa239-hero {
    padding: clamp(24px, 4vw, 46px) clamp(18px, 3vw, 38px);
    margin-bottom: 24px;
    text-align: center;
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    /* Asymmetric corner — the quirky note style.h7b68afa239-md asks for, once, on the
       one element big enough to carry it. */
    border-radius: 8px var(--h7b68afa239-round) var(--h7b68afa239-round) 44px;
    box-shadow: var(--h7b68afa239-lift-soft);
}

.h7b68afa239-hero h1 {
    background: linear-gradient(120deg, var(--h7b68afa239-ink) 30%, var(--h7b68afa239-brand) 70%, var(--h7b68afa239-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.h7b68afa239-hero-subtitle {
    max-width: 60ch;
    margin: 0 auto;
    color: var(--h7b68afa239-ink-soft);
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
}

.h7b68afa239-hero-search {
    margin-top: 20px;
}

.h7b68afa239-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 32px 0 8px;
}

.h7b68afa239-pagination a,
.h7b68afa239-pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--h7b68afa239-round-pill);
    font-family: var(--h7b68afa239-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--h7b68afa239-ink-soft);
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    transition: color var(--h7b68afa239-step), border-color var(--h7b68afa239-step), transform var(--h7b68afa239-step);
}

.h7b68afa239-pagination a:hover {
    color: var(--h7b68afa239-ink);
    border-color: var(--h7b68afa239-line-strong);
    transform: translateY(-2px);
}

.h7b68afa239-pagination .h7b68afa239-active,
.h7b68afa239-pagination [aria-current] {
    color: var(--h7b68afa239-brand-ink);
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
    border-color: transparent;
}

.h7b68afa239-btn-load-more,
.h7b68afa239-btn-view-live,
.h7b68afa239-quick-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--h7b68afa239-round-pill);
    font-family: var(--h7b68afa239-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--h7b68afa239-brand-ink);
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--h7b68afa239-brand) 30%, transparent);
    cursor: pointer;
    transition: transform var(--h7b68afa239-step), box-shadow var(--h7b68afa239-step);
}

.h7b68afa239-btn-load-more:hover,
.h7b68afa239-btn-view-live:hover,
.h7b68afa239-quick-view-btn:hover {
    transform: translateY(-2px);
}

.h7b68afa239-btn-load-more {
    display: flex;
    margin: 26px auto 0;
}

/* Sits over the thumbnail, so it only appears on pointer intent. */
.h7b68afa239-quick-view-btn {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    padding: 8px 16px;
    font-size: 0.82rem;
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
    transition: opacity var(--h7b68afa239-step), transform var(--h7b68afa239-step);
}

.h7b68afa239-cell:hover .h7b68afa239-quick-view-btn,
.h7b68afa239-cell:focus-within .h7b68afa239-quick-view-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ---------- Card meta extras ------------------------------------------ */

.h7b68afa239-cell-country,
.h7b68afa239-cell-gender {
    font-size: 0.78rem;
    color: rgba(245, 247, 255, 0.7);
}

.h7b68afa239-cell-country::before {
    content: "◍";
    margin-right: 4px;
    opacity: 0.7;
}

.h7b68afa239-cell-similar,
.h7b68afa239-cell-nickname-link {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.72rem;
    color: rgba(245, 247, 255, 0.82);
    background: rgba(255, 255, 255, 0.12);
    transition: background-color var(--h7b68afa239-step), color var(--h7b68afa239-step);
}

.h7b68afa239-cell-similar:hover,
.h7b68afa239-cell-nickname-link:hover {
    color: var(--h7b68afa239-brand-ink);
    background: var(--h7b68afa239-brand);
}

.h7b68afa239-badge-hd {
    position: static;
    background: rgba(255, 255, 255, 0.16);
}

/* ---------- Profile extras -------------------------------------------- */

.h7b68afa239-profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.h7b68afa239-profile-header h1 {
    margin: 0;
}

.h7b68afa239-profile-age,
.h7b68afa239-profile-country {
    padding: 3px 11px;
    border-radius: var(--h7b68afa239-round-pill);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--h7b68afa239-ink-soft);
    background: color-mix(in srgb, var(--h7b68afa239-ink) 8%, transparent);
    border: 1px solid var(--h7b68afa239-line);
}

.h7b68afa239-profile-sidebar {
    display: grid;
    gap: 14px;
}

/* ---------- Stats ----------------------------------------------------- */

.h7b68afa239-stats-wrap,
.h7b68afa239-stats-summary {
    padding: clamp(14px, 1.8vw, 22px);
    background: var(--h7b68afa239-surface);
    border: 1px solid var(--h7b68afa239-line);
    border-radius: var(--h7b68afa239-round);
}

.h7b68afa239-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.h7b68afa239-stats-summary-item {
    text-align: center;
}

.h7b68afa239-stats-summary-value {
    display: block;
    font-family: var(--h7b68afa239-display);
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--h7b68afa239-brand);
    letter-spacing: -0.02em;
}

.h7b68afa239-stats-summary-label {
    font-size: 0.78rem;
    color: var(--h7b68afa239-ink-soft);
}

.h7b68afa239-stats-full-link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    color: var(--h7b68afa239-brand);
}

/* Heatmap: hour columns x day rows, sized by the grid itself so a missing
   cell can never knock the rows out of alignment. */
.h7b68afa239-heatmap-wrap {
    overflow-x: auto;
    padding-bottom: 6px;
}

.h7b68afa239-heatmap-row {
    display: grid;
    grid-template-columns: 42px repeat(24, minmax(15px, 1fr));
    gap: 3px;
    align-items: center;
    margin-bottom: 3px;
    min-width: 560px;
}

.h7b68afa239-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    background: color-mix(in srgb, var(--h7b68afa239-brand) calc(var(--h7b68afa239-v, 0) * 1%), color-mix(in srgb, var(--h7b68afa239-ink) 7%, transparent));
}

.h7b68afa239-heatmap-day-lbl,
.h7b68afa239-heatmap-hour-lbl {
    font-size: 0.68rem;
    color: var(--h7b68afa239-ink-soft);
    white-space: nowrap;
}

.h7b68afa239-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--h7b68afa239-ink-soft);
}

/* ---------- Footer ---------------------------------------------------- */

.h7b68afa239-site-footer,
.h7b68afa239-footer {
    margin-top: 40px;
    padding: 34px 0 44px;
    background: var(--h7b68afa239-bar);
    border-top: 1px solid var(--h7b68afa239-line);
    color: var(--h7b68afa239-ink-soft);
    font-size: 0.9rem;
}

.h7b68afa239-site-footer nav,
.h7b68afa239-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-bottom: 14px;
}

.h7b68afa239-site-footer a:hover,
.h7b68afa239-footer a:hover {
    color: var(--h7b68afa239-brand);
}

.h7b68afa239-footer-nav-mobile {
    display: none;
}

/* ---------- Age gate -------------------------------------------------- */

.h7b68afa239-age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(6, 7, 14, 0.74);
    backdrop-filter: blur(14px) saturate(120%);
    animation: gate-in 0.3s ease both;
}

.h7b68afa239-age-gate-panel {
    position: relative;
    width: min(430px, 100%);
    padding: clamp(24px, 4vw, 38px);
    text-align: center;
    background: var(--h7b68afa239-glass);
    border: 1px solid var(--h7b68afa239-line-strong);
    border-radius: 26px;
    box-shadow: var(--h7b68afa239-lift);
    backdrop-filter: blur(20px);
}

/* Two soft accent shapes, clipped by the panel's own radius. */
.h7b68afa239-age-gate-panel::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -22px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 79, 154, 0.4), transparent 66%);
    pointer-events: none;
}

.h7b68afa239-age-gate-text {
    margin: 0 0 20px;
    font-family: var(--h7b68afa239-display);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--h7b68afa239-ink);
}

.h7b68afa239-age-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.h7b68afa239-age-gate-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: var(--h7b68afa239-round-pill);
    font-family: var(--h7b68afa239-display);
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--h7b68afa239-step), box-shadow var(--h7b68afa239-step), border-color var(--h7b68afa239-step);
}

.h7b68afa239-age-gate-accept {
    color: var(--h7b68afa239-brand-ink);
    background: linear-gradient(135deg, var(--h7b68afa239-brand), var(--h7b68afa239-brand-2));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--h7b68afa239-brand) 34%, transparent);
}

.h7b68afa239-age-gate-accept:hover {
    transform: translateY(-2px);
}

.h7b68afa239-age-gate-decline {
    color: var(--h7b68afa239-ink-soft);
    background: transparent;
    border-color: var(--h7b68afa239-line-strong);
}

.h7b68afa239-age-gate-decline:hover {
    color: var(--h7b68afa239-ink);
}

@keyframes gate-in {
    from {
        opacity: 0;
    }
}

/* ---------- Responsive ------------------------------------------------ */

.h7b68afa239-hide-desktop {
    display: none;
}

@media (max-width: 1024px) {
    .h7b68afa239-profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .h7b68afa239-page-body {
        display: block;
    }

    .h7b68afa239-sidebar {
        position: static;
        margin-bottom: 20px;
    }
}

@media (max-width: 760px) {
    .h7b68afa239-hide-desktop {
        display: revert;
    }

    .h7b68afa239-hide-mobile {
        display: none;
    }

    .h7b68afa239-header-container {
        min-height: 56px;
        gap: 8px;
    }

    /* Collapsing top nav: the menu keeps its own horizontal scroll on a
       second row instead of a drawer, so the header stays one tap deep. */
    .h7b68afa239-nav {
        order: 3;
        flex-basis: 100%;
        padding-bottom: 8px;
        margin-bottom: -2px;
    }

    .h7b68afa239-nav a,
    .h7b68afa239-menu-label {
        padding: 7px 11px;
        font-size: 0.86rem;
    }

    .h7b68afa239-footer-nav-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        display: flex;
        justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--h7b68afa239-bar) 94%, transparent);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--h7b68afa239-line);
    }

    .h7b68afa239-footer-nav-mobile a {
        padding: 8px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--h7b68afa239-ink-soft);
    }

    .h7b68afa239-site-footer,
    .h7b68afa239-footer {
        padding-bottom: 78px;
    }

    .h7b68afa239-age-gate-panel {
        border-radius: 20px;
    }
}

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

    .h7b68afa239-cell:hover,
    .h7b68afa239-card:hover,
    .h7b68afa239-related-cell:hover,
    .h7b68afa239-photo-cell:hover,
    .h7b68afa239-age-gate-accept:hover {
        transform: none;
    }

    .h7b68afa239-cell:hover .h7b68afa239-cell-thumb img {
        transform: none;
    }
}

@media print {
    .h7b68afa239-site-header,
    .h7b68afa239-header,
    .h7b68afa239-footer-nav-mobile,
    .h7b68afa239-age-gate {
        display: none;
    }
}