:root { --bg:#101218; --fg:#e8eef5; --muted:#a9b4c4; --card:#151a22; --accent:#5ee0a2; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--fg)}
main{position:relative; z-index:1; max-width:900px; margin:40px auto; padding:0 16px}
h1{font-weight:650; letter-spacing:0.2px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:24px 0}
.card{background:var(--card); border-radius:12px; padding:18px 16px; border:1px solid #263045}
.label{color:var(--muted); font-size:14px; margin-bottom:8px}
.value{font-size:42px; font-weight:700}
.note{color:var(--muted); font-size:13px}

/* Large, subtle background text layer */
#bg-text{
  position:fixed; inset:0; z-index:0; pointer-events:none; user-select:none;
  color:#fff; opacity:0.05; white-space:pre-wrap; line-height:1.6;
  padding:8vw 10vw; overflow:hidden; font-family:ui-serif, Georgia, serif;
  column-width:28ch; column-gap:3rem;
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}