*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{--ink:#513a36;--muted:#917e77;--accent:#be685a;--panel:#fffdf5;--line:#e7d8c9;--row:#f8f1e6;--control-bg:#fffaf0;--control-ink:#58473e;--control-on:#9b5749;--control-on-ink:#fff;--board-left:23%;--board-right:23%;--board-top:180px;--board-bottom:130px;--panel-padding:24px;font-family:'HarmonyOS Sans SC','Noto Sans CJK SC','Microsoft YaHei',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;user-select:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;transition:background .18s,color .18s,opacity .18s,box-shadow .18s}button:disabled{opacity:.34;cursor:default}button:hover:not(:disabled){filter:brightness(1.04)}button:active:not(:disabled){filter:brightness(.95)}button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}button svg.play-icon{fill:currentColor;stroke:none}img{display:block}figure{margin:0}.stage{position:relative;isolation:isolate;min-height:760px;height:100dvh;overflow:hidden}.backdrop{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.shape{position:absolute;display:block;pointer-events:none}.brandbar{position:absolute;top:25px;left:3vw;right:3vw;height:70px;display:flex;align-items:center;justify-content:space-between;z-index:8}.company-logo{width:230px;height:auto;max-width:35vw}.fullscreen{width:48px;height:48px;display:grid;place-content:center;background:var(--control-bg);color:var(--control-ink);border:1px solid var(--line);border-radius:50%}.title{position:absolute;left:24%;right:24%;top:91px;text-align:center;z-index:4;pointer-events:none}h1{font-size:clamp(40px,4.4vw,82px);font-weight:900;line-height:1.25;letter-spacing:.08em;margin:0;white-space:nowrap}.ensemble{position:absolute;inset:0;z-index:2;pointer-events:none}.character{position:absolute;width:220px;aspect-ratio:1;isolation:isolate}.character img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 12px 12px #29180d12)}.character:before,.character:after{content:'';position:absolute;pointer-events:none}.board-shell{position:absolute;left:var(--board-left);right:var(--board-right);top:var(--board-top);bottom:var(--board-bottom);z-index:3;min-height:0;padding:var(--panel-padding);background:var(--panel);border:1px solid var(--line);border-radius:28px}.viewport{position:relative;height:100%;width:100%;min-height:0;perspective:1200px}.rank-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,30px);text-align:center}.rank-num{font-family:Georgia,serif;font-size:clamp(32px,5vh,62px);font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.avatar-wrap{display:block;width:clamp(100px,18vh,210px);height:clamp(100px,18vh,210px);padding:7px;border:1px solid var(--line);border-radius:50%;background:var(--row);box-shadow:0 8px 24px #3f221510}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--row)}.member-name{font-size:clamp(26px,3vw,53px);font-weight:750;letter-spacing:.04em;line-height:1.4;max-width:94%;overflow-wrap:anywhere}.member-amount{font:750 clamp(33px,4.1vw,76px)/1.15 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;letter-spacing:-.035em}.member-amount small{font-size:.45em;vertical-align:middle;margin-right:7px;font-weight:400}.viewport.board-mode{display:flex;flex-direction:column;gap:4px;justify-content:center}.board-row{display:grid;grid-template-columns:44px 42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:0 16px;flex:1;min-height:0;border-radius:10px;max-height:95px}.board-row:nth-child(2n){background:var(--row)}.board-row.is-first{background:var(--row)}.br-rank{font:500 clamp(17px,1.6vw,28px)/1 Georgia,serif;font-variant-numeric:tabular-nums;color:var(--muted);text-align:center}.board-row:nth-child(-n+3) .br-rank{color:var(--accent);font-weight:800}.br-avatar{display:block;width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--row);border:1px solid var(--line)}.br-avatar img{height:100%;width:100%;object-fit:cover}.br-name{font-size:clamp(16px,1.55vw,28px);font-weight:600;line-height:1.3;overflow-wrap:anywhere;min-width:0}.br-amount{font:650 clamp(17px,1.65vw,30px)/1.2 Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;letter-spacing:-.02em}.br-amount small{font-size:.62em;margin-right:5px;font-weight:400}.board-row:nth-child(-n+3) .br-amount{color:var(--accent)}.empty-state{display:grid;place-content:center;text-align:center;margin:0;height:100%;width:100%;font-size:clamp(18px,2vw,30px);color:var(--muted);grid-column:1/-1;grid-row:1/-1}.controls{position:absolute;bottom:44px;left:23%;right:23%;z-index:8;display:flex;justify-content:center;align-items:center;gap:13px}.control{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;min-width:155px;padding:0 20px;background:var(--control-bg);color:var(--control-ink);border:1px solid var(--line);border-radius:15px;font-size:15px;font-weight:650;white-space:nowrap}.control.is-on{background:var(--control-on);color:var(--control-on-ink);border-color:var(--control-on)}.pager{display:flex;gap:7px}.page-button{width:55px;height:56px;background:var(--control-bg);color:var(--control-ink);border:1px solid var(--line);border-radius:15px;display:grid;place-content:center}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.no-hero .ensemble{display:none}html:fullscreen body.cursor-hidden,html:fullscreen body.cursor-hidden *{cursor:none!important}
@media(min-width:1800px){body{--board-top:210px;--board-bottom:145px;--panel-padding:32px}.brandbar{height:80px;top:29px}.company-logo{width:280px}.title{top:105px}.controls{bottom:49px;gap:16px}.control{height:64px;min-width:180px;font-size:18px}.page-button{height:64px;width:64px}.board-row{grid-template-columns:53px 49px minmax(0,1fr) auto;gap:17px}.br-avatar{width:47px;height:47px}}
@media(max-width:1100px){body{--board-left:20%;--board-right:20%;--board-top:163px;--board-bottom:116px;--panel-padding:18px}.stage{min-height:740px}.company-logo{width:195px}.brandbar{top:19px}.title{top:92px;left:20%;right:20%}h1{font-size:43px}.board-row{grid-template-columns:29px 29px minmax(0,1fr) auto;gap:9px;padding:0 8px}.br-avatar{width:28px;height:28px}.br-name{font-size:16px}.br-amount{font-size:17px}.br-rank{font-size:17px}.controls{left:15%;right:15%;bottom:35px;gap:9px}.control{height:54px;min-width:140px;padding:0 15px;font-size:14px}.page-button{height:54px;width:49px}.character{width:180px}}
@media(max-width:700px){body{--board-left:16px;--board-right:16px;--board-top:250px;--board-bottom:100px;--panel-padding:13px}.stage{height:100dvh;min-height:810px}.brandbar{left:18px;right:18px;top:12px;height:55px}.company-logo{width:152px;max-width:60vw}.fullscreen{height:44px;width:44px}.title{left:10px;right:10px;top:85px}h1{font-size:34px;letter-spacing:.06em}.board-shell{border-radius:20px}.board-row{grid-template-columns:22px 25px minmax(0,1fr) auto;gap:7px;padding:0 6px;min-height:30px;border-radius:7px}.br-avatar{width:24px;height:24px}.br-rank{font-size:14px}.br-name{font-size:13px;line-height:1.35}.br-amount{font-size:14px}.br-amount small{margin-right:3px}.viewport.board-mode{gap:3px}.controls{left:16px;right:16px;bottom:24px;gap:8px}.control{height:52px;min-width:0;flex:1;font-size:12px;gap:6px;padding:0 8px;border-radius:12px}.control svg{width:18px;height:18px}.pager{gap:4px}.page-button{width:44px;height:52px;border-radius:12px}.page-button svg{width:19px;height:19px}.character{width:80px;height:100px;aspect-ratio:auto;top:139px;bottom:auto!important}.character-black{left:0}.character-cream{left:20%}.character-pink{left:40%}.character-turtle{left:60%}.character-jester{left:80%}.character img{object-fit:contain}.rank-card{gap:17px}.rank-num{font-size:28px}.avatar-wrap{height:100px;width:100px;padding:5px}.member-name{font-size:26px}.member-amount{font-size:38px}.has-long-names .stage{min-height:900px}.has-long-names .br-name{font-size:11px}.has-long-names .br-amount{font-size:12px}.has-long-names .board-row:nth-child(-n+2){min-height:49px}.empty-state{font-size:18px}}
@media(max-height:650px) and (min-width:701px){.stage{min-height:780px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}