:root{--bg:#fff;--panel:#f4f5f7;--text:#16181d;--muted:#6b7280;--line:#e3e5e9;--brand:#f99e1a;--focus:#f99e1a;--danger:#b42318;--label-font:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--body-font:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:16px/1.4 var(--body-font);color:var(--text);background:var(--bg)}*,:before,:after{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,p{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}img{display:block}.muted{color:var(--muted)}.page{--text-width:900px;flex-direction:column;min-height:100vh;padding:0 16px;display:flex}.top-bar,.footer{width:100%;max-width:var(--text-width);margin-inline:auto}main{flex:1;padding:24px 0 40px}.top-bar{border-bottom:3px solid var(--text);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:20px 0 16px;display:flex}.brand h1{font:700 28px/1 var(--label-font);text-transform:uppercase;letter-spacing:.02em}.brand h1:before{content:"";background:var(--brand);vertical-align:-2px;width:10px;height:22px;margin-right:10px;display:inline-block;transform:skew(-12deg)}.brand p{color:var(--muted);font:600 14px/1 var(--label-font);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.controls{flex-wrap:wrap;flex:1 0 100%;align-items:center;gap:8px;display:flex}.toggle{border:1px solid var(--line);border-radius:4px;display:inline-flex;overflow:hidden}.toggle button{background:var(--bg);font:600 15px/1.2 var(--label-font);text-transform:uppercase;letter-spacing:.04em;border:0;padding:6px 12px}.toggle button+button{border-left:1px solid var(--line)}.toggle button[aria-checked=true]{background:var(--text);color:var(--bg);box-shadow:inset 0 -3px 0 var(--brand)}.hero-button,.slot-button{border:1px solid var(--line);background:var(--bg);min-height:34px;font:600 15px/1.2 var(--label-font);text-transform:uppercase;letter-spacing:.04em;border-radius:4px;align-items:center;gap:8px;padding:4px 10px;display:inline-flex}.hero-button img{border-radius:3px;width:24px;height:24px}.panel{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:16px;box-shadow:0 12px 32px #16181d29}.panel h2{font:700 16px/1.2 var(--label-font);text-transform:uppercase;letter-spacing:.06em;margin:12px 0 8px}.hero-picker{width:min(720px,100vw - 32px);max-height:calc(100vh - 64px);overflow:auto}.hero-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;display:grid}.hero-choice{background:var(--panel);font:600 13px/1.1 var(--label-font);text-transform:uppercase;text-align:center;border:1px solid #0000;border-radius:4px;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;display:flex}.hero-choice img{border-radius:3px;width:56px;height:56px}.hero-choice:hover,.hero-choice[aria-pressed=true]{border-color:var(--brand)}.hero-choice.all-heroes{width:100%;padding:10px;font-size:15px}.table-area{--label-col:15rem;--value-min:8.5rem;--value-ideal:13rem;--table-width:calc(var(--label-col) + var(--slots) * var(--value-ideal));width:min(100%, var(--table-width));margin-inline:auto}.table-area[data-slots="2"]{--table-width:var(--text-width)}.table-area[data-slots="4"],.table-area[data-slots="5"]{--label-col:10rem}.table-frame{position:relative}.table-frame:before,.table-frame:after{content:"";z-index:2;pointer-events:none;opacity:0;width:14px;transition:opacity .15s;position:absolute;top:0;bottom:0}.table-frame:before{background:linear-gradient(90deg,#16181d24,#0000);left:0}.table-area:not([data-slots="2"]) .table-frame:before{left:var(--label-col)}.table-frame:after{background:linear-gradient(270deg,#16181d24,#0000);right:0}.table-frame[data-hidden-left]:before,.table-frame[data-hidden-right]:after{opacity:1}.table-scroll{overflow-x:auto}.stat-table{min-width:min-content}.stat-table .row{border-bottom:1px solid var(--line);align-items:stretch;display:grid}.stat-table.mirrored .row{grid-template-columns:1fr minmax(9rem, var(--label-col)) 1fr}.stat-table.columns .row{grid-template-columns:var(--label-col) repeat(var(--slots), minmax(var(--value-min), 1fr))}.label{font:600 15px/1.15 var(--label-font);text-transform:uppercase;letter-spacing:.03em;color:#3c4049;align-items:center;padding:8px 12px;display:flex}.mirrored .label{text-align:center;justify-content:center}.columns .label,.columns .hero-cell{z-index:1;background:var(--bg);border-right:1px solid var(--line);position:sticky;left:0}.value{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:center;gap:6px;padding:8px 14px;font-size:17px;display:flex}.mirrored .value:last-child{flex-direction:row-reverse;justify-content:flex-start}.value.leader{background:color-mix(in srgb, var(--slot-color) 16%, var(--bg));font-weight:700}.marker{color:color-mix(in srgb, var(--slot-color) 80%, var(--text));font-size:11px}.section-title{border-bottom:2px solid var(--text);font:700 18px/1.2 var(--label-font);text-transform:uppercase;letter-spacing:.05em;flex-wrap:wrap;align-items:baseline;gap:4px 10px;max-width:100vw;padding:18px 12px 8px;display:flex;position:sticky;left:0}.section-title span{color:var(--muted);font:500 14px/1.2 var(--body-font);text-transform:none;letter-spacing:0}summary.section-title{cursor:pointer;list-style:none}summary.section-title:before{content:"▸";margin-right:2px}details[open]>summary.section-title:before{content:"▾"}.sample .row,.sample .label{background:var(--panel)}.header-row{border-bottom:2px solid var(--text)!important}.hero-cell{font:700 18px/1.1 var(--label-font);text-transform:uppercase;text-align:center;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding:12px;display:flex}.hero-cell img{border-radius:4px;width:56px;height:56px}.player-header{flex-direction:column;min-width:0;display:flex;container-type:inline-size}.slot-strip{background:var(--slot-color);height:6px}.identity{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"avatar who change";align-items:center;gap:10px;padding:10px 10px 4px;display:grid}.identity .avatar{grid-area:avatar}.identity .who{grid-area:who;min-width:0}.identity .change{grid-area:change}.avatar{background:var(--panel);border-radius:4px;flex:none;width:44px;height:44px}.battletag{font:700 18px/1.1 var(--label-font);overflow-wrap:break-word;min-width:0}.battletag .discriminator{color:var(--muted);font-weight:600}.rank{color:var(--muted);font:600 13px/1 var(--label-font);text-transform:uppercase;align-items:center;gap:4px;margin-top:2px;display:flex}.rank img+.season:before{content:"·";margin-right:4px}.rank img{width:18px;height:18px}.status{min-height:28px;padding:4px 10px 10px;font-size:14px}.score{font:600 15px/1 var(--label-font);text-transform:uppercase;letter-spacing:.04em}.score strong{color:color-mix(in srgb, var(--slot-color) 80%, var(--text));font-size:20px}.message{color:var(--danger)}.link{color:var(--text);background:0 0;border:0;padding:0;text-decoration:underline}.add-form{gap:6px;padding:10px;display:grid}.add-label{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 6px;font-size:13px;display:flex}.add-form label{font:600 13px/1 var(--label-font);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.add-row{gap:6px;display:flex}.add-row input{border:1px solid var(--line);border-radius:4px;flex:1;width:0;min-width:0;padding:6px 8px}.add-row input[aria-invalid=true]{border-color:var(--danger)}.add-form .message{font-size:13px}.add-player{border:1px dashed var(--muted);background:var(--bg);min-height:34px;font:600 15px/1.2 var(--label-font);text-transform:uppercase;letter-spacing:.04em;border-radius:4px;margin-left:auto;padding:4px 12px}.footer{border-top:1px solid var(--line);color:var(--muted);padding:16px 0 24px;font-size:13px}.footer a{color:inherit}@container (width<=15rem){.identity{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"avatar change""who who";gap:6px}.identity .change{justify-self:end;min-height:28px;padding:2px 8px;font-size:13px}.identity .avatar{width:28px;height:28px}.battletag{font-size:16px}}@media (width<=600px){.table-area[data-slots]{--label-col:9rem;--value-min:7rem}.stat-table.mirrored .row{grid-template-columns:1fr minmax(6.5rem,8rem) 1fr}.label{padding:6px 4px;font-size:13px}.value{padding:6px 8px;font-size:15px}.hero-cell img{width:40px;height:40px}}