:root{font-family:Inter,Helvetica Neue,PingFang SC,sans-serif;color:#17233f;background:#edf1f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,select,input{font:inherit}main{max-width:1280px;margin:auto;padding:48px clamp(20px,5vw,72px) 64px}header{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:30px;border-bottom:2px solid #17233f}.kicker{font:700 11px/1 monospace;letter-spacing:.18em;color:#7c879f}h1{margin:10px 0 8px;font-size:clamp(40px,6vw,76px);line-height:.9;letter-spacing:-.06em}.lead{margin:0;color:#6c7892}.yearmark{font:800 clamp(40px,7vw,86px)/.8 monospace;color:#c8d0df;letter-spacing:-.08em;display:grid;text-align:right}.yearmark small{font:500 11px sans-serif;letter-spacing:.15em;color:#77829b;margin-top:15px}.controls{display:flex;align-items:end;gap:24px;padding:22px 0}.controls label{font-size:11px;font-weight:700;letter-spacing:.08em;display:grid;gap:7px}.controls select{min-width:130px;background:transparent;border:0;border-bottom:1px solid #8792a8;padding:7px 2px;color:#17233f;font-weight:700}.tabs{display:flex;background:#dce2ed;padding:3px}.tabs button{border:0;background:transparent;padding:7px 13px;font:600 12px monospace;color:#68748d;cursor:pointer}.tabs button.on{background:#fff;color:#173f95;box-shadow:0 2px 8px #28406a18}.switch{margin-left:auto!important;display:flex!important;align-items:center;gap:9px!important;cursor:pointer}.switch input{display:none}.switch span{width:38px;height:20px;background:#bcc5d5;border-radius:20px;position:relative}.switch span:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+span{background:#f15162}.switch input:checked+span:after{transform:translate(18px)}.canvas{background:#fff;box-shadow:0 20px 50px #192d5a14;padding:30px clamp(14px,4vw,50px) 24px}.chart-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:20px}.chart-head>div{display:flex;align-items:baseline;gap:8px}.chart-head>div:last-child{justify-content:flex-end}.chart-head b{font-size:16px}.chart-head span{font:600 10px monospace;color:#97a1b4;letter-spacing:.12em}.chart-head p{font-size:12px;color:#7e899f}.scale{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;font:10px monospace;color:#97a1b4;text-align:center;margin:0 0 8px}.scale span:first-child{text-align:left}.scale span:last-child{text-align:right}.pyramid{position:relative}.bar-row{display:grid;grid-template-columns:1fr 58px 1fr;align-items:center;min-height:25px}.half{height:18px;position:relative;background-image:linear-gradient(to right,#eef1f6 1px,transparent 1px);background-size:25% 100%}.half.left{display:flex;justify-content:flex-end;background-position:right}.bar{height:100%;transition:width .35s}.male{background:#224bb6}.female{background:#ef5367}.half:hover .bar{filter:brightness(1.22);outline:2px solid #17233f;outline-offset:1px}.age{text-align:center;font:600 10px monospace;color:#69748a}.outline{position:absolute;top:2px;height:14px;border:2px solid #f3ac29;z-index:2;pointer-events:none}.male-o{right:0;border-right:0}.female-o{left:0;border-left:0}.tooltip{position:absolute;z-index:5;left:50%;top:34%;transform:translate(-50%,-50%);width:230px;background:#152342;color:#fff;padding:16px;display:grid;gap:6px;box-shadow:0 12px 30px #101a34aa;pointer-events:none}.tooltip strong{font-size:13px;margin-bottom:4px}.tooltip span{font-size:12px;color:#d7deee}.tooltip em{font-size:11px;color:#f8b84e;font-style:normal;border-top:1px solid #ffffff22;padding-top:7px}.note{font-size:10px;color:#9aa3b4;text-align:center;margin:20px 0 0}aside{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #cbd2df;border-top:0}aside div{padding:20px;display:flex;justify-content:space-between;align-items:baseline;border-right:1px solid #cbd2df}aside div:last-child{border:0}aside span{font-size:11px;color:#738098}aside b{font:700 22px monospace;color:#223d78}@media(max-width:720px){main{padding-top:28px}.yearmark{display:none}.controls{display:grid;grid-template-columns:1fr 1fr}.switch{margin-left:0!important}.chart-head{grid-template-columns:1fr 1fr}.chart-head p{display:none}.bar-row{grid-template-columns:1fr 46px 1fr}.canvas{padding-inline:10px}.half{height:15px}aside{grid-template-columns:1fr}aside div{border-right:0;border-bottom:1px solid #cbd2df}}