/* roulang page: index */
:root{
            --paper:#f4f1e8;
            --ink:#151515;
            --coal:#181818;
            --lime:#b8f34a;
            --coral:#ff6b57;
            --sage:#dde5db;
            --muted:#65675f;
            --line:#c9c8bd;
            --white:#fffdf7;
            --shadow:4px 4px 0 rgba(21,21,21,.16);
            --hard-shadow:4px 4px 0 var(--ink);
            --radius:4px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;font-size:16px;line-height:1.8}
        a{color:inherit;text-decoration:none}
        a:hover{color:inherit}
        button,input,select,textarea{font:inherit}
        img{max-width:100%;display:block}
        :focus-visible{outline:2px solid var(--lime);outline-offset:3px}
        .site-shell{min-height:100vh}
        .side-nav{position:fixed;z-index:20;inset:0 auto 0 0;width:210px;background:var(--coal);color:var(--white);padding:28px 20px;display:flex;flex-direction:column}
        .brand{display:flex;gap:10px;align-items:flex-start;font-size:18px;font-weight:800;line-height:1.35;letter-spacing:0}
        .brand-mark{width:14px;height:14px;background:var(--lime);box-shadow:5px 5px 0 var(--coral);flex:0 0 auto;margin-top:4px}
        .brand-name{max-width:145px;overflow-wrap:anywhere}
        .nav-caption{margin:58px 0 12px;color:#aeb2a8;font:12px/1.2 monospace;letter-spacing:.08em}
        .nav-list{list-style:none;padding:0;margin:0}
        .nav-list li{margin:5px 0}
        .nav-list a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-left:3px solid transparent;color:#d9ddd2;transition:.16s ease}
        .nav-list a:hover,.nav-list a.active{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:translateX(2px)}
        .nav-index{font:12px monospace;color:var(--coral)}
        .nav-list a.active .nav-index{color:var(--ink)}
        .nav-bottom{margin-top:auto;border-top:1px solid #3b3d38;padding-top:18px;color:#afb3aa;font-size:13px}
        .nav-bottom strong{display:block;color:var(--lime);font-size:15px;margin-bottom:5px}
        .main-area{margin-left:210px;max-width:1500px}
        .mobile-bar{display:none}
        .container-wide{width:min(1280px,calc(100% - 96px));margin:auto}
        .section{padding:92px 0;border-top:1px solid var(--line)}
        .dashboard{padding:58px 0 88px;border-top:0}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--coal);color:var(--lime);padding:5px 9px;font:12px monospace;letter-spacing:.04em}
        .eyebrow::before{content:"";width:7px;height:7px;background:var(--lime);display:inline-block}
        h1,h2,h3{font-weight:900;line-height:1.2;letter-spacing:0;margin:0}
        h1{font-size:clamp(2.35rem,4.2vw,4rem);max-width:850px;margin:20px 0 18px;overflow-wrap:anywhere}
        h2{font-size:clamp(1.85rem,3vw,2.7rem)}
        h3{font-size:1.2rem}
        .lead{font-size:18px;line-height:1.8;max-width:720px;color:#41433d;margin:0}
        .action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
        .btn-main,.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1px solid var(--ink);border-radius:var(--radius);font-weight:800;transition:.16s ease;cursor:pointer}
        .btn-main{background:var(--lime);color:var(--ink);box-shadow:var(--hard-shadow)}
        .btn-main:hover{background:var(--coral);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
        .btn-main:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
        .btn-line{background:transparent;box-shadow:2px 2px 0 var(--ink)}
        .btn-line:hover{background:var(--sage);transform:translateY(-2px)}
        .dashboard-grid{display:grid;grid-template-columns:1.45fr .9fr .9fr;gap:12px;margin-top:56px}
        .metric{border:1px solid var(--ink);min-height:145px;padding:22px;background:var(--white);box-shadow:var(--shadow);transition:.16s ease}
        .metric:hover{transform:translateY(-2px);box-shadow:6px 6px 0 rgba(21,21,21,.2)}
        .metric.primary{grid-row:span 2;background:var(--lime);display:flex;flex-direction:column;justify-content:space-between;min-height:302px}
        .metric.coral{background:var(--coral)}
        .metric.sage{background:var(--sage)}
        .metric-number{font-size:clamp(2.6rem,5vw,5.3rem);font-weight:900;line-height:1;font-family:Arial,sans-serif}
        .metric-label{font-weight:800;margin-top:12px}
        .metric-note{font-size:13px;color:#50534a;line-height:1.55;margin-top:6px}
        .primary .metric-note{color:var(--ink)}
        .section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:38px}
        .section-head p{max-width:530px;color:var(--muted);margin:0}
        .section-code{font:14px monospace;color:var(--coral);display:block;margin-bottom:10px}
        .matrix{border-top:2px solid var(--ink)}
        .matrix-row{display:grid;grid-template-columns:80px 1.1fr 1.8fr 110px;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:22px 12px;transition:.16s ease}
        .matrix-row:hover{background:var(--sage);padding-left:18px}
        .matrix-row .num{font:700 14px monospace;color:var(--coral)}
        .matrix-row p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
        .tag{display:inline-block;border:1px solid currentColor;padding:2px 7px;font-size:12px;line-height:1.5;margin:3px 4px 0 0}
        .arrow{font-size:24px;text-align:right;transition:.16s}
        .matrix-row:hover .arrow{transform:translateX(3px);color:var(--coral)}
        .compare{display:grid;grid-template-columns:5fr 7fr;gap:12px}
        .compare-panel{padding:30px;border:1px solid var(--ink);min-height:270px}
        .compare-panel.before{background:var(--sage)}
        .compare-panel.after{background:var(--coal);color:var(--white);box-shadow:var(--hard-shadow)}
        .compare-panel h3{margin-bottom:22px}
        .compare-line{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px dashed #92978b;font-size:15px}
        .after .compare-line{border-color:#4d5049}
        .check{color:var(--lime);font-weight:900}
        .notice{margin-top:18px;color:var(--coral);font-size:13px}
        .dynamic-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:28px}
        .dynamic-item{padding:18px;border-left:3px solid var(--coral);background:rgba(255,255,255,.45)}
        .dynamic-item small{display:block;color:var(--muted);font-family:monospace;margin-bottom:5px}
        .faq-layout{display:grid;grid-template-columns:4fr 8fr;gap:60px}
        .accordion-item{border:0;border-bottom:1px solid var(--ink);background:transparent}
        .accordion-button{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;font-weight:800;padding:20px 0;font-size:17px}
        .accordion-button::after{background-image:none;content:"+";font-size:25px;font-weight:400;width:auto;height:auto}
        .accordion-button:not(.collapsed)::after{content:"−"}
        .accordion-body{padding:0 35px 20px 0;color:#50534a;font-size:15px}
        .cta-band{background:var(--coal);color:var(--white);padding:70px 0}
        .cta-layout{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
        .cta-band h2{color:var(--lime);margin:14px 0 18px}
        .cta-band p{color:#c8ccc1;max-width:450px}
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        .field{display:flex;flex-direction:column;gap:6px}
        .field.full{grid-column:1/-1}
        label{font-size:13px;color:#d7dbd0}
        input,select,textarea{width:100%;background:#252625;border:1px solid #646961;color:var(--white);border-radius:var(--radius);padding:11px 13px;min-height:48px}
        textarea{min-height:120px;resize:vertical}
        input:focus,select:focus,textarea:focus{border-color:var(--lime);outline:2px solid var(--lime);outline-offset:2px}
        .form-help{font-size:12px;color:#aeb3a8;margin-top:2px}
        .form-status{font-size:14px;margin-top:13px;color:var(--lime);min-height:25px}
        footer{background:var(--coal);color:#d9ddd2;border-top:1px solid #41443d;padding:26px 0 32px}
        .footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
        .footer-brand{font-weight:800;color:var(--white)}
        .footer-links{display:flex;gap:22px;font-size:14px}
        .footer-links a{color:#c2c7bb;transition:.16s}
        .footer-links a:hover{color:var(--lime)}
        .copyright{font-size:12px;color:#8f9589;margin-top:22px}
        @media(max-width:1199px){
            .side-nav{width:185px;padding:24px 15px}.main-area{margin-left:185px}.container-wide{width:min(100% - 56px,1100px)}
            .dashboard-grid{grid-template-columns:1.3fr 1fr}.metric.primary{grid-row:span 2}
        }
        @media(max-width:767px){
            .side-nav{display:none}.main-area{margin-left:0;padding-top:70px}.mobile-bar{display:flex;position:fixed;z-index:30;top:0;left:0;right:0;height:70px;background:var(--coal);color:var(--white);align-items:center;justify-content:space-between;padding:12px 18px}
            .mobile-bar .brand{font-size:15px}.mobile-bar .brand-name{max-width:220px}
            .navbar-toggler{border:1px solid var(--lime);color:var(--lime);padding:5px 9px;border-radius:2px}.navbar-toggler-icon{width:20px;height:15px;display:block;background:linear-gradient(var(--lime) 0 2px,transparent 2px 6px,var(--lime) 6px 8px,transparent 8px 12px,var(--lime) 12px 14px)}
            .mobile-menu{background:var(--coal);padding:0 18px 15px}.mobile-menu a{display:block;color:var(--white);padding:8px 0;border-bottom:1px solid #3c4039}
            .container-wide{width:calc(100% - 36px)}.dashboard{padding:42px 0 65px}.section{padding:64px 0}
            h1{font-size:2.25rem}.lead{font-size:16px}.dashboard-grid{grid-template-columns:1fr 1fr;margin-top:40px}.metric.primary{grid-column:1/-1;grid-row:auto;min-height:220px}.metric{min-height:130px;padding:17px}.metric-number{font-size:2.7rem}
            .section-head,.faq-layout,.cta-layout{display:block}.section-head p{margin-top:16px}.matrix-row{grid-template-columns:45px 1fr 25px;gap:10px;padding:18px 5px}.matrix-row p,.matrix-row .tags{grid-column:2/-1}.arrow{grid-column:3;grid-row:1}
            .compare{display:block}.compare-panel{min-height:auto;margin-bottom:12px}.dynamic-strip{grid-template-columns:1fr}.faq-layout .accordion{margin-top:28px}.cta-layout .form-wrap{margin-top:32px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
            .footer-row{display:block}.footer-links{margin-top:16px;flex-wrap:wrap;gap:14px}
        }
        @media(max-width:520px){.action-row .btn-main,.action-row .btn-line{width:100%}.metric-label{font-size:14px}.metric-note{font-size:12px}}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root {
            --paper: #f4f1e8;
            --ink: #151515;
            --coal: #181818;
            --lime: #b8f34a;
            --coral: #ff6b57;
            --sage: #dde5db;
            --muted: #65675f;
            --line: #c9c8bd;
            --white: #fffdf7;
            --shadow: 4px 4px 0 rgba(21, 21, 21, .16);
            --hard-shadow: 4px 4px 0 var(--ink);
            --radius: 4px;
            --sidebar: 210px;
            --section-space: 92px;
        }

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

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

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.8;
            letter-spacing: 0;
            overflow-wrap: break-word;
        }

        body::before {
            content: "";
            position: fixed;
            z-index: -1;
            inset: 0;
            pointer-events: none;
            opacity: .18;
            background-image:
                linear-gradient(rgba(21, 21, 21, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(21, 21, 21, .08) 1px, transparent 1px);
            background-size: 24px 24px;
            mask-image: linear-gradient(to bottom, #000, transparent 54%);
        }

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

        a:hover {
            color: inherit;
        }

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

        button,
        input,
        select,
        textarea {
            font: inherit;
            letter-spacing: 0;
        }

        button,
        a,
        select,
        input,
        textarea {
            -webkit-tap-highlight-color: transparent;
        }

        :focus-visible {
            outline: 2px solid var(--lime);
            outline-offset: 3px;
        }

        ::selection {
            background: var(--lime);
            color: var(--ink);
        }

        .skip-link {
            position: fixed;
            z-index: 100;
            top: 10px;
            left: 10px;
            padding: 9px 13px;
            background: var(--lime);
            color: var(--ink);
            border: 1px solid var(--ink);
            transform: translateY(-150%);
            transition: transform .16s ease;
        }

        .skip-link:focus {
            transform: translateY(0);
        }

        .side-nav {
            position: fixed;
            z-index: 20;
            inset: 0 auto 0 0;
            width: var(--sidebar);
            background: var(--coal);
            color: var(--white);
            padding: 28px 20px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #3b3d38;
        }

        .brand {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 18px;
            font-weight: 800;
            line-height: 1.35;
            letter-spacing: 0;
        }

        .brand-mark {
            width: 14px;
            height: 14px;
            margin-top: 4px;
            flex: 0 0 auto;
            background: var(--lime);
            box-shadow: 5px 5px 0 var(--coral);
        }

        .brand-name {
            max-width: 155px;
            overflow-wrap: anywhere;
        }

        .nav-caption {
            margin: 58px 0 12px;
            color: #aeb2a8;
            font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

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

        .nav-list li {
            margin: 5px 0;
        }

        .nav-list a {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 44px;
            padding: 9px 10px;
            border-left: 3px solid transparent;
            color: #d9ddd2;
            transition: background-color .16s ease, color .16s ease, transform .16s ease;
        }

        .nav-list a:hover,
        .nav-list a.active {
            background: var(--lime);
            border-color: var(--lime);
            color: var(--ink);
            transform: translateX(2px);
        }

        .nav-list a:active {
            transform: translateX(0);
        }

        .nav-index {
            color: var(--coral);
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .nav-list a.active .nav-index {
            color: var(--ink);
        }

        .nav-bottom {
            margin-top: auto;
            padding-top: 18px;
            border-top: 1px solid #3b3d38;
            color: #afb3aa;
            font-size: 13px;
        }

        .nav-bottom strong {
            display: block;
            margin-bottom: 5px;
            color: var(--lime);
            font-size: 15px;
        }

        .side-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 42px;
            margin-top: 14px;
            padding: 7px 10px;
            border: 1px solid var(--lime);
            color: var(--lime);
            font-weight: 700;
            transition: .16s ease;
        }

        .side-action:hover {
            background: var(--lime);
            color: var(--ink);
            box-shadow: 3px 3px 0 var(--coral);
            transform: translate(-1px, -1px);
        }

        .mobile-bar {
            display: none;
        }

        .main-area {
            margin-left: var(--sidebar);
            min-height: 100vh;
        }

        .container-wide {
            width: min(1280px, calc(100% - 96px));
            margin-inline: auto;
        }

        .page-hero {
            position: relative;
            min-height: 620px;
            padding: 58px 0 72px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--line);
            overflow: hidden;
        }

        .page-hero::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 31%;
            height: 10px;
            background:
                linear-gradient(90deg,
                    var(--coal) 0 18%,
                    transparent 18% 23%,
                    var(--lime) 23% 58%,
                    transparent 58% 63%,
                    var(--coral) 63% 100%);
        }

        .breadcrumb {
            --bs-breadcrumb-divider: ">";
            margin: 0 0 26px;
            font-size: 13px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            color: var(--coral);
        }

        .breadcrumb-item a {
            padding-bottom: 2px;
            border-bottom: 1px solid var(--ink);
        }

        .breadcrumb-item a:hover {
            background: var(--lime);
        }

        .breadcrumb-item.active {
            color: var(--muted);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 9px;
            background: var(--coal);
            color: var(--lime);
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .eyebrow::before {
            content: "";
            width: 7px;
            height: 7px;
            background: var(--lime);
            display: inline-block;
        }

        h1,
        h2,
        h3 {
            margin-top: 0;
            color: var(--ink);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: 0;
        }

        h1 {
            max-width: 850px;
            margin: 20px 0 22px;
            font-size: 50px;
            overflow-wrap: anywhere;
        }

        h2 {
            font-size: 34px;
        }

        h3 {
            font-size: 21px;
        }

        .lead-copy {
            max-width: 750px;
            margin: 0;
            color: #41433d;
            font-size: 18px;
            line-height: 1.85;
        }

        .action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px;
        }

        .btn-main,
        .btn-line,
        .filter-button,
        .page-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 10px 18px;
            border: 1px solid var(--ink);
            border-radius: var(--radius);
            font-weight: 800;
            transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
            cursor: pointer;
        }

        .btn-main {
            background: var(--lime);
            color: var(--ink);
            box-shadow: var(--hard-shadow);
        }

        .btn-main:hover {
            background: var(--coral);
            color: var(--ink);
            box-shadow: 6px 6px 0 var(--ink);
            transform: translate(-2px, -2px);
        }

        .btn-main:active {
            box-shadow: 2px 2px 0 var(--ink);
            transform: translate(0, 0);
        }

        .btn-line {
            background: transparent;
            color: var(--ink);
            box-shadow: 2px 2px 0 var(--ink);
        }

        .btn-line:hover {
            background: var(--sage);
            transform: translateY(-2px);
        }

        .btn-line:active {
            box-shadow: none;
            transform: translateY(0);
        }

        .readiness-panel {
            position: relative;
            padding: 26px;
            background: var(--coal);
            color: var(--white);
            border: 1px solid var(--ink);
            box-shadow: 7px 7px 0 var(--coral);
        }

        .readiness-panel::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 26px;
            width: 48px;
            height: 7px;
            background: var(--lime);
        }

        .panel-code {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 22px;
            color: #b7bbb1;
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .progress-ring {
            position: relative;
            width: 178px;
            height: 178px;
            margin: 4px auto 28px;
            border-radius: 50%;
            background: conic-gradient(var(--lime) 0 75%, #3b3e39 75% 100%);
            display: grid;
            place-items: center;
        }

        .progress-ring::before {
            content: "";
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background: var(--coal);
            border: 1px solid #555950;
        }

        .ring-value {
            position: absolute;
            text-align: center;
        }

        .ring-value strong {
            display: block;
            color: var(--lime);
            font: 800 42px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .ring-value span {
            display: block;
            margin-top: 8px;
            color: #c5c9bf;
            font-size: 12px;
        }

        .check-levels {
            display: grid;
            gap: 8px;
        }

        .check-level {
            display: grid;
            grid-template-columns: 35px 1fr auto;
            gap: 10px;
            align-items: center;
            padding: 10px 0;
            border-top: 1px solid #3f423d;
        }

        .check-level:first-child {
            border-top: 0;
        }

        .level-num {
            color: var(--coral);
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .check-level strong {
            font-size: 14px;
        }

        .level-state {
            padding: 2px 6px;
            border: 1px solid #686d63;
            color: #c4c8bf;
            font-size: 11px;
        }

        .hero-note {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px dashed #555950;
            color: #afb4aa;
            font-size: 13px;
        }

        .section {
            padding: var(--section-space) 0;
            border-top: 1px solid var(--line);
        }

        .section:first-of-type {
            border-top: 0;
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 34px;
            margin-bottom: 38px;
        }

        .section-head p {
            max-width: 560px;
            margin: 0;
            color: var(--muted);
        }

        .section-code {
            display: block;
            margin-bottom: 10px;
            color: var(--coral);
            font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .tool-strip {
            margin-bottom: 34px;
            padding: 18px;
            background: var(--sage);
            border: 1px solid var(--ink);
            box-shadow: var(--shadow);
        }

        .tool-label {
            display: block;
            margin-bottom: 7px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .filter-button {
            min-height: 42px;
            padding: 7px 13px;
            background: var(--paper);
            color: var(--ink);
            box-shadow: 2px 2px 0 var(--ink);
            font-size: 14px;
        }

        .filter-button:hover,
        .filter-button.active {
            background: var(--coal);
            color: var(--lime);
            transform: translate(-1px, -1px);
        }

        .filter-button:active {
            box-shadow: none;
            transform: translate(0, 0);
        }

        .sort-select {
            min-height: 44px;
            width: 100%;
            padding: 8px 38px 8px 12px;
            background-color: var(--white);
            color: var(--ink);
            border: 1px solid var(--ink);
            border-radius: var(--radius);
            box-shadow: 2px 2px 0 var(--ink);
        }

        .sort-select:focus {
            border-color: var(--ink);
            outline: 2px solid var(--lime);
            outline-offset: 2px;
            box-shadow: 3px 3px 0 var(--ink);
        }

        .guide-list {
            border-top: 2px solid var(--ink);
        }

        .guide-item {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr) 155px 42px;
            gap: 20px;
            align-items: center;
            min-height: 152px;
            padding: 24px 14px;
            border-bottom: 1px solid var(--line);
            transition: background-color .16s ease, padding .16s ease;
        }

        .guide-item:hover {
            padding-left: 20px;
            background: var(--sage);
        }

        .guide-item[hidden] {
            display: none;
        }

        .guide-num {
            align-self: start;
            padding-top: 4px;
            color: var(--muted);
            font: 700 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            transition: color .16s ease;
        }

        .guide-item:hover .guide-num {
            color: var(--coral);
        }

        .guide-content {
            min-width: 0;
        }

        .guide-content h3 {
            display: -webkit-box;
            margin-bottom: 8px;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .guide-content p {
            display: -webkit-box;
            max-width: 690px;
            margin: 0;
            overflow: hidden;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.7;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .guide-meta {
            align-self: start;
        }

        .tag {
            display: inline-block;
            margin: 3px 4px 0 0;
            padding: 2px 7px;
            border: 1px solid currentColor;
            border-radius: 0;
            color: #454840;
            font-size: 12px;
            line-height: 1.5;
        }

        .guide-time {
            display: block;
            margin-top: 11px;
            color: var(--muted);
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .guide-arrow {
            justify-self: end;
            font-size: 25px;
            transition: color .16s ease, transform .16s ease;
        }

        .guide-item:hover .guide-arrow {
            color: var(--coral);
            transform: translateX(3px);
        }

        .sticky-index {
            position: sticky;
            top: 32px;
            padding-left: 26px;
            border-left: 2px solid var(--ink);
        }

        .sticky-index h3 {
            margin-bottom: 18px;
        }

        .index-status {
            margin-bottom: 22px;
            padding: 16px;
            background: var(--coal);
            color: var(--white);
            box-shadow: 4px 4px 0 var(--coral);
        }

        .index-status strong {
            display: block;
            color: var(--lime);
            font: 800 30px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .index-status span {
            color: #c2c6bd;
            font-size: 13px;
        }

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

        .index-list li {
            border-bottom: 1px solid var(--line);
        }

        .index-list button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 46px;
            padding: 8px 2px;
            background: transparent;
            color: var(--ink);
            border: 0;
            text-align: left;
            transition: color .16s ease, padding .16s ease;
        }

        .index-list button:hover,
        .index-list button.active {
            padding-left: 6px;
            color: #365d00;
        }

        .index-list small {
            color: var(--muted);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .notice-line {
            margin-top: 24px;
            padding: 14px 0 0 16px;
            border-left: 3px solid var(--coral);
            color: var(--muted);
            font-size: 13px;
        }

        .pagination-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-top: 30px;
        }

        .result-count {
            color: var(--muted);
            font-size: 13px;
        }

        .pagination-pixel {
            display: flex;
            gap: 8px;
            margin: 0;
        }

        .page-button {
            width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0;
            background: var(--white);
            box-shadow: 2px 2px 0 var(--ink);
        }

        .page-button:hover,
        .page-button.active {
            background: var(--coal);
            color: var(--lime);
            transform: translate(-1px, -1px);
        }

        .page-button:disabled {
            cursor: not-allowed;
            opacity: .46;
            box-shadow: none;
        }

        .scenario-band {
            background: var(--sage);
        }

        .scenario-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr 1fr;
            border-top: 2px solid var(--ink);
            border-left: 1px solid var(--ink);
        }

        .scenario-item {
            min-height: 245px;
            padding: 26px;
            border-right: 1px solid var(--ink);
            border-bottom: 1px solid var(--ink);
            transition: background-color .16s ease, color .16s ease;
        }

        .scenario-item:nth-child(2) {
            background: var(--coral);
        }

        .scenario-item:nth-child(3) {
            background: var(--coal);
            color: var(--white);
        }

        .scenario-item:nth-child(3) h3 {
            color: var(--lime);
        }

        .scenario-item:hover {
            background: var(--lime);
            color: var(--ink);
        }

        .scenario-item:hover h3 {
            color: var(--ink);
        }

        .scenario-code {
            display: block;
            margin-bottom: 42px;
            font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .scenario-item p {
            margin: 0;
            font-size: 15px;
            line-height: 1.7;
        }

        .process-line {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 2px solid var(--ink);
            border-bottom: 1px solid var(--ink);
        }

        .process-step {
            position: relative;
            min-height: 260px;
            padding: 30px 24px;
            border-right: 1px solid var(--line);
        }

        .process-step:last-child {
            border-right: 0;
        }

        .process-step::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 24px;
            width: 13px;
            height: 13px;
            background: var(--lime);
            border: 1px solid var(--ink);
        }

        .process-step:nth-child(2)::before,
        .process-step:nth-child(4)::before {
            background: var(--coral);
        }

        .step-number {
            display: block;
            margin-bottom: 48px;
            color: var(--coral);
            font: 800 24px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

        .process-step p {
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: 4fr 8fr;
            gap: 60px;
        }

        .faq-intro {
            position: sticky;
            top: 32px;
            align-self: start;
        }

        .faq-intro p {
            max-width: 360px;
            color: var(--muted);
        }

        .accordion {
            --bs-accordion-border-radius: 0;
            --bs-accordion-inner-border-radius: 0;
        }

        .accordion-item {
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--ink);
            border-radius: 0 !important;
        }

        .accordion-item:first-child {
            border-top: 2px solid var(--ink);
        }

        .accordion-button {
            min-height: 72px;
            padding: 20px 8px 20px 0;
            background: transparent !important;
            color: var(--ink) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            font-size: 17px;
            font-weight: 800;
        }

        .accordion-button:hover {
            padding-left: 10px;
            background: var(--sage) !important;
        }

        .accordion-button::after {
            content: "+";
            width: 28px;
            height: 28px;
            margin-left: 20px;
            background-image: none;
            border: 1px solid var(--ink);
            color: var(--ink);
            font-size: 22px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            transform: none;
        }

        .accordion-button:not(.collapsed)::after {
            content: "−";
            background: var(--lime);
            transform: none;
        }

        .accordion-body {
            padding: 0 42px 22px 0;
            color: #50534a;
            font-size: 15px;
        }

        .cta-band {
            padding: 70px 0;
            background: var(--coal);
            color: var(--white);
        }

        .cta-layout {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: 60px;
            align-items: start;
        }

        .cta-band h2 {
            margin: 14px 0 18px;
            color: var(--lime);
        }

        .cta-band p {
            max-width: 480px;
            color: #c8ccc1;
        }

        .cta-points {
            list-style: none;
            padding: 0;
            margin: 24px 0 0;
        }

        .cta-points li {
            position: relative;
            margin: 9px 0;
            padding-left: 18px;
            color: #c8ccc1;
            font-size: 14px;
        }

        .cta-points li::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0;
            width: 7px;
            height: 7px;
            background: var(--coral);
        }

        .feedback-form {
            padding: 24px;
            border: 1px solid #555950;
            box-shadow: 5px 5px 0 rgba(184, 243, 74, .65);
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-field.full {
            grid-column: 1 / -1;
        }

        .form-label {
            display: block;
            margin-bottom: 6px;
            color: #e8eadf;
            font-size: 14px;
            font-weight: 700;
        }

        input,
        select,
        textarea {
            width: 100%;
            min-height: 48px;
            padding: 11px 13px;
            background: #252625;
            color: var(--white);
            border: 1px solid #646961;
            border-radius: var(--radius);
        }

        textarea {
            min-height: 118px;
            resize: vertical;
        }

        input::placeholder,
        textarea::placeholder {
            color: #92978d;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--lime);
            outline: 2px solid var(--lime);
            outline-offset: 2px;
            box-shadow: 3px 3px 0 var(--coral);
        }

        .form-help {
            margin-top: 4px;
            color: #aeb3a8;
            font-size: 12px;
        }

        .form-check {
            margin-top: 2px;
        }

        .form-check-input {
            width: 18px;
            height: 18px;
            min-height: 18px;
            margin-top: .4em;
            background-color: #252625;
            border-color: #7b8076;
            border-radius: 0;
        }

        .form-check-input:checked {
            background-color: var(--lime);
            border-color: var(--lime);
        }

        .form-check-input:focus {
            border-color: var(--lime);
            box-shadow: 0 0 0 2px var(--coal), 0 0 0 4px var(--lime);
        }

        .form-check-label {
            color: #c8ccc1;
            font-size: 13px;
        }

        .form-status {
            min-height: 25px;
            margin-top: 13px;
            color: var(--lime);
            font-size: 14px;
        }

        .form-status.error {
            color: #ff9788;
        }

        .submit-button {
            min-width: 150px;
        }

        .submit-button:disabled {
            cursor: wait;
            background: #9cac75;
            box-shadow: 2px 2px 0 #777;
            transform: none;
        }

        footer {
            padding: 26px 0 32px;
            background: var(--coal);
            color: #d9ddd2;
            border-top: 1px solid #41443d;
        }

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

        .footer-brand {
            max-width: 470px;
            color: var(--white);
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            font-size: 14px;
        }

        .footer-links a {
            color: #c2c7bb;
            transition: color .16s ease, transform .16s ease;
        }

        .footer-links a:hover {
            color: var(--lime);
            transform: translateY(-1px);
        }

        .copyright {
            margin-top: 22px;
            color: #8f9589;
            font-size: 12px;
        }

        .empty-state {
            display: none;
            padding: 48px 24px;
            background: var(--sage);
            border-bottom: 1px solid var(--ink);
            text-align: center;
        }

        .empty-state.visible {
            display: block;
        }

        .empty-state h3 {
            margin-bottom: 8px;
        }

        .empty-state p {
            margin: 0 0 18px;
            color: var(--muted);
        }

        @media (max-width: 1199.98px) {
            :root {
                --sidebar: 185px;
                --section-space: 82px;
            }

            .side-nav {
                padding: 24px 15px;
            }

            .brand-name {
                max-width: 140px;
            }

            .container-wide {
                width: min(1100px, calc(100% - 56px));
            }

            h1 {
                font-size: 44px;
            }

            .guide-item {
                grid-template-columns: 58px minmax(0, 1fr) 130px 34px;
                gap: 14px;
            }

            .scenario-grid {
                grid-template-columns: 1fr 1fr;
            }

            .scenario-item:last-child {
                grid-column: 1 / -1;
                min-height: 205px;
            }
        }

        @media (max-width: 991.98px) {
            :root {
                --section-space: 68px;
            }

            .side-nav {
                display: none;
            }

            .main-area {
                margin-left: 0;
                padding-top: 70px;
            }

            .mobile-bar {
                position: fixed;
                z-index: 40;
                top: 0;
                right: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 70px;
                padding: 10px 18px;
                background: var(--coal);
                color: var(--white);
                border-bottom: 1px solid #3b3d38;
            }

            .mobile-bar .brand {
                max-width: calc(100% - 64px);
                font-size: 15px;
            }

            .mobile-bar .brand-name {
                max-width: 310px;
            }

            .navbar-toggler {
                width: 42px;
                height: 42px;
                padding: 0;
                display: grid;
                place-items: center;
                background: transparent;
                color: var(--lime);
                border: 1px solid var(--lime);
                border-radius: 2px;
                box-shadow: none;
            }

            .navbar-toggler:hover {
                background: var(--lime);
                color: var(--ink);
            }

            .menu-icon,
            .menu-icon::before,
            .menu-icon::after {
                display: block;
                width: 18px;
                height: 2px;
                background: currentColor;
                transition: .16s ease;
            }

            .menu-icon {
                position: relative;
            }

            .menu-icon::before,
            .menu-icon::after {
                content: "";
                position: absolute;
                left: 0;
            }

            .menu-icon::before {
                top: -6px;
            }

            .menu-icon::after {
                top: 6px;
            }

            .mobile-menu {
                position: fixed;
                z-index: 39;
                top: 70px;
                right: 0;
                left: 0;
                background: var(--coal);
                color: var(--white);
                border-bottom: 3px solid var(--lime);
            }

            .mobile-menu-inner {
                padding: 14px 18px 20px;
            }

            .mobile-menu a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 48px;
                padding: 9px 10px;
                border-bottom: 1px solid #40433e;
                color: #d9ddd2;
                font-weight: 700;
            }

            .mobile-menu a.active,
            .mobile-menu a:hover {
                background: var(--lime);
                color: var(--ink);
            }

            .page-hero {
                min-height: auto;
                padding: 54px 0 68px;
            }

            .readiness-panel {
                margin-top: 48px;
            }

            .section-head {
                align-items: flex-start;
                flex-direction: column;
                gap: 14px;
            }

            .sticky-index {
                position: static;
                margin-top: 42px;
                padding: 24px 0 0;
                border-top: 2px solid var(--ink);
                border-left: 0;
            }

            .index-list {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0 22px;
            }

            .process-line {
                grid-template-columns: 1fr 1fr;
            }

            .process-step:nth-child(2) {
                border-right: 0;
            }

            .process-step:nth-child(-n+2) {
                border-bottom: 1px solid var(--line);
            }

            .faq-layout {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .faq-intro {
                position: static;
            }

            .cta-layout {
                grid-template-columns: 1fr;
                gap: 36px;
            }
        }

        @media (max-width: 767.98px) {
            :root {
                --section-space: 60px;
            }

            .container-wide {
                width: calc(100% - 36px);
            }

            .page-hero {
                padding: 42px 0 60px;
            }

            h1 {
                font-size: 34px;
            }

            h2 {
                font-size: 29px;
            }

            h3 {
                font-size: 19px;
            }

            .lead-copy {
                font-size: 16px;
            }

            .action-row .btn-main,
            .action-row .btn-line {
                flex: 1 1 210px;
            }

            .tool-strip {
                padding: 15px;
            }

            .guide-item {
                position: relative;
                grid-template-columns: 44px minmax(0, 1fr);
                min-height: 0;
                padding: 22px 4px;
            }

            .guide-item:hover {
                padding-left: 9px;
            }

            .guide-meta {
                grid-column: 2;
            }

            .guide-arrow {
                position: absolute;
                top: 22px;
                right: 4px;
            }

            .guide-content h3 {
                padding-right: 36px;
            }

            .pagination-wrap {
                align-items: flex-start;
                flex-direction: column;
            }

            .scenario-grid {
                grid-template-columns: 1fr;
            }

            .scenario-item:last-child {
                grid-column: auto;
            }

            .scenario-item {
                min-height: 210px;
            }

            .scenario-code {
                margin-bottom: 30px;
            }

            .process-line {
                grid-template-columns: 1fr;
            }

            .process-step,
            .process-step:nth-child(2) {
                min-height: 210px;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .process-step:last-child {
                border-bottom: 0;
            }

            .step-number {
                margin-bottom: 30px;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-field.full {
                grid-column: auto;
            }

            .footer-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .footer-links {
                width: 100%;
                gap: 0;
                border-top: 1px solid #41443d;
            }

            .footer-links a {
                width: 50%;
                min-height: 44px;
                padding: 9px 4px;
                border-bottom: 1px solid #41443d;
            }
        }

        @media (max-width: 575.98px) {
            .container-wide {
                width: calc(100% - 36px);
            }

            .mobile-bar .brand-name {
                max-width: 235px;
                font-size: 13px;
                line-height: 1.25;
            }

            .brand-mark {
                width: 12px;
                height: 12px;
            }

            .breadcrumb {
                margin-bottom: 21px;
            }

            h1 {
                font-size: 31px;
            }

            .btn-main,
            .btn-line {
                width: 100%;
            }

            .readiness-panel {
                padding: 22px 18px;
            }

            .progress-ring {
                width: 156px;
                height: 156px;
            }

            .progress-ring::before {
                width: 116px;
                height: 116px;
            }

            .ring-value strong {
                font-size: 36px;
            }

            .filter-group {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .filter-button {
                width: 100%;
                padding-inline: 8px;
            }

            .guide-item {
                grid-template-columns: 35px minmax(0, 1fr);
                gap: 10px;
            }

            .guide-meta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 5px;
            }

            .guide-time {
                width: 100%;
                margin-top: 5px;
            }

            .index-list {
                grid-template-columns: 1fr;
            }

            .page-button {
                width: 42px;
                height: 42px;
            }

            .faq-layout {
                gap: 22px;
            }

            .accordion-button {
                font-size: 16px;
            }

            .accordion-body {
                padding-right: 8px;
            }

            .feedback-form {
                padding: 18px;
            }

            .submit-button {
                width: 100%;
            }
        }

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

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