/* Sunken Hoard testnet watch — DARK theme (restored 2026-11-11).
   Fungo-inspired dark dashboard: near-black #0E0E0D page, #161615
   panels, ONE yellow accent #FFD207 used sparingly (highlights, links,
   the Hoard strip rail and tag, treasure numbers). The light salt-paper
   theme, the warm-sand cards and the three switchable themes (Gallery
   White / Deep Ocean / Treasure Chart) were all reverted at the user's
   request — one flat dark palette now, no switcher, no other themes.
   No glass blur, no gradient meshes, no neon glow.
   Two decorative motifs only: (1) depth-contour lines under card
   headings, (2) the yellow accent rail (topbar rule + Hoard strip).
   Type: system grotesque for UI, Georgia serif for headlines. */
:root{
  --bg:#0e0e0d; --paper:#161615; --sand:#1e1e1c; --track:#232321;
  --ink:#edede8; --muted:#9c9c92; --line:rgba(237,237,232,.14);
  --accent:#ffd207; --accent-rgb:255,210,7; --accent-text:#0e0e0d;
  --gold:#ffd207; --gold-rgb:255,210,7; --gold-deep:#ffd207;
  --brass:#ffd207; --brass-pale:#ffd207;
  --green:#4caf7d; --green-pale:#7cc9a4; --red:#e07856;
  --bar:#ffd207; --shadow-rgb:0,0,0; --highlight:rgba(255,255,255,.06);
  --footer-bg:#161615; --footer-text:#b8b8ae; --badge-bg:rgba(22,22,21,.95);
  --input-bg:#1e1e1c; --radius:10px;
  --deep:#0b2530; /* dark fallback behind artwork */
}
/* Card surface is var(--paper) — dark panel #161615 on the near-black
   page. Chips and the superseded block stay on the slightly lighter
   --sand, so they read as raised surfaces. --track is the bar-groove
   colour, dark enough to read as a groove inside the cards. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* Horizontal-overflow guard (FIX 1 — 360px phones): nothing on the page may
   widen the document past the viewport, or the whole page drags sideways.
   clip (not hidden) so sticky positioning keeps working. */
html,body{overflow-x:clip}
img,table{max-width:100%}
.wrap,.card,.grid>*{min-width:0}
.row>*{min-width:0}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.topbar{border-bottom:3px solid var(--accent);background:var(--paper)}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px}
h1{margin:0;font-size:26px;letter-spacing:.2px;font-family:Georgia,"Iowan Old Style","Times New Roman",serif}
.sub{margin:2px 0 0;color:var(--muted);font-size:14px}
.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted)}
.pill.testnet{border-color:var(--green);color:var(--green)}
#langToggle{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px}

main{padding:22px 0 40px}

/* Hero band: the five rarity artworks crossfading with a slow Ken Burns
   pan, full-bleed on the near-black page — the original dark look.
   First image is visible before any motion; reduced-motion users get a
   static frame. The headline is plain light paper text over the dark
   artwork; the found-count number is yellow. No metal effect, no
   gradient lettering — just light text on dark art, with a light bottom
   scrim behind the text block so it stays legible. */
