/* 解梦档案馆 · 紫夜月光主题
   规矩：一个选择器一行，属性横向写完，遇到下一个选择器再换行 */

:root{--night:#080617;--night2:#0d0921;--panel:rgba(30,23,58,.62);--panel2:rgba(38,29,72,.88);--line:rgba(178,166,235,.14);--line2:rgba(178,166,235,.3);--ink:#f0ebff;--ink2:#cfc7ec;--mut:#a29ac4;--mut2:#7d759e;--moon:#f7ecd9;--amber:#e0bd8b;--indigo:#a89bff;--rose:#eaa6cf;--green:#a6e0cd;--serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;--body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--mono:"SFMono-Regular","JetBrains Mono",Consolas,monospace}

html{font-size:13px;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (min-width:768px){html{font-size:14px}}
@media (min-width:1300px){html{font-size:16px}}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;color:var(--ink2);background:var(--night);background-image:radial-gradient(58rem 42rem at 80% -12%,rgba(168,155,255,.22),transparent 62%),radial-gradient(50rem 36rem at 2% 16%,rgba(234,166,207,.12),transparent 60%),radial-gradient(52rem 38rem at 62% 106%,rgba(128,196,214,.1),transparent 62%),linear-gradient(165deg,#080617,#0b0820 45%,#080a17);background-attachment:fixed;font-family:var(--body);font-size:1.06rem;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer}
.wrap{max-width:76rem;margin:0 auto;padding:0 1.6rem}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;padding:1.15rem 0;border-bottom:1px solid var(--line);background:rgba(8,6,23,.8);backdrop-filter:blur(14px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;font-size:1rem;color:var(--moon);letter-spacing:.1em}
.brand b{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:.16em;color:var(--ink)}
.brand i{width:1px;height:1.1rem;background:var(--line2)}
.brand span{font-size:.85rem;color:var(--mut);letter-spacing:.12em}
.tnav{display:flex;align-items:center;gap:1.5rem;font-size:.88rem;color:var(--mut)}
.tnav a{transition:color .2s}
.tnav a:hover{color:var(--ink)}
.tnav s{text-decoration:none;color:var(--amber)}

/* 首屏 */
.hero{padding:4.8rem 0 3.8rem}
.hgrid{display:grid;grid-template-columns:1.14fr .86fr;gap:3.5rem;align-items:center}
.kicker{margin:0 0 1.2rem;font-size:.82rem;letter-spacing:.34em;color:var(--amber);text-transform:uppercase}
.hcopy h1{margin:0;font-family:var(--serif);font-size:clamp(2.9rem,5.4vw,4.9rem);font-weight:400;line-height:1.16;letter-spacing:.05em;color:var(--ink)}
.hcopy h1 em{font-style:normal;color:var(--moon);text-shadow:0 0 3rem rgba(243,233,210,.18)}
.lead{margin:1.4rem 0 0;max-width:33rem;font-size:1.06rem;line-height:1.95;color:var(--mut)}
.finder{margin-top:2.2rem;max-width:36rem}
.fbox{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;background:rgba(18,13,40,.82);border:1px solid var(--line2);border-radius:.9rem;transition:border-color .25s,box-shadow .25s}
.fbox:focus-within{border-color:rgba(168,155,255,.65);box-shadow:0 0 0 .22rem rgba(168,155,255,.12),0 1.2rem 2.4rem rgba(0,0,0,.35)}
.fbox svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:var(--mut);stroke-width:1.8;stroke-linecap:round}
.fbox input{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font-family:var(--body);font-size:1rem;outline:none}
.fbox input::placeholder{color:var(--mut2)}
.fbox kbd{flex:none;padding:.06rem .42rem;font-family:var(--mono);font-size:.72rem;color:var(--mut2);border:1px solid var(--line2);border-radius:.32rem}
.hot{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin-top:.9rem;font-size:.86rem;color:var(--mut2)}
.hot span{letter-spacing:.08em}
.hot button{padding:0;border:none;background:none;font-size:.86rem;color:var(--mut);border-bottom:1px dashed var(--line2);transition:color .2s,border-color .2s}
.hot button:hover{color:var(--moon);border-color:var(--amber)}
.qtip{margin:.75rem 0 0;font-size:.84rem;letter-spacing:.04em;color:var(--amber)}
.stat{display:flex;gap:2.6rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.stat p{margin:0;display:flex;align-items:baseline;gap:.45rem}
.stat b{font-family:var(--serif);font-size:1.8rem;font-weight:400;color:var(--ink)}
.stat span{font-size:.82rem;color:var(--mut2);letter-spacing:.06em}

/* 月亮图 */
.hright{position:relative;display:flex;flex-direction:column;align-items:center}
.moon{position:relative;width:min(23rem,74vw);aspect-ratio:1}
.halo{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(247,236,217,.22),rgba(168,155,255,.14) 52%,transparent 70%);filter:blur(1.2rem)}
.orbits{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(196,188,235,.16);stroke-width:1}
.orbits .dash{stroke-dasharray:2 9;stroke:rgba(196,188,235,.24)}
.disc{position:absolute;inset:19%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:radial-gradient(circle at 33% 27%,#fdf7e6,#e2d7bb 55%,#a99b7e 100%);box-shadow:0 2.6rem 5rem rgba(0,0,0,.55),inset 0 0 3rem rgba(120,105,75,.28),0 0 7rem rgba(168,155,255,.22)}
.disc b{font-family:var(--serif);font-size:4.6rem;font-weight:400;line-height:1;color:#151a28}
.disc i{margin-top:.5rem;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.4em;color:rgba(21,26,40,.55)}
.star{position:absolute;color:var(--moon);font-size:.9rem;opacity:.7;animation:twinkle 5.5s ease-in-out infinite}
.star.s1{top:2%;left:26%;animation-delay:.2s}
.star.s2{top:18%;right:-2%;font-size:.7rem;animation-delay:1.4s}
.star.s3{bottom:8%;left:2%;font-size:1.1rem;animation-delay:.8s}
.star.s4{bottom:2%;right:22%;color:var(--mut2);animation-delay:2.2s}
.star.s5{top:44%;left:-4%;font-size:.6rem;animation-delay:1.8s}
@keyframes twinkle{0%,100%{opacity:.28;transform:scale(.85)}50%{opacity:.9;transform:scale(1)}}
.mcap{margin:2.2rem 0 0;text-align:center;font-family:var(--serif);font-size:1rem;line-height:1.9;letter-spacing:.08em;color:var(--mut)}

/* 分区骨架 */
.sec{position:relative;padding:4.2rem 0}
.sec + .sec:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(76rem,calc(100% - 3.2rem));height:1px;background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line2) 50%,var(--line) 84%,transparent)}
.sec-head{display:grid;grid-template-columns:4.5rem 1fr;align-items:baseline;margin-bottom:2rem}
.sec-no{grid-row:1/3;font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;color:var(--amber)}
.sec-head h2{margin:0;font-family:var(--serif);font-size:1.7rem;font-weight:400;letter-spacing:.12em;color:var(--ink)}
.sec-head p{margin:.5rem 0 0;font-size:.94rem;color:var(--mut2)}

/* 筛选与卡片 */
.filter{display:flex;flex-wrap:wrap;gap:.5rem}
.filter button{padding:.42rem 1.05rem;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:.88rem;color:var(--mut);transition:all .2s}
.filter button:hover{border-color:var(--line2);color:var(--ink)}
.filter button.on{background:var(--moon);border-color:var(--moon);color:#111726}
.fcount{margin:1.2rem 0 1.5rem;font-size:.84rem;letter-spacing:.06em;color:var(--mut2)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1rem}
.dcard{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:1.35rem 1.3rem 1.2rem;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:1rem;transition:transform .28s,border-color .28s,background .28s,box-shadow .28s;--tint:var(--indigo)}
.dcard:hover{transform:translateY(-.28rem);border-color:var(--line2);background:var(--panel2);box-shadow:0 1.4rem 3rem rgba(0,0,0,.36),0 0 0 1px rgba(168,155,255,.1)}
/* 每个分类一个色，网格才不会一整片都是同一种靛蓝 */
.dcard[data-cat="动物"]{--tint:#e0bd8b}
.dcard[data-cat="身体"]{--tint:#eaa6cf}
.dcard[data-cat="人物"]{--tint:#d3bc9b}
.dcard[data-cat="自然"]{--tint:#a6e0cd}
.dcard[data-cat="生活"]{--tint:#c2b0f7}
.dcard[data-cat="出行"]{--tint:#a89bff}
.dcard[data-cat="情绪"]{--tint:#f0b48a}
.dcard[data-cat="灵异"]{--tint:#a9b4d8}
.dcard:before{content:"";position:absolute;right:-35%;bottom:-45%;width:13rem;height:13rem;border-radius:50%;background:radial-gradient(circle,var(--tint),transparent 70%);opacity:.1;pointer-events:none;transition:opacity .28s}
.dcard:hover:before{opacity:.2}
/* 卡片顶部一道发光线，悬浮时点亮；右下角一个大字做水印 */
.dcard:after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--tint),transparent);opacity:0;transition:opacity .28s}
.dcard:hover:after{opacity:.85}
.dcard > span,.dcard > strong{position:relative;z-index:1}
.dg{position:absolute;right:.4rem;bottom:-1.3rem;font-family:var(--serif);font-size:5.4rem;font-weight:400;line-height:1;color:var(--tint);opacity:.055;pointer-events:none;transition:opacity .3s,transform .3s}
.dcard:hover .dg{opacity:.14;transform:translateY(-.25rem) rotate(-4deg)}
.dtop{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em}
.dtop i{font-style:normal;color:var(--mut2)}
.dcat{color:var(--tint);letter-spacing:.18em}
.omen{margin-left:auto;padding:.06rem .55rem;font-family:var(--body);font-size:.7rem;letter-spacing:.12em;color:var(--mut);border:1px solid var(--line2);border-radius:999px}
.omen.g{color:var(--green);border-color:rgba(158,216,196,.38)}
.omen.w{color:var(--amber);border-color:rgba(215,180,124,.4)}
.dtitle{margin-top:.55rem;font-family:var(--serif);font-size:1.45rem;font-weight:400;letter-spacing:.04em;color:var(--ink)}
.dsym{font-size:.84rem;letter-spacing:.05em;color:var(--amber)}
.dsum{font-size:.94rem;line-height:1.8;color:var(--mut)}
.dmore{margin-top:auto;padding-top:.85rem;border-top:1px dashed var(--line);font-size:.82rem;color:var(--mut2);display:flex;align-items:center;justify-content:space-between}
.dmore s{text-decoration:none;transition:transform .25s,color .25s}
.dcard:hover .dmore s{transform:translateX(.25rem);color:var(--moon)}
.empty{padding:3rem 0;text-align:center;font-size:.96rem;color:var(--mut2)}
.dcard[hidden]{display:none}
.dcard.anim{opacity:0;transform:translateY(1rem)}
.dcard.anim.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* 三种读法 */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rd{padding:1.5rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem;transition:transform .25s,border-color .25s,background .25s}
.rd:hover{transform:translateY(-.22rem);border-color:var(--line2);background:var(--panel2)}
.rno{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;color:var(--amber)}
.rd h3{margin:.6rem 0 .7rem;font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:.08em;color:var(--ink)}
.rd p{margin:0;font-size:.94rem;line-height:1.9;color:var(--mut)}
.note{display:flex;align-items:flex-start;gap:1.2rem;margin-top:1rem;padding:1.1rem 1.4rem;background:rgba(215,180,124,.06);border-left:2px solid var(--amber);border-radius:0 .8rem .8rem 0}
.note span{flex:none;font-size:.78rem;letter-spacing:.2em;color:var(--amber)}
.note p{margin:0;font-size:.98rem;line-height:1.9;color:var(--ink2)}
.note b{font-weight:400;color:var(--moon)}

/* 问答 */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;padding:1.15rem 2rem 1.15rem 0;font-size:1.02rem;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;top:1.05rem;right:.2rem;font-size:1.2rem;line-height:1;color:var(--amber);transition:transform .2s}
.faq details[open] summary:after{content:"–"}
.faq p{margin:0 0 1.3rem;max-width:44rem;font-size:.96rem;line-height:1.95;color:var(--mut)}

/* 页脚 */
.foot{margin-top:1rem;padding:2.4rem 0 3.2rem;border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fbrand b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;letter-spacing:.18em;color:var(--ink)}
.fbrand span{font-size:.84rem;color:var(--mut2);letter-spacing:.1em}
.fmeta{font-size:.84rem;line-height:1.9;color:var(--mut2);text-align:right}
.fmeta p{margin:0 0 .35rem}
.fmeta a{border-bottom:1px solid var(--line2);transition:color .2s,border-color .2s}
.fmeta a:hover{color:var(--moon);border-color:var(--amber)}

/* 详情页 */
.crumb{margin:0 0 2.2rem;font-size:.82rem;color:var(--mut2)}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb i{margin:0 .5rem;font-style:normal;color:var(--mut2)}
.ihero{padding:3rem 0 3.2rem;border-bottom:1px solid var(--line)}
.ihead{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.itxt h1{margin:0;font-family:var(--serif);font-size:clamp(2.5rem,5vw,4.1rem);font-weight:400;line-height:1.15;letter-spacing:.06em;color:var(--ink)}
.isym{margin:.9rem 0 0;font-size:1rem;letter-spacing:.08em;color:var(--amber)}
.core{margin:1.2rem 0 0;max-width:32rem;font-size:1.04rem;line-height:1.95;color:var(--mut)}
.imet{display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem;margin:1.5rem 0 0;font-size:.82rem;color:var(--mut2)}
.imet .omen{margin-left:0}
.plate{position:relative;width:min(17rem,72vw);aspect-ratio:1;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border-radius:50%;background:radial-gradient(circle at 34% 27%,#fdf7e6,#e3d8bd 55%,#a99c80 100%);box-shadow:0 2.4rem 4.5rem rgba(0,0,0,.5),inset 0 0 3rem rgba(120,105,75,.25),0 0 6rem rgba(168,155,255,.18)}
.phalo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(168,155,255,.2),transparent 68%);filter:blur(1rem)}
.plate b{font-family:var(--serif);font-size:5rem;font-weight:400;line-height:1;color:#151a28}
.plate small{font-family:var(--mono);font-size:.6rem;letter-spacing:.4em;color:rgba(21,26,40,.5)}
.plate em{font-style:normal;font-size:.82rem;letter-spacing:.2em;color:rgba(21,26,40,.62)}

/* 详情正文：左边小标题，右边内容 */
.slab{display:grid;grid-template-columns:11rem 1fr;gap:3rem;align-items:start}
.slab-k span{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;color:var(--amber)}
.slab-k h2{margin:.5rem 0 .35rem;font-family:var(--serif);font-size:1.55rem;font-weight:400;letter-spacing:.1em;color:var(--ink)}
.slab-k i{font-style:normal;font-size:.84rem;letter-spacing:.05em;color:var(--mut2)}
.classic{position:relative;padding:1.5rem 1.6rem;background:linear-gradient(160deg,rgba(215,180,124,.09),rgba(17,26,47,.66));border:1px solid rgba(215,180,124,.22);border-left:2px solid rgba(215,180,124,.55);border-radius:1rem}
.classic p{margin:0 0 .85rem;font-family:var(--serif);font-size:1.08rem;line-height:2.05;color:var(--ink2)}
.classic p:last-child{margin-bottom:0}
.src{margin:.8rem 0 0;font-size:.84rem;line-height:1.8;color:var(--mut2)}
.prose p{margin:0 0 1rem;font-size:1.04rem;line-height:2.05;color:var(--ink2)}
.prose p:last-child{margin-bottom:0}
.crowd{display:flex;flex-direction:column}
.crow{display:grid;grid-template-columns:7.5rem 1fr;gap:1.2rem;padding:.9rem 0;border-bottom:1px dashed var(--line)}
.crow:first-child{padding-top:0}
.crow:last-child{border-bottom:none;padding-bottom:0}
.crow span{font-size:.92rem;letter-spacing:.06em;color:var(--moon)}
.crow p{margin:0;font-size:.98rem;line-height:1.9;color:var(--mut)}
.advice{margin:0;padding:0;list-style:none;counter-reset:step}
.advice li{position:relative;margin-bottom:1rem;padding-left:2.8rem;font-size:.98rem;line-height:1.95;color:var(--ink2);counter-increment:step}
.advice li:last-child{margin-bottom:0}
.advice li:before{content:counter(step,decimal-leading-zero);position:absolute;top:.16rem;left:0;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;color:var(--amber);border:1px solid rgba(215,180,124,.35);border-radius:50%}
.backfind{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;padding:1rem 1.3rem;background:var(--panel);border:1px solid var(--line);border-radius:.8rem}
.backfind p{margin:0;font-size:.92rem;color:var(--mut)}
.backfind a{font-size:.9rem;color:var(--moon);border-bottom:1px solid rgba(243,233,210,.35);transition:border-color .2s}
.backfind a:hover{border-color:var(--amber)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem}
.rcard{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;transition:transform .25s,border-color .25s,background .25s}
.rcard:hover{transform:translateY(-.2rem);border-color:var(--line2);background:var(--panel2)}
.rct{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--amber)}
.rcard strong{font-family:var(--serif);font-size:1.2rem;font-weight:400;letter-spacing:.04em;color:var(--ink)}
.rsum{font-size:.88rem;line-height:1.75;color:var(--mut)}
.rcard s{position:absolute;right:1.1rem;bottom:.9rem;text-decoration:none;color:var(--mut2);transition:transform .25s,color .25s}
.rcard:hover s{transform:translateX(.25rem);color:var(--moon)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.8rem}
.pn a{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;transition:border-color .25s,background .25s}
.pn a:hover{border-color:var(--line2);background:var(--panel2)}
.pn a.r{justify-content:flex-end;text-align:right}
.pn em{font-style:normal;font-size:1.1rem;color:var(--amber)}
.pt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.pt small{font-size:.72rem;letter-spacing:.16em;color:var(--mut2)}
.pt b{font-family:var(--serif);font-size:1.05rem;font-weight:400;letter-spacing:.05em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 阅读进度条：最顶上一条细线，跟着滚动走 */
.pbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;background:rgba(178,166,235,.08);pointer-events:none}
.pbar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--amber),var(--moon),var(--indigo));box-shadow:0 0 12px rgba(243,233,210,.45);transition:width .12s linear}

/* 背景星点：一层固定的细颗粒，让深色底不那么平 */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(1.2px 1.2px at 18% 24%,rgba(255,255,255,.42),transparent 60%),radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.3),transparent 60%),radial-gradient(1px 1px at 44% 68%,rgba(255,255,255,.26),transparent 60%),radial-gradient(1.4px 1.4px at 86% 54%,rgba(247,236,217,.32),transparent 60%);background-size:340px 320px,260px 240px,420px 380px,300px 280px}
/* 一层慢慢游动的极光，给紫夜底加一点呼吸感；纯装饰，不影响阅读 */
body:after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:.75;background:radial-gradient(38rem 26rem at 30% 18%,rgba(168,155,255,.18),transparent 62%),radial-gradient(32rem 24rem at 76% 34%,rgba(120,214,214,.1),transparent 60%),radial-gradient(36rem 26rem at 48% 82%,rgba(234,166,207,.14),transparent 60%);animation:aurora 36s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){body:after{animation:none}}

/* 月相带 */
.lunarband{padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(168,155,255,.07),transparent)}
.lunarband .ln{display:flex;align-items:center;justify-content:center;gap:1.15rem;flex-wrap:wrap}
.lp{position:relative;width:1.05rem;height:1.05rem;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#f8f0da,#cbbd9c);box-shadow:0 0 1rem rgba(243,233,210,.22);opacity:.72}
.lp:after{content:"";position:absolute;inset:0;border-radius:50%;background:#0a0718}
.lp1:after{transform:translateX(-10%)}
.lp2:after{transform:translateX(-32%)}
.lp3:after{transform:translateX(-54%)}
.lp4:after{transform:translateX(-76%)}
.lp5:after{transform:translateX(76%)}
.lp6:after{transform:translateX(54%)}
.lp7:after{transform:translateX(32%)}
.lp8:after{transform:translateX(10%)}
.lword{font-family:var(--serif);font-size:.78rem;letter-spacing:.3em;color:var(--mut2);margin:0 .6rem}

/* 右侧页内小导航：只做圆点，鼠标移上去才出字 */
.dots{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:.55rem}
.dots a{display:flex;align-items:center;gap:.55rem;justify-content:flex-end;padding:.16rem 0 .16rem .6rem;color:var(--mut2)}
.dots i{width:.45rem;height:.45rem;border-radius:50%;background:rgba(178,166,235,.32);transition:all .25s}
.dots a span{font-size:.74rem;letter-spacing:.1em;opacity:0;transform:translateX(.3rem);transition:opacity .25s,transform .25s;white-space:nowrap}
.dots a:hover span,.dots a.on span{opacity:1;transform:none}
.dots a:hover i,.dots a.on i{background:var(--moon);box-shadow:0 0 0 .22rem rgba(247,236,217,.16);width:.55rem;height:.55rem}

/* 返回顶部：月相按钮，滚动一屏后淡入，外圈是阅读进度 */
.totop{position:fixed;right:1.6rem;bottom:1.8rem;z-index:60;width:3.5rem;height:3.5rem;border-radius:50%;border:1px solid var(--line2);background:rgba(12,9,28,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.04rem;opacity:0;transform:translateY(.8rem) scale(.94);pointer-events:none;transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s;backdrop-filter:blur(10px)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:rgba(247,236,217,.55);box-shadow:0 0 2rem rgba(168,155,255,.2)}
.totop svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);fill:none}
.totop .track{stroke:rgba(178,166,235,.16);stroke-width:1.6}
.totop .ring{stroke:var(--moon);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset .12s linear}
.tarrow{font-size:.98rem;line-height:1;color:var(--moon)}
.tword{font-size:.56rem;letter-spacing:.12em;color:var(--mut2)}

/* 详情页：小标题列跟随滚动，长页面不会看丢位置 */
@media (min-width:981px){.slab-k{position:sticky;top:6rem}}
/* 「梦境现场」这段像开场白，用引号和大一号的宋体 */
.scene{margin:0;padding:1.5rem 1.7rem 1.5rem 3.4rem;position:relative;background:linear-gradient(150deg,rgba(168,155,255,.09),rgba(30,23,58,.5));border:1px solid var(--line);border-radius:1rem;font-family:var(--serif);font-size:1.14rem;line-height:2.05;color:var(--ink2)}
.scene:before{content:"“";position:absolute;top:.35rem;left:.9rem;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--indigo);opacity:.34}
/* 具体案例：两列小卡片，每张一个身份标签 */
.cut{margin:0 0 1.3rem;max-width:44rem;font-size:.96rem;line-height:1.95;color:var(--mut)}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:.9rem}
.casegroup + .casegroup{margin-top:1.6rem}
.casegroup h3{display:flex;align-items:baseline;gap:.75rem;margin:1.8rem 0 .85rem;font-family:var(--serif);font-size:1.08rem;font-weight:400;letter-spacing:.16em;color:var(--moon)}
.casegroup h3:before{content:"";align-self:center;width:.5rem;height:.5rem;border-radius:50%;background:var(--amber)}
.casegroup h3 b{font-weight:400}
.casegroup h3 i{font-style:normal;font-family:var(--body);font-size:.78rem;letter-spacing:.04em;color:var(--mut2)}
.case{padding:1.1rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem;transition:border-color .25s,background .25s,transform .25s}
.case:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-.16rem)}
.ctag{display:inline-block;margin-bottom:.55rem;padding:.08rem .6rem;font-size:.71rem;letter-spacing:.08em;color:var(--amber);background:rgba(224,189,139,.07);border:1px solid rgba(224,189,139,.26);border-radius:999px}
.ctag.m{color:var(--indigo);background:rgba(168,155,255,.08);border-color:rgba(168,155,255,.34)}
.ctag.w{color:var(--rose);background:rgba(234,166,207,.08);border-color:rgba(234,166,207,.34)}
.case p{margin:0;font-size:.96rem;line-height:1.9;color:var(--ink2)}
/* 月亮牌外面的细圈 */
.pring{position:absolute;inset:-10%;width:120%;height:120%;fill:none;stroke:rgba(21,26,40,.14);stroke-width:.7}
.pring .d{stroke-dasharray:2 7;stroke:rgba(21,26,40,.22)}

