:root { color-scheme: light; --ink:#171715; --muted:#726f68; --line:#ddd9d1; --paper:#fff; --canvas:#f5f3ee; --accent:#7b2f4d; --accent-dark:#542036; --soft:#eee6e9; --mark:#ffe58f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--canvas); color:var(--ink); font:15px/1.5 Inter,Arial,sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.topbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 30px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font:700 18px Georgia,serif; }.brand strong,.brand span { display:block; }.brand div>span { color:var(--muted); font-size:12px; }
.tabs { display:flex; align-self:stretch; }.tab { border:0; border-bottom:3px solid transparent; padding:0 17px; background:transparent; color:var(--muted); }.tab:hover,.tab.active { color:var(--ink); border-bottom-color:var(--accent); }
main { width:min(1180px,calc(100% - 40px)); margin:34px auto 70px; }.panel { display:none; }.panel.active { display:block; }
.hero { background:linear-gradient(135deg,#fff 0%,#f7eff2 100%); border:1px solid var(--line); padding:42px; }.eyebrow { margin:0 0 8px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.13em; }.hero h1 { margin:0 0 25px; max-width:760px; font:600 clamp(30px,5vw,52px)/1.05 Georgia,serif; }
.search-form { display:grid; grid-template-columns:1fr 122px; gap:10px; }.search-form input { height:54px; padding:0 17px; border:1px solid #bab4aa; background:#fff; outline:none; }.search-form input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(123,47,77,.12); }
button:not(.tab):not(.quiet):not(.examples button) { border:1px solid var(--accent); background:var(--accent); color:#fff; padding:0 19px; font-weight:700; }.search-form button { height:54px; }button:not(.tab):not(.quiet):not(.examples button):hover { background:var(--accent-dark); }
.examples { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.examples button { border:1px solid var(--line); border-radius:20px; background:#fff; color:#514d48; padding:6px 11px; font-size:12px; }.examples button:hover { border-color:var(--accent); color:var(--accent); }
.search-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:62px; }.search-meta p { color:var(--muted); margin:0; }.quiet { border:0; background:transparent; color:var(--accent); padding:8px 0; }.quiet:disabled { color:#aaa; }
.results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.product-card { min-width:0; display:grid; grid-template-columns:180px 1fr; background:var(--paper); border:1px solid var(--line); overflow:hidden; }.product-image-link { display:block; min-height:250px; background:#f0eee9; }.product-image { width:100%; height:100%; min-height:250px; object-fit:cover; display:block; }.product-image.image-error { visibility:hidden; }
.product-content { min-width:0; padding:20px; display:flex; flex-direction:column; align-items:flex-start; }.product-topline { width:100%; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; text-transform:uppercase; }.product-brand { color:var(--accent); font-weight:800; }.product-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }.availability { color:#347247; font-weight:800; white-space:nowrap; }.availability.out-of-stock { color:#9a5d5d; }.score { white-space:nowrap; font-variant-numeric:tabular-nums; }.product-card h2 { margin:8px 0 5px; font-size:18px; line-height:1.25; }.product-card h2 a { color:inherit; text-decoration:none; }.product-card h2 a:hover { color:var(--accent); }.english-title { margin:0 0 9px; color:var(--muted); font-size:12px; }.description { margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; color:#514f4a; font-size:13px; }.categories,.components { display:flex; flex-wrap:wrap; gap:5px; }.categories { margin:0 0 8px; }.categories span { border:1px solid #d8c2ca; background:#f7eff2; color:#6b2943; padding:3px 6px; font-size:11px; }.components { margin-top:auto; }.components span { border:1px solid var(--line); background:#faf9f6; padding:3px 6px; font-size:11px; }.product-link { margin-top:13px; color:var(--accent); font-weight:700; font-size:13px; text-decoration:none; }
mark { background:var(--mark); color:inherit; padding:0 2px; }.empty,.error { grid-column:1/-1; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); background:#fff; padding:28px; color:var(--muted); }.empty strong { color:var(--ink); font-size:18px; }.error { border-color:#dfaaa6; color:#8b2e2a; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }.section-heading h1 { margin:0; font:600 32px Georgia,serif; }.section-heading p { margin:3px 0 0; color:var(--muted); }.section-heading>button { height:42px; }.editor { width:100%; min-height:330px; resize:vertical; padding:16px; border:1px solid #bfb9ae; background:#fff; color:var(--ink); font:14px/1.55 Consolas,monospace; outline:none; }.editor.compact { min-height:110px; font-family:inherit; }.code-block { margin:0 0 14px; padding:16px; max-height:520px; overflow:auto; background:#181716; color:#eee9df; border:1px solid #302e2b; font:12px/1.55 Consolas,monospace; white-space:pre-wrap; word-break:break-word; }.code-block.output { margin-top:12px; min-height:170px; }.hidden { display:none; }.tokens { display:grid; gap:10px; margin-top:16px; }.tokens section { background:#fff; border:1px solid var(--line); padding:16px; }.tokens p { margin:5px 0 0; color:var(--muted); }
@media(max-width:900px){.results{grid-template-columns:1fr}}@media(max-width:680px){.topbar{align-items:stretch;flex-direction:column;gap:0;padding:12px 14px 0}.tabs{min-height:44px;overflow-x:auto}.tab{flex:1;padding:0 9px;white-space:nowrap}main{width:calc(100% - 24px);margin-top:18px}.hero{padding:25px 18px}.search-form{grid-template-columns:1fr}.results{grid-template-columns:1fr}.product-card{grid-template-columns:125px 1fr}.product-image-link,.product-image{min-height:210px}.product-content{padding:15px}.search-meta,.section-heading{align-items:flex-start;flex-direction:column}}