Ask Grok what’s happening now
96
/* Force single-scheme rendering so clients that honor color-scheme (Apple Mail, iOS Mail,
and Outlook web in part) skip the prefers-color-scheme: dark path and their auto-invert
heuristics have fewer signals to act on. */
:root {
color-scheme: normal;
supported-color-schemes: normal;
}
/* Type scale (px): sm 14/18 | base 16/21 | medium 24/29 | large 32/35 | display 48/48 */
/* Spacing tokens (between modules, applied via spacer rows): xs 7 | sm 10 | md 16 | lg 21 | xl 32 | section 52 */
/* Radius: 8px | Card pad: 12px | Buttons: pill (100px radius, VML roundrect in Outlook — resize VML width/height when copy changes) */
/* Palette: bg transparent | container transparent | text #000 | secondary #7D7C78 */
/* Borders: 5% #ECEBE8 | 10% #E0DFDD | 20% #C7C6C3 */
/* Resets */
body, table, td, div, p, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
p { margin: 0; mso-line-height-rule: exactly; }
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-collapse: collapse;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
}
/* Root — using #fefefe (not #ffffff) so Outlook.com / new Outlook's dark-mode
auto-invert heuristic doesn't pattern-match "pure white light background". */
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
background: #fefefe;
color: #000000;
}
.body-link { color: #000000; text-decoration: underline; }
/* Layout */
.wrapper {
width: 100%;
background: #fefefe;
padding: 21px 0;
}
/* Fluid hybrid container */
.container {
width: 100% !important;
max-width: 620px !important;
margin: 0 auto;
background: #fefefe;
}
.px-base {
padding-left: 25px;
padding-right: 25px;
}
.px-header {
padding-left: 15px;
padding-right: 15px;
}
/* Type scale */
.text-sm {
font-size: 14px;
line-height: 18px;
mso-line-height-rule: exactly;
}
.text-base {
font-size: 16px;
line-height: 21px;
mso-line-height-rule: exactly;
}
.text-medium {
font-size: 24px;
line-height: 29px;
mso-line-height-rule: exactly;
}
.text-large {
font-size: 32px;
line-height: 35px;
mso-line-height-rule: exactly;
}
.text-display {
font-size: 48px;
line-height: 48px;
mso-line-height-rule: exactly;
}
.text-code {
font-size: 14px;
line-height: 18px;
mso-line-height-rule: exactly;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.font-semibold { font-weight: 600; }
/* Colors */
.text-primary { color: #000000; }
.text-secondary { color: #7D7C78; }
/* Footer — same #808080 on links and body copy. -webkit-text-fill-color stops
iOS Mail / Apple Mail dark mode from restyling to a lighter link color. */
.footer-link,
.footer-link span,
.footer-text,
.footer-text span {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
}
.footer-link { text-decoration: none !important; }
/* iOS Mail / Gmail wrap street addresses in an ; pin them to footer gray, no underline. */
.footer-address,
.footer-address span,
.footer-address a,
a[x-apple-data-detectors] {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
text-decoration: none !important;
border-bottom: 0 !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Cards / metric cells — separated borders so Outlook honors border-radius */
.card-cell, .metric-cell {
border-collapse: separate !important;
border-spacing: 0;
}
.col-header { font-weight: normal; vertical-align: top; }
.hide-mobile { display: table-cell; }
/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table td,
.data-table th { vertical-align: top; }
.data-table th { border-bottom: 1px solid #E0DFDD; }
.data-table tr:not(:first-child):not(:last-child) td { border-bottom: 1px solid #E0DFDD; }
/* List markers — table-based list for Outlook */
.list-marker { width: 21px; vertical-align: top; }
/* Feature row inside a card (icon + title + description), divider between rows */
.feature-row-cell { vertical-align: top; }
.feature-icon-cell {
width: 18px;
padding-right: 12px;
vertical-align: top;
color: #000000;
}
.feature-divider-cell {
border-top: 1px solid #E0DFDD;
font-size: 1px;
line-height: 1px;
height: 1px;
}
/* MSO fixed heights so Outlook respects card height */
.mso-h-170 { mso-height-rule: exactly; height: 170px; }
.mso-h-209 { mso-height-rule: exactly; height: 209px; }
.mso-h-227 { mso-height-rule: exactly; height: 227px; }
/* Responsive gutters */
@media screen and (max-width: 620px) {
.px-base { padding-left: 20px !important; padding-right: 20px !important; }
.px-header { padding-left: 10px !important; padding-right: 10px !important; }
}
@media screen and (max-width: 520px) {
.px-base { padding-left: 16px !important; padding-right: 16px !important; }
.px-header { padding-left: 6px !important; padding-right: 6px !important; }
}
/* Mobile */
@media screen and (max-width: 479px) {
.wrapper { padding: 0; }
.container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.px-base { padding-left: 14px !important; padding-right: 14px !important; }
.px-header { padding-left: 4px !important; padding-right: 4px !important; }
.stack-2, .stack-3, .stack-2x { display: block !important; width: 100% !important; max-width: 100% !important; padding-bottom: 10px !important; }
.mso-h-170, .mso-h-209, .mso-h-227 { height: auto !important; }
.hide-mobile { display: none !important; }
.text-display { font-size: 42px !important; line-height: 42px !important; }
.text-large { font-size: 28px !important; line-height: 32px !important; }
.feature-icon-cell { display: block !important; width: auto !important; padding-right: 0 !important; padding-bottom: 16px !important; }
.feature-row-cell { display: block !important; width: 100% !important; }
}
u + .body .grok-logo-blend { display: block !important; }
u + .body .grok-logo-safe { display: none !important; }
/* Footer logo intentionally NOT blend-swapped: the wordmark is mid-gray, which is
legible on both light and dark backgrounds. difference-blending a gray asset
produces a darker, haloed result in Gmail dark mode (fuzzy "ghost" logo). */
@supports (mix-blend-mode: difference) {
.grok-logo-blend { display: block !important; }
.grok-logo-safe { display: none !important; }
}
[data-ogsc] .grok-logo-blend, [data-ogsb] .grok-logo-blend { display: none !important; }
[data-ogsc] .grok-logo-safe, [data-ogsb] .grok-logo-safe { display: none !important; }
[data-ogsc] .grok-logo-white, [data-ogsb] .grok-logo-white { display: block !important; }
[data-ogsc] .footer-logo-blend, [data-ogsb] .footer-logo-blend { display: none !important; }
[data-ogsc] .footer-logo-safe, [data-ogsb] .footer-logo-safe { display: none !important; }
[data-ogsc] .footer-logo-white, [data-ogsb] .footer-logo-white { display: block !important; }
u + .body .footer-link,
u + .body .footer-link span,
u + .body .footer-text,
u + .body .footer-text span,
u + .body .footer-address,
u + .body .footer-address span,
u + .body .footer-address a,
[data-ogsc] .footer-link, [data-ogsb] .footer-link,
[data-ogsc] .footer-link span, [data-ogsb] .footer-link span,
[data-ogsc] .footer-text, [data-ogsb] .footer-text,
[data-ogsc] .footer-text span, [data-ogsb] .footer-text span,
[data-ogsc] .footer-address, [data-ogsb] .footer-address,
[data-ogsc] .footer-address a, [data-ogsb] .footer-address a {
color: #808080 !important;
-webkit-text-fill-color: #808080 !important;
}
u + .body .footer-address a,
[data-ogsc] .footer-address a, [data-ogsb] .footer-address a {
text-decoration: none !important;
border-bottom: 0 !important;
}
/* Outlook.com / Outlook app dark mode — keep buttons legible and reveal the
(light-mode invisible) outlines so pills stay distinguishable on dark backgrounds. */
[data-ogsc] .btn-primary-td, [data-ogsb] .btn-primary-td { background-color: #000000 !important; border-color: #EDEBE4 !important; }
[data-ogsc] .btn-primary-a, [data-ogsb] .btn-primary-a { background-color: #000000 !important; color: #ffffff !important; }
[data-ogsc] .btn-primary-a span, [data-ogsb] .btn-primary-a span { color: #ffffff !important; }
[data-ogsc] .btn-secondary-a, [data-ogsb] .btn-secondary-a, [data-ogsc] .btn-secondary-a span, [data-ogsb] .btn-secondary-a span { color: #EDEBE4 !important; }
It checks the web and X before it answers.
It checks the web and X before it answers.
͏ ͏
Ask Grok what’s happening now
Grok searches the web and X before it answers. Start with a topic, a draft, or a screenshot, then keep going in the same thread.
•
Catch up on a topic. Ask for the latest and get an answer with sources.
•
Sharpen a draft. Paste an email or a paragraph and ask what’s weak before you send it.
•
Ask about a screenshot. Drop in whatever you’re looking at and ask what it means, or what to do next.
Push back, ask why, or change the ask. The context stays with you, so the next question doesn’t start from zero.
Ask Grok →
Ask Grok →
Privacy Policy ·
Terms of Service ·
Help
© 2026 SpaceXAI LLC.
800 W Cesar Chavez St., Austin, TX 78701, USA.
Unsubscribe
