:root{
  --accent:#de5833;
  --accent-soft:#fdeee9;
  --bg:#ffffff;
  --bg-alt:#f7f5f3;
  --card:#ffffff;
  --ink:#1c1b19;
  --ink-soft:#585552;
  --line:#e4e0dc;
  --link:#1b64c9;
  --visited:#6b3fa0;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  color-scheme:light;
}
html[data-theme="dark"]{
  --accent:#ff7f4d;
  --accent-soft:#3a2018;
  --bg:#16181c;
  --bg-alt:#1d2026;
  --card:#1d2026;
  --ink:#e8e6e3;
  --ink-soft:#a5a29e;
  --line:#2e333b;
  --link:#79aaff;
  --visited:#c4a3ff;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  display:flex;flex-direction:column;min-height:100%;
}
a{color:var(--link)}
h1,h2,h3{line-height:1.25;letter-spacing:-.02em;margin:0}
.muted{color:var(--ink-soft);font-weight:400}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:800}
.brand-mark{filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.brand--lg{font-size:clamp(2.4rem,8vw,3.6rem);letter-spacing:-.045em}
.brand--lg .brand-mark{font-size:1.15em}
.brand-accent{color:var(--accent)}
.brand--sm{font-size:1.25rem;flex:0 0 auto}
.brand--sm .brand-mark{font-size:1.4rem}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem;
  padding:.7rem clamp(.75rem,3vw,1.5rem);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.theme-toggle{
  flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);
  width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;font-size:1rem;
}
.theme-toggle:hover{border-color:var(--accent)}

/* ---------- search bar ---------- */
.searchbar{position:relative;display:flex;align-items:center;width:100%}
.search-input{
  width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:.7rem 5rem .7rem 1.1rem;font-size:1rem;font-family:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.search-input::-webkit-search-cancel-button{display:none}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.searchbar--lg{max-width:37rem;margin:0 auto}
.searchbar--lg .search-input{padding:1rem 5.6rem 1rem 1.4rem;font-size:1.12rem;box-shadow:var(--shadow)}
.searchbar--sm{max-width:34rem}
.search-go,.search-clear{
  position:absolute;border:0;background:transparent;cursor:pointer;font-size:1rem;color:var(--ink-soft);
}
.search-clear{right:2.9rem;padding:.35rem;line-height:1;border-radius:50%}
.search-clear:hover{color:var(--ink)}
.search-go{
  right:.35rem;background:var(--accent);color:#fff;width:2.3rem;height:2.3rem;border-radius:50%;
}
.searchbar--lg .search-go{width:2.7rem;height:2.7rem;right:.45rem}
.searchbar--lg .search-clear{right:3.5rem}
.search-go:hover{filter:brightness(1.07)}

.suggestions{
  position:absolute;z-index:9;left:50%;transform:translateX(-50%);width:min(37rem,100%);
  margin-top:.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;text-align:left;
}
.suggestions button{
  display:flex;gap:.6rem;width:100%;border:0;background:transparent;color:var(--ink);
  padding:.6rem 1.1rem;font:inherit;text-align:left;cursor:pointer;align-items:center;
}
.suggestions button:hover,.suggestions button[aria-selected="true"]{background:var(--bg-alt)}
.suggestions .sg-kind{color:var(--ink-soft);font-size:.8rem;margin-left:auto}

/* ---------- home ---------- */
.view{flex:1}
.home{display:flex;justify-content:center;padding:clamp(2rem,7vh,5rem) 1.25rem 3rem}
.home-inner{width:100%;max-width:60rem;text-align:center;position:relative}
.tagline{color:var(--ink-soft);max-width:34rem;margin:.9rem auto 1.8rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0;margin:1.4rem 0 0}
.chips button{
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  padding:.4rem .85rem;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer;
}
.chips button:hover{border-color:var(--accent);color:var(--ink)}

.recents{max-width:34rem;margin:2rem auto 0;text-align:left;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;background:var(--bg-alt)}
.recents-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.recents h2{font-size:.95rem}
.linkish{border:0;background:none;color:var(--link);font:inherit;font-size:.9rem;cursor:pointer;padding:0;text-decoration:underline}
.recents-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.recents-list button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.88rem;cursor:pointer}

.pillars{list-style:none;padding:0;margin:3.5rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));text-align:left}
.pillars li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.pillars span{font-size:1.5rem}
.pillars h3{font-size:1rem;margin:.4rem 0 .25rem}
.pillars p{margin:0;color:var(--ink-soft);font-size:.93rem}

