/* ============================================================
   我的 AI 作品库 · P4 风格（女神异闻录 4）
   明黄 / 黑 / 白 · 斜条纹 · 粗描边 · 硬投影 · 轻微倾斜
   ============================================================ */

/* ============================================================
   ★★★ 可改区 ★★★ 只改这里就能换整站气质
   ============================================================ */

:root{
  /* 主色（P4 黄） */
  --p4-yellow:#FFC400;
  --p4-yellow-deep:#E8AE00;
  /* 强调色（P4 橙红） */
  --p4-red:#FF3A00;
  /* 墨黑（描边与文字） */
  --p4-ink:#121212;
  /* 纸张白 */
  --p4-paper:#FFFCF0;

  /* 描边粗细与硬投影偏移（想做柔和一点就把 6px 改 3px） */
  --edge:3px;
  --pop:6px;

  /* 圆角（P4 偏方正，改 12px 会变可爱） */
  --radius:4px;
  --radius-sm:3px;
}

/* ============================================================
   ↑↑↑ 可改区结束 ↑↑↑
   ============================================================ */

:root{
  --bg:var(--p4-paper);
  --bg-soft:#FFF6D8;
  --panel:#FFFFFF;
  --panel-2:var(--p4-yellow);
  --line:var(--p4-ink);
  --line-soft:rgba(18,18,18,.14);
  --txt:var(--p4-ink);
  --txt-2:#3A3A3A;
  --dim:#6B6B6B;
  --accent:var(--p4-red);
  --accent-2:var(--p4-yellow);
  --accent-soft:rgba(255,196,0,.28);
  --green:#1FA97B;
  --star:var(--p4-yellow);
  --shadow:var(--pop) var(--pop) 0 var(--p4-ink);
  --mono:"Cascadia Code",Consolas,"SF Mono",monospace;
  --sans:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

html[data-theme="dark"]{
  --bg:#141414;
  --bg-soft:#1D1D1D;
  --panel:#1F1F1F;
  --panel-2:#2A2A2A;
  --line:var(--p4-yellow);
  --line-soft:rgba(255,196,0,.22);
  --txt:#FFF6D8;
  --txt-2:#E6DEC4;
  --dim:#A79E86;
  --accent:var(--p4-yellow);
  --accent-2:var(--p4-red);
  --accent-soft:rgba(255,196,0,.18);
  --shadow:var(--pop) var(--pop) 0 rgba(255,196,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}

/* --------- 背景：斜条纹 + 网点（P4 的印刷感） --------- */
.p4-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,196,0,.16) 0 18px,
      rgba(255,196,0,0) 18px 36px),
    radial-gradient(circle at 1px 1px, rgba(18,18,18,.06) 1px, transparent 0);
  background-size:auto, 14px 14px;
  opacity:.9;
}
html[data-theme="dark"] .p4-bg{
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,196,0,.10) 0 18px,
      rgba(255,196,0,0) 18px 36px),
    radial-gradient(circle at 1px 1px, rgba(255,246,216,.05) 1px, transparent 0);
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:12px 24px;
  background:var(--p4-ink);
  background-image:repeating-linear-gradient(45deg,
    rgba(255,196,0,.10) 0 14px, rgba(255,196,0,0) 14px 28px);
  border-bottom:4px solid var(--p4-yellow);
}
html[data-theme="dark"] .topbar{border-bottom-color:var(--p4-yellow)}

