#cg-night-guide-root .cg-night-compare{--compare-position:50%;margin:clamp(30px,5vw,54px) 0;padding:clamp(18px,4vw,32px);border:1px solid rgb(164 193 211 / .52);border-radius:24px;background:#eef5f7;color:#13243b;box-shadow:0 18px 45px rgb(16 31 53 / .09);overflow:hidden}
#cg-night-guide-root .cg-night-compare *{box-sizing:border-box}
#cg-night-guide-root .cg-night-compare__intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(18px,4vw,42px);align-items:end;margin-bottom:20px}
#cg-night-guide-root .cg-night-compare__intro>*{min-width:0}
#cg-night-guide-root .cg-night-compare__kicker{display:block;margin-bottom:7px;color:#28526d;font-size:12px;font-weight:700;line-height:1.4}
#cg-night-guide-root .cg-night-compare h3{margin:0;color:#13243b;font-size:clamp(25px,4vw,38px);line-height:1.08;letter-spacing:-.035em}
#cg-night-guide-root .cg-night-compare__intro p{max-width:54ch;margin:0;color:#455e70;font-size:15px;line-height:1.65}
#cg-night-guide-root .cg-night-compare__stage{position:relative;isolation:isolate;aspect-ratio:16/9;min-height:260px;border-radius:16px;background:#101f35;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none}
#cg-night-guide-root .cg-night-compare__layer{position:absolute;inset:0}
#cg-night-guide-root .cg-night-compare__layer img{display:block;width:100%;height:100%;object-fit:cover}
#cg-night-guide-root .cg-night-compare__layer--glass{z-index:2;clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}
#cg-night-guide-root .cg-night-compare__layer--glass::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 7%,rgb(245 250 255 / .34) 26%,transparent 43%),radial-gradient(circle at 28% 40%,rgb(255 255 255 / .38),transparent 27%);mix-blend-mode:screen;pointer-events:none}
#cg-night-guide-root .cg-night-compare__label{position:absolute;top:14px;z-index:5;max-width:calc(50% - 24px);padding:7px 10px;border-radius:999px;background:rgb(10 25 46 / .82);color:#fff;font-size:11px;font-weight:700;line-height:1.25;box-shadow:0 5px 18px rgb(0 0 0 / .16)}
#cg-night-guide-root .cg-night-compare__label--glass{left:14px}
#cg-night-guide-root .cg-night-compare__label--outside{right:14px}
#cg-night-guide-root .cg-night-compare__divider{position:absolute;top:0;bottom:0;left:var(--compare-position);z-index:4;width:3px;background:#fff;box-shadow:0 0 0 1px rgb(16 31 53 / .18),0 0 20px rgb(0 0 0 / .24);transform:translateX(-50%);pointer-events:none}
#cg-night-guide-root .cg-night-compare__divider::after{content:"↔";position:absolute;left:50%;top:50%;display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:#173f5f;color:#fff;font-size:18px;line-height:1;box-shadow:0 8px 24px rgb(0 0 0 / .24);transform:translate(-50%,-50%)}
#cg-night-guide-root .cg-night-compare__controls{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) auto;gap:16px;align-items:center;margin-top:18px}
#cg-night-guide-root .cg-night-compare__controls label{min-width:0;color:#173f5f;font-size:13px;font-weight:700;line-height:1.4}
#cg-night-guide-root .cg-night-compare__controls input[type=range]{width:100%;min-width:0;height:44px;margin:0;accent-color:#245f87;cursor:ew-resize}
#cg-night-guide-root .cg-night-compare__controls input[type=range]:focus-visible{outline:3px solid #f4bd74;outline-offset:4px;border-radius:999px}
#cg-night-guide-root .cg-night-compare__controls output{min-width:54px;color:#28526d;font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
#cg-night-guide-root .cg-night-compare__note{margin:12px 0 0;color:#526a7a;font-size:12px;line-height:1.55}
@media(max-width:680px){
  #cg-night-guide-root .cg-night-compare{padding:16px;border-radius:18px}
  #cg-night-guide-root .cg-night-compare__intro,#cg-night-guide-root .cg-night-compare__controls{grid-template-columns:minmax(0,1fr)}
  #cg-night-guide-root .cg-night-compare__intro{align-items:start}
  #cg-night-guide-root .cg-night-compare__stage{min-height:220px;aspect-ratio:4/3}
  #cg-night-guide-root .cg-night-compare__label{top:10px;max-width:calc(50% - 16px);padding:6px 8px;font-size:9px}
  #cg-night-guide-root .cg-night-compare__label--glass{left:10px}
  #cg-night-guide-root .cg-night-compare__label--outside{right:10px}
  #cg-night-guide-root .cg-night-compare__controls{gap:4px}
  #cg-night-guide-root .cg-night-compare__controls output{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  #cg-night-guide-root .cg-night-compare__layer--glass,#cg-night-guide-root .cg-night-compare__divider{transition:none!important}
}