/* MIXBAR 官网第三版：黑色产品影棚，黑蓝配色。设计规则见 website/DESIGN.md */
:root{
  --bg-0:#05070a; --bg-1:#0a0e14; --bg-2:#111821;
  --text:#e6ecf0; --text-2:#9aa6ae; --text-3:#6f7b84;
  --steel:#5e7f99; --accent:#8fb3c9;
  --line:rgba(200,220,235,.12);
  --glass:rgba(14,19,26,.62);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --serif:Georgia,"Songti SC","Noto Serif SC",serif;
  --serif-cn:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
  --ease:cubic-bezier(.28,.11,.32,1);
  --gx:clamp(18px,3.2vw,44px); --gy:clamp(16px,3vh,34px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{background:var(--bg-0);scrollbar-width:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar{display:none}
body{background:var(--bg-0);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);letter-spacing:.06em}

/* —— 画布和叠在上面的标注 —— */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:var(--bg-0)}
#lines{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#lines path{fill:none;stroke:var(--steel);stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}
#lines path.on{stroke:var(--accent);opacity:.85}
#tags{position:fixed;inset:0;z-index:2;pointer-events:none;font-family:var(--mono);letter-spacing:.06em}
.tag{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;line-height:1.35;color:var(--text-2);opacity:0;transition:opacity .5s var(--ease),color .35s}
.tag.show{opacity:1}
.tag .x{position:absolute;left:-7px;top:-7px;width:14px;height:14px}
.tag .x::before,.tag .x::after{content:"";position:absolute;background:var(--steel)}
.tag .x::before{left:6.5px;top:0;width:1px;height:14px}
.tag .x::after{top:6.5px;left:0;height:1px;width:14px}
.tag .t{position:absolute;top:-9px;display:flex;gap:.9em;align-items:baseline}
.tag .t b{font-weight:500;color:var(--text)}
.tag .t b small{font-size:inherit;font-weight:400;color:var(--text-3);margin-left:.2em}
.tag .t em{font-style:normal;color:var(--text-3)}
.tag .t s{text-decoration:none;color:var(--text-3)}
.tag.lit .t s{color:var(--accent)}
.tag.lit .x::before,.tag.lit .x::after{background:var(--accent)}
.tag.hover .t b{color:#fff}
.tag.layer.cur .t b{color:var(--accent)}
.tag.layer.cur .x::before,.tag.layer.cur .x::after{background:var(--accent)}

/* —— 四角 HUD —— */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.corner{position:absolute;pointer-events:auto}
.tl{left:var(--gx);top:var(--gy)}
.tr{right:var(--gx);top:var(--gy)}
.bl{left:var(--gx);bottom:var(--gy)}
.br{right:var(--gx);bottom:var(--gy)}
.mark{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.14em;color:var(--text)}
.tl .sub{margin-top:6px;font-size:12px;color:var(--text-3);display:flex;gap:.6em}
.tl .sub a{color:var(--text-3);transition:color .3s}
.tl .sub a.on,.tl .sub a:hover{color:var(--text)}
#nav{display:block;text-align:right;font-size:12px}
#nav .num{color:var(--text-3);cursor:default;letter-spacing:.08em}
#nav .num b{font-weight:400;color:var(--text)}
#nav .list{display:none;margin-top:12px;flex-direction:column;align-items:flex-end;gap:3px;padding:12px 14px;border-radius:12px;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#nav:hover .list,#nav:focus-within .list{display:flex}
#nav a{display:flex;gap:.9em;color:var(--text-3);padding:2px 0;transition:color .3s;cursor:pointer}
#nav a b{font-weight:400;color:var(--text-3);min-width:2ch;text-align:right}
#nav a:hover{color:var(--text)}
#nav a.cur{color:var(--text)}
#nav a.cur b{color:var(--accent)}
#nav a.soon{opacity:.45;cursor:default}
#nav a.soon:hover{color:var(--text-3)}
#readout{display:grid;grid-template-columns:auto auto;gap:6px 26px;font-size:12px;align-items:end}
#readout .r{display:flex;flex-direction:column;gap:2px}
#readout .r span{color:var(--text-3)}
#readout .r b{font-weight:400;color:var(--text);font-size:15px;font-variant-numeric:tabular-nums}
#readout .r.big{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:10px;margin-bottom:4px}
#readout .r.big b{font-size:clamp(34px,3.6vw,52px);font-weight:300;letter-spacing:.02em;color:var(--text);line-height:1}
#readout .r.big i{font-style:normal;color:var(--text-3)}
#readout .r.big b.flash{color:var(--accent)}
.br{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--text-2)}
.br button,.br a{color:var(--text-2);transition:color .3s;padding:4px 0}
.br button:hover,.br a:hover{color:var(--text)}
.br .dl{color:var(--bg-0);background:var(--text);padding:7px 14px;border-radius:999px}
.br .dl:hover{color:var(--bg-0);background:#fff}
.br .prog{color:var(--text-3);font-variant-numeric:tabular-nums}
#snd[aria-pressed="true"]{color:var(--accent)}

/* —— 舞台：每章钉在屏幕上，滚动推 3D —— */
main{position:relative;z-index:3;pointer-events:none}
main a,main button{pointer-events:auto}
.stage{position:relative;height:calc(var(--len) * 1vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none}
.pin a,.pin button{pointer-events:auto}
.copy{position:absolute;left:var(--gx);top:50%;transform:translateY(-50%);max-width:min(560px,42vw)}
.eyebrow{font-size:12px;color:var(--text-2);display:flex;gap:.9em;margin-bottom:22px}
.eyebrow b{font-weight:400;color:var(--accent)}
h1{font-weight:300;font-size:clamp(44px,7.2vw,108px);line-height:1.04;letter-spacing:.01em;color:var(--text)}
h2{font-weight:300;font-size:clamp(30px,4.4vw,62px);line-height:1.1;letter-spacing:.01em}
.lede{margin-top:24px;font-size:clamp(16px,1.35vw,19px);color:var(--text-2);line-height:1.65;max-width:30em}
.hint{margin-top:34px;font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:10px}
.hint::before{content:"";width:22px;height:1px;background:var(--steel);opacity:.7}
.hint i{font-style:normal;color:var(--steel);margin:0 .2em}
/* 碰撞：撞点闪一下冷白细光 + 十字准星 */
.hit{position:absolute;left:0;top:0;pointer-events:none}
.hit .x{position:absolute;left:-14px;top:-14px;width:28px;height:28px;animation:hitx .9s var(--ease) forwards}
.hit .x::before,.hit .x::after{content:"";position:absolute;background:#dcebf6}
.hit .x::before{left:13.5px;top:0;width:1px;height:28px}
.hit .x::after{top:13.5px;left:0;height:1px;width:28px}
.hit .g{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,243,252,.75),rgba(143,179,201,.22) 40%,transparent);mix-blend-mode:screen;animation:hitg .65s ease-out forwards}
@keyframes hitx{0%{opacity:1;transform:scale(.6) rotate(0)}100%{opacity:0;transform:scale(1.5) rotate(45deg)}}
@keyframes hitg{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
/* 录屏时显示的手指位置 */
#fakecur{position:fixed;left:0;top:0;z-index:9;width:0;height:0;pointer-events:none}
#fakecur::before{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(230,236,240,.85);background:rgba(230,236,240,.08);transition:transform .15s}
#fakecur.down::before{transform:scale(.72);background:rgba(143,179,201,.3)}
.scroll{position:absolute;left:50%;bottom:var(--gy);transform:translateX(-50%);font-size:12px;color:var(--text-3)}
.copy,.drink,.scroll{will-change:opacity,transform}

/* 酸甜烈苦读数条 */
.meters{margin-top:34px;display:grid;grid-template-columns:auto 1fr auto;gap:9px 14px;align-items:center;font-size:12px;max-width:320px}
.meters span{color:var(--text-2)}
.meters .bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;height:6px}
.meters .bar i{background:rgba(94,127,153,.28);transition:background .35s var(--ease)}
.meters .bar i.on{background:var(--accent)}
.meters b{font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}

/* 倒完浮出来的酒名卡 */
.drink{position:absolute;right:var(--gx);top:50%;transform:translateY(-50%);width:min(300px,26vw);opacity:0;pointer-events:none}
.drink.show{pointer-events:auto}
.drink .from{font-size:12px;color:var(--text-3)}
.drink h3{margin-top:12px;font-weight:300;font-size:clamp(30px,3.2vw,46px);line-height:1.1}
.drink .en{margin-top:6px;font-size:12px;color:var(--text-2);text-transform:uppercase}
.drink .meta{margin-top:18px;font-size:12px;color:var(--text-2);line-height:1.8}
.drink .garnish{margin-top:8px;font-size:14px;color:var(--text-3)}
.drink .swap{margin-top:6px;font-size:12px;color:var(--accent)}
.drink .swap:empty{display:none}
.drink .next{margin-top:22px;font-size:12px;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:border-color .3s,color .3s}
.drink .next:hover{border-color:var(--accent);color:var(--accent)}

.after{position:relative;height:70vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gx);background:linear-gradient(transparent,var(--bg-0) 30%)}
.after .mono{font-size:12px;color:var(--text-3);display:flex;gap:.9em}
.after .mono b{font-weight:400;color:var(--accent)}
.after p+p{margin-top:16px;font-size:clamp(20px,2.2vw,30px);font-weight:300;color:var(--text-2);line-height:1.4}

/* —— 竖屏（手机、竖着的平板）：杯子在上，字在下 —— */
.portrait .copy{top:auto;bottom:calc(var(--gy) + 84px);transform:none;max-width:none;right:var(--gx)}
.portrait .copy.pour .lede{display:none}
.portrait .meters{margin-top:18px;max-width:none;gap:7px 12px}
.portrait .drink{left:var(--gx);right:var(--gx);top:auto;bottom:calc(var(--gy) + 84px);transform:none;width:auto}
.portrait .scroll{display:none}
.portrait .tag{font-size:11px}
.portrait .tag.bottle .t em,.portrait .tag.bottle .t s{display:none}
.portrait .tag .t{gap:.6em}
.portrait .tag.card .t{white-space:normal}
.portrait .tag.bottle .t{transform:translateX(-50%);top:-28px}
@media (max-width:760px){
  #nav{display:none}
  .tl .sub{display:none}
  .br{gap:12px;top:var(--gy);bottom:auto}
  .br .prog{display:none}
  #readout{grid-template-columns:auto auto auto;gap:2px 14px}
  #readout .r{flex-direction:row;gap:6px;align-items:baseline}
  #readout .r b{font-size:12px}
  #readout .r.big{margin-bottom:2px}
  #readout .r.big b{font-size:30px}
  h1{font-size:clamp(40px,12vw,58px)}
  h2{font-size:clamp(28px,8vw,38px)}
  .lede{margin-top:14px;font-size:15px}
  .hint{margin-top:18px}
  .eyebrow{margin-bottom:14px}
}


/* —— 01 封面：一杯酒压在大号细宋体标题前面（电脑上标题画在 3D 里，字从杯子后面穿过去） —— */
.serif{font-family:var(--serif-cn);font-weight:300}
.cover{position:absolute;left:0;right:0;bottom:calc(var(--gy) + 34px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;pointer-events:none}
.cover .btn-solid{pointer-events:auto}
.cover-t{font-family:var(--serif-cn);font-weight:300;font-size:clamp(44px,8vw,120px);line-height:1.08;letter-spacing:.04em}
.cover-s{font-family:var(--serif-cn);font-weight:300;font-size:clamp(15px,1.3vw,18px);color:var(--text-2);line-height:1.7;letter-spacing:.08em}
.t3d .cover-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.portrait .cover{bottom:calc(var(--gy) + 24px);align-items:flex-start;text-align:left;left:var(--gx);right:var(--gx);gap:14px}
.portrait .cover-t{font-size:clamp(40px,11.5vw,56px)}

/* 封面上只留标题、一行小字、下载、左上 MIXBAR */
.oncover .tl .sub,.oncover .br{opacity:0;pointer-events:none}
.tl .sub,.br{transition:opacity .5s var(--ease)}
/* —— 02 手边有什么：一句话 + 一个大数字 —— */
.copy.hand h2{font-size:clamp(34px,4.4vw,62px);letter-spacing:.03em}
.bignum{display:flex;align-items:baseline;gap:14px;margin-top:30px;color:var(--text-2);font-family:var(--serif-cn);font-size:clamp(16px,1.4vw,20px)}
.bignum b{font-family:-apple-system,"SF Pro Display","Helvetica Neue",sans-serif;font-weight:200;font-size:clamp(72px,8.5vw,128px);line-height:.9;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.bignum b.flash{color:var(--accent)}
.copy.hand .hint{margin-top:26px}
.portrait .bignum b{font-size:72px}


/* —— 03 起：一屏一画面一句话 —— */
.copy h2.serif{font-size:clamp(34px,4.4vw,62px);font-weight:300;letter-spacing:.03em;line-height:1.16}
/* 03 倒酒：读数条和酒名卡收进下面两个角 */
.pin>.meters{position:absolute;left:var(--gx);bottom:calc(var(--gy) + 4px);margin:0;width:220px;gap:7px 12px;opacity:0}
.drink{top:auto;bottom:var(--gy);transform:none;width:min(250px,24vw)}
.drink h3{font-size:clamp(26px,2.4vw,36px)}
.drink .meta{margin-top:10px}
.drink .next{margin-top:14px}
.portrait .pin>.meters{display:none}
.portrait .drink{bottom:calc(var(--gy) + 84px);width:auto}
/* 06 今日一杯 / 聚会 / 无酒精：滚动时一个接一个出现，每次只说一件事 */
.beats{display:grid}
.beat5{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.beat5.on{opacity:1;transform:none;pointer-events:auto}
.beat5 .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.beat5 h3{margin-top:16px;font-family:var(--serif-cn);font-weight:300;font-size:clamp(40px,5.2vw,76px);line-height:1.1;letter-spacing:.03em}
.beat5 .s{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-3)}
.beat5 p{margin-top:16px;font-size:14px;color:var(--text-2);line-height:1.7;max-width:26em}
.beat5 .step{margin-top:20px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.beat5 .step button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(200,220,235,.22);color:var(--text);font-size:15px}
.beat5 .step button:hover{border-color:var(--accent)}
/* 10 下载：一个大数字 */
.big122{display:flex;align-items:flex-end;gap:20px;margin-bottom:30px}
.big122 b{font-family:-apple-system,"SF Pro Display","Helvetica Neue",sans-serif;font-weight:200;font-size:clamp(84px,10vw,150px);line-height:.85;color:var(--text)}
.big122 span{font-size:clamp(16px,1.5vw,20px);color:var(--text-2);line-height:1.6;padding-bottom:8px}
.wrap9 h2.serif{font-size:clamp(28px,3vw,42px);font-weight:300}

/* —— 面板、按钮（黑蓝玻璃） —— */
.panel{background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(200,225,245,.08),0 0 0 1px rgba(200,220,235,.06);border-radius:16px}
.btn-line{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text);border:1px solid rgba(200,220,235,.22);border-radius:999px;padding:9px 18px;cursor:pointer;transition:border-color .3s,color .3s;pointer-events:auto}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-solid{display:inline-flex;align-items:center;font-size:13px;color:var(--bg-0);background:var(--text);border-radius:999px;padding:11px 24px;cursor:pointer;pointer-events:auto;transition:background .3s}
.btn-solid:hover{background:#fff}
.copy .btn-line,.copy .btn-solid{margin-top:26px}

/* 03 帮我选 */
.pick{margin-top:26px;padding:20px 22px;max-width:440px;pointer-events:auto}
.pick .q{font-size:15px;color:var(--text)}
.pick .dots{display:flex;gap:6px;margin:10px 0 14px}
.pick .dots i{width:18px;height:2px;background:rgba(94,127,153,.35)}
.pick .dots i.on{background:var(--accent)}
.pick .opts{display:flex;flex-wrap:wrap;gap:8px}
.pick .opts button{font-size:13px;color:var(--text-2);border:1px solid rgba(200,220,235,.16);border-radius:999px;padding:7px 14px;transition:all .25s}
.pick .opts button:hover{color:var(--text);border-color:var(--accent)}
.pick .opts button small{font-size:11px;color:var(--text-3);margin-left:6px}
.pick .res{display:grid;gap:10px}
.pick .res div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.pick .res div:last-child{border-bottom:0}
.pick .res b{font-weight:400;font-size:17px}
.pick .res span{font-size:12px;color:var(--text-3)}
.pick .res em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.06em}
.pick .res em.close{color:var(--text-3)}
.pick .res i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--steel)}
.pick .again{margin-top:12px;font-size:12px;color:var(--text-3);font-family:var(--mono)}
.pick .again:hover{color:var(--accent)}

