/* roulang page: index */
:root{
  --ink:#241c2d;--muted:#756b78;--paper:#fffaf1;--cream:#f8eedf;
  --coral:#ef6d55;--berry:#9c426d;--purple:#654d83;--mint:#8bc8b0;
  --lime:#d7e76c;--line:#dfcfbf;--white:#fffdf9;--shadow:5px 5px 0 #271e2d;
  --radius:8px;--max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(90deg,rgba(101,77,131,.07) 1px,transparent 1px),linear-gradient(rgba(101,77,131,.07) 1px,transparent 1px);background-size:24px 24px;z-index:-1}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,250,241,.94);border-bottom:2px solid var(--ink);backdrop-filter:blur(10px)}
.navbar{height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;min-width:245px;font-weight:800}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;background:var(--coral);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:13px;color:#fff}
.brand-name{font-size:17px;letter-spacing:-.5px}
.nav-links{display:flex;align-items:center;gap:5px;margin-left:auto}
.nav-links a{padding:9px 12px;border:1px solid transparent;color:var(--muted);font-weight:700}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--lime);border-color:var(--ink)}
.nav-download{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.menu-toggle{display:none;background:none;border:2px solid var(--ink);padding:7px 10px;color:var(--ink)}
main{overflow:hidden}
.hero{padding:74px 0 58px;background:linear-gradient(135deg,#f8eedf 0%,#fffaf1 58%,#f5e1df 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:55px;align-items:center}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--berry);font-weight:800;font-size:13px;letter-spacing:.08em}
.eyebrow:before,.section-kicker:before{content:"";width:9px;height:9px;background:var(--coral);display:inline-block}
.hero h1{font-size:clamp(40px,6vw,72px);line-height:1.12;letter-spacing:-3px;margin:16px 0 18px;max-width:650px}
.hero h1 em{font-style:normal;color:var(--coral);position:relative}
.hero h1 em:after{content:"";position:absolute;left:3px;right:0;bottom:-5px;height:7px;background:var(--lime);z-index:-1}
.hero-sub{font-size:20px;font-weight:800;margin-bottom:12px}
.hero-copy{max-width:580px;color:var(--muted);font-size:16px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border:2px solid var(--ink);font-weight:800;border-radius:5px;transition:.2s;box-shadow:3px 3px 0 var(--ink)}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);outline:3px solid rgba(239,109,85,.35)}
.btn-primary{background:var(--coral);color:#fff}
.btn-secondary{background:var(--white)}
.hero-panel{background:var(--ink);color:#fff;padding:24px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--coral);position:relative}
.panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #66576d;padding-bottom:16px;margin-bottom:20px}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);margin-right:8px;box-shadow:0 0 0 4px rgba(215,231,108,.15)}
.panel-version{font-size:30px;font-weight:900;line-height:1.2}
.panel-meta{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}
.dark-tag{border:1px solid #897b91;color:#eee;padding:4px 8px;font-size:12px}
.progress{height:10px;background:#54465c;margin:12px 0 22px;overflow:hidden}
.progress i{display:block;width:82%;height:100%;background:var(--lime)}
.pixel-lines{display:grid;gap:8px}.pixel-lines span{height:8px;background:#806c8c}.pixel-lines span:nth-child(2){width:74%;background:var(--mint)}.pixel-lines span:nth-child(3){width:56%;background:var(--coral)}
.section{padding:70px 0;border-bottom:1px solid var(--line)}
.section.alt{background:#f7eee3}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:28px}
.section-head h2{font-size:clamp(25px,3vw,37px);line-height:1.2;letter-spacing:-1px;margin-top:8px}
.section-head p{max-width:510px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);background:var(--white);box-shadow:var(--shadow)}
.metric{padding:23px 22px;border-right:1px solid var(--line);position:relative}
.metric:last-child{border:0}.metric small{display:block;color:var(--muted);font-weight:700;margin-bottom:9px}.metric strong{font-size:30px;line-height:1;color:var(--purple);display:block}.metric b{font-size:12px;color:var(--berry)}
.service-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.service-item{border:2px solid var(--ink);background:var(--white);padding:22px;min-height:145px;position:relative;transition:.2s}
.service-item:hover{transform:translateY(-4px);box-shadow:4px 4px 0 var(--mint)}
.service-item.tall{grid-row:span 2;background:var(--purple);color:#fff}.service-item.wide{grid-column:span 2;background:#f5dfc8}
.service-item h3{font-size:20px;margin:11px 0 5px}.service-item p{font-size:13px;color:var(--muted)}.tall p{color:#eee}
.badge{display:inline-block;padding:3px 8px;border:1px solid currentColor;font-size:11px;font-weight:800;line-height:1.4}.badge.new{color:#b73f54;background:#fff0ed}.badge.ok{color:#397c66;background:#e8f5e9}.badge.blue{color:#5e4a83;background:#eee9fa}.badge.dark{color:#fff;background:#3c3045;border-color:#fff}
.arrow{position:absolute;right:20px;bottom:18px;font-size:22px}
.latest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.download-card{background:var(--white);border:2px solid var(--line);padding:10px;transition:.2s}.download-card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:4px 4px 0 var(--lime)}
.thumb{height:132px;background:linear-gradient(135deg,var(--purple),var(--berry));border:2px solid var(--ink);position:relative;display:flex;align-items:end;padding:10px;color:#fff;overflow:hidden}
.thumb:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,.1) 8px);opacity:.7}
.thumb span{position:relative;font-size:11px;border:1px solid #fff;padding:2px 5px}.thumb.t2{background:linear-gradient(135deg,#d4775d,#f3bd75)}.thumb.t3{background:linear-gradient(135deg,#538d84,#a7d7ae)}.thumb.t4{background:linear-gradient(135deg,#51416d,#d07b9c)}.thumb.t5{background:linear-gradient(135deg,#b35860,#e3a35d)}.thumb.t6{background:linear-gradient(135deg,#3c6d82,#8cc4b2)}
.card-body{padding:12px 3px 3px}.card-body h3{font-size:16px;line-height:1.35;margin-bottom:8px}.card-row{display:flex;justify-content:space-between;align-items:center;gap:6px}.rating{font-weight:900;color:var(--berry);font-size:14px}
.popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.popular-item{display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border:2px solid var(--ink);padding:17px 18px;min-height:100px;transition:.2s}.popular-item:hover{background:var(--berry);transform:translateX(4px)}
.rank-num{font-size:34px;font-weight:900;color:var(--lime);line-height:1}.popular-item h3{font-size:17px}.popular-item p{font-size:12px;color:#ded5df}.popular-score{margin-left:auto;color:var(--lime);font-weight:900}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.version-box{border:2px solid var(--ink);padding:24px;background:var(--white)}.version-box.featured{background:var(--coral);color:#fff}.version-box h3{font-size:24px;margin:8px 0}.version-list{list-style:none;margin-top:18px}.version-list li{padding:9px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:12px}.featured .version-list li{border-color:rgba(255,255,255,.35)}.version-list b{font-size:13px}
.channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.channel{padding:20px 16px;border:2px solid var(--ink);background:var(--white);min-height:155px;transition:.2s}.channel:nth-child(even){margin-top:18px;background:#eaf3e9}.channel:hover{background:var(--lime);transform:translateY(-3px)}.channel h3{font-size:18px;margin-bottom:9px}.channel p{font-size:13px;color:var(--muted)}
.ranking-wrap{display:grid;grid-template-columns:1fr 270px;gap:24px}.ranking{border:2px solid var(--ink);background:var(--white)}.rank-row{display:grid;grid-template-columns:55px 1fr 105px 70px 90px;align-items:center;gap:12px;padding:13px 17px;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-row strong{font-size:21px;color:var(--purple)}.rank-row:nth-child(-n+3) strong{color:var(--coral)}.heat{height:7px;background:#eaded2}.heat i{display:block;height:100%;background:var(--mint)}.rank-side{background:var(--purple);color:#fff;padding:25px}.rank-side h3{font-size:23px;margin-bottom:12px}.rank-side p{font-size:13px;color:#eee}.timeline{display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:20px}.timeline:before{content:"";height:3px;background:var(--coral);position:absolute;top:15px;left:4%;right:4%}.milestone{position:relative;padding-top:42px}.milestone:before{content:"";position:absolute;top:7px;left:0;width:17px;height:17px;background:var(--lime);border:3px solid var(--ink);z-index:1}.milestone strong{display:block;color:var(--berry);font-size:13px}.milestone h3{font-size:18px;margin:8px 0}.milestone p{font-size:13px;color:var(--muted)}
.news-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:15px}.news-item{display:grid;grid-template-columns:90px 1fr;gap:14px;border-bottom:1px solid var(--line);padding:0 0 15px}.news-item:first-child{grid-row:span 2;display:block}.news-item:first-child .news-thumb{height:175px;margin-bottom:13px}.news-thumb{height:75px;background:var(--berry);border:2px solid var(--ink);position:relative}.news-thumb:after{content:"更新";position:absolute;left:8px;bottom:7px;background:var(--lime);color:var(--ink);font-size:11px;padding:2px 5px;font-weight:800}.news-item h3{font-size:16px;line-height:1.4}.news-item time{font-size:12px;color:var(--muted);display:block;margin-top:5px}
.guard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.guard{padding:22px;border:2px solid var(--ink);background:var(--white)}.guard-icon{font-size:26px;color:var(--coral)}.guard h3{margin:8px 0}.guard p{font-size:13px;color:var(--muted)}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.quick{border-left:5px solid var(--coral);padding:18px;background:var(--white);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.quick b{display:block;color:var(--berry);margin-bottom:5px}
.faq-list{max-width:900px;margin:auto}.faq-item{border-top:2px solid var(--ink)}.faq-item:last-child{border-bottom:2px solid var(--ink)}.faq-q{width:100%;border:0;background:none;text-align:left;padding:19px 5px;font-weight:800;display:flex;justify-content:space-between;color:var(--ink)}.faq-q span{font-size:22px;color:var(--coral)}.faq-a{display:none;color:var(--muted);padding:0 35px 18px 5px}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span{transform:rotate(45deg)}
.form-section{background:var(--ink);color:#fff;padding:58px 0}.form-box{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.form-box p{color:#d8cdda;margin-top:12px}.notice-form{background:#fff;color:var(--ink);padding:23px;border:3px solid var(--coral);box-shadow:6px 6px 0 var(--lime)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}.field input,.field select{width:100%;border:2px solid var(--ink);padding:10px;background:#fffaf1;outline:none}.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(239,109,85,.35)}.notice-form .btn{margin-top:15px;width:100%}.privacy{font-size:11px;color:var(--muted);margin-top:10px}.form-status{display:none;color:#397c66;font-size:13px;margin-top:10px;font-weight:800}
footer{background:#211a29;color:#fff;padding:48px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px}.footer-brand{font-size:20px;font-weight:900}.footer-col h3{font-size:14px;color:var(--lime);margin-bottom:13px}.footer-col a,.footer-col p{display:block;color:#cfc3d1;font-size:13px;margin:6px 0}.footer-col a:hover{color:#fff;text-decoration:underline}.copyright{border-top:1px solid #514457;margin-top:35px;padding-top:18px;color:#a89aab;font-size:12px;display:flex;justify-content:space-between}
@media(max-width:1024px){.latest-grid{grid-template-columns:repeat(3,1fr)}.channel-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:1fr 1fr}.service-item.tall{grid-row:auto}.service-item.wide{grid-column:span 2}.ranking-wrap{grid-template-columns:1fr}.rank-side{display:none}}
@media(max-width:768px){.container{width:min(100% - 28px,var(--max))}.navbar{height:68px}.brand{min-width:0}.brand-name{font-size:15px}.menu-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:12px 14px;flex-direction:column;align-items:stretch;box-shadow:0 8px 12px rgba(36,28,45,.12)}.nav-links.show{display:flex}.nav-links a{padding:12px}.hero{padding:48px 0}.hero-grid{grid-template-columns:1fr;gap:35px}.hero h1{font-size:48px}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.latest-grid{grid-template-columns:repeat(2,1fr)}.popular-grid,.guard-grid{grid-template-columns:repeat(2,1fr)}.channel-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr}.timeline:before{display:none}.news-grid{grid-template-columns:1fr 1fr}.news-item:first-child{grid-column:span 2}.form-box{grid-template-columns:1fr;gap:25px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){body{font-size:14px}.section{padding:48px 0}.hero h1{font-size:40px;letter-spacing:-2px}.hero-sub{font-size:17px}.hero-actions .btn{width:100%}.section-head{display:block}.section-head p{margin-top:12px}.metrics,.service-grid,.compare,.latest-grid,.popular-grid,.channel-grid,.timeline,.news-grid,.guard-grid,.quick-grid{grid-template-columns:1fr}.service-item.wide{grid-column:auto}.channel:nth-child(even){margin-top:0}.news-item:first-child,.news-item{grid-column:auto}.news-item:first-child .news-thumb{height:130px}.rank-row{grid-template-columns:34px 1fr 55px 45px;padding:12px 9px;gap:7px}.rank-row .heat{display:none}.rank-row .badge{font-size:10px}.footer-grid{grid-template-columns:1fr;gap:22px}.copyright{display:block}.copyright span{display:block;margin-top:6px}.form-row{grid-template-columns:1fr}.thumb{height:145px}}

/* roulang page: category1 */
:root {
      --ink: #241c2d;
      --muted: #756b78;
      --paper: #fffaf1;
      --cream: #f8eedf;
      --coral: #ef6d55;
      --berry: #9c426d;
      --purple: #654d83;
      --mint: #8bc8b0;
      --lime: #d7e76c;
      --line: #dfcfbf;
      --white: #fffdf9;
      --shadow: 5px 5px 0 #271e2d;
      --radius: 8px;
      --max: 1200px;
      --success: #397c66;
      --warning: #9c6428;
      --danger: #a43b4c;
    }

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

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

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-size: 15px;
      line-height: 1.7;
    }

    body::before {
      position: fixed;
      z-index: -1;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(101, 77, 131, .055) 1px, transparent 1px),
        linear-gradient(rgba(101, 77, 131, .055) 1px, transparent 1px);
      background-size: 24px 24px;
      content: "";
      pointer-events: none;
    }

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

    button, input, select {
      color: inherit;
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

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

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      z-index: 20;
      top: 0;
      background: rgba(255, 250, 241, .96);
      border-bottom: 2px solid var(--ink);
      backdrop-filter: blur(10px);
    }

    .navbar {
      position: relative;
      display: flex;
      min-height: 76px;
      align-items: center;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      min-width: 245px;
      align-items: center;
      gap: 11px;
      font-weight: 800;
    }

    .brand-mark {
      display: grid;
      width: 39px;
      height: 39px;
      flex: 0 0 auto;
      place-items: center;
      border: 2px solid var(--ink);
      background: var(--coral);
      box-shadow: 3px 3px 0 var(--ink);
      color: #fff;
      font-size: 13px;
    }

    .brand-name {
      font-size: 17px;
      line-height: 1.25;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .nav-links a {
      padding: 9px 11px;
      border: 1px solid transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
      border-color: var(--ink);
      background: var(--lime);
      color: var(--ink);
    }

    .nav-links a.nav-download {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
    }

    .nav-links a.nav-download:hover {
      background: var(--berry);
    }

    .menu-toggle {
      display: none;
      padding: 8px 11px;
      border: 2px solid var(--ink);
      background: var(--white);
      font-weight: 800;
    }

    main {
      overflow: hidden;
    }

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

    .section.alt {
      background: #f7eee3;
    }

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

    .section-kicker,
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--berry);
      font-size: 13px;
      font-weight: 800;
    }

    .section-kicker::before,
    .eyebrow::before {
      width: 9px;
      height: 9px;
      background: var(--coral);
      content: "";
    }

    .section-head h2 {
      margin: 8px 0 0;
      font-size: clamp(25px, 3vw, 36px);
      line-height: 1.25;
    }

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

    .btn {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border: 2px solid var(--ink);
      border-radius: 5px;
      box-shadow: 3px 3px 0 var(--ink);
      font-weight: 800;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

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

    .btn-primary {
      background: var(--coral);
      color: #fff;
    }

    .btn-secondary {
      background: var(--white);
    }

    .badge {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 2px 8px;
      border: 1px solid currentColor;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
      white-space: nowrap;
    }

    .badge.new {
      background: #fff0ed;
      color: #b73f54;
    }

    .badge.ok {
      background: #e8f5e9;
      color: #397c66;
    }

    .badge.blue {
      background: #eee9fa;
      color: #5e4a83;
    }

    .badge.warm {
      background: #fff3d8;
      color: #8c5c20;
    }

    .category-banner {
      position: relative;
      padding: 35px 0 31px;
      border-bottom: 2px solid var(--ink);
      background:
        linear-gradient(115deg, rgba(248, 238, 223, .98), rgba(255, 250, 241, .94) 55%, rgba(245, 225, 223, .94));
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .breadcrumb a {
      text-decoration: underline;
      text-decoration-color: var(--coral);
      text-underline-offset: 3px;
    }

    .breadcrumb span[aria-hidden="true"] {
      color: var(--coral);
    }

    .category-banner-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
      align-items: center;
      gap: 52px;
    }

    .category-banner h1 {
      max-width: 720px;
      margin: 12px 0 12px;
      font-size: clamp(34px, 5vw, 56px);
      font-weight: 800;
      line-height: 1.16;
    }

    .category-banner h1 em {
      color: var(--coral);
      font-style: normal;
      text-decoration: underline;
      text-decoration-color: var(--lime);
      text-decoration-thickness: 7px;
      text-underline-offset: 5px;
    }

    .category-lead {
      max-width: 670px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }

    .banner-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 19px;
    }

    .banner-tags span {
      padding: 5px 10px;
      border: 1px solid var(--line);
      background: rgba(255, 253, 249, .8);
      font-size: 12px;
      font-weight: 700;
    }

    .directory-panel {
      position: relative;
      padding: 20px;
      border: 3px solid var(--ink);
      background: var(--ink);
      box-shadow: 7px 7px 0 var(--coral);
      color: #fff;
    }

    .directory-panel::after {
      position: absolute;
      top: -9px;
      right: 18px;
      width: 30px;
      height: 9px;
      background: var(--lime);
      content: "";
    }

    .directory-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 13px;
      border-bottom: 1px solid #65596a;
      font-size: 12px;
      font-weight: 800;
    }

    .live-indicator {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #e2f4b0;
    }

    .live-indicator::before {
      width: 8px;
      height: 8px;
      background: var(--mint);
      content: "";
    }

    .directory-title {
      margin: 18px 0 15px;
      font-size: 22px;
      font-weight: 800;
    }

    .directory-row {
      display: grid;
      grid-template-columns: 76px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 11px 0;
      border-top: 1px dashed #62576b;
      font-size: 13px;
    }

    .directory-row span:first-child {
      color: #c6b8c9;
    }

    .directory-row strong {
      font-size: 13px;
    }

    .directory-row .directory-state {
      color: #d7e76c;
      font-size: 11px;
      font-weight: 800;
    }

    .summary-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 2px solid var(--ink);
      background: var(--white);
      box-shadow: 4px 4px 0 var(--ink);
    }

    .summary-cell {
      position: relative;
      min-height: 108px;
      padding: 18px 21px;
      border-right: 1px solid var(--line);
    }

    .summary-cell:last-child {
      border-right: 0;
    }

    .summary-cell span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .summary-cell strong {
      display: block;
      margin-top: 5px;
      color: var(--berry);
      font-size: 25px;
      line-height: 1.25;
    }

    .summary-cell small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
    }

    .filter-toolbar {
      display: grid;
      grid-template-columns: minmax(210px, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      padding: 15px;
      border: 2px solid var(--ink);
      background: var(--cream);
    }

    .search-field {
      position: relative;
    }

    .search-field::before {
      position: absolute;
      top: 50%;
      left: 13px;
      color: var(--purple);
      content: "⌕";
      font-size: 21px;
      font-weight: 800;
      transform: translateY(-55%);
      pointer-events: none;
    }

    .search-field input,
    .select-field select {
      width: 100%;
      min-height: 44px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: var(--white);
    }

    .search-field input {
      padding-left: 40px;
    }

    .search-field input:focus,
    .select-field select:focus,
    .form-field select:focus {
      border-color: var(--purple);
      outline: 3px solid rgba(101, 77, 131, .18);
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .filter-chip {
      min-height: 40px;
      padding: 7px 11px;
      border: 1px solid var(--line);
      background: var(--white);
      font-size: 12px;
      font-weight: 800;
      transition: background .16s ease, border-color .16s ease, color .16s ease;
    }

    .filter-chip:hover,
    .filter-chip[aria-pressed="true"] {
      border-color: var(--ink);
      background: var(--lime);
    }

    .filter-chip:disabled {
      cursor: not-allowed;
      opacity: .48;
      background: #eee8e2;
    }

    .select-field select {
      min-width: 144px;
      font-weight: 700;
    }

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

    .catalog-list {
      display: grid;
      gap: 11px;
    }

    .catalog-item {
      display: grid;
      grid-template-columns: 126px minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
      padding: 13px;
      border: 1px solid var(--line);
      background: var(--white);
      transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    .catalog-item:hover {
      transform: translateY(-2px);
      border-color: var(--ink);
      box-shadow: 3px 3px 0 var(--mint);
    }

    .catalog-thumb {
      position: relative;
      display: grid;
      min-height: 88px;
      overflow: hidden;
      place-items: center;
      border: 1px solid var(--ink);
      background-color: var(--cream);
      isolation: isolate;
    }

    .catalog-thumb::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(90deg, transparent 49%, rgba(36, 28, 45, .08) 50%, transparent 51%),
        linear-gradient(transparent 49%, rgba(36, 28, 45, .08) 50%, transparent 51%);
      background-size: 12px 12px;
      content: "";
    }

    .catalog-thumb::after {
      position: absolute;
      right: -15px;
      bottom: -23px;
      width: 68px;
      height: 68px;
      border: 10px solid rgba(36, 28, 45, .12);
      content: "";
      transform: rotate(45deg);
    }

    .art-symbol {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border: 2px solid var(--ink);
      background: var(--white);
      box-shadow: 3px 3px 0 var(--ink);
      color: var(--berry);
      font-size: 21px;
      font-weight: 900;
    }

    .art-coral { background-color: #f4c4ad; }
    .art-mint { background-color: #c6e5d6; }
    .art-lime { background-color: #e9edab; }
    .art-purple { background-color: #d9cbe6; }
    .art-berry { background-color: #e7bfd0; }
    .art-cream { background-color: #f2dfc7; }

    .catalog-copy h3 {
      margin: 0 0 5px;
      font-size: 17px;
      line-height: 1.4;
    }

    .catalog-copy p {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .catalog-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 13px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
    }

    .catalog-meta time {
      color: var(--purple);
      font-weight: 700;
    }

    .catalog-side {
      display: flex;
      min-width: 90px;
      flex-direction: column;
      align-items: flex-end;
      gap: 9px;
    }

    .catalog-score {
      color: var(--berry);
      font-size: 13px;
      font-weight: 800;
    }

    .catalog-more {
      display: flex;
      justify-content: center;
      margin-top: 22px;
    }

    .empty-state {
      display: none;
      padding: 24px;
      border: 1px dashed var(--purple);
      background: var(--white);
      color: var(--muted);
      text-align: center;
    }

    .compare-wrap {
      overflow-x: auto;
      border: 2px solid var(--ink);
      background: var(--white);
      box-shadow: 4px 4px 0 var(--ink);
    }

    .compare-table {
      width: 100%;
      min-width: 690px;
      border-collapse: collapse;
      text-align: left;
    }

    .compare-table th,
    .compare-table td {
      padding: 15px 17px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }

    .compare-table th {
      background: var(--ink);
      color: #fff;
      font-size: 13px;
    }

    .compare-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .compare-table tbody tr:first-child {
      background: #fff2e9;
    }

    .compare-table td:first-child {
      font-weight: 800;
    }

    .compare-table td {
      color: var(--muted);
      font-size: 13px;
    }

    .compare-table td:first-child,
    .compare-table td:nth-child(2) {
      color: var(--ink);
    }

    .note-line {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .article-list {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 0 35px;
      border-top: 2px solid var(--ink);
    }

    .article-item {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      min-height: 80px;
      padding: 13px 2px;
      border-bottom: 1px solid var(--line);
    }

    .article-mark {
      display: grid;
      width: 52px;
      height: 46px;
      place-items: center;
      border: 1px solid var(--ink);
      background: var(--cream);
      color: var(--berry);
      font-size: 18px;
      font-weight: 900;
    }

    .article-item h3 {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
    }

    .article-item a:hover h3 {
      color: var(--berry);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .article-item time {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .guard-layout {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 34px;
      align-items: start;
    }

    .guard-note {
      padding: 22px;
      border: 2px solid var(--ink);
      background: var(--purple);
      box-shadow: 5px 5px 0 var(--lime);
      color: #fff;
    }

    .guard-note h3 {
      margin: 0 0 9px;
      font-size: 20px;
    }

    .guard-note p {
      margin: 0;
      color: #eee7f1;
      font-size: 13px;
    }

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

    .check-item {
      display: flex;
      min-height: 81px;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      background: var(--white);
    }

    .check-icon {
      display: grid;
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--success);
      background: #e8f5e9;
      color: var(--success);
      font-weight: 900;
    }

    .check-item strong {
      display: block;
      font-size: 13px;
    }

    .check-item span:last-child {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 2px solid var(--ink);
      background: var(--white);
    }

    .quick-item {
      position: relative;
      min-height: 132px;
      padding: 20px;
      border-right: 1px solid var(--line);
    }

    .quick-item:last-child {
      border-right: 0;
    }

    .quick-number {
      display: inline-grid;
      width: 27px;
      height: 27px;
      place-items: center;
      background: var(--lime);
      font-size: 12px;
      font-weight: 900;
    }

    .quick-item h3 {
      margin: 10px 0 5px;
      font-size: 15px;
    }

    .quick-item p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

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

    .faq-list details {
      border-bottom: 1px solid var(--line);
      background: rgba(255, 253, 249, .55);
    }

    .faq-list summary {
      position: relative;
      padding: 17px 48px 17px 17px;
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }

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

    .faq-list summary::after {
      position: absolute;
      top: 50%;
      right: 17px;
      display: grid;
      width: 25px;
      height: 25px;
      place-items: center;
      border: 1px solid var(--ink);
      background: var(--lime);
      content: "+";
      font-size: 18px;
      transform: translateY(-50%);
    }

    .faq-list details[open] summary::after {
      content: "−";
      background: var(--coral);
      color: #fff;
    }

    .faq-answer {
      max-width: 850px;
      padding: 0 48px 17px 17px;
      color: var(--muted);
      font-size: 13px;
    }

    .faq-answer p {
      margin: 0;
    }

    .conversion-panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 34px;
      padding: 30px;
      border: 3px solid var(--ink);
      background: #f5dfc8;
      box-shadow: 7px 7px 0 var(--ink);
    }

    .conversion-copy h2 {
      margin: 8px 0 10px;
      font-size: clamp(25px, 3vw, 34px);
      line-height: 1.25;
    }

    .conversion-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .conversion-form {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      align-items: end;
      gap: 10px;
    }

    .form-field label {
      display: block;
      margin-bottom: 5px;
      font-size: 12px;
      font-weight: 800;
    }

    .form-field select {
      width: 100%;
      min-height: 46px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: var(--white);
    }

    .form-privacy {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .form-status {
      display: none;
      grid-column: 1 / -1;
      margin: 0;
      padding: 10px 12px;
      border: 1px solid var(--success);
      background: #e8f5e9;
      color: #285d4b;
      font-size: 13px;
      font-weight: 700;
    }

    .form-status.is-visible {
      display: block;
    }

    footer {
      padding: 48px 0 20px;
      background: var(--ink);
      color: #fff;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
      gap: 30px;
      padding-bottom: 34px;
    }

    .footer-brand {
      margin-bottom: 9px;
      font-size: 18px;
      font-weight: 800;
    }

    .footer-col p {
      margin: 6px 0;
      color: #d4cbd6;
      font-size: 12px;
    }

    .footer-col h3 {
      margin: 0 0 12px;
      color: #e4e7a2;
      font-size: 14px;
    }

    .footer-col a {
      display: block;
      width: fit-content;
      margin: 7px 0;
      color: #e6dfe8;
      font-size: 12px;
    }

    .footer-col a:hover {
      color: var(--lime);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-top: 15px;
      border-top: 1px solid #51465a;
      color: #c7bdca;
      font-size: 11px;
    }

    @media (max-width: 1080px) {
      .navbar {
        gap: 12px;
      }

      .brand {
        min-width: 220px;
      }

      .nav-links a {
        padding-inline: 8px;
        font-size: 13px;
      }

      .filter-toolbar {
        grid-template-columns: 1fr auto;
      }

      .search-field {
        grid-column: 1 / -1;
      }

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

      .conversion-form .btn {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 780px) {
      html {
        scroll-padding-top: 82px;
      }

      .navbar {
        min-height: 70px;
      }

      .brand {
        min-width: 0;
        margin-right: auto;
      }

      .brand-name {
        font-size: 15px;
      }

      .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .menu-toggle::before {
        content: "☰";
        font-size: 16px;
      }

      .menu-toggle[aria-expanded="true"]::before {
        content: "×";
        font-size: 20px;
      }

      .nav-links {
        position: absolute;
        top: calc(100% + 2px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 12px;
        border: 2px solid var(--ink);
        background: var(--paper);
        box-shadow: 4px 4px 0 var(--ink);
      }

      .nav-links.is-open {
        display: flex;
      }

      .nav-links a {
        padding: 11px 12px;
      }

      .category-banner-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .directory-panel {
        max-width: 540px;
      }

      .summary-strip {
        grid-template-columns: repeat(2, 1fr);
      }

      .summary-cell:nth-child(2) {
        border-right: 0;
      }

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

      .section {
        padding: 52px 0;
      }

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

      .catalog-item {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 14px;
      }

      .catalog-thumb {
        min-height: 82px;
      }

      .catalog-side {
        grid-column: 2;
        min-width: 0;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
      }

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

      .guard-layout {
        grid-template-columns: 1fr;
      }

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

      .quick-item {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

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

      .conversion-panel {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 520px) {
      .container {
        width: min(var(--max), calc(100% - 28px));
      }

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

      .brand-name {
        max-width: 215px;
        font-size: 14px;
      }

      .category-banner {
        padding: 26px 0;
      }

      .category-banner h1 {
        font-size: 35px;
      }

      .category-lead {
        font-size: 14px;
      }

      .directory-panel {
        padding: 17px;
        box-shadow: 5px 5px 0 var(--coral);
      }

      .directory-row {
        grid-template-columns: 66px 1fr auto;
        gap: 8px;
      }

      .summary-cell {
        min-height: 99px;
        padding: 14px;
      }

      .summary-cell strong {
        font-size: 22px;
      }

      .filter-toolbar {
        grid-template-columns: 1fr;
        padding: 11px;
      }

      .search-field {
        grid-column: auto;
      }

      .filter-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

      .filter-chip {
        padding-inline: 7px;
      }

      .select-field select {
        width: 100%;
      }

      .catalog-item {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 11px;
        padding: 10px;
      }

      .catalog-thumb {
        min-height: 70px;
      }

      .art-symbol {
        width: 35px;
        height: 35px;
        font-size: 18px;
      }

      .catalog-copy h3 {
        font-size: 14px;
      }

      .catalog-copy p {
        font-size: 12px;
      }

      .catalog-meta {
        gap: 5px 9px;
      }

      .catalog-side {
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        padding-top: 3px;
        border-top: 1px dashed var(--line);
      }

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

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

      .article-mark {
        width: 43px;
        height: 42px;
      }

      .article-item time {
        grid-column: 2;
      }

      .conversion-panel {
        gap: 22px;
        padding: 20px 16px;
        box-shadow: 5px 5px 0 var(--ink);
      }

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

      .conversion-form .btn,
      .form-privacy,
      .form-status {
        grid-column: auto;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .copyright {
        flex-direction: column;
      }

      .section {
        padding: 44px 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }