*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--mw-text);
background: var(--mw-bg);
overflow-x: clip;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--mw-border); margin: 2em 0; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--mw-accent); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus, a:active { color: var(--mw-accent-dark); text-decoration: none; } :root {
--mw-bg: #fafaf7;
--mw-bg-card: #ffffff;
--mw-bg-soft: #f6f4ec;
--mw-text: #1a1a1a;
--mw-text-muted: #666666;
--mw-text-soft: #888888;
--mw-text-faint: #aaaaaa;
--mw-border: #e8e6df;
--mw-border-soft: #f0eee7;
--mw-border-strong: #d8d4c8;
--mw-accent: #0f3a82;
--mw-accent-dark: #0a2a5e;
--mw-accent-soft: #eef2fa;
--mw-highlight: #fff5b8;
--mw-shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04);
--mw-shadow-md: 0 4px 16px rgba(15, 15, 20, 0.06);
--mw-shadow-lg: 0 12px 40px rgba(15, 15, 20, 0.08);
--mw-radius-sm: 6px;
--mw-radius: 10px;
--mw-radius-lg: 14px;
--mw-serif: 'Cormorant Garamond', 'Times New Roman', serif;
--mw-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
--mw-container: 1180px;
--mw-narrow: 760px;
--mw-nav-h: 64px;
} h1, h2, h3, h4, h5, h6 {
font-family: var(--mw-serif);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--mw-text);
margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.015em; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; }
p { margin: 0 0 1.2em; }
strong, b { font-weight: 600; color: var(--mw-text); }
em, i { font-style: italic; }
small { font-size: .85em; color: var(--mw-text-muted); }
code, kbd, pre, samp { font-family: var(--mw-mono); font-size: .9em; }
code {
background: var(--mw-bg-soft);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--mw-border-soft);
color: var(--mw-accent-dark);
font-size: .88em;
}
pre {
background: #1a1a1a;
color: #f5f5f5;
padding: 1.2em 1.4em;
border-radius: var(--mw-radius);
overflow-x: auto;
margin: 1.5em 0;
line-height: 1.55;
font-size: .88rem;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
blockquote {
margin: 1.5em 0;
padding: 1em 1.4em;
border-left: 3px solid var(--mw-accent);
background: var(--mw-bg-soft);
font-family: var(--mw-serif);
font-size: 1.2rem;
font-style: italic;
color: var(--mw-text);
border-radius: 0 var(--mw-radius) var(--mw-radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin-bottom: .4em; }
table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
background: var(--mw-bg-card);
border-radius: var(--mw-radius);
overflow: hidden;
border: 1px solid var(--mw-border);
}
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--mw-border-soft); }
th { background: var(--mw-bg-soft); font-weight: 600; font-size: .9rem; }
tr:last-child td { border-bottom: 0; }
.mw-italic-accent { font-style: italic; color: var(--mw-accent); } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #fff; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #0f3a82; display: block; font-size: 14px; font-weight: 600; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--mw-accent); color: #fff; padding: 8px 16px; z-index: 100; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 2px; border-radius: 4px; } .mw-container { width: 100%; max-width: var(--mw-container); margin: 0 auto; padding: 0 24px; }
.mw-narrow { max-width: var(--mw-narrow); margin: 0 auto; }
.mw-site { display: flex; flex-direction: column; min-height: 100vh; }
.mw-main { flex: 1; padding: 48px 0 80px; } .mw-header {
background: var(--mw-bg-card);
border-bottom: 1px solid var(--mw-border);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
background: rgba(255, 255, 255, 0.92);
}
.mw-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--mw-nav-h);
gap: 24px;
}
.mw-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mw-serif);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--mw-text);
flex-shrink: 0;
}
.mw-brand:hover { color: var(--mw-text); }
.mw-brand-mark {
width: 30px; height: 30px;
background: var(--mw-text);
color: #fff;
border-radius: 7px;
display: grid; place-items: center;
font-size: 15px;
font-family: var(--mw-serif);
font-weight: 500;
}
.mw-brand-text { line-height: 1; }
.mw-brand-tagline { display: block; font-family: var(--mw-sans); font-size: 11px; color: var(--mw-text-muted); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.mw-brand img { max-height: 40px; width: auto; }
.mw-nav { display: flex; align-items: center; justify-content: center; gap: 28px; flex: 1; }
.mw-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; padding: 0; margin: 0; }
.mw-nav li { margin: 0; position: relative; }
.mw-nav a {
font-size: 14px;
font-weight: 500;
color: var(--mw-text-muted);
padding: 6px 0;
position: relative;
transition: color .15s ease;
}
.mw-nav a:hover, .mw-nav .current-menu-item > a, .mw-nav .current-menu-parent > a, .mw-nav .current-menu-ancestor > a, .mw-nav .current_page_item > a { color: var(--mw-text); }
.mw-nav .current-menu-item > a::after, .mw-nav .current_page_item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--mw-accent); border-radius: 2px; } .mw-nav .sub-menu, .mw-nav .children {
position: absolute; top: 100%; left: -16px;
min-width: 220px;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
box-shadow: var(--mw-shadow-md);
padding: 8px;
display: none;
flex-direction: column;
gap: 0;
margin-top: 8px;
}
.mw-nav li:hover > .sub-menu, .mw-nav li:hover > .children, .mw-nav li:focus-within > .sub-menu, .mw-nav li:focus-within > .children { display: flex; }
.mw-nav .sub-menu li, .mw-nav .children li { width: 100%; }
.mw-nav .sub-menu a, .mw-nav .children a { padding: 8px 12px; border-radius: var(--mw-radius-sm); display: block; }
.mw-nav .sub-menu a:hover, .mw-nav .children a:hover { background: var(--mw-bg-soft); }
.mw-header-actions { display: flex; align-items: center; gap: 12px; }
.mw-search-trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 12px;
background: var(--mw-bg);
border: 1px solid var(--mw-border-strong);
border-radius: 8px;
color: var(--mw-text-faint);
font-size: 13px;
transition: all .15s ease;
min-width: 200px;
}
.mw-search-trigger:hover { border-color: var(--mw-accent); color: var(--mw-text-muted); background: #fff; }
.mw-search-trigger .mw-kbd { margin-left: auto; }
.mw-kbd {
font-family: var(--mw-mono);
font-size: 11px;
background: #fff;
border: 1px solid var(--mw-border-strong);
padding: 2px 6px;
border-radius: 4px;
color: var(--mw-text-soft);
box-shadow: 0 1px 0 var(--mw-border-strong);
}
.mw-cta {
background: var(--mw-text);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: 8px;
transition: background .15s ease;
}
.mw-cta:hover { background: #000; color: #fff; } .mw-menu-toggle {
display: none;
width: 40px; height: 40px;
border-radius: 8px;
align-items: center; justify-content: center;
color: var(--mw-text);
}
.mw-menu-toggle:hover { background: var(--mw-bg-soft); }
.mw-mobile-search {
display: none;
width: 40px; height: 40px;
border-radius: 8px;
align-items: center; justify-content: center;
color: var(--mw-text);
}
.mw-mobile-search:hover { background: var(--mw-bg-soft); } .mw-search-modal {
position: fixed; inset: 0;
background: rgba(15, 15, 20, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 200;
display: none;
align-items: flex-start;
justify-content: center;
padding: 80px 16px 16px;
animation: mwFadeIn .15s ease;
}
.mw-search-modal.is-open { display: flex; }
@keyframes mwFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mw-search-box {
width: 100%;
max-width: 640px;
background: var(--mw-bg-card);
border-radius: var(--mw-radius-lg);
box-shadow: var(--mw-shadow-lg);
overflow: hidden;
animation: mwSlideIn .2s ease;
max-height: calc(100vh - 96px);
display: flex;
flex-direction: column;
}
@keyframes mwSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mw-search-input-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--mw-border);
}
.mw-search-input-wrap svg { color: var(--mw-text-soft); flex-shrink: 0; }
.mw-search-input {
flex: 1;
border: 0;
background: transparent;
font-size: 16px;
outline: none;
color: var(--mw-text);
min-width: 0;
}
.mw-search-input::placeholder { color: var(--mw-text-faint); }
.mw-search-close {
font-family: var(--mw-mono);
font-size: 11px;
color: var(--mw-text-muted);
border: 1px solid var(--mw-border-strong);
padding: 3px 8px;
border-radius: 4px;
}
.mw-search-results { overflow-y: auto; flex: 1; }
.mw-search-results-empty {
padding: 48px 24px;
text-align: center;
color: var(--mw-text-soft);
font-size: 14px;
}
.mw-search-results-empty .mw-results-prompt {
font-family: var(--mw-serif);
font-size: 18px;
color: var(--mw-text);
margin-bottom: 6px;
font-style: italic;
}
.mw-search-section-title {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mw-text-soft);
padding: 12px 20px 8px;
font-weight: 500;
}
.mw-search-result {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 20px;
cursor: pointer;
color: var(--mw-text);
border-left: 3px solid transparent;
transition: background .1s ease, border-color .1s ease;
text-decoration: none;
}
.mw-search-result:hover, .mw-search-result.is-active {
background: var(--mw-bg-soft);
border-left-color: var(--mw-accent);
color: var(--mw-text);
}
.mw-search-result-icon {
width: 28px; height: 28px;
border-radius: 6px;
background: var(--mw-accent-soft);
color: var(--mw-accent);
display: grid; place-items: center;
flex-shrink: 0;
margin-top: 2px;
}
.mw-search-result-body { flex: 1; min-width: 0; }
.mw-search-result-title { font-size: 14.5px; font-weight: 500; line-height: 1.4; margin-bottom: 2px; color: var(--mw-text); }
.mw-search-result-meta { font-size: 12px; color: var(--mw-text-soft); }
.mw-search-result-meta span + span::before { content: '·'; margin: 0 6px; color: var(--mw-text-faint); }
.mw-search-result mark { background: var(--mw-highlight); padding: 0 2px; border-radius: 2px; color: var(--mw-text); }
.mw-search-result-enter { font-family: var(--mw-mono); font-size: 11px; color: var(--mw-text-soft); align-self: center; opacity: 0; }
.mw-search-result.is-active .mw-search-result-enter { opacity: 1; }
.mw-search-footer {
padding: 10px 20px;
border-top: 1px solid var(--mw-border);
background: var(--mw-bg);
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 11px;
color: var(--mw-text-soft);
}
.mw-search-footer span { display: inline-flex; align-items: center; gap: 4px; }
.mw-search-loading { padding: 24px; text-align: center; color: var(--mw-text-soft); font-size: 13px; }
.mw-search-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid var(--mw-border);
border-top-color: var(--mw-accent);
border-radius: 50%;
animation: mwSpin .7s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes mwSpin { to { transform: rotate(360deg); } } .mw-hero {
padding: 64px 0 48px;
text-align: center;
background: linear-gradient(180deg, #fff 0%, var(--mw-bg) 100%);
border-bottom: 1px solid var(--mw-border-soft);
position: relative;
z-index: 5;
}
.mw-hero-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mw-text-soft); margin-bottom: 18px; font-weight: 500; }
.mw-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: 0 0 18px; font-weight: 400; }
.mw-hero p.mw-hero-sub { font-size: 1.05rem; color: var(--mw-text-muted); max-width: 540px; margin: 0 auto 32px; line-height: 1.6; text-align: center; }
.mw-hero-search {
max-width: 580px;
margin: 0 auto;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border-strong);
border-radius: var(--mw-radius);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
cursor: text;
transition: all .15s ease;
box-shadow: var(--mw-shadow-sm);
}
.mw-hero-search:hover { border-color: var(--mw-accent); box-shadow: var(--mw-shadow-md); }
.mw-hero-search svg { color: var(--mw-text-soft); flex-shrink: 0; }
.mw-hero-search-text { flex: 1; color: var(--mw-text-faint); font-size: 14.5px; }
.mw-hero-stats { display: flex; justify-content: center; gap: 28px; margin-top: 22px; font-size: 12px; color: var(--mw-text-soft); flex-wrap: wrap; }
.mw-hero-stats span strong { color: var(--mw-text); font-weight: 600; margin-right: 4px; } .mw-section { padding: 56px 0; position: relative; z-index: 1; }
.mw-section-head { text-align: center; margin-bottom: 40px; }
.mw-section-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mw-text-soft); margin-bottom: 10px; font-weight: 500; }
.mw-section-head h2 { margin: 0; }
.mw-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.mw-cat-card {
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
padding: 26px 24px;
transition: all .2s ease;
display: flex;
flex-direction: column;
}
.mw-cat-card:hover { border-color: var(--mw-accent); box-shadow: var(--mw-shadow-md); transform: translateY(-2px); }
.mw-cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mw-cat-icon {
width: 40px; height: 40px;
border-radius: var(--mw-radius-sm);
background: var(--mw-accent-soft);
color: var(--mw-accent);
display: grid; place-items: center;
}
.mw-cat-count {
font-size: 11px;
letter-spacing: 0.06em;
color: var(--mw-text-soft);
text-transform: uppercase;
}
.mw-cat-title {
font-family: var(--mw-serif);
font-size: 1.4rem;
font-weight: 500;
margin: 0 0 14px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.mw-cat-title a { color: var(--mw-text); }
.mw-cat-title a:hover { color: var(--mw-accent); }
.mw-cat-list { list-style: none; padding: 0; margin: 0; }
.mw-cat-list li { margin: 0; border-top: 1px solid var(--mw-border-soft); }
.mw-cat-list li:first-child { border-top: 0; }
.mw-cat-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 14px;
color: var(--mw-text-muted);
line-height: 1.4;
}
.mw-cat-list a:hover { color: var(--mw-accent); }
.mw-cat-list a svg { color: var(--mw-text-faint); flex-shrink: 0; }
.mw-cat-list a:hover svg { color: var(--mw-accent); }
.mw-cat-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--mw-border-soft);
font-size: 13px;
font-weight: 500;
color: var(--mw-accent);
} .mw-page-header {
max-width: var(--mw-narrow);
margin: 0 auto 32px;
text-align: center;
padding-bottom: 28px;
border-bottom: 1px solid var(--mw-border-soft);
}
.mw-breadcrumbs {
font-size: 12px;
color: var(--mw-text-soft);
margin-bottom: 14px;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.mw-breadcrumbs a { color: var(--mw-text-muted); }
.mw-breadcrumbs a:hover { color: var(--mw-accent); }
.mw-breadcrumbs .sep { color: var(--mw-text-faint); }
.mw-breadcrumbs .current { color: var(--mw-text); }
.mw-page-eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mw-accent);
font-weight: 500;
margin-bottom: 12px;
}
.mw-page-header h1 { margin: 0 0 16px; }
.mw-page-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
font-size: 13px;
color: var(--mw-text-soft);
flex-wrap: wrap;
}
.mw-page-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mw-page-meta a { color: var(--mw-text-muted); }
.mw-page-meta a:hover { color: var(--mw-accent); }
.mw-content-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 220px;
gap: 48px;
max-width: var(--mw-container);
margin: 0 auto;
}
.mw-content-layout-narrow { grid-template-columns: minmax(0, var(--mw-narrow)); justify-content: center; }
.mw-content-layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
.mw-article {
max-width: var(--mw-narrow);
margin: 0 auto;
font-size: 17px;
line-height: 1.75;
color: #2a2a2a;
}
.mw-article > * { max-width: 100%; }
.mw-article h2 { margin-top: 1.6em; }
.mw-article h3 { margin-top: 1.4em; }
.mw-article img, .mw-article figure { border-radius: var(--mw-radius); margin: 1.5em 0; }
.mw-article figure { margin: 1.5em 0; }
.mw-article figcaption { font-size: 13px; color: var(--mw-text-soft); text-align: center; margin-top: 8px; font-style: italic; }
.mw-article a { color: var(--mw-accent); text-decoration: none; }
.mw-article a:hover { color: var(--mw-accent-dark); text-decoration: none; }
.mw-article hr { margin: 2.5em 0; }
.mw-article ul li::marker, .mw-article ol li::marker { color: var(--mw-accent); }
.mw-article > p:first-of-type { font-size: 1.18em; line-height: 1.65; color: #333; } .mw-toc-sidebar { position: sticky; top: calc(var(--mw-nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--mw-nav-h) - 48px); overflow-y: auto; }
.mw-toc { padding: 0; margin: 0; }
.mw-toc-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mw-text-soft); margin-bottom: 12px; font-weight: 500; padding-left: 12px; }
.mw-toc-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--mw-border); }
.mw-toc-list li { margin: 0; }
.mw-toc-list a {
display: block;
padding: 6px 12px;
font-size: 13px;
line-height: 1.45;
color: var(--mw-text-muted);
border-left: 2px solid transparent;
margin-left: -1px;
transition: all .15s ease;
}
.mw-toc-list a:hover { color: var(--mw-accent); }
.mw-toc-list a.is-active { color: var(--mw-accent); border-left-color: var(--mw-accent); font-weight: 500; }
.mw-toc-list .toc-h3 a { padding-left: 26px; font-size: 12.5px; } .mw-article-footer {
max-width: var(--mw-narrow);
margin: 56px auto 0;
padding-top: 32px;
border-top: 1px solid var(--mw-border);
}
.mw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mw-tag {
font-size: 12px;
padding: 4px 10px;
background: var(--mw-bg-soft);
border: 1px solid var(--mw-border);
border-radius: 99px;
color: var(--mw-text-muted);
font-weight: 500;
}
.mw-tag:hover { background: var(--mw-accent-soft); border-color: var(--mw-accent); color: var(--mw-accent); }
.mw-helpful {
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
padding: 20px 24px;
text-align: center;
margin-bottom: 32px;
}
.mw-helpful-q { font-family: var(--mw-serif); font-size: 1.25rem; margin-bottom: 14px; font-style: italic; color: var(--mw-text); }
.mw-helpful-btns { display: flex; justify-content: center; gap: 10px; }
.mw-helpful-btn {
padding: 8px 18px;
background: var(--mw-bg);
border: 1px solid var(--mw-border-strong);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--mw-text);
transition: all .15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.mw-helpful-btn:hover { background: var(--mw-accent-soft); border-color: var(--mw-accent); color: var(--mw-accent); }
.mw-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.mw-post-nav-link {
display: block;
padding: 18px 22px;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
transition: all .15s ease;
color: var(--mw-text);
}
.mw-post-nav-link:hover { border-color: var(--mw-accent); transform: translateY(-1px); color: var(--mw-text); }
.mw-post-nav-link.next { text-align: right; }
.mw-post-nav-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mw-text-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.mw-post-nav-link.next .mw-post-nav-label { justify-content: flex-end; }
.mw-post-nav-title { font-family: var(--mw-serif); font-size: 1.1rem; font-weight: 500; line-height: 1.3; } .mw-archive-header { text-align: center; margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid var(--mw-border-soft); }
.mw-archive-list { max-width: var(--mw-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mw-archive-item {
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
padding: 20px 24px;
transition: all .15s ease;
}
.mw-archive-item:hover { border-color: var(--mw-accent); box-shadow: var(--mw-shadow-sm); }
.mw-archive-item h3 { margin: 0 0 6px; font-family: var(--mw-serif); font-size: 1.25rem; font-weight: 500; }
.mw-archive-item h3 a { color: var(--mw-text); }
.mw-archive-item h3 a:hover { color: var(--mw-accent); }
.mw-archive-item .mw-archive-meta { font-size: 12px; color: var(--mw-text-soft); margin-bottom: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mw-archive-item .mw-archive-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mw-archive-item .mw-archive-meta svg { flex-shrink: 0; }
.mw-archive-item .mw-archive-excerpt { color: var(--mw-text-muted); font-size: 14.5px; line-height: 1.55; margin: 0; } .mw-sidebar { display: flex; flex-direction: column; gap: 28px; }
.widget {
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
padding: 22px 22px 18px;
}
.widget .mw-widget-title, .widget h2.widget-title, .widget h3.widget-title, .widget .widget-title, .widget .sidebar-heading {
font-family: var(--mw-serif);
font-size: 1.1rem;
font-weight: 500;
margin: 0 0 14px;
letter-spacing: -0.01em;
color: var(--mw-text);
padding-bottom: 8px;
border-bottom: 1px solid var(--mw-border-soft);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li {
padding: 7px 0;
border-top: 1px solid var(--mw-border-soft);
font-size: 13.5px;
margin: 0;
}
.widget li:first-child { border-top: 0; padding-top: 0; }
.widget li a { color: var(--mw-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.widget li a:hover { color: var(--mw-accent); }
.widget select { width: 100%; padding: 8px 10px; border: 1px solid var(--mw-border-strong); border-radius: var(--mw-radius-sm); background: var(--mw-bg); } .mw-comments-area { max-width: var(--mw-narrow); margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--mw-border); }
.mw-comments-area h2.comments-title { font-family: var(--mw-serif); font-size: 1.6rem; font-weight: 400; margin-bottom: 24px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list ol.children { list-style: none; padding-left: 32px; margin-top: 16px; }
.comment-body {
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius);
padding: 18px 22px;
margin-bottom: 16px;
}
.comment-body .comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.comment-body .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.comment-body .comment-author img { border-radius: 50%; width: 36px; height: 36px; }
.comment-body .comment-metadata { font-size: 12px; color: var(--mw-text-soft); }
.comment-body .comment-content { font-size: 14.5px; line-height: 1.6; color: var(--mw-text-muted); }
.comment-body .reply { margin-top: 10px; }
.comment-body .reply a { font-size: 13px; font-weight: 500; color: var(--mw-accent); }
.comment-respond { background: var(--mw-bg-card); border: 1px solid var(--mw-border); border-radius: var(--mw-radius); padding: 24px; }
.comment-respond h3.comment-reply-title { font-family: var(--mw-serif); font-size: 1.4rem; font-weight: 400; margin: 0 0 16px; }
.comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment, .comment-form-cookies-consent { margin-bottom: 14px; }
.comment-form label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--mw-text-muted); font-weight: 500; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--mw-border-strong);
border-radius: var(--mw-radius-sm);
background: var(--mw-bg);
font-size: 14px;
font-family: var(--mw-sans);
transition: border-color .15s ease;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--mw-accent); outline: 0; background: #fff; }
.comment-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.comment-form .form-submit input[type=submit], .form-submit input[type=submit] {
background: var(--mw-text); color: #fff;
padding: 10px 22px;
border: 0;
border-radius: var(--mw-radius-sm);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease;
}
.comment-form .form-submit input[type=submit]:hover, .form-submit input[type=submit]:hover { background: #000; } .mw-pagination { max-width: var(--mw-narrow); margin: 48px auto 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mw-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 10px;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: var(--mw-radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--mw-text-muted);
transition: all .15s ease;
}
.mw-pagination .page-numbers:hover { border-color: var(--mw-accent); color: var(--mw-accent); }
.mw-pagination .page-numbers.current { background: var(--mw-text); color: #fff; border-color: var(--mw-text); }
.mw-pagination .page-numbers.dots { background: transparent; border-color: transparent; } .mw-footer {
position: relative;
background: #0a0a0c;
color: rgba(255, 255, 255, 0.62);
padding: 72px 0 0;
margin-top: 96px;
font-size: 14px;
overflow: hidden;
}
.mw-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
var(--mw-accent) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
}
.mw-footer::after {
content: '';
position: absolute;
top: -240px;
right: -180px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(30, 64, 175, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.mw-footer .mw-container { position: relative; z-index: 1; }
.mw-footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1.2fr 1fr;
gap: 56px;
padding-bottom: 56px;
}
.mw-footer h2, .mw-footer h3, .mw-footer h4, .mw-footer h5, .mw-footer h6 { color: #fff; }
.mw-footer .widget { background: transparent; border: 0; padding: 0; }
.mw-footer-heading,
.mw-footer .widget .mw-widget-title,
.mw-footer .widget .widget-title,
.mw-footer .widget .sidebar-heading {
color: #fff;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-family: var(--mw-sans);
font-weight: 600;
margin: 0 0 18px;
padding: 0;
border: 0;
}
.mw-footer-list,
.mw-footer .widget ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mw-footer-list li,
.mw-footer .widget li {
margin: 0;
padding: 0;
border: 0;
}
.mw-footer-list a,
.mw-footer .widget li a {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
text-decoration: none;
transition: color .15s ease, transform .15s ease;
display: inline-block;
}
.mw-footer-list a:hover,
.mw-footer .widget li a:hover {
color: #fff;
transform: translateX(2px);
}
.mw-footer-brand-col { padding-right: 12px; }
.mw-footer-brand {
font-family: var(--mw-serif);
font-size: 1.7rem;
color: #fff;
font-weight: 500;
font-style: italic;
letter-spacing: -0.01em;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.mw-footer-brand .mw-brand-mark {
background: #fff;
color: #0a0a0c;
width: 36px;
height: 36px;
border-radius: 9px;
display: grid;
place-items: center;
font-family: var(--mw-sans);
font-style: normal;
font-weight: 600;
font-size: 16px;
}
.mw-footer-desc {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
line-height: 1.65;
max-width: 340px;
margin: 0 0 22px;
}
.mw-footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.mw-footer-social a {
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9px;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.6);
transition: all .2s ease;
background: rgba(255, 255, 255, 0.02);
}
.mw-footer-social a:hover {
border-color: rgba(255, 255, 255, 0.4);
color: #fff;
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
.mw-footer-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
margin: 0;
}
.mw-footer-bottom {
padding: 28px 0;
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(255, 255, 255, 0.42);
font-size: 13px;
flex-wrap: wrap;
gap: 14px;
}
.mw-footer-bottom a {
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
transition: color .15s ease;
}
.mw-footer-bottom a:hover { color: #fff; }
.mw-footer-bottom-right .mw-footer-nav,
.mw-footer-bottom-right ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
gap: 22px;
flex-wrap: wrap;
}
.mw-footer-bottom-right .mw-footer-nav li { margin: 0; padding: 0; } .mw-404 { text-align: center; padding: 80px 24px; max-width: 560px; margin: 0 auto; }
.mw-404 .mw-404-num { font-family: var(--mw-serif); font-size: 6rem; font-weight: 400; line-height: 1; color: var(--mw-accent); margin-bottom: 12px; font-style: italic; }
.mw-404 h1 { font-size: 2rem; margin-bottom: 14px; }
.mw-404 p { color: var(--mw-text-muted); margin-bottom: 28px; } @media (max-width: 1024px) {
.mw-content-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mw-toc-sidebar { display: none; }
.mw-content-layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
.mw-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
.mw-search-trigger { display: none; }
.mw-cta { display: none; }
.mw-mobile-search { display: inline-flex; }
.mw-menu-toggle { display: inline-flex; }
.mw-nav { display: none; position: fixed; top: var(--mw-nav-h); left: 0; right: 0; background: #fff; border-top: 1px solid var(--mw-border); padding: 16px 24px 24px; flex-direction: column; align-items: stretch; max-height: calc(100vh - var(--mw-nav-h)); overflow-y: auto; box-shadow: var(--mw-shadow-md); }
.mw-nav.is-open { display: flex; }
.mw-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
.mw-nav li { width: 100%; border-bottom: 1px solid var(--mw-border-soft); }
.mw-nav li:last-child { border-bottom: 0; }
.mw-nav a { padding: 14px 0; display: block; font-size: 15px; }
.mw-nav .current-menu-item > a::after, .mw-nav .current_page_item > a::after { display: none; }
.mw-nav .current-menu-item > a, .mw-nav .current_page_item > a { color: var(--mw-accent); }
.mw-nav .sub-menu, .mw-nav .children { position: static; box-shadow: none; border: 0; padding: 0 0 8px 16px; margin: 0; display: flex; }
.mw-nav .sub-menu a, .mw-nav .children a { padding: 8px 0; font-size: 14px; }
.mw-hero { padding: 40px 0 32px; }
.mw-hero h1 { font-size: 2rem; }
.mw-hero-search { padding: 12px 14px; font-size: 14px; }
.mw-section { padding: 40px 0; }
.mw-section-head { margin-bottom: 28px; }
.mw-cat-grid { grid-template-columns: 1fr; gap: 14px; }
.mw-cat-card { padding: 22px 20px; }
.mw-page-header { margin-bottom: 24px; padding-bottom: 20px; }
.mw-article { font-size: 16px; }
.mw-article > p:first-of-type { font-size: 1.08em; }
.mw-post-nav { grid-template-columns: 1fr; gap: 10px; }
.mw-post-nav-link.next { text-align: left; }
.mw-post-nav-link.next .mw-post-nav-label { justify-content: flex-start; }
.mw-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.mw-footer { padding: 40px 0 0; margin-top: 56px; }
.mw-footer-bottom { justify-content: center; text-align: center; flex-direction: column; }
.mw-search-modal { padding: 24px 12px 12px; }
.mw-search-input-wrap { padding: 14px 16px; }
.mw-search-result { padding: 10px 16px; }
.mw-comments-area { margin-top: 40px; }
.comment-list ol.children { padding-left: 16px; }
.mw-main { padding: 32px 0 56px; }
}
@media (max-width: 480px) {
.mw-container { padding: 0 16px; }
.mw-brand-tagline { display: none; }
.mw-hero-stats { gap: 16px; font-size: 11px; }
body { font-size: 15px; }
h1 { font-size: 1.85rem; }
.mw-search-input { font-size: 16px; } .mw-helpful-btns { flex-direction: column; }
.mw-helpful-btn { width: 100%; justify-content: center; }
} @media print {
.mw-header, .mw-footer, .mw-toc-sidebar, .mw-sidebar, .mw-helpful, .mw-post-nav, .mw-comments-area, .mw-search-trigger, .mw-mobile-search, .mw-menu-toggle, .mw-cta { display: none !important; }
.mw-content-layout { grid-template-columns: 1fr !important; }
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
.mw-article { font-size: 12pt; line-height: 1.55; }
} .alignleft { float: left; margin: 0 1.5em 1em 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 1em 1.5em; max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1100px; margin-left: -160px; margin-right: -160px; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
@media (max-width: 1100px) { .alignwide, .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 13px; color: var(--mw-text-soft); text-align: center; font-style: italic; padding-top: 6px; }
.bypostauthor { display: block; }
.sticky { position: relative; }
.sticky::before { content: '★'; position: absolute; top: 14px; right: 14px; color: var(--mw-accent); font-size: 14px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 1.5em 0; }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--mw-radius-sm); border: 1px solid var(--mw-border); }
.wp-block-image img { border-radius: var(--mw-radius); }
.wp-block-quote, .wp-block-pullquote { font-family: var(--mw-serif); font-style: italic; }
.wp-block-button__link { background: var(--mw-text); color: #fff; padding: 10px 22px; border-radius: var(--mw-radius-sm); font-weight: 500; }
.wp-block-button__link:hover { background: #000; color: #fff; }
.wp-block-code, .wp-block-preformatted { background: #1a1a1a; color: #f5f5f5; padding: 1em 1.4em; border-radius: var(--mw-radius); } #mywiki-page-loader { display: none; } .mw-modal-overlay {
position: absolute; inset: 0;
background: transparent;
z-index: -1;
}
body.mw-modal-open { overflow: hidden; }
.mw-search-close {
font-family: var(--mw-mono);
font-size: 11px;
color: var(--mw-text-muted);
border: 1px solid var(--mw-border-strong);
padding: 3px 8px;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.mw-search-close:hover { background: var(--mw-bg-soft); color: var(--mw-text); } .mw-search-empty {
padding: 56px 24px;
text-align: center;
color: var(--mw-text-soft);
font-size: 14px;
}
.mw-search-empty-title {
font-family: var(--mw-serif);
font-size: 19px;
color: var(--mw-text);
margin: 0 0 6px;
font-weight: 500;
}
.mw-search-empty-title em {
color: var(--mw-accent);
font-style: italic;
font-weight: 500;
}
.mw-search-empty-hint {
margin: 0;
font-size: 13.5px;
color: var(--mw-text-soft);
}
.mw-search-loading {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
padding: 40px 24px;
color: var(--mw-text-soft);
font-size: 13.5px;
}
.mw-spinner {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid var(--mw-border-strong);
border-top-color: var(--mw-accent);
animation: mwSpin .7s linear infinite;
}
@keyframes mwSpin { to { transform: rotate(360deg); } } .mw-search-group + .mw-search-group { border-top: 1px solid var(--mw-border); }
.mw-search-group-title {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mw-text-soft);
padding: 14px 20px 6px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.mw-search-group-count {
font-family: var(--mw-mono);
font-size: 10.5px;
color: var(--mw-text-faint);
background: var(--mw-bg-soft);
padding: 1px 7px;
border-radius: 999px;
letter-spacing: 0;
font-weight: 500;
}
.mw-search-group-list { list-style: none; margin: 0; padding: 0 0 8px; }
.mw-search-group-list li { margin: 0; } .mw-search-result-excerpt {
display: block;
font-size: 12.5px;
color: var(--mw-text-soft);
margin-top: 2px;
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.mw-search-result-crumbs {
display: block;
font-size: 11.5px;
color: var(--mw-text-faint);
margin-top: 4px;
font-family: var(--mw-mono);
letter-spacing: 0.01em;
}
.mw-search-result-arrow {
font-family: var(--mw-mono);
font-size: 12px;
color: var(--mw-text-faint);
align-self: center;
opacity: 0;
transition: opacity .12s ease, transform .12s ease;
}
.mw-search-result.is-active .mw-search-result-arrow,
.mw-search-result:hover .mw-search-result-arrow {
opacity: 1;
transform: translateX(2px);
}
.mw-search-result mark {
background: var(--mw-highlight);
padding: 0 2px;
border-radius: 2px;
color: var(--mw-text);
font-weight: 600;
}
.mw-search-footer-meta {
margin-left: auto;
color: var(--mw-text-faint);
} .mw-article-content h2, .mw-article-content h3 { position: relative; }
.mw-anchor-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
width: 22px; height: 22px;
border-radius: 4px;
color: var(--mw-text-faint);
opacity: 0;
transition: opacity .15s ease, background .15s ease, color .15s ease;
vertical-align: middle;
text-decoration: none;
}
.mw-article-content h2:hover .mw-anchor-link,
.mw-article-content h3:hover .mw-anchor-link {
opacity: 1;
}
.mw-anchor-link:hover { background: var(--mw-accent-soft); color: var(--mw-accent); } @media (max-width: 1023px) {
.mw-nav.is-open {
display: block;
position: fixed;
top: var(--mw-nav-h);
left: 0; right: 0;
background: var(--mw-bg-card);
border-bottom: 1px solid var(--mw-border);
padding: 16px 20px 24px;
box-shadow: var(--mw-shadow-md);
max-height: calc(100vh - var(--mw-nav-h));
overflow-y: auto;
z-index: 90;
}
.mw-nav.is-open ul {
display: flex;
flex-direction: column;
gap: 4px;
}
.mw-nav.is-open li { width: 100%; }
.mw-nav.is-open a {
display: block;
padding: 12px 14px;
border-radius: var(--mw-radius-sm);
font-size: 15px;
}
.mw-nav.is-open a:hover { background: var(--mw-bg-soft); }
body.mw-nav-open { overflow: hidden; }
} .mw-search-input-wrap button.mw-search-close { cursor: pointer; } @media (max-width: 640px) {
.mw-search-modal { padding: 0; }
.mw-search-box {
max-width: 100%;
border-radius: 0;
max-height: 100vh;
height: 100vh;
}
.mw-search-footer { font-size: 10.5px; padding: 8px 14px; }
.mw-search-footer-meta { display: none; }
}
.mw-helpful-btn.is-selected { background: var(--mw-accent); border-color: var(--mw-accent); color: #fff; }
.mw-helpful-btn:disabled { cursor: default; opacity: 0.85; }
.mw-helpful-feedback {
margin-top: 14px;
font-family: var(--mw-serif);
font-style: italic;
font-size: 1rem;
color: var(--mw-accent);
} .mw-header-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: 1px solid var(--mw-border-strong);
border-radius: 8px;
background: var(--mw-bg-card);
width: 200px;
transition: border-color .15s, box-shadow .15s;
}
.mw-header-search:focus-within {
border-color: var(--mw-accent);
box-shadow: 0 0 0 3px var(--mw-accent-soft);
}
.mw-header-search > svg { color: var(--mw-text-soft); flex-shrink: 0; }
.mw-header-search-input {
flex: 1;
border: 0;
background: transparent;
outline: 0;
font-size: 13.5px;
color: var(--mw-text);
min-width: 0;
font-family: inherit;
}
.mw-header-search-input::placeholder { color: var(--mw-text-faint); }
.mw-hero-search-wrap {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border-strong);
border-radius: 12px;
width: 100%;
max-width: 460px;
margin: 0 auto;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
transition: border-color .15s, box-shadow .15s;
z-index: 20;
}
.mw-hero-search-wrap:focus-within {
border-color: var(--mw-accent);
box-shadow: 0 0 0 3px var(--mw-accent-soft);
z-index: 30;
}
.mw-hero-search-icon { color: var(--mw-text-soft); display: inline-flex; }
.mw-hero-search-input {
flex: 1;
border: 0;
background: transparent;
outline: 0;
font-size: 15px;
color: var(--mw-text);
min-width: 0;
font-family: inherit;
}
.mw-hero-search-input::placeholder { color: var(--mw-text-faint); } .mw-suggest-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--mw-bg-card);
border: 1px solid var(--mw-border);
border-radius: 12px;
box-shadow: 0 24px 48px -16px rgba(15,15,20,0.18), 0 0 0 1px rgba(15,15,20,0.02);
max-height: 480px;
overflow-y: auto;
z-index: 1000;
}
.mw-hero-search-wrap .mw-suggest-panel { max-width: 100%; }
.mw-header-search .mw-suggest-panel { min-width: 380px; left: auto; right: 0; max-width: calc(100vw - 32px); }
.mw-suggest-empty { padding: 28px 20px; text-align: center; }
.mw-suggest-empty-title {
font-family: var(--mw-serif);
font-size: 17px;
color: var(--mw-text);
font-weight: 500;
margin: 0 0 4px;
}
.mw-suggest-empty-title em { color: var(--mw-accent); font-style: italic; }
.mw-suggest-empty-hint { margin: 0; font-size: 13px; color: var(--mw-text-soft); }
.mw-suggest-loading {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
padding: 24px 20px;
color: var(--mw-text-soft);
font-size: 13px;
}
.mw-suggest-group + .mw-suggest-group { border-top: 1px solid var(--mw-border); }
.mw-suggest-group-title {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mw-text-soft);
padding: 12px 16px 6px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.mw-suggest-group-count {
font-family: var(--mw-mono);
font-size: 10px;
color: var(--mw-text-faint);
background: var(--mw-bg-soft);
padding: 1px 6px;
border-radius: 999px;
font-weight: 500;
letter-spacing: 0;
}
.mw-suggest-group-list { list-style: none; margin: 0; padding: 0 0 6px; }
.mw-suggest-group-list li { margin: 0; }
.mw-suggest-result {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 16px;
color: var(--mw-text);
border-left: 3px solid transparent;
text-decoration: none;
transition: background .1s, border-color .1s;
}
.mw-suggest-result:hover,
.mw-suggest-result.is-active {
background: var(--mw-bg-soft);
border-left-color: var(--mw-accent);
color: var(--mw-text);
}
.mw-suggest-result-icon {
width: 24px; height: 24px;
border-radius: 6px;
background: var(--mw-accent-soft);
color: var(--mw-accent);
display: grid; place-items: center;
flex-shrink: 0;
margin-top: 1px;
}
.mw-suggest-result-body { flex: 1; min-width: 0; }
.mw-suggest-result-title {
display: block;
font-size: 13.5px;
font-weight: 500;
color: var(--mw-text);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mw-suggest-result-excerpt {
display: block;
font-size: 12px;
color: var(--mw-text-soft);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mw-suggest-result-crumbs {
display: block;
font-size: 11px;
color: var(--mw-text-faint);
margin-top: 3px;
font-family: var(--mw-mono);
}
.mw-suggest-result-arrow {
font-family: var(--mw-mono);
font-size: 11px;
color: var(--mw-text-faint);
align-self: center;
opacity: 0;
transition: opacity .12s;
}
.mw-suggest-result:hover .mw-suggest-result-arrow,
.mw-suggest-result.is-active .mw-suggest-result-arrow { opacity: 1; }
.mw-suggest-result mark {
background: var(--mw-highlight);
padding: 0 2px;
border-radius: 2px;
color: var(--mw-text);
font-weight: 600;
}
.mw-suggest-foot {
border-top: 1px solid var(--mw-border);
padding: 8px 16px;
background: var(--mw-bg);
display: flex;
gap: 14px;
font-size: 11px;
color: var(--mw-text-soft);
align-items: center;
} @media (max-width: 1023px) {
.mw-header-search { display: none; }
body.mw-header-search-open .mw-header-search {
display: flex;
position: fixed;
top: var(--mw-nav-h);
left: 16px;
right: 16px;
width: auto;
z-index: 95;
}
}
@media (min-width: 1024px) {
.mw-mobile-search { display: none; }
}