.hero-character-slider.hero-character-browser{grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0;display:grid}.hero-character-browser .hero-character-heading{justify-content:space-between;align-items:center;gap:18px;padding:10px 18px 0;display:flex}.hero-character-heading>div{gap:5px;min-width:0;display:grid}.hero-character-heading>div>span{font:12px/1.5 var(--hub-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#c5ae7d}.hero-character-heading a{font:24px/1.25 var(--hub-serif,Georgia,serif);color:#ede6d9;overflow-wrap:anywhere;text-decoration:none}.hero-character-heading a:hover{text-underline-offset:5px;text-decoration:underline}.hero-character-position{white-space:nowrap;font:22px/1.3 var(--hub-mono,monospace);color:#e6ca90;flex:none}.hero-character-position small{color:#9da6b4;font-size:14px}.hero-character-browser .hero-character-stage{min-height:0;position:relative}.hero-character-browser .hero-sprite-track{outline-offset:-3px;scrollbar-width:none;height:100%;min-height:0;position:absolute;inset:0}.hero-character-browser .hero-sprite-track::-webkit-scrollbar{display:none}.hero-character-browser .hero-sprite-slide{scroll-snap-stop:always;padding:8px 40px}.hero-character-browser .hero-sprite-slide img{object-fit:contain;width:100%;height:100%;max-height:100%}.hero-character-arrows{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:0}.hero-character-arrows button{pointer-events:auto;color:#f0d69f;min-height:48px;font:14px/1.3 var(--hub-mono,monospace);cursor:pointer;background:#0d131df0;border:1px solid #d5b67688;border-radius:4px;justify-content:center;align-items:center;gap:7px;padding:10px 13px;transition:background .15s,border-color .15s;display:inline-flex;box-shadow:0 6px 22px #0006}.hero-character-arrows button>span{font:24px/1 Arial,sans-serif}.hero-character-arrows button:hover,.hero-character-next:hover{background:#25231e;border-color:#e4c482}.hero-character-browser :is(button,a,.hero-sprite-track):focus-visible{outline-offset:3px;outline:2px solid #f1d59e}.hero-character-browser .hero-sprite-track:focus-visible{outline-offset:-3px}.hero-character-browser .hero-character-next{color:#e9e3d8;text-align:left;cursor:pointer;background:#0d131de8;border:1px solid #d5b67655;border-radius:4px;align-items:center;gap:14px;width:calc(100% - 36px);min-width:0;margin:0 18px;padding:9px 14px;transition:background .15s,border-color .15s;display:flex}.hero-character-next>img{object-fit:contain;width:48px;height:54px;image-rendering:pixelated;flex:none}.hero-character-next>span:not(.hero-character-next-arrow){gap:5px;min-width:0;display:grid}.hero-character-next small{font:12px/1.3 var(--hub-mono,monospace);letter-spacing:.1em;color:#c6ad77}.hero-character-next strong{white-space:nowrap;text-overflow:ellipsis;font:500 17px/1.4 Arial,sans-serif;overflow:hidden}.hero-character-next-arrow{color:#e0c38b;margin-left:auto;font-size:27px}.hero-character-hint{text-align:center;color:#a5afbd;font-size:14px;line-height:1.6}@media (max-width:900px){.hero-character-browser .hero-character-heading{gap:10px;padding-inline:8px}.hero-character-heading a{font-size:21px}.hero-character-position{font-size:18px}.hero-character-position small{font-size:12px}.hero-character-arrows button{gap:5px;padding-inline:9px;font-size:13px}.hero-character-browser .hero-character-next{gap:10px;width:calc(100% - 16px);margin-inline:8px;padding-inline:10px}.hero-character-next>img{width:40px}.hero-character-next strong{font-size:15px}}@media (max-width:650px){.hero-character-slider.hero-character-browser{gap:10px;height:470px}.hero-character-browser .hero-character-heading{padding-top:0;padding-inline:0}.hero-character-heading a{font-size:24px}.hero-character-position{font-size:20px}.hero-character-browser .hero-character-next{width:100%;margin-inline:0}.hero-character-arrows button{min-height:46px;font-size:13px}.hero-character-browser .hero-sprite-slide{padding-inline:24px}.hero-character-next strong{font-size:16px}}@media (prefers-reduced-motion:reduce){.hero-character-browser button{transition:none}.hero-character-browser .hero-sprite-track{scroll-behavior:auto}}@media (max-width:700px){.hero-character-slider.hero-character-browser{width:100%;min-width:0;max-width:100%;height:clamp(510px,132vw,570px);margin-bottom:24px;padding-inline:18px;position:relative;inset:auto}.hero-character-browser .hero-character-heading{align-items:flex-start;gap:12px;min-height:66px}.hero-character-heading>div{flex:1;min-width:0}.hero-character-heading a{font-size:clamp(21px,6.2vw,25px);line-height:1.25}.hero-character-heading>div>span{letter-spacing:.08em;overflow-wrap:anywhere;font-size:12px}.hero-character-position{padding-top:3px;font-size:19px}.hero-character-position small{font-size:12px}.hero-character-browser .hero-sprite-track{overscroll-behavior-x:contain;touch-action:auto}.hero-character-browser .hero-sprite-slide{padding:4px 8px 64px}.hero-character-browser .hero-sprite-slide img{object-fit:contain;max-width:100%;max-height:100%}.hero-character-arrows{align-items:flex-end;padding-bottom:5px}.hero-character-arrows button{touch-action:manipulation;min-width:96px;min-height:48px;font-size:14px}.hero-character-browser .hero-character-next{touch-action:manipulation;gap:12px;min-height:76px;padding:9px 12px}.hero-character-next>img{width:42px;height:50px}.hero-character-next strong{white-space:normal;overflow-wrap:anywhere;font-size:16px;line-height:1.35}.hero-character-next small{letter-spacing:.06em;font-size:12px}.hero-character-next-arrow{flex:none;font-size:25px}}@media (max-width:360px){.hero-character-browser .hero-character-heading{gap:9px}.hero-character-heading a{font-size:21px}.hero-character-position{font-size:17px}.hero-character-next>img{width:36px}.hero-character-next strong{font-size:15px}}@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){.hero-character-heading a{font-size:21px}.hero-character-heading>div>span{letter-spacing:.06em;font-size:12px}.hero-character-browser .hero-character-next{min-height:64px;padding-block:6px}.hero-character-next>img{height:44px}.hero-character-arrows button{min-height:44px}}@media (max-width:700px) and (max-height:500px) and (orientation:landscape){.hero-character-slider.hero-character-browser{height:400px}}
