@charset "utf-8";
/* 抖漫 · 波普漫画风 · 亮色纸感 + 分格网格
   所有类名统一 dm- 前缀，与站内其它模板零重合（防站群指纹）
   前三套模板都是深色底，这套刻意走亮色，视觉上第一眼就分得开 */

:root{
  --dm-paper:#FFF6E0;      /* 纸 */
  --dm-card:#FFFCF2;       /* 卡面 */
  --dm-ink:#16130F;        /* 墨（顶栏与页脚同色，实色不透明） */
  --dm-ink-2:#3A342B;
  --dm-yellow:#FFD400;
  --dm-magenta:#FF2D78;       /* 只做装饰填充/描边/焦点环 */
  --dm-magenta-ink:#C81348;   /* 承载文字时用这个:白字 5.77:1、当文字色 5.36:1 */
  --dm-cyan:#00A8E1;
  --dm-gray:#6B6459;
  --dm-line:#16130F;

  --dm-r:0px;              /* 波普风不用圆角，全直角 */
  --dm-r-pill:999px;
  --dm-bd:3px;             /* 粗描边 */
  --dm-shadow:6px 6px 0 var(--dm-ink);
  --dm-shadow-sm:4px 4px 0 var(--dm-ink);
  --dm-gut:30px;
  --dm-max:1400px;
  --dm-snap:cubic-bezier(.2,.9,.3,1);
  --dm-type:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--dm-ink);
  /* 网点纸（halftone）：波普漫画的印刷语汇，与封面图里 GD 画的网点是同一套质感。
     直接把点画成最终浓度，不再叠一层半透明纸色去糊淡它。 */
  background:
    radial-gradient(rgba(22,19,15,.13) 1.1px,transparent 1.2px) 0 0 / 16px 16px,
    var(--dm-paper);
  font:500 15px/1.7 var(--dm-type);
  overflow-x:hidden;
}
img{display:block;max-width:100%;border:0}
a{color:var(--dm-ink);text-decoration:none;transition:color .18s var(--dm-snap)}
a:hover{color:var(--dm-magenta-ink)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:900;line-height:1.28;letter-spacing:.01em}
p{margin:0}
button,input{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--dm-magenta);outline-offset:2px}

.dm-hop{position:absolute;left:-9999px;top:0;z-index:999;background:var(--dm-yellow);color:var(--dm-ink);
  padding:10px 18px;font-weight:900;border:var(--dm-bd) solid var(--dm-ink)}
.dm-hop:focus{left:0}

.dm-wrap{width:100%;max-width:var(--dm-max);margin:0 auto;padding:0 var(--dm-gut)}

/* ============ 顶栏：墨色实色 + 明黄压边 ============ */
.dm-bar{position:sticky;top:0;z-index:100;background:var(--dm-ink);border-bottom:5px solid var(--dm-yellow)}
.dm-bar-in{display:flex;align-items:center;gap:18px;height:66px}

.dm-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.dm-logo-mark{
  width:36px;height:36px;flex:0 0 auto;position:relative;
  background:var(--dm-yellow);border:var(--dm-bd) solid var(--dm-paper);
}
.dm-logo-mark::after{
  content:"";position:absolute;left:-9px;top:50%;margin-top:-6px;
  border-right:9px solid var(--dm-yellow);border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.dm-logo-word{font-size:22px;font-weight:900;color:var(--dm-paper);letter-spacing:.08em;white-space:nowrap}
.dm-logo:hover .dm-logo-word{color:var(--dm-yellow)}

.dm-hunt{position:relative;flex:1 1 auto;max-width:360px;margin-left:auto}
.dm-hunt input{
  width:100%;height:40px;padding:0 40px 0 14px;
  background:var(--dm-paper);border:var(--dm-bd) solid var(--dm-paper);
  color:var(--dm-ink);outline:none;font-weight:600;
  transition:border-color .18s var(--dm-snap),box-shadow .18s var(--dm-snap);
}
.dm-hunt input::placeholder{color:var(--dm-gray)}
.dm-hunt input:focus{border-color:var(--dm-yellow);box-shadow:var(--dm-shadow-sm)}
.dm-hunt i{position:absolute;right:14px;top:13px;width:14px;height:14px;
  border:3px solid var(--dm-ink);border-radius:50%;pointer-events:none}
.dm-hunt i::after{content:"";position:absolute;right:-5px;bottom:-5px;width:8px;height:3px;
  background:var(--dm-ink);transform:rotate(45deg)}

.dm-get{
  flex:0 0 auto;display:inline-flex;align-items:center;padding:9px 18px;
  background:var(--dm-magenta-ink);color:#fff;font-weight:900;font-size:14.5px;
  border:var(--dm-bd) solid var(--dm-paper);
  transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap);
}
.dm-get:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dm-yellow)}

