.scen-v12{
    --forest:#142319;
    --canvas:#edf3f6;
    --paper:#fbf8f1;
    --ink:#18232d;
    --coral:#df5130;
    --green:#2f7d57;
    --blue:#48688c;
    --t-tools:#df5130;
    --t-pros:#2f7d57;
    --t-create:#4b5bc4;
    --t-build:#a9791d;
    --dim:rgba(24,35,45,.62);
    --hair:rgba(24,35,45,.14);
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --sk:#e9e2d1;
    --card:#fff;
    --paper-ink:#18232d;
    --paper-dim:rgba(24,35,45,.62);
    
    --fs0:12px;   
    --fs1:14px;   
    --fs2:16.5px; 
    --fs3:20px;   
    --fs4:36px;   
  }
.scen-v12 .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.scen-v12 section.block{padding:58px 0 8px}
.scen-v12 .sec-head{margin-bottom:26px}
.scen-v12 .eyebrow{font-family:var(--mono);font-size:var(--fs0);letter-spacing:.2em;color:var(--dim);
    display:block;margin-bottom:7px}
.scen-v12 .sec-head h2{font-size:var(--fs3);font-weight:800}
.scen-v12 .sec-note{font-size:var(--fs1);color:var(--dim);margin-top:5px;max-width:44em}
.scen-v12 .tix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.scen-v12 .tix{position:relative;display:grid;grid-template-columns:50px 1fr;
    background:var(--paper);
    border:1px solid #ded5c0;border-radius:8px;
    overflow:hidden;min-width:0;
    transition:transform .15s,box-shadow .15s,border-color .15s}
.scen-v12 .tix:hover{transform:translateY(-3px);border-color:#c8bc9d;box-shadow:0 14px 22px -18px rgba(24,35,45,.4)}
.scen-v12 .tix:hover .tix-title{color:var(--coral)}
.scen-v12 .tix:hover .tix-go{color:var(--coral);border-color:var(--coral)}
.scen-v12 .tix::before,.scen-v12 .tix::after{
    content:"";position:absolute;left:44px;width:12px;height:12px;border-radius:50%;
    background:var(--canvas);border:1px solid #ded5c0}
.scen-v12 .tix::before{top:-7px}
.scen-v12 .tix::after{bottom:-7px}
.scen-v12 .tix-stub{
    border-right:1px dashed #cfc6ab;
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:12px 0}
.scen-v12 .tix-stub b{font-family:var(--mono);font-size:11px;color:var(--coral)}
.scen-v12 .tix-stub i{font-style:normal;font-family:var(--mono);font-size:10px;color:#7a7263;
    writing-mode:vertical-rl;letter-spacing:.12em}
.scen-v12 .tix-body{padding:12px 14px 11px;display:flex;flex-direction:column;gap:4px;min-width:0}
.scen-v12 .tix-title{font-size:14.5px;font-weight:700;line-height:1.45;color:var(--paper-ink);transition:color .15s}
.scen-v12 .tix-out{font-size:12.5px;color:#7a7263;line-height:1.55}
.scen-v12 .tix-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;
    justify-content:space-between;gap:8px}
.scen-v12 .tix-foot em{font-style:normal;font-family:var(--mono);font-size:var(--fs0);
    font-weight:700;color:var(--green)}
.scen-v12 .tix-go{font-family:var(--mono);font-size:var(--fs0);color:rgba(24,35,45,.55);
    border-bottom:1px solid rgba(24,35,45,.3);padding-bottom:1px;white-space:nowrap;
    transition:color .15s,border-color .15s}
.scen-v12 .scene-tail{margin-top:18px;font-size:var(--fs1)}
.scen-v12 .scene-tail a{color:var(--coral);font-weight:600}
@media (max-width:1020px){
.scen-v12 .tix-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
.scen-v12 .wrap{padding:0 18px}
.scen-v12 .tix-grid{grid-template-columns:1fr}
}
html.dark .scen-v12 .tix{border-color:#4a4437}
html.dark .scen-v12 .tix::before,html.dark .scen-v12 .tix::after{background:var(--canvas);border-color:#4a4437}

/* ============ 场景库首页专属：页头 + 使用方法卡 + 筛选条 ============ */
.scen-v12{background:var(--canvas);padding-bottom:26px}
.scen-v12 .scen-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;padding-top:44px;margin-bottom:8px}
.scen-v12 .scen-head h1{font-size:clamp(24px,3vw,30px);font-weight:800;line-height:1.35;margin-bottom:10px}
.scen-v12 .scen-head .lead{font-size:var(--fs1);color:var(--dim);max-width:40em}
.scen-v12 .howto{background:var(--paper);border:1px solid #ded5c0;border-radius:10px;padding:16px 18px;
  background-image:linear-gradient(rgba(20,35,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,35,25,.05) 1px,transparent 1px);background-size:22px 22px}
.scen-v12 .howto small{display:block;font-family:var(--mono);font-size:var(--fs0);letter-spacing:.14em;color:var(--paper-dim);margin-bottom:6px}
.scen-v12 .howto strong{display:block;font-size:15px;color:var(--paper-ink);margin-bottom:8px}
.scen-v12 .howto ol{margin:0 0 0 18px;font-size:13.5px;color:var(--paper-dim);line-height:1.9}
.scen-v12 .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 20px}
.scen-v12 .filterbar span{font-family:var(--mono);font-size:var(--fs0);letter-spacing:.1em;color:var(--dim);margin-right:4px}
.scen-v12 .fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;cursor:pointer;
  font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--hair);transition:all .14s}
.scen-v12 .fchip:hover{border-color:var(--coral);color:var(--coral)}
.scen-v12 .fchip.on{background:var(--coral);border-color:var(--coral);color:#fff;font-weight:600}
.scen-v12 .fchip em{font-style:normal;font-family:var(--mono);font-size:var(--fs0);opacity:.65}
.scen-v12 .tix.is-hidden{display:none}
.scen-v12 .scen-count{font-family:var(--mono);font-size:var(--fs0);color:var(--dim);margin:0 0 12px}
@media (max-width:1020px){
.scen-v12 .scen-head{grid-template-columns:1fr;gap:20px}
}
html.dark .scen-v12 .fchip{color:var(--ink)}
html.dark .scen-v12 .fchip.on{color:#fff}
html.dark .scen-v12 .howto{border-color:#4a4437}

html.dark .scen-v12{
  --canvas:#16130f;
  --ink:#ece7dc;
  --dim:rgba(236,231,220,.58);
  --hair:rgba(236,231,220,.16);
  --card:#241f18;
}