:root{--bg:#fff;--fg:#111;--muted:#666;--card:#fff;--border:#e6e6e6;--accent:#ff79c6;--chip:#f5f5f7}
html[data-theme="noir"]{--bg:#0b0b10;--fg:#e8e8ea;--muted:#9aa0a6;--card:#11131a;--border:#2a2e35;--accent:#80d0ff;--chip:#1a1d25}
html{font-family:Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;}
body{margin:0;background:var(--bg);color:var(--fg)}
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);backdrop-filter:saturate(120%) blur(4px);background:color-mix(in oklab, var(--bg) 85%, transparent)}
.brand{font-weight:700;letter-spacing:.2px}.brand span{color:var(--accent)}
.tabs{display:flex;gap:.5rem}.tab{border:1px solid var(--border);background:var(--card);padding:.4rem .7rem;border-radius:.6rem;cursor:pointer}
.tab.active{background:var(--fg);color:var(--bg)}
.controls{display:flex;gap:.5rem;align-items:center}.picker{display:flex;align-items:center;gap:.4rem}.controls button{border:1px solid var(--border);background:var(--card);padding:.4rem .6rem;border-radius:.6rem;cursor:pointer}
.container{max-width:1100px;margin:1rem auto;padding:0 1rem}
.section-title{font-size:1.1rem;margin:1.2rem 0 .6rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.9rem}
.card{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1rem;box-shadow:0 6px 14px rgba(0,0,0,.04)}
.card .head{display:flex;justify-content:space-between;gap:.5rem}
.card .title{font-weight:600}.card .sub{color:var(--muted);font-size:.9rem}
.links{display:flex;gap:1rem;margin-top:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.chip{font-size:.76rem;border:1px solid var(--border);background:var(--chip);padding:.2rem .5rem;border-radius:999px}
.cat-wrap{display:flex;flex-direction:column;gap:1rem}
.cat-block{border:1px solid var(--border);border-radius:1rem;padding:.8rem}
.cat-title{font-weight:600;margin-bottom:.5rem}
.btn{border:1px solid var(--border);background:var(--card);padding:.5rem .9rem;border-radius:.6rem;cursor:pointer}
.footer{color:var(--muted);text-align:center;padding:1rem}
.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:1rem}
.modal-card{width:min(980px,100%);background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden}
.modal-head{border-bottom:1px solid var(--border);padding:1rem}
.modal-title{margin:.3rem 0 0 0}
.modal-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem;padding:1rem}
.modal-body .box{border:1px solid var(--border);border-radius:.8rem;padding:1rem}
.modal-body .box.subtle{background:color-mix(in oklab, var(--accent) 10%, var(--card))}
.modal-foot{border-top:1px solid var(--border);padding:.8rem;display:flex;justify-content:flex-end}
.muted{color:var(--muted)}
html.font-alt{font-family:"Noto Sans JP",Inter,system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
:root{--ring:0 0 0 2px color-mix(in oklab, var(--accent) 60%, transparent)}
:focus-visible{outline:var(--ring)}
.diag{margin:1rem 0;padding:.75rem 1rem;border:1px dashed var(--border);border-radius:.75rem;background:color-mix(in oklab, var(--accent) 8%, var(--card))}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:.4rem;border:1px solid var(--border);margin-right:.4rem}
.ok{background:#e6f9ee}
.fail{background:#ffebe8}