:root { --ink:#19221f; --paper:#f5f1e8; --orange:#ff5a36; --line:#d8d3c8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.75; }
a { color:inherit; }
.hero { min-height:92vh; padding:28px clamp(24px,6vw,88px) 60px; color:#fffaf0; background:var(--ink); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.hero::after { content:"0.98"; position:absolute; right:-.04em; bottom:-.48em; font:900 clamp(170px,34vw,510px)/1 Arial,sans-serif; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); pointer-events:none; }
.nav { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.nav a { text-decoration:none; font-size:13px; letter-spacing:.08em; }
.brand { font:700 18px/1 "DM Sans",sans-serif; letter-spacing:.16em; }
.hero-copy { margin:auto 0; max-width:940px; position:relative; z-index:1; }
.eyebrow { margin:0 0 20px; font:700 12px/1 "DM Sans",sans-serif; letter-spacing:.22em; color:var(--orange); }
h1 { margin:0; font-size:clamp(46px,8vw,112px); line-height:1.14; letter-spacing:-.055em; }
h1 em { color:var(--orange); font-family:"DM Sans",sans-serif; font-style:normal; }
.lead { margin:32px 0 0; font-size:clamp(16px,2vw,21px); color:#c7cfcb; }
.hero-source { margin:22px 0 0; font-size:11px; line-height:1.7; color:#929c97; }
.hero-source a { color:#dce3df; text-underline-offset:3px; }
.scroll-hint { position:absolute; bottom:32px; right:clamp(24px,6vw,88px); font:500 10px/1 "DM Sans"; letter-spacing:.2em; display:flex; align-items:center; gap:12px; }
.scroll-hint span { display:block; width:44px; height:1px; background:var(--orange); }
.overview { max-width:1180px; margin:auto; padding:clamp(80px,11vw,150px) clamp(24px,5vw,64px); }
.section-heading { max-width:690px; }
.section-heading h2 { margin:0 0 24px; font-size:clamp(32px,5vw,62px); line-height:1.3; letter-spacing:-.04em; }
.section-heading>p:last-child { color:#68706c; }
.chart-layout { display:grid; grid-template-columns:minmax(300px,520px) 1fr; align-items:center; gap:clamp(40px,8vw,100px); margin-top:70px; }
.chart-wrap { position:relative; width:100%; aspect-ratio:1; }
#pie-chart { display:block; width:100%; filter:drop-shadow(0 22px 28px rgba(40,34,25,.12)); transform:rotate(-.2deg); }
#pie-chart path { stroke:var(--paper); stroke-width:2; transition:opacity .2s, transform .2s; transform-origin:center; }
#pie-chart path:hover,#pie-chart path:focus { opacity:.82; outline:none; transform:scale(1.015); }
.chart-center { position:absolute; inset:31%; border-radius:50%; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--paper); }
.chart-center strong { font:700 clamp(22px,4vw,40px)/1 "DM Sans"; letter-spacing:-.04em; }
.chart-center span { margin-top:10px; font-size:12px; color:#777; }
.legend { margin:0; padding:0; list-style:none; }
.legend li { display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.legend strong { font-family:"DM Sans"; font-size:17px; }
.legend-value { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.legend-value small { margin-top:3px; color:#777; font-size:10px; font-variant-numeric:tabular-nums; }
.chart-note { color:#777; font-size:12px; margin-top:28px; }
.facts { background:var(--orange); color:#fff; display:grid; grid-template-columns:repeat(3,1fr); padding:0 clamp(24px,5vw,80px); }
.facts article { padding:72px clamp(12px,3vw,44px); border-right:1px solid rgba(255,255,255,.3); }
.facts article:last-child { border:0; }
.facts article>span { font:700 11px "DM Sans"; letter-spacing:.15em; }
.facts strong { display:block; margin:35px 0 10px; font:700 clamp(48px,7vw,90px)/1 "DM Sans"; letter-spacing:-.06em; }
.facts small { font-size:.3em; margin-left:5px; }
.facts h3 { margin:20px 0 12px; font-size:18px; }
.facts p { margin:0; color:#ffe4dc; font-size:13px; }
footer { padding:64px clamp(24px,6vw,88px); background:var(--ink); color:#c7cfcb; display:grid; grid-template-columns:1fr 1fr; gap:60px; font-size:13px; }
footer .brand { color:#fff; }
.open-source { margin-top:32px; font-size:12px; }
.open-source a { color:#fff; text-underline-offset:4px; }
.source strong { color:#fff; }
.source a { color:#fff; text-underline-offset:4px; }
.date { font-size:11px; color:#858d89; }
.mobile-break { display:none; }
@media (max-width:760px) {
  .hero { min-height:82vh; }
  .mobile-break { display:block; }
  .chart-layout { grid-template-columns:1fr; margin-top:45px; }
  .chart-wrap { max-width:480px; margin:auto; }
  .facts { grid-template-columns:1fr; }
  .facts article { border-right:0; border-bottom:1px solid rgba(255,255,255,.3); padding:48px 12px; }
  .facts strong { margin-top:24px; }
  footer { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }