:root {
    --bg:#0b0b0c;
    --fg:#eae9ee;
    --muted:#afb0b7;
    --brand:#7aa2ff;
    --card:#17181c;
}
*{
   box-sizing:border-box
}
html,body{
   margin:0;
   padding:0;
   background:var(--bg);
   color:var(--fg);
   font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}
a{
   color:var(--brand);
   text-decoration:none
}
a:hover{
   text-decoration:underline
}
.container{
   max-width:900px;
   margin:0 auto;
   padding:24px
}
.header{
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin-bottom:16px
}
.brand{
   font-weight:700;
   font-size:1.25rem
}
.meta{
   color:var(--muted);
   font-size:.9rem
}
.card{
   background:var(--card);
   border-radius:16px;
   padding:16px
}
.comic-body img, .comic-body video, .comic-body canvas, .comic-body picture{
   max-width:100%;
   height:auto;
   display:block;
   margin:0 auto
}
.nav{
   display:flex;
   gap:8px;
   align-items:center;
   justify-content:space-between;
   margin:16px 0 8px
}
.nav a,.nav span{
   display:inline-block;
   padding:8px 12px;
   border-radius:10px;
   background:#23252b;
   color:var(--fg)
}
.nav .disabled{
   opacity:.4;
   pointer-events:none
}
.pagination{
   display:flex;
   gap:6px;
   flex-wrap:wrap;
   align-items:center;
   margin-top:8px
}
.pagination a,.pagination span{
   padding:6px 10px;
   border-radius:8px;
   background:#23252b
}
.pagination .current{
   background:var(--brand);
   color:black;
   font-weight:600
}
.footer{
   margin:24px 0;
   color:var(--muted);
   font-size:.85rem
}
:root {
    --feed-size: 44px;
   /* Square size */
    --feed-radius: 6px;
   /* 0 for sharp corners */
    --feed-font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    --feed-shadow: 0 1px 0 rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.12);
    --feed-focus: 2px solid #111;
   /* Visible focus ring */
}
/* Base button */
.feed-btn {
    --feed-bg: #555;
   /* fallback */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--feed-size);
    height: var(--feed-size);
    border-radius: var(--feed-radius);
    background: var(--feed-bg);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: var(--feed-shadow);
    font: var(--feed-font);
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.feed-btn:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.16);
}
.feed-btn:active {
    transform: translateY(0);
    filter: brightness(.92);
}
.feed-btn:focus-visible {
    outline: var(--feed-focus);
    outline-offset: 3px;
}
/* Color variants */
.feed-btn--rss {
    --feed-bg: #ff6a00;
}
/* classic RSS orange */
.feed-btn--atom {
    --feed-bg: #0ea5e9;
}
/* crisp cyan for Atom */
/* Icon-only variant (no visible text) */
.feed-btn--icon {
    font-size: 0;
}
/* Feed glyph using CSS mask so it inherits current color */
.feed-btn--icon::before {
    content: "";
    display: block;
    width: 56%;
    height: 56%;
    background: currentColor;
   /* RSS/Feed glyph (3 curved lines + dot) */
    -webkit-mask: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"%23000\">\ <path d=\"M6 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4-7v3a9 9 0 0 1 9 9h3c0-6.627-5.373-12-12-12Zm0-6v3c8.284 0 15 6.716 15 15h3C23 11.85 12.15 1 2 1Z\"/>\ </svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"%23000\">\ <path d=\"M6 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4-7v3a9 9 0 0 1 9 9h3c0-6.627-5.373-12-12-12Zm0-6v3c8.284 0 15 6.716 15 15h3C23 11.85 12.15 1 2 1Z\"/>\ </svg>') center / contain no-repeat;
}
/* Wide option (if you prefer text + icon) */
.feed-btn--wide {
    width: auto;
    min-width: calc(var(--feed-size) * 2.2);
    padding: 0 14px;
    gap: 10px;
    font-size: 13px;
}
.feed-btn--wide::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"%23000\">\ <path d=\"M6 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4-7v3a9 9 0 0 1 9 9h3c0-6.627-5.373-12-12-12Zm0-6v3c8.284 0 15 6.716 15 15h3C23 11.85 12.15 1 2 1Z\"/>\ </svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,\ <svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"%23000\">\ <path d=\"M6 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4-7v3a9 9 0 0 1 9 9h3c0-6.627-5.373-12-12-12Zm0-6v3c8.284 0 15 6.716 15 15h3C23 11.85 12.15 1 2 1Z\"/>\ </svg>') center / contain no-repeat;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .feed-btn {
        transition: none;
   }
}

footer {
  margin-top: 2rem;
  padding: 1rem;
  border-top: 1px solid #e5e5e5;
  font: 400 0.875rem/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: #555;
  text-align: center;
  background: #fafafa; /* optional, can remove if you want transparent */
}

footer a {
  color: #0073e6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

footer a:hover,
footer a:focus {
  color: #004a99;
  text-decoration: underline;
  outline: none;
}

/* License icons */
footer img {
  width: 1em;
  height: 1em;
  margin-left: .25em;
  vertical-align: text-bottom;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

footer img:hover {
  opacity: 1;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  footer {
    border-top-color: #333;
    background: #111;
    color: #bbb;
  }
  footer a {
    color: #58a6ff;
  }
  footer a:hover {
    color: #8abfff;
  }
  footer img {
    filter: invert(1);
    opacity: 0.9;
  }
}