:root{
  --bg:#f6f0e5;
  --bg-alt:#e7f0f6;
  --card:#ffffffd9;
  --ink:#1d2433;
  --muted:#5f6877;
  --line:#d6dfec;
  --line-strong:#b6c2d6;
  --accent:#0f766e;
  --accent-2:#b45309;
  --link:#1d4ed8;
  --shadow:0 14px 40px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1200px 420px at 8% -20%, #fff7dd 0%, transparent 65%),
    radial-gradient(1000px 360px at 92% -12%, #d9f0ff 0%, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-alt));
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:26px 16px 64px}
.navline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 14px;
  box-shadow:var(--shadow);
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px 20px;
  margin:14px 0;
  box-shadow:var(--shadow);
  backdrop-filter:blur(4px);
}
.h1,.content h1,.content h2,.content h3{
  font-family:"Sora","Avenir Next","Segoe UI",sans-serif;
  letter-spacing:-.015em;
}
.h1{font-size:clamp(1.85rem,3.8vw,2.75rem);line-height:1.12;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.archive-excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  margin:.35rem 0 0;
}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.pill{
  font-size:.82rem;
  background:linear-gradient(180deg,#ecfeff,#d1fae5);
  color:#065f46;
  border:1px solid #99f6e4;
  padding:4px 11px;
  border-radius:999px;
}
.content p{line-height:1.78;margin:.72rem 0}
.content ul,.content ol{line-height:1.75;padding-left:1.35rem}
.content h2{margin-top:1.18rem;margin-bottom:.48rem}
.content h3{margin-top:1rem;margin-bottom:.42rem}
.content code{
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.92em;
  background:#edf2ff;
  border:1px solid #dbeafe;
  border-radius:6px;
  padding:.08rem .38rem;
}
.content pre{
  overflow:auto;
  background:#0f172a;
  color:#e2e8f0;
  border-radius:12px;
  padding:12px 14px;
}
.content blockquote{
  margin:.9rem 0;
  padding:.6rem .85rem;
  border-left:4px solid var(--accent-2);
  background:#fff7ed;
  color:#7c2d12;
  border-radius:8px;
}
.content hr{
  border:none;
  border-top:1px dashed var(--line-strong);
  margin:1.2rem 0;
}
.table-wrap{width:100%;overflow:auto}
.content table{
  border-collapse:collapse;
  min-width:540px;
  width:100%;
  margin:.78rem 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.content th,.content td{
  border:1px solid var(--line);
  padding:.55rem .62rem;
  text-align:left;
}
.content th{
  background:#f8fafc;
  font-family:"Sora","Avenir Next","Segoe UI",sans-serif;
  font-weight:600;
}
.content .md-inline-image{
  display:block;
  width:100%;
  max-width:760px;
  margin:.8rem auto;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(15,23,42,.12);
}
.intro{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#f8fbff,#eff6ff);
  border-radius:14px;
  padding:12px 14px;
  margin:.9rem 0 1rem;
}
html[data-theme="dark"] .intro{
  border-color:rgba(95,128,178,.55);
  background:linear-gradient(180deg, rgba(20,34,61,.88), rgba(13,24,44,.82));
  color:#dfe8fb;
}
.intro p{margin:0}
.intro p + p{margin-top:.68rem}
.katex-display{
  overflow-x:auto;
  overflow-y:hidden;
  padding:.2rem 0;
}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.related{display:grid;grid-template-columns:1fr;gap:10px}
.related a{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:linear-gradient(180deg,#f8faff,#f1f5f9);
  transition:transform .12s ease, border-color .12s ease;
}
.related a:hover{
  text-decoration:none;
  border-color:#93c5fd;
  transform:translateY(-1px);
}
.action-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.action-row a{text-decoration:none}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #fff), color-mix(in srgb, var(--accent) 78%, #000));
  color:#101014;
  font-weight:700;
  letter-spacing:.01em;
}
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 90%, transparent);
  color:var(--ink);
  font-weight:600;
}
.spoiler-panel{
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
}
.spoiler-panel > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:700;
  color:var(--ink);
}
.spoiler-panel > summary::-webkit-details-marker{display:none}
.spoiler-panel > summary::after{
  content:"▾";
  float:right;
  color:var(--muted);
}
.spoiler-panel[open] > summary::after{
  content:"▴";
}
.spoiler-panel .content{
  padding:0 12px 12px;
}
.archive-toolbar{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.field{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.field:focus{
  outline:2px solid #bfdbfe;
  border-color:#60a5fa;
}
.count-note{margin:.2rem 0 0;color:var(--muted)}

/* Unified shell (consistent with main UI) */
:root{
  --bg:#f9f5ee;
  --bg-alt:#f1ebfb;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#667085;
  --line:#d8dceb;
  --line-strong:#b6c2d6;
  --accent:#d97706;
  --brand:#7c3aed;
}
html[data-theme="dark"]{
  --bg:#0a1121;
  --bg-alt:#101b35;
  --card:#111f3b;
  --ink:#e8eefb;
  --muted:#a8b4cb;
  --line:#30496f;
  --line-strong:#4a628a;
  --accent:#e39a37;
  --brand:#e39a37;
}
html,body{
  min-height:100%;
}
body{
  position:relative;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 15% 9%, rgba(152,177,225,.2), transparent 33%),
    radial-gradient(circle at 86% 12%, rgba(227,154,55,.13), transparent 31%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);
}
.wrap{
  position:relative;
  z-index:1;
  width:min(940px, calc(100% - 32px));
  max-width:none;
  margin:0 auto;
  padding:0 0 64px;
}
.navline{display:none}
.site-header{
  margin-top:0;
  padding:18px 0 8px;
}
.brand-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}
.brand-link:hover,
.brand-link:focus,
.brand-link:focus-visible{
  text-decoration:none;
}
.brand-icon{
  font-size:32px;
  line-height:1;
}
.brand-title{
  display:block;
  font-family:"Merriweather",Georgia,serif;
  font-weight:700;
  font-size:clamp(1.8rem,2.3vw,2.4rem);
  line-height:1.08;
  color:var(--accent);
}
.brand-subtitle{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.98rem;
}
.header-meta{
  display:grid;
  gap:8px;
  justify-items:end;
}
.header-controls{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.theme-toggle{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background:color-mix(in srgb, var(--brand) 11%, transparent);
  color:var(--brand);
  font-size:1.1rem;
  cursor:pointer;
}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.lang-switch-label{
  display:none;
}
.lang-option{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:1px 0 3px;
  border-radius:0;
  border-bottom:1.5px solid transparent;
  text-decoration:none;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  color:color-mix(in srgb, var(--ink) 66%, transparent);
  transition:color .14s ease, border-color .14s ease, opacity .14s ease;
}
.lang-option:hover,
.lang-option:focus-visible{
  color:var(--brand);
  text-decoration:none;
  border-bottom-color:color-mix(in srgb, var(--brand) 34%, transparent);
}
.lang-option.active{
  color:var(--brand);
  border-bottom-color:var(--brand);
}
.main-nav{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.main-nav a{
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px;
  font-size:.86rem;
  font-weight:600;
  color:color-mix(in srgb, var(--ink) 85%, transparent);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.main-nav a.active{
  color:var(--brand);
  border-color:color-mix(in srgb, var(--brand) 32%, var(--line));
  background:color-mix(in srgb, var(--brand) 10%, var(--card));
}
html[data-theme="dark"] .main-nav a{
  border-color:rgba(117,142,187,.56);
  background:rgba(10,18,36,.56);
  color:#d6dff1;
}
html[data-theme="dark"] .main-nav a.active{
  color:#101b31;
  border-color:#e9eff9;
  background:#e9eff9;
}
html[data-theme="dark"] .lang-switch{
  border:0;
  background:transparent;
  box-shadow:none;
}
html[data-theme="dark"] .lang-switch-label{
  display:none;
}
html[data-theme="dark"] .lang-option{
  color:#c8d7f1;
}
html[data-theme="dark"] .lang-option.active{
  color:#eaf0fc;
  border-bottom-color:#eaf0fc;
}
.site-footer{
  margin:24px 0 28px;
  color:var(--muted);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer-links a{
  color:inherit;
  text-decoration:none;
}
.footer-links a:hover{
  text-decoration:underline;
}
.copy{
  margin:0;
  font-size:.85rem;
}
.card{
  background:color-mix(in srgb, var(--card) 96%, var(--bg));
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
html[data-theme="dark"] .card{
  border-color:rgba(90,122,173,.45);
  background:linear-gradient(166deg, rgba(18,30,56,.9), rgba(14,25,46,.78));
  box-shadow:0 20px 36px rgba(4,8,16,.38);
}
html[data-theme="dark"] .btn-primary{
  color:#1b1308;
}
html[data-theme="dark"] .btn-secondary{
  border-color:rgba(117,142,187,.56);
  background:rgba(10,18,36,.56);
  color:#d6dff1;
}
html[data-theme="dark"] .spoiler-panel{
  border-color:rgba(117,142,187,.56);
  background:rgba(10,18,36,.44);
}
.muted,.count-note{color:var(--muted)}
.field{
  border-color:var(--line-strong);
  background:color-mix(in srgb, var(--card) 95%, var(--bg));
  color:var(--ink);
}
select.field{
  -webkit-appearance:none;
  appearance:none;
  padding-right:3rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 17px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
select.field::-ms-expand{display:none}
html[data-theme="dark"] .field{
  border-color:rgba(87,115,162,.5);
  background:rgba(10,18,36,.6);
}
@media (max-width:860px){
  .wrap{
    width:calc(100% - 24px);
  }
  .main-nav{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  .main-nav a{
    white-space:nowrap;
  }
}
@media (max-width:540px){
  .site-header{
    padding-top:14px;
  }
  .brand-icon{
    font-size:30px;
  }
  .brand-link{
    flex:1;
    min-width:0;
  }
  .brand-title{
    white-space:nowrap;
    font-size:clamp(1.66rem, 7vw, 1.88rem);
    letter-spacing:-.01em;
  }
  .brand-subtitle{
    font-size:.91rem;
  }
  .header-meta{
    gap:6px;
  }
  .header-controls{
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
  }
  .header-controls .theme-toggle{
    order:1;
  }
  .header-controls .lang-switch{
    order:2;
  }
  .theme-toggle{
    width:38px;
    height:38px;
  }
}
@media (min-width:820px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive-toolbar{grid-template-columns:1.4fr .9fr .9fr}
}