.hero{background:var(--bg);padding:0}
.hero-band{position:relative;max-width:none;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.hero-slides{position:absolute;inset:0}
/* object-position 78%: the artwork is square with its subject (pebble, coin,
   crown) in the lower third. Centred cover on a wide short desktop hero
   showed only the middle band and cut the subject out entirely. 78% keeps
   the subject band in frame on desktop; the portrait phone hero shows nearly
   the full height either way. Slides are real <img> elements fed by the
   1600x1600 JPEGs (not CSS backgrounds and not the small WebPs), so the
   large image actually loads on desktop. Each slide is 104% oversize
   (top/left -2%) so the Ken Burns pan never reveals an edge; max-width:none
   is required because the global img{max-width:100%} overflow guard would
   otherwise cap the oversize back to the container. */
.hero-slide{position:absolute;top:-2%;left:-2%;width:104%;height:104%;max-width:none;object-fit:cover;object-position:center 78%;opacity:0;animation:heroCycle 50s linear infinite}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:10s}
.hero-slide:nth-child(3){animation-delay:20s}
.hero-slide:nth-child(4){animation-delay:30s}
.hero-slide:nth-child(5){animation-delay:40s}
@keyframes heroCycle{
  0%{opacity:0;transform:scale(1.02) translateX(0)}
  4%{opacity:1}
  16%{opacity:1}
  20%{opacity:0;transform:scale(1.12) translateX(-1.5%)}
  100%{opacity:0;transform:scale(1.12) translateX(-1.5%)}
}
/* Hero scrim: a light bottom-anchored gradient, behind the text block
   only (text sits at the bottom via align-items:flex-end). Transparent
   up top, so the artwork's upper half is untouched and the subject stays
   visible; the scrim exists to hold contrast for the light headline. */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,48,0) 42%,rgba(11,37,48,.55) 68%,rgba(11,37,48,.78))}
