/* A plain page: one narrow column, system fonts, one accent color for the button and links. */
:root {
  --bg: #FFFFFF;
  --fg: #1F2328;
  --muted: #656D76;
  --line: #E3E6E8;
  --soft: #F5F7F8;
  --accent: #1A7FBF;
  --accent-fg: #FFFFFF;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181B;
    --fg: #E4E7EA;
    --muted: #979FA7;
    --line: #2A2F34;
    --soft: #1D2125;
    --accent: #5BB5EA;
    --accent-fg: #0B1A24;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.7 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.page { max-width: 680px; margin: 0 auto; padding: 28px 20px 48px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; }
.brand:hover { text-decoration: none; }
.mark { width: 20px; height: 20px; }
.top nav { display: flex; gap: 16px; font-size: 14px; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.link:hover { text-decoration: underline; }

.intro { margin: 0 0 20px; font-size: 16px; }

.add { display: flex; flex-wrap: wrap; gap: 8px; }
.button {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 6px;
  background: var(--accent); color: var(--accent-fg); font-weight: 600; white-space: nowrap;
}
.button:hover { text-decoration: none; filter: brightness(1.07); }
.url { display: flex; flex: 1 1 300px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; }
.url code { flex: 1; min-width: 0; padding: 8px 10px; overflow-x: auto; white-space: nowrap; }
.copy { padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: var(--soft); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; border-radius: 0 6px 6px 0; }
.copy:hover, .copied { color: var(--accent); }

.small { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
details summary { cursor: pointer; width: fit-content; }
details pre { margin: 8px 0 0; padding: 10px 12px; background: var(--soft); border-radius: 6px; overflow-x: auto; color: var(--fg); }

h2 { margin: 44px 0 4px; font-size: 15px; font-weight: 600; }
.search { width: 100%; margin: 8px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pkg { width: 22px; height: 22px; margin-top: 3px; color: var(--muted); }
.pkg-body { min-width: 0; }
h3 { margin: 0; font-size: 16px; font-weight: 600; }
.ver { margin-left: 4px; color: var(--muted); font: 400 13px var(--mono); }
.pkg-body p { margin: 2px 0 0; }
.meta { color: var(--muted); font-size: 13px; }
.meta code { font-size: 12.5px; }
.id code { color: var(--muted); }
.id:hover code { color: var(--fg); }

footer { margin-top: 40px; color: var(--muted); font-size: 13px; }
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }