:root{color-scheme:dark;--accent:#70dbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f5fc;background:#0b0b16}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 25%,#33205177,transparent 55%),radial-gradient(ellipse at 85% 80%,#073a4a66,transparent 55%),#0b0b16}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:5px}.catalogue{max-width:1150px;min-height:100svh;margin:auto;padding:clamp(16px,3vw,34px)}header,footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-weight:950;font-size:26px;color:var(--accent);text-decoration:none;letter-spacing:-1px}.brand span{font-size:14px;letter-spacing:2px;color:#fff}.edition,.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.5px}.edition{border:1px solid #ffffff25;padding:9px 13px;border-radius:30px;color:#aaaabd}.intro{margin:34px 0 24px}.intro .eyebrow{color:#b197df}h1{font-size:clamp(26px,4.7vw,51px);letter-spacing:-2px;margin:8px 0}.intro>p:last-child{color:#a6a6bd;font-size:14px}.character-card{display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;border-radius:28px;border:1px solid #ffffff18;background:linear-gradient(135deg,#ffffff09,#ffffff03);box-shadow:0 22px 75px #0004;min-height:440px}#preview{position:relative;min-height:440px;touch-action:pan-y;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#575a8a1a,transparent 60%)}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.halo{position:absolute;width:260px;height:260px;border-radius:50%;top:14%;left:calc(50% - 130px);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);box-shadow:0 0 90px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 0 65px color-mix(in srgb,var(--accent) 5%,transparent)}.number{position:absolute;left:25px;top:20px;font-size:11px;font-weight:700;letter-spacing:2px;color:#85859c}.arrow{position:absolute;z-index:3;top:45%;width:45px;height:52px;border:1px solid #ffffff30;border-radius:15px;background:#111322b8;color:white;font-size:37px;line-height:1;backdrop-filter:blur(6px)}.arrow:hover{background:#404258}.previous{left:16px}.next{right:16px}.dots{position:absolute;z-index:3;bottom:19px;left:0;right:0;display:flex;justify-content:center;gap:10px}.dots button{width:30px;height:28px;padding:8px;background:none;border:0}.dots button:after{content:'';display:block;height:7px;border-radius:8px;background:#616176}.dots button[aria-current=true]:after{background:var(--accent)}.details{display:flex;flex-direction:column;justify-content:center;padding:32px 40px 30px 20px}.details .eyebrow{color:var(--accent);margin:0 0 12px}h2{font-size:clamp(36px,5vw,61px);line-height:1;letter-spacing:-2.8px;margin:0 0 17px}.ability{color:var(--accent);font-size:14px;font-weight:700}.description{max-width:330px;color:#b4b4c7;line-height:1.65;font-size:15px;margin:6px 0 25px}.choose{background:var(--accent);border:0;border-radius:13px;padding:17px 22px;font-size:15px;font-weight:850;color:#08151d;box-shadow:0 5px 24px color-mix(in srgb,var(--accent) 14%,transparent)}.choose:disabled{opacity:.45;cursor:wait}.choose:hover:not(:disabled){filter:brightness(1.13)}.earning{font-size:12px;color:#a0a0b5;text-align:center;margin:12px 0 7px}.status{font-size:11px;color:#74748d;text-align:center;min-height:16px;margin:7px 0}.retry{border:1px solid #ffffff30;border-radius:8px;padding:7px;background:#25253a;color:#fff}footer{font-size:10px;color:#64647e;letter-spacing:1.5px;margin-top:22px}footer span{letter-spacing:0}@media(max-width:650px){.catalogue{padding:16px}.edition{font-size:9px;padding:7px}.intro{margin:20px 0 16px}.intro .eyebrow{font-size:8px}h1{letter-spacing:-1px}.character-card{grid-template-columns:1fr;min-height:0;border-radius:20px}#preview{height:35svh;min-height:245px;max-height:380px}.halo{width:180px;height:180px;left:calc(50% - 90px);top:10%}.details{padding:21px 24px 15px;text-align:center}.details .eyebrow{font-size:9px;margin-bottom:9px}h2{font-size:37px;letter-spacing:-1.5px;margin-bottom:8px}.ability{font-size:12px;margin:7px 0}.description{font-size:13px;line-height:1.5;max-width:100%;margin:5px 0 16px}.choose{padding:14px}.earning{font-size:10px}.status{font-size:10px}footer{font-size:8px;margin-top:16px}}@media(max-height:650px) and (min-width:651px){.intro{margin:14px 0}.intro .eyebrow{display:none}.character-card,#preview{min-height:350px}.details{padding-top:20px;padding-bottom:20px}h1{font-size:32px}.description{margin-bottom:16px}}