.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}
.logo{
  color:var(--p4-ink);background:var(--p4-yellow);
  width:24px;height:24px;display:grid;place-items:center;
  font-size:14px;font-weight:900;transform:skew(-10deg);
  box-shadow:3px 3px 0 rgba(255,255,255,.85);
}
.brand-name{
  font-size:16px;font-weight:900;letter-spacing:1px;
  color:var(--p4-yellow);transform:skew(-8deg);text-transform:uppercase;
}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--p4-ink);
  border:var(--edge) solid var(--p4-ink);
  padding:6px 14px;border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transform:skew(-8deg);
  transition:transform .12s,box-shadow .12s,background .12s;
  box-shadow:3px 3px 0 var(--p4-yellow);
}
.tab > *{transform:skew(8deg)}
.tab:hover{background:var(--p4-yellow);transform:skew(-8deg) translate(-1px,-1px);box-shadow:4px 4px 0 var(--p4-ink)}
.tab.active{background:var(--p4-yellow);box-shadow:4px 4px 0 var(--p4-ink)}
.count{
  font-size:10.5px;font-weight:800;
  background:var(--p4-ink);color:var(--p4-yellow);
  padding:0 6px;border-radius:10px;min-width:17px;text-align:center;
}
.tab.active .count{background:var(--p4-ink);color:#fff}

.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap .icon{
  position:absolute;left:10px;width:15px;height:15px;fill:none;
  stroke:var(--p4-ink);stroke-width:2.4;pointer-events:none;
}
#search{
  width:240px;background:#fff;border:var(--edge) solid var(--p4-ink);
  color:var(--p4-ink);font-family:inherit;font-size:13px;font-weight:600;
  padding:8px 30px 8px 31px;border-radius:var(--radius-sm);outline:none;
  box-shadow:3px 3px 0 var(--p4-yellow);
  transition:width .16s,box-shadow .16s;
}
#search::placeholder{color:#9A9A9A;font-weight:500}
#search:focus{width:290px;box-shadow:4px 4px 0 var(--p4-red)}
html[data-theme="dark"] #search{background:#262626;color:#FFF6D8;border-color:var(--p4-yellow)}
.kbd{
  position:absolute;right:8px;font-size:10px;color:var(--dim);
  border:1.5px solid var(--line-soft);border-radius:3px;padding:0 4px;
  font-family:var(--mono);
}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;
  background:#fff;border:var(--edge) solid var(--p4-ink);
  color:var(--p4-ink);border-radius:var(--radius-sm);
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  text-decoration:none;box-shadow:3px 3px 0 var(--p4-yellow);
  transition:transform .12s,box-shadow .12s,background .12s;
}
.icon-btn:hover{background:var(--p4-yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--p4-ink)}
html[data-theme="dark"] .icon-btn{background:#262626;color:#FFF6D8;border-color:var(--p4-yellow);box-shadow:3px 3px 0 rgba(255,196,0,.4)}
.icon-btn.on{background:var(--p4-red);color:#fff;border-color:var(--p4-ink)}

/* ---------------- 筛选栏 ---------------- */
.filterbar{
  position:sticky;top:62px;z-index:30;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 24px;
  background:var(--bg);
  border-bottom:var(--edge) solid var(--p4-ink);
}
html[data-theme="dark"] .filterbar{border-bottom-color:var(--p4-yellow)}
.filterbar.hide{display:none}
.facet{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  background:#fff;border:2px solid var(--p4-ink);color:var(--p4-ink);
  font-size:12px;font-weight:700;font-family:inherit;
  padding:4px 11px;border-radius:20px;cursor:pointer;white-space:nowrap;
  transition:.12s;box-shadow:2px 2px 0 var(--line-soft);
}
.chip:hover{background:var(--p4-yellow);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--p4-ink)}
.chip.active{background:var(--p4-ink);color:var(--p4-yellow);box-shadow:3px 3px 0 var(--p4-yellow)}
.chip.star.active{background:var(--p4-yellow);color:var(--p4-ink);border-color:var(--p4-ink)}
html[data-theme="dark"] .chip{background:#262626;color:#FFF6D8;border-color:var(--p4-yellow)}
.filter-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.select{
  background:#fff;border:2px solid var(--p4-ink);color:var(--p4-ink);
  font-family:inherit;font-size:12px;font-weight:700;
  padding:5px 8px;border-radius:var(--radius-sm);cursor:pointer;outline:none;
  box-shadow:2px 2px 0 var(--line-soft);
}
html[data-theme="dark"] .select{background:#262626;color:#FFF6D8;border-color:var(--p4-yellow)}
.seg{display:flex;background:#fff;border:2px solid var(--p4-ink);border-radius:var(--radius-sm);overflow:hidden;box-shadow:2px 2px 0 var(--line-soft)}
.seg-btn{
  background:transparent;border:0;color:var(--p4-ink);font-size:13px;font-weight:700;
  padding:5px 10px;cursor:pointer;transition:.12s;
}
.seg-btn:hover{background:var(--bg-soft)}
.seg-btn.active{background:var(--p4-yellow)}
html[data-theme="dark"] .seg{background:#262626;border-color:var(--p4-yellow)}
html[data-theme="dark"] .seg-btn{color:#FFF6D8}

/* ---------------- 快速上手 ---------------- */
.quickstart{
  max-width:1150px;margin-bottom:18px;padding:16px 20px;
  background:#fff;border:var(--edge) solid var(--p4-ink);
  border-radius:var(--radius);box-shadow:var(--shadow);
  border-left:10px solid var(--p4-yellow);
}
.qs-title{
  font-size:14px;font-weight:900;letter-spacing:.5px;margin-bottom:9px;
  text-transform:uppercase;color:var(--p4-ink);transform:skew(-6deg);
  display:inline-block;background:var(--p4-yellow);padding:2px 10px;
}
.qs-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.qs-steps li{font-size:12.5px;color:var(--txt-2);line-height:1.75}
.qs-steps code{
  background:var(--bg-soft);padding:1px 6px;border-radius:3px;
  font-family:var(--mono);font-size:11.5px;color:var(--p4-ink);
  border:1px solid var(--line-soft);
}
.qs-steps b{color:var(--p4-ink);font-weight:800}
html[data-theme="dark"] .quickstart{background:#1F1F1F}
html[data-theme="dark"] .qs-steps code{background:#2A2A2A;color:#FFF6D8}

/* ---------------- 主区 ---------------- */
main{padding:20px 24px 64px;position:relative;z-index:1}
.panel{display:none;animation:fade .2s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------------- 瀑布流 / 卡片 ---------------- */
.masonry{column-count:4;column-gap:16px}
.masonry.grid-mode{column-count:unset;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.masonry.grid-mode .card{margin-bottom:0}
.masonry.grid-mode .card img{aspect-ratio:3/4;object-fit:cover}

.card{
  position:relative;break-inside:avoid;margin:0 0 16px;
  background:#fff;border:var(--edge) solid var(--p4-ink);
  border-radius:var(--radius);overflow:hidden;cursor:zoom-in;
  box-shadow:4px 4px 0 var(--p4-ink);
  transition:transform .14s,box-shadow .14s;
}
.card:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--p4-ink);
}
.card img{
  display:block;width:100%;height:auto;background:var(--bg-soft);
  opacity:0;transition:opacity .3s;
}
.card img.loaded{opacity:1}
html[data-theme="dark"] .card{background:#1F1F1F;box-shadow:4px 4px 0 rgba(255,196,0,.55)}
html[data-theme="dark"] .card:hover{box-shadow:8px 8px 0 rgba(255,196,0,.75)}

.card .badge{
  position:absolute;top:8px;left:8px;
  background:var(--p4-yellow);color:var(--p4-ink);
  font-size:11px;font-weight:800;padding:2px 8px;
  border:2px solid var(--p4-ink);border-radius:2px;
  transform:skew(-8deg);max-width:70%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .star-btn{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--p4-ink);border-radius:50%;
  color:var(--p4-ink);font-size:13px;cursor:pointer;
  opacity:0;transition:.14s;
}
.card:hover .star-btn{opacity:1}
.card .star-btn.on{opacity:1;background:var(--p4-yellow)}
.card .cap{
  padding:8px 10px 9px;display:flex;flex-direction:column;gap:3px;
  border-top:var(--edge) solid var(--p4-ink);background:#fff;
}
html[data-theme="dark"] .card .cap{background:#242424;border-top-color:var(--p4-yellow)}
.card .cap .l1{font-size:12.5px;color:var(--txt);font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cap .l2{font-size:11px;color:var(--dim);display:flex;gap:5px;align-items:center;font-weight:600}
.card .cap .dot{opacity:.45}

/* ---------------- 空状态 ---------------- */
.empty{
  text-align:center;color:var(--dim);padding:64px 20px;line-height:2;
  border:var(--edge) dashed var(--p4-ink);border-radius:var(--radius);
  background:#fff;font-weight:600;
}
.empty code{background:var(--p4-yellow);padding:2px 7px;border-radius:3px;color:var(--p4-ink);font-family:var(--mono);font-weight:700}
html[data-theme="dark"] .empty{background:#1F1F1F;border-color:var(--p4-yellow)}

/* ---------------- 面板（LoRA / 提示词 / 资源） ---------------- */
.stack{display:flex;flex-direction:column;gap:16px;max-width:1150px}
.pane{
  background:#fff;border:var(--edge) solid var(--p4-ink);
  border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);
}
html[data-theme="dark"] .pane{background:#1F1F1F}
.pane-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pane-title{
  font-size:14.5px;font-weight:900;color:var(--p4-ink);
  background:var(--p4-yellow);padding:2px 10px;
  transform:skew(-8deg);display:inline-block;letter-spacing:.3px;
  border:2px solid var(--p4-ink);
}
.pane-sub{font-size:12px;color:var(--dim);font-weight:600}
.pane-title .accent{color:var(--p4-red)}

.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:7px 18px;margin-bottom:12px}
.kv div{font-size:12.5px;color:var(--dim);font-weight:600}
.kv b{color:var(--txt);font-weight:800}

.copy-block{
  position:relative;background:var(--bg-soft);
  border:2px solid var(--p4-ink);border-radius:var(--radius-sm);
  padding:11px 13px;margin-top:9px;
  font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--txt-2);
  white-space:pre-wrap;word-break:break-word;
}
html[data-theme="dark"] .copy-block{background:#262626;border-color:var(--p4-yellow);color:#E6DEC4}
.copy-block .label{
  display:block;font-family:var(--sans);color:var(--p4-ink);
  font-size:11px;font-weight:800;margin-bottom:7px;letter-spacing:.4px;
}
html[data-theme="dark"] .copy-block .label{color:var(--p4-yellow)}
.copy-btn{
  position:absolute;top:7px;right:7px;
  background:var(--p4-yellow);border:2px solid var(--p4-ink);color:var(--p4-ink);
  font-family:var(--sans);font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:2px;cursor:pointer;transition:.12s;
}
.copy-btn:hover{background:var(--p4-red);color:#fff;border-color:var(--p4-ink)}
.copy-btn.done{background:var(--green);color:#fff}

.tag{
  display:inline-block;background:#fff;color:var(--p4-ink);
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
  margin:0 6px 6px 0;cursor:pointer;transition:.12s;
  border:2px solid var(--p4-ink);
}
.tag:hover{background:var(--p4-yellow)}
html[data-theme="dark"] .tag{background:#262626;color:#FFF6D8;border-color:var(--p4-yellow)}

/* ---------------- 下载行 ---------------- */
.dl-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;
  border-top:2px dashed var(--line-soft);
}
.dl-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:2px;text-decoration:none;
  background:var(--p4-red);color:#fff;font-size:13px;font-weight:800;
  border:2px solid var(--p4-ink);box-shadow:3px 3px 0 var(--p4-ink);
  transition:.12s;
}
.dl-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--p4-ink)}
.dl-code{font-size:12px;color:var(--dim);font-weight:600}
.dl-code b{
  color:var(--p4-ink);font-family:var(--mono);letter-spacing:1px;
  background:var(--p4-yellow);padding:2px 8px;border-radius:2px;
  border:2px solid var(--p4-ink);font-weight:800;
}
.dl-hint{font-size:11.5px;color:var(--dim)}
.dl-none{
  font-size:12px;font-weight:700;color:var(--dim);
  border:2px dashed var(--line-soft);padding:4px 10px;border-radius:2px;
}

/* ---------------- 资源页 ---------------- */
.res-intro{
  max-width:1150px;margin-bottom:16px;padding:10px 16px;
  background:var(--p4-ink);color:var(--p4-yellow);
  font-size:12.5px;font-weight:700;letter-spacing:.3px;
  border-radius:var(--radius);transform:skew(-4deg);
}
.res-intro b{color:#fff}
.res-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.res-card{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 15px;text-decoration:none;
  background:#fff;border:var(--edge) solid var(--p4-ink);
  border-radius:var(--radius);box-shadow:4px 4px 0 var(--p4-ink);
  transition:transform .14s,box-shadow .14s,background .14s;
}
.res-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--p4-red);background:var(--bg-soft)}
html[data-theme="dark"] .res-card{background:#242424;box-shadow:4px 4px 0 rgba(255,196,0,.5)}
.res-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.res-top b{font-size:14px;font-weight:900;color:var(--p4-ink)}
html[data-theme="dark"] .res-top b{color:#FFF6D8}
.res-top i{
  font-style:normal;font-size:10.5px;font-weight:800;
  background:var(--p4-yellow);color:var(--p4-ink);
  border:2px solid var(--p4-ink);padding:0 7px;border-radius:20px;
}
.res-desc{font-size:12.5px;color:var(--txt-2);line-height:1.7}
.res-url{font-size:11px;color:var(--dim);font-family:var(--mono);margin-top:2px}

/* ---------------- 灯箱 ---------------- */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  background:rgba(12,12,12,.96);padding:16px 16px 0;
}
.lightbox.show{display:flex;animation:fade .16s ease}
.lb-bar{
  position:absolute;top:0;left:0;right:0;height:54px;
  display:flex;align-items:center;gap:8px;padding:0 16px;
  background:var(--p4-ink);
  border-bottom:3px solid var(--p4-yellow);
}
.lb-counter{font-size:12px;color:var(--p4-yellow);font-family:var(--mono);font-weight:700}
.lb-bar .spacer{flex:1}
.lb-bar .icon-btn{background:#fff;border-color:var(--p4-ink);color:var(--p4-ink);box-shadow:2px 2px 0 var(--p4-yellow)}
.lb-bar .icon-btn:hover{background:var(--p4-yellow)}

.lb-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;overflow:auto;cursor:zoom-in;
}
.lb-stage img{
  max-width:min(92vw,1400px);max-height:calc(100vh - 220px);
  border:3px solid var(--p4-yellow);border-radius:2px;object-fit:contain;
  box-shadow:6px 6px 0 rgba(255,196,0,.5);
}
.lb-stage.zoom img{max-width:none;max-height:none;transform:none;cursor:zoom-out}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:66px;cursor:pointer;
  background:var(--p4-yellow);color:var(--p4-ink);
  border:3px solid var(--p4-ink);border-radius:2px;
  font-size:30px;line-height:1;font-weight:900;
  box-shadow:4px 4px 0 rgba(255,255,255,.85);
  transition:.12s;
}
.lb-nav:hover{transform:translateY(-50%) scale(1.05)}
.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}

.lb-meta{
  width:min(92vw,900px);max-height:170px;overflow:auto;
  margin:10px 0 14px;padding:12px 15px;
  background:#fff;border:3px solid var(--p4-ink);
  border-radius:var(--radius);box-shadow:5px 5px 0 var(--p4-yellow);
}
.lb-title{font-size:13.5px;color:var(--p4-ink);font-weight:900;margin-bottom:6px}
.lb-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--dim);margin-bottom:6px;font-weight:600}
.lb-facts b{color:var(--p4-ink);font-weight:800}
.lb-detail summary{
  font-size:11.5px;font-weight:800;color:var(--p4-ink);cursor:pointer;
  outline:none;padding:3px 0;user-select:none;
}
.lb-detail summary:hover{color:var(--p4-red)}
.lb-detail pre{
  margin:8px 0 0;padding:10px;border-radius:2px;
  background:var(--bg-soft);color:#3A3A3A;
  border:2px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;line-height:1.7;
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;
}

/* ---------------- 入口公告页 ---------------- */
body.gate-locked{overflow:hidden}
.gate{
  position:fixed;inset:0;z-index:300;display:flex;
  align-items:center;justify-content:center;padding:24px;
}
.gate.hide{display:none}
.gate.fade-out{opacity:0;transition:opacity .25s ease}
.gate-bg{
  position:absolute;inset:0;
  background:url("../images/hero/labor2023.png") center/cover no-repeat;
  filter:blur(10px) brightness(.62) saturate(1.1);
  transform:scale(1.08);
}
.gate-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,196,0,.35) 0 22px,
      rgba(18,18,18,.82) 22px 66px);
  mix-blend-mode:multiply;
}
.gate-card{
  position:relative;width:min(560px,100%);
  padding:26px 28px 22px;
  background:var(--p4-paper);
  border:4px solid var(--p4-ink);
  border-radius:var(--radius);
  box-shadow:10px 10px 0 var(--p4-yellow), 14px 14px 0 rgba(0,0,0,.55);
  animation:gateIn .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes gateIn{from{opacity:0;transform:translateY(18px) rotate(-1deg)}to{opacity:1;transform:none}}
.gate-badge{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:1px;
  background:var(--p4-ink);color:var(--p4-yellow);
  padding:3px 12px;border-radius:2px;margin-bottom:14px;
  transform:skew(-8deg);text-transform:uppercase;
}
.gate-title{
  margin:0 0 10px;font-size:23px;font-weight:900;letter-spacing:.5px;
  color:var(--p4-ink);line-height:1.25;
}
.gate-lead{margin:0 0 16px;font-size:13px;color:var(--txt-2);line-height:1.8;font-weight:600}
.gate-list{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.gate-list li{
  position:relative;padding-left:20px;
  font-size:12.5px;color:var(--txt-2);line-height:1.7;font-weight:600;
}
.gate-list li::before{
  content:"";position:absolute;left:2px;top:7px;
  width:8px;height:8px;background:var(--p4-yellow);
  border:2px solid var(--p4-ink);transform:rotate(45deg);
}
.gate-btn{
  width:100%;padding:13px;cursor:pointer;
  background:var(--p4-yellow);color:var(--p4-ink);
  border:4px solid var(--p4-ink);border-radius:2px;
  font-size:15px;font-weight:900;font-family:inherit;letter-spacing:1px;
  box-shadow:6px 6px 0 var(--p4-ink);
  transition:transform .12s,box-shadow .12s,background .12s;
  text-transform:uppercase;
}
.gate-btn:hover{background:var(--p4-red);color:#fff;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--p4-ink)}
.gate-btn:active{transform:none;box-shadow:3px 3px 0 var(--p4-ink)}
.gate-foot{margin:14px 0 0;font-size:11px;color:var(--dim);text-align:center;line-height:1.6;font-weight:600}

/* ---------------- 收起 / 展开 ---------------- */
.collapse-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-left:6px;
  background:var(--p4-yellow);border:2px solid var(--p4-ink);
  color:var(--p4-ink);border-radius:2px;font-size:13px;font-weight:900;
  line-height:1;cursor:pointer;
  transition:transform .2s,background .2s;
}
.collapse-btn:hover{background:var(--p4-red);color:#fff}
.collapse-btn.rotated{transform:rotate(180deg)}

body.collapsed .filterbar,
body.collapsed .banner,
body.collapsed main{display:none !important}
.collapsed-hint{
  display:none;padding:70px 20px;text-align:center;
  color:var(--dim);font-size:13px;font-weight:700;
}
.collapsed-hint b{color:var(--p4-red)}
body.collapsed .collapsed-hint{display:block}

/* 收起时只留大标签 */
body.collapsed .tools{display:none !important}
body.collapsed .topbar{justify-content:flex-start;padding:16px 26px}
body.collapsed .tab{font-size:15px;padding:8px 20px}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  background:var(--p4-ink);color:var(--p4-yellow);
  border:3px solid var(--p4-yellow);
  font-size:12.5px;font-weight:800;
  padding:9px 20px;border-radius:2px;
  box-shadow:5px 5px 0 rgba(255,196,0,.45);
  opacity:0;pointer-events:none;transition:.22s;z-index:200;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------- 响应式 ---------------- */
@media(max-width:1280px){ .masonry{column-count:3} }
@media(max-width:960px){
  .masonry{column-count:2}
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .tabs{order:3;width:100%;overflow-x:auto;padding-bottom:2px}
  .tools{order:2;margin-left:auto}
  #search{width:180px}
  #search:focus{width:210px}
  .filterbar{top:0;position:relative;padding:10px 14px}
  main{padding:14px}
  .res-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}
@media(max-width:640px){
  .brand-name{display:none}
  #search{width:140px;font-size:12px}
  #search:focus{width:170px}
  .kbd{display:none}
  .filter-right{width:100%;margin-left:0}
  .filter-right .select,.filter-right .seg{margin-left:auto}
  .lightbox{padding:8px 8px 0}
  .lb-stage img{max-height:calc(100vh - 250px)}
  .lb-nav{display:none}
  .lb-meta{max-height:190px}
  .masonry{column-gap:10px}
  .card{margin-bottom:10px}
  .gate{padding:12px}
  .gate-card{padding:20px 18px 16px;box-shadow:7px 7px 0 var(--p4-yellow)}
  .gate-title{font-size:19px}
  .gate-list li{font-size:12px}
  .res-grid{grid-template-columns:1fr}
  .res-intro{transform:none}
}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--p4-ink);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--p4-red)}
::-webkit-scrollbar-track{background:var(--bg-soft)}

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

/* ============================================================
   P4 增强层 v2
   ① 多层矩形重叠  ② 彩虹条纹  ③ 老电视（CRT）
   ============================================================ */

:root{
  /* P4 菜单那条彩虹（红→橙→黄→绿→青→蓝） */
  --rainbow:linear-gradient(90deg,
    #E8352A 0%, #F26B21 16%, #FFC400 32%,
    #7AB800 50%, #00A0E9 68%, #2B4BC8 84%, #7B2FBF 100%);
}

/* ---------- ① 多层矩形重叠 ---------- */

/* 面板：白底 + 黑边 + 后面叠一层黄、再叠一层黑 */
.pane,
.quickstart,
.lb-meta{
  position:relative;
  box-shadow:
    5px 5px 0 var(--p4-ink),
    9px 9px 0 var(--p4-yellow),
    11px 11px 0 rgba(18,18,18,.85) !important;
}
html[data-theme="dark"] .pane,
html[data-theme="dark"] .quickstart{
  box-shadow:
    5px 5px 0 rgba(255,196,0,.9),
    9px 9px 0 rgba(255,196,0,.35),
    11px 11px 0 rgba(0,0,0,.8) !important;
}

/* 面板左侧彩虹竖条（像 P4 选单的彩色边） */
.pane::before{
  content:"";position:absolute;left:-3px;top:-3px;bottom:-3px;
  width:9px;background:var(--rainbow);
  border:var(--edge) solid var(--p4-ink);
  border-right:0;border-radius:var(--radius) 0 0 var(--radius);
}
.pane{padding-left:26px}

/* 卡片：后面叠两层 */
.card{
  box-shadow:
    4px 4px 0 var(--p4-ink),
    7px 7px 0 var(--p4-yellow) !important;
}
.card:hover{
  box-shadow:
    7px 7px 0 var(--p4-ink),
    11px 11px 0 var(--p4-yellow),
    14px 14px 0 rgba(232,53,42,.75) !important;
}

/* 入口卡片：最厚的一层叠 */
.gate-card{
  box-shadow:
    8px 8px 0 var(--p4-ink),
    13px 13px 0 var(--p4-yellow),
    16px 16px 0 var(--p4-ink),
    19px 19px 0 #E8352A !important;
}

/* 快速上手：左边彩虹条 + 叠层 */
.quickstart{position:relative;border-left-width:var(--edge) !important;padding-left:26px}
.quickstart::before{
  content:"";position:absolute;left:-3px;top:-3px;bottom:-3px;width:9px;
  background:var(--rainbow);border:var(--edge) solid var(--p4-ink);
  border-right:0;border-radius:var(--radius) 0 0 var(--radius);
}

/* ---------- ② 彩虹条纹 ---------- */

/* 顶栏下方一条彩虹 */
.topbar{position:sticky}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:7px;
  background:var(--rainbow);
  border-bottom:2px solid var(--p4-ink);
  pointer-events:none;
}

/* 激活标签：底部彩虹 */
.tab.active::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:-3px;height:5px;
  background:var(--rainbow);
  border-top:2px solid var(--p4-ink);
}

/* 资源页顶部说明条：彩虹底 + 黑字 */
.res-intro{
  background:var(--rainbow) !important;
  color:var(--p4-ink) !important;
  border:var(--edge) solid var(--p4-ink);
  box-shadow:4px 4px 0 var(--p4-ink);
  font-weight:900;
}
.res-intro b{color:var(--p4-ink) !important;text-decoration:underline;text-decoration-thickness:2px}

/* 资源卡悬停：彩虹投影（用伪元素做渐变阴影） */
.res-card{position:relative}
.res-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translate(6px,6px);opacity:0;transition:opacity .14s,transform .14s;
  background:var(--rainbow);border-radius:var(--radius);
}
.res-card:hover::after{opacity:1;transform:translate(6px,6px)}
.res-card:hover{box-shadow:none !important;transform:translate(-2px,-2px)}

/* 分隔线换成彩虹 */
.dl-row{border-top:0 !important;padding-top:14px;position:relative}
.dl-row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--rainbow);opacity:.9;
}

