/* Tempo 2026 — annual report
   Direction A: 声波点阵 / one dot = one minute */

@font-face{font-family:GeistX;src:url('assets/fonts/Geist-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:GeistX;src:url('assets/fonts/Geist-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:GeistX;src:url('assets/fonts/Geist-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:GeistX;src:url('assets/fonts/Geist-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MapleX;src:url('assets/fonts/MapleMono-Subset.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0A;
  --lime:#C8FF3D;
  --coral:#F0442A;
  --cream:#FFF3E2;
  --cobalt:#1B2CFF;
  --acid:#E9FF66;
  --sans:GeistX,"PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
  --mono:MapleX,"PingFang SC","Hiragino Sans GB",monospace;
  --cn:"PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#0B0B0B;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage{position:relative;width:390px;height:844px;transform-origin:center center;flex:none}
.app{position:relative;width:390px;height:844px;overflow:hidden;background:#C8FF3D;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;isolation:isolate}
.page{position:absolute;inset:0;visibility:hidden;z-index:1;overflow:hidden}
.page.is-active{visibility:visible;z-index:2}

/* ---------- shared chrome ---------- */
.top{position:absolute;top:20px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:6}
.brand{font-family:var(--sans);font-weight:900;font-size:15px;letter-spacing:-.03em;line-height:1}
.brand i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.08em;margin-left:6px;vertical-align:2px}
.pcount{font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1}
.bar{position:absolute;top:48px;left:22px;right:22px;display:flex;gap:5px;z-index:6}
.bar s{display:block;height:4px;flex:1;text-decoration:none;background:currentColor;opacity:.18}
.bar s.on{opacity:1}
.kicker{position:absolute;left:22px;right:22px;top:88px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.4;z-index:5}
.kicker b{font-weight:400}
.kicker span{opacity:.7}
.line{display:block;overflow:hidden}
.line>span{display:block}
.cue{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.cue i{width:26px;height:26px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;opacity:.8;transition:transform .2s ease}
.next:hover .cue i,.next:focus-visible .cue i{transform:translateY(2px)}
.next:active .cue i{transform:translateY(3px) scale(.94)}
.next{padding:0;display:flex;align-items:center;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- page 1 : lime ---------- */
.p1{background:var(--lime);color:var(--ink)}
.p1-kicker{color:var(--ink)}
.p1 .bar{color:var(--ink)}
.p1-lead{position:absolute;left:22px;right:22px;top:132px;font-family:var(--cn);font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em;z-index:5}
.p1-huge{position:absolute;left:19px;top:214px;z-index:5;font-family:var(--sans);font-weight:900;font-size:102px;line-height:.82;letter-spacing:-.07em;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;padding-bottom:4px}
.p1-huge .num{display:block;transform:translateY(108%);will-change:transform}
.p1-unit{position:absolute;left:22px;top:320px;display:flex;align-items:flex-end;gap:14px;z-index:5}
.p1-unit strong{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1;font-family:var(--sans)}
.p1-unit span{font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;padding-bottom:3px;opacity:.72}
.p1-avg{position:absolute;left:22px;top:390px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;opacity:.72;z-index:5}
.p1-avg b{font-weight:400;opacity:1}
.p1-band{position:absolute;left:0;right:0;bottom:0;height:430px;background:var(--ink);color:var(--lime);z-index:2}
.p1-legend{position:absolute;top:24px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;z-index:5}
.p1-legend .dot-tally b{font-weight:400}
.p1-legend .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}
.p1-wave-wrap{position:absolute;left:0;bottom:64px;width:390px;height:318px;overflow:hidden;z-index:3}
.p1-wave{display:block;width:390px;height:318px;transform:translateY(100%);will-change:transform}
.p1-foot{position:absolute;left:22px;right:22px;bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;z-index:5;font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.02em}
.p1-foot .say{opacity:.85}
.p1-legend,.p1-foot,.p1-unit,.p1-avg{opacity:0;transform:translateY(10px)}
.p1 .p1-lead .line>span{transform:translateY(112%)}

/* ---------- page 2 : coral ---------- */
.p2{background:var(--coral);color:var(--cream)}
.p2 .brand,.p2 .pcount{color:var(--ink)}
.p2 .bar{color:var(--cream)}
.p2-kicker{color:var(--ink)}
.p2-kicker span{opacity:1}
.p2-name{position:absolute;left:20px;top:112px;z-index:5;font-family:var(--cn);font-size:132px;line-height:.94;font-weight:800;letter-spacing:-.055em;color:var(--cream);white-space:nowrap}
.p2-name .line{padding-bottom:2px}
.p2-latin{position:absolute;left:24px;top:250px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink);transform:translateY(8px);opacity:0}
.p2-plays{position:absolute;left:22px;top:272px;display:flex;align-items:flex-end;gap:10px;z-index:5;color:var(--cream);opacity:0;transform:translateY(14px)}
.p2-plays b{font-family:var(--sans);font-weight:900;font-size:86px;line-height:.9;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.p2-plays span{font-family:var(--cn);font-size:14px;font-weight:600;padding-bottom:10px;color:var(--ink)}
.p2-badge{position:absolute;right:20px;top:362px;z-index:6;background:var(--cream);color:var(--ink);padding:9px 14px 8px;font-family:var(--cn);font-size:13px;font-weight:700;letter-spacing:.01em;transform:rotate(-3deg) scale(.86);transform-origin:right center;opacity:0}
.p2-field{position:absolute;left:0;bottom:112px;width:390px;height:280px;z-index:3}
#playfield{display:block;width:390px;height:280px}
.p2-field .flegend{position:absolute;left:22px;right:22px;bottom:-14px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink);opacity:1}
.p2-note{position:absolute;left:22px;right:22px;bottom:64px;z-index:5;font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.02em;color:var(--ink);opacity:0;transform:translateY(10px)}
.p2-foot{position:absolute;left:22px;right:22px;bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;z-index:6;color:var(--ink);opacity:0;transform:translateY(10px)}
.p2-foot .mini{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;opacity:1}
.p2-name .line>span{transform:translateY(112%)}

/* ---------- page 3 : cobalt ---------- */
.p3{background:var(--cobalt);color:var(--cream)}
.p3 .brand,.p3 .pcount{color:var(--cream)}
.p3 .bar{color:var(--cream)}
.p3 .bar s.on{background:var(--acid);opacity:1}
.p3-kicker{color:var(--cream)}
.p3-kicker span{color:var(--acid);opacity:1}
.p3-type{position:absolute;left:21px;top:112px;z-index:5;font-family:var(--cn);font-size:88px;line-height:1.02;font-weight:800;letter-spacing:-.06em;color:var(--cream)}
.p3-type em{font-style:normal;color:var(--acid)}
.p3-type .line{padding-bottom:4px}
.p3-type .line>span{transform:translateY(112%)}
.p3-desc{position:absolute;left:22px;right:30px;top:312px;z-index:5;font-family:var(--cn);font-size:15px;line-height:1.78;font-weight:400;color:rgba(255,243,226,.92);opacity:0;transform:translateY(14px)}
.p3-desc b{font-weight:700;color:var(--acid)}
.p3-stats{position:absolute;left:22px;right:22px;top:408px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;z-index:5;opacity:0;transform:translateY(14px)}
.p3-stats div{border-left:1px solid rgba(255,243,226,.28);padding-left:10px}
.p3-stats div:first-child{border-left:0;padding-left:0}
.p3-stats b{display:block;font-family:var(--sans);font-weight:900;font-size:27px;line-height:1;letter-spacing:-.03em;color:var(--acid);font-variant-numeric:tabular-nums}
.p3-stats span{display:block;font-family:var(--mono);font-size:9.5px;line-height:1.45;letter-spacing:.02em;margin-top:6px;color:#FFF3E2}
.p3-charthead{position:absolute;left:22px;right:22px;top:486px;display:flex;justify-content:space-between;align-items:baseline;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#FFF3E2;opacity:0;transform:translateY(10px)}
.p3-charthead b{font-weight:400;color:var(--acid)}
.p3-chart{position:absolute;left:22px;right:22px;top:512px;height:126px;display:flex;align-items:flex-end;gap:3.4px;z-index:5;border-bottom:1px solid rgba(255,243,226,.35)}
.p3-bar{flex:1;height:var(--h);background:rgba(255,243,226,.28);transform:scaleY(0);transform-origin:bottom;will-change:transform}
.p3-bar.hot{background:var(--acid)}
.p3-hours{position:absolute;left:22px;right:22px;top:646px;height:12px;z-index:5;font-family:var(--mono);font-size:9px;color:rgba(255,243,226,.95);opacity:0}
.p3-hours span{position:absolute;top:0;transform:translateX(-50%)}
.p3-hours span:first-child{transform:none}
.p3-hours span:last-child{transform:translateX(-100%)}
.p3-share{position:absolute;left:22px;right:22px;bottom:88px;height:58px;z-index:6;background:var(--acid);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-family:var(--cn);font-size:16px;font-weight:700;letter-spacing:.01em;border:0;cursor:pointer;opacity:0;transform:translateY(16px);transition:transform .15s ease,filter .15s ease}
.p3-share:hover{filter:brightness(1.04)}
.p3-share:active{transform:scale(.975)}
.p3-share span{font-family:var(--sans);font-size:18px;font-weight:900}
.p3-replay{position:absolute;left:22px;bottom:34px;z-index:6;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:rgba(255,243,226,.9);display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(10px);padding:6px 0}
.p3-replay:active{transform:translateY(10px) scale(.97)}
.p3-replay i{font-style:normal;font-size:12px}

/* ---------- entrance ---------- */
.p1.is-active .p1-lead .line>span{animation:rise .78s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
.p1.is-active .p1-huge .num{animation:rise .82s cubic-bezier(.16,1,.3,1) .1s forwards}
.p1.is-active .p1-wave{animation:waveUp 1.4s cubic-bezier(.16,1,.3,1) .12s forwards}
.p1.is-active .p1-unit{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .34s forwards}
.p1.is-active .p1-avg{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .42s forwards}
.p1.is-active .p1-legend{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .48s forwards}
.p1.is-active .p1-foot{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .6s forwards}

.p2.is-active .p2-name .line>span{animation:rise .82s cubic-bezier(.16,1,.3,1) forwards}
.p2.is-active .p2-latin{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .12s forwards}
.p2.is-active .p2-plays{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .16s forwards}
.p2.is-active .p2-badge{animation:stamp .5s cubic-bezier(.3,1.4,.5,1) .4s forwards}
.p2.is-active .p2-note{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .62s forwards}
.p2.is-active .p2-foot{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .66s forwards}

.p3.is-active .p3-type .line>span{animation:rise .82s cubic-bezier(.16,1,.3,1) forwards}
.p3.is-active .p3-desc{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .16s forwards}
.p3.is-active .p3-stats{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .24s forwards}
.p3.is-active .p3-charthead{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .34s forwards}
.p3.is-active .p3-hours{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .62s forwards}
.p3.is-active .p3-bar{transform:scaleY(1);transition:transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 22ms + 380ms)}
.p3.is-active .p3-share{animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .7s forwards}
.p3.is-active .p3-replay{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) .78s forwards}

@keyframes rise{to{transform:translateY(0)}}
@keyframes waveUp{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-3deg) scale(.86)}
  60%{opacity:1;transform:rotate(-3deg) scale(1.05)}
  100%{opacity:1;transform:rotate(-3deg) scale(1)}
}

/* ---------- transition curtain ---------- */
.wipe{position:absolute;inset:0;z-index:24;pointer-events:none;transform:translateY(101%);background:var(--coral);will-change:transform}
.wipe.in{animation:wipeIn .26s cubic-bezier(.4,0,.2,1) forwards}
.wipe.out{animation:wipeOut .34s cubic-bezier(.4,0,.2,1) forwards}
.wipe.back-in{animation:wipeBackIn .26s cubic-bezier(.4,0,.2,1) forwards}
.wipe.back-out{animation:wipeBackOut .34s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wipeIn{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes wipeOut{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes wipeBackIn{from{transform:translateY(-101%)}to{transform:translateY(0)}}
@keyframes wipeBackOut{from{transform:translateY(0)}to{transform:translateY(101%)}}

/* ---------- share sheet ---------- */
.share-layer{position:absolute;inset:0;z-index:30;background:rgba(6,6,6,.64);display:flex;align-items:flex-end;justify-content:center;padding:22px 22px 18px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;cursor:default}
.share-layer.open{opacity:1;visibility:visible}
.share-sheet{width:100%;transform:translateY(26px);transition:transform .3s cubic-bezier(.16,1,.3,1);cursor:default}
.share-layer.open .share-sheet{transform:translateY(0)}
.share-card{width:100%;background:var(--ink);color:var(--cream);overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.sc-top{background:var(--lime);color:var(--ink);display:flex;justify-content:space-between;align-items:center;padding:12px 16px 11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em}
.sc-top b{font-family:var(--sans);font-weight:900;font-size:14px;letter-spacing:-.03em}
.sc-main{padding:20px 16px 18px}
.sc-main .sc-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(255,243,226,.62)}
.sc-main .sc-big{display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.sc-main .sc-big strong{font-family:var(--sans);font-weight:900;font-size:62px;line-height:.9;letter-spacing:-.06em;color:var(--lime);font-variant-numeric:tabular-nums}
.sc-main .sc-big span{font-family:var(--cn);font-size:14px;font-weight:600;padding-bottom:7px;color:var(--cream)}
.sc-main .sc-rows{margin-top:16px;border-top:1px solid rgba(255,243,226,.18);padding-top:12px;display:grid;gap:6px;font-family:var(--mono);font-size:10px;line-height:1.5;color:rgba(255,243,226,.82)}
.sc-main .sc-rows b{font-weight:400;color:var(--cream)}
.sc-bottom{background:var(--coral);color:var(--ink);padding:12px 16px;font-family:var(--cn);font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;letter-spacing:.02em}
.share-actions{display:grid;grid-template-columns:1fr 92px;gap:8px;margin-top:10px}
.share-actions .copy{height:48px;background:var(--acid);color:var(--ink);font-family:var(--cn);font-size:14px;font-weight:700}
.share-actions .copy:active{transform:scale(.985)}
.share-actions .close{height:48px;border:1px solid rgba(255,243,226,.5);color:var(--cream);font-family:var(--cn);font-size:13px}
.share-actions .close:active{transform:scale(.985)}
.share-status{min-height:18px;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:rgba(255,243,226,.8);text-align:center}

/* ---------- still / reduced motion ---------- */
.still .p1-wave,.still .p2-field,.still .p3-chart{transition:none!important}
.still .p1-wave{transform:none!important;animation:none!important}
.still .line>span,.still .p1-huge .num{transform:none!important;animation:none!important}
.still .p1-unit,.still .p1-avg,.still .p1-legend,.still .p1-foot,
.still .p2-latin,.still .p2-plays,.still .p2-note,.still .p2-foot,
.still .p3-desc,.still .p3-stats,.still .p3-charthead,.still .p3-hours,.still .p3-share,.still .p3-replay{opacity:1!important;transform:none!important;animation:none!important}
.still .p2-badge{opacity:1!important;transform:rotate(-3deg)!important;animation:none!important}
.still .p3-bar{transform:scaleY(1)!important;transition:none!important}

.reduced *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
.reduced .p1-wave,.reduced .line>span,.reduced .p1-huge .num,.reduced .p3-bar{transform:none!important;animation:none!important}
.reduced .p1-unit,.reduced .p1-avg,.reduced .p1-legend,.reduced .p1-foot,
.reduced .p2-latin,.reduced .p2-plays,.reduced .p2-note,.reduced .p2-foot,
.reduced .p3-desc,.reduced .p3-stats,.reduced .p3-charthead,.reduced .p3-hours,.reduced .p3-share,.reduced .p3-replay{opacity:1!important;transform:none!important;animation:none!important}
.reduced .p2-badge{opacity:1!important;transform:rotate(-3deg)!important;animation:none!important}

@media (max-width:420px){
  .stage{transform-origin:center center}
}