:root{--bg:#fff;--fg:#1c1c1c;--mute:#666;--line:#ddd;--accent:#0b5cad;--hot:#0b5cad;--flash:#ffd200}
@media (prefers-color-scheme:dark){:root{--bg:#161616;--fg:#e8e8e8;--mute:#999;--line:#333;--accent:#6db3ff;--hot:#6db3ff}}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent)}header.top{border-bottom:1px solid var(--line);padding:.6rem 1rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
header.top .site{font-weight:700;text-decoration:none;color:var(--fg)}main{max-width:1200px;margin:0 auto;padding:1rem}
h1{font-size:1.4rem;margin:.2rem 0 .8rem}h2{font-size:1.1rem;margin:1.4rem 0 .4rem}
.nav{display:flex;gap:1rem;flex-wrap:wrap;margin:.3rem 0 .8rem;font-size:.95rem}
.front{display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap}.front>div{flex:1 1 360px;min-width:0}.cover-link{flex:0 1 340px;max-width:100%;cursor:zoom-in}.front .cover{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
dialog#zoom{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh}dialog#zoom::backdrop{background:rgba(0,0,0,.82)}dialog#zoom img{display:block;max-width:96vw;max-height:96vh;width:auto;height:auto;background:#fff;cursor:zoom-out}
.groups{list-style:none;padding:0;margin:1rem 0;border:1px solid var(--fg);max-width:560px}
.groups li{border-bottom:1px solid var(--fg)}.groups li:last-child{border-bottom:0}
.groups a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem .9rem;text-decoration:none;color:var(--fg)}
.groups a:hover,.groups a:focus{background:rgba(11,92,173,.12);outline:none}.groups b{font-weight:700}.groups span{color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;list-style:none;padding:0}
.cards a{display:block;text-decoration:none;color:var(--fg);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.cards a:hover,.cards a:focus{border-color:var(--accent);outline:none}.cards img{display:block;width:100%;height:auto;background:#fff}
.cards .t{padding:.5rem .7rem;font-size:.92rem}.cards .t b{display:block;font-weight:600}
.diagram{position:relative;width:100%;max-width:1100px;margin:0 auto;border:1px solid var(--line);background:#fff}
.diagram img{display:block;width:100%;height:auto}
.scroller{overflow-x:auto;max-width:1100px;margin:0 auto;-webkit-overflow-scrolling:touch}
.swipe{display:none}
@media (max-width:800px){.diagram{min-width:900px;margin:0}.swipe{display:block}.hot{min-height:18px}}
.hot{position:absolute;border:1.5px solid rgba(11,92,173,.6);border-radius:3px;background:rgba(11,92,173,.13)}
.hot:hover,.hot:focus{border-color:#0b5cad;background:rgba(11,92,173,.3);outline:none}
.hot.on{border-color:#0b5cad;background:rgba(11,92,173,.4)}
.hot.flash{animation:flash 1.4s ease-out 1}@keyframes flash{0%,40%{background:rgba(255,210,0,.6);border-color:#e0a800}100%{background:rgba(11,92,173,.13)}}
.diagram.plain .hot:not(:hover):not(:focus):not(.on):not(.flash){border-color:transparent;background:transparent}
.toggle{display:inline-flex;gap:.4rem;align-items:center;font-size:.9rem;color:var(--mute);margin:.2rem 1rem .5rem 0;cursor:pointer}
.lens{position:absolute;width:286px;height:286px;border-radius:0;border:3px solid var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none;z-index:4;background-color:#fff;background-repeat:no-repeat}.lens[hidden]{display:none}
.zoomarea{position:absolute;pointer-events:none;z-index:3;border:1px solid var(--accent);background:rgba(0,0,0,.16)}.zoomarea[hidden]{display:none}
@media (hover:none){.loupe-toggle{display:none}}
.pop{position:absolute;z-index:5;background:var(--bg);color:var(--fg);border:1px solid var(--accent);border-radius:6px;padding:.5rem .7rem;box-shadow:0 4px 14px rgba(0,0,0,.25);width:min(280px,80%);font-size:.9rem}
.pop[hidden]{display:none}.pop .copy{border:1px solid var(--line);background:none;color:var(--accent);border-radius:4px;cursor:pointer;padding:.05rem .45rem;font:inherit;font-size:.85rem}.pop b{font-size:1.05rem}.pop .x{float:right;cursor:pointer;border:0;background:none;color:var(--mute);font-size:1.1rem}
table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:600}tr.on td{background:rgba(255,210,0,.25)}td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
button.show{border:1px solid var(--line);background:none;color:var(--accent);border-radius:4px;cursor:pointer;padding:.05rem .45rem}
.tag{font-size:.78rem;color:var(--mute)}input[type=search]{width:100%;max-width:520px;padding:.5rem .7rem;font-size:1rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.plates{columns:2 360px;list-style:none;padding:0}.plates li{break-inside:avoid;padding:.15rem 0}
.note{color:var(--mute);font-size:.9rem}.results li{margin:.2rem 0}