/* 窄屏 */
@media (max-width:1199px){.dots{display:none}}
@media (max-width:980px){.hgrid{grid-template-columns:1fr;gap:2.4rem}.hright{order:2}.moon{width:min(17rem,60vw)}.mcap{margin-top:1.4rem}.ihead{grid-template-columns:1fr;gap:2rem}.plate{width:min(13rem,52vw);order:2}.slab{grid-template-columns:1fr;gap:1.4rem}.slab-k{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}.slab-k h2{margin:0}.sec{padding:3.4rem 0}.scene{font-size:1.06rem;padding:1.2rem 1.2rem 1.2rem 2.8rem}}
@media (max-width:760px){.three{grid-template-columns:1fr}.stat{gap:1.8rem}.tnav{gap:1rem;font-size:.82rem;flex-wrap:wrap}.fmeta{text-align:left}.foot .wrap{flex-direction:column;gap:1rem}}
@media (max-width:640px){.wrap{padding:0 1.15rem}.brand span,.brand i{display:none}.tnav{gap:.9rem}.hero{padding:3rem 0 2.6rem}.hcopy h1{font-size:2.55rem;letter-spacing:.03em}.lead{font-size:1rem}.stat{margin-top:2rem}.stat b{font-size:1.5rem}.dgrid{grid-template-columns:1fr}.sec-head{grid-template-columns:2.6rem 1fr}.sec-head h2{font-size:1.45rem}.crow{grid-template-columns:5.6rem 1fr;gap:.9rem}.pn{grid-template-columns:1fr}.fbox kbd{display:none}.classic{padding:1.2rem 1.1rem}.plate b{font-size:4rem}.itxt h1{font-size:2.5rem}.totop{width:3rem;height:3rem;right:1rem;bottom:1.15rem}.tword{display:none}.lunarband .lp{width:.9rem;height:.9rem}.lword{font-size:.7rem;letter-spacing:.2em}.cases{grid-template-columns:1fr}.dg{font-size:4.6rem}}
@media (prefers-reduced-motion:reduce){.star{animation:none}.dcard,.dcard.anim{transition:none;opacity:1;transform:none}.pbar i,.totop .ring{transition:none}}
/* ===== 继续看：详情页底部的横向内链，保证任何一页都还能继续走下去 ===== */
.xref{max-width:76rem;margin:2.8rem auto 0;padding:1.7rem 1.6rem 0;border-top:1px solid var(--line)}
.xref .xt{margin:0 0 .9rem;font-family:var(--serif);font-size:.9rem;letter-spacing:.32rem;color:var(--amber)}
.xref ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;background:#0f0b21;border:1px solid var(--line)}
.xref li{display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.78rem .95rem;background:#0f0b21;border-bottom:1px solid var(--line);}
.xref li a{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.98rem;color:var(--ink);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.xref li a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.xref li span{flex:none;max-width:46%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;color:var(--mut2)}
.xref .xb{display:flex;gap:1.4rem;margin:1rem 0 0;font-size:.9rem}
.xref .xb a{color:var(--amber)}
@media (max-width:760px){.xref ul{grid-template-columns:1fr}}
/* 还没解锁的梦象：只是占位，别给鼠标「能点开」的错觉 */
.dcard.soon{cursor:default;opacity:.62}
.dcard.soon:hover{transform:none;border-color:var(--line);background:var(--panel);box-shadow:none}
.dcard.soon:hover:before,.dcard.soon:hover:after{opacity:0}
.dcard.soon:hover .dg{opacity:.09;transform:none}
.dcard.soon:hover .dmore s{transform:none;color:inherit}