:root{font-family:"Avenir Next","PingFang SC",system-ui,sans-serif;color:#183b38;background:#f5f6f2;font-synthesis:none;font-variant-numeric:tabular-nums;--muted:#5c706b;--line:#dce3dc;--green:#146b56}*{box-sizing:border-box}body{margin:0}::selection{background:#c5e5b9}button,select,input{font:inherit}button,a,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,path:focus-visible{outline:3px solid #ba6728;outline-offset:4px}header{padding:26px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}.brand{font-size:21px;font-weight:650;text-decoration:none;color:inherit}.brand span{font-size:12px;display:block;font-weight:400;color:var(--muted);margin-top:4px}.date{font-size:13px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:22px 5% 24px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:34px;letter-spacing:-.035em;margin:0 0 12px;font-weight:600}p{line-height:1.7}.intro p{color:var(--muted);margin:0}button{cursor:pointer;border:1px solid #bdcfc4;border-radius:8px;background:white;color:var(--green);padding:11px 17px}.controls{margin:16px 0 24px;padding:12px 0;border-block:1px solid var(--line);display:flex;align-items:center;gap:30px}label{font-size:12px;color:var(--muted);display:grid;gap:9px}select{background:transparent;border:0;font-size:15px;color:#183b38;min-width:145px;padding:0 20px 0 0}select:disabled{opacity:.4}.unit{margin-left:auto;font-size:12px;color:var(--muted)}nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px;font-size:13px}nav button{padding:5px 9px;border:0;background:transparent}nav button:last-child{background:#dfeadf;font-weight:600}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,1fr);background:white;border-radius:16px;overflow:hidden}.visual{padding:28px 32px}.chart-title,.list-head{display:flex;align-items:center;justify-content:space-between;gap:16px}h2{font-size:19px;font-weight:600;margin:0}.chart-title span,.list-head span{color:var(--muted);font-size:12px}.chart-wrap{position:relative;max-width:540px;margin:auto}svg{display:block;width:100%;overflow:visible}.center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;gap:10px}.center span,.center small{font-size:12px;color:var(--muted)}.center strong{font-size:32px;font-weight:600;letter-spacing:-.03em}path{stroke:white;stroke-width:2;cursor:pointer;transition:filter .2s,opacity .2s;transform-origin:center}path:hover,path:focus{filter:brightness(1.13)}#chart{animation:appear .6s cubic-bezier(.16,1,.3,1)}@keyframes appear{from{clip-path:circle(10%)}to{clip-path:circle(100%)}}#hover{text-align:center;color:var(--muted);min-height:42px;font-size:13px}.ranking{padding:28px 28px 18px;border-left:1px solid var(--line)}input{margin:20px 0 10px;background:#f5f6f2;border:1px solid var(--line);border-radius:7px;width:100%;padding:12px;caret-color:var(--green)}#list{max-height:446px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b6c7ba transparent}.row{border:0;border-bottom:1px solid #eef1ec;border-radius:0;padding:15px 2px;display:grid;grid-template-columns:10px 1fr auto;gap:12px;text-align:left;width:100%;color:inherit}.row:hover{background:#f4f7f0}.dot{width:8px;height:8px;border-radius:50%;margin-top:5px}.name{font-size:14px;display:block}.sub{display:block;margin-top:5px;font-size:12px;color:var(--muted)}.value{text-align:right;font-size:14px}.value small{display:block;font-size:12px;margin-top:5px;color:var(--muted)}.footnote{font-size:12px;color:var(--muted);margin:18px 0 0}.notice,#reconciliation{font-size:12px;line-height:1.7;color:#765228}#reconciliation{margin:20px 0;color:var(--muted)}details{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}summary{cursor:pointer;font-size:14px}.notes{font-size:13px;color:var(--muted);padding:10px 0}li{margin:8px 0}#tree{columns:3;column-gap:30px}#tree details{margin:5px 0;padding:6px 0;break-inside:avoid;border:0}#tree summary{font-size:13px}#tree ul{padding-left:18px}footer{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);margin-top:30px;line-height:1.7}@media(max-width:800px){main{padding:14px 5% 24px}h1{font-size:26px}.intro{align-items:start}.intro button{font-size:12px;white-space:nowrap}.date span{display:none}.controls{gap:16px;flex-wrap:wrap}select{min-width:125px;font-size:13px}.unit{width:100%;margin:0}.workspace{grid-template-columns:1fr}.ranking{border:0;border-top:1px solid var(--line)}.visual{padding:24px 16px}.chart-wrap{max-width:430px}.center strong{font-size:28px}#tree{columns:1}footer{display:block}footer span{display:block}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Frosted glass pie, with the summary below the figure. */
:root{background:#f4f5f8;color:#273444;--muted:#647184;--line:#e0e5ec;--green:#476a96}
.workspace{background:#fcfdff}.visual{background:radial-gradient(ellipse at 22% 32%,#edf1fa 0,transparent 55%),radial-gradient(ellipse at 85% 65%,#f4eaf1 0,transparent 48%),#f9fbfe}
.chart-wrap{max-width:510px}.center{position:static;gap:7px;margin:-4px 0 24px}.center strong{font-size:34px}.slice{stroke:#fff;stroke-opacity:.8;stroke-width:2;stroke-linejoin:round;transition:filter .25s,stroke-opacity .25s}.slice:hover,.slice:focus{filter:brightness(1.07);stroke-opacity:1}.slice-labels{pointer-events:none;fill:#26384c;font-size:14px;font-weight:600;letter-spacing:-.02em}.glass-light{mix-blend-mode:soft-light}#hover{min-height:25px}nav button:last-child{background:#e5eaf3}button:hover{border-color:#8ca2bc}.row:hover{background:#f0f3f9}.ranking input{background:#f2f4f8}.brand{color:#273444}::selection{background:#cfddf1}
@media(max-width:800px){.slice-labels{font-size:15px}.chart-wrap{max-width:460px}.center{margin:0 0 24px}.center strong{font-size:30px}}
h1{font-size:30px}.report-date{font-size:17px;font-weight:450;color:var(--muted);display:inline-block;margin-left:12px;letter-spacing:0;white-space:nowrap}.board-tabs{display:flex;gap:6px;margin:24px 0 20px;background:#e9edf4;padding:5px;width:fit-content;border-radius:10px}.board-tabs button{border:0;background:transparent;color:#5d6c7e;padding:10px 20px}.board-tabs button[aria-pressed=true]{background:white;color:#263e5b;box-shadow:0 3px 8px #40516c12}.availability{font-size:13px;color:#596b82;background:#e9eff7;padding:12px 16px;border-radius:8px;margin-bottom:20px}.slice{stroke-width:1.25;stroke-opacity:.65}.glass-light{mix-blend-mode:normal}.visual{background:radial-gradient(ellipse at 25% 20%,#e5eefb 0,transparent 60%),radial-gradient(ellipse at 80% 80%,#f2eaf6 0,transparent 60%),#f8faff}.chart-wrap{isolation:isolate}.controls{margin-bottom:16px}@media(max-width:800px){h1{font-size:25px}.report-date{display:block;margin:4px 0 0;font-size:15px}.intro{align-items:center}.board-tabs{width:100%}.board-tabs button{flex:1;padding:10px 12px}}
.chart-wrap{max-width:680px}.outer-label{font-size:13px;font-weight:550;letter-spacing:-.025em}@media(max-width:800px){.chart-wrap{max-width:580px;margin-left:-10px;margin-right:-10px}.outer-label{font-size:14px}}
.controls{gap:16px;align-items:flex-end;flex-wrap:wrap}.controls .board-tabs{margin:0 0 1px auto;width:auto;flex-shrink:0}.controls .unit{margin-left:0;align-self:center}.filter-dropdown{position:relative;min-width:155px;display:flex;flex-direction:column;gap:9px}.filter-caption{font-size:12px;color:var(--muted)}.filter-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;border:1px solid #d1dbe7;border-radius:8px;background:#fff;color:#34465e;font-size:14px;white-space:nowrap}.filter-trigger:after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-4px 2px 0 0}.filter-trigger:hover{background:#f5f8fd}.filter-trigger:disabled{opacity:.45;cursor:default}.filter-menu{position:absolute;top:100%;left:0;min-width:100%;padding:5px;margin-top:7px;border-radius:10px;background:white;box-shadow:0 8px 30px #263f6026;z-index:30}.filter-menu[hidden]{display:none}.filter-menu button{display:block;width:100%;border:0;border-radius:6px;text-align:left;white-space:nowrap;padding:10px 12px;font-size:14px;color:#34465e}.filter-menu button:hover,.filter-menu button:focus-visible{background:#edf2f9}.filter-menu button[aria-selected=true]{background:#e6edf7;font-weight:600}.filter-menu button:disabled{opacity:.4;cursor:default}.chart-title #count{margin-left:auto}.expand-chart{padding:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-color:#d1dbe7;background:#ffffffc9}.expand-chart svg{width:20px;height:20px}.chart-expanded{overflow:hidden}.visual.is-expanded,.visual:fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000;overflow:auto;padding:24px 40px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 25% 20%,#e5eefb 0,transparent 60%),radial-gradient(ellipse at 80% 80%,#f2eaf6 0,transparent 60%),#f8faff}.visual.is-expanded .chart-title{width:100%;flex-shrink:0}.visual.is-expanded .chart-wrap{width:min(calc(100vw - 100px),calc((100dvh - 210px)*1.3));max-width:none;margin:auto;flex-shrink:0}.visual.is-expanded .center{margin:0 0 12px;gap:4px}.visual.is-expanded .center strong{font-size:28px}.visual.is-expanded #hover{min-height:20px}.visual.is-expanded .notice{margin:0}.visual.is-expanded .expand-chart{display:inline-flex}@media(orientation:portrait){.expand-chart{display:none}}@media(max-width:1000px){.controls{gap:16px 12px}.controls .board-tabs{margin:0}.controls .unit{margin-left:auto}.filter-dropdown{min-width:145px}}@media(max-width:600px){.filter-dropdown{flex:1;min-width:130px}.controls .board-tabs{width:100%;order:4}.controls .unit{order:5}.visual.is-expanded{padding:18px}.visual.is-expanded .chart-wrap{width:min(calc(100vw - 40px),calc((100dvh - 200px)*1.3))}}
.expand-chart path{stroke:currentColor;stroke-width:1.6;fill:none;cursor:inherit}.expand-chart:hover path{filter:none}
/* Presentation uses the full viewport, with a compact readout below the chart. */
.visual.is-expanded{padding:12px 24px;gap:0;overflow:hidden}.visual.is-expanded .chart-title{height:38px;min-height:38px}.visual.is-expanded .chart-wrap{width:min(calc(100vw - 48px),calc((100dvh - 138px)*1.3));height:auto;margin:0 auto;min-height:0}.visual.is-expanded .center{margin:0 0 2px;gap:2px}.visual.is-expanded .center span,.visual.is-expanded .center small{font-size:11px}.visual.is-expanded .center strong{font-size:25px}.visual.is-expanded #hover{font-size:12px;min-height:18px;margin:0}.visual.is-expanded .notice{font-size:11px;line-height:1.3}.visual.is-expanded .chart-wrap svg{animation:none}
.visual.is-expanded{padding:8px 16px}.visual.is-expanded .chart-title{height:34px;min-height:34px}.visual.is-expanded .chart-wrap{width:min(calc(100vw - 32px),calc((100dvh - 114px)*1.41818))}.visual.is-expanded .center strong{font-size:23px}.visual.is-expanded .center{gap:0}.visual.is-expanded #hover{font-size:11px;min-height:16px}
.controls{justify-content:flex-start;column-gap:16px}.controls .board-tabs{margin:0 0 1px 0;flex-shrink:0}.controls .unit{margin-left:0;align-self:flex-end;line-height:44px}.chart-note{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0;line-height:1.5}.chart-readout{position:relative}.visual.is-expanded .chart-wrap{width:min(calc(100vw - 32px),calc((100dvh - 54px)*1.41818))}.visual.is-expanded .chart-readout{position:absolute;bottom:48px;right:28px;max-width:320px;text-align:right;z-index:2;pointer-events:none}.visual.is-expanded .center{align-items:flex-end;margin:0 0 8px}.visual.is-expanded .center strong{font-size:27px}.visual.is-expanded #hover{text-align:right;min-height:18px;overflow-wrap:anywhere;line-height:1.5}.visual.is-expanded .chart-note{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;font-size:11px;white-space:nowrap}.visual.is-expanded .notice{max-width:280px;text-align:right}.intro h1{margin-bottom:0}.intro #reset{padding-block:7px}@media(max-width:1000px){.controls .unit{margin-left:0}.visual.is-expanded .chart-readout{right:16px;bottom:35px;max-width:250px}.visual.is-expanded .center strong{font-size:23px}}@media(max-width:600px){.controls .board-tabs{margin-left:0}.controls .unit{line-height:1.5}.visual.is-expanded .chart-readout{max-width:210px}.visual.is-expanded .center strong{font-size:20px}}

.chart-title{gap:10px}
.chart-title #count{white-space:nowrap}
.chart-path{display:flex;align-items:center;gap:.35em;flex:1;min-width:0;overflow:hidden;white-space:nowrap;margin:0;font-size:19px;flex-wrap:nowrap}
.chart-path button,.chart-path button:last-child{flex:none;padding:0;border:0;background:transparent;color:var(--green);font-size:inherit;line-height:1.5;border-radius:2px}
.chart-path button[aria-current]{color:inherit;font-weight:600;cursor:default}
.chart-path button:not([aria-current]):hover{text-decoration:underline}
.chart-path span{font-size:inherit;flex:none}
.chart-wrap{max-width:720px}
.visual .center{margin-bottom:0}
#hover:empty{display:none}
.visual.is-expanded .chart-wrap{width:min(calc(100vw - 32px),calc((100dvh - 45px)*1.41818))}
.visual.is-expanded .chart-readout{bottom:24px}
@media(min-width:801px){.workspace{grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr)}.visual:not(.is-expanded){padding-inline:24px}}

@media (orientation: portrait) {
  .board-tabs button { padding-block: 8px; }
}

.intro-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}
.creator-credit {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
@media (orientation: landscape) {
  main {
    max-width: none;
    padding-inline: clamp(12px, 1.4vw, 28px);
  }
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 5px;
}
.workspace {
  flex: 1 0 auto;
}
.report-cutoff {
  display: block;
  margin: 4px 0 0;
  padding-inline: 6px;
  text-align: right;
  font-size: 10px;
  line-height: 1.25;
}

@media (orientation: landscape) {
  .visual:not(.is-expanded) {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
  }
  .visual:not(.is-expanded) .chart-wrap {
    width: 100%;
    max-width: clamp(572px, calc((100dvh - 200px) * 1.69), 1196px);
    margin: auto;
  }
  .visual .chart-readout {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 2;
    max-width: min(48%, 280px);
    text-align: right;
    pointer-events: none;
  }
  .visual .chart-readout .center {
    align-items: flex-end;
    gap: 2px;
    margin: 0;
    line-height: 1.15;
  }
  .visual .chart-readout .center strong {
    font-size: clamp(16px, 2vw, 25px);
  }
  .visual .chart-readout #hover {
    min-height: 0;
    margin: 4px 0 0;
    text-align: right;
    line-height: 1.2;
  }
}

@media (orientation: landscape) {
  #list {
    max-height: none;
  }
}
@media (orientation: landscape) and (min-width: 801px) {
  .workspace {
    grid-template-columns: minmax(0, 3fr) minmax(310px, 1fr);
  }
  .ranking {
    display: flex;
    flex-direction: column;
  }
  .ranking #list {
    flex: 1 1 0;
    min-height: 0;
    contain: size;
  }
}

@media (orientation: landscape) {
  main {
    height: 100dvh;
    padding-top: 10px;
  }
  .controls {
    margin-block: 8px;
    padding-block: 6px;
  }
  .workspace {
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: minmax(0, 3fr) minmax(clamp(150px, 28vw, 310px), 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .visual:not(.is-expanded) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 8px clamp(8px, 1.2vw, 20px) 2px;
  }
  .visual:not(.is-expanded) .chart-title {
    grid-column: 1 / -1;
  }
  .visual:not(.is-expanded) .chart-wrap {
    container-type: size;
    display: grid;
    place-items: center;
    height: 100%;
    max-width: none;
    margin: 0;
  }
  .visual:not(.is-expanded) #chart {
    display: block;
    width: min(100%, calc(100cqh * 780 / 517));
    height: auto;
    margin-inline: auto;
  }
  .visual:not(.is-expanded) .chart-readout {
    right: clamp(8px, 1.2vw, 20px);
    bottom: clamp(10px, 3dvh, 28px);
    max-width: min(32%, 240px);
    overflow-wrap: anywhere;
  }
  .visual:not(.is-expanded) .chart-readout .center strong {
    font-size: clamp(13px, 1.65vw, 24px);
  }
  .ranking {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px clamp(8px, 1.2vw, 20px) 8px;
  }
  .ranking #list {
    flex: 1 1 0;
    min-height: 0;
    contain: size;
  }
}