* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; box-shadow: none; text-shadow: none; }
html, body { height: 100%; }
body { background: #fff; color: #222; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
canvas#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
a { color: #00e; text-decoration: underline; }
a:hover { color: #c00; }
.wrap { max-width: 980px; margin: 0 auto; padding: 32px 20px 96px; }
h1 { font-size: 54px; letter-spacing: 3px; font-weight: 700; color: #111; }
h2 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #555; margin: 40px 0 12px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
h3 { font-size: 16px; margin: 18px 0 6px; }
.tag { font-size: 20px; color: #333; margin-top: 8px; }
.sub { color: #666; margin-top: 4px; }
.panel { border: 1px solid #ddd; background: #fff; padding: 16px; margin-top: 12px; }
input[type=text], input[type=email], input[type=password] { width: 100%; background: #fff; color: #222; border: 1px solid #999; font: inherit; padding: 10px 12px; outline: none; }
input:focus { border-color: #000; }
button, .btn { background: #eee; color: #222; border: 1px solid #999; font: inherit; padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #ddd; }
button:disabled { opacity: 0.5; cursor: default; }
table { border-collapse: collapse; width: 100%; font-size: 13px; margin-top: 12px; }
th, td { border: 1px solid #ddd; padding: 4px 8px; text-align: left; }
th { background: #f4f4f4; color: #333; }
.meta { color: #666; font-size: 13px; margin-top: 10px; }
.err { color: #c00; }
.ok { color: #060; }
.small { font-size: 12px; color: #888; }
.row { display: flex; gap: 10px; align-items: stretch; }
.row > * { flex: 1; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.plan { border: 1px solid #999; padding: 18px; background: #fff; }
.plan .price { font-size: 30px; font-weight: 700; margin: 8px 0 2px; }
.plan ul { list-style: none; margin: 10px 0; }
.plan li { padding: 3px 0; border-bottom: 1px dotted #ddd; }
.plan button { width: 100%; margin-top: 10px; }
.connbox { font-size: 12px; word-break: break-all; background: #f6f6f6; border: 1px solid #ddd; padding: 8px; margin-top: 6px; user-select: all; }
.icard { border: 1px solid #ddd; background: #fff; padding: 14px; margin-top: 12px; }
.ihead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.imain { margin: 8px 0; }
.irow { display: flex; gap: 8px; flex-wrap: wrap; }
.irow button { width: auto; }
.iactions { margin-top: 10px; }
.statuspill { font-weight: 700; }

article.blog { max-width: 760px; margin: 0 auto; }
article.blog p { margin: 12px 0; }
article.blog pre { background: #f4f4f4; border: 1px solid #ddd; padding: 10px; overflow-x: auto; font-size: 13px; }
article.blog h2 { margin-top: 36px; }
article.blog blockquote { border-left: 3px solid #999; padding-left: 12px; color: #555; margin: 12px 0; }
.postlist { list-style: none; margin-top: 18px; padding: 0; }
.postitem { padding: 10px 0; border-bottom: 1px dotted #ddd; }
nav.top { display: flex; gap: 18px; align-items: baseline; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 8px; flex-wrap: wrap; }
nav.top a { text-decoration: none; }
@media (max-width: 640px) {
  .wrap { padding: 20px 12px 60px; }
  h1 { font-size: 34px; letter-spacing: 2px; }
  .row { flex-direction: column; }
  .ihead { flex-direction: column; align-items: flex-start; gap: 4px; }
  .iactions { display: grid; grid-template-columns: 1fr 1fr; }
  .iactions button { width: 100%; }
  .iactions button[data-destroy] { grid-column: 1 / -1; }
}

@media (prefers-color-scheme: dark) {
  body { background: #0a0a0c; color: #ddd; }
  a { color: #68f; }
  a:hover { color: #f55; }
  h1 { color: #eee; }
  h2 { color: #aaa; border-bottom-color: #444; }
  h3 { color: #ddd; }
  .tag { color: #bbb; }
  .sub, .meta { color: #999; }
  .panel { background: #141416; border-color: #333; }
  input[type=text], input[type=email], input[type=password] { background: #1a1a1c; color: #ddd; border-color: #555; }
  input:focus { border-color: #fff; }
  button, .btn { background: #2a2a2c; color: #ddd; border-color: #555; }
  button:hover, .btn:hover { background: #3a3a3c; }
  th, td { border-color: #333; }
  th { background: #222; color: #aaa; }
  .err { color: #f55; }
  .ok { color: #5b5; }
  .small { color: #888; }
  .plan { background: #141416; border-color: #555; }
  .plan li { border-bottom-color: #333; }

  .connbox { background: #1a1a1c; border-color: #333; color: #ddd; }
  .icard { background: #141416; border-color: #333; }
  article.blog pre { background: #141416; border-color: #333; }
  article.blog blockquote { color: #aaa; }
  .postitem { border-bottom-color: #333; }
  nav.top { border-bottom-color: #333; }
}