:root{
  --dart-green:#309f6a;
  --dart-red:#e3292e;

  --bg:#0a0a0f;
  --panel:#12121a;
  --panel-2:#171723;

  --text:#f4f4f5;
  --muted:#a1a1aa;
  --dim:#7f8491;

  --border:#2a2a34;
  --border-strong:#3a3a46;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;

  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px;

  --shadow-sm:0 4px 12px rgba(0,0,0,.25);
  --shadow-md:0 12px 28px rgba(0,0,0,.35);
}

html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  line-height:1.55;
}
*,*::before,*::after{ box-sizing:inherit; }

a{ color:var(--dart-green); text-decoration:none; }
a:hover{ color:#fff; }

h1,h2,h3,h4,h5,h6{ margin:0 0 .5em 0; line-height:1.2; font-weight:800; }

main{ min-height:80vh; padding-bottom:40px; }

:focus-visible{
  outline:2px solid var(--dart-green);
  outline-offset:2px;
}