/* 04 材料标注卡 */
.tag.card .t{display:block;top:-10px;width:210px;white-space:normal}
.tag.card .t .h{display:flex;gap:.8em;align-items:baseline}
.tag.card .t p{margin-top:0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--text-2);letter-spacing:0}
.tag.card .t small{display:block;margin-top:6px;font-size:11px;color:var(--steel)}
.tag.card.on .x::before,.tag.card.on .x::after{background:var(--accent)}

/* 05 三张卡 */
.cards5{position:absolute;left:var(--gx);right:30vw;bottom:calc(var(--gy) + 120px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;pointer-events:auto}
.c5{padding:20px 20px 18px;min-height:220px;display:flex;flex-direction:column;gap:8px}
.c5 .k{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em}
.c5 h4{font-weight:300;font-size:26px;line-height:1.15}
.c5 .s{font-size:12px;color:var(--text-3);font-family:var(--mono);letter-spacing:.04em}
.c5 p{font-size:13px;color:var(--text-2);line-height:1.6}
.c5 ul{list-style:none;font-size:13px;color:var(--text-2);display:grid;gap:4px}
.c5 li{display:flex;justify-content:space-between;gap:10px}
.c5 li b{font-weight:400;color:var(--text)}
.c5 li span{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.c5 .step{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.c5 .step button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(200,220,235,.2);color:var(--text)}
.c5 .step button:hover{border-color:var(--accent)}
.c5 .step b{font-weight:400;color:var(--text);min-width:1.5em;text-align:center;font-size:16px}

/* 06 分享卡 */
.sharecard{position:absolute;left:50%;top:50%;transform:translate(-30%,-50%) rotate(2deg);height:min(70vh,620px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(200,220,235,.1);opacity:0;will-change:opacity,transform}
.sharecard canvas{width:100%;height:100%;display:block}
.share-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.share-btns .btn-line{margin-top:0}

/* 07 冰砖详情（冰裂之后） */
.detail{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(18px,5vw,64px);opacity:0;transition:opacity .45s var(--ease)}
.detail.show{opacity:1}
.detail .close{position:absolute;right:var(--gx);top:var(--gy);font-size:12px;color:var(--text-2);border:1px solid rgba(200,220,235,.2);border-radius:999px;padding:8px 16px}
.detail .close:hover{color:var(--accent);border-color:var(--accent)}
.detail-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:1180px;width:100%}
.detail-in .eyebrow{margin-bottom:16px}
.detail-in h3{font-weight:300;font-size:clamp(30px,3.6vw,52px);line-height:1.1}
.detail-in ul{list-style:none;margin-top:24px;display:grid;gap:10px}
.detail-in li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:15px;color:var(--text-2);line-height:1.55}
.detail-in li b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--accent);padding-top:4px}
.detail-in .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.detail-in .btns a{margin-top:0}
.detail-in .shot{justify-self:center;max-height:74vh;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(200,220,235,.1)}
.detail-in .shot img{display:block;max-width:100%;max-height:74vh;height:auto}

