/* roulang page: index */
:root {
            --bg: #070b18;
            --bg-soft: #0b1127;
            --panel: rgba(15, 25, 55, .72);
            --panel-strong: rgba(18, 30, 67, .9);
            --panel-light: rgba(86, 183, 255, .08);
            --primary: #56b7ff;
            --primary-deep: #368ee9;
            --violet: #8a78ff;
            --pink: #ff7e9a;
            --text: #f3f7ff;
            --muted: #a9b6cd;
            --subtle: #71809f;
            --border: rgba(138, 176, 235, .19);
            --border-bright: rgba(86, 183, 255, .6);
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow: 0 24px 70px rgba(0, 4, 20, .34);
            --glow: 0 0 30px rgba(86, 183, 255, .18);
            --transition: 220ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 82% 8%, rgba(138, 120, 255, .16), transparent 28rem),
                radial-gradient(circle at 10% 36%, rgba(86, 183, 255, .1), transparent 26rem),
                linear-gradient(180deg, #060915 0%, #0a1022 46%, #070b18 100%);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            overflow-x: hidden;
        }

        body::before {
            position: fixed;
            inset: 0;
            z-index: -2;
            content: "";
            pointer-events: none;
            opacity: .26;
            background-image:
                linear-gradient(rgba(126, 162, 220, .05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(126, 162, 220, .05) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, black, transparent 82%);
        }

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

        button, input { font: inherit; }
        button, .button { cursor: pointer; }
        img { display: block; max-width: 100%; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--text); letter-spacing: -.035em; line-height: 1.18; }
        p { color: var(--muted); }
        ::selection { color: #fff; background: rgba(86, 183, 255, .42); }

        a:focus-visible, button:focus-visible, input:focus-visible {
            outline: 3px solid rgba(86, 183, 255, .72);
            outline-offset: 3px;
        }

        .site-shell { position: relative; isolation: isolate; }
        .grid-container { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
        .section { position: relative; padding: 96px 0; }
        .section-compact { padding: 66px 0; }
        .muted-section {
            border-top: 1px solid rgba(132, 170, 228, .09);
            border-bottom: 1px solid rgba(132, 170, 228, .09);
            background: rgba(8, 14, 32, .52);
        }

        .site-header {
            position: relative;
            z-index: 50;
            border-bottom: 1px solid var(--border);
            background: rgba(6, 10, 23, .82);
            backdrop-filter: blur(20px);
        }

        .masthead {
            min-height: 116px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 34px;
        }

        .brand {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            min-width: 345px;
        }

        .brand-mark {
            width: 48px;
            height: 48px;
            margin-right: 15px;
            border: 1px solid rgba(86, 183, 255, .48);
            border-radius: 12px;
            background:
                linear-gradient(135deg, rgba(86, 183, 255, .25), rgba(138, 120, 255, .18)),
                repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.06) 8px 9px);
            box-shadow: inset 0 1px rgba(255,255,255,.14), var(--glow);
            position: relative;
        }

        .brand-mark::before, .brand-mark::after {
            content: "";
            position: absolute;
            background: var(--primary);
            box-shadow: 0 0 12px rgba(86, 183, 255, .7);
        }

        .brand-mark::before { width: 18px; height: 2px; left: 14px; top: 17px; }
        .brand-mark::after { width: 2px; height: 18px; left: 22px; top: 14px; }

        .brand-name {
            display: block;
            color: var(--text);
            font-size: clamp(1.25rem, 2.2vw, 2rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.05em;
        }

        .brand-meta {
            display: block;
            margin-top: 5px;
            color: var(--subtle);
            font-size: .69rem;
            letter-spacing: .17em;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 9px;
            padding-left: 30px;
            border-left: 1px solid var(--border);
        }

        .desktop-nav a {
            position: relative;
            padding: 12px 15px;
            border-radius: 9px;
            color: var(--muted);
            font-size: .92rem;
            white-space: nowrap;
        }

        .desktop-nav a:hover {
            color: var(--text);
            background: rgba(86, 183, 255, .07);
        }

        .desktop-nav a.active {
            color: #fff;
            background: rgba(86, 183, 255, .12);
            box-shadow: inset 0 -2px var(--primary);
        }

        .header-tools {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .update-dot {
            display: flex;
            align-items: center;
            color: var(--muted);
            font-size: .76rem;
            white-space: nowrap;
        }

        .update-dot::before {
            width: 7px;
            height: 7px;
            margin-right: 8px;
            content: "";
            border-radius: 50%;
            background: #79e0bc;
            box-shadow: 0 0 12px rgba(121, 224, 188, .65);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            background: var(--panel);
        }

        .mobile-nav {
            display: none;
            padding: 0 24px 18px;
        }

        .mobile-nav.is-open { display: block; }
        .mobile-nav a {
            display: block;
            padding: 13px 4px;
            color: var(--muted);
            border-bottom: 1px solid var(--border);
        }
        .mobile-nav a.active { color: var(--primary); }

        .hero {
            min-height: 760px;
            padding: 62px 0 36px;
            display: flex;
            align-items: center;
        }

        .hero-stage {
            position: relative;
            min-height: 620px;
            overflow: hidden;
            border: 1px solid rgba(130, 173, 238, .25);
            border-radius: 30px;
            background:
                radial-gradient(circle at 72% 34%, rgba(86, 183, 255, .23), transparent 20rem),
                radial-gradient(circle at 85% 74%, rgba(255, 126, 154, .13), transparent 17rem),
                linear-gradient(135deg, rgba(14, 24, 54, .93), rgba(8, 13, 31, .9));
            box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
        }

        .hero-stage::before {
            position: absolute;
            inset: 0;
            content: "";
            background:
                linear-gradient(90deg, transparent 49.8%, rgba(117, 163, 227, .08) 50%, transparent 50.2%),
                linear-gradient(transparent 49.8%, rgba(117, 163, 227, .08) 50%, transparent 50.2%);
            background-size: 96px 96px;
            opacity: .55;
        }

        .hero-copy {
            position: relative;
            z-index: 3;
            max-width: 790px;
            padding: 92px 64px 70px;
        }

        .index-label, .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(86, 183, 255, .24);
            color: #cde9ff;
            background: rgba(86, 183, 255, .08);
        }

        .index-label {
            padding: 7px 12px;
            border-radius: 999px;
            font-size: .74rem;
            letter-spacing: .12em;
        }

        .index-label::before {
            width: 6px;
            height: 6px;
            content: "";
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 10px var(--primary);
        }

        .hero h1 {
            max-width: 760px;
            margin: 24px 0;
            font-size: clamp(2.8rem, 6.2vw, 5.7rem);
            font-weight: 900;
        }

        .hero h1 span {
            display: block;
            background: linear-gradient(90deg, #fff 8%, #a9ddff 55%, #b7adff 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-intro {
            max-width: 680px;
            margin-bottom: 30px;
            color: #becbe0;
            font-size: 1.08rem;
            line-height: 1.9;
        }

        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 0;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            margin: 0;
            padding: 13px 21px;
            border: 1px solid transparent;
            border-radius: 11px;
            font-size: .92rem;
            font-weight: 700;
        }

        .button.primary {
            color: #fff;
            background: linear-gradient(120deg, var(--primary-deep), var(--violet));
            box-shadow: 0 10px 30px rgba(71, 142, 235, .22);
        }

        .button.primary:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 12px 36px rgba(86, 183, 255, .33);
        }

        .button.hollow {
            color: var(--text);
            border-color: var(--border);
            background: rgba(10, 18, 40, .58);
        }

        .button.hollow:hover {
            color: var(--primary);
            border-color: var(--border-bright);
            background: rgba(86, 183, 255, .08);
        }

        .button .arrow { margin-left: 8px; transition: transform var(--transition); }
        .button:hover .arrow { transform: translateX(4px); }
        .button.disabled, .button[disabled] { opacity: .42; pointer-events: none; }

        .hero-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            margin-top: 37px;
        }

        .hero-metric strong {
            display: block;
            color: var(--text);
            font-size: 1.03rem;
        }

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

        .archive-visual {
            position: absolute;
            z-index: 2;
            right: 44px;
            top: 64px;
            width: 350px;
            height: 485px;
            transform: rotate(2deg);
            border: 1px solid rgba(123, 174, 241, .29);
            border-radius: 22px;
            background:
                linear-gradient(160deg, rgba(86,183,255,.28), transparent 38%),
                linear-gradient(25deg, rgba(255,126,154,.16), transparent 34%),
                #101b3c;
            box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.14);
            overflow: hidden;
        }

        .archive-visual::before {
            position: absolute;
            inset: 20px;
            content: "";
            border: 1px solid rgba(218, 235, 255, .12);
            background:
                repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.055) 34px 35px),
                linear-gradient(120deg, transparent, rgba(255,255,255,.04));
        }

        .archive-number {
            position: absolute;
            top: 31px;
            left: 34px;
            font-size: 4.8rem;
            font-weight: 900;
            color: rgba(242, 248, 255, .12);
        }

        .archive-title {
            position: absolute;
            left: 38px;
            bottom: 77px;
            max-width: 210px;
            color: #fff;
            font-size: 1.65rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .archive-meta {
            position: absolute;
            left: 38px;
            right: 38px;
            bottom: 35px;
            display: flex;
            justify-content: space-between;
            color: #aec4e4;
            font-size: .72rem;
        }

        .floating-note {
            position: absolute;
            z-index: 4;
            right: 304px;
            bottom: 72px;
            width: 230px;
            padding: 17px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: rgba(8, 16, 37, .86);
            backdrop-filter: blur(16px);
            box-shadow: var(--shadow);
        }

        .floating-note strong { display: block; margin-bottom: 5px; font-size: .9rem; }
        .floating-note span { color: var(--muted); font-size: .76rem; }

        .quick-index {
            position: relative;
            z-index: 4;
            display: flex;
            gap: 9px;
            margin: -67px 28px 0;
            padding: 15px;
            overflow-x: auto;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: rgba(7, 13, 30, .88);
            backdrop-filter: blur(18px);
            scrollbar-width: thin;
        }

        .quick-index a {
            flex: 1 0 auto;
            padding: 10px 16px;
            border-right: 1px solid var(--border);
            color: var(--muted);
            font-size: .82rem;
            text-align: center;
        }

        .quick-index a:last-child { border-right: 0; }
        .quick-index a:hover { color: var(--primary); }

        .section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 42px;
        }

        .section-heading .number {
            display: block;
            margin-bottom: 8px;
            color: var(--primary);
            font-size: .73rem;
            letter-spacing: .18em;
        }

        .section-heading h2 {
            margin-bottom: 0;
            font-size: clamp(2rem, 4vw, 3.45rem);
        }

        .section-heading p {
            max-width: 560px;
            margin: 0;
            line-height: 1.85;
        }

        .glass-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: linear-gradient(145deg, rgba(18, 30, 67, .78), rgba(8, 15, 34, .72));
            box-shadow: 0 18px 48px rgba(0, 4, 18, .18), inset 0 1px rgba(255,255,255,.05);
            backdrop-filter: blur(15px);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
        }

        .glass-card:hover {
            transform: translateY(-4px);
            border-color: var(--border-bright);
            box-shadow: 0 24px 55px rgba(0, 5, 25, .32), var(--glow);
        }

        .story-band {
            overflow: hidden;
            padding: 48px;
            border-radius: var(--radius-lg);
            position: relative;
        }

        .story-band::after {
            position: absolute;
            right: -80px;
            top: -110px;
            width: 360px;
            height: 360px;
            content: "";
            border-radius: 50%;
            background: rgba(138, 120, 255, .15);
            filter: blur(30px);
        }

        .story-copy { position: relative; z-index: 2; max-width: 640px; }
        .story-copy h2 { margin: 13px 0 17px; font-size: clamp(2rem, 4vw, 3.25rem); }
        .story-copy p { margin-bottom: 23px; }

        .story-principles {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .principle {
            min-height: 118px;
            padding: 20px;
            border: 1px solid rgba(149, 181, 231, .16);
            border-radius: 14px;
            background: rgba(6, 13, 31, .48);
        }

        .principle b { display: block; margin-bottom: 8px; }
        .principle small { color: var(--muted); line-height: 1.65; }

        .feature-tabs {
            overflow: hidden;
            border-radius: var(--radius-lg);
        }

        .tabs {
            border: 0;
            background: transparent;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .tabs-title > a {
            padding: 19px 17px;
            color: var(--muted);
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background: rgba(8, 15, 35, .72);
            font-size: .88rem;
            text-align: center;
        }

        .tabs-title:last-child > a { border-right: 0; }
        .tabs-title > a:hover { color: var(--text); background: rgba(86,183,255,.07); }
        .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] {
            color: var(--primary);
            background: rgba(86,183,255,.11);
        }

        .tabs-content { border: 0; background: transparent; }
        .tabs-panel { padding: 34px; }

        .feature-main {
            min-height: 320px;
            padding: 34px;
            border-radius: 18px;
            background:
                radial-gradient(circle at 90% 10%, rgba(86, 183, 255, .14), transparent 16rem),
                rgba(9, 17, 39, .66);
            border: 1px solid var(--border);
        }

        .feature-main h3 { margin: 15px 0 13px; font-size: 1.7rem; }
        .feature-main p { max-width: 540px; }
        .feature-index { color: var(--primary); font-size: .75rem; letter-spacing: .17em; }

        .micro-bars { margin: 25px 0; }
        .micro-bar { margin-bottom: 13px; }
        .micro-bar span {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            color: var(--muted);
            font-size: .75rem;
        }

        .micro-line {
            height: 4px;
            border-radius: 999px;
            background: rgba(128, 156, 201, .13);
            overflow: hidden;
        }

        .micro-line i {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary), var(--violet));
        }

        .feature-mini {
            min-height: 151px;
            padding: 21px;
            margin-bottom: 18px;
        }

        .feature-mini:last-child { margin-bottom: 0; }
        .feature-mini b { display: block; margin: 8px 0; }
        .feature-mini p { margin: 0; font-size: .86rem; }

        .text-link { color: #a9ddff; font-size: .85rem; font-weight: 700; }
        .text-link:hover { color: #fff; }

        .badge {
            padding: 5px 10px;
            border-radius: 999px;
            font-size: .69rem;
            letter-spacing: .04em;
        }

        .badge.pink {
            color: #ffd7e0;
            border-color: rgba(255,126,154,.25);
            background: rgba(255,126,154,.09);
        }

        .badge.violet {
            color: #d9d3ff;
            border-color: rgba(138,120,255,.29);
            background: rgba(138,120,255,.1);
        }

        .scene-wide {
            min-height: 310px;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }

        .scene-wide::before {
            position: absolute;
            inset: 0;
            content: "";
            background:
                linear-gradient(90deg, rgba(7, 13, 30, .93) 0%, rgba(7, 13, 30, .55) 58%, transparent),
                radial-gradient(circle at 84% 45%, rgba(86,183,255,.27), transparent 13rem);
        }

        .scene-wide.pink-scene::before {
            background:
                linear-gradient(90deg, rgba(7, 13, 30, .93) 0%, rgba(7, 13, 30, .55) 58%, transparent),
                radial-gradient(circle at 84% 45%, rgba(255,126,154,.2), transparent 13rem);
        }

        .scene-content {
            position: relative;
            z-index: 2;
            max-width: 500px;
        }

        .scene-content h3 { margin: 18px 0 12px; font-size: 1.65rem; }
        .scene-content p { margin-bottom: 25px; }
        .scene-side {
            height: 100%;
            min-height: 638px;
            padding: 29px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background:
                linear-gradient(180deg, rgba(138,120,255,.17), transparent 48%),
                rgba(12, 21, 48, .76);
        }

        .scene-side h3 { margin: 17px 0 12px; }
        .scene-list { margin: 0; list-style: none; }
        .scene-list li {
            padding: 13px 0;
            color: var(--muted);
            border-bottom: 1px solid var(--border);
        }

        .bubble-wall {
            display: grid;
            grid-template-columns: 1.2fr .8fr 1fr;
            gap: 18px;
            align-items: start;
        }

        .bubble {
            padding: 25px;
            border-radius: 18px 18px 18px 6px;
        }

        .bubble:nth-child(2) { margin-top: 46px; border-radius: 18px 18px 6px 18px; }
        .bubble:nth-child(3) { margin-top: 13px; }
        .bubble-title { display: block; margin-bottom: 9px; color: var(--text); font-weight: 800; }
        .bubble p { margin: 0; font-size: .9rem; }
        .bubble small { display: block; margin-top: 15px; color: var(--subtle); }

        .case-board {
            margin-top: 28px;
            padding: 30px;
            border-radius: var(--radius-lg);
        }

        .case-number {
            color: rgba(86, 183, 255, .25);
            font-size: 4rem;
            font-weight: 900;
            line-height: 1;
        }

        .case-board h3 { margin: 9px 0 11px; }
        .case-route {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-top: 18px;
        }

        .case-route span {
            padding: 7px 10px;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: .73rem;
        }

        .case-route i { color: var(--primary); font-style: normal; }

        .news-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
            gap: 24px;
        }

        .news-list { overflow: hidden; }
        .news-item {
            display: grid;
            grid-template-columns: 105px 1fr auto;
            align-items: center;
            gap: 20px;
            min-height: 112px;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }

        .news-item:last-child { border-bottom: 0; }
        .news-item:hover { background: rgba(86,183,255,.045); }
        .news-item time { color: var(--subtle); font-size: .78rem; }
        .news-item h3 { margin: 0 0 5px; font-size: 1rem; letter-spacing: -.01em; }
        .news-item p { margin: 0; font-size: .82rem; }
        .news-arrow { color: var(--primary); font-size: 1.3rem; }

        .recommend-panel {
            padding: 29px;
            background:
                radial-gradient(circle at 100% 0, rgba(138,120,255,.2), transparent 15rem),
                var(--panel);
        }

        .recommend-panel h3 { margin: 18px 0 12px; font-size: 1.45rem; }
        .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 25px; }

        .plan-layout {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 24px;
            align-items: stretch;
        }

        .plan-intro { padding: 38px; }
        .plan-intro h2 { margin: 16px 0; font-size: clamp(2rem, 4vw, 3.1rem); }
        .plan-stack { display: grid; gap: 18px; }
        .plan-card { padding: 28px; }
        .plan-card.featured {
            padding: 34px;
            border-color: rgba(86,183,255,.42);
            background:
                radial-gradient(circle at 90% 10%, rgba(86,183,255,.17), transparent 15rem),
                var(--panel-strong);
            box-shadow: var(--glow);
        }

        .plan-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .plan-card h3 { margin: 0; font-size: 1.35rem; }
        .plan-card p { margin: 12px 0 17px; }
        .benefits { margin: 0 0 22px; list-style: none; }
        .benefits li {
            position: relative;
            padding: 7px 0 7px 24px;
            color: var(--muted);
            font-size: .86rem;
        }

        .benefits li::before {
            position: absolute;
            left: 0;
            top: 8px;
            color: var(--primary);
            content: "✓";
        }

        .subscribe-box {
            position: relative;
            overflow: hidden;
            padding: 52px;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 80% 30%, rgba(86,183,255,.23), transparent 18rem),
                linear-gradient(120deg, rgba(23, 43, 91, .9), rgba(18, 17, 52, .92));
            border: 1px solid rgba(129, 175, 239, .31);
            box-shadow: var(--shadow);
        }

        .subscribe-box h2 { margin: 14px 0; font-size: clamp(2rem, 4vw, 3.2rem); }
        .subscribe-box p { max-width: 630px; margin-bottom: 0; }
        .search-form {
            display: flex;
            gap: 10px;
            max-width: 520px;
            margin-left: auto;
        }

        .search-form input {
            height: 50px;
            margin: 0;
            padding: 0 17px;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 11px;
            background: rgba(6, 12, 29, .68);
            box-shadow: none;
        }

        .search-form input::placeholder { color: #7d8cab; }
        .search-form input:focus {
            border-color: var(--primary);
            background: rgba(6, 12, 29, .86);
            box-shadow: 0 0 0 3px rgba(86,183,255,.12);
        }

        .form-note { display: block; margin-top: 10px; color: var(--subtle); font-size: .74rem; }

        .accordion {
            margin: 0;
            border: 0;
            background: transparent;
        }

        .accordion-item {
            margin-bottom: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 14px !important;
            background: var(--panel);
        }

        .accordion-title {
            padding: 21px 54px 21px 22px;
            color: var(--text);
            border: 0;
            font-size: .96rem;
            font-weight: 700;
        }

        .accordion-title:hover, .accordion-title:focus {
            color: var(--primary);
            background: rgba(86,183,255,.06);
        }

        .accordion-title::before { color: var(--primary); font-size: 1.25rem; }
        :last-child:not(.is-active) > .accordion-title { border-bottom: 0; }
        .accordion-content {
            padding: 0 22px 22px;
            color: var(--muted);
            border: 0;
            background: transparent;
            line-height: 1.8;
        }

        .site-footer {
            padding: 70px 0 26px;
            border-top: 1px solid var(--border);
            background: rgba(4, 8, 19, .82);
        }

        .footer-brand { max-width: 480px; }
        .footer-brand .brand-name { font-size: 1.55rem; }
        .footer-brand p { margin: 17px 0 0; font-size: .86rem; }
        .footer-nav-title {
            margin-bottom: 14px;
            color: var(--subtle);
            font-size: .7rem;
            letter-spacing: .14em;
        }

        .footer-links { margin: 0; list-style: none; }
        .footer-links li { margin-bottom: 9px; }
        .footer-links a { color: var(--muted); font-size: .86rem; }
        .footer-links a:hover { color: var(--primary); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 45px;
            padding-top: 22px;
            border-top: 1px solid var(--border);
            color: var(--subtle);
            font-size: .73rem;
        }

        @media screen and (max-width: 1100px) {
            .masthead { min-height: 92px; }
            .desktop-nav, .update-dot { display: none; }
            .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
            .brand { min-width: 0; }
            .archive-visual { right: -40px; opacity: .62; }
            .floating-note { right: 110px; }
            .hero-copy { padding-right: 260px; }
        }

        @media screen and (max-width: 900px) {
            .section { padding: 76px 0; }
            .hero { min-height: auto; padding-top: 38px; }
            .hero-stage { min-height: 650px; }
            .hero-copy { padding: 70px 38px 250px; }
            .archive-visual {
                width: 250px;
                height: 290px;
                top: auto;
                right: 35px;
                bottom: 44px;
                transform: rotate(1deg);
            }
            .archive-number { font-size: 3rem; }
            .archive-title { font-size: 1.15rem; bottom: 60px; }
            .floating-note { left: 36px; right: auto; bottom: 64px; }
            .quick-index { margin-top: -24px; }
            .section-heading { display: block; }
            .section-heading p { margin-top: 16px; }
            .story-band { padding: 34px; }
            .story-principles { margin-top: 28px; }
            .scene-side { min-height: 320px; margin-top: 18px; }
            .bubble-wall { grid-template-columns: 1fr 1fr; }
            .bubble:nth-child(2), .bubble:nth-child(3) { margin-top: 0; }
            .news-layout, .plan-layout { grid-template-columns: 1fr; }
            .search-form { margin: 26px 0 0; }
        }

        @media screen and (max-width: 640px) {
            .grid-container { padding-left: 16px; padding-right: 16px; }
            .brand-name { font-size: 1.14rem; }
            .brand-meta { font-size: .58rem; letter-spacing: .09em; }
            .brand-mark { width: 40px; height: 40px; margin-right: 10px; }
            .brand-mark::before { left: 11px; top: 14px; }
            .brand-mark::after { left: 19px; top: 11px; }
            .section { padding: 62px 0; }
            .section-compact { padding: 48px 0; }
            .hero-stage { min-height: 730px; border-radius: 21px; }
            .hero-copy { padding: 46px 23px 330px; }
            .hero h1 { font-size: clamp(2.35rem, 13vw, 3.55rem); }
            .hero-intro { font-size: .94rem; }
            .button-group .button { width: 100%; }
            .hero-metrics { gap: 16px; }
            .archive-visual { right: 18px; bottom: 54px; width: 225px; height: 270px; }
            .floating-note { left: 18px; bottom: 76px; width: 190px; }
            .quick-index { margin: 12px 0 0; border-radius: 12px; }
            .section-heading { margin-bottom: 28px; }
            .story-band, .tabs-panel, .feature-main, .subscribe-box { padding: 24px; }
            .story-principles { grid-template-columns: 1fr; }
            .tabs { grid-template-columns: 1fr 1fr; }
            .tabs-title > a { min-height: 58px; padding: 15px 8px; }
            .feature-main { min-height: 0; margin-bottom: 16px; }
            .scene-wide { min-height: 350px; padding: 24px; }
            .bubble-wall { grid-template-columns: 1fr; }
            .case-board { padding: 22px; }
            .news-item { grid-template-columns: 1fr auto; gap: 8px; padding: 19px; }
            .news-item time { grid-column: 1 / -1; }
            .news-item p { display: none; }
            .plan-intro, .plan-card { padding: 24px; }
            .search-form { display: block; }
            .search-form .button { width: 100%; margin-top: 10px; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-bottom: 8px; }
        }

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

/* roulang page: category1 */
:root{--bg:#070b18;--bg-soft:#0b1127;--panel:rgba(15,25,55,.72);--panel-strong:rgba(18,30,67,.9);--panel-light:rgba(86,183,255,.08);--primary:#56b7ff;--primary-deep:#368ee9;--violet:#8a78ff;--pink:#ff7e9a;--text:#f3f7ff;--muted:#a9b6cd;--subtle:#71809f;--border:rgba(138,176,235,.19);--border-bright:rgba(86,183,255,.6);--radius-lg:24px;--radius-md:16px;--radius-sm:10px;--shadow:0 24px 70px rgba(0,4,20,.34);--glow:0 0 30px rgba(86,183,255,.18);--transition:220ms ease}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(circle at 82% 8%,rgba(138,120,255,.16),transparent 28rem),radial-gradient(circle at 10% 36%,rgba(86,183,255,.1),transparent 26rem),linear-gradient(180deg,#060915 0%,#0a1022 46%,#070b18 100%);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;overflow-x:hidden}body:before{position:fixed;inset:0;z-index:-2;content:"";pointer-events:none;opacity:.26;background-image:linear-gradient(rgba(126,162,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,162,220,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 82%)}a{color:inherit;text-decoration:none;transition:color var(--transition),border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition)}button,input{font:inherit}button,.button{cursor:pointer}img{display:block;max-width:100%}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(86,183,255,.72);outline-offset:3px}.grid-container{max-width:1240px;padding-left:24px;padding-right:24px}.section{position:relative;padding:84px 0}.section-compact{padding:62px 0}.muted-section{border-top:1px solid rgba(132,170,228,.09);border-bottom:1px solid rgba(132,170,228,.09);background:rgba(8,14,32,.52)}
.site-header{position:relative;z-index:50;border-bottom:1px solid var(--border);background:rgba(6,10,23,.82);backdrop-filter:blur(20px)}.masthead{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;flex:0 0 auto;min-width:345px}.brand-mark{width:48px;height:48px;margin-right:15px;border:1px solid rgba(86,183,255,.48);border-radius:12px;background:linear-gradient(135deg,rgba(86,183,255,.25),rgba(138,120,255,.18)),repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.06) 8px 9px);box-shadow:inset 0 1px rgba(255,255,255,.14),var(--glow);position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--primary);box-shadow:0 0 12px rgba(86,183,255,.7)}.brand-mark:before{width:18px;height:2px;left:14px;top:17px}.brand-mark:after{width:2px;height:18px;left:22px;top:14px}.brand-name{display:block;color:var(--text);font-size:clamp(1.25rem,2.2vw,2rem);font-weight:800;line-height:1.15;letter-spacing:-.05em}.brand-meta{display:block;margin-top:5px;color:var(--subtle);font-size:.69rem;letter-spacing:.17em}.desktop-nav{display:flex;align-items:center;gap:9px;padding-left:30px;border-left:1px solid var(--border)}.desktop-nav a{position:relative;padding:12px 15px;border-radius:9px;color:var(--muted);font-size:.92rem;white-space:nowrap}.desktop-nav a:hover{color:var(--text);background:rgba(86,183,255,.07)}.desktop-nav a.active{color:#fff;background:rgba(86,183,255,.12);box-shadow:inset 0 -2px var(--primary)}.header-tools{display:flex;align-items:center;gap:12px}.update-dot{color:var(--muted);font-size:.76rem;white-space:nowrap}.update-dot:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary)}.menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--panel)}.mobile-nav{display:none;padding:0 24px 18px}.mobile-nav.is-open{display:block}.mobile-nav a{display:block;padding:13px 4px;color:var(--muted);border-bottom:1px solid var(--border)}.mobile-nav a.active{color:var(--primary)}
.breadcrumb{margin:0 0 18px;color:var(--subtle);font-size:.85rem}.breadcrumb a:hover{color:var(--primary)}.archive-hero{padding:60px 0 42px}.archive-panel{position:relative;overflow:hidden;padding:44px;border:1px solid rgba(130,173,238,.26);border-radius:30px;background:linear-gradient(120deg,rgba(18,31,69,.92),rgba(9,15,35,.84));box-shadow:var(--shadow)}.archive-panel:after{content:"";position:absolute;right:-12%;top:-40%;width:58%;height:150%;background:radial-gradient(ellipse,rgba(86,183,255,.18),transparent 62%);pointer-events:none}.eyebrow,.badge{display:inline-flex;align-items:center;gap:8px;color:#d7efff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:"";height:1px;width:28px;background:var(--primary);box-shadow:0 0 8px var(--primary)}h1,h2,h3,p{margin-top:0}h1{max-width:720px;margin-bottom:18px;font-size:clamp(2.35rem,5vw,4.55rem);line-height:1.12;letter-spacing:-.065em}h2{font-size:clamp(1.65rem,3vw,2.55rem);line-height:1.26;letter-spacing:-.04em}h3{font-size:1.16rem;line-height:1.35}.intro{max-width:620px;color:var(--muted);font-size:1.04rem}.cover-box{position:relative;min-height:318px;overflow:hidden;border:1px solid rgba(135,185,255,.32);border-radius:20px;background:linear-gradient(135deg,#172c68,#0c1434 48%,#241b59);box-shadow:inset 0 1px rgba(255,255,255,.18),var(--glow)}.cover-box:before{content:"";position:absolute;inset:20px;background:repeating-linear-gradient(90deg,rgba(151,204,255,.16) 0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(151,204,255,.12) 0 1px,transparent 1px 38px);border:1px solid rgba(182,221,255,.24)}.cover-orbit{position:absolute;width:230px;height:230px;border:1px solid rgba(86,183,255,.55);border-radius:50%;right:12%;top:14%;box-shadow:0 0 45px rgba(86,183,255,.2)}.cover-orbit:before,.cover-orbit:after{content:"";position:absolute;border-radius:50%;background:var(--primary);box-shadow:0 0 17px var(--primary)}.cover-orbit:before{width:12px;height:12px;top:25px;left:16px}.cover-orbit:after{width:8px;height:8px;bottom:19px;right:26px;background:var(--pink)}.cover-caption{position:absolute;left:30px;bottom:28px;color:#e7f5ff;font-size:1.25rem;font-weight:800;letter-spacing:.08em}.cover-code{position:absolute;right:20px;bottom:18px;color:rgba(243,247,255,.62);font-size:.78rem;letter-spacing:.18em;writing-mode:vertical-rl}.meta-rail{position:absolute;z-index:2;right:18px;top:18px;width:128px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(5,10,25,.65);backdrop-filter:blur(10px)}.meta-rail span{display:block;margin-bottom:9px;color:var(--subtle);font-size:.68rem}.meta-rail b{display:block;margin-bottom:16px;color:var(--text);font-size:.84rem}.meta-rail b:last-child{margin-bottom:0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}.section-kicker{margin-bottom:8px;color:var(--primary);font-size:.76rem;letter-spacing:.16em}.section-note{max-width:400px;color:var(--muted);font-size:.92rem}.library-layout{align-items:start}.sidebar{position:sticky;top:22px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.side-title{margin:0 0 12px;color:var(--subtle);font-size:.73rem;letter-spacing:.14em}.side-links{margin:0 0 24px;padding:0;list-style:none}.side-links li{border-bottom:1px solid rgba(138,176,235,.11)}.side-links a{display:flex;justify-content:space-between;padding:10px 2px;color:var(--muted);font-size:.9rem}.side-links a:hover,.side-links a.active{color:var(--primary)}.side-links em{font-style:normal;color:var(--subtle);font-size:.72rem}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-block;padding:5px 10px;border:1px solid rgba(138,176,235,.22);border-radius:999px;color:#c7d6ed;background:rgba(86,183,255,.06);font-size:.75rem}.tag:hover{border-color:var(--border-bright);color:var(--text);background:rgba(86,183,255,.13)}.index-note{padding:13px;border-left:2px solid var(--violet);color:var(--muted);font-size:.82rem;background:rgba(138,120,255,.07)}.result-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding:13px 16px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:rgba(9,16,38,.62);font-size:.84rem}.result-bar strong{color:var(--text)}.feature-card,.archive-card,.related-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel);box-shadow:0 16px 45px rgba(0,4,20,.22);backdrop-filter:blur(16px);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}.feature-card:hover,.archive-card:hover,.related-card:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--shadow),var(--glow)}.feature-card{display:grid;grid-template-columns:42% 1fr;margin-bottom:22px}.card-cover{position:relative;min-height:205px;overflow:hidden;background:linear-gradient(135deg,#0b3162,#17214d 52%,#3a235f)}.card-cover:before{content:"";position:absolute;inset:16px;border:1px solid rgba(190,228,255,.27);background:linear-gradient(145deg,transparent 45%,rgba(86,183,255,.18))}.card-cover:after{content:"";position:absolute;width:140px;height:140px;left:22%;top:17%;border:1px solid rgba(86,183,255,.62);border-radius:50%;box-shadow:0 0 35px rgba(86,183,255,.25)}.card-cover.pink{background:linear-gradient(135deg,#351a55,#17214d 57%,#17395b)}.card-cover.pink:after{border-color:rgba(255,126,154,.65);box-shadow:0 0 35px rgba(255,126,154,.22)}.card-cover.violet{background:linear-gradient(135deg,#20245b,#0c183a 55%,#27456b)}.cover-number{position:absolute;z-index:1;left:19px;bottom:13px;color:#fff;font-size:.82rem;letter-spacing:.16em}.card-body{padding:24px}.card-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;color:var(--primary);font-size:.72rem;letter-spacing:.1em}.card-body p{display:-webkit-box;overflow:hidden;margin-bottom:16px;color:var(--muted);font-size:.9rem;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px;border-top:1px solid rgba(138,176,235,.13);color:var(--subtle);font-size:.77rem}.text-link{color:#cceaff;font-size:.84rem}.text-link:hover{color:var(--primary);transform:translateX(3px)}.archive-grid .cell{display:flex;margin-bottom:22px}.archive-card{width:100%;display:flex;flex-direction:column}.archive-card .card-cover{min-height:177px}.archive-card .card-body{flex:1}.pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px}.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:39px;height:39px;padding:0 11px;border:1px solid var(--border);border-radius:10px;color:var(--muted);background:var(--panel);font-size:.86rem}.pager a:hover,.pager .current{border-color:var(--border-bright);color:#fff;background:rgba(86,183,255,.16);box-shadow:var(--glow)}.related-card{padding:30px;background:linear-gradient(110deg,rgba(17,36,78,.88),rgba(35,24,75,.78))}.related-card p{max-width:650px;color:var(--muted)}.button.primary-btn,.button.ghost-btn{margin:0;padding:12px 19px;border-radius:10px;font-weight:700;font-size:.91rem}.button.primary-btn{border:1px solid rgba(157,220,255,.62);color:#fff;background:linear-gradient(115deg,var(--primary-deep),var(--violet));box-shadow:0 8px 24px rgba(86,183,255,.22)}.button.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(86,183,255,.35)}.button.ghost-btn{margin-left:9px;border:1px solid var(--border);color:#dce9fb;background:rgba(86,183,255,.06)}.button.ghost-btn:hover{border-color:var(--border-bright);background:rgba(86,183,255,.13)}.faq-wrap{max-width:900px}.accordion{margin:0;background:transparent}.accordion-item{margin-bottom:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)}.accordion-title{border:0;color:var(--text);background:transparent;font-size:.96rem}.accordion-title:before{color:var(--primary)}.accordion-title:hover,.accordion-title:focus{color:var(--primary);background:rgba(86,183,255,.06)}.accordion-content{border:0;color:var(--muted);background:rgba(7,12,28,.45);font-size:.9rem}.site-footer{padding:56px 0 24px;border-top:1px solid var(--border);background:rgba(4,8,19,.72)}.footer-brand p{max-width:520px;margin-top:12px;color:var(--muted);font-size:.88rem}.footer-nav-title{margin-bottom:10px;color:var(--subtle);font-size:.73rem;letter-spacing:.14em}.footer-links{margin:0;padding:0;list-style:none}.footer-links li{margin:7px 0}.footer-links a{color:var(--muted);font-size:.88rem}.footer-links a:hover{color:var(--primary)}.footer-bottom{display:flex;justify-content:space-between;gap:18px;margin-top:40px;padding-top:19px;border-top:1px solid rgba(138,176,235,.13);color:var(--subtle);font-size:.74rem}
@media(max-width:1024px){.brand{min-width:285px}.desktop-nav{padding-left:16px}.desktop-nav a{padding:11px 9px;font-size:.84rem}.update-dot{display:none}.archive-panel{padding:32px}.sidebar{position:relative;top:auto;margin-bottom:22px}}@media(max-width:768px){.masthead{min-height:78px}.desktop-nav{display:none}.menu-toggle{display:block}.brand{min-width:0}.brand-mark{width:41px;height:41px;margin-right:11px}.brand-mark:before{left:11px;top:15px}.brand-mark:after{left:19px;top:12px}.brand-name{font-size:1.25rem}.brand-meta{font-size:.59rem}.archive-hero{padding-top:36px}.archive-panel{padding:26px}.cover-box{margin-top:28px;min-height:260px}.section{padding:66px 0}.section-heading{display:block}.section-note{margin-top:10px}.feature-card{grid-template-columns:1fr}.feature-card .card-cover{min-height:180px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:7px}}@media(max-width:520px){.grid-container{padding-left:17px;padding-right:17px}.archive-panel{padding:22px 18px;border-radius:20px}h1{font-size:2.25rem}.intro{font-size:.94rem}.meta-rail{width:110px;right:12px;top:12px}.cover-caption{left:18px;bottom:18px;font-size:1rem}.section{padding:54px 0}.card-body{padding:19px}.result-bar{align-items:flex-start;flex-direction:column}.pager{gap:5px}.pager a,.pager span{min-width:35px;height:35px}.button.ghost-btn{margin:10px 0 0}.footer-bottom{margin-top:26px}.tag-list{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category2 */
:root{
 --bg:#070b18;--bg-soft:#0b1127;--panel:rgba(15,25,55,.72);--panel-strong:rgba(18,30,67,.9);
 --panel-light:rgba(86,183,255,.08);--primary:#56b7ff;--primary-deep:#368ee9;--violet:#8a78ff;
 --pink:#ff7e9a;--text:#f3f7ff;--muted:#a9b6cd;--subtle:#71809f;--border:rgba(138,176,235,.19);
 --border-bright:rgba(86,183,255,.6);--radius-lg:24px;--radius-md:16px;--radius-sm:10px;
 --shadow:0 24px 70px rgba(0,4,20,.34);--glow:0 0 30px rgba(86,183,255,.18);--transition:220ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);background:
 radial-gradient(circle at 82% 8%,rgba(138,120,255,.16),transparent 28rem),
 radial-gradient(circle at 10% 36%,rgba(86,183,255,.10),transparent 26rem),
 linear-gradient(180deg,#060915 0%,#0a1022 46%,#070b18 100%);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;overflow-x:hidden;
}
body:before{position:fixed;inset:0;z-index:-2;content:"";pointer-events:none;opacity:.26;background-image:linear-gradient(rgba(126,162,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,162,220,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
a{color:inherit;text-decoration:none;transition:color var(--transition),border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition)}
button,input{font:inherit}button,.button{cursor:pointer}img{display:block;max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(86,183,255,.72);outline-offset:3px}
.grid-container{max-width:1240px;padding-left:24px;padding-right:24px}
.section{position:relative;padding:88px 0}.section-compact{padding:62px 0}
.muted-section{border-top:1px solid rgba(132,170,228,.09);border-bottom:1px solid rgba(132,170,228,.09);background:rgba(8,14,32,.52)}
.site-header{position:relative;z-index:50;border-bottom:1px solid var(--border);background:rgba(6,10,23,.82);backdrop-filter:blur(20px)}
.masthead{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:345px}
.brand-mark{width:48px;height:48px;margin-right:15px;border:1px solid rgba(86,183,255,.48);border-radius:12px;background:linear-gradient(135deg,rgba(86,183,255,.25),rgba(138,120,255,.18)),repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.06) 8px 9px);box-shadow:inset 0 1px rgba(255,255,255,.14),var(--glow);position:relative}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--primary);box-shadow:0 0 12px rgba(86,183,255,.7)}
.brand-mark:before{width:18px;height:2px;left:14px;top:17px}.brand-mark:after{width:2px;height:18px;left:22px;top:14px}
.brand-name{display:block;color:var(--text);font-size:clamp(1.25rem,2.2vw,2rem);font-weight:800;line-height:1.15;letter-spacing:-.05em}
.brand-meta{display:block;margin-top:5px;color:var(--subtle);font-size:.69rem;letter-spacing:.17em}
.desktop-nav{display:flex;align-items:center;gap:9px;padding-left:30px;border-left:1px solid var(--border)}
.desktop-nav a{position:relative;padding:12px 15px;border-radius:9px;color:var(--muted);font-size:.92rem;white-space:nowrap}
.desktop-nav a:hover{color:var(--text);background:rgba(86,183,255,.07)}
.desktop-nav a.active{color:#fff;background:rgba(86,183,255,.12);box-shadow:inset 0 -2px var(--primary)}
.header-tools{display:flex;align-items:center;gap:12px}.update-dot{color:var(--muted);font-size:.75rem;white-space:nowrap}.update-dot:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary)}
.menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--panel)}
.mobile-nav{display:none;padding:0 24px 18px}.mobile-nav.is-open{display:block}.mobile-nav a{display:block;padding:13px 4px;color:var(--muted);border-bottom:1px solid var(--border)}.mobile-nav a.active{color:var(--primary)}
.eyebrow,.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(86,183,255,.3);border-radius:999px;color:#bfe3ff;background:rgba(86,183,255,.08);font-size:.74rem;line-height:1;padding:8px 11px;letter-spacing:.06em}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
.section-head{max-width:720px;margin-bottom:36px}.section-no{display:block;margin-bottom:10px;color:var(--primary);font-size:.76rem;font-weight:700;letter-spacing:.18em}.section-head h2{margin:0 0 12px;font-size:clamp(1.7rem,3vw,2.75rem);line-height:1.25;letter-spacing:-.045em}.section-head p{margin:0;max-width:40em;color:var(--muted)}
.button{margin:0;border-radius:10px;font-weight:700;letter-spacing:.02em}.button.primary-action{color:#fff;background:linear-gradient(110deg,var(--primary-deep),var(--violet));box-shadow:0 8px 24px rgba(86,183,255,.2)}.button.primary-action:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(86,183,255,.34)}.button.ghost-action{color:#d9ebff;border:1px solid var(--border-bright);background:rgba(86,183,255,.06)}.button.ghost-action:hover{background:rgba(86,183,255,.14);transform:translateY(-2px)}
.archive-cover{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(86,183,255,.22),rgba(138,120,255,.12) 52%,rgba(255,126,154,.12));isolation:isolate}.archive-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,rgba(209,237,255,.18) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(209,237,255,.14) 50%,transparent 51%);background-size:42px 42px;opacity:.58}.archive-cover:after{content:"";position:absolute;width:55%;aspect-ratio:1;border:1px solid rgba(190,229,255,.65);border-radius:50%;right:-13%;bottom:-38%;box-shadow:0 0 0 28px rgba(86,183,255,.06),0 0 48px rgba(86,183,255,.24)}
.cover-code{position:absolute;z-index:2;top:16px;left:18px;color:rgba(243,247,255,.76);font-size:.72rem;letter-spacing:.15em}.cover-bars{position:absolute;z-index:2;right:16px;bottom:18px;display:flex;gap:4px;align-items:end}.cover-bars i{display:block;width:5px;background:var(--primary);box-shadow:0 0 10px rgba(86,183,255,.6)}.cover-bars i:nth-child(1){height:17px}.cover-bars i:nth-child(2){height:31px;background:var(--violet)}.cover-bars i:nth-child(3){height:23px}.cover-bars i:nth-child(4){height:40px;background:var(--pink)}
.category-banner{position:relative;min-height:440px;display:flex;align-items:end;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(115deg,#081126 12%,rgba(10,20,52,.86) 47%,rgba(31,20,76,.73));isolation:isolate}
.category-banner:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 76% 35%,rgba(86,183,255,.34),transparent 11rem),radial-gradient(circle at 85% 74%,rgba(255,126,154,.2),transparent 16rem),linear-gradient(90deg,rgba(7,11,24,.25),rgba(7,11,24,.86))}
.category-banner:after{content:"";position:absolute;right:6%;top:12%;width:340px;height:340px;border:1px solid rgba(170,218,255,.36);border-radius:48% 52% 42% 58%;transform:rotate(22deg);box-shadow:0 0 0 28px rgba(86,183,255,.04),0 0 0 58px rgba(138,120,255,.035);z-index:-1}
.banner-inner{width:100%;padding:82px 0 48px}.breadcrumbs{display:flex;gap:9px;margin-bottom:20px;color:var(--muted);font-size:.84rem}.breadcrumbs span:last-child{color:var(--primary)}
.banner-card{max-width:800px;padding:27px 30px 29px;border:1px solid rgba(154,199,247,.28);border-radius:var(--radius-lg);background:rgba(8,15,38,.53);backdrop-filter:blur(13px);box-shadow:var(--shadow)}
.banner-topline{display:flex;align-items:center;gap:12px;color:#bcdfff;font-size:.76rem;letter-spacing:.14em}.banner-topline b{color:var(--pink);font-size:1rem}
h1{margin:12px 0 13px;font-size:clamp(2.25rem,5vw,4.7rem);line-height:1.05;letter-spacing:-.075em}h1 em{color:var(--primary);font-style:normal}
.banner-card p{max-width:42em;margin:0;color:var(--muted);font-size:1.03rem}
.banner-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.badge.pink{border-color:rgba(255,126,154,.35);background:rgba(255,126,154,.09);color:#ffc0ce}.badge.violet{border-color:rgba(138,120,255,.4);background:rgba(138,120,255,.1);color:#d3cdff}
.index-band{position:relative;z-index:3;margin-top:-24px}.index-band-inner{display:flex;align-items:center;gap:20px;padding:16px 21px;border:1px solid var(--border);border-radius:var(--radius-md);background:rgba(13,22,49,.86);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.index-label{flex:0 0 auto;color:var(--subtle);font-size:.72rem;letter-spacing:.14em}.index-items{display:flex;gap:9px;overflow:auto;padding-bottom:2px}.index-items a{flex:0 0 auto;padding:7px 12px;border-radius:8px;color:var(--muted);font-size:.84rem}.index-items a:hover,.index-items a.active{color:#fff;background:rgba(86,183,255,.13)}
.rail{display:flex;gap:16px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x proximity}.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(86,183,255,.28)}
.topic-chip{position:relative;flex:0 0 220px;min-height:160px;padding:17px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel);overflow:hidden;scroll-snap-align:start}.topic-chip:before{content:"";position:absolute;inset:auto -28px -47px auto;width:118px;height:118px;border:1px solid rgba(86,183,255,.35);border-radius:50%;box-shadow:0 0 0 18px rgba(138,120,255,.06)}.topic-chip:hover{transform:translateY(-4px);border-color:var(--border-bright);background:rgba(22,37,79,.84);box-shadow:var(--glow)}.topic-chip small{position:relative;color:var(--primary);font-size:.68rem;letter-spacing:.14em}.topic-chip strong{position:relative;display:block;margin-top:27px;font-size:1.06rem;line-height:1.35}.topic-chip span{position:relative;display:block;margin-top:8px;color:var(--muted);font-size:.8rem}
.feature-grid{align-items:stretch}.feature-main,.side-card,.archive-item,.info-panel,.faq-panel,.cross-card{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(15px)}
.feature-main{display:grid;grid-template-columns:minmax(220px,42%) 1fr;min-height:398px;overflow:hidden;border-radius:var(--radius-lg)}.feature-main:hover,.side-card:hover,.archive-item:hover{border-color:var(--border-bright);transform:translateY(-4px);box-shadow:var(--shadow),var(--glow)}
.feature-main .archive-cover{min-height:100%}.feature-content{padding:30px}.record-no{color:var(--primary);font-size:.75rem;font-weight:700;letter-spacing:.15em}.feature-content h2{margin:12px 0;font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.25;letter-spacing:-.04em}.feature-content p{margin:0;color:var(--muted);max-width:30em}.meta-row{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0;color:#c4d8ee;font-size:.8rem}.meta-row span:before{content:"/";color:var(--primary);margin-right:7px}.text-link{display:inline-flex;align-items:center;gap:8px;color:#bfe4ff;font-size:.91rem;font-weight:700}.text-link:after{content:"→";transition:transform var(--transition)}.text-link:hover{color:#fff}.text-link:hover:after{transform:translateX(4px)}
.side-stack{display:grid;gap:16px}.side-card{position:relative;min-height:191px;padding:22px;border-radius:var(--radius-md);overflow:hidden}.side-card .archive-cover{position:absolute;right:0;top:0;width:42%;height:100%;opacity:.65}.side-card .archive-cover:after{width:110%;right:-48%;bottom:-45%}.side-card>*:not(.archive-cover){position:relative;z-index:1}.side-card h3{max-width:67%;margin:13px 0 8px;font-size:1.2rem;line-height:1.35}.side-card p{max-width:64%;margin:0 0 14px;color:var(--muted);font-size:.85rem;line-height:1.65}
.archive-list{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.archive-item{display:grid;grid-template-columns:145px 1fr;min-height:196px;overflow:hidden;border-radius:var(--radius-md)}.archive-item:nth-child(2){margin-top:38px}.archive-item:nth-child(3){margin-top:-18px}.archive-item .archive-cover{min-height:100%}.archive-copy{padding:19px}.archive-copy h3{margin:10px 0 7px;font-size:1.12rem;line-height:1.4}.archive-copy p{display:-webkit-box;overflow:hidden;margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical}.date{color:var(--subtle);font-size:.74rem}
.index-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}.timeline{position:relative;padding-left:33px}.timeline:before{content:"";position:absolute;left:7px;top:7px;bottom:7px;width:1px;background:linear-gradient(var(--primary),rgba(138,120,255,.1))}.timeline-item{position:relative;padding:0 0 28px}.timeline-item:before{content:"";position:absolute;left:-31px;top:8px;width:11px;height:11px;border:2px solid var(--primary);border-radius:50%;background:var(--bg);box-shadow:0 0 13px rgba(86,183,255,.55)}.timeline-item h3{margin:0 0 6px;font-size:1.08rem}.timeline-item p{max-width:37em;margin:0;color:var(--muted);font-size:.9rem}.timeline-item .date{display:block;margin-bottom:6px;color:var(--primary)}
.info-panel{padding:26px;border-radius:var(--radius-lg)}.info-panel h3{margin:0 0 18px;font-size:1.35rem}.info-list{margin:0;padding:0;list-style:none}.info-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:.9rem}.info-list li:last-child{border-bottom:0}.info-list b{color:var(--text);font-weight:600}.mini-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.faq-panel{padding:8px 22px;border-radius:var(--radius-lg)}.accordion{margin:0;background:transparent}.accordion-item,.accordion-item:first-child>:first-child{border:0;background:transparent}.accordion-title{padding:20px 28px 20px 0;border-bottom:1px solid var(--border);color:var(--text);font-size:1rem;font-weight:700}.accordion-title:hover,.accordion-title:focus{color:var(--primary);background:transparent}.accordion-title:before{right:3px;color:var(--primary);font-size:1.3rem}.accordion-content{padding:2px 30px 20px 0;border:0;border-bottom:1px solid var(--border);color:var(--muted);background:transparent}.accordion-item:last-child .accordion-title{border-bottom:0}.accordion-item:last-child .accordion-content{border-bottom:0}
.cross-card{position:relative;overflow:hidden;padding:38px;border-radius:var(--radius-lg);background:linear-gradient(110deg,rgba(15,33,73,.9),rgba(34,24,79,.8))}.cross-card:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(140,211,255,.32);border-radius:50%;right:-74px;top:-123px;box-shadow:0 0 0 32px rgba(86,183,255,.05)}.cross-card>*{position:relative;z-index:1}.cross-card h2{max-width:680px;margin:12px 0;color:#fff;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.3}.cross-card p{max-width:620px;margin:0 0 22px;color:var(--muted)}
.site-footer{padding:65px 0 26px;border-top:1px solid var(--border);background:rgba(4,8,19,.78)}.footer-brand p{max-width:450px;margin:12px 0 0;color:var(--muted);font-size:.9rem}.footer-nav-title{margin-bottom:11px;color:#dff0ff;font-size:.78rem;font-weight:700;letter-spacing:.12em}.footer-links{margin:0;padding:0;list-style:none}.footer-links li{margin:8px 0}.footer-links a{color:var(--muted);font-size:.88rem}.footer-links a:hover{color:var(--primary)}.footer-bottom{display:flex;justify-content:space-between;gap:22px;margin-top:42px;padding-top:20px;border-top:1px solid var(--border);color:var(--subtle);font-size:.76rem}
@media(max-width:1050px){.brand{min-width:290px}.desktop-nav a{padding:10px 9px;font-size:.84rem}.update-dot{display:none}.feature-main{grid-template-columns:38% 1fr}}
@media(max-width:800px){.masthead{min-height:78px}.desktop-nav{display:none}.menu-toggle{display:block}.brand{min-width:0}.section{padding:66px 0}.category-banner{min-height:390px}.banner-inner{padding-top:62px}.feature-main{grid-template-columns:1fr}.feature-main .archive-cover{min-height:220px}.side-stack{margin-top:16px}.index-layout{grid-template-columns:1fr}.archive-list{grid-template-columns:1fr 1fr}.archive-item:nth-child(2){margin-top:28px}.archive-item:nth-child(3){margin-top:0}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}}
@media(max-width:640px){body{font-size:15px}.grid-container{padding-left:18px;padding-right:18px}.brand-mark{width:40px;height:40px;margin-right:10px}.brand-mark:before{left:11px;top:14px}.brand-mark:after{left:19px;top:11px}.brand-name{font-size:1.18rem}.brand-meta{font-size:.6rem}.category-banner{min-height:365px}.banner-inner{padding-bottom:40px}.banner-card{padding:22px 19px}.banner-card p{font-size:.95rem}h1{font-size:2.35rem}.index-band-inner{display:block;padding:14px}.index-label{display:block;margin-bottom:7px}.section-head{margin-bottom:25px}.feature-content{padding:23px}.feature-main .archive-cover{min-height:185px}.archive-list{grid-template-columns:1fr}.archive-item,.archive-item:nth-child(2),.archive-item:nth-child(3){margin-top:0}.archive-item{grid-template-columns:112px 1fr}.side-card h3,.side-card p{max-width:70%}.cross-card{padding:27px 21px}.footer-brand{margin-bottom:28px}.site-footer{padding-top:45px}.breadcrumbs{font-size:.76rem}.button{display:block;width:100%;margin:10px 0 0}.button + .button{margin-left:0}.faq-panel{padding:6px 17px}.accordion-title{padding-right:24px}.accordion-content{padding-right:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}