@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root { --forest: #1b4332; --olive: #2d4a3e; --sage: #5a7a6a; --mist: #e8edea; --ink: #1a1a1a; --paper: #fff; --line: #d8e1da; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f8faf8; font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; line-height: 1.85; }
.site-header { min-height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { color: var(--ink); font: 700 1.05rem/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-decoration: none; }
.back-link { color: var(--forest); font-size: .82rem; font-weight: 700; }
.page-shell { width: min(920px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 80px; }
.intro { max-width: 680px; }
.eyebrow, .document-label { margin: 0 0 8px; color: var(--sage); font: 700 .72rem/1.4 "Space Grotesk", sans-serif; letter-spacing: .14em; }
.eyebrow::before, .document-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #3fc060; }
h1, h2, h3, h4 { color: var(--forest); line-height: 1.45; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.03em; }
.intro > p:last-child { margin: 16px 0 0; color: #525252; font-size: .95rem; }
.document-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 38px 0 24px; }
.document-nav a { min-height: 52px; display: flex; align-items: center; padding: 12px 16px; color: var(--forest); background: var(--mist); border: 1px solid var(--line); border-radius: 8px; font-size: .82rem; font-weight: 700; text-decoration: none; }
.document-nav a:hover { background: #dce9df; }
.document-nav a:focus-visible, .back-link:focus-visible { outline: 3px solid #3fc060; outline-offset: 3px; }
.documents { display: grid; gap: 24px; }
.document { padding: clamp(28px, 5vw, 48px); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, .05); scroll-margin-top: 20px; }
.document h2 { margin: 0 0 28px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.document h3 { margin: 32px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1.1rem; }
.document h4 { margin: 22px 0 8px; font-size: 1rem; }
.document p { margin: 0 0 14px; font-size: .91rem; }
.document ul, .document ol { margin: 0 0 18px; padding-left: 1.5em; }
.document li { margin: 7px 0; font-size: .91rem; }
.document code { padding: 2px 5px; color: var(--olive); background: var(--mist); border-radius: 4px; font-family: ui-monospace, monospace; font-size: .85em; overflow-wrap: anywhere; }
.annotation { padding: 12px 14px; color: var(--olive); background: var(--mist); border-radius: 8px; font-size: .84rem; }
footer { padding: 28px 24px; color: #5a7a6a; text-align: center; font-size: .75rem; }
@media (max-width: 640px) { .site-header { min-height: 64px; padding: 0 16px; } .page-shell { width: min(100% - 32px, 920px); padding-top: 40px; } .document-nav { grid-template-columns: 1fr; } .document { padding: 24px; } }