/* 08 能玩的吧台（全屏） */
.play{position:fixed;inset:0;z-index:15;pointer-events:none}
.play-top{position:absolute;left:var(--gx);right:var(--gx);top:var(--gy);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-2)}
.play-top b{font-weight:400;color:var(--accent);margin-right:.9em}
.play-top button{pointer-events:auto;font-size:12px;color:var(--text);border:1px solid rgba(200,220,235,.22);border-radius:999px;padding:8px 16px}
.play-bot{position:absolute;left:var(--gx);right:var(--gx);bottom:var(--gy);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}
.play-bot>*{pointer-events:auto}
.play .poured{font-family:var(--mono);font-size:12px;color:var(--text-2);display:grid;gap:4px;min-width:200px}
.play .poured b{font-weight:400;color:var(--text)}
.play .acts{display:flex;gap:10px}
.play .result{position:absolute;right:var(--gx);top:50%;transform:translateY(-50%);width:min(320px,80vw);padding:22px;pointer-events:auto}
.play .result h4{font-weight:300;font-size:32px;line-height:1.15;margin-top:8px}
.play .result .k{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em}
.play .result p{font-size:13px;color:var(--text-2);margin-top:10px;line-height:1.6}
.play .result .meters{margin-top:14px}
.play .hint{position:absolute;left:50%;top:calc(var(--gy) + 46px);transform:translateX(-50%);margin:0;white-space:nowrap}
html.playing{overflow:hidden}
html.playing #hud,html.playing main{opacity:0;pointer-events:none;transition:opacity .4s}

