* { box-sizing: border-box; }
:root { color-scheme: light; font-family: SimSun, "宋体", serif; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: #fff; color: #111; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid #f48c00; outline-offset: 4px; }
.page-shell { position: relative; width: calc(100% - 80px); max-width: 390px; margin: 28px auto 18px; }
.artboard { position: relative; isolation: isolate; width: 888px; height: 2758px; transform: scale(var(--page-scale, .314)); transform-origin: top left; text-rendering: geometricPrecision; }


.page-panel { position: absolute; z-index: -2; left: 0; top: 80px; width: 888px; height: 2615px; border-top: 3px solid #ffcf9f; border-bottom: 3px solid #ffcf9f; border-radius: 65px 0 65px 0; background: linear-gradient(180deg, #d5f1ff 0, #f1faff 12%, #fff 28%, #fff 73%, #edfaff 91%, #d4f1ff 100%); }
.page-panel::after { content: ""; position: absolute; width: 240px; height: 72px; left: 555px; bottom: -3px; background: linear-gradient(145deg, transparent 40%, #fff9 41%, #fff9 44%, transparent 45%); }
.planet-art { position: absolute; width: 305px; height: 130px; pointer-events: none; z-index: -1; }
.planet-top { left: 65px; top: 18px; }
.planet-bottom { right: 65px; bottom: -6px; transform: rotate(180deg); }
.phone-top { position: absolute; left: 329px; top: 24px; width: 230px; height: 52px; border-radius: 30px; background: #302b29; }
.back-button { position: absolute; top: 56px; left: 40px; z-index: 2; border: 0; border-radius: 12px; width: 60px; height: 60px; background: #9b9f9e; padding: 0; }
.back-button span { display: block; width: 27px; height: 27px; border-left: 3px solid white; border-bottom: 3px solid white; transform: translate(22px, 0) rotate(45deg); }


.ranking-banner { position: absolute; left: 40px; top: 118px; width: 808px; height: 382px; border: 0; background: transparent; padding: 0; overflow: visible; }
.ranking-banner::before { content: ""; position: absolute; inset: 0; border: 4px solid #c99b2a; border-radius: 9px; background: radial-gradient(ellipse at 50% 10%, #fff9 0, #fff0 65%), linear-gradient(90deg, #fffdf5 0%, #ead6a5 27%, #e8cb8a 50%, #ead6a5 73%, #fffdf5 100%); }
.ranking-banner > img, .ranking-banner > svg { position: absolute; display: block; pointer-events: none; }
.ranking-wing { top: 7px; width: 345px; height: 270px; z-index: 1; }
.ranking-wing-left { left: -19px; transform: scaleX(-1); }
.ranking-wing-right { left: 482px; }
.ranking-avatar { border-radius: 50%; object-fit: cover; z-index: 2; }
.ranking-avatar-left { width: 141px; height: 141px; left: 157px; top: 77px; }
.ranking-avatar-right { width: 141px; height: 141px; left: 494px; top: 77px; }
.ranking-avatar-center { width: 205px; height: 202px; left: 301px; top: 36px; }
.ranking-avatar-ring { position: absolute; width: 146px; height: 146px; top: 74px; border: 4px solid #ca9a2c; border-radius: 50%; z-index: 3; }
.ranking-ring-left { left: 154px; }
.ranking-ring-right { left: 491px; }
.ranking-laurel { width: 243px; height: 230px; left: 282px; top: 22px; z-index: 3; }
.ranking-gold-strip { width: 420px; height: 73px; left: 194px; top: 294px; z-index: 4; }
.ranking-ribbon { width: 804px; height: 174px; left: 2px; top: 208px; z-index: 5; }
.ranking-title { position: absolute; left: 120px; right: 120px; top: 210px; height: 78px; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 54px; font-weight: 400; line-height: 74px; text-align: center; color: #ce9f3d; -webkit-text-stroke: 6px #fff9e9; paint-order: stroke fill; z-index: 6; }
.ranking-subtitle { position: absolute; left: 194px; top: 292px; width: 420px; height: 80px; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; font-size: 46px; font-weight: 400; line-height: 64px; letter-spacing: 6px; color: #c99a35; fill: currentColor; text-align: center; z-index: 6; }


.live-section { position: absolute; left: 40px; top: 502px; width: 808px; }
.section-heading { --bar-light: #c6a2f2; --bar-dark: #ab79df; position: relative; width: 837px; height: 94px; margin-left: -15px; color: #fff; }
.section-heading::before { content: ""; position: absolute; left: 5px; right: 7px; top: 4px; height: 78px; border: 4px solid #fff; border-radius: 50px; background: linear-gradient(135deg, transparent 0 67%, #ffffff20 67% 75%, transparent 75%), linear-gradient(180deg, var(--bar-light) 0%, var(--bar-dark) 100%); box-shadow: 0 7px 7px #0005, inset 0 2px 3px #fff9; }
.section-heading::after { content: ""; position: absolute; left: 25px; right: 25px; top: 10px; height: 18px; border-radius: 30px; background: linear-gradient(#ffffff7a, #ffffff00); pointer-events: none; }
.section-heading h1, .section-heading h2 { position: absolute; left: 72px; top: 14px; width: 520px; font-size: 52px; line-height: 60px; letter-spacing: 3px; font-weight: normal; text-align: center; padding: 0; margin: 0; text-shadow: 0 1px 1px #fff6; z-index: 1; }
.section-heading h1 { left: 55px; width: 545px; }
.more-button { position: absolute; right: 44px; top: 16px; font-size: 36px; letter-spacing: 2px; height: 54px; color: #fff; border: 0; background: transparent; padding: 0; z-index: 1; }
.heading-voice { --bar-light: #7be3f3; --bar-dark: #2dc3e3; }
.heading-voice h2 { font-size: 49px; left: 50px; width: 560px; letter-spacing: 3px; }


.theme-pink {
  --theme-color: #ff6464;
  --live-gradient: linear-gradient(218.85deg, #fe7373 0%, #fefefe 52.15%);
  --identity-gradient: linear-gradient(223.47deg, #fe5f5f 0%, #fefefe 61.30%);
  --footer-gradient: linear-gradient(189.88deg, #fe7a7a 0%, #fefefe 32.07%);
  --wide-gradient: linear-gradient(190.98deg, #fe6f6f 0%, #fefefe 68.08%);
  --wide-identity-gradient: linear-gradient(223.59deg, #fe7070 0%, #fefefe 61.24%);
}
.theme-yellow {
  --theme-color: #ffcc00;
  --live-gradient: linear-gradient(218.87deg, #fed83e 0%, #fefefe 52.11%);
  --identity-gradient: linear-gradient(223.61deg, #fed738 0%, #fefefe 61.27%);
  --footer-gradient: linear-gradient(189.88deg, #feda48 0%, #fefefe 32.09%);
  --wide-gradient: linear-gradient(190.96deg, #fed738 0%, #fefefe 68.20%);
  --wide-identity-gradient: linear-gradient(223.58deg, #fed739 0%, #fefefe 61.17%);
}
.theme-purple {
  --theme-color: #623c94;
  --live-gradient: linear-gradient(218.88deg, #cebaee 0%, #fefefe 52.17%);
  --identity-gradient: linear-gradient(223.46deg, #ccb8ee 0%, #fefefe 61.23%);
  --footer-gradient: linear-gradient(189.88deg, #d0bdef 0%, #fefefe 32.19%);
  --wide-gradient: linear-gradient(190.97deg, #ccb8ee 0%, #fefefe 68.41%);
  --wide-identity-gradient: linear-gradient(223.58deg, #ccb8ee 0%, #fefefe 61.52%);
}
.theme-blue {
  --theme-color: #30bdef;
  --live-gradient: linear-gradient(218.74deg, #62ccf3 0%, #fefefe 52.30%);
  --identity-gradient: linear-gradient(223.29deg, #5dcbf2 0%, #fefefe 61.23%);
  --footer-gradient: linear-gradient(189.88deg, #6bcff3 0%, #fefefe 32.11%);
  --wide-gradient: linear-gradient(190.97deg, #5dcbf2 0%, #fefefe 68.42%);
  --wide-identity-gradient: linear-gradient(223.58deg, #5ecbf2 0%, #fefefe 61.50%);
}
.theme-green {
  --theme-color: #009933;
  --live-gradient: linear-gradient(218.87deg, #3eb265 0%, #fefefe 52.11%);
  --identity-gradient: linear-gradient(223.45deg, #39af60 0%, #fefefe 61.17%);
  --footer-gradient: linear-gradient(189.88deg, #48b66d 0%, #fefefe 32.09%);
  --wide-gradient: linear-gradient(190.96deg, #38af60 0%, #fefefe 68.27%);
  --wide-identity-gradient: linear-gradient(223.41deg, #39b061 0%, #fefefe 61.35%);
}
.live-grid { display: grid; grid-template-columns: repeat(2,397px); gap: 10px 14px; }
.live-card, .voice-card { position: relative; border: 0; border-radius: 12px; padding: 0; text-align: left; color: #111; overflow: hidden; background-color: #fefefe; }
.live-card { display: block; width: 397px; height: 239px; background-image: var(--live-gradient); background-position: 177px 0; background-size: 220px 188px; background-repeat: no-repeat; }
.live-card::after, .voice-card::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--theme-color); border-radius: 12px; pointer-events: none; z-index: 8; }
.identity-box { position: absolute; left: 0; top: 0; border: 0; border-radius: 0 11px 11px 0; background: transparent; overflow: hidden; z-index: 4; pointer-events: none; }
.identity-box::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--theme-color); border-radius: inherit; z-index: 8; pointer-events: none; }
.live-card .identity-box { width: 178px; height: 191px; }
.role, .portrait, .nickname, .card-caption, .tag-stack, .card-description, .service-info { z-index: 4; }
.live-card .role { position: absolute; left: 7px; top: 7px; width: 29px; font-size: 32px; line-height: 33px; text-align: center; word-break: break-all; }
.live-card .role-three { line-height: 44px; }
.live-card .portrait { position: absolute; left: 42px; top: 0; width: 136px; height: 148px; padding-top: 3px; border: 3px solid var(--theme-color); border-radius: 0 9px 0 20px; object-fit: cover; }
.live-card .nickname { position: absolute; left: 0; top: 145px; width: 178px; height: 46px; border: 3px solid var(--theme-color); border-radius: 11px 0 11px 0; text-align: center; white-space: nowrap; font-size: 34px; line-height: 40px; background: transparent; }
.live-card .card-caption { position: absolute; left: 210px; top: 10px; width: 178px; height: 45px; font-size: 34px; line-height: 40px; letter-spacing: 8px; white-space: nowrap; }
.card-description { position: absolute; left: 0; right: 0; top: 188px; margin: 0; padding: 5px 3px 0 6px; height: 51px; border-top: 3px solid var(--theme-color); background: var(--footer-gradient); background-origin: border-box; white-space: nowrap; font-size: 36px; line-height: 39px; letter-spacing: 2px; }


.tag-stack { position: absolute; left: 214px; top: 62px; }
.ribbon-tag { display: block; position: relative; width: 129px; height: 36px; padding-left: 7px; color: #fff; font-size: 32px; line-height: 36px; background: linear-gradient(90deg, var(--tag-color) 0%, var(--tag-color) 12%, #fff 100%); clip-path: polygon(0 0, 100% 0, 81% 50%, 100% 100%, 0 100%); text-shadow: 0 1px 1px #0002; }
.tag-red { --tag-color: #ff333c; }
.tag-purple { --tag-color: #b412d9; }
.tag-orange { --tag-color: #ffa234; }
.tag-blue { --tag-color: #2623ff; }
.tag-cyan { --tag-color: #23d4ed; }
.tag-green { --tag-color: #158653; }


.floral-art { position: absolute; display: block; object-fit: contain; pointer-events: none; z-index: 1; }
.live-card .floral-left { left: 182px; top: 5px; width: 64px; height: 73px; object-position: top left; }
.live-card .floral-right { right: 6px; top: 108px; width: 63px; height: 77px; object-position: bottom right; }
.voice-card .floral-left { left: 168px; top: 5px; width: 154px; height: 164px; object-position: left center; }
.voice-card .floral-right { right: 5px; top: 5px; width: 151px; height: 164px; object-position: right center; }
.voice-section { position: absolute; left: 40px; top: 1589px; width: 808px; }
.voice-list { display: flex; flex-direction: column; gap: 12px; }
.voice-card { width: 802px; height: 174px; background-image: var(--wide-gradient); background-position: 164px 0; background-size: 638px 174px; background-repeat: no-repeat; }
.voice-card, .voice-card::after { border-bottom-left-radius: 0; }
.voice-card .identity-box { width: 163px; height: 174px; }
.voice-card .role { position: absolute; left: 9px; top: 4px; width: 33px; height: 127px; font-size: 31px; line-height: 33px; writing-mode: vertical-rl; text-orientation: upright; text-align: center; white-space: nowrap; word-break: normal; letter-spacing: 0; }
.voice-card .portrait { position: absolute; left: 47px; top: 0; width: 116px; height: 138px; padding-top: 2px; border: 3px solid var(--theme-color); border-radius: 0 9px 0 20px; object-fit: cover; }
.voice-card .nickname { position: absolute; left: 0; top: 135px; width: 163px; height: 39px; border: 3px solid var(--theme-color); border-radius: 11px 0 11px 0; font-size: 29px; line-height: 32px; text-align: center; letter-spacing: .5px; white-space: nowrap; background: transparent; }
.voice-card .service-info { position: absolute; left: 246px; top: 26px; width: 147px; display: flex; flex-direction: column; gap: 4px; color: var(--theme-color); }
.service-info span { display: block; height: 36px; border: 2px solid currentColor; margin-top: 0; text-align: center; font-size: 31px; line-height: 32px; letter-spacing: 1px; background: #fff9; }
.voice-card .tag-stack { left: 407px; top: 27px; }


.connect-button { --button-top: #ff2424; --button-mid: #ef0000; --button-bottom: #b80000; position: absolute; left: 568px; width: 179px; height: 68px; border: 4px solid #fff; border-radius: 42px; padding: 0 0 1px; background: linear-gradient(180deg, var(--button-top), var(--button-mid) 45%, var(--button-bottom)); box-shadow: 0 6px 5px #0008, inset 0 1px 2px #fff9; color: #fff; font-size: 33px; line-height: 57px; font-weight: normal; text-align: center; white-space: nowrap; text-shadow: 1px 2px 2px #333; z-index: 5; }
.connect-button::before { content: ""; position: absolute; top: 4px; left: 17px; right: 25px; height: 11px; border-radius: 20px; background: linear-gradient(#fff, #fffa 55%, #fff0); pointer-events: none; }
.connect-red { top: 15px; }
.connect-blue { --button-top: #2525ff; --button-mid: #0300ed; --button-bottom: #0000b7; top: 89px; }
.connect-button:disabled { --button-top: #c4c4c4; --button-mid: #828282; --button-bottom: #323232; cursor: default; }
.connect-button:active:not(:disabled) { transform: translateY(2px); }

.demo-dialog { width: min(340px, calc(100vw - 36px)); border: 1px solid #cbdbe2; border-radius: 14px; padding: 28px 22px 22px; box-shadow: 0 12px 48px #0003; color: #26353c; font-family: "Microsoft YaHei", sans-serif; }
.demo-dialog::backdrop { background: #12202d66; }
.dialog-close { position: absolute; right: 8px; top: 3px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 26px; color: #667; }
.dialog-avatar { display: block; width: 66px; height: 69px; border-radius: 8px; margin: 0 auto 10px; object-fit: cover; }
.demo-dialog h2 { margin: 6px 0 12px; font-size: 20px; text-align: center; }
.demo-dialog p { font-size: 14px; line-height: 1.8; margin: 6px 0; }
.dialog-note { color: #738089; }
.rank-row { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #ecf0f2; padding: 9px 0; font-size: 14px; }
.rank-row img { width: 36px; height: 38px; object-fit: cover; border-radius: 4px; }
.rank-row strong { color: #c79021; min-width: 15px; }
@media (max-width: 319px) { .page-shell { width: calc(100% - 32px); margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }