:root { color-scheme: light dark; --page-bg: #f7f8fa; --content-bg: #fff; --sidebar-bg: #edf1f5; --text: #20242a; --muted-border: #b8c0c8; --link: #165d9c; --header-bg: #152536; --header-text: #fff; --critical-bg: #fff3a3; --critical-border: #c0392b; --warn-bg: #fffbe0; --warn-border: #d4a017; }
@media (prefers-color-scheme: dark) { :root { --page-bg: #0f141a; --content-bg: #182028; --sidebar-bg: #121a22; --text: #e8edf2; --muted-border: #64717d; --link: #79bfff; --header-bg: #0a1118; --header-text: #f5f7fa; --critical-bg: #3b241f; --critical-border: #ff796b; --warn-bg: #322c16; --warn-border: #ffd166; } }
:root[data-theme="light"] { color-scheme: light; --page-bg: #f7f8fa; --content-bg: #fff; --sidebar-bg: #edf1f5; --text: #20242a; --muted-border: #b8c0c8; --link: #165d9c; --header-bg: #152536; --header-text: #fff; --critical-bg: #fff3a3; --critical-border: #c0392b; --warn-bg: #fffbe0; --warn-border: #d4a017; }
:root[data-theme="dark"] { color-scheme: dark; --page-bg: #0f141a; --content-bg: #182028; --sidebar-bg: #121a22; --text: #e8edf2; --muted-border: #64717d; --link: #79bfff; --header-bg: #0a1118; --header-text: #f5f7fa; --critical-bg: #3b241f; --critical-border: #ff796b; --warn-bg: #322c16; --warn-border: #ffd166; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--page-bg); font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif; line-height: 1.7; }
a { color: var(--link); } .site-header, .site-footer { padding: 1.2rem 2rem; background: var(--header-bg); color: var(--header-text); }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .site-header a { color: var(--header-text); font-size: 1.4rem; font-weight: 700; text-decoration: none; } .site-header p { margin: .2rem 0 0; } .site-header .site-update-note { margin-top: .05rem; color: var(--header-text); font-size: .78rem; opacity: .8; } .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; } .site-header .home-link, #theme-toggle { padding: .45rem .75rem; color: var(--header-text); background: transparent; border: 1px solid var(--header-text); border-radius: .3rem; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; white-space: nowrap; } .site-header .home-link:hover, .site-header .home-link:focus-visible, #theme-toggle:hover, #theme-toggle:focus-visible { background: color-mix(in srgb, var(--header-text) 15%, transparent); }
.layout { display: grid; grid-template-columns: 16rem 1fr; max-width: 88rem; margin: auto; min-height: 70vh; }
.sidebar { padding: 1.5rem; background: var(--sidebar-bg); } .sidebar ul { list-style: none; padding: 0; } .sidebar li { margin: .45rem 0; }
.sidebar .current { font-weight: 700; border-left: .25rem solid var(--link); padding-left: .5rem; }
.content { min-width: 0; padding: 2rem; background: var(--content-bg); } .content h1 { line-height: 1.3; }
.topic { margin: 1.25rem 0; padding: .9rem 1rem; border-left: .3rem solid var(--muted-border); }
.critical { background: var(--critical-bg); border-color: var(--critical-border); font-weight: 700; } .warn { background: var(--warn-bg); border-color: var(--warn-border); }
li.critical, li.warn { margin: .4rem 0; padding: .35rem .6rem; border-left-style: solid; border-left-width: .3rem; }
.sources { font-size: .9rem; font-weight: 400; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--muted-border); padding: .55rem; text-align: left; vertical-align: top; } code { color: var(--text); background: var(--sidebar-bg); padding: .1rem .25rem; } .site-footer { font-size: .85rem; }
@media (max-width: 48rem) { .site-header { flex-direction: column; align-items: flex-start; padding: 1rem; } .header-actions { justify-content: flex-start; } .layout { grid-template-columns: 1fr; } .sidebar { order: 0; } .content { order: 1; padding: 1.2rem; } }