.dm-toggle{display:none;width:44px;height:40px;flex:0 0 auto;cursor:pointer;
  background:var(--dm-yellow);border:var(--dm-bd) solid var(--dm-paper);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.dm-toggle span{width:20px;height:3px;background:var(--dm-ink);transition:transform .26s var(--dm-snap),opacity .18s}
.dm-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.dm-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.dm-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* 导航：每个频道一块颜色的胶囊，墨底上高对比 */
.dm-nav{background:var(--dm-ink);padding-bottom:10px}
.dm-nav ul{display:flex;gap:8px;flex-wrap:wrap}
.dm-nav a{
  display:block;padding:6px 14px;font-size:14.5px;font-weight:800;
  color:var(--dm-paper);border:2px solid var(--dm-paper);
  transition:background .18s var(--dm-snap),color .18s var(--dm-snap),transform .16s var(--dm-snap);
}
.dm-nav a:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--dm-yellow)}
.dm-nav li:nth-child(7n+1) a[aria-current="page"]{background:var(--dm-yellow);color:var(--dm-ink);border-color:var(--dm-yellow)}
.dm-nav li:nth-child(7n+2) a[aria-current="page"]{background:var(--dm-magenta-ink);color:#fff;border-color:var(--dm-magenta-ink)}
.dm-nav li:nth-child(7n+3) a[aria-current="page"]{background:var(--dm-cyan);color:var(--dm-ink);border-color:var(--dm-cyan)}
.dm-nav li:nth-child(7n+4) a[aria-current="page"]{background:var(--dm-yellow);color:var(--dm-ink);border-color:var(--dm-yellow)}
.dm-nav li:nth-child(7n+5) a[aria-current="page"]{background:var(--dm-magenta-ink);color:#fff;border-color:var(--dm-magenta-ink)}
.dm-nav li:nth-child(7n+6) a[aria-current="page"]{background:var(--dm-cyan);color:var(--dm-ink);border-color:var(--dm-cyan)}
.dm-nav li:nth-child(7n+7) a[aria-current="page"]{background:var(--dm-yellow);color:var(--dm-ink);border-color:var(--dm-yellow)}

/* ============ 首屏：分格式轮播（主格 + 右侧竖排小格） ============ */
.dm-stage{padding:26px 0 0}
.dm-stage h1{font-size:26px;margin-bottom:10px}
.dm-stage h1 em{font-style:normal;background:var(--dm-yellow);padding:0 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dm-lede{color:var(--dm-ink-2);font-size:15px;max-width:840px;margin-bottom:20px;font-weight:600}

.dm-panels{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px}
.dm-panel-main{position:relative;overflow:hidden;background:var(--dm-card);
  border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow)}
.dm-strip{display:flex;transition:transform .5s var(--dm-snap)}
.dm-shot{position:relative;min-width:100%}
.dm-shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dm-shot-copy{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  background:linear-gradient(0deg,rgba(22,19,15,.94) 14%,rgba(22,19,15,.55) 58%,transparent)}
.dm-kicker{display:inline-block;padding:3px 12px;margin-bottom:10px;font-size:12.5px;font-weight:900;
  background:var(--dm-yellow);color:var(--dm-ink);border:2px solid var(--dm-ink)}
.dm-shot-copy h2{font-size:25px;color:var(--dm-paper);margin-bottom:8px}
.dm-shot-copy p{color:#E6E0D2;font-size:14px;max-width:560px;margin-bottom:15px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-read{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;
  background:var(--dm-magenta-ink);color:#fff;font-weight:900;font-size:14.5px;border:var(--dm-bd) solid var(--dm-paper);
  transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap)}
.dm-read::after{content:"▸"}
.dm-read:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dm-yellow)}