/* 09 下载 */
.sec9{position:relative;z-index:3;min-height:100vh;display:flex;align-items:center;padding:12vh var(--gx) 6vh;background:linear-gradient(transparent,rgba(5,7,10,.88) 22%,var(--bg-0));pointer-events:auto}
.wrap9{max-width:1120px;width:100%;margin:0 auto}
.wrap9 h2{margin-top:6px}
.wrap9 .lede{max-width:36em}
.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.dl9{display:flex;flex-direction:column;gap:6px;padding:22px 20px;min-height:170px;transition:box-shadow .3s}
.dl9:hover{box-shadow:inset 0 1px 0 rgba(200,225,245,.1),0 0 0 1px var(--accent)}
.dl9 .os{font-size:11px;color:var(--accent);letter-spacing:.1em}
.dl9 b{font-weight:300;font-size:24px;margin-top:6px}
.dl9 .req{font-size:13px;color:var(--text-2)}
.dl9 .sz{margin-top:auto;font-size:11px;color:var(--text-3)}
.note9{margin-top:22px;font-size:13px;color:var(--text-3);max-width:44em}
.foot{margin-top:9vh;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-3)}
.foot a:hover{color:var(--accent)}
.wx-guide{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(5,7,10,.6)}
.wx-guide .panel{padding:24px;max-width:300px;display:grid;gap:12px}
.wx-guide p{font-size:14px;color:var(--text-2)}

