/* roulang page: index */
:root {
            --brand: #9c3f76;
            --brand-deep: #672957;
            --brand-soft: #f8e9f1;
            --coral: #ef876f;
            --mint: #79b7a8;
            --amber: #d89a48;
            --ink: #292530;
            --muted: #776f7c;
            --quiet: #a49ba8;
            --page: #fbf9fc;
            --card: #ffffff;
            --line: #ebe4ed;
            --dark: #302332;
            --shadow: 0 18px 50px rgba(83, 39, 73, .10);
            --shadow-hover: 0 24px 58px rgba(83, 39, 73, .16);
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --content: 1220px;
            --section: 112px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--page);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease; }
        a:hover { color: var(--brand); }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(239, 135, 111, .55); outline-offset: 3px; }
        .container { width: min(var(--content), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: var(--section) 0; position: relative; }
        .section-heading { max-width: 680px; margin-bottom: 42px; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            margin-bottom: 14px; color: var(--brand); font-size: 12px;
            font-weight: 800; letter-spacing: .12em;
        }
        .eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--coral)); }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); letter-spacing: -.045em; line-height: 1.2; }
        h1 { font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 850; margin-bottom: 25px; }
        h2 { font-size: clamp(2rem, 3.3vw, 3.25rem); font-weight: 820; margin-bottom: 16px; }
        h3 { font-size: 1.2rem; font-weight: 780; margin-bottom: 8px; }
        .section-heading p, .hero-copy > p { color: var(--muted); font-size: 1.08rem; }
        .site-header {
            position: sticky; top: 0; z-index: 30; background: rgba(251,249,252,.88);
            border-bottom: 1px solid rgba(235,228,237,.84); backdrop-filter: blur(14px);
        }
        .nav-shell { min-height: 78px; display: flex; align-items: center; gap: 26px; }
        .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-weight: 850; letter-spacing: -.04em; }
        .brand-mark { width: 29px; height: 29px; position: relative; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--coral)); box-shadow: 0 7px 16px rgba(156,63,118,.23); }
        .brand-mark::before, .brand-mark::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
        .brand-mark::before { width: 7px; height: 7px; left: 7px; top: 7px; }
        .brand-mark::after { width: 7px; height: 7px; right: 6px; bottom: 6px; }
        .brand-name { font-size: 1.02rem; white-space: nowrap; }
        .main-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
        .main-nav a { position: relative; padding: 9px 13px; color: var(--muted); font-size: .92rem; font-weight: 700; }
        .main-nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 4px; background: var(--brand); transform: scaleX(0); transition: transform .22s ease; }
        .main-nav a:hover, .main-nav a.active { color: var(--brand-deep); }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .command-search { display: flex; align-items: center; gap: 9px; width: 196px; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--quiet); }
        .command-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(156,63,118,.10); }
        .command-search svg { width: 16px; flex: 0 0 16px; }
        .command-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }
        .command-search input::placeholder { color: var(--quiet); }
        .key-hint { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--quiet); font: 11px/1.5 ui-monospace, SFMono-Regular, monospace; }
        .nav-cta, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; color: #fff !important; background: linear-gradient(110deg, var(--brand-deep), var(--brand) 65%, var(--coral)); box-shadow: 0 9px 20px rgba(156,63,118,.22); font-weight: 750; }
        .nav-cta:hover, .btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 13px 26px rgba(156,63,118,.28); }
        .nav-cta:active, .btn-primary:active { transform: translateY(1px); }
        .menu-toggle { display: none; border: 1px solid var(--line); background: #fff; color: var(--brand-deep); border-radius: 10px; padding: 7px 10px; }
        .hero { padding: 78px 0 74px; overflow: hidden; }
        .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -170px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(239,135,111,.18), rgba(239,135,111,0) 68%); pointer-events: none; }
        .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr); align-items: center; gap: 78px; }
        .hero-copy { max-width: 660px; }
        .hero-copy h1 span { color: var(--brand); }
        .hero-copy > p { max-width: 610px; margin-bottom: 29px; }
        .hero-actions { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; margin-bottom: 32px; }
        .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; color: var(--brand-deep); font-weight: 750; }
        .btn-ghost:hover { transform: translateX(3px); }
        .data-row { display: flex; gap: 10px; flex-wrap: wrap; }
        .data-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.7); font-size: .79rem; }
        .data-badge strong { color: var(--ink); font: 800 .88rem ui-monospace, SFMono-Regular, monospace; }
        .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(121,183,168,.15); }
        .index-stage { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
        .index-card { position: relative; z-index: 2; width: min(100%, 480px); padding: 25px; border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-lg); background: rgba(255,255,255,.84); box-shadow: var(--shadow); transform: rotate(2deg); }
        .index-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, var(--brand), var(--coral), var(--mint)); }
        .stage-glow { position: absolute; width: 360px; height: 360px; border-radius: 45% 55% 60% 40%; background: linear-gradient(135deg, #f4ddea, #fff1e8); transform: rotate(-13deg); }
        .panel-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
        .panel-label { color: var(--muted); font-size: .78rem; font-weight: 750; }
        .panel-code { color: var(--brand); font: 700 .72rem ui-monospace, monospace; }
        .index-title { margin: 22px 0 19px; font-size: 1.58rem; font-weight: 820; }
        .tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
        .tag { padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-deep); font-size: .77rem; font-weight: 700; }
        .tag.mint { background: #e8f4f0; color: #347568; }
        .tag.amber { background: #fff3df; color: #93601e; }
        .panel-list { margin-top: 24px; }
        .panel-line { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .85rem; }
        .panel-line:last-child { border-bottom: 0; }
        .panel-line span:first-child { color: var(--muted); }
        .panel-line strong { font-size: .88rem; }
        .float-note { position: absolute; z-index: 3; right: -10px; bottom: 42px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.7); border-radius: 14px; background: var(--dark); color: #fff; box-shadow: var(--shadow); font-size: .78rem; }
        .float-note b { display: block; margin-bottom: 3px; color: #ffd0c3; font-size: 1rem; }
        .quick-links { padding: 16px 0 0; border-top: 1px solid var(--line); }
        .quick-links-inner { display: flex; align-items: center; gap: 14px; overflow-x: auto; scrollbar-width: none; }
        .quick-links-inner::-webkit-scrollbar { display: none; }
        .quick-title { flex-shrink: 0; color: var(--quiet); font-size: .78rem; font-weight: 700; }
        .quick-link { flex-shrink: 0; padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font-size: .8rem; }
        .quick-link:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
        .pain-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .pain-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
        .pain-list { display: grid; grid-template-columns: 1fr 1.16fr; gap: 15px; }
        .pain-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); transition: transform .22s, box-shadow .22s; }
        .pain-card:nth-child(2) { margin-top: 30px; background: #fff6f2; }
        .pain-card:nth-child(3) { background: #f4f0fa; }
        .pain-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .card-number { display: inline-block; margin-bottom: 23px; color: var(--brand); font: 800 .76rem ui-monospace, monospace; }
        .pain-card p { margin: 0; color: var(--muted); font-size: .91rem; }
        .solution-section { background: #f7f3f8; }
        .solution-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 25px; }
        .side-index, .content-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
        .side-index { padding: 17px; }
        .side-index-title { padding: 6px 12px 15px; color: var(--quiet); font-size: .78rem; font-weight: 800; }
        .side-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-radius: 11px; color: var(--muted); font-size: .88rem; font-weight: 700; }
        .side-item.active, .side-item:hover { background: var(--brand-soft); color: var(--brand-deep); }
        .side-item b { color: var(--quiet); font: 700 .72rem ui-monospace, monospace; }
        .content-preview { padding: 29px; }
        .preview-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 19px; }
        .preview-head p { margin: 0; color: var(--muted); font-size: .88rem; }
        .outline-link { color: var(--brand); font-size: .84rem; font-weight: 800; white-space: nowrap; }
        .topic-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
        .topic-row p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
        .topic-meta { display: flex; align-items: center; gap: 12px; color: var(--quiet); font-size: .76rem; white-space: nowrap; }
        .topic-arrow { color: var(--brand); font-size: 1.3rem; }
        .result-section { background: var(--dark); color: #fff; }
        .result-section h2 { color: #fff; }
        .result-section .section-heading p { color: #cfc2d0; }
        .result-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 26px; align-items: stretch; }
        .result-main, .result-side { border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.065); }
        .result-main { padding: 34px; }
        .result-number { margin: 7px 0 5px; color: #ffd0c3; font: 850 clamp(3.2rem, 7vw, 6rem)/1 ui-monospace, monospace; letter-spacing: -.08em; }
        .result-main p { max-width: 500px; margin-bottom: 26px; color: #cfc2d0; }
        .result-track { display: flex; align-items: center; gap: 9px; }
        .track-line { height: 7px; flex: 1; border-radius: 10px; background: linear-gradient(90deg, var(--coral), #e4a8bd 70%, rgba(255,255,255,.18) 70%); }
        .result-side { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
        .mini-stat { display: flex; flex-direction: column; justify-content: center; padding: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
        .mini-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
        .mini-stat:nth-last-child(-n+2) { border-bottom: 0; }
        .mini-stat strong { margin-bottom: 6px; color: #fff; font-size: 1.75rem; }
        .mini-stat span { color: #bcaebe; font-size: .8rem; }
        .content-section { background: #fff; }
        .content-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 25px; }
        .feature-card { position: relative; min-height: 300px; overflow: hidden; padding: 31px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #572d53, #9c3f76 62%, #ef876f); color: #fff; }
        .feature-card::after { content: ""; position: absolute; width: 210px; height: 210px; right: -45px; bottom: -70px; border: 26px solid rgba(255,255,255,.13); border-radius: 50%; }

        .feature-card h3 { max-width: 420px; color: #fff; font-size: 1.75rem; }

        .feature-card p { max-width: 500px; color: #f8dce5; }

        .feature-card .tag { background: rgba(255,255,255,.16); color: #fff; }

        .feature-bottom { position: absolute; left: 31px; right: 31px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; color: #f8dce5; font-size: .78rem; }

        .small-content-list { display: flex; flex-direction: column; gap: 12px; }

        .small-content { display: block; padding: 19px 21px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }

        .small-content:hover { border-color: #d9a2c2; box-shadow: var(--shadow); transform: translateX(4px); }

        .small-content .tag { display: inline-block; margin-bottom: 8px; font-size: .7rem; }

        .small-content h3 { margin-bottom: 4px; font-size: 1rem; }

        .small-content p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }

        .small-content time { display: block; margin-top: 9px; color: var(--quiet); font-size: .73rem; }

        .quote-section { background: #f7f3f8; }

        .quote-card { position: relative; display: grid; grid-template-columns: 130px 1fr auto; gap: 34px; align-items: center; padding: 40px 45px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }

        .quote-mark { color: var(--coral); font: 900 6.2rem/.8 Georgia, serif; }
        .quote-card blockquote { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 700; line-height: 1.5; }
        .quote-person { margin-top: 14px; color: var(--muted); font-size: .83rem; }
        .quote-badge { padding: 9px 13px; border-radius: 10px; background: #e8f4f0; color: #347568; font-size: .75rem; font-weight: 800; white-space: nowrap; }
        .faq-section { background: #fff; }
        .faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 78px; }
        .faq-intro p { color: var(--muted); }
        .accordion { margin: 0; border: 0; background: transparent; }
        .accordion-item { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
        .accordion-title { padding: 19px 22px; border: 0; color: var(--ink); font-size: 1rem; font-weight: 750; }
        .accordion-title:hover, .accordion-item.is-active .accordion-title { background: var(--brand-soft); color: var(--brand-deep); }
        .accordion-title::before { color: var(--brand); }
        .accordion-content { border: 0; padding: 0 22px 20px; color: var(--muted); font-size: .9rem; line-height: 1.8; }
        .cta-section { padding-top: 0; background: #fff; }
        .cta-card { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 48px 55px; border-radius: var(--radius-lg); background: linear-gradient(110deg, #592b52, #913d70 60%, #d96c72); color: #fff; }
        .cta-card::after { content: ""; position: absolute; width: 330px; height: 330px; right: -95px; top: -160px; border: 36px solid rgba(255,255,255,.10); border-radius: 50%; }
        .cta-card h2 { position: relative; z-index: 1; max-width: 650px; margin-bottom: 9px; color: #fff; }
        .cta-card p { position: relative; z-index: 1; margin: 0; color: #f7dce2; }
        .cta-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
        .cta-actions .btn-primary { background: #fff; color: var(--brand-deep) !important; box-shadow: none; }
        .cta-actions .btn-primary:hover { background: #fff1f2; }
        .site-footer { padding: 48px 0 25px; border-top: 1px solid var(--line); background: #fbf9fc; }
        .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 55px; padding-bottom: 42px; }
        .footer-brand p { max-width: 330px; margin: 15px 0 0; color: var(--muted); font-size: .85rem; }
        .footer-title { margin-bottom: 14px; color: var(--ink); font-size: .83rem; font-weight: 800; }
        .footer-links { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .84rem; }
        .footer-links a:hover { color: var(--brand); transform: translateX(3px); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 21px; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
        @media (max-width: 1100px) {
            .hero-grid { gap: 42px; }
            .main-nav { gap: 0; }
            .command-search { width: 160px; }
            .quote-card { grid-template-columns: 90px 1fr; }
            .quote-badge { grid-column: 2; justify-self: start; }
        }
        @media (max-width: 900px) {
            :root { --section: 82px; }
            .nav-shell { gap: 14px; }
            .main-nav { display: none; }
            .menu-toggle { display: inline-flex; margin-left: auto; }
            .command-search { width: 180px; }
            .nav-cta { display: none; }
            .hero-grid, .pain-layout, .result-grid, .content-layout, .faq-layout { grid-template-columns: 1fr; gap: 38px; }
            .hero-copy { max-width: 760px; }
            .index-stage { min-height: 390px; }
            .pain-layout .section-heading { margin-bottom: 0; }
            .faq-intro { max-width: 650px; }
        }
        @media (max-width: 640px) {
            .container { width: min(100% - 32px, var(--content)); }
            :root { --section: 65px; }
            h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
            h2 { font-size: 2rem; }
            .hero { padding-top: 50px; }
            .command-search { width: 42px; padding: 0 12px; }
            .command-search input, .key-hint { display: none; }
            .index-card { padding: 21px; transform: none; }
            .stage-glow { width: 300px; height: 300px; }
            .float-note { right: -4px; bottom: 10px; }
            .pain-list { grid-template-columns: 1fr; }
            .pain-card:nth-child(2) { margin-top: 0; }
            .solution-layout { grid-template-columns: 1fr; }
            .side-index { display: flex; gap: 5px; overflow-x: auto; padding: 10px; }
            .side-index-title { display: none; }
            .side-item { flex-shrink: 0; padding: 10px 12px; }
            .content-preview, .result-main { padding: 22px; }
            .topic-row { grid-template-columns: 1fr; gap: 8px; }
            .topic-meta { justify-content: space-between; }
            .result-side { min-height: 205px; }
            .mini-stat { padding: 17px; }
            .mini-stat strong { font-size: 1.35rem; }
            .feature-card { min-height: 285px; padding: 24px; }
            .feature-bottom { left: 24px; right: 24px; }
            .quote-card { grid-template-columns: 1fr; gap: 15px; padding: 27px; }
            .quote-mark { font-size: 4.4rem; }
            .quote-badge { grid-column: auto; }
            .cta-card { display: block; padding: 32px 25px; }
            .cta-actions { margin-top: 25px; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-bottom: 6px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
        }

/* roulang page: category1 */
:root {
      --brand:#9c3f76;
      --brand-deep:#672957;
      --brand-soft:#f8e9f1;
      --coral:#ef876f;
      --mint:#79b7a8;
      --amber:#d89a48;
      --ink:#292530;
      --muted:#776f7c;
      --quiet:#a49ba8;
      --page:#fbf9fc;
      --card:#fff;
      --line:#ebe4ed;
      --dark:#302332;
      --shadow:0 18px 50px rgba(83,39,73,.10);
      --shadow-hover:0 24px 58px rgba(83,39,73,.16);
      --radius-lg:28px;
      --radius-md:18px;
      --radius-sm:12px;
      --content:1220px;
      --section:86px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;overflow-x:hidden;background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{color:var(--ink);line-height:1.2;letter-spacing:-.045em}
    h1{font-size:clamp(2.25rem,5vw,4.3rem);margin-bottom:22px}
    h2{font-size:clamp(1.8rem,3vw,2.7rem);margin-bottom:16px}
    h3{font-size:1.18rem;margin-bottom:9px}
    a{color:inherit;text-decoration:none;transition:color .22s ease,border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease}
    a:hover{color:var(--brand)}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--content),calc(100% - 48px));margin:0 auto}
    .section{position:relative;padding:var(--section) 0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--coral))}
    .section-heading{max-width:700px;margin-bottom:40px}
    .section-heading p{color:var(--muted);font-size:1.05rem;max-width:650px}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(251,249,252,.9);border-bottom:1px solid rgba(235,228,237,.9);backdrop-filter:blur(14px)}
    .nav-shell{min-height:78px;display:flex;align-items:center;gap:25px}
    .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;font-weight:850;letter-spacing:-.04em}
    .brand-mark{position:relative;width:29px;height:29px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--coral));box-shadow:0 7px 16px rgba(156,63,118,.23)}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;border-radius:50%;background:#fff}
    .brand-mark:before{width:7px;height:7px;left:7px;top:7px}
    .brand-mark:after{width:7px;height:7px;right:6px;bottom:6px}
    .brand-name{font-size:1.02rem;white-space:nowrap}
    .main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
    .main-nav a{position:relative;padding:9px 13px;color:var(--muted);font-size:.92rem;font-weight:700}
    .main-nav a:after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:4px;background:var(--brand);transform:scaleX(0);transition:transform .22s ease}
    .main-nav a:hover,.main-nav a.active{color:var(--brand-deep)}
    .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
    .command-search{display:flex;align-items:center;gap:9px;width:196px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--quiet)}
    .command-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(156,63,118,.1)}
    .command-search svg{width:16px;flex:0 0 16px}
    .command-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:.82rem}
    .command-search input::placeholder{color:var(--quiet)}
    .nav-cta,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;border:0;border-radius:12px;color:#fff!important;background:linear-gradient(110deg,var(--brand-deep),var(--brand) 65%,var(--coral));box-shadow:0 9px 20px rgba(156,63,118,.22);font-weight:750}
    .nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 13px 26px rgba(156,63,118,.28)}
    .nav-cta:active,.btn-primary:active{transform:translateY(1px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--brand-deep);border-radius:10px;padding:7px 10px}
    .page-hero{padding:70px 0 60px;background:linear-gradient(180deg,#fff 0%,var(--page) 100%);border-bottom:1px solid var(--line)}
    .breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:30px;color:var(--quiet);font-size:.84rem}
    .breadcrumb a{color:var(--muted)}
    .breadcrumb a:hover{color:var(--brand)}
    .hero-line{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}
    .hero-copy{max-width:720px}
    .hero-copy p{margin-bottom:0;color:var(--muted);font-size:1.08rem}
    .hero-status{min-width:210px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(83,39,73,.06)}
    .status-top{display:flex;justify-content:space-between;align-items:center;color:var(--quiet);font-size:.78rem}
    .status-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(121,183,168,.15)}
    .status-number{display:block;margin-top:8px;color:var(--brand-deep);font:800 1.8rem ui-monospace,SFMono-Regular,monospace}
    .index-section{padding-top:62px}
    .index-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
    .filter-card{position:sticky;top:104px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow)}
    .filter-title{margin-bottom:15px;font-size:.82rem;color:var(--quiet);font-weight:800;letter-spacing:.08em}
    .filter-list{margin:0;padding:0;list-style:none}
    .filter-list li+li{border-top:1px solid var(--line)}
    .filter-list a{display:flex;align-items:center;justify-content:space-between;padding:14px 5px;color:var(--muted);font-weight:700}
    .filter-list a.active,.filter-list a:hover{color:var(--brand-deep)}
    .filter-list a.active{padding-left:12px;border-left:3px solid var(--coral);background:var(--brand-soft)}
    .count{color:var(--quiet);font:700 .75rem ui-monospace,monospace}
    .index-main{min-width:0}
    .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .toolbar strong{font-size:1.1rem}
    .toolbar span{color:var(--muted);font-size:.87rem}
    .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}
    .tag{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:.8rem}
    .tag.active{border-color:rgba(156,63,118,.3);background:var(--brand-soft);color:var(--brand-deep);font-weight:750}
    .featured-topic{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:25px;margin-bottom:18px;padding:28px;border-radius:var(--radius-lg);background:var(--dark);color:#fff;box-shadow:var(--shadow)}
    .featured-topic:after{content:"";position:absolute;width:260px;height:260px;right:-70px;bottom:-125px;border-radius:50%;background:radial-gradient(circle,rgba(239,135,111,.5),transparent 68%)}
    .featured-topic h3{color:#fff;font-size:1.65rem}
    .featured-topic p{position:relative;z-index:1;max-width:530px;margin-bottom:22px;color:#dbcfd9}
    .featured-topic .tag{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#f8e9f1}
    .topic-meta{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:15px}
    .topic-date{color:#cbbbc8;font-size:.8rem}
    .topic-arrow{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:750}
    .topic-arrow:hover{color:#ffd5c9;transform:translateX(3px)}
    .topic-visual{position:relative;z-index:1;min-height:150px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:linear-gradient(135deg,rgba(156,63,118,.6),rgba(239,135,111,.18))}
    .node-map{position:relative;width:170px;height:112px}
    .node-map i{position:absolute;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:var(--coral);box-shadow:0 0 0 8px rgba(239,135,111,.14)}
    .node-map i:nth-child(1){left:15px;top:44px}.node-map i:nth-child(2){left:78px;top:12px;background:var(--mint)}.node-map i:nth-child(3){right:15px;top:55px;background:#f4c06d}.node-map i:nth-child(4){left:92px;bottom:3px}
    .node-map:before,.node-map:after{content:"";position:absolute;height:2px;background:rgba(255,255,255,.55);transform-origin:left center}
    .node-map:before{width:75px;left:27px;top:48px;transform:rotate(-25deg)}.node-map:after{width:67px;left:90px;top:28px;transform:rotate(27deg)}
    .topic-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;overflow:hidden}
    .topic-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:21px 23px;border-bottom:1px solid var(--line);transition:background .22s ease,transform .22s ease}
    .topic-item:last-child{border-bottom:0}
    .topic-item:hover{background:#fffafd;transform:translateX(4px)}
    .topic-no{color:var(--brand);font:800 .78rem ui-monospace,monospace}
    .topic-item h3{margin-bottom:4px;font-size:1.08rem}
    .topic-item p{margin:0;color:var(--muted);font-size:.88rem}
    .item-side{display:flex;align-items:center;gap:16px;color:var(--quiet);font-size:.78rem;white-space:nowrap}
    .item-side b{color:var(--brand-deep);font-size:1.2rem}
    .info-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .info-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
    .path-card{padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,var(--brand-soft));box-shadow:var(--shadow)}
    .path-step{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid rgba(156,63,118,.14)}
    .path-step:last-child{border-bottom:0}
    .path-step strong{display:block;margin-bottom:3px}.path-step span{color:var(--muted);font-size:.88rem}
    .step-no{display:flex;align-items:center;justify-content:center;width:29px;height:29px;flex:0 0 29px;border-radius:9px;background:var(--brand);color:#fff;font:800 .78rem ui-monospace,monospace}
    .update-panel{padding:5px 0}
    .update-row{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
    .update-row span{color:var(--muted);font-size:.9rem}.update-row b{color:var(--brand-deep);font-size:.9rem}
    .faq-section{background:var(--page)}
    .faq-list{max-width:850px;margin:0 auto}
    details{border-bottom:1px solid var(--line);background:#fff}
    details:first-child{border-top:1px solid var(--line);border-radius:16px 16px 0 0}
    details:last-child{border-radius:0 0 16px 16px}
    summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px;color:var(--ink);font-weight:750;cursor:pointer;list-style:none}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";color:var(--brand);font-size:1.35rem;font-weight:400}
    details[open] summary:after{content:"−"}
    details p{padding:0 58px 23px 25px;margin:0;color:var(--muted);font-size:.92rem}
    .cta-card{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:35px;padding:42px 48px;border-radius:var(--radius-lg);background:linear-gradient(110deg,var(--brand-deep),var(--brand) 67%,var(--coral));color:#fff;box-shadow:var(--shadow)}
    .cta-card:after{content:"";position:absolute;right:-35px;top:-100px;width:260px;height:260px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.05),0 0 0 48px rgba(255,255,255,.04)}
    .cta-card h2{position:relative;z-index:1;color:#fff;margin-bottom:10px}
    .cta-card p{position:relative;z-index:1;max-width:650px;margin:0;color:#f7e7ef}
    .cta-card .btn-light{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;background:#fff;color:var(--brand-deep);font-weight:800;white-space:nowrap}
    .btn-light:hover{color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 22px rgba(50,18,42,.2)}
    .site-footer{padding:55px 0 23px;background:#fff;border-top:1px solid var(--line)}
    .footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:45px;padding-bottom:35px}
    .footer-brand p{max-width:390px;margin:16px 0 0;color:var(--muted);font-size:.9rem}
    .footer-title{margin-bottom:13px;color:var(--brand-deep);font-size:.84rem;font-weight:800}
    .footer-links{display:grid;gap:8px;color:var(--muted);font-size:.9rem}
    .footer-links a:hover{color:var(--brand);transform:translateX(2px)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--quiet);font-size:.78rem}
    :focus-visible{outline:3px solid rgba(239,135,111,.65);outline-offset:3px}
    @media(max-width:1050px){.nav-shell{gap:14px}.command-search{width:170px}.index-layout{grid-template-columns:220px minmax(0,1fr)}.hero-line{align-items:flex-start;flex-direction:column}.hero-status{min-width:240px}}
    @media(max-width:800px){:root{--section:66px}.container{width:min(var(--content),calc(100% - 36px))}.main-nav{display:none}.menu-toggle{display:block;order:4}.nav-shell .command-search{margin-left:auto;width:150px}.nav-cta{padding:0 13px;font-size:.86rem}.index-layout,.info-grid{grid-template-columns:1fr}.filter-card{position:static}.filter-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.filter-list li+li{border:0}.filter-list a{padding:9px 12px;border:1px solid var(--line);border-radius:9px;white-space:nowrap}.filter-list a.active{padding-left:12px;border-left:1px solid rgba(156,63,118,.3)}.featured-topic{grid-template-columns:1fr}.topic-visual{min-height:125px}.cta-card{align-items:flex-start;flex-direction:column;padding:34px 28px}.footer-top{grid-template-columns:1.4fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}}
    @media(max-width:560px){.container{width:calc(100% - 32px)}.brand-name{font-size:.9rem}.nav-shell{min-height:68px}.nav-shell .command-search{width:42px;padding:0;justify-content:center;border-radius:11px}.command-search input{display:none}.nav-cta{min-height:40px;padding:0 11px;font-size:.78rem}.menu-toggle{font-size:.82rem}.page-hero{padding:45px 0 42px}h1{font-size:2.25rem}.hero-status{width:100%}.toolbar{align-items:flex-start;flex-direction:column;gap:4px}.topic-item{grid-template-columns:30px minmax(0,1fr);gap:11px;padding:17px 15px}.item-side{grid-column:2;justify-content:space-between}.featured-topic{padding:21px}.footer-top{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}.cta-card .btn-light{width:100%}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}