@layer components{.chart{background: #fff; border: 1px solid var(--paper-line); padding: var(--sp-3);}}
@layer components{.chart svg{width: 100%; height: auto; display: block;}}
@layer components{.chx-head{margin-bottom: var(--sp-5); padding-bottom: 12px; border-bottom: 4px solid var(--graphite);}}
@layer components{.chx-head h2{margin: 8px 0 0; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: .9; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--graphite);}}
@layer components{.chx-head p{margin: 10px 0 0; font-family: var(--font-serif); font-size: 1.0625rem; color: var(--gray-body);}}
@layer components{.chx-head--light{border-bottom-color: rgba(255,255,255,.25);}}
@layer components{.chx-head--light h2{color: #fff;}}
@layer components{.chx-head--light p{color: rgba(255,255,255,.8);}}
@layer components{.trophy__inner{padding-block: var(--sp-7) var(--sp-7);}}
@layer components{.trophy__lead{margin-top: var(--sp-5);}}
@layer components{.trophy__title{margin: 14px 0 0; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3.5rem, 11vw, 10.5rem); line-height: .82; letter-spacing: var(--ls-tight); text-transform: uppercase; text-shadow: 0 8px 50px rgba(0,0,0,.6);}}
@layer components{.trophy__intro{margin: var(--sp-4) 0 0; max-width: 42rem; font-family: var(--font-serif); font-size: clamp(1.125rem, 1.7vw, 1.4375rem); line-height: 1.45; color: rgba(255,255,255,.92);}}
@layer components{.trophy__strip{background: rgba(0,0,0,.5); border-top: 1px solid rgba(255,255,255,.12);}}
@layer components{.trophy__strip .container{display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); padding-block: var(--sp-4);}}
@layer components{.trophy__strip .container > div{display: flex; flex-direction: column; gap: 2px;}}
@layer components{.trophy__strip b{font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: var(--ls-tight);}}
@layer components{.trophy__strip span{font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.72);}}
@layer components{@media (max-width: 767px){.trophy__inner{padding-block: var(--sp-6);}}}
@layer components{.sline__head{display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5);}}
@layer components{.sline__title{margin: 12px 0 0; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: .9; letter-spacing: var(--ls-tight); text-transform: uppercase;}}
@layer components{.sline__legend{display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); margin: 0; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.75);}}
@layer components{.sline__legend span{display: inline-flex; align-items: center; gap: 6px;}}
@layer components{.sline__legend i{display: inline-block; width: 12px; height: 12px; background: #fff;}}
@layer components{.sline__legend i.is-l{background: rgba(255,255,255,.28);}}
@layer components{.sline__legend i.is-p{background: transparent; outline: 2px solid #fff; outline-offset: -2px;}}
@layer components{.sline__legend i.is-t{background: var(--red);}}
@layer components{.sline__legend i.is-me{background: transparent; box-shadow: inset 0 -4px 0 var(--red); outline: 1px solid rgba(255,255,255,.4); outline-offset: -1px;}}
@layer components{.emoments{background: linear-gradient(180deg, #15181c, var(--graphite)); color: #fff; padding-block: var(--sp-8);}}
@layer components{.emoments__grid{display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}}
@layer components{.emoment{display: flex; flex-direction: column; gap: 6px; padding: var(--sp-5); background: rgba(0,0,0,.34); border-top: 4px solid #fff;}}
@layer components{.emoment:first-child{border-top-color: var(--red);}}
@layer components{.emoment__k{font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-black); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.75);}}
@layer components{.emoment__score{display: flex; align-items: baseline; gap: .18em; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: .82; letter-spacing: -.03em; color: #fff;}}
@layer components{.emoment__score i{font-style: normal; font-size: .62em; color: rgba(255,255,255,.5);}}
@layer components{.emoment__score:hover b{text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: var(--red);}}
@layer components{.emoment__opp{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.375rem; line-height: 1; letter-spacing: var(--ls-tight); text-transform: uppercase;}}
@layer components{.emoment__d{font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.7);}}
@layer components{.yby--v2 thead th{position: sticky; top: 0; z-index: 2; background: var(--graphite); color: #fff; cursor: pointer;}}
@layer components{.yby--v2 td{padding-block: 10px;}}
@layer components{.yby--v2 tr.is-champion td{background: #fff5f5;}}
@layer components{.yby--v2 tr.is-champion td:first-child{box-shadow: inset 6px 0 0 var(--red);}}
@layer components{.yby--v2 tr.is-runner td{background: var(--silver-3);}}
@layer components{.yby--v2 tr.is-runner td:first-child{box-shadow: inset 6px 0 0 var(--graphite);}}
@layer components{.yby--v2 tr:hover td{background: var(--silver-2);}}
@layer components{.yby--v2 td:first-child{padding-left: 18px;}}
@layer components{.yby__pct{display: inline-block; vertical-align: middle; width: 54px; height: 6px; margin-right: 8px; background: var(--silver);}}
@layer components{.yby__pct i{display: block; height: 100%; background: var(--graphite);}}
@layer components{.is-champion .yby__pct i{background: var(--red);}}
@layer components{.yby--v2 tr.is-champion td{background: linear-gradient(180deg, #181b1f, var(--graphite)); color: #fff; border-top: 4px solid var(--red); padding-block: 14px; vertical-align: middle; font-size: 1.125rem;}}
@layer components{.yby--v2 tr.is-champion td:first-child{box-shadow: none; padding-left: 14px; font-size: inherit;}}
@layer components{.yby--v2 tr.is-champion + tr td{border-top-color: transparent;}}
@layer components{.yby--v2 tr.is-champion:hover td{background: linear-gradient(180deg, #181b1f, var(--graphite));}}
@layer components{.yby--v2 tr.is-champion td a{color: #fff;}}
@layer components{.yby--v2 tr.is-champion .yby__pct{background: rgba(255,255,255,.22);}}
@layer components{.yby--v2 tr.is-champion .yby__pct i{background: var(--red);}}
@layer components{.yby--v2 tr.is-runner td{padding-block: 14px; border-top: 3px solid var(--graphite);}}
@layer components{.yby--v2 tr.is-runner td:first-child a:first-child{font-size: 1.5rem;}}
@layer components{.sc-hero__title{font-size: clamp(3rem, 8.4vw, 8rem);}}
@layer components{.sc-chart{background: linear-gradient(180deg, #15181c, var(--graphite)); color: #fff; padding-block: var(--sp-7);}}
@layer components{.sc-legend i.sc-k{border-radius: 0;}}
@layer components{.sc-legend i.sc-k--pf{width: 22px; height: 4px; background: var(--red);}}
@layer components{.sc-legend i.sc-k--pa{width: 22px; height: 4px; background: #aab0b8;}}
@layer components{.sc-legend i.sc-k--ch{width: 12px; height: 12px; background: var(--red); outline: 2px solid #fff;}}
@layer components{.sc-legend i.sc-k--ru{width: 9px; height: 9px; background: #fff; outline: 2px solid var(--red); outline-offset: 0;}}
@layer components{.sc-k{display: inline-block; width: 22px; height: 4px; vertical-align: middle;}}
@layer components{.sc-k--pf{background: var(--red);}}
@layer components{.sc-k--pa{background: #aab0b8;}}
@layer components{.sc-k--ch,.sc-k--ru{width: 11px; height: 11px; rotate: 45deg; margin-inline: 3px;}}
@layer components{.sc-k--ch{background: var(--red); outline: 2px solid #fff;}}
@layer components{.sc-k--ru{background: #fff; outline: 2px solid var(--red); outline-offset: -2px;}}
@layer components{.sc-plot{position: relative;}}
@layer components{.sc-plot svg{display: block; width: 100%; height: clamp(260px, 34vw, 480px); overflow: visible;}}
@layer components{.sc-grid{stroke: rgba(255,255,255,.1); stroke-width: 1; vector-effect: non-scaling-stroke;}}
@layer components{.sc-grid--v{stroke: rgba(255,255,255,.06);}}
@layer components{.sc-tick{fill: rgba(255,255,255,.6); font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .06em;}}
@layer components{.sc-note{fill: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; paint-order: stroke; stroke: #1b1f23; stroke-width: 5px;}}
@layer components{.sc-area{fill: rgba(206,26,39,.2);}}
@layer components{.sc-line{fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;}}
@layer components{.sc-line--pf{stroke: var(--red);}}
@layer components{.sc-line--pa{stroke: #aab0b8; stroke-width: 2.5;}}
@layer components{.sc-mark{vector-effect: non-scaling-stroke; stroke-width: 2.5;}}
@layer components{.sc-mark--ch{fill: var(--red); stroke: #fff;}}
@layer components{.sc-mark--ru{fill: #fff; stroke: var(--red);}}
@layer components{.sc-guide{stroke: #fff; stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke; pointer-events: none;}}
@layer components{.sc-hit{fill: transparent; cursor: pointer;}}
@layer components{a:focus .sc-hit{fill: rgba(255,255,255,.08);}}
@layer components{.sc-plot a:focus{outline: 0;}}
@layer components{.sc-tip{position: absolute; top: 8px; z-index: 3; display: flex; flex-direction: column; gap: 3px; min-width: 190px; padding: 12px 14px; background: #fff; color: var(--graphite); border-top: 4px solid var(--red); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-ui); text-transform: uppercase; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); pointer-events: none;}}
@layer components{.sc-tip[hidden]{display: none;}}
@layer components{.sc-tip b{font-weight: var(--fw-black); font-size: 2rem; line-height: .9; letter-spacing: -.01em;}}
@layer components{.sc-tip em{font-style: normal; font-weight: var(--fw-black); font-size: 1.25rem; margin-right: 4px;}}
@layer components{.sc-tip__row{display: flex; align-items: center; gap: 8px;}}
@layer components{.sc-tip u{text-decoration: none; color: var(--red); font-weight: var(--fw-black); font-size: var(--fs-micro); letter-spacing: var(--ls-label);}}
@layer components{.sc-tip [data-coach]{color: var(--gray-meta); font-size: var(--fs-micro); letter-spacing: var(--ls-label);}}
@layer components{.sc-cap{margin: var(--sp-3) 0 0; font-family: var(--font-serif); font-style: italic; font-size: .9375rem; color: rgba(255,255,255,.7);}}
@layer components{.sc-cap--dark{color: var(--gray-body);}}
@layer components{.mbars{list-style: none; margin: 0; padding: 0 0 26px; display: grid; grid-template-columns: repeat(var(--n, 100), minmax(0, 1fr)); gap: 2px;}}
@layer components{.mbars li{position: relative;}}
@layer components{.mbars a{display: grid; grid-template-rows: 130px 90px;}}
@layer components{.mbars__up,.mbars__dn{position: relative; display: block;}}
@layer components{.mbars__up{border-bottom: 2px solid var(--graphite);}}
@layer components{.mbars__up i{position: absolute; left: 0; right: 0; bottom: 0; background: var(--graphite);}}
@layer components{.mbars__dn i{position: absolute; left: 0; right: 0; top: 0; background: #b5bac1;}}
@layer components{.mbars li.is-champ .mbars__up i{background: var(--red);}}
@layer components{.mbars li.is-runner .mbars__up i{background: #fff; box-shadow: inset 0 0 0 2px var(--red);}}
@layer components{.mbars a:hover i,.mbars a:focus-visible i{background: var(--red-deep); box-shadow: none;}}
@layer components{.mbars a:focus-visible{outline: 2px solid var(--graphite);}}
@layer components{.mbars b{position: absolute; left: 0; bottom: -24px; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); color: var(--gray-meta);}}
@layer components{@media (max-width: 767px){.mbars{gap: 1px;}}}
@layer components{@media (max-width: 767px){.mbars a{grid-template-rows: 90px 60px;}}}
@layer components{@media (max-width: 767px){.mbars li:not(:nth-child(20n/**/+8)) b{display: none;}}}
@layer components{.sc-decades{background: linear-gradient(180deg, #15181c, var(--graphite)); color: #fff; padding-block: var(--sp-8);}}
@layer components{.sc-dec__grid{display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));}}
@layer components{.sc-dec{display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); background: rgba(0,0,0,.34); border-top: 4px solid rgba(255,255,255,.5);}}
@layer components{.sc-dec b{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2.5rem; line-height: .85; letter-spacing: -.02em;}}
@layer components{.sc-dec__n,.sc-dec__m{font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.7);}}
@layer components{.sc-dec__m{margin-top: 4px; color: #fff; font-size: var(--fs-small);}}
@layer components{.sc-dec__bar{display: grid; grid-template-columns: 1fr 3.2rem; align-items: center; gap: 8px;}}
@layer components{.sc-dec__bar i{display: block; height: 12px;}}
@layer components{.sc-dec__bar .pf{background: var(--red);}}
@layer components{.sc-dec__bar .pa{background: #aab0b8;}}
@layer components{.sc-dec__bar em{font-style: normal; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.125rem; text-align: right;}}
@layer components{.sc-boards__grid{display: grid; gap: var(--sp-5);}}
@layer components{@media (min-width: 1000px){.sc-boards__grid{grid-template-columns: repeat(3, minmax(0, 1fr));}}}
@layer components{.sc-board{background: #fff; border: 1px solid var(--silver-line); border-top: 4px solid var(--graphite);}}
@layer components{.sc-board h3{margin: 0; padding: 14px 16px 12px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.5rem; line-height: 1; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--graphite); border-bottom: 1px solid var(--silver-line);}}
@layer components{.sc-board ol{list-style: none; margin: 0; padding: 0;}}
@layer components{.sc-board a{display: grid; grid-template-columns: 1.6rem 3.4rem 1fr auto; align-items: center; gap: 2px 10px; padding: 9px 16px; border-bottom: 1px solid var(--silver-line); color: var(--graphite);}}
@layer components{.sc-board li:last-child a{border-bottom: 0;}}
@layer components{.sc-board a:hover{background: var(--silver-3);}}
@layer components{.sc-board__n{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1rem; color: var(--gray-meta);}}
@layer components{.sc-board__y{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.375rem; line-height: 1; color: var(--red);}}
@layer components{.sc-board__bar{height: 8px; background: var(--silver);}}
@layer components{.sc-board__bar i{display: block; height: 100%; background: var(--graphite);}}
@layer components{.sc-board li.is-champ .sc-board__bar i{background: var(--red);}}
@layer components{.sc-board__v{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.25rem; min-width: 3.2rem; text-align: right;}}
@layer components{.sc-board__r{grid-column: 2 / -1; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta);}}
@layer components{.sc-board li:first-child a{background: var(--silver-3);}}
@layer components{.sc-board li:first-child .sc-board__y,.sc-board li:first-child .sc-board__v{font-size: 1.75rem;}}
@layer components{.sc-hard{margin: var(--sp-5) 0 0; padding: 14px 18px; background: #fff; border-left: 4px solid var(--graphite); font-family: var(--font-serif); font-size: 1rem; line-height: 1.5; color: var(--gray-body);}}
@layer components{.sc-hard b{font-family: var(--font-display); font-weight: var(--fw-black); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--graphite); margin-right: 6px;}}
@layer components{.sc-streaks{display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 8px;}}
@layer components{.sc-streak{display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; padding: var(--sp-4) var(--sp-5); background: rgba(0,0,0,.34); border-left: 4px solid var(--red);}}
@layer components{.sc-streak b{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 3.25rem; line-height: .85;}}
@layer components{.sc-streak span{font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.125rem; letter-spacing: var(--ls-ui); text-transform: uppercase;}}
@layer components{.sc-streak p{grid-column: 1 / -1; margin: 8px 0 0; font-family: var(--font-serif); font-size: .9375rem; color: rgba(255,255,255,.8);}}
@layer components{.sc-dist__grid{display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); align-items: end;}}
@layer components{.sc-bin{display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;}}
@layer components{.sc-bin__bar{display: flex; align-items: flex-end; width: 100%; height: 220px; border-bottom: 3px solid var(--graphite);}}
@layer components{.sc-bin__bar i{position: relative; display: block; width: 100%; background: var(--silver);}}
@layer components{.sc-bin__bar em{position: absolute; left: 0; right: 0; bottom: 0; background: var(--red);}}
@layer components{.sc-bin b{margin-top: 6px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1rem, 1.8vw, 1.5rem); line-height: 1; color: var(--graphite);}}
@layer components{.sc-bin span{font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta);}}
@layer components{.sc-bin strong{font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-small); color: var(--red);}}
@layer components{@media (max-width: 767px){.sc-bin__bar{height: 140px;}}}
@layer components{@media (max-width: 767px){.sc-bin span{display: none;}}}
@layer components{@media (max-width: 767px){.sc-tip{display: none !important;}}}
@layer components{.sc-ctable td:first-child{color: var(--graphite); font-size: 1.0625rem;}}