/* ChausX character comparison laboratory */
body.chxHubCompareActive > .app{
  left:116px;right:0;top:0;bottom:0;padding:0;overflow:hidden;
}
body.chxHubCompareActive > .app > .inner,
body.chxHubCompareActive #content{width:100%!important;height:100%;min-height:0}
body.chxHubCompareActive .header,
body.chxHubCompareActive .compactTopBar,
body.chxHubCompareActive .collectionHeader,
body.chxHubCompareActive .saveNotice{display:none!important}

.chxCompareScreen{
  --compare-cyan:#55def8;
  --compare-red:#ff5268;
  --compare-panel-expanded:clamp(300px,19.5vw,380px);
  --compare-panel-width:var(--compare-panel-expanded);
  --compare-picker-width:clamp(320px,21vw,400px);
  --compare-stage-top:8px;
  --compare-stage-bottom:3vh;
  --compare-scale-offset:0%;
  --compare-overlay-scale:1;
  --compare-ruler-label-size:11px;
  --compare-ruler-major-label-size:14px;
  position:relative;width:100%;height:100%;min-width:0;overflow:hidden;color:#f4fbff;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:linear-gradient(90deg,rgba(2,9,16,.07),transparent 40%,rgba(2,8,14,.14));
}
.chxCompareScreen.controlCollapsed{--compare-panel-width:36px}
.chxCompareScreen,.chxCompareScreen *{box-sizing:border-box}
.chxCompareScreen:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background:linear-gradient(rgba(85,222,248,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(85,222,248,.03) 1px,transparent 1px);
  background-size:54px 54px;mask-image:linear-gradient(180deg,#000,transparent 76%);
}
.chxCompareScreen.gridHidden:before{display:none}

.chxCompareHeader{
  position:absolute;z-index:12;left:34px;right:calc(var(--compare-panel-width) + 24px);top:20px;height:64px;
  display:flex;align-items:flex-start;pointer-events:none;
}
.chxCompareHeader h1{margin:0;font-size:clamp(28px,2.45vw,44px);line-height:1;letter-spacing:.07em}

.chxCompareViewport{position:absolute;z-index:2;inset:0;min-width:0;overflow:hidden}
.chxCompareScale{
  position:absolute;z-index:1;left:22px;right:calc(var(--compare-panel-width) + 12px);
  top:var(--compare-stage-top);bottom:var(--compare-stage-bottom);pointer-events:none;
}
.chxCompareRulerLine{position:absolute;left:0;right:0;height:1px;display:flex;align-items:center;color:rgba(202,243,251,.94)}
.chxCompareRulerLine b{width:44px;flex:0 0 44px;font-size:var(--compare-ruler-label-size);font-weight:1000;text-align:right;transform:translateY(-7px);text-shadow:0 1px 5px #000,0 0 8px rgba(85,222,248,.46)}
.chxCompareRulerLine b.right{padding-left:10px;text-align:left}
.chxCompareRulerLine i{height:1px;flex:1;margin-left:11px;background:rgba(85,222,248,.34);box-shadow:0 0 7px rgba(85,222,248,.12)}
.chxCompareRulerLine.major{color:rgba(183,235,246,.92)}
.chxCompareRulerLine.major b{font-size:var(--compare-ruler-major-label-size)}
.chxCompareRulerLine.major i{height:2px;background:rgba(85,222,248,.5);box-shadow:0 0 9px rgba(85,222,248,.18)}

.chxCompareStage{
  position:absolute;z-index:3;left:52px;right:calc(var(--compare-panel-width) + 12px);
  top:var(--compare-stage-top);bottom:var(--compare-stage-bottom);isolation:isolate;
}
.chxCompareSlot{
  position:absolute;z-index:var(--compare-z);left:var(--compare-x);top:0;bottom:0;width:clamp(178px,12.7vw,236px);
  transform:translateX(-50%);transition:left .28s cubic-bezier(.2,.75,.2,1),opacity .18s;isolation:isolate;
}
.chxCompareSlot.dragging{z-index:500!important;transition:none;cursor:grabbing}

.chxCompareHeadBlock{
  position:absolute;z-index:8;left:50%;bottom:min(calc(var(--compare-scale-offset) + var(--compare-height) * 100% + 20px),calc(100% - 52px));
  width:max-content;transform:translateX(-50%) scale(var(--compare-overlay-scale));transform-origin:center bottom;text-align:center;
}
.chxCompareHeadIdentity{min-width:190px;padding:9px 13px 8px;border:1px solid rgba(85,222,248,.42);border-bottom:0;background:linear-gradient(110deg,rgba(7,31,45,.97),rgba(2,12,20,.95));clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);box-shadow:0 0 18px rgba(67,210,241,.1)}
.chxCompareHeadIdentity:last-child{border-bottom:1px solid rgba(85,222,248,.32)}
.chxCompareHeadIdentity strong,.chxCompareHeadIdentity span{display:block;overflow:hidden;max-width:230px;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.chxCompareHeadIdentity strong{font-size:16px;line-height:1.05;letter-spacing:.075em}.chxCompareHeadIdentity span{margin-top:5px;color:#8ca8b6;font-size:9px;font-weight:900;letter-spacing:.13em}
.chxCompareTopStats{
  display:flex;border:1px solid rgba(85,222,248,.36);background:rgba(3,13,21,.92);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  white-space:nowrap;box-shadow:0 7px 18px rgba(0,0,0,.32);
}
.chxCompareTopStats span{min-width:78px;padding:8px 11px}.chxCompareTopStats span+span{border-left:1px solid rgba(85,222,248,.22)}
.chxCompareTopStats small,.chxCompareMeasurements small{display:block;color:var(--compare-cyan);font-size:9px;font-weight:1000;letter-spacing:.16em}
.chxCompareTopStats strong{display:block;margin-top:5px;font-size:17px;line-height:1;letter-spacing:.035em}
.chxCompareMetricTag{position:absolute;z-index:8;min-width:84px;padding:8px 11px 9px;color:#f2fcff;background:linear-gradient(105deg,rgba(8,43,58,.95),rgba(2,13,21,.94));border:1px solid rgba(85,222,248,.52);box-shadow:0 0 18px rgba(62,210,242,.13),0 8px 18px rgba(0,0,0,.3);pointer-events:none}.chxCompareMetricTag small,.chxCompareMetricTag strong{display:block;white-space:nowrap}.chxCompareMetricTag small{color:var(--compare-cyan);font-size:7px;font-weight:1000;letter-spacing:.15em}.chxCompareMetricTag strong{margin-top:5px;font-size:16px;line-height:1;letter-spacing:.025em}.chxCompareMetricTag:after{content:"";position:absolute;top:50%;width:19px;height:1px;background:rgba(85,222,248,.72);box-shadow:0 0 7px rgba(85,222,248,.3)}
.chxCompareHeightTag{left:calc(50% - var(--compare-sprite-half,90px) - 16px);bottom:calc(var(--compare-head-y) - 21px);transform:translateX(-100%);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);text-align:right}.chxCompareHeightTag:after{right:-19px}
.chxCompareWeightTag{right:calc(50% - var(--compare-sprite-half,90px) - 16px);bottom:var(--compare-belly-y);transform:translateX(100%);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));text-align:left}.chxCompareWeightTag:after{left:-19px}

.chxCompareFigure{
  appearance:none!important;position:absolute;z-index:4;left:-38%;right:-38%;top:0;bottom:0;padding:0!important;
  border:0!important;border-radius:0!important;outline:0;background:none!important;background-color:transparent!important;
  box-shadow:none!important;clip-path:none!important;filter:none!important;backdrop-filter:none!important;overflow:visible;cursor:grab;touch-action:none;user-select:none;
}
.chxCompareFigure::before,.chxCompareFigure::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important;filter:none!important}
.chxCompareFigure:active{cursor:grabbing}
.chxCompareScreen.filterLineup .chxCompareFigure,.chxCompareScreen.filterLineup .chxCompareFigure:active{cursor:pointer}
.chxCompareSpriteFrame{
  position:absolute;z-index:3;left:50%;bottom:var(--compare-scale-offset);width:100%;height:calc(var(--compare-height) * 100%);
  overflow:visible;transform:translateX(-50%);background:none!important;box-shadow:none!important;filter:none!important;
}
.chxCompareSpriteFrame::before,.chxCompareSpriteFrame::after{content:none!important;display:none!important}
.chxCompareSpriteFrame img{
  position:absolute;left:50%;bottom:var(--compare-image-bottom);width:auto;max-width:none;height:var(--compare-image-height);
  pointer-events:none;transform:translateX(-50%) scaleX(var(--compare-width-scale,1));transform-origin:center bottom;
  filter:none;transition:filter .2s;
}
.chxCompareFigure:hover .chxCompareSpriteFrame img,.chxCompareFigure:focus-visible .chxCompareSpriteFrame img{
  filter:brightness(1.075) saturate(1.045);
}
.chxCompareFigure:focus-visible{outline:1px solid rgba(103,230,255,.68);outline-offset:-4px}