.dm-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dm-side button{
  position:relative;flex:1 1 0;min-height:0;padding:0;border:var(--dm-bd) solid var(--dm-ink);cursor:pointer;
  background:var(--dm-card);overflow:hidden;text-align:left;
  transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap);
}
.dm-side button img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.dm-side button[aria-selected="true"]{box-shadow:var(--dm-shadow);transform:translate(-3px,-3px)}
.dm-side button[aria-selected="true"]::after{content:"";position:absolute;inset:0;border:5px solid var(--dm-yellow)}
.dm-side-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 6px;font-size:12.5px;font-weight:800;
  color:var(--dm-paper);background:linear-gradient(0deg,rgba(22,19,15,.94),transparent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ 区块 ============ */
.dm-block{padding:34px 0}
.dm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.dm-head h2{font-size:22px;display:inline-block;background:var(--dm-ink);color:var(--dm-paper);padding:5px 14px;
  border:var(--dm-bd) solid var(--dm-ink);box-shadow:4px 4px 0 var(--dm-yellow)}
.dm-note{font-size:13px;color:var(--dm-gray);margin-top:9px;font-weight:600}
.dm-more{font-size:14px;font-weight:900;color:var(--dm-ink);border-bottom:3px solid var(--dm-magenta);white-space:nowrap}
.dm-more:hover{color:var(--dm-magenta-ink)}

/* ---- 分类入口：色块格 ---- */
.dm-gates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.dm-gate{position:relative;display:block;overflow:hidden;background:var(--dm-card);
  border:var(--dm-bd) solid var(--dm-ink);transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap)}
.dm-gate:hover{transform:translate(-3px,-3px);box-shadow:var(--dm-shadow)}
.dm-gate img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dm-gate-tag{display:block;padding:8px 10px;border-top:var(--dm-bd) solid var(--dm-ink);background:var(--dm-card)}
.dm-gate:nth-child(3n+1) .dm-gate-tag{background:var(--dm-yellow)}
.dm-gate:nth-child(3n+2) .dm-gate-tag{background:var(--dm-cyan)}
.dm-gate:nth-child(3n+3) .dm-gate-tag{background:var(--dm-magenta-ink);color:#fff}
.dm-gate-name{display:block;font-size:14.5px;font-weight:900}
.dm-gate-n{display:block;font-size:11.5px;font-weight:700;margin-top:1px}

/* ---- 漫画分格网格：首格双倍宽，像漫画页的分镜 ---- */
.dm-frames{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.dm-frames > :first-child{grid-column:span 2;grid-row:span 2}

/* ---- 卡片：粗边 + 硬阴影，文字在图下的色块里（不用图上浮层） ---- */
.dm-comic{position:relative;display:flex;flex-direction:column;background:var(--dm-card);
  border:var(--dm-bd) solid var(--dm-ink);
  transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap)}
.dm-comic:hover{transform:translate(-4px,-4px);box-shadow:var(--dm-shadow)}
.dm-comic-art{position:relative;overflow:hidden;background:var(--dm-paper)}
.dm-comic-art img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dm-frames > :first-child .dm-comic-art img{aspect-ratio:3/4;height:100%}
.dm-comic-body{padding:9px 11px;border-top:var(--dm-bd) solid var(--dm-ink);background:var(--dm-card)}
.dm-comic-name{display:block;font-size:14.5px;font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-comic-sub{display:block;font-size:12px;font-weight:700;color:var(--dm-gray);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-hot{position:absolute;left:8px;top:8px;padding:2px 9px;font-size:12.5px;font-weight:900;
  background:var(--dm-yellow);color:var(--dm-ink);border:2px solid var(--dm-ink);font-variant-numeric:tabular-nums}
.dm-state{position:absolute;right:8px;top:8px;padding:2px 9px;font-size:11.5px;font-weight:900;
  background:var(--dm-cyan);color:var(--dm-ink);border:2px solid var(--dm-ink)}
.dm-rank{position:absolute;left:-3px;bottom:-3px;min-width:38px;padding:2px 8px;text-align:center;
  background:var(--dm-magenta-ink);color:#fff;font-size:19px;font-weight:900;
  border:var(--dm-bd) solid var(--dm-ink);font-variant-numeric:tabular-nums}

/* ---- 列表页网格 ---- */
.dm-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 16px}

.dm-empty{display:none;padding:46px 0;text-align:center;font-weight:700;color:var(--dm-gray)}
.dm-empty.dm-on{display:block}

/* ---- 列表页页头 ---- */
.dm-cover{position:relative;overflow:hidden;margin-top:22px;border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow)}
.dm-cover img{width:100%;aspect-ratio:16/9;max-height:250px;object-fit:cover}
.dm-cover-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 34px;
  background:linear-gradient(92deg,rgba(22,19,15,.92) 24%,rgba(22,19,15,.34) 74%,transparent)}
