.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-item); font-weight: 500; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--accent); color: var(--surface); }
.button-primary:hover { background: var(--accent-hover); color: var(--surface); }
.search-dialog[hidden] { display: none; }
.search-dialog { position: fixed; z-index: 90; inset: 0; }
.search-dialog__backdrop { position: absolute; inset: 0; background: rgb(23 39 45 / .24); }
.search-dialog__panel { position: relative; width: min(640px, 92vw); max-height: 72vh; margin: 12vh auto 0; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); }
.search-dialog__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.search-dialog__header svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.75; }
.search-dialog__header input { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-dialog__header kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-size: .6875rem; }
.search-dialog__status { margin: var(--space-4); color: var(--text-muted); font-size: .875rem; }
.search-results { margin: 0; padding: 0 var(--space-2) var(--space-2); list-style: none; }
.search-results:empty { display: none; }
.search-result { display: block; padding: var(--space-3); border-radius: var(--radius-item); color: var(--text); text-decoration: none; }
.search-result:hover, .search-result:focus { background: var(--tint); }
.search-result span, .search-result small { display: block; }
.search-result span { font-size: .9375rem; font-weight: 500; }
.search-result small { margin-top: 2px; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
mark { padding: 0; background: transparent; color: var(--accent); font-weight: 600; }
.prose { min-width: 0; }
.prose h1 { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h2, .prose h3 { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h1 + p { color: var(--text-muted); font-size: 1.125rem; line-height: 1.65; }
.heading-anchor { position: absolute; right: calc(100% + 8px); color: var(--text-muted); font-family: var(--font-mono); font-size: .85em; font-weight: 400; opacity: 0; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); }
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
.prose pre { position: relative; margin: var(--space-5) 0; padding: var(--space-5); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-sunken); color: var(--text); font-size: .875rem; line-height: 1.65; }
.prose pre code { color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.prose :not(pre) > code { padding: .1em .32em; border-radius: 4px; background: var(--surface-sunken); color: var(--text); font-size: .875em; }
.copy-code { position: absolute; top: var(--space-2); right: var(--space-2); min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-item); background: var(--surface); color: var(--text-muted); font-size: .75rem; opacity: 0; cursor: pointer; transition: opacity var(--duration-fast) var(--ease-out); }
.prose pre:hover .copy-code, .copy-code:focus { opacity: 1; }
.copy-code.is-copied { color: var(--signal-green); }
.table-wrap { width: 100%; margin: var(--space-5) 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-panel); }
.prose table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .9375rem; }
.prose th { padding: var(--space-3) var(--space-4); background: var(--surface-sunken); color: var(--text); font-size: .8125rem; font-weight: 600; text-align: left; }
.prose td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); vertical-align: top; }
.prose .admonition { margin: var(--space-6) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-item) var(--radius-item) 0; background: var(--tint); }
.prose .admonition-title { margin: 0 0 var(--space-1); color: var(--text); font-weight: 600; }
.prose .admonition.warning, .prose .admonition.danger { border-left-color: var(--signal-red); background: color-mix(in srgb, var(--signal-red) 7%, var(--surface)); }
.prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-12); }
.prev-next__card { display: flex; min-height: 86px; flex-direction: column; justify-content: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-panel); color: var(--text); text-decoration: none; }
.prev-next__card:hover { border-color: var(--border-strong); background: var(--surface); color: var(--accent); }
.prev-next__card--next { text-align: right; }
.prev-next__card span { color: var(--text-muted); font-size: .75rem; }
.prev-next__card strong { margin-top: 2px; font-size: .9375rem; }
.edit-page { margin-top: var(--space-6); font-size: .875rem; }
.skills-filter { margin: var(--space-6) 0 var(--space-10); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.skills-filter label { display: block; margin-bottom: var(--space-2); color: var(--text); font-size: .875rem; font-weight: 600; }
.skills-filter input { width: 100%; height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-item); background: var(--bg); color: var(--text); }
.skills-filter input::placeholder { color: var(--text-muted); }
.skills-filter__index { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.skills-filter__index a { padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font: .6875rem/1.35 var(--font-mono); text-decoration: none; }
.skills-filter__index a:hover { border-color: var(--accent); color: var(--accent); }
.skills-filter__index a[hidden] { display: none; }
.skills-filter [data-skills-empty] { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: .875rem; }
.prose h3.skill-entry { margin-top: var(--space-8); }
.prose h3.skill-entry code { padding: .16em .42em; border: 1px solid var(--border); border-radius: var(--radius-item); background: var(--surface-sunken); color: var(--accent); font-size: .86em; }
@media (hover: none) { .copy-code { opacity: 1; } }
@media (max-width: 640px) { .prev-next { grid-template-columns: 1fr; } .prev-next__card--next { text-align: left; } .heading-anchor { right: 100%; } }