.hero-in{position:relative;padding:52px 20px 26px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.hero-in .muted{color:#cfc8b4}
.live-pill{border-color:var(--green-pale);color:var(--green-pale)}
.live-pill .dot{margin-right:6px;vertical-align:middle}
.hero-title{font-size:36px;margin:10px 0 2px;color:#ffffff;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;text-shadow:none}
.hero-headline{font-size:22px;font-weight:650;margin:2px 0;color:#edede8}
.hero-headline #heroMinted{color:#ffd207;font-weight:700}
.hero-sub{margin:2px 0;color:#d8d8cc;font-size:15px}
.hero-countdown{margin:10px 0 0;font-size:14.5px;color:#f1ebd8}
.hero-countdown strong{font-size:16px;color:var(--brass-pale)}
@media(max-width:760px){.hero-band{min-height:280px}.hero-title{font-size:29px}.hero-headline{font-size:19px}}

/* Live stat cards */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}

/* Cards — sharper + 3D. Crisp 1px hairline border, 10px radius, layered
   shadows for real depth (a tight dark shadow, a wider soft one, a faint
   top highlight as if light comes from above), and a subtle lift on
   hover. No glass blur, no neon glow. Surface is the dark panel
   var(--paper) (#161615) on the near-black page. */
.card,.stat,.ground,.hoard-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.20),0 10px 28px rgba(var(--shadow-rgb),.12),inset 0 1px 0 var(--highlight);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover,.stat:hover,.ground:hover,.hoard-card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 3px rgba(var(--shadow-rgb),.22),0 16px 34px rgba(var(--shadow-rgb),.16),inset 0 1px 0 var(--highlight);
}
.stat{padding:14px 16px}
.stat-label{margin:0;color:var(--muted);font-size:13px}
.stat-value{margin:4px 0 0;font-size:24px;font-weight:650;color:var(--ink)}
.stat-of{font-size:15px;font-weight:400}
.stat-latest{font-size:19px;line-height:1.3}
.stat-sub{margin:4px 0 0}

/* Depth-contour motif (decorative motif 1 of 2): thin map depth lines
   under every card heading, ink at low opacity. One motif, used once
   per section — restraint, not decoration everywhere. */
.card h2::after{
  content:"";display:block;height:10px;margin-top:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M0 2 Q15 0 30 2 T60 2 T90 2 T120 2' fill='none' stroke='%23EDEDE8' stroke-width='1' opacity='.5'/%3E%3Cpath d='M0 5 Q15 3 30 5 T60 5 T90 5 T120 5' fill='none' stroke='%23EDEDE8' stroke-width='1' opacity='.35'/%3E%3Cpath d='M0 8 Q15 6 30 8 T60 8 T90 8 T120 8' fill='none' stroke='%23EDEDE8' stroke-width='1' opacity='.22'/%3E%3C/svg%3E") repeat-x left center;
}

/* Animated rarity bars */
.rbar{margin:12px 0}
.rbar-head{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.rbar-head .rbar-count{color:var(--muted)}
.rbar-track{height:10px;background:var(--track);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-top:6px}
.rbar-fill{height:100%;background:var(--bar);width:0;transition:width .9s ease}
.rbar-fill.shimmer{position:relative;overflow:hidden}
.rbar-fill.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);animation:shimmer 2.8s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Ground sections: looping visuals made from the rarity art we already own
   (approach A — CSS Ken Burns crossfade, zero added bytes: the hero already
   downloads all five JPEGs, so the browser reuses them from cache).
   Each visual crossfades between the rarities that hide in that ground,
   24s for two images, 36s for three. First image is visible before any
   motion; reduced-motion users get a static frame; narrow screens get the
   same still image, no video file. No sound, ever — there is no video.
   Slides are real <img> elements (1600x1600 JPEGs), 104% oversize with
   max-width:none so the Ken Burns pan never reveals an edge, framed at
   object-position:center 78% like the hero so the subject stays in frame. */
.grounds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.grounds-grid{grid-template-columns:1fr}}
.ground{overflow:hidden}
.ground-visual{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--deep)}
.ground-visual img{position:absolute;top:-2%;left:-2%;width:104%;height:104%;max-width:none;object-fit:cover;object-position:center 78%;opacity:0}
.ground-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(var(--shadow-rgb),.55));pointer-events:none}
.gv2 img{animation:groundCycle2 24s linear infinite}
.gv2 img:nth-child(1){animation-delay:0s}
.gv2 img:nth-child(2){animation-delay:12s;animation-name:groundCycle2b}
.gv3 img{animation:groundCycle3 36s linear infinite}
.gv3 img:nth-child(1){animation-delay:0s}
.gv3 img:nth-child(2){animation-delay:12s;animation-name:groundCycle3b}
.gv3 img:nth-child(3){animation-delay:24s;animation-name:groundCycle3c}
@keyframes groundCycle2{
  0%{opacity:0;transform:scale(1.03) translateX(0)}
  4%{opacity:1}
  46%{opacity:1}
  50%{opacity:0;transform:scale(1.13) translateX(-1.5%)}
  100%{opacity:0;transform:scale(1.13) translateX(-1.5%)}
}
@keyframes groundCycle2b{
  0%{opacity:0;transform:scale(1.03) translateX(0)}
  4%{opacity:1}
  46%{opacity:1}
  50%{opacity:0;transform:scale(1.13) translateX(1.5%)}
  100%{opacity:0;transform:scale(1.13) translateX(1.5%)}
}
@keyframes groundCycle3{
  0%{opacity:0;transform:scale(1.03) translateX(0)}
  3%{opacity:1}
  30%{opacity:1}
  33%{opacity:0;transform:scale(1.13) translateX(-1.5%)}
  100%{opacity:0;transform:scale(1.13) translateX(-1.5%)}
}
@keyframes groundCycle3b{
  0%{opacity:0;transform:scale(1.03) translateX(0)}
  3%{opacity:1}
  30%{opacity:1}
  33%{opacity:0;transform:scale(1.13) translateX(1.5%)}
  100%{opacity:0;transform:scale(1.13) translateX(1.5%)}
}
@keyframes groundCycle3c{
  0%{opacity:0;transform:scale(1.04) translateY(0)}
  3%{opacity:1}
  30%{opacity:1}
  33%{opacity:0;transform:scale(1.14) translateY(-1.5%)}
  100%{opacity:0;transform:scale(1.14) translateY(-1.5%)}
}
.ground-body{padding:14px 16px 16px}
.ground-body h3{margin:0 0 6px;font-size:16px}
.ground-body p{margin:6px 0}
.ground-first{color:var(--accent)}
.ground-status{color:var(--green)}

/* Gas meter badge levels */
.chip.gas-low{border-color:var(--green);color:var(--green)}
.chip.gas-normal{color:var(--muted)}
.chip.gas-high{border-color:var(--red);color:var(--red)}
#gasValue{font-size:30px}
#gasCard .chip{font-size:13px}

