:root { --paper:#f4f3ee; --ink:#181916; --muted:#767870; --line:#d7d7cf; --human:#91a79b; --armed:#a2b3a8; --wheeled:#b2bfb4; --bipedal:#c2cabf; --mono:ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; } a { color:inherit; text-decoration:none; }
.statistics-page { max-width:1600px; margin:0 auto; padding:0 18px 18px; }.topbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:var(--muted); font:10px var(--mono); letter-spacing:.08em; }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); letter-spacing:.14em; }.brand-mark { display:flex; align-items:end; gap:3px; height:16px; }.brand-mark i { display:block; width:4px; background:var(--ink); border-radius:1px; }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:16px}.nav-status { display:flex; align-items:center; gap:8px; }.nav-status span { width:6px; height:6px; border-radius:50%; background:#91c850; }.base-link { appearance:none; padding:0 0 3px;color:var(--ink);border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;letter-spacing:inherit;cursor:pointer }
.intro { padding:8vw 0 5vw; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0; color:var(--muted); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.eyebrow span { display:block; width:25px; height:1px; background:var(--ink); }.intro h1 { margin:24px 0 0; font-size:clamp(60px, 8.5vw, 132px); line-height:.86; letter-spacing:-.07em; }.intro h1 em { color:var(--armed); font-style:normal; }
.statistics-wall { position:relative; overflow:hidden; border:1px solid #c7c8c1; border-radius:24px; background:#d9dad4; box-shadow:0 20px 55px rgba(28,29,25,.08); }.wall-meta, .wall-footer { position:relative; z-index:8; min-height:42px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; background:var(--paper); color:var(--muted); font:10px var(--mono); letter-spacing:.08em; }.wall-footer { border-top:1px solid #c7c8c1; }.statistics-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:2px; background:var(--paper); }.stat-tile { position:relative; overflow:hidden; aspect-ratio:16 / 9; background:#9da09c; transform-origin:center; transition:transform 1.28s cubic-bezier(.2,.8,.2,1), opacity .85s ease; }.stat-tile video { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.82) brightness(.76); }.statistics-grid.is-preparing .stat-tile { transition:none; }.statistics-grid.is-core .stat-tile.ring { opacity:0; transform:scale(.78); }.statistics-grid.is-core .stat-tile.core { z-index:2; transform:translate3d(var(--start-x), var(--start-y), 0) scale(var(--start-scale)); }.statistics-grid.is-expanded .stat-tile { opacity:1; transform:none; }
.statistics-cover { position:absolute; z-index:6; inset:43px 0 41px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; gap:6vw; padding:4vw 7vw; background:rgba(22,23,20,.61); color:#fff; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }.statistics-wall.is-revealed .statistics-cover { opacity:0; transform:translateY(-16px); pointer-events:none; }.cover-kicker, .pyramid figcaption { margin:0 0 13px; color:rgba(255,255,255,.68); font:10px var(--mono); letter-spacing:.12em; }.cover-total .number { font-size:clamp(66px, 10vw, 152px); line-height:.8; letter-spacing:-.07em; }.cover-total .hours { margin-left:10px; color:var(--wheeled); font-size:clamp(28px,3.5vw,54px); font-weight:700; }.cover-total p:last-child { margin:17px 0 0; color:rgba(255,255,255,.9); font-size:15px; }
.pyramid { position:relative; width:min(100%,470px); height:350px; margin:0 0 0 auto; }.pyramid figcaption { position:relative; z-index:3; height:18px; margin:0 0 12px; color:rgba(255,255,255,.68); font:10px var(--mono); letter-spacing:.12em; }.pyramid-stage { position:relative; isolation:isolate; height:320px; perspective:900px; }.pyramid-art { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:0; transform:translateY(10px) rotateX(1.5deg); transform-origin:center bottom; }.statistics-cover.is-ready .pyramid-art { animation:pyramid-form-in .72s cubic-bezier(.2,.8,.2,1) forwards; }.pyramid-surface { stroke:rgba(255,255,255,.34); stroke-width:1.1; vector-effect:non-scaling-stroke; }.pyramid-depth { fill:#60756a; opacity:.72; }.block-bipedal .pyramid-depth { fill:#829187; }.block-wheeled .pyramid-depth { fill:#778a7e; }.block-armed .pyramid-depth { fill:#6b8074; }.block-human .pyramid-depth { fill:#5f7569; }.pyramid-highlight { fill:none; stroke:rgba(255,255,255,.58); stroke-width:1.25; stroke-linecap:round; vector-effect:non-scaling-stroke; }.pyramid-layer { position:absolute; z-index:1; left:50%; display:flex; align-items:center; justify-content:center; gap:var(--content-gap); height:22.5%; padding:0; color:#20211e; opacity:0; transform:translateX(-50%) translateY(16px) scaleX(.9); transform-origin:center bottom; }.statistics-cover.is-ready .pyramid-layer { animation:triangle-layer-in .58s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--delay); }.layer-name { overflow:visible; color:rgba(28,42,34,.76); font:650 var(--label-size)/1 Arial, Helvetica, sans-serif; letter-spacing:0; white-space:nowrap; }.layer-value { display:flex; align-items:center; gap:4px; color:#173625; white-space:nowrap; }.pyramid-layer strong { color:#143522; font:800 var(--value-size)/1 var(--mono); letter-spacing:-.03em; text-shadow:0 1px 0 rgba(255,255,255,.28); }.pyramid-layer b { color:rgba(20,53,34,.62); font:650 var(--unit-size)/1 var(--mono); }.pyramid-layer.bipedal { --label-size:12px; --value-size:22px; --unit-size:10px; --content-gap:12px; bottom:75%; width:52%; clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); }.pyramid-layer.wheeled { --label-size:14px; --value-size:28px; --unit-size:11px; --content-gap:14px; bottom:50%; width:68%; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }.pyramid-layer.armed { --label-size:17px; --value-size:35px; --unit-size:13px; --content-gap:16px; bottom:25%; width:84%; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); }.pyramid-layer.human { --label-size:20px; --value-size:42px; --unit-size:15px; --content-gap:18px; bottom:0; width:100%; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); } @keyframes pyramid-form-in { to { opacity:1; transform:translateY(0) rotateX(1.5deg); } } @keyframes triangle-layer-in { to { opacity:1; transform:translateX(-50%) translateY(0) scaleX(1); } }
.afterword { display:none; }
@media (max-width:1000px) { .statistics-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.statistics-cover { grid-template-columns:1fr; gap:35px; }.pyramid { margin:0; max-width:460px; } }
@media (max-width:800px) { .statistics-page { padding:0 14px; }.topbar { min-height:61px; }.nav-status { display:none; }.statistics-wall { border-radius:14px; }.statistics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.statistics-cover { inset:38px 0 38px; padding:28px; }.cover-total .number { font-size:68px; }.pyramid { height:290px; width:100%; max-width:350px; margin:0; }.pyramid-stage { height:260px; }.pyramid-layer.bipedal { --label-size:10px; --value-size:18px; --unit-size:8px; --content-gap:7px; }.pyramid-layer.wheeled { --label-size:12px; --value-size:23px; --unit-size:9px; --content-gap:9px; }.pyramid-layer.armed { --label-size:14px; --value-size:28px; --unit-size:11px; --content-gap:11px; }.pyramid-layer.human { --label-size:16px; --value-size:33px; --unit-size:12px; --content-gap:13px; }.wall-meta, .wall-footer { min-height:38px; padding:0 11px; font-size:8px; }.wall-meta span:last-child, .wall-footer span:first-child { display:none; }.afterword { display:block; padding-top:55px; }.afterword p:last-child { margin-top:24px; }.statistics-grid.is-core .stat-tile.core { transform:none; }.statistics-grid.is-core .stat-tile.ring { opacity:1; transform:none; }.statistics-cover { background:rgba(22,23,20,.66); } }
@media (min-width:601px) { .is-blog-embed .statistics-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }.is-blog-embed .statistics-cover { grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:24px;padding:28px 34px }.is-blog-embed .cover-total .number{font-size:72px}.is-blog-embed .pyramid{width:100%;height:280px;max-width:350px}.is-blog-embed .pyramid-stage{height:254px}.is-blog-embed .pyramid-layer.bipedal{--label-size:9px;--value-size:16px;--unit-size:8px;--content-gap:7px}.is-blog-embed .pyramid-layer.wheeled{--label-size:10px;--value-size:21px;--unit-size:9px;--content-gap:9px}.is-blog-embed .pyramid-layer.armed{--label-size:13px;--value-size:26px;--unit-size:10px;--content-gap:11px}.is-blog-embed .pyramid-layer.human{--label-size:15px;--value-size:31px;--unit-size:11px;--content-gap:13px} }
@media (max-width:600px) { .is-blog-embed .statistics-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.is-blog-embed .afterword{display:none} }
.is-blog-embed,.is-blog-embed body{overflow:hidden}.is-blog-embed .statistics-page{padding:0}.is-blog-embed .topbar{display:none}.is-blog-embed .statistics-wall{border:0;border-radius:0;box-shadow:none}