:root{--bg:#160d0c;--line:#d8b26a2e;--line2:#d8b26a17;--gold:#d9b36c;--gold2:#f3ddab;--ink:#efe7d6;--mut:#b3a08f;--bro:#b87333;--wine:#c2506b;--amber:#d08b3c;--warn:#f5c46a;--bad:#f08a9b;--serif:"Songti SC","STSong","SimSun",Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:13px}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg);font:1rem/1.95 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}
#stars{position:fixed;inset:0;z-index:-3;background:radial-gradient(1200px 700px at 50% -12%,#3a1d12 0%,transparent 62%),radial-gradient(900px 600px at 88% 8%,#43201a 0%,transparent 55%),linear-gradient(180deg,#160d0c,#1c110f 50%,#160d0c)}
#stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f3ddab;opacity:.5;animation:tw 4.5s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.15;transform:scale(.7)}to{opacity:.8;transform:scale(1.2)}}
.zring{position:fixed;top:-38vw;left:50%;transform:translateX(-50%);width:86vw;height:86vw;max-width:62.5rem;max-height:62.5rem;border:1px solid #d8b26a12;border-radius:50%;z-index:-2;pointer-events:none;animation:spin 240s linear infinite}
.zring:before{content:"";position:absolute;inset:9%;border:1px dashed #d8b26a0f;border-radius:50%}
.zring:after{content:"✦";position:absolute;top:-.9rem;left:50%;color:#d8b26a55;font-size:1.6rem}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:.3rem}
.pbar{position:fixed;top:0;left:0;right:0;height:2px;background:#d8b26a14;z-index:50}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--wine));transition:width .35s ease}
/* ===== 塔罗卡片：双层烫金框 + 顶部星饰 ===== */
.tcard{position:relative;margin:2.2rem 0;padding:2.6rem 2.7rem;border-radius:1.6rem;background:linear-gradient(165deg,#241614f5,#1a0f0df5);border:1px solid var(--line);box-shadow:0 2.2rem 5.5rem #00000073}
.tcard:before{content:"";position:absolute;inset:.7rem;border:1px solid var(--line2);border-radius:1.1rem;pointer-events:none}
.tcard:after{content:"✦";position:absolute;top:-1.05rem;left:50%;transform:translateX(-50%);padding:0 .9rem;background:var(--bg);color:var(--gold);font-size:1.25rem;line-height:2rem}
/* ===== 章节标题：衬线 + 两侧金线 ===== */
.stitle{display:flex;align-items:center;gap:1.3rem;margin:0 0 1.6rem;font-family:var(--serif);font-size:2.05rem;font-weight:700;letter-spacing:.28rem;color:var(--gold2)}
.stitle:before,.stitle:after{content:"";flex:1;height:1px}
.stitle:before{background:linear-gradient(90deg,transparent,var(--gold))}
.stitle:after{background:linear-gradient(90deg,var(--gold),transparent)}
.stitle.sm{font-size:1.72rem}
.orn{text-align:center;color:#d8b26a8c;letter-spacing:1.6rem;text-indent:1.6rem;font-size:1.05rem;margin:1.2rem 0}
.lede{color:#d9c9b0;font-size:1.5rem;margin:.4rem 0 1.6rem}
.prose p{font-size:1.55rem;color:#e0d3bd;margin:1.15rem 0}
.prose b{color:var(--gold2)}
.prose .quote{margin:1.6rem 0;padding:1.5rem 1.9rem;border-left:.19rem solid var(--gold);background:#d8b26a0d;font-family:var(--serif);font-size:1.62rem;color:var(--gold2);letter-spacing:.06rem;border-radius:0 1rem 1rem 0}
/* ===== 首屏 ===== */
.hero{position:relative;padding:6rem 2rem 2.2rem;text-align:center}
.kicker{display:inline-block;font-family:var(--serif);font-size:1.28rem;letter-spacing:.42rem;text-indent:.42rem;color:var(--gold);border:1px solid #d8b26a4d;padding:.5rem 1.5rem;border-radius:999rem;background:#d8b26a0f}
.hero h1{margin:1.7rem auto 1.1rem;max-width:53.75rem;font-family:var(--serif);font-size:3.5rem;line-height:1.5;letter-spacing:.1rem;background:linear-gradient(115deg,#f3ddab 8%,#fff8e6 30%,#d9b36c 52%,#c2506b 78%,#f3ddab 95%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite}
@keyframes foil{to{background-position:220% 0}}
.hero .sub{font-size:1.62rem;color:#d9c9b0;letter-spacing:.14rem}
.hero .meta{margin-top:1.15rem;font-size:1.3rem;color:#a08a6f;letter-spacing:.1rem}
.wrap{max-width:67.5rem;margin:0 auto;padding:1.2rem 2rem 3rem}
/* ===== 自测题卡 ===== */
.sec-band{margin:3.6rem 0 1.7rem;text-align:center;font-family:var(--serif);font-size:1.62rem;letter-spacing:.3rem;color:var(--mut)}
.sec-band em{font-style:normal;color:var(--gold2)}
.qcard{margin:1.9rem 0;padding:2.3rem 2.4rem;border-radius:1.5rem;background:linear-gradient(170deg,#221412e6,#1a0f0de6);border:1px solid var(--line2);transition:border-color .3s,box-shadow .3s,transform .3s}
.qcard.active{border-color:#d8b26a59;box-shadow:0 0 0 .19rem #d8b26a1a;transform:translateY(-.19rem)}
.qcard.done{border-color:#d8b26a40}
.qlead{margin:0 0 1rem;color:#bfa888;font-size:1.45rem;letter-spacing:.05rem}
.qcard h3{margin:0 0 1.6rem;font-family:var(--serif);font-size:1.92rem;line-height:1.6;color:var(--ink)}
.opts{display:grid;gap:1rem}
.opt{display:flex;align-items:center;gap:1.1rem;width:100%;text-align:left;cursor:pointer;font:inherit;font-size:1.58rem;color:#e8dcc4;padding:1.3rem 1.55rem;border-radius:1.15rem;background:#ffffff08;border:1px solid #ffffff14;transition:all .22s}
.opt:hover{background:#d8b26a12;border-color:#d8b26a59;transform:translateY(-.13rem)}
.opt.on{background:linear-gradient(120deg,#d9b36c,#b9863c);border-color:transparent;color:#241705;box-shadow:0 1rem 2.4rem #d9b36c3d}
.opt .k{flex:0 0 2.7rem;height:2.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.42rem;font-weight:700;background:#d8b26a1a;color:var(--gold2);border:1px solid #d8b26a40}
.opt.on .k{background:#24170526;color:#241705;border-color:transparent}
.reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s ease,opacity .35s ease,margin-top .3s}
.reveal.show{grid-template-rows:1fr;opacity:1;margin-top:1.45rem}
.reveal>p{overflow:hidden;min-height:0}
@supports not (grid-template-rows: 0fr){.reveal{display:block;max-height:0}.reveal.show{max-height:26.25rem}}
.reveal p{margin:0;padding:1.3rem 1.6rem;border-left:.19rem solid var(--gold);border-radius:0 1rem 1rem 0;background:#d8b26a0f;color:#f0e2c0;font-size:1.48rem}
/* ===== 生日选择 ===== */
.birth{text-align:center}
.brow{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin:1.7rem 0}
.brow select{font:inherit;font-size:1.68rem;color:var(--gold2);padding:1.1rem 1.5rem;border-radius:1.1rem;background:#201311;border:1px solid #d8b26a4d;letter-spacing:.08rem}
.brow option{color:#efe7d6;background:#201311}
.bhint{margin-top:1.25rem;font-size:1.65rem;color:var(--gold2);min-height:2.5rem;font-family:var(--serif);letter-spacing:.1rem}
.go{display:block;width:100%;margin:1.2rem 0 0;cursor:pointer;font-family:var(--serif);font-size:2.05rem;font-weight:700;letter-spacing:.4rem;text-indent:.4rem;color:#241705;padding:1.75rem;border:0;border-radius:1.3rem;background:linear-gradient(120deg,#f3ddab,#d9b36c 55%,#b9863c);box-shadow:0 1.5rem 3.2rem #d9b36c33;transition:transform .2s,filter .2s}
.go:hover{transform:translateY(-.19rem);filter:brightness(1.06)}
.go:disabled{opacity:.32;cursor:not-allowed;transform:none;filter:grayscale(.55)}
/* ===== 分布图 ===== */
.dist{display:grid;gap:.78rem}
.dist .row{display:grid;grid-template-columns:16.2rem 1fr 4.8rem;align-items:center;gap:1.1rem;font-size:1.45rem;color:#d9c9ae;padding:.62rem .95rem;border-radius:1rem;transition:all .22s;opacity:0;transform:translateX(-.75rem);animation:rowIn .55s ease forwards;text-decoration:none;border:1px solid transparent}
@keyframes rowIn{to{opacity:1;transform:none}}
.dist .row:hover{background:#d8b26a0f;border-color:var(--line2);transform:translateX(.25rem);text-decoration:none}
.dist .row .nm{display:flex;align-items:center;gap:.66rem;white-space:nowrap}
.dist .row .nm b{flex:0 0 2.1rem;height:2.1rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem;font-weight:700;background:#ffffff10;color:#d9c9b0}
.dist .row .nm b.r1{background:linear-gradient(135deg,#f7e3ae,#c99a45);color:#241705}
.dist .row .nm b.r2{background:linear-gradient(135deg,#eef2f8,#a9b6c8);color:#1c2432}
.dist .row .nm b.r3{background:linear-gradient(135deg,#f0cdb0,#b07a48);color:#2b1a09}
.dist .row .nm em.el{font-style:normal;font-size:1.02rem;padding:.12rem .55rem;border-radius:.5rem;border:1px solid}
.el-fire{color:#fca5a5;border-color:#f8717155;background:#ef444414}
.el-earth{color:#fcd34d;border-color:#f59e0b55;background:#f59e0b14}
.el-air{color:#e8dcc4;border-color:#d8b26a55;background:#d8b26a10}
.el-water{color:#d98e5f;border-color:#d98e5f55;background:#d98e5f12}
.dist .row .bg{position:relative;display:block;height:1.25rem;border-radius:.62rem;background:#ffffff0a;border:1px solid #ffffff0f;overflow:hidden}
.dist .row .bg i{display:block;height:100%;border-radius:.62rem;width:0;animation:barIn 1.1s cubic-bezier(.2,.8,.2,1) forwards;position:relative}
.dist .row .bg i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff3d,transparent);transform:translateX(-100%);animation:sweep 2.8s 1.1s ease 3}
@keyframes barIn{from{width:0}}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.dist .row .vv{text-align:right;font-family:var(--serif);font-size:1.62rem;font-weight:700;color:var(--gold2)}
.dist .row .vv small{font-size:1rem;color:#a08a6f;font-weight:400;margin-left:.2rem}
/* ===== 星座关系网 ===== */
.net-wrap{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.net-wrap svg{width:100%;max-width:38.75rem;height:auto}
.net-wrap .nd{cursor:pointer}
.net-wrap .nd circle{transition:all .2s}
.net-wrap .nd:hover circle{stroke:#c2506b;stroke-width:2.4}
.net-info{min-height:2.6rem;padding:.9rem 1.6rem;border-radius:1rem;background:#d8b26a0d;border:1px solid var(--line2);font-size:1.4rem;color:#d9c9ae;max-width:35rem;text-align:center;transition:all .25s}
.net-info b{color:var(--gold2);font-weight:800}
/* ===== 目录宫格 ===== */
.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.05rem}
.toc-grid a{display:flex;min-width:0;align-items:center;gap:.95rem;padding:1.15rem 1.3rem;border-radius:1.2rem;background:linear-gradient(160deg,#ffffff0a,#ffffff05);border:1px solid var(--line2);color:#e8dcc4;font-size:1.42rem;transition:all .2s}
.toc-grid a:hover{background:linear-gradient(160deg,#d8b26a14,#c2506b0d);border-color:#d8b26a59;text-decoration:none;transform:translateY(-.19rem);box-shadow:0 .8rem 1.8rem #00000040}
.toc-grid .rk{flex:0 0 2.5rem;height:2.5rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.22rem;font-weight:700;background:#d8b26a14;color:var(--gold2)}
.toc-grid .tn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-grid .tv{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:var(--gold2);text-shadow:0 0 1.2rem #d9b36c40}
.toc-grid .tv small{font-size:1rem;color:#a08a6f;font-weight:400;margin-left:.15rem}
/* ===== 结果页 ===== */
.rhero{padding:5rem 2rem 1.4rem;text-align:center}
.rbig{font-family:var(--serif);font-size:10rem;line-height:1.02;font-weight:700;background:linear-gradient(120deg,#f3ddab,#d9b36c 45%,#c2506b 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 1.63rem #d9b36c2e)}
.runit{font-size:1.85rem;color:var(--mut);margin-top:.5rem;letter-spacing:.2rem}
.rmeta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.7rem}
/* 结果页顶部的数据来源行：一句话交代指数的出处与方法，点进去看细则 */
.src-line{margin:1.05rem auto 0;max-width:53.75rem;font-size:1.3rem;color:#a08a6f;letter-spacing:.05rem;line-height:1.7}
.src-line a{color:#d9c9b0;border-bottom:1px dashed #d8b26a59;white-space:nowrap}
.src-line a:hover{color:var(--gold2);text-decoration:none}
.chip{font-size:1.38rem;padding:.6rem 1.4rem;border-radius:999rem;background:#d8b26a0f;border:1px solid #d8b26a40;color:#e8dfc8;letter-spacing:.08rem}
.me{margin:0 0 .6rem;padding:1.9rem 2.1rem;border-radius:1.3rem;background:linear-gradient(120deg,#d8b26a1c,#c2506b14);border:1px solid #d8b26a4d}
.me h4{margin:0 0 .75rem;font-family:var(--serif);font-size:1.62rem;color:var(--gold2);letter-spacing:.14rem}
.me .sc{font-family:var(--serif);font-size:2.8rem;font-weight:700;color:#fff8e6}
.me .bd{color:#d9c9ae;font-size:1.5rem}
.bar{margin:1.15rem 0}
.bar .tr{height:.85rem;border-radius:.5rem;background:#ffffff0f;overflow:hidden;border:1px solid #ffffff12}
.bar .tr i{display:block;height:100%;border-radius:.5rem;background:linear-gradient(90deg,var(--gold),var(--wine))}
.btn-gold{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.35rem;margin-right:.9rem;cursor:pointer;font:inherit;font-size:1.45rem;letter-spacing:.1rem;color:var(--gold2);background:transparent;border:1px solid #d8b26a66;padding:.95rem 1.7rem;border-radius:999rem;transition:all .2s}
.btn-gold:hover{background:linear-gradient(120deg,#d9b36c,#b9863c);color:#241705;border-color:transparent}
.btn-gold:disabled{opacity:.5;cursor:default}
.poster-box{margin-top:1.5rem;text-align:center}
.poster-box img{max-width:18.75rem;width:100%;border-radius:1.2rem;border:1px solid var(--line);box-shadow:0 1.6rem 3.6rem #00000080}
.poster-box .save{margin-top:1rem}
/* ===== 雷达 / 运势 / 对比 ===== */
.radar-wrap{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.radar-wrap svg{width:100%;max-width:27.5rem;height:auto;filter:drop-shadow(0 0 1.38rem #d9b36c24)}
.radar-wrap .rp{stroke-dasharray:1400;stroke-dashoffset:1400;animation:drawR 1.5s .25s ease forwards}
@keyframes drawR{to{stroke-dashoffset:0}}
.radar-wrap .rv{cursor:pointer;transition:r .18s}
.radar-info{min-height:2.7rem;padding:.95rem 1.55rem;border-radius:1.05rem;background:#d8b26a0d;border:1px solid var(--line2);font-size:1.4rem;color:#d9c9ae;max-width:33.75rem;text-align:center;transition:all .25s}
.radar-info b{color:var(--wine);font-weight:800}
.legend{display:flex;gap:1.7rem;flex-wrap:wrap;justify-content:center;font-size:1.35rem;color:#d9c9b0}
.legend span{display:inline-flex;align-items:center;gap:.58rem}
.legend i{width:1.1rem;height:1.1rem;border-radius:.34rem;display:inline-block}
.week-wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.week-wrap svg{width:100%;max-width:37.5rem;height:auto}
.week-wrap .wd{cursor:pointer}
.cmp-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.2rem 0}
.cmp-btns button{cursor:pointer;font:inherit;font-size:1.45rem;padding:.75rem 1.25rem;border-radius:999rem;background:#ffffff08;border:1px solid #ffffff1a;color:#e8dcc4;transition:all .18s}
.cmp-btns button:hover{border-color:#b8733388;transform:translateY(-.13rem)}
.cmp-btns button.on{background:linear-gradient(120deg,#b87333,#c2506b);border-color:transparent;color:#fff}
.cmp-out{margin-top:1.3rem;font-size:1.45rem;color:#d9c9ae}
.cmp-out .drow{display:grid;grid-template-columns:6.2rem 1fr 12.5rem;align-items:center;gap:1rem;padding:.62rem .9rem;border-bottom:1px dashed #ffffff14}
.cmp-out .dnm{font-size:1.38rem;color:#d9c9ae}
.cmp-out .dbar{position:relative;height:1rem;border-radius:.5rem;background:#ffffff0a;border:1px solid #ffffff12;overflow:hidden}
.cmp-out .dbar:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#d8b26a66}
.cmp-out .dbar .a{position:absolute;right:50%;top:0;bottom:0;background:linear-gradient(270deg,#c2506b,#c2506b55)}
.cmp-out .dbar .b{position:absolute;left:50%;top:0;bottom:0;background:linear-gradient(90deg,#b87333,#b8733355)}
.cmp-out .dvv{font-size:1.35rem;color:#d9c9ae;text-align:right;white-space:nowrap}
.cmp-out .va{color:#e58aa0}
.cmp-out .vb{color:#d8a065}
.cmp-out .dleg{display:flex;gap:1.6rem;justify-content:center;font-size:1.32rem;color:#b3a08f;margin-bottom:.7rem}
.cmp-out .up{color:var(--wine);font-weight:700}
.cmp-out .dn{color:var(--bro);font-weight:700}
.cmp-out .verdict{margin-top:1.1rem;padding:1.1rem 1.4rem;border-radius:1rem;background:#b8733314;border:1px solid #b8733340;color:#e3d3b8}
/* ===== 观点对撞 / 热评 ===== */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.vs>div{padding:1.65rem 1.75rem;border-radius:1.3rem;font-size:1.5rem;line-height:1.85}
.vs .y{background:linear-gradient(165deg,#22c55e1f,#22c55e0a);border:1px solid #22c55e45;color:#c9f5da}
.vs .n{background:linear-gradient(165deg,#ef44441f,#ef44440a);border:1px solid #ef444445;color:#f8d2d2}
.vs h4{margin:.2rem 0 .8rem;font-family:var(--serif);font-size:1.55rem;letter-spacing:.1rem}
.hot p{margin:.95rem 0;padding:1.15rem 1.5rem;border-radius:1.05rem;background:#ffffff07;border:1px solid var(--line2);font-size:1.46rem;color:#ddcfb4}
.hot p b{color:var(--gold2);font-weight:700}
.hot .v{float:right;color:#a08a6f;font-size:1.3rem;cursor:pointer;user-select:none;transition:color .2s}
.hot .v:hover{color:var(--gold2)}
.hot .v.on{color:var(--bad)}
/* ===== 互动游戏 ===== */
.game{margin:1.7rem 0;padding:1.95rem 2.05rem;border-radius:1.4rem;background:linear-gradient(165deg,#d08b3c12,#d08b3c06);border:1px solid #d08b3c38}
.game.pink{background:linear-gradient(165deg,#c2506b12,#c2506b06);border-color:#c2506b3d}
.game .gh{font-family:var(--serif);font-size:1.58rem;letter-spacing:.12rem;color:var(--amber);margin:0 0 .4rem}
.game.pink .gh{color:#d9a08a}
.game .gd{margin:0 0 1.35rem;color:#c0a988;font-size:1.4rem}
.cl{display:grid;gap:.85rem}
.cl label{display:flex;align-items:flex-start;gap:.95rem;cursor:pointer;padding:.95rem 1.25rem;border-radius:1.05rem;background:#ffffff08;border:1px solid #ffffff14;font-size:1.45rem;color:#e8dcc4;transition:all .18s}
.cl label:hover{border-color:#d08b3c66}
.cl input{margin-top:.75rem;accent-color:#d08b3c;width:1.32rem;height:1.32rem;flex:none}
.cl label.on{background:#d08b3c1f;border-color:#d08b3c66}
.gout{margin-top:1.35rem;padding:1.35rem 1.55rem;border-radius:1.15rem;font-size:1.5rem;line-height:1.8;opacity:0;transform:translateY(.38rem);transition:all .35s}
.gout.show{opacity:1;transform:none}
.pair-box{margin:1.45rem 0}
.pair-btns{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.pair-btns button{cursor:pointer;font:inherit;font-size:1.58rem;padding:.95rem .35rem;border-radius:1rem;background:#ffffff08;border:1px solid #ffffff1a;color:#e8dcc4;transition:all .18s}
.pair-btns button:hover{transform:translateY(-.13rem);border-color:#c2506b66}
.pair-btns button.on{background:linear-gradient(120deg,#c2506b,#b87333);border-color:transparent;color:#fff}
.pair-out{margin-top:1.45rem;opacity:0;transform:translateY(.38rem);transition:all .35s}
.pair-out.show{opacity:1;transform:none}
.pscore{font-family:var(--serif);font-size:4rem;font-weight:700;background:linear-gradient(120deg,#f3ddab,#c2506b);-webkit-background-clip:text;background-clip:text;color:transparent}
.pbar2{height:.9rem;border-radius:.5rem;background:#ffffff0f;overflow:hidden;margin:.85rem 0 1.15rem;border:1px solid #ffffff12}
.pbar2 i{display:block;height:100%;border-radius:.5rem;background:linear-gradient(90deg,#c2506b,#d9b36c);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.ptxt{color:#e0d3bd;font-size:1.5rem;line-height:1.85}
/* ===== 抽签 ===== */
.draw{margin:1.7rem 0;padding:2.2rem;border-radius:1.5rem;background:linear-gradient(165deg,#c2506b17,#b8733310);border:1px solid #c2506b45;text-align:center}
.draw h4{margin:.15rem 0 .85rem;font-family:var(--serif);font-size:1.75rem;color:#f3d3c0;letter-spacing:.2rem}
.chuo{display:inline-flex;align-items:center;justify-content:center;width:9rem;height:9rem;border-radius:50%;cursor:pointer;font-family:var(--serif);font-size:1.75rem;font-weight:700;letter-spacing:.2rem;white-space:nowrap;color:#fff8e6;background:radial-gradient(circle at 32% 28%,#c2506b,#8b2c4a);box-shadow:0 1.15rem 2.6rem #8b2c4a52,0 0 0 .38rem #d8b26a22;border:0;transition:transform .18s}
.chuo:hover{transform:scale(1.06)}
.chuo:disabled{opacity:.55;cursor:default;transform:none}
.lot{margin-top:1.55rem;min-height:6.5rem}
.lot .big{font-family:var(--serif);font-size:2.2rem;font-weight:700;letter-spacing:.4rem;text-indent:.4rem;color:var(--gold2)}
.lot .txt{margin:.65rem auto 0;max-width:28.75rem;font-size:1.55rem;color:#f0e2c0;line-height:1.9}
.lot .again{margin-top:.85rem;font-size:1.3rem;color:#b3a08f}
/* ===== 摇签手速小游戏：全屏互动层，每次点击都有反馈 ===== */
.lotgame{position:fixed;inset:0;z-index:80;background:#0d0705e8;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.lg-box{text-align:center;padding:1rem}
.lg-h{font-family:var(--serif);font-size:1.9rem;color:var(--gold2);letter-spacing:.2rem}
.lg-sub{margin-top:.6rem;font-size:1.3rem;color:#d9c9ae}
.lg-tap{display:flex;align-items:center;justify-content:center;width:10.5rem;height:10.5rem;margin:1.6rem auto 0;border-radius:50%;cursor:pointer;font-size:3rem;background:radial-gradient(circle at 32% 28%,#c2506b,#8b2c4a);box-shadow:0 1.2rem 2.8rem #8b2c4a52,0 0 0 .38rem #d8b26a22;border:0;user-select:none;-webkit-user-select:none;transition:transform .12s}
.lg-tap:active{transform:scale(.93)}
.lg-cnt{margin-top:1.2rem;font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--gold2)}
.lg-bar{width:17rem;max-width:80vw;height:.55rem;margin:.9rem auto 0;border-radius:.3rem;background:#ffffff14;overflow:hidden}
.lg-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c2506b,#d9b36c)}
.lg-msg{margin-top:1rem;font-size:1.4rem;color:var(--warn);min-height:2.2rem}
.lg-btns{margin-top:.6rem;display:flex;gap:1rem;justify-content:center}
.lg-btns button{cursor:pointer;font:inherit;font-size:1.35rem;padding:.7rem 1.6rem;border-radius:999rem;border:1px solid #d8b26a66;color:var(--gold2);background:transparent}
.lg-btns button.pri{background:linear-gradient(120deg,#f3ddab,#d9b36c);color:#241705;border:0}
.lg-rip{position:fixed;z-index:81;width:1.2rem;height:1.2rem;margin:-.6rem 0 0 -.6rem;border-radius:50%;border:2px solid #f3ddab;pointer-events:none;animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(7);opacity:0}}
.shake{animation:shk .55s ease}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-.38rem)}40%{transform:translateX(.38rem)}60%{transform:translateX(-.25rem)}80%{transform:translateX(.25rem)}}
.nav2{margin:2.7rem 0 0;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.nav2 a{padding:1.1rem 1.85rem;border-radius:999rem;background:#ffffff08;border:1px solid var(--line);font-size:1.5rem}
.nav2 a:hover{background:#d8b26a1a;text-decoration:none}
.foot{margin:3.5rem 0 0;padding:2rem;border-top:1px solid var(--line2);color:#a08a6f;font-size:1.32rem;text-align:center;letter-spacing:.08rem}
.disc{margin:2.1rem 0 0;padding:1.5rem 1.7rem;border-radius:1.2rem;background:#ffffff06;border:1px dashed #d8b26a33;color:#b3a08f;font-size:1.36rem;line-height:1.95}
/* ===== 语义化样式：替代逐页内联样式，改样式只改这一处 ===== */
.rh1{margin:1.7rem auto 0;max-width:53.75rem;font-family:var(--serif);font-size:2.4rem;line-height:1.62;font-weight:700;letter-spacing:.08rem;color:var(--ink)}
.sec-gap{margin-top:2.4rem}
.top0{padding-top:0}
.body-copy{color:#e0d3bd;font-size:1.55rem;margin:1.15rem 0}
.prose-list{color:#e0d3bd;font-size:1.55rem;padding-left:2.25rem;margin:1.15rem 0}
.prose-list li{margin:.6rem 0}
.me-note{margin-top:.8rem;font-size:1.32rem;color:var(--mut)}
.warn{margin-top:1.85rem;padding:1.45rem 1.65rem;border-left:.19rem solid var(--gold);border-radius:0 1rem 1rem 0;background:#d8b26a0f;color:#f0e2c0;font-size:1.5rem}
.gd-note{color:#e0cdb8;font-size:1.45rem;margin:.55rem 0 1.25rem}
.disc.mt{margin-top:1.6rem}
.tiny-note{text-align:center;color:var(--mut);font-size:1.32rem;margin-top:1.25rem}
/* 面包屑：一眼看清这页在站点里的位置 */
.crumb{margin:0 0 .5rem;text-align:center;font-size:1.28rem;color:#a08a6f;letter-spacing:.06rem}
.crumb a{color:#d9c9b0}
.crumb a:hover{color:var(--gold2)}
.crumb i{font-style:normal;margin:0 .55rem;color:#6b5a48}
/* 五维逐维解读：左边维度名+分数，右边一段话说透这一维 */
.dimlist{display:grid;gap:.95rem;margin:1.5rem 0 0}
.dimlist .di{display:grid;grid-template-columns:10.5rem 1fr;gap:1.2rem;align-items:start;padding:1.25rem 1.5rem;border-radius:1.15rem;background:#ffffff06;border:1px solid var(--line2)}
.dimlist .dn{display:flex;align-items:baseline;gap:.6rem;font-family:var(--serif);font-size:1.42rem;color:#d9c9b0}
.dimlist .dn b{font-size:2rem;color:var(--gold2)}
.dimlist .dt{margin:0;font-size:1.44rem;color:#ddcfb4;line-height:1.8}
/* ===== 方法说明区（#sec-method）：小标题、维度定义、权重条 ===== */
/* 小标题：左边一根金线的左对齐标题，比居中金线大标题安静，适合一节节往下读 */
.mh{position:relative;margin:2.4rem 0 1.1rem;padding-left:1.5rem;font-family:var(--serif);font-size:1.72rem;font-weight:700;letter-spacing:.14rem;color:var(--gold2)}
.mh:before{content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:.34rem;border-radius:.2rem;background:linear-gradient(180deg,var(--gold2),var(--wine))}
/* 维度定义：左列只放维度名，宽度跟着字走，不再留结果页那种放「大分数」的空档 */
.dimlist.defs .di{grid-template-columns:auto 1fr;gap:1.35rem;align-items:center;background:linear-gradient(160deg,#ffffff08,#ffffff04)}
.dimlist.defs .dn{font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--gold2);letter-spacing:.06rem;white-space:nowrap;line-height:1.7}
/* 权重条：五段色带按比例排开，色带上直接写百分比，下方配图例 */
.wprior{margin:1.35rem 0 0;padding:1.5rem 1.6rem;border-radius:1.2rem;background:#ffffff06;border:1px solid var(--line2)}
.wbar{display:flex;height:3.4rem;border-radius:.85rem;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12}
.wbar i{display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--serif);font-size:1.35rem;font-weight:700;color:#241705;text-shadow:0 1px 0 #ffffff59}
.wleg{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-top:1.15rem;font-size:1.36rem;color:#d9c9b0}
.wleg span{display:inline-flex;align-items:center;gap:.55rem}
.wleg em{width:1.1rem;height:1.1rem;border-radius:.3rem;display:inline-block}
/* 分场景卡：热恋 / 异地 / 社交场 / 暧昧期，各说各的，不套模板 */
.scenes{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin:1.5rem 0 0}
.scene{padding:1.4rem 1.55rem;border-radius:1.2rem;background:linear-gradient(160deg,#ffffff0a,#ffffff05);border:1px solid var(--line2)}
.scene h4{margin:0 0 .55rem;font-family:var(--serif);font-size:1.5rem;color:var(--gold2);letter-spacing:.1rem}
.scene p{margin:0;font-size:1.44rem;color:#ddcfb4;line-height:1.8}
/* FAQ：页面显示的问答必须和 JSON-LD 里写的一字不差 */
.faq{display:grid;gap:.9rem;margin:1.5rem 0 0}
.faq .qa{padding:1.35rem 1.55rem;border-radius:1.15rem;background:#ffffff06;border:1px solid var(--line2)}
.faq .q{margin:0 0 .55rem;font-family:var(--serif);font-size:1.5rem;color:var(--gold2)}
.faq .a{margin:0;font-size:1.44rem;color:#e0d3bd;line-height:1.85}
/* 轻提示：复制成功、海报生成这些反馈，统一从屏幕底部弹一条 */
.iatoast{position:fixed;left:50%;bottom:2.4rem;transform:translate(-50%,1.5rem);z-index:90;padding:.95rem 1.7rem;border-radius:999rem;background:linear-gradient(120deg,#f3ddab,#d9b36c);color:#241705;font-size:1.4rem;font-weight:700;letter-spacing:.08rem;box-shadow:0 1rem 2.6rem #00000066;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center}
.iatoast.show{opacity:1;transform:translate(-50%,0)}
/* 回主干邀请条：没做自测直接进结果页时，给一条「回去测」的入口 */
.invite{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;margin:1.6rem 0 0;padding:1.35rem 1.6rem;border-radius:1.2rem;background:linear-gradient(120deg,#d8b26a14,#c2506b10);border:1px solid #d8b26a40;font-size:1.45rem;color:#e3d3b8;text-align:center}
.invite a{flex:none;padding:.85rem 1.55rem;border-radius:999rem;background:linear-gradient(120deg,#f3ddab,#d9b36c);color:#241705;font-weight:700;letter-spacing:.08rem}
.invite a:hover{text-decoration:none;filter:brightness(1.06)}
@media(max-width:640px){.dimlist .di{grid-template-columns:1fr;gap:.35rem}.scenes{grid-template-columns:1fr}}
/* ===== 响应式：根字号按屏幕分档，整页靠 rem 等比缩放（移动优先：手机 13，平板 14，桌面 16，大屏 18） ===== */
@media(min-width:768px){html{font-size:14px}}
@media(min-width:1300px){html{font-size:16px}}
@media(min-width:1930px){html{font-size:18px}}
/* ===== 小屏布局微调 ===== */
@media(max-width:640px){
  .hero{padding:4.6rem 1.3rem 1.8rem}
  .hero h1{font-size:2.7rem}
  .hero .sub{font-size:1.45rem}
  .wrap{padding:1rem 1.15rem 2.6rem}
  .tcard{padding:2rem 1.4rem}
  .stitle{font-size:1.72rem;letter-spacing:.18rem}
  .stitle.sm{font-size:1.5rem}
  .lede{font-size:1.4rem}
  .qcard{padding:1.8rem 1.35rem}
  .opt{font-size:1.46rem;padding:1.1rem 1.2rem}
  .brow select{font-size:1.5rem;padding:.95rem 1.1rem}
  .go{font-size:1.8rem;padding:1.45rem;letter-spacing:.3rem}
  .dist .row{grid-template-columns:11.8rem 1fr 3.6rem;gap:.6rem;font-size:1.3rem}
  .dist .row .nm em.el{display:none}
  .vs{grid-template-columns:1fr}
  .pair-btns{grid-template-columns:repeat(4,1fr)}
  .cmp-btns button{font-size:1.3rem;padding:.6rem .95rem}
  .me .sc{font-size:2.4rem}
  .pscore{font-size:3.2rem}
  .chuo{width:10rem;height:10rem;font-size:1.6rem}
  .toc-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .toc-grid a{padding:.85rem .9rem;gap:.55rem;font-size:1.22rem}
  .toc-grid .rk{flex:0 0 2rem;height:2rem;font-size:1.05rem}
  .toc-grid .tv{font-size:1.55rem}
  .toc-grid .tv small{display:none}
  .rhero{padding:4.2rem 1.2rem 1rem}
  .rbig{font-size:6.8rem}
  .rh1{font-size:2rem;letter-spacing:.04rem}
  .nav2 a{flex:1 1 40%;text-align:center;font-size:1.4rem;padding:1rem .6rem}
  .stages{margin:1.7rem auto 0}
  .stg{font-size:1.02rem;gap:.4rem}
  .stg i{width:2.3rem;height:2.3rem;font-size:1.05rem}
  .sline{top:1.15rem;left:calc(-50% + 1.15rem);right:calc(50% + 1.15rem)}
  #dock{right:.85rem;bottom:.95rem}
  #dock .dbtn{width:3rem;height:3rem;font-size:1.25rem}
  #dock .dtop.show{max-height:3rem}
  #dock .bub{max-width:13.5rem;font-size:1.24rem;padding:.9rem 1.05rem}
  .dnav{min-width:9.5rem}
  .dnav a{font-size:1.22rem}
  .buddy-card{flex-direction:column;text-align:center;gap:.8rem;padding:1.1rem}
  .cmp-out .drow{grid-template-columns:5.1rem 1fr 8.4rem;gap:.6rem}
  .cmp-out .dnm{font-size:1.24rem}
  .cmp-out .dvv{font-size:1.2rem}
  .aichip{font-size:1.3rem;padding:.6rem 1.05rem}
  #aiPrompt{min-height:10rem;font-size:1.28rem}
  .mh{font-size:1.5rem;letter-spacing:.1rem;margin:2rem 0 .9rem;padding-left:1.15rem}
  .dimlist.defs .di{grid-template-columns:1fr;gap:.5rem}
  .dimlist.defs .dn{white-space:normal;font-size:1.45rem}
  .wprior{padding:1.2rem 1.25rem;margin-top:1.15rem}
  .wbar{height:2.6rem}
  .wbar i{font-size:1.15rem}
  .wleg{gap:.5rem 1.1rem;font-size:1.22rem;margin-top:.95rem}
  .src-line{font-size:1.2rem;margin-top:1.25rem;padding:0 .5rem}
}
/* 极窄屏（老款小屏手机）：目录宫格双列会把星座名挤没，改成单列一行一条 */
@media(max-width:380px){.toc-grid{grid-template-columns:1fr}}
/* ===== 游戏化进度轴：入殿→问心→揭晓→对照→启程，五步依次点亮 ===== */
.stages{display:flex;align-items:flex-start;justify-content:center;margin:2.4rem auto 0;max-width:44rem;padding:0 1rem}
.stg{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;font-size:1.26rem;letter-spacing:.12rem;color:#8a765e}
.stg i{width:2.9rem;height:2.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--serif);font-size:1.32rem;font-weight:700;background:#ffffff0a;border:1px solid #ffffff26;color:#8a765e;transition:all .4s}
.stg.done{color:#d9c9ae}
.stg.done i{background:linear-gradient(135deg,#f3ddab,#c99a45);border-color:transparent;color:#241705;box-shadow:0 .5rem 1.4rem #d9b36c40}
.stg.cur{color:var(--gold2)}
.stg.cur i{background:radial-gradient(circle at 32% 28%,#c2506b,#8b2c4a);border-color:#d8b26a88;color:#fff8e6;animation:stgPulse 2.2s ease-in-out infinite}
@keyframes stgPulse{0%,100%{box-shadow:0 0 0 0 #c2506b66}50%{box-shadow:0 0 0 .7rem #c2506b00}}
.sline{position:absolute;top:1.45rem;left:calc(-50% + 1.45rem);right:calc(50% + 1.45rem);height:2px;background:#ffffff1c}
.stg:first-child .sline{display:none}
.stg.done .sline{background:linear-gradient(90deg,#d9b36c,#c99a45)}
/* ===== 右下角浮动工具坞：小卜形象球 + 返回顶部 + 页面导航，一列对齐 ===== */
#dock{position:fixed;right:1.5rem;bottom:1.6rem;z-index:60;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#dock .dbtn+.dbtn{margin-top:.5rem}
#dock .dbtn{pointer-events:auto;width:3.6rem;height:3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.45rem;color:var(--gold2);background:linear-gradient(165deg,#2a1915f5,#1c100df5);border:1px solid #d8b26a66;box-shadow:0 .6rem 1.8rem #00000066;transition:all .2s;padding:0}
#dock .dbtn:hover{border-color:var(--gold);transform:translateY(-.13rem)}
#dock .bav{border:2px solid var(--gold);overflow:hidden;animation:bob 3.4s ease-in-out infinite}
#dock .bav img{width:100%;height:100%;object-fit:cover;display:block}
#dock .dtop{max-height:0;opacity:0;margin-top:0;overflow:hidden;border-width:0;box-shadow:none;transform:translateY(.6rem);pointer-events:none}
#dock .dtop.show{max-height:3.6rem;opacity:1;margin-top:.5rem;border-width:1px;box-shadow:0 .6rem 1.8rem #00000066;transform:none;pointer-events:auto}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4rem)}}
/* 小卜台词气泡：悬在工具坞左上方，尖角指向小卜球 */
#dock .bub{position:absolute;right:calc(100% + .9rem);top:0;pointer-events:auto;width:max-content;max-width:19.5rem;padding:1.05rem 1.3rem;border-radius:1.15rem 1.15rem .35rem 1.15rem;background:linear-gradient(165deg,#2a1915f5,#1c100df5);border:1px solid #d8b26a59;box-shadow:0 1rem 2.6rem #00000070;color:#efe7d6;font-size:1.36rem;line-height:1.75;opacity:0;transform:translateY(.8rem);transition:all .35s}
#dock .bub:after{content:"";position:absolute;right:-.5rem;top:1.15rem;width:.9rem;height:.9rem;background:#1e110e;border-right:1px solid #d8b26a59;border-bottom:1px solid #d8b26a59;transform:rotate(-45deg)}
#dock .bt b{color:var(--gold2)}
#dock .bx{position:absolute;top:-.7rem;right:-.7rem;width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1;color:#d9c9b0;background:#2a1915;border:1px solid #d8b26a55;cursor:pointer;transition:all .2s}
#dock .bx:hover{background:#8b2c4a;color:#fff8e6}
#dock.show .bub{opacity:1;transform:none}
#dock.mute .bub{display:none}
/* 页面导航面板：贴在工具坞左侧，可开可收 */
.dnav{pointer-events:auto;position:absolute;right:calc(100% + .9rem);bottom:0;width:max-content;min-width:11.5rem;padding:.95rem 1.05rem;border-radius:1.1rem;background:linear-gradient(165deg,#2a1915f7,#1c100df7);border:1px solid #d8b26a59;box-shadow:0 1rem 2.6rem #00000070;opacity:0;transform:translateX(.6rem);transition:all .3s;visibility:hidden}
#dock.navopen .dnav{opacity:1;transform:none;visibility:visible}
.dnav-h{font-family:var(--serif);font-size:1.3rem;color:var(--gold2);letter-spacing:.14rem;margin-bottom:.5rem}
.dnav a{display:block;padding:.4rem .55rem;border-radius:.6rem;font-size:1.32rem;color:#d9c9ae;transition:all .15s}
.dnav a:hover{background:#d8b26a14;color:var(--gold2);text-decoration:none}
/* 锚点跳转时留一点顶部呼吸，别贴死边缘 */
[id^="sec-"]{scroll-margin-top:1.2rem}
/* 小卜形象卡：主干页开场自我介绍，结果页出口迷你版 */
.buddy-card{display:flex;align-items:center;gap:1.3rem;margin:2rem auto 0;max-width:44rem;padding:1.25rem 1.6rem;border-radius:1.3rem;background:linear-gradient(120deg,#d8b26a14,#c2506b10);border:1px solid #d8b26a40;text-align:left}
.buddy-card img{flex:0 0 5.2rem;width:5.2rem;height:5.2rem;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 .5rem 1.4rem #00000066}
.buddy-card b{font-family:var(--serif);font-size:1.5rem;color:var(--gold2);letter-spacing:.1rem}
.buddy-card p{margin:.35rem 0 0;font-size:1.36rem;color:#d9c9ae}
.buddy-mini{display:flex;align-items:center;gap:.85rem;margin:0 0 1.2rem;padding:.8rem 1.1rem;border-radius:1rem;background:#d8b26a0d;border:1px dashed #d8b26a40;font-size:1.36rem;color:#e3d3b8}
.buddy-mini img{flex:0 0 2.6rem;width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;border:1px solid var(--gold)}
/* ===== AI 提示词区：把本页结果拼成提示词，带去问别的 AI ===== */
.ai-chips{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.35rem 0}
.aichip{cursor:pointer;font:inherit;font-size:1.42rem;padding:.72rem 1.3rem;border-radius:999rem;background:#ffffff08;border:1px solid #ffffff1f;color:#e8dcc4;transition:all .18s}
.aichip:hover{border-color:#c2506b77;transform:translateY(-.13rem)}
.aichip.on{background:linear-gradient(120deg,#8b2c4a,#b87333);border-color:transparent;color:#fff8e6;box-shadow:0 .6rem 1.6rem #8b2c4a4d}
#aiPrompt{display:block;width:100%;min-height:11.5rem;resize:vertical;font:inherit;font-size:1.38rem;line-height:1.8;color:#f0e2c0;padding:1.25rem 1.4rem;border-radius:1.1rem;background:#160d0c;border:1px solid #d8b26a40;outline:none;white-space:pre-wrap}
#aiPrompt:focus{border-color:#d8b26a88;box-shadow:0 0 0 .19rem #d8b26a14}
.ai-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.15rem}
.ai-bar .btn-gold{margin:0}
.ai-tip{font-size:1.3rem;color:#a08a6f;line-height:1.5;align-self:center}
/* ===== 无障碍：系统开了「减少动态效果」时，动画只播一遍且几乎瞬间到位 ===== */
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}html{scroll-behavior:auto}}
/* ===== 继续看：详情页底部的横向内链，保证任何一页都还能继续走下去 ===== */
.xref{max-width:67.5rem;margin:2.8rem auto 0;padding:1.7rem 2rem 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(--gold)}
.xref ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;background:#1c1210;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:#1c1210;border-bottom:1px solid var(--line);}
.xref li a{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--serif);font-size:1.05rem;color:var(--ink);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.xref li a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.xref li span{flex:none;max-width:46%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.86rem;color:var(--mut)}
.xref .xb{display:flex;gap:1.4rem;margin:1rem 0 0;font-size:.94rem}
.xref .xb a{color:var(--gold)}
@media (max-width:760px){.xref ul{grid-template-columns:1fr}.xref{padding-left:1.2rem;padding-right:1.2rem}}
.dist .row.soon{filter:grayscale(.5) brightness(.68);cursor:default}