/* Smooth scroll for the "View the Hoard" jump link. */
html{scroll-behavior:smooth}
#hoardCard{scroll-margin-top:16px}

/* "The Hoard is live" strip — the redesign anchor above the fold.
   Directly under the hero, full width, with a yellow rail across its top
   (decorative motif 2 of 2): the one distinct visual cue that makes the
   first screen unmistakably different. Chips are the two verified minted
   treasures; the link smooth-scrolls to The Hoard. */
.hoard-strip{background:var(--paper);border-top:3px solid var(--accent);border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.10),0 6px 18px rgba(var(--shadow-rgb),.08)}
.hoard-strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px}
.hoard-strip-new{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}
.hoard-strip-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.hoard-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:3px 12px 3px 3px;color:var(--ink);text-decoration:none;font-size:13.5px;background:var(--paper);max-width:100%;
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.14),0 4px 10px rgba(var(--shadow-rgb),.08);transition:transform .18s ease,box-shadow .18s ease}
.hoard-chip:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(var(--shadow-rgb),.16),0 8px 16px rgba(var(--shadow-rgb),.12)}
.hoard-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.hoard-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoard-strip-link{font-weight:650;white-space:nowrap;color:var(--accent)}

/* "Last known" tag — shown in the status line while the page is running
   on the baked fallback snapshot (chain read pending or blocked). Hidden
   once the first live read lands. */
.stale-tag{border:1px dashed var(--accent);color:var(--accent);border-radius:999px;padding:2px 10px;font-size:12px}

/* Treasure of the Day — persistent reveal mark + replay (redesign
   visibility fix). The badge stays on the card after the animation ends,
   so the reveal is visible in a still screenshot too; the button replays
   the flip + shine. Reduced-motion: the badge is static, the animation
   is off (see the reduced-motion block below). */
#todCard{position:relative}
.tod-badge{position:absolute;top:14px;right:16px;z-index:2;border:1px solid var(--gold);color:var(--gold-deep);background:var(--badge-bg);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:650}
.replay-btn{margin-top:12px;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:7px 14px;font-size:13.5px;font-weight:650;cursor:pointer}
.replay-btn:hover{background:rgba(var(--accent-rgb),.10)}

/* Hero "one total" line: found / holders / Pool, all live. */
.hero-total{margin:8px 0 0;font-size:14.5px;color:#edede8}

/* "The Hoard" collection grid — all minted treasures as cards, newest
   first. 3 across on desktop, 2 on tablet, 1 on phones (360px safe:
   cards are min-width:0 via the global guard, images are max-width:100%). */
.hoard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.hoard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hoard-grid{grid-template-columns:1fr}}
.hoard-card{overflow:hidden;min-width:0}
.hoard-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--deep)}
.hoard-body{padding:12px 14px 14px}
.hoard-body h3{margin:0 0 6px;font-size:15.5px;overflow-wrap:anywhere}
.hoard-body p{margin:6px 0}