.dm-cover-copy h1{font-size:27px;color:var(--dm-paper);margin-bottom:9px}
.dm-cover-copy p{color:#E6E0D2;max-width:540px;font-size:14px;font-weight:600}

.dm-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;font-size:12.5px;
  font-weight:700;color:var(--dm-gray)}
.dm-crumb a{color:var(--dm-gray)}
.dm-crumb a:hover{color:var(--dm-magenta-ink)}

/* ---- 详情页 ---- */
.dm-book{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:30px;margin-top:24px}
.dm-book-art{border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow);background:var(--dm-card)}
.dm-book-art img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dm-book h1{font-size:26px;margin-bottom:14px}
.dm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:16px;font-size:13px;
  font-weight:700;color:var(--dm-ink-2)}
.dm-heat{font-size:30px;font-weight:900;color:var(--dm-magenta-ink);line-height:1;font-variant-numeric:tabular-nums}
.dm-tag{padding:2px 11px;font-size:12px;font-weight:900;background:var(--dm-cyan);color:var(--dm-ink);
  border:2px solid var(--dm-ink)}
.dm-plot{color:var(--dm-ink-2);line-height:1.85;margin-bottom:20px;max-width:760px;font-weight:600}
.dm-acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.dm-plain{display:inline-flex;align-items:center;padding:9px 20px;font-weight:900;font-size:14.5px;
  background:var(--dm-card);border:var(--dm-bd) solid var(--dm-ink)}
.dm-plain:hover{background:var(--dm-yellow)}
.dm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;
  background:var(--dm-card);border:var(--dm-bd) solid var(--dm-ink);padding:16px 18px;
  font-size:13.5px;font-weight:600;color:var(--dm-gray)}
.dm-facts b{color:var(--dm-ink);font-weight:900}
.dm-chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.dm-chaps a{text-align:center;padding:9px 0;font-size:13.5px;font-weight:800;
  background:var(--dm-card);border:2px solid var(--dm-ink)}
.dm-chaps a:hover{background:var(--dm-yellow)}

/* ---- APP 页 ---- */
.dm-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;padding:36px 0}
.dm-app h1{font-size:32px;margin-bottom:15px}
.dm-app p{color:var(--dm-ink-2);font-size:15.5px;margin-bottom:21px;font-weight:600}
.dm-shots{display:flex;gap:16px;justify-content:center}
.dm-shots img{width:32%;border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow);
  aspect-ratio:420/860;object-fit:cover}
