@font-face{font-family:Anton;src:url(fonts/Anton.ttf) format('truetype');font-display:block}
@font-face{font-family:Archivo;src:url(fonts/archivo-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope.woff2) format('woff2');font-display:swap}
:root{--c:#16a6ff;--fx:'Archivo','Anton',sans-serif;--ui:'Manrope','PingFang SC','Noto Sans CJK SC',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#050506;color:#fff;font-family:var(--ui);-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
/* loader */
#loader{position:fixed;inset:0;background:#000;z-index:100;display:grid;place-items:center;transition:opacity .9s .2s,visibility 0s 1.2s}
#loader.done{opacity:0;visibility:hidden}
.ld-logo{display:flex;flex-direction:column;align-items:center;transform:skewX(-12deg);font:900 italic 9vh/0.95 var(--fx);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);letter-spacing:.02em}
.ld-num{position:absolute;bottom:7vh;left:0;right:0;text-align:center;font:600 12px/1 var(--ui);letter-spacing:.6em;color:#aaa}
.ld-num b{font-weight:600;color:#fff}
/* frame */
#frame{position:fixed;inset:0;pointer-events:none;z-index:5}
#frame .c{border-style:solid;position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.45)}
#frame .c.tl{top:50px;left:50px;border-width:1px 0 0 1px}#frame .c.tr{top:50px;right:50px;border-width:1px 1px 0 0}
#frame .c.bl{bottom:50px;left:50px;border-width:0 0 1px 1px}#frame .c.br{bottom:50px;right:50px;border-width:0 1px 1px 0}
.tick{position:absolute;top:50%;width:10px;height:1px;background:rgba(255,255,255,.45)}.tick.l{left:50px}.tick.r{right:50px}
.vletters{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;font:700 10px var(--ui);color:rgba(255,255,255,.22);text-align:center}
.hletters{position:absolute;left:90px;right:90px;display:flex;justify-content:space-between;font:800 italic 11px var(--fx);color:rgba(255,255,255,.14);letter-spacing:0}
.hletters.top{top:56px}.hletters.bot{bottom:56px}
.topline{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06)}
.topline i{position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,rgba(255,255,255,.1),#fff);box-shadow:0 0 8px #fff,0 0 18px var(--c)}
/* header */
.top{position:fixed;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 50px;z-index:20}
.sound{display:flex;align-items:center;gap:8px;font:700 10px var(--ui);letter-spacing:.15em}
.eq{display:flex;gap:2px;align-items:flex-end;height:10px}.eq i{width:2px;height:3px;background:#fff;transition:height .2s}
body.snd .eq i{animation:eq .8s infinite ease-in-out alternate}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:2px}to{height:10px}}
.logo{position:absolute;left:50%;top:14px;transform:translateX(-50%) skewX(-10deg);text-align:center;line-height:1}
.logo span{display:block;font:900 22px/1 var(--fx);letter-spacing:.06em}
.logo small{display:block;font:800 7px var(--ui);letter-spacing:.5em;opacity:.6;margin-top:3px}
.top nav{display:flex;align-items:center;gap:22px;font:700 10px var(--ui);letter-spacing:.15em}
.lang b{font-weight:700;opacity:.45;cursor:pointer}.lang b.on{opacity:1}.lang i{margin:0 6px;opacity:.3;font-style:normal}
.menu-btn{display:flex;align-items:center;gap:8px;font:700 10px var(--ui);letter-spacing:.15em}
.dots{display:grid;grid-template-columns:3px 3px;gap:2px}.dots i{width:3px;height:3px;background:#fff;border-radius:50%}
.pill{background:#fff;color:#000;border-radius:5px;padding:9px 14px;font:800 10px var(--ui);letter-spacing:.1em;box-shadow:0 0 18px rgba(255,255,255,.25)}
.dropdown{position:absolute;right:50px;top:56px;background:rgba(18,18,20,.94);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 26px;display:flex;flex-direction:column;gap:4px;min-width:280px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.35s;backdrop-filter:blur(10px)}
body.menu .dropdown{opacity:1;transform:none;pointer-events:auto}
.dropdown a{font:900 italic 30px/1.25 var(--fx);text-transform:uppercase;opacity:.85}.dropdown a:hover{opacity:1;color:var(--c)}
/* overlays */
.ov{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0}
.ov .arr,.ov button,.ficons button{pointer-events:auto}
.arr{position:absolute;top:47%;font:300 30px/1 var(--ui);color:rgba(255,255,255,.6);width:40px;height:40px}
.arr.prev{left:calc(50% - 12vw)}.arr.next{right:calc(50% - 12vw)}
.flav{position:absolute;left:0;right:0;bottom:17vh;text-align:center;line-height:.9}
.flav span{display:block;font:900 italic 6.4vh/0.9 var(--fx);text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.flav small{display:block;margin-top:10px;font:700 11px var(--ui);letter-spacing:.35em;opacity:.7}
.prog{position:absolute;left:0;right:0;bottom:6vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.prog .bar{width:min(380px,60vw);height:2px;background:linear-gradient(90deg,#5b7bff,#c06bff,#ff6ba8,#ffb36b);border-radius:2px;position:relative}
.prog .bar i{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;left:0}
.hint{font:700 9px var(--ui);letter-spacing:.4em;opacity:.65}
.ftext{position:absolute;left:8vw;top:50%;transform:translateY(-50%);width:min(30vw,420px)}
.tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:5px 9px;border-radius:4px;font:800 10px var(--ui);letter-spacing:.12em}
.tag b{display:grid;place-items:center;width:14px;height:14px;background:var(--c);color:#000;border-radius:2px;font-size:10px}
.tag s{opacity:.85;text-decoration-thickness:1.5px}
.fh{margin:18px 0 16px;font:900 italic 5.4vh/0.95 var(--fx);text-transform:uppercase;letter-spacing:-.01em}
.fp{font:500 14px/1.6 var(--ui);opacity:.8;max-width:340px}
.ficons{position:absolute;right:7vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px}
.ficons button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:.3s;background:rgba(0,0,0,.2)}
.ficons button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6;opacity:.6}
.ficons button.on{background:#fff;border-color:#fff;box-shadow:0 0 22px var(--c)}.ficons button.on svg{stroke:#000;opacity:1}
#ov-state .big{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) skewX(-8deg);text-align:center;font:900 italic 22vh/0.9 var(--fx);color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:-.02em}
.ltitle{position:absolute;left:8vw;top:16vh;font:900 italic 9vh/0.9 var(--fx);text-transform:uppercase}
.lsub{position:absolute;left:8vw;top:calc(16vh + 10vh);font:700 11px var(--ui);letter-spacing:.3em;opacity:.6}
#track{height:330vh}
.tail{padding:12vh 8vw 0 !important}
.tail{position:relative;z-index:6;background:linear-gradient(#0000,#0c0c0e 20vh,#0c0c0e);padding:30vh 8vw 0}
.faqh{font:900 italic 10vh/0.9 var(--fx);text-transform:uppercase;margin-bottom:6vh}
.faqs{max-width:760px;margin-left:auto}
details{border-top:1px solid rgba(255,255,255,.12);padding:18px 0}details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
summary{cursor:pointer;font:600 15px var(--ui);list-style:none;display:flex;justify-content:space-between}summary::after{content:'⌄';opacity:.5}
details p{margin-top:10px;opacity:.7;font-size:14px;line-height:1.6}
.join{text-align:center;padding:18vh 0 12vh}.join h3{font:900 italic 6vh var(--fx);text-transform:uppercase}
.join p{opacity:.65;font-size:13px;margin:12px 0 26px}
.join form{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto}
.join input{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:14px;color:#fff;font:inherit}
.join button{background:#fff;color:#000;border-radius:6px;padding:14px;font-weight:800;letter-spacing:.1em}
.ok{margin-top:12px;font-size:12px;opacity:.7;min-height:1em}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:30px 0 40px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;opacity:.75}
.law{font-weight:800;letter-spacing:.1em}
@media (max-width:760px){
  .top{padding:0 18px}#frame .c.tl,#frame .c.tr{top:58px}#frame .c.tl,#frame .c.bl{left:14px}#frame .c.tr,#frame .c.br{right:14px}#frame .c.bl,#frame .c.br{bottom:14px}.tick,.vletters,.hletters,.lang,.menu-btn em{display:none}
  .logo span{font-size:17px}.top nav{gap:12px}.dropdown{right:14px;left:14px}
  .ftext{left:7vw;right:7vw;width:auto;top:auto;bottom:9vh;transform:none}.fh{font-size:4.2vh}.ficons{right:5vw;top:18vh;transform:none;flex-direction:row;gap:10px}.ficons button{width:36px;height:36px}
  .arr.prev{left:4vw}.arr.next{right:4vw}#ov-state .big{font-size:11vh}.ltitle{font-size:6vh}
}

/* v5: fixed in-place cross-fade headlines, legible chrome */
#ov-state{display:none}
#ov-feat{transition:opacity .45s}
.ftext{width:min(28vw,380px)}
.fb{opacity:0;transition:opacity .45s ease;pointer-events:none}.fb.on{opacity:1;pointer-events:auto}
.fh{font:900 italic 52px/0.98 var(--fx)!important;letter-spacing:-.01em}
.ficons{transition:opacity .45s}
.topline{height:3px!important;background:rgba(255,255,255,.14)!important}.topline i{height:3px!important;background:linear-gradient(90deg,rgba(255,255,255,.5),#fff)!important}
.vletters{color:rgba(255,255,255,.7)!important;font-size:12px!important}
@media (max-width:760px){.fh{font-size:34px!important}.ftext{width:auto}}

/* lineup meta (cross-fades on selection) */
#lmeta{position:absolute;left:8vw;bottom:15vh;max-width:34vw;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),filter .35s}
#lmeta.swap{opacity:0;transform:translateY(14px);filter:blur(4px)}
#lnum{font:600 11px/1 monospace;letter-spacing:.3em;opacity:.55}
#lname{font:900 italic clamp(40px,6vw,92px)/1 "Archivo Black","Anton",sans-serif;margin:.15em 0 .05em;color:#fff;text-shadow:0 0 30px var(--c)}
#lname2{display:block;font-style:normal;letter-spacing:.35em;font-size:12px;opacity:.6}
#lmeta p{margin-top:14px;font-size:13px;letter-spacing:.12em;display:flex;gap:14px;align-items:center}
#labv{border:1px solid var(--c);padding:4px 9px;border-radius:20px;font-weight:600}
.lnav{position:absolute;right:8vw;bottom:15vh;display:flex;gap:16px;align-items:center}
.lnav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:#fff;font-size:16px;cursor:pointer;transition:border-color .3s,background .3s}
.lnav button:hover{border-color:var(--c);background:rgba(255,255,255,.08)}
#ldots{display:flex;gap:7px}#ldots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .4s}#ldots i.on{background:var(--c);width:20px;border-radius:3px;box-shadow:0 0 10px var(--c)}
.lhint{position:absolute;right:8vw;bottom:calc(15vh - 34px);font-size:10px;letter-spacing:.3em;opacity:.45}
@media (max-aspect-ratio:4/5){#lmeta{left:6vw;bottom:20vh;max-width:80vw}.lnav{right:6vw;bottom:12vh}.lhint{display:none}}
#ov-line{user-select:none;-webkit-user-select:none;touch-action:pan-y}

/* ===== breakdown (exploded can) ===== */
#bd{position:relative;z-index:6;background:#040405}
.bd-pin{position:relative;width:100vw;height:100vh;overflow:hidden;background:radial-gradient(ellipse 45% 60% at 50% 52%,color-mix(in srgb,var(--bdc,#e9a23b) 9%,#060607) 0%,#040405 70%)}
#bdgl{position:absolute;inset:0;width:100%;height:100%;display:block}
#bdlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#bdlines path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
#bdlines circle{fill:var(--bdc,#fff)}
#bdlines circle.halo{fill:none;stroke:var(--bdc,#fff);stroke-width:1;opacity:.6}
.bd-head{position:absolute;left:50%;top:7.5vh;transform:translateX(-50%);text-align:center;z-index:2;width:min(560px,90vw)}
.bd-tag{display:inline-block;font:600 10px/1 var(--ui,sans-serif);letter-spacing:.3em;border:1px solid rgba(255,255,255,.3);padding:5px 9px;border-radius:20px;opacity:.75}
.bd-head h2{font:900 italic clamp(28px,4.2vh,44px)/1 var(--fx,"Archivo Black",sans-serif);margin:.35em 0 .2em;text-transform:uppercase}
.bd-head p{font-size:11px;letter-spacing:.3em;opacity:.5}
.bd-flav{position:absolute;left:0;right:0;bottom:3.2vh;z-index:3;display:flex;gap:8px;justify-content:center}
.bd-flav button{font:600 11px/1 var(--ui,sans-serif);letter-spacing:.1em;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:20px;cursor:pointer;transition:all .3s}
.bd-flav button.on{border-color:var(--bdc);background:color-mix(in srgb,var(--bdc) 25%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--bdc) 40%,transparent)}
.bd-card{position:absolute;width:clamp(230px,19vw,290px);padding:14px 16px 15px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);z-index:2}
.bd-card.on{opacity:1;transform:none}
.bd-card.l{left:5vw}.bd-card.r{right:5vw}
.bd-card .n{font:600 10px/1 monospace;letter-spacing:.25em;color:var(--bdc);opacity:.95}
.bd-card .k{font-size:11px;letter-spacing:.2em;opacity:.55;margin-top:6px}
.bd-card h4{font:800 clamp(16px,1.35vw,20px)/1.2 var(--ui,sans-serif);margin:5px 0 4px}
.bd-card .s{font-size:12px;opacity:.7;line-height:1.45}
.bd-card .pr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:6px}
.bd-card .pr div{font-size:11px;line-height:1.3;opacity:.85}.bd-card .pr b{display:block;font-size:13px;color:#fff}
.bd-card .ab{display:flex;gap:8px;margin-top:6px}.bd-card .ab span{border:1px solid var(--bdc);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700}
.bd-prog{position:absolute;left:50%;bottom:1.4vh;width:160px;height:2px;margin-left:-80px;background:rgba(255,255,255,.12)}.bd-prog i{display:block;height:100%;width:0;background:var(--bdc)}
@media (max-aspect-ratio:4/5){.bd-card{width:42vw;padding:10px}.bd-card.l{left:3vw}.bd-card.r{right:3vw}.bd-card .s{display:none}}

/* ===== flavour / origin map ===== */
#map{position:relative;z-index:6;height:100vh;overflow:hidden;background:radial-gradient(ellipse 50% 60% at 58% 52%,color-mix(in srgb,var(--mpc,#e9a23b) 7%,#05070b) 0%,#030405 72%)}
#mapgl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}#mapgl.drag{cursor:grabbing}
#maplabels{position:absolute;inset:0;pointer-events:none}
#maplabels span{position:absolute;transform:translate(10px,-50%);font:600 11px/1 var(--ui);letter-spacing:.08em;white-space:nowrap;color:rgba(255,255,255,.85);text-shadow:0 1px 6px #000;transition:opacity .3s}
#maplabels span.bw{font-weight:800;color:#fff;transform:translate(12px,40%)}
.mp-head{position:absolute;left:5vw;top:11vh;z-index:2}
.mp-head h2{font:900 italic clamp(28px,4.4vh,46px)/1 var(--fx);margin:.35em 0 .25em;text-transform:uppercase}
.mp-head p{font-size:11px;letter-spacing:.25em;opacity:.5}
.mp-list{position:absolute;left:5vw;top:31vh;width:clamp(230px,19vw,280px);display:flex;flex-direction:column;gap:8px;z-index:2}
.mp-list button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(8,10,14,.55);backdrop-filter:blur(6px);transition:all .3s}
.mp-list button:hover,.mp-list button.on{border-color:var(--k);background:color-mix(in srgb,var(--k) 12%,transparent)}
.mp-list i{width:8px;height:8px;border-radius:50%;background:var(--k);box-shadow:0 0 10px var(--k);flex:none}
.mp-list b{display:block;font-size:13px}.mp-list small{display:block;font-size:11px;opacity:.55;margin-top:3px}
.mp-card{position:absolute;right:5vw;top:50%;width:clamp(260px,22vw,330px);transform:translateY(-46%);opacity:0;pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1);z-index:2;
  padding:18px 20px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mp-card.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.mp-card .n{font:600 10px/1 monospace;letter-spacing:.25em;color:var(--k)}
.mp-card h3{font:800 22px/1.2 var(--ui);margin:8px 0 4px}.mp-card .s{font-size:12px;opacity:.7}
.mp-card p{font-size:13px;line-height:1.65;opacity:.85;margin:12px 0}
.mp-card .m{display:flex;gap:14px;font-size:11px;opacity:.75}.mp-card .m b{display:block;font-size:14px;color:#fff;opacity:1}
.mp-card .x{position:absolute;right:12px;top:10px;all:unset;cursor:pointer;font-size:18px;opacity:.6}
.mp-card .x{position:absolute;right:14px;top:10px}
.mp-flav{bottom:5vh}
@media (max-width:900px){.mp-list{top:auto;bottom:12vh;flex-direction:row;flex-wrap:wrap;width:90vw}.mp-list small{display:none}.mp-card{right:5vw;left:5vw;width:auto;top:22vh;transform:none}.mp-card.on{transform:none}}

/* ===== partner map (China) ===== */
.cn-stats{position:absolute;left:5vw;top:31vh;display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:22px 28px;z-index:2;transition:opacity .4s}
.cn-stats.hide{opacity:0;pointer-events:none}
.cn-stats div{font-size:11px;letter-spacing:.18em;opacity:.6}
.cn-stats b{display:block;font:900 italic clamp(30px,5vh,48px)/1 var(--fx);letter-spacing:0;opacity:1;color:#fff;margin-bottom:6px}
.cn-stats b small{font:700 12px var(--ui);margin-left:4px;color:var(--c);font-style:normal}
.cn-stats div{opacity:1}.cn-stats span{opacity:.6}
#map .mp-card{left:5vw;right:auto;top:31vh;transform:translateY(10px);max-height:52vh;overflow:auto}
#map .mp-card.on{transform:none}
.mp-card .pl{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.mp-card .pl li{display:flex;align-items:center;gap:9px;font-size:13px}
.mp-card .pl i{width:7px;height:7px;border-radius:50%;flex:none}
.mp-card .pl em{margin-left:auto;font-style:normal;font-size:11px;opacity:.55}
#map .mp-flav{left:5vw;right:auto;justify-content:flex-start;bottom:6vh}
#map .mp-flav button i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
#map .mp-flav button.on{border-color:#fff;background:rgba(255,255,255,.12);box-shadow:none}
.cn-tip{position:absolute;z-index:3;pointer-events:none;padding:8px 12px;border-radius:8px;background:rgba(8,12,20,.85);border:1px solid rgba(22,166,255,.45);font-size:12px;line-height:1.5;opacity:0;transition:opacity .2s;white-space:nowrap}
.cn-tip.on{opacity:1}.cn-tip b{font-size:14px}
#maplabels span.hq{font-weight:800;color:#fff;font-size:12px}
#maplabels span.ins{font-size:10px;opacity:.6!important;letter-spacing:.2em}
#map{background:radial-gradient(ellipse 55% 60% at 62% 55%,#0a1626 0%,#04060a 70%)}
#mapgl{cursor:default}#mapgl.pt{cursor:pointer}

/* ===== taste radar ===== */
#radar{position:relative;z-index:6;height:100vh;overflow:hidden;background:radial-gradient(ellipse 45% 55% at 58% 52%,color-mix(in srgb,var(--rdc,#16a6ff) 14%,#05070b) 0%,#030405 72%);transition:background .8s}
#rdgl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}#rdgl.drag{cursor:grabbing}
#rdlabels{position:absolute;inset:0;pointer-events:none}
#rdlabels span{position:absolute;transform:translate(-50%,-50%);text-align:center;font:700 11px/1.25 var(--ui);letter-spacing:.14em;white-space:nowrap;text-shadow:0 1px 8px #000}
#rdlabels span b{display:block;font:900 italic 20px/1 var(--fx);letter-spacing:0;margin-top:3px}
#rdlabels span b i{font-style:normal;font-size:12px;margin-left:5px;opacity:.9}
.rd-head{position:absolute;left:5vw;top:11vh;z-index:2}
.rd-head h2{font:900 italic clamp(28px,4.4vh,46px)/1 var(--fx);margin:.35em 0 .25em;text-transform:uppercase}
.rd-head p{font-size:11px;letter-spacing:.25em;opacity:.5}
.rd-side{position:absolute;left:5vw;top:31vh;width:clamp(250px,21vw,300px);z-index:2;display:flex;flex-direction:column;gap:12px}
.rd-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rd-chips button{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);font:700 11px var(--ui);transition:all .3s}
.rd-chips button i{width:22px;height:22px;border-radius:50%;background-size:300% 100%;background-position:center;box-shadow:0 0 0 1px rgba(255,255,255,.2);flex:none}
.rd-chips button.on{border-color:var(--k);background:color-mix(in srgb,var(--k) 22%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--k) 35%,transparent)}
.rd-chips button.dis{opacity:.3;pointer-events:none}
.rd-b{display:none}.rd-b.on{display:grid}.rd-b button.on{border-style:dashed}
.rd-cmp{all:unset;cursor:pointer;align-self:flex-start;font:700 11px var(--ui);letter-spacing:.15em;padding:7px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.25)}
.rd-cmp.on{background:#fff;color:#000}
.rd-delta{display:none;flex-direction:column;gap:5px;padding:12px 14px;border-radius:12px;background:rgba(8,10,14,.6);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);font-size:12px}
.rd-delta.on{display:flex}
.rd-delta div{display:flex;justify-content:space-between;gap:10px}.rd-delta em{font-style:normal;opacity:.55}.rd-delta b.p{color:#7dffb0}.rd-delta b.m{color:#ff8a8a}
.rd-delta .hd{opacity:.6;font-size:10px;letter-spacing:.2em}
.rd-info{position:absolute;right:5vw;bottom:9vh;width:clamp(220px,18vw,270px);z-index:2;text-align:left}
.rd-info .n{font:600 10px/1 monospace;letter-spacing:.25em;color:var(--rdc)}
.rd-info h3{font:900 italic 34px/1 var(--fx);margin:8px 0 6px;text-transform:uppercase}
.rd-info p{font-size:12px;line-height:1.6;opacity:.75}
.rd-info .pr{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);font-size:13px}
.rd-info .pr span{display:block;font-size:10px;letter-spacing:.2em;opacity:.55;margin-bottom:4px}

/* ===== iced can opening ===== */
#ice{position:relative;z-index:6;height:100vh;overflow:hidden;background:radial-gradient(ellipse 40% 55% at 58% 55%,#0d2a44 0%,#06111c 45%,#020407 78%)}
#icegl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}#icegl.pt{cursor:pointer}
.ic-head{position:absolute;left:5vw;top:11vh;z-index:2}
.ic-head h2{font:900 italic clamp(28px,4.4vh,46px)/1 var(--fx);margin:.35em 0 .25em;text-transform:uppercase}
.ic-head p{font-size:11px;letter-spacing:.25em;opacity:.5}
.ic-steps{position:absolute;left:5vw;top:34vh;z-index:2;display:flex;flex-direction:column;gap:14px;width:clamp(230px,20vw,290px)}
.ic-steps div{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;opacity:.35;transition:opacity .5s}
.ic-steps div.on{opacity:1}.ic-steps div.done{opacity:.55}.ic-steps div.done b::after{content:' ✓';color:#7fd8ff}
.ic-steps b{font:900 italic 18px/1.1 var(--fx);color:#7fd8ff;min-width:34px}
.ic-info{position:absolute;right:5vw;bottom:10vh;z-index:2;width:clamp(210px,17vw,260px)}
.ic-info .n{font:600 10px/1 monospace;letter-spacing:.25em;color:#7fd8ff}
.ic-info h3{font:900 italic 44px/1 var(--fx);margin:8px 0 6px}
.ic-info p{font-size:12px;line-height:1.6;opacity:.7}
.ic-btn{all:unset;cursor:pointer;margin-top:12px;font:700 11px var(--ui);letter-spacing:.15em;padding:7px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.25);opacity:0;pointer-events:none;transition:opacity .4s}
.ic-btn.on{opacity:1;pointer-events:auto}
.ic-mute{all:unset;cursor:pointer;position:absolute;right:5vw;top:12vh;z-index:2;font:700 10px var(--ui);letter-spacing:.2em;padding:7px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.25)}

/* ---- 3D flavour cards (#cards) — Franco-style portals ---- */
#cards{position:relative;z-index:6;height:100vh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050506}
#cdstars{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.cd-head{position:relative;z-index:2;text-align:center;margin-bottom:3.2vh}
.cd-head h2{font:900 italic clamp(22px,3.6vh,40px)/1 var(--fx);margin:.35em 0 0;text-transform:uppercase;letter-spacing:.04em}
.cd-row{position:relative;z-index:2;display:flex;gap:40px;align-items:center;justify-content:center;padding:0 4vw}
.cd-card{position:relative;width:min(330px,28vw);aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#111;flex:none;
  transform:scale(1);transition:transform .45s cubic-bezier(.2,.7,.2,1);cursor:none;touch-action:none}
.cd-card.hot{transform:scale(1.07);z-index:3}
.cd-stage{position:absolute;inset:0}
.cd-stage canvas{display:block;width:100%;height:100%;border-radius:16px}
.cd-title{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:0 12px}
.cd-title b{font-family:Georgia,'Times New Roman',Songti SC,'Noto Serif CJK SC',serif;font-weight:700;font-size:clamp(36px,4.5vw,56px);line-height:1.05;
  color:rgba(210,210,215,.72);mix-blend-mode:difference;letter-spacing:.02em}
.cd-title b.en{display:none;font-size:clamp(28px,3.4vw,46px);font-style:italic}
#cards.en .cd-title b.zh{display:none}#cards.en .cd-title b.en{display:block}
.cd-card.hot .cd-title b{color:rgba(255,255,255,.92)}
.cd-title small{display:block;margin-top:10px;font:600 10px/1.2 var(--ui);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);mix-blend-mode:difference}
.cd-pager{position:relative;z-index:2;display:flex;align-items:center;gap:18px;margin-top:3.5vh;font:700 11px var(--ui);letter-spacing:.25em;opacity:.7}
.cd-pager button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px;transition:background .25s}
.cd-pager button:hover{background:rgba(255,255,255,.1)}
#cdcur{position:fixed;top:0;left:0;z-index:80;pointer-events:none;opacity:0;transform:translate(-999px,-999px);
  font:600 12px/1 'Segoe Print','Comic Sans MS',cursive,var(--ui);letter-spacing:.04em;color:#fff;
  background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  transition:opacity .2s;white-space:nowrap;margin:14px 8px}
#cdcur.on{opacity:1}
#cards.cur,#cards.cur *{cursor:none !important}
@media (max-width:820px){
  .cd-row{gap:14px}
  .cd-card{width:min(280px,30vw)}
}
@media (max-width:640px){
  .cd-row{flex-direction:column;gap:18px;max-height:70vh;overflow:auto}
  .cd-card{width:min(260px,78vw)}
}
/* ===== 酒水墙 / THE WALL (v23: one cheap rule set; no reflection clone, no per-cell filters, no blur) ===== */
#wall{position:relative;z-index:6;min-height:100vh;padding:10vh 0 14vh;overflow:hidden;background:
  radial-gradient(ellipse 70% 45% at 50% 42%,#2a3a5c 0%,#0000 70%),
  radial-gradient(ellipse 40% 30% at 15% 20%,#1d2b4a 0%,#0000 70%),
  radial-gradient(ellipse 45% 35% at 85% 75%,#18264a 0%,#0000 70%),
  linear-gradient(#0a1020,#0d1630 45%,#070b16)}
#wall::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#wall::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse 85% 75% at 50% 45%,#0000 55%,#03060ecc 100%)}
.wl-head{position:relative;z-index:5;text-align:center;margin-bottom:3vh}.wl-head h2{font:900 italic 6vh/1 var(--fx);text-transform:uppercase;margin:12px 0 8px;text-shadow:0 6px 30px #000}.wl-head p{font:700 11px var(--ui);letter-spacing:.3em;opacity:.6}
.wl-grid{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:3px;padding:3px;margin:0 2.5vw;background:#141a26;
  box-shadow:0 0 0 6px #1b2231,0 0 0 7px #2b3446,0 50px 90px #000c;contain:layout paint}
/* floor echo: one static plank + soft glow under the cabinet (no clone) */
.wl-floor{position:relative;height:9vh;margin:7px 2.5vw 0;background:linear-gradient(#2a3346 0,#1a2131 6px,#0000 7px),linear-gradient(#e9dcbf26,#0000 80%);
  -webkit-mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)}
.wl-cell{position:relative;aspect-ratio:1/1.1;display:flex;align-items:flex-end;justify-content:center;padding:0;cursor:pointer;outline:none;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,#fffaf0 0%,#f3ead6 45%,#d9cdb3 80%,#b9ab90 100%);
  box-shadow:inset 0 10px 14px -6px #0007,inset 6px 0 10px -6px #0008,inset -6px 0 10px -6px #0008,inset 0 -3px 0 #8f8470}
.wl-cell::before{content:'';position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(#bfb299,#8d826d)}
.wl-shade{position:absolute;inset:0;z-index:2;background:#05080fa6;opacity:0;pointer-events:none;transition:opacity .2s}
.wl-grid.hov .wl-shade{opacity:1}
.wl-grid .wl-cell:hover,.wl-grid .wl-cell:focus-visible{z-index:3;box-shadow:inset 0 10px 14px -6px #0006,inset 0 0 22px color-mix(in srgb,var(--c) 70%,#0000),0 0 0 2px var(--c),0 0 26px var(--c)}
.wl-can{position:relative;z-index:1;display:block;width:30%;aspect-ratio:1/2.05;margin-bottom:9%;border-radius:2px/4px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.25) 28%,rgba(255,255,255,0) 40%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.6)),var(--t) 25% 50%/200% 100%,var(--c);
  box-shadow:0 2px 3px #0006;transition:transform .2s;transform-origin:50% 100%}
.wl-can::before,.wl-can::after{content:'';position:absolute;left:0;right:0;background:linear-gradient(90deg,#6d727c,#f4f6f9 35%,#9aa0aa 60%,#53575f)}
.wl-can::before{top:0;height:7%;border-radius:40% 40% 10% 10%/80% 80% 20% 20%}
.wl-can::after{bottom:0;height:5%;border-radius:0 0 40% 40%}
.wl-cell:hover .wl-can{transform:scale(1.22)}
.wl-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .2s;background:#0b0d12e6;border:1px solid #fff3;padding:6px 10px;border-radius:4px;font:700 11px var(--ui);letter-spacing:.12em;white-space:nowrap;z-index:5}
#wlov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(3,4,8,.82);opacity:0;pointer-events:none;transition:opacity .3s}
#wlov.on{opacity:1;pointer-events:auto}
.wl-panel{position:relative;width:min(900px,92vw);display:grid;grid-template-columns:1fr 1.2fr;gap:4vw;align-items:center;padding:5vh 4vw;background:#0c0f17;border:1px solid #ffffff1f;border-radius:14px;transform:scale(.15);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .3s}
#wlov.on .wl-panel{transform:none;opacity:1}
.wl-hero{display:grid;place-items:center;height:56vh;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--g) 45%,#0000),#0000 65%)}
.wl-can.big{width:auto;height:46vh;margin:0;box-shadow:0 30px 40px #000a;animation:wlf 4s ease-in-out infinite}
@keyframes wlf{50%{transform:translateY(-8px) rotate(2deg)}}
.wl-info h3{font:900 italic 7vh/1 var(--fx);margin:14px 0 4px}.wl-info em{font:700 12px var(--ui);letter-spacing:.35em;opacity:.6;font-style:normal}
.wl-style{margin:14px 0;font-size:14px;opacity:.85}
.wl-info dl{display:flex;gap:28px;margin:18px 0}.wl-info dt{font:700 9px var(--ui);letter-spacing:.3em;opacity:.5}.wl-info dd{margin:4px 0 0;font-weight:700}
.wl-claims{display:flex;flex-wrap:wrap;gap:6px}.wl-claims span{border:1px solid var(--c);color:var(--c);border-radius:20px;padding:4px 10px;font-size:12px}
.wl-desc{margin:18px 0;line-height:1.7;opacity:.8;font-size:14px}.wl-law{font:700 9px var(--ui);letter-spacing:.25em;opacity:.45}
.wl-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid #fff4;color:#fff;font-size:14px}
body.wl-lock{overflow:hidden}
@media (max-width:760px){.wl-grid{grid-template-columns:repeat(8,1fr)}.wl-cell:nth-child(n+57){display:none}.wl-panel{grid-template-columns:1fr}.wl-hero{height:30vh}.wl-can.big{height:26vh}}
/* ===== cover: 从一首歌开始 ===== */
body.cover-on{overflow:hidden}
#cover{position:fixed;inset:0;z-index:120;display:grid;place-items:center;overflow:hidden;color:#f3ede2;
  background:radial-gradient(ellipse 55% 45% at 50% 52%,#3a1a14 0%,#160b0c 45%,#050406 80%);transition:opacity 1.2s ease,transform 1.4s ease}
#cover.out{opacity:0;transform:scale(1.04);pointer-events:none}
#cover::before{content:'';position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cv-rings{position:absolute;left:50%;top:50%;width:min(78vh,90vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-radial-gradient(circle,#0000 0 3px,#ffffff08 3px 4px),radial-gradient(circle,#0000 18%,#0a0607 19%,#0a0607 70%,#0000 71%);animation:cvspin 18s linear infinite;opacity:.8}
.cv-rings::after{content:'';position:absolute;inset:41%;border-radius:50%;background:radial-gradient(circle,#050406 8%,#8a2d1c 9%,#c25a2a 60%,#6e1f14 100%)}
.cv-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid #e9b77a22;animation:cvpulse 4.8s ease-out infinite}
.cv-rings i:nth-child(2){animation-delay:1.2s}.cv-rings i:nth-child(3){animation-delay:2.4s}.cv-rings i:nth-child(4){animation-delay:3.6s}
@keyframes cvspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cvpulse{0%{transform:scale(.5);opacity:0}30%{opacity:.8}100%{transform:scale(1.35);opacity:0}}
.cv-in{position:relative;text-align:center;padding:0 6vw}
.cv-k{font:700 10px var(--ui);letter-spacing:.5em;opacity:.55}
#cover h1{font:900 clamp(44px,10vh,120px)/1.05 "Noto Serif SC","Songti SC",serif;letter-spacing:.18em;margin:3vh 0 1.5vh;text-shadow:0 10px 60px #000;animation:cvup 2.2s cubic-bezier(.2,.8,.2,1) both}
.cv-sub{font:400 clamp(20px,3.4vh,36px)/1.3 "Noto Serif SC","Songti SC",serif;letter-spacing:.6em;opacity:.85;animation:cvup 2.2s .5s cubic-bezier(.2,.8,.2,1) both}
.cv-en{margin-top:2vh;font:700 10px var(--ui);letter-spacing:.42em;opacity:.5;animation:cvup 2.2s .9s both}
@keyframes cvup{from{opacity:0;transform:translateY(24px);letter-spacing:.5em}}
.cv-go{margin-top:6vh;display:inline-flex;align-items:center;gap:14px;padding:16px 30px;border:1px solid #f3ede266;border-radius:40px;color:#f3ede2;font:700 14px var(--ui);letter-spacing:.3em;
  background:#0006;transition:background .3s,border-color .3s;animation:cvup 2s 1.3s both}
.cv-go:hover{background:#c25a2a;border-color:#c25a2a}.cv-go small{font-size:9px;letter-spacing:.3em;opacity:.7}
.cv-eq{display:flex;gap:2px;align-items:flex-end;height:14px}.cv-eq i{width:2px;background:currentColor;animation:cveq 1s ease-in-out infinite alternate}
.cv-eq i:nth-child(2){animation-delay:.2s}.cv-eq i:nth-child(3){animation-delay:.4s}.cv-eq i:nth-child(4){animation-delay:.1s}.cv-eq i:nth-child(5){animation-delay:.3s}
@keyframes cveq{from{height:3px}to{height:14px}}
.cv-law{position:absolute;bottom:7vh;left:0;right:0;text-align:center;font:700 10px var(--ui);letter-spacing:.3em;opacity:.55}.cv-law span{margin-left:10px;opacity:.7}
.cv-credit{position:absolute;bottom:3vh;left:0;right:0;text-align:center;font:400 10px var(--ui);opacity:.4}.cv-credit a,.foot .credit a{color:inherit}
.foot .credit{display:block;width:100%;font-size:10px;opacity:.45;margin-top:8px}