.hero-preview-page{--panel:#292836;--surface-raised:#3c394f;--surface-soft:#323042;width:calc(100% - 96px);max-width:1240px}.hero-preview-page .hero-dashboard-panel{padding:16px}.hero-preview-page .hero-dashboard{grid-template-columns:minmax(235px,.85fr) minmax(0,2.5fr);gap:20px}.hero-preview-page .hero-art-panel{z-index:2;background:radial-gradient(at 55% 45%,#9f54404a,#0000 70%);border:0;min-height:345px;overflow:visible}.hero-preview-page .hero-render{pointer-events:none;width:158%;height:122%;top:-14%;left:-40%}.hero-preview-page .hero-art-panel:after{height:50px}.hero-preview-page .art-watermark{color:#ffffff06;max-width:100%;font-size:120px;top:12px;overflow:hidden}.hero-preview-page .hero-art-caption{bottom:0;left:5px;right:5px}.hero-preview-page .hero-art-caption p{margin:4px 0 10px;font-size:13px}.hero-vitals{align-items:center;gap:5px;display:flex}.hero-vitals>span{border-radius:2px;padding:5px 9px;font-size:11px;font-weight:600}.health-value{color:#bfecc7;background:#44634866}.mana-value{color:#c0d9ff;background:#425f8966}.hero-vitals small{color:#b7afc4;margin-left:3px;font-size:9px}.hero-command-center{min-width:0}.hero-preview-page .hero-title-row{gap:10px;margin-bottom:12px}.hero-preview-page .hero-title-row h1{margin-bottom:4px;font-size:42px}.hero-preview-page .hero-title-row p{color:#beb5ce;font-size:12px}.hero-preview-page .hero-tags{max-width:none}.hero-preview-page .hero-tags>span{background:var(--surface-soft);border:0}.hero-widgets{grid-template-columns:minmax(235px,.95fr) minmax(0,1.15fr);gap:10px;display:grid}.hero-widget{background:var(--surface-raised);min-width:0;padding:12px 14px}.widget-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.widget-heading h2{margin:0;font-size:13px;font-weight:600}.editorial-label{color:#c1b6d3;font-size:9px}.difficulty-value{align-items:center;gap:12px;margin-top:6px;display:flex}.difficulty-value>strong{font-size:29px;font-weight:600;line-height:1}.difficulty-value>strong>span{color:#b7abc9;font-size:15px;font-weight:400}.difficulty-value>div>span{color:#d4c8e2;font-size:9px}.difficulty-pips{gap:4px;margin-bottom:1px;display:flex}.difficulty-pips i{background:#ffffff18;border-radius:1px;width:19px;height:5px;display:block}.difficulty-pips i.filled{background:#c786f3}.difficulty-note{color:#c4bcd0;margin:6px 0 9px;font-size:10px}.role-heading{border-top:1px solid #ffffff12;justify-content:space-between;align-items:center;padding-top:8px;display:flex}.role-heading h3{margin:0;font-size:11px;font-weight:500}.recommended-role{margin-top:7px}.recommended-role>strong{align-items:center;gap:8px;font-size:19px;font-weight:600;display:flex}.recommended-role>strong>span{color:#c0accf;font-size:9px;font-weight:400}.recommended-role p{color:#c6bbd4;max-width:230px;margin:5px 0 0;font-size:10px;line-height:1.4}.popularity-value{align-items:center;gap:9px;margin:7px 0 0;display:flex}.popularity-value strong{font-size:33px;font-weight:600;line-height:1}.popularity-value>span{color:#c5bbd3;font-size:9px;line-height:1.5}.real-hero-rates{gap:15px;margin:0 0 0 auto;display:flex}.real-hero-rates dt{color:#c5bbd3;font-size:9px}.real-hero-rates dd{margin:2px 0 0;font-size:18px;font-weight:600}.phase-chart-label{color:#dfd1ed;justify-content:space-between;gap:8px;margin:10px 0 0;font-size:10px;display:flex}.phase-chart-label span{color:#bfb0ce;font-size:8px}.popularity-chart{width:100%;height:88px;margin-top:4px;overflow:visible}.popularity-chart text{fill:#b6a9c8;font-family:inherit;font-size:8px}.popularity-line{stroke-dasharray:1;animation:1.2s both draw-popularity}.popularity-data{color:#c0b3d0;margin-top:2px;font-size:9px}.popularity-data summary{width:fit-content}.popularity-data p{margin:8px 0}.popularity-data table{border-collapse:collapse;width:100%;margin-top:8px}.popularity-data caption{text-align:left;padding-bottom:5px}.popularity-data th,.popularity-data td{text-align:left;border-top:1px solid #ffffff0c;padding:3px;font-weight:400}.hero-verdict{margin-top:11px}.hero-verdict>h2{align-items:center;gap:8px;margin:0 0 7px;font-size:11px;font-weight:600;display:flex}.hero-verdict>h2>span{color:#b4a5c5;font-size:9px;font-weight:400}.verdict-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.verdict-grid article{background:var(--surface-soft);min-width:0;padding:9px 10px}.verdict-grid article:nth-child(2){background:#383346}.verdict-grid header{align-items:center;gap:5px;margin-bottom:4px;display:flex}.verdict-grid .guide-visual{background:0 0;width:17px;height:17px}.verdict-grid .guide-visual svg{width:15px;height:15px}.verdict-grid h3{margin:0;font-size:10px;font-weight:600}.verdict-grid p{color:#c3b9cf;margin:0;font-size:10px;line-height:1.45}.hero-item-build{background:#383548;margin-top:14px;padding:14px}.build-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.build-heading h2{margin:4px 0 0;font-size:20px;line-height:1.1}.build-heading h2>span{color:#c6b5d5;margin-left:9px;font-size:11px;font-weight:400}.build-editorial-note{color:#c4b5d5;margin:0;font-size:10px}.build-layout{grid-template-columns:225px minmax(0,1fr);gap:14px;display:grid}.build-layout:has(.build-tabs[hidden]){grid-template-columns:1fr}.build-tabs{flex-direction:column;gap:4px;display:flex}.build-tabs>button{text-align:left;color:#d3c7df;background:#2a2838;border:1px solid #0000;border-radius:2px;align-items:center;gap:7px;min-height:30px;padding:5px 8px;display:flex}.build-tabs>button>span:last-child{flex:1;justify-content:space-between;align-items:center;gap:6px;min-width:0;display:flex}.build-tabs>button[aria-selected=true]{color:#fff;background:#614177;border-color:#c58ced77}.build-tabs>button:hover{background:#51415f}.build-tabs strong{font-size:11px;font-weight:500;line-height:1.3;display:block}.build-tabs small{color:#c4b0d3;white-space:nowrap;font-size:8px;display:block}.build-tab-number{color:#c7a0e4;font-size:9px}.build-panels,.build-panel{min-width:0}.build-purpose{align-items:flex-start;gap:8px;margin:0 0 10px;display:flex}.build-purpose p{color:#d0c4dc;margin:0;font-size:10px;line-height:1.4}.build-category{color:#dbc5ed;border:1px solid #bb8dd045;border-radius:2px;padding:3px 5px;font-size:8px}.build-category--experimental{color:#edc795;border-color:#d6a26550}.build-panel>.build-item-note{margin-top:10px}.build-stages{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.build-stage{background:#292836;min-width:0;padding:9px;position:relative}.build-stage:not(:last-child):after{content:"→";color:#bba3d0;font-size:12px;position:absolute;top:50%;right:-12px;transform:translateY(-50%)}.build-stage--core{background:#44344f;outline:1px solid #ae72d564}.build-stage h3{gap:6px;margin:0 0 7px;font-size:11px;font-weight:600;display:flex}.build-stage h3>span{color:#b38bd0;font-size:9px}.build-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;display:grid}.build-item,.build-slot-empty{aspect-ratio:88/64;background:#201f2c;border:1px solid #ffffff14;border-radius:2px;width:100%;min-width:0;padding:0;display:block}.build-item img{object-fit:cover;border-radius:1px;width:100%;height:100%;display:block}.build-item[aria-pressed=true]{outline-offset:-1px;outline:2px solid #d599ff}.build-stage>p{color:#b8aec7;min-height:12px;margin:7px 0 0;font-size:9px;line-height:1.3}.build-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:10px;display:flex}.build-item-note{color:#c7bdd6;gap:7px;min-height:15px;margin:0;font-size:10px;line-height:1.5;display:flex}.build-item-note strong{color:#e2c5f8;white-space:nowrap;font-weight:600}.build-item-note a{color:#e2c5f8;white-space:nowrap;margin-left:auto;text-decoration:none}.build-footer>span{color:#b6acc6;font-size:9px}.build-notes{color:#bfb1cf;margin-top:5px;font-size:9px}.build-notes summary{width:fit-content}.build-notes p{max-width:900px;font-size:11px;line-height:1.55}.hero-ability-panel{margin-top:14px}.qwer-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start;gap:8px;display:grid}.qwer-spell{background:var(--surface-soft);min-width:0;padding:11px}.qwer-spell summary{list-style:none}.qwer-spell summary::-webkit-details-marker{display:none}.qwer-heading{align-items:center;gap:7px;display:flex}.qwer-key{color:#e0bcff;flex-shrink:0;width:22px;font-family:Barlow Condensed,Arial,sans-serif;font-size:31px;font-weight:700;line-height:1}.qwer-heading img{border-radius:2px;width:28px;height:28px}.qwer-name{flex:1;margin:0;font-size:12px;font-weight:600}.qwer-heading small{color:#c2b5d0;margin-top:3px;font-size:9px;font-weight:400;display:block}.qwer-toggle{color:var(--accent-light);font-size:17px}.qwer-spell[open] .qwer-toggle{transform:rotate(45deg)}.qwer-description{color:#c0b6cc;margin:8px 0 0;font-size:10px;line-height:1.45;display:block}.qwer-spell .spell-metrics{border-top:1px solid #ffffff12;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px;padding-top:9px;display:grid}.qwer-spell .spell-metrics>div:last-child{grid-column:1/-1}.qwer-spell .spell-metrics dt{color:#b8aacb}.qwer-spell .spell-metrics dd{white-space:normal}.base-stats-details{border-top:1px solid #ffffff12;margin-top:12px;padding-top:10px}.base-stats-details>summary{color:#d5c9e2;font-size:11px}.base-stats-details>summary>span{color:#ac9abc;margin-left:8px;font-size:9px}.expanded-stats{grid-template-columns:1.4fr 1fr;align-items:start;gap:16px;margin-top:12px;display:grid}.hero-preview-page .hero-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-preview-page .hero-attributes>div,.hero-preview-page .hero-stat-grid>div{background:var(--surface-soft)}.hero-preview-page .innate-card{background:var(--surface-soft);padding:13px}.hero-preview-page .innate-card p{color:#c4b8ce}.hero-preview-page .hero-dashboard-footer{color:#b0a1bd;margin-top:10px;font-size:9px}.hero-preview-page .guide-card{background:var(--surface-raised)}.hero-preview-page .guide-tips{background:#433750}.hero-preview-page .quick-guide{margin-top:14px}.hero-widget,.verdict-grid article,.build-item,.qwer-spell{transition:transform .3s,filter .3s}@media (hover:hover) and (pointer:fine){.verdict-grid article:hover,.build-item:hover,.qwer-spell:hover{filter:brightness(1.15)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.verdict-grid article:hover,.qwer-spell:hover{transform:scale(1.02)}.build-item:hover{z-index:2;position:relative;transform:scale(1.08)}}@keyframes draw-popularity{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.popularity-line{animation:none}}@media (width<=1100px){.hero-preview-page{width:calc(100% - 48px)}.hero-preview-page .hero-dashboard{grid-template-columns:210px minmax(0,1fr);gap:14px}.hero-widgets{grid-template-columns:1fr 1fr}.hero-widget{padding:11px}.real-hero-rates{gap:7px}.real-hero-rates dd{font-size:14px}.real-hero-rates dt{font-size:8px}.hero-preview-page .hero-tags{display:none}.build-stages{gap:15px}.build-stage{padding:7px}.build-stage:not(:last-child):after{right:-13px}.build-stage>p{white-space:normal;min-height:22px}.build-footer>span{display:none}.qwer-grid{grid-template-columns:1fr 1fr}}@media (width<=760px){.hero-preview-page .hero-dashboard{grid-template-columns:1fr;gap:0}.hero-command-center{display:contents}.hero-preview-page .hero-art-panel{order:1;min-height:270px;margin-bottom:12px}.hero-preview-page .hero-render{width:100%;height:130%;top:-16%;left:0}.hero-preview-page .hero-art-caption{bottom:4px;left:12px}.hero-preview-page .hero-title-row{flex-direction:row}.hero-preview-page .hero-title-row h1{font-size:40px}.hero-widgets{order:2;grid-template-columns:1fr 1fr}.hero-verdict{order:3}.verdict-grid{gap:6px}.build-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.build-stage:nth-child(3):after{content:none}.build-stage>p{min-height:0}.build-heading h2>span{margin:5px 0 0;display:block}.expanded-stats{grid-template-columns:1fr}}@media (width<=500px){.hero-preview-page .hero-dashboard{grid-template-columns:minmax(0,1fr)}.hero-preview-page .hero-title-row>div{min-width:0}.hero-preview-page .hero-title-row h1{overflow-wrap:anywhere;flex-wrap:wrap}.hero-fit{min-width:0}.hero-preview-page{width:calc(100% - 24px)}.hero-preview-page .hero-dashboard-panel,.hero-item-build{padding:12px}.hero-preview-page .hero-art-panel{min-height:250px}.hero-preview-page .hero-render{width:100%;height:126%;top:-10%;left:0}.hero-widgets{grid-template-columns:1fr}.hero-fit{grid-template-columns:1fr 1fr;column-gap:16px;display:grid}.hero-fit .widget-heading,.difficulty-value{grid-column:1}.difficulty-note{grid-column:1;margin-bottom:0}.role-heading{border:0;grid-area:1/2;padding:0}.recommended-role{grid-area:2/2/4;margin-top:8px}.recommended-role>strong{font-size:17px;display:block}.recommended-role>strong>span{font-size:9px;display:block}.popularity-chart{height:104px}.verdict-grid{grid-template-columns:1fr}.verdict-grid article{padding:9px 10px}.verdict-grid header{margin-bottom:3px}.verdict-grid h3,.verdict-grid p{font-size:11px}.build-heading h2{font-size:19px}.build-stage h3{gap:4px;font-size:10px}.build-stage>p{min-height:22px;line-height:1.3}.build-item-note{flex-direction:column;gap:2px;min-height:40px}.qwer-grid{grid-template-columns:1fr}.qwer-spell{padding:12px}.qwer-description{font-size:12px}.qwer-name{font-size:14px}.hero-preview-page .hero-stat-grid{grid-template-columns:1fr 1fr}.hero-preview-page .hero-dashboard-footer{flex-wrap:wrap;gap:6px 12px}}.hero-matchups,.more-heroes{margin-top:14px}.matchup-groups{grid-template-columns:1fr 1fr;gap:16px;display:grid}.matchup-group>h3{color:#c3dbc9;margin:0 0 9px;font-size:12px;font-weight:500}.matchup-group--counters>h3{color:#e3b9bd}.matchup-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;display:grid}.matchup-card{background:var(--surface-soft);min-width:0;padding:7px}.matchup-card a{text-decoration:none;display:block}.matchup-card img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;display:block}.matchup-card h4{margin:7px 0 5px;font-size:11px;font-weight:600;line-height:1.15}.matchup-card p{color:#c0b6cd;margin:0;font-size:10px;line-height:1.4}.matchup-sources{color:#b5a9c3;margin-top:12px;font-size:10px}.matchup-sources p{max-width:1000px;line-height:1.5}.more-heroes-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.more-hero{background:var(--surface-raised);min-width:0;text-decoration:none}.more-hero>img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;display:block}.more-hero>span{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;padding:8px;display:flex}.more-hero strong{font-size:12px;font-weight:500}.more-hero small{color:#bdb0ca;font-size:9px}.shuffle-heroes{color:#e1c6f7;background:#473454;border:1px solid #a878d44a;border-radius:2px;padding:7px 11px;font-size:11px}.shuffle-heroes:hover{background:#5a416c}.more-heroes-note{color:#b2a5c0;margin:11px 0 0;font-size:10px}.matchup-card,.more-hero{transition:transform .3s,filter .3s;position:relative}@media (hover:hover) and (pointer:fine){.matchup-card:hover,.more-hero:hover{filter:brightness(1.15);z-index:2}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.matchup-card:hover,.more-hero:hover{transform:scale(1.04)}}@media (width<=1100px){.matchup-groups{grid-template-columns:1fr}.matchup-card{padding:9px}.more-heroes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=900px){.build-layout{grid-template-columns:1fr;gap:10px}.build-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;display:grid}.build-tabs>button{min-width:0;padding:7px}.build-tabs>button>span:last-child{display:block}.build-tabs small{margin-top:2px}.build-tab-number{display:none}.build-purpose{min-height:0}}@media (width<=600px){.matchup-grid{grid-template-columns:1fr;gap:6px}.matchup-card{grid-template-columns:100px 1fr;align-items:center;gap:10px;display:grid}.matchup-card a{flex-direction:column;gap:7px;display:flex}.matchup-card img{width:70px}.matchup-card h4{margin:0;font-size:12px}.matchup-card p{font-size:12px}.more-heroes-grid{gap:7px}.more-hero>span{padding:7px}.more-hero strong{font-size:11px}.build-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.build-tabs>button:last-child{grid-column:1/-1}.build-tabs strong{font-size:11px}.build-editorial-note{text-align:right;max-width:125px;font-size:9px}.hero-fit .widget-heading,.role-heading{flex-wrap:wrap;gap:2px}}