@media (max-width:1100px){ .cards5{right:var(--gx)} .dl-grid{grid-template-columns:repeat(2,1fr)} }
.portrait .cards5{left:0;right:0;bottom:calc(var(--gy) + 84px);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gx);gap:10px;scrollbar-width:none}
.portrait .cards5::-webkit-scrollbar{display:none}
.portrait .c5{flex:0 0 78vw;scroll-snap-align:center;min-height:0}
.portrait .sharecard{left:50%;top:9vh;transform:translateX(-50%) rotate(1.5deg);height:44vh}
.portrait .pick{max-width:none;padding:16px}
.portrait .copy.sec3 .lede{display:none}
.portrait .detail-in{grid-template-columns:1fr;gap:20px}
.portrait .detail-in .shot,.portrait .detail-in .shot img{max-height:38vh}
.portrait .play .result{top:auto;bottom:calc(var(--gy) + 120px);transform:none;right:var(--gx)}
@media (max-width:760px){ .dl-grid{grid-template-columns:1fr 1fr;gap:10px} .dl9{min-height:140px;padding:16px} .dl9 b{font-size:20px} .detail-in li{font-size:14px} }

@media (prefers-reduced-motion:reduce){ .tag,.meters .bar i{transition:none} }

/* 英文衬线字更宽：每屏那句话缩小一点，不压到画面主角 */
html[lang=en] .copy h2.serif{font-size:clamp(26px,3.5vw,50px);line-height:1.2}
.anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
details.note9 summary{cursor:pointer;list-style:none}
details.note9 summary::-webkit-details-marker{display:none}
details.note9 summary::after{content:" ＋";color:var(--steel)}
details.note9[open] summary::after{content:" －"}
details.note9 dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:16px}
details.note9 dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:6px}
details.note9 dd{margin:0;line-height:1.7;color:var(--text-2)}
details.note9 dd b{font-weight:500;color:var(--text)}
@media (max-width:760px){details.note9 dl{grid-template-columns:1fr}}
html[lang=en] .tag.brick .t em{display:none}
/* 封面：一根会呼吸的细线代替「往下滑」，滚过一次就不再出现 */
.scroll-line{position:absolute;left:50%;bottom:22px;width:1px;height:38px;margin-left:-.5px;pointer-events:none}
.scroll-line::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(230,236,240,0),rgba(230,236,240,.75));transform-origin:50% 0;animation:mx-breathe 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mx-breathe{0%,100%{transform:scaleY(.3);opacity:.2}50%{transform:scaleY(1);opacity:.9}}
.portrait .scroll-line{display:block;bottom:14px;height:26px}
@media (prefers-reduced-motion:reduce){.scroll-line::before{animation:none;opacity:.5}}
/* 第一次移到能拖的东西上时，光标旁一个小小的「拖」 */
#drag-tip{position:fixed;left:0;top:0;z-index:8;pointer-events:none;font-size:11px;letter-spacing:.08em;color:var(--text-2);opacity:0;transition:opacity .35s var(--ease)}
#drag-tip.on{opacity:.9}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* —— 酒吧版页（/bar/）：和首页同一套；三件设备在影棚里，每屏一句话 —— */
.barpage .cover-t{font-size:clamp(40px,6vw,92px)}
.barpage .cover-t.sm{font-size:clamp(34px,4.6vw,70px)}
.barpage .cover .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.barpage .cover .foot{margin-top:4vh;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--text-3);pointer-events:auto}
.barpage .cover .foot a{color:var(--text-2)}
.portrait.barpage .cover .btns,.portrait .barpage .cover .btns{justify-content:flex-start}
.portrait .barpage .cover .foot{align-items:flex-start}
.swatches{display:flex;gap:14px;margin-top:30px;pointer-events:auto}
.swatches button{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);opacity:.7;transition:transform .3s var(--ease),opacity .3s,box-shadow .3s}
.swatches button:hover{opacity:1;transform:scale(1.1)}
.swatches button.on{opacity:1;box-shadow:0 0 0 2px var(--bg-0),0 0 0 3px rgba(230,236,240,.75)}
html[lang=en] .barpage .cover-t{font-size:clamp(34px,4.6vw,72px)}
/* 封面：点一下换一杯后，酒名在杯子下面出现几秒 */
#cover-name{position:fixed;left:0;top:0;z-index:4;pointer-events:none;font-size:12px;letter-spacing:.14em;color:var(--text-2);opacity:0;transition:opacity .8s var(--ease);white-space:nowrap}
#cover-name.on{opacity:1}
.tag.card.flat .x{display:none}
.portrait .tag.card.flat .t p{font-size:14px;color:var(--text)}