:root { --ink:#1b2422; --muted:#72807a; --line:#dfe6df; --paper:#f7f8f4; --sage:#dbe9dc; --accent:#2e6b53; --gold:#c38a43; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { max-width:1440px; margin:auto; padding:42px 5vw 80px; }
.hero { max-width:760px; }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:680px; }
.eyebrow,.section-label,.viewer-label { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; }
.dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--gold); }
.docs-link { color:var(--accent); font-size:12px; font-weight:700; text-underline-offset:3px; }
.hero-links { display:flex; gap:18px; }
.docs-link:hover { color:var(--ink); }
h1 { margin:24px 0 13px; font:700 clamp(42px,6vw,76px)/.98 Georgia, serif; letter-spacing:-.05em; }
h1 em { color:var(--accent); font-weight:400; }
.lede { max-width:570px; color:var(--muted); font-size:17px; line-height:1.55; }
.search-modes { display:inline-flex; gap:3px; margin-top:31px; padding:3px; background:#e9eee9; border-radius:9px; }
.search-modes button { padding:7px 13px; color:var(--muted); background:transparent; border:0; border-radius:7px; cursor:pointer; font-size:12px; font-weight:700; }
.search-modes button[aria-pressed="true"] { color:#fff; background:var(--accent); box-shadow:0 2px 7px #1b3e3026; }
.search-modes button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.search-wrap { display:flex; align-items:center; gap:14px; max-width:680px; margin-top:10px; padding:8px 13px 8px 17px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 35px #263d3110; }
.search-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px #2e6b5314; }
.search-wrap svg { width:21px; height:21px; fill:none; stroke:var(--muted); stroke-width:1.8; }
input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); background:transparent; font-size:17px; }
kbd { padding:5px 8px; color:var(--muted); background:#f2f4ef; border:1px solid var(--line); border-radius:6px; font-size:11px; }
.meta { display:flex; justify-content:space-between; max-width:680px; padding:13px 2px 0; color:var(--muted); font-size:12px; }
.hint { color:#a0aaa3; }
.content { display:grid; grid-template-columns:330px minmax(0,1fr); gap:38px; margin-top:54px; border-top:1px solid var(--line); padding-top:25px; }
.section-label { padding:0 0 15px; color:var(--muted); }
.section-label span { color:var(--accent); letter-spacing:0; text-transform:none; font-weight:500; }
.results { display:flex; flex-direction:column; gap:7px; max-height:680px; overflow:auto; padding-right:8px; }
.result { display:block; width:100%; padding:14px 15px; text-align:left; background:transparent; border:1px solid transparent; border-radius:10px; cursor:pointer; transition:.18s ease; }
.result:hover { background:#fff; border-color:var(--line); transform:translateX(2px); }
.result.active { background:var(--sage); border-color:#bfd5c2; }
.result-title { display:block; overflow:hidden; color:var(--ink); font:600 16px/1.3 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.result-excerpt { display:-webkit-box; overflow:hidden; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.result-meta { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:11px; }
.score { color:var(--accent); }
.timestamp { color:var(--muted); opacity:0.85; font-variant-numeric:tabular-nums; }
.viewer { min-width:0; min-height:450px; }
.empty-view { display:grid; place-items:center; align-content:center; min-height:460px; color:var(--muted); border:1px dashed #ccd8cd; border-radius:14px; background:linear-gradient(135deg,#f5f8f3,#edf3ed); text-align:center; }
.empty-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:12px; color:var(--gold); background:#fff8eb; border-radius:50%; font-size:25px; }
.empty-view h2 { margin:0; color:var(--ink); font:600 27px Georgia,serif; }.empty-view p { margin:7px 0; font-size:14px; }
.hidden { display:none !important; }
.viewer-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:13px; }.selected-title { max-width:500px; margin:4px 0 0; color:var(--ink); font:600 22px/1.2 Georgia,serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.controls { display:flex; align-items:center; gap:8px; }.controls button { width:36px; height:34px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:21px; }.controls button:hover { color:#fff; background:var(--accent); }.controls .reset { width:auto; padding:0 11px; font-size:12px; }.download { display:inline-flex; align-items:center; height:34px; padding:0 12px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; }.download:hover { color:#fff; background:#245640; }.controls span { min-width:37px; color:var(--muted); text-align:center; font-size:12px; }
.canvas { display:flex; height:clamp(360px, calc(100vh - 250px), 760px); align-items:center; justify-content:center; overflow:hidden; padding:20px; background:#e9eee9; border-radius:14px; }.canvas img { display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; transform:rotate(0deg); transform-origin:center; transition:transform .3s ease; box-shadow:0 12px 28px #18241d26; }.image-caption { display:flex; justify-content:space-between; gap:16px; padding:11px 2px; color:var(--muted); font-size:11px; }.image-caption span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:850px) {
  .shell { padding:28px 20px 60px; }
  .content { grid-template-columns:1fr; gap:27px; margin-top:38px; }
  .results { max-height:min(42svh, 360px); padding-right:3px; }
  .viewer { min-height:0; }
  .empty-view { min-height:260px; }
  .canvas { min-height:280px; max-height:none; }
  .viewer-bar { align-items:flex-start; flex-direction:column; gap:12px; }
  .controls { align-self:stretch; flex-wrap:wrap; }
}

@media (max-width:600px) {
  .shell { padding:24px max(16px, env(safe-area-inset-right)) calc(42px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  h1 { margin:19px 0 11px; font-size:clamp(39px, 13vw, 54px); }
  .lede { margin-bottom:0; font-size:16px; }
  .search-modes { margin-top:24px; }
  .search-wrap { gap:10px; margin-top:9px; padding:7px 12px; }
  .search-wrap svg { width:19px; height:19px; }
  .search-wrap input { font-size:16px; }
  kbd, .hint { display:none; }
  .meta { padding-top:10px; }
  .content { gap:22px; margin-top:29px; padding-top:20px; }
  .section-label { padding-bottom:10px; }
  .results { gap:6px; max-height:min(44svh, 350px); }
  .result { min-height:58px; padding:12px; }
  .result:hover { transform:none; }
  .result-title { font-size:16px; }
  .empty-view { min-height:220px; }
  .viewer-bar { gap:13px; margin-bottom:10px; }
  .selected-title { max-width:100%; font-size:20px; }
  .controls { width:100%; gap:6px; }
  .controls button { width:42px; height:40px; }
  .controls .reset { min-height:40px; padding:0 12px; }
  .controls span { min-width:35px; }
  .download { min-height:40px; margin-left:auto; padding:0 11px; }
  .canvas { height:min(62svh, 520px); min-height:250px; padding:12px; border-radius:10px; }
  .image-caption { align-items:flex-start; flex-direction:column; gap:4px; padding-top:9px; }
  .image-caption span:first-child { max-width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}