.dm-shots img:nth-child(2){transform:translateY(-14px)}
.dm-boons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dm-boon{background:var(--dm-card);border:var(--dm-bd) solid var(--dm-ink);padding:18px;
  transition:transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap)}
.dm-boon:hover{transform:translate(-3px,-3px);box-shadow:var(--dm-shadow)}
.dm-boon-chip{width:34px;height:34px;margin-bottom:12px;border:var(--dm-bd) solid var(--dm-ink)}
.dm-boon:nth-child(3n+1) .dm-boon-chip{background:var(--dm-yellow)}
.dm-boon:nth-child(3n+2) .dm-boon-chip{background:var(--dm-magenta)}
.dm-boon:nth-child(3n+3) .dm-boon-chip{background:var(--dm-cyan)}
.dm-boon h3{font-size:15.5px;margin-bottom:6px}
.dm-boon p{font-size:13px;color:var(--dm-gray);margin:0;font-weight:600}
.dm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dm-step{background:var(--dm-card);border:var(--dm-bd) solid var(--dm-ink);padding:18px}
.dm-step b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  background:var(--dm-yellow);color:var(--dm-ink);font-size:16px;margin-bottom:11px;border:var(--dm-bd) solid var(--dm-ink)}
.dm-step h3{font-size:15px;margin-bottom:5px}
.dm-step p{font-size:13px;color:var(--dm-gray);margin:0;font-weight:600}
.dm-qa{background:var(--dm-card);border:var(--dm-bd) solid var(--dm-ink);padding:14px 18px;margin-bottom:12px}
.dm-qa h3{font-size:14.5px;margin-bottom:5px}
.dm-qa p{font-size:13.5px;color:var(--dm-gray);font-weight:600}

/* ---- 下载引导条 ---- */
.dm-shout{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:26px 28px;background:var(--dm-yellow);border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow)}
.dm-shout h2{font-size:21px;margin-bottom:6px}
.dm-shout p{font-size:13.5px;font-weight:700}

/* ---- 友情链接（仅首页，紧贴页脚上方） ---- */
.dm-mates{background:var(--dm-card);border-top:var(--dm-bd) solid var(--dm-ink);padding:26px 0 24px}
.dm-mates h2{font-size:18px;display:inline-block;background:var(--dm-cyan);color:var(--dm-ink);
  padding:4px 13px;border:var(--dm-bd) solid var(--dm-ink);margin-bottom:15px}
