:root{ --ground:#060913; --panel:#0f1426; --panel-2:#161c33; --rule:#232b47; --text:#eef2fb; --muted:#9aa6c4; --accent:#5ec8ff; --warm:#f0913f; }
*{ box-sizing:border-box; }
html{ background:var(--ground); }
body{ margin:0; background:var(--ground); color:var(--text); font:16px/1.55 'Manrope',system-ui,sans-serif; padding:0 clamp(16px,5vw,40px) 56px; }
.wrap{ max-width:760px; margin:0 auto; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.crumbs{ padding-top:clamp(12px,3vw,28px); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; padding:0; list-style:none; font:16px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em; }
.crumbs li{ display:flex; align-items:center; gap:10px; color:var(--muted); }
.crumbs li + li::before{ content:"›"; font-size:18px; }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; margin-left:-10px; font-weight:700; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs [aria-current="page"]{ color:var(--text); }
h1{ margin:4px 0 10px; font:800 clamp(38px,8vw,60px)/1 'Baloo 2',system-ui,sans-serif; text-wrap:balance; }
h2{ margin:0 0 8px; font:800 24px/1.15 'Baloo 2',system-ui,sans-serif; }
p{ margin:0 0 12px; }
.lede{ color:var(--muted); font-size:18px; max-width:56ch; }
.muted{ color:var(--muted); }
.kicker{ font:700 12px/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sw{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; vertical-align:-1px; box-shadow:0 0 0 1px rgba(255,255,255,.28); }
footer{ margin-top:48px; padding-top:16px; border-top:1px solid var(--rule); color:var(--muted); font-size:13px; }

/* lookup page */
.find{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px; }
.find input{ flex:1 1 240px; min-height:56px; padding:0 18px; border-radius:14px; border:1.5px solid var(--rule); background:var(--panel); color:var(--text);
  font:700 20px/1 'Manrope',sans-serif; }
.find input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(94,200,255,.25); }
.find button{ min-height:56px; padding:0 26px; border-radius:14px; border:0; background:var(--accent); color:#06122a; font:800 18px/1 'Manrope',sans-serif; cursor:pointer; }
.hint{ color:var(--muted); font-size:14px; }
.msg{ min-height:24px; color:#ffb4a8; font-weight:700; }
.group{ margin-top:30px; }
.group h2{ display:flex; align-items:center; font-size:21px; }
.group p{ color:var(--muted); font-size:15px; margin-bottom:10px; }
.list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.list a{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-radius:12px; background:var(--panel); border:1px solid var(--rule); color:var(--text); text-decoration:none; font-weight:700; }
.list a:hover{ border-color:var(--accent); }
.list .no{ font:700 13px/1 'JetBrains Mono',monospace; color:var(--muted); min-width:2.2em; }

/* card page */
.top{ display:grid; grid-template-columns:minmax(0,230px) 1fr; gap:clamp(18px,4vw,36px); align-items:start; margin-top:14px; }
.top img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.meta > span{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; background:var(--panel); border:1px solid var(--rule); font-size:14px; font-weight:700; }
.def{ font-size:clamp(19px,2.6vw,22px); line-height:1.45; font-weight:600; }
section{ margin-top:26px; }
.box{ background:var(--panel); border:1px solid var(--rule); border-radius:18px; padding:18px 20px; }
.box.try{ border-color:rgba(240,145,63,.45); background:rgba(240,145,63,.08); }
.box.talk{ background:linear-gradient(135deg,rgba(255,215,106,.10),rgba(255,122,209,.10),rgba(122,217,255,.10)); border-color:rgba(255,255,255,.12); }
.box.talk p.q{ font:800 22px/1.3 'Baloo 2',sans-serif; margin:0; }
.box p:last-child{ margin-bottom:0; }
.lab{ display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--accent); color:#06122a; font-weight:800; text-decoration:none; margin-top:12px; }
.nav{ display:flex; justify-content:space-between; gap:10px; margin-top:32px; flex-wrap:wrap; }
.nav a{ display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(94,200,255,.5); color:var(--text); text-decoration:none; font-weight:700; }
.nav a:hover{ background:var(--panel-2); }
@media (max-width:560px){ .top{ grid-template-columns:1fr; } .top img{ max-width:230px; margin:0 auto; } }