/* Mock publisher page. Deliberately plain and unbranded: it stands in for any news site. */
:root {
  --bg: #fbfbf9; --ink: #1c1d21; --muted: #62646b; --line: #e3e3de; --rubric: #9c1c28;
  --panel: #111526; --panel-ink: #e8eaf3; --panel-muted: #a2a8c0; --panel-line: #2a3048; --panel-accent: #ffcc33;
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.65 var(--serif); }
a { color: inherit; }
.ribbon { background: var(--panel); color: var(--panel-ink); font: 13px/1.4 var(--sans); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.ribbon a { color: var(--panel-accent); }
.mast { border-bottom: 3px double var(--ink); text-align: center; padding: 22px 16px 14px; }
.mast .name { font: 700 30px/1 var(--serif); letter-spacing: .02em; }
.mast .date { font: 13px/1.4 var(--sans); color: var(--muted); margin-top: 8px; }
.menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
article { max-width: 680px; margin: 0 auto; padding: 32px 16px 8px; }
.rubric { font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--rubric); }
h1 { font: 700 clamp(28px, 5vw, 40px)/1.15 var(--serif); margin: 12px 0 14px; text-wrap: balance; }
.byline { font: 14px/1.4 var(--sans); color: var(--muted); margin-bottom: 22px; }
.figure { height: 220px; border-radius: 4px; margin: 0 0 22px; background: linear-gradient(135deg, #d9dbe3, #eef0f4); display: grid; place-items: center; font: 13px var(--sans); color: var(--muted); }
article p { margin: 0 0 18px; }
.source { font: 14px/1.5 var(--sans); color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.related { max-width: 680px; margin: 24px auto 0; padding: 0 16px; font: 14px/1.5 var(--sans); color: var(--muted); }
.related h2 { font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.related ul { padding-left: 18px; }

/* Integration panel: not part of the publisher page */
.panel { max-width: 900px; margin: 48px auto 0; background: var(--panel); color: var(--panel-ink); font: 14px/1.55 var(--sans); padding: 24px 20px 32px; border-radius: 12px 12px 0 0; }
.panel h2 { font: 700 18px/1.3 var(--sans); margin: 0 0 12px; }
.panel h3 { font: 700 14px/1.3 var(--sans); margin: 20px 0 8px; color: var(--panel-accent); text-transform: uppercase; letter-spacing: .06em; }
.panel p { margin: 0 0 8px; color: var(--panel-muted); }
.panel a { color: var(--panel-accent); }
.panel pre { background: #070a18; border: 1px solid var(--panel-line); border-radius: 8px; padding: 12px; overflow-x: auto; font: 12.5px/1.5 ui-monospace, Consolas, monospace; margin: 0; color: #cfd6ff; }
.links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.log { list-style: none; margin: 0; padding: 0; font: 12.5px/1.5 ui-monospace, Consolas, monospace; max-height: 260px; overflow: auto; border: 1px solid var(--panel-line); border-radius: 8px; }
.log li { padding: 6px 10px; border-bottom: 1px solid var(--panel-line); overflow-wrap: anywhere; }
.log li:last-child { border-bottom: 0; }
.log .ty { color: var(--panel-accent); font-weight: 700; }
.log .empty { color: var(--panel-muted); }