/* roulang page: index */
:root{
      --plum:#4b3048;
      --plum-dark:#352132;
      --charcoal:#252322;
      --paper:#f3f0ea;
      --mist:#e8dfe1;
      --sage:#839987;
      --sage-soft:#e3ebe2;
      --apricot:#c98261;
      --line:#d8d0cb;
      --ink:#2b2928;
      --muted:#716b67;
      --cream:#fffdf8;
      --shadow:0 10px 28px rgba(37,35,34,.08);
      --shadow-hover:0 16px 34px rgba(37,35,34,.14);
      --radius-lg:18px;
      --radius:14px;
      --ease:180ms ease;
    }
    *{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 SC",Arial,sans-serif;
      line-height:1.75;font-size:16px;
    }
    body.modal-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    .grid-container{max-width:1200px;padding-left:20px;padding-right:20px}
    .skip-link{position:absolute;left:12px;top:-56px;background:var(--apricot);color:#fff;padding:10px 16px;z-index:9999;border-radius:0 0 10px 10px}
    .skip-link:focus{top:0}
    :focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
    .site-header{padding:18px 0 0;position:sticky;top:0;z-index:50;background:linear-gradient(var(--paper) 82%,transparent)}
    .nav-panel{
      min-height:70px;padding:10px 12px 10px 18px;background:var(--charcoal);border:1px solid #3b3937;
      border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;
    }
    .brand{display:flex;align-items:center;gap:10px;min-width:215px;color:#fff;font-size:15px;font-weight:800;line-height:1.35}
    .brand-mark{width:32px;height:32px;border-radius:10px;background:var(--plum);display:grid;place-items:center;position:relative;overflow:hidden}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:#f2e8e9;border-radius:4px}
    .brand-mark:before{width:5px;height:15px;left:9px;bottom:7px;box-shadow:9px -5px 0 #f2e8e9}
    .brand-mark:after{width:4px;height:9px;right:6px;bottom:7px}
    .nav-links{display:flex;align-items:center;gap:8px;flex:1}
    .nav-item{
      min-height:44px;padding:10px 14px;border-radius:10px;color:#ddd7d4;font-size:14px;
      border:1px solid transparent;display:inline-flex;align-items:center;gap:7px;transition:var(--ease);
    }
    .nav-item:before{content:"";width:7px;height:7px;border-radius:50%;background:#8b8581;transition:var(--ease)}
    .nav-item:hover{background:#3b3736;color:#fff;border-color:#5c5653}
    .nav-item:hover:before{background:var(--apricot)}
    .nav-item.active{background:var(--plum);color:#fff}
    .nav-item.active:before{background:#e9dfe2}
    .nav-cta,.button.primary-action{
      background:var(--plum);color:#fff;border:1px solid var(--plum);border-radius:10px;
      min-height:44px;padding:10px 16px;font-weight:700;font-size:14px;transition:var(--ease);
    }
    .nav-cta:hover,.button.primary-action:hover{background:var(--plum-dark);color:#fff;transform:translateY(-1px);box-shadow:0 8px 16px rgba(75,48,72,.24)}
    .mobile-toggle{display:none;color:#fff;background:#3b3736;border:1px solid #5c5653;border-radius:10px;width:44px;height:44px;font-size:20px}
    .mobile-menu{display:none}
    .section{padding:96px 0}
    .hero{padding:36px 0 22px}
    .hero-panel{
      background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
      box-shadow:var(--shadow);overflow:hidden;position:relative;
    }
    .hero-copy{padding:42px 42px 36px}
    .eyebrow{margin:0 0 12px;color:var(--plum);font-size:13px;font-weight:800;letter-spacing:.08em}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:43px;line-height:1.24;letter-spacing:-.04em;margin-bottom:16px;color:var(--charcoal)}
    h2{font-size:30px;line-height:1.3;letter-spacing:-.025em;margin-bottom:14px;color:var(--charcoal)}
    h3{font-size:19px;line-height:1.38;margin-bottom:8px}
    .hero-copy>p:not(.eyebrow){max-width:650px;color:var(--muted);margin-bottom:22px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
    .button.secondary-action{margin:0;background:transparent;color:var(--plum);border:1px solid var(--plum);border-radius:10px;padding:10px 16px;min-height:44px;font-weight:700;transition:var(--ease)}
    .button.secondary-action:hover{background:var(--mist);color:var(--plum-dark)}
    .micro-stats{display:flex;gap:20px;margin-top:27px;flex-wrap:wrap}
    .micro-stat{padding-left:11px;border-left:3px solid var(--apricot);font-size:12px;color:var(--muted)}
    .micro-stat strong{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
    .index-cover{height:100%;min-height:300px;background:var(--charcoal);padding:26px;position:relative;overflow:hidden}
    .index-cover:before{content:"";position:absolute;width:290px;height:290px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-110px;top:-105px}
    .cover-label{color:#d8d0cb;font-size:11px;letter-spacing:.15em;position:relative}
    .cover-number{color:#f0e9e5;font-size:83px;font-weight:800;letter-spacing:-.08em;line-height:1;margin:42px 0 25px;position:relative}
    .cover-card{position:relative;padding:13px;background:#393435;border:1px solid #585151;border-radius:11px;color:#e9e2df}
    .cover-row{display:flex;align-items:center;gap:9px;font-size:12px;margin:7px 0}
    .status-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none}
    .status-dot.orange{background:var(--apricot)}
    .progress{height:5px;background:#5c5655;border-radius:999px;margin-top:14px;overflow:hidden}
    .progress span{display:block;background:var(--apricot);height:100%;width:68%;border-radius:inherit}
    .compliance-strip{
      margin-top:16px;padding:13px 18px;border:1px solid #bfcebf;border-radius:12px;background:var(--sage-soft);
      color:#435648;font-size:13px;display:flex;gap:10px;align-items:flex-start;
    }
    .compliance-icon{width:22px;height:22px;border-radius:50%;background:var(--sage);color:white;display:grid;place-items:center;font-size:12px;font-weight:bold;flex:none}
    .section-heading{max-width:700px;margin-bottom:30px}
    .section-heading p{color:var(--muted);margin-bottom:0}
    .dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}
    .card{
      background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 5px 15px rgba(37,35,34,.03);
      transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
    }
    .card:hover{transform:translateY(-2px);border-color:#bcaead;box-shadow:var(--shadow-hover)}
    .index-meter{padding:30px;min-height:340px;position:relative;overflow:hidden}
    .card-kicker{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.08em;margin-bottom:18px}
    .meter-layout{display:flex;gap:32px;align-items:center}
    .ring{width:170px;height:170px;flex:none;border-radius:50%;background:conic-gradient(var(--plum) 0 73%,#ddd5d1 73% 100%);display:grid;place-items:center;position:relative}
    .ring:after{content:"";width:132px;height:132px;background:var(--cream);border-radius:50%;position:absolute}
    .ring-text{z-index:1;text-align:center;font-size:13px;color:var(--muted)}
    .ring-text strong{display:block;font-size:34px;line-height:1;color:var(--plum);margin-bottom:7px}
    .meter-lines{flex:1;min-width:0}
    .meter-line{margin:14px 0}
    .meter-line label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
    .meter-line i{display:block;height:7px;border-radius:99px;background:#e4dedd;overflow:hidden}
    .meter-line i b{height:100%;display:block;border-radius:inherit;background:var(--plum)}
    .meter-line:nth-child(2) i b{background:var(--sage)}
    .meter-line:nth-child(3) i b{background:var(--apricot)}
    .dashboard-side{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .metric-card{padding:22px;min-height:162px;position:relative}
    .metric-card .status-dot{position:absolute;right:20px;top:22px}
    .metric-num{font-size:32px;line-height:1;color:var(--plum);font-weight:800;font-variant-numeric:tabular-nums;margin:18px 0 7px}
    .metric-card p{font-size:12px;color:var(--muted);margin:0}
    .metric-arrow{position:absolute;right:20px;bottom:17px;color:var(--plum);font-size:20px;transition:var(--ease)}
    .metric-card:hover .metric-arrow{transform:translateX(4px)}
    .matrix{background:var(--mist);border-top:1px solid #ddd3d5;border-bottom:1px solid #ddd3d5}
    .matrix-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
    .matrix-stack{display:grid;gap:16px}
    .matrix-bottom{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}
    .matrix-card{padding:27px;min-height:178px;position:relative;overflow:hidden}
    .matrix-card p{font-size:14px;color:var(--muted);max-width:520px;margin-bottom:16px}
    .matrix-card.dark{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
    .matrix-card.dark h3,.matrix-card.dark p{color:#fff}
    .matrix-card.dark p{color:#d3ccca}
    .matrix-card.plum{background:#e4d8e2;border-color:#cbbbc8}
    .matrix-card.ticket:after{content:"";position:absolute;right:22px;top:0;bottom:0;border-left:1px dashed #b7aeb0}
    .chapter{font-size:12px;letter-spacing:.1em;font-weight:800;color:var(--apricot);display:block;margin-bottom:12px}
    .tags{display:flex;gap:7px;flex-wrap:wrap}
    .tag{padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:#f7f3ee;color:var(--muted);font-size:12px;line-height:1.45}
    .dark .tag{background:#393535;border-color:#5a5352;color:#e9e2df}
    .card-link{position:absolute;bottom:22px;right:24px;color:var(--plum);font-size:21px;font-weight:700}
    .dark .card-link{color:#f0d4ca}
    .matrix-card:hover .card-link{transform:translateX(4px)}
    .comparison{background:var(--charcoal);color:#f3efeb}
    .comparison h2{color:#fff}
    .comparison .section-heading p{color:#c9c0be}
    .compare-wrap{display:grid;grid-template-columns:1fr 58px 1fr;gap:16px;align-items:stretch}
    .compare-panel{padding:28px;border-radius:var(--radius);border:1px solid #4a4644;background:#302e2d}
    .compare-panel.good{background:#f0e9e6;color:var(--ink);border-color:#bfaeb9}
    .compare-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
    .compare-title h3{margin:0;font-size:18px}
    .compare-badge{font-size:11px;padding:4px 9px;border-radius:999px;background:#4b4644;color:#ded7d4}
    .good .compare-badge{background:#d7c6d3;color:var(--plum)}
    .compare-list{list-style:none;margin:0;padding:0}
    .compare-list li{padding:12px 0;border-bottom:1px solid #4d4847;color:#c9c0be;font-size:14px}
    .good .compare-list li{border-color:#d5caca;color:#504b48}
    .compare-list li:last-child{border-bottom:0}
    .compare-list b{display:block;font-size:13px;color:#eee7e4;margin-bottom:2px}
    .good .compare-list b{color:var(--plum)}
    .compare-arrow{display:grid;place-items:center;color:var(--apricot);font-size:34px}
    .faq-section{padding-bottom:84px}
    .faq-accordion{margin:0;background:transparent}
    .faq-accordion .accordion-item{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--cream)}
    .faq-accordion .accordion-title{padding:19px 56px 19px 66px;color:var(--ink);font-weight:700;border:0;line-height:1.5;position:relative}
    .faq-accordion .accordion-title:before{content:"+";right:21px;top:50%;margin-top:-15px;color:var(--plum);font-size:27px;font-weight:400}
    .faq-accordion .is-active>.accordion-title:before{content:"−"}
    .faq-accordion .accordion-title:after{content:attr(data-num);position:absolute;left:21px;color:var(--apricot);font-size:12px;letter-spacing:.08em}
    .faq-accordion .accordion-content{border:0;background:var(--mist);padding:0 26px 21px 66px;color:#595350;font-size:15px;line-height:1.8}
    .faq-more{margin-top:18px;color:var(--plum);font-weight:700;font-size:14px;display:inline-flex;gap:8px;align-items:center}
    .faq-more:hover{text-decoration:underline;color:var(--plum-dark)}
    .feedback{padding-top:0}
    .feedback-panel{background:var(--charcoal);border-radius:var(--radius-lg);padding:42px;border:1px solid #3e3a39;box-shadow:var(--shadow)}
    .feedback-panel h2{color:#fff}
    .feedback-panel p{color:#cec5c2}
    .rule-note{padding:13px 15px;border-left:3px solid var(--sage);background:#313c34;color:#d6e0d6;font-size:13px;border-radius:0 8px 8px 0}
    label{color:#e9e1de;font-size:13px;font-weight:700;margin-bottom:7px}
    input,select,textarea{
      margin:0 0 16px!important;background:#f8f4ee!important;border:1px solid #706764!important;border-radius:9px!important;
      box-shadow:none!important;color:var(--ink)!important;min-height:45px!important;padding:10px 12px!important;
    }
    textarea{min-height:108px!important;resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:var(--apricot)!important}
    .check-row{display:flex;gap:9px;align-items:flex-start;color:#d5cbc8;font-size:12px;line-height:1.55;margin:0 0 15px}
    .check-row input{min-height:auto!important;width:16px;height:16px;margin:3px 0 0!important;accent-color:var(--plum)}
    .form-message{display:none;margin-top:16px;background:var(--sage-soft);border:1px solid #b7c8b9;color:#405648;border-radius:9px;padding:12px 14px;font-size:14px}
    .site-footer{margin-top:96px;background:var(--charcoal);color:#c9c0be;padding:52px 0 18px}
    .footer-brand{color:#fff;font-size:18px;font-weight:800;margin-bottom:12px}
    .footer-copy{font-size:13px;max-width:315px;color:#b7afac}
    .footer-title{color:#eee6e3;font-size:13px;font-weight:800;letter-spacing:.06em;margin-bottom:12px}
    .footer-links{list-style:none;padding:0;margin:0}
    .footer-links li{margin:8px 0}
    .footer-links a{font-size:13px;color:#bdb4b1;text-decoration:none;transition:var(--ease)}
    .footer-links a:hover{color:var(--apricot);text-decoration:underline;text-underline-offset:4px}
    .footer-bottom{margin-top:34px;padding-top:16px;border-top:1px solid #474241;font-size:12px;color:#8f8784;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .age-layer{position:fixed;inset:0;background:rgba(37,35,34,.58);z-index:1000;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
    .age-dialog{max-width:475px;background:var(--cream);border:1px solid #c8bbb9;border-radius:18px;box-shadow:0 22px 55px rgba(0,0,0,.28);padding:31px}
    .age-symbol{width:43px;height:43px;border-radius:12px;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800;margin-bottom:17px}
    .age-dialog h2{font-size:25px;margin-bottom:10px}
    .age-dialog p{font-size:14px;color:var(--muted);margin-bottom:20px}
    .age-actions{display:flex;gap:10px;flex-wrap:wrap}
    .leave-btn{background:#e4dcd8!important;color:#514b48!important;border:1px solid #ccc0ba!important}
    .leave-btn:hover{background:#d8cdca!important}
    @media(max-width:1023px){
      .section{padding:72px 0}.dashboard-grid{grid-template-columns:1fr}.index-meter{min-height:285px}
      .dashboard-side{grid-template-columns:repeat(4,1fr)}.metric-card{min-height:145px;padding:18px}
      .matrix-grid{grid-template-columns:1fr 1fr}.matrix-bottom{grid-template-columns:1fr 1fr}
      .nav-item{padding:9px 10px;font-size:13px}.brand{min-width:180px}
    }
    @media(max-width:760px){
      .site-header{padding-top:10px}.nav-panel{padding:9px 10px}.brand{min-width:0;flex:1;font-size:13px}
      .nav-links,.nav-cta{display:none}.mobile-toggle{display:block}.mobile-menu{margin-top:9px;padding:10px;background:var(--charcoal);border-radius:14px;border:1px solid #46413f}
      .mobile-menu.show{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-menu .nav-item{background:#373332;color:#eee}.mobile-menu .nav-cta{display:block;text-align:center;grid-column:1/-1}
      .hero{padding-top:22px}.hero-copy{padding:29px 24px}.index-cover{min-height:245px}.cover-number{font-size:68px;margin:29px 0 20px}
      h1{font-size:33px}h2{font-size:26px}.section{padding:58px 0}.dashboard-side{grid-template-columns:1fr 1fr}
      .meter-layout{gap:20px}.ring{width:135px;height:135px}.ring:after{width:104px;height:104px}.ring-text strong{font-size:27px}
      .matrix-grid,.matrix-bottom{grid-template-columns:1fr}.matrix-card{min-height:164px}.compare-wrap{grid-template-columns:1fr;gap:12px}.compare-arrow{height:32px;transform:rotate(90deg)}
      .feedback-panel{padding:28px 21px}.site-footer{margin-top:58px;padding-top:40px}.footer-column{margin-bottom:26px}
    }
    @media(max-width:460px){
      .grid-container{padding-left:15px;padding-right:15px}.hero-copy{padding:25px 20px}h1{font-size:29px}
      .micro-stats{gap:12px}.micro-stat{font-size:11px}.dashboard-side{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:15px;min-height:132px}.metric-num{font-size:27px}
      .index-meter{padding:22px}.meter-layout{align-items:flex-start;flex-direction:column}.ring{width:128px;height:128px}.faq-accordion .accordion-title{padding-left:51px;padding-right:48px;font-size:14px}.faq-accordion .accordion-content{padding-left:51px;padding-right:17px}
      .age-dialog{padding:25px 21px}.age-actions .button{width:100%;margin:0}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* roulang page: category1 */
:root{
      --plum:#4b3048;--plum-dark:#352132;--charcoal:#252322;
      --paper:#f3f0ea;--mist:#e8dfe1;--sage:#839987;--sage-soft:#e3ebe2;
      --apricot:#c98261;--line:#d8d0cb;--ink:#2b2928;--muted:#716b67;
      --cream:#fffdf8;--shadow:0 10px 28px rgba(37,35,34,.08);
      --shadow-hover:0 16px 34px rgba(37,35,34,.14);--radius-lg:18px;
      --radius:14px;--ease:180ms ease;
    }
    *,*::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 SC",Arial,sans-serif;font-size:16px;line-height:1.75}
    body.modal-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(30px,4vw,46px);line-height:1.25;margin-bottom:16px;letter-spacing:-.03em}
    h2{font-size:clamp(25px,3vw,32px);line-height:1.3;margin-bottom:12px}
    h3{font-size:19px;line-height:1.4;margin-bottom:10px}
    .grid-container{max-width:1200px;padding-left:20px;padding-right:20px}
    .site-header{padding:18px 0 0;position:sticky;top:0;z-index:50;background:linear-gradient(var(--paper) 82%,transparent)}
    .nav-panel{min-height:70px;padding:10px 12px 10px 18px;background:var(--charcoal);border:1px solid #3b3937;border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
    .brand{display:flex;align-items:center;gap:10px;min-width:215px;color:#fff;font-size:15px;font-weight:800;line-height:1.35}
    .brand-mark{width:32px;height:32px;border-radius:10px;background:var(--plum);display:grid;place-items:center;position:relative;overflow:hidden}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:#f2e8e9;border-radius:4px}
    .brand-mark:before{width:5px;height:15px;left:9px;bottom:7px;box-shadow:9px -5px 0 #f2e8e9}
    .brand-mark:after{width:4px;height:9px;right:6px;bottom:7px}
    .nav-links{display:flex;align-items:center;gap:8px;flex:1}
    .nav-item{min-height:44px;padding:10px 14px;border-radius:10px;color:#ddd7d4;font-size:14px;border:1px solid transparent;display:inline-flex;align-items:center;gap:7px;transition:var(--ease)}
    .nav-item:before{content:"";width:7px;height:7px;border-radius:50%;background:#8b8581;transition:var(--ease)}
    .nav-item:hover{background:#3b3736;color:#fff;border-color:#5c5653}
    .nav-item:hover:before{background:var(--apricot)}
    .nav-item.active{background:var(--plum);color:#fff}
    .nav-item.active:before{background:#e9dfe2}
    .nav-cta,.button.primary-action{background:var(--plum);color:#fff;border:1px solid var(--plum);border-radius:10px;min-height:44px;padding:10px 16px;font-weight:700;font-size:14px;transition:var(--ease)}
    .nav-cta:hover,.button.primary-action:hover{background:var(--plum-dark);color:#fff;transform:translateY(-1px);box-shadow:0 8px 16px rgba(75,48,72,.24)}
    .mobile-toggle{display:none;color:#fff;background:#3b3736;border:1px solid #5c5653;border-radius:10px;width:44px;height:44px;font-size:20px}
    .mobile-menu{display:none}
    .hero{padding:40px 0 20px}
    .hero-panel{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
    .hero-copy{padding:38px 42px}
    .eyebrow{margin-bottom:10px;color:var(--plum);font-size:13px;font-weight:800;letter-spacing:.08em}
    .hero-copy p:not(.eyebrow){max-width:690px;color:var(--muted);margin-bottom:20px}
    .hero-visual{height:100%;min-height:220px;padding:24px;background:var(--charcoal);color:#f2e9e6;position:relative}
    .index-envelope{height:100%;min-height:170px;padding:20px;border:1px solid #62595a;border-radius:12px;background:#353031;position:relative}
    .envelope-top{display:flex;justify-content:space-between;color:#c9bfc0;font-size:12px}
    .signal{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sage);margin-right:7px}
    .chapter-number{font-size:62px;line-height:1;font-weight:800;color:#e4d8e2;margin:22px 0 12px}
    .chapter-line{height:6px;border-radius:6px;background:#595052;overflow:hidden}
    .chapter-line span{display:block;width:68%;height:100%;background:var(--apricot)}
    .section{padding:78px 0}
    .section-heading{max-width:710px;margin-bottom:28px}
    .section-heading p{color:var(--muted);margin-bottom:0}
    .notice{display:flex;gap:12px;align-items:center;background:var(--sage-soft);border:1px solid #cbd9ca;border-radius:12px;padding:13px 17px;color:#425744;font-size:14px;margin-top:16px}
    .notice strong{font-weight:800}
    .filter-panel{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:30px}
    .filter-label{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:9px}
    .filter-tags{display:flex;gap:8px;flex-wrap:wrap}
    .filter-chip{min-height:40px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#f8f5f0;color:var(--muted);transition:var(--ease)}
    .filter-chip:hover,.filter-chip.active{background:var(--plum);border-color:var(--plum);color:#fff}
    .filter-select{height:44px;border:1px solid var(--line);border-radius:10px;background:#fffdfa;color:var(--ink);margin:0}
    .filter-actions{display:flex;gap:8px;align-items:end;justify-content:flex-end}
    .reset-button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);padding:9px 14px}
    .reset-button:hover{background:var(--mist);color:var(--plum)}
    .result-bar{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px;color:var(--muted);font-size:14px}
    .result-bar strong{color:var(--ink)}
    .index-card{height:100%;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 5px 15px rgba(37,35,34,.04);transition:var(--ease);display:flex;flex-direction:column}
    .index-card:hover{transform:translateY(-2px);border-color:#bcaead;box-shadow:var(--shadow-hover)}
    .thumb{height:145px;background:#3d3538;position:relative;padding:15px;color:#f4e9e6;overflow:hidden}
    .thumb:after{content:"";position:absolute;width:180px;height:180px;right:-44px;top:-78px;border-radius:50%;border:24px solid rgba(201,130,97,.35)}
    .thumb.plum-bg{background:#514052}.thumb.sage-bg{background:#59685b}.thumb.mist-bg{background:#655458}
    .thumb-code{font-size:12px;letter-spacing:.08em;color:#eadcdf}
    .thumb-bars{position:absolute;left:15px;right:25px;bottom:19px;display:flex;gap:5px;align-items:end}
    .thumb-bars i{display:block;width:7px;border-radius:5px;background:#d7c7d3}
    .thumb-bars i:nth-child(1){height:14px}.thumb-bars i:nth-child(2){height:26px}.thumb-bars i:nth-child(3){height:19px}.thumb-bars i:nth-child(4){height:34px}.thumb-bars i:nth-child(5){height:22px}.thumb-bars i:nth-child(6){height:29px}
    .index-body{padding:19px;display:flex;flex-direction:column;flex:1}
    .index-body h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .index-body p{font-size:13px;color:var(--muted);margin:9px 0 16px}
    .meta-line{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
    .card-arrow{color:var(--plum);font-size:20px;font-weight:800}
    .faq-wrap{max-width:900px}
    .accordion{background:transparent;margin:0}
    .accordion-item{border:1px solid var(--line)!important;border-bottom:0!important;background:var(--cream);margin-bottom:8px;border-radius:12px!important;overflow:hidden}
    .accordion-item:last-child{border-bottom:1px solid var(--line)!important}
    .accordion-title{padding:17px 52px 17px 22px;color:var(--ink);font-weight:700;font-size:15px}
    .accordion-title:hover,.accordion-title:focus{background:var(--mist);color:var(--plum)}
    .accordion-content{background:#f0e7e8;border-top:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.8;padding:17px 22px}
    .feedback-panel{background:var(--charcoal);color:#fff;border-radius:var(--radius-lg);padding:36px 40px;box-shadow:var(--shadow)}
    .feedback-panel p{color:#d1c9c7}
    .feedback-panel label{color:#eee7e5;font-size:13px;font-weight:700}
    .feedback-panel input,.feedback-panel select,.feedback-panel textarea{background:#fffdfa;border:1px solid #cfc5c2;border-radius:9px;color:var(--ink);box-shadow:none}
    .feedback-panel textarea{min-height:105px;resize:vertical}
    .check-row{display:flex;gap:9px;align-items:flex-start;color:#d1c9c7!important;font-weight:400!important}
    .check-row input{margin-top:6px}
    .privacy-note{font-size:12px;color:#bdb3b0!important;margin-bottom:0}
    .site-footer{background:var(--charcoal);color:#eee7e5;padding:50px 0 22px;margin-top:0}
    .footer-brand{font-size:20px;font-weight:800;margin-bottom:12px}
    .footer-copy{color:#bdb3b0;font-size:13px;max-width:390px}
    .footer-title{font-size:13px;font-weight:800;margin-bottom:13px}
    .footer-links{list-style:none;margin:0;padding:0}
    .footer-links li{margin-bottom:8px;color:#bdb3b0;font-size:13px}
    .footer-links a:hover{color:var(--apricot);text-decoration:underline;text-underline-offset:4px}
    .footer-bottom{border-top:1px solid #45403e;margin-top:32px;padding-top:17px;display:flex;justify-content:space-between;color:#958c89;font-size:12px}
    .pagination{margin-top:30px;display:flex;justify-content:center;gap:6px}
    .pagination li a,.pagination li span{border-radius:8px;min-width:42px;min-height:42px;text-align:center;padding:9px 12px;background:var(--cream);border:1px solid var(--line);color:var(--muted)}
    .pagination li.current span{background:var(--plum);border-color:var(--plum);color:#fff}
    .age-layer{position:fixed;inset:0;background:rgba(37,35,34,.68);z-index:100;display:grid;place-items:center;padding:20px}
    .age-dialog{max-width:500px;width:100%;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 22px 60px rgba(0,0,0,.22)}
    .age-dialog h2{color:var(--plum);margin-bottom:12px}
    .age-dialog p{color:var(--muted);font-size:14px}
    .age-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .leave-button{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted)}
    .leave-button:hover{background:var(--mist);color:var(--plum)}
    :focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
    @media(max-width:1023px){
      .brand{min-width:190px}.hero-visual{min-height:200px}.section{padding:64px 0}
    }
    @media(max-width:639px){
      .grid-container{padding-left:15px;padding-right:15px}
      .site-header{padding-top:10px}.nav-panel{padding-left:12px}.brand{min-width:0;flex:1;font-size:13px}
      .nav-links,.nav-panel>.nav-cta{display:none}.mobile-toggle{display:block}
      .mobile-menu{background:var(--charcoal);border:1px solid #3b3937;border-radius:14px;padding:10px;margin-top:8px;box-shadow:var(--shadow)}
      .mobile-menu.open{display:block}.mobile-menu .nav-item,.mobile-menu .nav-cta{display:flex;width:100%;margin-bottom:7px}.mobile-menu .nav-cta{justify-content:center;margin-bottom:0}
      .hero{padding-top:25px}.hero-copy{padding:27px 22px}.hero-visual{min-height:190px;padding:18px}
      .section{padding:52px 0}.section-heading{margin-bottom:20px}
      .filter-panel{padding:17px}.filter-tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
      .filter-chip{white-space:nowrap}.filter-actions{margin-top:13px;display:grid;grid-template-columns:1fr 1fr}
      .result-bar{align-items:flex-start;gap:12px;flex-direction:column}.thumb{height:135px}
      .feedback-panel{padding:26px 20px}.footer-bottom{flex-direction:column;gap:6px}
      .age-dialog{padding:25px 21px}.age-actions>*{width:100%;text-align:center}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }