:root { color-scheme: dark; --bg:#0c1118; --panel:#151e29; --line:#2b3b4d; --text:#edf4fb; --muted:#9fb0c1; --accent:#65c7ff; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; font:16px/1.5 system-ui,sans-serif; color:var(--text); background:linear-gradient(145deg,#0b1118,#142435); }
.page { width:min(960px,100%); margin:auto; padding:48px 20px; } .eyebrow { color:var(--accent); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; } h1 { margin:0; font-size:clamp(30px,6vw,48px); } .intro { color:var(--muted); max-width:680px; }
.search-form,.result-card,.notice { background:rgba(21,30,41,.9); border:1px solid var(--line); border-radius:14px; padding:20px; } .search-form { margin:28px 0 18px; } label { display:block; font-weight:600; margin-bottom:8px; } .search-row { display:flex; gap:10px; }
input { min-width:0; flex:1; border:1px solid var(--line); border-radius:9px; padding:12px 14px; color:var(--text); background:#0c141d; font:inherit; } button { border:0; border-radius:9px; padding:0 20px; color:#062033; background:var(--accent); font:600 16px inherit; cursor:pointer; } .examples,.url { color:var(--muted); font-size:13px; } a { color:var(--accent); }
.result-summary { display:flex; justify-content:space-between; gap:12px; color:var(--muted); margin:18px 2px 10px; font-size:14px; } .results { display:grid; gap:12px; } .result-card h2 { margin:0 0 10px; font-size:20px; } .result-card h2 a { text-decoration:none; } dl { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 12px; } .result-card dl div { display:flex; gap:6px; } .result-card dt { color:var(--muted); } .result-card dd { margin:0; } .description { margin:10px 0; } .url { overflow-wrap:anywhere; margin-bottom:0; } .error { border-color:#c56e6e; }
@media (max-width:560px) { .page { padding:28px 14px; } .search-row { flex-direction:column; } button { min-height:44px; } .result-summary { flex-direction:column; gap:2px; } }