:root {
  --bg:#f4f4ed; --surface:#fffef9; --ink:#252d29; --muted:#737970;
  --border:#dddfd4; --accent:#c8ed73; --accent-ink:#243021; --soft:#e9ecdf;
  --error:#993d36; color-scheme:light;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
:root.dark {
  --bg:#1b211e; --surface:#242c27; --ink:#eff1e8; --muted:#a1aa9e;
  --border:#39423a; --soft:#303a2e; --error:#f0a79f; color-scheme:dark;
}
* {box-sizing:border-box}
body {margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased}
button,input,select {font:inherit}
button,a,select {-webkit-tap-highlight-color:transparent}
button,select {cursor:pointer}
button:disabled {cursor:wait; opacity:.6}
a {color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible {outline:2px solid var(--ink); outline-offset:3px}
[hidden] {display:none!important}
.shell {max-width:960px; margin:auto; padding:0 28px 28px}
.header {height:66px; display:flex; align-items:center; justify-content:space-between}
.brand {display:flex; gap:9px; align-items:center; text-decoration:none; font-size:15px; font-weight:650; letter-spacing:-.25px}
.brand-icon {display:grid; place-items:center; background:var(--accent); width:30px; height:30px; border-radius:10px}
.brand-icon svg {width:20px; height:20px; fill:none; stroke:var(--accent-ink); stroke-width:1.7; stroke-linejoin:round}
.header-note {color:var(--muted); font-size:12px}
.search-panel {position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0 4px; border-bottom:1px solid var(--border)}
.search-form {height:54px; display:flex; align-items:center; padding:6px 6px 6px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px}
.search-form:focus-within {border-color:#8ca855; box-shadow:0 0 0 2px #a1c86620}
.search-icon {width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.7; flex-shrink:0}
.search-form input {min-width:0; flex:1; border:0; background:transparent; color:var(--ink); height:100%; padding:0 10px; font-size:16px; outline:none}
.search-form input::placeholder {color:var(--muted)}
.search-form input::-webkit-search-cancel-button {display:none}
.submit {width:40px; height:40px; border:0; background:var(--accent); border-radius:10px; display:grid; place-items:center; flex-shrink:0}
.submit svg {width:22px; height:22px; stroke:var(--accent-ink); stroke-width:1.8; fill:none}
.clear {border:0; background:none; font-size:25px; color:var(--muted); width:34px; height:40px}
.filters {display:flex; gap:7px; overflow:auto; padding:12px 2px 9px; scrollbar-width:none; scroll-padding:2px}
.filters::-webkit-scrollbar {display:none}
.filter {white-space:nowrap; flex-shrink:0; border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:24px; padding:9px 14px; font-size:12px; min-height:36px}
.filter:hover {background:var(--soft); color:var(--ink)}
.filter.active {background:var(--ink); color:var(--bg); border-color:var(--ink)}
.demo-note {margin:0 0 6px; color:var(--muted); font-size:10px}
.results-bar {display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px}
#result-count {color:var(--muted); font-size:12px}
.refresh {border:0; background:var(--soft); color:var(--ink); font-size:11px; padding:8px 10px; margin-left:8px; border-radius:9px}
select {max-width:160px; background:transparent; border:0; color:var(--muted); font-size:12px; padding:10px 0; min-height:40px}
.cards {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.card {background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:20px; display:flex; flex-direction:column; min-height:218px}
.card-top {display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.card-category {font-size:10px; font-weight:500; color:var(--muted)}
.card-top time {font-size:10px; color:var(--muted); white-space:nowrap}
.card h3 {font-size:17px; line-height:1.4; letter-spacing:-.25px; font-weight:600; margin:0 0 9px; overflow-wrap:anywhere}
.snippet {font-size:13px; font-weight:400; color:var(--muted); line-height:1.6; margin:0 0 14px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere}
.card-bottom {display:flex; justify-content:flex-end; margin-top:auto}
.post-link {display:flex; gap:14px; align-items:center; padding:7px 0 3px; min-height:32px; text-decoration:none; font-size:12px; font-weight:500}
.post-link span {font-size:18px; color:#829b60}
.post-link:hover {text-decoration:underline}
mark {background:#c8ed7355; color:inherit; border-radius:2px}
#status {border:1px dashed var(--border); border-radius:15px; text-align:center; padding:30px 18px; margin-bottom:12px; line-height:1.65; color:var(--muted); font-size:13px}
#status.error {color:var(--error)}
.retry,.more {padding:12px 22px; border:1px solid var(--border); border-radius:12px; color:var(--ink); background:transparent; font-size:12px}
.retry {display:block; margin:14px auto 0; background:var(--accent); color:var(--accent-ink); border:0}
.more {display:block; margin:22px auto 0; min-height:42px}
.more span {margin-left:18px}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skeleton {height:218px; border-radius:15px; background:linear-gradient(100deg,var(--soft) 35%,var(--surface) 50%,var(--soft) 65%); background-size:300% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer {to{background-position:-150% 0}}
@media(max-width:640px) {
  .shell {padding:0 14px 22px}
  .header {height:54px}
  .brand {font-size:14px}
  .brand-icon {width:28px; height:28px; border-radius:9px}
  .search-panel {padding-top:5px}
  .search-form {height:52px; padding-left:12px}
  .filters {padding-top:10px; gap:6px}
  .filter {font-size:11px; padding:8px 12px}
  .results-bar {min-height:44px}
  #result-count,select {font-size:11px}
  .cards {grid-template-columns:1fr; gap:10px}
  .card {padding:16px; min-height:192px; border-radius:14px}
  .card h3 {font-size:16px}
  .snippet {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {*{animation:none!important; transition:none!important}}