@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/vazirmatn.woff2) format("woff2")}
:root{--ink:#0e0e0d;--mute:#5f5c56;--line:#e3e1dc;--bar:#2e7d14;--bg:#fff;--m-lo:#dcefcf;--m-hi:#1f5a0c;--m-none:#e2e0db}
/* Dark: the Night Shift palette. The map ramp flips so "more" stays the stronger colour. */
.dark{--ink:#f3f1ec;--mute:#aaa69d;--line:#2c2b28;--bar:#5fcc33;--bg:#0e0e0d;--m-lo:#38552b;--m-hi:#8be05f;--m-none:#262624}
@media (prefers-color-scheme:dark){:root:not(.light){--ink:#f3f1ec;--mute:#aaa69d;--line:#2c2b28;--bar:#5fcc33;--bg:#0e0e0d;--m-lo:#38552b;--m-hi:#8be05f;--m-none:#262624}}
.dark:not(.embed){color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not(.light):not(.embed){color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[dir=rtl] body{font-family:Vazirmatn,Inter,system-ui,sans-serif}
a{color:inherit;text-underline-offset:2px}
.page{max-width:720px;margin:0 auto;padding:24px 16px 64px}
.c-nav{display:flex;justify-content:space-between;font-size:13px;margin-bottom:40px}
.c-nav a{color:var(--mute)}
.chart{margin:0}
.c-title{font-size:21px;line-height:1.25;font-weight:700;margin:0 0 6px;text-wrap:balance}
.c-intro{color:var(--mute);font-size:14px;margin:0 0 18px;max-width:60ch}
.c-body{margin-bottom:14px}
.c-notes{font-size:12px;font-style:italic;color:var(--mute);margin:0 0 4px}
.c-foot{font-size:12px;color:var(--mute)}

/* Bars: value sits after the bar, so short bars stay readable. */
.bars{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;align-items:center;font-size:13px}
.b-row{display:contents}
.b-track{display:flex;align-items:center;gap:6px}
.b-bar{height:22px;background:var(--bar);width:calc((100% - 4.5em) * var(--w));min-width:2px}
.b-val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tbl th{text-align:start;font-weight:700;border-bottom:2px solid var(--ink);padding:6px 0;padding-inline-end:8px}
.tbl td{border-bottom:1px solid var(--line);padding:8px 0;padding-inline-end:8px}
.tbl .n{text-align:end;padding-inline:8px 0}

.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-bottom:6px}
.legend i{width:120px;height:10px;background:linear-gradient(90deg,var(--m-lo),var(--m-hi))!important}
.c-map{position:relative}
.map{display:block;width:100%;height:auto}
.map path{stroke:var(--bg);stroke-width:1}
@supports (fill:color-mix(in srgb,red,blue)){.map path{fill:color-mix(in srgb,var(--m-hi) calc(var(--t) * 100%),var(--m-lo))}.map path.none{fill:var(--m-none)}}
.map path:hover{stroke:var(--ink);stroke-width:1.5}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:4px 8px;border-radius:3px;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.c-tools{margin-top:48px;border-top:1px solid var(--line);padding-top:24px;font-size:14px}
.c-tools h2{font-size:16px;margin:0 0 4px}
.c-tools p{margin:0 0 12px}
.c-tools textarea{width:100%;font:12px/1.4 ui-monospace,Menlo,monospace;padding:8px;border:1px solid var(--line);border-radius:4px;resize:vertical;color:var(--ink);background:var(--bg)}
.c-actions{display:flex;flex-wrap:wrap;gap:8px}
.c-tools button,.btn{font:600 14px Inter,system-ui,sans-serif;min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--bg);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.btn{background:none;color:var(--ink)}
.c-theme{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 16px}
.c-theme legend{padding:0;font-weight:600;margin-bottom:4px}
.c-theme label{display:flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.c-theme input{accent-color:var(--bar);margin:0}
.c-hint{color:var(--mute);font-size:13px}
:focus-visible{outline:2px solid var(--bar);outline-offset:2px}

.index{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:32px}
.index a{display:block;text-decoration:none}
.index img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.i-title{font-weight:700;font-size:17px;text-decoration:underline;text-underline-offset:3px}

/* ?embed and ?png show the chart alone. */
.embed .c-nav,.embed .c-tools,.png .c-nav,.png .c-tools{display:none}
.embed .page{max-width:none;padding:0 0 4px}
.png .page{max-width:none;padding:16px}