/* ═════════ 山门 v2「泽布尔带路」正式样式（2026-09-16 从 dk/lab/zebul demo 合进山门）═════════
   只管入口页的新面板、四步（四泡泡/生日/城市/闺蜜）、泽布尔活猫、音乐珠；结果页/定稿页原样。
   所有新类名 z- 前缀（山门里 .stars/.q/.glow/.pair 都已有人用，demo 期间撞过三次名）。
   原来的输入框/麦克风/播放钮/识图/词标签/chip 全部是山门原件，这里只改它们在面板里的样子。 */
:root{ --pw:calc(var(--iw) + 16px); --ph:calc(var(--pw) * 918 / 1200); }

/* ── 标题位置：v2 字心在 15.5% 屏高（原来 22.5%），猫不再挂在输入框上，--tlift 归零 ── */
body[data-state="ask"]{--tlift:0px}
body[data-state="ask"] #s-ask{padding-top:calc(calc(15.5 * var(--svh)) - .1664 * var(--tw))}

/* ── 大面板：四步共用，一动不动，翻页只换肚子 ── */
.z-panel{position:relative;width:var(--pw);height:var(--ph);flex:none;margin:calc(calc(9.5 * var(--svh)) - .1417 * var(--tw)) -8px 0;animation:reveal var(--t-enter) var(--ease) 80ms both}
.z-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 14px 30px rgba(140,112,72,.18))}
.z-pstars{position:absolute;left:50%;top:calc(7.66% + 6px);transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.z-pstars i{width:16px;height:16px;background:url(star-off.webp) center/contain no-repeat;transition:opacity 300ms var(--ease),transform 380ms var(--ease),filter 380ms var(--ease)}
.z-pstars i.on{background-image:url(star-on.webp);transform:scale(1.3);filter:brightness(1.12) saturate(1.15) drop-shadow(0 0 3px rgba(255,236,180,1)) drop-shadow(0 0 8px rgba(255,214,130,.95)) drop-shadow(0 0 16px rgba(255,200,110,.7))}
.z-lockup{position:absolute;left:50%;top:calc(7.66% + 6px + 16px + 6px);transform:translateX(-50%);width:19%;z-index:2;pointer-events:none}
.z-lockup img{width:100%;display:block}
/* 没认领＝趴在右肩的静态图；认领了＝活猫（#zcat）接班，这张退掉。星光层常驻不随猫走 */
.z-perch{position:absolute;right:7%;top:-2.94%;width:22%;z-index:5;pointer-events:none;opacity:1;transition:opacity 160ms var(--ease)}
.z-perch img{width:100%;display:block;position:relative;z-index:1;filter:drop-shadow(0 3px 6px rgba(110,80,40,.28))}
body[data-cat="live"] .z-perch{opacity:0}
.z-glow{position:absolute;--glow-w:270%;right:7%;top:-2.94%;width:22%;aspect-ratio:420/360;z-index:4;pointer-events:none;animation:glowbreath 7s ease-in-out infinite}
.z-glow img{position:absolute;width:var(--glow-w);height:auto;left:calc(55% - .74 * var(--glow-w));top:calc(45% - .60 * var(--glow-w) * 953 / 814);aspect-ratio:814/953;display:block}

.z-stage{position:absolute;left:11%;right:11%;top:calc(7.66% + 6px + 16px + 6px + 21px + 4px);bottom:5.35%;z-index:3}
.z-step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.z-step.on{opacity:1;pointer-events:auto;transform:none}
.z-step.out{opacity:0;transform:translateY(-10px)}
.z-step[data-s="2"],.z-step[data-s="3"]{justify-content:flex-start;bottom:-7px}
.z-q{font-size:14px;letter-spacing:.5px;color:var(--ink);text-align:center;line-height:1.35;margin:6px 0 0;white-space:nowrap}
.z-q2{white-space:normal;line-height:1.45;margin-bottom:10px}
.z-divider{width:46%;margin:5px 0 0;opacity:.9;pointer-events:none}
.z-helper{font-size:11px;letter-spacing:0;color:var(--ink-soft);text-align:center;white-space:nowrap;opacity:.85;margin:auto 0 10px;padding-top:8px;display:flex;align-items:center;justify-content:center;gap:5px}
.z-helper img{height:13px;width:auto;display:block}
.z-step[data-s="1"] .z-helper{margin-top:0}
.z-step[data-s="2"] .z-helper,.z-step[data-s="3"] .z-helper{margin:auto 0 3px;padding-top:0}
.z-step[data-s="4"] .z-helper{padding-top:4px;margin-bottom:6px}

/* ── S0：原来的轻对话，搬进面板里（她 09-13：框里套框跟大面板打架 → 去框，一条淡金线，字直接落在珍珠玻璃上；对话区只留猫最新一句） ── */
.z-step[data-s="0"]{justify-content:flex-end;padding-bottom:4%}
#zpanel .askbox{width:100%;margin:0;padding:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none;display:block}
#zpanel .askbox:after{display:none}
#zpanel .log{max-height:min(calc(9 * var(--svh)),66px);margin:0 0 4px;padding:0 2px}
#zpanel .log .u{display:none}   /* 她 09-13：只留最新一句猫的话，自己那句也不留 */
#zpanel .log .d{font-size:14px;line-height:1.6;margin:0 0 4px}
#zpanel .log .s{font-size:12.5px;line-height:1.6;margin:0 0 4px}
#zpanel .pend{margin:0 0 6px;gap:8px}
#zpanel .pend img{width:52px;height:40px;border-radius:10px}
#zpanel .pendgo{padding:5px 11px;font-size:12px}
.z-inrow{position:relative;display:flex;align-items:center;min-height:36px;padding:4px 70px 6px 4px;border-bottom:1px solid rgba(190,160,110,.42);transition:border-color 220ms var(--ease)}
.z-inrow:focus-within{border-bottom-color:rgba(205,170,105,.9)}
#zpanel .askbox textarea{font-size:15.5px;line-height:1.5;height:24px;max-height:66px;padding:0;letter-spacing:.5px}
#zpanel .mic{right:-4px;bottom:0;width:36px;height:36px}
#zpanel .mic svg{width:18px;height:18px}
#zpanel .send{right:0;bottom:5px;width:26px;height:26px}
#zpanel .wave{right:30px;bottom:0;width:36px;height:36px}
#zpanel .wave .tri{border-left-width:10px;border-top-width:6.5px;border-bottom-width:6.5px}
#zpanel .dots{right:4px;top:-10px}
#zpanel .uprow{margin:8px 0 0;width:100%;justify-content:flex-end;animation:none}
#zpanel .upbtn{font-size:12px;letter-spacing:.5px;padding:6px 12px;gap:6px}
#zpanel .upbtn svg{width:14px;height:14px}
/* chip 挂大框下面；词标签＋分叉出在 chip 下面，不进面板（她 09-13） */
body[data-state="ask"] .chips,body[data-state="ask"][data-ask="chat"] .chips{gap:8px;margin:14px 0 0;position:relative;z-index:3;transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
body[data-state="ask"] .chip{font-size:12px;letter-spacing:.5px;padding:7px 0}
body[data-state="ask"]:not([data-step="0"]) .chips,body[data-state="ask"]:not([data-step="0"]) .got{opacity:0;transform:translateY(-8px);pointer-events:none;animation:none}   /* 🔴 山门原版 .chips 挂着 reveal…both，fill-mode 会把 opacity 钉在 1（09-16 真机：翻到生日页 chip 还在、压着「就是这一天」）；藏的时候必须摘掉动画 */
#got:not(.z-offer) .z-fork{display:none}   /* 「好／下次吧」等猫真问出口才出（09-16） */
body[data-state="ask"] .got{margin:8px 0 0;position:relative;z-index:3;transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
body[data-state="ask"] .tags{justify-content:center}
/* 09-16 她：「标签突然变透明、看不见」＝原版标签是半透明白底，v2 挪到 chip 下面后正好压在金色甲片上。换成跟 chip 同一块毛玻璃 */
body[data-state="ask"] .tag{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.08) 55%),linear-gradient(180deg,rgba(255,252,246,.78),rgba(250,240,222,.6));
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(214,187,140,.26),0 0 0 1px rgba(255,255,255,.38),0 6px 16px rgba(140,112,72,.12),0 0 20px rgba(255,244,214,.7)}
.z-fork{display:flex;justify-content:center;gap:10px;margin-top:10px}
.z-forkbtn{display:block;width:auto;min-width:112px;margin:0;border:1px solid rgba(255,255,255,.92);border-radius:999px;padding:9px 22px;font-family:var(--cn);font-size:13px;letter-spacing:1.5px;color:var(--gold-deep);cursor:pointer;
  background:linear-gradient(180deg,#fbf1dc,#ead3a4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(200,165,105,.55),0 8px 20px rgba(140,112,72,.2),0 0 18px rgba(255,236,196,.7);transition:transform var(--t-tap) var(--ease)}
.z-forkbtn.ghost{background:linear-gradient(180deg,#fffbf3,#f2e5cc);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(214,187,140,.45),0 8px 18px rgba(140,112,72,.16)}
.z-forkbtn:active{transform:scale(.97)}
/* 09-16 她：分叉那颗「好」发光就行，不要动（不要呼吸、不要流光——「要高级的指引」）：按钮压深一档＋静止的金光 */
#goYes{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 50%),linear-gradient(180deg,#f7e6c2,#dfbd7e);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(214,168,86,.9),0 8px 20px rgba(140,112,72,.22),0 0 12px 2px rgba(255,206,120,.72),0 0 28px 8px rgba(255,236,190,.88)}
/* 09-17：泽布尔替她拍板时「就做这款」、叫闺蜜时「让朋友帮我选」静止发光（跟「好」同一档：不呼吸、不流光）；换组、换页、点了就收 */
#pick.z-hint{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 50%),linear-gradient(180deg,#f7e6c2,#dfbd7e);color:#6b5127;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(214,168,86,.9),0 8px 20px rgba(140,112,72,.22),0 0 12px 2px rgba(255,206,120,.72),0 0 28px 8px rgba(255,236,190,.88)}
#askfriend.z-hint{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),linear-gradient(180deg,#fde9e4,#f3c9c0);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(232,160,150,.9),0 8px 20px rgba(140,112,72,.18),0 0 12px 2px rgba(255,182,170,.7),0 0 28px 8px rgba(255,226,220,.88)}
/* 猫问出口了「好／下次吧」就得在——原来 .got 只在读出词时才显示，聊三句一个词没读出也会问（09-16） */
body[data-ask="chat"] #got.z-offer{display:block}
.got #go3.z-forkbtn{display:block}
/* 出标签时甲片往下让（她 09-13），不淡 */
body[data-state="ask"][data-ask="chat"] .nails{transform:translate(-50%,0);opacity:1}
body.z-gottags[data-state="ask"][data-step="0"] .nails{transform:translate(-50%,72px)}

/* ── S1：四泡泡 ── */
.z-bubbles{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:auto 0}
.z-bub{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--cn);color:var(--ink);transition:transform var(--t-tap) var(--ease)}
.z-bub img{width:80%;aspect-ratio:1;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(140,112,72,.18))}
.z-bub span{font-size:12px;letter-spacing:.3px;white-space:nowrap}
.z-bub:active{transform:scale(.94)}
.z-bub.on img{filter:drop-shadow(0 0 10px rgba(241,195,189,.9)) drop-shadow(0 4px 8px rgba(140,112,72,.18))}

/* ── S2/S3：罗盘（scroll-snap；选中行钉在金带中心） ── */
.z-wheelbox{position:relative;width:86%;margin:10px 0 0;flex:none}
.z-wheelbox>img{width:100%;display:block;pointer-events:none}
#zwdate{aspect-ratio:1000/390}#zwcity{aspect-ratio:1000/327}
.z-cols{position:absolute;inset:0}
.z-col{position:absolute;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  mask-image:linear-gradient(rgba(0,0,0,.45),#000 34%,#000 66%,rgba(0,0,0,.45));-webkit-mask-image:linear-gradient(rgba(0,0,0,.45),#000 34%,#000 66%,rgba(0,0,0,.45))}
.z-col::-webkit-scrollbar{display:none}
.z-col ul{list-style:none;margin:0;padding:0}
.z-col:before,.z-col:after{content:"";display:block;height:var(--pad)}
.z-col li{height:var(--row);line-height:var(--row);text-align:center;scroll-snap-align:center;font-size:13px;color:var(--ink);opacity:.42;transition:opacity 120ms;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.z-col li.sel{opacity:1;font-weight:600;font-size:15px}
.z-col li.far,.z-col li.far2{opacity:0;pointer-events:none}
.z-col li .n{position:relative;display:inline-block}
.z-col li i{position:absolute;left:100%;bottom:.2em;margin-left:2px;font-style:normal;font-size:.6em;line-height:1;color:var(--ink-soft);display:none}
.z-col li.sel i{display:block}
#zwcity .z-col li{font-size:12px}#zwcity .z-col li.sel{font-size:14px}
.z-actbtn{position:absolute;left:50%;bottom:0;width:58%;cursor:pointer;background:none;border:0;padding:0;transform:translate(-50%,calc(100% + 46px));transition:transform var(--t-tap) var(--ease)}
.z-actbtn img{width:100%;display:block;filter:drop-shadow(0 8px 18px rgba(140,112,72,.22)) drop-shadow(0 0 16px rgba(255,240,210,.8))}
.z-actbtn:active{transform:translate(-50%,calc(100% + 46px)) scale(.97)}
.z-actbtn.flat{position:relative;left:auto;bottom:auto;transform:none;margin-top:10px;width:80%;padding:6px 0;margin-bottom:-6px}
.z-actbtn.flat:active{transform:scale(.97)}

/* 主按钮＋「重来」一起挂在面板下面：上宽下窄（她 09-16：「重来两个字，比上面短一点，成倒三角」） */
.z-acts{position:absolute;left:50%;bottom:0;width:58%;transform:translate(-50%,calc(100% + 46px));display:flex;flex-direction:column;align-items:center;gap:15px}   /* 09-16 她：「重来」再往下，手指要点得开（10→12→15） */
.z-acts .z-actbtn{position:relative;left:auto;bottom:auto;width:100%;transform:none}
.z-acts .z-actbtn:active{transform:scale(.97)}
.z-acts .z-actbtn[hidden],.z-share[hidden]{display:none}
.z-redo{width:81%;background:none;border:0;padding:0;cursor:pointer;transition:transform var(--t-tap) var(--ease)}
.z-redo img{width:100%;display:block;filter:drop-shadow(0 6px 14px rgba(140,112,72,.18)) drop-shadow(0 0 12px rgba(255,240,210,.7))}
.z-redo:active{transform:scale(.97)}
.z-acts4{width:min(82%,330px)}
.z-acts4 .z-actbtn{width:70.7%}
.z-acts4 .z-redo{width:57.3%}
/* 09-16 她：闺蜜从档案里选＝主站照见页那种小标（骑在面板底边右侧），点开浮板再选；静止不呼吸（她要高级的指引） */
.z-acts4 .z-arc{position:absolute;right:-6%;bottom:calc(100% + 18px);height:26px;padding:0 12px;border-radius:13px;border:1px solid rgba(200,160,95,.6);
  font:12px/24px var(--cn);letter-spacing:1px;color:var(--gold-deep);white-space:nowrap;cursor:pointer;
  background:linear-gradient(180deg,#fffdf8,#f6ead3);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(140,112,72,.16),0 0 12px rgba(255,236,196,.8);transition:transform var(--t-tap) var(--ease)}
.z-acts4 .z-arc[hidden]{display:none}
.z-acts4 .z-arc:active{transform:scale(.96)}
.z-acts4 .z-arc{overflow:visible}
.z-acts4 .z-arc.flash{border-color:rgba(214,170,90,.95);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(140,112,72,.16),0 0 18px rgba(255,220,150,.95),inset 0 0 10px rgba(255,236,190,.6)}
/* 钻石光芒＝主站 archive.css .arc-glint 那颗十字星芒；浅底上换成暖金白＋金色外晕才看得见 */
.z-glint{position:absolute;width:30px;height:30px;pointer-events:none;opacity:0;z-index:5;filter:drop-shadow(0 0 4px rgba(255,214,130,.95)) drop-shadow(0 0 1px rgba(200,150,70,.9))}
.z-glint.sm{width:18px;height:18px}
.z-glint i{position:absolute;left:50%;top:50%;display:block;background:linear-gradient(90deg,transparent,#fffaf0 50%,transparent)}
.z-glint i:first-child{width:100%;height:1.6px;transform:translate(-50%,-50%)}
.z-glint i:last-child{width:1.6px;height:100%;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,#fffaf0 50%,transparent)}
.z-glint.go{animation:zGlintPop .85s ease forwards}
@keyframes zGlintPop{0%{opacity:0;transform:scale(.15) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(80deg)}}
/* 浮板＝主站 #arcQuick 换成山门的奶金色：实底（面板是玻璃，半透会透字） */
.z-aq{position:fixed;z-index:60;width:min(290px,calc(100vw - 24px));padding:6px 0;border-radius:14px;font-family:var(--cn);
  background:#fffaf2;border:1px solid rgba(214,178,120,.6);box-shadow:0 14px 36px rgba(110,80,40,.22),0 0 0 1px rgba(255,255,255,.7) inset}
.z-aq[hidden]{display:none}
.z-aq .aq-list{max-height:min(240px,46vh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.z-aq .aq-list::-webkit-scrollbar{display:none}
.z-aq .aq-list.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
.z-aq .aq-list.more.atEnd{-webkit-mask-image:none;mask-image:none}
.z-aq .aq-row{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;box-sizing:border-box;cursor:pointer;color:var(--ink);font-size:14px}
.z-aq .aq-row:active{background:rgba(232,201,118,.16)}
.z-aq .aq-ava{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--gold-deep);background:linear-gradient(180deg,#fffdf8,#f3e3c4);border:1px solid rgba(200,160,95,.6)}
.z-aq .aq-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-aq .aq-nm i{font-style:normal;font-size:11px;color:var(--ink-soft,#8d7358);margin-left:6px}
.z-aq .aq-sub{flex:none;font-size:11.5px;letter-spacing:.5px;color:var(--ink-soft,#8d7358)}
.z-aq .aq-foot{display:flex;margin-top:4px;border-top:1px solid rgba(214,178,120,.3)}
.z-aq .aq-foot div{flex:1;padding:11px 0 9px;text-align:center;font-size:12.5px;letter-spacing:2px;color:var(--gold-deep);cursor:pointer}
.z-aq .aq-foot div:active{background:rgba(232,201,118,.16)}
.z-aq .aq-foot div+div{border-left:1px solid rgba(214,178,120,.3);color:var(--ink-soft,#8d7358)}
/* 闺蜜页：出示二维码｜复制链接（demo 那块实心金边胶囊） */
.z-share{position:relative;width:100%;aspect-ratio:6.4/1;display:flex;padding:0 7%;box-sizing:border-box}
.z-share .z-pill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(140,112,72,.22)) drop-shadow(0 0 14px rgba(255,240,210,.8))}
.z-share .z-sh{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:none;border:0;padding:0;font-family:var(--cn);font-size:12px;letter-spacing:.5px;white-space:nowrap;color:var(--gold-deep);cursor:pointer;transition:transform var(--t-tap) var(--ease)}   /* 面板比 demo 窄，13px 会把「出示二维码」挤成两行 */
.z-share .z-sh:active{transform:scale(.96)}
.z-share .z-sh img{width:15px;height:15px;object-fit:contain;display:block;flex:none}
.z-share .z-sep{position:relative;align-self:center;width:1px;height:44%;background:linear-gradient(transparent,rgba(169,137,91,.55),transparent)}
body[data-pairf="1"] #zgoHer{display:none}

/* ── S4：闺蜜 ── */
.z-pairimg{width:54%;margin:auto 0 0;display:block;pointer-events:none}

/* ── 活猫：文档坐标（页面能滚，猫跟着内容走） ── */
#zcat{position:absolute;left:0;top:0;z-index:40;will-change:transform;touch-action:none;cursor:grab;display:none}
body[data-cat="live"] #zcat{display:block}
#zcat{transition:opacity 220ms var(--ease)}
#zcat.z-hid{opacity:0;pointer-events:none}
/* 她 09-16：不是走运势挑的，后面几页就不出猫（活猫、趴图都不出）；走运势的才跟过去 */
body[data-zfollow="0"]:not([data-state="ask"]) #zcat{display:none}
#zcat.drag{cursor:grabbing}
#zcat .z-cbody{filter:drop-shadow(0 3px 5px rgba(110,80,40,.3))}
#zcat .z-shadow{position:absolute;left:18%;right:18%;bottom:6%;height:8%;border-radius:50%;background:rgba(110,80,40,.22);filter:blur(4px);transition:opacity 200ms,transform 200ms}
#zcat.air .z-shadow{opacity:.35;transform:scale(.8)}
.z-belly{position:absolute;left:24px;top:36px;width:48px;height:46px;padding:0;border:0;border-radius:50%;background:transparent;z-index:2;cursor:pointer}
.z-belly[hidden]{display:none}
/* 没认领时结果页/定稿页也有它：同一张趴图挂在选中那张卡／大图的上沿 */
#zperch2{position:absolute;left:0;top:0;z-index:40;width:80px;pointer-events:none;display:none}
#zperch2 img{width:100%;display:block;filter:drop-shadow(0 3px 6px rgba(110,80,40,.28))}
body[data-cat="perch"]:not([data-state="ask"]) #zperch2.on{display:block}
body[data-zfollow="0"]:not([data-state="ask"]) #zperch2.on{display:none}   /* 🔴 必须写在上一条后面：两条一样重，谁在后谁赢（09-16 她：给它看照片挑的，结果页还冒出静态趴图） */

/* 气泡：小、浮在猫头左上/右上，一个短语一泡 */
#zbubble{position:fixed;z-index:41;max-width:min(64vw,236px);padding:6px 11px;border-radius:12px;font-size:13px;line-height:1.4;white-space:nowrap;letter-spacing:.3px;color:var(--ink);pointer-events:none;opacity:0;transform:translateY(6px) scale(.96);transition:opacity 220ms var(--ease),transform 220ms var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,251,243,.86));border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 1px rgba(214,187,140,.3),0 8px 22px rgba(140,112,72,.16),0 0 28px rgba(255,244,214,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#zbubble.on{opacity:1;transform:none}
#zbubble.z-top{z-index:72}   /* 弹层（z 70）开着时浮到遮罩上面 */
#zbubble:after{content:"";position:absolute;bottom:-6px;width:10px;height:10px;background:inherit;border:inherit;border-top:0;border-left:0;transform:rotate(45deg);box-shadow:none}
#zbubble.tl:after{right:8px}#zbubble.tr:after{left:8px}
/* 结果页／定稿页的侧边、脚下气泡：尾巴指向猫 */
#zbubble.sr:after{right:-6px;bottom:auto;top:calc(50% - 5px);transform:rotate(-45deg)}
#zbubble.sl:after{left:-6px;bottom:auto;top:calc(50% - 5px);transform:rotate(135deg)}
#zbubble.br:after,#zbubble.bl:after{bottom:auto;top:-6px;transform:rotate(225deg)}
#zbubble.br:after{right:18%}#zbubble.bl:after{left:18%}

/* 音乐珠 09-17 起＝全站那颗 dk/music-orb.js（自带样式），这里原来那份 .z-mu 手抄收掉了 */

/* ── 实验台：只有 ?lab=1 才出现 ── */
#zlab{position:fixed;left:50%;width:max-content;max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center;white-space:nowrap;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:65;display:none;gap:6px;padding:6px;border-radius:20px;background:rgba(60,45,25,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.z-lab #zlab{display:flex}
#zlab button{border:0;border-radius:999px;padding:7px 11px;font-family:var(--cn);font-size:12px;letter-spacing:.5px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
@media (prefers-reduced-motion:reduce){.z-step{transition:none!important}}