/* ---------- results ---------- */
.results{padding:0 clamp(.75rem,3vw,1.5rem) 3rem}
.tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:1.25rem;scrollbar-width:thin}
.tabs button{
  border:0;background:none;color:var(--ink-soft);font:inherit;font-size:.93rem;cursor:pointer;
  padding:.75rem .9rem;border-bottom:2px solid transparent;white-space:nowrap;
}
.tabs button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabs button:hover{color:var(--ink)}
.results-grid{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,20rem);gap:2rem;max-width:64rem}
.results-main{min-width:0}
.result-count{color:var(--ink-soft);font-size:.86rem;margin:0 0 1rem}
.result-list{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.result-site{font-size:.82rem;color:var(--ink-soft);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.result-kind{margin-left:auto;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.74rem;letter-spacing:.02em;border-radius:999px;padding:.12rem .55rem}
.result-title{font-size:1.15rem;margin:.15rem 0 .2rem}
.result-title button,.result-title a{border:0;background:none;padding:0;font:inherit;color:var(--link);cursor:pointer;text-align:left;text-decoration:none;display:inline}
.result-title button:hover,.result-title a:hover{text-decoration:underline}
.result-list li.seen .result-title button,.result-list li.seen .result-title a:visited{color:var(--visited)}
.result-title a::after{content:"↗";margin-left:.3em;font-size:.8em;color:var(--ink-soft)}
.result-snip{margin:0;color:var(--ink-soft)}
.result-snip mark,.doc mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 .15em}
.result-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:.45rem 0 0}
.result-tags button{border:0;background:var(--bg-alt);color:var(--ink-soft);border-radius:999px;padding:.15rem .6rem;font:inherit;font-size:.78rem;cursor:pointer}
.result-tags button:hover{color:var(--accent)}

.instant{
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow);padding:1.1rem 1.25rem;margin-bottom:1.5rem;
}
.instant-label{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:700}
.instant-answer{font-size:1.65rem;font-weight:700;margin:.3rem 0;word-break:break-word;letter-spacing:-.02em}
.instant-note{margin:0;color:var(--ink-soft);font-size:.92rem}
.instant table{border-collapse:collapse;width:100%;margin-top:.5rem;font-size:.92rem}
.instant td{padding:.28rem .5rem .28rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.instant code{background:var(--bg-alt);padding:.1rem .35rem;border-radius:5px;font-size:.88em}
.swatch{display:inline-block;width:1.6rem;height:1.6rem;border-radius:6px;border:1px solid var(--line);vertical-align:-.35rem;margin-right:.45rem}

.results-side{display:grid;gap:1rem;align-content:start}
.side-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);padding:1rem 1.1rem}
.side-card h2{font-size:.95rem;margin-bottom:.5rem}
.side-card p{margin:0;color:var(--ink-soft);font-size:.92rem}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.side-list button,.side-list a{border:0;background:none;color:var(--link);font:inherit;font-size:.93rem;text-align:left;padding:0;cursor:pointer;text-decoration:none}
.side-list button:hover,.side-list a:hover{text-decoration:underline}
.side-list a.side-external::after{content:" ↗";color:var(--ink-soft)}

/* ---------- document ---------- */
.doc{max-width:44rem;margin:0 auto;padding:1.75rem clamp(1rem,4vw,1.5rem) 4rem}
.crumbs{font-size:.85rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.9rem}
.crumbs button{border:0;background:none;color:var(--link);font:inherit;font-size:inherit;padding:0;cursor:pointer}
.crumbs button:hover{text-decoration:underline}
.doc h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin-bottom:.4rem}
.doc-meta{color:var(--ink-soft);font-size:.86rem;margin:0 0 1.5rem}
.doc-body p{font-size:1.06rem;margin:0 0 1.15rem}
.doc-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc-nav button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:.45rem 1rem;font:inherit;font-size:.92rem;cursor:pointer}
.doc-nav button:hover{border-color:var(--accent);color:var(--accent)}
.related{margin-top:2rem;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.related h2{font-size:.95rem;margin-bottom:.6rem}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line);background:var(--bg-alt);color:var(--ink-soft);
  font-size:.85rem;padding:1rem clamp(.75rem,3vw,1.5rem);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
}
.foot-links{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.linkish--foot{font-size:.85rem;color:var(--ink-soft)}
.linkish--foot:hover{color:var(--accent)}

@media (max-width:900px){
  .results-grid{grid-template-columns:minmax(0,1fr)}
  .results-side{order:2}
}
@media (max-width:600px){
  .topbar{flex-wrap:wrap}
  .searchbar--sm{order:3;flex-basis:100%;max-width:none}
  .theme-toggle{margin-left:auto}
  .pillars{margin-top:2.5rem}
}
@media (prefers-reduced-motion:no-preference){
  .result-list li,.instant,.doc{animation:rise .22s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}