:root{
  --paper:#f7f9f8;
  --ink:#22313a;
  --ink-soft:#4d5d66;
  --celadon:#5e8c7b;
  --celadon-pale:#e1ebe6;
  --amber:#c98f2b;
  --rust:#a4492f;
  --line:#cfdad5;
  --max:44rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#172128;
    --ink:#e6eeea;
    --ink-soft:#a9b9b2;
    --celadon:#86b8a5;
    --celadon-pale:#223239;
    --amber:#e0a94a;
    --rust:#e08a6e;
    --line:#33454d;
  }
}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.9;letter-spacing:.02em;
}
h1,h2,h3{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-weight:700;line-height:1.4;margin:0}
a{color:var(--celadon);text-underline-offset:.25em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;padding:1rem .9rem}
.brand{font-family:"Noto Serif SC",serif;font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none;margin-right:auto}
nav a{color:var(--ink-soft);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--celadon)}
nav{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:0 clamp(.4rem,2.4vw,1.25rem);font-size:clamp(.7rem,3.4vw,1rem);letter-spacing:0}
main{padding:2.5rem 0 4rem}
h1{font-size:2.2rem;margin-bottom:1rem}
h2{font-size:1.45rem;margin:3rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
h3{font-size:1.1rem;margin:1.75rem 0 .25rem}
p{margin:.75rem 0}
.lede{font-size:1.15rem;color:var(--ink-soft)}
ul,ol{padding-left:1.4rem}
li{margin:.4rem 0}
.note{background:var(--celadon-pale);border-left:4px solid var(--celadon);padding:.75rem 1rem;margin:1.5rem 0}
.alert{border-left-color:var(--rust)}
table{border-collapse:collapse;width:100%;margin:1.25rem 0;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:.6rem .5rem;text-align:left;vertical-align:top}
th{font-weight:700}
.tablewrap{overflow-x:auto}

/* continuum slider */
.continuum{margin:2rem 0 1rem}
.continuum label{display:block;font-family:"Noto Serif SC",serif;font-weight:700;margin-bottom:.75rem}
.track{position:relative}
.track input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;margin:0;
  background:linear-gradient(90deg,#5e8c7b 0%,#a9b45f 38%,#d29a33 68%,#a4492f 100%);
}
.track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:4px solid var(--ink);cursor:grab;
}
.track input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--paper);border:4px solid var(--ink);cursor:grab;
}
.stops{display:flex;justify-content:space-between;margin-top:.6rem;font-size:.95rem;color:var(--ink-soft)}
.stops span[aria-current="true"]{color:var(--ink);font-weight:700}
#state-body{margin-top:1.25rem;min-height:11rem;border-top:1px solid var(--line);padding-top:1rem}
#state-body h2{border:0;margin:0 0 .5rem;padding:0;font-size:1.35rem}
.hint{font-size:.95rem;color:var(--ink-soft)}

.approach{border-top:1px solid var(--line);padding:1rem 0}
.approach h3{margin-top:0}
.approach p{margin:.3rem 0}
.tag{color:var(--ink-soft);font-size:.9rem}

footer.site{border-top:1px solid var(--line);padding:2rem 0;color:var(--ink-soft);font-size:.9rem}
footer.site p{margin:.4rem 0}
@media (max-width:30rem){html{font-size:16px}h1{font-size:1.8rem}}
@media (prefers-reduced-motion:no-preference){
  #state-body{transition:opacity .25s}
}

/* language switch, share, forms, lists */
.lang{margin-left:.5rem;padding:.1rem .6rem;border:1px solid var(--line);border-radius:1rem;text-decoration:none;color:var(--ink-soft);font-size:.9rem}
.lang:hover{border-color:var(--celadon);color:var(--ink)}
.crisis{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem;font-size:.9rem}
.crisis strong{color:var(--rust)}
.share{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.share a,.share button,.btn{font:inherit;font-size:.9rem;padding:.35rem .9rem;border:1px solid var(--celadon);border-radius:.4rem;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover,.btn:hover{background:var(--celadon-pale)}
.btn.primary{background:var(--celadon);color:#fff;border-color:var(--celadon)}
form.stack{display:grid;gap:1rem;max-width:30rem;margin:1.25rem 0}
form.stack label{display:grid;gap:.25rem;font-weight:700}
form.stack input,form.stack select,form.stack textarea{font:inherit;padding:.5rem .6rem;border:1px solid var(--line);border-radius:.3rem;background:var(--paper);color:var(--ink)}
.entries{list-style:none;padding:0}
.entries li{border-top:1px solid var(--line);padding:1rem 0;margin:0}
.entries .meta{color:var(--ink-soft);font-size:.9rem}
.entries h3{margin:.1rem 0 .25rem}
.toc{background:var(--celadon-pale);padding:1rem 1.25rem;margin:1.5rem 0}
.toc ol{margin:.25rem 0}
.refs{font-size:.92rem;color:var(--ink-soft)}
.refs li{margin:.5rem 0}
.sr{position:absolute;left:-9999px}
.fig{margin:1.5rem 0}
.fig svg{max-width:100%;height:auto}
.fig figcaption{font-size:.9rem;color:var(--ink-soft)}
.stops span{text-align:center}.stops small{display:block;font-size:.72em;font-weight:400}
.hero{text-align:center;margin:1rem 0 2rem}
.hero img{width:100%;height:auto;max-width:34rem;display:block;margin:0 auto .5rem}
.hero h1{font-size:2.2rem}
.hero .lede{max-width:32rem;margin:.5rem auto 0}
.cards{list-style:none;padding:0;margin:1rem 0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.9rem}
.cards a{display:grid;grid-template-columns:48px 1fr;column-gap:.8rem;align-items:center;height:100%;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.6rem;background:var(--paper);color:var(--ink);text-decoration:none}
.cards a:hover{border-color:var(--celadon);background:var(--celadon-pale)}
.cards img{grid-row:span 2;width:48px;height:48px}
.cards strong{line-height:1.5}
.cards span{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.hd-icon{float:right;margin:0 0 .5rem 1rem;width:64px;height:64px}