:root{
  --bg:#f4f1ea; --paper:#fffcf6; --ink:#1a1c16; --muted:#5c6158;
  --line:#d9d4c8; --accent:#0b6e4f; --drop:#9b1d20;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:light; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--font)}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:1040px; margin:0 auto; padding:0 16px}
.top{position:sticky; top:0; z-index:5; background:rgba(244,241,234,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.bar{display:flex; align-items:center; gap:16px; min-height:56px}
.brand{font:700 13px/1 var(--mono); letter-spacing:.14em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand b{color:var(--accent)}
.menu{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; justify-content:flex-end}
.menu::-webkit-scrollbar{display:none}
.menu a{white-space:nowrap; color:var(--muted); text-decoration:none; font-size:14px; padding:8px 10px; border-radius:8px}
.menu a:hover, .menu a.on{color:var(--ink); background:#ece7dc}
@media (max-width:760px){
  .bar{flex-wrap:wrap; gap:0; padding-top:10px}
  .menu{flex-basis:100%; flex-wrap:wrap; overflow:visible; justify-content:flex-start; margin:0 -8px 6px; padding-bottom:6px}
  .menu a{padding:6px 8px; font-size:13px}
}
.disclose{font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); padding:10px 0; margin:0}
main{padding:28px 0 64px}
h1{font-size:clamp(1.8rem,6vw,2.8rem); line-height:1.1; letter-spacing:-.03em; margin:.2em 0 .4em}
h2{font-size:1.2rem; margin:2em 0 .7em}
.lede{color:#3a3d36; max-width:42rem; font-size:1.05rem}
.kicker{font:700 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 .4em}
.upd, .meta, .src, .crumbs, .note{font-size:14px; color:var(--muted)}
.crumbs a{color:var(--muted)}
.search{margin:18px 0 8px}
.search label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
.search-row{display:flex; gap:8px; flex-wrap:wrap}
.search input{flex:1 1 200px; min-width:0; font:16px var(--font); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink)}
.search button, .go{font:600 15px var(--font); padding:12px 16px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block}
.search button:hover, .go:hover{filter:brightness(1.08)}
.results{background:var(--paper); border:1px solid var(--line); border-radius:12px; margin:8px 0 16px; padding:8px 0}
.hits{list-style:none; margin:0; padding:0}
.hits a{display:block; padding:10px 14px; color:var(--ink); text-decoration:none}
.hits a:hover{background:#ece7dc}
.hits span{display:block; color:var(--muted); font-size:13px}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{display:flex; flex-direction:column; gap:6px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--ink); min-height:8.5rem}
.card:hover{border-color:var(--accent)}
.card strong{font-size:1.02rem; line-height:1.3}
.price{font-weight:700; font-size:1.25rem}
.price.big{font-size:clamp(1.8rem,5vw,2.4rem); margin:.1em 0 .3em}
.was, .drop{font-size:13px; color:var(--muted)}
.drop{color:var(--drop); font-weight:600}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0; padding:0}
@media (min-width:700px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats div{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.stats dt{font-size:12px; color:var(--muted); margin:0 0 4px}
.stats dd{margin:0; font-weight:700; font-size:1.1rem}
.chart{width:100%; height:auto; max-width:100%; background:var(--paper); border:1px solid var(--line); border-radius:12px; margin:8px 0 16px}
.empty, .note.short{background:var(--paper); border:1px dashed var(--line); border-radius:12px; padding:14px 16px}
.note.short{border-style:solid; border-left:3px solid var(--accent)}
.store-list{list-style:none; padding:0; margin:0}
.store-list li{border-bottom:1px solid var(--line); padding:10px 0}
footer{border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding:22px 0 40px}
footer a{color:var(--muted)}
@media (max-width:400px){
  h1{font-size:1.7rem}
  .wrap{padding:0 14px}
  .card{padding:12px}
}