:root { --font-body: "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif; --font-display: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "BIZ UDPMincho", serif; --font-mono: "Cascadia Mono", Consolas, monospace; --paper: #faf6ee; --paper-deep: #f0e6d4; --paper-light: #fffcf7; --ink: #2c2620; --ink-muted: #6b5f52; --line: #e0d4bc; --line-strong: #c4b08e; --gold: #8a6a2e; --gold-strong: #7a5a24; --gold-soft: #f5ead0; --russet: #a33d2e; --russet-soft: #f8e4dc; color-scheme: light; font-family: var(--font-body); color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; } html, body { min-width: 320px; } html.drawer-open, html.drawer-open body { overflow: hidden; } body { margin: 0; background: var(--paper); } a { color: var(--russet); text-decoration-color: currentColor; text-underline-offset: .18em; } a:hover, a:focus-visible { color: var(--gold-strong); } :focus-visible { outline: 2px solid var(--russet); outline-offset: 3px; } button, input, textarea, select { font: inherit; } input, textarea, select { width: 100%; padding: .65rem .7rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); background: var(--paper-light); } textarea { min-height: 9rem; resize: vertical; }
  .skip-link { position: fixed; z-index: 100; top: .6rem; left: .6rem; padding: .65rem .85rem; color: var(--paper-light); background: var(--ink); transform: translateY(calc(-100% - 1rem)); } .skip-link:focus-visible { transform: translateY(0); } .site-shell { width: min(100% - 2rem, 1320px); margin-inline: auto; padding: 1rem 0 2rem; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .8rem 1rem; border-block: 1px solid var(--line-strong); background: var(--paper-light); } .brand-block, .site-tools, .brand-copy { display: flex; align-items: center; gap: .75rem; } .brand-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--ink); background: var(--gold-soft); text-decoration: none; } .brand-mark .donkey-mark { width: 2.3rem; } .brand-copy { display: grid; gap: .1rem; align-items: start; } .brand-kicker, .sidebar-label, .panel-kicker { color: var(--gold-strong); font: 600 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .brand-link { color: var(--ink); font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.2 var(--font-display); text-decoration: none; } .language-switcher { display: flex; gap: .4rem; align-items: center; font-size: .75rem; } .language-switcher a, .language-switcher .is-current { display: inline-flex; min-height: 44px; align-items: center; padding: .45rem .55rem; border: 1px solid var(--line); } .language-switcher .is-current { color: var(--ink); background: var(--gold-soft); } .mobile-menu-button { display: none; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--ink); color: var(--ink); background: var(--paper-light); cursor: pointer; }
  .site-body { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.3rem; align-items: start; } .site-sidebar { position: sticky; top: 1rem; display: grid; gap: .85rem; max-height: calc(100vh - 2rem); padding: .85rem; overflow: auto; border: 1px solid var(--line-strong); background: var(--paper-light); } .sidebar-drawer-head { display: none; } .sidebar-intro { display: flex; align-items: center; gap: .65rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); } .sidebar-intro .donkey-mark { width: 3.2rem; } .sidebar-title { margin: .2rem 0 0; font: 600 .9rem/1.3 var(--font-display); } .sidebar-nav { display: grid; gap: .25rem; } .sidebar-link { display: flex; gap: .55rem; align-items: center; min-height: 44px; padding: .55rem .65rem; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; } .sidebar-link:hover, .sidebar-link.is-current { border-left-color: var(--russet); color: var(--russet); background: var(--russet-soft); } .sidebar-link-mark { width: 1rem; color: var(--gold-strong); text-align: center; } .board-search input { min-height: 44px; padding: .5rem .6rem; font-size: .8rem; } .category-nav { display: grid; gap: .2rem; } .category-group { border-top: 1px solid var(--line); } .category-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: .4rem .2rem; color: var(--ink); font: 700 .82rem/1.3 var(--font-display); cursor: pointer; list-style: none; } .category-group summary::-webkit-details-marker { display: none; } .category-group summary::before { content: "＋"; margin-right: .35rem; color: var(--gold-strong); } .category-group[open] summary::before { content: "−"; } .category-group summary small { color: var(--ink-muted); font: .65rem var(--font-mono); } .category-group ul { display: grid; gap: .1rem; margin: 0 0 .45rem; padding: 0; list-style: none; } .board-nav-link { display: grid; min-height: 44px; align-content: center; gap: .12rem; padding: .42rem .45rem .42rem .8rem; border-left: 2px solid transparent; color: var(--ink-muted); font-size: .72rem; text-decoration: none; } .board-nav-link span { color: var(--gold-strong); font: .62rem var(--font-mono); } .board-nav-link strong { color: inherit; font-weight: 500; } .board-nav-link:hover, .board-nav-link.is-current { border-left-color: var(--russet); color: var(--russet); background: var(--russet-soft); } .drawer-backdrop { display: none; } .drawer-backdrop[hidden] { display: none; } .sidebar-note { margin: 0; padding-top: .7rem; border-top: 1px dotted var(--line-strong); color: var(--ink-muted); font-size: .7rem; line-height: 1.55; }
  .page-main { min-width: 0; } .site-footer { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0 17.3rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); color: var(--ink-muted); font-size: .72rem; } .site-footer p { margin: 0; } .site-footer nav { display: flex; gap: .75rem; } .panel { padding: 1.1rem; border: 1px solid var(--line); background: var(--paper-light); } .stack { display: grid; gap: .8rem; } .page-title, .panel h1, .panel h2, .panel h3 { margin: 0; font-family: var(--font-display); } .page-title { font-size: clamp(1.7rem, 4vw, 2.75rem); line-height: 1.18; } .lead { max-width: 68ch; margin: 0; color: var(--ink-muted); line-height: 1.75; } .eyebrow { margin: 0; color: var(--russet); font: 600 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; } .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); background: var(--paper-light); font-weight: 600; text-decoration: none; cursor: pointer; } .button-primary { border-color: var(--russet); color: var(--paper-light); background: var(--russet); } .button-ghost:hover, .button-ghost:focus-visible { background: var(--gold-soft); } .pill { display: inline-flex; padding: .25rem .5rem; border: 1px solid var(--line); color: var(--ink-muted); background: var(--gold-soft); font: .68rem var(--font-mono); } .microcopy, .plain-body { color: var(--ink-muted); font-size: .82rem; line-height: 1.65; } .plain-body { margin: 0; white-space: pre-wrap; word-break: break-word; } .notice { padding: .7rem .8rem; border-left: 3px solid var(--gold-strong); background: var(--gold-soft); } .form-output { min-height: 1.2rem; color: var(--russet); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .two-column, .board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; } .board-composer-panel, .thread-composer { position: sticky; top: 1rem; } .thread-heading, .board-heading { display: grid; gap: .7rem; margin-bottom: 1rem; border-bottom: 3px solid var(--gold); } .field { display: grid; gap: .35rem; } .field > span { font-size: .78rem; font-weight: 700; } .composer-form { display: grid; gap: .75rem; } .media-field { margin: 0; padding: 0; border: 0; } .media-preview { display: grid; gap: .5rem; margin-top: .6rem; padding: .65rem; border: 1px dashed var(--line-strong); } .media-preview img { width: 100%; max-height: 16rem; object-fit: contain; } .post-media img { width: 100%; max-height: 30rem; object-fit: contain; border: 1px solid var(--line); } .image-meta, .meta-line { display: flex; flex-wrap: wrap; gap: .5rem .8rem; color: var(--ink-muted); font: .7rem/1.4 var(--font-mono); } .post-tombstone { padding: .75rem; border: 1px dashed var(--line-strong); color: var(--ink-muted); background: var(--paper-deep); }