.chxCompareInfo{
  position:absolute;z-index:9;left:50%;top:calc(100% + 9px);width:clamp(190px,13.4vw,250px);min-height:54px;
  padding:12px 14px;border:1px solid rgba(85,222,248,.42);transform:translateX(-50%);
  background:linear-gradient(145deg,rgba(4,18,28,.97),rgba(2,10,17,.96));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 13px 28px rgba(0,0,0,.4);pointer-events:none;
}
.chxCompareInfo:before,.chxCompareInfo:after{content:"";position:absolute;width:18px;height:2px;background:var(--compare-cyan);box-shadow:0 0 8px rgba(85,222,248,.45)}.chxCompareInfo:before{left:8px;top:7px}.chxCompareInfo:after{right:8px;bottom:7px}
.chxCompareMeasurements{display:block;text-align:center}
.chxCompareMeasurements b{display:block;min-width:0;font-size:20px;line-height:1;letter-spacing:.015em;white-space:nowrap;text-shadow:0 0 14px rgba(85,222,248,.18)}
.chxCompareCoreInfo{position:absolute;z-index:9;left:50%;top:calc(100% + 9px);width:clamp(190px,13.4vw,250px);min-height:54px;display:grid;grid-template-columns:1fr 1fr;transform:translateX(-50%);border:1px solid rgba(85,222,248,.38);color:#effbff;background:linear-gradient(120deg,rgba(6,31,44,.97),rgba(2,12,20,.97));clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:0 13px 28px rgba(0,0,0,.38);pointer-events:none}.chxCompareCoreInfo.afterMeasurements{top:calc(100% + 70px)}.chxCompareCoreInfo span{position:relative;padding:10px 12px}.chxCompareCoreInfo span+span{border-left:1px solid rgba(85,222,248,.2)}.chxCompareCoreInfo small,.chxCompareCoreInfo strong{display:block}.chxCompareCoreInfo small{color:var(--compare-cyan);font-size:8px;font-weight:1000;letter-spacing:.14em}.chxCompareCoreInfo strong{margin-top:6px;font-size:17px;line-height:1;letter-spacing:.02em;text-shadow:0 0 11px rgba(85,222,248,.2)}
.chxCompareLegSort{position:absolute;z-index:9;left:50%;width:112px;height:112px;display:grid;place-items:center;padding:12px;border:0;border-radius:50%;transform:translateX(-50%);color:#fff;background:conic-gradient(var(--compare-cyan) calc(var(--sort-progress,0) * 1turn),rgba(85,222,248,.13) 0);text-align:center;box-shadow:0 0 0 4px rgba(3,17,27,.74),0 0 34px rgba(68,211,242,.33),0 12px 28px rgba(0,0,0,.46)}.chxCompareLegSort.raised{bottom:10px}.chxCompareLegSort.solo{top:calc(100% + 9px);bottom:auto}
.chxCompareLegSort:before{content:"";position:absolute;inset:7px;border:1px solid rgba(85,222,248,.32);border-radius:50%;background:radial-gradient(circle,rgba(12,58,74,.98),rgba(2,13,21,.98));box-shadow:inset 0 0 20px rgba(75,215,244,.12)}
.chxCompareLegSort strong{position:relative;z-index:1;display:block;font-size:24px;line-height:1;letter-spacing:.005em;text-shadow:0 0 13px rgba(85,222,248,.5)}

.chxCompareEmpty{
  position:absolute;z-index:10;left:calc((100% - var(--compare-panel-width)) / 2);top:50%;width:min(390px,58vw);min-height:178px;
  padding:26px;border:1px solid rgba(85,222,248,.34);color:#e8faff;background:linear-gradient(145deg,rgba(7,28,42,.88),rgba(3,12,20,.94));
  transform:translate(-50%,-44%);cursor:pointer;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 24px 58px rgba(0,0,0,.38);
}
.chxCompareEmpty,.chxCompareEmpty:hover,.chxCompareEmpty:active{transform:translate(-50%,-44%)!important}
.chxCompareEmpty span,.chxCompareEmpty strong,.chxCompareEmpty small{display:block}.chxCompareEmpty span{color:var(--compare-cyan);font-size:46px;font-weight:200}.chxCompareEmpty strong{margin-top:8px;font-size:14px;letter-spacing:.13em}.chxCompareEmpty small{margin-top:11px;color:#8ba4b1;font-size:11px;line-height:1.5}
.chxCompareEmpty:hover{border-color:rgba(85,222,248,.72);box-shadow:0 0 34px rgba(57,202,235,.15),0 24px 58px rgba(0,0,0,.38)}

.chxCompareControlPanel{
  position:absolute;z-index:22;right:0;top:0;bottom:0;width:var(--compare-panel-expanded);display:flex;flex-direction:column;
  padding:20px 18px 18px;border-left:1px solid rgba(85,222,248,.3);
  background:linear-gradient(105deg,rgba(3,13,21,.94),rgba(2,9,16,.985));box-shadow:-18px 0 54px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.2,.78,.2,1);
}
.chxCompareScreen.controlCollapsed .chxCompareControlPanel{transform:translateX(calc(100% - 36px))}
.chxCompareScreen.controlCollapsed .chxCompareControlPanel>:not(.chxComparePanelToggle){visibility:hidden;opacity:0;pointer-events:none}
.chxComparePanelToggle{position:absolute;z-index:3;left:-23px;top:50%;width:46px;height:60px;display:grid;place-items:center;padding:0;border:1px solid rgba(85,222,248,.5);color:var(--compare-cyan);background:#061925;font:300 27px/1 Arial;cursor:pointer;transform:translateY(-50%)!important;clip-path:polygon(0 7px,7px 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px))}.chxComparePanelToggle:hover,.chxComparePanelToggle:active{transform:translateY(-50%)!important}
.chxCompareLineupMode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}.chxCompareLineupMode button{min-height:42px;padding:5px 6px;border:1px solid rgba(85,222,248,.2);color:#7897a5;background:rgba(4,20,30,.86);font:inherit;font-size:7px;font-weight:1000;line-height:1.2;letter-spacing:.07em;cursor:pointer}.chxCompareLineupMode button.active{border-color:rgba(85,222,248,.72);color:#effcff;background:linear-gradient(100deg,rgba(14,91,118,.85),rgba(4,27,40,.94));box-shadow:0 0 19px rgba(57,204,236,.14)}
.chxCompareControlBody{min-height:0;display:flex;flex:1;flex-direction:column;gap:10px;overflow-y:auto;padding-right:3px;scrollbar-color:rgba(85,222,248,.34) transparent;scrollbar-width:thin}.chxCompareControlBlock{position:relative;margin:0;padding:13px;border:1px solid rgba(85,222,248,.24);background:linear-gradient(115deg,rgba(7,31,43,.84),rgba(3,15,24,.78));box-shadow:inset 3px 0 rgba(85,222,248,.18),0 9px 24px rgba(0,0,0,.13)}.chxCompareControlBlock:before{content:"";position:absolute;left:-1px;top:-1px;width:42px;height:2px;background:var(--compare-cyan);box-shadow:0 0 12px rgba(85,222,248,.38)}.chxCompareBlockTitle{display:block;color:#dff8fd;font-size:10px;font-weight:1000;letter-spacing:.16em}.chxCompareDisplayPanel .chxCompareDisplayOptions{margin-top:11px;padding-top:0;border-top:0}
.chxCompareFilterPanel,.chxComparePresetPanel{box-shadow:inset 3px 0 rgba(85,222,248,.26),0 12px 30px rgba(0,0,0,.18)}
.chxCompareFilterSection{margin-bottom:8px;border:1px solid rgba(85,222,248,.18);background:rgba(3,17,26,.58)}.chxCompareFilterSection summary{position:relative;padding:12px 36px 12px 13px;color:#ccebf2;font-size:9px;font-weight:1000;letter-spacing:.15em;cursor:pointer;list-style:none}.chxCompareFilterSection summary::-webkit-details-marker{display:none}.chxCompareFilterSection summary:after{content:"+";position:absolute;right:13px;top:50%;color:var(--compare-cyan);font-size:17px;transform:translateY(-50%)}.chxCompareFilterSection[open] summary:after{content:"−"}.chxCompareFilterSection[open] summary{border-bottom:1px solid rgba(85,222,248,.14);background:rgba(9,45,60,.45)}.chxCompareFilterSectionBody{padding:12px}
.chxCompareFilterSectionHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.chxCompareFilterSectionHeading button{height:27px;padding:0 9px;border:1px solid rgba(85,222,248,.25);color:#9bb8c3;background:#061722;font:inherit;font-size:6px;font-weight:1000;letter-spacing:.07em;cursor:pointer}
.chxCompareFilterSeries{display:flex;flex-wrap:wrap;gap:6px;padding:1px 0 12px}.chxCompareFilterSeries label{position:relative;flex:0 0 auto;cursor:pointer}.chxCompareFilterSeries input{position:absolute;opacity:0}.chxCompareFilterSeries span{display:block;padding:7px 9px;border:1px solid rgba(85,222,248,.18);color:#86a2ae;background:#061621;font-size:7px;font-weight:900;letter-spacing:.07em;white-space:nowrap}.chxCompareFilterSeries input:checked+span{border-color:rgba(85,222,248,.72);color:#e8fbff;background:rgba(13,78,99,.78);box-shadow:0 0 13px rgba(51,201,233,.12)}
.chxComparePresetGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.chxComparePresetGrid button{position:relative;min-height:38px;padding:7px;border:1px solid rgba(85,222,248,.19);color:#8daab6;background:rgba(4,21,31,.84);font:inherit;font-size:7px;font-weight:1000;line-height:1.25;letter-spacing:.055em;cursor:pointer}.chxComparePresetGrid button:hover,.chxComparePresetGrid button:focus-visible,.chxComparePresetGrid button.active{z-index:4;border-color:rgba(85,222,248,.65);color:#f1fcff;background:rgba(12,68,88,.92)}.chxComparePresetGrid button:after{content:attr(data-help);position:absolute;z-index:30;left:50%;bottom:calc(100% + 9px);width:210px;padding:10px 11px;border:1px solid rgba(85,222,248,.62);color:#eafcff;background:rgba(2,13,21,.98);box-shadow:0 12px 32px rgba(0,0,0,.52);font-size:9px;font-weight:700;line-height:1.45;letter-spacing:.02em;text-align:left;pointer-events:none;opacity:0;transform:translate(-50%,5px);transition:opacity .14s,transform .14s}.chxComparePresetGrid button:hover:after,.chxComparePresetGrid button:focus-visible:after{opacity:1;transform:translate(-50%,0)}.chxComparePresetHint{margin-top:9px;color:#718e9b;font-size:7px;font-weight:800;letter-spacing:.055em}
.chxCompareRangeGrid{display:flex;flex-direction:column;gap:5px}.chxCompareRangeGrid>div{display:grid;grid-template-columns:56px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:5px}.chxCompareRangeGrid b{color:#9ab3be;font-size:7px;letter-spacing:.08em}.chxCompareRangeGrid i{color:#557481;font-size:8px;font-style:normal;text-align:center}.chxCompareRangeGrid input{min-width:0;width:100%;height:31px;padding:0 7px;border:1px solid rgba(85,222,248,.18);outline:0;color:#eafaff;background:#051621;font:inherit;font-size:9px;font-weight:900}.chxCompareRangeGrid input:focus{border-color:rgba(85,222,248,.65)}
.chxCompareFilterActions{display:grid;grid-template-columns:.75fr 1.25fr;gap:7px;margin-top:11px}.chxCompareFilterActions button{height:36px;border:1px solid rgba(85,222,248,.22);color:#91adb8;background:#061722;font:inherit;font-size:7px;font-weight:1000;letter-spacing:.09em;cursor:pointer}.chxCompareFilterActions button:last-child{border-color:rgba(85,222,248,.6);color:#edfcff;background:linear-gradient(100deg,rgba(15,105,134,.78),rgba(4,31,45,.92))}
.chxCompareRangeGrid>div{grid-template-columns:56px minmax(0,1fr) 22px minmax(0,1fr)}
.chxCompareFilterSectionBody>.chxComparePanelLabel{margin:12px 0 8px}.chxCompareColorFilters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.chxCompareColorFilters label>span{display:block;margin-bottom:6px;color:#8da7b3;font-size:7px;font-weight:900;letter-spacing:.08em}.chxCompareColorFilters select{width:100%;height:34px;padding:0 7px;border:1px solid rgba(85,222,248,.2);color:#e9faff;background:#061722;font:inherit;font-size:8px;font-weight:900}
.chxComparePanelTop{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:auto;padding-top:17px;border-top:1px solid rgba(85,222,248,.22)}
.chxComparePanelTop>div{flex:0 0 62px}.chxComparePanelTop>div>span{display:block;color:var(--compare-cyan);font-size:9px;font-weight:1000;letter-spacing:.17em}.chxComparePanelTop>div>strong{display:block;margin-top:5px;font-size:31px;line-height:1}.chxComparePanelTop>div>strong small{color:#72909f;font-size:12px}
.chxComparePanelTop>button{height:54px;flex:1;padding:0 17px;border:1px solid rgba(85,222,248,.6);color:#edfbff;background:linear-gradient(100deg,rgba(17,116,148,.82),rgba(4,30,45,.94));font:inherit;font-size:11px;font-weight:1000;letter-spacing:.09em;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.chxComparePanelTop>button:hover{border-color:#91edff;box-shadow:0 0 24px rgba(48,199,234,.2)}.chxComparePanelTop>button:disabled{opacity:.38;cursor:not-allowed}
.chxCompareSortPanel{padding:13px}
.chxComparePanelLabel,.chxCompareAddedHeading>span{display:block;color:var(--compare-cyan);font-size:8px;font-weight:1000;letter-spacing:.2em}
.chxCompareChartHeading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chxCompareSwitch{display:flex;align-items:center;gap:7px;cursor:pointer}.chxCompareSwitch input{position:absolute;opacity:0;pointer-events:none}.chxCompareSwitch i{position:relative;width:38px;height:20px;border:1px solid rgba(85,222,248,.35);border-radius:20px;background:#06131d}.chxCompareSwitch i:after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#7896a4;transition:.18s}.chxCompareSwitch input:checked+i{border-color:rgba(85,222,248,.75);background:rgba(15,101,128,.7);box-shadow:0 0 15px rgba(54,205,237,.17)}.chxCompareSwitch input:checked+i:after{left:21px;background:#dffaff}.chxCompareSwitch b{min-width:20px;color:#a6c0ca;font-size:8px;letter-spacing:.1em}
.chxCompareChartControls{display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:end;gap:9px;margin-top:13px;transition:opacity .18s}.chxCompareChartControls.disabled{opacity:.38}.chxCompareChartMetric{display:block;min-width:0}.chxCompareChartMetric>span{display:block;margin-bottom:6px;color:#8ba6b4;font-size:8px;font-weight:900;letter-spacing:.13em}.chxCompareChartMetric select{width:100%;height:40px;padding:0 28px 0 10px;border:1px solid rgba(85,222,248,.26);border-radius:0;color:#f0fbff;background:#061925;font:inherit;font-size:10px;font-weight:900;letter-spacing:.055em;cursor:pointer}.chxCompareChartControls>button{height:40px;padding:0 7px;border:1px solid rgba(85,222,248,.35);color:#ccecf3;background:rgba(6,37,51,.92);font:inherit;font-size:7px;font-weight:1000;line-height:1.2;letter-spacing:.055em;cursor:pointer}.chxCompareChartControls>button:hover{color:#fff;border-color:rgba(85,222,248,.7)}.chxCompareChartControls>button:disabled{cursor:not-allowed}.chxCompareScaleSwitch{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(85,222,248,.14);color:#9db5c0;background:rgba(3,17,26,.55);font-size:8px;font-weight:900;letter-spacing:.07em;cursor:pointer}.chxCompareScaleSwitch input{width:14px;height:14px;margin:0;accent-color:var(--compare-cyan)}
.chxCompareDisplayOptions{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(85,222,248,.12)}.chxCompareDisplayOptions>.chxComparePanelLabel{grid-column:1/-1;margin-bottom:2px}.chxCompareDisplayOptions label{display:flex;align-items:center;gap:7px;min-width:0;color:#9bb4c0;font-size:8px;font-weight:900;line-height:1.2;letter-spacing:.05em;cursor:pointer}.chxCompareDisplayOptions input{flex:0 0 auto;width:14px;height:14px;margin:0;accent-color:var(--compare-cyan)}
.chxCompareAddedPanel{display:flex;min-height:0;flex:1;flex-direction:column;padding-top:17px}.chxCompareAddedHeading{display:flex;align-items:center;justify-content:space-between;padding:0 2px 10px}.chxCompareAddedHeading>b{color:#9bb8c5;font-size:12px}
.chxCompareAddedList{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:3px;scrollbar-color:rgba(85,222,248,.32) transparent;scrollbar-width:thin}
.chxCompareAddedRow{display:grid;grid-template-columns:43px minmax(0,1fr) 42px;align-items:stretch;min-height:68px;border:1px solid rgba(85,222,248,.18);background:rgba(5,21,31,.82)}
.chxCompareAddedRow.hasValue{grid-template-columns:43px minmax(0,1fr) minmax(72px,88px) 42px}
.chxCompareRank,.chxCompareFreeMarker{display:grid;place-items:center;color:var(--compare-cyan);font-size:13px;border-right:1px solid rgba(85,222,248,.14)}.chxCompareFreeMarker{color:#7897a6;font-size:7px;letter-spacing:.05em}
.chxCompareAddedCharacter{min-width:0;padding:9px 10px;border:0;color:#edfaff;background:transparent;font:inherit;text-align:left;cursor:pointer}.chxCompareAddedCharacter strong,.chxCompareAddedCharacter span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chxCompareAddedCharacter strong{font-size:15px;line-height:1.1;letter-spacing:.055em}.chxCompareAddedCharacter span{margin-top:6px;color:#82a0af;font-size:9px;font-weight:900;letter-spacing:.09em}
.chxCompareRankValue{display:grid;place-items:center;padding:5px;border-left:1px solid rgba(85,222,248,.16);color:#effcff;background:rgba(9,47,61,.62);font-size:16px;font-style:normal;font-weight:1000;line-height:1.1;text-align:center}
.chxCompareQuickRemove{position:relative;display:block;padding:0;border:0;border-left:1px solid rgba(255,82,104,.2);color:#ff8293;background:rgba(62,14,26,.38);font-size:0;text-align:center;cursor:pointer}.chxCompareQuickRemove:before{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%)}.chxCompareQuickRemove:hover{color:#fff;background:rgba(130,24,45,.7)}
.chxCompareQuickRemove,.chxCompareQuickRemove:hover,.chxCompareQuickRemove:active{transform:none!important}
.chxCompareAddedEmpty{padding:18px 12px;border:1px dashed rgba(85,222,248,.18);color:#6f8a98;font-size:10px;text-align:center}

.chxComparePicker{
  position:absolute;z-index:40;top:14px;right:var(--compare-panel-width);bottom:14px;width:var(--compare-picker-width);display:flex;flex-direction:column;
  padding:24px 18px;border:1px solid rgba(85,222,248,.38);border-right-color:rgba(85,222,248,.24);background:linear-gradient(100deg,rgba(3,13,21,.992),rgba(2,9,16,.998));
  box-shadow:-25px 0 70px rgba(0,0,0,.48);animation:chxComparePickerIn .26s cubic-bezier(.2,.78,.2,1) both;
}
@keyframes chxComparePickerIn{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:translateX(0)}}
.chxComparePicker.stable{animation:none}
.chxComparePickerClose,.chxComparePopupClose{position:absolute;right:16px;top:16px;width:46px;height:46px;display:grid;place-items:center;padding:0;border:1px solid rgba(85,222,248,.3);border-radius:50%;color:#b0cfda;background:#061722;font-size:0;text-align:center;cursor:pointer}
.chxComparePickerClose:before,.chxComparePickerClose:after,.chxComparePopupClose:before,.chxComparePopupClose:after{content:"";position:absolute;left:50%;top:50%;width:15px;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.chxComparePickerClose:after,.chxComparePopupClose:after{transform:translate(-50%,-50%) rotate(-45deg)}
.chxComparePickerClose,.chxComparePickerClose:hover,.chxComparePickerClose:active,.chxComparePopupClose,.chxComparePopupClose:hover,.chxComparePopupClose:active{transform:none!important}
.chxComparePickerBack{align-self:flex-start;height:39px;padding:0 14px;border:1px solid rgba(85,222,248,.29);color:#b2d4dc;background:rgba(5,24,35,.9);font:inherit;font-size:9px;font-weight:1000;letter-spacing:.12em;cursor:pointer}
.chxComparePickerTitle{min-height:46px;margin:0 52px 19px 2px;padding:4px 0 14px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid rgba(85,222,248,.2)}.chxComparePickerBack+.chxComparePickerTitle{margin-top:18px}
.chxComparePickerTitle span{color:var(--compare-cyan);font-size:8px;font-weight:1000;letter-spacing:.25em}.chxComparePickerTitle h2{margin:8px 0 0;font-size:25px;line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.chxCompareSeriesList{min-height:0;overflow:auto;display:flex;flex:1;flex-direction:column;gap:8px;padding-right:4px;scrollbar-color:rgba(85,222,248,.32) transparent}
.chxCompareSeriesList button{position:relative;min-height:70px;padding:13px 50px 12px 15px;border:1px solid rgba(85,222,248,.19);color:#e8f9fd;background:rgba(5,22,32,.83);font:inherit;text-align:left;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.chxCompareSeriesList button:hover{border-color:rgba(85,222,248,.55);background:rgba(9,44,60,.9)}.chxCompareSeriesList strong,.chxCompareSeriesList span{display:block}.chxCompareSeriesList strong{font-size:12px;letter-spacing:.07em;text-transform:uppercase}.chxCompareSeriesList span{margin-top:8px;color:#7896a5;font-size:8px;font-weight:900;letter-spacing:.12em}.chxCompareSeriesList b{position:absolute;right:17px;top:50%;color:var(--compare-cyan);font-size:25px;transform:translateY(-50%)}
.chxCompareSeriesList button:disabled{opacity:.38;cursor:not-allowed}.chxCompareSeriesList button:disabled:hover{border-color:rgba(85,222,248,.19);background:rgba(5,22,32,.83)}
.chxCompareCharacterGrid{min-height:0;overflow:auto;display:grid;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;padding:2px 4px 8px;scrollbar-color:rgba(85,222,248,.32) transparent}
.chxComparePickerCharacter{position:relative;min-width:0;padding:0 0 11px;border:1px solid rgba(85,222,248,.25);color:#eafaff;background:#061620;font:inherit;cursor:pointer;overflow:hidden}.chxComparePickerCharacter>span{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#06131d}.chxComparePickerCharacter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--thumb-x) var(--thumb-y);transform:scale(var(--thumb-zoom));transform-origin:var(--thumb-x) var(--thumb-y)}.chxComparePickerCharacter strong{display:block;overflow:hidden;margin-top:9px;padding:0 7px;font-size:10px;letter-spacing:.07em;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}.chxComparePickerCharacter small{position:absolute;right:5px;top:5px;padding:5px 6px;color:#06131b;background:var(--compare-cyan);font-size:7px;font-weight:1000;letter-spacing:.08em}.chxComparePickerCharacter:hover{border-color:rgba(85,222,248,.78);box-shadow:0 0 20px rgba(55,202,236,.16)}.chxComparePickerCharacter.selected{opacity:.45;cursor:not-allowed}

.chxCompareOutfitOverlay{position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:28px;background:rgba(1,6,11,.66);backdrop-filter:none!important}
.chxCompareOutfitPopup{position:relative;width:min(900px,calc(100vw - 180px));max-height:min(760px,90vh);overflow:auto;padding:38px 40px 30px;border:1px solid rgba(85,222,248,.4);color:#f1fbff;background:linear-gradient(145deg,rgba(7,26,39,.995),rgba(2,10,17,.998));clip-path:polygon(17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%,0 17px);box-shadow:0 32px 90px rgba(0,0,0,.66),0 0 38px rgba(46,192,227,.1)}
.chxComparePopupKicker{color:var(--compare-cyan);font-size:11px;font-weight:1000;letter-spacing:.27em}.chxCompareOutfitPopup h2{margin:10px 56px 0 0;font-size:42px;line-height:1;letter-spacing:.07em;text-transform:uppercase}
.chxCompareOutfitChoices{display:flex;gap:19px;overflow-x:auto;margin-top:28px;padding:4px 4px 18px;scrollbar-color:rgba(85,222,248,.4) transparent}
.chxCompareOutfitChoices>button{appearance:none;flex:0 0 168px;padding:8px 7px 13px;border:0!important;border-radius:0!important;color:#dff8fd;background:transparent!important;box-shadow:none!important;font:inherit;cursor:pointer}.chxCompareOutfitChoices>button>span{position:relative;display:block;width:142px;height:142px;margin:auto;overflow:hidden;border:2px solid rgba(85,222,248,.45);border-radius:50%;background:#06131d}.chxCompareOutfitChoices img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--thumb-x) var(--thumb-y);transform:scale(var(--thumb-zoom));transform-origin:var(--thumb-x) var(--thumb-y)}.chxCompareOutfitChoices strong{display:block;margin-top:12px;font-size:12px;line-height:1.35;letter-spacing:.07em;text-transform:uppercase}.chxCompareOutfitChoices>button:hover>span{border-color:rgba(85,222,248,.8)}.chxCompareOutfitChoices>button.active>span{border-color:var(--compare-red);box-shadow:0 0 22px rgba(255,82,104,.28)}
.chxCompareOutfitChoices>button,.chxCompareOutfitChoices>button:hover,.chxCompareOutfitChoices>button:active{transform:none!important}
.chxComparePopupActions{margin-top:22px;padding-top:19px;display:flex;justify-content:flex-end;border-top:1px solid rgba(85,222,248,.18)}.chxComparePopupActions button{height:44px;padding:0 18px;border:1px solid rgba(255,82,104,.48);color:#ffadba;background:rgba(63,13,25,.78);font:inherit;font-size:11px;font-weight:1000;letter-spacing:.1em;cursor:pointer}.chxComparePopupActions button:hover{color:#fff;border-color:#ff7e91;background:rgba(102,18,36,.86)}

@media(max-height:820px) and (min-width:681px){
  .cx-sidebar{gap:4px}.cx-sidebar .cx-nav{height:72px}
  .chxCompareScreen{--compare-stage-top:8px;--compare-stage-bottom:3vh}
  .chxCompareHeader{top:12px}.chxCompareHeader h1{font-size:30px}
  .chxCompareInfo{top:calc(100% + 7px);min-height:50px;padding:9px 11px}
  .chxCompareControlPanel{padding-top:13px}.chxCompareSortPanel{padding:11px 0}.chxCompareDisplayOptions{margin-top:10px;padding-top:10px;gap:6px 8px}.chxComparePanelTop{padding-top:11px}.chxCompareAddedRow{min-height:58px}
}
@media(max-width:1280px){
  body.chxHubCompareActive > .app{left:86px}
  .chxCompareScreen{--compare-panel-expanded:270px;--compare-picker-width:330px}
  .chxCompareHeader{left:24px}.chxCompareStage{left:43px}.chxCompareScale{left:15px}
}
@media(max-width:760px){
  body.chxHubCompareActive > .app{left:0;top:68px}
  .chxCompareScreen{--compare-panel-expanded:225px;--compare-picker-width:280px;--compare-stage-top:8px;--compare-stage-bottom:3vh}
  .chxCompareHeader{left:13px;right:calc(var(--compare-panel-width) + 8px);top:10px}.chxCompareHeader h1{font-size:20px}.chxCompareHeader>div>span{font-size:7px}
  .chxCompareScale{left:5px;right:calc(var(--compare-panel-width) + 3px)}.chxCompareRulerLine b{width:23px}.chxCompareRulerLine b.right{padding-left:5px}.chxCompareStage{left:28px;right:calc(var(--compare-panel-width) + 3px)}
  .chxCompareSlot{width:172px}.chxCompareTopStats span{min-width:64px;padding:7px}.chxCompareTopStats strong{font-size:11px}
  .chxCompareInfo{width:178px}.chxCompareMeasurements b{font-size:15px}.chxCompareHeadIdentity strong{font-size:12px}.chxCompareHeadIdentity{min-width:160px}
  .chxCompareControlPanel{padding-inline:11px}.chxComparePanelTop{align-items:flex-start;flex-direction:column}.chxComparePanelTop>button{width:100%}
  .chxCompareOutfitPopup{width:calc(100vw - 20px);padding:30px 18px 22px}.chxCompareOutfitPopup h2{font-size:32px}.chxComparePopupActions{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.chxComparePicker{animation:none}.chxCompareSlot,.chxCompareSpriteFrame img{transition:none}}

/* Keep preset help inside the control panel instead of clipping at its edges. */
.chxComparePresetGrid button:nth-child(odd):after{left:0;transform:translateY(5px)}
.chxComparePresetGrid button:nth-child(even):after{right:0;left:auto;transform:translateY(5px)}
.chxComparePresetGrid button:hover:after,.chxComparePresetGrid button:focus-visible:after{transform:translateY(0)}
@media(max-height:820px){.chxCompareSortPanel{padding:11px}}

/* Comparison control sections use restrained separators instead of stacked panels. */
.chxCompareControlBody{gap:0}
.chxComparePanelSection{position:relative;margin:0;padding:15px 2px;border:0;border-bottom:1px solid rgba(85,222,248,.2);background:none;box-shadow:none}
.chxComparePanelSection:after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:1px;background:rgba(85,222,248,.62);box-shadow:0 0 8px rgba(85,222,248,.18)}
.chxCompareDisplayPanel.chxComparePanelSection{padding-top:2px}
.chxCompareSortPanel.chxComparePanelSection{padding:15px 2px}
.chxCompareFilterPanel.chxComparePanelSection,.chxComparePresetPanel.chxComparePanelSection{padding:16px 0 10px}
.chxCompareSeriesActions{display:flex;align-items:center;gap:5px}
.chxCompareFilterSectionHeading .chxCompareSeriesActions button{padding:0 7px;font-size:5.5px}
.chxCompareFilterActions.single{display:block}
.chxCompareFilterActions.single button{width:100%}
.chxCompareChartValues{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.chxCompareChartValues .primary{grid-column:1/-1}
.chxCompareChartValues+.chxCompareChartMetric{margin-top:7px}

/* Three-value chart display: the primary metric remains centered and dominant. */
.chxCompareLegCharts{position:absolute;z-index:9;left:50%;width:270px;display:grid;grid-template-columns:76px 112px 76px;align-items:center;justify-content:center;gap:3px;transform:translateX(-50%);pointer-events:none}
.chxCompareLegCharts.raised{bottom:10px}.chxCompareLegCharts.solo{top:calc(100% + 9px);bottom:auto}
.chxCompareLegCharts .chxCompareLegSort{position:relative;left:auto;width:76px;height:76px;padding:8px;transform:none;box-shadow:0 0 0 3px rgba(3,17,27,.72),0 0 24px rgba(68,211,242,.22),0 8px 18px rgba(0,0,0,.4)}
.chxCompareLegCharts .chxCompareLegSort.primary{width:112px;height:112px;padding:12px;box-shadow:0 0 0 4px rgba(3,17,27,.74),0 0 34px rgba(68,211,242,.33),0 12px 28px rgba(0,0,0,.46)}
.chxCompareLegCharts .chxCompareLegSort small,.chxCompareLegCharts .chxCompareLegSort strong{position:relative;z-index:1;display:block}
.chxCompareLegCharts .chxCompareLegSort small{margin-bottom:4px;color:var(--compare-cyan);font-size:6px;font-weight:1000;line-height:1;letter-spacing:.08em}
.chxCompareLegCharts .chxCompareLegSort strong{font-size:14px;line-height:1}
.chxCompareLegCharts .chxCompareLegSort.primary small{font-size:7px}.chxCompareLegCharts .chxCompareLegSort.primary strong{font-size:23px}
.chxCompareChartSpacer{display:block;width:76px;height:1px}
.chxCompareLegCharts{align-items:end}
.chxCompareLegCharts.count1{width:112px;grid-template-columns:112px}
.chxCompareLegCharts.count2{width:191px;grid-template-columns:112px 76px}
.chxCompareLegCharts.count3{width:270px;grid-template-columns:76px 112px 76px}
.chxCompareLegCharts .chxCompareLegSort>span{position:relative;z-index:2;display:block;width:100%;height:100%;text-align:center}
.chxCompareLegCharts .chxCompareLegSort small{position:absolute;left:11%;right:11%;top:22%;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chxCompareLegCharts .chxCompareLegSort strong{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.chxCompareRankingOptions{display:grid;gap:8px;margin:4px 0 14px}.chxCompareRankingOptions>label>span{display:block;margin-bottom:6px;color:#8da7b3;font-size:7px;font-weight:900;letter-spacing:.09em}.chxCompareRankingOptions select{width:100%;height:35px;padding:0 9px;border:1px solid rgba(85,222,248,.24);color:#ecfbff;background:#061722;font:inherit;font-size:9px;font-weight:1000}.chxCompareRankingOptions .chxCompareBestSeries{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid rgba(85,222,248,.14);background:rgba(3,17,26,.52);cursor:pointer}.chxCompareRankingOptions .chxCompareBestSeries>span{margin:0}.chxCompareBestSeries input{width:14px;height:14px;margin:0;accent-color:var(--compare-cyan)}
.chxCompareRankingTop{margin-top:16px;padding-top:13px;border-top:1px solid rgba(85,222,248,.19)}.chxCompareRankingTop>.chxComparePanelLabel{margin-bottom:8px}.chxCompareRankingTop>div{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;min-height:43px;border-bottom:1px solid rgba(85,222,248,.11)}.chxCompareRankingTop>div>b{display:grid;place-items:center;font-size:18px}.chxCompareRankingTop>div>span strong,.chxCompareRankingTop>div>span small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chxCompareRankingTop>div>span strong{color:#f3fcff;font-size:11px;letter-spacing:.04em}.chxCompareRankingTop>div>span small{margin-top:3px;color:#7d9aa6;font-size:7px;font-weight:900;letter-spacing:.08em}
.chxCompareRankingTop+.chxComparePanelLabel{margin-top:16px}

/* Chart values: the numeric result stays centered, with its unit underneath. */
.chxCompareLegCharts .chxCompareLegSort{pointer-events:auto}
.chxCompareLegCharts .chxCompareLegSort strong{top:52%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.chxCompareLegCharts .chxCompareLegSort strong b{display:block;color:#fff;font:inherit;font-size:19px;line-height:.92}
.chxCompareLegCharts .chxCompareLegSort strong em{display:block;color:#a6ddea;font-size:7px;font-style:normal;font-weight:1000;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.chxCompareLegCharts .chxCompareLegSort.primary strong b{font-size:27px}
.chxCompareLegCharts .chxCompareLegSort.primary strong em{font-size:8px}
.chxCompareLegSort.hasCalculation:after{content:attr(data-calculation);position:absolute;z-index:40;left:50%;bottom:calc(100% + 12px);width:280px;padding:12px 14px;border:1px solid rgba(85,222,248,.58);color:#eafcff;background:rgba(2,12,20,.98);box-shadow:0 16px 38px rgba(0,0,0,.58);font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.015em;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,7px);transition:opacity .16s,transform .16s}
.chxCompareLegSort.hasCalculation:hover:after,.chxCompareLegSort.hasCalculation:focus:after{opacity:1;transform:translate(-50%,0)}

/* Ranking composition keeps a dedicated chooser and a stable Top 5 area. */
.chxComparePresetPanel{display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
.chxComparePresetPanel .chxCompareFilterSectionBody{display:flex;min-height:0;flex:1;flex-direction:column}
.chxCompareRankingOptions{grid-template-columns:1fr;flex:0 0 auto}
.chxCompareRankingLimit{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chxCompareRankingLimit>span{color:#8da7b3;font-size:8px;font-weight:900;letter-spacing:.09em}
.chxCompareRankingLimit>div{display:grid;grid-template-columns:34px 42px 34px;align-items:center;height:34px;border:1px solid rgba(85,222,248,.24);background:#061722}
.chxCompareRankingLimit button{height:100%;padding:0;border:0;color:var(--compare-cyan);background:rgba(10,48,63,.72);font-family:inherit;font-size:18px;font-weight:1000;line-height:1;cursor:pointer}
.chxCompareRankingLimit button:disabled{color:#45616d;background:transparent;cursor:not-allowed}
.chxCompareRankingLimit strong{display:grid;place-items:center;height:100%;border-inline:1px solid rgba(85,222,248,.18);font-size:16px}
.chxCompareRankingChooser{display:flex;min-height:112px;flex:1 1 220px;flex-direction:column;margin-top:12px;padding-top:12px;border-top:1px solid rgba(85,222,248,.16);overflow:hidden}
.chxCompareRankingChooser>.chxComparePanelLabel{flex:0 0 auto;margin-bottom:8px}
.chxCompareRankingChooser .chxComparePresetGrid{min-height:0;overflow-y:auto;margin:0;padding-right:3px;scrollbar-color:rgba(85,222,248,.34) transparent;scrollbar-width:thin}
.chxCompareRankingTop{flex:0 0 auto;margin-top:13px;padding-top:12px}
.chxCompareRankingTop>.chxCompareRankingTopList{display:flex;grid-template-columns:none;align-items:stretch;min-height:0;flex-direction:column;gap:5px;border-bottom:0}
.chxCompareRankingTopList>div{position:relative;display:grid;grid-template-columns:32px 48px minmax(0,1fr);align-items:center;min-height:52px;padding:4px 8px 4px 5px;border:1px solid rgba(85,222,248,.12);background:linear-gradient(100deg,rgba(6,29,41,.86),rgba(3,15,23,.72));overflow:hidden}
.chxCompareRankingTopList>div>b{position:relative;z-index:1;display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(85,222,248,.28);border-radius:50%;color:#a9dce6;font-size:11px}
.chxCompareRankingTopList>div>i{position:relative;z-index:1;display:block;width:42px;height:42px;overflow:hidden;border:1px solid rgba(85,222,248,.3);border-radius:50%;background:#06131d}
.chxCompareRankingTopList>div>i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--thumb-x) var(--thumb-y);transform:scale(var(--thumb-zoom));transform-origin:var(--thumb-x) var(--thumb-y)}
.chxCompareRankingTopList>div span{position:relative;z-index:1;min-width:0}
.chxCompareRankingTopList>div span strong,.chxCompareRankingTopList>div span small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chxCompareRankingTopList>div span strong{font-size:14px;line-height:1.05;letter-spacing:.045em}
.chxCompareRankingTopList>div span small{margin-top:4px;color:#7898a5;font-size:7px;font-weight:900;letter-spacing:.09em}
.chxCompareRankingTopList>div.rank1{border-color:rgba(255,203,78,.62);background:linear-gradient(100deg,rgba(111,73,11,.82),rgba(33,25,10,.76));box-shadow:inset 3px 0 #ffd66a,0 0 20px rgba(255,190,56,.08)}
.chxCompareRankingTopList>div.rank1:after{content:"";position:absolute;right:-22px;top:-35px;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,103,.24),transparent 68%)}
.chxCompareRankingTopList>div.rank1>b{border-color:#ffd66a;color:#2b1d07;background:#ffd66a}
.chxCompareRankingTopList>div.rank1 strong{color:#ffe59b;font-size:16px;text-shadow:0 0 14px rgba(255,205,80,.32)}
.chxCompareRankingTopList>div.rank2{border-color:rgba(193,219,230,.32);box-shadow:inset 3px 0 #bcd3dc}.chxCompareRankingTopList>div.rank3{border-color:rgba(206,139,91,.32);box-shadow:inset 3px 0 #c8895e}
.chxCompareRankingTop.empty>.chxCompareRankingTopList{min-height:48px;display:grid;place-items:center;border:1px dashed rgba(85,222,248,.12)}
.chxCompareRankingTop.empty p{max-width:180px;margin:0;color:#587582;font-size:8px;font-weight:900;line-height:1.5;letter-spacing:.1em;text-align:center}

/* Admin-only measurement calibration mode. */
.chxCompareScreen.measurementCalibration{--compare-panel-expanded:clamp(248px,16.5vw,323px)}
.measurementCalibration .chxCompareFigure{cursor:grab}
.measurementCalibration .chxCompareFigure:active{cursor:grabbing}
.measurementCalibration .chxCompareHeader h1{font-size:clamp(24px,2vw,38px);letter-spacing:.055em}
.measurementCalibration .chxCompareSlot.calibrationTarget .chxCompareSpriteFrame img{filter:drop-shadow(0 0 15px rgba(255,181,79,.34)) drop-shadow(0 18px 23px rgba(0,0,0,.42))}
.measurementCalibration .chxCompareSlot.calibrationClosest .chxCompareHeadIdentity{position:relative;border-color:rgba(88,229,255,.96);box-shadow:inset 3px 0 var(--compare-cyan),0 0 28px rgba(69,215,245,.3)}
.measurementCalibration .chxCompareSlot.calibrationClosest .chxCompareSpriteFrame img{filter:drop-shadow(0 0 15px rgba(74,222,250,.36)) drop-shadow(0 18px 23px rgba(0,0,0,.42))}
.chxCompareCalibrationPanel{padding:0;overflow:visible}
.chxCompareCalibrationBody{display:flex;min-height:0;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:30px 24px 24px;scrollbar-color:rgba(85,222,248,.34) transparent;scrollbar-width:thin}
.measurementCalibration .chxComparePanelToggle{z-index:30}
.chxCompareCalibrationPanel h2{margin:0;font-size:clamp(20px,1.5vw,27px);line-height:.95;letter-spacing:.05em}
.chxCompareCalibrationLineup{display:flex;min-height:150px;max-height:39%;flex-direction:column;margin-top:22px;padding:14px 0;border-block:1px solid rgba(85,222,248,.16)}
.chxCompareCalibrationLineup .chxCompareAddedHeading b small{color:#6f8b98;font-size:9px}
.chxCompareCalibrationLineup .chxCompareAddedList{flex:1}
.chxCompareCalibrationLineup .chxCompareAddedRow{grid-template-columns:minmax(0,1fr) 42px;min-height:55px}
.chxCompareCalibrationLineup .chxCompareAddedCharacter strong{font-size:13px}
.chxCompareCalibrationLineup .chxCompareAddedCharacter span{font-size:8px}
.chxCompareCalibrationLineupActions{display:grid;grid-template-columns:.72fr 1.28fr;gap:8px;margin-top:9px}
.chxCompareCalibrationLineupActions button{height:40px;font:inherit;font-size:8px;font-weight:1000;letter-spacing:.1em;cursor:pointer}
.chxCompareCalibrationReset{border:1px solid rgba(85,222,248,.24);color:#91acb8;background:rgba(5,23,34,.9)}
.chxCompareCalibrationAdd{border:1px solid rgba(85,222,248,.46);color:#e8fbff;background:linear-gradient(100deg,rgba(12,85,109,.72),rgba(4,28,41,.92))}
.chxCompareCalibrationAdd:disabled{opacity:.35;cursor:not-allowed}
.chxCompareCalibrationForm{display:flex;min-height:0;flex:0 0 auto;flex-direction:column;margin-top:auto;padding-top:18px}
.chxCompareCalibrationFields{display:grid;grid-template-columns:1fr 82px;gap:13px 10px}.chxCompareCalibrationFields label:nth-child(n+3){grid-column:1/-1}
.chxCompareCalibrationFields label span{display:block;margin-bottom:7px;color:#91adba;font-size:8px;font-weight:1000;letter-spacing:.13em}
.chxCompareCalibrationFields input{width:100%;height:45px;padding:0 12px;border:1px solid rgba(85,222,248,.25);outline:0;color:#f4fcff;background:#061722;font:inherit;font-size:15px;font-weight:900}.chxCompareCalibrationFields input:focus{border-color:rgba(85,222,248,.82);box-shadow:0 0 0 2px rgba(85,222,248,.08)}
.chxCompareCalibrationFeedback{min-height:38px;padding:12px 0 5px;color:#82cfdd;font-size:9px;font-weight:800;line-height:1.45}.chxCompareCalibrationFeedback.error{color:#ff8293}
.chxCompareCalibrationActions{display:grid;grid-template-columns:.8fr 1.2fr;gap:9px;margin-top:auto;padding-top:20px}.chxCompareCalibrationActions button{height:54px;border:1px solid rgba(85,222,248,.28);color:#9dbac5;background:#061722;font:inherit;font-size:10px;font-weight:1000;letter-spacing:.12em;cursor:pointer}.chxCompareCalibrationActions button:last-child{border-color:rgba(85,222,248,.72);color:#f1fcff;background:linear-gradient(100deg,rgba(17,116,148,.9),rgba(4,30,45,.96));box-shadow:0 0 24px rgba(48,199,234,.14)}
@media(max-width:900px){.chxCompareScreen.measurementCalibration{--compare-panel-expanded:220px}.chxCompareCalibrationBody{padding-inline:15px}.chxCompareCalibrationFields{grid-template-columns:1fr 58px}}

/* Comparison stage clarity and unified hover information. */
.chxCompareScreen:before{opacity:.11}
.chxCompareScale{
  top:var(--compare-stage-top);
  bottom:var(--compare-stage-bottom);
  opacity:var(--compare-grid-opacity,.5);
}
.chxCompareHeader>div{
  width:max-content;max-width:100%;padding:12px 18px 11px;
  border:1px solid rgba(85,222,248,.34);
  color:#f5fcff;background:linear-gradient(105deg,rgba(4,19,29,.91),rgba(2,10,17,.83));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 12px 28px rgba(0,0,0,.3),inset 3px 0 rgba(85,222,248,.55);
}
.chxCompareHeadBlock{
  bottom:min(calc(var(--compare-scale-offset) + var(--compare-height) * 100% + 30px),calc(100% - 150px));
  width:clamp(238px,16.5vw,310px);pointer-events:none;
}
.chxCompareHeadMeasurements{
  display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 104px);min-height:39px;margin:0 auto 5px;
  border:1px solid rgba(85,222,248,.38);color:#f4fcff;
  background:linear-gradient(110deg,rgba(6,29,41,.88),rgba(2,13,21,.84));
  box-shadow:0 8px 19px rgba(0,0,0,.25);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  opacity:.82;transition:opacity .18s,background .18s;
}
.chxCompareHeadMeasurements small{color:var(--compare-cyan);font-size:8px;font-weight:1000;letter-spacing:.16em}
.chxCompareHeadMeasurements strong{font-size:16px;line-height:1;letter-spacing:.025em;white-space:nowrap}
.chxCompareHeadIdentityRow{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:stretch}
.chxCompareHeadIdentity{
  width:100%;min-width:0;padding:9px 7px 8px;border-inline:0;
  clip-path:none;box-shadow:none;
}
.chxCompareHeadIdentity.identityDisabled{visibility:hidden}
.chxCompareHeadIdentity strong,.chxCompareHeadIdentity span{max-width:100%}
.chxCompareHeadMetric{
  display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(85,222,248,.36);color:#f5fcff;background:rgba(3,18,28,.91);
}
.chxCompareHeadMetric:first-child{clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}
.chxCompareHeadMetric:last-child{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.chxCompareHeadMetric strong{font-size:18px;line-height:.95;letter-spacing:.01em}
.chxCompareHeadMetric small{margin-top:4px;color:var(--compare-cyan);font-size:7px;font-weight:1000;line-height:1;letter-spacing:.14em}
.chxCompareHeadBlock .displayDisabled{display:none}
.chxCompareHeadIdentityRow>.chxCompareHeadMetric.displayDisabled{display:flex;visibility:hidden;opacity:0}
.chxCompareHeadBlock.allDisabled{visibility:hidden;opacity:0}
.chxCompareFigure:hover~.chxCompareHeadBlock,
.chxCompareFigure:focus-visible~.chxCompareHeadBlock{visibility:visible;opacity:1}
.chxCompareFigure:hover~.chxCompareHeadBlock .displayDisabled,
.chxCompareFigure:focus-visible~.chxCompareHeadBlock .displayDisabled{display:flex}
.chxCompareFigure:hover~.chxCompareHeadBlock .chxCompareHeadIdentityRow>.chxCompareHeadMetric.displayDisabled,
.chxCompareFigure:focus-visible~.chxCompareHeadBlock .chxCompareHeadIdentityRow>.chxCompareHeadMetric.displayDisabled{visibility:visible;opacity:1}
.chxCompareFigure:hover~.chxCompareHeadBlock .chxCompareHeadMeasurements,
.chxCompareFigure:focus-visible~.chxCompareHeadBlock .chxCompareHeadMeasurements{
  opacity:1;background:linear-gradient(110deg,rgba(6,29,41,.98),rgba(2,13,21,.97));
}

.chxCompareSlot{z-index:auto!important;margin-left:clamp(-118px,-6.35vw,-89px);transform:none;isolation:auto}
.chxCompareSlot.dragging{z-index:auto!important}
.chxCompareSlot.dragging .chxCompareFigure{z-index:80000}
.chxCompareFigure{z-index:var(--compare-z)}
.chxCompareHeadBlock{z-index:90000}
.chxCompareLegCharts.raised,.chxCompareLegCharts.solo{top:auto;bottom:calc(var(--compare-scale-offset) + 10.5%)}
.chxCompareLegCharts{
  z-index:100000;width:calc(var(--compare-chart-secondary) * 2 + var(--compare-chart-primary) + 8px);
  grid-template-columns:var(--compare-chart-secondary) var(--compare-chart-primary) var(--compare-chart-secondary);gap:4px
}
.chxCompareLegCharts.count1{width:var(--compare-chart-primary);grid-template-columns:var(--compare-chart-primary)}
.chxCompareLegCharts.count2{width:calc(var(--compare-chart-primary) + var(--compare-chart-secondary) + 4px);grid-template-columns:var(--compare-chart-primary) var(--compare-chart-secondary)}
.chxCompareLegCharts.count3{width:calc(var(--compare-chart-secondary) * 2 + var(--compare-chart-primary) + 8px);grid-template-columns:var(--compare-chart-secondary) var(--compare-chart-primary) var(--compare-chart-secondary)}
.chxCompareLegCharts .chxCompareLegSort{width:var(--compare-chart-secondary);height:var(--compare-chart-secondary)}
.chxCompareLegCharts .chxCompareLegSort.primary{width:var(--compare-chart-primary);height:var(--compare-chart-primary)}
.chxCompareLegCharts .chxCompareLegSort small{font-size:7px}
.chxCompareLegCharts .chxCompareLegSort.primary small{font-size:9px}
.chxCompareLegCharts .chxCompareLegSort strong b{font-size:var(--compare-chart-secondary-text)}
.chxCompareLegCharts .chxCompareLegSort.primary strong b{font-size:var(--compare-chart-primary-text)}
.chxCompareLegCharts .chxCompareLegSort strong em{font-size:8px}
.chxCompareLegCharts .chxCompareLegSort.primary strong em{font-size:10px}
.chxCompareChartSpacer{width:var(--compare-chart-secondary)}

.chxCompareGridRanges{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:3px}
.chxCompareGridRange{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;min-width:0;margin:0;padding:0}
.chxCompareGridRange>span{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0}
.chxCompareGridRange b{overflow:hidden;color:#9bb4c0;font-size:7px;letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap}
.chxCompareGridRange output{flex:0 0 auto;color:var(--compare-cyan);font-size:9px;font-weight:1000;letter-spacing:.04em}
.chxCompareGridRange input{width:100%!important;height:15px!important;margin:0!important;accent-color:var(--compare-cyan)}

.chxCompareExportTools{
  position:absolute;z-index:24;right:calc(var(--compare-panel-width) + 18px);top:20px;
  display:flex;align-items:center;gap:8px;transition:right .28s cubic-bezier(.2,.78,.2,1);
}
.chxCompareExportTools label{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border:1px solid rgba(85,222,248,.27);
  color:#9eb7c2;background:rgba(3,17,26,.9);font-size:7px;font-weight:1000;letter-spacing:.075em;cursor:pointer;
}
.chxCompareExportTools input{width:14px;height:14px;margin:0;accent-color:var(--compare-cyan)}
.chxCompareExportTools button{
  height:38px;padding:0 15px;border:1px solid rgba(85,222,248,.55);color:#eafbff;
  background:linear-gradient(105deg,rgba(13,84,108,.94),rgba(4,29,43,.96));box-shadow:0 0 20px rgba(53,205,237,.12);
  font:inherit;font-size:8px;font-weight:1000;letter-spacing:.1em;cursor:pointer;
}
.chxCompareExportTools button:hover{border-color:#8cedff;box-shadow:0 0 25px rgba(53,205,237,.22)}
.chxCompareExportTools button:disabled{opacity:.65;cursor:wait}
.chxCompareExportLoading{
  position:absolute;z-index:300000;left:0;right:var(--compare-panel-width);top:0;bottom:0;
  display:flex;visibility:hidden;align-items:center;justify-content:center;flex-direction:column;gap:13px;
  color:#effcff;background:radial-gradient(circle at center,rgba(8,42,58,.91),rgba(1,8,14,.82) 46%,rgba(1,5,9,.9));
  opacity:0;pointer-events:none;backdrop-filter:blur(5px);transition:opacity .16s ease,visibility .16s ease;
}
.chxCompareExportLoading.show{visibility:visible;opacity:1;pointer-events:auto}
.chxCompareExportLoading i{
  width:78px;height:78px;border:5px solid rgba(85,222,248,.16);border-top-color:var(--compare-cyan);
  border-radius:50%;box-shadow:0 0 34px rgba(85,222,248,.24),inset 0 0 18px rgba(85,222,248,.08);
  animation:chxCompareExportSpin .8s linear infinite;
}
.chxCompareExportLoading strong{font-size:clamp(21px,2vw,34px);letter-spacing:.1em;text-shadow:0 0 24px rgba(85,222,248,.34)}
.chxCompareExportLoading span{color:#a8c4ce;font-size:11px;font-weight:800;letter-spacing:.08em}
@keyframes chxCompareExportSpin{to{transform:rotate(360deg)}}
.chxCompareScreen.exportCapture .chxCompareExportTools,
.chxCompareScreen.exportCapture .chxComparePanelToggle{display:none!important}
.chxCompareScreen.exportCharactersOnly .chxCompareHeader,
.chxCompareScreen.exportCharactersOnly .chxCompareHeadBlock,
.chxCompareScreen.exportCharactersOnly .chxCompareLegCharts{visibility:hidden!important}

.chxComparePresetPanel.chxComparePanelSection{border-bottom:0}
.chxComparePresetPanel.chxComparePanelSection:after{display:none}
.chxCompareRankingTop{padding-bottom:0;border-bottom:0}
.chxCompareRankingTop>.chxComparePanelLabel{font-size:9px;margin-bottom:10px}
.chxCompareRankingTopList>div{grid-template-columns:38px 57px minmax(0,1fr);min-height:62px;padding:5px 10px 5px 6px}
.chxCompareRankingTopList>div>b{width:30px;height:30px;font-size:13px}
.chxCompareRankingTopList>div>i{width:51px;height:51px}
.chxCompareRankingTopList>div span strong{font-size:16px}
.chxCompareRankingTopList>div span small{font-size:8px}
.chxCompareRankingTopList>div{
  width:calc(100% + 4px);min-height:68px;margin-left:-2px;padding-block:6px;
}
.chxCompareRankingTopList>div.hasCharts{grid-template-columns:38px 57px minmax(68px,1fr) minmax(64px,80px)}
.chxCompareRankingIdentity{min-width:0}
.chxCompareRankingChart{
  position:relative;z-index:2;min-width:0;padding:3px 0 3px 8px;border-left:1px solid rgba(85,222,248,.18);
  text-align:right;
}
.chxCompareRankingChart>strong{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;color:#fff!important;font-size:20px!important;line-height:1;text-shadow:0 0 12px rgba(85,222,248,.16)!important;white-space:nowrap}
.chxCompareRankingChart>strong em{color:#9bc8d3;font-size:7px;font-style:normal;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}
.chxCompareRankingChart>div{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:5px}
.chxCompareRankingTopList>div .chxCompareRankingChart>div>span{display:flex;min-width:0;align-items:baseline;gap:3px;color:#819da9;white-space:nowrap}
.chxCompareRankingChart>div i{overflow:hidden;max-width:31px;color:#5fbdcf;font-size:6px;font-style:normal;font-weight:1000;letter-spacing:.05em;text-overflow:ellipsis}
.chxCompareRankingChart>div b{color:#d8e9ee;font-size:9px;font-weight:1000}