/* One stylesheet for every page on this site. Kept plain on purpose: the
   pages a store links to should render on anything, including a ten-year-old
   phone browser in a review queue. */

/* The app's typeface, cut down to the glyphs these pages draw: 68 KB rather
   than the 2MB the app carries, because the app reads its copy off the disk
   and a visitor downloads this one. Built by tools/build-site-font.js --
   rerun it after changing any text here, or a new word arrives in whatever
   the browser falls back to.

   swap, not block: the app can afford to wait for a local file, a policy page
   on a bad connection cannot, and unreadable text is worse than text that
   changes shape once. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/pretendard-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
}
/* palette:start
   Generated by tools/build-theme.js from src/shared/theme.ts. Do not edit
   between the markers: the next build overwrites it and a test fails if the two
   disagree.

   The names and the values are both the app's. The values stopped being copied
   by hand at #91 -- they had drifted in seven places, so a page next to a
   screenshot read as a different product -- and the names followed at #55. The
   page needs eight of the app's twenty-six roles; `--accent-link` is the only
   name of its own, kept because a hue accent would want a link darkened again
   and an ink one does not. */

:root {
  --bg: #e9e9e9;
  --text: #2b2b2b;
  --muted: #616161;
  --line: #efefef;
  --panel: #ffffff;
  --panel-2: #efefef;
  --accent: #2b2b2b;
  --accent-link: #2b2b2b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2b2b2b;
    --text: #f8f8f8;
    --muted: #b3b3b3;
    --line: #3e3e3e;
    --panel: #323232;
    --panel-2: #3e3e3e;
    --accent: #f8f8f8;
    --accent-link: #f8f8f8;
  }
}
/* palette:end */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 40px 20px 72px;
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.75 "Pretendard Variable",
    "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    -apple-system,
    "Segoe UI",
    system-ui,
    sans-serif;
}
main {
  max-width: 760px;
  margin: 0 auto;
}
h1 {
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 6px;
}
.sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 32px;
}
h2 {
  font-size: 18px;
  margin: 38px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
p,
li {
  margin: 10px 0;
}
code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: "Cascadia Mono", Consolas, monospace;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
th,
td {
  border: 1px solid var(--line);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--panel);
  white-space: nowrap;
}
.box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
}
.box p:first-child {
  margin-top: 0;
}
.box p:last-child {
  margin-bottom: 0;
}
a {
  color: var(--accent-link);
}
.lang {
  float: right;
  font-size: 14px;
}
footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}