@font-face {
  font-family: 'Haiwang Reading';
  src: url('../media227/hw260-reading.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --hw227-ink: #202942;
  --hw227-copy: #536176;
  --hw227-paper: #fff;
  --hw227-wash: #edf5ff;
  --hw227-purple: #783afb;
  --hw227-purple-hover: #630de3;
  --hw227-night: #000;
  --hw227-panel: #18181b;
  --hw227-panel-raised: #242426;
  --hw227-night-copy: #b6b6bf;
  --hw227-line: #3f3f47;
  --hw227-focus: #5d21c2;
  --hw227-frame: 70rem;
  --hw227-radius: .75rem;
  --hw227-text: 'Haiwang Reading', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.875rem; }
body { margin: 0; background: var(--hw227-paper); color: var(--hw227-ink); font: 1rem/1.65 var(--hw227-text); -webkit-font-smoothing: antialiased; scrollbar-color: var(--hw227-purple) var(--hw227-wash); }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.22; letter-spacing: -.03em; font-weight: 600; }
h1 { font-size: clamp(2.625rem, 5.5vw, 4.5rem); font-weight: 550; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.5rem; }
p, dd { color: var(--hw227-copy); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; object-fit: contain; }
button svg, a svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
:where(a, button, input, summary):focus-visible { outline: 3px solid var(--hw227-focus); outline-offset: 5px; }
::selection { background: var(--hw227-purple); color: white; }
input { caret-color: var(--hw227-purple); }
[hidden] { display: none !important; }
.h227-wrap { width: min(var(--hw227-frame), calc(100% - 4rem)); margin-inline: auto; }
.h227-section { padding-block: 7.125rem; }
.h227-pale { background: var(--hw227-wash); }
.h227-lead { font-size: 1.25rem; line-height: 1.7; max-width: 65ch; }
.h227-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.h227-skip { position: fixed; inset: -5rem auto auto 1.25rem; z-index: 100; background: white; color: black; padding: .75rem; }
.h227-skip:focus { top: .625rem; }
@media (min-width: 100rem) { :root { --hw227-frame: 77.5rem; } }
@media (max-width: 62.5rem) { .h227-wrap { width: calc(100% - 3rem); } }
@media (max-width: 45rem) {
  html { scroll-padding-top: 6rem; }
  .h227-wrap { width: calc(100% - 2.25rem); }
  .h227-section { padding-block: 4.625rem; }
  h1 { font-size: 2.625rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.375rem; }
  .h227-lead { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}