:root{--surface-fill:linear-gradient(180deg, color-mix(in oklab, var(--brand-ink) 9%, var(--card)), var(--card) 70%);--surface-wear:inset 0 0 0 1px var(--offer-panel-edge), var(--offer-panel-rest)}.dark[data-theme-mode=midnight]{--surface-fill:linear-gradient(180deg, color-mix(in oklab, var(--foreground) 3%, var(--card)), var(--card) 70%)}:root:not(.dark){--surface-fill:linear-gradient(180deg, var(--card), color-mix(in oklab, var(--brand-ink) 3%, var(--card)));--surface-wear:inset 0 0 0 1px rgb(var(--landing-ink-rgb) / .13), 0 1px 3px rgb(var(--landing-ink-rgb) / .08), 0 18px 40px -14px rgb(var(--landing-ink-rgb) / .3)}.surface{--surface-pad:1.25rem;border-radius:var(--radius-3xl);background:var(--surface-fill);box-shadow:var(--surface-wear);padding:var(--surface-pad);position:relative}@media (min-width:40rem){.surface{--surface-pad:2rem}}.surface[data-pad=snug]{--surface-pad:1rem}@media (min-width:40rem){.surface[data-pad=snug]{--surface-pad:1.5rem}}.surface[data-pad=none]{--surface-pad:0}.surface[data-lit],.surface[data-hover]:hover,.surface[data-hover]:focus-within,:root:not(.dark) .surface[data-lit],:root:not(.dark) .surface[data-hover]:hover,:root:not(.dark) .surface[data-hover]:focus-within{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--brand-ink) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--brand-ink) 18%, transparent), 0 18px 44px -18px color-mix(in oklab, var(--brand-ink) 55%, transparent)}@media (prefers-reduced-motion:no-preference){.surface[data-hover]{transition:translate .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease-out}.surface[data-hover]:hover{translate:0 -2px}}.overlay-surface .surface,:root:not(.dark) .overlay-surface .surface{box-shadow:none;background:0 0}.inset-surface{--feed-corner:0px}.inset-surface .surface,:root:not(.dark) .inset-surface .surface{border-radius:var(--card-radius);background:color-mix(in oklab, var(--muted) 45%, transparent);box-shadow:inset 0 0 0 1px var(--border);padding:1rem}@media not (min-width:40rem){.inset-surface .surface,:root:not(.dark) .inset-surface .surface{padding:.75rem}}.inset-surface .surface[data-lit],.inset-surface .surface[data-hover]:hover,.inset-surface .surface[data-hover]:focus-within,:root:not(.dark) .inset-surface .surface[data-lit],:root:not(.dark) .inset-surface .surface[data-hover]:hover,:root:not(.dark) .inset-surface .surface[data-hover]:focus-within{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--brand-ink) 45%, transparent);translate:none}.surface.open-surface,:root:not(.dark) .surface.open-surface{box-shadow:none;background:0 0;border-radius:0;padding:0}
