:root{ --bg:#ffffff; --fg:#111111; --fg-secondary:#444444; --accent:#3A6EA5; --pad:24px; font-synthesis-weight:none; } @media (prefers-color-scheme: dark){ :root{ --bg:#121212; --fg:#efefef; --fg-secondary:#c9c9c9; --accent:#A8C2FF; } } /* Optional true-black mode: add class="oled" to or */ .oled{ --bg:#000; --fg:#fff; --fg-secondary:#e0e0e0; --accent:#A8C2FF; } html,body{ height:100%; margin:0; background:var(--bg); color:var(--fg); font-family:"Source Serif 4",serif; } #root{ min-height:100%; box-sizing:border-box; padding:var(--pad); display:grid; place-items:center; text-align:center; gap:16px; } #logo{ width:120px; height:120px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.1)); } #quote{ max-width:80ch; line-height:1.4; font-size:1.375rem; /* ≈22px */ white-space:pre-wrap; /* honors \n from
replacements */ } #quote b.time{ font-weight:700; color:var(--accent); } #attribution{ max-width:80ch; font-size:1rem; color:var(--fg-secondary); } #attribution em{ font-style:italic; } /* tiny fullscreen toggle */ #fullscreen{ position:fixed; right:8px; bottom:8px; border:0; background:transparent; color:var(--fg-secondary); font-size:18px; cursor:pointer; }