@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";
.header{z-index:var(--z-sticky-nav);height:var(--header-height);background:color-mix(in oklch,var(--color-bg)88%,transparent);-webkit-backdrop-filter:blur(18px)saturate(1.25);backdrop-filter:blur(18px)saturate(1.25);box-shadow:inset 0 -1px 0 var(--color-border),0 12px 32px color-mix(in oklch,var(--color-ink-shadow)18%,transparent);position:fixed;inset:0 0 auto}.header:after{content:"";inset:auto var(--spacing-lg)-1px;background:linear-gradient(90deg,transparent,var(--color-accent),var(--color-accent-blue),transparent);opacity:.7;height:1px;position:absolute}.header__container{width:min(100%,var(--container-max));height:100%;padding-inline:var(--spacing-lg);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.header__logo{align-items:center;gap:var(--spacing-xs);min-width:0;min-height:44px;color:var(--color-text);font-family:var(--font-heading);font-size:var(--font-size-xl);text-transform:uppercase;white-space:nowrap;transition-property:transform,color;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);font-weight:950;line-height:1;display:inline-flex}.header__logo:hover{color:var(--color-text);transform:translateY(-1px)}.header__logo:active{transform:scale(.96)}.header__logo-icon{color:var(--color-accent);filter:drop-shadow(0 0 6px var(--color-accent-glow));font-size:.7em}.header__logo-accent{color:var(--color-accent)}.header__logo-season{min-height:24px;padding-inline:var(--spacing-sm);border-radius:var(--radius-full);color:var(--color-accent-cyan);background:color-mix(in oklch,var(--color-accent-cyan)12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-accent-cyan)36%,transparent);font-size:var(--font-size-xs);align-items:center;font-weight:900;display:inline-flex}.header__nav{--header-nav-active-index:0;padding:var(--spacing-xs);border-radius:var(--radius-full);background:color-mix(in oklch,var(--color-bg-card)62%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-border)80%,transparent);grid-template-columns:repeat(3,minmax(6.5rem,1fr));align-items:center;display:grid;position:relative}.header__nav:has(.header__nav-link:nth-child(2).header__nav-link--active){--header-nav-active-index:1}.header__nav:has(.header__nav-link:nth-child(3).header__nav-link--active){--header-nav-active-index:2}.header__nav:before{content:"";inset-block:var(--spacing-xs);left:var(--spacing-xs);width:calc((100% - (var(--spacing-xs)*2))/3);border-radius:var(--radius-full);background:var(--color-accent);box-shadow:0 12px 28px color-mix(in oklch,var(--color-accent-red)28%,transparent),inset 0 0 0 1px color-mix(in oklch,var(--color-ink-glint)16%,transparent);transform:translateX(calc(var(--header-nav-active-index)*100%));transition-property:transform,background-color,box-shadow;transition-duration:var(--dur-med);transition-timing-function:var(--ease-out);position:absolute}.header__nav-link{z-index:1;min-height:40px;padding-inline:var(--spacing-md);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:var(--font-size-sm);white-space:nowrap;transition-property:transform,color,background-color;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);justify-content:center;align-items:center;font-weight:900;line-height:1;display:inline-flex;position:relative}.header__nav-link:hover{color:var(--color-text)}.header__nav-link:active{transform:scale(.96)}.header__nav-link--active{color:var(--color-accent-ink)}.header__menu-btn{border-radius:var(--radius-md);width:44px;min-height:44px;color:var(--color-text);background:var(--color-bg-card);box-shadow:inset 0 0 0 1px var(--color-border);transition-property:transform,background-color,box-shadow;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);place-items:center;display:none}.header__menu-btn:hover{background:var(--color-bg-hover)}.header__menu-btn:active{transform:scale(.96)}.header__menu-btn span{border-radius:var(--radius-full);width:20px;height:2px;transition-property:transform,opacity;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);background:currentColor;grid-area:1/1}.header__menu-btn span:first-child{transform:translateY(-6px)}.header__menu-btn span:nth-child(3){transform:translateY(6px)}.header__menu-btn--open span:first-child{transform:rotate(45deg)}.header__menu-btn--open span:nth-child(2){opacity:0}.header__menu-btn--open span:nth-child(3){transform:rotate(-45deg)}@media (max-width:48rem){.header__container{padding-inline:var(--spacing-md)}.header__menu-btn{display:grid}.header__nav{top:calc(100% + var(--spacing-sm));right:var(--spacing-md);min-width:min(16rem,100svw - 2rem);padding:var(--spacing-sm);border-radius:var(--radius-lg);background:var(--color-bg-card);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition-property:transform,opacity;transition-duration:var(--dur-med);transition-timing-function:var(--ease-out);grid-template-columns:1fr;display:grid;position:absolute;transform:translateY(-8px)}.header__nav--open{opacity:1;pointer-events:auto;transform:translateY(0)}.header__nav:before{display:none}.header__nav-link{justify-content:flex-start;width:100%}.header__nav-link--active{background:var(--color-accent)}}
:root{--color-paper:#000105;--color-paper-2:#00040b;--color-paper-3:#000a16;--color-paper-4:#001624;--color-paper-elevated:#001121;--color-ink:#edf7fb;--color-ink-2:#a2c1c9;--color-ink-3:#5d879a;--color-ink-shadow:#000;--color-ink-glint:#fff;--color-rule:#16334a;--color-rule-strong:#00596e;--color-rule-glass:#ffffff12;--color-accent-red:#ff5045;--color-accent-red-strong:#ff7f77;--color-accent-ink:#00030a;--color-accent-cyan:#00d8ea;--color-accent-cyan-strong:#00f1fb;--color-accent-violet:#af6af2;--color-accent-sakura:#ff6e54;--color-accent-sakura-strong:#ffa899;--color-accent-mint:#00d8ea;--color-accent-mint-strong:#00f4fe;--color-accent-lantern:#fac200;--color-sakura-petal:#ffa693;--color-sakura-petal-soft:#ffd0c8b8;--color-night-indigo:#00020b;--color-shoji-line:#90e1e621;--color-role-tank:#ff887a;--color-role-damage:#fd3843;--color-role-support:#37c667;--color-change-buff:#37c667;--color-change-nerf:#fd3843;--color-change-rework:#b267d2;--color-change-map:#00abed;--color-change-system:#869bb1;--color-subrole-initiator:#00c9f6;--color-subrole-bruiser:#fc6518;--color-subrole-stalwart:#bc78ff;--color-subrole-specialist:#37c667;--color-subrole-recon:#00abed;--color-subrole-flanker:#fd3843;--color-subrole-sharpshooter:#f8a300;--color-subrole-medic:#75df8f;--color-subrole-guardian:#00cdc1;--color-subrole-tempo:#8bce46;--color-subrole-tactician:#00c7ab;--color-subrole-survivor:#8a5fc9;--color-tier-s:#ff4352;--color-tier-a:#5097ff;--color-tier-b:#efbd24;--color-tier-c:#7dc457;--color-tier-d:#8b939f;--font-display:"Outfit","Inter",sans-serif;--font-body:"Inter",sans-serif;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.35rem;--text-2xl:1.75rem;--text-3xl:2.5rem;--text-display:clamp(3rem,7vw,6.75rem);--text-display-s:clamp(2.25rem,5vw,4.75rem);--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:.875rem;--radius-xl:1.25rem;--radius-full:999px;--rule-sm:1px;--rule-md:2px;--z-sticky:200;--z-sticky-nav:300;--z-tooltip:600;--dur-fast:.15s;--dur-med:.26s;--dur-slow:.52s;--ease-out:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}@supports (color:lab(0% 0 0)){:root{--color-paper:lab(.283859% .133358 -1.72493);--color-paper-2:lab(.861956% -.115052 -3.89147);--color-paper-3:lab(2.42354% -1.15129 -8.64604);--color-paper-4:lab(6.17808% -4.66924 -14.4009);--color-paper-elevated:lab(4.33393% -1.62634 -12.9313);--color-ink:lab(96.5936% -3.0607 -2.95213);--color-ink-2:lab(75.8852% -9.45145 -7.62433);--color-ink-3:lab(53.7976% -11.268 -15.1972);--color-ink-shadow:lab(0% 0 0);--color-ink-glint:lab(100% 0 0);--color-rule:lab(19.8413% -4.71465 -18.0452);--color-rule-strong:lab(34.3023% -19.9012 -21.0679);--color-rule-glass:lab(100% 0 0/.07);--color-accent-red:lab(60.6291% 71.9393 51.269);--color-accent-red-strong:lab(68.5851% 75.8198 46.1604);--color-accent-ink:lab(.875013% -.169188 -2.85251);--color-accent-cyan:lab(78.323% -52.4864 -28.0602);--color-accent-cyan-strong:lab(86.4608% -49.9905 -20.4931);--color-accent-violet:lab(57.4204% 47.1065 -58.6);--color-accent-sakura:lab(65.7033% 60.809 48.2823);--color-accent-sakura-strong:lab(77.4798% 54.8658 38.6131);--color-accent-mint:lab(78.323% -52.4864 -28.0602);--color-accent-mint-strong:lab(87.5285% -46.925 -19.2585);--color-accent-lantern:lab(81.7243% 11.4106 89.2522);--color-sakura-petal:lab(77.7236% 47.909 35.925);--color-sakura-petal-soft:lab(87.686% 24.1826 14.9849/.72);--color-night-indigo:lab(.574753% .558488 -5.47278);--color-shoji-line:lab(84.5448% -25.1868 -10.4281/.13);--color-role-tank:lab(70.2532% 62.0297 41.3661);--color-role-damage:lab(57.0405% 73.0679 43.6162);--color-role-support:lab(70.9312% -54.5182 36.1418);--color-change-buff:lab(70.9312% -54.5182 36.1418);--color-change-nerf:lab(57.0405% 73.0679 43.6162);--color-change-rework:lab(55.6432% 43.988 -43.2784);--color-change-map:lab(65.2081% -20.6677 -47.1895);--color-change-system:lab(62.8165% -3.79214 -14.0117);--color-subrole-initiator:lab(74.0726% -35.429 -37.464);--color-subrole-bruiser:lab(62.479% 56.5829 67.2854);--color-subrole-stalwart:lab(62.1154% 46.65 -58.6797);--color-subrole-specialist:lab(70.9312% -54.5182 36.1418);--color-subrole-recon:lab(65.2081% -20.6677 -47.1895);--color-subrole-flanker:lab(57.0405% 73.0679 43.6162);--color-subrole-sharpshooter:lab(74.1617% 26.2682 80.0994);--color-subrole-medic:lab(81.0329% -45.0426 29.4262);--color-subrole-guardian:lab(74.0205% -55.0161 -8.64586);--color-subrole-tempo:lab(76.3394% -38.2429 57.6785);--color-subrole-tactician:lab(71.7473% -53.0593 1.59829);--color-subrole-survivor:lab(48.8741% 34.6031 -49.6032);--color-tier-s:lab(59.2066% 76.6843 41.4231);--color-tier-a:lab(61.6569% 2.91169 -59.4165);--color-tier-b:lab(79.4148% 9.44448 74.9684);--color-tier-c:lab(72.7702% -37.7295 46.3585);--color-tier-d:lab(60.4891% -.916749 -7.40726)}}
:root{--color-bg:var(--color-paper);--color-bg-secondary:var(--color-paper-2);--color-bg-card:var(--color-paper-3);--color-bg-hover:var(--color-paper-4);--color-bg-elevated:var(--color-paper-elevated);--color-accent:var(--color-accent-red);--color-accent-hover:var(--color-accent-red-strong);--color-on-accent:var(--color-accent-ink);--color-bg-accent-subtle:color-mix(in oklch,var(--color-accent-red)12%,transparent);--color-accent-glow:color-mix(in oklch,var(--color-accent-red)32%,transparent);--color-accent-blue:var(--color-accent-cyan);--color-accent-blue-hover:var(--color-accent-cyan-strong);--color-accent-blue-glow:color-mix(in oklch,var(--color-accent-cyan)25%,transparent);--color-accent-purple:var(--color-accent-violet);--color-accent-green:var(--color-role-support);--color-text:var(--color-ink);--color-text-secondary:var(--color-ink-2);--color-text-muted:var(--color-ink-3);--color-border:var(--color-rule);--color-border-hover:var(--color-rule-strong);--color-border-accent:color-mix(in oklch,var(--color-accent-red)38%,transparent);--shadow-sm:0 1px 2px color-mix(in oklch,var(--color-ink-shadow)35%,transparent),0 0 0 1px color-mix(in oklch,var(--color-ink-glint)3%,transparent);--shadow-md:0 10px 30px color-mix(in oklch,var(--color-ink-shadow)32%,transparent),0 0 0 1px color-mix(in oklch,var(--color-ink-glint)4%,transparent);--shadow-lg:0 24px 80px color-mix(in oklch,var(--color-ink-shadow)48%,transparent),0 0 0 1px color-mix(in oklch,var(--color-ink-glint)5%,transparent);--shadow-accent:0 18px 54px color-mix(in oklch,var(--color-accent-red)24%,transparent);--shadow-blue:0 18px 54px color-mix(in oklch,var(--color-accent-cyan)20%,transparent);--spacing-xs:var(--space-2xs);--spacing-sm:var(--space-xs);--spacing-md:var(--space-md);--spacing-lg:var(--space-lg);--spacing-xl:var(--space-xl);--spacing-2xl:var(--space-2xl);--spacing-3xl:var(--space-3xl);--transition-fast:var(--dur-fast)var(--ease-out);--transition-normal:var(--dur-med)var(--ease-out);--transition-slow:var(--dur-slow)var(--ease-out);--transition-spring:var(--dur-slow)var(--ease-out);--font-primary:var(--font-body);--font-heading:var(--font-display);--font-size-xs:var(--text-xs);--font-size-sm:var(--text-sm);--font-size-base:var(--text-base);--font-size-lg:var(--text-lg);--font-size-xl:var(--text-xl);--font-size-2xl:var(--text-2xl);--font-size-3xl:var(--text-3xl);--font-size-4xl:var(--text-display-s);--font-size-5xl:var(--text-display);--container-max:1320px;--header-height:72px;--glass-bg:color-mix(in oklch,var(--color-paper-3)82%,transparent);--glass-border:var(--color-rule-glass);--glass-blur:blur(18px)}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}.skip-link{padding:var(--spacing-md)var(--spacing-lg);background:var(--color-accent);color:var(--color-accent-ink);z-index:var(--z-tooltip);border-radius:var(--radius-md);transition-property:transform;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);font-weight:600;text-decoration:none;position:absolute;top:-100%;left:50%;transform:translate(-50%)}.skip-link:focus{top:var(--spacing-md);transform:translate(-50%)translateY(0)}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;scroll-behavior:smooth;overflow-x:clip}body{background:var(--color-bg);min-height:100vh;color:var(--color-text);font-family:var(--font-primary);font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;background-image:radial-gradient(ellipse at 16% -8%,color-mix(in oklch,var(--color-accent-lantern)17%,transparent),transparent 30rem),radial-gradient(ellipse at 84% 12%,color-mix(in oklch,var(--color-accent-sakura)13%,transparent),transparent 32rem),radial-gradient(ellipse at 50% 110%,color-mix(in oklch,var(--color-accent-mint)12%,transparent),transparent 40rem),linear-gradient(180deg,color-mix(in oklch,var(--color-night-indigo)88%,var(--color-accent-lantern))0%,var(--color-bg)46%,color-mix(in oklch,var(--color-bg)82%,var(--color-accent-mint))100%);background-size:auto;background-attachment:fixed;line-height:1.6;position:relative;overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-text);text-wrap:balance;font-weight:700;line-height:1.2}h1{font-size:var(--font-size-5xl);letter-spacing:0}h2{font-size:var(--font-size-4xl);letter-spacing:0}h3{font-size:var(--font-size-3xl);letter-spacing:0}h4{font-size:var(--font-size-2xl)}p{color:var(--color-text-secondary);text-wrap:pretty}a{color:inherit;transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent)}button{font-family:inherit;font-size:inherit;cursor:pointer;background:0 0;border:none;min-height:40px}img{max-width:100%;height:auto;display:block}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.container{width:100%;max-width:var(--container-max);padding:0 var(--spacing-lg);margin:0 auto}.mainContent{padding-top:var(--header-height)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes glow{0%,to{box-shadow:0 0 8px var(--color-accent-glow)}50%{box-shadow:0 0 24px var(--color-accent-glow),0 0 48px color-mix(in oklch,var(--color-accent)15%,transparent)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.text-accent{color:var(--color-accent)}.text-accent-blue{color:var(--color-accent-blue)}.text-muted{color:var(--color-text-muted)}.animate-fadeIn{animation:fadeIn .5s var(--ease-out)forwards}.animate-fadeInScale{animation:fadeInScale .4s var(--transition-slow)forwards}.gradient-accent{background:linear-gradient(135deg,var(--color-accent)0%,var(--color-accent-blue)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}.subrole-badge{border-radius:var(--radius-full);font-size:var(--font-size-xs);letter-spacing:.02em;text-transform:uppercase;border:1px solid;align-items:center;gap:4px;padding:3px 10px;font-weight:600;display:inline-flex}.new-badge{background:var(--color-accent);color:var(--color-accent-ink);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;animation:pulse 2s var(--ease-in-out)infinite;align-items:center;padding:2px 8px;font-size:.65rem;font-weight:700;display:inline-flex}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}