@media (max-width: 900px) { .site-shell { width: min(100% - 1rem, 760px); } .site-body, .two-column, .board-layout { grid-template-columns: 1fr; } .site-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(20rem, 90vw); max-height: none; padding: 1rem; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(38,34,29,.18); } .site-sidebar.is-open { transform: translateX(0); } .drawer-backdrop { position: fixed; z-index: 40; inset: 0; display: block; border: 0; background: rgba(38,34,29,.42); } .sidebar-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .drawer-close { min-width: 44px; min-height: 44px; border: 1px solid var(--line); color: var(--ink); background: var(--paper-light); font-size: 1.3rem; cursor: pointer; } .mobile-menu-button { display: inline-flex; align-items: center; } .site-footer { margin-left: 0; } .board-composer-panel, .thread-composer { position: static; } .board-compose-jump { position: fixed; z-index: 10; right: 1rem; bottom: 1rem; box-shadow: 0 3px 0 var(--ink); } } @media (max-width: 540px) { .site-shell { padding-top: .4rem; } .site-header { padding: .6rem .7rem; } .language-switcher { display: none; } .brand-link { font-size: 1rem; } .brand-kicker { font-size: .55rem; } .panel { padding: .8rem; } .site-footer { display: grid; gap: .6rem; } } @media (prefers-reduced-motion: reduce) { .site-sidebar { transition: none; } }
  .site-body.without-sidebar { grid-template-columns: minmax(0, 1fr); }
  .site-footer.without-sidebar { margin-left: 0; }
  .scope-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; }
  .scope-nav a { display: inline-flex; min-height: 44px; align-items: center; padding: .45rem .3rem; font-size: .78rem; }
  @media (max-width: 620px) { .site-tools { align-items: flex-end; flex-direction: column; } .scope-nav { justify-content: flex-end; } }
  .brand-mark { overflow: hidden; border-radius: 7px; }
  .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .site-banner { width: 100%; aspect-ratio: 5 / 1; margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-deep); }
  .site-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  @media (max-width: 620px) { .site-banner { aspect-ratio: 3 / 1; } }