/* ---------- ③ 老电视（CRT） ---------- */

/* 扫描线覆盖全站（很淡，不影响看字） */
.p4-bg::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(18,18,18,.055) 0 1px,
    rgba(18,18,18,0) 1px 3px);
  mix-blend-mode:multiply;
  animation:crtRoll 9s linear infinite;
}
@keyframes crtRoll{
  from{background-position:0 0}
  to{background-position:0 12px}
}

/* 画面四周暗角，模拟显像管 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 130px rgba(18,18,18,.22), inset 0 0 40px rgba(18,18,18,.14);
}

/* 卡片图片悬停：加轻微扫描线 + 色差，像电视里的画面 */
.card img{transition:opacity .3s, filter .2s}
.card:hover img{
  filter:contrast(1.04) saturate(1.06);
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .2s;
  background:repeating-linear-gradient(
    to bottom,
    rgba(18,18,18,.12) 0 1px,
    rgba(18,18,18,0) 1px 4px);
}
.card:hover::after{opacity:1}

/* 灯箱：显像管边框 + 扫描线 */
.lb-stage{position:relative}
.lb-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0 1px,
    rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:multiply;opacity:.55;
}
.lb-stage img{
  border:6px solid var(--p4-ink) !important;
  border-radius:10px / 14px !important;   /* 轻微弧面，像显像管 */
  box-shadow:
    0 0 0 3px var(--p4-yellow),
    0 0 46px rgba(255,196,0,.35),
    10px 10px 0 rgba(18,18,18,.9) !important;
}

