:root{
    --bg-0:#141414;
    --bg-1:#1b1b1b;
    --muted:rgba(130, 130, 130, 0.35);
    --accent:#e10600;
  }

  *{ box-sizing:border-box }
  html,body{ height:100%; margin:0 }
  body{
    font: 500 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
    color:#eaeaea;
    background:
      radial-gradient(1200px 800px at 10% -10%, #1b1f21 0%, transparent 60%), radial-gradient(900px 600px at 120% 120%, #1a1a1a 0%, transparent 55%), linear-gradient(180deg, var(--bg-1), #020202);
    background-attachment: fixed;
    overflow: hidden;
  }

  /* subtle grain */
  body::before{
    content:"";
    position:fixed; inset:-10vmax;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.007) 0 2px, transparent 2px 4px);
    mix-blend-mode: soft-light; opacity:.6; pointer-events:none;
  }

  /* center logo (no box, no text) */
  .center{
    position:fixed; inset:0; display:grid; place-items:center; pointer-events:none;
  }
  .logo{
    width:min(380px, 80vw);
    height:auto;
    filter: drop-shadow(0 0 10px rgba(12, 3, 3, 0.35));
    user-select:none;
  }

  /* scattered message layer */
  .field{ position:fixed; inset:0; pointer-events:none }
  .msg{
    position:absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(.70rem, 1.35vw, .95rem);
    letter-spacing:.08em;
    color:#a0a0a0;
    opacity:.42;          /* more transparent by default */
    white-space:nowrap;
    filter: drop-shadow(0 0 6px rgba(0,0,0,.45));
    will-change: transform, opacity;
    transition: opacity .4s ease;
  }
  .msg--resolved{
    color:var(--muted);
    opacity:.82;          /* still lighter so footer stays readable */
    text-shadow:0 0 .6rem rgba(255,255,255,.06)
  }

  footer{
    position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
    font-size:.75rem; letter-spacing:.08em; color:#b5b5b5; opacity:.9;
    text-align:center;
  }
  footer a{ color:#e0e0e0; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25) }
  footer a:hover{ color:#fff }

  @media (prefers-reduced-motion: reduce){
    .msg{ transition:none }
  }