/* "All treasures" dense table + client-side filters. */
.table-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.table-filters label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.table-filters select{background:var(--input-bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:14px;max-width:100%}
.table-count{margin-left:auto}
.tbl.dense{font-size:14px}
.tbl.dense th,.tbl.dense td{padding:6px}
.tbl.dense td img{vertical-align:middle;border-radius:4px;border:1px solid var(--line)}

/* Holder lookup — read-only, never asks to connect a wallet. */
.lookup-form{display:flex;gap:8px;flex-wrap:wrap}
.lookup-form input{flex:1;min-width:0;background:var(--input-bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:14.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lookup-form input::placeholder{color:var(--muted)}
.lookup-form button{background:var(--accent);color:var(--accent-text);border:none;border-radius:6px;padding:9px 18px;font-size:14.5px;font-weight:650;cursor:pointer}
.lookup-form button:hover{filter:brightness(1.1)}
.lookup-msg{margin:10px 0 0}
.lookup-msg:empty{display:none}
.lookup-result .row{margin-top:10px}
.lookup-sub{font-size:15px;margin:14px 0 4px}

/* Superseded deploy block — muted, clearly "do not use". */
.superseded{margin-top:16px;border:1px dashed var(--line);border-radius:6px;padding:14px 16px;background:var(--sand)}
.superseded h3{margin:0 0 6px;font-size:15px;color:var(--red)}
.superseded p{margin:0 0 8px}

/* Reveal animation for the latest find (Treasure of the Day): a quick
   flip-in plus a shine sweep across the card. CSS only, fires when the
   newest token changes (or on first load) — never for a purchase, because
   there is no purchase anywhere on this page. */
#todCard.reveal{animation:todReveal .9s cubic-bezier(.2,.7,.3,1) both;position:relative;overflow:hidden}
#todCard.reveal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(var(--gold-rgb),.18) 50%,transparent 65%);
  transform:translateX(-120%);animation:todShine 1.1s ease .15s both}
@keyframes todReveal{
  0%{opacity:0;transform:perspective(900px) rotateY(75deg) scale(.96)}
  60%{opacity:1;transform:perspective(900px) rotateY(-6deg) scale(1)}
  100%{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}
}
@keyframes todShine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-slide{animation:none}
  .hero-slide:first-child{opacity:1}
  .ground-visual img{animation:none}
  .ground-visual img:first-child{opacity:1}
  .bar>div,.rbar-fill{transition:none}
  .rbar-fill.shimmer::after{animation:none}
  #todCard.reveal{animation:none}
  #todCard.reveal::after{animation:none;display:none}
}
.notice{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:12px 16px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.14),0 6px 18px rgba(var(--shadow-rgb),.08)}
.statusline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin:0 0 16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--green)}
.dot.bad{background:var(--red)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
.card{padding:18px 20px;margin-bottom:16px}
.grid .card{margin-bottom:0}
h2{margin:0 0 12px;font-size:17px}
.big{font-size:28px;font-weight:650;margin:4px 0}
.muted{color:var(--muted)}
.fine{color:var(--muted);font-size:13.5px}
.row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:5px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
.mono.short{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
a{color:var(--accent)}
.bar{height:8px;background:var(--track);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:8px 0}
.bar>div{height:100%;background:var(--bar);transition:width .5s}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:8px 6px;border-top:1px solid var(--line);text-align:left}
/* FIX 1: the contracts table's first cell ("AgentIdRegistryMock (testnet
   only)") must be allowed to wrap instead of forcing the table wider than
   a 360px phone. Same for every first column — wrap, never clip. */
.tbl td:first-child{white-space:normal;overflow-wrap:anywhere}
@media(max-width:640px){
  /* Stacked tables on narrow phones: the 7-column rarity table cannot fit
     a ~280px card on a 360px phone, so rows stack instead of stretching
     the document. Labels come from each cell's data-label attribute. */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-top:1px solid var(--line);padding:6px 0}
  .tbl tr:first-child td{border-top:none}
  .tbl td{border-top:none;padding:3px 6px}
  .tbl td::before{content:attr(data-label);display:block;color:var(--muted);font-size:12px}
  .tbl td[data-label=""]::before{display:none}
}
.tbl thead th{border-top:none;color:var(--muted);font-weight:600;font-size:13px}
.tbl tr:first-child td{border-top:none}
.token{display:flex;gap:18px;align-items:flex-start}
.token img{border-radius:6px;border:1px solid var(--line);background:var(--deep)}
@media(max-width:560px){.token{flex-direction:column}}
.chip{display:inline-block;background:var(--sand);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin:2px 4px 2px 0;font-size:13px;color:var(--ink)}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.feed li:first-child{border-top:none}
.plain{margin:0;padding-left:20px}
.plain li{margin:6px 0}
/* Footer: a dark panel strip with muted paper text, closing the page. */
footer{background:var(--footer-bg);color:var(--footer-text);border:1px solid var(--line);border-radius:6px;padding:14px 18px;margin-top:8px}
footer .fine,footer{color:var(--footer-text)}