.dm-mates-row{display:flex;flex-wrap:wrap;gap:10px}
.dm-mates-row a{
  display:inline-block;max-width:100%;padding:7px 16px;
  background:var(--dm-paper);color:var(--dm-ink);font-size:13.5px;font-weight:800;line-height:1.5;
  border:2px solid var(--dm-ink);word-break:break-all;
  transition:background .16s var(--dm-snap),color .16s var(--dm-snap),transform .16s var(--dm-snap),box-shadow .16s var(--dm-snap);
}
.dm-mates-row a:hover{background:var(--dm-magenta-ink);color:#fff;transform:translate(-2px,-2px);box-shadow:var(--dm-shadow-sm)}

/* ---- 页脚：与顶栏同色实色 ---- */
.dm-foot{background:var(--dm-ink);color:var(--dm-paper);border-top:5px solid var(--dm-yellow);padding:32px 0 22px}
.dm-foot a{color:#D8D2C4}
.dm-foot a:hover{color:var(--dm-yellow)}
.dm-foot-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:32px;margin-bottom:26px}
.dm-foot-name{font-size:19px;font-weight:900;letter-spacing:.08em;color:var(--dm-paper);margin-bottom:10px;display:block}
.dm-foot-say{color:#CFC9BB;font-size:13.5px;line-height:1.85;font-weight:600}
.dm-foot-col h3{font-size:14.5px;margin-bottom:12px;color:var(--dm-yellow)}
.dm-foot-col li{margin-bottom:9px;font-size:13.5px;color:#CFC9BB;font-weight:600}
.dm-socials{display:flex;gap:9px;margin-top:12px}
.dm-socials span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:2px solid #4A443A;font-size:11.5px;font-weight:900;color:#CFC9BB;cursor:default}
.dm-socials span:hover{border-color:var(--dm-yellow);color:var(--dm-yellow)}
.dm-foot-end{border-top:2px solid #332E26;padding-top:16px;
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  font-size:12.5px;color:#CFC9BB;font-weight:600}
.dm-brand{font-size:15px;font-weight:900;letter-spacing:.08em;color:var(--dm-paper)}
.dm-full{font-size:12.5px;color:#CFC9BB}

/* ---- 404 ---- */
.dm-lost{text-align:center;padding:72px 0 84px}
.dm-lost-code{display:inline-block;font-size:82px;font-weight:900;line-height:1;padding:6px 22px;
  background:var(--dm-magenta-ink);color:var(--dm-paper);border:5px solid var(--dm-ink);box-shadow:var(--dm-shadow)}
.dm-lost h1{font-size:24px;margin:22px 0 12px}
.dm-lost p{color:var(--dm-ink-2);margin-bottom:22px;font-weight:600}
.dm-lost-ways{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

.dm-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;cursor:pointer;
  background:var(--dm-yellow);color:var(--dm-ink);font-size:19px;font-weight:900;
  border:var(--dm-bd) solid var(--dm-ink);box-shadow:var(--dm-shadow-sm);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s var(--dm-snap),transform .22s var(--dm-snap),visibility .22s;z-index:80}
.dm-top.dm-on{opacity:1;visibility:visible;transform:none}

.dm-pop{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--dm-snap),transform .5s var(--dm-snap)}
.dm-pop.dm-in{opacity:1;transform:none}

/* ============ 响应式 ============ */
@media (max-width:1240px){
  .dm-shelf{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dm-frames{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dm-gates{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dm-boons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-book{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:22px}
  .dm-app{grid-template-columns:1fr;gap:26px}
}
@media (max-width:980px){
  .dm-panels{grid-template-columns:1fr}
  .dm-side{flex-direction:row}
  .dm-side button{flex:1 1 0}
  .dm-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dm-frames{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dm-frames > :first-child{grid-column:span 3;grid-row:auto}
  .dm-frames > :first-child .dm-comic-art img{aspect-ratio:16/9}
}
@media (max-width:760px){
  :root{--dm-gut:16px;--dm-bd:2px;--dm-shadow:4px 4px 0 var(--dm-ink)}
  .dm-bar-in{height:auto;padding:12px 0;flex-wrap:wrap;gap:12px}
  .dm-hunt{order:4;flex:1 1 100%;max-width:none;margin-left:0}
  .dm-toggle{display:flex;margin-left:auto}
  .dm-get{display:none}
  .dm-nav{max-height:0;overflow:hidden;padding-bottom:0;transition:max-height .3s var(--dm-snap)}
  .dm-nav.dm-open{max-height:60vh;overflow-y:auto;padding-bottom:12px}
  .dm-nav ul{flex-direction:column;gap:6px}
  .dm-nav a{padding:9px 14px}
  .dm-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
  .dm-frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-frames > :first-child{grid-column:span 2}
  .dm-gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-shot-copy{padding:16px}
  .dm-shot-copy h2{font-size:19px}
  .dm-cover-copy{padding:0 var(--dm-gut)}
  .dm-cover-copy h1{font-size:20px}
  .dm-cover-copy p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dm-book{grid-template-columns:1fr;gap:18px}
  .dm-book-art{max-width:190px}
  .dm-facts{grid-template-columns:1fr}
  .dm-steps{grid-template-columns:1fr}
  .dm-boons{grid-template-columns:1fr}
  .dm-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .dm-stage h1{font-size:20px}
}
@media (max-width:480px){
  .dm-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-foot-cols{grid-template-columns:1fr}
  .dm-lost-code{font-size:60px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .dm-pop{opacity:1;transform:none}
}