/* roulang page: index */
:root{
      --bg:#f7f3ef;
      --bg-soft:#fffaf7;
      --panel:#ffffff;
      --panel-alt:#fff5f1;
      --text:#1f1916;
      --muted:#6f645f;
      --line:#eadfd8;
      --line-strong:#dfc9c1;
      --primary:#e24d3f;
      --primary-dark:#c83f32;
      --primary-soft:#ffe4de;
      --accent:#f6b98f;
      --mint:#3b9d8f;
      --amber:#d39a2a;
      --shadow:0 16px 42px rgba(48, 22, 14, .08);
      --shadow-soft:0 8px 20px rgba(48, 22, 14, .05);
      --radius:12px;
      --radius-sm:8px;
      --radius-xs:6px;
      --container:1220px;
    }
    *{box-sizing:border-box}
    html{
      scroll-behavior:smooth;
      scroll-padding-top:120px;
    }
    body{
      margin:0;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height:1.72;
      background:
        radial-gradient(circle at top left, rgba(226,77,63,.08), transparent 24%),
        radial-gradient(circle at 92% 12%, rgba(246,185,143,.16), transparent 24%),
        linear-gradient(180deg, #fff 0%, var(--bg) 28%, #fdfbf9 100%);
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.3), transparent 12%),
        radial-gradient(circle at 18% 22%, rgba(226,77,63,.05), transparent 16%),
        radial-gradient(circle at 82% 68%, rgba(59,157,143,.05), transparent 18%);
      z-index:-1;
    }
    img{max-width:100%;display:block}
    a{
      color:inherit;
      text-decoration:none;
      transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    a:hover{color:var(--primary)}
    button,input,textarea,select{
      font:inherit;
    }
    button{
      cursor:pointer;
    }
    ::selection{
      background:rgba(226,77,63,.16);
      color:var(--text);
    }
    .grid-container{
      max-width:var(--container);
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(255,255,255,.94);
      border-bottom:1px solid rgba(223,201,193,.72);
      backdrop-filter:saturate(130%);
    }
    .site-header.is-scrolled{
      box-shadow:0 6px 22px rgba(39, 19, 10, .06);
    }
    .header-inner{
      padding:14px 0 12px;
    }
    .brand-row{
      display:grid;
      grid-template-columns:minmax(180px,1.1fr) minmax(220px,.95fr) auto;
      gap:14px;
      align-items:center;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      color:var(--text);
      font-weight:800;
      letter-spacing:.1px;
    }
    .brand:hover{color:var(--text)}
    .brand-mark{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      border-radius:10px;
      background:linear-gradient(135deg, var(--primary), #ff7d6c);
      color:#fff;
      font-size:18px;
      box-shadow:0 10px 18px rgba(226,77,63,.18);
      flex:0 0 auto;
    }
    .brand-text{
      display:block;
      font-size:18px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .search-form{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      background:var(--bg-soft);
      border:1px solid var(--line);
      border-radius:999px;
      padding:6px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    }
    .search-form:focus-within{
      border-color:rgba(226,77,63,.45);
      box-shadow:0 0 0 4px rgba(226,77,63,.08);
    }
    .search-input{
      appearance:none;
      border:0;
      background:transparent;
      min-width:0;
      flex:1;
      height:38px;
      padding:0 10px 0 14px;
      color:var(--text);
      outline:none;
      box-shadow:none;
    }
    .search-input::placeholder{
      color:#8a7d77;
    }
    .search-btn{
      height:38px;
      border:0;
      border-radius:999px;
      padding:0 16px;
      background:var(--primary);
      color:#fff;
      font-weight:700;
      letter-spacing:.02em;
      transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
      box-shadow:0 10px 18px rgba(226,77,63,.14);
      white-space:nowrap;
    }
    .search-btn:hover,
    .search-btn:focus{
      background:var(--primary-dark);
      color:#fff;
      transform:translateY(-1px);
    }
    .header-cta{
      justify-self:end;
      white-space:nowrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:10px;
      border:1px solid transparent;
      font-weight:700;
      line-height:1;
      letter-spacing:.01em;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
      white-space:nowrap;
      outline:none;
    }
    .btn:hover,
    .btn:focus{
      transform:translateY(-1px);
    }
    .btn-primary{
      background:var(--primary);
      color:#fff;
      box-shadow:0 14px 24px rgba(226,77,63,.18);
    }
    .btn-primary:hover,
    .btn-primary:focus{
      background:var(--primary-dark);
      color:#fff;
      box-shadow:0 16px 28px rgba(226,77,63,.22);
    }
    .btn-secondary{
      background:#fff;
      color:var(--primary-dark);
      border-color:rgba(226,77,63,.24);
      box-shadow:var(--shadow-soft);
    }
    .btn-secondary:hover,
    .btn-secondary:focus{
      background:var(--panel-alt);
      border-color:rgba(226,77,63,.34);
      color:var(--primary-dark);
    }
    .btn-ghost{
      background:transparent;
      color:var(--text);
      border-color:var(--line);
    }
    .btn-ghost:hover,
    .btn-ghost:focus{
      background:#fff;
      border-color:rgba(226,77,63,.28);
      color:var(--primary-dark);
      box-shadow:var(--shadow-soft);
    }
    .btn-sm{
      min-height:40px;
      padding:0 14px;
      border-radius:9px;
      font-size:14px;
    }
    .tab-row{
      margin-top:12px;
      display:flex;
      align-items:center;
      gap:10px;
      overflow-x:auto;
      padding-bottom:2px;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .tab-row::-webkit-scrollbar{display:none}
    .tab{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
      flex:0 0 auto;
    }
    .tab:hover,
    .tab:focus{
      color:var(--primary-dark);
      border-color:rgba(226,77,63,.32);
      box-shadow:var(--shadow-soft);
      transform:translateY(-1px);
    }
    .tab.active,
    .tab[aria-current="page"]{
      background:var(--primary-soft);
      color:var(--primary-dark);
      border-color:rgba(226,77,63,.18);
    }
    main{
      display:block;
    }
    .section{
      padding:72px 0;
      scroll-margin-top:110px;
    }
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,250,247,.88));
      border-top:1px solid rgba(223,201,193,.55);
      border-bottom:1px solid rgba(223,201,193,.45);
    }
    .section-head{
      margin-bottom:26px;
      max-width:820px;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:none;
      color:var(--primary-dark);
      background:rgba(226,77,63,.09);
      border:1px solid rgba(226,77,63,.12);
      border-radius:999px;
      padding:6px 12px;
      margin-bottom:12px;
    }
    .kicker-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--primary);
      box-shadow:0 0 0 4px rgba(226,77,63,.12);
      display:inline-block;
    }
    h1,h2,h3,h4,p{margin:0}
    h1{
      font-size:clamp(30px, 4vw, 52px);
      line-height:1.12;
      letter-spacing:-.01em;
      margin-bottom:16px;
      max-width:12em;
    }
    h2{
      font-size:clamp(24px, 3vw, 34px);
      line-height:1.18;
      margin-bottom:10px;
      letter-spacing:-.01em;
    }
    h3{
      font-size:18px;
      line-height:1.28;
      margin-bottom:10px;
    }
    .section-desc{
      font-size:16px;
      color:var(--muted);
      max-width:820px;
    }
    .hero{
      padding:32px 0 22px;
    }
    .hero-shell{
      position:relative;
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,248,244,.98)),
        linear-gradient(180deg, rgba(226,77,63,.03), transparent 42%);
      border:1px solid rgba(223,201,193,.78);
      border-radius:18px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 82% 14%, rgba(246,185,143,.24), transparent 18%),
        radial-gradient(circle at 14% 82%, rgba(226,77,63,.06), transparent 24%);
      pointer-events:none;
    }
    .hero-copy,
    .hero-visual{
      position:relative;
      z-index:1;
      padding:34px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:7px 12px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      margin-bottom:16px;
      box-shadow:var(--shadow-soft);
    }
    .eyebrow .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--mint);
      box-shadow:0 0 0 4px rgba(59,157,143,.12);
      display:inline-block;
    }
    .lead{
      font-size:16px;
      color:var(--muted);
      max-width:40rem;
      margin-bottom:20px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:18px;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .hero-meta span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 12px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
      box-shadow:var(--shadow-soft);
    }
    .hero-meta span::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--primary);
      display:inline-block;
    }
    .hero-visual{
      display:flex;
      align-items:stretch;
      min-height:100%;
    }
    .visual-shell{
      position:relative;
      width:100%;
      border-radius:16px;
      background:
        linear-gradient(180deg, #fff 0%, #fff8f5 100%);
      border:1px solid rgba(223,201,193,.82);
      padding:18px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
      overflow:hidden;
    }
    .visual-shell::before{
      content:"";
      position:absolute;
      inset:auto -20% -30% auto;
      width:240px;
      height:240px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(226,77,63,.12), rgba(226,77,63,0) 70%);
      pointer-events:none;
    }
    .visual-shell::after{
      content:"";
      position:absolute;
      inset:12px 12px auto auto;
      width:110px;
      height:110px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(59,157,143,.11), rgba(59,157,143,0) 72%);
      pointer-events:none;
    }
    .visual-top,
    .visual-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .visual-top{
      margin-bottom:14px;
      font-weight:800;
      color:var(--text);
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(59,157,143,.2);
      background:rgba(59,157,143,.08);
      color:#256b60;
      font-size:13px;
      font-weight:700;
    }
    .status-pill::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--mint);
      box-shadow:0 0 0 4px rgba(59,157,143,.12);
      display:inline-block;
    }
    .visual-panel{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:16px;
      min-height:320px;
      border-radius:14px;
      background:
        linear-gradient(180deg, rgba(248,247,245,.9), rgba(255,255,255,.72)),
        linear-gradient(135deg, rgba(226,77,63,.05), transparent 45%);
      border:1px solid rgba(223,201,193,.68);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      position:relative;
      z-index:1;
    }
    .entry-card{
      padding:14px 14px 13px;
      border-radius:12px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 18px rgba(37, 18, 13, .04);
    }
    .entry-card strong{
      display:block;
      font-size:16px;
      margin-bottom:4px;
    }
    .entry-card span{
      color:var(--muted);
      font-size:13px;
    }
    .entry-card.highlight{
      border-color:rgba(226,77,63,.22);
      background:linear-gradient(180deg, #fff, #fff6f3);
    }
    .entry-card .micro{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:10px;
      font-size:12px;
      color:var(--primary-dark);
      font-weight:700;
    }
    .entry-card .micro i{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--primary);
      display:inline-block;
    }
    .play-ring{
      position:absolute;
      inset:50% auto auto 50%;
      transform:translate(-50%,-50%);
      width:88px;
      height:88px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--primary), #ff7a68);
      color:#fff;
      display:grid;
      place-items:center;
      box-shadow:0 22px 34px rgba(226,77,63,.28);
      z-index:2;
      border:8px solid rgba(255,255,255,.76);
    }
    .play-ring span{
      margin-left:3px;
      font-size:22px;
      line-height:1;
    }
    .visual-bottom{
      margin-top:auto;
      padding-top:6px;
      border-top:1px solid rgba(223,201,193,.75);
      font-size:13px;
    }
    .visual-bottom div{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .visual-bottom span{
      color:var(--muted);
    }
    .visual-bottom strong{
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .highlight-row{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:7px 10px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .chip b{
      color:var(--text);
    }
    .chip.hot{
      background:rgba(226,77,63,.08);
      border-color:rgba(226,77,63,.14);
      color:var(--primary-dark);
    }
    .mini-note{
      margin-top:12px;
      font-size:13px;
      color:var(--muted);
    }
    .block{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(223,201,193,.72);
      border-radius:16px;
      box-shadow:var(--shadow-soft);
      padding:22px;
    }
    .block.soft{
      background:linear-gradient(180deg, #fff, #fff9f7);
    }
    .subtle-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:16px;
    }
    .subtle-title .meta{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .orbit-wrap{
      position:relative;
      padding:8px 0 0;
    }
    .orbit{
      position:relative;
      border-radius:18px;
      background:linear-gradient(180deg, #fff, #fff8f4);
      border:1px solid rgba(223,201,193,.78);
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:20px 20px 54px;
    }
    .orbit-container{
      margin:0;
      padding:0;
      list-style:none;
    }
    .orbit-slide{
      padding:0;
    }
    .orbit-previous,
    .orbit-next{
      position:absolute;
      top:18px;
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      display:grid;
      place-items:center;
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
      z-index:5;
    }
    .orbit-previous:hover,
    .orbit-next:hover,
    .orbit-previous:focus,
    .orbit-next:focus{
      background:var(--primary-soft);
      color:var(--primary-dark);
      border-color:rgba(226,77,63,.28);
      transform:translateY(-1px);
    }
    .orbit-previous{right:70px; left:auto}
    .orbit-next{right:18px; left:auto}
    .orbit-bullets{
      position:absolute;
      bottom:16px;
      left:50%;
      transform:translateX(-50%);
      margin:0;
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      width:auto;
    }
    .orbit-bullets button{
      width:10px;
      height:10px;
      border-radius:50%;
      border:0;
      background:#d8c4bb;
      transition:transform .18s ease, background-color .18s ease, width .18s ease;
      padding:0;
    }
    .orbit-bullets button.is-active{
      width:28px;
      border-radius:999px;
      background:var(--primary);
    }
    .preview-screen{
      display:grid;
      gap:14px;
      min-height:360px;
      padding:18px;
      border-radius:16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,246,243,.86)),
        linear-gradient(135deg, rgba(226,77,63,.04), transparent 45%);
      border:1px solid rgba(223,201,193,.78);
      position:relative;
      overflow:hidden;
    }
    .preview-screen::before{
      content:"";
      position:absolute;
      inset:auto -70px -60px auto;
      width:210px;
      height:210px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(246,185,143,.24), rgba(246,185,143,0) 70%);
    }
    .screen-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .screen-title{
      font-size:17px;
      font-weight:800;
    }
    .screen-sub{
      color:var(--muted);
      font-size:13px;
    }
    .screen-status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:700;
      color:#26695e;
      background:rgba(59,157,143,.08);
      border:1px solid rgba(59,157,143,.16);
      padding:7px 10px;
      border-radius:999px;
      white-space:nowrap;
    }
    .screen-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      position:relative;
      z-index:1;
      margin-top:4px;
    }
    .screen-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:14px;
      box-shadow:0 10px 20px rgba(38, 18, 10, .04);
      min-height:110px;
    }
    .screen-card strong{
      display:block;
      font-size:15px;
      margin-bottom:6px;
    }
    .screen-card p{
      color:var(--muted);
      font-size:13px;
      margin-bottom:10px;
    }
    .meter{
      height:8px;
      border-radius:999px;
      background:#f1e7e2;
      overflow:hidden;
    }
    .meter > span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary), #ff846f);
    }
    .screen-note{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      position:relative;
      z-index:1;
    }
    .screen-note span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .screen-note span i{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--primary);
      display:inline-block;
    }
    .section-grid{
      display:grid;
      gap:18px;
    }
    .focus-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }
    .focus-card{
      background:linear-gradient(180deg, #fff, #fff8f5);
      border:1px solid rgba(223,201,193,.78);
      border-radius:14px;
      padding:22px;
      box-shadow:var(--shadow-soft);
      min-height:100%;
    }
    .focus-card .tagline{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(226,77,63,.08);
      color:var(--primary-dark);
      font-size:12px;
      font-weight:800;
      margin-bottom:14px;
    }
    .focus-card .tagline::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--primary);
      display:inline-block;
    }
    .focus-card p{
      color:var(--muted);
      font-size:15px;
    }
    .focus-progress{
      margin-top:18px;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .focus-progress .line{
      flex:1;
      height:8px;
      background:#efe4de;
      border-radius:999px;
      overflow:hidden;
    }
    .focus-progress .line span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary), #ff846f);
    }
    .focus-progress .point{
      flex:0 0 auto;
      font-size:12px;
      font-weight:800;
      color:var(--primary-dark);
    }
    .topic-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      gap:18px;
      align-items:stretch;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:8px;
    }
    .tag-cloud .tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      font-size:13px;
      font-weight:700;
      box-shadow:var(--shadow-soft);
    }
    .tag-cloud .tag.hot{
      background:var(--primary-soft);
      border-color:rgba(226,77,63,.16);
      color:var(--primary-dark);
    }
    .spotlight{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg, #fff, #fff7f4),
        linear-gradient(135deg, rgba(246,185,143,.14), transparent 45%);
    }
    .spotlight::before{
      content:"";
      position:absolute;
      inset:auto -40px -40px auto;
      width:160px;
      height:160px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(226,77,63,.14), rgba(226,77,63,0) 70%);
      pointer-events:none;
    }
    .spotlight .spot-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
      position:relative;
      z-index:1;
    }
    .spotlight .spot-status{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(59,157,143,.08);
      color:#25695f;
      border:1px solid rgba(59,157,143,.14);
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
    }
    .spotlight p{
      color:var(--muted);
      position:relative;
      z-index:1;
    }
    .spot-cta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
      position:relative;
      z-index:1;
    }
    .req-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
    }
    .req-card{
      background:#fff;
      border:1px solid rgba(223,201,193,.78);
      border-radius:14px;
      padding:20px;
      box-shadow:var(--shadow-soft);
      min-height:100%;
    }
    .req-icon{
      width:42px;
      height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      margin-bottom:14px;
      background:rgba(226,77,63,.08);
      color:var(--primary-dark);
      font-weight:800;
    }
    .req-card p{
      color:var(--muted);
      font-size:14px;
    }
    .req-note{
      margin-top:16px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px 16px;
      border-radius:12px;
      background:rgba(59,157,143,.08);
      border:1px solid rgba(59,157,143,.12);
      color:#245f58;
      font-size:14px;
    }
    .req-note strong{
      flex:0 0 auto;
    }
    .news-grid{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
      gap:18px;
      align-items:stretch;
    }
    .news-list{
      list-style:none;
      margin:0;
      padding:0;
      background:#fff;
      border:1px solid rgba(223,201,193,.78);
      border-radius:14px;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .news-list li + li{
      border-top:1px solid var(--line);
    }
    .news-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      padding:18px 18px 16px;
    }
    .news-item:hover{
      background:linear-gradient(180deg, #fff, #fff8f4);
    }
    .news-title{
      display:block;
      font-size:16px;
      font-weight:800;
      margin-bottom:8px;
    }
    .news-summary{
      color:var(--muted);
      font-size:14px;
      max-width:42rem;
    }
    .news-meta{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:8px;
      flex:0 0 auto;
      min-width:88px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(226,77,63,.08);
      color:var(--primary-dark);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .badge.mint{
      background:rgba(59,157,143,.1);
      color:#22675d;
    }
    .badge.amber{
      background:rgba(211,154,42,.12);
      color:#8d651d;
    }
    .news-time{
      color:var(--muted);
      font-size:12px;
    }
    .news-side{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .side-card{
      background:linear-gradient(180deg, #fff, #fff8f4);
      border:1px solid rgba(223,201,193,.78);
      border-radius:14px;
      padding:20px;
      box-shadow:var(--shadow-soft);
    }
    .check-list{
      list-style:none;
      margin:12px 0 0;
      padding:0;
    }
    .check-list li{
      position:relative;
      padding-left:22px;
      margin-bottom:10px;
      color:var(--muted);
      font-size:14px;
    }
    .check-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.55em;
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--primary);
      box-shadow:0 0 0 4px rgba(226,77,63,.08);
    }
    .aside-box{
      padding:16px;
      border-radius:12px;
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
    }
    .aside-box + .aside-box{
      margin-top:12px;
    }
    .aside-box h4{
      font-size:15px;
      margin-bottom:8px;
    }
    .aside-box p{
      color:var(--muted);
      font-size:14px;
    }
    .aside-chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .aside-chips .chip{
      padding:6px 10px;
      font-size:12px;
      box-shadow:none;
    }
    .review-masonry{
      column-count:3;
      column-gap:18px;
    }
    .review-card{
      break-inside:avoid;
      display:inline-block;
      width:100%;
      margin:0 0 18px;
      padding:18px;
      border-radius:14px;
      background:#fff;
      border:1px solid rgba(223,201,193,.78);
      box-shadow:var(--shadow-soft);
    }
    .review-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .avatar{
      width:42px;
      height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(226,77,63,.16), rgba(246,185,143,.28));
      color:var(--primary-dark);
      font-weight:900;
      flex:0 0 auto;
    }
    .review-name{
      display:flex;
      flex-direction:column;
      gap:3px;
    }
    .review-name strong{
      font-size:15px;
    }
    .stars{
      color:#d99211;
      letter-spacing:1px;
      font-size:13px;
    }
    .review-card p{
      color:var(--muted);
      font-size:14px;
    }
    .cta-panel{
      background:
        linear-gradient(180deg, #fff, #fff7f3);
      border:1px solid rgba(223,201,193,.78);
      border-radius:18px;
      padding:28px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:auto -50px -50px auto;
      width:190px;
      height:190px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(226,77,63,.14), rgba(226,77,63,0) 70%);
      pointer-events:none;
    }
    .cta-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:18px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .cta-panel .cta-desc{
      color:var(--muted);
      margin-top:10px;
      max-width:42rem;
    }
    .cta-buttons{
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width:240px;
      align-items:stretch;
    }
    .cta-buttons .btn{
      width:100%;
    }
    .cta-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:16px;
    }
    .cta-meta .chip{
      background:#fff;
    }
    .faq-wrap{
      background:#fff;
      border:1px solid rgba(223,201,193,.78);
      border-radius:16px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .accordion{
      margin:0;
      background:transparent;
    }
    .accordion-item{
      border:0;
      border-top:1px solid var(--line);
      background:transparent;
    }
    .accordion-item:first-child{
      border-top:0;
    }
    .accordion-title{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      color:var(--text);
      font-weight:800;
      font-size:16px;
      line-height:1.35;
      background:#fff;
      border:0;
      outline:none;
      position:relative;
    }
    .accordion-title:hover,
    .accordion-title:focus{
      background:linear-gradient(180deg, #fff, #fff8f4);
      color:var(--primary-dark);
    }
    .accordion-title::after{
      content:"+";
      flex:0 0 auto;
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(226,77,63,.08);
      color:var(--primary-dark);
      font-size:18px;
      line-height:1;
      transition:transform .18s ease, background-color .18s ease;
    }
    .accordion-item.is-active > .accordion-title::after{
      content:"–";
      transform:rotate(0deg);
      background:var(--primary-soft);
    }
    .accordion-content{
      padding:0 20px 18px;
      background:#fff;
      color:var(--muted);
      font-size:15px;
      border-left:3px solid rgba(226,77,63,.18);
    }
    .accordion-content p + p{
      margin-top:10px;
    }
    .site-footer{
      margin-top:0;
      background:#241916;
      color:rgba(255,255,255,.88);
      padding:42px 0 24px;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) repeat(2, minmax(0,.9fr));
      gap:22px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .footer-logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      color:#fff;
      font-size:18px;
      font-weight:900;
    }
    .footer-logo .brand-mark{
      width:36px;
      height:36px;
      box-shadow:none;
    }
    .footer-text{
      color:rgba(255,255,255,.7);
      max-width:28rem;
      font-size:14px;
    }
    .footer-head{
      font-size:14px;
      font-weight:800;
      margin-bottom:12px;
      color:#fff;
    }
    .footer-links{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .footer-links a{
      color:rgba(255,255,255,.75);
      font-size:14px;
    }
    .footer-links a:hover,
    .footer-links a:focus{
      color:#fff;
    }
    .footer-note{
      font-size:13px;
      color:rgba(255,255,255,.62);
      line-height:1.7;
    }
    .footer-bottom{
      margin-top:24px;
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px;
      color:rgba(255,255,255,.56);
      font-size:13px;
    }
    .focus-card:focus-within,
    .req-card:focus-within,
    .news-item:focus-within,
    .review-card:focus-within,
    .side-card:focus-within,
    .cta-panel:focus-within{
      outline:2px solid rgba(226,77,63,.22);
      outline-offset:2px;
    }
    .btn:focus,
    .tab:focus,
    .search-btn:focus,
    .search-input:focus,
    .accordion-title:focus{
      box-shadow:0 0 0 4px rgba(226,77,63,.12);
    }
    @media (max-width: 1199px){
      .brand-row{
        grid-template-columns:minmax(170px,1fr) minmax(220px,1fr);
      }
      .header-cta{
        grid-column:1 / -1;
        justify-self:start;
      }
      .focus-grid,
      .req-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .topic-grid,
      .news-grid,
      .cta-layout,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .review-masonry{
        column-count:2;
      }
    }
    @media (max-width: 767px){
      .header-inner{
        padding:12px 0 10px;
      }
      .brand-row{
        grid-template-columns:1fr;
      }
      .brand-text{
        font-size:17px;
      }
      .search-form{
        width:100%;
      }
      .header-cta{
        width:100%;
      }
      .tab-row{
        margin-top:10px;
      }
      .hero{
        padding:20px 0 16px;
      }
      .hero-copy,
      .hero-visual{
        padding:20px;
      }
      .visual-panel{
        min-height:auto;
      }
      .entry-grid,
      .screen-grid,
      .req-grid,
      .focus-grid{
        grid-template-columns:1fr;
      }
      .review-masonry{
        column-count:1;
      }
      .section{
        padding:48px 0;
      }
      .orbit{
        padding:16px 16px 56px;
      }
      .orbit-previous{right:64px; top:14px}
      .orbit-next{right:14px; top:14px}
      .news-item{
        flex-direction:column;
      }
      .news-meta{
        flex-direction:row;
        align-items:center;
        width:100%;
        justify-content:flex-start;
      }
      .cta-buttons{
        min-width:0;
        width:100%;
      }
      .btn{
        min-height:44px;
      }
      .accordion-title{
        font-size:15px;
        padding:16px 16px;
      }
      .accordion-content{
        padding:0 16px 16px;
      }
      .footer-bottom{
        flex-direction:column;
      }
    }
    @media (max-width: 480px){
      h1{
        font-size:clamp(28px, 8vw, 34px);
      }
      h2{
        font-size:clamp(22px, 7vw, 26px);
      }
      .lead,
      .section-desc,
      .focus-card p,
      .req-card p,
      .news-summary,
      .cta-panel .cta-desc{
        font-size:14px;
      }
      .hero-actions{
        flex-direction:column;
      }
      .hero-actions .btn,
      .spot-cta .btn,
      .cta-buttons .btn{
        width:100%;
      }
      .hero-meta{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-panel{
        padding:20px;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#f7f3ee;
  --surface:#ffffff;
  --surface-soft:#fcfaf7;
  --line:#e7dfd4;
  --line-strong:#d7caba;
  --text:#1f2328;
  --muted:#66707a;
  --muted-2:#8a928d;
  --brand:#d84f3d;
  --brand-dark:#b53c2d;
  --brand-soft:#fff0eb;
  --accent:#3f8773;
  --accent-soft:#ecf7f2;
  --warn:#b06b19;
  --warn-soft:#fff5e8;
  --shadow:0 10px 30px rgba(28,26,23,.07);
  --radius:8px;
  --radius-sm:6px;
  --space:24px;
  --space-lg:40px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  line-height:1.7;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
:focus-visible{outline:3px solid rgba(216,79,61,.22);outline-offset:2px}
.grid-container{max-width:1240px}
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(247,243,238,.96);
  border-bottom:1px solid rgba(231,223,212,.9);
  backdrop-filter:saturate(120%) blur(4px);
}
.header-inner{padding:14px 0 12px}
.brand-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;color:var(--text);min-width:0;
}
.brand-mark,.footer-logo .brand-mark{
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 8px 16px rgba(216,79,61,.18);
  flex:0 0 auto;
}
.brand-text{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-form{
  margin-left:auto;display:flex;align-items:center;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;min-width:min(420px,100%);
}
.search-input{
  border:0;box-shadow:none;background:transparent;
  margin:0;min-width:0;height:42px;padding:0 14px;
}
.search-input::placeholder{color:#8a928d}
.search-btn{
  height:42px;border:0;background:var(--brand);color:#fff;
  padding:0 16px;font-weight:700;cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.search-btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.header-cta{
  margin-left:auto;background:var(--brand);color:#fff;border-radius:8px;
  padding:.72rem 1rem;font-weight:700;box-shadow:none;
}
.header-cta:hover,.header-cta:focus{background:var(--brand-dark);color:#fff}
.tab-row{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;padding:10px 0 0;scrollbar-width:none;
}
.tab-row::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;border-radius:999px;
  border:1px solid transparent;background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;transition:all .18s ease;
}
.tab:hover{color:var(--text);background:rgba(255,255,255,.5);border-color:var(--line)}
.tab.active{
  background:var(--brand-soft);color:var(--brand);border-color:rgba(216,79,61,.18);
}
.page-section{padding:78px 0}
.hero-section{padding:28px 0 50px}
.hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:stretch;
}
.hero-copy{
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
  border:1px solid rgba(231,223,212,.8);
  border-radius:12px;padding:32px;box-shadow:var(--shadow);
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand);background:var(--brand-soft);
  border:1px solid rgba(216,79,61,.14);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;margin-bottom:18px;
}
.hero-title{
  margin:0;color:var(--text);font-size:clamp(30px,4vw,50px);
  line-height:1.18;letter-spacing:0;font-weight:800;
}
.hero-subtitle{
  margin:16px 0 0;color:var(--muted);font-size:16px;max-width:44rem;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;
}
.btn{
  border-radius:8px;font-weight:700;padding:.88rem 1.12rem;
  border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--brand);color:#fff;box-shadow:0 12px 20px rgba(216,79,61,.16);
}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-dark);color:#fff}
.btn-secondary{
  background:#fff;color:var(--text);border-color:var(--line);
}
.btn-secondary:hover,.btn-secondary:focus{background:var(--surface-soft);border-color:#d5c6b2;color:var(--text)}
.btn-ghost{
  background:transparent;border-color:rgba(216,79,61,.18);color:var(--brand);
}
.btn-ghost:hover,.btn-ghost:focus{background:var(--brand-soft);color:var(--brand-dark)}
.hero-meta{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px
}
.hero-meta span{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:999px;padding:6px 10px;
}
.hero-visual{
  border-radius:12px;background:var(--surface);
  border:1px solid rgba(231,223,212,.92);box-shadow:var(--shadow);
  padding:22px;display:grid;grid-template-rows:auto 1fr;gap:16px;
}
.visual-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:13px;
}
.pulse-dot{
  width:10px;height:10px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 6px rgba(63,135,115,.12);
  display:inline-block;margin-right:8px;
}
.version-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;background:var(--accent-soft);
  color:#25584d;font-weight:700;border:1px solid rgba(63,135,115,.14);
}
.entry-matrix{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;
}
.matrix-card{
  border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);
  padding:16px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;
}
.matrix-card h3{
  margin:0;font-size:16px;line-height:1.35;
}
.matrix-card p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.matrix-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid transparent;
}
.tag.brand{background:var(--brand-soft);color:var(--brand);border-color:rgba(216,79,61,.14)}
.tag.good{background:var(--accent-soft);color:#236d5c;border-color:rgba(63,135,115,.14)}
.tag.warn{background:var(--warn-soft);color:#a05d11;border-color:rgba(176,107,25,.14)}
.tag.neutral{background:#f1f3f4;color:#5f6b75;border-color:#e3e7ea}
.status-band{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px
}
.status-item{
  background:#fff;border:1px dashed #d9d0c6;border-radius:10px;padding:14px 12px;
}
.status-num{
  display:block;font-size:22px;font-weight:800;line-height:1;color:var(--text);
}
.status-label{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.section-head{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px;margin-bottom:22px
}
.section-title{
  margin:0;font-size:clamp(24px,2.8vw,34px);line-height:1.2;font-weight:800;
}
.section-desc{margin:0;color:var(--muted);max-width:46rem}
.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px
}
.filter-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font-size:13px;font-weight:700;transition:all .18s ease;
}
.filter-pill.active,.filter-pill:hover{
  background:var(--brand-soft);border-color:rgba(216,79,61,.18);color:var(--brand)
}
.content-grid{
  display:grid;grid-template-columns:1.55fr .85fr;gap:24px;align-items:start}
.content-list,
.sidebar-stack{display:grid;gap:16px}
.resource-card{
  background:var(--surface);border:1px solid rgba(231,223,212,.95);
  border-radius:12px;padding:20px;box-shadow:0 6px 18px rgba(28,26,23,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.resource-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(28,26,23,.08);
  border-color:#ddcfbe;
}
.resource-top{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;
}
.resource-title{
  margin:0;font-size:18px;line-height:1.35;font-weight:800;color:var(--text);
}
.resource-summary{margin:10px 0 0;color:var(--muted);font-size:15px}
.resource-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px
}
.resource-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px
}
.resource-actions .btn{padding:.7rem .95rem;font-size:14px}
.meta-line{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px
}
.meta-line span{display:inline-flex;align-items:center;gap:6px}
.side-panel{
  background:linear-gradient(180deg,#fff, #fcfaf7);
  border:1px solid rgba(231,223,212,.95);
  border-radius:12px;padding:22px;box-shadow:var(--shadow);
  position:sticky;top:128px;
}
.side-panel+.side-panel{margin-top:16px}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px
}
.panel-title{
  margin:0;font-size:18px;line-height:1.3;font-weight:800
}
.panel-note{margin:0;color:var(--muted);font-size:13px}
.notice-box{
  background:var(--brand-soft);
  border:1px solid rgba(216,79,61,.14);
  border-radius:10px;padding:14px 14px 12px;
  color:#6a3025;
}
.notice-box strong{display:block;color:var(--brand-dark);margin-bottom:6px}
.support-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.support-item{
  display:flex;gap:10px;align-items:flex-start;
  padding-bottom:12px;border-bottom:1px dashed rgba(231,223,212,.95);
}
.support-item:last-child{border-bottom:0;padding-bottom:0}
.support-ico{
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:#25584d;font-size:13px
}
.support-item h4{margin:0;font-size:14px;line-height:1.4}
.support-item p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.preview-block{
  margin-top:18px;
  background:linear-gradient(180deg,#fff, #fdfbf9);
  border:1px solid rgba(231,223,212,.95);border-radius:12px;
  box-shadow:var(--shadow);padding:20px;
}
.preview-head{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;
}
.preview-title{margin:0;font-size:18px;font-weight:800}
.preview-sub{margin:0;color:var(--muted);font-size:13px}
.orbit{
  background:transparent;
}
.orbit-container{border-radius:12px;overflow:hidden}
.orbit-slide{
  min-height:230px;background:linear-gradient(180deg,#fff,#faf6f2);
  border:1px solid var(--line);border-radius:12px;padding:18px;
}
.preview-shell{
  height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.preview-mock{
  display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:stretch;
}
.mock-left,.mock-right{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
}
.mock-label{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700;
}
.mock-left h3,.mock-right h3{
  margin:10px 0 0;font-size:16px;line-height:1.35
}
.mock-left p,.mock-right p{margin:8px 0 0;color:var(--muted);font-size:13px}
.mock-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px
}
.mock-mini{
  background:var(--surface-soft);border:1px solid var(--line);
  border-radius:10px;padding:12px;min-height:74px
}
.mock-mini strong{display:block;font-size:13px}
.mock-mini span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.mock-bars{display:grid;gap:10px}
.mock-bar{
  height:14px;border-radius:999px;background:linear-gradient(90deg,var(--brand) 0 66%, #f2e6de 66% 100%);
}
.mock-bar:nth-child(2){background:linear-gradient(90deg,var(--accent) 0 76%, #e5ece8 76% 100%)}
.mock-bar:nth-child(3){background:linear-gradient(90deg,#c0883a 0 52%, #f2e7d1 52% 100%)}
.mock-info{
  margin-top:auto;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:12px
}
.split-section{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px
}
.status-card{
  background:var(--surface);
  border:1px solid rgba(231,223,212,.95);
  border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(28,26,23,.04);
}
.status-card h3{margin:0;font-size:16px;line-height:1.3}
.status-card p{margin:8px 0 0;color:var(--muted);font-size:14px}
.status-list{
  display:grid;gap:10px;margin-top:14px
}
.status-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--line);
}
.status-row:first-child{border-top:0;padding-top:0}
.status-row strong{display:block;font-size:14px}
.status-row span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.status-value{
  flex:0 0 auto;font-weight:800;color:var(--text);font-size:14px
}
.recommend-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px
}
.recommend-card{
  background:linear-gradient(180deg,#fff, #fcfbf8);
  border:1px solid var(--line);border-radius:12px;padding:16px;
}
.recommend-card .tag{margin-bottom:12px}
.recommend-card h4{margin:0;font-size:15px;line-height:1.35}
.recommend-card p{margin:8px 0 0;color:var(--muted);font-size:13px}
.recommend-card .btn{margin-top:14px;width:100%;justify-content:center}
.cta-strip{
  background:linear-gradient(135deg,#fff, #fff7f2);
  border:1px solid rgba(216,79,61,.15);
  border-radius:14px;padding:28px;box-shadow:var(--shadow);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.cta-copy h2{margin:0;font-size:26px;line-height:1.25;font-weight:800}
.cta-copy p{margin:10px 0 0;color:var(--muted);max-width:56rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.faq-wrap{
  background:var(--surface);
  border:1px solid rgba(231,223,212,.95);
  border-radius:12px;padding:18px 18px 8px;box-shadow:var(--shadow);
}
.accordion{background:transparent}
.accordion-title{
  color:var(--text);font-weight:700;padding:1rem 1rem 1rem 3rem;border:0;
  background:transparent;border-top:1px solid var(--line);
}
.accordion-title::before{
  width:1.15rem;height:1.15rem;left:1rem;right:auto;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;
  content:"+";
  font-size:18px;line-height:1;font-weight:700;
  transform:none;margin-top:-.6rem;
}
.accordion-item:first-child .accordion-title{border-top:0}
.is-active > .accordion-title::before{content:"–";background:var(--brand);color:#fff}
.accordion-content{
  border:0;padding:0 1rem 1rem 3rem;color:var(--muted);font-size:14px
}
.footer-grid{
  display:grid;grid-template-columns:1.15fr .7fr 1fr;gap:24px;align-items:start
}
.site-footer{
  background:#f1ece6;border-top:1px solid rgba(216,79,61,.08);
  padding:32px 0 18px;margin-top:56px
}
.footer-logo{
  display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--text)
}
.footer-head{font-weight:800;margin-bottom:12px}
.footer-links{display:grid;gap:10px}
.footer-links a{
  color:var(--muted);font-size:14px;transition:color .18s ease
}
.footer-links a:hover{color:var(--brand)}
.footer-text,.footer-note{
  color:var(--muted);font-size:14px;line-height:1.8
}
.footer-bottom{
  margin-top:22px;padding-top:14px;border-top:1px solid rgba(216,79,61,.08);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muted-2);font-size:12px
}
.category-hero{
  padding:34px 0 18px;
}
.category-hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;
}
.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  color:var(--muted);font-size:13px;margin-bottom:12px
}
.crumbs a{color:var(--muted)}
.crumbs .sep{color:#c1b7ac}
.page-label{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:700;color:#52606d;
}
.category-title{
  margin:14px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.15;font-weight:900;
}
.category-desc{
  margin:14px 0 0;color:var(--muted);max-width:52rem;font-size:16px;
}
.category-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.summary-panel{
  background:linear-gradient(180deg,#fff,#fcf8f4);
  border:1px solid rgba(231,223,212,.95);border-radius:12px;padding:22px;box-shadow:var(--shadow);
}
.summary-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.summary-item{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;min-height:110px
}
.summary-item strong{display:block;font-size:14px}
.summary-item p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.summary-item .tag{margin-top:10px}
.sticky-filters{
  position:sticky;top:92px;z-index:20;
  background:rgba(247,243,238,.97);
  border-top:1px solid rgba(231,223,212,.9);
  border-bottom:1px solid rgba(231,223,212,.9);
}
.sticky-filters .grid-container{padding-top:12px;padding-bottom:12px}
.filter-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.filter-note{color:var(--muted);font-size:13px}
.inline-tools{display:flex;flex-wrap:wrap;gap:10px}
.inline-tools .btn{padding:.66rem .9rem;font-size:13px}
.update-card{
  background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:16px
}
.update-card h4{margin:0;font-size:15px}
.update-card p{margin:8px 0 0;color:var(--muted);font-size:13px}
.index-list{
  display:grid;gap:12px;margin-top:16px
}
.index-item{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--line);
}
.index-item:first-child{border-top:0;padding-top:0}
.index-item h4{margin:0;font-size:15px}
.index-item p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.index-actions{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:0 0 auto
}
.index-actions .btn{padding:.62rem .82rem;font-size:13px}
.small-note{font-size:12px;color:var(--muted-2)}
@media print{
  .site-header,.site-footer,.btn,.sticky-filters{display:none !important}
  body{background:#fff}
}
@media screen and (max-width: 63.9375em){
  .hero-grid,.category-hero-inner,.content-grid,.footer-grid,.split-section,.recommend-grid{
    grid-template-columns:1fr;
  }
  .side-panel{position:static}
  .search-form{min-width:100%;order:3}
  .header-cta{margin-left:0}
  .brand-row{align-items:stretch}
  .hero-copy,.hero-visual,.summary-panel{padding:22px}
  .page-section,.hero-section{padding-top:48px;padding-bottom:48px}
  .cta-strip{padding:22px}
  .sticky-filters{top:0}
}
@media screen and (max-width: 39.9375em){
  .brand-text{font-size:16px}
  .hero-title,.category-title{font-size:clamp(26px,8vw,34px)}
  .section-title{font-size:clamp(22px,6vw,28px)}
  .status-band,.summary-grid,.entry-matrix,.mock-grid{grid-template-columns:1fr}
  .search-form{flex-wrap:wrap}
  .search-input{width:100%}
  .search-btn{width:100%}
  .hero-actions,.category-actions,.cta-actions,.resource-actions,.inline-tools{width:100%}
  .hero-actions .btn,.category-actions .btn,.cta-actions .btn,.inline-tools .btn{flex:1 1 100%;justify-content:center}
  .resource-top,.index-item{flex-direction:column}
  .index-actions{align-items:flex-start}
  .status-card,.faq-wrap,.resource-card,.summary-panel,.hero-copy,.hero-visual,.cta-strip{border-radius:10px}
  .accordion-title,.accordion-content{padding-left:2.5rem}
}