/* roulang page: index */
:root {
            --color-ink: #17151d;
            --color-ink-soft: #292631;
            --color-paper: #f6f1ea;
            --color-paper-deep: #ebe2d8;
            --color-surface: #ffffff;
            --color-primary: #d85a73;
            --color-primary-dark: #b63f59;
            --color-secondary: #d4ad6d;
            --color-secondary-soft: #f1dec0;
            --color-muted: #746e77;
            --color-border: rgba(23, 21, 29, .12);
            --color-dark-border: rgba(255, 255, 255, .12);
            --color-success: #3b9976;
            --sidebar-width: 286px;
            --container-width: 1320px;
            --radius-xs: 8px;
            --radius-sm: 14px;
            --radius-md: 22px;
            --radius-lg: 32px;
            --radius-pill: 999px;
            --shadow-sm: 0 12px 30px rgba(31, 23, 29, .08);
            --shadow-md: 0 24px 55px rgba(31, 23, 29, .13);
            --shadow-dark: 0 28px 70px rgba(0, 0, 0, .28);
            --transition: 180ms ease;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 28px;
        }

        body {
            margin: 0;
            min-width: 320px;
            color: var(--color-ink);
            background:
                radial-gradient(circle at 90% 4%, rgba(216, 90, 115, .09), transparent 24rem),
                var(--color-paper);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        body.age-locked {
            overflow: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        p,
        figure,
        blockquote,
        ul,
        ol {
            margin-top: 0;
        }

        h1,
        h2,
        h3,
        h4 {
            color: var(--color-ink);
            font-weight: 760;
            line-height: 1.2;
            letter-spacing: -.035em;
        }

        h1 {
            font-size: clamp(2.8rem, 6vw, 6.4rem);
        }

        h2 {
            font-size: clamp(2rem, 3.6vw, 3.65rem);
        }

        h3 {
            font-size: clamp(1.2rem, 1.8vw, 1.55rem);
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition:
                color var(--transition),
                background-color var(--transition),
                border-color var(--transition),
                transform var(--transition),
                box-shadow var(--transition);
        }

        button,
        input {
            margin: 0;
            font: inherit;
        }

        button,
        .button {
            cursor: pointer;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(216, 90, 115, .34);
            outline-offset: 3px;
        }

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

        ::selection {
            color: #ffffff;
            background: var(--color-primary);
        }

        .reading-progress {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            z-index: 1100;
            height: 3px;
            pointer-events: none;
        }

        .reading-progress__bar {
            display: block;
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            box-shadow: 0 0 14px rgba(216, 90, 115, .55);
        }

        .site-sidebar {
            position: fixed;
            z-index: 900;
            inset: 0 auto 0 0;
            display: flex;
            width: var(--sidebar-width);
            min-height: 100vh;
            flex-direction: column;
            overflow-y: auto;
            color: rgba(255, 255, 255, .78);
            background:
                radial-gradient(circle at 50% 5%, rgba(216, 90, 115, .19), transparent 18rem),
                linear-gradient(180deg, #17151d 0%, #0f0e14 100%);
            border-right: 1px solid rgba(255, 255, 255, .08);
            box-shadow: 15px 0 45px rgba(23, 21, 29, .08);
        }

        .sidebar-inner {
            display: flex;
            min-height: 100%;
            flex: 1;
            flex-direction: column;
            padding: 34px 28px 28px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .brand-mark {
            display: inline-flex;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, .16), transparent),
                var(--color-primary);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 16px;
            box-shadow: 0 14px 30px rgba(216, 90, 115, .28);
            font-size: 1.35rem;
            font-weight: 800;
        }

        .brand-copy {
            min-width: 0;
        }

        .brand-name {
            display: block;
            color: #ffffff;
            font-size: 1.08rem;
            font-weight: 750;
            letter-spacing: .02em;
        }

        .brand-tagline {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, .45);
            font-size: .7rem;
            line-height: 1.45;
        }

        .sidebar-divider {
            height: 1px;
            margin: 30px 0;
            background: var(--color-dark-border);
        }

        .nav-label {
            margin-bottom: 12px;
            color: rgba(255, 255, 255, .34);
            font-size: .69rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .main-navigation {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .main-navigation li {
            margin-bottom: 8px;
        }

        .main-navigation a {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            padding: 10px 14px;
            color: rgba(255, 255, 255, .66);
            border: 1px solid transparent;
            border-radius: 14px;
            font-size: .95rem;
            font-weight: 650;
        }

        .main-navigation a:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, .07);
            border-color: rgba(255, 255, 255, .08);
            transform: translateX(2px);
        }

        .main-navigation a.active {
            color: #ffffff;
            background: linear-gradient(135deg, rgba(216, 90, 115, .25), rgba(216, 90, 115, .1));
            border-color: rgba(216, 90, 115, .35);
            box-shadow: inset 3px 0 0 var(--color-primary);
        }

        .nav-icon {
            display: inline-flex;
            width: 28px;
            height: 28px;
            align-items: center;
            justify-content: center;
            color: var(--color-secondary);
            background: rgba(255, 255, 255, .06);
            border-radius: 9px;
        }

        .sidebar-feature {
            margin-top: 22px;
            padding: 20px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
            border: 1px solid var(--color-dark-border);
            border-radius: var(--radius-md);
        }

        .sidebar-feature .mini-badge {
            margin-bottom: 12px;
        }

        .sidebar-feature h2 {
            margin-bottom: 9px;
            color: #ffffff;
            font-size: 1.15rem;
            letter-spacing: -.02em;
        }

        .sidebar-feature p {
            margin-bottom: 16px;
            color: rgba(255, 255, 255, .5);
            font-size: .8rem;
            line-height: 1.65;
        }

        .sidebar-cta {
            display: flex;
            min-height: 42px;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: var(--color-primary);
            border-radius: 12px;
            font-size: .82rem;
            font-weight: 700;
        }

        .sidebar-cta:hover {
            color: #ffffff;
            background: var(--color-primary-dark);
            transform: translateY(-2px);
        }

        .sidebar-legal {
            margin-top: auto;
            padding-top: 30px;
            color: rgba(255, 255, 255, .35);
            font-size: .71rem;
            line-height: 1.65;
        }

        .sidebar-legal strong {
            display: block;
            margin-bottom: 5px;
            color: rgba(255, 255, 255, .62);
        }

        .mobile-header {
            position: sticky;
            z-index: 850;
            top: 0;
            display: none;
            min-height: 72px;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            color: #ffffff;
            background: rgba(21, 19, 28, .94);
            border-bottom: 1px solid rgba(255, 255, 255, .09);
            backdrop-filter: blur(16px);
        }

        .mobile-header .brand-mark {
            width: 42px;
            height: 42px;
            flex-basis: 42px;
            border-radius: 13px;
        }

        .mobile-header .brand-tagline {
            display: none;
        }

        .mobile-menu-button {
            display: inline-flex;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            padding: 0;
            color: #ffffff;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 13px;
        }

        .mobile-menu-button span,
        .mobile-menu-button::before,
        .mobile-menu-button::after {
            display: block;
            width: 18px;
            height: 2px;
            content: "";
            background: currentColor;
            border-radius: 2px;
            transition: transform var(--transition), opacity var(--transition);
        }

        .mobile-menu-button span {
            margin: 4px 0;
        }

        .mobile-menu-button.is-open span {
            opacity: 0;
        }

        .mobile-menu-button.is-open::before {
            transform: translateY(6px) rotate(45deg);
        }

        .mobile-menu-button.is-open::after {
            transform: translateY(-6px) rotate(-45deg);
        }

        .mobile-drawer {
            position: fixed;
            z-index: 840;
            top: 72px;
            right: 0;
            left: 0;
            display: none;
            padding: 14px 20px 20px;
            color: #ffffff;
            background: rgba(21, 19, 28, .98);
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            box-shadow: 0 24px 50px rgba(0, 0, 0, .24);
        }

        .mobile-drawer.is-open {
            display: block;
        }

        .mobile-drawer a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            color: #ffffff;
            background: rgba(216, 90, 115, .15);
            border: 1px solid rgba(216, 90, 115, .3);
            border-radius: 13px;
            font-weight: 700;
        }

        .site-shell {
            min-height: 100vh;
            margin-left: var(--sidebar-width);
        }

        .content-container {
            width: min(100%, var(--container-width));
            margin: 0 auto;
            padding-right: clamp(22px, 5vw, 76px);
            padding-left: clamp(22px, 5vw, 76px);
        }

        .section {
            position: relative;
            padding: clamp(76px, 9vw, 132px) 0;
        }

        .section-compact {
            padding-top: clamp(54px, 7vw, 90px);
            padding-bottom: clamp(54px, 7vw, 90px);
        }

        .section-dark {
            color: rgba(255, 255, 255, .76);
            background:
                radial-gradient(circle at 8% 15%, rgba(216, 90, 115, .18), transparent 24rem),
                radial-gradient(circle at 88% 75%, rgba(212, 173, 109, .1), transparent 22rem),
                var(--color-ink);
        }

        .section-dark h2,
        .section-dark h3 {
            color: #ffffff;
        }

        .section-dark p {
            color: rgba(255, 255, 255, .58);
        }

        .section-rule {
            border-top: 1px solid var(--color-border);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 18px;
            color: var(--color-primary-dark);
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            width: 28px;
            height: 2px;
            content: "";
            background: currentColor;
            border-radius: var(--radius-pill);
        }

        .section-dark .eyebrow {
            color: #f0c580;
        }

        .section-heading {
            max-width: 780px;
            margin-bottom: 44px;
        }

        .section-heading h2 {
            margin-bottom: 18px;
        }

        .section-heading p {
            max-width: 660px;
            margin-bottom: 0;
            font-size: 1.04rem;
        }

        .section-heading.heading-row {
            display: flex;
            max-width: none;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
        }

        .heading-row .heading-copy {
            max-width: 760px;
        }

        .mini-badge,
        .tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 5px 11px;
            color: var(--color-primary-dark);
            background: rgba(216, 90, 115, .1);
            border: 1px solid rgba(216, 90, 115, .18);
            border-radius: var(--radius-pill);
            font-size: .7rem;
            font-weight: 750;
            line-height: 1;
            letter-spacing: .04em;
        }

        .tag.tag-gold {
            color: #77551f;
            background: rgba(212, 173, 109, .18);
            border-color: rgba(212, 173, 109, .32);
        }

        .tag.tag-dark {
            color: rgba(255, 255, 255, .76);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .12);
        }

        .button {
            display: inline-flex;
            min-height: 52px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin: 0;
            padding: 12px 22px;
            color: #ffffff;
            background: var(--color-primary);
            border: 1px solid var(--color-primary);
            border-radius: 14px;
            box-shadow: 0 12px 28px rgba(216, 90, 115, .22);
            font-size: .92rem;
            font-weight: 750;
        }

        .button:hover,
        .button:focus {
            color: #ffffff;
            background: var(--color-primary-dark);
            border-color: var(--color-primary-dark);
            box-shadow: 0 17px 34px rgba(182, 63, 89, .28);
            transform: translateY(-2px);
        }

        .button.secondary-button {
            color: var(--color-ink);
            background: rgba(255, 255, 255, .7);
            border-color: var(--color-border);
            box-shadow: none;
            backdrop-filter: blur(10px);
        }

        .button.secondary-button:hover {
            color: var(--color-primary-dark);
            background: #ffffff;
            border-color: rgba(216, 90, 115, .3);
        }

        .button.dark-button {
            color: #ffffff;
            background: var(--color-ink);
            border-color: var(--color-ink);
            box-shadow: 0 14px 30px rgba(23, 21, 29, .2);
        }

        .button.dark-button:hover {
            background: #2c2834;
            border-color: #2c2834;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-primary-dark);
            font-weight: 750;
        }

        .text-link::after {
            content: "→";
            transition: transform var(--transition);
        }

        .text-link:hover {
            color: var(--color-primary);
        }

        .text-link:hover::after {
            transform: translateX(4px);
        }

        .hero {
            display: flex;
            min-height: 100vh;
            align-items: center;
            overflow: hidden;
            padding: clamp(70px, 8vw, 116px) 0;
        }

        .hero::before {
            position: absolute;
            top: -130px;
            right: -80px;
            width: 430px;
            height: 430px;
            content: "";
            background: rgba(216, 90, 115, .12);
            border-radius: 50%;
            filter: blur(2px);
        }

        .hero::after {
            position: absolute;
            bottom: 18%;
            left: 42%;
            width: 150px;
            height: 150px;
            content: "";
            border: 1px solid rgba(216, 90, 115, .2);
            border-radius: 50%;
        }

        .hero .grid-x {
            position: relative;
            z-index: 2;
        }

        .hero-copy {
            position: relative;
            z-index: 2;
            padding-right: clamp(0px, 4vw, 55px);
        }

        .hero-label {
            margin-bottom: 20px;
        }

        .hero-title {
            margin-bottom: 26px;
        }

        .hero-title .title-line {
            display: block;
        }

        .hero-title .title-accent {
            color: var(--color-primary);
            font-family: Georgia, "Times New Roman", "Songti SC", serif;
            font-weight: 500;
            font-style: italic;
        }

        .hero-lead {
            max-width: 670px;
            margin-bottom: 34px;
            color: #625c65;
            font-size: clamp(1.02rem, 1.5vw, 1.22rem);
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-bottom: 46px;
        }

        .hero-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
        }

        .hero-metric {
            min-width: 128px;
            padding: 0 26px;
            border-left: 1px solid var(--color-border);
        }

        .hero-metric:first-child {
            padding-left: 0;
            border-left: 0;
        }

        .hero-metric strong {
            display: block;
            margin-bottom: 3px;
            color: var(--color-ink);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.5rem;
            line-height: 1.2;
        }

        .hero-metric span {
            color: var(--color-muted);
            font-size: .75rem;
        }

        .hero-visual-wrap {
            position: relative;
            padding: 28px 0 28px 26px;
        }

        .hero-visual-wrap::before {
            position: absolute;
            top: 0;
            right: 22px;
            bottom: 0;
            left: 0;
            content: "";
            border: 1px solid rgba(216, 90, 115, .22);
            border-radius: 220px 220px 34px 34px;
        }

        .hero-visual {
            position: relative;
            min-height: 650px;
            overflow: hidden;
            color: #ffffff;
            background:
                radial-gradient(circle at 68% 20%, rgba(244, 207, 152, .75), transparent 15%),
                radial-gradient(circle at 60% 38%, rgba(216, 90, 115, .48), transparent 30%),
                linear-gradient(145deg, #4e2936 0%, #211923 46%, #0e0d12 100%);
            border-radius: 220px 220px 30px 30px;
            box-shadow: var(--shadow-dark);
        }

        .hero-visual::before {
            position: absolute;
            top: 8%;
            right: 10%;
            width: 58%;
            aspect-ratio: 1;
            content: "";
            border: 1px solid rgba(255, 255, 255, .25);
            border-radius: 50%;
            box-shadow:
                0 0 0 24px rgba(255, 255, 255, .025),
                0 0 0 65px rgba(255, 255, 255, .018);
        }

        .hero-visual::after {
            position: absolute;
            right: -5%;
            bottom: -2%;
            width: 88%;
            height: 68%;
            content: "";
            background:
                radial-gradient(ellipse at 48% 28%, #d9af91 0 10%, #402732 11% 24%, transparent 25%),
                radial-gradient(ellipse at 52% 70%, #17131a 0 47%, transparent 48%);
            border-radius: 52% 48% 18% 20% / 35% 42% 12% 14%;
            filter: drop-shadow(-30px 20px 35px rgba(0, 0, 0, .3));
            opacity: .92;
        }

        .hero-visual-top {
            position: absolute;
            z-index: 3;
            top: 35px;
            right: 34px;
            left: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .hero-visual-index {
            color: rgba(255, 255, 255, .54);
            font-family: Georgia, "Times New Roman", serif;
            font-size: .85rem;
            letter-spacing: .14em;
        }

        .hero-visual-bottom {
            position: absolute;
            z-index: 4;
            right: 34px;
            bottom: 32px;
            left: 34px;
            padding: 25px;
            background: rgba(15, 13, 19, .62);
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 20px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, .2);
            backdrop-filter: blur(18px);
        }

        .hero-visual-bottom h2 {
            margin: 12px 0 8px;
            color: #ffffff;
            font-size: clamp(1.55rem, 2.6vw, 2.3rem);
        }

        .hero-visual-bottom p {
            margin-bottom: 16px;
            color: rgba(255, 255, 255, .6);
            font-size: .87rem;
        }

        .visual-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .rating-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #f5d399;
            font-size: .78rem;
            font-weight: 700;
        }

        .floating-note {
            position: absolute;
            z-index: 6;
            top: 25%;
            left: -22px;
            width: 140px;
            padding: 17px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(255, 255, 255, .7);
            border-radius: 18px;
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(14px);
        }

        .floating-note strong {
            display: block;
            margin-bottom: 3px;
            color: var(--color-ink);
            font-size: 1.12rem;
        }

        .floating-note span {
            display: block;
            color: var(--color-muted);
            font-size: .7rem;
            line-height: 1.5;
        }

        .search-panel {
            position: relative;
            margin-top: -44px;
            padding: 26px;
            background: rgba(255, 255, 255, .88);
            border: 1px solid rgba(255, 255, 255, .8);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(18px);
        }

        .search-form {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .search-field-wrap {
            position: relative;
            flex: 1;
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 17px;
            display: inline-flex;
            color: var(--color-muted);
            transform: translateY(-50%);
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            height: 54px;
            padding: 0 18px 0 48px;
            color: var(--color-ink);
            background: #f7f3ee;
            border: 1px solid var(--color-border);
            border-radius: 14px;
            box-shadow: none;
            transition:
                border-color var(--transition),
                box-shadow var(--transition),
                background-color var(--transition);
        }

        .search-input::placeholder {
            color: #9b949c;
        }

        .search-input:focus {
            background: #ffffff;
            border-color: rgba(216, 90, 115, .55);
            box-shadow: 0 0 0 4px rgba(216, 90, 115, .09);
        }

        .search-status {
            margin: 12px 0 0;
            color: var(--color-muted);
            font-size: .77rem;
        }

        .feature-grid {
            row-gap: 28px;
        }

        .feature-card {
            height: 100%;
            overflow: hidden;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition:
                transform var(--transition),
                box-shadow var(--transition),
                border-color var(--transition);
        }

        .feature-card:hover {
            border-color: rgba(216, 90, 115, .3);
            box-shadow: var(--shadow-md);
            transform: translateY(-7px);
        }

        .feature-card[hidden] {
            display: none !important;
        }

        .card-visual {
            position: relative;
            min-height: 265px;
            overflow: hidden;
            background: #27212b;
        }

        .card-visual::before,
        .card-visual::after {
            position: absolute;
            content: "";
        }

        .card-visual::before {
            inset: 0;
            background:
                radial-gradient(circle at 72% 26%, rgba(255, 225, 183, .78), transparent 13%),
                linear-gradient(145deg, transparent 34%, rgba(0, 0, 0, .56) 100%);
        }

        .card-visual::after {
            right: 9%;
            bottom: -15%;
            width: 62%;
            height: 86%;
            background:
                radial-gradient(ellipse at 51% 19%, rgba(228, 181, 153, .92) 0 10%, #39232c 11% 23%, transparent 24%),
                radial-gradient(ellipse at 50% 67%, rgba(20, 17, 23, .96) 0 47%, transparent 48%);
            border-radius: 52% 48% 16% 17% / 30% 34% 10% 11%;
            opacity: .93;
            transition: transform 420ms ease;
        }

        .feature-card:hover .card-visual::after {
            transform: scale(1.035) translateY(-4px);
        }

        .visual-one {
            background:
                radial-gradient(circle at 20% 20%, rgba(216, 90, 115, .48), transparent 35%),
                linear-gradient(135deg, #4b2633, #17141c);
        }

        .visual-two {
            background:
                linear-gradient(90deg, rgba(244, 221, 183, .15), transparent 38%),
                linear-gradient(145deg, #6f4d43, #1d1720 70%);
        }

        .visual-three {
            background:
                radial-gradient(circle at 30% 28%, rgba(110, 125, 166, .68), transparent 28%),
                linear-gradient(155deg, #232938, #151219);
        }

        .visual-four {
            filter: grayscale(.9);
            background:
                radial-gradient(circle at 70% 22%, rgba(255, 255, 255, .55), transparent 16%),
                linear-gradient(140deg, #59575d, #121116);
        }

        .visual-five {
            background:
                radial-gradient(circle at 27% 30%, rgba(238, 181, 189, .62), transparent 34%),
                linear-gradient(150deg, #7d4f5d, #201821);
        }

        .visual-six {
            background:
                linear-gradient(90deg, rgba(216, 155, 86, .22), transparent 45%),
                linear-gradient(140deg, #5e4539, #18151c);
        }

        .card-number {
            position: absolute;
            z-index: 4;
            top: 18px;
            left: 18px;
            color: rgba(255, 255, 255, .7);
            font-family: Georgia, "Times New Roman", serif;
            font-size: .74rem;
            letter-spacing: .16em;
        }

        .card-duration {
            position: absolute;
            z-index: 4;
            right: 16px;
            bottom: 15px;
            padding: 5px 9px;
            color: #ffffff;
            background: rgba(10, 9, 13, .58);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 8px;
            font-size: .68rem;
            font-weight: 700;
            backdrop-filter: blur(10px);
        }

        .play-symbol {
            position: absolute;
            z-index: 5;
            top: 50%;
            left: 50%;
            display: inline-flex;
            width: 58px;
            height: 58px;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: rgba(255, 255, 255, .16);
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: 50%;
            box-shadow: 0 12px 25px rgba(0, 0, 0, .18);
            transform: translate(-50%, -50%);
            backdrop-filter: blur(12px);
            transition:
                transform var(--transition),
                background-color var(--transition);
        }

        .play-symbol::before {
            width: 0;
            height: 0;
            margin-left: 4px;
            content: "";
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 11px solid currentColor;
        }

        .feature-card:hover .play-symbol {
            background: var(--color-primary);
            transform: translate(-50%, -50%) scale(1.08);
        }

        .card-content {
            padding: 23px 23px 25px;
        }

        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 15px;
        }

        .card-content h3 {
            margin-bottom: 9px;
        }

        .card-content p {
            min-height: 54px;
            margin-bottom: 18px;
            font-size: .86rem;
            line-height: 1.7;
        }

        .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 16px;
            border-top: 1px solid var(--color-border);
        }

        .card-rating {
            color: var(--color-ink);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.18rem;
            font-weight: 700;
        }

        .card-rating small {
            color: var(--color-muted);
            font-family: inherit;
            font-size: .65rem;
            font-weight: 500;
        }

        .card-quality {
            color: var(--color-success);
            font-size: .7rem;
            font-weight: 750;
        }

        .empty-result {
            display: none;
            padding: 38px;
            text-align: center;
            background: rgba(255, 255, 255, .62);
            border: 1px dashed rgba(23, 21, 29, .18);
            border-radius: var(--radius-md);
        }

        .empty-result.is-visible {
            display: block;
        }

        .editorial-copy {
            padding-right: clamp(0px, 5vw, 70px);
        }

        .editorial-copy h2 {
            margin-bottom: 25px;
        }

        .editorial-copy > p {
            margin-bottom: 21px;
            font-size: 1.02rem;
        }

        .editorial-list {
            margin: 34px 0 0;
            padding: 0;
            list-style: none;
        }

        .editorial-list li {
            display: flex;
            gap: 15px;
            padding: 16px 0;
            color: var(--color-ink-soft);
            border-top: 1px solid var(--color-border);
            font-size: .9rem;
        }

        .editorial-list strong {
            min-width: 88px;
            color: var(--color-primary-dark);
        }

        .editorial-panel {
            position: relative;
            min-height: 610px;
            overflow: hidden;
            padding: 38px;
            color: #ffffff;
            background:
                radial-gradient(circle at 73% 22%, rgba(241, 195, 124, .4), transparent 25%),
                linear-gradient(145deg, #432733 0%, #19151d 58%, #0e0d11 100%);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-dark);
        }

        .editorial-panel::before {
            position: absolute;
            top: 11%;
            right: 8%;
            width: 68%;
            aspect-ratio: 1;
            content: "";
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 50%;
        }

        .editorial-panel::after {
            position: absolute;
            right: -5%;
            bottom: -12%;
            width: 82%;
            height: 80%;
            content: "";
            background:
                radial-gradient(ellipse at 50% 20%, #d1a388 0 9%, #30202a 10% 23%, transparent 24%),
                radial-gradient(ellipse at 50% 70%, #100e14 0 48%, transparent 49%);
            border-radius: 52% 48% 20% 20% / 35% 38% 12% 12%;
            opacity: .9;
        }

        .editorial-panel-header {
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .editorial-quote {
            position: absolute;
            z-index: 4;
            right: 32px;
            bottom: 32px;
            left: 32px;
            margin: 0;
            padding: 26px;
            color: rgba(255, 255, 255, .85);
            background: rgba(11, 10, 14, .62);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 20px;
            backdrop-filter: blur(16px);
        }

        .editorial-quote::before {
            display: block;
            margin-bottom: 10px;
            color: var(--color-secondary);
            content: "“";
            font-family: Georgia, "Times New Roman", serif;
            font-size: 3.3rem;
            line-height: .5;
        }

        .editorial-quote p {
            margin-bottom: 12px;
            color: rgba(255, 255, 255, .82);
            font-family: Georgia, "Songti SC", serif;
            font-size: 1.08rem;
            line-height: 1.8;
        }

        .editorial-quote cite {
            color: rgba(255, 255, 255, .42);
            font-size: .72rem;
            font-style: normal;
        }

        .ranking-layout {
            align-items: stretch;
        }

        .ranking-intro {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
            padding-right: clamp(0px, 4vw, 62px);
        }

        .ranking-intro h2 {
            margin-bottom: 22px;
        }

        .ranking-note {
            margin-top: 40px;
            padding: 20px;
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--color-dark-border);
            border-radius: var(--radius-sm);
        }

        .ranking-note strong {
            display: block;
            margin-bottom: 7px;
            color: #ffffff;
        }

        .ranking-note p {
            margin: 0;
            font-size: .78rem;
        }

        .ranking-list {
            overflow: hidden;
            background: rgba(255, 255, 255, .045);
            border: 1px solid var(--color-dark-border);
            border-radius: var(--radius-md);
        }

        .ranking-item {
            display: grid;
            grid-template-columns: 54px minmax(150px, 1fr) minmax(130px, 1.5fr) 62px;
            align-items: center;
            gap: 18px;
            padding: 22px 24px;
            border-bottom: 1px solid var(--color-dark-border);
            transition: background-color var(--transition);
        }

        .ranking-item:last-child {
            border-bottom: 0;
        }

        .ranking-item:hover {
            background: rgba(255, 255, 255, .05);
        }

        .rank-number {
            color: var(--color-secondary);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.35rem;
        }

        .rank-title strong {
            display: block;
            margin-bottom: 3px;
            color: #ffffff;
            font-size: .93rem;
        }

        .rank-title span {
            color: rgba(255, 255, 255, .4);
            font-size: .68rem;
        }

        .score-track {
            height: 7px;
            overflow: hidden;
            background: rgba(255, 255, 255, .1);
            border-radius: var(--radius-pill);
        }

        .score-value {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            border-radius: inherit;
        }

        .rank-score {
            color: #ffffff;
            font-family: Georgia, "Times New Roman", serif;
            text-align: right;
        }

        .data-grid {
            row-gap: 24px;
        }

        .data-card {
            height: 100%;
            padding: 28px;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(255, 255, 255, .8);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(10px);
        }

        .data-icon {
            display: inline-flex;
            width: 46px;
            height: 46px;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            color: var(--color-primary-dark);
            background: rgba(216, 90, 115, .11);
            border-radius: 14px;
            font-weight: 800;
        }

        .data-value {
            display: block;
            margin-bottom: 7px;
            color: var(--color-ink);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 2.3rem;
            line-height: 1;
        }

        .data-label {
            display: block;
            margin-bottom: 12px;
            color: var(--color-ink);
            font-weight: 750;
        }

        .data-card p {
            margin-bottom: 0;
            font-size: .8rem;
        }

        .process-line {
            position: relative;
            margin-top: 56px;
        }

        .process-line::before {
            position: absolute;
            top: 29px;
            right: 14%;
            left: 14%;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, transparent, rgba(216, 90, 115, .36), transparent);
        }

        .process-step {
            position: relative;
            z-index: 2;
            padding: 0 28px;
            text-align: center;
        }

        .process-number {
            display: inline-flex;
            width: 58px;
            height: 58px;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: #ffffff;
            background: var(--color-ink);
            border: 7px solid var(--color-paper);
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(23, 21, 29, .13);
            font-family: Georgia, "Times New Roman", serif;
        }

        .process-step h3 {
            margin-bottom: 10px;
            font-size: 1.05rem;
        }

        .process-step p {
            margin-bottom: 0;
            font-size: .79rem;
        }

        .story-block {
            overflow: hidden;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
        }

        .story-visual {
            position: relative;
            min-height: 520px;
            overflow: hidden;
            background:
                radial-gradient(circle at 25% 26%, rgba(221, 130, 149, .54), transparent 31%),
                linear-gradient(145deg, #694150, #17131b);
        }

        .story-visual::before {
            position: absolute;
            top: 8%;
            left: 11%;
            width: 70%;
            aspect-ratio: 1;
            content: "";
            border: 1px solid rgba(255, 255, 255, .23);
            border-radius: 50%;
            box-shadow: 0 0 0 34px rgba(255, 255, 255, .025);
        }

        .story-visual::after {
            position: absolute;
            right: -8%;
            bottom: -15%;
            width: 92%;
            height: 89%;
            content: "";
            background:
                radial-gradient(ellipse at 50% 18%, #deb096 0 9%, #39242d 10% 23%, transparent 24%),
                radial-gradient(ellipse at 50% 68%, #131018 0 48%, transparent 49%);
            border-radius: 52% 48% 19% 18% / 30% 36% 12% 11%;
        }

        .story-visual-label {
            position: absolute;
            z-index: 4;
            top: 24px;
            left: 24px;
            color: rgba(255, 255, 255, .72);
            font-size: .72rem;
            font-weight: 750;
            letter-spacing: .13em;
        }

        .story-content {
            display: flex;
            min-height: 520px;
            flex-direction: column;
            justify-content: center;
            padding: clamp(34px, 6vw, 76px);
        }

        .story-content h2 {
            margin-bottom: 24px;
        }

        .story-content p {
            margin-bottom: 20px;
        }

        .story-points {
            margin: 12px 0 30px;
            padding: 0;
            list-style: none;
        }

        .story-points li {
            position: relative;
            padding: 11px 0 11px 27px;
            color: var(--color-ink-soft);
            border-bottom: 1px solid var(--color-border);
            font-size: .85rem;
        }

        .story-points li::before {
            position: absolute;
            top: 19px;
            left: 2px;
            width: 8px;
            height: 8px;
            content: "";
            background: var(--color-primary);
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(216, 90, 115, .09);
        }

        .insight-grid {
            row-gap: 22px;
        }

        .insight-card {
            height: 100%;
            padding: 27px;
            background: transparent;
            border-top: 1px solid var(--color-border);
            transition:
                background-color var(--transition),
                transform var(--transition);
        }

        .insight-card:hover {
            background: rgba(255, 255, 255, .55);
            transform: translateY(-3px);
        }

        .insight-index {
            display: block;
            margin-bottom: 30px;
            color: var(--color-primary-dark);
            font-family: Georgia, "Times New Roman", serif;
            font-size: .85rem;
        }

        .insight-card h3 {
            margin-bottom: 13px;
        }

        .insight-card p {
            margin-bottom: 20px;
            font-size: .84rem;
        }

        .insight-meta {
            color: #969098;
            font-size: .68rem;
            letter-spacing: .06em;
        }

        .faq-list {
            max-width: 920px;
            margin: 0 auto;
        }

        .faq-item {
            overflow: hidden;
            margin-bottom: 13px;
            background: rgba(255, 255, 255, .76);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            box-shadow: 0 8px 25px rgba(23, 21, 29, .045);
            transition:
                border-color var(--transition),
                box-shadow var(--transition);
        }

        .faq-item:hover,
        .faq-item[open] {
            border-color: rgba(216, 90, 115, .28);
            box-shadow: var(--shadow-sm);
        }

        .faq-item summary {
            position: relative;
            display: flex;
            min-height: 72px;
            align-items: center;
            padding: 20px 58px 20px 22px;
            color: var(--color-ink);
            cursor: pointer;
            font-weight: 750;
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::before,
        .faq-item summary::after {
            position: absolute;
            top: 50%;
            right: 24px;
            width: 16px;
            height: 2px;
            content: "";
            background: var(--color-primary);
            border-radius: 2px;
            transition: transform var(--transition);
        }

        .faq-item summary::after {
            transform: rotate(90deg);
        }

        .faq-item[open] summary::after {
            transform: rotate(0);
        }

        .faq-answer {
            padding: 0 58px 22px 22px;
        }

        .faq-answer p {
            margin: 0;
            font-size: .87rem;
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            padding: clamp(42px, 7vw, 84px);
            color: #ffffff;
            background:
                radial-gradient(circle at 86% 25%, rgba(241, 197, 129, .3), transparent 21rem),
                linear-gradient(135deg, #5a2d3c 0%, #211720 53%, #121016 100%);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-dark);
        }

        .cta-panel::before {
            position: absolute;
            top: -55%;
            right: -5%;
            width: 430px;
            height: 430px;
            content: "";
            border: 1px solid rgba(255, 255, 255, .17);
            border-radius: 50%;
            box-shadow:
                0 0 0 45px rgba(255, 255, 255, .018),
                0 0 0 90px rgba(255, 255, 255, .012);
        }

        .cta-panel::after {
            position: absolute;
            right: 10%;
            bottom: -40%;
            width: 330px;
            height: 330px;
            content: "";
            background: rgba(216, 90, 115, .19);
            border-radius: 50%;
            filter: blur(5px);
        }

        .cta-content {
            position: relative;
            z-index: 2;
            max-width: 790px;
        }

        .cta-content h2 {
            margin-bottom: 20px;
            color: #ffffff;
        }

        .cta-content p {
            max-width: 650px;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, .62);
            font-size: 1rem;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
        }

        .cta-panel .secondary-button {
            color: #ffffff;
            background: rgba(255, 255, 255, .09);
            border-color: rgba(255, 255, 255, .18);
        }

        .cta-panel .secondary-button:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, .16);
            border-color: rgba(255, 255, 255, .28);
        }

        .site-footer {
            color: rgba(255, 255, 255, .57);
            background: #0d0c11;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .footer-main {
            padding: 62px 0 42px;
        }

        .footer-brand {
            max-width: 520px;
        }

        .footer-brand .brand {
            display: inline-flex;
            margin-bottom: 20px;
        }

        .footer-brand p {
            margin-bottom: 0;
            color: rgba(255, 255, 255, .42);
            font-size: .81rem;
        }

        .footer-heading {
            margin-bottom: 15px;
            color: #ffffff;
            font-size: .78rem;
            font-weight: 750;
            letter-spacing: .1em;
        }

        .footer-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 8px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, .48);
            font-size: .8rem;
        }

        .footer-links a:hover {
            color: var(--color-secondary);
        }

        .footer-note {
            padding: 22px 0 28px;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-note-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .footer-note p {
            margin: 0;
            color: rgba(255, 255, 255, .31);
            font-size: .69rem;
        }

        .adult-mark {
            display: inline-flex;
            min-width: 43px;
            height: 28px;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: var(--color-primary);
            border-radius: 8px;
            font-size: .7rem;
            font-weight: 800;
        }

        .age-gate {
            position: fixed;
            z-index: 5000;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
            background:
                radial-gradient(circle at 70% 18%, rgba(216, 90, 115, .2), transparent 28rem),
                rgba(10, 9, 13, .94);
            backdrop-filter: blur(18px);
        }

        .age-gate.is-hidden {
            display: none;
        }

        .age-dialog {
            width: min(100%, 580px);
            padding: clamp(28px, 6vw, 54px);
            color: #ffffff;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
                #17151d;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: var(--radius-lg);
            box-shadow: 0 35px 100px rgba(0, 0, 0, .48);
            text-align: center;
        }

        .age-symbol {
            display: inline-flex;
            width: 78px;
            height: 78px;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            color: #ffffff;
            background: var(--color-primary);
            border: 8px solid rgba(216, 90, 115, .16);
            border-radius: 50%;
            box-shadow: 0 16px 38px rgba(216, 90, 115, .27);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.35rem;
            font-weight: 800;
        }

        .age-dialog h2 {
            margin-bottom: 16px;
            color: #ffffff;
            font-size: clamp(1.7rem, 5vw, 2.55rem);
        }

        .age-dialog p {
            margin-bottom: 28px;
            color: rgba(255, 255, 255, .56);
            font-size: .9rem;
        }

        .age-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        .age-actions .button {
            flex: 1;
            max-width: 210px;
        }

        .age-disclaimer {
            display: block;
            margin-top: 22px;
            color: rgba(255, 255, 255, .3);
            font-size: .67rem;
            line-height: 1.6;
        }

        .toast {
            position: fixed;
            z-index: 3000;
            right: 24px;
            bottom: 24px;
            max-width: 360px;
            padding: 15px 18px;
            color: #ffffff;
            background: rgba(23, 21, 29, .94);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 13px;
            box-shadow: var(--shadow-dark);
            font-size: .82rem;
            opacity: 0;
            pointer-events: none;
            transform: translateY(15px);
            transition:
                opacity var(--transition),
                transform var(--transition);
            backdrop-filter: blur(14px);
        }

        .toast.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media screen and (max-width: 1180px) {
            :root {
                --sidebar-width: 244px;
            }

            .sidebar-inner {
                padding-right: 22px;
                padding-left: 22px;
            }

            .brand-tagline {
                font-size: .64rem;
            }

            .hero {
                min-height: auto;
            }

            .hero-visual {
                min-height: 590px;
            }

            .floating-note {
                left: -12px;
            }

            .feature-grid > .cell {
                width: 50%;
            }
        }

        @media screen and (max-width: 1024px) {
            .hero {
                padding-top: 80px;
            }

            .hero-copy {
                padding-right: 0;
            }

            .hero-title {
                font-size: clamp(2.65rem, 6.4vw, 4.7rem);
            }

            .hero-visual-wrap {
                margin-top: 56px;
                padding-left: 0;
            }

            .hero-visual-wrap::before {
                left: 24px;
            }

            .hero-visual {
                min-height: 680px;
            }

            .floating-note {
                left: 6px;
            }

            .editorial-copy {
                padding-right: 0;
            }

            .editorial-panel {
                min-height: 570px;
                margin-top: 48px;
            }

            .ranking-intro {
                padding-right: 0;
            }

            .ranking-list {
                margin-top: 40px;
            }

            .story-visual,
            .story-content {
                min-height: 470px;
            }
        }

        @media screen and (max-width: 768px) {
            :root {
                --sidebar-width: 0px;
            }

            html {
                scroll-padding-top: 86px;
            }

            .reading-progress {
                left: 0;
            }

            .site-sidebar {
                display: none;
            }

            .mobile-header {
                display: flex;
            }

            .site-shell {
                margin-left: 0;
            }

            .section {
                padding-top: 76px;
                padding-bottom: 76px;
            }

            .hero {
                min-height: auto;
                padding-top: 65px;
                padding-bottom: 90px;
            }

            .hero::before {
                top: -100px;
                right: -170px;
            }

            .hero-title {
                font-size: clamp(2.45rem, 11vw, 4.4rem);
            }

            .hero-metric {
                min-width: 33.333%;
                padding: 0 15px;
            }

            .hero-visual {
                min-height: 570px;
                border-radius: 180px 180px 28px 28px;
            }

            .hero-visual-wrap::before {
                border-radius: 180px 180px 30px 30px;
            }

            .floating-note {
                top: 29%;
                left: 0;
            }

            .search-panel {
                margin-top: -30px;
            }

            .section-heading.heading-row {
                display: block;
            }

            .heading-row .heading-action {
                margin-top: 24px;
            }

            .feature-grid > .cell {
                width: 100%;
            }

            .card-content p {
                min-height: 0;
            }

            .ranking-item {
                grid-template-columns: 42px minmax(130px, 1fr) 58px;
                gap: 12px;
            }

            .ranking-item .score-track {
                display: none;
            }

            .process-line::before {
                display: none;
            }

            .process-step {
                margin-bottom: 35px;
                padding: 0 18px;
            }

            .story-block .story-visual {
                min-height: 450px;
            }

            .story-content {
                min-height: auto;
            }

            .footer-brand {
                margin-bottom: 35px;
            }

            .footer-note-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 13px;
            }
        }

        @media screen and (max-width: 520px) {
            body {
                font-size: 15px;
            }

            .content-container {
                padding-right: 18px;
                padding-left: 18px;
            }

            .mobile-header {
                min-height: 68px;
                padding: 10px 16px;
            }

            .mobile-drawer {
                top: 68px;
                padding-right: 16px;
                padding-left: 16px;
            }

            .brand-name {
                font-size: .94rem;
            }

            .hero {
                padding-top: 52px;
            }

            .hero-label {
                font-size: .66rem;
                letter-spacing: .07em;
            }

            .hero-lead {
                font-size: .96rem;
            }

            .hero-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .hero-actions .button {
                width: 100%;
            }

            .hero-metrics {
                row-gap: 18px;
            }

            .hero-metric {
                min-width: 50%;
            }

            .hero-metric:nth-child(3) {
                padding-left: 0;
                border-left: 0;
            }

            .hero-visual-wrap {
                margin-top: 45px;
                padding-top: 15px;
            }

            .hero-visual-wrap::before {
                right: 8px;
                left: 8px;
            }

            .hero-visual {
                min-height: 495px;
                border-radius: 130px 130px 25px 25px;
            }

            .hero-visual-top {
                top: 26px;
                right: 22px;
                left: 22px;
            }

            .hero-visual-bottom {
                right: 17px;
                bottom: 17px;
                left: 17px;
                padding: 20px;
            }

            .floating-note {
                display: none;
            }

            .search-panel {
                padding: 18px;
            }

            .search-form {
                align-items: stretch;
                flex-direction: column;
            }

            .search-form .button {
                width: 100%;
            }

            .card-visual {
                min-height: 240px;
            }

            .editorial-panel {
                min-height: 500px;
                padding: 24px;
                border-radius: 24px;
            }

            .editorial-quote {
                right: 18px;
                bottom: 18px;
                left: 18px;
                padding: 21px;
            }

            .ranking-item {
                padding: 18px 16px;
            }

            .data-card {
                padding: 23px;
            }

            .story-block {
                border-radius: 23px;
            }

            .story-block .story-visual {
                min-height: 390px;
            }

            .story-content {
                padding: 32px 25px;
            }

            .insight-card {
                padding-right: 7px;
                padding-left: 7px;
            }

            .faq-item summary {
                padding: 18px 50px 18px 18px;
            }

            .faq-item summary::before,
            .faq-item summary::after {
                right: 19px;
            }

            .faq-answer {
                padding: 0 20px 20px 18px;
            }

            .cta-panel {
                padding: 38px 25px;
                border-radius: 24px;
            }

            .cta-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .cta-actions .button {
                width: 100%;
            }

            .age-dialog {
                padding: 30px 22px;
                border-radius: 24px;
            }

            .age-actions {
                flex-direction: column;
            }

            .age-actions .button {
                width: 100%;
                max-width: none;
            }

            .toast {
                right: 16px;
                bottom: 16px;
                left: 16px;
                max-width: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }