.hl-hero{padding:72px 0 24px;position:relative}
.hl-hero::before{content:"";position:absolute;inset:-120px 0 auto;height:520px;background:radial-gradient(ellipse 55% 60% at 50% 30%,rgba(255,95,168,.2),transparent 70%);z-index:-1}
.hl-hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1;letter-spacing:-.05em;font-weight:700;margin:20px 0 16px}
.hl-hero .lead{color:var(--mut);font-size:1.15rem;line-height:1.6;max-width:34em}
.hl-body{padding:24px 0 72px}
.hl-tools{display:flex;gap:10px;margin-bottom:14px}
.hl-search{flex:1;display:flex;align-items:center;gap:10px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.04);color:var(--mut)}
.hl-search:focus-within{border-color:var(--a)}
.hl-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:500 .95rem Inter,sans-serif;padding:14px 0}
.hl-note{margin-top:18px;font-size:.82rem;color:var(--mut2);line-height:1.6}
.hl-note code{word-break:break-all;color:var(--mut)}
#rows .board-r{transition:background .15s}
#rows .board-r:hover{background:rgba(255,255,255,.035)}
.board-r .ad a:hover{color:var(--a)}
.board-r .bar{grid-column:2/-1;height:4px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:-6px}
.board-r .bar i{display:block;height:100%;background:var(--grad)}
.rk.top{color:var(--a2);font-weight:700}
.chips.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.chips.five{grid-template-columns:repeat(3,1fr)}}
/* supply distribution donut */
.dist{margin-bottom:26px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03);padding:22px 24px}
.dist-head h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;margin-bottom:4px}
.dist-head p{color:var(--mut);font-size:.88rem;margin-bottom:20px}
.dist-grid{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.donut-wrap{position:relative;width:260px;height:260px;flex:0 0 auto;margin:0 auto}
#donut{width:100%;height:100%;display:block}
.donut-seg{cursor:pointer;stroke:#120a1c;stroke-width:2;transition:opacity .15s}
.donut-center{fill:#fff;font:700 21px Inter,sans-serif;text-anchor:middle}
.donut-center-sub{fill:var(--mut);font:500 11px Inter,sans-serif;text-anchor:middle;letter-spacing:.08em;text-transform:uppercase}
.donut-tip{position:absolute;pointer-events:none;background:#1b1128;border:1px solid var(--line2);border-radius:12px;padding:10px 13px;font-size:.82rem;color:var(--txt);box-shadow:0 8px 30px rgba(0,0,0,.55);z-index:5;white-space:nowrap;transform:translate(-50%,-118%)}
.donut-tip b{display:block;margin-bottom:2px}
.donut-tip .tmut{color:var(--mut);font-size:.74rem}
.donut-legend{list-style:none;margin:0;padding:0;flex:1 1 230px;display:flex;flex-direction:column;gap:9px;min-width:210px}
.donut-legend li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--txt)}
.donut-legend .sw{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.donut-legend .lg-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-legend .lg-lab a{color:var(--txt);text-decoration:none}
.donut-legend .lg-lab a:hover{color:var(--a)}
.donut-legend .lg-lab .tmut{color:var(--mut2);font-size:.74rem}
.donut-legend .lg-pct{color:var(--mut);font-variant-numeric:tabular-nums;flex:0 0 auto}
@media(max-width:600px){.dist{padding:18px}.dist-grid{flex-direction:column}.donut-legend{width:100%}}
@media(max-width:600px){.hl-hero{padding-top:44px}.board-r .ad{font-size:.8rem}}
.hl-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;font-size:clamp(3rem,8vw,6rem)}
@media(max-width:600px){.hl-bar,.hl-tools{flex-wrap:wrap}.hl-search{flex:1 1 100%;min-height:48px}}