/* 入口页：老电视开机闪烁 + 扫描线 */
.gate-bg::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.22) 0 2px,
    rgba(0,0,0,0) 2px 5px);
  animation:crtFlicker 5s steps(60) infinite;
}
@keyframes crtFlicker{
  0%,100%{opacity:.75}
  48%{opacity:.8}
  49%{opacity:.55}
  50%{opacity:.82}
  72%{opacity:.68}
}
/* 入口卡片也带一点弧面 */
.gate-card{border-radius:8px / 12px}

/* 顶栏加一个"电源指示灯"（纯装饰） */
.brand::after{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#E8352A;box-shadow:0 0 8px #E8352A;
  margin-left:2px;animation:ledPulse 3.4s ease-in-out infinite;
}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 深色模式下的彩虹稍微调暗，避免刺眼 */
html[data-theme="dark"]{
  --rainbow:linear-gradient(90deg,
    #B0261D 0%, #C25415 16%, #D19E00 32%,
    #5C8C00 50%, #0079B3 68%, #1F3A9E 84%, #5C2390 100%);
}
html[data-theme="dark"] body::after{
  box-shadow:inset 0 0 150px rgba(0,0,0,.65);
}

/* 小屏：叠层收窄，避免撑出横向滚动 */
@media(max-width:640px){
  .card{box-shadow:3px 3px 0 var(--p4-ink), 5px 5px 0 var(--p4-yellow) !important}
  .card:hover{box-shadow:4px 4px 0 var(--p4-ink), 7px 7px 0 var(--p4-yellow) !important}
  .pane,.quickstart,.lb-meta{box-shadow:4px 4px 0 var(--p4-ink), 7px 7px 0 var(--p4-yellow) !important}
  .gate-card{box-shadow:6px 6px 0 var(--p4-ink), 9px 9px 0 var(--p4-yellow) !important}
  .pane{padding-left:20px}
  .quickstart{padding-left:20px}
  .topbar::after{bottom:-9px;height:5px}
}

/* ============================================================
   P4 增强层 v3 · 整屏 CRT 电视背景
   ============================================================ */

/* ---------- 屏幕本体（浅色模式：老电视的米黄屏） ---------- */
.p4-bg{
  background:
    /* 玻璃反光（左上角高光） */
    radial-gradient(120% 90% at 18% -10%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    /* 屏幕中心微亮 */
    radial-gradient(90% 70% at 50% 45%, rgba(255,252,240,.9), rgba(255,246,216,.55) 70%, rgba(240,228,190,.9) 100%),
    linear-gradient(180deg,#FFFCF0 0%, #FFF4CE 55%, #F2E4B8 100%);
  background-size:cover;
  opacity:1;
  /* 显像管边框：内圈黑框 + 内阴影 */
  box-shadow:
    inset 0 0 0 10px #0B0B0B,
    inset 0 0 0 13px rgba(255,196,0,.55),
    inset 0 0 70px rgba(120,100,40,.35);
  border-radius:6px;
}

/* 幽灵彩虹色带（模糊、缓慢漂移） */
.p4-bg::before{
  content:"";position:absolute;inset:-12% -8%;
  background:repeating-linear-gradient(180deg,
    rgba(232,53,42,.16) 0 5%,
    rgba(242,107,33,.16) 5% 10%,
    rgba(255,196,0,.18) 10% 15%,
    rgba(122,184,0,.15) 15% 20%,
    rgba(0,160,233,.15) 20% 25%,
    rgba(43,75,200,.14) 25% 30%,
    rgba(123,47,191,.12) 30% 35%,
    rgba(0,0,0,0) 35% 100%);
  filter:blur(24px) saturate(1.1);
  animation:rainbowDrift 30s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes rainbowDrift{
  from{transform:translateY(-4%) scaleY(1.02)}
  to{transform:translateY(6%) scaleY(1.08)}
}

/* 扫描线 + 缓慢下滚的亮带（老电视的"滚动条"） */
.p4-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(18,18,18,.10) 0 1px, rgba(18,18,18,0) 1px 4px),
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.16) 46%,
      rgba(255,255,255,.16) 54%,
      rgba(255,255,255,0) 100%);
  background-size:100% 4px, 100% 34%;
  background-repeat:repeat, no-repeat;
  animation:crtRoll2 9s linear infinite;
  pointer-events:none;
  mix-blend-mode:soft-light;
}
@keyframes crtRoll2{
  from{background-position:0 0, 0 -40%}
  to{background-position:0 4px, 0 140%}
}

