:root { --accent:#0ea5b7; --accent-ink:#fff; --bg:#f6f8fa; --card:#fff; --ink:#1b2430; --muted:#5f6b7a; --line:#e3e8ee;
  --good:#16a34a; --warn:#d97706; --bad:#dc2626; --radius:10px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f141a; --card:#171e26; --ink:#e6edf3; --muted:#93a1b0; --line:#26303b; } }
* { box-sizing:border-box } body { margin:0; font:15px/1.5 "Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--accent) } h1 { font-size:1.5rem; margin:.2em 0 .6em } h2 { font-size:1.1rem; margin:1.2em 0 .5em }
.top { display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap }
.brand { font-weight:700; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.5rem }
.mark { background:var(--accent); color:var(--accent-ink); width:1.7rem; height:1.7rem; border-radius:6px; display:grid; place-items:center }
.top nav { display:flex; gap:1rem } .top nav a { color:var(--ink); text-decoration:none } .top nav a:hover { color:var(--accent) }
.who { margin-left:auto; display:flex; gap:.7rem; align-items:center; color:var(--muted) }
main { max-width:1100px; margin:1.5rem auto; padding:0 16px } .foot { text-align:center; color:var(--muted); font-size:.8rem; padding:2rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; margin:1rem 0 }
.narrow { max-width:520px; margin-left:auto; margin-right:auto } .center { text-align:center }
.row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; margin-bottom:1rem }
.tile { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem; display:flex; flex-direction:column }
.tile span { color:var(--muted); font-size:.85rem } .tile strong { font-size:1.35rem } .tile small { color:var(--muted) }
.tile.good { border-left-color:var(--good) } .tile.warn { border-left-color:var(--warn) } .tile.bad { border-left-color:var(--bad) }
table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.list th, .list td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top } .list th { font-size:.8rem; color:var(--muted); font-weight:600 }
.pill { display:inline-block; padding:.05rem .55rem; border-radius:99px; font-size:.8rem; border:1px solid currentColor }
.pill.good { color:var(--good) } .pill.warn { color:var(--warn) } .pill.bad { color:var(--bad) }
.btn { display:inline-block; padding:.45rem .9rem; border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; font:inherit }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) } .btn.danger { color:var(--bad); border-color:var(--bad) }
.btn.small { padding:.2rem .6rem; font-size:.85rem } .btn.wide { display:block; text-align:center; margin:1rem 0 } button.link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit }
.stack { display:flex; flex-direction:column; gap:.7rem } .stack label { display:flex; flex-direction:column; gap:.25rem }
.inline { display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.4rem .8rem .4rem 0 }
input, select, textarea { font:inherit; padding:.4rem .55rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink) }
.flash { border-radius:var(--radius); padding:.8rem 1rem; margin-bottom:1rem; border:1px solid } .flash.ok { border-color:var(--good) } .flash.err { border-color:var(--bad) }
.flash p { margin:.2rem 0 .5rem } .copy { width:100%; margin-bottom:.5rem } .mono { font-family:Consolas,ui-monospace,monospace; font-size:.9em }
.muted { color:var(--muted) } .small { font-size:.85rem } .err { color:var(--bad) } .crumbs { color:var(--muted) }
details.share summary { cursor:pointer; color:var(--accent) } details.share form { margin-top:.5rem; min-width:220px }
.filename { word-break:break-all } summary { cursor:pointer }
@media (max-width:700px) { .list th:nth-child(n+4), .list td:nth-child(n+4) { display:none } .who span { display:none } }
.bigcode { font-size:2rem; letter-spacing:.15em; font-weight:700; margin:.3rem 0 .6rem } h3 { font-size:1rem; margin:1.2em 0 .4em }
.pill.muted { color:var(--muted) }