:root{
  --charcoal:#1C1E2B; --raised:#252838; --rule:#33374A;
  --paper:#FFFFFF; --text:#D9DCE6; --faint:#99A0B6;
  --sky:#82C4E2; --blue:#2F4AB8; --violet:#A073D5; --mint:#62C4AB;
  --stripe:linear-gradient(90deg,var(--sky),var(--blue) 36%,var(--violet) 66%,var(--mint));
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:var(--charcoal);color:var(--text);line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
.stripe{height:6px;background:var(--stripe);flex:none}
main{flex:1;padding:64px 16px;max-width:880px;width:100%;margin:0 auto}
.sm{font-size:15px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
h1{font-size:clamp(34px,6vw,60px);line-height:1.12;font-weight:700;color:var(--paper);margin:20px 0 24px}
h1 .hi{color:var(--violet)}
.md{font-size:clamp(20px,3vw,28px);color:var(--sky)}
a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--faint)}
a:hover{border-color:var(--mint);color:var(--mint)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
footer{padding:24px 16px;text-align:center;font-size:13px;color:var(--faint)}