/* 屏幕四周暗角（显像管压暗） */
body::after{
  box-shadow:
    inset 0 0 180px rgba(90,70,20,.30),
    inset 0 0 48px rgba(90,70,20,.22) !important;
}

/* ---------- 深色模式：一台开着机但没信号的电视 ---------- */
html[data-theme="dark"] .p4-bg{
  background:
    radial-gradient(120% 90% at 20% -8%, rgba(255,255,255,.10), rgba(255,255,255,0) 52%),
    radial-gradient(90% 70% at 50% 42%, rgba(38,38,38,.95), rgba(16,16,16,.98) 75%, #060606 100%),
    linear-gradient(180deg,#0C0C0C 0%, #141414 55%, #050505 100%);
  box-shadow:
    inset 0 0 0 10px #000,
    inset 0 0 0 13px rgba(255,196,0,.45),
    inset 0 0 90px rgba(0,0,0,.95);
}
html[data-theme="dark"] .p4-bg::before{
  background:repeating-linear-gradient(180deg,
    rgba(232,53,42,.13) 0 5%,
    rgba(242,107,33,.13) 5% 10%,
    rgba(255,196,0,.15) 10% 15%,
    rgba(122,184,0,.12) 15% 20%,
    rgba(0,160,233,.13) 20% 25%,
    rgba(43,75,200,.12) 25% 30%,
    rgba(123,47,191,.10) 30% 35%,
    rgba(0,0,0,0) 35% 100%);
  filter:blur(30px);
}
html[data-theme="dark"] .p4-bg::after{
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(to bottom,
      rgba(255,196,0,0) 0%,
      rgba(255,196,0,.05) 46%,
      rgba(255,196,0,.05) 54%,
      rgba(255,196,0,0) 100%);
  mix-blend-mode:screen;
}
html[data-theme="dark"] body::after{
  box-shadow:
    inset 0 0 220px rgba(0,0,0,.85),
    inset 0 0 60px rgba(0,0,0,.7) !important;
}

/* 玻璃斜反光（两层之上，很淡） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(118deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.03) 26%,
    rgba(255,255,255,0) 42%);
}
html[data-theme="dark"] body::before{
  background:linear-gradient(118deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.012) 24%,
    rgba(255,255,255,0) 40%);
}

/* 内容区在屏幕里浮起来一点，别贴着边框 */
.topbar{border-radius:0}
main{padding-top:22px}

/* 小屏：边框收窄，避免挤占空间 */
@media(max-width:640px){
  .p4-bg{
    box-shadow:
      inset 0 0 0 6px #0B0B0B,
      inset 0 0 0 8px rgba(255,196,0,.5),
      inset 0 0 46px rgba(120,100,40,.3);
  }
  html[data-theme="dark"] .p4-bg{
    box-shadow:
      inset 0 0 0 6px #000,
      inset 0 0 0 8px rgba(255,196,0,.4),
      inset 0 0 60px rgba(0,0,0,.95);
  }
}

/* ============================================================
   P4 增强层 v4 · Hero 条 / 电视边框 / 骨架屏
   ============================================================ */

/* ---------- ① Hero 条（第一眼） ---------- */
.hero{
  max-width:1150px;margin:0 0 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:18px 24px 20px;
  background:var(--p4-ink);
  background-image:repeating-linear-gradient(45deg,
    rgba(255,196,0,.10) 0 16px, rgba(255,196,0,0) 16px 32px);
  border:var(--edge) solid var(--p4-ink);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--p4-yellow), 10px 10px 0 rgba(18,18,18,.85);
  position:relative;overflow:hidden;
}
.hero::after{                 /* 底部彩虹 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--rainbow);
}
.hero-left{min-width:0}
.hero-kicker{
  font-size:10.5px;font-weight:900;letter-spacing:3px;text-transform:uppercase;
  color:var(--p4-yellow);opacity:.85;margin-bottom:6px;
}
.hero-title{
  margin:0;font-size:34px;line-height:1.1;font-weight:900;
  color:#fff;letter-spacing:1px;
  text-shadow:3px 3px 0 var(--p4-yellow), 6px 6px 0 rgba(0,0,0,.6);
  transform:skew(-6deg);
}
.hero-sub{
  margin:8px 0 0;font-size:12.5px;font-weight:700;
  color:#D8D2C0;letter-spacing:.4px;
}
.hero-stats{
  margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;
  align-items:stretch;
}
.hs{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:62px;padding:7px 10px;
  background:var(--p4-yellow);color:var(--p4-ink);
  border:2px solid #000;border-radius:2px;
  box-shadow:3px 3px 0 rgba(255,255,255,.55);
  transform:skew(-6deg);
}
.hs b{font-size:16px;font-weight:900;line-height:1.05;letter-spacing:.5px}
.hs i{font-style:normal;font-size:10px;font-weight:800;opacity:.75;letter-spacing:1px}

/* ---------- ② 电视边框（独立层，盖在顶栏之上，不挡点击） ---------- */
.tv-frame{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 10px #0B0B0B,
    inset 0 0 0 13px rgba(255,196,0,.55),
    inset 0 0 26px rgba(0,0,0,.45);
}
html[data-theme="dark"] .tv-frame{
  box-shadow:
    inset 0 0 0 10px #000,
    inset 0 0 0 13px rgba(255,196,0,.45),
    inset 0 0 34px rgba(0,0,0,.7);
}
/* 原来的 .p4-bg 阴影里的边框部分去掉，避免双层 */
.p4-bg{
  box-shadow:
    inset 0 0 70px rgba(120,100,40,.35) !important;
}
html[data-theme="dark"] .p4-bg{
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.95) !important;
}
/* 顶栏左右让出边框宽度，避免被压住 */
.topbar{padding-left:26px;padding-right:26px}
main{padding-left:28px;padding-right:28px}

/* ---------- ③ 骨架屏 ---------- */
.card.loading{background:#F4E9C8}
.card.loading::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,196,0,.55) 0 14px,
      rgba(18,18,18,.10) 14px 28px);
  animation:skelPulse 1.3s ease-in-out infinite;
}
@keyframes skelPulse{
  0%,100%{opacity:.5}
  50%{opacity:.95}
}
.card.loading img{opacity:0 !important}
html[data-theme="dark"] .card.loading{background:#242424}
html[data-theme="dark"] .card.loading::before{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,196,0,.22) 0 14px,
      rgba(0,0,0,.35) 14px 28px);
}

/* 骨架期间不显示底部信息，避免闪动 */
.card.loading .cap{opacity:0}

/* ---------- 小屏适配 ---------- */
@media(max-width:960px){
  .hero{padding:14px 16px 16px;gap:14px}
  .hero-title{font-size:26px;text-shadow:2px 2px 0 var(--p4-yellow)}
  .hero-stats{margin-left:0;width:100%}
  .hs{flex:1;min-width:56px}
  .topbar{padding-left:16px;padding-right:16px}
  main{padding-left:18px;padding-right:18px}
}
@media(max-width:640px){
  .hero-title{font-size:22px}
  .hero-kicker{letter-spacing:2px;font-size:9.5px}
  .hs b{font-size:14px}
  .hs i{font-size:9px}
  .tv-frame{box-shadow:
    inset 0 0 0 6px #0B0B0B,
    inset 0 0 0 8px rgba(255,196,0,.5),
    inset 0 0 18px rgba(0,0,0,.4)}
  .topbar{padding-left:12px;padding-right:12px}
  main{padding-left:14px;padding-right:14px}
}